.status-page { background:var(--bg); color:var(--text); }
.status-wrap { width:min(960px,calc(100% - 48px)); margin:auto; }
.status-top { display:flex; align-items:center; justify-content:space-between; padding:28px 0; border-bottom:1px solid var(--border); gap:20px; }
.status-top nav { display:flex; align-items:center; gap:24px; font-size:13px; color:var(--muted); }
.status-top .theme-toggle svg { width:19px; height:19px; }
.status-intro { padding:56px 0 30px; }
.status-intro h1 { font-family:var(--font-display); font-size:clamp(32px,5vw,48px); font-weight:600; letter-spacing:-.045em; margin:12px 0; line-height:1.1; }
.status-intro p { color:var(--muted); line-height:1.6; }
.status-summary { padding:26px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); }
.status-summary-main { display:flex; align-items:flex-start; gap:18px; }
.status-summary h2 { font-size:24px; letter-spacing:-.03em; font-family:var(--font-display); font-weight:600; line-height:1.2; }
.status-summary p { color:var(--muted); font-size:13px; margin-top:8px; line-height:1.6; }
.status-signal { flex:none; width:12px; height:12px; border-radius:50%; background:var(--muted); margin-top:8px; }
[data-state=operational] { --status-color:var(--positive); }
[data-state=degraded] { --status-color:var(--warning); }
[data-state=outage] { --status-color:var(--danger); }
[data-state=unknown] { --status-color:var(--muted); }
.status-summary[data-state=operational] { border-color:color-mix(in srgb,var(--positive) 40%,var(--border)); }
.status-summary[data-state=degraded],.status-summary[data-state=outage] { border-color:var(--status-color); }
.status-summary .status-signal { background:var(--status-color); box-shadow:0 0 0 7px color-mix(in srgb,var(--status-color) 10%,transparent); }
.status-toolbar { display:flex; align-items:center; justify-content:space-between; margin:24px 0 0 30px; gap:16px; color:var(--muted); font-size:12px; }
.status-components,.status-history { margin-top:34px; }
.status-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:16px; }
.status-section-head h2,.status-scope h2 { font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.02em; }
.status-section-head>span { color:var(--muted); font-size:12px; }
.status-component { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:20px 0; border-top:1px solid var(--border); }
.status-component h3 { font-size:14px; font-weight:500; }
.status-component p { margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5; }
.status-component-label { flex:none; color:var(--status-color); font-size:12px; display:flex; align-items:center; gap:8px; }
.status-component-label:before,.status-legend span:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--status-color); display:inline-block; }
.status-history-bars { display:grid; grid-template-columns:repeat(72,minmax(0,1fr)); gap:3px; min-height:44px; }
.status-history-bar { display:block; height:44px; border-radius:3px; background:var(--status-color); opacity:.85; }
.status-history-bar[data-state=unknown] { background:var(--border); }
.status-history-labels { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--font-mono); font-size:10px; margin-top:10px; }
.status-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; font-size:11px; color:var(--muted); }
.status-legend span { display:flex; gap:6px; align-items:center; }
.status-note { font-size:12px; color:var(--muted); line-height:1.65; margin-top:16px; }
.status-scope { border-top:1px solid var(--border); padding-top:24px; margin-top:40px; max-width:75ch; }
.status-scope p { font-size:13px; color:var(--muted); line-height:1.7; margin-top:12px; }
.status-scope a { display:inline-block; color:var(--accent-strong); margin-top:18px; font-size:13px; }
.status-footer { display:flex; justify-content:space-between; gap:20px; padding:36px 0; margin-top:20px; font-size:11px; color:var(--muted); }
.status-error { margin:16px 0; color:var(--danger); font-size:13px; line-height:1.6; }
.status-placeholder { color:var(--muted); padding:24px 0; }
@media(max-width:600px) { .status-wrap { width:calc(100% - 32px); } .status-top { padding:20px 0; } .status-top nav { gap:12px; font-size:11px; } .status-intro { padding-top:32px; } .status-summary { padding:20px; } .status-summary h2 { font-size:22px; } .status-toolbar { margin-left:0; flex-wrap:wrap; } .status-section-head { align-items:flex-start; flex-direction:column; gap:6px; } .status-component { gap:12px; } .status-component p { max-width:28ch; } .status-history-bars { gap:2px; } .status-footer { flex-direction:column; gap:12px; } }