.auth { width: min(100%, 440px); margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) 1.2rem 2.5rem; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.auth h1 { text-align: center; margin: .2rem 0 .4rem; }
.logo-wrap { position: relative; width: clamp(170px, 48vw, 230px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.logo-wrap img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(198,244,50,.45) 0%, rgba(198,244,50,.12) 40%, transparent 68%); filter: blur(10px); }
.auth .card { padding: 1.4rem; border-color: rgba(198,244,50,.14); background: rgba(18,20,16,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.auth .tabs { margin-bottom: .4rem; }
.divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin: 1rem 0 .4rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
#forgot { display: block; margin: .8rem auto 0; font-size: .92rem; }
.auth > p.muted a { color: var(--muted); font-weight: 600; border-bottom: 1px dashed var(--line-strong); }
.auth > p.muted a:hover { color: var(--neon); border-color: var(--neon); }
@media (min-width: 900px) {
  body:has(.auth:not(.hidden)) { background-image: radial-gradient(800px 600px at 50% 20%, rgba(198,244,50,.13), transparent 60%); }
}