body { min-height: 100vh; background: radial-gradient(circle at 12% 16%, rgb(65 107 224 / 16%), transparent 27rem), radial-gradient(circle at 90% 72%, rgb(201 153 98 / 18%), transparent 26rem), #f3f0ea; }
.auth-header { position: relative; z-index: 2; padding: 1.35rem clamp(1.2rem, 5vw, 4rem); }
.auth-header .navbar__brand { width: max-content; }
.auth-layout { position: relative; display: flex; justify-content: center; padding: clamp(1.2rem, 4vw, 3rem) 1.25rem 5rem; }
.auth-layout::before, .auth-layout::after { content: ''; position: fixed; z-index: 0; border: .65rem solid #fff; border-bottom-width: 2rem; border-radius: .25rem; background: linear-gradient(145deg, #24344e, #8ba3b5 52%, #d2ab78); box-shadow: var(--shadow-lg); pointer-events: none; }
.auth-layout::before { width: 12rem; height: 14rem; left: max(-5rem, calc(50% - 34rem)); top: 23%; transform: rotate(-8deg); }
.auth-layout::after { width: 10rem; height: 12rem; right: max(-4rem, calc(50% - 32rem)); bottom: 8%; transform: rotate(7deg); background: linear-gradient(145deg, #d3b48e, #f1dfc8 50%, #6f819a); }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: clamp(1.5rem, 4vw, 2.25rem); background: rgb(255 253 250 / 92%); box-shadow: 0 28px 70px rgb(34 45 65 / 14%); backdrop-filter: blur(18px); }
.auth-card h1 { margin-bottom: .45rem; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 540; letter-spacing: -.04em; }
.auth-card__lead { max-width: 38ch; margin: 0 0 1.4rem; color: var(--color-ink-muted); font-size: .88rem; }
.auth-card__footer { margin: 1.4rem 0 0; text-align: center; color: var(--color-ink-muted); font-size: .8rem; }
.auth-card__footer a, .auth-inline-link { color: var(--color-accent-strong); font-weight: 650; }
.auth-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.auth-inline-link { font-size: .77rem; }
.auth-inline-link:hover, .auth-card__footer a:hover { text-decoration: underline; }
.auth-card .form-field input { min-height: 2.85rem; }
@media (max-width: 720px) { .auth-layout::before, .auth-layout::after { opacity: .35; } }
@media (max-width: 480px) { .auth-header { padding-bottom: .6rem; } .auth-layout { padding-top: 1rem; } .auth-layout::before, .auth-layout::after { display: none; } .auth-card { border-radius: 22px; } }