.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(90deg, rgba(10, 35, 48, 0.78), rgba(10, 35, 48, 0.25)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.auth-card {
  width: min(560px, 100%);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  padding: 34px;
  box-shadow: var(--shadow);
}

.auth-card img {
  width: 190px;
  display: block;
  margin-bottom: 28px;
}

.auth-card h1 {
  font-size: 52px;
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.auth-links a {
  color: var(--blue);
  font-weight: 900;
}

.test-accounts {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: #eef3f2;
  font-weight: 800;
}

.form-message {
  min-height: 24px;
  margin-top: 16px;
  color: var(--blue);
  font-weight: 900;
}

@media (max-width: 520px) {
  .auth-page {
    align-items: start;
    padding: 16px;
  }

  .auth-card {
    padding: 24px 18px;
    border-radius: 8px;
  }

  .auth-card img {
    width: 150px;
    margin-bottom: 22px;
  }

  .auth-card h1 {
    font-size: 42px;
  }

  .auth-links {
    display: grid;
  }
}