:root{color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif;color:#f5f7fb;background:#090e12}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 15% 12%,#092a242b,transparent 55%),radial-gradient(ellipse at 88% 70%,#44121b25,transparent 55%),#090e12}.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:32px 20px}.auth-card{position:relative;width:min(100%,620px);padding:48px 46px 32px;border:2px solid transparent;border-radius:30px;background:linear-gradient(125deg,#0a1816,#10161b 50%,#170d12) padding-box,linear-gradient(105deg,#00dd7e 0%,#06d7a5 27%,#af304c 64%,#ff233a 100%) border-box;box-shadow:-16px 0 65px #00c7810a,16px 0 65px #ed18340a}.brand{display:block;margin:8px 0 28px}.brand img{display:block;width:100%;height:auto}h1{font-size:clamp(28px,4vw,39px);line-height:1.2;text-align:center;margin:30px 0 40px;font-weight:750;letter-spacing:-.5px}.field{display:flex;align-items:center;gap:18px;min-height:66px;border:1.5px solid #536372;border-radius:15px;background:linear-gradient(115deg,#192129,#151c23);padding:12px 20px;margin:0 0 18px}.field:focus-within{border-color:#00d99b;box-shadow:0 0 0 3px #00d99b15}.field>svg{width:26px;height:26px;flex:none;fill:none;stroke:#f3f5f7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.field input{min-width:0;width:100%;border:0;background:none;outline:none;color:#fff;font:inherit;font-size:18px}.field input::placeholder{color:#899dad}.reveal{flex:none;display:grid;place-items:center;padding:0;border:0;background:none;color:#f4f5f7;cursor:pointer;width:28px;height:32px}.reveal svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.password-hint{color:#8798a7;font-size:12px;margin:-6px 0 24px}.submit{display:flex;align-items:center;justify-content:center;gap:25px;width:100%;min-height:66px;padding:14px;border:0;border-radius:15px;background:linear-gradient(100deg,#ffca00,#ffd600);color:#050909;font-size:21px;font-weight:750;cursor:pointer}.submit>span:last-child{font-size:35px;line-height:1}.submit:hover{background:#ffe53b}.submit:disabled{opacity:.6;cursor:wait}#auth-status{min-height:20px;margin:12px 0 0;font-size:14px;color:#ff858b;text-align:center}.divider{display:flex;align-items:center;gap:23px;color:#8d9caa;font-size:23px;margin:14px 0 24px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#536372}.switch{text-align:center;font-size:18px;margin:0}.switch a{color:#ffd000;margin-left:10px;text-underline-offset:5px}.success{text-align:center}.success strong{display:block;font-size:32px;color:#00e0a5;margin:12px}.success button{border:1px solid #516575;background:#17252b;color:#fff;border-radius:8px;padding:10px 20px;cursor:pointer}.continue{display:block;margin-top:26px;color:#ffd200;text-underline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}button:focus-visible,a:focus-visible{outline:2px solid #00e1b0;outline-offset:5px}[hidden]{display:none!important}@media(max-width:540px){.auth-shell{padding:18px 12px}.auth-card{padding:28px 22px 28px;border-radius:23px}h1{margin:24px 0 30px}.field{padding:13px;gap:13px;min-height:60px}.field input{font-size:16px}.submit{font-size:18px;min-height:60px}.switch{font-size:16px}.brand{margin-top:12px}}
/* Small entrance and breathing glow; keep the form steady while typing. */
.auth-card{animation:card-enter .65s cubic-bezier(.2,.7,.25,1) both,card-glow 7s ease-in-out .65s infinite}
.brand{animation:brand-enter .8s cubic-bezier(.2,.7,.25,1) .08s both}
.field{transition:border-color .2s,box-shadow .2s,background .2s}
.submit{transition:transform .2s,box-shadow .2s,background .2s}
.submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 24px #ffcc0024}
.submit:active:not(:disabled){transform:translateY(0)}
.submit>span:last-child{transition:transform .2s}
.submit:hover>span:last-child{transform:translateX(4px)}
@keyframes card-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes brand-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-glow{0%,100%{box-shadow:-16px 0 65px #00c7810a,16px 0 65px #ed18340a}50%{box-shadow:-12px 0 52px #00c78118,12px 0 52px #ed183418}}
@media(prefers-reduced-motion:reduce){.auth-card,.brand{animation:none}.field,.submit,.submit>span:last-child{transition:none}.submit:hover:not(:disabled),.submit:hover>span:last-child{transform:none}}