/* ===== 通用组件 ===== */

/* 文本 */
.h1{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.5px}
.h2{font-family:var(--font-display);font-size:17px;font-weight:700}
.h3{font-size:14px;font-weight:600}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.tiny{font-size:10px;line-height:1.4}
.sm{font-size:12px}
.gold{color:var(--gold-2)}
.violet{color:var(--violet-2)}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}

/* 页面骨架（子页面通用） */
.page{min-height:100%;padding-bottom:24px;background:
  radial-gradient(560px 380px at 50% -6%, rgba(124,92,255,.26), transparent 60%),
  linear-gradient(180deg,#120925,#0a0517 42%,#080411);}
.page-head{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  height:52px;padding:0 14px;
  background:linear-gradient(180deg,rgba(12,6,24,.94),rgba(12,6,24,.72) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.page-head .ph-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px}
.page-head .ph-sub{font-size:10px;color:var(--text-3);margin-top:-2px}
.icon-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line-soft);color:var(--text-1);flex:none}
.icon-btn.fill{background:rgba(185,167,255,.10);border-color:var(--line)}
.page-body{padding:2px 14px 0}
.page-hint{font-size:10px;color:var(--text-3);padding:8px 2px 0;line-height:1.6}

/* 卡片 */
.card{
  position:relative;border-radius:var(--r-m);padding:14px;
  background:var(--card);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.card.gold{background:var(--card-gold);border-color:var(--line)}
.card.violet{background:linear-gradient(165deg,rgba(124,92,255,.20),rgba(124,92,255,.04) 60%,rgba(255,255,255,.02));border-color:rgba(167,139,250,.28)}
.card + .card{margin-top:12px}
.card-title{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.5px}
.card-title .line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.card-sub{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.6}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.card-hd .h3{letter-spacing:.5px}
.section{margin-top:16px}
.section-head{display:flex;align-items:center;gap:8px;margin:0 2px 10px}
.section-head .sh-bar{width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));box-shadow:0 0 8px rgba(185,167,255,.5)}
.section-head .sh-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.8px}
.section-head .sh-sub{font-size:10px;color:var(--text-3);margin-left:auto}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 18px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,#b3a2ff,#7c5cff 58%,#6446e0);
  box-shadow:0 6px 20px rgba(124,92,255,.42),inset 0 1px 0 rgba(255,255,255,.28);
  border:1px solid rgba(205,191,255,.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.disabled{filter:grayscale(.4) brightness(.7);box-shadow:none;pointer-events:none;color:rgba(255,255,255,.55)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--gold-2);border:1px solid var(--line);box-shadow:none}
.btn.violet{background:linear-gradient(135deg,#b9a2ff,#7c5cff);color:#fff;border-color:rgba(215,196,255,.7);box-shadow:0 4px 18px rgba(124,92,255,.4)}
.btn.sm{height:30px;padding:0 12px;font-size:11px}
.btn.xs{height:24px;padding:0 10px;font-size:10px;font-weight:500}
.btn.block{width:100%}
.btn.text{padding:0 6px;height:auto;background:none;color:var(--gold-2);box-shadow:none;border:0}
.btn-line{border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;font-size:11px;color:var(--gold-2);background:rgba(185,167,255,.06)}

/* 标签 / 芯片 */
.chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 9px;border-radius:var(--r-pill);
  font-size:10px;color:var(--gold-2);background:rgba(185,167,255,.10);border:1px solid var(--line);white-space:nowrap}
.chip.violet{color:var(--violet-1);background:rgba(124,92,255,.16);border-color:rgba(167,139,250,.35)}
.chip.dim{color:var(--text-3);background:rgba(255,255,255,.04);border-color:var(--line-soft)}
.chip.red{color:#ffc4e2;background:rgba(240,168,208,.12);border-color:rgba(240,168,208,.32)}
.chip.green{color:var(--violet-1);background:rgba(185,167,255,.12);border-color:rgba(185,167,255,.30)}
.chip.solid{background:linear-gradient(135deg,#b3a2ff,#7c5cff);color:#fff;border-color:transparent;font-weight:700}
.status-chip{height:19px;padding:0 8px;font-size:10px;border-radius:6px}
.chip.live{color:#fff;background:linear-gradient(90deg,#f0a8d0,#a893ff);border:0}
.chip.live:before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}

/* 头像 */
.avatar{
  --sz:40px;
  width:var(--sz);height:var(--sz);border-radius:50%;flex:none;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(var(--sz) * .54);line-height:1;
  background:linear-gradient(140deg,var(--g1,#5b2ea8),var(--g2,#1a0d33));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.35);
  overflow:visible;user-select:none;
}
.avatar .em{transform:translateY(1px);filter:saturate(1.05)}
.avatar.lg{font-size:calc(var(--sz) * .5)}
.avatar.ring:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(185,167,255,.75);box-shadow:0 0 10px rgba(185,167,255,.45)}
.avatar.live:before{
  content:"LIVE";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) scale(.72);
  font-size:8px;font-weight:700;letter-spacing:.3px;color:#fff;background:linear-gradient(90deg,#ff5b8a,#ff8a4d);
  padding:1px 4px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);white-space:nowrap;
}
.avatar .crown-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:11px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.avatar .guard-badge{position:absolute;right:-3px;bottom:-3px;font-size:9px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e6ddff,#8b7bff);color:#150c2b}
.avatar-group{display:flex;align-items:center}
.avatar-group .avatar{margin-left:-6px;border:1.5px solid #150a27}
.avatar-group .avatar:first-child{margin-left:0}
.avatar-group .more{width:22px;height:22px;border-radius:50%;margin-left:-6px;background:rgba(255,255,255,.10);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-2)}

/* 分段控件 */
.seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--line-soft)}
.seg-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:6px 8px;border-radius:var(--r-pill);font-size:12px;color:var(--text-2);white-space:nowrap;transition:.18s}
.seg-item small{font-size:9px;color:var(--text-3);line-height:1}
.seg-item.active{background:linear-gradient(135deg,#b3a2ff,#7c5cff);color:#fff;font-weight:700;box-shadow:0 2px 14px rgba(124,92,255,.4)}
.seg-item.active small{color:rgba(255,255,255,.66)}
.seg-item[disabled]{opacity:.38}

/* 进度条 */
.progress{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.progress .bar{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#7c5cff,#c6a7ff 50%,#d9cfff);box-shadow:0 0 10px rgba(198,167,255,.5);transition:width .4s ease}
.progress.gold .bar{background:linear-gradient(90deg,#7c5cff,#d9cfff)}
.progress.lg{height:9px}
.progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text-3);margin-bottom:5px}

/* 榜单通用 */
.rank-list{display:flex;flex-direction:column;gap:6px}
.rank-row{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:13px;
  background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.05);position:relative;
}
.rank-row.t1{background:linear-gradient(120deg,rgba(185,167,255,.22),rgba(185,167,255,.05) 48%,rgba(124,92,255,.10));border-color:rgba(185,167,255,.42);box-shadow:0 0 18px rgba(185,167,255,.12)}
.rank-row.t2{background:linear-gradient(120deg,rgba(215,226,255,.16),rgba(215,226,255,.03) 50%,rgba(124,92,255,.08));border-color:rgba(215,226,255,.30)}
.rank-row.t3{background:linear-gradient(120deg,rgba(169,233,255,.14),rgba(169,233,255,.03) 50%,rgba(124,92,255,.08));border-color:rgba(169,233,255,.28)}
.rank-no{width:26px;text-align:center;flex:none;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-2);position:relative}
.rank-row.t1 .rank-no{color:#fff}
.rank-row.t2 .rank-no{color:#e3ddff}
.rank-row.t3 .rank-no{color:#d3ecff}
.rank-arrow{position:absolute;left:-4px;top:50%;transform:translateY(-50%);font-size:9px;line-height:1;width:12px;text-align:center}
.rank-arrow.up{color:#ff6b8b}
.rank-arrow.down{color:#7ce3b1}
.rank-main{flex:1;min-width:0}
.rank-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px;line-height:1.3}
.rank-name .tag{font-size:9px;color:var(--text-3);font-weight:400}
.rank-value{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--gold-2);text-align:right;white-space:nowrap;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.rank-value small{font-size:9px;color:var(--text-3);font-family:var(--font-body);font-weight:400;margin-left:2px;display:block}
.rank-guard{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding-left:9px;border-left:1px solid var(--line-soft);min-width:56px;max-width:64px}
.rank-guard .label{font-size:8px;color:var(--text-3);line-height:1;white-space:nowrap}
.rank-guard .name{font-size:9px;color:var(--text-2);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.rank-foot{text-align:center;font-size:10px;color:var(--text-4);padding:10px 0 4px;letter-spacing:.3px}

/* 列表 */
.list{display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.list-item:last-child{border-bottom:0}
.list-item .li-body{flex:1;min-width:0}
.list-item .li-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.list-item .li-sub{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.5}
.list-item .li-right{flex:none;text-align:right}

/* 空态 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:56px 20px;text-align:center}
.empty .em{font-size:34px;filter:drop-shadow(0 4px 14px rgba(124,92,255,.4))}
.empty .t{font-size:13px;color:var(--text-2);font-weight:500}
.empty .s{font-size:10px;color:var(--text-3);line-height:1.7;max-width:240px}

/* 表格 */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.table th{font-weight:500;color:var(--text-3);text-align:left;padding:7px 6px;border-bottom:1px solid var(--line-soft);font-size:10px;white-space:nowrap}
.table td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-2);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table td.hl{color:var(--gold-2);font-weight:600}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 提示条 */
.note{display:flex;gap:8px;padding:9px 11px;border-radius:11px;background:rgba(124,92,255,.10);border:1px solid rgba(167,139,250,.22);font-size:10px;color:var(--violet-1);line-height:1.7}
.note.warn{background:rgba(255,180,107,.09);border-color:rgba(255,180,107,.22);color:#ffd9b0}
.note .ni{flex:none}

/* 底部固定条 */
.bottom-bar{position:sticky;bottom:0;left:0;right:0;z-index:18;padding:12px 14px calc(12px + var(--safe-b));
  background:linear-gradient(180deg,rgba(5,3,10,0),rgba(5,3,10,.86) 26%,rgba(5,3,10,.98));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;gap:10px}
.bottom-bar .btn{flex:1}

/* 底部 CTA（站外） */
.share-cta{position:sticky;bottom:0;z-index:25;padding:10px 14px calc(12px + var(--safe-b));
  background:linear-gradient(180deg,rgba(8,4,17,.2),rgba(8,4,17,.96) 40%);display:flex;align-items:center;gap:10px}
.share-cta .sc-text{flex:1;font-size:10px;color:var(--text-3);line-height:1.5}

/* 浮层 / 弹层 */
.overlay{position:absolute;inset:0;z-index:40;pointer-events:none}
.overlay > *{pointer-events:auto}
.sheet-mask{position:absolute;inset:0;background:rgba(3,1,8,.68);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;z-index:40;animation:fadeIn .2s ease}
.sheet{
  width:100%;max-height:84%;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 16px calc(18px + var(--safe-b));
  background:radial-gradient(560px 300px at 50% -10%,rgba(124,92,255,.34),transparent 70%),linear-gradient(180deg,#23123f,#100822 62%,#0a0515);
  border-radius:24px 24px 0 0;border-top:1px solid rgba(185,167,255,.35);
  box-shadow:0 -16px 40px rgba(0,0,0,.6);animation:slideUp .28s cubic-bezier(.22,.9,.3,1)
}
.sheet-grip{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);margin:6px auto 12px}
.sheet-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.sheet-head .sh-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.5px}
.sheet-head .sh-sub{font-size:10px;color:var(--text-3);margin-top:3px;line-height:1.6}
.sheet-head .close{margin-left:auto;margin-top:-2px}
.sheet-body{font-size:12px;color:var(--text-2);line-height:1.7}
.sheet-foot{display:flex;gap:10px;margin-top:14px}
.sheet-foot .btn{flex:1}
.sheet-full{max-height:92%;height:92%}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* toast */
.toast-wrap{position:absolute;left:0;right:0;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none}
.toast{
  max-width:78%;padding:9px 16px;border-radius:var(--r-pill);font-size:12px;color:var(--text-1);
  background:rgba(20,11,36,.92);border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);animation:toastIn .22s ease;text-align:center;line-height:1.5
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 通用动效 */
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 16px rgba(185,167,255,.25)}50%{box-shadow:0 0 30px rgba(185,167,255,.55)}}
.sparkle{position:absolute;border-radius:50%;background:#fff;pointer-events:none;animation:twinkle 2.6s ease-in-out infinite}