:root {
    color-scheme: dark;
    --canvas: #08131F;
    --surface: #14263A;
    --ink: #F4F7FB;
    --muted: #B8C4D4;
    --line: #31465D;
    --primary: #3DD6A0;
    --danger: #FF8585;
    --focus: #FFD166;
    --r-lg: 16px;
    --sp-3: 8px;
    --sp-4: 12px;
    --sp-5: 16px;
    --sp-6: 24px;
    --sp-7: 32px;
    --border-width: 1px;
    --disabled-opacity: .65;
    --modal-width: 32rem;
    --modal-backdrop: rgb(8 19 31 / .8);
    --motion-base: 180ms;
    --overlay-shadow: 0 24px 48px rgb(0 0 0 / .45);
    --target-size: 44px;
    --visually-hidden-size: 1px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { left: var(--sp-4); padding: var(--sp-3) var(--sp-5); position: fixed; top: -80px; z-index: 1; }
.skip-link:focus { top: var(--sp-4); }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: var(--sp-4); min-height: 44px; padding: var(--sp-3) var(--sp-6); }
.brand-mark { background: var(--primary); border-radius: var(--r-lg); color: var(--canvas); font-weight: 800; padding: var(--sp-3); }
.environment-label { color: var(--muted); margin-left: auto; }
.validation-shell { margin: 0 auto; max-width: 1240px; padding: var(--sp-7); }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
h1 { font-size: 42px; line-height: 1.08; margin: var(--sp-3) 0 var(--sp-5); }
h2 { font-size: 28px; margin: 0 0 var(--sp-4); }
.status-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: var(--sp-5); padding: var(--sp-5); }
.status-healthy { color: var(--primary); }
.status-unhealthy { color: var(--danger); }
.environment-banner { border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--muted); padding: var(--sp-4); }
button { background: var(--primary); border: 0; border-radius: var(--r-lg); color: var(--canvas); font: inherit; font-weight: 700; min-height: 44px; padding: var(--sp-3) var(--sp-5); }
button:disabled { opacity: .65; }
summary { cursor: pointer; font-weight: 700; }
dt { color: var(--muted); font-weight: 700; }
dd { margin: 0 0 var(--sp-3); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 320px) { .validation-shell { padding: var(--sp-5); } h1 { font-size: 28px; } .site-header { flex-wrap: wrap; } .environment-label { margin-left: 0; } }