:root{
  --bg:#0b0f14; --panel:#121821; --line:#1f2937; --ink:#e6edf3;
  --muted:#8b98a5; --accent:#4ade80; --accent-ink:#062616; --err:#fca5a5; --err-bg:#2a1416;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 50% -10%, #16202b 0%, var(--bg) 60%);
  color:var(--ink); font:16px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  display:grid; place-items:center; padding:24px;
}
.card{
  width:100%; max-width:420px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.brand{color:var(--muted); font-size:13px; letter-spacing:.04em; margin-bottom:18px}
.mark{color:var(--accent)}
h1{font-size:22px; margin:0 0 8px}
.lead{color:var(--muted); margin:0 0 18px; font-size:14px}
.lead b{color:var(--ink)}
label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:14px 0 6px}
input{
  width:100%; padding:14px 14px; font:inherit; letter-spacing:.28em; text-transform:uppercase;
  background:#0c1219; color:var(--ink); border:1px solid var(--line); border-radius:10px; outline:none;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,222,128,.15)}
button{
  width:100%; margin-top:16px; padding:13px 16px; font:inherit; font-weight:700; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px;
  transition:filter .15s ease;
}
button:hover{filter:brightness(1.06)}
button:active{filter:brightness(.94)}
.err{
  background:var(--err-bg); color:var(--err); border:1px solid #4c1d24;
  padding:10px 12px; border-radius:10px; font-size:14px; margin:0 0 4px;
}
.err b{color:#fff}
.foot{color:var(--muted); font-size:12px; margin:18px 0 0; line-height:1.5}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}