.status-page { background: #f7f9fb; }
.status-main { max-width: 920px; margin: 0 auto; padding: 32px 28px 72px; }
.status-breadcrumb { display: flex; gap: 12px; color: #778598; font-size: 12px; margin-bottom: 42px; }
.status-breadcrumb a:hover { color: #415fa6; }
.status-heading { margin-bottom: 30px; }
.status-eyebrow { color: #64748b; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 12px; }
.status-page main h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 42px) !important; line-height: 1.2 !important; letter-spacing: -.04em; color: #243548; }
.status-heading > p:last-child { color: #64748b; font-size: 15px; line-height: 1.7; }
.status-summary { display: flex; align-items: center; gap: 22px; padding: 30px; border: 1px solid #dce3ea; border-radius: 14px; background: #f0f3f7; }
.status-summary-icon { display: grid; place-items: center; flex: 0 0 58px; height: 58px; border-radius: 50%; background: #e2e8f0; color: #64748b; }
.status-page main .status-summary h2 { font-size: 22px !important; line-height: 1.35 !important; margin: 0 0 6px; letter-spacing: -.02em; }
.status-summary p { font-size: 13px; line-height: 1.7; color: #64748b; }
.status-summary[data-state="operational"] { background: #f0faf5; border-color: #c6e8d6; }
.status-summary[data-state="operational"] .status-summary-icon { background: #d9f1e4; color: #258454; }
.status-summary[data-state="operational"] h2 { color: #236a48; }
.status-summary[data-state="problem"] { background: #fff7ed; border-color: #fed7aa; }
.status-summary[data-state="problem"] .status-summary-icon { background: #ffedd5; color: #c26314; }
.status-summary[data-state="problem"] h2 { color: #9a4a11; }
.status-icon-ok, .status-summary[data-state="operational"] .status-icon-other { display: none; }
.status-summary[data-state="operational"] .status-icon-ok { display: block; }
.status-update { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: #718096; font-size: 13px; }
.status-update-note { margin-left: 16px; }
.status-refresh { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0 8px 10px; color: #425f9f; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.status-refresh:hover { color: #243548; }
.status-refresh:disabled { opacity: .55; cursor: wait; }
.status-empty { border: 1px dashed #dbe3ec; border-radius: 10px; padding: 24px; color: #718096; font-size: 13px; line-height: 1.7; background: #ffffff80; }
.status-support { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; margin-top: 42px; border-top: 1px solid #dfe6ee; }
.status-page main .status-support h2 { font-size: 16px !important; margin: 0 0 6px; }
.status-support p { font-size: 14px; line-height: 1.7; color: #718096; }
.status-support a { flex-shrink: 0; font-size: 13px; font-weight: 500; color: #425f9f; }
.status-support a span { padding-left: 8px; }
.status-footnote { font-size: 13px; line-height: 1.8; color: #7b889a; }
.status-footnote a { margin-left: 12px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
 .status-main { padding: 24px 20px 48px; }
 .status-breadcrumb { margin-bottom: 30px; }
 .status-heading > p:last-child { font-size: 14px; }
 .status-summary { padding: 22px 18px; gap: 14px; align-items: flex-start; }
 .status-summary-icon { flex-basis: 40px; height: 40px; }
 .status-summary-icon svg { width: 22px; height: 22px; }
 .status-page main .status-summary h2 { font-size: 18px !important; }
 .status-update-note { display: block; margin: 5px 0 0; }
 .status-empty { padding: 20px; }
 .status-support { flex-direction: column; align-items: flex-start; gap: 14px; }
 .status-footnote a { display: block; margin: 5px 0 0; }
}