:root{--bg:#282a36;--deep:#21222c;--card:#303344;--line:#44475a;--fg:#f8f8f2;--muted:#a3acd3;--purple:#bd93f9;--pink:#ff79c6;--red:#ff5555;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg)}
body{margin:0;color:var(--fg);font:400 15px/1.5 var(--body);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
main{width:min(380px,100%);display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:12px}
h1{margin:0;font:800 2.1rem/1 var(--display);letter-spacing:-.02em}
h1 .o{color:var(--purple)}h1 .f{color:var(--pink)}
.sub{margin-top:5px;font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
form{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.fld{display:flex;flex-direction:column;gap:6px}
label{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input{width:100%;font:400 16px/1.4 var(--body);color:var(--fg);background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:11px 12px}
input:focus-visible,button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
button{font:700 15px/1 var(--body);padding:14px 16px;border-radius:10px;border:0;background:var(--purple);color:var(--bg);cursor:pointer}
.err{margin:0;color:var(--red);font-size:14px}