.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-12);
  text-align: center;
  gap: var(--sp-8);
}

.auth-screen__wordmark {
  font-family: var(--f-brand);
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}

.auth-screen__tagline {
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 420px;
  line-height: 1.5;
}

.auth-screen__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 360px;
  animation: authFadeIn 0.2s ease;
}

.auth-screen__divider {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  letter-spacing: 0.15em;
  margin: var(--sp-3) 0;
}

.auth-screen__alt-link {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
}

.auth-screen__alt-link:hover { color: var(--text); }

.auth-screen__error {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-white-ghost);
  text-align: left;
  padding: var(--sp-2) 0;
}

.auth-screen__offline {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--faint);
  letter-spacing: 0.1em;
  cursor: pointer;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
}

.auth-screen__offline:hover { color: var(--muted); }

@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}