.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
}
.login-card {
  width: min(100%, 440px);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.login-card .brand-mark { margin: 0 auto 24px; }
.login-heading { text-align: center; }
.login-heading h1 { margin-top: 8px; font-size: 26px; }
.login-heading p { margin-top: 12px; color: var(--muted); }
#login-form { display: grid; gap: 18px; margin-top: 28px; }
#login-form input { font-size: 16px; }
#login-error { min-height: 20px; color: var(--blue-soft); font-size: 12px; text-align: center; }
#login-submit { width: 100%; }
@media (max-width: 420px) {
  .login-shell { padding: 16px; }
  .login-card { padding: 28px 22px; }
}