.auth-card {
  width: min(100%, 25rem);
  margin: clamp(2rem, 10vh, 7rem) auto;
  padding: 2rem;
  border: 1px solid #dce3eb;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgba(30, 50, 75, .08);
}
.auth-card h1 { margin: 0; }
.auth-subtitle { margin: .5rem 0 1.5rem; color: #5b6c80; }
.auth-form { display: grid; gap: .65rem; }
.auth-form label { margin-top: .35rem; font-weight: 700; }
.auth-form input {
  width: 100%;
  min-height: 44px;
  padding: .7rem .8rem;
  border: 1px solid #afbdcc;
  border-radius: .55rem;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 16px;
}
.auth-form .button { width: 100%; margin-top: .75rem; }
#passkey-login { display: flex; width: fit-content; margin: 18px auto 0; }
.form-error { padding: .75rem; border-radius: .5rem; background: #fff0f0; color: #8b1e2d; }
@media (max-width: 767px) {
  .auth-card {
    width: 100%;
    margin: 1rem auto;
    padding: 1.25rem;
    border-radius: .85rem;
    box-shadow: none;
  }
  .auth-form { grid-template-columns: minmax(0, 1fr); }
  .auth-form input, .auth-form .button { min-height: 44px; font-size: 16px; }
}