@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink: #17243a; --blue: #0b47a1; --gold: #f4c542; --line: #dbe3ef; --muted: #718096; }
* { box-sizing: border-box; }
body.auth-page { margin: 0; min-height: 100vh; color: var(--ink); background: #eef3f8; font-family: 'DM Sans', sans-serif; }
.auth-shell { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr); max-width: 1060px; min-height: 620px; margin: 0 auto; padding: 28px; align-items: stretch; }
.auth-brand-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 84px); color: #fff; background: linear-gradient(145deg, #083879, #0b47a1 68%, #1768b9); border-radius: 18px 0 0 18px; box-shadow: 0 18px 50px rgba(17, 45, 85, .18); }
.auth-logo { width: 82px; height: 82px; object-fit: contain; margin-bottom: 28px; padding: 10px; background: #fff; border-radius: 50%; }
.auth-eyebrow, .auth-kicker { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-brand-panel h1 { margin: 0 0 14px; font: 700 clamp(2rem, 4vw, 3.4rem)/1.05 'Space Grotesk', sans-serif; }
.auth-brand-panel > p:last-child { max-width: 260px; margin: 0; color: #d9e7fa; line-height: 1.7; }
.auth-form-panel { display: flex; align-items: center; padding: clamp(30px, 7vw, 88px); background: #fff; border-radius: 0 18px 18px 0; box-shadow: 0 18px 50px rgba(17, 45, 85, .1); }
.auth-form-wrap { width: 100%; max-width: 380px; margin: 0 auto; }
.auth-kicker { color: var(--blue); }
.auth-form-wrap h2 { margin: 0 0 8px; font: 700 clamp(1.65rem, 3vw, 2.25rem)/1.15 'Space Grotesk', sans-serif; }
.auth-muted { margin: 0 0 30px; color: var(--muted); }
.auth-alert { padding: 12px 14px; margin-bottom: 20px; border-radius: 8px; font-size: .9rem; }
.auth-alert--error { color: #9b2c2c; background: #fff5f5; border: 1px solid #fed7d7; }
.auth-field { margin-bottom: 21px; }
.auth-field label, .auth-label-row { font-size: .88rem; font-weight: 600; }
.auth-label-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.auth-label-row label { margin: 0; }
.auth-label-row a { color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-label-row a:hover { text-decoration: underline; }
.auth-field > label { display: block; margin-bottom: 8px; }
.auth-field input { width: 100%; padding: 13px 14px; color: var(--ink); background: #fbfcfe; border: 1px solid var(--line); border-radius: 8px; outline: none; font: inherit; transition: border-color .2s, box-shadow .2s; }
.auth-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 71, 161, .12); }
.auth-password { position: relative; }
.auth-password input { padding-right: 46px; }
.auth-password button { position: absolute; top: 50%; right: 4px; width: 38px; height: 38px; color: var(--muted); background: transparent; border: 0; transform: translateY(-50%); cursor: pointer; }
.auth-submit { width: 100%; padding: 13px 18px; color: #15243a; background: var(--gold); border: 0; border-radius: 8px; font: 700 1rem 'DM Sans', sans-serif; cursor: pointer; transition: transform .2s, background .2s; }
.auth-submit:hover { background: #ffd65d; transform: translateY(-1px); }
.auth-submit i { margin-left: 7px; }
.auth-shell--single { max-width: 600px; min-height: 100vh; }
.auth-shell--single .auth-form-panel { width: 100%; border-radius: 18px; }
.auth-shell--single h1 { margin: 0 0 8px; font: 700 clamp(1.65rem, 3vw, 2.25rem)/1.15 'Space Grotesk', sans-serif; }
.auth-logo--small { width: 68px; height: 68px; object-fit: contain; margin-bottom: 24px; }
.auth-alert--success { color: #276749; background: #f0fff4; border: 1px solid #c6f6d5; }
.auth-back-link { display: inline-block; margin-top: 24px; color: var(--blue); font-size: .9rem; font-weight: 600; text-decoration: none; }
.auth-back-link:hover { text-decoration: underline; }
.auth-submit--link { display: block; color: #15243a; text-align: center; text-decoration: none; }
.auth-recovery-shell { grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr); max-width: 980px; min-height: 620px; }
.auth-recovery-aside { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 72px); color: #fff; background: linear-gradient(145deg, #083879, #0b47a1 68%, #1768b9); border-radius: 18px 0 0 18px; box-shadow: 0 18px 50px rgba(17, 45, 85, .18); }
.auth-recovery-aside h1 { max-width: 280px; margin: 0 0 14px; font: 700 clamp(2rem, 4vw, 3rem)/1.05 'Space Grotesk', sans-serif; }
.auth-recovery-aside > p:not(.auth-eyebrow) { max-width: 300px; margin: 0; color: #d9e7fa; line-height: 1.7; }
.auth-recovery-points { display: grid; gap: 12px; margin-top: 38px; color: #fff; font-size: .88rem; font-weight: 600; }
.auth-recovery-points span { display: flex; align-items: center; gap: 10px; }
.auth-recovery-points i { color: var(--gold); font-size: 1.1rem; }
.auth-icon-badge { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; color: var(--blue); background: #eaf2ff; border-radius: 12px; font-size: 1.3rem; }
.auth-form-note { display: flex; gap: 8px; margin: -3px 0 22px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.auth-form-note i { flex: 0 0 auto; color: var(--blue); font-size: 1rem; }
@media (max-width: 720px) { .auth-shell { display: block; min-height: auto; padding: 14px; } .auth-brand-panel { min-height: 250px; padding: 32px; border-radius: 14px 14px 0 0; } .auth-logo { width: 64px; height: 64px; margin-bottom: 18px; } .auth-brand-panel h1 { font-size: 2rem; } .auth-form-panel { padding: 38px 26px; border-radius: 0 0 14px 14px; } }
@media (max-width: 720px) { .auth-recovery-aside { min-height: 300px; padding: 32px; border-radius: 14px 14px 0 0; } .auth-recovery-aside h1 { font-size: 2rem; } .auth-recovery-points { margin-top: 24px; } .auth-recovery-shell .auth-form-panel { border-radius: 0 0 14px 14px; } }