/* ==========================================================================
   Auth pages (login/register) — page-specific layout only.
   Tokens, reset and components come from shared/css/*.css.
   ========================================================================== */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(74, 72, 222, .12) 0%, transparent 60%),
    var(--surface);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-10) var(--space-8);
}

.brand { text-align: center; margin-bottom: var(--space-8); }
.brand__name {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -.5px;
}
.brand__sub { font-size: .85rem; color: var(--on-surface-variant); margin-top: var(--space-1); }

.row { display: flex; gap: var(--space-3); }
.row .field { flex: 1; }

.foot { text-align: center; font-size: .85rem; color: var(--on-surface-variant); margin-top: var(--space-2); }
.foot a { color: var(--primary); font-weight: 600; }
.foot a:hover { text-decoration: underline; }

/* OTP area wrapper — gives the boxes some breathing room and centers them */
.otp-area { margin-bottom: var(--space-4); }
.otp-area__hint {
  font-size: .8rem; color: var(--on-surface-variant);
  text-align: center; margin-bottom: var(--space-3);
}
.otp-area__err { text-align: center; }

@media (max-width: 480px) {
  .auth-card { padding: var(--space-8) var(--space-5); }
  .row { flex-direction: column; gap: 0; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}