<template>
  <div class="auth-layout h-screen flex items-center justify-center p-4">
    <!-- Subtle gradient orbs for visual interest -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="auth-orb auth-orb-1" />
      <div class="auth-orb auth-orb-2" />
      <div class="auth-orb auth-orb-3" />
    </div>
    <div class="relative z-10 w-full max-w-md">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.auth-layout {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 50%, #ecfeff 100%);
}

.dark .auth-layout {
  background: linear-gradient(180deg, #0a0a0a 0%, #042f2e 50%, #083344 100%);
}

/* Subtle floating orbs */
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}

.auth-orb-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
}

.auth-orb-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
  background: linear-gradient(135deg, #22d3ee, #14b8a6);
}

.auth-orb-3 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  right: 20%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  opacity: 0.3;
}

.dark .auth-orb {
  opacity: 0.2;
}
</style>
