/* auth.css — использует переменные из common.css */

.auth-page {
  min-height: calc(100vh - var(--nav-height) - 84px);
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-6);
  background: linear-gradient(155deg, var(--color-bg-subtle) 0%, var(--color-primary-bg) 50%, var(--color-success-bg) 100%);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
}

.auth-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  text-align: center;
}

.auth-sub {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--leading-base);
}

/* Переиспользует .alert из common.css, добавляем только отступ */
.auth-card .alert {
  margin-bottom: var(--space-5);
}

/* Переиспользует .tabs + .tab из common.css */
.auth-card .tabs {
  margin-bottom: var(--space-6);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Кнопка отправки формы */
.btn--auth {
  width: 100%;
  height: var(--btn-height-lg);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  margin-top: var(--space-2);
}

@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-xl);
  }
}