body.login {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  font-family: var(--zap-font); color: var(--zap-text);
  background: radial-gradient(1200px 600px at 10% -10%, var(--zap-primary-soft), transparent 60%), var(--zap-bg);
}
.login__card {
  width: 100%; max-width: 380px; box-sizing: border-box; padding: 32px 28px;
  background: var(--zap-surface); border: 1px solid var(--zap-border); border-radius: var(--zap-radius);
  box-shadow: 0 20px 50px -20px rgba(2, 6, 23, .25);
}
.login__brand { font-weight: 700; font-size: 15px; color: var(--zap-primary); margin-bottom: 18px; }
.login h1 { font-size: 22px; margin: 0 0 18px; }
.login form { display: grid; gap: 14px; }
.login__field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.login__field input {
  font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--zap-radius-sm);
  border: 1px solid var(--zap-border); background: var(--zap-bg); color: var(--zap-text);
}
.login__field input:focus { outline: 2px solid var(--zap-primary); outline-offset: -1px; border-color: transparent; }
.login__remember { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--zap-muted); }
.login__submit {
  font: inherit; font-weight: 600; padding: 11px; border: 0; border-radius: var(--zap-radius-sm); cursor: pointer;
  background: var(--zap-primary); color: var(--zap-primary-contrast);
}
.login__submit:hover { filter: brightness(1.08); }
.login__error {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--zap-radius-sm); font-size: 13px;
  color: var(--zap-danger); background: color-mix(in srgb, var(--zap-danger) 10%, transparent);
}