.auth-page {
    --night: #0b171c;
    --ink: #101c22;
    --lime: #c5f467;
    --muted: #66777f;
    position: relative;
    min-height: calc(100vh - 72px);
    overflow: hidden;
    color: var(--ink);
    background: var(--night);
    font-family: 'DM Sans', sans-serif;
}

.auth-grid { position: absolute; inset: 0; opacity: .14; 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(90deg, transparent, black 45%, black); }
.auth-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 72px); }
.auth-form-panel { display: grid; padding: 5rem clamp(2rem, 6vw, 7rem); place-items: center; background: #f7faf8; }
.login-form-container { width: min(100%, 470px); }
.auth-brand { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 4.5rem; color: var(--ink); font-family: 'Manrope', sans-serif; font-size: .86rem; font-weight: 800; letter-spacing: .02em; 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-heading { margin-bottom: 2.2rem; }
.auth-kicker, .story-index { color: #427068; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-heading h1, .auth-story h2 { margin: .8rem 0 1rem; font-family: 'Manrope', sans-serif; font-size: clamp(2.65rem, 4vw, 4.2rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.02; }
.auth-heading h1 span, .auth-story h2 span { color: #4d756e; }
.auth-heading p { color: var(--muted); line-height: 1.7; }
.field-group { margin-bottom: 1.25rem; }
.form-label { margin-bottom: .55rem; color: #293b40; font-size: .78rem; font-weight: 700; }
.input-group { border: 1px solid #d7e1de; border-radius: .55rem; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.input-group-text, .form-control { min-height: 3.3rem; border: 0; background: transparent; }
.input-group-text { padding-left: 1rem; color: #70817e; }
.form-control { color: var(--ink); }
.form-control:focus { border: 0; box-shadow: none; }
.input-group:focus-within { border-color: #49756e; box-shadow: 0 0 0 3px rgba(44, 101, 92, .13); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .3rem 0 1.7rem; }
.login-options a, .auth-switch a { color: #315f58; }
.form-check-input:checked { border-color: #315f58; background-color: #315f58; }
.auth-submit { display: flex; min-height: 3.35rem; margin-bottom: 1.5rem; align-items: center; justify-content: center; gap: .75rem; border: 1px solid var(--night); 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); }
.auth-switch { color: #71817f; }
.auth-story { position: relative; display: flex; overflow: hidden; padding: clamp(3rem, 7vw, 8rem); align-items: center; color: #eef5f3; }
.story-content { position: relative; z-index: 1; max-width: 600px; }
.story-index { color: var(--lime); }
.story-icon { display: grid; width: 4rem; height: 4rem; margin: 3rem 0 1.5rem; place-items: center; border: 1px solid #3d5157; border-radius: .75rem; color: var(--lime); background: rgba(197,244,103,.08); font-size: 1.6rem; }
.auth-story h2 span { color: var(--lime); }
.auth-story p { max-width: 540px; color: #91a4a8; font-size: 1.05rem; line-height: 1.8; }
.story-list { margin: 2.2rem 0 0; padding: 0; list-style: none; }
.story-list li { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid #293b41; color: #c5d1d3; font-size: .88rem; }
.story-list i { color: var(--lime); }
.story-orbit { position: absolute; border: 1px solid rgba(197,244,103,.12); border-radius: 50%; }
.orbit-one { width: 35rem; height: 35rem; right: -14rem; top: -15rem; }
.orbit-two { width: 22rem; height: 22rem; right: -6rem; top: -8rem; }
.modal-backdrop-surface { --night: #0b171c; --lime: #c5f467; background: rgba(4, 12, 15, .75); backdrop-filter: blur(6px); }
.modal-content { overflow: hidden; border: 1px solid #d7e1de; border-radius: .75rem; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.modal-header, .modal-footer { border-color: #e2e9e7; }
.modal .btn-primary, .modal .btn-success { border-color: var(--night); color: var(--night); background: var(--lime); font-weight: 700; }

@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-form-panel { min-height: calc(100vh - 72px); padding: 3.5rem 1.5rem; }
    .auth-brand { margin-bottom: 3rem; }
}

@media (max-width: 575.98px) { .login-options { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .auth-submit { transition: none; } }