.auth-shell {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  perspective: 1200px;
  background:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.10), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(14, 165, 233, 0.10), transparent 42%),
    var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  animation: auth-card-in 0.35s ease;
}

/* Wider variant for auth-shell pages whose content needs more room than a
   login/signup card (e.g. Contact Us's subject/message fields). */
.auth-card-wide {
  max-width: 640px;
}

@keyframes auth-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Organization-code step and credentials step are two separate page loads
   (not a client-side single-page flip), so each plays this flip-in on its
   own arrival — moving forward (code → credentials) and back ("Not your
   organization?") both get the same "flip-flop" feel. Overrides
   .auth-card-in's plain fade/slide with a 3D rotation instead. */
.auth-card-flip {
  animation: auth-card-flip-in 0.5s ease;
}

@keyframes auth-card-flip-in {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.auth-brand .brand-logo {
  width: 40px;
  height: 40px;
}

.auth-brand-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.auth-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
  text-align: center;
}

.auth-subtitle {
  text-align: center;
  margin-bottom: var(--space-4);
}

.qr-code-preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.qr-code-preview svg {
  max-width: 220px;
  height: auto;
  border-radius: var(--radius-sm);
}

/* requirement 2/08-Impersonation-And-Two-Factor-Auth.md — the setup
   screen (brand + title + subtitle + QR + manual-entry disclosure + code
   form) is deliberately denser than other auth cards so it fits one
   viewport without scrolling; these overrides are scoped to .compact-card
   specifically so they don't affect login/forgot-password/etc. */
.compact-card {
  padding: var(--space-5);
}

.compact-card .auth-brand {
  margin-bottom: var(--space-3);
}

.compact-card .auth-brand .brand-logo {
  width: 32px;
  height: 32px;
}

.compact-card .auth-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-1);
}

.compact-card .auth-subtitle {
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}

.compact-card .qr-code-preview svg {
  max-width: 150px;
}

.compact-card .form-group {
  margin-bottom: var(--space-3);
}

.totp-manual-entry {
  margin-bottom: var(--space-3);
  font-size: 0.85rem;
}

.totp-manual-entry summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.totp-manual-entry[open] summary {
  margin-bottom: var(--space-3);
}

.org-logo-preview {
  margin-bottom: var(--space-4);
}

.org-logo-preview img {
  display: block;
  margin: 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.input-uppercase {
  text-transform: uppercase;
}

.auth-inline-form {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}