body { font-family: 'DM Sans', sans-serif; }
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.scroll-row { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
.manga-card { transition: transform 0.3s, box-shadow 0.3s; }
.manga-card:hover { transform: scale(1.08) translateY(-8px); box-shadow: 0 0 30px rgba(0,255,255,0.3); }
.neon-glow { text-shadow: 0 0 10px #0ff, 0 0 40px #0ff; }
.tag-active { background: #00fff2 !important; color: #0a0a0f !important; box-shadow: 0 0 15px rgba(0,255,242,0.5); }
.hero-overlay { background: linear-gradient(to right, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.6) 50%, transparent 100%); }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: fadeInUp 0.6s ease forwards; }
.profile-panel { transition: opacity 0.2s, transform 0.2s; }
.video-card { transition: transform 0.3s, box-shadow 0.3s; }
.video-card:hover { transform: scale(1.05) translateY(-4px); box-shadow: 0 0 25px rgba(0,255,255,0.25); }
/* =========================================
   ESTILOS DO MODO CLARO (LIGHT MODE) - CORRIGIDO
========================================= */
body.light-mode {
  background: #f8fafc !important; 
  color: #0f172a !important; 
}

/* Sobrescreve o fundo gradiente escuro da tag <main> que estava direto no HTML */
body.light-mode main {
  background: #f8fafc !important;
}

/* Sobrescreve o fundo do rodapé */
body.light-mode footer {
  background: #e2e8f0 !important;
}

/* Transforma os textos brancos em cinza escuro */
body.light-mode .text-white {
  color: #0f172a !important;
}

/* Transforma os textos cinza claro em cinza um pouco mais forte */
body.light-mode .text-slate-300,
body.light-mode .text-slate-500 {
  color: #475569 !important;
}

/* Clareia a barra de navegação */
body.light-mode nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(8, 145, 178, 0.3) !important;
}

/* Clareia o painel de perfil */
body.light-mode .profile-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(8, 145, 178, 0.3) !important;
}

/* Ajusta o gradiente da imagem principal (Hero) */
body.light-mode .hero-overlay {
  background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 50%, transparent 100%) !important;
}

/* =========================================
   CORREÇÃO DOS CARDS (VIDEOS E MANGÁS)
========================================= */
/* Clareia o fundo dos cards de vídeo */
body.light-mode .bg-black\/30 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Inverte os gradientes pretos dos cards para gradientes brancos, 
   assim as letras escuras ficam 100% visíveis! */
body.light-mode .from-black\/80 {
  --tw-gradient-from: rgba(255, 255, 255, 0.9) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body.light-mode .from-black\/90 {
  --tw-gradient-from: rgba(255, 255, 255, 0.95) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Ajusta as cores Ciano (Neon) para dar contraste no branco */
body.light-mode .text-cyan-300 {
  color: #0891b2 !important; 
}
body.light-mode .border-cyan-400\/15,
body.light-mode .border-cyan-400\/40,
body.light-mode .border-cyan-400\/60 {
  border-color: rgba(8, 145, 178, 0.4) !important;
}