.status-page { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; z-index: 1; }

.status-card { width: 100%; max-width: 640px; background: #ffffff; color: #1f2430; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; }

.status-card__top { padding: 18px 24px 0; }

.status-back { font-size: 13px; color: var(--blue-electric); font-weight: 600; }

.status-banner { margin: 16px 24px; padding: 16px 20px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; transition: background 0.3s var(--ease-soft); }

.status-banner--operational { background: #2fa860; }
.status-banner--degraded { background: #d9a441; }
.status-banner--partial_outage { background: #e08a3c; }
.status-banner--major_outage { background: #d9534f; }
.status-banner--loading { background: #9aa3b5; }

.status-note { margin: 0 24px 20px; font-size: 12.5px; color: #6b7280; line-height: 1.5; }

.status-services { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 24px; }

.status-service__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }

.status-service__name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: #1f2430; }

.status-service__state { font-size: 12.5px; font-weight: 600; flex-shrink: 0; }

.status-service__state--operational { color: #2fa860; }
.status-service__state--degraded { color: #b9862f; }
.status-service__state--partial_outage { color: #c2701f; }
.status-service__state--major_outage { color: #c94b47; }
.status-service__state--no_data { color: #9aa3b5; }

.status-bars { display: flex; gap: 3px; height: 34px; }

.status-bar { flex: 1; min-width: 0; border-radius: 2px; cursor: pointer; transition: transform 0.15s var(--ease-soft), opacity 0.15s var(--ease-soft); }

.status-bar:hover { transform: scaleY(1.08); }

.status-bar--operational { background: #2fa860; }
.status-bar--degraded { background: #e0b23c; }
.status-bar--partial_outage { background: #e08a3c; }
.status-bar--major_outage { background: #d9534f; }
.status-bar--no_data { background: #e3e6ec; }

.status-bar-range { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: #9aa3b5; }

.status-footer { padding: 0 24px 20px; font-size: 11px; color: #9aa3b5; }

.status-tooltip { position: fixed; z-index: 999; background: #1f2430; color: #fff; font-size: 12px; padding: 8px 10px; border-radius: 6px; max-width: 220px; line-height: 1.4; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }

@media (max-width: 480px) {
  .status-card { border-radius: 0; }
  .status-bars { height: 28px; }
  .status-services { gap: 20px; }
}