/* Shared email / authenticator form, matching the checkout code card. */
.auth-card { --auth-muted: #9aa3c7; --auth-text: #e8eaf6; }
.portal .panel.auth-card { width: min(100%,480px); max-width: 480px; padding: 28px; margin: 32px auto 80px; border: 1px solid #2a304a; border-radius: 24px; background: #151a2e; box-shadow: 0 12px 32px #00000017; }
.portal .auth-card .auth-card-heading { display: grid; gap: 12px; margin-bottom: 24px; }
.portal .auth-card .auth-card-heading h2 { font-size: 30px; line-height: 1.25; font-weight: 500; margin: 0; }
.auth-card-heading > p, .auth-receiver { color: var(--auth-muted); font-size: 14px; line-height: 1.55; }
.auth-card .portal-form { display: grid; gap: 24px; margin: 0; }
.auth-card .auth-field { display: grid; gap: 12px; min-width: 0; color: var(--auth-text); font-size: 14px; }
.portal .auth-card .auth-field > input { height: 52px; padding: 15px 16px; border-color: #707b9f; background: #101424; font-size: 14px; }
.auth-hint { color: var(--auth-muted); font-size: 12px; line-height: 1.55; }
.auth-receiver { display: grid; gap: 12px; }
.auth-receiver strong { color: var(--auth-text); font-weight: 400; overflow-wrap: anywhere; }
.portal .auth-card .auth-action { width: fit-content; min-height: 36px; padding: 0; border: 0; background: none; color: #b9acff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.portal .auth-card .auth-action:disabled { color: var(--auth-muted); cursor: not-allowed; }
.portal .auth-card .legal-check { margin: 0; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.55; }
.portal .auth-card .legal-check a { color: #b9acff; }
.portal .auth-card .btn { width: 100%; min-height: 52px; margin: 0; font-size: 14px; }
.portal .auth-card .btn:disabled { opacity: 1; background: #39315f; color: #a69bc4; box-shadow: none; cursor: not-allowed; }
.auth-resend { display: grid; gap: 8px; text-align: center; }
.portal .auth-card .auth-resend .auth-action { text-align: center; width: 100%; }
.auth-card .status-line { margin: 20px 0 0; font-size: 14px; line-height: 1.55; }
.auth-card [hidden] { display: none !important; }
.otp-field { position: relative; min-width: 0; }
.otp-field > input, .portal .auth-card .otp-field > input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 60px; min-height: 60px; padding: 0; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; background: transparent; border: 0; outline: none; font-size: 16px; box-shadow: none; letter-spacing: normal; }
.otp-boxes { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; pointer-events: none; }
.otp-boxes > span { min-width: 0; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #707b9f; background: #101424; color: #e8eaf6; font-size: 24px; font-weight: 500; }
.otp-field:focus-within .otp-boxes > span.is-current { outline: 2px solid #7560ea; outline-offset: -1px; }
.otp-field > input:focus-visible, .portal .auth-card .otp-field > input:focus-visible { outline: none; box-shadow: none; }
.otp-field:focus-within .otp-boxes > span.is-current:empty::after { content: ''; height: 24px; width: 2px; background: #b9acff; }
.otp-field:has(input[aria-invalid=true]) .otp-boxes > span { border-color: #f4a4b7; }
@media (max-width: 600px) {
  .portal .panel.auth-card { padding: 20px; margin: 24px auto 48px; }
  .portal .auth-card .auth-card-heading h2 { font-size: 26px; }
  .otp-boxes { gap: 6px; }
  .otp-boxes > span, .otp-field > input, .portal .auth-card .otp-field > input { height: 52px; min-height: 52px; }
}