.auth-page { --night: #0b171c; --lime: #c5f467; position: relative; min-height: calc(100vh - 72px); overflow: hidden; color: #f2f7f5; background: var(--night); font-family: 'DM Sans', sans-serif; }
.auth-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 95%); }
.auth-glow { position: absolute; width: 34rem; height: 34rem; right: -15rem; top: -15rem; border-radius: 50%; background: radial-gradient(circle, rgba(197,244,103,.2), transparent 68%); }
.auth-layout { position: relative; display: grid; width: min(1180px, calc(100% - 3rem)); min-height: calc(100vh - 72px); margin: 0 auto; padding: 5.5rem 0; align-items: center; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); gap: clamp(3rem, 8vw, 8rem); }
.auth-brand { position: absolute; top: 2rem; left: 0; display: inline-flex; align-items: center; gap: .75rem; color: #f2f7f5; font-family: 'Manrope', sans-serif; font-size: .86rem; font-weight: 800; text-decoration: none; }
.auth-brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .4rem; background: var(--lime); transform: rotate(45deg); }
.auth-brand-mark span { width: .58rem; height: .58rem; border: 2px solid var(--night); border-radius: 50%; }
.auth-kicker, .form-card-heading > span { color: var(--lime); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-intro h1 { margin: 1.1rem 0 1.4rem; font-family: 'Manrope', sans-serif; font-size: clamp(3rem, 5.3vw, 5.5rem); font-weight: 700; letter-spacing: -.065em; line-height: .98; }
.auth-intro h1 span { color: var(--lime); }
.auth-intro > p { max-width: 570px; color: #98aaae; font-size: 1.05rem; line-height: 1.8; }
.auth-note { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; padding: .7rem 1rem; border: 1px solid #34484e; border-radius: 4rem; color: #c5d1d3; font-size: .76rem; }
.auth-note i { color: var(--lime); }
.form-card { padding: clamp(2rem, 4vw, 3.4rem); border: 1px solid #dbe4e1; border-radius: 1rem; color: #101c22; background: #f7faf8; box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.form-card-heading { margin-bottom: 2rem; }
.form-card-heading > span { color: #477168; }
.form-card-heading h2 { margin: .6rem 0 .35rem; font-family: 'Manrope', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.045em; }
.form-card-heading p, .auth-switch { color: #6c7d7a; font-size: .88rem; }
.field-group { margin-bottom: 1.15rem; }
.form-label { margin-bottom: .45rem; color: #293b40; font-size: .76rem; font-weight: 700; }
.form-control { min-height: 3.2rem; border: 1px solid #d4dfdc; border-radius: .5rem; background: #fff; }
.form-control:focus { border-color: #477168; box-shadow: 0 0 0 3px rgba(44,101,92,.13); }
.form-check-input:checked { border-color: #315f58; background-color: #315f58; }
.form-check-label a, .auth-switch a { color: #315f58; }
.auth-submit { display: flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: .75rem; border: 1px solid var(--lime); border-radius: .5rem; color: var(--night); background: var(--lime); font-size: .88rem; font-weight: 800; }
.auth-submit:hover, .auth-submit:focus-visible { color: var(--night); border-color: #d4ff7e; background: #d4ff7e; transform: translateY(-2px); }

@media (max-width: 991.98px) { .auth-layout { width: min(680px, calc(100% - 2rem)); padding: 7rem 0 4rem; grid-template-columns: 1fr; gap: 3rem; } .auth-intro { text-align: center; } .auth-intro > p { margin-inline: auto; } .auth-note { display: none; } }
@media (max-width: 575.98px) { .auth-layout { width: 100%; padding: 6.5rem 1rem 1rem; } .auth-brand { left: 1.25rem; } .auth-intro h1 { font-size: 2.75rem; } .form-card { padding: 1.5rem; border-radius: .75rem; } }
@media (prefers-reduced-motion: reduce) { .auth-submit { transition: none; } }