:root { --ink:#0f1b2d; --muted:#5a6578; --line:#d5dce6; --bg:#f5f7fa; --card:#fff;
  --ok:#1e9e5a; --degraded:#e5a400; --partial:#ec835a; --major:#d03b3b; --maint:#2d6cdf; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:860px; margin:0 auto; padding:32px 16px; }
h1 { font-size:24px; margin:0 0 12px; }
h2 { font-size:16px; margin:24px 0 8px; }
.overall { padding:14px 16px; border-radius:10px; color:#fff; font-weight:600; background:var(--muted); }
.overall.operational { background:var(--ok); } .overall.degraded { background:var(--degraded); color:var(--ink); }
.overall.partial { background:var(--partial); } .overall.major { background:var(--major); } .overall.maintenance { background:var(--maint); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-top:12px; }
.incident { border-inline-start:4px solid var(--major); } .incident.maintenance { border-inline-start-color:var(--maint); }
.incident h3 { margin:0; font-size:15px; } .meta { color:var(--muted); font-size:13px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.row:first-of-type { border-top:0; }
.state { font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.state::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.state.operational { color:var(--ok); } .state.degraded { color:#9a6c00; } .state.partial { color:#b8532c; }
.state.major { color:var(--major); } .state.maintenance { color:var(--maint); }
.bars { display:flex; gap:2px; margin-top:4px; } .bars span { flex:1; height:22px; border-radius:2px; background:var(--ok); }
.bars span.gap { background:var(--line); } .bars span.low { background:var(--degraded); } .bars span.bad { background:var(--major); }
.product-head { display:flex; justify-content:space-between; align-items:baseline; }
footer { margin-top:32px; color:var(--muted); font-size:13px; text-align:center; }
button { border:1px solid var(--ink); border-radius:6px; padding:10px 16px; background:var(--ink); color:var(--bg);
  font:inherit; font-weight:600; cursor:pointer; }
button:disabled { cursor:default; opacity:.65; }
button:focus-visible, a:focus-visible { outline:3px solid var(--maint); outline-offset:3px; }
a { color:var(--ink); }
@media (prefers-color-scheme: dark) {
  :root { --ink:#f0efec; --muted:#a8b0bd; --line:#2e3a4d; --bg:#0f1b2d; --card:#17263d; }
}