/* VANTAGE (Lagos) auth screens -- premium two-column command-platform shell
   (docs/06 section 3.1). ibjx design system, navy/blue identity.

   SELF-CONTAINED BY DESIGN: guest pages load ONLY fonts.css + tokens.css +
   app.css + this file. Everything the auth markup needs that app.css does not
   already provide -- the bare .field/label/input primitives, the icon-input
   wrapper, .alert-* tones, .brand, the error-page skin and the small text
   utilities -- is defined here in ibjx tokens.

   Layout: a deep navy brand panel (layered mesh gradients, faint grid, two
   soft glows) beside a focused, elevated sign-in card. Responsive: the split
   stacks to one column, then to a slim branded header, on narrow screens.

   DECISION: the sign-in / verify buttons and the form eyebrow use the party
   blue (--party -> --party-deep) rather than the reference sheet's campaign
   green; the chrome stays navy. Leadership may re-point the two tokens
   without touching markup. */

/* ================================================ base primitives (scoped)
   Deliberately scoped under the guest body classes so they can never leak into
   the authenticated app shell, which styles .field/.btn via app.css. */

.auth-body,
.overlay-body,
.guest-body {
    margin: 0;
    font-family: var(--font, "InterVariable", Inter, system-ui, sans-serif);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv05";
    /* Guest screens must never scroll sideways on a phone. */
    overflow-x: hidden;
}

.auth-body *,
.overlay-body *,
.guest-body * { box-sizing: border-box; }

.auth-body h1,
.overlay-body h1,
.guest-body h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--text);
}

.auth-body p,
.overlay-body p,
.guest-body p { margin: 0 0 12px; }

.auth-body .muted,
.overlay-body .muted,
.guest-body .muted { color: var(--text-muted); }

.auth-body .text-sm,
.overlay-body .text-sm,
.guest-body .text-sm { font-size: 13.5px; }

/* ---- form field primitives */
.auth-body .field,
.overlay-body .field,
.guest-body .field { margin-bottom: 16px; position: relative; }

.auth-body .field label,
.overlay-body .field label,
.guest-body .field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* premium inputs: taller, softer border, clear focus lift */
.auth-body .field input,
.overlay-body .field input,
.guest-body .field input {
    width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.auth-body .field input::placeholder,
.overlay-body .field input::placeholder,
.guest-body .field input::placeholder { color: var(--text-faint); }

.auth-body .field input:hover,
.overlay-body .field input:hover,
.guest-body .field input:hover { border-color: var(--primary-lt); }

.auth-body .field input:focus,
.overlay-body .field input:focus,
.guest-body .field input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary-lt);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.field-error { margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.field-note--warn { color: var(--warning-text); }
.hint { margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* ---- icon inputs + the password reveal action
   NOTE: these padding rules must carry AT LEAST the specificity of the base
   `.auth-body .field input` rule above (0-2-1), whose `padding` shorthand
   would otherwise win and slide the text under the glyph. */
.input-icon { position: relative; }

.auth-body .input-icon input,
.overlay-body .input-icon input,
.guest-body .input-icon input { padding-left: 42px; }

.auth-body .input-icon--action input,
.overlay-body .input-icon--action input,
.guest-body .input-icon--action input { padding-right: 46px; }

.input-icon .input-icon-glyph {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--text-faint); pointer-events: none;
    transition: color var(--transition);
}
.input-icon:focus-within .input-icon-glyph { color: var(--primary-lt); }
.input-action {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.input-action:hover { color: var(--text); background: var(--surface-2); }
.input-action:focus-visible { outline: 2px solid var(--primary-lt); outline-offset: 1px; }
/* The reveal button swaps its two glyphs; auth.js toggles [hidden]. */
.input-action .ico-eye, .input-action .ico-eye-off { display: inline-flex; }
.input-action [hidden] { display: none; }

/* ---- alerts (guest pages only; app.css owns the in-app .alert) */
.auth-body .alert,
.overlay-body .alert,
.guest-body .alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; margin: 0 0 16px;
    border-left: 0;
    border-radius: var(--radius-sm);
    font-size: 13px; line-height: 1.45;
    box-shadow: none;
}
.auth-body .alert svg,
.overlay-body .alert svg,
.guest-body .alert svg { flex-shrink: 0; margin-top: 1px; }
.alert-error { background: var(--danger-bg); color: var(--danger-text); }
.alert-ok { background: var(--success-bg); color: var(--success-text); }
.alert-warn { background: var(--warning-bg); color: var(--warning-text); }
.auth-body .alert--bar,
.overlay-body .alert--bar,
.guest-body .alert--bar { border-left: 3px solid currentColor; }
.auth-form-card .alert-error { align-items: center; }
.auth-form-card .alert-error svg { flex-shrink: 0; }

/* ---- brand lockup (shared by the guest card + overlay backdrop) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-lt), var(--primary-dk));
    color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.brand-name { font-weight: 700; letter-spacing: .04em; color: var(--text); font-size: 14px; }

/* ================================================================= layout */
.auth-body { background: var(--primary-dk); }

.auth-split {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Grid/flex children default to min-width:auto, so a long headline or a wide
   stat row can push a column past the viewport (horizontal scroll on phones).
   Allow both columns to shrink below their content width. */
.auth-split > * { min-width: 0; }
.auth-brand-mid,
.auth-form-card { min-width: 0; }
.auth-brand-mid h2 { overflow-wrap: break-word; }

/* ============================================================ brand panel */
.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(32px, 4vw, 64px) clamp(32px, 4vw, 72px);
    color: #E8EEF6;
    background:
        radial-gradient(130% 100% at 10% 4%, rgba(30, 136, 229, .26), transparent 55%),
        radial-gradient(90% 80% at 96% 100%, rgba(14, 159, 110, .18), transparent 55%),
        linear-gradient(155deg, #1E3A5F 0%, #152D4A 46%, #0C1F38 100%);
}

/* faint blueprint grid, masked to fade toward the edges */
.auth-brand-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 20%, #000 40%, transparent 78%);
    mask-image: radial-gradient(120% 120% at 50% 20%, #000 40%, transparent 78%);
}
.auth-brand-glow {
    position: absolute;
    z-index: -1;
    right: -140px; bottom: -160px;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 62%);
    pointer-events: none;
    filter: blur(4px);
}
.auth-brand-glow--2 {
    right: auto; bottom: auto;
    left: -160px; top: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(30, 136, 229, .24), transparent 60%);
}

/* ---- top: logo + live status */
.auth-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-logo { display: inline-flex; align-items: center; gap: 12px; }
.auth-logo .brand-mark {
    width: 44px; height: 44px; font-size: 16px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-lt) 0%, var(--primary-dk) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 8px 20px rgba(12, 31, 56, .55);
}
.auth-logo-text { font-weight: 700; letter-spacing: .06em; color: #fff; line-height: 1.1; font-size: 18px; }
.auth-logo-text small {
    display: block; font-size: 10px; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 3px;
}

.auth-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 500; letter-spacing: .02em;
    color: #A7E9CB;
    background: rgba(14, 159, 110, .12);
    border: 1px solid rgba(14, 159, 110, .30);
}
.auth-status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #34D98A;
    box-shadow: 0 0 0 0 rgba(52, 217, 138, .55);
    animation: auth-pulse 2.4s var(--transition) infinite;
}
@keyframes auth-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 217, 138, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 217, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 217, 138, 0); }
}

/* ---- middle: pitch + features + stats */
.auth-brand-mid { max-width: 34rem; }
.auth-eyebrow {
    display: inline-block; margin-bottom: 12px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: #90CAF9;
}
.auth-brand-mid h2 {
    color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.14;
    letter-spacing: -.02em; margin: 0 0 12px; font-weight: 800;
}
.auth-brand-mid > p { color: #AFC3DA; font-size: 15px; line-height: 1.6; margin: 0; }

.auth-features { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.auth-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #C0D2E6; line-height: 1.45; }
.auth-features strong { color: #E8EEF6; font-weight: 600; }
.auth-feature-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .08); color: #90CAF9;
}

.auth-brand-stats {
    list-style: none; padding: 20px 0 0; margin: 32px 0 0;
    display: flex; flex-wrap: wrap; gap: 16px 40px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.auth-brand-stats li { display: flex; flex-direction: column; gap: 2px; }
.auth-brand-stats strong {
    font-size: 24px; color: #90CAF9; font-weight: 700; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.auth-brand-stats span {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* ---- foot: security signal */
.auth-brand-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ============================================================ form panel */
.auth-form-col {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px;
    padding: 48px clamp(16px, 5vw, 64px);
    background:
        radial-gradient(100% 60% at 50% 0%, var(--surface-2), transparent 70%),
        var(--surface);
}
.auth-form-card {
    width: 100%; max-width: min(400px, 100%);
    animation: auth-rise .24s var(--transition) both;
}
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.auth-form-brand { display: none; margin-bottom: 24px; }

/* ---- heading */
.auth-head { margin-bottom: 24px; }
.auth-eyebrow--dark { color: var(--party-deep, #1565C0); margin-bottom: 8px; }
.auth-head h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 8px; }
.auth-head .muted { margin: 0; font-size: 14px; }

/* ---- submit (fully styled here: the Lagos markup also carries .btn) */
.auth-submit {
    margin-top: 8px;
    width: 100%;
    min-height: 50px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 600;
    color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
    background: linear-gradient(135deg, var(--party, #1E88E5) 0%, var(--party-deep, #1565C0) 100%);
    box-shadow: 0 10px 24px rgba(21, 101, 192, .28);
    transition: box-shadow var(--transition), filter var(--transition), transform var(--transition);
}
.auth-submit:hover { box-shadow: 0 12px 28px rgba(21, 101, 192, .36); filter: brightness(1.05); background: linear-gradient(135deg, var(--party, #1E88E5) 0%, var(--party-deep, #1565C0) 100%); color: #fff; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit svg { transition: transform var(--transition); }
.auth-submit:hover svg { transform: translateX(3px); }
.auth-submit:focus-visible { outline: 2px solid var(--primary-lt); outline-offset: 2px; }

/* ---- security notice + help */
.auth-notice {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 24px; padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.auth-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.auth-notice strong { color: var(--text); font-weight: 600; }

.auth-help { margin-top: 16px; line-height: 1.55; font-size: 13px; color: var(--text-muted); }
.auth-legal { font-size: 12px; color: var(--text-faint); margin: 0; text-align: center; }

/* 2FA / small forms rendered inside the form panel keep tidy spacing */
.auth-form-card .field + .btn, .auth-form-card form .btn { margin-top: 8px; }

/* ============================================================ responsive */
@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-brand {
        padding: 32px 24px;
        gap: 24px;
        min-height: auto;
    }
    .auth-brand-mid h2 { font-size: 24px; }
    .auth-brand-mid > p { font-size: 14px; }
    .auth-features { margin-top: 24px; }
    .auth-brand-stats { gap: 16px 32px; margin-top: 24px; }
    .auth-form-col { padding: 48px 24px; }
}
@media (max-width: 560px) {
    /* Slim branded header: keep logo + headline, drop the deep pitch. */
    .auth-features, .auth-brand-stats, .auth-brand-foot, .auth-brand-mid > p { display: none; }
    .auth-brand { padding: 24px 16px; gap: 16px; }
    .auth-eyebrow { margin-bottom: 4px; }
    .auth-brand-mid h2 { font-size: 20px; margin: 0; }
    .auth-status { display: none; }
    .auth-form-col { padding: 32px 16px 48px; }
    .auth-head h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-status-dot, .auth-form-card { animation: none; }
    .auth-submit:hover svg { transform: none; }
}

/* ==================================================== overlay / 2FA modal
   A challenge modal floating over a DECORATIVE, blurred situation-room
   backdrop. The backdrop is a pure CSS/SVG motif -- never real data -- because
   at /2fa the user has not cleared the second factor and holds no access. It
   exists only to make the gate feel like a modal over the app. */
.overlay-body { min-height: 100vh; background: var(--primary-dk); overflow: hidden; }

.overlay-backdrop {
    position: fixed; inset: 0; z-index: 0;
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    filter: blur(9px) saturate(1.05);
    transform: scale(1.06);           /* hide the blur's soft edges */
    transform-origin: center;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 10% 0%, rgba(30, 136, 229, .18), transparent 55%),
        linear-gradient(155deg, #1E3A5F 0%, #152D4A 55%, #0C1F38 100%);
}
/* backdrop: topbar */
.obd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
}
.obd-brand { display: inline-flex; align-items: center; gap: 8px; color: #EAF3EE; font-weight: 700; letter-spacing: .06em; }
.obd-brand .brand-mark { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }
.obd-pills { display: inline-flex; gap: 8px; }
.obd-pill { width: 44px; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .10); }
.obd-pill--wide { width: 80px; background: rgba(37, 99, 235, .26); }
/* backdrop: body = sidebar + main */
.obd-body { flex: 1; display: flex; gap: 16px; min-height: 0; }
.obd-side {
    width: 190px; flex-shrink: 0; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.obd-navline { height: 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .09); }
.obd-navline.is-on { background: rgba(14, 159, 110, .34); }
.obd-main { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.obd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.obd-kpi { height: 92px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.obd-panels { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; min-height: 0; }
.obd-panel { border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); padding: 16px; }
.obd-panel--chart svg { width: 100%; height: 100%; }
.obd-panel--chart polyline { fill: none; stroke: rgba(52, 217, 138, .7); stroke-width: 2.4; }
.obd-panel--chart .obd-line-2 { stroke: rgba(66, 165, 245, .6); }
.obd-panel--map { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.obd-cell { border-radius: var(--radius-sm); background: rgba(30, 136, 229, .16); }
.obd-cell:nth-child(3n) { background: rgba(14, 159, 110, .18); }
.obd-cell:nth-child(4n) { background: rgba(255, 255, 255, .06); }

.overlay-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(8, 18, 32, .55); pointer-events: none; }

.overlay-main {
    position: relative; z-index: 2;
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.overlay-card {
    position: relative;
    width: 100%; max-width: 420px;
    padding: 40px 32px 32px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    text-align: center;
    animation: auth-rise .24s var(--transition) both;
}
.overlay-lock {
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-lt), var(--primary-dk));
    color: #fff;
    box-shadow: 0 10px 24px rgba(12, 31, 56, .4), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.overlay-card h1 { font-size: 22px; text-align: center; }
.overlay-card > p { text-align: center; }
.overlay-card > .muted { margin: 0 0 20px; }
.overlay-card .alert { text-align: left; }
.overlay-card .field { text-align: left; margin-bottom: 16px; }
.overlay-card .btn,
.overlay-card button[type="submit"] {
    width: 100%; min-height: 48px; margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #fff;
    border: 0; border-radius: var(--radius); cursor: pointer;
    background: linear-gradient(135deg, var(--party, #1E88E5) 0%, var(--party-deep, #1565C0) 100%);
    box-shadow: 0 10px 24px rgba(21, 101, 192, .26);
    transition: box-shadow var(--transition), filter var(--transition);
}
.overlay-card .btn:hover,
.overlay-card button[type="submit"]:hover { filter: brightness(1.05); color: #fff; }
/* The 6-digit code reads best as a wide, centred, tabular entry. */
.overlay-card #code {
    text-align: center;
    letter-spacing: .5em;
    text-indent: .5em;                /* balance the trailing letter-spacing */
    font-size: 26px;
    min-height: 60px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .overlay-backdrop { display: none; }
    .overlay-card { padding: 36px 20px 24px; }
    .overlay-card #code { font-size: 22px; letter-spacing: .35em; text-indent: .35em; }
}
@media (prefers-reduced-motion: reduce) {
    .overlay-card { animation: none; }
}

/* ==================================================== narrow guest card
   Used by the invite + 2FA-setup screens and the error pages. */
.guest-body { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.guest-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.guest-card {
    width: 100%; max-width: 460px;
    padding: 36px 32px 32px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.guest-card .brand { margin-bottom: 24px; }
.guest-card .btn,
.guest-card button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px;
    font-size: 14.5px; font-weight: 600; color: #fff;
    border: 0; border-radius: var(--radius); cursor: pointer;
    background: linear-gradient(135deg, var(--party, #1E88E5) 0%, var(--party-deep, #1565C0) 100%);
    transition: filter var(--transition);
}
.guest-card .btn:hover,
.guest-card button[type="submit"]:hover { filter: brightness(1.05); color: #fff; }
.guest-card .btn--block { width: 100%; }

/* ============================================================= error pages
   The numeric status IS the h1 in every error template: render it big + brand. */
.error-page {
    text-align: center; max-width: 420px; margin: 0 auto;
    padding: 24px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.error-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 8px;
    border-radius: 16px; color: var(--primary-lt); background: var(--info-bg);
}
.error-ico svg { width: 28px; height: 28px; }
.error-ico--warn { color: var(--warning-text); background: var(--warning-bg); }
.error-ico--crit { color: var(--danger-text); background: var(--danger-bg); }
.error-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.error-page h1 { font-size: 52px; font-weight: 700; color: var(--text); line-height: 1; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.error-page p { color: var(--text-muted); margin: 0; max-width: 34ch; }
.error-page .error-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }