<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-blue-100 to-indigo-100">
    <!-- Background Pattern (Optional) -->
    <div class="absolute inset-0 overflow-hidden opacity-10">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-500 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary-500 rounded-full blur-3xl"></div>
    </div>

    <!-- Auth Container -->
    <div class="relative z-10 w-full max-w-md px-6">
      <!-- Logo/Brand -->
      <div class="text-center mb-8">
      </div>

      <!-- Auth Card -->
      <q-card class="shadow-2xl rounded-2xl overflow-hidden">
        <q-card-section class="p-1">
          <slot></slot>
        </q-card-section>
      </q-card>

      <!-- Footer -->
      <div class="text-center mt-6 text-sm text-gray-600">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// No props needed - pure layout component
</script>

<style scoped>
/* Optional: Add custom animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
</style>
