:root { --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948; }
:root { --bg:#f5f6f8; --card:#fff; --fg:#1d2330; --muted:#7a8394; --line:#e4e7ec; --accent:#2f6fec; --good:#1a8f4c; --bad:#c9372c; --warn:#b26b00; --row-bad:#fdf1f0; }
@media (prefers-color-scheme: dark) {
  :root { --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; }
  :root { --bg:#14171c; --card:#1d2128; --fg:#e4e7ec; --muted:#8d95a3; --line:#2c323c; --accent:#5b8ff9; --good:#3fbf74; --bad:#ef6b5f; --warn:#e5a33a; --row-bad:#2e1f1f; }
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background:var(--bg); color:var(--fg); }
nav { display:flex; gap:18px; align-items:center; padding:10px 24px; background:var(--card); border-bottom:1px solid var(--line); }
nav a { color:var(--fg); text-decoration:none; } nav a:hover { color:var(--accent); }
nav .brand { font-weight:600; } .grow { flex:1; }
main { max-width:1180px; margin:20px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px; overflow-x:auto; }
.card.narrow { max-width:560px; }
.card h2, .card h3 { margin:0 0 12px; }
.head { display:flex; justify-content:space-between; align-items:center; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.stat .k { color:var(--muted); } .stat .v { font-size:22px; font-weight:600; margin:4px 0; } .stat .v small { font-size:14px; color:var(--muted); }
.sub, .muted { color:var(--muted); } .small { font-size:12px; }
.good { color:var(--good); } .bad { color:var(--bad); } .warn { color:var(--warn); }
tr.row-bad td { background:var(--row-bad); }
.filters { display:flex; gap:8px; align-items:center; margin:4px 0 10px; flex-wrap:wrap; }
.filters a { padding:4px 12px; border:1px solid var(--line); border-radius:14px; color:var(--fg); text-decoration:none; font-size:13px; }
.filters a.on { border-color:var(--accent); color:var(--accent); } .filters form { margin-left:auto; }
.bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--accent); } .bar i.bad { background:var(--bad); }
.s1 { background:var(--s1); } .s2 { background:var(--s2); } .s3 { background:var(--s3); } .s4 { background:var(--s4); }
.s5 { background:var(--s5); } .s6 { background:var(--s6); } .s7 { background:var(--s7); } .s8 { background:var(--s8); }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.legend { display:flex; gap:16px; color:var(--muted); font-size:12px; margin-bottom:8px; }
.share { display:flex; gap:2px; height:10px; margin:4px 0 12px; }
.share i { display:block; min-width:2px; } .share i:first-child { border-radius:4px 0 0 4px; } .share i:last-child { border-radius:0 4px 4px 0; }
.nodeuse tfoot td { border-bottom:0; color:var(--fg); font-weight:500; }
.card { position:relative; }
.chart { display:flex; align-items:flex-end; gap:3px; height:140px; }
.chart .col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:default; }
.chart .col:hover .stack { opacity:.8; }
.chart .stack { width:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.chart .stack i { display:block; width:100%; min-height:1px; }
.chart .stack i:first-child { border-radius:4px 4px 0 0; }
.chart .col span { font-size:10px; color:var(--muted); height:14px; white-space:nowrap; }
.tip { position:absolute; top:44px; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:6px;
  padding:6px 9px; font-size:12px; white-space:pre; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,.12); }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; white-space:nowrap; }
.mono { font-family:ui-monospace, Menlo, monospace; font-size:13px; } .wrap { word-break:break-all; max-width:320px; }
pre { background:var(--bg); padding:8px; border-radius:6px; font-size:12px; white-space:pre-wrap; }
label { display:block; margin:8px 0; color:var(--muted); font-size:13px; }
label input, label select { display:block; width:100%; margin-top:3px; }
label.check { display:inline-flex; gap:6px; align-items:center; color:var(--fg); margin-right:14px; } label.check input { width:auto; margin:0; }
input, select { padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); font:inherit; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:10px 0; } legend { color:var(--muted); font-size:13px; }
button, .btn { padding:7px 14px; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.small { padding:3px 9px; font-size:12px; margin:2px 0; } button.danger { background:var(--bad); }
button.link { background:none; color:var(--accent); padding:0; } button.link.danger { color:var(--bad); }
form.inline { display:inline; }
form.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; } form.row label { margin:0; min-width:150px; position:relative; }
#pmsg { position:absolute; left:0; top:100%; margin-top:2px; font-size:12px; white-space:nowrap; }
form.row { padding-bottom:16px; } form.row button { height:36px; }
.actions { white-space:nowrap; } .actions a { margin-right:8px; color:var(--accent); text-decoration:none; }
details summary { cursor:pointer; color:var(--accent); } details[open] { min-width:240px; white-space:normal; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:12px; background:#e7f5ec; color:#145c33; }
.flash.err { background:#fdecea; color:#8a1f17; } .flash.warn { background:#fff6db; color:#6b5200; }
.tag { font-size:11px; padding:1px 6px; border-radius:4px; background:var(--line); color:var(--muted); }