/* ==========================================================================
   SISTEMA DE TEMAS VISUAIS & ANIMAÇÃO DE TRANSMUTAÇÃO DE VÍRUS (CYBER PURPLE)
   1. TEMA CLARO: Ultra-claro, fresco, radiante, minimalista (#ffffff / #f8fafc)
   2. TEMA ESCURO: Stealth, monocromático, desaturado, discreto (#080c14)
   3. TEMA ROXO CYBERPUNK: Explosivo, Roxo Neon (#a855f7), Preto (#05000d),
                           Branco Puro, Amarelo Neon (#facc15), Verde Cyber (#22c55e),
                           Azul Marinho (#0b132b) com Grid Neon.
   ========================================================================== */

/* ==========================================================================
   1. REFINAMENTO TEMA CLARO (ULTRA CLARO, BRILHANTE E FRESCO)
   ========================================================================== */
html:not(.dark) body {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html:not(.dark) .glow-bg {
  background: radial-gradient(circle at 50% 0%, rgba(224, 242, 254, 0.7) 0%, rgba(241, 245, 249, 0.4) 50%, transparent 80%) !important;
}

html:not(.dark) .glass-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02) !important;
}

html:not(.dark) .bento-card {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .bento-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 16px 32px -8px rgba(14, 165, 233, 0.12) !important;
}

html:not(.dark) .bg-slate-50 {
  background-color: #f8fafc !important;
  border-color: #f1f5f9 !important;
}

/* ==========================================================================
   2. REFINAMENTO TEMA ESCURO (STEALTH, MONOCROMÁTICO, SEM CORES SATURADAS)
   ========================================================================== */
html.dark:not(.theme-purple) body {
  background-color: #07090e !important;
  color: #cbd5e1 !important;
}

html.dark:not(.theme-purple) .glow-bg {
  background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.35) 0%, transparent 60%) !important;
}

html.dark:not(.theme-purple) .glass-nav {
  background: rgba(7, 9, 14, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark:not(.theme-purple) .bento-card {
  background: #0d111a !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

html.dark:not(.theme-purple) .bento-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4) !important;
}

html.dark:not(.theme-purple) .bg-blue-600 {
  background-color: #272f3d !important;
  border: 1px solid #3e4859 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html.dark:not(.theme-purple) .bg-blue-600:hover {
  background-color: #333d4e !important;
  border-color: #4f5b6d !important;
}

html.dark:not(.theme-purple) .text-blue-600,
html.dark:not(.theme-purple) .dark\:text-blue-400 {
  color: #94a3b8 !important;
}

html.dark:not(.theme-purple) h1 span {
  background: linear-gradient(90deg, #f8fafc 0%, #cbd5e1 50%, #94a3b8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark:not(.theme-purple) .dark\:bg-slate-900\/70,
html.dark:not(.theme-purple) .dark\:bg-slate-900\/60,
html.dark:not(.theme-purple) .dark\:bg-slate-900\/80,
html.dark:not(.theme-purple) .dark\:bg-slate-900 {
  background-color: #0a0e16 !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================================================
   3. TEMA ROXO CYBERPUNK (VISUAL MÁXIMO, ÚNICO E INCONFUNDÍVEL)
   ========================================================================== */
html.theme-purple body {
  background-color: #05000d !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(15, 23, 66, 0.7) 0%, transparent 50%),
    radial-gradient(circle at 90% 70%, rgba(147, 51, 234, 0.35) 0%, transparent 50%),
    linear-gradient(rgba(168, 85, 247, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.09) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px !important;
  color: #f8fafc !important;
}

html.theme-purple .glow-bg {
  background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.45) 0%, rgba(23, 37, 84, 0.55) 45%, rgba(5, 0, 13, 0.95) 75%) !important;
}

html.theme-purple .glass-nav {
  background: rgba(7, 1, 18, 0.94) !important;
  border-bottom: 2px solid #a855f7 !important;
  box-shadow: 0 4px 30px rgba(168, 85, 247, 0.45) !important;
}

html.theme-purple .bento-card {
  background: linear-gradient(145deg, rgba(28, 9, 52, 0.96) 0%, rgba(11, 19, 48, 0.94) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 10px 30px -5px rgba(147, 51, 234, 0.3), inset 0 0 25px rgba(168, 85, 247, 0.08) !important;
}

html.theme-purple .bento-card:hover {
  border-color: #c084fc !important;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.6), inset 0 0 30px rgba(168, 85, 247, 0.18) !important;
  transform: translateY(-4px) scale(1.01) !important;
}

html.theme-purple .bg-slate-50,
html.theme-purple .dark\:bg-slate-900\/70,
html.theme-purple .dark\:bg-slate-900\/60,
html.theme-purple .dark\:bg-slate-900\/80,
html.theme-purple .dark\:bg-slate-900 {
  background-color: #0b132b !important; /* Azul Marinho */
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

html.theme-purple h1,
html.theme-purple h2,
html.theme-purple h3,
html.theme-purple h4,
html.theme-purple .text-slate-900,
html.theme-purple .dark\:text-white {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

html.theme-purple h1 span {
  background: linear-gradient(90deg, #c084fc 0%, #e879f9 30%, #facc15 70%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6));
}

html.theme-purple .text-blue-600,
html.theme-purple .dark\:text-blue-400,
html.theme-purple .text-blue-400 {
  color: #c084fc !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.5);
}

html.theme-purple .bg-blue-600,
html.theme-purple .dark\:hover\:bg-blue-500 {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 1.5px solid #c084fc !important;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.7) !important;
  color: #ffffff !important;
}

html.theme-purple .bg-blue-600:hover {
  background: linear-gradient(135deg, #a855f7 0%, #6d28d9 100%) !important;
  box-shadow: 0 0 40px rgba(216, 180, 254, 0.9) !important;
}

html.theme-purple .bg-white,
html.theme-purple .dark\:bg-slate-900\/90,
html.theme-purple .dark\:bg-slate-800\/80 {
  background: #0a0217 !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  color: #ffffff !important;
}

html.theme-purple .bg-white:hover,
html.theme-purple .dark\:hover\:bg-slate-800 {
  background: #17072e !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.5) !important;
}

html.theme-purple .bg-gradient-to-tr.from-blue-600 {
  background: linear-gradient(135deg, #9333ea 0%, #172554 100%) !important;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.8) !important;
  border: 1.5px solid #c084fc !important;
}

/* Secundárias: Amarelo Neon, Verde Cyber, Azul Marinho */
html.theme-purple .text-amber-600,
html.theme-purple .text-amber-400,
html.theme-purple .text-amber-300,
html.theme-purple .text-yellow-400 {
  color: #facc15 !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

html.theme-purple .border-amber-200,
html.theme-purple .dark\:border-amber-500\/30 {
  border-color: #facc15 !important;
  background-color: rgba(250, 204, 21, 0.18) !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

html.theme-purple .text-emerald-600,
html.theme-purple .text-emerald-400,
html.theme-purple .text-emerald-300 {
  color: #22c55e !important;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

html.theme-purple .border-emerald-200,
html.theme-purple .dark\:border-emerald-500\/20 {
  border-color: #22c55e !important;
  background-color: rgba(34, 197, 94, 0.18) !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

html.theme-purple footer {
  background-color: #030006 !important;
  border-top: 2px solid #172554 !important;
}

/* ==========================================================================
   4. NOTIFICAÇÃO DISCRETA DO TEMA SECRETO
   ========================================================================== */
#secret-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  background: linear-gradient(135deg, #180530 0%, #080f26 100%);
  border: 2px solid #c084fc;
  color: #ffffff;
  padding: 18px 24px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.5), 0 0 25px rgba(250, 204, 21, 0.35);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transform: translateY(150px) scale(0.85);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

#secret-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}