:root{
  --bg:#0f1418; --elev:#161d23; --elev2:#1c252d; --input:#111a20;
  --bd:#26333d; --bd-soft:#1e2a33;
  --tx:#dde5ea; --dim:#8fa1ad; --faint:#61717c;
  --ac:#35d39a; --ac-soft:rgba(53,211,154,.10);
  --warn:#e0a33d; --danger:#e5604f; --info:#4aa3e0; --purple:#9b7ce0;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
  --r:10px; --sh:0 2px 14px rgba(0,0,0,.30);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:400 14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ac)}

.top{border-bottom:1px solid var(--bd);background:var(--elev);position:sticky;top:0;z-index:50}
.top-inner{max-width:1440px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.brand h1{font-size:19px;font-weight:700;letter-spacing:-.01em;display:inline}
.brand .tag{font-size:11px;background:var(--ac-soft);color:var(--ac);border:1px solid rgba(53,211,154,.3);
  padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:2px}
.brand .sub{display:block;font-size:12px;color:var(--faint);margin-top:4px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
button{background:var(--elev2);color:var(--tx);border:1px solid var(--bd);border-radius:8px;
  padding:8px 14px;font:500 13px var(--sans);cursor:pointer;transition:.15s}
button:hover{border-color:#3a4a57;background:#222d36}
button.primary{background:var(--ac);color:#06231a;border-color:var(--ac);font-weight:600}
button.primary:hover{background:#4ce0aa}
button.ghost{background:none}

.wrap{max-width:1440px;margin:0 auto;padding:20px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start}
@media(max-width:1100px){.layout{grid-template-columns:1fr}}
.panel-right{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}
@media(max-width:1100px){.panel-right{position:static}}

.card{background:var(--elev);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.section-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none}
.section-head .ico{width:26px;height:26px;border-radius:7px;background:var(--ac-soft);color:var(--ac);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.section-head h2{font-size:15px;font-weight:600}
.section-head .desc{font-size:12px;color:var(--faint);margin-top:2px}
.section-body{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.section-body{grid-template-columns:1fr}}
.section-body.closed{display:none}

.f{display:flex;flex-direction:column;gap:5px}
.f.wide{grid-column:1/-1}
.f label{font-size:12.5px;color:var(--dim);font-weight:500}
.f .hint{font-size:11.5px;color:var(--faint);line-height:1.45}
.f input,.f select{background:var(--input);border:1px solid var(--bd);border-radius:7px;color:var(--tx);
  padding:8px 10px;font:400 13.5px var(--sans);width:100%}
.f input:focus,.f select:focus{outline:none;border-color:var(--ac)}
.f .unit{position:relative}
.f .unit span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--faint)}
.f .unit input{padding-right:44px}

.score-box{padding:20px 16px 16px;text-align:center;border-bottom:1px solid var(--bd-soft)}
.score-num{font:700 54px/1 var(--mono);letter-spacing:-.03em}
.score-rating{font-size:16px;font-weight:600;margin-top:8px}
.score-scale{height:6px;border-radius:4px;margin:14px 0 5px;position:relative;
  background:linear-gradient(90deg,#e0413a,#e8763a,#d9a13a,#4aa3e0,#2f9e6e,#7b4fd9,#c9971f)}
.score-scale i{position:absolute;top:-4px;width:3px;height:14px;background:#fff;border-radius:2px;
  box-shadow:0 0 5px rgba(0,0,0,.7);transition:left .3s}
.score-scale-lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint)}
.score-desc{font-size:12.5px;color:var(--dim);margin-top:12px;line-height:1.6;text-align:left}

.subs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd-soft);border-bottom:1px solid var(--bd-soft)}
.sub-i{background:var(--elev);padding:13px 14px;text-align:center}
.sub-i b{display:block;font:700 22px/1 var(--mono)}
.sub-i span{display:block;font-size:11px;color:var(--faint);margin-top:6px;line-height:1.4}

.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd-soft)}
.kv{background:var(--elev);padding:11px 14px}
.kv .k{font-size:11px;color:var(--faint)}
.kv .v{font:600 15px var(--mono);margin-top:3px}

.radar-wrap{padding:10px 0 4px;display:flex;justify-content:center}
.radar-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 14px 14px;font-size:11px;color:var(--faint)}

.diag{padding:6px 14px 14px}
.diag-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd-soft)}
.diag-row:last-child{border-bottom:0}
.diag-g{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--elev2);color:var(--dim);flex-shrink:0}
.diag-l{flex:1;font-size:12.5px}
.diag-l small{display:block;color:var(--faint);font-size:11px}
.diag-d{font:600 13px var(--mono);color:var(--ac);flex-shrink:0}

.note{margin:12px 16px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.6;
  border:1px solid var(--bd);background:var(--elev2);color:var(--dim)}
.note.warn{border-color:rgba(224,163,61,.35);background:rgba(224,163,61,.08)}
.note b{color:var(--tx)}

.foot{max-width:1440px;margin:22px auto 40px;padding:0 20px;font-size:12px;color:var(--faint);line-height:1.8}
.foot div{margin-bottom:5px}
code{background:var(--elev2);padding:1px 5px;border-radius:4px;font:12px var(--mono);color:var(--dim)}

#toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--elev2);
  border:1px solid var(--bd);color:var(--tx);padding:9px 18px;border-radius:8px;font-size:13px;
  opacity:0;transition:.25s;pointer-events:none;z-index:99;box-shadow:var(--sh)}

#shareMask{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;z-index:100;
  align-items:center;justify-content:center;padding:20px}
#shareMask.on{display:flex}
#shareBox{background:var(--elev);border:1px solid var(--bd);border-radius:12px;padding:14px;
  max-height:94vh;display:flex;flex-direction:column;gap:10px;overflow:auto}
/* 图片给足尺寸：微信里要靠长按它来保存，太小不好按 */
#shareBox img{width:min(420px,90vw);height:auto;border-radius:8px;display:block;margin:0 auto}
@media(max-width:520px){ #shareMask{padding:8px} #shareBox{padding:10px} }

/* ── 对比模式 ─────────────────────────────────────────────────── */
#abBar{display:none;gap:8px;margin-bottom:14px}
#abBar.on{display:flex}
.ab{flex:1;background:var(--elev);border:1px solid var(--bd);border-radius:var(--r);
  padding:11px 14px;cursor:pointer;transition:.15s;min-width:0}
.ab.on{border-color:var(--ac);background:var(--ac-soft)}
.ab .k{font-size:11px;color:var(--faint);letter-spacing:.1em}
.ab .n{font-size:14px;font-weight:600;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ab.on .n{color:var(--ac)}
#cmpBox{display:none;margin-top:14px;border-top:1px solid var(--bd-soft);padding-top:12px}
#cmpBox.on{display:block}
.cmp-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cmp-row .nm{flex:1;font-size:12.5px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cmp-row .sc{font:700 19px/1 var(--mono)}
.cmp-gap{font-size:12px;color:var(--faint);text-align:left;line-height:1.6}