body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--canvas); }
.login-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:36px 40px;
  width:100%;
  max-width:360px;
}
.login-logo {
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; margin-bottom:28px;
}
.login-logo .brand-mark {
  width:28px; height:28px; border-radius:6px;
  background:var(--navy); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
}
h2 { margin:0 0 20px; font-size:18px; font-weight:600; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:5px; }
.field input {
  width:100%; height:34px; padding:0 10px;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--canvas); outline:none; box-sizing:border-box;
}
.field input:focus { border-color:var(--navy); background:var(--surface); box-shadow:0 0 0 3px oklch(0.32 0.08 255/0.1); }
.btn-login {
  width:100%; height:36px; background:var(--navy); color:#fff;
  border:none; border-radius:var(--radius); font-family:inherit;
  font-size:13px; font-weight:500; cursor:pointer; margin-top:6px;
}
.btn-login:hover { background:var(--navy-2); }
.error-list { margin:0 0 14px; padding:10px 12px; background:var(--red-bg); border-radius:var(--radius); }
.error-list li { color:var(--red-fg); font-size:12.5px; list-style:none; }