.otp-page{--otp-bg:#090a0b;--otp-card:#111214;--otp-line:#26282b;--otp-box:#17191c;--otp-box-line:#34373b;--otp-text:#f1f1ed;--otp-muted:#8d9195;--otp-green:#3ddc97;--otp-green-soft:#0f2a20;--otp-red:#ff7b7b;background:var(--otp-bg);min-height:100svh;color:var(--otp-text);padding:40px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));flex-direction:column;justify-content:center;align-items:center;gap:28px;font-family:Arial,Helvetica,sans-serif;display:flex;position:relative;overflow:hidden}.otp-glow{pointer-events:none;background:radial-gradient(at 50% 0,#ffffff12,#0000 60%);height:70%;position:absolute;inset:-30% -10% auto}.otp-brand{flex-direction:column;align-items:center;gap:10px;display:flex;position:relative}.otp-logo{letter-spacing:-.08em;align-items:center;gap:10px;font-size:34px;font-weight:900;display:inline-flex}.otp-logo span{letter-spacing:-.04em;border-left:1px solid #757575;padding-left:10px;font-size:16px}.otp-brand .mono{letter-spacing:.24em;color:var(--otp-muted);font:11px Courier New,monospace}.otp-card{background:linear-gradient(180deg,#141518,var(--otp-card));border:1px solid var(--otp-line);border-radius:22px;width:min(420px,100%);padding:30px 28px 26px;transition:border-color .6s;position:relative;box-shadow:0 30px 80px #0009,inset 0 1px #ffffff08}.otp-card.is-verified{border-color:#1f3d31}.otp-handle{background:#2e3135;border-radius:3px;width:34px;height:3px;margin:-12px auto 18px;display:block}.otp-card h1{text-align:center;letter-spacing:-.01em;font-size:21px;font-weight:600;transition:color .5s}.otp-card h1.is-green{color:var(--otp-green)}.otp-card>div>p,.otp-email>p:not(.otp-error){color:var(--otp-muted);text-align:center;margin-top:8px;font-size:13.5px;line-height:1.6}.otp-card strong{color:var(--otp-text);font-weight:600}.otp-email{flex-direction:column;gap:14px;display:flex}.otp-email>p{margin-bottom:6px}.otp-field{color:#c9cbcc;flex-direction:column;gap:8px;font-size:13px;display:flex}.otp-field input{background:var(--otp-box);border:1px solid var(--otp-box-line);color:var(--otp-text);border-radius:12px;outline:none;padding:14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.otp-field input:focus{border-color:#8a8f95;box-shadow:0 0 0 4px #ffffff10}.otp-field input.has-error{border-color:var(--otp-red);animation:.42s otp-shake;box-shadow:0 0 0 4px #ff7b7b1c}.otp-error{min-height:18px;color:var(--otp-red);text-align:center;opacity:0;font-size:13px;transition:opacity .25s,transform .25s;transform:translateY(-4px)}.otp-error.show{opacity:1;transform:none}.otp-button{color:#111;letter-spacing:.02em;cursor:pointer;background:#ededdf;border:0;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;padding:15px;font-size:14px;font-weight:600;transition:background .2s,transform .15s;display:flex}.otp-button:hover{background:#fff}.otp-button:active{transform:scale(.98)}.otp-button:disabled{opacity:.5;cursor:not-allowed}.otp-button.is-green{background:var(--otp-green);color:#062016;margin-top:18px;animation:.5s .2s both otp-rise}.otp-spinner{border:2px solid #0004;border-top-color:#111;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite otp-rot}.otp-stage{cursor:text;max-width:340px;height:250px;margin:16px auto 4px;position:relative}.otp-hidden-input{opacity:0;color:#0000;caret-color:#0000;z-index:2;background:0 0;border:0;font-size:16px;position:absolute;inset:0}.otp-hidden-input:disabled{pointer-events:none}.otp-ring{opacity:0;border:1px solid #ffffff1f;border-radius:50%;width:156px;height:156px;margin:-78px 0 0 -78px;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1);position:absolute;top:50%;left:50%;transform:scale(.6)}.otp-center{opacity:0;background:#d9d9d4;border-radius:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;transition:opacity .4s;position:absolute;top:50%;left:50%}.stage-orbit .otp-ring,.stage-spin .otp-ring,.stage-green .otp-ring{opacity:1;transform:scale(1)}.stage-orbit .otp-center,.stage-spin .otp-center,.stage-green .otp-center{opacity:1}.stage-green .otp-ring{border-color:#3ddc9733}.stage-collapse .otp-ring{opacity:0;transform:scale(.3)}.otp-orbit{position:absolute;inset:0}.otp-orbit.spinning{animation:1.05s cubic-bezier(.65,0,.35,1) otp-spin}.otp-boxes{position:absolute;inset:0}.otp-boxes.shake{animation:.42s otp-shake}.otp-box{background:var(--otp-box);border:1px solid var(--otp-box-line);width:54px;height:58px;color:var(--otp-text);border-radius:14px;place-items:center;font-size:22px;font-weight:600;transition:transform .62s cubic-bezier(.22,1.1,.36,1),opacity .4s,border-color .3s,background .4s,color .4s,box-shadow .3s;display:grid;position:absolute;top:50%;left:50%;box-shadow:inset 0 1px #ffffff0a,0 8px 20px #0006}.otp-box.is-active{border-color:#c9cbcc;box-shadow:0 0 0 4px #ffffff14,inset 0 1px #ffffff12,0 8px 20px #0006}.otp-box.is-filled{border-color:#4a4e53}.otp-box b{animation:.28s cubic-bezier(.3,1.6,.5,1) otp-pop;display:block}.otp-box.is-error{border-color:var(--otp-red);color:var(--otp-red)}.otp-box.box-green{border-color:var(--otp-green);background:var(--otp-green-soft);color:#7bf0bd;box-shadow:0 0 18px #3ddc9740,inset 0 1px #ffffff10}.otp-caret{background:#e8e8e2;border-radius:2px;width:2px;height:24px;animation:1s step-end infinite otp-blink;display:block}.stage-collapse .otp-box{transition:transform .46s cubic-bezier(.55,0,.8,.4),opacity .46s}.otp-square{border:1.5px solid var(--otp-green);background:var(--otp-green-soft);color:#8ff5c8;opacity:0;border-radius:16px;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;transition:opacity .35s,transform .5s cubic-bezier(.2,1.4,.4,1);display:grid;position:absolute;top:50%;left:50%;transform:scale(.4)rotate(-90deg);box-shadow:0 0 28px #3ddc9755,inset 0 0 14px #3ddc9722}.otp-square svg{opacity:0;transition:opacity .3s .1s,transform .4s cubic-bezier(.2,1.6,.4,1) .1s;transform:scale(.4)}.stage-square .otp-square,.stage-success .otp-square,.stage-success .otp-square svg{opacity:1;transform:none}.stage-success .otp-square path{stroke-dasharray:24;stroke-dashoffset:24px;animation:.45s .15s forwards otp-draw}.otp-halo{opacity:0;pointer-events:none;border:1px solid #3ddc9726;border-radius:26px;position:absolute;top:50%;left:50%}.otp-halo.h1{width:112px;height:112px;margin:-56px 0 0 -56px}.otp-halo.h2{border-color:#3ddc9714;border-radius:38px;width:168px;height:168px;margin:-84px 0 0 -84px}.stage-success .otp-halo{animation:.9s cubic-bezier(.2,.9,.2,1) forwards otp-halo}.stage-success .otp-halo.h2{animation-delay:.12s}.otp-particles{position:absolute;top:50%;left:50%}.otp-particles i{opacity:0;width:3px;height:3px;transform:rotate(var(--a)) translateY(0);background:#5eeaa8;border-radius:50%;margin:-1.5px;position:absolute}.stage-success .otp-particles i{animation:otp-burst 1.4s var(--d) cubic-bezier(.15,.8,.3,1) forwards}.otp-foot{color:var(--otp-muted);flex-direction:column;align-items:center;gap:10px;margin-top:6px;font-size:13px;display:flex}.otp-muted{color:#c3c6c8}.otp-link{color:#e5e5df;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:2px;font-size:13px;text-decoration:underline}.otp-link:disabled{opacity:.4;cursor:default}.otp-site{color:var(--otp-muted);font-size:13px;position:relative}.otp-site:hover{color:var(--otp-text)}.otp-page :focus-visible{outline-offset:3px;outline:2px solid #ddd}@keyframes otp-pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes otp-blink{50%{opacity:0}}@keyframes otp-spin{to{transform:rotate(360deg)}}@keyframes otp-shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}@keyframes otp-rot{to{transform:rotate(360deg)}}@keyframes otp-draw{to{stroke-dashoffset:0}}@keyframes otp-halo{0%{opacity:0;transform:scale(.6)}60%{opacity:1}to{opacity:1;transform:scale(1)}}@keyframes otp-burst{0%{opacity:0;transform:rotate(var(--a)) translateY(-30px)}25%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateY(-112px)}}@keyframes otp-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (max-width:420px){.otp-card{padding:26px 18px 22px}.otp-box{width:48px;height:54px}}@media (prefers-reduced-motion:reduce){.otp-page *{transition-duration:.01ms!important;animation-duration:.01ms!important}}