:root{
  --bg:#f5f7fa; --card:#ffffff; --border:#e3e6ec; --text:#1f2329;
  --muted:#646a73; --accent:#2b6cb0; --accent-soft:#e8f0fa;
  --up:#d13b3b; --down:#1a9d5a; --warn:#d97706; --chip:#f0f2f5;
  --radius:10px; --shadow:0 1px 3px rgba(31,35,41,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  font-size:14px;line-height:1.6}
header{background:var(--card);border-bottom:1px solid var(--border);padding:14px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
header h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.3px}
.badge{font-size:12px;padding:2px 8px;border-radius:20px;background:var(--chip);color:var(--muted)}
.badge.ok{background:#e6f4ea;color:#1a9d5a}
.badge.bad{background:#fdecec;color:#d13b3b}
.spacer{flex:1}
nav{display:flex;gap:4px;flex-wrap:wrap;background:var(--card);
  border-bottom:1px solid var(--border);padding:0 20px;position:sticky;top:57px;z-index:19}
nav button{background:none;border:none;padding:11px 14px;cursor:pointer;color:var(--muted);
  font-size:14px;border-bottom:2px solid transparent;font-family:inherit}
nav button:hover{color:var(--text)}
nav button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
main{padding:18px 20px 60px;max-width:1500px}
section{display:none}
section.active{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{font-size:15px;margin:0 0 12px;font-weight:600}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g4,.g3,.g2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.kpi .label{font-size:12px;color:var(--muted)}
.kpi .value{font-size:22px;font-weight:600;margin-top:4px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:500;background:#fafbfc;position:sticky;top:0}
tbody tr:hover{background:#fafbfc}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--muted)}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;background:var(--chip);color:var(--muted)}
.tag.bull{background:#fdecec;color:#d13b3b}.tag.bear{background:#e6f4ea;color:#1a9d5a}
.tag.warn{background:#fef3e2;color:#d97706}.tag.info{background:var(--accent-soft);color:var(--accent)}
input,select,button{font-family:inherit;font-size:13px;padding:7px 10px;
  border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text)}
button{cursor:pointer;background:var(--accent);border-color:var(--accent);color:#fff}
button:hover{opacity:.9}
button.ghost{background:#fff;color:var(--text);border-color:var(--border)}
button.ghost:hover{background:#f5f7fa}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
canvas{width:100%;display:block;background:#fff;border-radius:6px}
.loading{padding:30px;text-align:center;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:flex;align-items:center;gap:8px;font-size:12px}
.bar .name{width:110px;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;height:8px;background:#f0f2f5;border-radius:4px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent)}
.bar .fill.neg{background:var(--down)}
.bar .val{width:64px;text-align:right}
pre{background:#fafbfc;border:1px solid var(--border);border-radius:6px;padding:12px;
  overflow:auto;font-size:12px;max-height:420px;margin:0}
.chk{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px}
.chk:last-child{border:none}
.scroll{max-height:520px;overflow:auto}