body.login{min-height:100dvh;display:grid;place-items:center;padding-inline:16px;background:
  radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
  radial-gradient(40rem 30rem at -10% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--bg)}
.login-wrap{width:min(380px,100%);padding-block:32px}
.login-card{background:var(--tile);border-radius:24px;padding:32px 28px;display:grid;gap:14px;box-shadow:0 30px 60px -30px rgb(20 10 60 / .45);animation:card-in .7s var(--ease-glide) backwards}
.login-card h1{margin:6px 0 0;font-size:26px}
.login-card .sub{margin:0 0 6px}
.login-logo{width:72px;height:72px;border-radius:18px;animation:logo-in .9s var(--ease-out) backwards .1s}
.login-card .btn{padding:11px 16px;margin-top:4px}
.login-card .form-err{padding:0}
.hint{color:var(--ink-3);font-size:12.5px;margin:2px 0 0;text-align:center}
.login-card.shake{animation:shake .4s var(--ease-out)}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes logo-in{from{opacity:0;transform:rotate(-14deg) scale(.8)}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.login-card,.login-logo,.login-card.shake{animation:none}}
body.login{background:transparent}
.login-card{background:linear-gradient(180deg, rgb(255 255 255 / .06), transparent 40%), rgb(23 15 48 / .72);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 40px 90px -30px rgb(0 0 0 / .9), 0 0 80px -30px var(--glow)}
.login-logo{animation:logo-in .9s var(--ease-out) backwards .1s, lotus-float 6s ease-in-out 1s infinite;filter:drop-shadow(0 10px 24px rgb(124 77 255 / .55))}
@keyframes lotus-float{50%{transform:translateY(-5px);filter:drop-shadow(0 16px 30px rgb(150 110 255 / .75))}}
.login-card .fld input{background:rgb(8 4 18 / .7);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.login-card .fld input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:none}
@media (prefers-reduced-motion:reduce){.login-logo{animation:none}}