:root{color-scheme:light;--primary:#385977;--accent:#0086b3;--background:#ebf0f7;--surface:#fff;--text:#1c2935;--muted:#647586;--border:#d7e0e8;--ok:#18794e;--ok-bg:#e6f4ec;--warn:#b7791f;--warn-bg:#fdf3e1;--bad:#c53030;--bad-bg:#fdeaea;--none:#cfd8e1}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--background);color:var(--text);line-height:1.5}
a{color:var(--accent)}
.wrap{width:min(860px,calc(100% - 32px));margin:0 auto}
header{background:var(--surface);border-bottom:1px solid var(--border)}
.header-inner{min-height:72px;display:flex;align-items:center;gap:14px}
.logo{height:40px;width:auto}
.brand{font-weight:700;color:var(--primary);font-size:1.15rem}
main{padding:32px 0 24px}
h2{color:var(--primary);font-size:1.15rem;margin:36px 0 12px}
.overall{border-radius:12px;padding:18px 22px;font-weight:700;font-size:1.1rem;border:1px solid transparent}
.overall p{margin:0}
.overall.st-operational{background:var(--ok-bg);color:var(--ok);border-color:#bfe3cf}
.overall.st-degraded,.overall.st-partial{background:var(--warn-bg);color:var(--warn);border-color:#f3d9a8}
.overall.st-outage{background:var(--bad-bg);color:var(--bad);border-color:#f4c2c2}
.components{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.component{padding:16px 20px;border-bottom:1px solid var(--border)}
.component:last-child{border-bottom:0}
.component-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.component-name{font-weight:600}
.availability{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.pill{font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.st-operational{background:var(--ok-bg);color:var(--ok)}
.pill.st-degraded,.pill.st-partial{background:var(--warn-bg);color:var(--warn)}
.pill.st-outage{background:var(--bad-bg);color:var(--bad)}
.bars{display:flex;gap:2px;margin-top:10px;height:28px}
.bar{flex:1;border-radius:2px;min-width:2px}
.bar.ok{background:var(--ok)}
.bar.warn{background:var(--warn)}
.bar.bad{background:var(--bad)}
.bar.nodata{background:var(--none)}
.bars-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-top:4px}
.bars-pending{color:var(--muted);font-size:.85rem;margin:8px 0 0}
.month{font-size:.95rem;color:var(--muted);margin:24px 0 8px;font-weight:600}
.month-list{display:flex;flex-direction:column;gap:10px}
.incident{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:10px;padding:14px 18px}
.incident.sev-outage{border-left-color:var(--bad)}
.incident.ongoing{margin-bottom:10px}
.incident h3{margin:0;font-size:1rem;color:var(--text)}
.incident .meta,.incident .period{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.updates{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--border)}
.updates li{margin:0 0 10px}
.updates li:last-child{margin-bottom:0}
.u-status{font-weight:600;margin-right:8px}
.updates time{color:var(--muted);font-size:.85rem}
.updates p{margin:2px 0 0}
.empty{color:var(--muted);margin:0 0 8px}
footer{color:var(--muted);font-size:.85rem;padding:8px 0 40px}
footer p{margin:4px 0}
@media (max-width:560px){.component-head{flex-direction:column;align-items:flex-start}}