@font-face {
  font-family: 'Lufga';
  src: url('/assets/fonts/Lufga-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: radial-gradient(circle at 15% 12%, #fce9e5 0, transparent 35%),
    linear-gradient(135deg, #f7f8fb, #eef1f7);
  font-family: var(--font-body); font-size: var(--fs-body);
}
.login-layout { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(100%, 430px); padding: 42px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r3); box-shadow: var(--shadow);
}
.login-logo { display: block; width: 172px; max-width: 100%; height: auto; }
.login-eyebrow { margin: 16px 0 34px; color: var(--ink-3); font-size: var(--fs-xs); letter-spacing: .03em; }
h1 { margin: 0; color: var(--navy); font: 800 1.9rem/1.2 var(--font-brand); }
.login-intro { margin: 12px 0 30px; color: var(--ink-2); line-height: 1.55; }
form { display: flex; flex-direction: column; }
label { margin: 0 0 7px; font-weight: 600; font-size: var(--fs-sm); }
input {
  width: 100%; min-height: 46px; margin-bottom: 20px; padding: 10px 12px;
  border: 1px solid var(--rule-2); border-radius: var(--r2);
  background: var(--paper); color: var(--ink); font: inherit;
}
input:focus { border-color: var(--navy); outline: 2px solid #12203f29; }
.login-error { margin: 0 0 18px; color: var(--err); font-size: var(--fs-sm); line-height: 1.4; }
.login-error[hidden] { display: none; }
button {
  min-height: 46px; margin-top: 4px; padding: 10px 18px; border: 0; border-radius: var(--r2);
  background: var(--navy); color: white; font: 600 var(--fs-body) var(--font-body); cursor: pointer;
}
button:hover { background: var(--navy-2); }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .login-card { padding: 30px 24px; } }