/* ============ 主题变量 ============ */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface2:#eef1f5;
  --ink:#0b0f17; --ink2:#3d4757; --ink3:#79838f;
  --line:#e3e6eb; --line2:#ced4dd;
  --accent:#17427f; --accent-ink:#ffffff; --accent-soft:rgba(23,66,127,.07);
  --live:#1a7a5b; --live-soft:rgba(26,122,91,.10);
  --ink-btn:#0f1b2d; --gold:#c9a55e;
  --grid:rgba(15,23,42,.045);
  --shadow:0 1px 2px rgba(11,15,23,.04), 0 16px 40px -18px rgba(11,15,23,.14);
  --glow:radial-gradient(600px 300px at 78% -10%, rgba(23,66,127,.07), transparent 70%);
}
[data-theme="dark"]{
  --bg:#1a2331; --surface:#243040; --surface2:#2b3849;
  --ink:#f2f6fc; --ink2:#d8e1ee; --ink3:#a6b4c6;
  --line:#33404f; --line2:#425163;
  --accent:#8fb3e6; --accent-ink:#0b1420; --accent-soft:rgba(143,179,230,.12);
  --live:#4fdc9f; --live-soft:rgba(79,220,159,.12);
  --ink-btn:#e6ecf5; --gold:#d4bb87;
  --grid:rgba(160,190,240,.06);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 16px 40px -18px rgba(0,0,0,.5);
  --glow:radial-gradient(600px 300px at 78% -10%, rgba(143,179,230,.10), transparent 70%);
}
/* ============ 基础 ============ */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.75 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
  min-height:100vh;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
.mono{font-family:"JetBrains Mono","SF Mono",Consolas,"Courier New",monospace}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; z-index:99; background:var(--accent); color:var(--accent-ink); padding:8px 16px; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ============ 顶栏 ============ */
.nav{
  position:sticky; top:0; z-index:50;
  padding:16px 0; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; letter-spacing:.01em}
.brand .logo{width:26px; height:26px; flex:none}
.brand small{font-weight:500; color:var(--ink3); font-size:11.5px; letter-spacing:.18em; margin-left:2px}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a.link{padding:7px 12px; border-radius:7px; color:var(--ink2); font-size:13.5px; transition:color .2s, background .2s}
.nav-links a.link:hover{color:var(--ink); background:var(--accent-soft)}
.nav-cta{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:6px; padding:9px 17px; border-radius:8px;
  background:var(--ink-btn); color:var(--accent-ink);
  font-size:13.5px; font-weight:600;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-1px); filter:brightness(1.1); box-shadow:0 6px 18px -8px rgba(15,27,45,.55)}
.nav-cta svg{width:12px; height:12px}
#themeToggle{
  margin-left:10px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; transition:border-color .2s, background .2s, transform .2s;
}
#themeToggle:hover{border-color:var(--line2); transform:rotate(12deg)}
#themeToggle svg{width:17px; height:17px; stroke:var(--ink2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.i-moon{display:none}
[data-theme="dark"] .i-sun{display:none}
[data-theme="dark"] .i-moon{display:block}

/* ============ Hero ============ */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--glow);
}
.hero::before{ /* 科技网格，向下渐隐 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero-inner{
  position:relative; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:48px; align-items:center;
  max-width:1180px; margin:0 auto; padding:44px 32px 58px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.24em; color:var(--accent); font-weight:500;
}
.eyebrow .bullet{width:6px; height:6px; border-radius:1px; background:var(--gold); flex:none}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 var(--live-soft)}50%{opacity:.55; box-shadow:0 0 0 5px var(--live-soft)}}
h1{
  margin:22px 0 16px; font-size:clamp(34px, 4.2vw, 56px);
  line-height:1.14; font-weight:800; letter-spacing:-.02em;
}
h1 .em{color:var(--accent)}
.lede{max-width:520px; color:var(--ink2); font-size:16px; line-height:1.75}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:46px; padding:0 22px; border-radius:9px; font-weight:600; font-size:14px;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s, background .2s;
}
.btn svg{width:14px; height:14px; flex:none}
.btn-primary{background:var(--ink-btn); color:var(--accent-ink); box-shadow:0 8px 24px -12px rgba(15,27,45,.55)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.12)}
.btn-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:var(--ink2);
  transition:color .2s ease;
}
.btn-link:hover{color:var(--ink)}
.btn-link svg{width:12px; height:12px; flex:none; transition:transform .2s ease}
.btn-link:hover svg{transform:translateX(3px)}
.stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:0 44px; max-width:520px;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
}
.stats li{display:flex; flex-direction:column; gap:3px; padding-top:2px}
.stats b{font-size:14px; font-weight:700; letter-spacing:0}
.stats span{font-size:11.5px; color:var(--ink3); letter-spacing:.02em}

/* Hero 右侧：真实注意力矩阵（Canvas 动画 · 双主题 · 鼠标视差 · 柱子顶起坠落，见 hero-attn.js） */
.hero-art{display:grid; place-items:center}
.hero-art > div{width:100%}
/* .hero-art > div 特异度 (0,1,1) 高于单类选择器，故用复合选择器压过它戴帽 */
.hero-art .art-box{
  width:min(490px, 100%);
  /* 右移：1180 网格内 490 宽的画布右移余量只有 3px，故宽窗口下让它溢出到页边距，
     使「文字右缘↔画布」与「画布↔窗口右缘」两侧留白相当；窄窗口自动归零不外溢。
     下移：画布内容比左栏文字高约 20px（底部有空档 + 下方 cap 占位），压下去对齐。 */
  transform:translate(max(0px, min(60px, calc((100vw - 1180px) * 0.22))), 20px);
  filter:drop-shadow(0 12px 32px rgba(11,15,23,.08));
}
.art-stage{width:100%; perspective:1000px}
.hero-attn{position:relative; width:100%; aspect-ratio:490/452; transform-style:preserve-3d; will-change:transform}
.hero-attn canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.art-cap{margin-top:14px; text-align:center; font-size:11.5px; letter-spacing:.16em; color:var(--ink3)}

/* ============ 区块标题 ============ */
section{padding:56px 0 72px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.sec-head h2{font-size:28px; font-weight:800; letter-spacing:-.02em}
.sec-head .sub{color:var(--ink3); font-size:13.5px; margin-top:6px}
.sec-head .idx{font-size:11px; color:var(--ink3); letter-spacing:.22em}

/* ============ 模型卡片 ============ */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px}
.fchip{
  padding:7px 15px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--ink2);
  transition:background .18s,color .18s,border-color .18s;
}
.fchip:hover{border-color:var(--accent); color:var(--ink)}
.fchip.on{background:var(--ink-btn); border-color:var(--ink-btn); color:var(--accent-ink)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:20px}
.card{
  --c:var(--line2);
  position:relative; overflow:hidden; text-align:left;
  display:flex; flex-direction:column; gap:14px;
  padding:24px; border-radius:14px; min-height:300px;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before{ /* 顶部扫过的高亮线 */
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0); transition:transform .45s ease;
}
.card:hover, .card:focus-visible{
  transform:translateY(-4px); border-color:var(--c);
  box-shadow:var(--shadow);
}
.card:hover::before, .card:focus-visible::before{transform:scaleX(1)}

/* 首帧骨架：/api/models 没回来之前先铺占位，避免从模型页返回时空白一块 */
.card-skel{pointer-events:none; user-select:none}
.card-skel::before{display:none}
.card-skel:hover{transform:none; border-color:var(--line); box-shadow:none}
.sk{
  border-radius:6px; height:12px;
  background:linear-gradient(90deg, var(--line) 0%, var(--line2) 50%, var(--line) 100%);
  background-size:220% 100%; animation:sk-sweep 1.4s ease-in-out infinite;
}
@keyframes sk-sweep{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
@media (prefers-reduced-motion: reduce){ .sk{animation:none} }
.sk-no{width:30px; height:11px; margin-right:auto}
.sk-pill{width:58px; height:17px; border-radius:999px}
.sk-title{width:58%; height:22px}
.sk-desc{width:100%}
.sk-desc.short{width:70%}
.sk-tags{width:46%; height:14px; margin-top:auto}

.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-no{font-size:12px; color:var(--ink3); letter-spacing:.14em; margin-right:auto}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  padding:4px 11px; border-radius:99px;
}
.badge .dot{width:6px; height:6px; border-radius:50%}
.badge-live{color:var(--live); background:var(--live-soft)}
.badge-live .dot{background:var(--live); animation:pulse 2.2s infinite}
.badge-soon{color:var(--ink3); background:color-mix(in srgb, var(--ink3) 12%, transparent)}
.badge-soon .dot{background:var(--ink3)}
.card h3{font-size:22px; font-weight:700; letter-spacing:-.01em}
/* 价格：卡片顶部一行（编号右、状态徽章左），来自 DB models.price（portal.js 渲染）
   已开通 → 「已开通」；0 → 「免费」 */
.card-price{
  flex:none; display:inline-flex; align-items:baseline;
  font:600 12.5px/1 "JetBrains Mono","SF Mono",Consolas,"Courier New",monospace;
  color:var(--ink); letter-spacing:.01em;
}
.card-price i{font-style:normal; font-size:10px; font-weight:600; color:var(--ink3); margin-right:1px}
.card-price.free{
  font-family:inherit; font-size:11.5px; font-weight:600;
  color:var(--live); letter-spacing:.02em;
}
.card-price.on{
  font-family:inherit; font-size:11.5px; font-weight:600;
  color:var(--accent); letter-spacing:.02em;
}
/* 招牌金卡：价格与金色标题同调 */
.card-hero .card-price{color:var(--gold-deep)}
.card-hero .card-price i{color:color-mix(in srgb, var(--gold-deep) 72%, transparent)}
.card-hero .card-price.free,
.card-hero .card-price.on{color:var(--gold-deep)}
.card .desc{color:var(--ink2); font-size:13px; line-height:1.65; flex:1}
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tags span{
  font-size:11px; letter-spacing:.04em; color:var(--ink2);
  padding:3px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface2);
}
.card-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--accent);
}
.card-go svg{width:13px; height:13px; transition:transform .25s ease}
.card:hover .card-go svg, .card:focus-visible .card-go svg{transform:translateX(4px)}
.card-soon .card-go{color:var(--ink3)}

/* ---- 卡片底部：左「进入演示」/ 右「强化习题」----
   只有题库里有题的模型才渲染按钮（portal.js 判断 quiz.n>0） */
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.card-quiz{
  /* 这个按钮本身就是进度条：--p = 答题得分百分比，由 portal.js 写在 style 上 */
  position:relative; isolation:isolate; overflow:hidden;
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:108px; padding:6px 11px; border-radius:9px; cursor:pointer;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line2);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
/* 填充层：z-index:-1 在按钮背景之上、文字之下（靠 isolation 建栈） */
.card-quiz::before{
  content:""; position:absolute; left:0; top:0; bottom:0; z-index:-1;
  width:var(--p, 0%); background:currentColor; opacity:.20;
  transition:width .5s cubic-bezier(.22,.8,.3,1);
}
/* 2026-10-20：进度头竖线（原 ::after 2px 亮线）去掉——低分时线压在文字上影响显示 */
.card-quiz:hover{color:var(--ink); border-color:var(--ink3); transform:translateY(-1px)}
.card-quiz .n{
  font:600 11px/1 "JetBrains Mono","SF Mono",Consolas,monospace;
  font-style:normal; color:var(--ink3); padding-left:3px;
  border-left:1px solid var(--line2); margin-left:1px;
}
/* 招牌卡（金卡）用金色调 */
.card-hero .card-quiz{color:var(--gold-deep); background:transparent;
  border-color:color-mix(in srgb, var(--gold) 42%, transparent)}
.card-hero .card-quiz:hover{background:color-mix(in srgb, var(--gold) 12%, transparent);
  border-color:color-mix(in srgb, var(--gold) 65%, transparent)}
[data-theme="dark"] .card-hero .card-quiz{color:var(--gold);
  border-color:color-mix(in srgb, var(--gold) 40%, transparent)}

.card-live{--c:var(--accent)}

/* ============ 招牌卡（MODEL_00 Transformer 专用）============
   静态（所有账号都一样）：金色标题 + 双色晕影 —— 2026-10-19 定稿，任何档位都不动它。
   品级（后端按账号下发 data-tier）：
     · tier-myth   → 紫红金渐变描边 + 悬浮双绕光流（设计稿神话档）
     · tier-normal → 就是普通卡：悬浮只有边框微亮 + 中性投影，没有光流、没有彩色晕影
   ⚠️ overflow 必须 visible：光流画布比卡片外扩 22px，裁掉就没有「光往外渗」这层。 */
.card-hero{
  --gold:#c9a55e; --gold-deep:#8a6420; --gold-ink:#3b2d0b;
  --gold-grad:linear-gradient(100deg,#a87f35,#8a6420);
  --c:var(--gold);
  overflow:visible;
  background:
    radial-gradient(320px 190px at 86% -14%, rgba(29,158,117,.13), transparent 70%),
    radial-gradient(260px 170px at 108% 30%, rgba(127,119,221,.10), transparent 72%),
    linear-gradient(180deg, #fbf6e9, var(--surface) 66%);
}
.card-hero::before{background:linear-gradient(90deg, transparent, var(--gold), transparent); z-index:2}
/* 卡内文字压在雾之上；canvas / 量测 svg 必须排除，否则它们的 absolute 会被改成 relative，光带整个错位 */
.card-hero > :not(canvas):not(svg){position:relative; z-index:1}
.card-hero .card-no{color:var(--gold-deep); font-weight:600; transition:color .25s ease}
.card-hero h3{
  background-image:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.card-hero .card-go{
  align-self:flex-start; margin-top:2px;
  padding:6px 15px; border-radius:999px;
  background:var(--gold); color:var(--gold-ink); font-weight:700;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.card-hero .tags span{transition:border-color .25s ease, background .25s ease}

/* ---- 神话档：紫红金渐变描边（静态就有，用 border-box 渐变画出 2px 描边）---- */
.card-hero.tier-myth{
  --hc:#9333ea; --hc2:#be123c; --hrgb:140,44,220; --hink:#fff;
  border:2px solid transparent;
  /* 静态雾改紫红（原来的青绿/靛蓝是金卡遗留，与紫红金描边不搭）：右上角紫转红，浓度略高于传说橙卡 */
  background:
    /* 设计稿 .t5 亮色：紫雾在右上、暗金雾在左下（不是红雾） */
    radial-gradient(320px 190px at 88% -12%, rgba(124,58,237,.13), transparent 70%) padding-box,
    radial-gradient(280px 170px at 8% 112%, rgba(180,131,9,.13), transparent 70%) padding-box,
    linear-gradient(180deg, #fbf6e9, var(--surface) 66%) padding-box,
    linear-gradient(100deg,#5b21b6,#a8123c,#92400e,#a8123c,#5b21b6) border-box;
  background-origin:padding-box,padding-box,padding-box,border-box;
  background-clip:padding-box,padding-box,padding-box,border-box;
  background-size:auto,auto,auto,250% 100%;
  /* 静态也保留紫红投影 + 内缘紫光（比传说橙卡的呼吸光略强，但不抢悬浮的戏） */
  box-shadow:0 2px 4px rgba(138,100,32,.12), 0 20px 46px -12px rgba(140,44,220,.46),
             0 0 24px -11px rgba(190,24,70,.32) inset;
}
/* 悬浮时卡内铺一层同色雾（radial），给光带托底 */
.card-hero.tier-myth::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:0;
  background:
    radial-gradient(320px 190px at 86% -12%, rgba(var(--hrgb),.20), transparent 70%),
    radial-gradient(260px 170px at 8% 112%, rgba(var(--hrgb),.12), transparent 72%);
}
.card-hero.tier-myth:hover::after{opacity:1}
.card-hero.tier-myth:hover, .card-hero.tier-myth:focus-visible{
  z-index:3;
  /* 关键：基础 .card:hover 会把 border-color 染成金色，正好盖掉渐变描边 —— 必须显式透明 */
  border-color:transparent;
  box-shadow:0 2px 4px rgba(138,100,32,.12), 0 26px 56px -14px rgba(140,44,220,.52),
             0 0 26px -12px rgba(190,24,70,.34) inset;
  animation:mythflow 3.6s linear infinite;
}
@keyframes mythflow{to{background-position:0 0,0 0,0 0,250% 0}}

[data-theme="dark"] .card-hero{
  --gold:#d4bb87; --gold-deep:#d4bb87; --gold-ink:#43330c;
  --gold-grad:linear-gradient(100deg,#f1e6ca,#d4bb87 60%,#b99a5e);
  background:
    radial-gradient(320px 190px at 86% -14%, rgba(74,203,181,.16), transparent 70%),
    radial-gradient(260px 170px at 108% 30%, rgba(127,119,221,.13), transparent 72%),
    linear-gradient(180deg, #2a3543, #212b38);
}
[data-theme="dark"] .card-hero.tier-myth{
  --hc:#c084fc; --hc2:#f43f5e; --hrgb:176,72,232; --hink:#170222;
  background:
    radial-gradient(320px 190px at 88% -12%, rgba(176,107,255,.26), transparent 70%) padding-box,
    radial-gradient(280px 170px at 8% 112%, rgba(255,207,92,.17), transparent 70%) padding-box,
    linear-gradient(180deg, #2a3543, #212b38) padding-box,
    linear-gradient(100deg,#46208f,#8c1240,#96500a,#8c1240,#46208f) border-box;
  background-origin:padding-box,padding-box,padding-box,border-box;
  background-clip:padding-box,padding-box,padding-box,border-box;
  background-size:auto,auto,auto,250% 100%;
  box-shadow:0 2px 4px rgba(0,0,0,.45), 0 20px 46px -12px rgba(150,60,230,.40),
             0 0 24px -12px rgba(244,63,94,.26) inset;
}
[data-theme="dark"] .card-hero.tier-myth:hover,
[data-theme="dark"] .card-hero.tier-myth:focus-visible{
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 26px 56px -12px rgba(150,60,230,.46),
             0 0 28px -12px rgba(244,63,94,.34) inset;
}

/* ============ 招牌卡（金卡）· 档位：逐字对齐设计稿 ============
   设计稿：C://Users//yxy//AppData//Local//Temp//pw-verify//tier_cards_preview.html 的 .t1~.t4
   · 静态雾：320×190 @86% -14% + 260×170 @108% 30%，只换颜色
   · 悬浮雾：340×200 @86% -14% + 280×180 @108% 34%，颜色由 --hrgb 推（.26 / .15）
   · 边框：优秀/精良 1px、史诗/传说 2px；悬浮边色与外光都照设计稿
   ⚠️ 半径 / 浓度 / 边色一律照抄，别自己调 —— 用户会拿设计稿逐像素比对。
   神话档在上面 .tier-myth 里单独一套，不参与这里。 */

/* 金卡底色（设计稿 --base） */
.card-hero{--hero-base:linear-gradient(180deg,#fbf6e9,var(--surface) 66%)}
[data-theme="dark"] .card-hero{--hero-base:linear-gradient(180deg,#2a3543,#212b38)}

/* 亮色（门户默认）= 设计稿 [data-theme="light"] */
.card.card-hero.tier-uncommon{--halo:rgba(12,138,91,.11); --halo2:rgba(127,119,221,.10); border-color:#d8e8de}
.card.card-hero.tier-rare{--halo:rgba(17,87,216,.11); --halo2:rgba(127,119,221,.10); border-color:#dae2f2}
.card.card-hero.tier-epic{--halo:rgba(124,58,237,.13); --halo2:rgba(124,58,237,.08); border:2px solid #c4b0f2}
.card.card-hero.tier-legend{--halo:rgba(217,119,6,.14); --halo2:rgba(217,119,6,.08); border:2px solid #ecc489}
/* 暗色 = 设计稿 :root（青绿 + 靛蓝基座） */
[data-theme="dark"] .card.card-hero.tier-uncommon{--halo:rgba(61,220,151,.15); --halo2:rgba(127,119,221,.13); border-color:#2d4a3e}
[data-theme="dark"] .card.card-hero.tier-rare{--halo:rgba(110,168,255,.17); --halo2:rgba(127,119,221,.13); border-color:#2b4266}
[data-theme="dark"] .card.card-hero.tier-epic{--halo:rgba(139,92,246,.20); --halo2:rgba(127,119,221,.16); border:2px solid #55389e}
[data-theme="dark"] .card.card-hero.tier-legend{--halo:rgba(255,159,67,.22); --halo2:rgba(255,120,60,.12); border:2px solid #8a5410}

/* 静态：雾直接铺进背景（设计稿就是这么画的，不用伪元素叠） */
.card-hero:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend){
  background:
    radial-gradient(320px 190px at 86% -14%, var(--halo), transparent 70%),
    radial-gradient(260px 170px at 108% 30%, var(--halo2), transparent 72%),
    var(--hero-base);
}
/* 悬浮：雾换更大半径 + 单色 --hrgb；边框与外光按档位 */
.card-hero:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):hover,
.card-hero:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):focus-visible{
  background:
    radial-gradient(340px 200px at 86% -14%, rgba(var(--hrgb), .26), transparent 70%),
    radial-gradient(280px 180px at 108% 34%, rgba(var(--hrgb), .15), transparent 72%),
    var(--hero-base);
}
/* 悬浮边 + 外光（亮色） */
.card-hero.tier-uncommon:hover, .card-hero.tier-uncommon:focus-visible{
  border-color:#2a7d5c; box-shadow:0 0 14px -6px rgba(12,138,91,.18), 0 14px 32px -20px rgba(138,100,32,.18)}
.card-hero.tier-rare:hover, .card-hero.tier-rare:focus-visible{
  border-color:#17509f; box-shadow:0 0 14px -6px rgba(17,87,216,.20), 0 14px 32px -20px rgba(138,100,32,.18)}
.card-hero.tier-epic:hover, .card-hero.tier-epic:focus-visible{
  border-color:#6d3ad0; box-shadow:0 0 18px -6px rgba(124,58,237,.22), 0 14px 32px -20px rgba(138,100,32,.18)}
.card-hero.tier-legend:hover, .card-hero.tier-legend:focus-visible{
  border-color:#b8690a; box-shadow:0 0 22px -4px rgba(217,119,6,.26), 0 14px 32px -20px rgba(138,100,32,.18)}
/* 悬浮边 + 外光（暗色） */
[data-theme="dark"] .card-hero.tier-uncommon:hover, [data-theme="dark"] .card-hero.tier-uncommon:focus-visible{
  border-color:#35b47e; box-shadow:0 0 16px -6px rgba(61,220,151,.17), 0 16px 36px -18px rgba(0,0,0,.45)}
[data-theme="dark"] .card-hero.tier-rare:hover, [data-theme="dark"] .card-hero.tier-rare:focus-visible{
  border-color:#5b8fd6; box-shadow:0 0 16px -6px rgba(110,168,255,.20), 0 16px 36px -18px rgba(0,0,0,.45)}
[data-theme="dark"] .card-hero.tier-epic:hover, [data-theme="dark"] .card-hero.tier-epic:focus-visible{
  border-color:#9179e0; box-shadow:0 0 20px -6px rgba(139,92,246,.28), 0 16px 36px -18px rgba(0,0,0,.45)}
[data-theme="dark"] .card-hero.tier-legend:hover, [data-theme="dark"] .card-hero.tier-legend:focus-visible{
  border-color:#e09a4a; box-shadow:inset 0 0 14px -6px rgba(255,159,67,.16), 0 0 24px -4px rgba(255,159,67,.28),
             0 16px 36px -18px rgba(0,0,0,.45)}

/* 招牌卡 CTA 是药丸：默认仍是金色，悬浮整套换档位色 */
.card-hero:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):hover .card-go{
  background:linear-gradient(100deg, var(--hc), var(--hc2));
  color:var(--hin);
  box-shadow:0 8px 22px -14px rgba(var(--hrgb), 1);
}
/* 习题按钮：默认中性，悬浮才跟档位色 */
.card-hero:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):hover .card-quiz{
  color:var(--hc); border-color:rgba(var(--hrgb), .55);
}
.card-hero.tier-myth:hover .card-quiz{color:var(--hc2); border-color:rgba(var(--hrgb), .55)}

/* ---- 100 分满贯（is-full；portal.js 判定 sc>=99.99）----
   只加一道白色镜面掠光：字色 / 边框 / 填充 / 品级色全部保持原样，其余分数段一字节不动。
   掠光走 ::after（::before 已被进度填充占用）：5s 一轮，前 16% 从左掠到右完整掠过，
   剩下 4.2s 停在右侧裁剪区外，不做常驻炫技。按钮宽度恒 = min-width 108，故用固定位移。 */
.card-quiz.is-full::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:0; width:30px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation:qzfull 5s linear infinite;
}
@keyframes qzfull{
  0%{transform:translateX(-38px) skewX(-16deg)}
  16%,100%{transform:translateX(150px) skewX(-16deg)}
}

/* ============ 普通档：悬浮只出一圈白边（对齐设计稿 .t0）============
   ⚠️ 坑：.card-live 会把 --c 设成主题蓝，基础 .card:hover 的 border-color:var(--c) 就是那条蓝边，
   必须在这里显式压掉；顶线 ::before 同理，否则悬浮会冒一条蓝线。
   招牌卡（.card-hero 金卡）不参与，它的金边/金标题是固定档位。 */
.card.tier-normal:not(.card-hero):hover,
.card.tier-normal:not(.card-hero):focus-visible{border-color:#fff}
.card.tier-normal:not(.card-hero)::before{background:linear-gradient(90deg,transparent,#fff,transparent)}
[data-theme="light"] .card.tier-normal:not(.card-hero):hover,
[data-theme="light"] .card.tier-normal:not(.card-hero):focus-visible{border-color:#c3cad6}
[data-theme="light"] .card.tier-normal:not(.card-hero)::before{
  background:linear-gradient(90deg,transparent,#a9b4c6,transparent);
}

/* ============ 品级卡（优秀 / 精良 / 史诗 / 传说）============
   品级 = 静态外观 + 悬浮动效：不悬浮就有档位描边 + 双色晕影（对齐设计稿 .t1~.t4），
   悬浮再跑光流 + 整套换色。传说另带一层静态「内热呼吸」。
   光流引擎在 tierfx.js；档位由后端按账号下发（config.yaml → card_tiers）。
   可用档位：normal / uncommon(优秀) / rare(精良) / epic(史诗) / legend(传说) / myth(神话)。 */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend){overflow:visible}
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend) > :not(canvas):not(svg){
  position:relative; z-index:1}
/* 亮色（门户默认）压深一档，白底上细线才看得见；--hb=静态边 --hbd=悬浮边 --hbw=边宽 */
/* 优秀档亮色：设计稿 #d8e8de 是画在金底卡上的，摊到纯白卡上几乎等于白 → 边框提一档到浅翠绿 */
/* 优秀档不要任何背景晕影（悬浮、非悬浮都不要）→ --halo 全部置透明。
   --rla/--rlb = 外侧颜色线的静态/悬浮 alpha（绿压弱、蓝做实，档位才递进） */
.card.tier-uncommon{--hc:#0c8a5b; --hc2:#0a6b47; --hrgb:12,138,91; --hin:#fff; --hbw:1px;
  --hb:#c9e9da; --hbd:#4e9c7d; --halo:transparent; --halo2:transparent; --rla:.32; --rlb:.50}
/* 精良档亮色：设计稿 #dae2f2 也是画在金底卡上的，白卡上等于没有 → 提一档到浅蓝 */
.card.tier-rare{--hc:#1157d8; --hc2:#0b3ea3; --hrgb:17,87,216; --hin:#fff; --hbw:1px;
  --hb:#8badde; --hbd:#10429b; --halo:rgba(17,87,216,.10); --halo2:rgba(17,87,216,.05);
  --rla:.74; --rlb:.88}
.card.tier-epic{--hc:#7c3aed; --hc2:#5b21b6; --hrgb:124,58,237; --hin:#fff;
  --hb:#c4b0f2; --hbd:#6d3ad0; --halo:rgba(124,58,237,.13); --halo2:rgba(124,58,237,.08)}
.card.tier-legend{--hc:#d97706; --hc2:#a34f04; --hrgb:217,119,6; --hin:#fff;
  --hb:#ecc489; --hbd:#b8690a; --halo:rgba(217,119,6,.14); --halo2:rgba(217,119,6,.08)}
[data-theme="dark"] .card.tier-uncommon{--hc:#3ddc97; --hc2:#0fa96f; --hrgb:74,196,150; --hin:#04160f;
  --hb:#2d4a3e; --hbd:#35b47e; --halo:transparent; --halo2:transparent; --rla:.34; --rlb:.52}
[data-theme="dark"] .card.tier-rare{--hc:#6ea8ff; --hc2:#3b73d6; --hrgb:110,168,255; --hin:#040d1c;
  --hb:#2b4266; --hbd:#5b8fd6; --halo:rgba(110,168,255,.13); --halo2:rgba(110,168,255,.07);
  --rla:.72; --rlb:.86}
[data-theme="dark"] .card.tier-epic{--hc:#a78bfa; --hc2:#7c5cf0; --hrgb:167,139,250; --hin:#0b0518;
  --hb:#55389e; --hbd:#8b6fe0; --halo:rgba(139,92,246,.20); --halo2:rgba(127,119,221,.16)}
[data-theme="dark"] .card.tier-legend{--hc:#ffb257; --hc2:#ff7a1a; --hrgb:255,178,87; --hin:#1c0d00;
  --hb:#8a5410; --hbd:#e09a4a; --halo:rgba(255,159,67,.22); --halo2:rgba(255,120,60,.12)}

/* ---- 静态：档位描边 + 双色雾（不悬浮也一眼看出品级；招牌卡除外，它的金边是固定的）---- */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):not(.card-hero){
  border-width:var(--hbw,2px); border-color:var(--hb);
  background-image:
    radial-gradient(320px 190px at 86% -14%, var(--halo), transparent 70%),
    radial-gradient(260px 170px at 108% 30%, var(--halo2), transparent 72%);
}
/* 优秀 / 精良：border 是浅色系，落在白卡上太像普通卡 → 再压一圈「外侧颜色线」
   （box-shadow 第 4 个值 spread 画在 border 之外，1px 硬描边，不模糊）。
   史诗 / 传说本身已有 2px 深边，不叠加。 */
.card:is(.tier-uncommon,.tier-rare):not(.card-hero){
  box-shadow:0 0 0 1px rgba(var(--hrgb),var(--rla,.55));
}
/* 精良：再补一圈内缘光，把「比优秀高一级」做实（优秀档不加，保持细线）。
   雾另收小一圈：只是"有点气"，范围一大就变整卡染蓝、抢史诗的戏 */
.card.tier-rare:not(.card-hero){
  box-shadow:0 0 0 1px rgba(var(--hrgb),var(--rla,.74)),
             inset 0 0 18px -10px rgba(var(--hrgb),.30);
  background-image:
    radial-gradient(220px 130px at 88% -12%, var(--halo), transparent 70%),
    radial-gradient(180px 115px at 106% 26%, var(--halo2), transparent 72%);
}
/* 传说：静态内热呼吸（设计稿 .t4 的 breath） */
.card.tier-legend:not(.card-hero){animation:legendBreath 3.4s ease-in-out infinite}
@keyframes legendBreath{
  0%,100%{box-shadow:inset 0 0 11px -7px rgba(217,119,6,.10), 0 0 12px -7px rgba(217,119,6,.14)}
  50%{box-shadow:inset 0 0 17px -5px rgba(217,119,6,.18), 0 0 22px -6px rgba(217,119,6,.24)}
}
[data-theme="dark"] .card.tier-legend:not(.card-hero){animation-name:legendBreathD}
@keyframes legendBreathD{
  0%,100%{box-shadow:inset 0 0 11px -8px rgba(255,159,67,.08), 0 0 13px -7px rgba(255,159,67,.16)}
  50%{box-shadow:inset 0 0 17px -5px rgba(255,159,67,.15), 0 0 23px -6px rgba(255,159,67,.26)}
}

/* ---- 悬浮：雾加浓 + 档位色外光。传说必须先停呼吸，否则 animation 会盖住 hover 的 box-shadow ---- */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):not(.card-hero):hover,
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):not(.card-hero):focus-visible{
  border-color:var(--hbd);
  background-image:
    radial-gradient(320px 190px at 86% -14%, rgba(var(--hrgb),.20), transparent 70%),
    radial-gradient(260px 170px at 108% 30%, rgba(var(--hrgb),.13), transparent 72%);
  animation:none;
  box-shadow:0 0 22px -6px rgba(var(--hrgb),.30), var(--shadow);
}
/* 精良（蓝）：悬浮保留外光，但外线一起留下（否则一 hover 外线突然消失，看着像掉了层皮） */
.card.tier-rare:not(.card-hero):hover,
.card.tier-rare:not(.card-hero):focus-visible{
  box-shadow:0 0 0 1px rgba(var(--hrgb),var(--rlb,.88)), 0 0 22px -6px rgba(var(--hrgb),.30),
             inset 0 0 20px -9px rgba(var(--hrgb),.34), var(--shadow);
  background-image:
    radial-gradient(220px 130px at 88% -12%, rgba(var(--hrgb),.12), transparent 70%),
    radial-gradient(180px 115px at 106% 26%, rgba(var(--hrgb),.07), transparent 72%);
}
/* 优秀（绿）：低档不要抢戏 —— 悬浮只加深边框和外线；背景雾彻底去掉（悬浮、非悬浮都不要） */
.card.tier-uncommon:not(.card-hero):hover,
.card.tier-uncommon:not(.card-hero):focus-visible{
  box-shadow:0 0 0 1px rgba(var(--hrgb),var(--rlb,.50)), var(--shadow);
  background-image:none;
}
/* 悬浮换色：标题 / 序号 / 标签 / CTA 跟随档位（normal 档不参与，保持原样） */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend,.tier-myth):hover h3{
  background-image:linear-gradient(100deg,var(--hc),var(--hc2) 52%,var(--hc));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend,.tier-myth):hover .card-no{color:var(--hc)}
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend,.tier-myth):hover .tags span{
  border-color:rgba(var(--hrgb),.42); background:rgba(var(--hrgb),.07); color:var(--ink);
}
/* 非招牌卡的 CTA 是文字链，只换色，不做药丸（换形状会让文字跳位）。
   ⚠️ 必须排除招牌卡：它的 CTA 是实心药丸，这条会把白字染成档位色 → 蓝底蓝字看不见 */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend):not(.card-hero):hover .card-go{color:var(--hc)}
/* 顶部扫过的高亮线也跟着档位走（默认是 --accent 蓝，会跟橙/紫撞色） */
.card:is(.tier-uncommon,.tier-rare,.tier-epic,.tier-legend,.tier-myth)::before{
  background:linear-gradient(90deg,transparent,var(--hc),transparent);
}
/* 招牌卡的 CTA 本来就是药丸，整套换色 */
.card.tier-myth:hover .card-go, .card.tier-myth:focus-visible .card-go{
  background:linear-gradient(100deg,var(--hc),var(--hc2));
  color:var(--hink);
  box-shadow:0 8px 22px -14px rgba(var(--hrgb),1);
}

/* ============ 拆解方式 ============ */
.steps{
  list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
  padding-top:18px; border-top:1px solid var(--line);
}
.steps li{padding:0}
.steps .no{display:block; font-size:11px; letter-spacing:.16em; color:var(--gold); font-weight:600}
.steps h3{font-size:16px; font-weight:700; margin:10px 0 8px}
.steps p{font-size:13px; color:var(--ink2); line-height:1.68}

/* ============ 页脚 ============ */
footer{border-top:1px solid var(--line); padding:30px 0 42px}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot p{font-size:12.5px; color:var(--ink3); line-height:1.85}
.foot b{color:var(--ink2); font-weight:600}
.foot .stack{text-align:right}


.bootsub{font-size:12.5px; color:var(--ink3)}
@media (prefers-reduced-motion: reduce){ .bootspin{animation-duration:2.4s} }

/* ============ 进场动画 ============ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============ 响应式 ============ */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr; gap:40px; padding:40px 24px 48px}
  .hero-art{display:none}
  .wrap, .nav-inner, .hero-inner{padding-left:24px; padding-right:24px}
  .nav{padding:14px 0}
  .nav-links a.link{display:none}
  section{padding:48px 0 56px}
  .steps{grid-template-columns:1fr 1fr; gap:24px}
  .foot .stack{text-align:left}
}
/* 手机（2026-10-16 增补）：顶栏收缩 + 字号/间距收紧，防窄屏挤压 */
@media (max-width: 560px){
  .wrap, .nav-inner, .hero-inner{padding-left:16px; padding-right:16px}
  .nav{padding:12px 0}
  .nav-inner{flex-wrap:wrap; row-gap:8px}
  .nav-links{gap:2px}
  .brand{font-size:14px; gap:8px}
  .brand small{display:none}
  .nav-cta{padding:8px 12px; font-size:12.5px; margin-left:2px}
  #themeToggle{width:34px; height:34px; margin-left:4px}
  .nav #maUser{height:32px; padding:0 9px; font-size:12.5px}
  .nav #maUser .who{max-width:84px}
  .hero-inner{padding-top:34px; padding-bottom:40px}
  h1{font-size:clamp(30px, 9.5vw, 40px); margin:16px 0 14px}
  .lede{font-size:14.5px; line-height:1.7}
  .cta-row{gap:16px; margin-top:24px}
  .btn{height:44px; padding:0 18px; font-size:13.5px}
  .stats{gap:0 24px; margin-top:32px; padding-top:18px}
  .stats b{font-size:13px}
  section{padding:44px 0 52px}
  .sec-head{margin-bottom:22px}
  .sec-head h2{font-size:22px}
  .steps{grid-template-columns:1fr; gap:22px}
  .grid{grid-template-columns:1fr; gap:14px}
  .card{padding:20px 18px; min-height:0}
  .card h3{font-size:20px}
  footer{padding:26px 0 32px}
}