:root {
    --primary: #004ac6; --primary-hover: #003ea8; --secondary: #712ae2; --tertiary: #006243;
    --surface: #faf8ff; --surface-low: #f2f3ff; --surface-mid: #eaedff; --surface-high: #dae2fd;
    --ink: #131b2e; --muted: #525768; --outline: #c3c6d7; --error: #a31414; --error-bg: #fff1ef;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink); background: var(--surface);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--surface); }
button, input { font: inherit; }
.auth-page {
    min-height: 100vh; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px);
    background: radial-gradient(circle at 8% 10%, rgb(0 74 198 / 9%), transparent 30rem), radial-gradient(circle at 92% 90%, rgb(113 42 226 / 8%), transparent 28rem), var(--surface);
}
.auth-shell {
    width: min(1080px, 100%); min-height: 660px; display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); overflow: hidden;
    border: 1px solid rgb(195 198 215 / 70%); border-radius: 28px; background: #fff;
    box-shadow: 0 28px 80px rgb(24 32 55 / 14%);
}
.auth-context {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
    padding: clamp(34px, 5vw, 64px); overflow: hidden;
    background: linear-gradient(145deg, var(--surface-low), var(--surface-mid));
    border-right: 1px solid rgb(195 198 215 / 60%);
}
.auth-context::before { content: ""; position: absolute; width: 340px; height: 340px; top: -200px; right: -150px; border: 70px solid rgb(0 74 198 / 7%); border-radius: 50%; }
.brand-mark { position: relative; display: flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.02em; }
.brand-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 12px; letter-spacing: .04em; box-shadow: 0 8px 20px rgb(0 74 198 / 24%); }
.context-copy { position: relative; max-width: 560px; }
.eyebrow { margin: 0 0 10px; color: var(--primary); font-size: 11px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.context-copy h1 { max-width: 520px; margin: 0; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.055em; }
.context-lead { max-width: 500px; margin: 22px 0 36px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.access-route { display: grid; max-width: 430px; padding: 20px; border: 1px solid rgb(195 198 215 / 70%); border-radius: 20px; background: rgb(255 255 255 / 76%); backdrop-filter: blur(10px); }
.route-node { display: flex; align-items: center; gap: 13px; min-height: 54px; }
.route-node strong, .route-node small { display: block; }
.route-node strong { font-size: 13px; }
.route-node small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.route-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--outline); border-radius: 12px; color: var(--primary); background: #fff; }
.route-icon svg, .field-control > svg, .password-toggle svg, .form-alert > svg, .auth-footer svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-icon svg { width: 19px; }
.route-node-primary .route-icon { color: #fff; border-color: var(--primary); background: linear-gradient(145deg, var(--primary), var(--secondary)); box-shadow: 0 8px 20px rgb(0 74 198 / 22%); }
.route-line { width: 38px; height: 18px; display: grid; place-items: center; }
.route-line span { width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(var(--outline), var(--primary)); }
.context-note { position: relative; max-width: 450px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth-panel { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(34px, 5vw, 60px); background: #fff; }
.auth-panel-inner { margin: auto 0; }
.form-heading { margin-bottom: 30px; }
.form-heading h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }
.form-heading > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-form { display: grid; gap: 18px; }
.field-group { display: grid; gap: 7px; }
.field-group label { font-size: 12px; font-weight: 700; }
.field-control { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--outline); border-radius: 13px; background: var(--surface-low); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.field-control:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgb(0 74 198 / 10%); }
.field-control-error { border-color: var(--error); background: var(--error-bg); }
.field-control > svg { width: 18px; flex: 0 0 18px; color: var(--muted); }
.field-control input { width: 100%; min-width: 0; padding: 13px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }
.password-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.password-toggle:hover { background: var(--surface-high); color: var(--ink); }
.password-toggle:focus-visible { outline: 3px solid rgb(0 74 198 / 25%); }
.password-toggle svg { width: 18px; }
.eye-closed, .password-toggle[data-visible="true"] .eye-open { display: none; }
.password-toggle[data-visible="true"] .eye-closed { display: block; }
.field-help, .field-error { margin: 0; font-size: 11px; line-height: 1.4; }
.field-help { color: var(--muted); }
.field-error { color: var(--error); }
.check-row { display: flex; align-items: center; gap: 9px; min-height: 32px; width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); flex-shrink: 0; }
.primary-action { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 13px; color: #fff; background: var(--primary); box-shadow: 0 10px 24px rgb(0 74 198 / 22%); font-size: 13px; font-weight: 750; cursor: pointer; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.primary-action:hover { background: var(--primary-hover); box-shadow: 0 13px 28px rgb(0 74 198 / 28%); transform: translateY(-1px); }
.primary-action:focus-visible { outline: 4px solid rgb(0 74 198 / 24%); outline-offset: 2px; }
.primary-action:disabled { cursor: wait; opacity: .82; transform: none; }
.button-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 45%); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.primary-action[data-loading="true"] .button-spinner { display: block; }
.primary-action[data-loading="true"] .button-arrow { display: none; }
.form-switch { margin: 24px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.form-switch a { color: var(--primary); font-weight: 700; text-decoration: none; }
.form-switch a:hover { text-decoration: underline; }
.form-alert { display: flex; gap: 11px; margin: -8px 0 22px; padding: 13px; border: 1px solid rgb(163 20 20 / 25%); border-radius: 13px; color: var(--error); background: var(--error-bg); font-size: 11px; line-height: 1.45; }
.form-alert > svg { width: 19px; height: 19px; flex: 0 0 19px; }
.form-alert strong { display: block; margin-bottom: 3px; font-size: 12px; }
.form-alert ul { margin: 0; padding-left: 16px; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgb(195 198 215 / 55%); color: var(--muted); font-size: 10px; text-align: center; }
.auth-footer svg { width: 14px; color: var(--tertiary); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
    .auth-page { display: block; padding: 0; background: #fff; }
    .auth-shell { min-height: 100vh; display: block; border: 0; border-radius: 0; box-shadow: none; }
    .auth-context { display: block; padding: 24px 20px 22px; border: 0; border-bottom: 1px solid rgb(195 198 215 / 60%); }
    .context-copy { margin-top: 20px; }
    .context-copy h1 { max-width: 100%; font-size: 26px; }
    .context-lead { margin: 10px 0 0; font-size: 13px; }
    .access-route, .context-note { display: none; }
    .auth-panel { padding: 28px 20px 32px; }
    .auth-panel-inner { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }