/* Soulkeep login — styles from "Soulkeep Login" design (verbatim). */
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(168,85,247,0.28); }
:root {
  --bg:#0a090e; --bg2:#0e0d13; --elev:#131118; --elev2:#17151e;
  --ink:#eeecf3; --muted:#9c98ab; --faint:#615d70; --line:rgba(255,255,255,0.10); --line2:rgba(255,255,255,0.055);
  --grain:0.05; --glow:0.55; color-scheme: dark;
}
[data-theme="light"] {
  --bg:#f3f1ea; --bg2:#f8f6f0; --elev:#fffdf8; --elev2:#fbf9f3;
  --ink:#171320; --muted:#57516a; --faint:#948da4; --line:rgba(20,16,30,0.14); --line2:rgba(20,16,30,0.07);
  --grain:0.045; --glow:0.32; color-scheme: light;
}
input::placeholder { color: var(--faint); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
[data-reveal]{ transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); }
[data-rr] [data-reveal]{ opacity:0; transform:translateY(20px); }
@keyframes glowbreath { 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:var(--glow) } 50%{ transform:translate(-50%,-50%) scale(1.18); opacity:calc(var(--glow) * 1.4) } }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
@keyframes pop { from{transform:scale(.5)} to{transform:scale(1)} }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important } }

/* --- vanilla hooks (replace the design runtime's <sc-if>/{{ }} directives) --- */
/* theme toggle icons */
[data-theme="dark"] .sk-when-light { display: none; }
[data-theme="light"] .sk-when-dark { display: none; }
/* password show/hide icons (toggled by login.js via [data-pw-shown]) */
.pw-when-shown { display: none; }
[data-pw-shown] .pw-when-hidden { display: none; }
[data-pw-shown] .pw-when-shown { display: inline-flex; }
/* submit idle/loading (toggled by login.js via [data-submitting] on the form) */
.submit-idle { display: inline-flex; }
.submit-loading { display: none; }
[data-submitting] .submit-idle { display: none; }
[data-submitting] .submit-loading { display: inline-flex; }