body {
  background:
    radial-gradient(circle at 15% 15%, rgba(36, 87, 255, 0.16), transparent 32%),
    var(--color-background);
}

.auth-layout {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: var(--space-5);
}

.auth-card {
  width: min(100%, 460px);
  padding: clamp(28px, 5vw, 44px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.auth-brand {
  display: inline-block;
  margin-bottom: var(--space-8);
  color: var(--color-primary-500);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.auth-heading {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-heading h1 {
  font-size: var(--font-size-3xl);
}

.auth-heading p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.auth-form {
  display: grid;
  gap: var(--space-5);
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}