.otp{--otp-ink: #0f172a;--otp-border: #e2e8f0;--otp-bg: #ffffff;--otp-muted: #94a3b8;--otp-focus: #2563eb;--otp-filled: #eff6ff;--otp-error: #dc2626;--otp-error-bg: #fef2f2;--otp-error-border: #fecaca;--otp-radius: 14px;--otp-size: 52px;--otp-gap: .5rem;--otp-font: "Plus Jakarta Sans", "Segoe UI", ui-sans-serif, sans-serif;position:relative;box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;max-width:100%;color:var(--otp-ink);font-family:var(--otp-font)}.otp *,.otp *:before,.otp *:after{box-sizing:border-box}.otp__cells{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--otp-gap);max-width:100%}.otp__cell{width:var(--otp-size);height:var(--otp-size);min-width:0;flex:0 0 var(--otp-size);padding:0;border:1.5px solid var(--otp-border);border-radius:var(--otp-radius);background:var(--otp-bg);color:inherit;font:inherit;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;text-align:center;caret-color:var(--otp-focus);box-shadow:0 1px 2px #0f172a0a;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease}.otp__cell:nth-child(3){margin-right:.45rem}.otp__cell::placeholder{color:var(--otp-muted);opacity:.7;font-weight:700}.otp__cell.is-filled{background:var(--otp-filled);border-color:#bfdbfe}.otp__cell:focus{outline:none;border-color:var(--otp-focus);background:#fff;box-shadow:0 0 0 3px #2563eb33}.otp__cell:disabled{opacity:.5;cursor:not-allowed;background:#f8fafc}.otp.is-complete .otp__cell{border-color:#93c5fd;background:var(--otp-filled)}.otp.is-error .otp__cell{border-color:var(--otp-error-border);background:var(--otp-error-bg);animation:otp-shake .35s ease}.otp.is-error .otp__cell:focus{border-color:var(--otp-error);box-shadow:0 0 0 3px #dc26262e}.otp__message{margin:0;max-width:100%;color:var(--otp-error);font-size:.85rem;font-weight:650;line-height:1.35;text-align:center}.otp__message[hidden]{display:none!important}.otp__loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:calc(var(--otp-radius) + 4px);background:#f8fafcb8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.otp__loading[hidden]{display:none!important}.otp__spinner{width:1.5rem;height:1.5rem;border:2.5px solid #cbd5e1;border-top-color:var(--otp-focus);border-radius:999px;animation:otp-spin .7s linear infinite}@keyframes otp-spin{to{transform:rotate(360deg)}}@keyframes otp-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@media(max-width:420px){.otp{--otp-size: 44px;--otp-gap: .35rem}.otp__cell{font-size:1.15rem;border-radius:12px}.otp__cell:nth-child(3){margin-right:.3rem}}@media(prefers-reduced-motion:reduce){.otp__cell,.otp.is-error .otp__cell{transition:none;animation:none}.otp__spinner{animation:none;border-top-color:#64748b}}