<template>
  <div class="auth-layout">
    <div class="bg-circle bg-circle-1" />
    <div class="bg-circle bg-circle-2" />
    <slot />
  </div>
</template>

<style scoped>
.auth-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.bg-circle-1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.bg-circle-2 { width: 300px; height: 300px; bottom: -80px; left: -80px; }
</style>
