.status-main { align-items: flex-start; }
.status-wrap { max-width: 760px; }
.status-wrap h1 { font-size: clamp(36px, 6vw, 52px); }
.status-summary { margin: 18px 0 26px; font-size: 16px; font-weight: 650; }
.status-summary.operational, .component-state.operational { color: var(--green); }
.status-summary.outage, .component-state.outage { color: #dc2626; }
.status-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.component { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.component:last-child { border-bottom: 0; }
.component strong, .component span { display: block; }
.component div > span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.component-state { flex: none; color: var(--muted); font-size: 13px; font-weight: 650; }
.status-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 560px) {
  .component { align-items: flex-start; flex-direction: column; gap: 8px; }
}