:root { color-scheme: light; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: #193243; background: #edf3f4; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 6vw, 88px); color: #fff; background: radial-gradient(circle at 75% 13%, #3b93bd 0, transparent 25%), linear-gradient(145deg, #062b52, #0c5278); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.auth-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; color: #7ce0cb; font-size: .8rem; }
.auth-intro-copy { max-width: 560px; margin: auto 0; }
.auth-kicker { margin: 0 0 13px; color: #78dac7; font-weight: 800; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.auth-intro h1 { max-width: 600px; margin: 0; font-size: clamp(2.35rem, 4vw, 4.4rem); line-height: .98; letter-spacing: -.06em; }
.auth-intro p { max-width: 530px; margin: 23px 0 0; color: #c6dae2; font-size: 1.05rem; line-height: 1.6; }
.auth-points { display: grid; gap: 11px; padding: 0; margin: 32px 0 0; list-style: none; color: #d8e8eb; font-size: .9rem; }
.auth-points li { display: flex; gap: 9px; align-items: start; }
.auth-points li::before { content: "✓"; color: #78dac7; font-weight: 900; }
.auth-footnote { color: #a9c4cf; font-size: .75rem; line-height: 1.55; }
.auth-main { display: grid; place-items: center; padding: 32px; }
.auth-card { width: min(100%, 460px); padding: clamp(28px, 4vw, 48px); border: 1px solid #d8e4e7; border-radius: 20px; background: #fff; box-shadow: 0 20px 48px rgba(15, 55, 72, .1); }
.auth-card h2 { margin: 0; color: #173347; font-size: 1.85rem; letter-spacing: -.04em; }
.auth-subtitle { margin: 9px 0 27px; color: #617983; font-size: .94rem; line-height: 1.55; }
.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; color: #294655; font-size: .83rem; font-weight: 760; }
.auth-field input { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid #c8d7dc; border-radius: 9px; color: #173347; font: inherit; font-weight: 500; outline: none; }
.auth-field input:focus { border-color: #247fd7; box-shadow: 0 0 0 3px rgba(36,127,215,.15); }
.auth-password-row { position: relative; }
.auth-password-row input { padding-right: 80px; }
.password-toggle { position: absolute; top: 50%; right: 8px; border: 0; padding: 6px; color: #176ac0; background: transparent; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; transform: translateY(-50%); }
.auth-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-link { color: #176ac0; font-size: .8rem; font-weight: 760; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-button { min-height: 46px; border: 0; border-radius: 9px; padding: 11px 15px; color: #fff; background: #123f68; font: inherit; font-weight: 800; cursor: pointer; }
.auth-button:hover { background: #0a3459; }
.auth-button:disabled { cursor: wait; opacity: .7; }
.auth-status { min-height: 1.3em; margin: 0; color: #a1293b; font-size: .83rem; line-height: 1.45; }
.auth-status.success { color: #08765a; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: #7c9098; font-size: .77rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid #dce6e8; }
.auth-note { padding: 13px; border-radius: 10px; color: #586f78; background: #f2f7f8; font-size: .79rem; line-height: 1.5; }
@media (max-width: 860px) { .auth-page { grid-template-columns: 1fr; } .auth-intro { min-height: auto; padding: 28px 28px 40px; } .auth-intro-copy { margin: 56px 0 0; } .auth-intro h1 { font-size: clamp(2rem, 8vw, 3.4rem); } .auth-points, .auth-footnote { display: none; } .auth-main { padding: 22px; } .auth-card { margin-top: -25px; } }