:root{--otp-accent: #0ea5e9;--otp-error: #ef4444;--otp-border: #d1d5db;--otp-bg: #fff;--otp-text: #111827;--otp-width: 3rem;--otp-height: 3rem;--otp-radius: .5rem;--otp-font: 1rem;--otp-gap: .5rem;--otp-mobile-width: 2.5rem;--otp-mobile-height: 2.5rem;--otp-mobile-font: .9rem;--otp-focus-ring: 2px;--otp-shake-distance: 2px;--otp-shake-duration: .25s}.otp-container{display:flex;flex-direction:column;align-items:center;gap:.75rem}.otp-inputs{display:flex;gap:var(--otp-gap);justify-content:center}.otp-digit{width:var(--otp-width);height:var(--otp-height);border:1px solid var(--otp-border);border-radius:var(--otp-radius);text-align:center;font-size:var(--otp-font);font-weight:500;background:var(--otp-bg);color:var(--otp-text);outline:none;transition:border-color .2s,box-shadow .2s}.otp-digit:focus{border-color:var(--otp-accent);box-shadow:0 0 0 var(--otp-focus-ring) color-mix(in srgb,var(--otp-accent) 30%,transparent)}.otp-digit.filled{border-color:var(--otp-accent)}.otp-digit:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.otp-inputs.has-error .otp-digit{border-color:var(--otp-error)}.otp-inputs.has-error .otp-digit:focus{box-shadow:0 0 0 var(--otp-focus-ring) color-mix(in srgb,var(--otp-error) 30%,transparent)}@media (max-width: 480px){.otp-digit{width:var(--otp-mobile-width);height:var(--otp-mobile-height);font-size:var(--otp-mobile-font)}}.otp-inputs.has-error{animation:shake var(--otp-shake-duration) ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(calc(-1 * var(--otp-shake-distance)))}75%{transform:translate(var(--otp-shake-distance))}}*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{margin:0}a{color:var(--otp-accent);text-decoration:none}.page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f3f4f6;padding:24px}.page__card{width:min(480px,100%);background:#fff;border-radius:12px;padding:24px;box-shadow:0 12px 32px #0f172a14;display:flex;flex-direction:column;gap:16px}.page__title{margin:0 0 10px;font-size:24px;font-weight:600;text-align:center;color:#111827;transition:.15s ease}.page__title-link:hover .page__title{color:var(--otp-accent)}.page__actions{display:flex;gap:8px;flex-wrap:wrap}.page__button{flex:1 1 140px;padding:10px 14px;border:none;border-radius:8px;background:#0ea5e9;color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s ease}.page__button:hover:not(:disabled){background:color-mix(in srgb,var(--otp-accent) 90%,black)}.page__button:disabled{background:#94a3b8;cursor:not-allowed;opacity:.6}.page__completed-message{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;max-width:400px;width:calc(100% - 40px);padding:12px 16px;background:#dcfce7;border-radius:8px;color:#166534;font-weight:500;text-align:center;box-shadow:0 4px 12px #16653422}.page__error-message{color:var(--otp-error);text-align:center;font-size:14px}.slide-enter-active,.slide-leave-active{transition:all .3s ease}.slide-enter-from,.slide-leave-to{opacity:0;transform:translate(-50%) translateY(-20px)}