body {
  font-family: var(--font-ui, "Golos Text", system-ui, sans-serif);
}

.auth-main {
  align-items: center;
  padding-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.auth-wrap {
  margin-inline: auto;
}

/* Логотип как в shell-header, по центру страницы входа */
.auth-page-brand.shell-header__brand {
  margin-left: auto;
  margin-right: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.auth-page-brand .shell-header__brand-logo {
  object-position: center center;
  mix-blend-mode: multiply;
}

.auth-card {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  box-shadow: var(--ui-shadow-xs);
}

.auth-header {
  margin-top: var(--space-6);
  margin-bottom: var(--space-5);
}

.auth-subtitle:empty {
  display: none;
}

.auth-subtitle:not(:empty) {
  margin-top: var(--space-2);
}

.auth-form {
  margin-top: 0;
}

.auth-card > .soft-hidden:not(.is-revealed) {
  display: none;
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  border-color: var(--ui-border-strong);
  box-shadow: none;
}

.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="text"]:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 12%, transparent);
}

.auth-switch-row {
  display: none;
}

.auth-page footer[data-shell-footer],
.auth-page .inn-marketing-footer {
  opacity: 0.82;
}

.auth-page .inn-marketing-footer__inner {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.ghost-border {
  border: 1px solid var(--ui-border);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Дорожка переключателя «Войти/Зарегистрироваться»: своя заметная заливка
   и рамка, иначе сливается с белой карточкой (bg-surface-container-low был
   почти неотличим от карточки на части мониторов). */
.auth-tab-track {
  background: #edf2f6;
  border: 1px solid var(--ui-border);
}

.auth-tab-track button {
  background: transparent;
  color: var(--ui-text-muted);
}

.auth-tab-track .auth-tab-active {
  background: #ffffff !important;
  color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow-xs);
}

/* Mobile (≤767px): keep the auth flow comfortable and overflow-free on phones.
   Desktop ≥768px is untouched (all overrides live inside this media query). */
@media (max-width: 767.98px) {
  .auth-main {
    align-items: flex-start;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .auth-card {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .auth-header {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }

  /* Fluid card title so it never overflows narrow viewports. */
  #auth-title {
    font-size: clamp(1.125rem, 5vw, 1.25rem);
  }

  /* OTP-style inputs use wide letter-spacing; trim it on phones so the
     6-digit code stays within the field at 320px. */
  #login-challenge-code,
  #password-reset-code {
    letter-spacing: 0.35em;
  }

  #verify-code {
    letter-spacing: 0.3em;
  }

  /* Verify modal: respect notch safe areas so the dialog never sits under
     the status bar / home indicator on phones. */
  #verify-modal {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}