.otp-page{--ok:var(--good);--ok-rgb:13, 148, 136;--accent-rgb:67, 24, 255;--bad-rgb:225, 29, 46;min-height:100dvh;color:var(--ink);background:radial-gradient(60% 45% at 50% 0%, rgba(var(--accent-rgb), .1), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(var(--ok-rgb), .07), transparent 70%), var(--bg);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:48px 20px;display:flex;position:relative;overflow:hidden}.otp-eyebrow{letter-spacing:.02em;color:var(--ink-muted);text-align:center;font-size:12px}.otp-brand{text-align:center;background:linear-gradient(135deg, var(--ink) 35%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:6px 0 22px;font-size:clamp(28px,6vw,38px);font-weight:800;line-height:1.25}.otp-card{border:1px solid var(--border-soft);background:var(--surface);border-radius:28px;width:100%;max-width:400px;padding:26px 22px 20px;position:relative;box-shadow:inset 0 1px #ffffffe6,0 34px 70px -34px #1b255952,0 8px 20px -12px #1b25591f}.otp-handle{background:var(--border);border-radius:4px;width:34px;height:4px;position:absolute;top:9px;left:50%;transform:translate(-50%)}.otp-head{text-align:center;min-height:62px;position:relative}.otp-head-in,.otp-head-ok{transition:opacity .5s,filter .5s,transform .5s}.otp-title{color:var(--ink);font-size:20px;font-weight:700}.otp-sub{color:var(--ink-muted);margin-top:8px;font-size:13px;line-height:1.7}.otp-head-ok{opacity:0;filter:blur(6px);pointer-events:none;position:absolute;inset:0;transform:translateY(6px)}.otp-head-ok .otp-title{color:var(--ok)}.otp-card[data-state=ok] .otp-head-in{opacity:0;filter:blur(6px);transform:translateY(-6px)}.otp-card[data-state=ok] .otp-head-ok{opacity:1;filter:none;transform:none}.otp-stage{place-items:center;height:176px;display:grid;position:relative}.otp-row{direction:ltr;grid-template-columns:repeat(4,1fr) 10px repeat(4,1fr);gap:6px;width:100%;display:grid}.otp-gap{display:block}.otp-slot{aspect-ratio:1/1.12;cursor:text;display:block;position:relative}.otp-face{border:1px solid var(--border);background:linear-gradient(#fff 0%,#f6f8fd 100%);border-radius:12px;transition:border-color .2s,box-shadow .25s,background .25s,opacity .3s;position:absolute;inset:0;box-shadow:0 2px 6px -3px #1b255924,inset 0 1px #fff}.otp-slot input{text-align:center;width:100%;height:100%;color:var(--ink);caret-color:var(--accent);direction:ltr;background:0 0;border:0;outline:0;padding:0;font-size:22px;font-weight:600;position:absolute;inset:0}.otp-slot:focus-within .otp-face{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb), .12), 0 8px 22px -8px rgba(var(--accent-rgb), .35);background:#fff}@property --otp-a{syntax:"<angle>";inherits:false;initial-value:0deg}.otp-face:before{content:"";border-radius:inherit;background:conic-gradient(from var(--otp-a), transparent 0deg 240deg, var(--accent) 360deg);-webkit-mask-composite:xor;opacity:0;pointer-events:none;padding:1.5px;position:absolute;inset:-1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.otp-slot[data-filled=true] .otp-face:before{animation:.75s ease-out otp-trace}@keyframes otp-trace{0%{--otp-a:0deg;opacity:1}to{--otp-a:360deg;opacity:0}}.otp-slot[data-filled=true] input{animation:.2s ease-out otp-pop}@keyframes otp-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}.otp-orbit{opacity:0;pointer-events:none;place-items:center;transition:opacity .45s,transform .6s cubic-bezier(.2,.9,.3,1);display:grid;position:absolute;inset:0;transform:scale(.7)}.otp-orbit svg{width:120px;height:120px;overflow:visible}.otp-orbit circle{fill:none;stroke:rgba(var(--accent-rgb), .38);stroke-width:1.5px;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke}.otp-hub{background:var(--accent);width:5px;height:5px;box-shadow:0 0 10px rgba(var(--accent-rgb), .55);border-radius:50%;position:absolute}.otp-card[data-state=verifying] .otp-orbit{opacity:1;transform:none}.otp-card[data-state=ok] .otp-orbit{opacity:0;transition-delay:.35s;transform:scale(.3)}.otp-card[data-state=verifying] .otp-face,.otp-card[data-state=ok] .otp-face{border-color:rgba(var(--accent-rgb), .5);background:linear-gradient(180deg, #f3f0ff 0%, var(--accent-soft) 100%);box-shadow:0 6px 16px -8px rgba(var(--accent-rgb), .4)}.otp-card[data-state=ok] .otp-face{border-color:var(--ok);background:var(--good-soft);box-shadow:0 6px 18px -6px rgba(var(--ok-rgb), .45)}.otp-card[data-state=ok] .otp-slot input,.otp-card[data-state=verifying] .otp-slot input{pointer-events:none}.otp-card[data-state=bad] .otp-face{border-color:var(--bad);box-shadow:0 0 0 3px rgba(var(--bad-rgb), .12)}.otp-card[data-state=bad] .otp-row{animation:.45s ease-in-out otp-shake}@keyframes otp-shake{20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}.otp-success{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.otp-mark{opacity:0;width:58px;height:58px;position:relative;transform:scale(.4)}.otp-mark>span{border:2px solid var(--ok);border-radius:18px;position:absolute;inset:0}.otp-mark .m-core{background:rgba(var(--ok-rgb), .14);box-shadow:0 0 22px rgba(var(--ok-rgb), .4), inset 0 0 12px rgba(var(--ok-rgb), .22);border-radius:12px;inset:12px}.otp-mark .m-r1{opacity:.5;border-radius:24px;inset:-8px}.otp-mark .m-r2{opacity:.22;border-radius:30px;inset:-17px}.otp-card[data-state=ok] .otp-mark{animation:.7s cubic-bezier(.2,1.2,.3,1) .55s forwards otp-mark-in}@keyframes otp-mark-in{to{opacity:1;transform:none}}.otp-dot{background:var(--ok);opacity:0;pointer-events:none;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}.otp-foot{min-height:52px;position:relative}.otp-banner,.otp-status{transition:opacity .35s,transform .35s}.otp-banner{border:1px solid var(--border-soft);background:var(--bg);border-radius:16px;align-items:center;gap:11px;padding:9px 10px;display:flex}.otp-banner-ico{color:#fff;background:linear-gradient(135deg, #7551ff, var(--accent));width:34px;height:34px;box-shadow:0 8px 16px -8px rgba(var(--accent-rgb), .7);border-radius:10px;flex:none;place-items:center;display:grid}.otp-banner-text{min-width:0;color:var(--ink);flex:1;font-size:12.5px;line-height:1.5}.otp-banner-text small{color:var(--ink-faint);font-size:10.5px;display:block}.otp-banner-btn{color:#fff;background:var(--accent);box-shadow:0 10px 18px -10px rgba(var(--accent-rgb), .8);border-radius:999px;flex:none;padding:7px 14px;font-size:12.5px;font-weight:600;text-decoration:none}.otp-banner-btn:hover{background:var(--accent-ink)}.otp-status{color:var(--ink-muted);opacity:0;pointer-events:none;place-items:center;font-size:12.5px;display:grid;position:absolute;inset:0;transform:translateY(6px)}.otp-card[data-state=verifying] .otp-banner,.otp-card[data-state=ok] .otp-banner{opacity:0;pointer-events:none;transform:translateY(6px)}.otp-card[data-state=verifying] .otp-status,.otp-card[data-state=ok] .otp-status,.otp-card[data-state=bad] .otp-status[data-when=bad]{opacity:1;transform:none}.otp-card[data-state=bad] .otp-banner{opacity:0;pointer-events:none}.otp-card[data-state=bad] .otp-status[data-when=wait],.otp-card[data-state=ok] .otp-status[data-when=wait]{opacity:0}.otp-status[data-when=bad]{color:var(--bad)}.otp-hint{text-align:center;max-width:400px;color:var(--ink-muted);margin-top:18px;font-size:12.5px;line-height:1.8}.otp-hint b{color:var(--ink);font-weight:600}.otp-alt{color:var(--ink-muted);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;margin-top:8px;font-size:12px;text-decoration:underline}.otp-alt:hover{color:var(--accent)}@media (prefers-reduced-motion:reduce){.otp-face:before,.otp-slot input,.otp-card[data-state=bad] .otp-row{animation:none!important}}