@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--bg:#070A12;--t:#F1F4FB;--mu:#8590AB;--v:#F6B93B;--v2:#FFD37A;--dk:#1a1200;--c:#34D8A5;--p:#8B7BFF;--g:#34D8A5;--e:#FF6B7A;--am:#F6B93B;--ez:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
html{height:100%}
body{background:var(--bg);color:var(--t);font:500 15px/1.5 'Sora',system-ui,sans-serif;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));overflow-x:hidden;min-height:100dvh}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bl{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.38;animation:drift 18s ease-in-out infinite}
.b1{background:var(--v);top:-20vmax;left:-15vmax}.b2{background:var(--c);bottom:-22vmax;right:-15vmax;animation-delay:-6s}.b3{background:var(--p);top:30%;left:35%;width:38vmax;height:38vmax;opacity:.2;animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vmax,6vmax) scale(1.12)}66%{transform:translate(-6vmax,9vmax) scale(.92)}}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(ellipse at center,#000 20%,transparent 72%);mask:radial-gradient(ellipse at center,#000 20%,transparent 72%);animation:gs 6s linear infinite}
@keyframes gs{to{background-position:44px 44px}}
.pt{position:absolute;bottom:-10px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--c);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.8}100%{transform:translateY(-105vh);opacity:0}}
.card{position:relative;z-index:1;width:100%;max-width:430px;padding:34px 28px 26px;border-radius:28px;background:rgba(14,14,34,.62);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:cin .9s var(--ez) both;--mx:50%;--my:0%}
@keyframes cin{from{opacity:0;transform:perspective(900px) translateY(50px) rotateX(14deg);filter:blur(12px)}}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),var(--v),var(--c),var(--p),var(--v));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 6s linear infinite;pointer-events:none;transition:opacity .3s}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(246,185,59,.18),transparent 60%);pointer-events:none}
.card.ok::before{background:conic-gradient(from var(--ang),var(--g),#a8ffe0,var(--g))}
.card.bad::before{background:conic-gradient(from var(--ang),var(--e),#ff9aae,var(--e));animation-duration:1s}
@keyframes spin{to{--ang:360deg}}
.view{display:none;position:relative;z-index:1}.view.on{display:block}
.view.out{animation:vout .35s ease-in forwards}
@keyframes vout{to{opacity:0;transform:translateX(-50px);filter:blur(8px)}}
.view.in .r{animation:up .65s var(--ez) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
.logo{width:64px;height:64px;margin:0 auto 18px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(140deg,var(--v2),var(--v));color:var(--dk);position:relative;box-shadow:0 12px 30px -8px var(--v)}
.logo>svg{width:30px;height:30px;animation:bob 3s ease-in-out infinite}
.logo::after{content:'';position:absolute;inset:-6px;border-radius:26px;border:2px solid var(--v);animation:ring 2.4s ease-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}@keyframes ring{from{opacity:.8;transform:scale(.95)}to{opacity:0;transform:scale(1.35)}}
h1{font-size:27px;font-weight:800;text-align:center;letter-spacing:-.02em}
.gt{background:linear-gradient(90deg,var(--v),var(--v2),var(--c),var(--v));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gp 5s linear infinite}
@keyframes gp{to{background-position:300% 0}}
.sub{text-align:center;color:var(--mu);margin:6px 0 22px;font-size:14px}
.sub b{color:var(--t);font-weight:600}
.f{margin-bottom:14px;position:relative}
.box{position:relative;height:58px;border-radius:16px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);transition:border-color .25s,box-shadow .25s,background .25s}
.box:focus-within{border-color:var(--v);box-shadow:0 0 0 4px rgba(246,185,59,.2),0 8px 24px -8px var(--v)}
.box input{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;outline:0;color:var(--t);font:500 16px 'Sora',sans-serif;padding:20px 78px 0 46px}
.ic{position:absolute;left:15px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--mu);transition:transform .3s cubic-bezier(.3,1.6,.5,1),color .25s}
.ic svg,.eye svg,.okb svg{width:100%;height:100%}.ic .lg{width:100%}
.box:focus-within .ic{transform:scale(1.25) rotate(-10deg);color:var(--v)}
.box label{position:absolute;left:46px;top:50%;transform:translateY(-50%);color:var(--mu);pointer-events:none;transition:all .22s var(--ez)}
.box input:focus~label,.box input:not(:placeholder-shown)~label{top:17px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--v)}
.eye{position:absolute;right:10px;top:50%;margin-top:-17px;width:34px;height:34px;padding:8px;border:0;background:none;color:var(--mu);cursor:pointer;border-radius:10px;transition:transform .4s}
.eye.fl{transform:rotateY(180deg)}.eye:hover{color:var(--t)}
.okb{position:absolute;right:12px;top:50%;margin-top:-11px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--g);color:#06241a;opacity:0;transform:scale(0) rotate(-180deg);transition:all .55s cubic-bezier(.3,1.6,.5,1)}
.f.pw .okb{right:46px}
.f.good .okb{opacity:1;transform:none}
.f.bad .box{border-color:var(--e);background:rgba(255,107,122,.09);box-shadow:0 0 0 4px rgba(255,107,122,.15)}
.f.bad label,.f.bad .ic{color:var(--e)!important}
.box.sh{animation:shake .55s}.box.sh .ic{animation:buzz .55s}
@keyframes shake{10%,90%{transform:translateX(-3px) rotate(-.4deg)}20%,80%{transform:translateX(6px) rotate(.5deg)}30%,50%,70%{transform:translateX(-9px) rotate(-.8deg)}40%,60%{transform:translateX(9px) rotate(.8deg)}}
@keyframes buzz{25%{transform:rotate(-18deg) scale(1.2)}50%{transform:rotate(18deg) scale(1.2)}75%{transform:rotate(-10deg)}}
.msg{max-height:0;opacity:0;overflow:hidden;color:var(--e);font-size:12.5px;font-weight:500;display:flex;gap:6px;align-items:center;transform:translateY(-6px);transition:all .3s var(--ez)}
.f.bad .msg{max-height:30px;opacity:1;transform:none;margin-top:6px;padding-left:4px}
.bang{width:16px;height:16px;border-radius:50%;background:var(--e);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:none;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,107,122,.25)}}
.sm{max-height:0;opacity:0;overflow:hidden;transition:all .3s;display:flex;align-items:center;gap:10px}
.sm.on{max-height:24px;opacity:1;margin-top:8px}
.bars{display:flex;gap:5px;flex:1}.bars i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.1);transition:background .3s}
.sm[data-s="1"] i:nth-child(-n+1){background:var(--e)}.sm[data-s="2"] i:nth-child(-n+2){background:var(--am)}.sm[data-s="3"] i:nth-child(-n+3){background:var(--c)}.sm[data-s="4"] i{background:var(--g)}
.sl{font-size:12px;color:var(--mu);width:44px;text-align:right}
.row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px;font-size:13.5px}
.ck{display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--mu)}
.ck input{position:absolute;opacity:0}
.cb{width:20px;height:20px;border-radius:7px;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:all .3s cubic-bezier(.3,1.6,.5,1)}
.cb svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s .1s}
.ck input:checked+.cb{background:var(--v);border-color:var(--v);transform:rotate(-8deg) scale(1.1);box-shadow:0 0 14px var(--v)}
.ck input:checked+.cb svg{stroke-dashoffset:0}.ck input:focus-visible+.cb{outline:2px solid var(--c);outline-offset:2px}
.lk{color:var(--v);background:none;border:0;font-weight:600;font-family:inherit;font-size:inherit;line-height:1;cursor:pointer;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s;padding:2px 0}
.lk:hover,.lk:focus-visible{background-size:100% 1.5px;outline:0}
.lk.glow{text-shadow:0 0 12px var(--v)}
.btn{position:relative;overflow:hidden;width:100%;height:54px;border:0;border-radius:16px;color:#fff;font:700 15.5px 'Sora',sans-serif;cursor:pointer;transition:transform .25s,box-shadow .25s,opacity .25s;display:grid;place-items:center}
.pri{color:var(--dk);background:linear-gradient(110deg,var(--v),var(--v2),var(--v));background-size:250% 100%;animation:gp 6s linear infinite;box-shadow:0 12px 30px -10px var(--v)}
.pri:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 18px 36px -10px var(--v)}.pri:active{transform:translateY(0)}
.pri::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.gh{color:var(--t);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}.gh:hover{background:rgba(255,255,255,.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.bt,.sp{grid-area:1/1;transition:transform .35s var(--ez),opacity .35s}
.sp{transform:translateY(160%);width:22px;height:22px;border:3px solid rgba(26,18,0,.3);border-top-color:var(--dk);border-radius:50%}
.btn.ld{pointer-events:none}.btn.ld .bt{transform:translateY(-160%);opacity:0}.btn.ld .sp{transform:none;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.foot{text-align:center;color:var(--mu);font-size:14px;margin-top:18px}
.back{position:absolute;top:-8px;left:-8px;width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--t);padding:10px;cursor:pointer;transition:transform .25s,background .25s;z-index:2}
.back:hover{transform:translateX(-3px);background:rgba(255,255,255,.1)}
.otpw{margin:6px 0 4px}
.otp{display:flex;gap:min(10px,2.2vw);justify-content:center;perspective:700px}
.otp input{width:min(52px,12.5vw);height:62px;border-radius:14px;text-align:center;font:700 24px 'Sora',sans-serif;color:var(--t);background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);outline:0;padding:0;caret-color:var(--v);transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.otp input.on{background:rgba(246,185,59,.2);border-color:rgba(246,185,59,.6)}
.otp input:focus{transform:translateY(-5px);border-color:var(--v);box-shadow:0 0 0 4px rgba(246,185,59,.22),0 12px 24px -6px var(--v)}
.otp input.lk2{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05);transform:scale(.88);opacity:.45}
.otp input{animation-delay:var(--d,0ms)}
.otp .fi{animation:fin .7s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--n)*80ms)}
.otp .pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.otp .sh,.otp.sh{animation:shake .5s var(--d)}
.otp .wave{animation:wave .9s ease-in-out 2 var(--d)}
.otp .okf{animation:okf .7s ease forwards var(--d)}
.otp .bdf{animation:bdf .7s ease forwards var(--d)}
.otp .drop{animation:drop .55s ease-in forwards var(--d)}
.otp .fly{animation:fly .8s ease-in forwards var(--d)}
@keyframes fin{from{opacity:0;transform:rotateX(-100deg) translateY(-14px)}}
@keyframes pop{0%{transform:scale(.7) rotateX(-70deg)}100%{transform:none}}
@keyframes wave{50%{transform:translateY(-10px) rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes okf{50%{transform:rotateY(90deg)}100%{transform:rotateY(0);background:rgba(52,216,165,.22);border-color:var(--g);box-shadow:0 0 20px rgba(52,216,165,.5)}}
@keyframes bdf{50%{transform:rotateX(90deg)}100%{transform:rotateX(0);background:rgba(255,107,122,.2);border-color:var(--e);box-shadow:0 0 18px rgba(255,107,122,.45)}}
@keyframes drop{to{transform:translateY(70px) rotate(var(--rot));opacity:0}}
@keyframes fly{to{transform:translateX(var(--dx)) scale(.15) rotate(360deg);opacity:0}}
.st{min-height:26px;margin:14px 0 14px;text-align:center;font-size:13px;color:var(--mu);display:flex;justify-content:center;align-items:center;gap:8px}
.st.err{color:var(--e)}.st.ok{color:var(--g)}.st.lock{color:var(--am)}
.dots i{display:inline-block;width:5px;height:5px;margin-left:3px;border-radius:50%;background:var(--v);animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-5px)}}
.pl{width:18px;height:18px;display:inline-block;transform-origin:50% 0;animation:swing 1.2s ease-in-out infinite}.pl svg{width:100%;height:100%}
@keyframes swing{50%{transform:rotate(14deg)}0%,100%{transform:rotate(-14deg)}}
.rs{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--mu);font-size:13.5px;margin-top:14px;min-height:22px}
.ring{width:18px;height:18px;transform:rotate(-90deg)}.ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5}.ring .pr{stroke:var(--c);stroke-dasharray:50.3;transition:stroke-dashoffset 1s linear;stroke-linecap:round}
.mark{width:120px;height:120px;margin:0 auto 20px;position:relative}
.mark svg{width:100%;height:100%;overflow:visible}
.mark .rg{position:absolute;inset:0;border-radius:50%;border:2px solid var(--g);opacity:0}
.go .rg{animation:ring 2s ease-out infinite 1.4s}.go .rg+.rg{animation-delay:2.2s}
.cc{fill:none;stroke:var(--g);stroke-width:5;stroke-dasharray:340;stroke-dashoffset:340;stroke-linecap:round}
.ck2{fill:none;stroke:var(--g);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70}
.go .cc{animation:draw .8s ease forwards}.go .ck2{animation:draw .5s ease forwards .8s}.go svg{animation:mp .5s cubic-bezier(.3,1.6,.5,1) 1.3s}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes mp{50%{transform:scale(1.15)}}
.pb{height:5px;border-radius:5px;background:rgba(255,255,255,.08);margin:22px 0 20px;overflow:hidden}.pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--c))}
.go~.pb i{animation:fillb 3s linear forwards}@keyframes fillb{to{width:100%}}
#cf{position:fixed;inset:0;z-index:50;pointer-events:none}
.toasts{position:fixed;top:max(14px,env(safe-area-inset-top));left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.ts{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:92vw;padding:11px 16px;border-radius:14px;background:rgba(20,20,44,.95);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.5);font-size:13.5px;font-weight:500;animation:tin .55s cubic-bezier(.3,1.7,.5,1),tout .4s ease-in 2.6s forwards}
.ts svg{width:20px;height:20px;flex:none}.ts.error svg{color:var(--e)}.ts.success svg{color:var(--g)}.ts.info svg{color:var(--c)}
@keyframes tin{from{opacity:0;transform:translateY(-30px) scale(.8)}}@keyframes tout{to{opacity:0;transform:translateY(-14px) scale(.95)}}
@media(max-width:380px){.card{padding:28px 18px 22px}h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.logo.plain{background:none;box-shadow:none}.logo.plain::after{border-radius:22px;inset:-5px}.logo.plain img,.logo.plain>div{width:64px;height:64px;border-radius:18px;object-fit:cover}
.fine{text-align:center;color:var(--mu);font-size:12px;margin-top:14px;display:flex;gap:6px;justify-content:center;align-items:center}
.fine svg{width:14px;height:14px;color:var(--c)}
.view button:focus-visible,.btn:focus-visible{outline:2px solid var(--v2);outline-offset:3px}
@media(max-width:520px){body{align-items:start;padding-top:max(28px,env(safe-area-inset-top))}.card{padding:30px 20px 24px}}