.auth-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 2.5rem);
  padding: 2rem 1.25rem;
}

.auth-card {
  width: min(468px, 100%);
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 251, 0.94)),
    var(--panel);
  box-shadow: 0 28px 44px rgba(18, 31, 39, 0.08);
}

.auth-header {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.auth-header h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.05;
}

.auth-copy,
.auth-status {
  color: var(--muted);
  line-height: 1.65;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.auth-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: inherit;
}

.auth-tab.is-active {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: var(--brand-soft);
  color: var(--brand);
}

.auth-form {
  display: grid;
  gap: 0.9rem;
}

.auth-form.is-hidden {
  display: none;
}

.auth-status {
  margin-top: 1rem;
}

body:not(.is-authenticated) .auth-shell {
  min-height: 100vh;
}