.otp-input-container{display:flex;flex-direction:column;gap:12px;width:100%}.otp-input-wrapper{display:flex;gap:12px;justify-content:center;align-items:center;width:100%}.otp-input-box{width:52px;height:52px;font-size:24px;font-weight:600;text-align:center;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#1f2937;font-family:Courier New,monospace;transition:all .2s ease;outline:none;cursor:text}.otp-input-box:hover:not(:disabled){border-color:#d1d5db;box-shadow:0 2px 4px rgba(0,0,0,.05)}.otp-input-box:focus{border-color:#047857;box-shadow:0 0 0 3px rgba(4,120,87,.1);background:#fff}.otp-input-box:disabled{background:#f3f4f6;cursor:not-allowed;color:#9ca3af}.otp-input-box.otp-input-filled{border-color:#047857;background:#ecfdf5}.otp-input-box.otp-input-error{border-color:#dc2626;background:#fee2e2}.otp-input-box.otp-input-error:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}.otp-input-error-message{font-size:13px;color:#991b1b;background:#fee2e2;border:1px solid #fecaca;border-radius:6px;padding:12px;margin:0;text-align:center;line-height:1.5}@media (max-width:600px){.otp-input-wrapper{gap:8px}.otp-input-box{width:44px;height:44px;font-size:20px}}@media (max-width:480px){.otp-input-wrapper{gap:6px}.otp-input-box{width:40px;height:40px;font-size:18px}}