:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #14161a; --muted: #5d6470; --line: #e3e6ea;
  --accent: #3b5bdb; --ok: #2b8a3e; --warn: #e67700; --bad: #c92a2a; --parked: #868e96;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --panel:#1c1f24; --ink:#e9ecef; --muted:#9aa2ad; --line:#2b3038; --accent:#748ffc; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
header { display:flex; align-items:baseline; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
h1 { font-size:1.1rem; margin:0; font-weight:650; letter-spacing:-.01em; }
h1 span { color:var(--muted); font-weight:400; }
.who { margin-left:auto; color:var(--muted); font-size:.85rem; }
.who button { margin-left:.75rem; }
main { padding:1.5rem; max-width:1100px; }
.tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; }
.tabs button { background:none; border:1px solid var(--line); border-radius:999px; padding:.3rem .9rem; color:var(--muted); cursor:pointer; font-size:.85rem; }
.tabs button.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.note { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }
.fault { margin:1.5rem; padding:1rem 1.25rem; border:1px solid var(--bad); border-left-width:4px; border-radius:6px; background:var(--panel); }
.fault h2 { margin:0 0 .4rem; font-size:.95rem; color:var(--bad); }
.fault pre { margin:.5rem 0 0; white-space:pre-wrap; font-size:.8rem; color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1rem 1.25rem; margin-bottom:.75rem; }
.card h3 { margin:0 0 .25rem; font-size:1rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.card .meta { color:var(--muted); font-size:.82rem; }
.row { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.row .grow { flex:1; min-width:16rem; }
.badge { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.1rem .45rem; border-radius:4px; border:1px solid var(--line); color:var(--muted); }
.badge.customer { border-color:var(--warn); color:var(--warn); }
.health { font-size:.8rem; font-weight:600; }
.health.healthy { color:var(--ok); } .health.degraded, .health.unknown { color:var(--bad); }
.health.parked, .health.absent, .health.empty { color:var(--parked); }
table { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.5rem; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
button.act { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:.4rem .8rem; cursor:pointer; font-size:.85rem; }
button.act.danger { background:var(--bad); }
button.act[disabled] { opacity:.5; cursor:not-allowed; }
button.back { background:none; border:0; color:var(--accent); cursor:pointer; padding:0; margin-bottom:1rem; font-size:.85rem; }
a { color:var(--accent); }
code { font-size:.8rem; background:var(--bg); padding:.05rem .3rem; border-radius:3px; }
.live { border:1px solid var(--line); border-radius:8px; padding:.75rem 1rem; margin-top:.75rem; background:var(--bg); font-size:.85rem; }