:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#2a323d;
  --txt:#e6edf3; --muted:#8b96a5; --accent:#3b82f6; --loss:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--txt);
  font:15px/1.5 "Segoe UI",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;padding:20px}
.box{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:28px 24px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand h1{font-size:19px;margin:0}
.sub{color:var(--muted);font-size:13px;margin:0 0 20px}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px;
  text-transform:uppercase;letter-spacing:.5px}
input{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:11px 12px;font:inherit}
input:focus{outline:none;border-color:var(--accent)}
button{width:100%;margin-top:22px;background:var(--accent);color:#fff;border:0;
  border-radius:8px;padding:12px;font:inherit;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.1)}
.login-err{background:#3a1a1a;border:1px solid var(--loss);color:#fca5a5;
  padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:6px}
.foot{color:var(--muted);font-size:11px;text-align:center;margin:18px 0 0}