.auth-code{width:100%;max-width:360px;margin-inline:auto;position:relative}.auth-code-input{opacity:0;color:#0000;caret-color:#0000;letter-spacing:2.2em;z-index:1;cursor:text;width:100%;height:100%;font-size:16px;position:absolute;inset:0}.auth-code-cells{grid-template-columns:repeat(6,1fr);gap:clamp(6px,2vw,10px);display:grid}.auth-code-cell{aspect-ratio:5/6;border:1.5px solid var(--a-edge,var(--ux-line-strong,#dccfdb));background:var(--a-well,var(--ux-surface,#fff));min-height:52px;color:var(--a-ink,var(--ux-ink,#2d1a63));font-variant-numeric:tabular-nums;border-radius:14px;place-items:center;font-size:clamp(1.35rem,5.4vw,1.7rem);font-weight:700;transition:border-color .14s,box-shadow .14s,background .14s;display:grid}.auth-code-cell.is-filled{background:var(--a-fill,var(--ux-surface-2,#f6eef4));border-color:var(--a-edge-violet,var(--ux-line-strong,#cdb8e6))}.auth-code-input:focus+.auth-code-cells .auth-code-cell.is-active{border-color:var(--a-magenta,#d21f7c);box-shadow:0 0 0 4px var(--a-ring,#d21f7c2e)}.auth-code.is-invalid .auth-code-cell{border-color:var(--a-bad,var(--ux-danger-solid,#b4233a));background:var(--a-tint-rose-2,var(--ux-danger-soft,#fbe4e7))}.auth-code.is-disabled .auth-code-cell{opacity:.55}@media (prefers-reduced-motion:no-preference){.auth-code.is-invalid .auth-code-cells{animation:.32s auth-code-shake}}@keyframes auth-code-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.auth-resend{text-align:center;color:var(--a-muted,var(--ux-muted,#6f6582));margin-top:14px;font-size:.8125rem}.auth-resend strong{color:var(--a-ink-2,var(--ux-ink-2,#3b3150));font-variant-numeric:tabular-nums}.auth-resend .auth-link{color:var(--a-lilac,#a3267f);font-weight:600}.auth-resend .auth-link:hover{color:var(--a-rose,#d21f7c)}