:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2129; --border:#2d333b;
  --text:#e6edf3; --muted:#8b949e;
  --ok:#2ea043; --warn:#d29922; --bad:#da3633; --none:#30363d;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fa; --panel:#fff; --panel2:#f0f2f5; --border:#d0d7de;
    --text:#1f2328; --muted:#59636e;
    --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; --none:#d8dee4;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.5}
.wrap{max-width:1000px;margin:0 auto;padding:32px 20px 64px}
h1{font-size:22px;margin:0 0 18px;font-weight:650;letter-spacing:.01em}

.banner{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:10px;
  font-weight:600;border:1px solid var(--border);background:var(--panel)}
.banner.operational{background:color-mix(in srgb,var(--ok) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
.banner.partial_outage{background:color-mix(in srgb,var(--warn) 16%,var(--panel));
  border-color:color-mix(in srgb,var(--warn) 50%,var(--border))}
.bicon{width:20px;height:20px;flex:none}
.fill-ok{fill:var(--ok)} .fill-warn{fill:var(--warn)} .fill-bad{fill:var(--bad)} .fill-none{fill:var(--muted)}
.fill-panel{fill:var(--panel)}
.stroke-check{fill:none;stroke:var(--panel);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#iconUnknown .stroke-check{stroke:var(--panel)}
.sw{width:9px;height:9px;display:inline-block;vertical-align:-1px}
.sw .l0{fill:var(--none)} .sw .l1{fill:var(--ok)} .sw .l2{fill:var(--warn)} .sw .l3{fill:var(--bad)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:16px 0 28px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.card .k{color:var(--muted);font-size:12px;letter-spacing:.04em}
.card .v{font-size:24px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}

.svc{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px}
.svc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.svc-icon{width:14px;height:14px;flex:none;align-self:center}
.svc-head a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.svc-head .hostname{color:var(--text);font-weight:600;font-size:15px}
.svc-head a:hover,.svc-head a:focus-visible{text-decoration:underline}
.rates{margin-left:auto;display:flex;gap:16px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.rates b{color:var(--text);font-weight:600}
.rates b.ok{color:var(--ok)} .rates b.warn{color:var(--warn)} .rates b.bad{color:var(--bad)}

.cells{display:grid;grid-template-columns:var(--cols);grid-template-rows:repeat(2,14px);gap:3px;margin-top:12px}
.cell{width:100%;height:14px;border-radius:3px;background:var(--none)}
.cell.l1{background:var(--ok)} .cell.l2{background:var(--warn)} .cell.l3{background:var(--bad)}
.legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:8px}
.lg{display:inline-flex;align-items:center;gap:5px;margin-left:10px}

.err{margin-top:10px;padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);
  font-size:13px;font-family:ui-monospace,SFMono,Menlo,monospace;word-break:break-all}
.note{margin-top:10px;padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);
  font-size:13px;word-break:break-all}
.meta{margin-top:10px;color:var(--muted);font-size:12px}
.foot{margin-top:32px;color:var(--muted);font-size:12px}
@media (max-width:640px){ .rates{margin-left:0;width:100%} }