.status-page { width: min(720px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 52px; }
.status-page-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.status-brand { display: inline-flex; align-items: center; gap: 10px; color: #1f2c21; font-size: 1.15rem; font-weight: 900; text-decoration: none; }
.status-brand img { border-radius: 50%; }
.status-back { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #cbd8ca; border-radius: 999px; color: #203125; background: #fff; font: inherit; font-weight: 850; cursor: pointer; box-shadow: 0 8px 24px rgba(29,45,33,.08); }
.status-back:hover { border-color: #8ab43b; background: #f4f9e9; }
.status-back:focus-visible { outline: 3px solid rgba(75,122,26,.35); outline-offset: 3px; }
.status-card { max-width: none; }
.status-card h1 { margin-bottom: 18px; }
.status-overall { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: 15px; color: #684900; background: #fff5d9; }
.status-overall > span, .service-mark { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #d18a00; box-shadow: 0 0 0 4px rgba(209,138,0,.14); }
.status-overall.is-good { color: #225423; background: #edf9e8; }
.status-overall.is-good > span, .service-mark.is-good { background: #38a548; box-shadow: 0 0 0 4px rgba(56,165,72,.14); }
.status-overall.is-bad { color: #87251d; background: #ffebe8; }
.status-overall.is-bad > span, .service-mark.is-bad { background: #c33d2e; box-shadow: 0 0 0 4px rgba(195,61,46,.13); }
.status-services { display: grid; gap: 10px; margin: 18px 0; }
.status-services article { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid #dce5db; border-radius: 14px; }
.status-services p { margin: 4px 0 0; color: #637066; }
.status-checked, .status-note { color: #637066; }
.status-button { min-height: 48px; padding: 11px 20px; border: 0; border-radius: 12px; color: #fff; background: #bd4300; font: inherit; font-weight: 850; cursor: pointer; }
.status-button:disabled { opacity: .6; cursor: wait; }
.status-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 10px; }
@media (max-width: 560px) { .status-page { padding-top: 12px; } .status-page-nav { align-items: flex-start; flex-direction: column-reverse; gap: 10px; } .status-brand img { width: 48px; height: 48px; } .status-card { padding: 22px 18px; } }