.auth-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 4px 24px;
}

.auth-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 24px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(79, 133, 255, 0.14), transparent 56%),
    radial-gradient(100% 120% at 100% 100%, rgba(37, 214, 166, 0.11), transparent 60%),
    linear-gradient(165deg, rgba(12, 18, 34, 0.90), rgba(20, 26, 44, 0.80));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.auth-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(223, 236, 255, 0.82);
}

.auth-title {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  color: #eaf3ff;
}

.auth-subtitle {
  margin: 10px 0 0;
  color: rgba(220, 233, 255, 0.90);
  line-height: 1.7;
}

.auth-alert {
  margin: 16px 0 0;
  border: 1px solid rgba(255, 156, 156, 0.35);
  background: rgba(145, 35, 35, 0.25);
  color: #ffd0d0;
  border-radius: 12px;
  padding: 10px 12px;
}

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

.auth-field label {
  display: block;
  margin-bottom: 6px;
  color: rgba(224, 236, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
}

.auth-field input,
.auth-field select,
.auth-field textarea {
  width: 100%;
  border: 1px solid rgba(176, 205, 246, 0.30);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(19, 28, 48, 0.58);
  color: #eef5ff;
  font-size: 15px;
}

.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  outline: none;
  border-color: rgba(133, 182, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(104, 156, 245, 0.20);
}

.auth-errors {
  margin: 6px 0 0;
  color: #ffd2d2;
  font-size: 13px;
}

.auth-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-btn,
.auth-link-btn {
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.auth-btn {
  border: 1px solid rgba(143, 190, 255, 0.65);
  background: rgba(117, 170, 244, 0.20);
  color: #e9f4ff;
  cursor: pointer;
}

.auth-btn:hover {
  background: rgba(117, 170, 244, 0.33);
}

.auth-link-btn {
  border: 1px solid rgba(171, 204, 249, 0.45);
  color: #dceaff;
  background: rgba(154, 191, 255, 0.08);
}

.auth-link-btn:hover {
  background: rgba(154, 191, 255, 0.18);
  text-decoration: none;
}

.auth-help {
  margin-top: 14px;
  color: rgba(220, 233, 255, 0.84);
}

.auth-help a {
  color: #9fd4ff;
}

:root[data-theme= light] .auth-card {
  border-color: rgba(56, 80, 122, 0.24);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(74, 142, 255, 0.16), transparent 58%),
    radial-gradient(100% 120% at 100% 100%, rgba(30, 168, 146, 0.12), transparent 64%),
    linear-gradient(165deg, rgba(236, 244, 254, 0.96), rgba(220, 233, 249, 0.93));
  box-shadow: 0 10px 26px rgba(69, 92, 127, 0.14);
}

:root[data-theme=light] .auth-kicker { color: rgba(32, 60, 95, 0.85); }
:root[data-theme=light] .auth-title { color: #123055; }
:root[data-theme=light] .auth-subtitle,
:root[data-theme=light] .auth-help { color: rgba(26, 46, 78, 0.90); }

:root[data-theme=light] .auth-field label { color: #1f3f68; }

:root[data-theme=light] .auth-field input,
:root[data-theme=light] .auth-field select,
:root[data-theme=light] .auth-field textarea {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(64, 90, 134, 0.28);
  color: #15365f;
}

:root[data-theme=light] .auth-link-btn {
  color: #214c79;
  border-color: rgba(83, 124, 179, 0.42);
  background: rgba(88, 140, 206, 0.12);
}

@media (max-width: 760px) {
  .auth-page { padding: 8px 0 20px; }
  .auth-card { border-radius: 14px; padding: 18px 16px; }
}