:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --reactome: #1f6f8b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --ink:#fff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--page); color:var(--ink); font: 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color: inherit; }
h1,h2,h3 { margin:0; font-weight:600; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing:.04em; margin-bottom: 8px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
.brand { display:flex; align-items:baseline; gap:12px; }
.logo { font-weight:700; text-decoration:none; color:var(--reactome); font-size:20px; letter-spacing:.02em; }
.top-right { display:flex; align-items:center; gap:16px; }
.pill { padding:4px 12px; border-radius:999px; font-weight:600; font-size:13px; display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border); }
.pill::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--muted); }
.pill-good::before { background:var(--good); } .pill-warn::before { background:var(--warn); } .pill-bad::before { background:var(--critical); }
.range button { background:var(--surface); color:var(--ink); border:1px solid var(--border); padding:5px 12px; cursor:pointer; font:inherit; }
.range button:first-child { border-radius:6px 0 0 6px; } .range button:last-child { border-radius:0 6px 6px 0; }
.range button.active { background:var(--ink); color:var(--page); border-color:var(--ink); }
.notice { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border-bottom:1px solid color-mix(in srgb, var(--warn) 60%, transparent); padding:8px 24px; font-size:13px; text-align:center; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 40px; display:grid; gap: 28px; }
.host { display:grid; gap:14px; }
.host-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.host-meta { color:var(--ink-2); font-size:13px; }
.banner { padding:12px 14px; border-radius:8px; border:1px solid var(--critical); background:color-mix(in srgb, var(--critical) 10%, var(--surface)); font-weight:500; }
.banner.warn { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
ul.services { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
ul.services li { display:grid; grid-template-columns: 14px 1fr auto; gap:10px; align-items:center; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--muted); display:inline-block; }
.dot.up { background:var(--good); } .dot.down { background:var(--critical); } .dot.warn { background:var(--warn); }
.since { color:var(--muted); font-size:12px; font-variant-numeric: tabular-nums; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--muted); font-weight:500; padding:2px 6px 6px 0; border-bottom:1px solid var(--grid); }
td { padding:5px 6px 5px 0; border-bottom:1px solid var(--grid); vertical-align:top; }
tr:last-child td { border-bottom:0; }
.num, td.num { text-align:right; font-variant-numeric: tabular-nums; }
.state { display:inline-flex; align-items:center; gap:6px; }
dl.hostinfo { margin:0; display:grid; grid-template-columns: auto 1fr; gap:4px 14px; font-size:13px; }
dl.hostinfo dt { color:var(--muted); } dl.hostinfo dd { margin:0; font-variant-numeric: tabular-nums; }
.charts { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap:14px; }
.chart { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 12px 6px; overflow:hidden; }
.chart h3 { margin-bottom:2px; }
.chart .sub { color:var(--muted); font-size:12px; margin:0 0 6px; }
.chart .plot { width:100%; height:200px; }
.legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-2); margin:6px 0 4px; }
.legend span::before { content:""; display:inline-block; width:10px; height:3px; border-radius:2px; background:var(--c); margin-right:5px; vertical-align:middle; }
.legend span.off { opacity:.4; text-decoration: line-through; }
.legend span { cursor:pointer; user-select:none; }
.muted { color:var(--muted); }
.empty { color:var(--muted); font-size:13px; padding:40px 0; text-align:center; }
footer { max-width:1200px; margin:0 auto; padding: 0 24px 40px; color:var(--muted); font-size:12px; }
/* uPlot theming */
.u-legend { display:none; }
.u-tooltip { position:absolute; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:6px; padding:6px 9px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:10; white-space:nowrap; font-variant-numeric: tabular-nums; }
.u-tooltip .row { display:flex; gap:10px; justify-content:space-between; }
.u-tooltip .row i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
@media (max-width: 600px) { main { padding: 12px; } .top { padding: 10px 12px; } }