:root{
  --blue-deep:#14224A; --blue:#2563EB; --blue-dark:#1E3A8A;
  --white:#FFFFFF; --ink:#101828; --muted:#5B6B85; --line:#C9D8F5; --danger:#DC2626; --ok:#16A34A;
}
*{ box-sizing:border-box; }
body.login-body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--blue-deep); font-family:'Plus Jakarta Sans', system-ui, sans-serif; padding:20px;
}
.login-card{
  background:var(--white); border:3px solid var(--blue); border-radius:12px;
  padding:36px; width:100%; max-width:380px;
}
.login-brand{ font-family:'Press Start 2P', monospace; font-size:11px; color:var(--blue); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.brand-mark{ background:var(--blue); color:var(--white); padding:5px 7px; font-family:'Press Start 2P', monospace; font-size:11px; }
.login-card h1{ font-size:20px; color:var(--blue-deep); margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.login-card label{ display:block; font-size:13px; font-weight:700; color:var(--blue-deep); margin-bottom:14px; }
.login-card input{
  display:block; width:100%; margin-top:6px; padding:11px 12px; border:2px solid var(--line);
  border-radius:7px; font-size:14px; font-family:inherit;
}
.login-card input:focus{ outline:none; border-color:var(--blue); }
.login-card button{
  width:100%; background:var(--blue); color:var(--white); border:2px solid var(--blue);
  font-weight:700; font-size:14px; padding:12px; border-radius:7px; cursor:pointer; margin-top:6px;
}
.login-card button:hover{ background:var(--blue-dark); }
.login-error{ background:#FEF2F2; color:var(--danger); border:1px solid #FCA5A5; padding:10px 12px; border-radius:7px; font-size:13px; margin-bottom:16px; }
.login-ok{ color:var(--ok); font-weight:700; }
.login-warn{ color:#B45309; font-size:13px; margin-top:10px; }
.login-card a{ color:var(--blue); }