.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: #f8fafc;
}
.login-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 390px;
  box-shadow: var(--shadow);
}
.login-logo { font-size: 2rem; font-weight: 700; letter-spacing: -.05em; color: var(--text); margin-bottom: .2rem; }
.login-sub  { font-size: .9rem; color: var(--text2); margin-bottom: 2rem; }

.form-group { margin-bottom: 1.1rem; }

.login-btn { margin-top: .4rem; }

.login-err {
  font-size: .83rem;
  color: var(--red);
  text-align: center;
  margin-top: .7rem;
  padding: .55rem .9rem;
  background: var(--red-light);
  border-radius: var(--r-sm);
  border: 1px solid var(--red-border);
  display: none;
}
.login-info {
  font-size: .83rem;
  color: #1d4ed8;
  text-align: center;
  margin-top: .7rem;
  padding: .55rem .9rem;
  background: var(--blue-light);
  border-radius: var(--r-sm);
  border: 1px solid var(--blue-border);
  display: none;
}

.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

@media (min-width: 480px) {
  .login-card { padding: 2.75rem 2.5rem; }
}