/* SC-8 球星卡页的样式表 = 原型 docs/design/trade-v2-prototypes/b-cards-apif.html 的 <style> 剔掉 .demo 演示控制条，
   再加三页外壳（账户位登录按钮、状态位 amber 色、无 provider 时的两条建议与深链按钮，逐字照 wallet.css）。
   由 tests/starcardsV2Styles.test.js 双向逐字节比对钉住：原型一个值都不许改，外壳与 wallet.css 一个值都不许改。
   原型的设计史注释与 Google Fonts 外链不搬：本站不引外部来源，字体全部自托管（下面四段 @font-face）。

   字体（SC-8 卡 §3.3）：
   - Sora：沿用 public/trade/fonts/sora-*.woff2，两段 @font-face 逐字照 wallet.css。
   - 得意黑（Smiley Sans，只给球星名）与 Noto Sans SC（可变字重 100–900 一个文件，不带 unicode-range）：
     源 TTF 在 ~/openfifa-assets/star-cards/fonts/（SmileySans-Oblique.ttf、NotoSansSC-VF.ttf，均 OFL 1.1，
     许可全文在同目录 OFL-SmileySans.txt / OFL-NotoSansSC.txt）。用 fontTools 子集化成 WOFF（zlib；
     出 woff2 要 Python 的 brotli 模块，本机没装）：
       PY=~/openfifa-assets/vtoonify-venv/bin/python
       $PY -m fontTools.subset <TTF> --text-file=<字表> --flavor=woff --layout-features='*' --name-IDs='*' --output-file=public/trade/fonts/<名>.woff
     字表（临时目录里生成，不入库）：
       Noto   = starcards_v2.html、public/trade/starcards.js、public/trade/wallet-connect.js、src/starCards/service.js
                全文（含注释）里码位 > 0x7E 的全部字符 + src/starCards/roster-s1.json 先做 JSON 解析、再取每一行每个字符串
                字段里码位 > 0x7E 的全部字符 + 全部 ASCII 可打印字符（SC-7 卡 §6.6 重跑：补上 → ⇄ ≈ ✓ 与名单里的西里尔 С）；
       得意黑 = 名单全部 zh + 「盲盒？」+ 全部 ASCII 可打印字符 +「·」。
     子集是一次性的：以后新增的页面或服务端中文文案有字不在子集里，会回落到系统字体，碰文案的卡要重跑这两条命令。 */

@font-face{font-family:Sora;font-style:normal;font-weight:400 800;font-display:swap;
src:url("/public/trade/fonts/sora-latin-ext-v17.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Sora;font-style:normal;font-weight:400 800;font-display:swap;
src:url("/public/trade/fonts/sora-latin-v17.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Smiley Sans";src:url("/public/trade/fonts/smiley-sans-oblique-s1.woff") format("woff");font-display:swap}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:100 900;font-display:swap;src:url("/public/trade/fonts/noto-sans-sc-s1.woff") format("woff")}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0c11; --surface:#14161f; --card:#1b1d27; --edge:#282b39; --edge2:#343849;
  --fg:#eef0f7; --dim:#9096ab; --faint:#666c82;
  --up:#3ddc97; --down:#ff5d73; --gold:#ffc94d; --accent:#8b8fff;
  --tb:#e3b341; /* 出战卡的 bright：分池条的品质段从它取 */
}
html,body{background:var(--bg);color:var(--fg);font-family:Sora,"Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:90px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
.up{color:var(--up)} .down{color:var(--down)}

.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;height:60px;padding:0 22px;
  background:rgba(11,12,17,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)}
.brand{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:17px}
.brand i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--up),#7cf5c6);color:#04120e;font-size:13px;font-weight:800}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--dim);transition:.16s}
.nav a:hover{color:var(--fg)} .nav a.on{background:var(--surface);color:var(--fg)}
.mobilenav{display:none}
.top .acct{margin-left:auto;flex:none;display:flex;align-items:center;gap:9px}
.top .acct .addr{font-size:13px;font-weight:700;color:var(--dim);text-decoration:none;font-variant-numeric:tabular-nums}

.page{max-width:820px;margin:0 auto;padding:26px 22px 0}
h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}

.note{display:flex;gap:9px;padding:11px 13px;border-radius:12px;margin-bottom:12px;font-size:12px;line-height:1.6}
.note .mk{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800}
.note.grey{background:#191b24;border:1px solid var(--edge);color:var(--dim)}
.note.grey .mk{background:#2a2d3a;color:var(--dim)}
.note b{color:var(--fg)}
.note[hidden]{display:none}

/* hero：出战卡缩略 + 今日体力 */
.hero{border-radius:20px;border:1px solid var(--edge);background:var(--surface);padding:22px;margin-bottom:14px}
.hero .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.hero .total{font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.hero .total small{font-size:22px;color:var(--faint);letter-spacing:0;font-weight:700}
.hero .acts{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.hero .acts button{padding:11px 18px;border-radius:12px;font-size:14px;font-weight:700;transition:.16s}
.hero .acts .primary{background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f}
.hero .acts .primary:hover{filter:brightness(1.06)}
.hero .acts .ghost{border:1px solid var(--edge2);color:var(--fg)}
.hero .acts .ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero .acts button:disabled{opacity:.5;cursor:default}
.energy{display:flex;gap:18px;align-items:flex-start}
.energy .thumb{flex:none;width:104px}
.energy .body{min-width:0;flex:1}
.energy .who{font-size:13px;font-weight:700;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.energy .who em{font-style:normal;font-size:10px;padding:2px 7px;border-radius:999px;background:#2a2d3a;color:var(--dim);letter-spacing:.06em;font-weight:600}
.bar{margin-top:12px;height:8px;border-radius:999px;background:#12141d;border:1px solid var(--edge);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--fg);transition:width .5s cubic-bezier(.16,1,.3,1)}
.barrow{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--dim);margin-top:6px;font-variant-numeric:tabular-nums}
.barrow span:last-child{flex:none;white-space:nowrap}
.barrow b{color:var(--fg)}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:16px;overflow:hidden;background:var(--edge);margin-bottom:14px}
.cell{display:flex;flex-direction:column;gap:6px;padding:15px 14px;background:var(--card);position:relative}
.cell .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cell .k em{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;background:#2a2d3a;color:var(--dim);letter-spacing:0}
.cell .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.cell.zero .v{color:var(--faint)}
.cell.wide{grid-column:1/-1}
/* 分池条：四段按比例、段间 3px 底色缝；品质段的颜色从出战卡取，其余三段是文字三阶灰（同收益卡） */
.pools{display:flex;gap:3px;height:8px;border-radius:999px;overflow:hidden;margin-top:4px}
.pools i{display:block;height:100%}
.pools .p1{background:var(--tb)} .pools .p2{background:var(--fg)} .pools .p3{background:var(--dim)} .pools .p4{background:var(--faint)}
.plegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11px;color:var(--dim)}
.plegend b{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:700}
.plegend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:1px}
.plegend .p1{background:var(--tb)} .plegend .p2{background:var(--fg)} .plegend .p3{background:var(--dim)} .plegend .p4{background:var(--faint)}

/* 面板 */
.panel{border-radius:20px;border:1px solid var(--edge);background:var(--surface);overflow:hidden;margin-bottom:14px}
.phead{display:flex;align-items:center;gap:12px;padding:15px 18px 11px;flex-wrap:wrap}
.phead span{font-size:14px;font-weight:700}
.phead span em{font-style:normal;color:var(--dim);font-weight:600;margin-left:6px}
.phead .filters{margin:0 0 0 auto}
.filters{display:flex;gap:5px;margin-bottom:12px}
.filters button{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;color:var(--dim);border:1px solid var(--edge2)}
.filters button.on{background:var(--fg);color:#14161f;border-color:var(--fg)}
.empty{padding:34px 18px;text-align:center;color:var(--faint);font-size:13px;border-top:1px solid var(--edge);line-height:1.7}
.empty[hidden]{display:none}
.empty button{display:inline-block;margin-top:12px;padding:10px 18px;border-radius:12px;background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f;font-size:13px;font-weight:700}

/* 卡片网格：卡 + 一行说明。状态（出战中 / 未激活）放在卡外——卡面右上角什么都不放，留白是给脸的 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 18px 18px}
.cards[hidden]{display:none}
.cw .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:11px;color:var(--dim);font-weight:600}
.cw .cap em{font-style:normal;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;background:#2a2d3a;color:var(--dim)}
.cw .cap em.fight{background:var(--fg);color:#14161f}

/* ===== 球星卡 .sc（印绶）=====
   .sc 是容器（container-type），.in 才是卡；cqw 只能在容器的后代里用。
   材质全部是 CSS 渐变（对应 SVG 模板的 pattern），零 filter、零发光、零阴影。 */
.sc{position:relative;display:block;width:100%;container-type:inline-size;aspect-ratio:5/7;padding:0;text-align:left;
  --b:#c97a3e;--g0:#2a1a10;--g1:#150d08;--ink:#0b0c11;--capink:var(--ink);--sealbg:var(--b);--sealedge:var(--ink);--bd:color-mix(in srgb,var(--b) 30%,var(--g1))}
.sc .in{position:absolute;inset:0;border-radius:4.8cqw;overflow:hidden;background:var(--bg);color:var(--fg)}
.sc .in>*{position:absolute}
.sc .mat{inset:0;background:linear-gradient(180deg,var(--g0),var(--g1))}
.sc .mat::before,.sc .mat::after{content:"";position:absolute;inset:0}
.sc.t-silver .mat::after,.sc.t-gold .mat::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px,rgba(255,255,255,.02) 2px 3px)}
.sc.t-gold .mat::before{background:linear-gradient(112deg,transparent 40%,#4b3a12 40%,#4b3a12 47%,transparent 47%)}
.sc.t-platinum .mat{background:linear-gradient(180deg,#5c6b6f 0 31.43%,#20282a 31.43%)}
.sc.t-platinum .mat::after{background:linear-gradient(180deg,transparent calc(31.43% - 1px),rgba(230,241,238,.35) calc(31.43% - 1px),rgba(230,241,238,.35) 31.43%,transparent 31.43%)}
.sc.t-diamond .mat::after{background:
  repeating-linear-gradient(45deg,rgba(94,198,255,.09) 0 1px,transparent 1px 9.6cqw),
  repeating-linear-gradient(-45deg,rgba(94,198,255,.06) 0 1px,transparent 1px 9.6cqw),
  repeating-linear-gradient(45deg,rgba(94,198,255,.04) 0 4.8cqw,transparent 4.8cqw 9.6cqw)}
.sc.t-star .mat::after{background:
  radial-gradient(circle at 12% 18%,rgba(255,255,255,.85) 0 .25cqw,transparent .6cqw),
  radial-gradient(circle at 68% 9%,rgba(255,255,255,.6) 0 .2cqw,transparent .5cqw),
  radial-gradient(circle at 88% 34%,rgba(255,255,255,.7) 0 .3cqw,transparent .7cqw),
  radial-gradient(circle at 30% 52%,rgba(255,255,255,.45) 0 .2cqw,transparent .5cqw),
  radial-gradient(circle at 82% 62%,rgba(255,255,255,.55) 0 .25cqw,transparent .6cqw),
  radial-gradient(circle at 20% 78%,rgba(255,255,255,.35) 0 .2cqw,transparent .5cqw),
  radial-gradient(circle at 56% 84%,rgba(255,255,255,.65) 0 .3cqw,transparent .7cqw),
  radial-gradient(circle at 44% 30%,rgba(255,255,255,.4) 0 .18cqw,transparent .45cqw)}
.sc.t-king .mat::after{background:repeating-linear-gradient(90deg,rgba(242,207,106,.12) 0 1px,transparent 1px 6px)}
.sc.t-bronze{--b:#c97a3e;--g0:#2a1a10;--g1:#150d08}
.sc.t-silver{--b:#c8cdd6;--g0:#23262e;--g1:#15171d}
.sc.t-gold{--b:#e3b341;--g0:#2c2310;--g1:#161108}
.sc.t-platinum{--b:#e6f1ee;--g0:#5c6b6f;--g1:#20282a}
.sc.t-platinum .seal{background:linear-gradient(180deg,#e6f1ee 0 50%,#b9c8c4 50%)}
.sc.t-diamond{--b:#5ec6ff;--g0:#10202e;--g1:#0b0c11}
.sc.t-star{--b:#7a77a4;--g0:#0d0c1c;--g1:#0b0c11;--ink:#eef0f7;--capink:#eef0f7;--sealbg:#1a1740;--sealedge:#8b8fff}
.sc.t-king{--b:#e8432f;--g0:#4a1015;--g1:#24080b;--ink:#f2cf6a;--sealbg:#4a1015;--sealedge:#e8432f}
.sc.t-king .seal{border:2px solid #e8432f}
.sc.t-king .lv{background:#4a1015}
.sc .por{left:20%;top:5.7%;width:80%;height:57.14%;object-fit:contain;object-position:50% 100%;
  -webkit-mask-image:radial-gradient(circle 52cqw at 50% 45%,#000 45%,transparent 100%);mask-image:radial-gradient(circle 52cqw at 50% 45%,#000 45%,transparent 100%)}
.sc .deck{left:0;right:0;top:62.86%;bottom:0;background:rgba(11,12,17,.5);border-top:1px solid rgba(238,240,247,.14)}
/* 烫金边：3px（原稿）渐变描边，135° 两亮两暗，同 gen3 的 <linearGradient>；王者走描金。流光 = 渐变角度转一圈，只在升级完成 / 激活成功各一次 */
@property --fa{syntax:'<angle>';inherits:false;initial-value:135deg}
.sc .frame{inset:1.8cqw;border-radius:3cqw;padding:max(1.5px,.3cqw);pointer-events:none;transition:filter .16s;
  background:linear-gradient(var(--fa),var(--b) 0%,var(--bd) 22%,var(--b) 50%,var(--bd) 72%,var(--b) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.sc.t-king .frame{--b:#f2cf6a;--bd:#4a2c0c}
@media(prefers-reduced-motion:no-preference){.sc.sweep .frame{animation:sweep .7s cubic-bezier(.16,1,.3,1) 1}}
@keyframes sweep{from{--fa:135deg}to{--fa:495deg}}
.sc .seal{left:7.2cqw;top:7.2cqw;width:12cqw;height:12cqw;border-radius:1.2cqw;background:var(--sealbg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;
  font-family:"Noto Sans SC",sans-serif;font-weight:900;font-size:3.8cqw;line-height:1;color:var(--ink)}
.sc .seal::after{content:"";position:absolute;inset:.8cqw;border-radius:.4cqw;border:1px solid var(--sealedge);opacity:.35}
.sc.t-star .seal{border:2px solid #8b8fff}
.sc .tier{left:7.2cqw;top:20cqw;font-size:2.2cqw;line-height:1;font-weight:700;letter-spacing:.18em;color:var(--b)}
/* 绶带：格高 2.2cqw、步距 2.7cqw，自底边 7.2cqw 向上，只画到该品质的等级上限；已亮 = bright，未亮 = #eef0f7 @.10 */
.sc .rib{left:7.2cqw;bottom:7.2cqw;width:2.4cqw}
.sc .rib b{position:absolute;inset:0;background:repeating-linear-gradient(to top,rgba(238,240,247,.10) 0 2.2cqw,transparent 2.2cqw 2.7cqw)}
.sc .rib i{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(to top,var(--b) 0 2.2cqw,transparent 2.2cqw 2.7cqw)}
.sc .lv{left:11cqw;min-width:9.6cqw;height:4cqw;padding:0 1.6cqw;border-radius:999px;background:var(--b);color:var(--capink);font-size:2.2cqw;font-weight:800;line-height:4cqw;text-align:center;white-space:nowrap}
.sc .name{left:23.2cqw;top:67.7%;font-family:"Smiley Sans","Noto Sans SC",sans-serif;font-size:15cqw;line-height:1;white-space:nowrap}
.sc .name.n5{font-size:12cqw;top:69.6%} .sc .name.n7{font-size:10cqw;top:70.9%}
/* 拉丁行是「身份行」：比读数标签大、亮、松，不再像小号标签 */
.sc .latin{left:23.2cqw;top:80.2%;max-width:70cqw;overflow:hidden;text-overflow:ellipsis;font-size:3cqw;line-height:1;font-weight:500;letter-spacing:.02em;color:var(--fg);white-space:nowrap}
.sc .stat{top:85%;font-size:2cqw;line-height:1;font-weight:700;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.sc .stat i{font-style:normal}
.sc .stat b{display:block;margin-top:1cqw;font-size:5.6cqw;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.sc .s1{left:23.2cqw} .sc .s2{left:52cqw}
.sc .qr{right:7.2cqw;top:82.9%;width:15cqw;height:15cqw;border-radius:1.2cqw;background:#f4f6ff;display:grid;place-items:center}
.sc .qr svg{width:11.4cqw;height:11.4cqw;display:block}
.sc .brandl{left:23.2cqw;top:93.3%;font-size:2.4cqw;line-height:1;font-weight:800;white-space:nowrap}
.sc .brandl span{font-family:"Noto Sans SC",sans-serif;font-weight:700}
.sc .brandl i{font-style:normal;font-size:1.6cqw;font-weight:700;letter-spacing:.14em;color:var(--faint);margin-left:1.4cqw}
.sc.inactive .in{opacity:.5}
/* 缩略变体（卡宽 ≤300px，含列表与详情抽屉）：隐藏二维码 / 链行 / 品牌 / 拉丁行 / 品质拉丁名 / 等级胶囊（等级由绶带与卡下说明给），读数放大，材质 pattern 减半；分享图仍是整张卡 */
@container (max-width:300px){
  .sc .qr,.sc .brandl,.sc .tier,.sc .lv,.sc .stat i{display:none}
  .sc .latin{font-size:3.2cqw;top:80.1%}
  .sc .stat{font-size:2.4cqw;top:85.3%} .sc .stat b{font-size:8cqw;margin-top:1.2cqw} .sc .s2{left:62cqw}
  .sc .mat::before,.sc .mat::after{opacity:.5}
}
/* 缩略（hero、材料、换卡）：只留材质、人像、章、绶带、胶囊、名字 */
.sc.mini .qr,.sc.mini .brandl,.sc.mini .stat,.sc.mini .tier,.sc.mini .lv,.sc.mini .rib{display:none}
.sc.mini .name{top:74%;font-size:16cqw}
.sc.mini .latin{display:block;top:87.5%;font-size:4.2cqw;max-width:74cqw}
button.sc:hover .frame{filter:brightness(1.2)}
button.sc:focus-visible{outline:0}
button.sc:focus-visible .in{outline:2px solid var(--accent);outline-offset:3px}

/* 抽屉 */
.mask{position:fixed;inset:0;background:rgba(4,5,8,.72);backdrop-filter:blur(4px);z-index:80;display:none}
.mask.on{display:block}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);z-index:81;
  background:var(--surface);border:1px solid var(--edge);border-bottom:0;border-radius:20px 20px 0 0;padding:20px 18px 26px;display:none;max-height:92vh;overflow:auto}
.sheet.on{display:block}
@media(prefers-reduced-motion:no-preference){.sheet.on{animation:rise .3s cubic-bezier(.16,1,.3,1)}}
@keyframes rise{from{transform:translate(-50%,26px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sheet h2{font-size:19px;font-weight:800;margin-bottom:5px}
.sheet p{font-size:12px;color:var(--dim);line-height:1.7;margin-bottom:14px}
.sheet p b{color:var(--fg)}
.sacts{display:flex;gap:9px;margin-top:16px}
.sacts button{flex:1;padding:12px 0;border-radius:12px;font-size:14px;font-weight:700;border:1px solid var(--edge2);color:var(--fg)}
.sacts .primary{background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f;border:0}
.sacts button:disabled{opacity:.5;cursor:default}
.detail{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.detail .kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:14px;overflow:hidden;background:var(--edge);border:1px solid var(--edge)}
.detail .kv div{background:var(--card);padding:11px 12px;min-width:0}
.detail .kv small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.detail .kv b{display:block;margin-top:5px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail .kv b span{color:var(--faint);font-weight:600}
.detail .kv b.faint{color:var(--faint)}
.detail .kv b.link{font-size:12px;font-weight:600;color:var(--accent)}
.detail .kv b.wrap{white-space:normal;overflow:visible;text-overflow:clip;font-size:14px;line-height:1.25}
.rowbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.rowbtns button{padding:11px 0;border-radius:12px;font-size:13px;font-weight:700;border:1px solid var(--edge2);color:var(--fg)}
.rowbtns button:hover{border-color:var(--accent);color:var(--accent)}
.rowbtns button:disabled{opacity:.5;cursor:default;border-color:var(--edge2);color:var(--fg)}
.rowbtns .primary{background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f;border:0}
.rowbtns .primary:hover{color:#14161f}
.rowbtns .primary:disabled{color:#14161f}  /* 禁用态的通用规则把字色改成 --fg，落在近白渐变底上就看不见（「已满级」「暂不能激活」都中过）；主按钮禁用只降透明度 */
.upg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--edge);margin-bottom:12px}
.upg .lvbig{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.upg small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:6px}
.upg .arrow{color:var(--faint);font-size:20px}
.cost{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--edge);font-size:13px}
.cost b{font-variant-numeric:tabular-nums}
.cost.total{font-weight:800}
.prog{margin:8px 0 2px;height:6px;border-radius:999px;background:#12141d;border:1px solid var(--edge);overflow:hidden;position:relative}
.prog i{position:absolute;top:0;bottom:0;width:34%;background:linear-gradient(90deg,transparent,var(--fg),transparent)}
@media(prefers-reduced-motion:no-preference){.prog i{animation:transit 1.9s linear infinite}}
@keyframes transit{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
.mats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 4px}
.mats.four{grid-template-columns:repeat(4,1fr)}
.mats .sc.pick .in{outline:2px solid var(--fg);outline-offset:2px}
.mats .slot{aspect-ratio:5/7;border-radius:10px;border:1px dashed var(--edge2);display:grid;place-items:center;color:var(--faint);font-size:11px}
.mats .mname{margin-top:6px;font-size:11px;color:var(--dim);text-align:center;font-weight:600}
.mats .mname em{font-style:normal;color:var(--fg);font-weight:800}  /* 合成材料勾选态（owner 2026-10-04：材料自己选） */
.mats button.sc[data-fpick],.mats button.sc[data-fadd]{cursor:pointer}
.fuse-h{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;font-size:12px;font-weight:700;color:var(--fg)}
.fuse-h em{font-style:normal;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}
.fuse-h span{margin-left:auto;font-size:11px;font-weight:600;color:var(--faint)}
.share{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.share img{width:100%;border-radius:12px;border:1px solid var(--edge);display:block}
.share .cap{font-size:11px;color:var(--dim);margin-top:6px;text-align:center}
.share.one{grid-template-columns:1fr;max-width:320px;margin:0 auto}  /* 分享球星卡抽屉只放一张分享图（owner 2026-10-03，R29） */
/* 分享图的原型预览（owner 2026-10-03：「原型也需要同样的人的一致性」）：不再放 v0.3 的样图 PNG，用 DOM 按 gen3.mjs 的版式画 9:16 的每日收益卡（.yld）与分享球星卡（.shr），
   嵌的是当前出战卡 / 点开的那张卡；尺寸全用 cqw（1080 宽 = 100cqw，1px = .0926cqw），版式常量与 gen3 的 yieldCard / shareCard 一一对应。正式版仍由服务端按模板出 PNG，这里只保证预览和卡是同一人 */
.shr,.yld{position:relative;width:100%;aspect-ratio:9/16;container-type:inline-size;background:var(--bg);border-radius:12px;border:1px solid var(--edge);overflow:hidden;color:var(--fg);font-family:"Sora",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.shr>*,.yld>*{position:absolute}
.shr .lab,.yld .lab{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:2.2cqw;line-height:1;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.shr .lab i,.yld .lab i{font-style:normal;font-family:"Sora",sans-serif}
.shr .h1,.yld .h1{left:6.67cqw;top:6.9cqw}
.shr .own,.yld .own{right:6.67cqw;top:6.4cqw;font-family:"Noto Sans SC",sans-serif;font-weight:600;font-size:2.6cqw;line-height:1;color:var(--dim);white-space:nowrap}
/* 页脚二维码只选直接子元素：写成 .yld .qr 会连嵌进去的卡面 .sc .qr 一起选中（同权重、后出现者赢），把卡的小二维码挪到卡底露出一角（owner 2026-10-03 指出的瑕疵） */
.shr>.qr,.yld>.qr{left:6.67cqw;width:18.5cqw;height:18.5cqw;border-radius:1.5cqw;background:#f4f6ff;display:grid;place-items:center} .shr>.qr{top:148.1cqw} .yld>.qr{top:131.9cqw}
.shr>.qr svg,.yld>.qr svg{width:14cqw;height:14cqw;display:block}
.shr .brand,.yld .brand{left:27.4cqw;font-weight:800;font-size:3.15cqw;line-height:1;white-space:nowrap} .shr .brand{top:151.4cqw} .yld .brand{left:6.67cqw;top:153.5cqw}
.shr .brand span,.yld .brand span{font-family:"Noto Sans SC",sans-serif;font-weight:700}
.shr .url,.yld .url{left:27.4cqw;font-weight:600;font-size:2.2cqw;line-height:1;letter-spacing:.08em;color:var(--dim);white-space:nowrap} .shr .url{top:156.3cqw} .yld .url{left:6.67cqw;top:158.5cqw}
.shr .scan,.yld .scan{left:27.4cqw;font-family:"Noto Sans SC",sans-serif;font-weight:600;font-size:2.04cqw;line-height:1;color:var(--dim);white-space:nowrap} .shr .scan{top:160.7cqw} .yld .scan{left:6.67cqw;top:163cqw}
/* 分享球星卡：卡 → 品质 / 等级大字 → 预估每日收益 → 二维码 */
.shr .s-card{left:20.4cqw;top:13.9cqw;width:59.3cqw}
.shr .tl{left:6.67cqw;top:102.8cqw} .shr .tv{left:6.67cqw;top:105.6cqw;font-family:"Noto Sans SC",sans-serif;font-weight:900;font-size:8.15cqw;line-height:1.1;color:var(--c);white-space:nowrap}
.shr .tv small{font-family:"Sora",sans-serif;font-weight:700;font-size:2.8cqw;letter-spacing:.14em;margin-left:1.6cqw;vertical-align:middle}
.shr .ll{left:59.3cqw;top:102.8cqw} .shr .lvl{left:59.3cqw;top:105.6cqw;font-weight:800;font-size:8.15cqw;line-height:1.1;letter-spacing:-.03em;white-space:nowrap}
.shr .lvl small{font-weight:700;font-size:2.8cqw;letter-spacing:0;color:var(--dim);margin-left:1.4cqw}
.shr .hr{left:6.67cqw;right:6.67cqw;top:117.8cqw;height:1px;background:var(--edge)}
.shr .yl{left:6.67cqw;top:122.4cqw} .shr .yv{left:6.67cqw;top:126cqw;font-weight:800;font-size:14.8cqw;line-height:1;letter-spacing:-.04em;white-space:nowrap}
/* 每日收益卡：主读数 → 分池条 → 四行账目 → 排名 / 连续 → 30 日格 → 出战卡 → 二维码 */
.yld .cl{left:6.67cqw;top:18.9cqw} .yld .big{left:6.67cqw;top:23.6cqw;font-weight:800;font-size:16.3cqw;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.yld .y-bar{left:6.67cqw;right:6.67cqw;top:43.5cqw;height:1.67cqw;display:flex;gap:.28cqw} .yld .y-bar i{display:block;height:100%;border-radius:999px}
.yld .y-rows{left:6.67cqw;right:6.67cqw;top:48.1cqw}
.yld .y-rows div{position:relative;height:5.56cqw;display:flex;align-items:center;gap:2cqw;border-bottom:1px solid var(--edge);font-family:"Noto Sans SC",sans-serif;font-weight:600;font-size:2.6cqw;white-space:nowrap}
.yld .y-rows i{width:1.3cqw;height:1.3cqw;border-radius:.3cqw;display:block;flex:none}
.yld .y-rows b{margin-left:auto;font-family:"Sora",sans-serif;font-weight:800;font-size:3.7cqw;letter-spacing:-.02em}
.yld .rl{left:6.67cqw;top:73.7cqw} .yld .rv{left:6.67cqw;top:77.1cqw;font-weight:800;font-size:5.93cqw;line-height:1;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center;gap:2.2cqw}
.yld .rv em{font-style:normal;font-family:"Noto Sans SC",sans-serif;font-weight:800;font-size:2.04cqw;letter-spacing:0;background:var(--fg);color:var(--bg);border-radius:999px;padding:0 1.8cqw;height:3.7cqw;line-height:3.7cqw}
.yld .sl{left:59.3cqw;top:73.7cqw} .yld .sv{left:59.3cqw;top:77.1cqw;font-weight:800;font-size:5.93cqw;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.yld .sv small{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:2.6cqw;color:var(--dim);margin-left:.9cqw;letter-spacing:0}
.yld .who{left:6.67cqw;top:91.9cqw;font-family:"Noto Sans SC",sans-serif;font-weight:600;font-size:2.6cqw;line-height:1;white-space:nowrap}
.yld .who2{left:6.67cqw;top:96.5cqw;font-family:"Noto Sans SC",sans-serif;font-weight:600;font-size:2.04cqw;line-height:1;color:var(--dim);white-space:nowrap}
/* R31：下半区重排——出战卡 620/1080 宽、贴到底边；左栏竖排两行说明、今日体力、二维码与品牌三行（品牌不再与卡同一行相撞） */
.yld .y-card{left:35.9cqw;top:90.7cqw;width:57.4cqw}
.yld .stl{left:6.67cqw;top:108.9cqw} .yld .stv{left:6.67cqw;top:111.9cqw;font-weight:800;font-size:5.93cqw;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.yld .stv small{font-weight:700;font-size:2.6cqw;color:var(--dim);margin-left:.9cqw;letter-spacing:0}
/* ===== 商店（2026-09-30）===== 分段 / 筛选行 / 价格行 / 骨架卡 / 挂单行 / 挂单抽屉。品质色只出现在 chips 的 8px 点与卡面上；买卖不上色（绿 / 红在投注页是买入 / 卖出、赢 / 亏），用词也避开「买入 / 卖出」。 */
.views{margin:-4px 0 16px}
.views button em{font-style:normal;margin-left:5px;color:var(--faint);font-weight:600}
.views button.on em{color:#14161f;opacity:.7}
.mkt-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mkt-search{flex:1 1 200px;display:flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:12px;border:1px solid var(--edge2);background:var(--surface);color:var(--faint);font-size:13px}
.mkt-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:13px;font-weight:600}
.mkt-search input::placeholder{color:var(--faint)}
.mkt-search:focus-within{border-color:var(--accent)}
.mkt-sort{flex:none;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--edge2);font-size:13px;font-weight:700;color:var(--fg);transition:.16s}
.mkt-sort:hover{border-color:var(--accent);color:var(--accent)}
.mkt-sort:focus-visible,.mkt-search input:focus-visible,.mkt-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mkt-chips{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1 0 100%;padding-bottom:2px}
.mkt-chips::-webkit-scrollbar{display:none}
.mkt-chips button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;color:var(--dim);border:1px solid var(--edge2);white-space:nowrap;transition:.16s}
.mkt-chips button:hover{color:var(--fg)}
.mkt-chips button i{width:8px;height:8px;border-radius:2px;background:var(--c,var(--dim))}
.mkt-chips button.on{background:var(--fg);color:#14161f;border-color:var(--fg)}
.cw .cap b.mkt-price{font-size:15px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.cw .cap b.mkt-price small{font-size:10px;font-weight:700;color:var(--dim);letter-spacing:.06em;margin-left:3px}
/* 系统盲盒牌的盒子（owner 2026-10-03 第二轮：「太素了，至少再增加个盒子元素」）：人像区画一只盒——盖、身、两条丝带、封蜡，全部是品质色（--b / --g0 / --g1）的平面渐变，
   零阴影零发光零 filter，与卡面材质同一套规矩；「？」印在封蜡上，名字位写「盲盒」。盒子 24–74cqw，避开左上的章与品质拉丁名，落在甲板之上 */
.sc.mkt-box .bx{left:22cqw;top:24cqw;width:56cqw;height:50cqw}
.sc.mkt-box .bx i{position:absolute;display:block;font-style:normal}
.sc.mkt-box .bx-body{left:0;right:0;top:12cqw;bottom:0;border-radius:0 0 3cqw 3cqw;background:linear-gradient(180deg,color-mix(in srgb,var(--b) 26%,var(--g1)),var(--g1));border:1px solid color-mix(in srgb,var(--b) 45%,transparent);border-top:0}
.sc.mkt-box .bx-rh{left:0;right:0;top:30cqw;height:7cqw;background:linear-gradient(180deg,var(--b),color-mix(in srgb,var(--b) 70%,var(--g1)))}
.sc.mkt-box .bx-rv{left:24cqw;width:8cqw;top:12cqw;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--b) 70%,var(--g1)),var(--b),color-mix(in srgb,var(--b) 70%,var(--g1)))}
.sc.mkt-box .bx-top{left:-3cqw;right:-3cqw;top:0;height:13cqw;transform-origin:50% 100%}
.sc.mkt-box .bx-lid{inset:0;border-radius:2.4cqw;background:linear-gradient(180deg,color-mix(in srgb,var(--b) 48%,var(--g0)),color-mix(in srgb,var(--b) 22%,var(--g0)));border:1px solid color-mix(in srgb,var(--b) 60%,transparent)}
.sc.mkt-box .bx-lr{left:27cqw;width:8cqw;top:0;bottom:0;background:var(--b)}
.sc.mkt-box .bx-knot{left:22cqw;top:4cqw;width:18cqw;height:18cqw;border-radius:50%;background:var(--sealbg);color:var(--ink);display:grid;place-items:center;font-family:"Smiley Sans","Noto Sans SC",sans-serif;font-size:12cqw;line-height:1}
.sc.mkt-box .bx-knot::after{content:"";position:absolute;inset:1.4cqw;border-radius:50%;border:1px solid var(--sealedge);opacity:.35}
.sc.mkt-box .name{top:67.7%;font-size:15cqw}  /* 名字位写「盲盒」；「？」挪到了封蜡上（R24 的 26cqw「？」作废） */
@media(prefers-reduced-motion:no-preference){button.sc.mkt-box .bx-top{transition:transform .16s} button.sc.mkt-box:hover .bx-top{transform:translateY(-1.4cqw) rotate(-2deg)}}
/* 开盒舞台（owner 2026-10-03 第二轮：「付款后打开盲盒要有酷炫的开盒效果」）。这是商店里 owner 点名要的第二个 authored moment，不是发明第四套词汇——
   每一段都是「刚刚变了」的一次性位移 / 缩放，缓动 cubic-bezier(.16,1,.3,1)，单段 .48–.72s，整段 ≤ 2.6s；光芒是平面 conic 扇形、火花是实心小方块，零 blur 零 box-shadow；
   环境转动只有光芒的 9s linear；prefers-reduced-motion 下不播，直接给结果（静态替身 = 原来的「开到 ×××」抽屉）；点一下舞台可跳过。
   时序：st1 材料（白银 / 黄金盒）从四角飞进盒子 + 盒子晃三下 → st2 盖子弹开、一闪、光芒展开、火花四散 → st3 盒子沉下去、卡从盒里升起翻正 → st4 光芒退场、卡的烫金边扫一次、标题换成「开到 ×××」 */
.bx-stage{position:relative;height:300px;margin:4px 0 2px;border-radius:14px;background:var(--card);border:1px solid var(--edge);overflow:hidden;perspective:900px;cursor:pointer}
.bx-stage.t-bronze{--rb:#c97a3e} .bx-stage.t-silver{--rb:#c8cdd6} .bx-stage.t-gold{--rb:#e3b341}
.bx-stage>*{position:absolute}
.bx-stage .boxcard{left:50%;top:50%;width:150px;transform:translate(-50%,-50%)}
.bx-stage .bx-card{left:50%;top:50%;width:176px;transform:translate(-50%,-50%);opacity:0}
.bx-stage .bx-rays{left:50%;top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;opacity:0;transform:scale(.2);
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rb) 30%,transparent) 0 8deg,transparent 8deg 30deg)}
.bx-stage .bx-sparks{left:50%;top:50%;width:0;height:0}
.bx-stage .bx-sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:var(--rb);opacity:0}
.bx-stage .bx-mats{inset:0}
.bx-stage .bx-mats .sc{position:absolute;left:50%;top:50%;width:64px;margin:-45px 0 0 -32px;opacity:0}
.sc.bx-ghost .in{opacity:.78}  /* 剪影：还没开出的球员没有人像，用通用卡通像 + 降透明度 */
.bx-stage .bx-flash{inset:0;background:var(--rb);opacity:0}
.bx-stage .bx-hint{left:0;right:0;bottom:10px;text-align:center;font-size:11px;color:var(--faint)}
.bx-stage.bx-done .boxcard,.bx-stage.bx-done .bx-mats,.bx-stage.bx-done .bx-rays,.bx-stage.bx-done .bx-sparks,.bx-stage.bx-done .bx-flash,.bx-stage.bx-done .bx-hint{display:none}
.bx-stage.bx-done .bx-card{opacity:1;animation:none;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:no-preference){
  .bx-stage.st1 .bx-mats .sc{animation:bx-matin 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}  /* 前 30% 先在四角亮出来，再飞进盒子 */
  .bx-stage.st1 .boxcard{animation:bx-shake .48s cubic-bezier(.16,1,.3,1) 3}
  .bx-stage.st2 .boxcard{animation:none}
  .bx-stage.st2 .bx-flash{animation:bx-flash .3s ease forwards}
  .bx-stage.st2 .boxcard .bx-top{animation:bx-lidpop .5s cubic-bezier(.16,1,.3,1) forwards}
  .bx-stage.st2 .bx-rays{animation:bx-raysin .72s cubic-bezier(.16,1,.3,1) forwards,bx-rayspin 9s linear infinite}
  .bx-stage.st2 .bx-sparks i{animation:bx-spark .72s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
  .bx-stage.st3 .boxcard{animation:bx-out .5s cubic-bezier(.16,1,.3,1) forwards}
  .bx-stage.st3 .bx-card{animation:bx-cardrise .72s cubic-bezier(.16,1,.3,1) forwards}
  .bx-stage.st4 .bx-rays{animation:bx-raysout .5s ease forwards}
}
@keyframes bx-matin{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.9)}30%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}100%{opacity:0;transform:translate(0,-12px) scale(.12)}}
@keyframes bx-shake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-52%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-51%) rotate(0)}75%{transform:translate(-48%,-50%) rotate(3deg)}}
@keyframes bx-flash{0%{opacity:.45}100%{opacity:0}}
@keyframes bx-lidpop{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-40cqw) rotate(-16deg);opacity:0}}
@keyframes bx-raysin{0%{opacity:0;transform:scale(.2)}100%{opacity:.9;transform:scale(1)}}
@keyframes bx-rayspin{from{rotate:0deg}to{rotate:360deg}}
@keyframes bx-raysout{to{opacity:0}}
@keyframes bx-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes bx-out{to{transform:translate(-50%,-10%) scale(.7);opacity:0}}
@keyframes bx-cardrise{0%{opacity:0;transform:translate(-50%,-20%) scale(.5) rotateY(80deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateY(0)}}
.cw .cap span.sold{color:var(--faint)}
.sc.skel .in{background:var(--card)} .sc.skel .mat{background:linear-gradient(180deg,#1b1d27,#14161f)}
.cw.skel .cap span{display:inline-block;width:64px;height:10px;border-radius:4px;background:var(--card)} .cw.skel .cap b{display:inline-block;width:44px;height:14px;border-radius:4px;background:var(--card)}
.mkt-input{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-radius:14px;border:1px solid var(--edge2);background:var(--card);margin:6px 0 12px}
.mkt-input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mkt-input span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.mkt-input:focus-within{border-color:var(--accent)}
.mkt-input input::-webkit-outer-spin-button,.mkt-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mkt-input input{-moz-appearance:textfield;appearance:textfield}
.sheet .detail>div{min-width:0}  /* 抽屉右栏：grid 的 1fr 默认 min-width:auto，数字输入框的固有宽度会把整栏顶出抽屉 */
/* 详情左栏 = 卡 + 「分享球星卡」（owner 2026-10-03：按钮放在球星卡正下方）；按钮样式同 .rowbtns 的次级按钮 */
.detail .dcol{display:grid;gap:10px}
.detail .dcol>button{width:100%;padding:11px 0;border-radius:12px;font-size:13px;font-weight:700;border:1px solid var(--edge2);color:var(--fg)}
.detail .dcol>button:hover{border-color:var(--accent);color:var(--accent)}
.cost.fee{color:var(--dim)} .cost.fee b{color:var(--dim)}
.cost.get{border-top:1px solid var(--edge2);font-weight:800;padding-top:14px;align-items:baseline} .cost.get b{font-size:26px;letter-spacing:-.02em;line-height:1}
.mkt-ref{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--dim);margin-top:8px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.mkt-ref b{color:var(--fg);font-weight:700}
.sheet .fees{font-size:11px;color:var(--faint);line-height:1.6;margin-top:10px}
.sheet .fees b{color:var(--dim);font-weight:700}

@media(max-width:720px){
  .page{padding:18px 13px 0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .total{font-size:38px}
  .energy{gap:14px}
  .energy .thumb{width:84px}
  .hero .acts button{flex:1}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 13px 13px}
  .detail{grid-template-columns:1fr}
  .detail .sc{max-width:260px;margin:0 auto}
  .detail .dcol{max-width:260px;margin:0 auto;width:100%}
  .share{grid-template-columns:1fr}
  .mats{grid-template-columns:repeat(5,1fr);gap:6px}
  .mkt-sort{padding:0 12px}
  .nav{display:none}
  /* 三页的底栏是 repeat(3,1fr)；这页加了第四个 tab，三页上线时同改成 4 栏（R7 §4） */
  .mobilenav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:rgba(11,12,17,.9);backdrop-filter:blur(16px);border-top:1px solid var(--edge);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mobilenav a{display:grid;place-items:center;height:64px;font-size:13px;font-weight:600;color:var(--dim);text-decoration:none}
  .mobilenav a.on{color:var(--fg)}
}

/* 三页外壳（SC-8 卡 §3.2 第 7 项）：以下 9 个选择器 38 条声明逐字照 wallet.css，与原型零重叠。 */
.top .acct button{padding:7px 13px;border-radius:999px;border:1px solid var(--edge2);font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;white-space:nowrap;transition:.16s}
.top .acct button:hover{border-color:var(--accent);color:var(--accent)}
.top .acct button:disabled{opacity:.5;cursor:default}
.note.amber{background:rgba(255,201,77,.09);border:1px solid rgba(255,201,77,.26);color:var(--gold)}
.note.amber .mk{background:var(--gold);color:#22180a}
.wpath{display:block;margin-top:6px}
.wbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.wbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
  border-radius:12px;background:var(--surface);border:1px solid var(--edge2);color:var(--fg);
  text-decoration:none;font-size:13px;font-weight:700}
.wbtn:hover{border-color:var(--accent);color:var(--accent)}