/* ==========================================================================
   MegaTop — Design System CSS (DESIGN.md)
   Tema Dark (Padrão): #090d16 (bg), #111827 (surface), #10b981 (brand), #06b6d4 (secondary)
   Tema Claro Oficial (Loterias Caixa): #f4f6f9 (bg), #ffffff (surface), #005ca9 (azul caixa), #209869 (verde loterias), #f39200 (laranja)
   ========================================================================== */

/* ==================== FONTES LOCAIS (HELVETICA) ==================== */
@font-face {
  font-family: 'Helvetica';
  font-weight: 400;
  font-style: normal;
  src: local('Helvetica'), local('Helvetica Neue'), url('../fonts/HelveticaNeue-Roman.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica';
  font-weight: 500;
  font-style: normal;
  src: local('Helvetica Medium'), local('Helvetica Neue Medium'), url('../fonts/HelveticaNeueMedium.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica';
  font-weight: 700;
  font-style: normal;
  src: local('Helvetica Bold'), local('Helvetica Neue Bold'), url('../fonts/HelveticaNeueBold.woff') format('woff');
}

:root {
  --color-bg: #090d16;
  --color-surface: #111827;
  --color-surface-hover: #1e293b;
  --color-border: #1f2937;
  --color-brand: #10b981;
  --color-brand-glow: rgba(16, 185, 129, 0.25);
  --color-secondary: #06b6d4;
  --color-secondary-glow: rgba(6, 182, 212, 0.2);
  --color-alert: #f59e0b;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #9ca3af;
  --font-sans: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'Lexend', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==================== TEMA CLARO OFICIAL LOTERIAS CAIXA ==================== */
body.theme-caixa {
  --color-bg: #f9fbfb;              /* Imagem 2: Branco meio azulado padrão */
  --color-bg-secondary: #d0e0e3;    /* Imagem 2: Azul bem suave para separar outros elementos */
  --color-surface: #ffffff;         /* Superfície dos cards: Branco puro */
  --color-surface-hover: #f0f6f8;
  --color-border: #cfdfe2;
  --color-brand: #549969;           /* Imagem 4: Verde oficial da Mega-Sena */
  --color-brand-glow: rgba(84, 153, 105, 0.25);
  --color-secondary: #005ca9;       /* Imagem 1: Azul institucional Caixa */
  --color-secondary-glow: rgba(0, 92, 169, 0.25);
  --color-alert: #f39200;           /* Imagem 1: Laranja vibrante Caixa */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  background-color: #f9fbfb !important;
  color: #0f172a !important;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==================== REGRAS TIPOGRÁFICAS (HELVETICA vs LEXEND) ==================== */
/* 1. Todos os textos gerais: HELVETICA */
body, p, input, select, textarea, label, td, th {
  font-family: var(--font-sans);
}

/* 2. Exceções em LEXEND: Título MegaTop, Títulos, Sub-Títulos e Menus */
#btn-brand-home h1,
#btn-brand-home span,
#btn-brand-home #logo-top-text,
h1, h2, h3, h4, h5, h6,
.font-heading,
.section-title,
.card-title,
#sidebar-nav,
#sidebar-nav button,
#sidebar-nav span,
#sidebar-header-toggle,
.sidebar-item,
#dropdown-menu-caixa,
#dropdown-menu-caixa button,
.subtitle,
.sub-title {
  font-family: var(--font-title) !important;
}

/* ==================== IMAGEM 1: CABEÇALHO OFICIAL CAIXA ==================== */
body.theme-caixa header {
  background: linear-gradient(180deg, #0761a8 0%, #005ca9 100%) !important;
  border-bottom: 3.5px solid #f39200 !important; /* Faixa laranja Caixa */
  box-shadow: 0 4px 14px rgba(0, 92, 169, 0.25) !important;
}

/* REGRA ABSOLUTA: No cabeçalho, APENAS Azul, Branco e Laranja (ZERO texto preto) */
body.theme-caixa header,
body.theme-caixa header h1,
body.theme-caixa header h2,
body.theme-caixa header h3,
body.theme-caixa header p,
body.theme-caixa header span,
body.theme-caixa header div,
body.theme-caixa header button,
body.theme-caixa header .text-white,
body.theme-caixa header .text-gray-400,
body.theme-caixa header .text-gray-300,
body.theme-caixa header .text-gray-200,
body.theme-caixa header .text-emerald-400 {
  color: #ffffff !important;
}

/* Exceção necessária: texto da inicial dentro do avatar circular no cabeçalho */
body.theme-caixa header .user-initials,
body.theme-caixa header .avatar-initials-text {
  color: #005ca9 !important;
}

/* Acentos em Laranja Caixa no cabeçalho */
body.theme-caixa header span#logo-top-text,
body.theme-caixa header .text-caixa-orange {
  color: #f39200 !important;
}

/* Divisórias verticais em Laranja (Imagem 1) */
.header-divider-orange {
  width: 2px;
  height: 22px;
  background-color: #f39200;
  display: inline-block;
  opacity: 0.95;
}

/* Caixa de status do histórico no cabeçalho */
body.theme-caixa header #status-concursos-box {
  background: rgba(0, 48, 96, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
body.theme-caixa header #status-total-concursos {
  color: #fef08a !important; /* Amarelo ouro suave */
}

/* Botões translúcidos do cabeçalho */
body.theme-caixa header #btn-theme-toggle,
body.theme-caixa header #btn-sync-online,
body.theme-caixa header #btn-open-math-modal,
body.theme-caixa header #btn-open-admin-modal {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
body.theme-caixa header #btn-theme-toggle:hover,
body.theme-caixa header #btn-sync-online:hover,
body.theme-caixa header #btn-open-math-modal:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}
body.theme-caixa header #btn-open-admin-modal {
  background-color: rgba(243, 146, 0, 0.25) !important;
  border-color: #f39200 !important;
}
body.theme-caixa header #btn-open-admin-modal:hover {
  background-color: rgba(243, 146, 0, 0.4) !important;
}

/* Botão "Acessar minha conta" (Imagem 1): Branco puro com texto e ícone em Azul Caixa */
body.theme-caixa header .btn-caixa-auth,
body.theme-caixa header #btn-open-auth-modal {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%) !important;
  color: #005ca9 !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
body.theme-caixa header .btn-caixa-auth *,
body.theme-caixa header #btn-open-auth-modal * {
  color: #005ca9 !important;
}
body.theme-caixa header .btn-caixa-auth:hover,
body.theme-caixa header #btn-open-auth-modal:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px);
}

/* Crachá do usuário logado no cabeçalho */
body.theme-caixa header #user-badge-header {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}
body.theme-caixa header #btn-logout {
  color: #fef08a !important;
}

/* ==================== IMAGEM 2: 2 CORES DE BACKGROUND ==================== */
/* 1. BG padrão: #f9fbfb (branco meio azulado) */
/* 2. BG para separar outros elementos: #d0e0e3 (azul bem suave) */
body.theme-caixa nav.theme-caixa-nav,
body.theme-caixa .bg-secondary-section,
body.theme-caixa .caixa-separator-bg {
  background-color: #d0e0e3 !important;
  border-color: #bcd0d4 !important;
}

/* Cards dentro das seções: Branco puro com sombra suave */
body.theme-caixa .bg-\[\#111827\],
body.theme-caixa .bg-\[\#090d16\],
body.theme-caixa .bg-gray-900,
body.theme-caixa .bg-gray-900\/50,
body.theme-caixa .bg-gray-900\/60,
body.theme-caixa .bg-gray-900\/80,
body.theme-caixa .bg-gray-950 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cfdfe2 !important;
  box-shadow: 0 4px 16px 0 rgba(0, 92, 169, 0.06);
}

body.theme-caixa .bg-\[\#1e293b\],
body.theme-caixa .bg-\[\#1e293b\]\/50,
body.theme-caixa .bg-\[\#1e293b\]\/60,
body.theme-caixa .bg-\[\#1e293b\]\/70 {
  background-color: #f0f6f8 !important;
  border-color: #d5e4e7 !important;
  color: #0f172a !important;
}

body.theme-caixa .border-\[\#1f2937\],
body.theme-caixa .border-gray-800,
body.theme-caixa .border-gray-700 {
  border-color: #cfdfe2 !important;
}

body.theme-caixa main h1,
body.theme-caixa main h2,
body.theme-caixa main h3 {
  color: #005ca9 !important; /* Títulos em Azul Caixa */
}

/* Botões e Badges Coloridos (Azul/Laranja) com Texto e Ícones Brancos */
.btn-primary,
.btn-share-bet,
body.theme-caixa .btn-primary,
body.theme-caixa .btn-share-bet,
body.theme-caixa #btn-confirm-share-bet {
  background-color: #005ca9 !important;
  border-color: #005ca9 !important;
  color: #ffffff !important;
}

.badge-polygon-blue,
body.theme-caixa .badge-polygon-blue {
  background-color: #005ca9 !important;
  border-color: #005ca9 !important;
  color: #ffffff !important;
}

.badge-polygon-orange,
body.theme-caixa .badge-polygon-orange {
  background-color: #f37021 !important;
  border-color: #f37021 !important;
  color: #ffffff !important;
}

.btn-primary svg,
.btn-share-bet svg,
.badge-polygon-orange svg,
.badge-polygon-blue svg,
body.theme-caixa .btn-primary svg,
body.theme-caixa .btn-share-bet svg,
body.theme-caixa .badge-polygon-orange svg,
body.theme-caixa .badge-polygon-blue svg,
body.theme-caixa #btn-confirm-share-bet svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Botão Excluir Bilhete: Fundo clarinho com Ícone Preto no Tema Caixa (Conforme Ordem do Linker) */
.btn-delete-user-bet,
body.theme-caixa .btn-delete-user-bet {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #000000 !important;
  transition: all 0.15s ease;
}

.btn-delete-user-bet svg,
.btn-delete-user-bet svg *,
body.theme-caixa .btn-delete-user-bet svg,
body.theme-caixa .btn-delete-user-bet svg * {
  stroke: #000000 !important;
  color: #000000 !important;
  fill: none !important;
}

.btn-delete-user-bet:hover,
body.theme-caixa .btn-delete-user-bet:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.btn-delete-user-bet:hover svg,
.btn-delete-user-bet:hover svg *,
body.theme-caixa .btn-delete-user-bet:hover svg,
body.theme-caixa .btn-delete-user-bet:hover svg * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Botões de Fechar Modal em Alta Definição */
[id^="btn-close-"] {
  color: #94a3b8 !important;
  cursor: pointer;
}
[id^="btn-close-"] svg {
  stroke: #94a3b8 !important;
}
[id^="btn-close-"]:hover {
  color: #ffffff !important;
}
[id^="btn-close-"]:hover svg {
  stroke: #ffffff !important;
}

body.theme-caixa [id^="btn-close-"] {
  color: #475569 !important;
}
body.theme-caixa [id^="btn-close-"] svg {
  stroke: #475569 !important;
}
body.theme-caixa [id^="btn-close-"]:hover {
  color: #0f172a !important;
}
body.theme-caixa [id^="btn-close-"]:hover svg {
  stroke: #0f172a !important;
}

/* Modais no Tema Claro Caixa: Eliminação total de 'branco no branco' */
body.theme-caixa #modal-share-bet p,
body.theme-caixa #modal-share-bet label,
body.theme-caixa #modal-share-bet span:not(.text-white):not(.badge-polygon-orange):not(.badge-polygon-blue),
body.theme-caixa #modal-share-bet .modal-desc-text,
body.theme-caixa #modal-manual-bet p,
body.theme-caixa #modal-manual-bet label,
body.theme-caixa #modal-auth p,
body.theme-caixa #modal-register-profile p,
body.theme-caixa #modal-register-profile label {
  color: #1e293b !important; /* Grafite escuro profundo de alta legibilidade */
}

body.theme-caixa #share-input-target-user {
  background-color: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
}

body.theme-caixa #share-input-target-user:focus {
  border-color: #005ca9 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 92, 169, 0.15) !important;
}

body.theme-caixa .btn-select-quick-friend {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-caixa .btn-select-quick-friend:hover {
  background-color: #005ca9 !important;
  color: #ffffff !important;
  border-color: #005ca9 !important;
}

body.theme-caixa .btn-select-quick-friend:hover * {
  color: #ffffff !important;
}

/* Autocomplete de Usuários para Bolão */
.share-autocomplete-dropdown {
  background-color: #111827;
  border: 1px solid #1f2937;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

body.theme-caixa .share-autocomplete-dropdown {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 15px 30px -5px rgba(0, 92, 169, 0.2) !important;
}

.share-autocomplete-item {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 0.5rem;
}

.share-autocomplete-item:hover {
  background-color: #1e293b;
}

body.theme-caixa .share-autocomplete-item:hover {
  background-color: #e0f2fe !important;
}

body.theme-caixa .share-autocomplete-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.theme-caixa .share-autocomplete-user {
  color: #005ca9 !important;
  font-weight: 600 !important;
}

/* Selo de Conta Google Conectada: fundo verde suave com texto e ícone verde escuro de alto contraste */
body.theme-caixa .badge-google-connected {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}
body.theme-caixa .badge-google-connected svg {
  color: #059669 !important;
}

/* Sub-abas da Rede Social e Filtros de Meus Jogos 2 no tema claro */
body.theme-caixa .social-subtab-btn.active,
body.theme-caixa .ub2-filter-btn.active {
  background-color: #005ca9 !important;
  color: #ffffff !important;
}
body.theme-caixa .social-subtab-btn.active *,
body.theme-caixa .ub2-filter-btn.active * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
body.theme-caixa .social-subtab-btn:not(.active),
body.theme-caixa .ub2-filter-btn:not(.active) {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}
body.theme-caixa .social-subtab-btn:not(.active) *,
body.theme-caixa .ub2-filter-btn:not(.active) * {
  color: #334155 !important;
  stroke: #334155 !important;
}
body.theme-caixa .social-subtab-btn:not(.active):hover,
body.theme-caixa .ub2-filter-btn:not(.active):hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Caixas de contadores do perfil */
body.theme-caixa .profile-stats-card {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}
body.theme-caixa .profile-stats-card #social-stat-friends-count {
  color: #005ca9 !important;
}
body.theme-caixa .profile-stats-card #social-stat-pools-count {
  color: #ea580c !important;
}

body.theme-caixa main .text-gray-400 {
  color: #64748b !important;
}

body.theme-caixa main .text-gray-300 {
  color: #334155 !important;
}

body.theme-caixa main .text-gray-500 {
  color: #8da1b3 !important;
}

body.theme-caixa .text-emerald-400 {
  color: #549969 !important; /* Verde Mega-Sena */
}

body.theme-caixa .text-cyan-400 {
  color: #005ca9 !important;
}

body.theme-caixa .text-amber-400 {
  color: #f39200 !important; /* Laranja Caixa */
}

/* ==================== IMAGEM 3: GRADIENTE DOS CARDS ==================== */
/* Vai do azul nítido da Caixa (#005ca9) para um azul piscina/verde claro (#3cbdae) */
.caixa-gradient-card,
body.theme-caixa #card-last-draw,
body.theme-caixa #consistency-result-card > div:first-child {
  background: linear-gradient(90deg, #005ca9 0%, #0076c5 35%, #009aa6 75%, #3cbdae 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px -4px rgba(0, 92, 169, 0.3) !important;
}

body.theme-caixa #card-last-draw *,
body.theme-caixa #consistency-result-card > div:first-child * {
  color: #ffffff !important;
}

/* Bolas no card de destaque do sorteio: Verde oficial #549969 com texto branco */
#card-last-draw .lotto-ball,
body.theme-caixa #card-last-draw .lotto-ball,
body.theme-caixa #card-last-draw .lotto-ball-selected,
body.theme-caixa #card-last-draw .lotto-ball-default {
  background: #549969 !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  font-weight: 700 !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* ==================== IMAGEM 4: VERDE DA MEGA-SENA ==================== */
/* Dezenas sorteadas e selecionadas usam exatamente o verde da Imagem 4: #549969 */
body.theme-caixa .lotto-ball-selected,
body.theme-caixa .lotto-ball-hit {
  background: #549969 !important;
  color: #ffffff !important;
  border: 1px solid #417e54 !important;
  box-shadow: 0 3px 8px rgba(84, 153, 105, 0.4) !important;
  font-weight: 700 !important;
}

body.theme-caixa .lotto-ball-fixed {
  background: #005ca9 !important;
  color: #ffffff !important;
  border: 1px solid #00457f !important;
  box-shadow: 0 3px 8px rgba(0, 92, 169, 0.35) !important;
}

body.theme-caixa .lotto-ball-default {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
body.theme-caixa .lotto-ball-default:hover {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
}

body.theme-caixa .lotto-ball-excluded {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  opacity: 0.75;
}

/* Links em Laranja Caixa (Imagem 4: "Confira o resultado >") */
body.theme-caixa a,
body.theme-caixa .link-caixa-orange {
  color: #f39200 !important;
  font-weight: 600;
}
body.theme-caixa a:hover,
body.theme-caixa .link-caixa-orange:hover {
  color: #d97706 !important;
}

/* Título de destaque (Imagem 4: "ACUMULOU!") */
body.theme-caixa .text-mega-acumulou {
  color: #0b66b3 !important;
  font-weight: 800 !important;
}

/* Inputs e Selects no Tema Caixa */
body.theme-caixa input,
body.theme-caixa select {
  background-color: #ffffff !important;
  border-color: #cfdfe2 !important;
  color: #0f172a !important;
}
body.theme-caixa input:focus,
body.theme-caixa select:focus {
  border-color: #549969 !important;
  box-shadow: 0 0 0 2px rgba(84, 153, 105, 0.2) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Bolas de Dezenas (Lottery Balls Compactas e Harmônicas) */
.lotto-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.lotto-ball-sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.lotto-ball-md {
  width: 35px;
  height: 35px;
  font-size: 14px;
}

.lotto-ball-lg {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/* Proteção de Contraste Absoluto: Texto 100% Branco em Botões Primários */
button.bg-emerald-500,
button.bg-emerald-600,
button.bg-cyan-500,
button.bg-cyan-600,
button.bg-amber-500,
button.bg-amber-600,
#btn-generate-games,
#btn-run-consistency,
#btn-run-simulation,
#btn-login-prompt,
#btn-run-user-draw-sim,
#auth-submit-btn,
#btn-save-manual-bet,
#btn-confirm-share-bet,
#btn-publish-admin-result {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Estilo do Menu Dropdown Caixa */
body.theme-caixa #dropdown-menu-caixa {
  background-color: #ffffff !important;
  border: 1px solid #cfdfe2 !important;
  box-shadow: 0 10px 25px rgba(0, 92, 169, 0.2) !important;
}
body.theme-caixa #dropdown-menu-caixa button:hover {
  background-color: #f0f7f9 !important;
}
body.theme-caixa #dropdown-menu-caixa button .font-bold {
  color: #005ca9 !important;
}
body.theme-caixa #dropdown-menu-caixa button .text-gray-400 {
  color: #64748b !important;
}
body.theme-caixa #dropdown-menu-caixa .border-gray-800 {
  border-color: #e2e8f0 !important;
}

/* Bolas — Tema Dark */
.lotto-ball-default {
  background: #111827;
  border: 1px solid #1f2937;
  color: #e5e7eb;
}
.lotto-ball-default:hover {
  border-color: #374151;
  background: #1e293b;
  transform: translateY(-1px);
}

.lotto-ball-selected {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid #34d399;
  box-shadow: 0 4px 12px var(--color-brand-glow);
  transform: translateY(-1px);
}

.lotto-ball-fixed {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #ffffff;
  border: 1px solid #22d3ee;
  box-shadow: 0 4px 12px var(--color-secondary-glow);
}

.lotto-ball-excluded {
  background: #1f1212;
  color: #ef4444;
  border: 1px solid #7f1d1d;
  opacity: 0.6;
  text-decoration: line-through;
}

/* Volante Grade 10x6 - Distribuição Vertical Perfeita para Eliminar Espaço Morto */
.wheel-grid,
#generator-wheel-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(6, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  padding: 0.25rem 0 !important;
  row-gap: 16px !important;
  column-gap: 6px !important;
}

#generator-wheel-grid .lotto-ball-md {
  width: 44px !important;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .wheel-grid,
  #generator-wheel-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(10, 1fr) !important;
    row-gap: 8px !important;
    column-gap: 4px !important;
    margin-top: 0.5rem !important;
  }
  #generator-wheel-grid .lotto-ball-md {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
}

/* Heatmap Gradient Cells */
.heatmap-cold { background-color: #0b1f2e; color: #7dd3fc; border: 1px solid #0369a1; }
.heatmap-normal { background-color: #0d2822; color: #6ee7b7; border: 1px solid #047857; }
.heatmap-warm { background-color: #064e3b; color: #a7f3d0; border: 1px solid #10b981; }
.heatmap-hot { background-color: #78350f; color: #fef3c7; border: 1px solid #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.25); }

/* Heatmap no tema claro */
body.theme-caixa .heatmap-cold { background-color: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
body.theme-caixa .heatmap-normal { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
body.theme-caixa .heatmap-warm { background-color: #d1fae5; color: #209869; border: 1px solid #6ee7b7; }
body.theme-caixa .heatmap-hot { background-color: #fef3c7; color: #b45309; border: 1px solid #fde68a; box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }

/* Tabs (Navegação Principal) */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tab-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.tab-btn.active {
  color: #ffffff;
  background: #111827;
  border-color: #1f2937;
  box-shadow: inset 0 -2px 0 var(--color-brand);
}

/* Tabs no Tema Claro Caixa (Imagem 2: Container em azul suave #d0e0e3, tabs ativas em branco e destaque laranja) */
body.theme-caixa nav {
  background-color: #d0e0e3 !important;
  border-radius: 12px;
  padding: 6px 10px !important;
  border: 1px solid #bcd0d4 !important;
}

body.theme-caixa .tab-btn {
  color: #005ca9 !important;
  font-weight: 700;
}

body.theme-caixa .tab-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #00427b !important;
}

body.theme-caixa .tab-btn.active {
  color: #005ca9 !important;
  background: #ffffff !important;
  border: 1px solid #bcd0d4 !important;
  box-shadow: 0 3px 8px rgba(0, 92, 169, 0.12), inset 0 -3px 0 #f39200 !important;
}

/* ==================== SIDEBAR RETRÁTIL (LADO ESQUERDO) ==================== */
#sidebar-nav {
  width: 58px; /* Modo Retrátil padrão (apenas ícones) */
  min-width: 58px;
  background-color: #111827;
  border-right: 1px solid #1f2937;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#sidebar-nav.sidebar-expanded {
  width: 250px; /* Modo Completo (ícones + nomes) */
  min-width: 250px;
}

/* Ocultar textos dos menus no modo retrátil */
#sidebar-nav .sidebar-text {
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

#sidebar-nav.sidebar-expanded .sidebar-text {
  display: inline-block;
  opacity: 1;
}

/* Container para Ícones Vetoriais SVG (Regra Global) */
.sidebar-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Botão Toggle de Menu no Topo da Sidebar */
.sidebar-header-btn {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
body.theme-caixa .sidebar-header-btn {
  border-bottom: 1.5px solid #bcd0d4 !important;
}

/* Itens da Sidebar */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  border: 1px solid transparent;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-item.active {
  background-color: #1e293b;
  color: #10b981;
  border-color: #374151;
  box-shadow: inset 3px 0 0 #10b981;
}

/* Divisória Laranja Oficial na Sidebar */
.sidebar-divider-orange {
  height: 2px;
  background-color: #f39200;
  margin: 10px 6px;
  opacity: 0.95;
}

/* Sidebar no Tema Claro Caixa (Imagem 2: Fundo azul suave #d0e0e3) */
body.theme-caixa #sidebar-nav {
  background-color: #d0e0e3 !important;
  border-right: 1px solid #bcd0d4 !important;
}

body.theme-caixa .sidebar-item {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

body.theme-caixa .sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.65) !important;
  color: #003a6b !important;
}

body.theme-caixa .sidebar-item.active {
  background-color: #ffffff !important;
  color: #005ca9 !important;
  border: 1px solid #bcd0d4 !important;
  box-shadow: 0 2px 8px rgba(0, 92, 169, 0.12), inset 3.5px 0 0 #f39200 !important;
}

/* Botões Utilitários na Sidebar no Tema Caixa */
body.theme-caixa #btn-sidebar-admin {
  color: #d97706 !important;
}
body.theme-caixa #btn-sidebar-admin:hover {
  background-color: rgba(243, 146, 0, 0.18) !important;
}

body.theme-caixa #btn-sidebar-math {
  color: #549969 !important;
}
body.theme-caixa #btn-sidebar-math:hover {
  background-color: rgba(84, 153, 105, 0.18) !important;
}

body.theme-caixa #btn-sidebar-sync {
  color: #005ca9 !important;
}
body.theme-caixa #btn-sidebar-sync:hover {
  background-color: rgba(0, 92, 169, 0.18) !important;
}

/* ==================== CORREÇÃO DE CONTRASTE: IMAGENS 2 e 3 ==================== */
/* 1. Botões de Ação Secundários (Copiar TXT, Salvar na Conta, etc.) */
.btn-action-outline,
#btn-copy-all-games,
#btn-save-all-to-account,
.btn-save-single-game,
.btn-copy-game,
.btn-test-game,
.btn-sim-game {
  font-weight: 700 !important;
}

/* No Tema Claro Caixa: Fundo Branco Puro, Borda Suave, Texto Azul Caixa */
body.theme-caixa .btn-action-outline,
body.theme-caixa #btn-copy-all-games,
body.theme-caixa #btn-save-all-to-account,
body.theme-caixa .btn-save-single-game,
body.theme-caixa .btn-copy-game,
body.theme-caixa .btn-test-game,
body.theme-caixa .btn-sim-game {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #005ca9 !important;
  box-shadow: 0 2px 6px rgba(0, 92, 169, 0.08) !important;
}

body.theme-caixa .btn-action-outline:hover,
body.theme-caixa #btn-copy-all-games:hover,
body.theme-caixa #btn-save-all-to-account:hover,
body.theme-caixa .btn-save-single-game:hover,
body.theme-caixa .btn-copy-game:hover,
body.theme-caixa .btn-test-game:hover,
body.theme-caixa .btn-sim-game:hover {
  background-color: #f0f7f9 !important;
  border-color: #005ca9 !important;
  color: #003a6b !important;
}

/* 2. Badge de Versão (Imagem 3): 100% Legível e Nítida */
.badge-version-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

body.theme-caixa .badge-version-pill {
  background-color: #ffffff !important;
  border: 1.5px solid #bcd0d4 !important;
  color: #005ca9 !important;
  box-shadow: 0 1px 3px rgba(0, 92, 169, 0.1) !important;
}

body:not(.theme-caixa) .badge-version-pill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

/* 3. Badges nos Cards de Jogos Gerados */
.badge-game-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.badge-game-cost {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
body.theme-caixa .badge-game-count {
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
body.theme-caixa .badge-game-cost {
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
body:not(.theme-caixa) .badge-game-count {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #d1d5db !important;
}
body:not(.theme-caixa) .badge-game-cost {
  background-color: rgba(6, 78, 59, 0.5) !important;
  border: 1px solid #065f46 !important;
  color: #6ee7b7 !important;
}

/* ==================== MODAIS NO TEMA CLARO CAIXA (RESOLUÇÃO DEFINITIVA DE CONTRASTE) ==================== */
body.theme-caixa #modal-auth > div,
body.theme-caixa #modal-register-profile > div,
body.theme-caixa #modal-admin-panel > div,
body.theme-caixa #modal-manual-bet > div,
body.theme-caixa #modal-share-bet > div,
body.theme-caixa #modal-admin-result > div,
body.theme-caixa #modal-math > div,
body.theme-caixa #modal-param-help > div {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 40px rgba(0, 92, 169, 0.2) !important;
}

body.theme-caixa #modal-auth h3,
body.theme-caixa #modal-register-profile h3,
body.theme-caixa #modal-admin-panel h3,
body.theme-caixa #modal-admin-panel h4,
body.theme-caixa #modal-manual-bet h3,
body.theme-caixa #modal-share-bet h3,
body.theme-caixa #modal-admin-result h3,
body.theme-caixa #modal-math h3,
body.theme-caixa #modal-math h4,
body.theme-caixa #modal-param-help #param-help-title {
  color: #005ca9 !important;
}

/* Blocos internos no tema claro: NUNCA usar preto/cinza-escuro com texto escuro */
body.theme-caixa #card-fast-login-linker {
  background-color: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
}
body.theme-caixa #card-fast-login-linker:hover {
  background-color: #fef3c7 !important;
}

body.theme-caixa #card-fast-login-madruga {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}
body.theme-caixa #card-fast-login-madruga:hover {
  background-color: #f1f5f9 !important;
  border-color: #005ca9 !important;
}

body.theme-caixa #box-custom-login {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-caixa #modal-admin-panel .bg-gray-900,
body.theme-caixa #modal-admin-panel .bg-gray-900\/50,
body.theme-caixa #modal-admin-panel .bg-gray-900\/60,
body.theme-caixa #modal-register-profile .bg-gray-900,
body.theme-caixa #modal-register-profile .bg-gray-900\/60,
body.theme-caixa #modal-register-profile .border-gray-800,
body.theme-caixa #modal-math .bg-emerald-950\/40,
body.theme-caixa #modal-math .bg-\[\#1e293b\]\/60,
body.theme-caixa #modal-admin-result .bg-amber-950\/40,
body.theme-caixa #modal-param-help #param-help-points {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

body.theme-caixa #modal-math .bg-emerald-950\/40 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
body.theme-caixa #modal-math .bg-emerald-950\/40 h4 {
  color: #047857 !important;
}

body.theme-caixa #modal-admin-panel table thead {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

body.theme-caixa #modal-admin-panel table tbody {
  color: #0f172a !important;
}

body.theme-caixa #modal-admin-panel table tbody tr {
  border-color: #e2e8f0 !important;
}

body.theme-caixa #modal-admin-panel table tbody tr:hover {
  background-color: #f1f5f9 !important;
}

/* Todos os inputs dentro dos modais no tema claro */
body.theme-caixa #modal-auth input,
body.theme-caixa #modal-register-profile input,
body.theme-caixa #modal-admin-panel input,
body.theme-caixa #modal-manual-bet input,
body.theme-caixa #modal-manual-bet select,
body.theme-caixa #modal-share-bet input,
body.theme-caixa #modal-admin-result input {
  background-color: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
}
body.theme-caixa #modal-auth input:focus,
body.theme-caixa #modal-register-profile input:focus,
body.theme-caixa #modal-admin-panel input:focus,
body.theme-caixa #modal-manual-bet input:focus,
body.theme-caixa #modal-manual-bet select:focus,
body.theme-caixa #modal-share-bet input:focus,
body.theme-caixa #modal-admin-result input:focus {
  border-color: #005ca9 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 92, 169, 0.15) !important;
}

/* Textos e Parágrafos nos Modais */
body.theme-caixa #modal-auth p,
body.theme-caixa #modal-auth label,
body.theme-caixa #modal-register-profile p,
body.theme-caixa #modal-register-profile label,
body.theme-caixa #modal-admin-panel p,
body.theme-caixa #modal-admin-panel label,
body.theme-caixa #modal-share-bet p,
body.theme-caixa #modal-share-bet label,
body.theme-caixa #modal-manual-bet p,
body.theme-caixa #modal-manual-bet label,
body.theme-caixa #modal-admin-result p,
body.theme-caixa #modal-admin-result label,
body.theme-caixa #modal-math p,
body.theme-caixa #modal-math li,
body.theme-caixa #modal-param-help p {
  color: #334155 !important;
}

/* Rodapé no Tema Caixa */
body.theme-caixa footer {
  background-color: #d0e0e3 !important;
  border-color: #bcd0d4 !important;
  color: #475569 !important;
}
body.theme-caixa footer span,
body.theme-caixa footer div {
  color: #475569 !important;
}
body.theme-caixa footer span.font-bold {
  color: #005ca9 !important;
}
body.theme-caixa footer div.tracking-wide {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

/* Animações suaves */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #111827;
  border: 1px solid #1f2937;
  color: #f9fafb;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.2s ease-out;
}

body.theme-caixa .toast {
  background: #ffffff;
  border-color: #bcd0d4;
  color: #0f172a;
  box-shadow: 0 10px 25px -5px rgba(0, 92, 169, 0.15);
}

/* ==================== SLIDER DE DEZENAS (TRACK E THUMB SEMPRE VISÍVEIS - IMAGENS 2 e 3) ==================== */
.range-slider-caixa,
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  cursor: pointer;
  width: 100%;
  height: 24px;
  display: block;
}

/* Trilho no Webkit (Chrome, Edge, Safari) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  border-radius: 9999px;
  background-color: #374151; /* Dark mode track */
  border: 1px solid #4b5563;
  transition: all 0.2s ease;
}

/* Bolinha (Thumb) no Webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background-color: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  margin-top: -6px; /* Centraliza no trilho de 8px: (8 - 20) / 2 = -6px */
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Trilho no Firefox */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  border-radius: 9999px;
  background-color: #374151;
  border: 1px solid #4b5563;
}

/* Bolinha no Firefox */
input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background-color: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* --- TEMA CLARO OFICIAL DA CAIXA (IMAGENS 2 e 3) --- */
body.theme-caixa input[type="range"]::-webkit-slider-runnable-track {
  background-color: #d0e0e3 !important; /* Trilho azul suave nítido SEMPRE visível */
  border: 1.5px solid #bcd0d4 !important;
  box-shadow: inset 0 1px 3px rgba(0, 92, 169, 0.1) !important;
}

body.theme-caixa input[type="range"]::-webkit-slider-thumb {
  background-color: #549969 !important; /* Verde oficial da Mega-Sena */
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(84, 153, 105, 0.5) !important;
}

body.theme-caixa input[type="range"]:focus::-webkit-slider-runnable-track {
  border-color: #549969 !important;
  background-color: #c0d8dc !important;
}

body.theme-caixa input[type="range"]::-moz-range-track {
  background-color: #d0e0e3 !important;
  border: 1.5px solid #bcd0d4 !important;
  box-shadow: inset 0 1px 3px rgba(0, 92, 169, 0.1) !important;
}

body.theme-caixa input[type="range"]::-moz-range-thumb {
  background-color: #549969 !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(84, 153, 105, 0.5) !important;
}

/* ==================== SELEÇÃO GLOBAL DE TEXTO (IMAGEM 4: SEM VERDE NO VERDE) ==================== */
::selection {
  background-color: #005ca9 !important;
  color: #ffffff !important;
}
::-moz-selection {
  background-color: #005ca9 !important;
  color: #ffffff !important;
}
body.theme-caixa ::selection {
  background-color: #005ca9 !important;
  color: #ffffff !important;
}
body.theme-caixa ::-moz-selection {
  background-color: #005ca9 !important;
  color: #ffffff !important;
}

/* Labels e Textos dos Campos no Tema Caixa */
body.theme-caixa label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

body.theme-caixa select,
body.theme-caixa select option {
  background-color: #ffffff !important;
  color: #005ca9 !important;
  font-weight: 600 !important;
}

body.theme-caixa select:focus {
  border-color: #005ca9 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 92, 169, 0.2) !important;
}

/* ==================== PADRONIZAÇÃO DO AZUL CAIXA (IMAGEM 5) ==================== */
/* O azul da dezena selecionada (#005ca9) é a cor padrão para qualquer elemento azul relevante */
body.theme-caixa .text-cyan-300,
body.theme-caixa .text-cyan-400,
body.theme-caixa .text-cyan-500,
body.theme-caixa #wheel-fixed-count,
body.theme-caixa .text-blue-caixa {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

body.theme-caixa .bg-cyan-500,
body.theme-caixa .bg-cyan-400,
body.theme-caixa .bg-cyan-600 {
  background-color: #005ca9 !important;
}

body.theme-caixa .border-cyan-500,
body.theme-caixa .border-cyan-400 {
  border-color: #005ca9 !important;
}

/* ==================== 6 INPUTS DE DEZENAS DO ADMIN (AUTO-AVANCE) ==================== */
.admin-ball-input {
  width: 48px;
  height: 48px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 12px;
  background-color: #1e293b;
  border: 1.5px solid #374151;
  color: #ffffff;
  outline: none;
  transition: all 0.15s ease;
}

.admin-ball-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  transform: scale(1.05);
}

body.theme-caixa .admin-ball-input {
  background-color: #ffffff !important;
  border: 1.5px solid #bcd0d4 !important;
  color: #005ca9 !important;
}

body.theme-caixa .admin-ball-input:focus {
  border-color: #005ca9 !important;
  box-shadow: 0 0 0 3px rgba(0, 92, 169, 0.25) !important;
}

/* ==================== REFINAMENTO: CAIXA GRADIENT CARD (IMAGEM 3) ==================== */
body.theme-caixa .caixa-gradient-card,
body.theme-caixa #sim-user-draw-card,
body.theme-caixa #ub2-sim-draw-card {
  background: linear-gradient(90deg, #005ca9 0%, #0076c5 35%, #009aa6 75%, #3cbdae 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px -4px rgba(0, 92, 169, 0.3) !important;
}

body.theme-caixa #sim-user-draw-card h3,
body.theme-caixa #sim-user-draw-card p,
body.theme-caixa #sim-user-draw-card label,
body.theme-caixa #ub2-sim-draw-card h3,
body.theme-caixa #ub2-sim-draw-card p,
body.theme-caixa #ub2-sim-draw-card label {
  color: #ffffff !important;
}

body.theme-caixa #sim-user-draw-card input,
body.theme-caixa #sim-user-draw-card select,
body.theme-caixa #ub2-sim-draw-card input,
body.theme-caixa #ub2-sim-draw-card select {
  background-color: #ffffff !important;
  color: #005ca9 !important;
  border: 1.5px solid #bcd0d4 !important;
  font-weight: 700 !important;
}

/* ==================== SQUIRCLE DE PARÂMETROS AVANÇADOS ==================== */
.advanced-params-squircle {
  border-radius: 16px;
  transition: all 0.2s ease;
}

body.theme-caixa .advanced-params-squircle {
  background-color: #f1f7f9 !important;
  border: 1.5px solid #bcd0d4 !important;
  box-shadow: inset 0 2px 4px rgba(0, 92, 169, 0.04) !important;
}

body.theme-caixa .advanced-params-squircle label {
  color: #005ca9 !important;
  font-weight: 600 !important;
}

body.theme-caixa .advanced-params-squircle select,
body.theme-caixa .advanced-params-squircle input {
  background-color: #ffffff !important;
  border: 1.5px solid #bcd0d4 !important;
  color: #005ca9 !important;
  font-weight: 600;
}

body.theme-caixa .advanced-params-squircle select:focus,
body.theme-caixa .advanced-params-squircle input:focus {
  border-color: #005ca9 !important;
  box-shadow: 0 0 0 3px rgba(0, 92, 169, 0.15) !important;
}

/* ==================== BALÃO DE AJUDA COM INTERROGAÇÃO (?) ==================== */
.btn-param-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #9ca3af;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-param-help:hover {
  color: #38bdf8;
  background-color: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  transform: scale(1.15);
}

body.theme-caixa .btn-param-help {
  color: #005ca9 !important;
  background-color: #e2edf1 !important;
  border: 1px solid #bcd0d4 !important;
}

body.theme-caixa .btn-param-help:hover {
  color: #ffffff !important;
  background-color: #f37021 !important;
  border-color: #f37021 !important;
}

/* Modal de Ajuda de Parâmetros */
body.theme-caixa #modal-param-help > div {
  background-color: #ffffff !important;
  border: 1.5px solid #bcd0d4 !important;
  color: #0f172a !important;
}

body.theme-caixa #modal-param-help #param-help-title {
  color: #005ca9 !important;
}

body.theme-caixa #modal-param-help #param-help-desc {
  color: #334155 !important;
}

body.theme-caixa #modal-param-help #param-help-points {
  background-color: #f1f7f9 !important;
  border: 1px solid #cfdfe2 !important;
  color: #1e293b !important;
}

body.theme-caixa #modal-param-help #param-help-points strong {
  color: #005ca9 !important;
}

body.theme-caixa #modal-param-help #btn-close-param-help {
  color: #64748b !important;
}

body.theme-caixa #modal-param-help #btn-close-param-help:hover {
  color: #0f172a !important;
}

/* Caixa para o Total dos Jogos */
body.theme-caixa #estimate-total-cost-val {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

/* ==================== V2: REFINAMENTOS ESTRITOS DO DESIGN.MD ==================== */
/* 1. Cantos Arredondados Canônicos */
.v2-card {
  border-radius: 12px !important; /* DESIGN.md Item 4 */
}

.v2-btn, .v2-input {
  border-radius: 8px !important;  /* DESIGN.md Item 4 */
}

/* 2. Tipografia Refinada */
.v2-heading {
  font-family: var(--font-title) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

/* 3. Ícones Vetoriais SVG */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ==================== CORREÇÃO IMAGEM 2: CONSISTÊNCIA E NOTA CIENTÍFICA ==================== */
/* Badges de Métricas e Status dos Testes na Bateria de Consistência */
.metric-badge-box {
  background-color: #005ca9 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #004e8f !important;
}

.status-badge-passed {
  background-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #047857 !important;
}

.status-badge-warning {
  background-color: #d97706 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #b45309 !important;
}

body.theme-caixa #consistency-tests-list > div {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 2px 8px rgba(0, 92, 169, 0.05) !important;
}

body.theme-caixa #consistency-tests-list h4,
body.theme-caixa #consistency-tests-list .test-name-title {
  color: #005ca9 !important;
}

body.theme-caixa #consistency-tests-list p {
  color: #334155 !important;
}

/* Nota Científica Didática (Elimina "Claro no Claro" e "Escuro no Escuro") */
.scientific-note-box {
  background-color: #0f172a !important;
  border: 1.5px solid #1e293b !important;
  color: #e2e8f0 !important;
}

.scientific-note-box strong {
  color: #38bdf8 !important;
}

body.theme-caixa .scientific-note-box {
  background-color: #f0f7fa !important;
  border: 1.5px solid #005ca9 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 12px rgba(0, 92, 169, 0.06) !important;
}

body.theme-caixa .scientific-note-box strong {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

body.theme-caixa .scientific-note-box div,
body.theme-caixa .scientific-note-box p {
  color: #1e293b !important;
}

/* ==================== IMAGEM 1: COPIAR DEZENAS COM 1 CLIQUE ==================== */
.bet-balls-copy-trigger {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 4px;
}

.bet-balls-copy-trigger:hover {
  background-color: rgba(0, 92, 169, 0.08);
  border-color: rgba(0, 92, 169, 0.3);
  transform: translateY(-1px);
}

.bet-balls-copy-trigger:active {
  transform: scale(0.98);
}

/* ==================== MÓDULO: SIMULADOR RETROATIVO DE MEUS JOGOS ==================== */
body.theme-caixa #user-retro-simulator-card {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 4px 14px rgba(0, 92, 169, 0.06) !important;
}

body.theme-caixa #user-retro-simulator-card h3 {
  color: #005ca9 !important;
}

body.theme-caixa #user-retro-simulator-card p {
  color: #475569 !important;
}

body.theme-caixa #user-retro-results-container .bg-\[\#1e293b\]\/80,
body.theme-caixa #user-retro-results-container .bg-\[\#1e293b\]\/50 {
  background-color: #f1f7f9 !important;
  border: 1.5px solid #cfdfe2 !important;
}

body.theme-caixa #user-retro-results-container span[id^="user-retro-stat-"] {
  color: #005ca9 !important;
}

body.theme-caixa header #dropdown-switch-profiles,
body.theme-caixa #dropdown-switch-profiles {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 92, 169, 0.22) !important;
  color: #0f172a !important;
}

body.theme-caixa header #dropdown-switch-profiles > div:first-child {
  color: #475569 !important;
  border-bottom-color: #e2e8f0 !important;
}

body.theme-caixa header #dropdown-switch-profiles .border-t {
  border-top-color: #e2e8f0 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option,
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option > span:first-child,
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option > span:first-child span,
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option > span:first-child strong {
  color: #0f172a !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="linker"] svg {
  color: #d97706 !important;
  stroke: #d97706 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="madruga"] svg {
  color: #059669 !important;
  stroke: #059669 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="brucebenner"] svg {
  color: #005ca9 !important;
  stroke: #005ca9 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="logged_out"],
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="logged_out"] > span:first-child,
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="logged_out"] > span:first-child span,
body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="logged_out"] svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="linker"] > span:last-child {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="madruga"] > span:last-child {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="brucebenner"] > span:last-child {
  background-color: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0369a1 !important;
  font-weight: 700 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option[data-profile="logged_out"] > span:last-child {
  background-color: #fef2f2 !important;
  border-color: #f87171 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

body.theme-caixa header #dropdown-switch-profiles .btn-profile-option:hover {
  background-color: #f0f7fa !important;
}

/* ==================== AUDITORIA GERAL DE CONTRASTE: TEMA CLARO CAIXA ==================== */
/* 1. Alerta de Segurança e Privacidade LGPD */
body.theme-caixa .privacy-notice-box {
  background-color: #f0f7fa !important;
  border: 1.5px solid #005ca9 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 12px rgba(0, 92, 169, 0.05) !important;
}

body.theme-caixa .privacy-notice-box strong {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

body.theme-caixa .privacy-notice-box svg {
  color: #005ca9 !important;
}

/* 2. Seção Principal de Destaque: Meus Bolões em Andamento (Fundo Azul Suave) */
body.theme-caixa #pools-main-section-card,
body.theme-caixa #ub2-pools-main-section-card,
body.theme-caixa .pools-main-section-wrapper {
  background-color: #dbe7eb !important; /* Azul suave oficial Caixa para alto contraste e destaque */
  border: 1.5px solid #b5ccd1 !important;
  box-shadow: 0 4px 16px rgba(0, 92, 169, 0.08) !important;
}

body.theme-caixa #pools-main-section-card > h3,
body.theme-caixa #pools-main-section-card > h3 span,
body.theme-caixa #ub2-pools-main-section-card > h3,
body.theme-caixa #ub2-pools-main-section-card > h3 span,
body.theme-caixa #ub2-pools-header-toggle h3,
body.theme-caixa #ub2-pools-header-toggle h3 span,
body.theme-caixa #ub2-pools-header-toggle svg {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

body.theme-caixa #pools-count-badge,
body.theme-caixa #ub2-pools-count-badge {
  background-color: rgba(0, 92, 169, 0.15) !important;
  color: #005ca9 !important;
  border: 1px solid rgba(0, 92, 169, 0.25) !important;
}

/* 2.0-B Seção Principal de Destaque: Minhas Apostas Individuais e Compartilhadas (Verde Suave Oficial do Projeto #d4ede4 + Alto Contraste) */
body.theme-caixa #ub2-individual-section,
body.theme-caixa .individual-main-section-wrapper {
  background-color: #d4ede4 !important;
  border: 1.5px solid #9fd4c0 !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08) !important;
}

body.theme-caixa #ub2-individual-header-toggle,
body.theme-caixa #ub2-individual-header-toggle > span,
body.theme-caixa #ub2-individual-header-toggle > span span,
body.theme-caixa #ub2-individual-header-toggle > span svg,
body.theme-caixa #ub2-individual-chevron {
  color: #065f46 !important;
  stroke: #065f46 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body.theme-caixa #ub2-individual-header-toggle #btn-ub2-manual-bet,
body.theme-caixa #btn-ub2-manual-bet {
  background-color: #059669 !important;
  border: 1px solid #047857 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.theme-caixa #ub2-individual-header-toggle #btn-ub2-manual-bet:hover,
body.theme-caixa #btn-ub2-manual-bet:hover {
  background-color: #047857 !important;
  border-color: #065f46 !important;
}

body.theme-caixa #ub2-individual-header-toggle #btn-ub2-manual-bet span,
body.theme-caixa #ub2-individual-header-toggle #btn-ub2-manual-bet svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body.theme-caixa #ub2-individual-header-toggle #ub2-individual-count,
body.theme-caixa #ub2-individual-count {
  background-color: #ffffff !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
  text-shadow: none !important;
}

body.theme-caixa #ub2-individual-empty,
body.theme-caixa #ub2-pools-empty-placeholder {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px dashed #9fd4c0 !important;
  color: #1e293b !important;
  font-weight: 500 !important;
}

body.theme-caixa #ub2-pools-empty-placeholder {
  border-color: #93b8c2 !important;
}

body.theme-caixa #ub2-individual-empty strong {
  color: #065f46 !important;
  font-weight: 700 !important;
}

body.theme-caixa #ub2-pools-empty-placeholder strong {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

/* Botão Gerenciar do Bolão e Gaveta de Opções Administrativas */
.btn-pool-manage-toggle,
body.theme-caixa .btn-pool-manage-toggle {
  background-color: #005ca9 !important;
  border: 1px solid #004e8f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.15s ease;
}

.btn-pool-manage-toggle *,
body.theme-caixa .btn-pool-manage-toggle * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.btn-pool-manage-toggle:hover,
body.theme-caixa .btn-pool-manage-toggle:hover {
  background-color: #00427b !important;
}

body.theme-caixa .pool-manage-drawer {
  background-color: #f8fafc !important;
  border: 1px solid #cfdfe2 !important;
}

/* 2.1 Cards de Bolões Individuais (2 Colunas Independentes - Fundo Branco Preservado) */
#pools-list-container,
#ub2-pools-list-container {
  column-gap: 1rem;
}

#pools-list-container > .pool-card,
#pools-list-container > div,
#ub2-pools-list-container > .pool-card,
#ub2-pools-list-container > div {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
  vertical-align: top;
}

body.theme-caixa #pools-list-container > .pool-card,
body.theme-caixa #pools-list-container > div,
body.theme-caixa #ub2-pools-list-container > .pool-card,
body.theme-caixa #ub2-pools-list-container > div {
  background-color: #ffffff !important; /* Fundo branco preservado nos cards internos */
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 4px 14px rgba(0, 92, 169, 0.06) !important;
}

body.theme-caixa #pools-list-container h4,
body.theme-caixa #pools-list-container .pool-card-title,
body.theme-caixa #ub2-pools-list-container h4,
body.theme-caixa #ub2-pools-list-container .pool-card-title {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

/* Criado por, descrição e contadores: Textos escuros de alta legibilidade */
body.theme-caixa #pools-list-container .pool-creator-name,
body.theme-caixa #pools-list-container .pool-games-count,
body.theme-caixa #pools-list-container strong:not(.text-white),
body.theme-caixa #ub2-pools-list-container .pool-creator-name,
body.theme-caixa #ub2-pools-list-container .pool-games-count,
body.theme-caixa #ub2-pools-list-container strong:not(.text-white) {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.theme-caixa #pools-list-container .pool-desc-text,
body.theme-caixa #pools-list-container .text-gray-400,
body.theme-caixa #pools-list-container .text-gray-300,
body.theme-caixa #pools-list-container .text-slate-600,
body.theme-caixa #ub2-pools-list-container .pool-desc-text,
body.theme-caixa #ub2-pools-list-container .text-gray-400,
body.theme-caixa #ub2-pools-list-container .text-gray-300,
body.theme-caixa #ub2-pools-list-container .text-slate-600 {
  color: #334155 !important;
}

body.theme-caixa #pools-list-container .bg-gray-950\/60,
body.theme-caixa #ub2-pools-list-container .bg-gray-950\/60 {
  background-color: #f8fafc !important;
  border: 1px solid #cfdfe2 !important;
}

body.theme-caixa #pools-list-container .bg-gray-950\/60 span:not(.lotto-ball),
body.theme-caixa #ub2-pools-list-container .bg-gray-950\/60 span:not(.lotto-ball) {
  color: #334155 !important;
}

/* Bolinhas Verdes: Números ESTRITAMENTE BRANCOS (Sem afetar outros elementos) */
.lotto-ball-selected,
.lotto-ball-hit,
div.lotto-ball.lotto-ball-selected,
div.lotto-ball.lotto-ball-hit,
body.theme-caixa .lotto-ball-selected,
body.theme-caixa .lotto-ball-hit,
body.theme-caixa #pools-list-container .lotto-ball-selected,
body.theme-caixa #pools-list-container div.lotto-ball,
body.theme-caixa #ub2-pools-list-container .lotto-ball-selected,
body.theme-caixa #ub2-pools-list-container div.lotto-ball {
  background: #549969 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Pílula do ID do Bolão Clicável para Cópia Direta (Otimização Máxima de Espaço) */
.pool-id-pill,
body.theme-caixa .pool-id-pill {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}

.pool-id-pill:hover,
body.theme-caixa .pool-id-pill:hover {
  background-color: #e2e8f0 !important;
  border-color: #005ca9 !important;
  transform: translateY(-1px);
}

.pool-id-pill:hover .pool-id-val,
body.theme-caixa .pool-id-pill:hover .pool-id-val {
  color: #005ca9 !important;
}

/* 3. Solicitações de Conexão Recebidas (Aceite Mútuo) */
body.theme-caixa #pending-friend-requests-box {
  background-color: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
}

body.theme-caixa #pending-friend-requests-box h4 {
  color: #b45309 !important;
  font-weight: 800 !important;
}

body.theme-caixa .user-request-item {
  background-color: #ffffff !important;
  border: 1px solid #fde68a !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.08) !important;
}

body.theme-caixa .user-request-item .user-display-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 4. Lista de Amigos e Busca de Usuários */
body.theme-caixa .user-friend-item,
body.theme-caixa .user-search-item {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 2px 8px rgba(0, 92, 169, 0.04) !important;
}

body.theme-caixa .user-friend-item .user-display-name,
body.theme-caixa .user-search-item .user-display-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.theme-caixa .user-search-item .text-gray-400 {
  color: #64748b !important;
}

/* 5. Modais de Autenticação e Cadastro (Google OAuth / Ficha Simples) */
body.theme-caixa #modal-auth .bg-\[\#111827\],
body.theme-caixa #modal-register-profile .bg-\[\#111827\],
body.theme-caixa #modal-manual-bet .bg-\[\#111827\] {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 92, 169, 0.25) !important;
}

body.theme-caixa #modal-auth h3,
body.theme-caixa #modal-register-profile h3,
body.theme-caixa #modal-manual-bet h3 {
  color: #005ca9 !important;
  font-weight: 800 !important;
}

body.theme-caixa #modal-auth p,
body.theme-caixa #modal-register-profile p,
body.theme-caixa #modal-manual-bet label {
  color: #334155 !important;
}

body.theme-caixa #modal-auth .bg-gray-900,
body.theme-caixa #modal-auth .bg-gray-950 {
  background-color: #f0f7fa !important;
  border: 1.5px solid #005ca9 !important;
}

body.theme-caixa #modal-auth .bg-gray-900 span,
body.theme-caixa #modal-auth .bg-gray-900 div,
body.theme-caixa #modal-auth .bg-gray-900 p {
  color: #1e293b !important;
}

body.theme-caixa #modal-register-profile .bg-gray-900 {
  background-color: #f0f7fa !important;
  border: 1.5px solid #005ca9 !important;
}

body.theme-caixa #modal-register-profile .bg-gray-900 div,
body.theme-caixa #modal-register-profile .bg-gray-900 strong {
  color: #0f172a !important;
}

body.theme-caixa #modal-register-profile .bg-gray-900\/60,
body.theme-caixa #modal-register-profile .border-gray-800 {
  background-color: #f8fafc !important;
  border-color: #cfdfe2 !important;
}

body.theme-caixa #modal-register-profile label,
body.theme-caixa #modal-register-profile p {
  color: #1e293b !important;
}

body.theme-caixa #modal-register-profile .bg-\[\#1e293b\] {
  background-color: #e2e8f0 !important;
}

body.theme-caixa #tab-avatar-opt-initials,
body.theme-caixa #tab-avatar-opt-megatop,
body.theme-caixa #tab-avatar-opt-upload {
  color: #475569 !important;
}

body.theme-caixa #tab-avatar-opt-initials.bg-\[\#005ca9\],
body.theme-caixa #tab-avatar-opt-megatop.bg-\[\#005ca9\],
body.theme-caixa #tab-avatar-opt-upload.bg-\[\#005ca9\] {
  background-color: #005ca9 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.theme-caixa #modal-register-profile input,
body.theme-caixa #modal-auth input,
body.theme-caixa #modal-manual-bet input {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #0f172a !important;
}

/* 7. Cards de Bilhetes de Usuário em 'Meus Jogos' */
body.theme-caixa .user-bet-card {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 4px 12px rgba(0, 92, 169, 0.05) !important;
}

/* 8. Breakdown do Simulador Retroativo */
body.theme-caixa .user-retro-item {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 2px 6px rgba(0, 92, 169, 0.04) !important;
}

body.theme-caixa .user-retro-item .text-gray-400 {
  color: #334155 !important;
}

/* ==================== PÍLULA DE IDENTIFICADOR DO BOLÃO (ID) ==================== */
.pool-id-pill {
  background-color: #1f2937;
  border: 1px solid #374151;
  color: #9ca3af;
}

.pool-id-val {
  color: #ffffff;
}

body.theme-caixa .pool-id-pill {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #64748b !important;
}

body.theme-caixa .pool-id-val {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   DESMEMBRAMENTO MANDATÓRIO DE CORES (ORDEM DO LINKER)
   Grupo 1: Elementos com Fundo Azul/Laranja/Verde -> Fontes e Ícones BRANCOS
   Grupo 2: Elementos com Fundo Clarinho/Neutro -> Fontes e Ícones ESCUROS
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRUPO 1: FUNDOS COLORIDOS / ESCUROS (Azul Caixa #005ca9, Laranja #f37021/#f39200, Verde)
   -> Background explícito + Fontes e Ícones ESTRITAMENTE BRANCOS
   -------------------------------------------------------------------------- */

/* 1.1 Elementos com Fundo Azul Caixa (#005ca9) */
.btn-share-bet,
.btn-request-friend-action,
.badge-polygon-blue,
.badge-blue-solid,
#user-panel-badge,
button.bg-\[\#005ca9\],
body.theme-caixa .btn-share-bet,
body.theme-caixa .btn-request-friend-action,
body.theme-caixa .badge-polygon-blue,
body.theme-caixa .badge-blue-solid,
body.theme-caixa #user-panel-badge,
body.theme-caixa button.bg-\[\#005ca9\] {
  background-color: #005ca9 !important;
  border: 1px solid #005ca9 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.btn-share-bet:hover,
.btn-request-friend-action:hover,
button.bg-\[\#005ca9\]:hover,
body.theme-caixa .btn-share-bet:hover,
body.theme-caixa .btn-request-friend-action:hover,
body.theme-caixa button.bg-\[\#005ca9\]:hover {
  background-color: #004e8f !important;
  border-color: #004e8f !important;
  color: #ffffff !important;
}

.btn-share-bet *,
.btn-request-friend-action *,
.badge-polygon-blue *,
.badge-blue-solid *,
#user-panel-badge *,
button.bg-\[\#005ca9\] *,
body.theme-caixa .btn-share-bet *,
body.theme-caixa .btn-request-friend-action *,
body.theme-caixa .badge-polygon-blue *,
body.theme-caixa .badge-blue-solid *,
body.theme-caixa #user-panel-badge *,
body.theme-caixa button.bg-\[\#005ca9\] * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 1.2 Elementos com Fundo Laranja Caixa (#f37021 / #f39200) */
.badge-polygon-orange,
#btn-generate-games,
button.bg-\[\#f39200\],
button.bg-amber-500,
button.bg-amber-600,
body.theme-caixa .badge-polygon-orange,
body.theme-caixa #btn-generate-games,
body.theme-caixa button.bg-\[\#f39200\],
body.theme-caixa button.bg-amber-500,
body.theme-caixa button.bg-amber-600 {
  background-color: #f39200 !important;
  border: 1px solid #f39200 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.badge-polygon-orange *,
#btn-generate-games *,
button.bg-\[\#f39200\] *,
button.bg-amber-500 *,
button.bg-amber-600 *,
body.theme-caixa .badge-polygon-orange *,
body.theme-caixa #btn-generate-games *,
body.theme-caixa button.bg-\[\#f39200\] *,
body.theme-caixa button.bg-amber-500 *,
body.theme-caixa button.bg-amber-600 * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 1.3 Elementos com Fundo Verde Caixa (#059669 / #10b981) */
.btn-accept-friend,
.btn-accept-search-req,
#btn-create-pool,
#btn-save-manual-bet,
button.bg-emerald-600,
button.bg-emerald-500,
body.theme-caixa .btn-accept-friend,
body.theme-caixa .btn-accept-search-req,
body.theme-caixa #btn-create-pool,
body.theme-caixa #btn-save-manual-bet,
body.theme-caixa button.bg-emerald-600,
body.theme-caixa button.bg-emerald-500 {
  background-color: #059669 !important;
  border: 1px solid #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.btn-accept-friend *,
.btn-accept-search-req *,
#btn-create-pool *,
#btn-save-manual-bet *,
button.bg-emerald-600 *,
button.bg-emerald-500 *,
body.theme-caixa .btn-accept-friend *,
body.theme-caixa .btn-accept-search-req *,
body.theme-caixa #btn-create-pool *,
body.theme-caixa #btn-save-manual-bet *,
body.theme-caixa button.bg-emerald-600 *,
body.theme-caixa button.bg-emerald-500 * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* --------------------------------------------------------------------------
   GRUPO 2: FUNDOS CLARINHOS / NEUTROS (#f1f5f9, #ffffff, cinza suave)
   -> Fontes e Ícones ESTRITAMENTE ESCUROS
   -------------------------------------------------------------------------- */

/* A. Botão 'Simular' (Fundo Clarinho com Texto Escuro e Ícone Âmbar) */
.btn-sim-single-bet,
body.theme-caixa .btn-sim-single-bet {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

.btn-sim-single-bet span,
body.theme-caixa .btn-sim-single-bet span {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.btn-sim-single-bet svg,
body.theme-caixa .btn-sim-single-bet svg {
  stroke: #b45309 !important; /* Âmbar dourado de alto contraste */
  color: #b45309 !important;
}

.btn-sim-single-bet:hover,
body.theme-caixa .btn-sim-single-bet:hover {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-sim-single-bet:hover span,
.btn-sim-single-bet:hover svg,
body.theme-caixa .btn-sim-single-bet:hover span,
body.theme-caixa .btn-sim-single-bet:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* B. Botão 'Excluir' (Lixeira no Canto Superior Direito) - Fundo Clarinho com Ícone Preto */
.btn-delete-user-bet,
body.theme-caixa .btn-delete-user-bet {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cfdfe2 !important;
  color: #000000 !important;
  transition: all 0.15s ease;
}

.btn-delete-user-bet svg,
.btn-delete-user-bet svg *,
body.theme-caixa .btn-delete-user-bet svg,
body.theme-caixa .btn-delete-user-bet svg * {
  stroke: #000000 !important;
  color: #000000 !important;
  fill: none !important;
}

.btn-delete-user-bet:hover,
body.theme-caixa .btn-delete-user-bet:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-delete-user-bet:hover svg,
.btn-delete-user-bet:hover svg *,
body.theme-caixa .btn-delete-user-bet:hover svg,
body.theme-caixa .btn-delete-user-bet:hover svg * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Alerta LGPD em linha única - Tema Claro Oficial Caixa */
.privacy-notice-box,
body.theme-caixa .privacy-notice-box {
  background-color: #e8f1f5 !important;
  border: 1.5px solid #bcd0d4 !important;
  color: #1e293b !important;
}

.privacy-notice-box strong,
body.theme-caixa .privacy-notice-box strong {
  color: #005ca9 !important;
}

.privacy-notice-box svg,
body.theme-caixa .privacy-notice-box svg {
  stroke: #005ca9 !important;
  color: #005ca9 !important;
}


/* ==================== v2.10.0: ALERTA PISCANTE NO CABEÇALHO & NOTIFICAÇÕES ==================== */
@keyframes headerAlertPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(243, 112, 33, 0.7);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 16px 4px rgba(243, 112, 33, 0.5);
  }
}

.header-blinking-alert {
  animation: headerAlertPulse 1.8s infinite ease-in-out;
  cursor: pointer;
  background: linear-gradient(135deg, #f59e0b 0%, #f37021 50%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fde047 !important;
}

.header-blinking-alert span,
.header-blinking-alert svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ==================== TABELA DETALHAMENTO DOS CONCURSOS PREMIADOS (FIM DO BRANCO NO BRANCO) ==================== */
body.theme-caixa #simulation-prizes-table tr {
  border-bottom: 1px solid #e2e8f0 !important;
  transition: background-color 0.15s ease;
}

body.theme-caixa #simulation-prizes-table tr:hover {
  background-color: #f1f5f9 !important;
}

body.theme-caixa #simulation-prizes-table td {
  color: #1e293b !important;
}

body.theme-caixa #simulation-prizes-table .sim-prize-contest-num,
body.theme-caixa #simulation-prizes-table td.sim-prize-contest-num {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

/* ==================== ANATOMIA DOS BILHETES (v2.10.0) ==================== */
.user-bet-card {
  transition: all 0.2s ease;
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
}

body.theme-caixa .user-bet-card {
  background-color: #ffffff !important;
  border: 1.5px solid #cfdfe2 !important;
  box-shadow: 0 2px 6px rgba(0, 92, 169, 0.04);
}

/* Destaque Chamativo para Aposta Premiada */
.user-bet-card.winning-hit-card {
  border: 2px solid #f59e0b !important;
  background-color: #fefce8 !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3) !important;
  position: relative;
}

@keyframes winningCardGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
  }
}

.user-bet-card.winning-hit-card {
  animation: winningCardGlow 2s infinite ease-in-out;
}

/* Badges de Origem da Aposta */
.bet-origin-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.bet-origin-generator {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

.bet-origin-pool {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.bet-origin-manual {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

/* Resultado da Simulação no Meio da Linha 2 (Posição Fixa Independente da Quantidade de Bolinhas) */
.bet-sim-result-text {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .user-bet-card .bet-row-2 {
    position: relative !important;
  }

  .user-bet-card .bet-sim-result-container {
    position: absolute !important;
    left: 55% !important;
    top: calc(50% + 4px) !important;
    transform: translate(-50%, -50%) !important;
    width: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
    padding: 0 !important;
  }
}

/* ==================== TABELA DE HISTÓRICO DE CONCURSOS: TEMA CLARO CAIXA ==================== */
body.theme-caixa #history-table-body tr {
  border-bottom-color: #e2e8f0 !important;
}

body.theme-caixa #history-table-body tr:hover {
  background-color: #f0f7fa !important;
}

body.theme-caixa #history-table-body td {
  color: #334155 !important;
}

body.theme-caixa #history-table-body td:first-child,
body.theme-caixa #history-table-body .history-contest-num {
  color: #005ca9 !important;
  font-weight: 700 !important;
}

/* ==================== BADGE "AGUARDANDO ACEITE" NA BUSCA DE USUÁRIOS ==================== */
.badge-pending-friend,
body.theme-caixa .badge-pending-friend {
  background-color: #fef3c7 !important;
  border: 1.5px solid #f59e0b !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.15) !important;
}