.status-page-container {
    --font-sans: var(--sp-font-sans);
    --bg-surface: var(--sp-bg);
    --bg-card: var(--sp-panel);
    --bg-card-muted: var(--sp-panel-soft);
    --text-primary: var(--sp-text-strong);
    --text-muted: var(--sp-muted);
    --border-soft: var(--sp-border);
    --shadow-strong: var(--sp-shadow);
    --shadow-soft: var(--sp-shadow-soft);
    --radius-lg: var(--sp-radius-lg);
    --radius-md: var(--sp-radius-md);
    --accent: var(--sp-accent);
    --accent-strong: var(--sp-accent-strong);
    --accent-warn: var(--sp-warning);
    --accent-alert: var(--sp-danger);
    --brand-purple: var(--sp-accent);
    --brand-magenta: var(--sp-accent-2);
    color: var(--sp-text);
    min-height: calc(100vh - 8.5rem);
    padding-top: clamp(.75rem, 2vw, 1.25rem);
    background: transparent !important;
    font-size: .78rem;
}

.public-announce-bar {
    display: none;
}

.sp-public-header a[href^="/admin/login"],
.sp-public-header a[href*="/admin/login"] {
    display: none !important;
}

.status-page-container .container,
.status-page-container .container-fluid {
    max-width: 82rem;
    padding-inline: 1rem;
}

.status-page-container .main-content {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.status-page-container .overall-status-header {
    display: none;
}

.status-system,
.incidents-section,
.incident-history-section {
    color: var(--sp-text);
}

.status-system,
.incidents-section {
    margin-bottom: 1rem;
    padding: .9rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow);
    backdrop-filter: blur(18px);
}

.system-status-header,
.incident-header,
.service-row,
.service-header,
.incident-update,
.incident-fact {
    border-color: var(--sp-border) !important;
}

.system-status-header h2,
.incidents-section h2,
.incident-card h3,
.service-name {
    color: var(--sp-text-strong) !important;
}

.system-status-header h2,
.incidents-section h2 {
    font-size: .95rem;
}

.system-status-range {
    font-size: .72rem;
}

.system-status-actions {
    gap: .45rem;
}

.system-range-option,
.status-history-button,
.region-tabs-container .nav-link {
    font-size: .7rem !important;
}

.status-history-button {
    --bs-btn-padding-y: .28rem;
    --bs-btn-padding-x: .62rem;
}

.system-status-body {
    margin-top: .65rem;
}

.system-row {
    gap: .4rem .7rem;
    padding: .58rem 0;
}

.system-row-main {
    gap: .42rem;
}

.system-row-title {
    font-size: .82rem;
}

.system-row-components,
.system-row-metric,
.system-row-toggle,
.system-row-details-body {
    font-size: .7rem;
}

.uptime-segment {
    height: 6px;
}

.system-status-range,
.last-updated,
.incident-time-stack,
.incident-fact-label,
.update-time,
.service-type-description,
.service-description {
    color: var(--sp-muted) !important;
}

.incident-card,
.service-group {
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius-md) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel-soft) !important;
    box-shadow: none !important;
}

.incident-highlight {
    border-left: 3px solid var(--sp-warning) !important;
}

.status-page-container .incident-body {
    padding: .85rem 1rem 1rem;
}

.status-page-container .incident-summary,
.status-page-container .incident-updates,
.status-page-container .incident-rca {
    width: 100%;
    max-width: none;
}

.status-page-container .incident-summary {
    font-size: .78rem;
    line-height: 1.55;
}

.status-page-container .incident-updates {
    margin-top: .9rem;
    padding-top: .8rem;
}

.status-page-container .incident-update {
    grid-template-columns: minmax(6.75rem, 8rem) minmax(0, 1fr);
    gap: .75rem;
    padding-bottom: .75rem;
}

.status-page-container .incident-update p,
.status-page-container .incident-rca-item p {
    max-width: none;
    color: var(--sp-text) !important;
    line-height: 1.55;
}

.status-page-container .incident-rca {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    margin-top: 1rem;
    padding-top: .9rem;
}

.status-page-container .incident-rca h4 {
    grid-column: 1 / -1;
    margin-bottom: .55rem;
}

.status-page-container .incident-rca-item {
    grid-template-columns: minmax(6.75rem, 8.5rem) minmax(0, 1fr);
    gap: .75rem;
    padding: .55rem 0;
    border-top: 0;
}

.region-tabs-container .nav-tabs,
.system-status-tabs .nav-tabs {
    border-color: var(--sp-border) !important;
    background: var(--sp-panel-soft) !important;
    box-shadow: none !important;
}

.system-range-filter {
    border-color: var(--sp-border) !important;
    background: var(--sp-panel-soft) !important;
    box-shadow: none !important;
}

.region-tabs-container .nav-link,
.system-range-option {
    border-color: transparent !important;
    color: var(--sp-muted) !important;
    background: transparent !important;
}

.region-tabs-container .nav-link.active,
.system-range-option.active {
    border-color: var(--sp-border) !important;
    color: var(--sp-text-strong) !important;
    background: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-panel)) !important;
}

.uptime-bar,
.uptime-segment {
    border-color: var(--sp-bg) !important;
}

.sp-auth-layout,
body.sp-auth-page > .sp-public-main > .sp-auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sp-auth-story {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 3.25vw, 3.5rem);
    overflow: hidden;
    border-right: 1px solid var(--sp-border);
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--sp-accent) 18%, transparent), transparent 25rem),
        linear-gradient(145deg, color-mix(in srgb, var(--sp-accent-2) 8%, transparent), transparent 60%);
}

.sp-auth-story h1 {
    max-width: 10ch;
    margin: 1.1rem 0 .55rem;
    font-size: clamp(1.55rem, 2.25vw, 2.15rem);
    line-height: .96;
    letter-spacing: -.065em;
}

.sp-auth-story p {
    max-width: 34rem;
    color: var(--sp-muted);
    font-size: .88rem;
}

.sp-auth-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.sp-auth-proof > div {
    padding: .85rem;
    border: 1px solid var(--sp-border);
    border-radius: .85rem;
    background: var(--sp-panel-soft);
    backdrop-filter: blur(10px);
}

.sp-auth-proof strong,
.sp-auth-proof small {
    display: block;
}

.sp-auth-proof small {
    margin-top: .25rem;
    color: var(--sp-muted);
    font-size: .7rem;
}

.sp-auth-panel {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--sp-bg) 82%, transparent);
}

.sp-auth-card {
    width: min(28rem, 100%);
    padding: clamp(1rem, 2.3vw, 1.5rem);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow);
    backdrop-filter: blur(22px);
}

.sp-auth-card h2 {
    margin: .85rem 0 .35rem;
    font-size: 1.15rem;
}

.sp-auth-card > p {
    color: var(--sp-muted);
}

.sp-google-button {
    width: 100%;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.5rem;
    border: 1px solid var(--sp-border-strong);
    border-radius: .8rem;
    color: var(--sp-text-strong);
    background: var(--sp-panel-soft);
    font-weight: 680;
    text-decoration: none;
}

.sp-google-button:hover {
    color: var(--sp-text-strong);
    border-color: color-mix(in srgb, var(--sp-accent) 50%, var(--sp-border));
    background: color-mix(in srgb, var(--sp-accent) 9%, var(--sp-panel));
}

.sp-google-mark {
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
    font-size: .75rem;
    font-weight: 800;
}

.sp-security-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.25rem;
    padding: .85rem;
    border: 1px solid var(--sp-border);
    border-radius: .75rem;
    color: var(--sp-muted);
    background: var(--sp-panel-soft);
    font-size: .77rem;
}

.sp-auth-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: .78rem;
}

.sp-access-shell .sp-auth-card {
    width: min(34rem, 100%);
}

@media (max-width: 767.98px) {
    .sp-auth-story h1 {
        font-size: 1.45rem;
        line-height: 1.02;
        letter-spacing: -.045em;
    }

    .sp-auth-story,
    .sp-auth-panel {
        padding: 1rem;
    }
}

.status-page-container .btn-outline-secondary {
    background: var(--sp-panel-soft) !important;
    border-color: var(--sp-border-strong) !important;
    color: var(--sp-text) !important;
}

.status-page-container .btn-outline-secondary:hover,
.status-page-container .btn-outline-secondary:focus-visible {
    background: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-panel)) !important;
    border-color: color-mix(in srgb, var(--sp-accent) 58%, var(--sp-border-strong)) !important;
    color: var(--sp-text-strong) !important;
}
