.auth-main { min-height: calc(100vh - 180px); padding: 4rem 0; background: radial-gradient(circle at 12% 15%, rgba(109,40,217,.09), transparent 32%), linear-gradient(135deg, #f3f4f6, #fbfbff 52%, #f5f3ff); }
.auth-container { max-width: 660px; }
.auth-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(1.5rem, 5vw, 2.75rem); }
.auth-card h1 { margin: 0 0 .5rem; color: var(--primary-deep); font-size: clamp(1.8rem, 5vw, 2.5rem); }
.auth-language-switch { display: flex; justify-content: flex-end; gap: .35rem; margin: 0 0 1rem; }
.auth-language-switch a { min-width: 42px; padding: .42rem .68rem; border: 1px solid #ddd6fe; border-radius: 999px; text-align: center; color: var(--primary-deep); font-size: .82rem; font-weight: 800; text-decoration: none; }
.auth-language-switch a[aria-current="true"] { border-color: var(--primary); background: var(--primary); color: var(--white); }
.auth-intro { margin: 0 0 2rem; color: var(--muted); }
.auth-form { display: grid; gap: 1.15rem; }
.auth-field { display: grid; gap: .4rem; }
.auth-field label { font-weight: 700; }
.hackathon-otp-note { color: #2563eb; font-size: .82rem; font-weight: 650; }
.auth-field input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; font: inherit; color: var(--navy); background: var(--white); }
.auth-field input:focus { outline: 3px solid rgba(109, 40, 217, .16); border-color: var(--primary); }
.auth-field small { color: var(--muted); }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .5rem; }
.auth-alert { padding: 1rem 1.1rem; margin-bottom: 1.5rem; border-radius: 10px; border: 1px solid; box-shadow: 0 10px 28px rgba(17,24,39,.06); }
.auth-alert-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.auth-alert-success { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.auth-help { margin-top: 1.5rem; color: var(--muted); }
.auth-help a { color: var(--primary-deep); font-weight: 700; }
.otp-auth-card { padding: clamp(1.75rem, 6vw, 3rem); }
.otp-auth-card h1 { margin-top: 1.2rem; color: var(--navy); font-weight: 500; letter-spacing: -.5px; }
.otp-auth-card .auth-intro { font-size: 1.08rem; line-height: 1.6; }
.auth-monogram { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 13px; background: var(--lavender-strong); color: var(--primary-deep); font-size: 1.15rem; font-weight: 800; box-shadow: 0 12px 30px rgba(109,40,217,.11); }
.otp-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(54px, 1fr)); justify-content: stretch; gap: 11px; margin-top: .35rem; }
.otp-boxes input { width: 100%; aspect-ratio: 1 / 1.12; padding: 0; text-align: center; border: 2px solid var(--border); border-radius: 10px; background: var(--white); color: var(--primary-deep); font-size: 1.55rem; font-weight: 800; caret-color: var(--primary); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.otp-boxes input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(109,40,217,.13); transform: translateY(-1px); }
.otp-boxes input.is-filled { border-color: #a78bfa; background: var(--lavender); }
.otp-timer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0 0 1.8rem; padding: 1rem 1.2rem; color: var(--primary-deep); background: var(--lavender); border: 1px solid #ddd6fe; border-radius: 10px; }
.otp-timer-label { font-size: 1rem; }
.otp-timer strong { min-width: 62px; text-align: right; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.otp-timer.is-urgent { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.otp-timer.is-expired { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.resend-form { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin-top: 1.4rem; color: var(--muted); font-size: .92rem; }
.resend-form button { appearance: none; padding: 0; border: 0; background: transparent; color: var(--primary-deep); font: inherit; font-weight: 800; cursor: pointer; }
.resend-form button:hover { text-decoration: underline; }
.auth-actions-stack { display: grid; width: 100%; }
.auth-actions-stack .btn { width: 100%; justify-content: center; font-size: 1rem; font-weight: 800; }
.auth-resend-link { display: block; text-align: center; color: var(--primary-deep); font-size: .92rem; font-weight: 700; }
.otp-expiry-note { margin: -.3rem 0 .25rem; color: var(--muted); font-size: .9rem; }
.auth-field input[data-uppercase] { text-transform: uppercase; }
.dob-field { margin: .25rem 0 0; padding: 0; border: 0; }
.dob-field legend { margin-bottom: .8rem; color: var(--navy); font-weight: 500; }
.dob-grid { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 1rem; }
.dob-control { position: relative; }
.dob-control label { position: absolute; z-index: 1; top: -10px; left: 12px; padding: 0 7px; background: var(--white); color: var(--navy); font-size: .82rem; font-weight: 600; line-height: 20px; }
.dob-control label span { color: var(--rose); }
.dob-control select,
.dob-control input { width: 100%; min-height: 58px; padding: 1rem .9rem .75rem; border: 1.5px solid #9ca3af; border-radius: 7px; background: var(--white); color: var(--navy); font: inherit; font-size: 1rem; }
.dob-control select { appearance: auto; cursor: pointer; }
.dob-control select:focus,
.dob-control input:focus { outline: 2px solid rgba(109,40,217,.16); outline-offset: 1px; border-color: var(--primary); }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.status-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.status-list li { padding: .85rem 1rem; background: var(--lavender); border-radius: var(--radius); }
@media (max-width: 640px) { .auth-main { padding: 2rem 0; } .otp-boxes { grid-template-columns: repeat(6, minmax(36px, 1fr)); gap: 7px; } .otp-boxes input { font-size: 1.25rem; } }
@media (max-width: 390px) { .otp-boxes { grid-template-columns: repeat(6, minmax(32px, 1fr)); gap: 4px; } .otp-auth-card { padding-inline: 1.25rem; } }

/* Compact verification screens: designed to fit without vertical scrolling. */
.otp-page { overflow-y: auto; }
.otp-page .site-header .nav { min-height: 64px; padding-block: 7px; }
.otp-page .site-header .brand { height: 46px; }
.otp-page .site-footer { display: block; padding: .55rem 0; }
.otp-page .site-footer .footer-grid { min-height: 30px; justify-content: center; text-align: center; }
.otp-page .site-footer p { margin: 0; font-size: .78rem; }
.otp-page .auth-main { min-height: calc(100vh - 112px); padding: .65rem 0; display: grid; align-items: center; }
.otp-page .auth-container { max-width: 560px; }
.otp-page .otp-auth-card { padding: 1.5rem 1.75rem; }
.otp-page .auth-monogram { width: 42px; height: 42px; border-radius: 10px; font-size: .92rem; }
.otp-page .otp-auth-card h1 { margin: .7rem 0 .2rem; font-size: 1.75rem; }
.otp-page .otp-auth-card .auth-intro { margin-bottom: 1rem; font-size: .96rem; line-height: 1.45; }
.otp-page .otp-timer { margin-bottom: 1rem; padding: .65rem .9rem; }
.otp-page .otp-timer strong { font-size: 1.15rem; }
.otp-page .auth-alert { margin-bottom: 1rem; padding: .7rem .85rem; }
.otp-page .auth-form { gap: .8rem; }
.otp-page .otp-grid { gap: .8rem; }
.otp-page .auth-field { gap: .25rem; }
.otp-page .otp-boxes { grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 8px; margin-top: .15rem; }
.otp-page .otp-boxes input { aspect-ratio: 1 / .9; min-height: 48px; font-size: 1.25rem; }
.otp-page .auth-field small, .otp-page .otp-expiry-note { font-size: .8rem; line-height: 1.35; }
.otp-page .auth-actions { margin-top: .1rem; }
.otp-page .auth-actions-stack .btn { padding-block: .65rem; }
.otp-page .resend-form { margin-top: .7rem; }

@media (max-height: 700px) {
  .otp-page .site-header { display: block; }
  .otp-page .site-header .nav { min-height: 52px; padding-block: 3px; }
  .otp-page .site-header .brand { height: 40px; }
  .otp-page .auth-main { min-height: calc(100vh - 94px); padding: .35rem 0; }
  .otp-page .site-footer { padding: .3rem 0; }
  .otp-page .otp-auth-card { padding-block: .85rem; }
  .otp-page .auth-monogram { display: none; }
  .otp-page .otp-auth-card h1 { margin-top: 0; }
  .otp-page .otp-auth-card .auth-intro { margin-bottom: .65rem; }
  .otp-page .otp-timer { margin-bottom: .65rem; padding-block: .5rem; }
  .otp-page .auth-alert { margin-bottom: .65rem; padding-block: .55rem; }
}

@media (max-width: 480px) {
  .otp-page .auth-main { padding: .6rem 0; }
  .otp-page .otp-auth-card { padding: 1.15rem; }
  .otp-page .otp-boxes { grid-template-columns: repeat(6, minmax(34px, 1fr)); gap: 5px; }
  .otp-page .otp-boxes input { min-height: 43px; }
}
@media (max-width: 560px) { .dob-grid { grid-template-columns: 1fr; gap: 1.1rem; } }