:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
    padding: 24px 0 100px;
  }

  .auth-card {
    order: 2;
  }

  .auth-illustration {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .auth-shell {
    width: min(100% - 20px, 100%);
    padding: 12px 0 96px;
  }

  .auth-card,
  .auth-illustration {
    border-radius: 24px;
  }

  .auth-card {
    padding: 28px 22px;
  }

  .auth-footer-bar {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}