:root { --fg:#1d2430; --muted:#5d6675; --bg:#f6f7f9; --card:#fff; --line:#dde1e7;
  --accent:#1f5fbf; --ok:#1d7a46; --warn:#a86400; --bad:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:center; padding:.75rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
nav a { color:var(--accent); text-decoration:none; padding:.4rem 0; }
main { max-width:42rem; margin:0 auto; padding:1rem; }
h1 { font-size:1.5rem; margin:.5rem 0; } h2 { font-size:1.1rem; margin:0 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin:1rem 0; }
.big { font-size:2rem; font-weight:700; margin:.25rem 0; }
.muted, small { color:var(--muted); }
.badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.9rem; font-weight:600; background:#e8ebf0; }
.badge.ok { background:#dff3e8; color:var(--ok); } .badge.warn { background:#fdecc8; color:var(--warn); }
.badge.bad { background:#fbdcd9; color:var(--bad); } .badge.live { background:#fbdcd9; color:var(--bad); }
.bad-card { border-color:var(--bad); color:var(--bad); }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:.4rem .25rem; border-bottom:1px solid var(--line); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
ul.plain { list-style:none; padding:0; margin:0; } ul.plain li { padding:.4rem 0; border-bottom:1px solid var(--line); }
li.alert { display:flex; justify-content:space-between; gap:.75rem; align-items:center; }
li.alert.critical { color:var(--bad); } li.alert.warning { color:var(--warn); }
.check.fail { color:var(--bad); } .check.pass { color:var(--ok); }
.flash { max-width:42rem; margin:1rem auto 0; padding:.75rem 1rem; background:#e6effb; border-left:4px solid var(--accent); }
.error { color:var(--bad); }
button, .button { display:inline-block; min-height:44px; padding:.6rem 1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; }
button.small { min-height:36px; padding:.3rem .75rem; }
.button.secondary { background:#e8ebf0; color:var(--fg); } .button.danger { background:var(--bad); }
.stack { display:flex; flex-direction:column; gap:.75rem; max-width:24rem; }
form.inline { display:inline; } nav form.inline button { background:none; color:var(--accent); min-height:0; padding:.4rem 0; }
label { display:block; } input, textarea { display:block; width:100%; font:inherit; padding:.5rem; margin-top:.25rem; border:1px solid var(--line); border-radius:6px; }
@media (min-width:600px) { .stack { flex-direction:row; max-width:none; } }
.check { display:flex; gap:.5rem; align-items:center; } .check input { width:auto; margin:0; }
select { display:block; width:100%; font:inherit; padding:.5rem; margin-top:.25rem; }