.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; left: -17rem; bottom: -18rem; border-radius: 50%; background: radial-gradient(circle, rgba(197,244,103,.18), transparent 68%); }
.auth-layout { position: relative; display: grid; width: min(1100px, calc(100% - 3rem)); min-height: calc(100vh - 72px); margin: 0 auto; padding: 6rem 0; align-items: center; grid-template-columns: 1fr minmax(390px, .75fr); gap: clamp(3rem, 9vw, 9rem); }
.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, 5vw, 5rem); font-weight: 700; letter-spacing: -.065em; line-height: .98; }
.auth-intro h1 span { color: var(--lime); }
.auth-intro p { max-width: 560px; color: #98aaae; font-size: 1.05rem; line-height: 1.8; }
.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 .5rem; font-family: 'Manrope', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.045em; }
.form-card-heading p, .success-state p { color: #6c7d7a; font-size: .88rem; line-height: 1.65; }
.field-group { margin-bottom: 1.5rem; }
.form-label { margin-bottom: .5rem; color: #293b40; font-size: .76rem; font-weight: 700; }
.form-control { min-height: 3.3rem; 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); }
.auth-submit, .auth-outline { display: flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: .75rem; border-radius: .5rem; font-size: .88rem; font-weight: 800; }
.auth-submit { border-color: var(--lime); color: var(--night); background: var(--lime); }
.auth-submit:hover, .auth-submit:focus-visible { color: var(--night); border-color: #d4ff7e; background: #d4ff7e; transform: translateY(-2px); }
.auth-outline { border: 1px solid #23453f; color: #23453f; }
.auth-outline:hover { color: #fff; background: #23453f; }
.auth-back a { color: #60726f; }
.auth-back a:hover { color: #315f58; }
.success-icon { display: grid; width: 5rem; height: 5rem; margin: .75rem auto 1.5rem; place-items: center; border-radius: 50%; color: #315f58; background: #e2efea; font-size: 2.1rem; }
.success-state h4 { font-family: 'Manrope', sans-serif; }
.fade-in { animation: fadeIn .5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) { .auth-layout { width: min(620px, calc(100% - 2rem)); padding: 7rem 0 4rem; grid-template-columns: 1fr; gap: 3rem; } .auth-intro { text-align: center; } }
@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.65rem; } .form-card { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }