:root{--lbg:#0C1126;--link:#EAF0FF;--lmuted:#96A3C0;--lfaint:#6B7896;--lline:rgba(255,255,255,.09);--lfield:rgba(4,7,16,.62);--lteal:#7CE7D2;--lsky:#5FC7FF;--lcoral:#FF8AA0;--lon:#06131A;--lfont-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;--lfont-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif}
html{font-size:16px;color-scheme:dark;-webkit-text-size-adjust:100%}
@media(min-width:1600px){html{font-size:18px}}
@media(min-width:2100px){html{font-size:21px}}
@media(min-width:2800px){html{font-size:26px}}
*{box-sizing:border-box}
body.login-body{margin:0;min-height:100dvh;background:var(--lbg);color:var(--link);font:400 .9375rem/1.5 var(--lfont-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.login-body a{color:var(--lteal);text-decoration-thickness:1px;text-underline-offset:3px}
body.login-body a:hover{color:#B9F6EA}
body.login-body :focus-visible{outline:2px solid var(--lteal);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.orb{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;width:46vmax;height:46vmax;background:radial-gradient(circle,var(--c) 0%,transparent 64%);will-change:transform}
.orb.violet{--c:rgba(108,92,231,.55);left:-16vmax;top:-14vmax;animation:driftA 26s ease-in-out infinite}
.orb.teal{--c:rgba(45,212,191,.38);right:-16vmax;bottom:-16vmax;animation:driftB 30s ease-in-out infinite}
.orb.sky{--c:rgba(95,199,255,.16);right:6vmax;top:-22vmax;width:38vmax;height:38vmax;animation:driftA 34s ease-in-out infinite reverse}
@keyframes driftA{50%{transform:translate3d(7vmax,5vmax,0) scale(1.1)}}
@keyframes driftB{50%{transform:translate3d(-6vmax,-4vmax,0) scale(1.08)}}
.page{min-height:100dvh;display:flex;flex-direction:column}
.stage{flex:1;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + clamp(1rem,4vh,3rem)) 1rem calc(env(safe-area-inset-bottom,0px) + clamp(1rem,4vh,3rem))}
.scene{position:relative;width:min(100%,30rem);--m:5.5rem;--near:calc(var(--m) + 2rem);--far:calc(var(--m) + 5rem)}
@media(max-width:1099px){.scene{--m:4.25rem;--near:calc(var(--m) + 1rem);--far:calc(var(--m) + 3rem)}}
.mascots{pointer-events:none;z-index:2}
.mascot{position:absolute;width:var(--m);aspect-ratio:1}
.booting .mascot{animation:pop .8s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.4s + var(--i) * .1s)}
.mascot::before{content:"";position:absolute;inset:-38%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--halo) 0%,transparent 64%);opacity:.5}
.mascot .bob{width:100%;height:100%;animation:bob calc(5.5s + var(--i) * .9s) ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.mascot svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .6rem .7rem rgba(0,0,0,.35))}
.fox{--i:0;--halo:rgba(255,166,92,.55);left:calc(var(--near) * -1);top:1.75rem}
.bunny{--i:1;--halo:rgba(255,120,190,.7);right:calc(var(--near) * -1);top:.5rem}
.panda{--i:2;--halo:rgba(140,120,255,.6);left:calc(var(--far) * -1);top:54%}
.bear{--i:3;--halo:rgba(255,190,110,.5);right:calc(var(--far) * -1);top:54%}
@keyframes pop{from{opacity:0;transform:scale(.45) translateY(1rem)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-.55rem) rotate(1.5deg)}}
.eye{transform-box:fill-box;transform-origin:center;animation:blink calc(4.6s + var(--i) * .9s) infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
.pupil{transform:translate(var(--px,0px),var(--py,0px));transition:transform .16s ease-out}
.paw{transform:translateY(64px);transition:transform .42s cubic-bezier(.3,1.35,.5,1);transition-delay:calc(var(--i) * 45ms)}
.scene.shy .paw{transform:translateY(0)}
.scene.shy.peek .paw.r{transform:translateY(15px)}
.scene.cheer .mascot{animation:hop .62s cubic-bezier(.3,.7,.4,1) calc(var(--i) * .08s) 2 both}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.3rem) rotate(-5deg)}}
.scene.nope .mascot{animation:nope .5s ease both}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-.4rem) rotate(-5deg)}40%{transform:translateX(.4rem) rotate(5deg)}60%{transform:translateX(-.3rem) rotate(-3deg)}80%{transform:translateX(.3rem) rotate(3deg)}}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-.4rem) rotate(-5deg)}40%{transform:translateX(.4rem) rotate(5deg)}60%{transform:translateX(-.3rem) rotate(-3deg)}80%{transform:translateX(.3rem) rotate(3deg)}}
@media(max-width:760px){.stage{padding-top:4.25rem}.scene{--m:clamp(3.3rem,17vw,4.6rem);margin-top:calc(var(--m) * .85)}.mascots{position:absolute;left:0;right:0;top:0;transform:translateY(-80%);display:flex;justify-content:space-between;padding:0 .6rem}.mascot,.fox,.bunny,.panda,.bear{position:relative;left:auto;right:auto;top:auto}.mascot::before{inset:-25%}}
.card{position:relative;width:100%;padding:2rem;border-radius:1.75rem;background:rgba(12,17,38,.55);border:1px solid rgba(255,255,255,.1)}
.booting .card{animation:rise .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:.1s}
.card.shake{animation:shake .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(1.5rem) scale(.985)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.5rem)}40%{transform:translateX(.5rem)}60%{transform:translateX(-.35rem)}80%{transform:translateX(.35rem)}}
@media(max-width:520px){.card{padding:1.5rem 1.25rem;border-radius:1.5rem}}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:99px;background:rgba(124,231,210,.1);color:var(--lteal);font-size:.78rem;font-weight:600}
.badge::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--lteal)}
.card h1{margin:1rem 0 .35rem;font-size:clamp(1.7rem,5.5vw,2rem);font-weight:700;color:var(--link)}
.card .sub{margin:0 0 1.6rem;color:var(--lmuted)}
form.lform{display:flex;flex-direction:column;gap:1.15rem}
.field>label.flab{display:block;margin-bottom:.5rem;font-size:.85rem;font-weight:600;color:rgba(234,240,255,.92)}
.control{position:relative}
.control .lead{position:absolute;left:.95rem;top:50%;translate:0 -50%;color:var(--lfaint);pointer-events:none;transition:color .2s,scale .25s cubic-bezier(.3,1.5,.5,1)}
.control:focus-within .lead{color:var(--lteal);scale:1.14}
.control input{width:100%;height:3.2rem;padding:0 1rem 0 2.75rem;font:400 1rem var(--lfont-body);color:var(--link);background:var(--lfield);border:1px solid rgba(255,255,255,.11);border-radius:.9rem;transition:border-color .2s,box-shadow .2s}
.control.has-trail input{padding-right:3.2rem}
.control input::placeholder{color:rgba(150,163,192,.55)}
.control input:hover{border-color:rgba(255,255,255,.2)}
.control input:focus{outline:none;border-color:var(--lteal);box-shadow:0 0 0 .25rem rgba(124,231,210,.14)}
input:-webkit-autofill{-webkit-text-fill-color:var(--link);box-shadow:0 0 0 100px #0E152C inset;caret-color:var(--link)}
.field.is-error .control input{border-color:rgba(255,138,160,.65)}
.field.is-error .control input:focus{box-shadow:0 0 0 .25rem rgba(255,138,160,.14)}
.trail{position:absolute;right:.4rem;top:50%;translate:0 -50%;width:2.4rem;height:2.4rem;border-radius:.65rem;display:grid;place-items:center;background:none;border:0;color:var(--lmuted);cursor:pointer}
.trail:hover{color:var(--link);background:rgba(255,255,255,.06)}
.trail .off{display:none}.trail.on .on-icon{display:none}.trail.on .off{display:block}
.hint{display:none;align-items:flex-start;gap:.4rem;margin:.5rem .1rem 0;font-size:.8125rem;line-height:1.4;color:var(--lmuted)}
.hint.show{display:flex}
.hint .ic{width:.95rem;height:.95rem;margin-top:.05rem;display:none}
.field.is-error .hint{color:var(--lcoral)}
.field.is-error .hint .h-err{display:block}
.opts{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.remember{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;color:rgba(234,240,255,.9);font-size:.9rem;user-select:none}
.remember input{position:absolute;opacity:0;width:1px;height:1px}
.box{width:1.3rem;height:1.3rem;border-radius:.4rem;flex:none;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.3);color:var(--lon);transition:background .2s,border-color .2s}
.box .ic{width:.8rem;height:.8rem;stroke-width:3.2;opacity:0;transition:opacity .15s}
.remember:hover .box{border-color:rgba(255,255,255,.5)}
.remember input:checked+.box{background:linear-gradient(135deg,var(--lteal),var(--lsky));border-color:transparent}
.remember input:checked+.box .ic{opacity:1}
.remember input:focus-visible+.box{outline:2px solid var(--lteal);outline-offset:3px}
.forgot{font-size:.9rem;color:var(--lmuted);text-decoration:none}
.forgot:hover{color:var(--lteal);text-decoration:underline}
.alert{display:flex;gap:.65rem;align-items:flex-start;padding:.75rem .9rem;border-radius:.9rem;font-size:.85rem;line-height:1.45;color:#FFC2CF;background:rgba(255,138,160,.09);border:1px solid rgba(255,138,160,.32)}
.alert[hidden]{display:none}.alert.ok{color:#C9FBEF;background:rgba(24,72,58,.9);border-color:rgba(124,231,210,.3)}
.alert .ic{width:1.05rem;height:1.05rem;margin-top:.1rem}
.cta{height:3.4rem;border:0;border-radius:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.65rem;font:700 1rem var(--lfont-display);letter-spacing:-.005em;color:var(--lon);background:linear-gradient(100deg,var(--lteal),var(--lsky));box-shadow:0 .9rem 2.1rem -.9rem rgba(95,199,255,.65);transition:transform .15s,box-shadow .2s,filter .2s}
.cta:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 1.1rem 2.3rem -.9rem rgba(95,199,255,.85)}
.cta:active:not(:disabled){transform:translateY(0)}
.cta:disabled{cursor:default}
.cta.loading{filter:saturate(.7)}
.cta .ic{stroke-width:2.6}
.spinner{display:none;width:1.1rem;height:1.1rem;border-radius:50%;border:2.5px solid rgba(6,19,26,.25);border-top-color:var(--lon);animation:spin .7s linear infinite}
.cta.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.signup{margin:.15rem 0 0;text-align:center;color:var(--lmuted);font-size:.92rem}
.signup a{font-weight:600}
.terms-note{margin:0;text-align:center;font-size:.78rem;line-height:1.55;color:var(--lmuted)}
.terms-note a{font-weight:500}
/* ---------- Toast ---------- */
.toasts{position:fixed;z-index:30;left:50%;transform:translateX(-50%);top:.75rem;width:min(30rem,calc(100% - 2rem));display:grid;gap:.5rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:.9rem;font-weight:600;color:#C9FBEF;background:rgba(24,72,58,.95);border:1px solid rgba(124,231,210,.3);animation:toastIn .55s cubic-bezier(.2,.9,.3,1.15) both}
.toast.err{color:#FFC2CF;background:rgba(74,28,42,.95);border-color:rgba(255,138,160,.35)}
.toast span{flex:1}.toast button{background:none;border:0;color:inherit;cursor:pointer;width:2rem;height:2rem}
.toast.leaving{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-140%)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-60%)}}

@keyframes hintIn{from{opacity:0;transform:translateY(-4px)}}

.foot{padding:2rem 1.25rem calc(env(safe-area-inset-bottom,0px) + 2.25rem);border-top:1px solid var(--lline);text-align:center}
.booting .foot{animation:fadeIn 1s ease 1.1s both}
@keyframes fadeIn{from{opacity:0}}
.foot-brand{display:block;font:700 .95rem var(--lfont-display)}
.foot-tag{margin:.4rem auto 1rem;max-width:44ch;font-size:.85rem;font-style:italic;color:var(--lmuted)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem}
.foot nav a{font-size:.85rem;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot-copy{margin:1.1rem 0 0;font-size:.78rem;color:var(--lfaint)}
@media(max-width:760px){.stage{padding-top:calc(env(safe-area-inset-top,0px) + 4.25rem)}.scene{--m:clamp(3.3rem,17vw,4.6rem);margin-top:calc(var(--m) * .85)}.mascots{position:absolute;left:0;right:0;top:0;transform:translateY(-80%);display:flex;justify-content:space-between;padding:0 .6rem}.mascot,.fox,.bunny,.panda,.bear{position:relative;left:auto;right:auto;top:auto}.mascot::before{inset:-25%}}
@media(max-width:520px){.card{padding:1.5rem 1.25rem;border-radius:1.5rem}}
@media(max-height:560px) and (min-width:761px){.card{padding:1.25rem 1.75rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
.foot-brand{display:block;font-weight:700}
.foot-tag{margin:.4rem auto 1rem;max-width:44ch;font-size:.85rem;font-style:italic;color:var(--lmuted)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem}
.foot nav a{font-size:.85rem;text-decoration:none}
.foot-copy{margin:1.1rem 0 0;font-size:.78rem;color:var(--lfaint)}
.booting .foot{animation:fadeIn 1s ease 1.1s both}
@keyframes fadeIn{from{opacity:0}}
.toasts{position:fixed;z-index:30;left:50%;transform:translateX(-50%);top:.75rem;width:min(30rem,calc(100% - 2rem));display:grid;gap:.5rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:.9rem;font-weight:600;color:#C9FBEF;background:rgba(24,72,58,.95);border:1px solid rgba(124,231,210,.3);animation:toastIn .55s cubic-bezier(.2,.9,.3,1.15) both}
.toast.err{color:#FFC2CF;background:rgba(74,28,42,.95);border-color:rgba(255,138,160,.35)}
.toast span{flex:1}.toast button{background:none;border:0;color:inherit;cursor:pointer;width:2rem;height:2rem}
.toast.leaving{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-140%)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-60%)}}