:root{
    --midnight:#200654; --syn:#BF16F2; --pink:#DB1363; --icy:#E2E9FF;
    --ink:#26203a; --faint:#6f6a84; --line:#ddd6ee; --bg:#faf9fd;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
    --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{min-height:100vh;font-family:var(--body);color:var(--ink);background:var(--bg);
    display:flex;align-items:center;justify-content:center;padding:28px}
  .card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:28px 26px 24px;box-shadow:0 18px 50px rgba(32,6,84,.08)}
  .eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2.2px;
    text-transform:uppercase;color:var(--syn);margin-bottom:10px}
  h1{font-family:var(--mono);font-size:22px;color:var(--midnight);letter-spacing:-.4px}
  p{margin:8px 0 22px;font-size:13.5px;color:var(--faint);line-height:1.5}
  label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.8px;
    text-transform:uppercase;color:var(--faint);margin:0 0 6px}
  input{width:100%;font-family:var(--mono);font-size:14px;color:var(--ink);border:1px solid var(--line);
    border-radius:9px;padding:10px 12px;margin-bottom:14px;background:#fff}
  input:focus{outline:none;border-color:var(--syn);box-shadow:0 0 0 3px rgba(191,22,242,.12)}
  button{width:100%;margin-top:6px;font-family:var(--mono);font-size:13px;font-weight:700;
    padding:11px 14px;border:0;border-radius:999px;background:var(--midnight);color:#fff;cursor:pointer}
  button:hover{background:#2d0a6e}
  button:disabled{opacity:.6;cursor:wait}
  .err{display:none;margin-bottom:12px;font-size:12.5px;color:var(--pink);background:#fff5f8;
    border:1px solid #f3c2d6;border-radius:9px;padding:9px 11px}
  .err.on{display:block}