:root{--otp-accent:#10b981;--otp-accent-glow:rgba(16,185,129,0.45);--otp-success:#22d87a;--otp-success-glow:rgba(34,216,122,0.4);--otp-danger:#ef4444;--otp-danger-glow:rgba(239,68,68,0.4);--otp-orange:#f59e0b}.otp-boxes{display:flex;justify-content:center;gap:6px;margin:16px 0}.otp-boxes input{width:40px;height:48px;text-align:center;font-size:20px;font-weight:600;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.15);border-radius:10px;color:#f8fafc;outline:none;caret-color:var(--otp-accent);transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease}@media (min-width:400px){.otp-boxes{gap:8px}.otp-boxes input{width:44px;height:52px;font-size:22px;border-radius:12px}}@media (min-width:640px){.otp-boxes{gap:10px}.otp-boxes input{width:50px;height:60px;font-size:24px;border-radius:14px}}.otp-boxes input:focus{border-color:var(--otp-accent);background:rgba(16,185,129,.1);box-shadow:0 0 0 3px var(--otp-accent-glow);transform:translateY(-2px) scale(1.04)}.otp-boxes input.checking{border-color:var(--otp-orange);animation:pulseGlow .45s ease-in-out infinite}.otp-boxes input.wrong{border-color:var(--otp-danger);background:rgba(239,68,68,.1);box-shadow:0 0 0 3px var(--otp-danger-glow)}.otp-boxes input.correct{border-color:var(--otp-success);background:rgba(34,216,122,.1);box-shadow:0 0 0 3px var(--otp-success-glow);transition:all .3s ease}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 0 rgba(245,158,11,.4)}50%{box-shadow:0 0 12px 4px rgba(245,158,11,.55)}}.otp-shake{animation:otpShake .45s cubic-bezier(.36,.07,.19,.97)}@keyframes otpShake{10%,90%{transform:translateX(-4px)}20%,80%{transform:translateX(6px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}.attempt-dots{display:flex;justify-content:center;gap:7px;margin-top:16px;margin-bottom:8px}.attempt-dot{width:8px;height:8px;border-radius:50%;background:var(--otp-danger);opacity:.85;animation:dotPop .3s cubic-bezier(.34,1.56,.64,1) both}@keyframes dotPop{0%{transform:scale(0)}to{transform:scale(1)}}.lock-icon{font-size:48px;margin:16px auto 8px;display:block;text-align:center;animation:lockBounce .5s cubic-bezier(.34,1.56,.64,1)}@keyframes lockBounce{0%{transform:scale(.5) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}.lock-timer{font-size:22px;font-weight:700;color:var(--otp-danger);margin:12px 0 4px;text-align:center}.check-circle{width:90px;height:90px;margin:28px auto}.check-circle svg{width:100%;height:100%;overflow:visible}.check-circle .circle-ring{fill:none;stroke:var(--otp-success);stroke-width:3;stroke-dasharray:240;stroke-dashoffset:240;animation:drawCircle .6s ease .1s forwards;border-radius:50%}.check-circle .check-mark{fill:none;stroke:var(--otp-success);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:drawCheck .4s ease .7s forwards}@keyframes drawCircle{to{stroke-dashoffset:0}}@keyframes drawCheck{to{stroke-dashoffset:0}}