@layer components {
/* ========================================
   GLASS CONTAINER
   ESCOPO: Componente visual sob demanda com aparência glass,
   largura, padding e modificador .glass-container--medium.
   Responsividade mantida local ao componente.

   DECISÃO ARQUITETURAL: Este arquivo mistura aparência glass (background,
   backdrop-filter, box-shadow, border) e sizing (max-width, width, padding,
   margin, border-radius) por decisão conservadora. A separação dessas
   responsabilidades afeta múltiplas páginas e fica para fase visual dedicada,
   se ainda for desejada. Não promover para global nem mover para core/.
   ======================================== */

/* --- NOVO: Glassmorphism Cyberpunk Container (Final do Arquivo - Override) --- */
.glass-container {
  /* Fundo escuro mas transparente (60% de opacidade) */
  background: rgb(18 18 28 / 60%);

  /* O desfoque do vidro */
  backdrop-filter: blur(20px);

  /* Borda fina e transparente */
  border: 1px solid rgb(255 255 255 / 10%);

  /* Brilho Neon: Sombra rosa no topo-esquerdo e azul no baixo-direito */
  box-shadow:
    -5px -5px 30px rgb(255 0 222 / 30%),
    /* Glow Rosa */
    5px 5px 30px rgb(0 210 255 / 30%);

  /* Glow Azul/Ciano */

  border-radius: 24px;
  padding: 30px;
  margin: 20px auto;

  /* Garanta que seja responsivo */
  max-width: 1200px;
  width: 95%;
}

/* Modificador para formulários e páginas menores (ex: contato, settings) */
.glass-container--medium {
  max-width: 800px;
}

/* Modificador para páginas muito estreitas (ex: login) */

@media (width <= 768px) {
  .glass-container {
    padding: 20px;
    margin: 10px auto;
    width: 98%;
  }
}
}

@layer theme {
.light-mode .glass-container {
  background: rgb(255 255 255 / 82%);
  border-color: rgb(126 34 206 / 14%);
  box-shadow:
    -5px -5px 24px rgb(217 0 141 / 12%),
    5px 5px 24px rgb(2 132 199 / 12%);
}
}