:root { --bg:#fff; --fg:#1a1b26; --muted:#5b5e72; --line:#e3e4ec; --ok:#1f7a4d; --warn:#9a6700; --bad:#b42318; --info:#2455b3; --card:#f7f7fb; }
@media (prefers-color-scheme: dark) { :root { --bg:#151623; --fg:#ececf3; --muted:#a3a6bd; --line:#2d2f45; --ok:#4ad08b; --warn:#f0b429; --bad:#ff7b6e; --info:#7ea6ff; --card:#1f2031; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main, header, footer { max-width:46rem; margin:0 auto; padding:0 1rem; }
header { padding-top:1.5rem; }
h1 { font-size:1.4rem; margin:0 0 .75rem; }
h2 { font-size:1.05rem; margin:2rem 0 .5rem; }
h3 { font-size:1rem; margin:0 0 .25rem; }
.banner { margin:0; padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--line); background:var(--card); font-weight:600; }
.banner-ok { border-color:var(--ok); }
.banner-minor, .banner-maint { border-color:var(--info); }
.banner-major { border-color:var(--warn); }
.banner-critical { border-color:var(--bad); }
.banner-unknown { border-color:var(--muted); }
.components { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:.6rem; }
.component { display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:baseline; padding:.7rem 1rem; border-top:1px solid var(--line); }
.component:first-child { border-top:0; }
.cname { flex:1; min-width:10rem; }
.note { flex-basis:12rem; flex-grow:1; color:var(--muted); font-size:.9rem; }
.state { font-weight:600; }
.state-operational { color:var(--ok); }
.state-degraded { color:var(--warn); }
.state-outage { color:var(--bad); }
.state-maintenance { color:var(--info); }
.state-not_monitored { color:var(--muted); }
.incident, .maintenance { border:1px solid var(--line); border-radius:.6rem; padding:.8rem 1rem; margin:.6rem 0; background:var(--card); }
.meta, .hint, .updated, .none { color:var(--muted); font-size:.9rem; margin:.25rem 0; }
.timeline { list-style:none; margin:.5rem 0 0; padding:0; }
.timeline li { padding:.35rem 0; border-top:1px solid var(--line); }
.when { color:var(--muted); font-size:.85rem; margin-right:.4rem; }
.unavailable { padding:1rem; border:1px dashed var(--muted); border-radius:.6rem; }
footer { padding-top:2rem; padding-bottom:3rem; color:var(--muted); font-size:.85rem; }