.auth-card {
  width: 100%;
  max-width: 25rem;
  height: 100%;
  max-height: calc(100vh - var(--space-8));
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.auth-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-primary-50);
  text-align: center;
}

.app-name {
  color: var(--color-primary-50);
}

.app-subtitle {
  color: var(--color-text-light-2);
}

.auth-body {
  overflow-y: auto;
}

.auth-body .form-error,
.auth-body .form-success {
  position: sticky;
  top: var(--space-2);
  left: var(--space-2);
}

.auth-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: var(--border-solid-1) var(--color-border-1);
}

.spinner {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
}

@media (max-width: 480px) {
  .auth-card {
    max-width: 100%;
  }

  .auth-header {
    padding: var(--space-6);
  }

  .auth-body {
    padding: var(--space-6);
  }
}