@layer components {
  .auth-container {
    @apply min-h-screen flex items-center justify-center p-6 bg-aura-bg relative overflow-hidden;
  }

  .auth-card {
    @apply aura-glass-card p-12 w-full max-w-xl flex flex-col items-center text-center relative z-10;
  }

  .auth-step-container {
    @apply space-y-8 w-full max-w-md;
  }

  .auth-input-container {
    @apply relative;
  }

  .auth-input-icon {
    @apply absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 w-6 h-6;
  }

  .auth-input-field {
    @apply aura-input py-5 pl-14 pr-6 text-xl;
  }

  .auth-submit-btn {
    @apply absolute right-3 top-1/2 -translate-y-1/2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 p-3 rounded-xl hover:bg-blue-600 dark:hover:bg-blue-400 disabled:opacity-50 transition-all;
  }

  .auth-progress-indicator {
    @apply fixed bottom-12 left-1/2 -translate-x-1/2 flex gap-2;
  }

  .auth-progress-dot {
    @apply h-1.5 rounded-full transition-all duration-500;
  }

  .auth-progress-dot-active {
    @apply w-8 bg-blue-600;
  }

  .auth-progress-dot-inactive {
    @apply w-2 bg-slate-200 dark:bg-slate-800;
  }
}