:root { --bg:#f6f7f9; --card:#fff; --text:#16181d; --muted:#5d6572; --ok:#1a7f4b; --bad:#b3261e; --line:#e3e6ea; }
@media (prefers-color-scheme: dark) { :root { --bg:#101216; --card:#181b21; --text:#eef0f3; --muted:#9aa3b0; --ok:#4cc38a; --bad:#ff8a80; --line:#262b33; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 24px; }
h1 { margin:0 0 4px; font-size:24px; }
.lead { margin:0 0 12px; color:var(--muted); }
.status { margin:20px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.status[data-state="up"] { color:var(--ok); }
.status[data-state="down"] { color:var(--bad); }