:root{
  --bg:#f2f4f7;--surface:#fff;--surface2:#e9edf2;--ink:#171a20;--ink2:#5a6372;--hairline:#d5dae2;
  --accent:#0e7490;--accent-ink:#fff;--bx:#2563eb;--ux:#059669;--cx:#dc2626;--unk:#8a94a4;
  --chip-bx:#2563eb1a;--chip-ux:#0596691a;--chip-cx:#dc26261a;--chip-unk:#8a94a41f;
  --draft:#b45309;--draftbg:#b453091a;--radius:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101216;--surface:#191d23;--surface2:#21262e;--ink:#e8eaee;--ink2:#99a1ad;--hairline:#2c323b;
  --accent:#22d3ee;--accent-ink:#06252b;--bx:#6ea8ff;--ux:#4ade80;--cx:#f87171;--unk:#7d8695;
  --chip-bx:#6ea8ff21;--chip-ux:#4ade8021;--chip-cx:#f8717121;--chip-unk:#7d869526;
  --draft:#f0b25c;--draftbg:#f0b25c1f;
}}
[data-theme="dark"]{
  --bg:#101216;--surface:#191d23;--surface2:#21262e;--ink:#e8eaee;--ink2:#99a1ad;--hairline:#2c323b;
  --accent:#22d3ee;--accent-ink:#06252b;--bx:#6ea8ff;--ux:#4ade80;--cx:#f87171;--unk:#7d8695;
  --chip-bx:#6ea8ff21;--chip-ux:#4ade8021;--chip-cx:#f8717121;--chip-unk:#7d869526;
  --draft:#f0b25c;--draftbg:#f0b25c1f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;font-size:15px;line-height:1.6}
a{color:inherit}
.disp,.mono{font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-variant-numeric:tabular-nums}
header.site{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  /* 通栏描边，但内容跟 main 的 1060 栏宽左对齐，避免与外壳返回条错开 20px */
  padding:10px max(20px,calc(50% - 530px))}
.brand{font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-weight:700;font-size:18px;
  letter-spacing:.5px;text-decoration:none}
.brand b{color:var(--accent)}
header.site nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--ink2);
  font-weight:500;font-size:14px;white-space:nowrap;min-height:36px;display:flex;align-items:center}
header.site nav a:hover{color:var(--ink);background:var(--surface2)}
header.site nav a.on{color:var(--ink);background:var(--surface2);font-weight:600}
main{max-width:1100px;margin:0 auto;padding:20px}
footer.site{max-width:1100px;margin:0 auto;padding:24px 20px 48px;color:var(--ink2);font-size:12.5px;
  border-top:1px solid var(--hairline);margin-top:32px}
footer.site p{margin:4px 0}
h1{font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-size:26px;margin:0 0 4px;text-wrap:balance}
h2{font-size:17px;margin:28px 0 10px;font-weight:600}
.lede{color:var(--ink2);font-size:13.5px;margin:0 0 18px;max-width:70ch}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
input[type=search],select{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;padding:8px 12px;min-height:38px}
input[type=search]{flex:1 1 220px;max-width:320px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chip{appearance:none;cursor:pointer;border:1px solid var(--hairline);background:var(--surface);
  color:var(--ink2);border-radius:999px;padding:6px 13px;font:500 12.5px/1.4 inherit;min-height:34px}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.count{color:var(--ink2);font-size:12.5px;margin-left:auto;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.card:hover{border-color:var(--accent)}
.card .top{display:flex;gap:8px;justify-content:space-between;align-items:flex-start}
.card .en{font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-weight:600;font-size:16px;line-height:1.25}
.card .zh{color:var(--ink2);font-size:13px}
.thumb{flex:none;width:104px;height:104px;object-fit:contain;background:#fff;
  border:1px solid var(--hairline);border-radius:8px}
.stats{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}
.stats .lb{font-size:11px;color:var(--ink2)}
.stats .track{display:block;height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.stats .fill{display:block;height:100%;border-radius:3px;background:var(--accent);min-width:2px}
.stats .val{font:600 11.5px/1 "Chakra Petch",sans-serif;font-variant-numeric:tabular-nums}
.tierwrap{display:flex}
.tier{display:inline-block;font-size:11px;line-height:1.5;padding:0 8px;border-radius:4px;
  border:1px solid var(--hairline);color:var(--ink2);background:var(--surface2);letter-spacing:.04em}
.tier.t-hi{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.tier.t-mid{color:var(--ink2)}
.tier.t-lo{color:var(--ink2);opacity:.8}
.statbig .tier{font-size:13px;padding:2px 12px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.pill{font:600 11px/1.6 "Chakra Petch","Noto Sans SC",sans-serif;border-radius:5px;padding:1px 7px;letter-spacing:.05em}
.pill.bx{color:var(--bx);background:var(--chip-bx)}.pill.ux{color:var(--ux);background:var(--chip-ux)}
.pill.cx{color:var(--cx);background:var(--chip-cx)}.pill.unknown{color:var(--unk);background:var(--chip-unk)}
.pill.t{color:var(--ink2);background:var(--surface2);font-family:inherit;font-weight:500;letter-spacing:0}
.pill.draft{color:var(--draft);background:var(--draftbg);font-family:inherit;font-weight:500;letter-spacing:0}
.sub{color:var(--ink2);font-size:12px;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:8px 12px;border-top:1px solid var(--hairline);vertical-align:top}
thead th{border-top:0;color:var(--ink2);font-weight:500;font-size:12px;white-space:nowrap}
tbody tr:hover{background:var(--surface2)}
td.code,td.num{font-family:"Chakra Petch",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num,th.num{text-align:right}
.dim{color:var(--ink2)}
.linehead td{background:var(--surface2);font-weight:600;font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-size:12.5px}
.note{color:var(--ink2);font-size:12.5px;max-width:70ch;margin-top:14px}
/* 详情页 */
.crumb{font-size:12.5px;color:var(--ink2);margin-bottom:10px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.detail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.detail>*{min-width:0}
.detail .hero{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px}
.detail .hero img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}
.namelist{display:flex;flex-direction:column;gap:4px;margin:10px 0 16px}
.namelist .row{display:flex;gap:8px;align-items:baseline;font-size:14px}
.namelist .tag{flex:none;font-size:10.5px;letter-spacing:.1em;color:var(--ink2);
  border:1px solid var(--hairline);border-radius:4px;padding:0 5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0}
.kv dt{color:var(--ink2);font-size:13px}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.statbig{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;max-width:460px}
.statbig .lb{font-size:13px;color:var(--ink2)}
.statbig .track{display:block;height:10px;border-radius:5px;background:var(--surface2);overflow:hidden}
.statbig .fill{display:block;height:100%;border-radius:5px;background:var(--accent);min-width:3px}
.statbig .val{font:600 14px/1 "Chakra Petch",sans-serif;font-variant-numeric:tabular-nums}
.srclist{font-size:12.5px;color:var(--ink2);word-break:break-all}
.srclist li{margin:2px 0}
.related{display:flex;flex-wrap:wrap;gap:8px}
.related a{background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  padding:6px 11px;font-size:13px;text-decoration:none}
.related a:hover{border-color:var(--accent)}
/* 组合模拟器 */
.combo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.combo>*{min-width:0}
.slots{min-width:0}
.slots{display:flex;flex-direction:column;gap:10px}
.slot{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:12px 14px}
.slot h3{margin:0 0 8px;font-size:13px;color:var(--ink2);font-weight:500;letter-spacing:.04em}
.slot .pick{display:flex;gap:12px;align-items:center;min-width:0}
.slot select{flex:1;min-width:0}
.slot img{width:60px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--hairline);border-radius:8px;flex:none}
.slot .info{font-size:12px;color:var(--ink2);margin-top:6px;min-height:1.4em}
.result{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:16px;position:sticky;top:76px}
.result h2{margin:0 0 4px;font-size:16px}
.result .comboname{font-family:"Chakra Petch","Noto Sans SC",sans-serif;font-size:15px;font-weight:600;
  margin-bottom:12px;color:var(--accent);word-break:break-word;min-height:1.4em}
.total{display:flex;gap:14px;margin:12px 0;font-variant-numeric:tabular-nums}
.total div{font-size:12px;color:var(--ink2)}
.total b{display:block;font:700 20px/1.2 "Chakra Petch",sans-serif;color:var(--ink)}
.modes{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.warn{color:var(--draft);background:var(--draftbg);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-top:12px}
.btnrow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{appearance:none;cursor:pointer;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:8px 14px;font:500 13px/1.3 inherit;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
@media (max-width:820px){
  .detail{grid-template-columns:minmax(0,1fr);gap:16px}
  .detail .hero{max-width:320px}
  .combo{grid-template-columns:minmax(0,1fr)}
  .result{position:static}
}
@media (max-width:720px){
  header.site{padding:9px 14px;gap:8px}
  main{padding:16px 14px}
  h1{font-size:22px}
  header.site nav{flex-wrap:wrap;overflow-x:visible}
  header.site nav a{padding:7px 10px}
  .controls{flex-wrap:wrap;gap:8px}
  .controls input[type=search]{flex:1 1 100%;max-width:none;font-size:16px}
  .controls .chip{flex:none}
  .count{margin-left:auto;align-self:center;white-space:nowrap}
  .grid{grid-template-columns:1fr}
  .thumb{width:88px;height:88px}
  table{font-size:13px}th,td{padding:7px 9px}
  .slot .pick{flex-wrap:wrap}
  .slot select{font-size:16px;flex:1 1 100%;order:2}
  .slot img{width:52px;height:52px}
}
@media (prefers-reduced-motion:no-preference){.card,.related a{transition:border-color .15s}}

/* ── 共享外壳主题映射（覆写 /shared/site.css 的默认 token）────────── */
:root{
  --site-bg:var(--bg);--site-card:var(--surface);--site-ink:var(--ink);
  --site-sub:var(--ink2);--site-line:var(--hairline);
  --site-accent:var(--accent);--site-on-accent:var(--accent-ink);
}
.site-bar,.site-foot{width:100%;max-width:1100px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px}
.site-bar{padding-top:12px;padding-bottom:2px}
.site-foot{margin-top:0;padding-bottom:40px}
@media (max-width:720px){
  .site-bar,.site-foot{padding-left:14px;padding-right:14px}
}