.otp-xr{--otp-bg:color-mix(in srgb,var(--bg-card,#111827) 88%,transparent);--otp-border:color-mix(in srgb,var(--color-brand-500,#0a4f9c) 28%,#334155);--otp-active:var(--color-brand-500,#0a4f9c);--otp-glow:color-mix(in srgb,var(--color-brand-500,#0a4f9c) 45%,transparent);--otp-success:#22c55e;--otp-text:var(--fg,#f8fafc);--otp-muted:var(--muted,#94a3b8);position:relative;display:flex;justify-content:center;gap:clamp(.45rem,2.2vw,.75rem);direction:ltr;margin:.5rem 0 1rem;perspective:800px}.otp-xr--error{--otp-border:#f08820;--otp-active:#f08820;--otp-glow:rgba(240,136,32,0.4);animation:otp-xr-shake .42s cubic-bezier(.36,.07,.19,.97)}.otp-xr--success{--otp-border:var(--otp-success);--otp-active:var(--otp-success);--otp-glow:rgba(34,197,94,0.4)}.otp-xr__burst{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle,rgba(34,197,94,.55),transparent 70%);animation:otp-xr-burst .7s ease-out both;pointer-events:none;z-index:0}.otp-xr__slot{position:relative;z-index:1;width:clamp(2.6rem,11vw,3.35rem);height:clamp(3.1rem,13vw,3.9rem);border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1.5px solid var(--otp-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden;transform-style:preserve-3d;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}:root:not([data-theme=dark]) .otp-xr__slot,[data-theme=light] .otp-xr__slot{background:linear-gradient(160deg,#fff,#f4f7fb);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(8,56,112,.08)}.otp-xr__slot--active{border-color:var(--otp-active);box-shadow:0 0 0 3px var(--otp-glow),0 12px 28px rgba(8,56,112,.22)}.otp-xr__slot--filled{border-color:color-mix(in srgb,var(--otp-active) 55%,var(--otp-border))}.otp-xr__slot--typed{animation:otp-xr-typed .32s cubic-bezier(.16,1,.3,1)}.otp-xr__slot--success{border-color:var(--otp-success)!important;background:linear-gradient(160deg,rgba(34,197,94,.28),rgba(34,197,94,.08))!important;box-shadow:0 0 0 3px rgba(34,197,94,.28),0 14px 30px rgba(34,197,94,.25)!important}.otp-xr__shine{inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 72%);transform:translateX(-120%);animation:otp-xr-sheen .62s ease-out both;z-index:3}.otp-xr__ring,.otp-xr__shine{position:absolute;pointer-events:none}.otp-xr__ring{inset:-1px;border-radius:15px;background:linear-gradient(120deg,transparent,var(--otp-glow),transparent);opacity:.7;animation:otp-xr-spin 2.4s linear infinite;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:1.5px}.otp-xr__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;caret-color:transparent;border:0;background:transparent;z-index:2;cursor:text}.otp-xr__digit{position:relative;z-index:1;font-size:clamp(1.25rem,4.5vw,1.65rem);font-weight:800;letter-spacing:0;color:var(--otp-text);line-height:1;pointer-events:none;font-variant-numeric:tabular-nums;transform-style:preserve-3d}.otp-xr--success .otp-xr__digit{color:#ecfdf5;text-shadow:0 0 12px rgba(34,197,94,.55)}:root:not([data-theme=dark]) .otp-xr__digit,[data-theme=light] .otp-xr__digit{color:#0a1628}:root:not([data-theme=dark]) .otp-xr--success .otp-xr__digit,[data-theme=light] .otp-xr--success .otp-xr__digit{color:#166534;text-shadow:none}.otp-xr__caret{position:relative;z-index:1;width:2px;height:1.35rem;border-radius:2px;background:var(--otp-active);pointer-events:none}@keyframes otp-xr-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}@keyframes otp-xr-spin{to{filter:hue-rotate(40deg);opacity:.95}}@keyframes otp-xr-typed{0%{transform:scale(.86)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes otp-xr-sheen{0%{transform:translateX(-130%)}to{transform:translateX(130%)}}@keyframes otp-xr-burst{0%{width:12px;height:12px;opacity:.9}to{width:280px;height:120px;opacity:0}}@media (prefers-reduced-motion:reduce){.otp-xr--error,.otp-xr__burst,.otp-xr__caret,.otp-xr__ring,.otp-xr__shine,.otp-xr__slot--typed{animation:none!important}}