/* ══════════════════════════════════════════════════════════════════
 * 🎁 T46 三个弹层：邀请 / 账单 / 任务
 * 全部基于 design-system.css 的 token，果冻进出场统一
 * ══════════════════════════════════════════════════════════════════ */

/* ---------- 通用遮罩 ---------- */
.st-modal-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-modal-mask.is-open{opacity:1; pointer-events:auto; animation:mdMaskIn .3s ease forwards}
.st-modal-mask.is-closing{animation:mdMaskOut .26s ease forwards}
@keyframes mdMaskIn{from{opacity:0}to{opacity:1}}
@keyframes mdMaskOut{from{opacity:1}to{opacity:0}}

/* ---------- 通用卡片 ---------- */
.st-modal-card{
  width:100%; max-width:440px; max-height:80vh;
  display:flex; flex-direction:column;
  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-modal-mask.is-open .st-modal-card{
  animation:mdJellyIn .68s cubic-bezier(.18,1.75,.34,1) forwards;
}
.st-modal-mask.is-closing .st-modal-card{
  animation:mdJellyOut .3s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes mdJellyIn{
  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);}
  100%{opacity:1; transform:scale(1) translateY(0);}
}
@keyframes mdJellyOut{
  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-modal-card.is-wide{max-width:620px}

/* ---------- 头部 ---------- */
.st-md-head{
  flex:none;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:22px 22px 14px;
}
.st-md-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-md-sub{
  margin-top:3px; font-size:11.5px; line-height:1.5;
  color:rgba(26,26,26,.46);
}
.st-md-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 cubic-bezier(.24,1.6,.35,1);
}
.st-md-close:hover{background:rgba(120,100,160,.16); transform:scale(1.06)}
.st-md-close:active{transform:scale(.94)}

/* ---------- 内容区 ---------- */
.st-md-body{
  flex:1; min-height:0; overflow-y:auto;
  padding:0 22px 18px;
  scrollbar-width:thin;
}

/* ---------- 邀请：邀请码卡 ---------- */
.st-inv-code-box{
  padding:16px 18px; margin-bottom:14px;
  border-radius:18px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 8px),
    linear-gradient(135deg,rgba(205,111,71,.9),rgba(168,83,47,.85));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 14px rgba(205,111,71,.3);
}
.st-inv-code-label{
  font-size:10.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; opacity:.8; margin-bottom:7px;
}
.st-inv-code-value{
  display:flex; align-items:center; gap:10px;
}
.st-inv-code-text{
  flex:1; min-width:0;
  font-family:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  font-size:22px; font-weight:800; letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.16);
}
.st-inv-copy{
  flex:none; height:32px; padding:0 14px;
  border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.22);
  color:#fff; font:inherit; font-size:12px; font-weight:700; line-height:32px;
  transition:background .2s, transform .3s cubic-bezier(.24,1.6,.35,1);
}
.st-inv-copy:hover{background:rgba(255,255,255,.34); transform:translateY(-1px)}
.st-inv-copy:active{transform:scale(.96)}

/* 邀请统计 */
.st-inv-stats{
  display:flex; gap:8px; margin-bottom:14px;
}
.st-inv-stat{
  flex:1; padding:12px 10px; text-align:center;
  border-radius:14px;
  border:1px solid rgba(120,100,160,.14);
  background:#fff;
}
.st-inv-stat b{
  display:block; font-size:18px; font-weight:800;
  color:#1a1a1a; line-height:1.2;
}
.st-inv-stat span{
  display:block; margin-top:2px;
  font-size:10.5px; color:rgba(26,26,26,.46);
}

/* 邀请记录 */
.st-inv-list{display:flex; flex-direction:column; gap:6px}
.st-inv-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(120,100,160,.05);
  font-size:12px;
}
.st-inv-item-name{flex:1; min-width:0; color:rgba(26,26,26,.68);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-inv-item-time{flex:none; font-size:10.5px; color:rgba(26,26,26,.4)}
.st-inv-item-quota{flex:none; font-weight:700; color:#c2522f}

/* 邀请规则 */
.st-inv-rule{
  margin-top:14px; padding:12px 14px;
  border-radius:14px;
  background:rgba(205,111,71,.06);
  border:1px solid rgba(205,111,71,.16);
  font-size:11.5px; line-height:1.7;
  color:rgba(26,26,26,.62);
}
.st-inv-rule b{color:#c2522f}

/* ---------- 账单：表格 ---------- */
.st-bill-tabs{
  display:flex; gap:6px; margin-bottom:12px;
  overflow-x:auto; scrollbar-width:none;
}
.st-bill-tabs::-webkit-scrollbar{display:none}
.st-bill-tab{
  flex:none; height:28px; padding:0 13px;
  border-radius:999px; cursor:pointer;
  border:1px solid rgba(120,100,160,.16);
  background:#fff; color:rgba(26,26,26,.68);
  font:inherit; font-size:11.5px; font-weight:600; line-height:28px;
  transition:all .2s;
}
.st-bill-tab:hover{border-color:rgba(205,111,71,.36); color:#c2522f}
.st-bill-tab.is-on{
  background:linear-gradient(150deg,#f7a878,#e0673f);
  border-color:transparent; color:#fff;
  box-shadow:0 2px 8px rgba(224,103,63,.28);
}

.st-bill-list{display:flex; flex-direction:column; gap:5px}
.st-bill-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:13px;
  border:1px solid rgba(120,100,160,.1);
  background:#fff;
  font-size:12px;
  transition:background .16s;
}
.st-bill-item:hover{background:rgba(120,100,160,.035)}
.st-bill-type{
  flex:none; width:44px; height:22px;
  display:grid; place-items:center;
  border-radius:6px;
  font-size:10px; font-weight:700;
  background:rgba(120,100,160,.1); color:rgba(26,26,26,.62);
}
.st-bill-type.is-consume{background:rgba(194,58,82,.1); color:#c23a52}
.st-bill-type.is-topup{background:rgba(45,180,120,.12); color:#1f8f5f}
.st-bill-type.is-system{background:rgba(120,100,160,.1); color:rgba(26,26,26,.62)}
.st-bill-main{flex:1; min-width:0}
.st-bill-main b{
  display:block; font-weight:600; color:#1a1a1a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-bill-main small{display:block; margin-top:1px; font-size:10.5px; color:rgba(26,26,26,.4)}
.st-bill-amount{flex:none; font-weight:700; font-size:13px; color:#c23a52}
.st-bill-amount.is-plus{color:#1f8f5f}

.st-bill-empty{
  padding:40px 20px; text-align:center;
  font-size:12.5px; color:rgba(26,26,26,.4);
}

/* 账单汇总 */
.st-bill-sum{
  display:flex; gap:8px; margin-bottom:12px; padding:12px 14px;
  border-radius:14px;
  background:rgba(120,100,160,.05);
}
.st-bill-sum-item{flex:1; text-align:center}
.st-bill-sum-item b{display:block; font-size:16px; font-weight:800; color:#1a1a1a}
.st-bill-sum-item span{display:block; margin-top:2px; font-size:10.5px; color:rgba(26,26,26,.46)}

/* ---------- 任务列表 ---------- */
.st-task-list{display:flex; flex-direction:column; gap:8px}
.st-task-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 15px; border-radius:16px;
  border:1px solid rgba(120,100,160,.12);
  background:#fff;
  transition:border-color .2s;
}
.st-task-item.is-done{
  background:rgba(120,100,160,.035);
  border-color:rgba(120,100,160,.08);
}
.st-task-ic{
  flex:none; width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,#e08b62,#cd6f47 55%,#a8532f);
  color:#fff; font-size:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(205,111,71,.26);
}
.st-task-item.is-done .st-task-ic{
  background:rgba(120,100,160,.14);
  color:rgba(26,26,26,.4);
  box-shadow:none;
}
.st-task-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.st-task-name{
  display:block;
  font-size:13px; font-weight:600; color:#1a1a1a; line-height:1.3;
}
.st-task-desc{
  display:block;
  font-size:11px; color:rgba(26,26,26,.46); line-height:1.4;
}
.st-task-reward{
  flex:none; font-size:12px; font-weight:700; color:#c2522f;
}
.st-task-btn{
  flex:none; height:30px; padding:0 14px;
  border-radius:999px; cursor:pointer;
  border:0;
  background:linear-gradient(150deg,#f7a878,#e0673f);
  color:#fff; font:inherit; font-size:11.5px; font-weight:700; line-height:30px;
  transition:transform .3s cubic-bezier(.24,1.6,.35,1), filter .2s;
}
.st-task-btn:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.04)}
.st-task-btn:active:not(:disabled){transform:scale(.96)}
.st-task-btn:disabled{
  background:rgba(120,100,160,.12);
  color:rgba(26,26,26,.38);
  cursor:not-allowed;
}

/* 移动端 */
@media (max-width:520px){
  .st-modal-card{max-width:100%; border-radius:22px; max-height:85vh}
  .st-md-head{padding:18px 18px 12px}
  .st-md-title{font-size:17px}
  .st-md-body{padding:0 18px 16px}
  .st-inv-code-text{font-size:19px}
  .st-inv-stat b{font-size:16px}
  .st-bill-item{padding:10px 11px}
}

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