/* ==========================================================
   芯轴 SiliconAxis · 硬件性能天梯榜
   设计基调：暗色霓虹 + 玻璃拟态 + 数据条发光
   ========================================================== */

/* ---------- 变量 ---------- */
/* 配色：近黑冷调打底，单一电光紫蓝承担交互，青色用于数据高亮。
   档位色 S→D 走玫红-橙-蓝紫-青绿-灰的梯度，饱和度统一压低以免刺眼。 */
:root{
  --bg:#08090b; --bg1:#0e0f13; --bg2:#15171c; --bg3:#1c1f26;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --txt:#f7f8f8; --txt2:#8a8f98; --txt3:#5c616b;
  --acc:#7c8cff; --acc-d:#5b6ad9; --cyan:#22d3ee;
  --ok:#34d399; --warn:#fbbf24; --danger:#ff5c7c;
  --nv:#9ae62b; --amd:#ff5c5c; --intel:#4da3ff;
  --huawei:#ff5968; --xiaomi:#ff7a2f; --qualcomm:#35a7ff; --mediatek:#f05ca8;
  --apple:#c9cdd4; --samsung:#7f8cff; --google:#43c66f;
  --t-s:#ff5c7c; --t-a:#ff9f4a; --t-b:#7c8cff; --t-c:#34d399; --t-d:#6b7280;
  --r:12px; --r-s:8px; --r-x:18px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,1,.36,1);
  /* 兼容旧变量名 */
  --panel:rgba(255,255,255,.026); --panel-2:rgba(255,255,255,.05);
  --line-2:var(--line2); --acc2:var(--acc); --acc3:var(--danger);
}
[data-theme=light]{
  /* 卡片(bg2)要比容器(bg1)略深一档，浅色下才有层次；
     次级文字比暗色版更实，否则 10px 小字在白底上会糊 */
  --bg:#fbfbfd; --bg1:#ffffff; --bg2:#fafbfc; --bg3:#f2f4f7;
  --line:rgba(11,12,14,.1); --line2:rgba(11,12,14,.17);
  --txt:#0b0c0e; --txt2:#4a4f57; --txt3:#6b7280;
  --acc:#5b6ad9; --acc-d:#4757c4; --cyan:#0891b2;
  --ok:#0f9d68; --warn:#b45309; --danger:#e11d48;
  --nv:#5f8f10; --amd:#dc2626; --intel:#1d6fd0;
  --huawei:#cf2938; --xiaomi:#cf5500; --qualcomm:#126eb7; --mediatek:#b62874;
  --apple:#59616b; --samsung:#4056bd; --google:#188647;
  --t-s:#e11d48; --t-a:#c2620a; --t-b:#5b6ad9; --t-c:#0f9d68; --t-d:#878c96;
  --shadow:0 24px 60px -28px rgba(11,12,14,.2);
  --panel:rgba(11,12,14,.022); --panel-2:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:120px;
}
b,strong{font-weight:700}
em{font-style:normal}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
kbd{
  font:600 11px/1 "JetBrains Mono",monospace; padding:3px 6px; border-radius:5px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--txt3);
}
.wrap{width:min(1360px,94vw);margin-inline:auto}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}

/* ---------- 背景 ---------- */
.bg-layer{position:fixed;inset:0;z-index:-1;background:var(--bg)}
.bg-grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 70% at 50% 0%,#000 10%,transparent 72%)}
.glow{display:none}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--txt);flex:none}
.logo-mark{display:grid;place-items:center;width:27px;height:27px;color:var(--acc)}
.logo-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.logo-txt{font-weight:700;letter-spacing:.14em;font-size:15px}
.logo-txt em{color:var(--acc)}

.tabs{position:relative;display:flex;gap:2px;padding:3px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;z-index:1;padding:6px 16px;border-radius:6px;font-size:13.5px;
  font-weight:500;color:var(--txt2);transition:color .3s}
.tab.active{color:#fff}
[data-theme=light] .tab.active{color:#fff}
.tab-ink{position:absolute;z-index:0;top:3px;bottom:3px;border-radius:6px;
  background:var(--acc);transition:.32s var(--ease)}

.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.bottleneck-btn{white-space:nowrap;height:38px}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;width:230px;
  border-radius:999px;background:var(--panel);border:1px solid var(--line);
  color:var(--txt3);transition:.25s}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);width:280px}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px;color:var(--txt)}
.search input::placeholder{color:var(--txt3)}
.icobtn{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt2);transition:.22s}
.icobtn:hover{color:var(--txt);border-color:var(--line-2);transform:translateY(-1px)}
.ico-sun{display:none}
[data-theme=light] .ico-sun{display:block}
[data-theme=light] .ico-moon{display:none}

/* ---------- Hero ---------- */
.hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;
  padding:48px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;margin-bottom:18px;
  border-radius:999px;background:var(--bg1);border:1px solid var(--line);
  font-size:11.5px;letter-spacing:.04em;color:var(--txt2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent}}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.hero h1 em{background:linear-gradient(96deg,var(--acc),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:14px;color:var(--txt2);font-size:15px;max-width:56ch}
.hero-stats{display:flex;gap:12px}
.stat{position:relative;padding:15px 20px;border-radius:var(--r);background:var(--bg1);
  border:1px solid var(--line);min-width:124px;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.stat b{display:block;font-family:"JetBrains Mono",monospace;font-size:20px;letter-spacing:-.03em}
.stat span{font-size:11.5px;color:var(--txt3);letter-spacing:.06em}

/* ---------- 控制条 ---------- */
.controls{position:sticky;top:66px;z-index:50;padding:12px 0 14px;margin-bottom:8px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.ctl-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.seg{display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.seg-b{padding:7px 14px;border-radius:9px;font-size:13.5px;color:var(--txt2);transition:.24s;white-space:nowrap}
.seg-b:hover{color:var(--txt)}
.seg-b.active{color:#fff;background:var(--acc);font-weight:500}
.ctl-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.ctl-actions .ghostbtn{white-space:nowrap}
.seg-scene{margin-left:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 13px;border-radius:999px;font-size:13px;color:var(--txt2);
  background:var(--panel);border:1px solid var(--line);transition:.22s}
.chip:hover{color:var(--txt);border-color:var(--line-2)}
.chip.on{color:#fff;background:var(--acc);border-color:var(--acc);font-weight:500}
.ghostbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:11px;
  font-size:13.5px;color:var(--txt2);background:var(--panel);border:1px solid var(--line);transition:.22s}
.ghostbtn:hover{color:var(--txt);border-color:var(--line-2)}
.ghostbtn.danger:hover{color:var(--acc3);border-color:var(--acc3)}
.ctl-adv .ghostbtn{align-self:end;justify-content:center}
.chev{transition:transform .3s var(--ease)}
[aria-expanded=true] .chev{transform:rotate(180deg)}

.ctl-adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 22px;align-items:start;
  margin-top:12px;padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  animation:slideDown .34s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
/* 标题统一高度，让各列的控件落在同一条基线上 */
.ctl-adv .fld>label,.ctl-adv .fld>span{display:flex;align-items:center;gap:6px;min-height:18px}
.ctl-adv .fld>.chips,.ctl-adv .fld>select,.ctl-adv .fld>.range2{margin-top:auto}
.fld label,.fld>span{font-size:12px;color:var(--txt3);letter-spacing:.05em}
.fld label b{color:var(--acc);font-family:"JetBrains Mono",monospace}
.fld select{padding:9px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  outline:0;font-size:13.5px}
.fld select:focus{border-color:var(--acc)}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:var(--acc);outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid var(--acc);cursor:grab}

/* ---------- 榜单 ---------- */
.board{display:flex;flex-direction:column;gap:5px;padding-bottom:20px}
.tier-sep{display:flex;align-items:center;gap:14px;margin:22px 0 8px;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt3)}
.tier-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.tier-sep i{font-style:normal;padding:3px 10px;border-radius:999px;border:1px solid currentColor;font-size:11px}
.tier-S{color:var(--t-s)} .tier-A{color:var(--t-a)} .tier-B{color:var(--t-b)}
.tier-C{color:var(--t-c)} .tier-D{color:var(--t-d)}

.row{position:relative;display:grid;align-items:center;gap:14px;padding:11px 16px;border-radius:14px;
  grid-template-columns:52px minmax(200px,1.15fr) minmax(180px,2fr) 82px 96px 86px 40px;
  background:var(--panel);border:1px solid transparent;transition:.26s var(--ease);
  animation:rowIn .5s var(--ease) both;cursor:default}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
.row::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(92deg,transparent,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s}
.row:hover{background:var(--panel-2)}
.row:hover::before{opacity:1;background:var(--line-2)}
.row.picked{background:var(--panel-2)}
.row.picked::before{opacity:1;background:var(--acc)}
.row.is-base{outline:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);outline-offset:-1px}

.rank{font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:700;color:var(--txt3);text-align:center}
.rank.top{display:grid;place-items:center;width:28px;height:28px;margin-inline:auto;border-radius:6px;
  color:#0a0a0a;background:#e3b341;font-size:13px}
.rank.top.r2{background:#b8c1cc} .rank.top.r3{background:#c58b52}

.idcol{min-width:0}
.name{display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pill{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:6px;
  border:1px solid currentColor;opacity:.9;color:var(--acc)}
.pill.NVIDIA{color:var(--nv)} .pill.AMD{color:var(--amd)} .pill.Intel{color:var(--intel)}
.pill.Huawei{color:var(--huawei)} .pill.Xiaomi{color:var(--xiaomi)}
.pill.Qualcomm{color:var(--qualcomm)} .pill.MediaTek{color:var(--mediatek)}
.pill.Apple{color:var(--apple)} .pill.Samsung{color:var(--samsung)} .pill.Google{color:var(--google)}
.tagline{display:flex;gap:6px;align-items:center;margin-top:3px;font-size:11.5px;color:var(--txt3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{padding:1px 6px;border-radius:4px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--txt2);font-size:10.5px}
.tag.hot{color:var(--t-a);border-color:color-mix(in srgb,var(--t-a) 40%,transparent)}

.bar{--c2:var(--acc);position:relative;height:9px;border-radius:99px;background:color-mix(in srgb,var(--txt3) 16%,transparent);
  overflow:visible}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;transform-origin:left;
  background:var(--c2);animation:grow .6s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}

.bar.b-NVIDIA{--c2:var(--nv)} .bar.b-AMD{--c2:var(--amd)} .bar.b-Intel{--c2:var(--intel)}
.bar.b-Huawei{--c2:var(--huawei)} .bar.b-Xiaomi{--c2:var(--xiaomi)}
.bar.b-Qualcomm{--c2:var(--qualcomm)} .bar.b-MediaTek{--c2:var(--mediatek)}
.bar.b-Apple{--c2:var(--apple)} .bar.b-Samsung{--c2:var(--samsung)} .bar.b-Google{--c2:var(--google)}
.bardelta{margin-top:5px;font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--txt3)}
.bardelta .up{color:var(--ok)} .bardelta .down{color:var(--acc3)}

.scorecol{text-align:right}
.scorecol b{display:block;font-family:"JetBrains Mono",monospace;font-size:17px;letter-spacing:-.02em}
.scorecol small{font-size:10.5px;color:var(--txt3)}
.metriccol{text-align:right;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--txt2)}
.metriccol small{display:block;font-family:inherit;font-size:10.5px;color:var(--txt3)}
.pricecol{text-align:right;font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--txt)}
.pricecol small{display:block;font-family:inherit;font-size:10.5px;color:var(--txt3)}
.cmpbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--txt3);
  border:1px dashed var(--line-2);transition:.22s;font-size:16px;line-height:1}
.cmpbtn:hover{color:var(--acc);border-color:var(--acc);border-style:solid}
.cmpbtn.on{color:#fff;border-style:solid;border-color:transparent;
  background:var(--acc)}

.empty{text-align:center;padding:60px 0;color:var(--txt3)}
.view-hint{text-align:center;font-size:12.5px;color:var(--txt3);margin:10px auto 14px;line-height:1.6}
.view-hint b{color:var(--txt2);font-weight:600}
.foot{padding:44px 0 30px;border-top:1px solid var(--line);margin-top:30px;color:var(--txt3);font-size:12.5px}
.foot b{color:var(--txt2)}
.foot-keys{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---------- 悬停详情卡 ---------- */
.hovercard{position:fixed;z-index:80;width:392px;padding:18px;border-radius:var(--r);
  background:var(--bg2);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--line-2);box-shadow:var(--shadow);pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .18s,transform .24s var(--ease)}
.hovercard.show{opacity:1;transform:none}
.hc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.hc-hd h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.hc-hd p{font-size:11.5px;color:var(--txt3);margin-top:3px}
.hc-idx{text-align:right;flex:none}
.hc-idx b{font-family:"JetBrains Mono",monospace;font-size:23px;line-height:1;color:var(--acc)}
.hc-idx span{display:block;font-size:10px;color:var(--txt3);letter-spacing:.08em}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.hc-kv{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.hc-kv span{color:var(--txt3)}
.hc-kv b{font-family:"JetBrains Mono",monospace;font-weight:400;color:var(--txt)}
.hc-sec{padding-top:13px}
.hc-sec h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);margin-bottom:9px}
.hc-mrow{display:grid;grid-template-columns:62px 1fr 62px;align-items:center;gap:10px;margin-bottom:7px;font-size:12px}
.hc-mrow span{color:var(--txt3)}
.hc-mrow b{text-align:right;font-family:"JetBrains Mono",monospace;font-weight:400}
.hc-mbar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--txt3) 16%,transparent);overflow:hidden}
.hc-mbar i{display:block;height:100%;border-radius:99px;background:var(--acc)}
.hc-mbar.fps i{background:var(--ok)}
.hc-foot{display:flex;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.hc-badge{flex:1;text-align:center;padding:7px;border-radius:9px;background:var(--panel);border:1px solid var(--line)}
.hc-badge b{display:block;font-family:"JetBrains Mono",monospace;font-size:14px}
.hc-badge span{font-size:10px;color:var(--txt3)}
.hc-tip{margin-top:10px;font-size:11px;color:var(--txt3);text-align:center}

/* ---------- 对比坞 ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:14px;
  background:linear-gradient(to top,var(--bg) 55%,transparent);
  animation:dockIn .4s var(--ease)}
@keyframes dockIn{from{transform:translateY(100%)}}
.dock-in{width:min(1360px,94vw);margin-inline:auto;display:flex;gap:14px;align-items:center;
  padding:12px 14px;border-radius:var(--r);background:color-mix(in srgb,var(--bg2) 90%,transparent);
  backdrop-filter:blur(20px);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.dock-items{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.dock-items::-webkit-scrollbar{display:none}
.dock-item{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);white-space:nowrap;font-size:13px;
  animation:popIn .3s var(--ease)}
@keyframes popIn{from{opacity:0;transform:scale(.9)}}
.dock-item i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--txt3)}
.dock-item button{color:var(--txt3);font-size:15px;line-height:1;transition:.2s}
.dock-item button:hover{color:var(--acc3)}
.dock-act{display:flex;gap:8px;flex:none}
.cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-s);
  font-weight:500;font-size:14px;color:#fff;background:var(--acc);transition:.2s}
.cta:hover{filter:brightness(1.12)}
.cta span{font-family:"JetBrains Mono",monospace;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,.22)}
.cta:disabled{opacity:.45;transform:none;cursor:not-allowed}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-bd{position:absolute;inset:0;background:rgba(3,5,10,.7);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal-in{position:relative;width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;
  border-radius:20px;background:var(--bg2);border:1px solid var(--line-2);box-shadow:var(--shadow);
  animation:modalIn .4s var(--ease)}
.modal-wide{width:min(1180px,96vw)}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--line)}
.modal-hd h2{font-size:18px;font-weight:700}
.modal-hd-act{display:flex;gap:8px;align-items:center}
.modal-bdy{padding:22px;overflow:auto}
.modal-bdy::-webkit-scrollbar{width:8px}
.modal-bdy::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

/* ---------- 对比内容 ---------- */
.cmp-top{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:24px}
.radar{flex:none}
.radar-legend{display:flex;flex-direction:column;gap:9px;font-size:13px}
.radar-legend div{display:flex;align-items:center;gap:9px}
.radar-legend i{width:11px;height:11px;border-radius:4px}
.cmp-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-tbl th,.cmp-tbl td{padding:11px 13px;text-align:center;border-bottom:1px solid var(--line)}
.cmp-tbl thead th{position:sticky;top:0;background:var(--bg2);z-index:1;font-size:14px;font-weight:700;padding-bottom:14px}
.cmp-tbl thead th small{display:block;font-weight:400;font-size:11px;color:var(--txt3);margin-top:2px}
.cmp-tbl tbody th{text-align:left;font-weight:400;color:var(--txt3);font-size:12.5px;white-space:nowrap}
.cmp-tbl td{font-family:"JetBrains Mono",monospace}
.cmp-tbl tr:hover td{background:var(--panel)}
.cmp-tbl td.best{color:var(--ok);font-weight:700;position:relative}
.cmp-tbl td.best::after{content:"▲";font-size:8px;margin-left:5px;vertical-align:2px}
.cmp-tbl td.worst{color:var(--txt3)}
.cmp-bar{height:4px;border-radius:99px;margin-top:6px;background:var(--acc)}
.cmp-note{margin-top:16px;font-size:12px;color:var(--txt3);text-align:center}
.cmp-verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.vcard{padding:14px 16px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line)}
.vcard span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.vcard b{display:block;margin-top:4px;font-size:15px}
.vcard.win{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.vcard.win b{color:var(--ok)}

/* ---------- 瓶颈分析 ---------- */
.bl-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.bl-result{display:none}
.bl-result.on{display:block;animation:slideDown .34s var(--ease)}
.bl-gauge{position:relative;height:10px;border-radius:99px;margin:26px 0 8px;
  background:linear-gradient(90deg,var(--acc3),var(--warn) 34%,var(--ok) 50%,var(--warn) 66%,var(--acc))}
.bl-gauge b{position:absolute;top:50%;translate:-50% -50%;width:22px;height:22px;border-radius:50%;
  background:#fff;border:4px solid var(--bg2);box-shadow:0 4px 14px rgba(0,0,0,.5);transition:left .6s var(--ease)}
.bl-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--txt3);margin-bottom:20px}
.bl-verdict{padding:16px 18px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--acc)}
.bl-verdict h3{font-size:15.5px;margin-bottom:6px}
.bl-verdict p{font-size:13.5px;color:var(--txt2)}
.bl-verdict.warn{border-left-color:var(--warn)}
.bl-verdict.bad{border-left-color:var(--acc3)}
.bl-verdict.good{border-left-color:var(--ok)}
.bl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
.bl-stat{padding:13px 15px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line)}
.bl-stat span{font-size:11px;color:var(--txt3)}
.bl-stat b{display:block;font-family:"JetBrains Mono",monospace;font-size:18px;margin-top:3px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:110px;translate:-50% 0;z-index:200;padding:10px 18px;
  border-radius:var(--r-s);font-size:13.5px;background:var(--bg2);border:1px solid var(--line-2);
  color:var(--txt);box-shadow:var(--shadow);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .row{grid-template-columns:44px minmax(160px,1.2fr) minmax(140px,1.8fr) 72px 84px 36px}
  .pricecol{display:none}
}
@media (max-width:900px){
  .topbar-in{height:60px;gap:8px}
  .logo-txt{display:none}
  .tabs{flex:1;padding:3px;min-width:0}
  .tab{padding:6px 10px;font-size:12.5px;white-space:nowrap}
  .bottleneck-btn{display:grid;place-items:center;width:38px;padding:0}
  .bottleneck-btn span{display:none}
  .hero h1{font-size:clamp(30px,8vw,44px)}
  .stat{padding:10px 12px}
  .stat b{font-size:14px}
  .stat span{font-size:10.5px}
  .search{width:44px;padding:0 12px}
  .search input,.search kbd{display:none}
  .search:focus-within{width:200px}
  .search:focus-within input{display:block}
  .hero{padding:36px 0 26px}
  .hero-stats{width:100%}
  .stat{flex:1;min-width:0;padding:12px 14px}
  .controls{top:60px}
  .ctl-actions{margin-left:auto}
  .row{grid-template-columns:38px 1fr 78px 34px;gap:10px;padding:10px 12px}
  .barcol,.metriccol{display:none}
  .hovercard{display:none!important}
  .cmp-top{flex-direction:column}
  .modal-bdy{padding:16px}
  .cmp-tbl{font-size:12px}
  .cmp-tbl th,.cmp-tbl td{padding:9px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 内联文字按钮 / 数据说明 ---------- */
.linkbtn{color:var(--acc);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.linkbtn:hover{filter:brightness(1.15)}
.about section{margin-bottom:20px}
.about section:last-child{margin-bottom:0}
.about h3{font-size:14px;margin-bottom:6px;color:var(--txt)}
.about p,.about li{font-size:13.5px;color:var(--txt2);line-height:1.75}
.about b{color:var(--txt)}
.about ul{margin:8px 0 0 18px}
.about li{margin-bottom:5px}
.about code{font-family:"JetBrains Mono",monospace;font-size:12.5px;padding:1px 5px;
  border-radius:4px;background:var(--panel-2);border:1px solid var(--line)}
.warn-note{padding:11px 13px;border-radius:var(--r-s);background:var(--panel);
  border-left:3px solid var(--warn)}

/* 主板型号较长，占满两列 */
.hc-kv-full{grid-column:1/-1;border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.hc-kv-full b{font-size:11.5px;text-align:right}

/* ---------- 价格双滑块 ---------- */
.range2{position:relative;height:20px;display:flex;align-items:center}
.range2-bg,.range2-fill{position:absolute;height:4px;border-radius:99px;pointer-events:none}
.range2-bg{left:0;right:0;background:var(--line-2)}
.range2-fill{background:var(--acc)}
.range2 input{position:absolute;left:0;width:100%;height:4px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.range2 input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:15px;height:15px;
  border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.range2 input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.range2 input::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid var(--acc);cursor:grab}
.range2 input::-moz-range-track{background:none}

/* ==========================================================
   分档卡片墙
   ========================================================== */
.tiers{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}

.tier-row{display:grid;grid-template-columns:196px 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-x);overflow:hidden;
  background:var(--bg1);animation:tierIn .5s var(--ease) both}
@keyframes tierIn{from{opacity:0;transform:translateY(12px)}}

/* 档位标识：左侧竖条 + 徽章，颜色即档位 */
.tier-head{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:22px 20px 22px 26px;background:
    linear-gradient(100deg,color-mix(in srgb,var(--tc) 15%,transparent),transparent 78%),var(--bg2)}
.tier-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc)}
.t-S{--tc:var(--t-s)} .t-A{--tc:var(--t-a)} .t-B{--tc:var(--t-b)}
.t-C{--tc:var(--t-c)} .t-D{--tc:var(--t-d)}
.tier-badge{font-family:"JetBrains Mono",monospace;font-size:34px;font-weight:700;line-height:1;
  color:var(--tc);letter-spacing:-.04em}
.tier-meta h2{font-size:15px;font-weight:600;letter-spacing:.02em;margin-top:8px}
.tier-meta p{font-size:11.5px;color:var(--txt3);margin-top:2px;line-height:1.5}
.tier-num{position:absolute;top:20px;right:18px;text-align:right}
.tier-num b{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--txt2)}
.tier-num span{font-size:10.5px;color:var(--txt3);margin-left:2px}

.tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;padding:14px}

/* ---------- 型号卡片 ---------- */
.card{position:relative;padding:11px 12px 13px;border-radius:var(--r);cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);overflow:hidden;
  transition:border-color .18s,background .18s,transform .18s var(--ease);
  animation:cardIn .42s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}}
.card:hover{border-color:var(--line2);background:var(--bg3);transform:translateY(-2px);z-index:2}
.card.picked{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,var(--bg2))}
.card.picked::after{content:"✓";position:absolute;top:9px;right:10px;width:15px;height:15px;
  display:grid;place-items:center;border-radius:5px;background:var(--acc);color:#fff;
  font-size:10px;line-height:1}
.card.is-base{border-color:var(--warn)}
.card.is-base::after{content:"基准";position:absolute;top:9px;right:10px;padding:1px 5px;
  border-radius:4px;background:var(--warn);color:#000;font-size:9px;font-weight:700}

.card-hd{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.bdot{width:6px;height:6px;border-radius:2px;flex:none;background:var(--acc)}
.bdot.b-NVIDIA{background:var(--nv)} .bdot.b-AMD{background:var(--amd)}
.bdot.b-Intel{background:var(--intel)}
.bdot.b-Huawei{background:var(--huawei)} .bdot.b-Xiaomi{background:var(--xiaomi)}
.bdot.b-Qualcomm{background:var(--qualcomm)} .bdot.b-MediaTek{background:var(--mediatek)}
.bdot.b-Apple{background:var(--apple)} .bdot.b-Samsung{background:var(--samsung)} .bdot.b-Google{background:var(--google)}
.card-hd span{font-size:10px;color:var(--txt3);letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.card-num{display:flex;align-items:baseline;gap:4px;margin-bottom:5px}
.card-num b{font-family:"JetBrains Mono",monospace;font-size:19px;font-weight:400;
  letter-spacing:-.03em;line-height:1}
.card-num span{font-size:9.5px;color:var(--txt3)}
.card-num em{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:10.5px}
.card-num em.up{color:var(--ok)} .card-num em.down{color:var(--danger)}
.card-spec{font-size:10.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:9px}
.card-bar{height:2px;border-radius:99px;background:var(--line)}
.card-bar i{display:block;height:100%;border-radius:99px;background:var(--tc,var(--acc));
  animation:grow .7s var(--ease) both}

@media (max-width:820px){
  .tier-row{grid-template-columns:1fr}
  .tier-head{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .tier-head::before{width:100%;height:3px;bottom:auto}
  .tier-badge{font-size:24px}
  .tier-meta h2{margin-top:0;font-size:14px}
  .tier-num{position:static;margin-left:auto}
  .tier-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px;padding:11px}
  .card h3{font-size:12.5px}
  .card-num b{font-size:17px}
}

/* ==========================================================
   阶梯图：世代分列 × 性能分层，严格对齐的表格行
   ========================================================== */
/* 桌面端不设 overflow：一旦 .ladder-wrap 成为滚动容器，
   列头的 position:sticky 就会相对它而非视口定位，粘在页面中间。
   横向滚动只在窄屏启用，那时列头改为随内容滚动。 */
.ladder-wrap{padding-bottom:28px}
.ladder-wrap::-webkit-scrollbar{height:9px}
.ladder-wrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
/* 不能用 overflow:hidden 裁圆角 —— 它同样会建立滚动容器，
   让列头的 sticky 相对本元素偏移。改为手动给首尾行做圆角。 */
.ladder-in{border:1px solid var(--line);border-radius:var(--r-x);background:var(--bg1)}
.ladder-server,.ladder-ai{overflow-x:auto;border-radius:var(--r-x)}
.ladder-server .ladder-hd,.ladder-ai .ladder-hd{position:static}
.ladder-hd{border-radius:calc(var(--r-x) - 1px) calc(var(--r-x) - 1px) 0 0}
.ladder-body>*:last-child{border-radius:0 0 calc(var(--r-x) - 1px) calc(var(--r-x) - 1px)}
.lh:first-child{border-top-left-radius:inherit}
.lh:last-child{border-top-right-radius:inherit}

/* 列头 */
.ladder-hd{position:sticky;top:142px;z-index:14;display:grid;gap:0;
  background:var(--bg2);border-bottom:1px solid var(--line2);
  box-shadow:0 1px 0 var(--line2),0 6px 16px -10px rgba(0,0,0,.5)}
.lh{padding:9px 6px;text-align:center;font-size:11px;font-weight:600;color:var(--txt2);
  border-right:1px solid var(--line);line-height:1.35}
.lh:last-child{border-right:0}
.lh small{display:block;font-weight:400;font-size:9.5px;color:var(--txt3)}
.lh-NVIDIA{color:var(--nv)} .lh-AMD{color:var(--amd)} .lh-Intel{color:var(--intel)}
.lh-Huawei{color:var(--huawei)} .lh-Xiaomi{color:var(--xiaomi)}
.lh-Qualcomm{color:var(--qualcomm)} .lh-MediaTek{color:var(--mediatek)}
.lh-Apple{color:var(--apple)} .lh-Samsung{color:var(--samsung)} .lh-Google{color:var(--google)}
.lh-axis{background:var(--acc);color:#fff}
.lh-axis::after{content:"越往上越强";display:block;font-weight:400;font-size:9.5px;opacity:.85}

/* 档位分隔带 */
.lsep{display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 14%,transparent),transparent 62%);
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line)}
.lsep:first-child{border-top:0}
.lsep i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;
  color:var(--tc);width:20px;text-align:center}
.lsep b{font-size:12.5px;font-weight:600}
.lsep span{font-size:11px;color:var(--txt3)}

/* 性能层 = 一行 */
.lrow{display:grid;gap:0;border-bottom:1px solid var(--line);transition:background .14s}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)}  /* 整行高亮，便于横向对读 */
.lcell{display:flex;flex-direction:column;gap:3px;padding:4px;min-height:34px;
  border-right:1px solid var(--line);justify-content:center}
.lcell:last-child{border-right:0}
.lcell-axis{align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--txt3);background:var(--bg2)}
.lrow:hover .lcell-axis{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}

/* 型号 chip */
.lchip{position:relative;display:flex;align-items:center;gap:4px;width:100%;padding:5px 7px;
  border-radius:6px;font-size:11.5px;font-weight:500;text-align:left;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--txt);
  background:var(--bg2);border:1px solid var(--line);transition:.16s}
.lchip::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:99px}
.lchip::before{background:var(--acc)}
.lchip.b-NVIDIA::before{background:var(--nv)}
.lchip.b-AMD::before{background:var(--amd)}
.lchip.b-Intel::before{background:var(--intel)}
.lchip.b-Huawei::before{background:var(--huawei)}
.lchip.b-Xiaomi::before{background:var(--xiaomi)}
.lchip.b-Qualcomm::before{background:var(--qualcomm)}
.lchip.b-MediaTek::before{background:var(--mediatek)}
.lchip.b-Apple::before{background:var(--apple)}
.lchip.b-Samsung::before{background:var(--samsung)}
.lchip.b-Google::before{background:var(--google)}
.lchip:hover{border-color:var(--line2);background:var(--bg3);transform:translateX(2px)}
.lchip.picked{background:color-mix(in srgb,var(--acc) 20%,var(--bg2));border-color:var(--acc)}
.lchip.is-base{border-color:var(--warn)}
.lchip.dim{opacity:.18;pointer-events:none}
.lchip em{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-style:normal}
.lchip em.up{color:var(--ok)} .lchip em.down{color:var(--danger)}

/* 阶梯图下排序维度不适用（纵轴恒为性能） */
.seg.muted{opacity:.4;pointer-events:none}

@media (max-width:1240px){
  .ladder-wrap{overflow-x:auto;border-radius:var(--r-x)}
  .ladder-in{min-width:1180px}
  .ladder-hd{position:static}
}
@media (max-width:900px){
  .lchip{font-size:10.5px;padding:4px 6px}
  .lsep{padding:8px 12px}
  .lsep span{display:none}
}