:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --muted:#667085; --line:#e4e7ec; --acc:#2156d9;
  --pos:#127a3d; --neg:#c0262d; --warn:#b26b00; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1216; --card:#171b21; --fg:#e7e9ee; --muted:#98a2b3; --line:#2a3039; --acc:#7aa2ff;
    --pos:#4fc27c; --neg:#ff6b70; --warn:#f0b354; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:1100px; margin:0 auto; padding:16px; }
h1 { margin:0; font-size:22px; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; overflow-x:auto; }
.top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.top form { margin-left:auto; }
.badges { display:flex; gap:6px; }
.badge { font-size:12px; font-weight:600; padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
.badge.live { color:#fff; background:var(--neg); border-color:var(--neg); }
.badge.ok { color:var(--pos); } .badge.warn { color:var(--warn); } .badge.bad { color:#fff; background:var(--neg); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.grid .card { margin:0; }
.stat span { color:var(--muted); font-size:13px; display:block; } .stat b { font-size:20px; display:block; }
.muted, small { color:var(--muted); }
.pos { color:var(--pos); } .neg { color:var(--neg); }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
td.reason { white-space:normal; min-width:240px; }
.chart { width:100%; height:160px; } .chart .line { fill:none; stroke:var(--acc); stroke-width:2; }
.controls form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
button { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; }
button.danger { background:var(--neg); border-color:var(--neg); }
button.link { background:none; border:none; color:var(--acc); padding:0; }
.alert { padding:10px 12px; border-radius:8px; background:color-mix(in srgb, var(--neg) 15%, transparent); }
.alert.info { background:color-mix(in srgb, var(--acc) 15%, transparent); }
.login { max-width:380px; margin:10vh auto; }
.login label { display:block; margin:10px 0; } .login input { width:100%; margin-top:4px; } .login button { width:100%; margin-top:8px; }
details { border-bottom:1px solid var(--line); padding:8px 0; } summary { cursor:pointer; }
pre { white-space:pre-wrap; word-break:break-word; font-size:12px; background:var(--bg); padding:10px; border-radius:8px; max-height:420px; overflow:auto; }
.log { list-style:none; padding:0; margin:0; font-size:13px; } .log li { padding:3px 0; border-bottom:1px solid var(--line); }
.log li.error { color:var(--neg); } .log li.warn { color:var(--warn); }
code { font-size:13px; }
.crumb { margin:0 0 6px; font-size:14px; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }