/* ══════════════════════════════════════════════════════════════════
 * 🎁 T45 签到弹层 —— 对齐 image2pro.top 的 #checkinMask
 *
 * 对标站结构（从 CSS 规则提取）：
 *   #checkinMask.show         animation: ciMaskIn .32s ease forwards
 *   #checkinMask.show .checkin-card
 *                             animation: ciJellyIn .68s cubic-bezier(.18,1.75,.34,1) forwards
 *   #checkinMask.hiding       animation: ciMaskOut .28s ease forwards
 *   #checkinMask.hiding .checkin-card
 *                             animation: ciJellyOut .30s cubic-bezier(.4,0,.6,1) forwards
 *   .checkin-card             max-width 380px
 *   .checkin-inner            padding 22px 22px 18px
 *   .pf-checkin               repeating-linear-gradient 斜纹 + 青紫渐变
 *                             box-shadow inset 0 1px 0 rgba(255,255,255,.28),0 3px 14px rgba(50,150,190,.32)
 *
 * 果冻进出场关键帧（实测）：
 *   ciJellyIn:  scale(.55) translateY(44) → scale(1.12) translateY(-14)
 *               → scale(.93) translateY(6) → scale(1.038) translateY(-2)
 *               → scale(.986) translateY(1) → scale(1) translateY(0)
 *   ciJellyOut: scale(1) → scale(1.08) translateY(-10) → scale(.58) translateY(48)
 * ══════════════════════════════════════════════════════════════════ */

/* ---------- 遮罩 ---------- */
.st-checkin-mask{
  position:fixed; inset:0; z-index:9900;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(30,26,22,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
}
.st-checkin-mask.is-open{
  opacity:1; pointer-events:auto;
  animation:ciMaskIn .32s ease forwards;
}
.st-checkin-mask.is-closing{
  animation:ciMaskOut .28s ease forwards;
}
@keyframes ciMaskIn{from{opacity:0}to{opacity:1}}
@keyframes ciMaskOut{from{opacity:1}to{opacity:0}}

/* ---------- 卡片 ---------- */
.st-checkin-card{
  width:100%; max-width:380px;
  border-radius:24px;
  background:linear-gradient(165deg,#fffdfa 0%,#fdfaf5 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 24px 60px rgba(60,45,110,.24),
    0 6px 18px rgba(60,45,110,.14);
  overflow:hidden;
  transform:scale(.55) translateY(44px);
  opacity:0;
}
.st-checkin-mask.is-open .st-checkin-card{
  animation:ciJellyIn .68s cubic-bezier(.18,1.75,.34,1) forwards;
}
.st-checkin-mask.is-closing .st-checkin-card{
  animation:ciJellyOut .30s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes ciJellyIn{
  0%  {opacity:0; transform:scale(.55) translateY(44px);}
  28% {opacity:1; transform:scale(1.12) translateY(-14px);}
  48% {transform:scale(.93) translateY(6px);}
  64% {transform:scale(1.038) translateY(-2px);}
  78% {transform:scale(.986) translateY(1px);}
  90% {transform:scale(1.007) translateY(0);}
  100%{opacity:1; transform:scale(1) translateY(0);}
}
@keyframes ciJellyOut{
  0%  {opacity:1; transform:scale(1) translateY(0);}
  15% {transform:scale(1.08) translateY(-10px);}
  48% {opacity:0; transform:scale(.58) translateY(48px);}
  100%{opacity:0; transform:scale(.58) translateY(48px);}
}

/* ---------- 卡片内部 ---------- */
.st-ci-inner{padding:22px 22px 18px}

.st-ci-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.st-ci-title{
  font-family:Georgia,"Source Han Serif SC","Songti SC",serif;
  font-size:19px; font-weight:700; line-height:1.25;
  color:#1a1a1a; letter-spacing:-.01em;
}
.st-ci-sub{
  margin-top:3px; font-size:11.5px; line-height:1.5;
  color:rgba(26,26,26,.46);
}
.st-ci-close{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:0; background:rgba(120,100,160,.09);
  color:rgba(26,26,26,.68); font-size:15px; line-height:1;
  transition:background .18s, transform .3s var(--jelly-ease-soft);
}
.st-ci-close:hover{background:rgba(120,100,160,.16); transform:scale(1.06)}
.st-ci-close:active{transform:scale(.94)}

/* 奖励展示 */
.st-ci-reward{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; margin-bottom:14px;
  border-radius:18px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0px,rgba(255,255,255,.07) 2px,transparent 2px,transparent 8px),
    linear-gradient(135deg,rgba(45,205,180,.92),rgba(90,95,235,.84));
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 3px 14px rgba(50,150,190,.32);
}
.st-ci-reward-ic{
  flex:none; font-size:30px; line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
.st-ci-reward-body{flex:1; min-width:0}
.st-ci-reward-amt{
  font-size:24px; font-weight:800; line-height:1.1;
  letter-spacing:-.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.st-ci-reward-amt small{font-size:13px; font-weight:600; opacity:.9; margin-left:3px}
.st-ci-reward-desc{
  margin-top:3px; font-size:11.5px; line-height:1.4; opacity:.88;
}

/* 状态：已签到 */
.st-ci-reward.is-done{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0px,rgba(255,255,255,.06) 2px,transparent 2px,transparent 8px),
    linear-gradient(135deg,rgba(160,160,160,.55),rgba(120,120,120,.5));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 3px 14px rgba(100,100,100,.2);
}

/* 连续天数 */
.st-ci-streak{
  display:flex; gap:6px; margin-bottom:16px;
}
.st-ci-day{
  flex:1; height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  border-radius:12px;
  border:1px solid rgba(120,100,160,.14);
  background:#fff;
  color:rgba(26,26,26,.46);
  font-size:10px; line-height:1.2;
  transition:all .2s ease;
}
.st-ci-day b{
  font-size:12px; font-weight:700; color:rgba(26,26,26,.68);
}
.st-ci-day.is-done{
  border-color:rgba(205,111,71,.3);
  background:rgba(205,111,71,.08);
  color:#c2522f;
}
.st-ci-day.is-done b{color:#c2522f}
.st-ci-day.is-today{
  border-color:rgba(205,111,71,.5);
  background:linear-gradient(150deg,#f7a878,#e0673f);
  color:#fff;
  box-shadow:0 2px 8px rgba(224,103,63,.3);
}
.st-ci-day.is-today b{color:#fff}

/* 按钮 */
.st-ci-btn{
  width:100%; height:46px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:14px; cursor:pointer; border:0;
  background:linear-gradient(150deg,#f7a878,#e0673f 60%,#d95d36);
  color:#fff;
  font:inherit; font-size:14px; font-weight:700; line-height:1;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.38),
    0 6px 18px rgba(224,103,63,.32);
  transition:transform .3s var(--jelly-ease-soft), filter .2s;
}
.st-ci-btn:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.04)}
.st-ci-btn:active:not(:disabled){transform:scale(.98)}
.st-ci-btn:disabled{
  background:rgba(140,120,95,.14);
  color:rgba(26,26,26,.4);
  box-shadow:none;
  cursor:not-allowed;
}

/* 规则说明 */
.st-ci-note{
  margin-top:11px; text-align:center;
  font-size:10.5px; line-height:1.5;
  color:rgba(26,26,26,.4);
}

/* 移动端 */
@media (max-width:480px){
  .st-checkin-card{max-width:100%; border-radius:22px}
  .st-ci-inner{padding:18px 18px 16px}
  .st-ci-title{font-size:17px}
  .st-ci-reward{padding:14px 15px; margin-bottom:12px}
  .st-ci-reward-amt{font-size:21px}
  .st-ci-day{height:44px}
  .st-ci-btn{height:44px; font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .st-checkin-mask, .st-checkin-mask.is-open, .st-checkin-mask.is-closing,
  .st-checkin-card, .st-checkin-mask.is-open .st-checkin-card,
  .st-checkin-mask.is-closing .st-checkin-card{
    animation:none!important;
    opacity:1;
    transform:none;
  }
  .st-checkin-mask:not(.is-open){display:none}
}