:root{
  --bg:#0e1320;--panel:#161d2e;--panel-2:#1e273b;--line:#2b364f;
  --ink:#eef2fb;--muted:#8a96b0;
  --go:#21c074;--go-deep:#178a53;--out:#f0a23b;--out-deep:#c47d20;
  --hud:#7fe0b0;--warn:#f0a23b;--bad:#ef5c6b;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 700px at 50% -10%,#1a2236,var(--bg));
  color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 80px -30px #000}
.card header{padding:24px 24px 6px}
.card h1{margin:0;font-size:21px;letter-spacing:-.01em}
.card p.sub{margin:5px 0 0;color:var(--muted);font-size:13px}
.form{padding:18px 24px 24px}
label{display:block;font-size:12px;color:var(--muted);margin:14px 2px 6px}
label:first-child{margin-top:0}
input{width:100%;padding:13px 14px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;color:var(--ink);font-size:16px;outline:none}
input:focus{border-color:var(--go)}
button.primary{width:100%;margin-top:20px;padding:15px;border:0;border-radius:12px;cursor:pointer;
  font-size:16px;font-weight:700;color:#04130b;background:linear-gradient(180deg,var(--go),var(--go-deep));
  transition:filter .15s,transform .05s}
button.primary:hover{filter:brightness(1.06)}
button.primary:active{transform:translateY(1px)}
.msg{margin:16px 2px 0;font-size:13px;padding:11px 13px;border-radius:10px}
.msg.bad{background:#3a1f24;border:1px solid #ef5c6b55;color:#ffb3bb}
.msg.good{background:#143226;border:1px solid #21c07455;color:#9ff0c6}
.alt{text-align:center;padding:0 24px 22px;color:var(--muted);font-size:13px}
.alt a{color:var(--hud);text-decoration:none}
.alt a:hover{text-decoration:underline}