/* ==========================================================================
   CodeMist — page: auth screens (login / register / admin-login)
   ========================================================================== */

.auth-screen {
  min-height: calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--safe-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-6);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-6) var(--sp-5);
}

.auth-card__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  text-align: center;
}

.auth-card__title {
  font-size: var(--fs-xl);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.auth-card__subtitle {
  text-align: center;
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}

.auth-card__footer {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.auth-card__footer a { color: var(--c-accent); }
.auth-card__footer a:hover { text-decoration: underline; }

.auth-card--admin {
  border-color: rgba(var(--c-toxic-rgb), .3);
}
.auth-card--admin .auth-card__eyebrow { color: var(--c-toxic); }

@media (max-width: 420px) {
  .auth-card { padding: var(--sp-5) var(--sp-4); }
}