:root {
  --bg: #020617;
  --card: #111827;
  --accent: #f59e0b;
  --accent-soft: rgba(245, 158, 11, 0.15);
  --text: #f9fafb;
  --muted: #9ca3af;
  --radius: 14px;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* =========================================================
   CORREÇÃO DEFINITIVA DO TEMA CYBERPUNK (DARK MODE)
========================================================= */

/* 1. Fundos principais (Batalha, Liga e Contadores) */
[data-theme="cyberpunk"] .batalha-col-esq,
[data-theme="cyberpunk"] .batalha-col-dir,
[data-theme="cyberpunk"] .cyber-col-esq > div,
[data-theme="cyberpunk"] .cyber-col-dir > div,
[data-theme="cyberpunk"] .banner-contador-wrap {
    background: #0f0a18 !important; /* Fundo escuro profundo e sólido */
    background-image: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.4) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important; /* Borda roxa neon sutil */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 2. Textos de Alto Contraste (Títulos e Subtítulos) */
[data-theme="cyberpunk"] .batalha-header-title,
[data-theme="cyberpunk"] .batalha-campeao-title,
[data-theme="cyberpunk"] .cyber-col-esq div[style*="color: #7c3aed"],
[data-theme="cyberpunk"] .cyber-col-dir div[style*="color: #7c3aed"],
[data-theme="cyberpunk"] .lider-nome {
    color: #d8b4fe !important; /* Roxo claro e luminoso */
    text-shadow: 0 0 10px rgba(216, 180, 254, 0.2) !important;
}

[data-theme="cyberpunk"] .batalha-header-sub,
[data-theme="cyberpunk"] .cyber-col-esq p,
[data-theme="cyberpunk"] .cyber-col-dir p,
[data-theme="cyberpunk"] #txtCampeaoAtual {
    color: #94a3b8 !important; /* Cinza prateado super legível */
}

/* 3. Caixas internas (Área do Prompt Campeão) */
[data-theme="cyberpunk"] .batalha-campeao-box {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
}

[data-theme="cyberpunk"] .batalha-prompt-textarea {
    background: #050505 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 4. Botão de Copiar */
[data-theme="cyberpunk"] .batalha-btn-copiar {
    background: linear-gradient(135deg, #7e22ce 0%, #4c1d95 100%) !important;
    box-shadow: 0 4px 15px rgba(126, 34, 206, 0.4) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-theme="cyberpunk"] .batalha-btn-copiar:hover {
    background: linear-gradient(135deg, #9333ea 0%, #5b21b6 100%) !important;
    box-shadow: 0 6px 20px rgba(126, 34, 206, 0.6) !important;
}

/* 5. Área Vazia do Pódio (Aguardando votos...) */
[data-theme="cyberpunk"] .podium-empty-state {
    color: #64748b !important;
}
[data-theme="cyberpunk"] .podium-empty-state svg {
    color: #7e22ce !important;
    opacity: 0.8 !important;
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1f2933 0, #020308 55%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 18px 4vw 6px;
  text-align: center;
}

h1 {
  margin: 0;
  font-weight: 600;
  letter-spacing: .03em;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
}
main {
  padding: 8px 4vw 32px;
  flex: 1;
}

/* Grids gerais */

.grid {
  display: grid;
  justify-content: center; /* centraliza as colunas */
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 18px;
}

/* Grid específico dos itens (imagens dos prompts) */

#itens.grid {
  justify-content: flex-start; /* itens começam à esquerda */
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 16px;
}

/* Cartões de categoria (topo) */

.card {
  background: linear-gradient(145deg, #111827, #020617);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 10px 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border .15s ease;
  border: 1px solid rgba(148,163,184,.25);
}

.card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top, rgba(245,158,11,.16), transparent 60%);
  opacity: 0;
  transition: opacity .2s ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
  border-color: rgba(245,158,11,.85);
}

.card:hover::before {
  opacity: 1;
}

.card img {
  width: 100%;
  border-radius: 11px;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.card-title {
  margin-top: 9px;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Área de itens da categoria selecionada */

#itens-wrapper.hidden,
.toast.hidden {
  display: none;
}

#itens-wrapper {
  margin-top: 24px;
  animation: fadeIn .18s ease-out;
}

#voltar {
  margin-bottom: 8px;
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.6);
  color: var(--muted);
  padding: 6px 14px;
  font-size: .8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, border .15s ease, color .15s ease, transform .1s ease;
}

#voltar:hover {
  background: rgba(15,23,42,.9);
  border-color: rgba(248,250,252,.7);
  color: var(--text);
  transform: translateY(-1px);
}

#titulo-categoria {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

#help {
  margin: 0 0 12px;
  font-size: .85rem;
  color: var(--muted);
}

/* Card de item (imagem do prompt) */

.item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #020617;
  box-shadow: var(--shadow);
  border: 1px solid rgba(148,163,184,.35);
  transition: transform .15s ease, box-shadow .15s ease, border .15s ease;
}

.item img {
  width: 100%;
  height: 100%;
  max-height: 220px;       /* controla a altura do card */
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;     /* mantém quadrado */
}

.item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
  border-color: var(--accent);
}

.item::after {
  content: "Clique para copiar";
  position: absolute;
  inset: auto 8px 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(249,250,251,.45);
  color: #e5e7eb;
  font-size: .72rem;
  pointer-events: none;
}

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--accent-soft);
  color: #fef3c7;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: .8rem;
  border: 1px solid rgba(250,204,21,.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: toastIn .18s ease-out;
}

/* Animações */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile */

@media (max-width: 640px) {
  main { padding-inline: 16px; }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
  }

#itens.grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

.top-actions{  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:0 20px 10px 0;
}

.top-btn{
  background:#f59e0b;
  color:black;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
}

.top-btn.logout{
  background:#dc2626;
  color:white;
}

.subtitulo{
  text-align:center;
  color:#9ca3af;
  margin-top:-8px;
  margin-bottom:10px;
}
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  
  :root {
    --primary: #8b5cf6; --primary-dark: #6d28d9;
    --secondary: #d946ef; --secondary-dark: #c026d3;
    --accent: #0ea5e9;
    --bg-anim: gradientBG 15s ease infinite;
    --bg-gradient: linear-gradient(-45deg, #f8fafc, #f3e8ff, #fae8ff, #e0f2fe);
    --text-main: #0f172a; --text-muted: #475569;
    --banner-bg: linear-gradient(-45deg, #4c1d95, #6d28d9, #9333ea, #d946ef);
    --banner-shadow: 0 20px 50px rgba(109, 40, 217, 0.3);
    --banner-border-bottom: none; --banner-margin: 0 0 20px 0; --banner-radius: 0 0 24px 24px;
    --glass-bg: rgba(255, 255, 255, 0.65); --glass-border: rgba(255, 255, 255, 0.85); --glass-shadow: 0 15px 40px rgba(139, 92, 246, 0.12);
    --stats-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.85) 0%, rgba(109, 40, 217, 0.95) 100%);
    --stats-border: rgba(167, 139, 250, 0.4); --stats-shadow: 0 15px 40px rgba(88, 28, 135, 0.3);
    --stats-text: #f8fafc; --stats-highlight: #0ea5e9;
    --top3-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(217, 70, 239, 0.15) 100%);
    --top3-hover-border: rgba(255, 255, 255, 0.9); --top3-item-bg: rgba(255,255,255,0.85);
    --card-hover-shadow: 0 25px 50px rgba(139, 92, 246, 0.2); --card-hover-border: rgba(139, 92, 246, 0.4);
    --polaroid-bg: #fff; --polaroid-photo-bg: var(--primary);
    --ia-bar-bg: rgba(255,255,255,0.6); --ia-bar-border: rgba(0,0,0,0.05);
    --footer-bg: rgba(255,255,255,0.7); --footer-border: rgba(0,0,0,0.05); --footer-link: var(--primary-dark); --footer-text: var(--text-muted);
  }

.tema-menu-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 1250px; margin: 0 auto 30px; padding: 0 20px; }
#tema-prompts-area { scroll-margin-top: 20px; }

@media (max-width: 768px) {
    .tema-menu-cats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 auto 20px; }
}

/* Menu Anual (Meses) Integrado */
.meses-menu-in { display: flex; overflow-x: auto; gap: 10px; max-width: 1000px; margin: 0 auto 40px; padding: 10px 20px; scrollbar-width: none; justify-content: center; }
.meses-menu-in::-webkit-scrollbar { display: none; }
.btn-mes { padding: 10px 20px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-main); font-weight: 800; text-decoration: none; font-size: 13px; text-transform: uppercase; transition: var(--transition); box-shadow: 0 4px 10px rgba(0,0,0,0.02); white-space: nowrap; }
.btn-mes:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }
.btn-mes.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: transparent; box-shadow: 0 6px 15px rgba(139, 92, 246, 0.3); }

.btn-tema-aqua { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    height: 54px; /* Aumentado ~33% em relação aos 40px anteriores */
    padding: 0 12px; 
    text-decoration: none !important; 
    border-radius: 12px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    
    /* Novo esquema de cores com alto contraste */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    background: linear-gradient(135deg, var(--primary-dark) 0%, #312e81 100%); 
    color: #ffffff !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all .2s ease; 
    line-height: 1.2;
}
.btn-tema-aqua-nome {
    font-size: 13px;
    font-weight: 900;
}
.btn-tema-aqua-qtd {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
}

.btn-tema-aqua:hover { 
    transform: translateY(-3px); 
    background: #ffcc00 !important; /* Muda a cor do fundo para o amarelo desejado */
    color: #000000 !important; /* Muda o texto para preto para dar leitura no amarelo */
    border-color: #ffcc00; /* Deixa a borda da mesma cor do fundo */
    box-shadow: 0 6px 15px rgba(255, 204, 0, 0.4); /* Sombra com um tom amarelado */
}
/* Opcional: Destaque visual caso a categoria esteja selecionada (ativa) */
.btn-tema-aqua.ativo {
    background: #e6b800;
    color: #000000 !important;
    border-color: #cca300;
}

  [data-theme="cyberpunk"] {
    --primary: #a855f7; --primary-dark: #7e22ce; --secondary: #ec4899; --secondary-dark: #be185d; --accent: #06b6d4; --bg-anim: gradientBG 20s ease infinite; --bg-gradient: linear-gradient(-45deg, #050505, #110e1b, #0a0f1c, #1a0b16); --text-main: #f8fafc; --text-muted: #94a3b8; --banner-bg: linear-gradient(-45deg, #3b0764, #7e22ce, #be185d, #4c1d95); --banner-shadow: 0 20px 60px rgba(126, 34, 206, 0.5); --glass-bg: rgba(20, 15, 35, 0.5); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); --stats-bg: linear-gradient(135deg, rgba(15, 10, 30, 0.7) 0%, rgba(20, 15, 40, 0.8) 100%); --stats-border: rgba(6, 182, 212, 0.3); --stats-shadow: 0 0 30px rgba(6, 182, 212, 0.15); --stats-text: #f8fafc; --stats-highlight: #06b6d4; --top3-bg: var(--glass-bg); --top3-hover-border: var(--primary); --top3-item-bg: rgba(0,0,0,0.4); --card-hover-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.4); --card-hover-border: var(--primary); --polaroid-bg: #e2e8f0; --polaroid-photo-bg: #000; --ia-bar-bg: rgba(0,0,0,0.4); --ia-bar-border: rgba(255,255,255,0.05); --footer-bg: rgba(10, 5, 20, 0.8); --footer-border: rgba(255,255,255,0.05); --footer-link: #fff; --footer-text: var(--text-muted);
  }

  [data-theme="pastel"] {
    --primary: #a78bfa; --primary-dark: #8b5cf6; --secondary: #fbcfe8; --secondary-dark: #f472b6; --accent: #bae6fd; --bg-anim: gradientBG 20s ease infinite; --bg-gradient: linear-gradient(-45deg, #fdfbfb, #f1f5f9, #e0e7ff, #fce7f3); --text-main: #334155; --text-muted: #64748b; --banner-bg: linear-gradient(-45deg, #fef4c3, #e0e7ff, #dcfce7, #fce7f3); --banner-shadow: 0 20px 40px rgba(148, 163, 184, 0.15); --banner-border-bottom: 2px solid #fff; --banner-margin: 0; --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.9); --glass-shadow: 0 10px 30px rgba(148, 163, 184, 0.12); --stats-bg: rgba(255, 255, 255, 0.6); --stats-border: #fff; --stats-shadow: 0 15px 40px rgba(148, 163, 184, 0.15); --stats-text: #334155; --stats-highlight: #8b5cf6; --top3-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%); --top3-hover-border: #fff; --top3-item-bg: rgba(255,255,255,0.9); --card-hover-shadow: 0 25px 50px rgba(139, 92, 246, 0.15); --card-hover-border: #fff; --polaroid-bg: #fff; --polaroid-photo-bg: #f8fafc; --ia-bar-bg: rgba(255,255,255,0.6); --ia-bar-border: rgba(0,0,0,0.05); --footer-bg: rgba(255, 255, 255, 0.6); --footer-border: rgba(0,0,0,0.05); --footer-link: var(--primary-dark); --footer-text: var(--text-muted);
  }

  body { font-family: 'Poppins', sans-serif; background: var(--bg-gradient); background-size: 400% 400%; animation: var(--bg-anim); color: var(--text-main); min-height: 100vh; transition: background 0.5s ease, color 0.5s ease; }
  @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  
/* --- BANNER SUPERIOR REAJUSTADO (ALTURA AMPLIADA EM 3/4) --- */
  .banner-principal { width: 100%; padding: 45px 20px; background: var(--banner-bg); background-size: 300% 300%; animation: bannerWave 12s ease infinite; display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--banner-radius); box-shadow: var(--banner-shadow); margin: 0 0 15px 0; border-bottom: var(--banner-border-bottom); transition: all 0.5s ease; }
  .banner-principal::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 90%, rgba(0,0,0,0.15) 0%, transparent 50%); pointer-events: none; border-radius: var(--banner-radius); }
  @keyframes bannerWave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  
  .banner-versao { position: absolute; top: 12px; right: 16px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.5px; z-index: 5; }
  .banner-subtitulo-logo { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; margin-top: 5px; z-index: 5; }
  [data-theme="pastel"] .banner-versao, [data-theme="pastel"] .banner-subtitulo-logo { color: rgba(0, 0, 0, 0.5); }
  
  .banner-conteudo { position: relative; text-align: center; max-width: 1000px; width: 100%; z-index: 2; animation: floatUp 0.8s ease-out forwards; display: flex; flex-direction: column; align-items: center; }
  
  /* LOGO PROPORCIONALMENTE COMPATÍVEL COM O CRESCIMENTO DE 3/4 DO BANNER (2X MAIOR) */
  .banner-logo-img { width: clamp(400px, 75vw, 650px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .banner-logo-img:hover { transform: scale(1.02); }
  [data-theme="pastel"] .banner-logo-img { filter: drop-shadow(0 5px 20px rgba(255,255,255,0.8)); }

  @media(min-width: 768px) {
      .banner-conteudo { max-width: 1200px; }
      .banner-logo-img { width: 850px; margin-bottom: 5px; }
  }

  /* --- BARRA DE AÇÕES ULTRA COMPACTA COM TÍTULOS --- */
  /* --- BARRA DE AÇÕES COMPACTA E ALINHADA --- */
  /* --- BARRA DE AÇÕES COMPACTA E SOLTA (SEM O FUNDO DE PÍLULA) --- */
  .action-bar-wrapper {
      display: flex;
      align-items: flex-end; /* Alinha todos os blocos pela base inferior */
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
      width: fit-content; /* Mantém a barra ajustada ao tamanho dos ícones */
      max-width: 95vw;
      margin: 0 auto 35px auto;
      padding: 10px 0; /* Remove o preenchimento interno desnecessário sem a pílula */
      background: transparent !important; /* Totalmente transparente */
      backdrop-filter: none !important; /* Remove o efeito de vidro */
      border: none !important; /* Remove a borda da pílula */
      box-shadow: none !important; /* Remove a sombra da pílula */
      animation: floatUp 1s ease-out forwards;
  }

  .action-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }

  .action-group-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
  }
  [data-theme="cyberpunk"] .action-group-title { color: var(--accent); }

  .action-group-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      height: 42px; /* Garante o alinhamento horizontal perfeito dos 3 títulos */
  }

  /* Ícones com tamanho ampliado (42px) */
  .social-icon-btn {
      display: flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; text-decoration: none;
      transition: transform 0.3s ease;
  }
  .social-icon-btn img {
      width: 100%; height: 100%; object-fit: contain;
  }
  .social-icon-btn:hover { transform: translateY(-3px) scale(1.08); }
  .social-icon-btn.btn-admin { font-size: 18px; background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); border-radius: 50%; color: #fff; width: 42px; height: 42px; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); }

/* Divisores discretos entre os blocos soltos */
  .action-divider { width: 3px; height: 42px; background: rgba(0,0,0,0.2); margin: 0 10px; align-self: flex-end; border-radius: 3px; }
  [data-theme="cyberpunk"] .action-divider { background: rgba(255,255,255,0.3); }

  /* ======================================================= */
  /* IDIOMAS E TEMAS - APENAS ÍCONES REDONDOS (SEM PÍLULA)   */
  /* ======================================================= */
  .lang-selector, .theme-selector { 
      display: flex; 
      align-items: center; 
      gap: 12px; 
      background: transparent !important; 
      border: none !important; 
      box-shadow: none !important; 
      backdrop-filter: none !important;
      padding: 0;
  }
  
  .lang-btn, .theme-btn { 
      text-decoration: none; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      transition: all 0.2s ease; 
      opacity: 0.65; 
      background: transparent !important; 
      border: none; 
      cursor: pointer; 
      padding: 0; 
      border-radius: 50%;
  }
  
  .lang-btn img, .theme-btn img { 
      display: block; 
      width: 42px; 
      height: 42px; 
      border-radius: 50%; 
      object-fit: cover; 
      border: 1px solid rgba(0,0,0,0.1); 
      box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .lang-btn:hover, .theme-btn:hover { 
      opacity: 0.9; 
      transform: scale(1.05); 
  }
  
  .lang-btn.active, .theme-btn.active { 
      opacity: 1; 
  }
  
  .lang-btn.active img, .theme-btn.active img { 
      box-shadow: 0 0 0 4px var(--primary); 
      transform: scale(1.05);
  }

  /* Mantendo os estilos dos outros botões extras */
  .banner-links-container { width: 100%; padding: 15px 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; position: relative; z-index: 3; margin-top: 20px; animation: floatUp 1s ease-out forwards; }
  .btn-barra { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; font-size: 14px; font-weight: 700; padding: 14px 28px; border-radius: 999px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; }
  .btn-barra:hover { transform: translateY(-4px) scale(1.02); }

  .stats-glass-panel { background: var(--stats-bg); backdrop-filter: blur(16px); border: 1px solid var(--stats-border); padding: 24px 35px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; gap: 15px; width: 90%; max-width: 800px; box-shadow: var(--stats-shadow); position: relative; overflow: hidden; animation: floatUp 1.2s ease-out forwards; color: var(--stats-text); }
  .ia-logos-wrapper { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.5vw, 25px); flex-wrap: nowrap; padding-top: 4px; z-index: 2; width: 100%; }
  .ia-logo-link { display: flex; align-items: center; gap: clamp(4px, 1.5vw, 8px); text-decoration: none; color: var(--stats-text); transition: transform 0.3s; }
  .ia-logo-link:hover { transform: scale(1.15); }
  .ia-logo-img { height: clamp(22px, 5vw, 32px); object-fit: contain; }
  .ia-logo-num { font-size: clamp(14px, 3.5vw, 18px); font-weight: 900; }

.nav-secoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1250px; margin: 0 auto 40px; padding: 0 20px; }
.nav-secoes button:nth-child(1) { grid-column: 1 / -1; }

.btn-secao-grande { 
    display: flex; align-items: center; justify-content: center; gap: 6px; 
    padding: 14px 16px !important; border-radius: 999px; font-size: 13px !important; 
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; text-align: center; line-height: 1.2; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: #a486f9 !important; color: #1f2937 !important; border: 1px solid rgba(0,0,0,0.1) !important; text-shadow: none !important;
}
.btn-secao-grande:hover:not(.active) { background: #ffe066 !important; border-color: #d4a000 !important; transform: translateY(-2px); }
.btn-secao-grande.active { background: #e6b800 !important; color: #000000 !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1), 0 4px 15px rgba(230, 184, 0, 0.4) !important; border-color: #cca300 !important; transform: translateY(-1px); }

@media(max-width: 900px) { .nav-secoes { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .nav-secoes { grid-template-columns: 1fr; } }

  .atencao-texto { font-family: 'Arial Black', Gadget, sans-serif; font-size: 2.5em; font-weight: 900; color: #8b5cf6; text-transform: uppercase; text-align: center; margin-top: 5px; margin-bottom: 20px; width: 100%; animation: pulse-glow 1.2s ease-in-out infinite alternate; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #8b5cf6, 0 0 20px #8b5cf6; }
  @keyframes pulse-glow { 0% { transform: scale(1); text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #8b5cf6, 0 0 20px #8b5cf6; } 100% { transform: scale(1.15); text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8b5cf6, 0 0 40px #8b5cf6; } }

  .gamificacao-wrapper { display: flex; justify-content: center; max-width: 1250px; margin: 40px auto; padding: 0 20px; }  
  .batalha-master { display: flex; flex-wrap: wrap; gap: 40px; width: 100%; background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 40px; box-shadow: var(--glass-shadow); animation: floatUp 1s ease-out forwards; }
  .batalha-lado-esq { flex: 1.5; min-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
  .batalha-titulo-grande { font-size: 32px; font-weight: 900; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 5px; }
  .batalha-grid { display: flex; gap: 15px; width: 100%; justify-content: center; }
  .batalha-card { flex: 1; border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; border: 4px solid transparent; transition: all 0.2s; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
  .batalha-card:hover { transform: translateY(-5px) scale(1.02); border-color: var(--primary); box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4); }
  .batalha-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
  .batalha-vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--primary-dark); color: #fff; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 900; font-size: 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 10; pointer-events: none; border: 4px solid #fff; }
  .batalha-resultado { display: none; background: rgba(255,255,255,0.85); padding: 20px; border-radius: 18px; text-align: left; border: 1px dashed var(--primary); animation: fadeIn 0.4s; flex-direction: column; width: 100%; margin-top: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.02); }
  .batalha-resultado.active { display: flex; }
  .batalha-prompt-box { background: rgba(0,0,0,0.05); padding: 15px; border-radius: 10px; font-family: monospace; max-height: 110px; overflow-y: auto; font-size: 14px; color: var(--text-main); border: 1px solid rgba(0,0,0,0.05); }

  .batalha-lado-dir { flex: 1; min-width: 320px; display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.4); border-radius: 20px; padding: 30px 20px 0 20px; border: 1px dashed rgba(139, 92, 246, 0.4); position: relative; overflow: visible; }
  .podium-title-area { text-align: center; width: 100%; margin-bottom: 25px; z-index: 2; }
/* Altura geral do container aumentada para abraçar as novas barras maiores */
  .podium-container { display: flex; align-items: flex-end; justify-content: center; gap: 15px; width: 100%; height: 380px; margin-top: auto; z-index: 2; }
  .podium-slot { display: flex; flex-direction: column; align-items: center; width: 30%; position: relative; }
  .podium-avatar-wrap { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.15); background: #fff; display: flex; justify-content: center; align-items: center; z-index: 2; overflow: hidden; }
  .podium-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .podium-block { width: 100%; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 900; box-shadow: inset 0 10px 20px rgba(255,255,255,0.2), 0 -5px 15px rgba(0,0,0,0.1); transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
  
  /* 1º Lugar - Ouro (Barras substancialmente mais altas) */
  .podium-1 .podium-block { background: linear-gradient(135deg, #fbbf24, #d97706); height: 280px; font-size: 60px; }
  .podium-1 .podium-avatar-wrap { border-color: #fbbf24; width: 95px; height: 95px; top: -55px; }
  
  /* 2º Lugar - Prata */
  .podium-2 .podium-block { background: linear-gradient(135deg, #94a3b8, #475569); height: 230px; font-size: 50px; }
  .podium-2 .podium-avatar-wrap { border-color: #94a3b8; width: 80px; height: 80px; top: -45px; }
  
  /* 3º Lugar - Bronze (Altura e fonte equilibradas) */
  .podium-3 .podium-block { background: linear-gradient(135deg, #b45309, #4a1902); height: 190px; font-size: 42px; }
  .podium-3 .podium-avatar-wrap { border-color: #b45309; width: 65px; height: 65px; top: -35px; }

  .podium-name { font-size: 14px; font-weight: 800; color: var(--text-main); margin-top: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; width: 100%; }
  .podium-score { font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.2); padding: 4px 12px; border-radius: 999px; margin-top: 8px; letter-spacing: 0.5px; }

  .gamificacao-wrapper .btn-barra { border: none !important; outline: none !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2); transition: all 0.3s ease; display: inline-flex; align-items: center; font-weight: 700; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; cursor: pointer; }
  .gamificacao-wrapper .btn-barra:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35); }

@media(max-width: 768px) {
      .gamificacao-wrapper { padding: 0 10px; margin: 20px auto; }
      .batalha-master { padding: 25px 15px; gap: 30px; width: 100%; overflow: hidden; }
      .batalha-lado-esq, .batalha-lado-dir { flex: 1 1 100%; min-width: 100%; max-width: 100%; box-sizing: border-box; }
      .batalha-titulo-grande { font-size: 24px; }
      .atencao-texto { font-size: 1.8em; margin-bottom: 15px; }
      .batalha-grid { gap: 8px !important; }
      .batalha-card { flex: 0 0 calc(50% - 4px) !important; min-width: 0 !important; border-width: 2px; }
      .batalha-card img { height: 160px; }
      .batalha-vs { width: 40px; height: 40px; font-size: 14px; border-width: 3px; }
      .batalha-resultado { padding: 15px; }
  }
  
  .secao-conteudo { display: none; }
  .secao-visivel { display: block !important; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes floatUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  
  .polaroid-wrap { display: flex; justify-content: center; align-items: stretch; gap: 35px; padding: 40px 20px; flex-wrap: wrap; }
  .top3-container { background: var(--top3-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 28px; padding: 40px 30px; box-shadow: var(--glass-shadow); min-width: 320px; display: flex; flex-direction: column; transition: all 0.4s ease; position: relative; overflow: visible; }
  .top3-container:hover { transform: translateY(-8px); border-color: var(--top3-hover-border); }
  .highlight-title { font-weight: 900; text-align: center; margin-bottom: 25px; color: var(--primary-dark); text-transform: uppercase; font-size: 15px; letter-spacing: 1px; }
  .top3-item { display: flex; align-items: center; gap: 15px; padding: 14px 18px; background: var(--top3-item-bg); border-radius: 18px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
  
  .polaroid-card { background: var(--polaroid-bg); padding: 16px 16px 70px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); transform: rotate(-4deg); width: 250px; text-decoration: none; position: relative; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); display: block; margin: 20px auto 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease, border-color 0.4s ease; }
  .polaroid-card:hover { transform: translateY(-12px) rotate(0deg) scale(1.03); box-shadow: 0 30px 60px rgba(139, 92, 246, 0.3); z-index: 10; border-color: var(--primary); }
  .polaroid-photo { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--polaroid-photo-bg); border-radius: 8px; }
  .polaroid-caption { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .polaroid-caption span { color: var(--text-main); }
  .polaroid-caption span:first-child { font-weight: 900; font-size: 17px; }

  .grid, .curadoria-grid { max-width: 1250px; margin: 0 auto 60px; padding: 0 20px; display: grid; gap: 30px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .curadoria-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

  .card, .curadoria-card { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--glass-shadow); overflow: hidden; text-decoration: none; color: var(--text-main); display: flex; flex-direction: column; transition: all 0.4s ease; position: relative; }
  .card:hover, .curadoria-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: var(--card-hover-shadow); border-color: var(--card-hover-border); z-index: 5; }
  
  .img-wrapper { width: 100%; overflow: hidden; border-radius: 24px 24px 0 0; position: relative; cursor: pointer; }
  .img-wrapper > div, .img-wrapper > img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; display: block; }
  .card:hover .img-wrapper > div, .curadoria-card:hover .img-wrapper > img { transform: scale(1.08); }
  .thumb { height: 200px; background-size: cover; background-position: center; }

  .btn-fav { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: all 0.2s ease; z-index: 10; }
  .btn-fav.active { background: #ffe4e6; color: #e11d48; text-shadow: 0 0 5px rgba(225,29,72,0.5); }
  
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); z-index: 9999; align-items: center; justify-content: center; opacity: 0; animation: fadeInModal 0.3s forwards; padding: 20px; }
  @keyframes fadeInModal { to { opacity: 1; } }
  .modal-content { display: flex; flex-direction: row; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; max-width: 1000px; width: 100%; max-height: 85vh; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.5); position: relative; transform: scale(0.9); animation: popModal 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  @keyframes popModal { to { transform: scale(1); } }
  .modal-close { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.2); border: none; font-size: 20px; color: var(--text-main); width: 35px; height: 35px; border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.2s ease; }
  .modal-left { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .modal-left img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .modal-right { flex: 1; padding: 40px; display: flex; flex-direction: column; max-height: 85vh; overflow-y: auto; color: var(--text-main); }
  .modal-right h3 { font-size: 22px; font-weight: 900; margin-bottom: 20px; color: var(--primary-dark); }
  .modal-right .modal-text-box { background: rgba(0,0,0,0.05); padding: 20px; border-radius: 12px; font-family: monospace; font-size: 14px; margin-bottom: 20px; flex-grow: 1; border: 1px solid rgba(0,0,0,0.05); white-space: pre-wrap; word-wrap: break-word; }
  @media(max-width: 768px) { .modal-content { flex-direction: column; overflow-y: auto; max-height: 90vh; } .modal-left { min-height: 300px; } .modal-right { padding: 20px; } }

  .section-title-btn-wrap { text-align:center; padding:50px 0 40px; }
  .section-title-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 18px 50px; border-radius: 999px; display: inline-block; font-weight: 900; font-size: 1.2rem; letter-spacing: 0.5px; box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4); border: 1px solid rgba(255,255,255,0.3); position: relative; overflow: hidden; }
  
  .footer { text-align: center; padding: 50px 20px; background: var(--footer-bg); backdrop-filter: blur(20px); border-top: 1px solid var(--footer-border); margin-top: 50px; transition: all 0.5s ease; }
  .footer a { color: var(--footer-link); text-decoration: none; font-weight: 800; transition: color 0.2s; }
  .footer p { color: var(--footer-text); }

  .hidden-infinite { display: none !important; }
  .scroll-sentinel { width: 100%; height: 20px; grid-column: 1 / -1; }
  .card-reveal { animation: floatUp 0.6s ease-out forwards; }

  .top3-relocated-container { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; animation: floatUp 1s ease-out forwards; width: 100%; }
  .top3-relocated-title { font-size: clamp(16px, 4vw, 26px); font-weight: 900; color: #dc2626; text-transform: uppercase; letter-spacing: 2px; text-align: center; width: 100%; }
  .top3-relocated-buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 0 20px; width: 100%; }
  .btn-top3-colab { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); color: var(--text-main); font-size: 14px; padding: 12px 24px; border-radius: 999px; text-decoration: none; border: 2px solid var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
  [data-theme="cyberpunk"] .btn-top3-colab { background: rgba(20, 15, 35, 0.8); color: #f8fafc; }
  .btn-top3-colab:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; border-color: transparent; }
  .btn-top3-colab .medalha { font-size: 18px; }
  .btn-top3-colab .nome { font-weight: 800; font-size: 14px; }
  .btn-top3-colab .badge { background: var(--primary); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; transition: all 0.3s ease; }
  .btn-top3-colab:hover .badge { background: rgba(255,255,255,0.3); color: #fff; }
/* =========================================================
   AJUSTES GLOBAIS DE RESPONSIVIDADE PARA MOBILE
========================================================= */

/* 1. Prevenção global de scroll horizontal */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 768px) {
    /* 2. Correção de Grids (Remove min-widths de 300px/320px) */
    .grid, 
    .curadoria-grid, 
    .ranking-grid, 
    .dash-grid { 
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important; 
    }

    /* 3. Correção da Batalha de Prompts */
    .batalha-master {
        padding: 20px 10px !important;
        border-radius: 16px;
    }
    .batalha-lado-esq, 
    .batalha-lado-dir {
        min-width: 0 !important; /* Remove o travamento de 320px */
        width: 100% !important;
    }

    /* 4. Correção dos cartões "Top 3" e "Polaroids" */
    .polaroid-wrap {
        padding: 20px 10px !important;
    }
    .top3-container {
        min-width: 0 !important;
        width: 100% !important; /* Permite adaptar à tela do celular */
        padding: 20px 15px !important;
    }
    .polaroid-card {
        width: 100% !important;
        max-width: 250px; /* Evita que estique demais, mas permite encolher */
        margin: 10px auto 0 !important;
    }

    /* 5. Painéis de Estatísticas e Banner */
    .stats-glass-panel {
        padding: 20px 15px !important;
        width: 100% !important;
        border-radius: 20px;
    }
    .banner-principal {
        padding: 20px 10px !important;
    }
    .ia-logos-wrapper {
        flex-wrap: wrap; /* Evita que os ícones fiquem espremidos */
    }

    /* 6. Correção do Modal Ampliado */
    .modal-overlay {
        padding: 10px !important;
    }
    .modal-content {
        width: 100% !important;
        max-height: 95vh !important;
        border-radius: 16px;
    }
    .modal-right {
        padding: 15px !important;
    }
    .modal-text-box {
        padding: 12px !important;
        font-size: 12px !important;
    }
}

/* 7. Ajustes Específicos para Celulares Pequenos (Ex: iPhone SE) */
@media (max-width: 480px) {
    /* Menu de Busca por Tema: 2 colunas em vez de 3 para não cortar texto */
    .tema-menu-cats { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }

    /* Redução de fonte nos botões de navegação */
    .btn-secao-grande {
        font-size: 11px !important;
        padding: 10px 12px !important;
    }
    
    /* Textos da Batalha */
    .batalha-titulo-grande {
        font-size: 20px !important;
    }
    .podium-container {
        gap: 5px !important;
    }
    
    /* Correção nos inputs do Dashboard de Admin */
    form input[type="text"] {
        min-width: 100% !important;
    }
}
/* CSS do Gerador Dinâmico Adaptado para Temas do Cyberclub */  
.nano-container { 
    --nano-primary: var(--primary); 
    --nano-text-main: var(--text-main);
    --nano-text-muted: var(--text-muted);
    
    /* BORDAS E FUNDOS MAIS ESCUROS PARA ALTO CONTRASTE */
    --nano-border-color: rgba(139, 92, 246, 0.3); 
    --nano-input-bg: rgba(139, 92, 246, 0.08); /* Fundo roxinho suave, super visível no claro e escuro */
    --nano-block-bg: var(--surface); 
    --nano-hover-bg: rgba(139, 92, 246, 0.15);
    --nano-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    width: 100%; 
    max-width: 1250px; 
    margin: 0 auto;
    color: var(--nano-text-main); 
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nano-border-color);
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
}

@keyframes piscarObrigatorio {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); }
    50% { opacity: 0.4; filter: none; }
}

/* NOVA ANIMAÇÃO: Faz o botão Copiar e Salvar piscar em tons da cor secundária */
@keyframes piscarBotaoCopiar {
    0%, 100% { 
        background: var(--secondary);
        box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
    }
    50% { 
        background: var(--secondary-dark);
        box-shadow: 0 8px 25px rgba(217, 70, 239, 0.8), 0 0 15px var(--secondary);
    }
}

.nano-container .status-indicator { width: 24px !important; height: 24px !important; flex-shrink: 0; margin-right: 8px; transition: all 0.3s ease; }
.nano-container .status-indicator.off { fill: #ef4444; animation: piscarObrigatorio 1.5s infinite; }
.nano-container .status-indicator.on { fill: #4ade80; filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.7)); opacity: 1; animation: none; }
.badge-obrigatorio { font-size: 0.75em; color: #fca5a5; margin-left: 10px; animation: piscarObrigatorio 1.5s infinite; text-shadow: none; font-weight: 800; }

.nano-wrapper { width: 100%; padding: 0 20px; box-sizing: border-box; margin: 50px 0; }

.nano-container .info-dica, .nano-container .info-lock {
    background: var(--nano-input-bg);
    color: var(--nano-text-main);
    border: 1px solid var(--nano-border-color);
    border-left: 4px solid var(--nano-primary);
    padding: 16px 20px; font-size: 0.95em; margin-bottom: 30px; border-radius: 0 12px 12px 0; font-weight: 500;
}

.nano-container .banner-topo { width: 100%; height: auto; border-radius: 16px; margin-bottom: 30px; border: 1px solid var(--nano-border-color); display: block; }
.nano-container .step-banner { width: 100%; height: auto; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--nano-border-color); display: block; }

.nano-container .header-section { text-align: center; margin-bottom: 40px; }
.nano-container .header-section h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; color: var(--nano-text-main); margin: 0 0 10px 0; }
.nano-container .header-section p { font-size: 1.1rem; color: var(--nano-text-muted); margin: 0 0 20px 0; }

.nano-container .btn-fb { display: inline-flex; align-items: center; gap: 8px; background: #1877F2; color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: var(--nano-transition); white-space: nowrap; flex-shrink: 0; }

.nano-container .step-block { background: var(--nano-block-bg); border: 1px solid var(--nano-border-color); border-radius: 16px; padding: 25px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.nano-container .step-title { color: var(--nano-primary); font-size: 1.1rem; font-weight: 800; margin: 0 0 20px 0; display: flex; align-items: center; gap: 8px; }

.nano-container .form-group { display: flex; flex-direction: column; margin-bottom: 20px; }
.nano-container label { display: flex; align-items: center; font-size: 0.85em; margin-bottom: 8px; color: var(--nano-primary); font-weight: 700; text-transform: uppercase; }

/* AJUSTE: Inputs muito mais visíveis com borda forte e sombra interna */
.nano-container input, .nano-container select { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 10px; background: var(--nano-input-bg); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); color: var(--nano-text-main); font-size: 0.95em; font-family: inherit; transition: var(--nano-transition); }
.nano-container input:focus, .nano-container select:focus { outline: none; border-color: var(--nano-primary); background: var(--surface2); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); }
.nano-container option { background-color: var(--surface2); color: var(--nano-text-main); }

/* AJUSTE: Linha do slider mais grossa (6px) e com cor fixa para não sumir */
.nano-container input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; padding: 0; border: none; }
.nano-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--nano-primary); cursor: pointer; margin-top: -6px; transition: var(--nano-transition); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.nano-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(139, 92, 246, 0.25); border-radius: 3px; border: 1px solid rgba(139, 92, 246, 0.1); }

.nano-container .custom-field-wrap { display: flex; align-items: center; gap: 10px; margin-top: 10px; width: 100%; }
.nano-container .custom-field-wrap span { color: var(--nano-text-muted); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
.nano-container .custom-field-wrap input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 8px; }

.nano-container .image-selection-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; margin-top: 15px !important; }
.nano-container .img-option { cursor: pointer; border-radius: 12px; border: 2px solid transparent; background: var(--nano-input-bg); transition: var(--nano-transition); display: flex; flex-direction: column; align-items: center; padding: 10px; }
.nano-container .img-option img { width: 100%; height: auto; aspect-ratio: 407 / 256; object-fit: contain; border-radius: 8px; transition: var(--nano-transition); }
.nano-container .img-option-label { color: var(--nano-text-muted); font-size: 0.75rem; text-align: center; padding-top: 10px; padding-bottom: 2px; font-weight: 700; width: 100%; transition: var(--nano-transition); }

.nano-container .img-option:hover { transform: translateY(-3px); border-color: var(--nano-primary); background: var(--nano-hover-bg); }
.nano-container .img-option.selected { border-color: #4ade80; background: rgba(74, 222, 128, 0.15); box-shadow: 0 0 0 1px #4ade80; }
.nano-container .img-option:hover .img-option-label, .nano-container .img-option.selected .img-option-label { color: var(--nano-text-main); }

.nano-container .pending-box { background: var(--nano-input-bg); border: 1px dashed var(--nano-border-color); padding: 30px; border-radius: 16px; text-align: center; margin-top: 30px; }
.nano-container .result-box { display: none; background: var(--nano-input-bg); padding: 30px; border-radius: 16px; border: 2px solid var(--nano-primary); margin-top: 30px; }
.nano-container #prompt_output { font-family: monospace; font-size: 1.1em; color: var(--nano-text-main); word-break: break-word; white-space: pre-wrap; background: var(--nano-block-bg); padding: 20px; border-radius: 10px; border: 1px solid var(--nano-border-color); }

.nano-container .btn-copy, .nano-container .btn-aqua { display: inline-flex; justify-content: center; align-items: center; padding: 16px 32px; border: none; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 14px; font-family: 'Poppins', sans-serif; text-transform: uppercase; color: #fff; background: var(--secondary); text-decoration: none; transition: var(--nano-transition); }

/* ATIVAÇÃO DA ANIMAÇÃO: Aplica o efeito pulsante exclusivamente no botão de copiar inferior */
.nano-container #btn-copy-save {
    animation: piscarBotaoCopiar 2s infinite ease-in-out;
}

/* NOVO ESTILO: Destaca o botão de visitar a galeria usando a cor primária (roxo) para não parecer apagado */
.nano-container .btn-galeria-nano {
    background: var(--primary) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
}

.nano-container .btn-copy:hover, .nano-container .btn-aqua:hover { transform: translateY(-2px); filter: brightness(1.1); }
.nano-container .visitas-counter { text-align: center; margin-top: 40px; padding-bottom: 20px; font-size: 13px; color: var(--nano-text-muted); }

.nano-container .grid-iluminacao .img-option img { aspect-ratio: auto; border-radius: 6px; }
.nano-container .grid-max-size { gap: 10px; }
.nano-container .grid-max-size .img-option { padding: 6px; }
.nano-container .grid-max-size .img-option img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; border-radius: 8px; }
.nano-container .grid-cores { gap: 15px; grid-template-columns: repeat(5, 1fr) !important; }
.nano-container .grid-cores .img-option { padding: 4px; } 
.nano-container .grid-cores .img-option img { aspect-ratio: unset !important; height: auto !important; object-fit: contain !important; width: 100%; border-radius: 8px; }
.nano-container .grid-5-cols { grid-template-columns: repeat(5, 1fr) !important; }
.nano-container .grid-tipo-imagem { gap: 6px !important; }
.nano-container .grid-tipo-imagem .img-option { padding: 4px !important; }

@media (max-width: 900px) { 
    .nano-container .image-selection-grid { grid-template-columns: repeat(3, 1fr); }
    .nano-container .grid-cores, .nano-container .grid-5-cols { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) { 
    .nano-container { padding: 30px 20px; }
    .nano-container .image-selection-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nano-container .grid-cores, .nano-container .grid-5-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
    .nano-container .btn-copy, .nano-container .btn-aqua { width: 100%; max-width: none !important; }
}

          .btn-dinamico-banner {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              margin-top: 20px;
              background: <?php echo htmlspecialchars($btn_banner_color); ?>;
              color: #ffffff !important;
              font-weight: 900;
              font-size: 14px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
              padding: 14px 32px;
              border-radius: 999px;
              text-decoration: none;
              /* Usa a cor hex escolhida, anexando '66' para 40% de opacidade na sombra */
              box-shadow: 0 8px 25px <?php echo htmlspecialchars($btn_banner_color); ?>66;
              border: 2px solid rgba(255, 255, 255, 0.2);
              transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              z-index: 10;
          }
          .btn-dinamico-banner:hover {
              transform: translateY(-4px) scale(1.02);
              /* Usa a cor hex escolhida, anexando '99' para 60% de opacidade no hover */
              box-shadow: 0 12px 30px <?php echo htmlspecialchars($btn_banner_color); ?>99;
              border-color: rgba(255, 255, 255, 0.6);
          }
  .ranking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; max-width: 1250px; margin: 0 auto; padding: 0 20px; }
  .ranking-card { background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 24px; padding: 25px; box-shadow: var(--glass-shadow); position: relative; transition: 0.3s; border: 1px solid var(--glass-border); text-decoration: none; display: block; color: inherit; }
  .ranking-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2); border-color: var(--primary); }
/* =========================================================
   AJUSTES DE RESPONSIVIDADE (IDIOMAS E MESES)
========================================================= */
@media (max-width: 768px) {
    /* Permite que a barra de idiomas quebre linha em vez de estourar a tela */
    .lang-selector {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px; /* Evita que as bordas fiquem estranhas ao quebrar linha */
        padding: 10px;
    }

    /* Corrige o corte do lado esquerdo no menu deslizante de meses */
    .meses-menu-in {
        justify-content: flex-start !important;
        padding-left: 20px;
        padding-right: 20px;
    }
}

    .ia-full-section { margin-bottom: 60px; max-width: 950px; margin-left: auto; margin-right: auto; padding: 0 20px; }
    .ia-full-header { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 25px; border-bottom: 2px dashed var(--border); padding-bottom: 15px; }
    .ia-full-header img { height: 40px; object-fit: contain; }
    .ia-full-header span { font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-dark); }
    
    /* Estrutura do Pódio Horizontal */
    .ia-podium-container { display: flex; align-items: flex-end; justify-content: center; gap: 16px; width: 100%; padding: 20px 0; }
    
/* Adicionado padding-top e overflow: visible para a medalha não ser cortada */
    .podium-card-item { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.04); position: relative; overflow: visible; flex: 1; max-width: 260px; padding-top: 15px; }
    .podium-card-item:hover { transform: translateY(-6px); box-shadow: 0 16px 35px rgba(139, 92, 246, 0.22); border-color: var(--primary); background: #fff; }
    
    /* Configuração de Cores e Alturas Estritas */
    .podium-card-item.ouro { border-bottom: 5px solid #f59e0b; }
    .podium-card-item.prata { border-bottom: 5px solid #94a3b8; }
    .podium-card-item.bronze { border-bottom: 5px solid #d97706; }
    
    /* Base da medalha corrigida (line-height maior para emojis grandes) */
    .podium-medal-badge { line-height: 1.2; margin-top: 0; margin-bottom: 10px; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.2)); transition: transform 0.3s; }
    
    /* Tamanhos gigantes e escalonados (~3x maiores) */
    .ouro .podium-medal-badge { font-size: 75px; margin-top: -10px; }
    .prata .podium-medal-badge { font-size: 55px; }
    .bronze .podium-medal-badge { font-size: 40px; }    /* Controle estrito de tamanho de imagem por degrau do pódio */
    .podium-img { object-fit: cover; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-shrink: 0; }
    .ouro .podium-img { width: 120px; height: 120px; }
    .prata .podium-img { width: 105px; height: 105px; }
    .bronze .podium-img { width: 90px; height: 90px; } /* Abre espaço crucial para o texto no card menor */
    
    .podium-info-box { padding: 10px 8px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
    
    /* Permite quebra de linha inteligente em até 2 linhas sem cortar letras */
    .podium-guest-name { font-size: 13px; font-weight: 800; color: var(--text-main); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 100%; line-height: 1.25; min-height: 32px; padding: 0 4px; }    
    @media (max-width: 650px) {
        .ia-podium-container { flex-direction: column; align-items: center; gap: 20px; }
        .podium-card-item { width: 100%; max-width: 320px; height: auto !important; padding-bottom: 15px; }
    }

        .views-watermark-tema { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 5px; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4); pointer-events: none; }
        .views-watermark-tema svg { width: 14px; height: 14px; }

    body { background: #fdf4ff !important; animation: none !important; color: #1f2937; } 
    .dash-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; font-family: 'Poppins', sans-serif; animation: floatUp 0.6s ease-out forwards; }
    .dash-header-bar { display: flex; gap: 15px; margin-bottom: 30px; justify-content: flex-start; }
    .dash-btn-white { background: #ffffff; color: #7c3aed; border: none; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; display: inline-block; box-shadow: 0 4px 10px rgba(124, 58, 237, 0.1); transition: 0.2s; }
    .dash-btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(124, 58, 237, 0.15); }
    .dash-banner { background: #7c3aed; color: #ffffff; text-align: center; font-weight: 700; padding: 25px 20px; border-radius: 20px; margin-bottom: 30px; font-size: 18px; letter-spacing: 0.5px; box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25); }
    .dash-nav-pills { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
    .dash-nav-pill { background: #ffffff; color: #7c3aed; text-decoration: none; font-weight: 800; padding: 12px 24px; border-radius: 999px; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.2s; border: 2px solid transparent; }
    .dash-nav-pill.active { border-color: #7c3aed; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2); background: #7c3aed; color: #fff; }
    .dash-nav-pill:hover { transform: translateY(-2px); }
    .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
    .dash-card { background: #ffffff; border-radius: 24px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); position: relative; transition: 0.3s; border: 1px solid #e9d5ff; }
    .dash-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(124, 58, 237, 0.15); border-color: #a78bfa; }    
    .dash-copy-btn { border: none; background: none; cursor: pointer; color: #9ca3af; font-size: 16px; padding: 0 5px; transition: 0.2s; }
    .dash-copy-btn:hover { transform: scale(1.1); color: #7c3aed; }

.aqua-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(to bottom, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 40%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 100%), var(--btn-color, #0ea5e9); background-blend-mode: overlay; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 -2px 5px rgba(0, 0, 0, 0.3), 0 6px 15px rgba(0, 0, 0, 0.15); text-shadow: 0 1px 2px rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.aqua-btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.25); filter: brightness(1.15); }
.aqua-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); }