.status-page {
    background: #f6f8fb;
}

.status-hero {
    color: #fff;
    padding: 58px 0 92px;
    background:
        radial-gradient(circle at 80% 20%, rgba(235, 50, 35, 0.2), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #172033 58%, #251b25 100%);
}

.status-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.status-hero p {
    max-width: 690px;
    margin: 0;
    color: #aeb9ca;
    font-size: 1.05rem;
}

.status-live-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

.status-pulse {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #94a3b8;
}

.status-pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.35;
    animation: statusPulse 2s ease-out infinite;
}

.status-pulse-operational { color: #22c55e; background: #22c55e; }
.status-pulse-degraded { color: #f59e0b; background: #f59e0b; }
.status-pulse-outage { color: #ef4444; background: #ef4444; }
.status-pulse-unknown { color: #94a3b8; background: #94a3b8; }

@keyframes statusPulse {
    0% { transform: scale(0.65); opacity: 0.65; }
    80%, 100% { transform: scale(1.45); opacity: 0; }
}

.last-check-card {
    display: inline-flex;
    min-width: 250px;
    flex-direction: column;
    padding: 18px 20px;
    text-align: left;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.last-check-card span,
.last-check-card small { color: #94a3b8; }
.last-check-card span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.last-check-card strong { margin: 2px 0; font-size: 1.05rem; }
.last-check-card small { font-size: 0.74rem; }

.status-content {
    position: relative;
    margin-top: -48px;
    padding-bottom: 34px;
}

.metric-card,
.status-panel {
    background: #fff;
    border: 1px solid #e4e9f0;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.metric-card {
    position: relative;
    min-height: 145px;
    padding: 22px;
    border-radius: 16px;
}

.metric-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
}

.metric-icon-green { color: #15803d; background: #dcfce7; }
.metric-icon-blue { color: #2563eb; background: #dbeafe; }
.metric-icon-violet { color: #7c3aed; background: #ede9fe; }
.metric-icon-slate { color: #475569; background: #e2e8f0; }

.metric-value {
    margin-top: 28px;
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.metric-label { color: #64748b; font-size: 0.78rem; }

.status-panel {
    padding: 24px;
    border-radius: 18px;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.panel-heading h2 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

.panel-heading p { margin: 0; color: #94a3b8; font-size: 0.76rem; }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    color: #64748b;
    font-size: 0.68rem;
}

.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; }
.legend-up { background: #22c55e; }
.legend-down { background: #ef4444; }
.legend-empty { background: #dbe1e8; }

.availability-chart {
    display: grid;
    height: 170px;
    grid-template-columns: repeat(24, minmax(4px, 1fr));
    align-items: end;
    gap: 5px;
    padding-top: 12px;
    border-bottom: 1px solid #e2e8f0;
    background: repeating-linear-gradient(to bottom, #edf1f5 0, #edf1f5 1px, transparent 1px, transparent 53px);
}

.availability-bar {
    position: relative;
    min-height: 10px;
    border-radius: 4px 4px 0 0;
    transition: opacity 0.2s, transform 0.2s;
}

.availability-bar:hover { opacity: 0.78; transform: scaleX(1.12); }
.availability-bar-up { background: linear-gradient(180deg, #4ade80, #16a34a); }
.availability-bar-down { background: linear-gradient(180deg, #fb7185, #dc2626); }
.availability-bar-empty { height: 12px !important; background: #dbe1e8; }

.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #94a3b8; font-size: 0.68rem; }

.coverage-ring {
    position: relative;
    display: grid;
    width: 138px;
    height: 138px;
    margin: 8px auto 18px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#2563eb calc(var(--coverage) * 1%), #e8edf3 0);
}

.coverage-ring::before {
    content: '';
    position: absolute;
    width: 108px;
    height: 108px;
    background: #fff;
    border-radius: 50%;
}

.coverage-ring > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.coverage-ring strong { color: #0f172a; font-size: 1.35rem; font-weight: 800; }
.coverage-ring span { color: #94a3b8; font-size: 0.7rem; }
.coverage-note { max-width: 290px; margin: 0 auto; color: #64748b; text-align: center; font-size: 0.75rem; }

.incident-badge { padding: 6px 10px; color: #475569; background: #f1f5f9; border-radius: 50px; font-size: 0.7rem; font-weight: 700; }
.incident-list { display: grid; gap: 10px; }
.incident-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff7f7; border: 1px solid #fee2e2; border-radius: 12px; }
.incident-row > i { color: #dc2626; }
.incident-row strong { display: block; color: #1e293b; font-size: 0.84rem; }
.incident-row small { color: #64748b; font-size: 0.72rem; }
.incident-time { margin-left: auto; color: #64748b; font-size: 0.72rem; white-space: nowrap; }
.no-incidents { display: flex; align-items: center; gap: 13px; padding: 18px; color: #166534; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 12px; font-size: 0.82rem; }
.no-incidents i { font-size: 1.15rem; }
.status-loading { padding: 25px; color: #94a3b8; text-align: center; font-size: 0.82rem; }
.status-disclaimer { margin: -20px 0 0; color: #7c8798; text-align: center; font-size: 0.72rem; }

@media (max-width: 767.98px) {
    .status-hero { padding: 42px 0 82px; }
    .last-check-card { width: 100%; min-width: 0; }
    .metric-card { min-height: 128px; padding: 16px; }
    .metric-icon { top: 14px; right: 14px; width: 32px; height: 32px; }
    .metric-value { margin-top: 30px; font-size: 1.35rem; }
    .status-panel { padding: 18px; }
    .panel-heading { flex-direction: column; margin-bottom: 18px; }
    .chart-legend { justify-content: flex-start; }
    .availability-chart { height: 135px; gap: 3px; }
    .incident-row { align-items: flex-start; }
    .incident-time { margin-left: 0; }
}