main.status-main{max-width:var(--container);margin:0 auto;padding:72px var(--gutter-x) 96px}main.status-main>*{max-width:880px}.status-banner{border-radius:var(--r-sm);padding:28px 32px;display:flex;align-items:center;gap:20px;margin-bottom:12px;border:1px solid var(--border);background:var(--surface)}.status-banner.operational{border-color:color-mix(in oklab,var(--success) 45%,var(--border))}.status-banner.degraded{border-color:color-mix(in oklab,var(--accent) 45%,var(--border))}.status-banner.outage{border-color:color-mix(in oklab,var(--error, #FF6B6B) 45%,var(--border))}.status-banner.loading,.status-banner.unknown{border-color:var(--border);background:var(--surface)}.status-banner .dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--muted-2)}.status-banner.operational .dot{background:var(--success)}.status-banner.degraded .dot{background:var(--accent)}.status-banner.outage .dot{background:var(--error, #FF6B6B)}.status-banner h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}.status-banner .sub{font-family:var(--font-mono);font-size:13px;color:var(--muted-2);letter-spacing:.01em}.checked-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:40px;font-family:var(--font-mono);font-size:13px;color:var(--muted-2)}.refresh-btn{background:var(--surface);border:1px solid var(--border);color:var(--ink-soft);padding:8px 12px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:border-color .16s var(--ease),color .16s var(--ease)}.refresh-btn:hover{border-color:var(--line-strong);color:var(--ink)}section.components{margin-bottom:48px}section.components h2{font-size:16px;font-weight:600;letter-spacing:-.005em;margin:0 0 16px;color:var(--ink)}.component-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--border)}.component{display:grid;grid-template-columns:14px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}.component .pill-dot{width:10px;height:10px;border-radius:50%;background:var(--muted-2)}.component[data-status=operational] .pill-dot{background:var(--success)}.component[data-status=degraded] .pill-dot{background:var(--accent)}.component[data-status=outage] .pill-dot{background:var(--error, #FF6B6B)}.component .meta{min-width:0}.component .name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}.component .desc{font-size:13px;color:var(--muted-2);margin-top:2px}.component .label{font-size:14px;font-weight:600;color:var(--muted-2)}.component[data-status=operational] .label{color:var(--success)}.component[data-status=degraded] .label{color:var(--accent)}.component[data-status=outage] .label{color:var(--error, #FF6B6B)}section.incidents h2{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--ink)}.incident{border:1px solid var(--border);border-radius:var(--r-sm);padding:20px;margin-bottom:12px;background:var(--surface)}.incident-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:8px}.incident-head .title{font-size:15px;font-weight:600;color:var(--ink)}.incident-head .status{font-size:13px;font-weight:600;color:var(--muted-2)}.incident-head .status[data-state=resolved]{color:var(--success)}.incident-head .status[data-state=monitoring]{color:var(--accent)}.incident-head .status[data-state=investigating]{color:var(--error, #FF6B6B)}.incident-meta{font-family:var(--font-mono);font-size:13px;color:var(--muted-2);margin-bottom:12px}.incident-updates{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:12px}.incident-update{display:grid;grid-template-columns:140px 1fr;gap:16px;font-size:13px;color:var(--ink-soft);line-height:1.5}.incident-update .when{font-family:var(--font-mono);font-size:13px;color:var(--muted-2);padding-top:2px}.empty-state{padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted-2);font-size:14px}.skeleton-name,.skeleton-desc{background:var(--surface-2);border-radius:4px}.skeleton-name{height:14px;width:40%}.skeleton-desc{height:11px;width:60%;margin-top:8px}@media(max-width:600px){.status-banner{padding:20px 24px}.status-banner h1{font-size:20px}.component{grid-template-columns:12px 1fr auto;gap:12px}.incident-update{grid-template-columns:1fr;gap:4px}}