/* Экран входа и регистрации сайта посещаемости.
   Общие токены, типографика, оболочка и бренд-полоса — в main.css СКФ. */

.auth-page { padding-top: 74px; }

.auth-intro { max-width: 610px; margin-bottom: 38px; }

.auth-kicker {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-family: "Manrope", var(--font-main);
  font-size: 14px;
  font-weight: 700;
}

.auth-title,
.auth-card__title,
.auth-welcome__title {
  font-family: "Manrope", var(--font-main);
  letter-spacing: -0.025em;
}

.auth-title { margin: 0 0 14px; font-size: clamp(32px, 5vw, 45px); line-height: 1.12; }
.auth-card__title { margin: 0 0 var(--space-3); font-size: 25px; line-height: 1.2; }

.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.auth-card,
.auth-welcome {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.auth-form { display: grid; gap: var(--space-2); }

.auth-field { display: grid; gap: 7px; font-size: 14px; font-weight: 650; }

.auth-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  color: inherit;
  background: var(--color-surface);
}

.auth-input:focus { outline: 3px solid rgba(100, 116, 139, 0.18); border-color: #64748b; }

.auth-muted,
.auth-hint { color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }

.auth-hint { margin: -4px 0 0; }

.auth-button {
  justify-self: start;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid #1b2839;
  border-radius: 8px;
  color: #ffffff;
  background: #1b2839;
  cursor: pointer;
  font-weight: 650;
}

.auth-button:hover,
.auth-button:focus-visible { border-color: #31455d; background: #31455d; }

.auth-button--secondary { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface); }
.auth-button--secondary:hover,
.auth-button--secondary:focus-visible { border-color: var(--color-border-strong); background: #f2f4f7; }

.auth-notice { margin: 0 0 var(--space-3); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; }
.auth-notice--success { border-color: #b9dcc5; color: #1d5d35; background: #f0f8f2; }
.auth-notice--error { border-color: #ebc8c8; color: #8a2525; background: #fff4f4; }

@media (max-width: 800px) {
  .auth-page { padding-top: 46px; }
  .auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .auth-card,
  .auth-welcome { padding: var(--space-3) var(--space-2); }
}