/* Auth presentation only. Backend contracts and form identifiers stay unchanged. */
.auth-page {
    --auth-bg: #06120d;
    --auth-surface: #0d1c14;
    --auth-line: #294435;
    --auth-muted: #adc1b4;
    --auth-green: #00df75;
    background: var(--auth-bg) !important;
    color: #f3faf5;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 40px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, system-ui, sans-serif;
    color-scheme: dark;
}
.auth-page > .absolute { display: none; }
.auth-shell { width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--auth-line); border-radius: 32px; overflow: hidden; background: #09150f; box-shadow: 0 32px 100px #0005; }
.auth-story { display: flex; flex-direction: column; padding: 38px 44px; background: radial-gradient(ellipse at 35% 65%, #12573355, transparent 65%), #0d2519; border-right: 1px solid var(--auth-line); }
.auth-brand { display: flex; align-items: center; gap: 12px; color: #f3faf5; width: fit-content; font-weight: 800; font-size: 26px; letter-spacing: -1px; }
.auth-brand-mark { display: block; width: 40px; height: 32px; flex-shrink: 0; color: var(--auth-green); }
.auth-mobile-brand .auth-brand-mark { width: 36px; height: 28px; }
.auth-brand-accent { color: var(--auth-green); }
.auth-brand small { display: block; font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: var(--auth-muted); margin-top: 2px; }
.auth-story-content { margin: auto 0; padding-top: 56px; }
.auth-eyebrow { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: #9ad4b1; }
.auth-story h2 { font-size: clamp(40px, 4.6vw, 59px); line-height: 1.08; letter-spacing: -2.8px; font-weight: 700; margin: 20px 0; }
.auth-story h2 span { color: var(--auth-green); }
.auth-story-content > p { font-size: 14px; line-height: 1.8; max-width: 310px; color: var(--auth-muted); }
.auth-story-footer { font-size: 11px; color: var(--auth-muted); padding-top: 30px; line-height: 1.7; }
.auth-connection-art { position: relative; height: 170px; margin-top: 20px; overflow: hidden; }
.auth-orbit { position: absolute; width: 250px; height: 250px; border: 1px solid #427f5555; border-radius: 50%; left: 50%; top: 15px; transform: translateX(-50%); }
.auth-orbit-inner { width: 170px; height: 170px; top: 55px; }
.auth-art-core { position: absolute; top: 75px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border: 1px solid #4bb37966; border-radius: 22px; background: #163f29; color: var(--auth-green); display: grid; place-items: center; }
.auth-art-core svg { width: 40px; height: 40px; }
.auth-art-chip { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; background: #173322; border: 1px solid #365c43; border-radius: 30px; color: #c1dec9; font-size: 10px; }
.auth-panel { padding: 40px 44px; min-width: 0; align-self: center; }
.auth-mobile-brand { display: none; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid #253b2d; background: #050e09; border-radius: 15px; margin-bottom: 36px; gap: 4px; }
.auth-switch[hidden] { display: none; }
.auth-switch button { min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--auth-muted); transition: background 180ms ease, color 180ms ease; }
.auth-switch button[aria-pressed="true"] { background: #1b3927; color: #d6ffe5; box-shadow: inset 0 0 0 1px #3b6248; }
.auth-heading { margin-bottom: 30px; }
.auth-heading h1 { font-size: 32px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.2; }
.auth-heading p { color: var(--auth-muted); font-size: 14px; line-height: 1.6; margin-top: 10px; }
/* Persistent labels remain readable with invalid values and password managers. */
.auth-panel .group:has(> input:not([type="checkbox"])), .auth-panel #locationDropdownContainer { padding-top: 25px; }
.auth-panel .group > input:not([type="checkbox"]), .auth-panel select { background: var(--auth-surface); border: 1px solid var(--auth-line); border-radius: 13px; min-height: 54px; font-size: 16px; padding: 14px 16px; box-shadow: none; color: #f3faf5; }
.auth-panel .group > input + label, .auth-panel .location-select-label { top: 0 !important; left: 0 !important; padding: 0 !important; background: none !important; font-size: 12px !important; font-weight: 500 !important; color: #c0d2c6 !important; text-transform: none !important; letter-spacing: 0 !important; }
.auth-panel .location-select-input { color: #f3faf5 !important; padding-right: 40px; }
.auth-panel #locationDropdownContainer > div { margin-top: 12px; }
.auth-panel input:focus, .auth-panel select:focus { border-color: var(--auth-green); outline: 2px solid #00df7526; outline-offset: 2px; }
.auth-panel input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--auth-surface) inset !important; }
.auth-panel button[type="submit"] { min-height: 54px; border-radius: 13px; background: var(--auth-green); color: #03220f; box-shadow: 0 5px 20px #00df7510; font-weight: 700; transition: background 180ms ease, box-shadow 180ms ease; }
.auth-panel button[type="submit"]:hover { background: #3bea93; box-shadow: 0 6px 24px #00df7528; }
.auth-panel button:disabled { opacity: .6; cursor: wait; }
.auth-panel button:active { transform: none; }
.auth-panel form > .flex label, .auth-panel form > .flex button { min-height: 44px; display: inline-flex; align-items: center; }
.auth-panel form > p { font-size: 11px; line-height: 1.8; color: var(--auth-muted); }
.auth-panel .text-gray-400 { color: var(--auth-muted); }
.auth-page :is(button, a, input, select):focus-visible { outline: 2px solid var(--auth-green) !important; outline-offset: 4px; }
.auth-panel [id$="-error-msg"] { line-height: 1.5; padding: 12px; }
.auth-panel > div[id$="View"] { transition-duration: 180ms; }
/* One entrance on page load; no persistent transforms or hidden end states. */
@keyframes auth-arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .auth-brand, .auth-mobile-brand,
    .auth-story-content, .auth-story-footer,
    .auth-switch, .auth-heading, #loginForm > *, #loginView > .text-center {
        animation: auth-arrive 420ms cubic-bezier(.2, .7, .2, 1) backwards;
    }
    .auth-switch, .auth-story-content { animation-delay: 50ms; }
    .auth-heading { animation-delay: 90ms; }
    #loginForm > :nth-child(1) { animation-delay: 120ms; }
    #loginForm > :nth-child(2) { animation-delay: 150ms; }
    #loginForm > :nth-child(n+3) { animation-delay: 180ms; }
    #loginView > .text-center, .auth-story-footer { animation-delay: 210ms; }
    /* Keyboard users can interact immediately, even during the entrance. */
    .auth-panel:focus-within *, .auth-brand:focus-visible { animation: none; }
}
@media (max-width: 800px) {
    .auth-page { padding: 0; align-items: flex-start; background: radial-gradient(ellipse at top right, #12412a66, transparent 55%), var(--auth-bg) !important; }
    .auth-shell { display: block; max-width: 500px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
    .auth-story { display: none; }
    .auth-panel { padding: max(28px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
    .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 38px; font-size: 23px; font-weight: 750; letter-spacing: -.8px; }
    .auth-mobile-caption { margin-left: auto; font-size: 11px; color: var(--auth-muted); font-weight: 400; letter-spacing: 0; }
    .auth-switch { margin-bottom: 32px; }
    .auth-heading { margin-bottom: 30px; }
    .auth-heading h1 { font-size: 34px; }
}
@media (max-width: 360px) { .auth-panel { padding-left: 18px; padding-right: 18px; } .auth-mobile-caption { display: none; } }
/* Tablet and desktop occupy the viewport; phone styles above stay untouched. */
@media (min-width: 768px) {
    .auth-page { padding: 0; align-items: stretch; }
    .auth-shell { max-width: none; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: #09150f; }
    .auth-story { display: flex; min-width: 0; }
    .auth-mobile-brand { display: none; }
    .auth-panel { width: 100%; max-width: 580px; justify-self: center; margin: auto; padding: 48px 40px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .auth-shell { display: flex; flex-direction: column; }
    .auth-story { padding: 28px 40px; border-right: 0; border-bottom: 1px solid var(--auth-line); }
    .auth-story-content { padding-top: 28px; margin: 0; }
    .auth-story h2 { font-size: 40px; letter-spacing: -1.8px; margin: 12px 0; }
    .auth-story h2 span { display: block; }
    .auth-story-content > p { max-width: 540px; }
    .auth-connection-art, .auth-story-footer, .auth-eyebrow { display: none; }
    .auth-panel { flex: 1; padding-top: 36px; padding-bottom: 40px; }
}
@media (min-width: 1024px) {
    .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .auth-story { padding: clamp(36px, 4vw, 72px) clamp(40px, 5vw, 100px); }
    .auth-story-content { padding-top: 48px; }
    .auth-story h2 { font-size: clamp(56px, 5vw, 88px); letter-spacing: -.055em; }
    .auth-story-content > p { font-size: 16px; max-width: 390px; }
    .auth-connection-art { height: 200px; max-width: 420px; margin-top: 32px; }
    .auth-orbit { width: 310px; height: 310px; }
    .auth-orbit-inner { width: 210px; height: 210px; top: 65px; }
    .auth-art-core { top: 95px; }
    .auth-story-footer { font-size: 12px; }
    .auth-panel { padding-top: 56px; padding-bottom: 56px; }
    .auth-heading h1 { font-size: 38px; }
    .auth-heading p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .auth-page *, .auth-page *::before, .auth-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }