::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #694fa8 0%, #9772F2 100%);
  border-radius: 5px;
  border: 2px solid #000000;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #7b5bc4 0%, #a989ff 100%);
}

::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

::-webkit-scrollbar-corner {
  background: #000000;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #694fa8 #000000;
}

.modal__container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.modal__container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #694fa8 0%, #9772F2 100%);
  border: 1px solid #000000;
}

.grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#cart-pkg-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.purchase-notif__container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}


/* Remove as setinhas do input number em todos os navegadores */
.cc__checkout___quantity_input::-webkit-outer-spin-button,
.cc__checkout___quantity_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cc__checkout___quantity_input[type=number] {
  -moz-appearance: textfield;
  appearance: none;
}

/* Centralização perfeita do texto */
.cc__checkout___quantity_input {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.purchase-notif__box {
    display: flex;
    align-items: center;
    background-color: #12111a;
    border-radius: 10px;
    padding: 8px 12px;
    width: 240px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-left: 3px solid #6c5ce7;
    opacity: 0;
    transform: translateX(-100%);
}

.purchase-notif__icon-wrapper {
    background-color: #6c5ce7;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.centralcart-content pre {
  background: #25262F !important;
}

.purchase-notif__icon-svg {
    width: 14px;
    height: 14px;
}

.purchase-notif__text-area {
    color: white;
    flex-grow: 1;
}

.purchase-notif__message {
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 1.3;
}

.purchase-notif__timestamp {
    font-size: 10px;
    color: #a8a8b3;
}

.purchase-notif__animate-in {
    animation: purchaseNotifSlideIn 0.5s ease forwards;
}

.purchase-notif__animate-out {
    animation: purchaseNotifFadeOut 0.5s ease forwards;
}

@keyframes purchaseNotifSlideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes purchaseNotifFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.discord-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.discord-float:hover {
  transform: translateY(-5px);
}

.discord-float .icon {
  width: 65px;
  height: 65px;
  background: #5865F2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.discord-float:hover .icon {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.discord-float i {
  transition: transform 0.25s ease;
}

.discord-float:hover i {
  transform: scale(1.1);
}


.grid-cols-\[0\.8fr_1fr_1fr_1fr\]::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #694fa8 0%, #9772F2 100%);
  border: 1px solid #000000;
}

.tooltip::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.tooltip::-webkit-scrollbar-thumb {
  background: #694fa8;
  border: none;
}

@keyframes glow-scroll {
  0% { box-shadow: 0 0 5px rgba(151, 114, 242, 0.3); }
  50% { box-shadow: 0 0 10px rgba(151, 114, 242, 0.5); }
  100% { box-shadow: 0 0 5px rgba(151, 114, 242, 0.3); }
}

body::-webkit-scrollbar-thumb {
  animation: glow-scroll 3s ease-in-out infinite;
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-width: 1px;
  }
}

[class*="overflow-x"]::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #694fa8 0%, #9772F2 100%);
  border: 1px solid #000000;
}

#package-modal-container::-webkit-scrollbar,
#package-option-modal-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.centralcart-content::-webkit-scrollbar {
  width: 6px;
}

.toastify {
  box-shadow: none;

  max-width: 520px;
  width: fit-content;
  background: #67C05F;
  border-radius: 999px;
  font-weight: 700;
  
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.nick-member {
  margin-top: 10px;
}

.centralcart-content h1, .centralcart-content h2 {
    margin-bottom: 0.7rem !important;
}

.data-\[scrolled\=true\]\:py-5[data-scrolled="true"] {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.toastify.error {
  background-color: #FF4949;
}

.cc__checkout___form_field label::after {
  content: '*';
  color: red;
  margin-left: 4px;
}

.post-shadow {
  background: linear-gradient(0deg, hsl(var(--background)) 20%, transparent 100%);
}

.spot-background {
  background: linear-gradient(180deg, rgba(105, 79, 168, 0.95) 0%, rgba(16, 16, 16, 1) 100%);
  /*background: linear-gradient(180deg, rgba(105, 79, 168, 0.95) 0%, rgba(16, 16, 16, 1) 100%), url('https://i.imgur.com/8GyCl3n.jpeg');*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.glow-secondary {
  box-shadow: 0px 0px 10px 0px hsl(var(--secondary));
}

.post-gradient {
  background: linear-gradient(0deg, rgba(16, 16, 16, 0.95) 20%, rgba(16, 16, 16, 0) 50%);
}

#slides-container > div {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}


.bg-highlited {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #0000;
  background: linear-gradient(#25262F, #25262F) padding-box, linear-gradient(
        var(--angle),
        #25262F,
        #b70bce
      ) border-box;
  animation: 8s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes slideDown {
  from {
    transform: translateY(-60px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes themeToggleSpin {
  from {
    transform: rotate(0deg) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: rotate(180deg) scale(0.7);
    opacity: 0.7;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.theme-toggle-icon-anim {
  animation: themeToggleSpin 0.4s ease-out;
}

/* ===========================================================
   TEMA LIGHT — overrides do core.css
   =========================================================== */

/* Viewport scrollbar (root) — sem espaço entre seletor e ::pseudo-element */
html[data-theme="light"]::-webkit-scrollbar,
:root[data-theme="light"]::-webkit-scrollbar,
[data-theme="light"]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="light"]::-webkit-scrollbar-track,
:root[data-theme="light"]::-webkit-scrollbar-track,
[data-theme="light"]::-webkit-scrollbar-track {
  background: #F4F4F4 !important;
  border-radius: 5px;
}
html[data-theme="light"]::-webkit-scrollbar-thumb,
:root[data-theme="light"]::-webkit-scrollbar-thumb,
[data-theme="light"]::-webkit-scrollbar-thumb {
  background: #A2A2A2 !important;
  border: 2px solid #F4F4F4 !important;
  border-radius: 5px !important;
  animation: none !important;
}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"]::-webkit-scrollbar-thumb:hover,
[data-theme="light"]::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary)) !important;
}
html[data-theme="light"]::-webkit-scrollbar-corner,
:root[data-theme="light"]::-webkit-scrollbar-corner,
[data-theme="light"]::-webkit-scrollbar-corner {
  background: #F4F4F4 !important;
}

/* Descendentes (modais, dropdowns etc) — mantém o sweep para descendentes */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F4F4F4 !important;
  border-radius: 5px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #A2A2A2 !important;
  border: 2px solid #F4F4F4 !important;
  border-radius: 5px !important;
  animation: none !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary)) !important;
}
[data-theme="light"] ::-webkit-scrollbar-corner {
  background: #F4F4F4 !important;
}
[data-theme="light"] * {
  scrollbar-color: #A2A2A2 #F4F4F4;
}
[data-theme="light"] .modal__container::-webkit-scrollbar-thumb,
[data-theme="light"] .grid-cols-\[0\.8fr_1fr_1fr_1fr\]::-webkit-scrollbar-thumb,
[data-theme="light"] [class*="overflow-x"]::-webkit-scrollbar-thumb {
  background: #A2A2A2;
  border: 1px solid #F4F4F4;
  border-radius: 5px;
}
[data-theme="light"] .tooltip::-webkit-scrollbar-thumb {
  background: #A2A2A2;
}

/* Body/HTML scrollbar (viewport principal) — desliga animação glow, força paleta light */
[data-theme="light"] body::-webkit-scrollbar-thumb,
html[data-theme="light"] body::-webkit-scrollbar-thumb,
[data-theme="light"] html::-webkit-scrollbar-thumb {
  animation: none !important;
  background: #A2A2A2 !important;
  border: 2px solid #F4F4F4 !important;
}
[data-theme="light"] body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body::-webkit-scrollbar-thumb:hover,
[data-theme="light"] html::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary)) !important;
}
[data-theme="light"] body::-webkit-scrollbar-track,
html[data-theme="light"] body::-webkit-scrollbar-track,
[data-theme="light"] html::-webkit-scrollbar-track {
  background: #F4F4F4 !important;
}

[data-theme="light"] .purchase-notif__box {
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border-left: 3px solid #6c5ce7;
}
[data-theme="light"] .purchase-notif__text-area {
  color: #000000;
}
[data-theme="light"] .purchase-notif__timestamp {
  color: #777777;
}

[data-theme="light"] .centralcart-content pre {
  background: #F4F4F4 !important;
  color: #000000;
}

[data-theme="light"] .post-shadow {
  background: linear-gradient(0deg, hsl(var(--background)) 20%, transparent 100%);
}

[data-theme="light"] .spot-background {
  background: linear-gradient(180deg, rgba(126, 73, 255, 0.85) 0%, rgba(255, 255, 255, 1) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

[data-theme="light"] .post-gradient {
  background: linear-gradient(0deg, rgba(250, 250, 250, 0.95) 20%, rgba(250, 250, 250, 0) 50%);
}

[data-theme="light"] .bg-highlited {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(var(--angle), #ffffff, #b70bce) border-box;
}

[data-theme="light"] body::-webkit-scrollbar-thumb {
  animation: glow-scroll-light 3s ease-in-out infinite;
}

@keyframes glow-scroll-light {
  0% { box-shadow: 0 0 5px rgba(151, 114, 242, 0.25); }
  50% { box-shadow: 0 0 10px rgba(151, 114, 242, 0.45); }
  100% { box-shadow: 0 0 5px rgba(151, 114, 242, 0.25); }
}

[data-theme="light"] .toastify {
  background: #67C05F;
  color: #ffffff;
}
[data-theme="light"] .toastify.error {
  background-color: #FF4949;
}

[data-theme="light"] .particle {
  background-color: rgba(126, 73, 255, 0.45);
}

/* ===========================================================
   TEMA LIGHT — overrides para componentes
   Cada cor hardcoded do tema dark é substituída pelo equivalente claro.
   Texto branco e borders white/X dentro de containers convertidos
   também são ajustados aqui (o tema dark continua intocado).
   =========================================================== */

/* --- Containers escuros viram brancos/cinzas claros --- */
[data-theme="light"] .bg-\[\#0a0a0a\] {
  background-color: #ffffff !important;
  border-color: #E4E4E4 !important;
}
[data-theme="light"] .bg-\[\#252331\] {
  background-color: #ffffff !important;
}
[data-theme="light"] .bg-\[\#1a1b23\],
[data-theme="light"] .\!bg-\[\#1a1b23\] {
  background-color: #FFFFFF !important;
}
[data-theme="light"] .bg-\[\#25262F\] {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E4E4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .bg-\[\#1E1F29\] {
  background-color: #F4F4F4 !important;
}
[data-theme="light"] .bg-\[\#2b2937\] {
  background-color: #F4F4F4 !important;
}
/* === Subcategorias (Coleções, Créditos) — UX/UI light === */
[data-theme="light"] .bg-\[\#30313A\] {
  background-color: #FAFAFA !important;
  color: #000000;
  border-top: 1px solid #E4E4E4;
}
[data-theme="light"] .bg-\[\#30313A\] *,
[data-theme="light"] .bg-\[\#30313A\] a,
[data-theme="light"] .bg-\[\#30313A\] span {
  color: #000000;
}
/* Hover state nas subcategorias */
[data-theme="light"] .bg-\[\#30313A\] a {
  transition: background-color 0.15s, color 0.15s;
}
[data-theme="light"] .bg-\[\#30313A\] a:hover {
  background-color: #FFFFFF;
  color: hsl(var(--primary));
}
[data-theme="light"] .bg-\[\#30313A\] a:hover span {
  color: hsl(var(--primary));
}
[data-theme="light"] .bg-\[\#30313A\].text-white,
[data-theme="light"] .text-white.bg-\[\#30313A\] {
  color: #000000 !important;
}

/* === Botão de categoria inativo (RankUP Legacy) — texto mais visível === */
[data-theme="light"] .bg-\[\#25262F\] .text-muted-foreground {
  color: #3D3D3D;
}
[data-theme="light"] .bg-\[\#25262F\]:hover .text-muted-foreground {
  color: #000000;
}
[data-theme="light"] .bg-\[\#25262F\]:hover {
  border-color: hsl(var(--primary) / 0.3) !important;
}

/* Chevron do accordion (seta down) — mais escuro no light */
[data-theme="light"] .bg-\[\#25262F\] .text-white {
  color: #000000;
}
[data-theme="light"] .bg-\[\#31323B\] {
  background-color: #F4F4F4 !important;
}
/* Card de pacote (package.html) hover effect — mais "floating" */
[data-theme="light"] .bg-\[\#25262F\]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Background da foto do produto (#404254) — modal de package detalhado */
[data-theme="light"] .bg-\[\#404254\] {
  background-color: #F4F4F4 !important;
  border: 1px solid #E4E4E4;
}
[data-theme="light"] .bg-\[\#101010\],
[data-theme="light"] .bg-\[\#0f0f0f\] {
  background-color: #FFFFFF !important;
}

/* --- Borders hardcoded escuras --- */
[data-theme="light"] .border-\[\#31323B\] {
  border-color: #E4E4E4 !important;
}
[data-theme="light"] .border-\[\#25262F\] {
  border-color: #E4E4E4 !important;
}

/* --- Text hardcoded cinza-claro (ficaria invisível em light) --- */
[data-theme="light"] .text-\[\#a8aab9\],
[data-theme="light"] .text-\[\#a8a8b3\] {
  color: #777777 !important;
}
[data-theme="light"] .placeholder\:text-\[\#a8aab9\]\/50::placeholder {
  color: rgba(107, 114, 128, 0.5) !important;
}

/* --- SVG arrows (login dropdown / cart preview) --- */
[data-theme="light"] svg path[fill="#252331"] {
  fill: #ffffff;
}
[data-theme="light"] #user-dropdown-container svg,
[data-theme="light"] .group\/cart svg {
  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.08));
}

/* === Mobile drawer (#0a0a0a) — texto e elementos internos === */
[data-theme="light"] #mobile-menu-overlay .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] #mobile-menu-overlay .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] #mobile-menu-overlay .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] #mobile-menu-overlay .border-white\/15 {
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] #mobile-menu-overlay .text-white,
[data-theme="light"] #mobile-menu-overlay .text-white\/70 {
  color: #000000;
}
[data-theme="light"] #mobile-menu-overlay .text-white\/55,
[data-theme="light"] #mobile-menu-overlay .text-white\/60 {
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] #mobile-menu-overlay .text-white\/45 {
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] #mobile-menu-overlay .text-white\/50,
[data-theme="light"] #mobile-menu-overlay .text-white\/25 {
  color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] #mobile-menu-overlay .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] #mobile-menu-overlay .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* === User dropdown desktop (bg #252331) === */
[data-theme="light"] #user-dropdown {
  background-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] #user-dropdown .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] #user-dropdown .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] #user-dropdown a,
[data-theme="light"] #user-dropdown span {
  color: #000000;
}

/* === Cart preview dropdown (bg #252331) === */
[data-theme="light"] .group\/cart .bg-\[\#252331\] {
  background-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .group\/cart .bg-\[\#252331\] h2,
[data-theme="light"] .group\/cart .bg-\[\#252331\] .text-white,
[data-theme="light"] .group\/cart .bg-\[\#252331\] span,
[data-theme="light"] .group\/cart .bg-\[\#252331\] input {
  color: #000000;
}
[data-theme="light"] .group\/cart .bg-\[\#2b2937\] {
  background-color: #F4F4F4 !important;
}
[data-theme="light"] .group\/cart .bg-white\/15 {
  background-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .group\/cart .border-white\/20 {
  border-color: rgba(0, 0, 0, 0.15);
}

/* === Tooltip (bg #252331) — botão tema/login no header === */
[data-theme="light"] .group\/login .bg-\[\#252331\],
[data-theme="light"] .group\/theme .bg-\[\#252331\] {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}
[data-theme="light"] .group\/login .bg-\[\#252331\].rotate-45,
[data-theme="light"] .group\/theme .bg-\[\#252331\].rotate-45 {
  background-color: #1f2937 !important;
}

/* === Header mobile top bar (bg-black/20 + border-white/15) === */
[data-theme="light"] header .bg-black\/20 {
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] header .bg-black\/20 .border-white\/15 {
  border-color: rgba(0, 0, 0, 0.1);
}
/* Botões da top bar mobile (sol, user, cart) — fundo branco com ícone escuro */
[data-theme="light"] header .bg-black\/20 button.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] header .bg-black\/20 button.bg-white\/10 i {
  color: #000000;
}

/* === Header desktop — botões "bg-white/25" (login/theme) === */
[data-theme="light"] nav#navbar .bg-white\/25 {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] nav#navbar .hover\:bg-white\/35:hover {
  background-color: #ffffff;
}
[data-theme="light"] nav#navbar .bg-white\/25 i,
[data-theme="light"] nav#navbar .bg-white\/25 .theme-toggle-icon {
  color: #000000;
}

/* === Login modal (bg #1a1b23 com ! Tailwind importante) === */
[data-theme="light"] #login-modal .bg-\[\#1a1b23\],
[data-theme="light"] #login-modal .\!bg-\[\#1a1b23\] {
  background-color: #FFFFFF !important;
}
[data-theme="light"] #login-modal .text-white {
  color: #000000;
}
[data-theme="light"] #login-modal .text-white\/60,
[data-theme="light"] #login-modal .text-white\/75 {
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] #login-modal .bg-primary .text-white,
[data-theme="light"] #login-modal .bg-primary h2,
[data-theme="light"] #login-modal .bg-primary p,
[data-theme="light"] #login-modal .bg-primary i,
[data-theme="light"] #login-modal .bg-primary button {
  color: #ffffff;
}
[data-theme="light"] #login-modal input.bg-\[\#1E1F29\] {
  background-color: #F4F4F4 !important;
  color: #000000;
  border-color: #E4E4E4 !important;
}
[data-theme="light"] #login-modal .modal-otp-input {
  color: #000000;
}

/* === Footer === */
[data-theme="light"] footer.bg-white\/\[0\.01\] {
  background-color: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] footer .text-white\/25 {
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] footer .text-white\/60 {
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] footer .bg-white\/25 {
  background-color: rgba(0, 0, 0, 0.06);
  color: #000000;
}
[data-theme="light"] footer .bg-white\/25 i {
  color: #000000;
}

/* === Discord support widget (bg #313338) === */
[data-theme="light"] .discord-float .bg-\[\#313338\] {
  background-color: #1f2937 !important;
}
[data-theme="light"] .discord-float .border-t-\[\#313338\] {
  border-top-color: #1f2937 !important;
}

/* === Discord support modal === */
[data-theme="light"] #discord-support-modal .bg-\[\#2b2d31\],
[data-theme="light"] #discord-support-modal .\!bg-\[\#2b2d31\] {
  background-color: #FFFFFF !important;
}
[data-theme="light"] #discord-support-modal .text-\[\#f2f3f5\] {
  color: #000000 !important;
}
[data-theme="light"] #discord-support-modal .bg-\[\#3b3d44\] {
  background-color: #F4F4F4 !important;
}
[data-theme="light"] #discord-support-modal .text-\[\#dbdee1\] {
  color: #000000 !important;
}
[data-theme="light"] #discord-support-modal .text-white\/60 {
  color: rgba(0, 0, 0, 0.5);
}

/* === Account sidebar avatar bg === */
[data-theme="light"] .border-primary\/30.bg-\[\#25262F\] {
  background-color: #F4F4F4 !important;
}

/* === Banner top primary (bg-primary) — mantém roxo, texto branco já é correto === */
/* (sem overrides, fica como dark) */

/* === Cards de feedback / wiki / pages — text-muted-foreground já vem de variável, OK === */

/* === Highlights ainda visíveis em light: bg-[#FF9800], bg-[#FF4844], #fcd703 === */
/* Esses são acentos coloridos (laranja/vermelho/amarelo) que funcionam bem em ambos temas. */

/* ===========================================================
   TEMA LIGHT — overrides para classes compartilhadas em pages
   =========================================================== */

/* glass-card (home.html, post.html, etc) */
[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* wiki-card-hover hover state (home.html) */
[data-theme="light"] .wiki-card-hover:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 25px rgba(126, 73, 255, 0.12), 0 0 0 1px rgba(126, 73, 255, 0.08);
}

/* Containers tipo bg-[#20212C], bg-[#3A3B45] (cart.html, orders.html, account) */
[data-theme="light"] .bg-\[\#20212C\] {
  background-color: #E4E4E4 !important;
}
[data-theme="light"] .bg-\[\#3A3B45\] {
  background-color: #E4E4E4 !important;
}
[data-theme="light"] .border-\[\#3A3B45\] {
  border-color: #E4E4E4 !important;
}
[data-theme="light"] .border-\[\#20212C\] {
  border-color: #E4E4E4 !important;
}

/* Texto em ouro (#E6BA6A) — fica fraco em light, ajustar para tom mais saturado */
[data-theme="light"] .text-\[\#E6BA6A\],
[data-theme="light"] .group-data-\[open\=true\]\:text-\[\#E6BA6A\][data-open="true"],
[data-theme="light"] .group[data-open="true"] .group-data-\[open\=true\]\:text-\[\#E6BA6A\] {
  color: #b8860b !important;
}
[data-theme="light"] .bg-\[\#E6BA6A\] {
  background-color: #d4a14a !important;
}

/* === Modais como playModal (home.html) com bg-black/90 — manter dark? === */
[data-theme="light"] #playModal.bg-black\/90 {
  background-color: rgba(0, 0, 0, 0.55);
}

/* === Tooltip "Clique para saber mais" (package) — bg-black === */
[data-theme="light"] .group .bg-black {
  background-color: #000000;
  color: #FFFFFF;
}
[data-theme="light"] .group .bg-black,
[data-theme="light"] .group .bg-black * {
  color: #FFFFFF !important;
}

/* === bg-black/70 (mobile drawer overlay) — usado também em outras páginas === */
[data-theme="light"] .bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.45);
}

/* === Banners e progress bars com box-shadow inset === */
[data-theme="light"] .month-progress-bar,
[data-theme="light"] [class*="progress"] {
  /* mantém — gradiente roxo/secundário continua bonito */
}

/* ===========================================================
   TEMA LIGHT — overrides para classes de pages (equipe/investidor/jogar)
   Padrão idêntico: back-link, badge, title, desc + cards/tabela/faq
   =========================================================== */

/* Back links */
[data-theme="light"] .equipe-back,
[data-theme="light"] .inv-back,
[data-theme="light"] .jogar-back,
[data-theme="light"] .post-back {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .equipe-back:hover,
[data-theme="light"] .inv-back:hover,
[data-theme="light"] .jogar-back:hover,
[data-theme="light"] .post-back:hover {
  color: rgba(0, 0, 0, 0.75);
}

/* Badges (Voltar/Equipe/Investidor) */
[data-theme="light"] .equipe-badge,
[data-theme="light"] .inv-badge,
[data-theme="light"] .jogar-badge,
[data-theme="light"] .post-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

/* Titles (#fff → preto) */
[data-theme="light"] .equipe-title,
[data-theme="light"] .inv-title,
[data-theme="light"] .jogar-title,
[data-theme="light"] .post-title,
[data-theme="light"] .inv-section-label,
[data-theme="light"] .section-label,
[data-theme="light"] .benefit-title,
[data-theme="light"] .tag-value,
[data-theme="light"] .cargo-title,
[data-theme="light"] .step-title,
[data-theme="light"] .cta-title,
[data-theme="light"] .discord-cta-title,
[data-theme="light"] .faq-question {
  color: #000000;
}

/* Descriptions e textos secundários */
[data-theme="light"] .equipe-desc,
[data-theme="light"] .inv-desc,
[data-theme="light"] .jogar-desc,
[data-theme="light"] .post-desc,
[data-theme="light"] .benefit-desc,
[data-theme="light"] .cta-desc,
[data-theme="light"] .discord-cta-desc,
[data-theme="light"] .faq-answer p,
[data-theme="light"] .step-desc,
[data-theme="light"] .preview-caption,
[data-theme="light"] .field-label,
[data-theme="light"] .tag-label,
[data-theme="light"] .cargo-count,
[data-theme="light"] .member-name {
  color: rgba(0, 0, 0, 0.6);
}

/* Step number (mantém roxo, OK) */
/* Step desc strong */
[data-theme="light"] .step-desc strong {
  color: rgba(0, 0, 0, 0.85);
}

/* IP value (verde) — fica OK em light mas com mais contraste */
[data-theme="light"] .ip-value {
  color: #16a34a;
  background: rgba(0, 0, 0, 0.03);
}

/* Step versions */
[data-theme="light"] .step-versions {
  color: rgba(0, 0, 0, 0.45);
}

/* Tabela investidor */
[data-theme="light"] .inv-th,
[data-theme="light"] .inv-th-left {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .inv-td {
  color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .inv-td-label {
  color: rgba(0, 0, 0, 0.85);
}

/* FAQ hover */
[data-theme="light"] .faq-question:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Glassmorphism: bg-white/X em cards do home (ícones sociais) */
[data-theme="light"] .bg-white\/20 {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .text-white {
  /* override apenas em containers white não-coloridos: difícil, evitamos override global */
}
/* TikTok ícone que era branco em fundo escuro: */
[data-theme="light"] .social-card-tiktok .text-white {
  color: #000000;
}
[data-theme="light"] .social-card-tiktok .bg-white\/20 {
  background-color: rgba(0, 0, 0, 0.06);
}

/* === Banner top primary com texto branco — manter (bg-primary continua roxo) === */
/* === Banner offer no header (bg-primary px-1.5 - top_announce) — OK, fica roxo === */

/* ===========================================================
   TEMA LIGHT — overrides para classes de regras.html e post.html
   =========================================================== */

/* Back link, badge, title, desc — já tratados acima como .regras-back, .regras-badge */
[data-theme="light"] .regras-back {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .regras-back:hover {
  color: rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .regras-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .regras-title,
[data-theme="light"] .regras-section-head h3,
[data-theme="light"] .cat-title,
[data-theme="light"] .detail-head-title,
[data-theme="light"] .rule-title,
[data-theme="light"] .rule-desc b,
[data-theme="light"] .note-title,
[data-theme="light"] .help-title {
  color: #000000;
}
[data-theme="light"] .regras-desc,
[data-theme="light"] .regras-section-head p,
[data-theme="light"] .cat-sub,
[data-theme="light"] .rule-desc,
[data-theme="light"] .rule-extra,
[data-theme="light"] .punish-val,
[data-theme="light"] .note-card p,
[data-theme="light"] .help-body p {
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .regras-stat .l,
[data-theme="light"] .punish-head,
[data-theme="light"] .punish-key,
[data-theme="light"] .rule-index,
[data-theme="light"] .rule-levels,
[data-theme="light"] .rule-chev,
[data-theme="light"] .cat-arrow,
[data-theme="light"] .regras-count {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .punish-head i {
  color: rgba(0, 0, 0, 0.4);
}

/* Promo (regras.html) usa hsl(var(--primary)/0.1) — funciona em light, mas ajusta cor texto */
[data-theme="light"] .regras-promo {
  color: rgba(0, 0, 0, 0.85);
}

/* cat-icon, rule-icon, note-icon: rgba(255,255,255,0.04) bg → rgba preto */
[data-theme="light"] .cat-icon,
[data-theme="light"] .punish-key,
[data-theme="light"] .note-icon,
[data-theme="light"] .detail-head-icon {
  background: rgba(0, 0, 0, 0.03);
}

/* Zone backgrounds — vermelho/verde/amarelo continuam, ajusta texto */
[data-theme="light"] .zone li {
  color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .zone-red .zone-title { color: #c53030; }
[data-theme="light"] .zone-green .zone-title { color: #16a34a; }
[data-theme="light"] .zone-yellow .zone-title { color: #c08600; }

/* === post.html === */
[data-theme="light"] .post-meta {
  color: rgba(0, 0, 0, 0.55);
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .post-author-name {
  color: rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .post-meta-dot {
  background: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .post-body {
  color: rgba(0, 0, 0, 0.78);
}
[data-theme="light"] .post-body h1,
[data-theme="light"] .post-body h2,
[data-theme="light"] .post-body h3,
[data-theme="light"] .post-body strong {
  color: #000000;
}
[data-theme="light"] .post-body blockquote {
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .post-body th {
  color: #000000;
}
[data-theme="light"] .post-body td {
  color: rgba(0, 0, 0, 0.7);
}

/* === login.html (página) — bg-[#31323B] e bg-[#1E1F29] já tratados via genéricos === */
[data-theme="light"] #magic-link-form .text-white,
[data-theme="light"] form#magic-link-form .text-white,
[data-theme="light"] form#magic-link-form input.text-white {
  color: #000000;
}
[data-theme="light"] form#magic-link-form input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Texto "Faça seu login" na página /login (header da página) */
[data-theme="light"] .max-w-md .text-white {
  color: #000000;
}

/* === wiki.html, loja.html, cart.html — usam bg-muted/bg-accent (variáveis) === */
/* Já adaptam automaticamente via --muted e --accent. */

/* === maintenance.html, 404.html, index.html — texto e backgrounds via variáveis === */
/* Mantém via variável. */

/* ===========================================================
   FILTRO de descrições com style="..." inline (painel CentralCart)
   Detecta cores hardcoded comuns nas descrições de produtos
   e adapta automaticamente ao tema light
   =========================================================== */

/* Containers escuros inline (background: #30313A, #25262F, #1a1a1a, etc) */
[data-theme="light"] [style*="#30313A"],
[data-theme="light"] [style*="#30313a"],
[data-theme="light"] [style*="background: #30313A"],
[data-theme="light"] [style*="background:#30313A"] {
  background: #F4F4F4 !important;
  border-color: #E4E4E4 !important;
  color: #000000;
}
[data-theme="light"] [style*="#25262F"],
[data-theme="light"] [style*="#25262f"] {
  background: #FFFFFF !important;
  border-color: #E4E4E4 !important;
  color: #000000;
}
[data-theme="light"] [style*="#1a1a1a"],
[data-theme="light"] [style*="#1A1A1A"] {
  background: #FFFFFF !important;
  color: #000000;
}
[data-theme="light"] [style*="#1E1F29"],
[data-theme="light"] [style*="#1e1f29"] {
  background: #F4F4F4 !important;
  color: #000000;
}
[data-theme="light"] [style*="#252331"],
[data-theme="light"] [style*="#1a1b23"] {
  background: #FFFFFF !important;
  color: #000000;
}

/* Borders/hairlines com rgba branco */
[data-theme="light"] [style*="rgba(255, 255, 255, 0.1)"],
[data-theme="light"] [style*="rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.05)"],
[data-theme="light"] [style*="rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="rgba(255, 255, 255, 0.15)"] {
  border-color: #E4E4E4 !important;
}

/* Texto branco inline (color: #ffffff, color: #fff, color: white) */
[data-theme="light"] [style*="color: #ffffff"],
[data-theme="light"] [style*="color:#ffffff"],
[data-theme="light"] [style*="color: #FFFFFF"],
[data-theme="light"] [style*="color:#FFFFFF"],
[data-theme="light"] [style*="color: #fff;"],
[data-theme="light"] [style*="color:#fff;"],
[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color:white"] {
  color: #000000 !important;
}

/* Texto rgba(255,255,255, X) — branco translúcido inline → preto translúcido */
[data-theme="light"] [style*="color: rgba(255,255,255,0.85)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.85)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.85)"] {
  color: rgba(0, 0, 0, 0.85) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.8)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.8)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.8)"] {
  color: rgba(0, 0, 0, 0.8) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.75)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.75)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.75)"] {
  color: rgba(0, 0, 0, 0.75) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.7)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.7)"] {
  color: rgba(0, 0, 0, 0.75) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.65)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.65)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.65)"] {
  color: rgba(0, 0, 0, 0.7) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.6)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.6)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"] {
  color: rgba(0, 0, 0, 0.7) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.5)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"] {
  color: rgba(0, 0, 0, 0.65) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.45)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.45)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.45)"] {
  color: rgba(0, 0, 0, 0.6) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.4)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"] {
  color: rgba(0, 0, 0, 0.55) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.35)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.35)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.35)"] {
  color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] [style*="color: rgba(255,255,255,0.25)"],
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.25)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.25)"] {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* PORÉM: ícones decorativos (div com background colorido + color: white) — mantém branco no light */
[data-theme="light"] [style*="background: #9772F2"][style*="color: white"],
[data-theme="light"] [style*="background:#9772F2"][style*="color: white"],
[data-theme="light"] [style*="background: #9772f2"][style*="color: white"],
[data-theme="light"] [style*="background:#9772f2"][style*="color: white"],
[data-theme="light"] [style*="background: #F9B045"][style*="color: white"],
[data-theme="light"] [style*="background:#F9B045"][style*="color: white"],
[data-theme="light"] [style*="background: #67C05F"][style*="color: white"],
[data-theme="light"] [style*="background:#67C05F"][style*="color: white"],
[data-theme="light"] [style*="background: #5865F2"][style*="color: white"],
[data-theme="light"] [style*="background:#5865F2"][style*="color: white"],
[data-theme="light"] [style*="background: #7e49ff"][style*="color: white"],
[data-theme="light"] [style*="background: #FF4844"][style*="color: white"],
[data-theme="light"] [style*="background: #ffae37"][style*="color: white"],
[data-theme="light"] [style*="background: #FFAA00"][style*="color: white"] {
  color: #FFFFFF !important;
}

/* Texto roxo primary (#9772f2, #9772F2, #7e49ff) — mantém roxo (cor da marca) */
/* não precisa override, fica visível em fundo claro */

/* Os ícones decorativos (background: #9772F2, #F9B045, #67C05F, etc) ficam OK em ambos os temas */

/* === Cores neon/claras (texto em descrições) que ficam apagadas em fundo branco === */

/* #ffff55 — amarelo claro neon → dourado escuro */
[data-theme="light"] [style*="color: #ffff55"],
[data-theme="light"] [style*="color:#ffff55"],
[data-theme="light"] [style*="color: #FFFF55"],
[data-theme="light"] [style*="color:#FFFF55"] {
  color: #B8860B !important;
}

/* #55ff55 — verde claro neon → verde escuro saturado */
[data-theme="light"] [style*="color: #55ff55"],
[data-theme="light"] [style*="color:#55ff55"],
[data-theme="light"] [style*="color: #55FF55"],
[data-theme="light"] [style*="color:#55FF55"] {
  color: #16A34A !important;
}

/* #fed604 — amarelo médio → amarelo escuro */
[data-theme="light"] [style*="color: #fed604"],
[data-theme="light"] [style*="color:#fed604"],
[data-theme="light"] [style*="color: #FED604"],
[data-theme="light"] [style*="color:#FED604"] {
  color: #9B5A00 !important;
}

/* #7fff00 — verde lima → verde escuro */
[data-theme="light"] [style*="color: #7fff00"],
[data-theme="light"] [style*="color:#7fff00"],
[data-theme="light"] [style*="color: #7FFF00"],
[data-theme="light"] [style*="color:#7FFF00"] {
  color: #15803D !important;
}

/* #55ffff — ciano claro neon → ciano escuro */
[data-theme="light"] [style*="color: #55ffff"],
[data-theme="light"] [style*="color:#55ffff"],
[data-theme="light"] [style*="color: #55FFFF"],
[data-theme="light"] [style*="color:#55FFFF"] {
  color: #0891B2 !important;
}

/* #a3e635 — verde lima claro (lime-400) → lime escuro */
[data-theme="light"] [style*="color: #a3e635"],
[data-theme="light"] [style*="color:#a3e635"],
[data-theme="light"] [style*="color: #A3E635"],
[data-theme="light"] [style*="color:#A3E635"] {
  color: #65A30D !important;
}

/* === Banner Cupom de Natal === */
[data-theme="light"] #banner-cupom-natal {
  background: linear-gradient(to right, rgba(22, 163, 74, 0.08), rgba(34, 197, 94, 0.04)) !important;
  border-color: rgba(22, 163, 74, 0.45) !important;
}
[data-theme="light"] #banner-cupom-natal:hover {
  border-color: rgba(22, 163, 74, 0.7) !important;
  background: linear-gradient(to right, rgba(22, 163, 74, 0.14), rgba(34, 197, 94, 0.09)) !important;
}
/* Texto "Cupom de desconto" (text-white) — preto em fundo claro */
[data-theme="light"] #banner-cupom-natal p.text-white {
  color: #000000 !important;
}
/* Ícone do presente dentro do quadrado verde — mantém branco */
[data-theme="light"] #banner-cupom-natal .bg-green-600 {
  color: #FFFFFF !important;
}
[data-theme="light"] #banner-cupom-natal .bg-green-600 i,
[data-theme="light"] #banner-cupom-natal .bg-green-600 .text-white {
  color: #FFFFFF !important;
}
/* Verde-400 muito claro — escurecer pra ler em fundo branco */
[data-theme="light"] #banner-cupom-natal .text-green-400 {
  color: #15803D !important;
}
/* Badges verdes translúcidos — mais saturação */
[data-theme="light"] #banner-cupom-natal .bg-green-600\/20 {
  background-color: rgba(22, 163, 74, 0.15) !important;
}
[data-theme="light"] #banner-cupom-natal .bg-green-500\/20 {
  background-color: rgba(34, 197, 94, 0.18) !important;
}

/* === Cores únicas restantes === */

/* === Cart/Checkout — cores adicionais não cobertas === */
[data-theme="light"] .bg-\[\#1E1F2B\] {
  background-color: #FFFFFF !important;
}
/* Texto branco dentro do modal PIX (bg-[#1E1F2B]) — vira preto */
[data-theme="light"] #pix-modal .text-white,
[data-theme="light"] .bg-\[\#1E1F2B\] .text-white,
[data-theme="light"] #pix-modal h5,
[data-theme="light"] #pix-modal h3 {
  color: #000000 !important;
}
/* MAS: texto branco DENTRO do botão azul "Copiar código PIX" e do botão cinza "Pronto" — preserva branco */
[data-theme="light"] #pix-modal .bg-\[\#5865F2\],
[data-theme="light"] #pix-modal .bg-\[\#5865F2\] *,
[data-theme="light"] #pix-modal #copy-pix,
[data-theme="light"] #pix-modal #copy-pix * {
  color: #FFFFFF !important;
}
[data-theme="light"] #pix-modal .bg-\[\#3A3B45\],
[data-theme="light"] #pix-modal .bg-\[\#3A3B45\] * {
  color: #000000 !important;
}
[data-theme="light"] .bg-\[\#292A33\] {
  background-color: #F4F4F4 !important;
}
[data-theme="light"] .bg-\[\#3A3B45\] {
  background-color: #F4F4F4 !important;
  color: #000000;
}
[data-theme="light"] .text-\[\#A0A3BD\] {
  color: #777777 !important;
}
[data-theme="light"] .border-\[\#3A3B45\] {
  border-color: #E4E4E4 !important;
}

/* Botões de gateway (PIX, PAYPAL, MERCADOPAGO) — fundo cinza claro com border, ativo roxo */
[data-theme="light"] .cc__checkout___gateways button {
  background: #F4F4F4 !important;
  border-color: #E4E4E4 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .cc__checkout___gateways button:hover {
  border-color: hsl(var(--primary) / 0.5) !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .cc__checkout___gateways button[data-active="true"] {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.08) !important;
  box-shadow: 0 4px 12px hsl(var(--primary) / 0.15);
}

/* Substituir imagem do MercadoPago por versão clara no tema light */
[data-theme="light"] .cc__checkout___gateways button[value="MERCADOPAGO"] img {
  content: url('https://i.imgur.com/COuaqWU.png');
  object-fit: contain;
  width: 8rem;
  height: 3rem;
}


/* Badges flutuantes em cima dos cards de gateway (Mais usado / Estrangeiro / Cartão) — texto branco */
[data-theme="light"] .cc__checkout___gateways span.bg-green-500,
[data-theme="light"] .cc__checkout___gateways span.bg-blue-500,
[data-theme="light"] .cc__checkout___gateways span.bg-gray-500,
[data-theme="light"] span.bg-amber-500,
[data-theme="light"] span.bg-amber-500 *,
[data-theme="light"] .cc__checkout___gateways span.bg-green-500 *,
[data-theme="light"] .cc__checkout___gateways span.bg-blue-500 *,
[data-theme="light"] .cc__checkout___gateways span.bg-gray-500 * {
  color: #FFFFFF !important;
}

/* Números das etapas (1, 2, 3 com bg-blue-600) — texto branco SEMPRE (alta especificidade) */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-600 *,
[data-theme="light"] .bg-\[\#25262F\] .bg-blue-600,
[data-theme="light"] .bg-\[\#25262F\] .bg-blue-600.text-white,
[data-theme="light"] div.bg-blue-600.text-white,
[data-theme="light"] .bg-\[\#25262F\] div.bg-blue-600 {
  color: #FFFFFF !important;
}

/* Botão remover (lixeira vermelha bg-red-500) — texto/ícone branco preservado */
[data-theme="light"] .bg-red-500,
[data-theme="light"] .bg-red-500 *,
[data-theme="light"] .bg-red-600,
[data-theme="light"] .bg-red-600 *,
[data-theme="light"] .bg-\[\#25262F\] .bg-red-500,
[data-theme="light"] .bg-\[\#25262F\] .bg-red-500 *,
[data-theme="light"] .bg-\[\#25262F\] .bg-red-600,
[data-theme="light"] .bg-\[\#25262F\] .bg-red-600 *,
[data-theme="light"] button.bg-red-500,
[data-theme="light"] button.bg-red-500 i,
[data-theme="light"] button.cc__checkout___remove,
[data-theme="light"] button.cc__checkout___remove i {
  color: #FFFFFF !important;
}

/* Valores (Subtotal/Total/Desconto) — text-gray-300 fica apagado, deixar mais escuro */
[data-theme="light"] .text-gray-300 {
  color: #3D3D3D !important;
}
[data-theme="light"] .text-gray-400 {
  color: #777777 !important;
}
[data-theme="light"] .text-gray-200 {
  color: #000000 !important;
}

/* Botão verde "Finalizar Compra" — texto branco SEMPRE (alta especificidade pra ganhar de bg-[#25262F] .text-white → preto) */
[data-theme="light"] .bg-\[\#25262F\] button.bg-green-600,
[data-theme="light"] .bg-\[\#25262F\] button.bg-green-600.text-white,
[data-theme="light"] .bg-\[\#25262F\] .bg-green-600,
[data-theme="light"] .bg-\[\#25262F\] .bg-green-700,
[data-theme="light"] button.bg-green-600,
[data-theme="light"] button.bg-green-600.text-white,
[data-theme="light"] .bg-green-600,
[data-theme="light"] .bg-green-700,
[data-theme="light"] button#checkout.text-white,
[data-theme="light"] #checkout {
  color: #FFFFFF !important;
}
[data-theme="light"] .bg-\[\#25262F\] button.bg-green-600 *,
[data-theme="light"] button.bg-green-600 *,
[data-theme="light"] .bg-green-600 *,
[data-theme="light"] .bg-green-700 *,
[data-theme="light"] #checkout * {
  color: #FFFFFF !important;
}


/* category.html — tabela comparativa VIPs */
[data-theme="light"] .bg-\[\#333333\] {
  background-color: #E4E4E4 !important;
}
[data-theme="light"] .border-\[\#333333\] {
  border-color: #E4E4E4 !important;
}
/* Linhas internas (variant *:border-[#333333] = aplica border-color em todos os filhos) */
[data-theme="light"] .\*\:border-\[\#333333\] > * {
  border-color: #E4E4E4 !important;
}

/* Células da tabela (bg-[#1a1a1a]) */
[data-theme="light"] .bg-\[\#1a1a1a\] {
  background-color: #FFFFFF !important;
}
/* Textos das células (text-gray-200) */
[data-theme="light"] .bg-\[\#1a1a1a\] .text-gray-200,
[data-theme="light"] .bg-\[\#1a1a1a\].text-gray-200,
[data-theme="light"] .text-gray-200 {
  color: #000000;
}
/* Texto branco do preço (text-white) dentro da célula */
[data-theme="light"] .bg-\[\#1a1a1a\] .text-white {
  color: #000000;
}
/* Ícones xmark "não disponível" — text-white/20 fica invisível em branco */
[data-theme="light"] .bg-\[\#1a1a1a\] .text-white\/20,
[data-theme="light"] .text-white\/20 {
  color: rgba(0, 0, 0, 0.25);
}

/* Tooltip da tabela (bg-stone-900) — manter dark com texto branco para destaque */
[data-theme="light"] .tooltip.bg-stone-900 {
  background-color: #1a1a1a !important;
  color: #FFFFFF;
  border-color: #1a1a1a !important;
}
[data-theme="light"] .tooltip.bg-stone-900 p {
  color: #FFFFFF;
}
[data-theme="light"] .tooltip.bg-stone-900 svg path[fill="#333333"] {
  fill: #1a1a1a;
}


/* === Tabela VIPs (UX/UI light) — header, zebra striping, footer === */

/* Header da tabela (primeiras 4 células: Tag no jogo, SUPER, LEGEND, SUPREME) */
[data-theme="light"] .grid-cols-\[0\.8fr_1fr_1fr_1fr\] > div:nth-child(-n+4) {
  font-weight: 600;
}

/* Coluna esquerda (labels) — texto mais escuro */
[data-theme="light"] .grid-cols-\[0\.8fr_1fr_1fr_1fr\] > div:nth-child(4n+1) {
  color: #000000;
}

/* Container externo — borda em volta da tabela */
[data-theme="light"] .grid-cols-\[0\.8fr_1fr_1fr_1fr\].bg-\[\#333333\] {
  border: 1px solid #E4E4E4 !important;
}

/* wiki.html — bloco de comando */
[data-theme="light"] .wiki-cmd {
  background: #F4F4F4 !important;
  color: #000000;
}
[data-theme="light"] .wiki-alert-warning i {
  /* mantém amarelo, OK em ambos os temas */
}

/* widgets/month_goal — progress bar background */
[data-theme="light"] .bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.08);
}

/* cart.html scrollbar custom (style inline) */
[data-theme="light"] [style*="scrollbar-color"] {
  scrollbar-color: #A2A2A2 #F4F4F4 !important;
}

/* ===========================================================
   SWEEP AGRESSIVO de scrollbars no tema light
   Garante que QUALQUER scrollbar (global, modal, dropdown, sidebar) use a paleta clara
   =========================================================== */
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: #A2A2A2 !important;
  border-color: #F4F4F4 !important;
  border-radius: 5px !important;
  animation: none !important;
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary)) !important;
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: #F4F4F4 !important;
}
[data-theme="light"] *::-webkit-scrollbar-corner {
  background: #F4F4F4 !important;
}
[data-theme="light"] * {
  scrollbar-color: #A2A2A2 #F4F4F4;
}

/* Wiki sidebar — scrollbar fininho transparente */
[data-theme="light"] .wiki-sidebar::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.4) !important;
}
[data-theme="light"] .wiki-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}
[data-theme="light"] .wiki-sidebar {
  scrollbar-color: hsl(var(--primary) / 0.4) transparent !important;
}

/* ===========================================================
   TEMA LIGHT — CAMADA CIRÚRGICA: text-white → preto APENAS em
   containers que viraram brancos (não em cards com bg-image dark)
   =========================================================== */

/* Helper: lista de containers que viraram brancos no light → texts dentro viram pretos */
[data-theme="light"] .bg-\[\#25262F\] .text-white,
[data-theme="light"] .bg-\[\#25262F\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#252331\] .text-white,
[data-theme="light"] .bg-\[\#252331\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#1a1b23\] .text-white,
[data-theme="light"] .bg-\[\#1a1b23\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#1E1F29\] .text-white,
[data-theme="light"] .bg-\[\#1E1F29\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#2b2937\] .text-white,
[data-theme="light"] .bg-\[\#2b2937\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#30313A\] .text-white,
[data-theme="light"] .bg-\[\#30313A\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#31323B\] .text-white,
[data-theme="light"] .bg-\[\#31323B\] [class^="text-white\/"],
[data-theme="light"] .bg-\[\#20212C\] .text-white,
[data-theme="light"] .bg-\[\#3A3B45\] .text-white,
[data-theme="light"] .bg-\[\#333333\] .text-white {
  color: #000000 !important;
}

/* Footer (bg-white/[0.01] tipo glass clarinho) — texto branco vira preto */
[data-theme="light"] footer .text-white,
[data-theme="light"] footer [class^="text-white\/"] {
  color: #000000;
}

/* Texto branco dentro de containers bg-muted/bg-accent (que viram cinza claro no light) */
[data-theme="light"] .bg-muted .text-white,
[data-theme="light"] .bg-muted h1.text-white,
[data-theme="light"] .bg-muted h2.text-white,
[data-theme="light"] .bg-muted h3.text-white,
[data-theme="light"] .bg-muted h4.text-white,
[data-theme="light"] .bg-accent .text-white,
[data-theme="light"] .bg-accent h1.text-white,
[data-theme="light"] .bg-accent h2.text-white,
[data-theme="light"] .bg-accent h3.text-white,
[data-theme="light"] .bg-accent h4.text-white {
  color: #000000 !important;
}
/* Mas preserva branco em botões/elementos coloridos dentro de bg-muted/bg-accent */
[data-theme="light"] .bg-muted .bg-primary,
[data-theme="light"] .bg-muted .bg-primary *,
[data-theme="light"] .bg-muted .btn-primary,
[data-theme="light"] .bg-muted .btn-primary *,
[data-theme="light"] .bg-accent .bg-primary,
[data-theme="light"] .bg-accent .bg-primary *,
[data-theme="light"] .bg-accent .btn-primary,
[data-theme="light"] .bg-accent .btn-primary * {
  color: #FFFFFF !important;
}

/* Containers conhecidos por id/classe específica: drawer mobile, dropdown user, login modal, cart preview */
[data-theme="light"] #mobile-menu-overlay .text-white,
[data-theme="light"] #user-dropdown .text-white,
[data-theme="light"] #login-modal .text-white:not(.bg-primary *):not(.bg-primary),
[data-theme="light"] .group\/cart .bg-\[\#252331\] .text-white {
  color: #000000;
}

/* Login modal: header roxo (bg-primary) mantém branco */
[data-theme="light"] #login-modal .bg-primary,
[data-theme="light"] #login-modal .bg-primary * {
  color: #ffffff !important;
}

/* Borders white → cinza no light — overrides apenas em containers brancos (não atrapalha cards dark) */
[data-theme="light"] footer .border-white\/5,
[data-theme="light"] footer .border-white\/10,
[data-theme="light"] footer .border-white\/15,
[data-theme="light"] #mobile-menu-overlay .border-white\/10,
[data-theme="light"] #mobile-menu-overlay .border-white\/15,
[data-theme="light"] #user-dropdown .border-white\/10,
[data-theme="light"] .group\/cart .border-white\/20 {
  border-color: rgba(0, 0, 0, 0.1);
}

/* RESTAURAR / PRESERVAR branco onde precisa: */

/* Banner top primary (anúncio roxo no topo) */
[data-theme="light"] a.bg-primary p,
[data-theme="light"] a.bg-primary span,
[data-theme="light"] a.bg-primary {
  color: #ffffff;
}

/* Discord buttons (#5865F2) e similares — manter texto branco */
[data-theme="light"] [style*="#5865F2"],
[data-theme="light"] [style*="background: #5865F2"] *,
[data-theme="light"] [style*="background:#5865F2"] *,
[data-theme="light"] .bg-\[\#5865F2\] *,
[data-theme="light"] .help-btn,
[data-theme="light"] .help-btn * {
  color: #ffffff;
}

/* Cart badge (laranja FF9800) e estoque baixo (FF4844) — texto branco em fundo colorido */
[data-theme="light"] .bg-\[\#FF9800\],
[data-theme="light"] .bg-\[\#FF4844\] {
  color: #ffffff;
}

/* Toastify */
[data-theme="light"] .toastify,
[data-theme="light"] .toastify * {
  color: #ffffff !important;
}

/* btn-primary (botões roxos) — texto branco SEMPRE */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary * {
  color: #ffffff !important;
}

/* Hover de botões — fundo sólido (não translúcido) no light, mantém contraste */
[data-theme="light"] .btn-primary:hover {
  background-color: hsl(var(--primary)) !important;
  filter: brightness(0.92);
}
[data-theme="light"] .hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary)) !important;
  filter: brightness(0.92);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .hover\:bg-primary\/30:hover {
  background-color: hsl(var(--primary) / 0.18) !important;
}

/* Bg primary translúcido (bg-primary/10, bg-primary/15, bg-primary/20) — manter mais saturado em fundo branco */
[data-theme="light"] .bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.12) !important;
}
[data-theme="light"] .bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.18) !important;
}
[data-theme="light"] .bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.22) !important;
}

/* === NAVBAR (header desktop) — texto branco em cima do hero roxo === */
[data-theme="light"] nav#navbar a {
  color: #ffffff !important;
}
[data-theme="light"] nav#navbar a.text-secondary {
  color: hsl(var(--secondary)) !important;
}
/* Quando o nav está scrolled (bg-background branco) → texto preto, MAS preservar branco em a.bg-primary e btn-primary */
[data-theme="light"] nav#navbar[data-scrolled="true"] a:not(.bg-primary):not(.btn-primary) {
  color: #000000 !important;
}
[data-theme="light"] nav#navbar[data-scrolled="true"] a:not(.bg-primary):not(.btn-primary) i {
  color: #000000;
}
[data-theme="light"] nav#navbar[data-scrolled="true"] a.text-secondary {
  color: hsl(var(--secondary)) !important;
}
/* Carrinho roxo no navbar scrolled — ícone continua branco */
[data-theme="light"] nav#navbar[data-scrolled="true"] a.bg-primary,
[data-theme="light"] nav#navbar[data-scrolled="true"] a.bg-primary i,
[data-theme="light"] nav#navbar[data-scrolled="true"] a.bg-primary span {
  color: #FFFFFF !important;
}
/* Finalizar compra (btn-primary dentro do dropdown do carrinho) — branco */
[data-theme="light"] nav#navbar[data-scrolled="true"] .btn-primary,
[data-theme="light"] nav#navbar .btn-primary,
[data-theme="light"] .group\/cart .btn-primary {
  color: #FFFFFF !important;
}

/* === HERO / spot-background (em cima do gradient roxo) — texto branco === */
[data-theme="light"] .spot-background h1,
[data-theme="light"] .spot-background h2,
[data-theme="light"] .spot-background h3,
[data-theme="light"] .spot-background p:not(.text-foreground):not(.text-muted-foreground),
[data-theme="light"] .spot-background a:not(.btn-primary):not([href="/cart"]) {
  color: #ffffff;
}

/* === Cards com background-image (feature cards na home) — preservar text-white === */
/* Esses cards têm <div absolute bg-cover style="background-image:url(...)"> + gradient dark.
   Se text-white estava como branco, deve continuar branco. */
[data-theme="light"] a.bg-\[\#0a0a0a\] .text-white,
[data-theme="light"] a.bg-\[\#0a0a0a\] .text-white\/70,
[data-theme="light"] a.bg-\[\#0a0a0a\] .text-white\/60,
[data-theme="light"] .bg-\[\#0a0a0a\][class*="bg-cover"] .text-white,
[data-theme="light"] [style*="background-image"] .text-white,
[data-theme="light"] [style*="background-image"] .text-white\/70,
[data-theme="light"] [style*="background-image"] .text-white\/60,
[data-theme="light"] [style*="background:#5865F2"] .text-white,
[data-theme="light"] [style*="background: #5865F2"] .text-white,
[data-theme="light"] [style*="background:#5865F2"] .text-white\/70,
[data-theme="light"] [style*="background: #5865F2"] .text-white\/60 {
  color: #ffffff !important;
}

/* === Feature cards (Loja, Wiki) — branco com gradient claro no light === */
[data-theme="light"] a.bg-\[\#0a0a0a\] {
  background-color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] a.bg-\[\#0a0a0a\]:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Remover border-white/5 dos feature cards (que vira escura por minha regra global) */
[data-theme="light"] a.bg-\[\#0a0a0a\].border-white\/5,
[data-theme="light"] a.bg-\[\#0a0a0a\] {
  border: none !important;
}

/* Gradient overlay (from-black via-black/50 to-transparent) — REMOVIDO no light, só a imagem aparece */
[data-theme="light"] a.bg-\[\#0a0a0a\] .bg-gradient-to-t,
[data-theme="light"] a.bg-\[\#0a0a0a\] .bg-gradient-to-t.from-black {
  background-image: none !important;
}

/* Imagem do card com opacity-80 — no light mistura com branco e fica lavada, força 100% */
[data-theme="light"] a.bg-\[\#0a0a0a\] .opacity-80 {
  opacity: 1 !important;
}
/* Versão mobile dos mesmos cards (opacity-[0.25] que mistura com fundo) */
[data-theme="light"] a.bg-background .opacity-\[0\.25\] {
  opacity: 1 !important;
}

/* Text shadow sutil nos títulos brancos sobre imagem (sem overlay) */
[data-theme="light"] a.bg-\[\#0a0a0a\] h2.text-white,
[data-theme="light"] a.bg-background h2.text-white {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Versão mobile dos mesmos cards (gradient inline rgba(10,8,15,X)) — também removido */
[data-theme="light"] [style*="rgba(10,8,15,0.82)"] {
  background: none !important;
}

/* Discord card (bg #5865F2) também ganha shadow no light */
[data-theme="light"] a[style*="#5865F2"] {
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* === FAQ index.html (.faq-*) — color: #fff e rgba(255,255,255,X) === */
[data-theme="light"] .faq-heading-text,
[data-theme="light"] .faq-q {
  color: #000000;
}
[data-theme="light"] .faq-a {
  color: rgba(0, 0, 0, 0.6);
}

/* === Wiki classes (.wiki-*) — diversas cores fixas === */
[data-theme="light"] .wiki-info-card,
[data-theme="light"] .wiki-step,
[data-theme="light"] .wiki-faq-q,
[data-theme="light"] .wiki-tab,
[data-theme="light"] .wiki-role-badge,
[data-theme="light"] .wiki-inv-table th {
  background: #F4F4F4 !important;
  color: #000000;
}
[data-theme="light"] .wiki-faq-q:hover {
  background: #E4E4E4 !important;
}
[data-theme="light"] [class^="wiki-"] {
  /* fallback genérico de texto */
}

/* === H1/H2/H3 sem classe explícita — JÁ herda text-foreground via body === */
/* Mas alguns têm color: #fff direto em <style> blocks dentro de pages: */
[data-theme="light"] .post-title,
[data-theme="light"] .equipe-title,
[data-theme="light"] .inv-title,
[data-theme="light"] .jogar-title,
[data-theme="light"] .regras-title,
[data-theme="light"] .cargo-title,
[data-theme="light"] .step-title,
[data-theme="light"] .cta-title,
[data-theme="light"] .discord-cta-title,
[data-theme="light"] .benefit-title,
[data-theme="light"] .tag-value,
[data-theme="light"] .detail-head-title,
[data-theme="light"] .rule-title,
[data-theme="light"] .note-title,
[data-theme="light"] .help-title {
  color: #000000 !important;
}

/* === Garantir que h2/h3 dentro de cards bg-accent / bg-muted (que viram claros) tenham texto preto === */
/* hsl(var(--accent)) e hsl(var(--muted)) já são claros no light, e text-foreground (preto) cobre */
/* Mas elementos com color:#fff inline ou em <style> precisam de override explícito acima */

.slide-down {
  animation: slideDown 0.3s ease forwards;
}

/* Reordenação dos widgets no responsivo */
@media (max-width: 1023px) {
  /* Força o container principal a ser flexbox */
  .container.grid.grid-cols-1.gap-8.lg\:grid-cols-\[300px_1fr\] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* A div que contém category e widgets vira flexbox também */
  .container.grid > .flex.flex-col.gap-8 {
    display: contents !important; /* Remove a div do fluxo */
  }

  /* Define a ordem dos elementos */
  .category-selector-area {
    order: 1;
  }

  .account-sidebar-area {
    order: 1;
  }

  .main-content-area {
    order: 2;
  }

  .widget-top-donators {
    order: 3;
  }

  .widget-month-goal {
    order: 4;
  }

  /* Fix botão "Continuar lendo" cortado em notícias */
  .post-gradient + div {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  .post-gradient + div > div {
    flex: 1 1 100% !important;
  }

  .post-gradient + div > a {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
}