/**
 * Resultados Loteria - Estilos Principais
 * Arquivo de estilos centralizado seguindo BEM (Block Element Modifier)
 */

/* ===== VARIÁVEIS CSS ===== */
:root {
  /* 🎨 2026-08-24 — paleta VERDE de loteria, substituindo o roxo.
     Os tokens já irrigavam abas, botões, foco e gradientes, então trocá-los
     leva a maior parte da interface junto sem tocar em regra por regra. */
  --primary-color: #128c46;
  --primary-dark: #0a5c2e;
  /* Fundo da página: verde profundo com brilho radial ao centro. */
  --verde-fundo: #063d1f;
  --verde-fundo-2: #0a5c2e;
  --verde-brilho: #17b85e;
  /* Botão secundário escuro (grafite), como no app de referência. */
  --grafite: #2b3033;
  --grafite-claro: #3a4145;
  --secondary-color: #ff9800;
  --success-color: #4caf50;
  --danger-color: #f44336;
  --info-color: #2196f3;
  --background-light: #f4f4f4;
  --background-white: #fff;
  --text-dark: #333;
  --text-gray: #666;
  --border-color: #e0e0e0;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --transition-default: all 0.3s ease;
}

/* ===== RESET E BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--background-light);
  display: flex;
  justify-content: center;
  padding: 30px;
  line-height: 1.6;
}

/* ===== COMPONENTES ===== */

/* Select personalizado */
select {
  height: auto;
  width: 250px;
  padding: 12px 20px;
  text-align: center;
  color: var(--primary-color);
  font-size: 1.1em;
  font-weight: 600;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(18, 140, 70, 0.2);
  background-color: var(--background-white);
  cursor: pointer;
  transition: var(--transition-default);
  outline: none;
}

select:hover {
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(18, 140, 70, 0.3);
  transform: translateY(-2px);
}

select:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(18, 140, 70, 0.1);
}

select option {
  padding: 10px;
  font-size: 1em;
}

/* ===== ABAS (TABS) ===== */
.tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 12px;
}

.tab {
  padding: 10px 18px;
  background-color: var(--background-white);
  color: var(--text-gray);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  transition: var(--transition-default);
  user-select: none;
  white-space: nowrap;
}

.tab:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 140, 70, 0.2);
}

.tab--active {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-dark) 100%
  );
  color: var(--background-white);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(18, 140, 70, 0.3);
}

.tab--acumulado {
  position: relative;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-color: var(--success-color);
  color: #2e7d32;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
  animation: pulse-green 2s infinite;
}

.tab--acumulado::before {
  content: "💰";
  margin-right: 5px;
  font-size: 1.1em;
}

.tab--acumulado::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: var(--success-color);
  border-radius: 50%;
  border: 2px solid var(--background-white);
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  animation: blink 1.5s infinite;
}

.tab--active.tab--acumulado {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-dark) 100%
  );
  border-color: var(--primary-color);
  color: var(--background-white);
  box-shadow:
    0 4px 20px rgba(18, 140, 70, 0.4),
    0 0 20px rgba(76, 175, 80, 0.3);
}

.tab--active.tab--acumulado::after {
  background: #81c784;
  border-color: var(--primary-color);
}

.tab--acumulado:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* ===== ANIMAÇÕES ===== */
@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.5);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== PAINEL PRINCIPAL ===== */
.panel {
  background-color: var(--background-white);
  border-radius: 8px;
  box-shadow: var(--shadow-light);
  padding: 20px;
  width: 98%;
  max-width: 1600px;
  text-align: center;
}

.panel h1 {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: var(--text-dark);
}

/* ===== NÚMEROS SORTEADOS ===== */
.numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.number {
  background-color: var(--primary-color);
  color: var(--background-white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
}

/* ===== SEÇÕES DE CONTEÚDO ===== */
.sections-container {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.analysis-section,
.real-time-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  text-align: left;
  flex: 1;
  min-width: 300px;
  overflow-wrap: break-word;
}

.analysis-section {
  border: 1px solid var(--primary-color);
}

.analysis-section h3 {
  color: var(--primary-color);
  font-size: 1.1em;
  margin-bottom: 10px;
  text-align: center;
}

.real-time-section {
  background-color: #fff3e0;
  border: 2px solid var(--secondary-color);
}

.real-time-section h3 {
  color: var(--secondary-color);
  font-size: 1.1em;
  margin-bottom: 10px;
  text-align: center;
}

/* ===== ITENS DE ESTATÍSTICA ===== */
.stat-item {
  margin: 8px 0;
  font-size: 0.95em;
}

.numero-quente {
  background-color: var(--danger-color);
  color: var(--background-white);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
  margin: 3px;
  display: inline-block;
}

.numero-frio {
  background-color: var(--info-color);
  color: var(--background-white);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
  margin: 3px;
  display: inline-block;
}

/* ===== CAIXAS DE SUGESTÃO ===== */
.sugestao-box {
  background-color: #e8f5e9;
  border-left: 4px solid var(--success-color);
  padding: 10px;
  margin-top: 10px;
  border-radius: 4px;
}

.sugestao-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.sugestao-controls label {
  font-weight: bold;
  font-size: 0.9em;
}

.sugestao-controls input {
  width: 60px;
  padding: 5px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  text-align: center;
}

.sugestoes-multiplas {
  margin-top: 10px;
}

.jogo-sugerido {
  background-color: var(--background-white);
  border: 1px solid var(--success-color);
  border-radius: 5px;
  padding: 8px;
  margin: 5px 0;
}

/* ===== BOTÕES ===== */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  transition: var(--transition-default);
}

.btn-gerar {
  background-color: var(--success-color);
  color: var(--background-white);
}

.btn-gerar:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-estrategia {
  padding: 8px 16px;
  border: 2px solid #9c27b0;
  background-color: var(--background-white);
  color: #9c27b0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: var(--transition-default);
}

.btn-estrategia:hover {
  background-color: #9c27b0;
  color: var(--background-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.btn-estrategia--active {
  background-color: #9c27b0;
  color: var(--background-white);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

.btn-desdobrar {
  background-color: #03a9f4;
  color: var(--background-white);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: var(--transition-default);
}

.btn-desdobrar:hover {
  background-color: #0288d1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 169, 244, 0.3);
}

/* ===== TEMPO REAL ===== */
.realtime-item {
  background-color: var(--background-white);
  border-left: 4px solid var(--secondary-color);
  padding: 10px;
  margin: 8px 0;
  border-radius: 4px;
}

.realtime-item strong {
  color: var(--secondary-color);
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
  margin-left: 5px;
}

.badge-acumulado {
  background-color: var(--danger-color);
  color: var(--background-white);
}

.badge-normal {
  background-color: var(--success-color);
  color: var(--background-white);
}

.badge-alto {
  background-color: var(--secondary-color);
  color: var(--background-white);
}

/* ===== COMPARAÇÃO ===== */
.comparacao-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.comparacao-item {
  background-color: #e3f2fd;
  border: 1px solid var(--info-color);
  border-radius: 5px;
  padding: 10px;
  text-align: center;
}

.comparacao-item h4 {
  color: var(--info-color);
  font-size: 0.9em;
  margin: 0 0 5px 0;
}

.comparacao-valor {
  font-size: 1.2em;
  font-weight: bold;
  color: #1976d2;
}

/* ===== SPINNER DE CARREGAMENTO ===== */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner-container {
  background-color: var(--background-white);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Spinner do app: era a Zebrinha (🦓) girando; desde 15/09 é o Trevinho
   (img/trevinho.svg, gerado do SVG inline da landing) — "substituir imagens
   da Zebrinha pelo mascotinho em todo o sistema". */
.spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  line-height: 1;
  animation: zebrinha-bounce 1.2s ease-in-out infinite;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.spinner::before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 64px;
  background: url("../img/trevinho.svg") center / contain no-repeat;
  animation: zebrinha-spin 2.4s ease-in-out infinite;
}

@keyframes zebrinha-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

@keyframes zebrinha-spin {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

.spinner-text {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.1em;
}

.spinner-progress {
  width: 300px;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 10px;
  margin: 20px auto 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.spinner-progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 2px 4px rgba(18, 140, 70, 0.3);
  position: relative;
  overflow: hidden;
}

.spinner-progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.spinner-progress-text {
  color: var(--text-gray);
  font-size: 0.9em;
  margin-top: 8px;
}

.spinner-status-text {
  color: var(--primary-color);
  font-size: 0.85em;
  margin-top: 10px;
  font-style: italic;
  min-height: 20px;
  opacity: 0.8;
}

/* ===== SEÇÕES DE ESTRATÉGIAS ===== */
.estrategia-section {
  background-color: #f3e5f5;
  border: 2px solid #9c27b0;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.estrategia-section h4 {
  color: #9c27b0;
  font-size: 1em;
  margin: 0 0 10px 0;
  text-align: center;
}

.estrategia-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.estrategia-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: bold;
  margin-left: 5px;
}

.tag-conservadora {
  background-color: var(--success-color);
  color: var(--background-white);
}

.tag-balanceada {
  background-color: var(--secondary-color);
  color: var(--background-white);
}

.tag-arriscada {
  background-color: var(--danger-color);
  color: var(--background-white);
}

/* ===== DESDOBRAMENTO ===== */
.desdobramento-section {
  background-color: #e1f5fe;
  border: 2px solid #03a9f4;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.desdobramento-section h4 {
  color: #03a9f4;
  font-size: 1em;
  margin: 0 0 10px 0;
  text-align: center;
}

.desdobramento-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.desdobramento-controls label {
  font-weight: 600;
  font-size: 0.9em;
  color: #0277bd;
}

.desdobramento-controls input,
.desdobramento-controls select {
  padding: 6px 12px;
  border: 2px solid #03a9f4;
  border-radius: 5px;
  font-size: 0.9em;
  text-align: center;
}

/* ===== FECHAMENTO ===== */
.fechamento-section {
  background-color: #fff3e0;
  border: 2px solid var(--secondary-color);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.fechamento-section h4 {
  color: var(--secondary-color);
  font-size: 1em;
  margin: 0 0 10px 0;
  text-align: center;
}

.fechamento-info {
  background-color: var(--background-white);
  border-left: 4px solid var(--secondary-color);
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 0.9em;
}

.fechamento-info strong {
  color: var(--secondary-color);
}

/* ===== PREMIAÇÕES ===== */
.premiacoes-section {
  background-color: #f3e5f5;
  border: 2px solid #9c27b0;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.premiacoes-section h4 {
  color: #9c27b0;
  font-size: 1em;
  margin: 0 0 10px 0;
  text-align: center;
}

.premiacao-item {
  background-color: var(--background-white);
  border-left: 4px solid #9c27b0;
  padding: 10px;
  margin: 8px 0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.premiacao-faixa {
  font-weight: bold;
  color: #9c27b0;
  flex: 1;
  min-width: 120px;
}

.premiacao-valor {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--success-color);
  flex: 1;
  text-align: center;
}

.premiacao-ganhadores {
  color: var(--text-gray);
  flex: 1;
  text-align: right;
  font-size: 0.9em;
}

.concurso-info {
  background-color: #e1f5fe;
  border-left: 4px solid #03a9f4;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 0.9em;
}

.concurso-info strong {
  color: #0277bd;
}

/* ===== RESULTADOS DE JOGOS ===== */
.resultado-jogos {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 10px;
}

.jogo-item {
  background-color: var(--background-white);
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jogo-numero {
  background-color: #9c27b0;
  color: var(--background-white);
  padding: 5px 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.9em;
  min-width: 35px;
  text-align: center;
}

/* ===== ANÁLISES AVANÇADAS ===== */
.analises-avancadas {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
}

.analise-card {
  background: var(--background-white);
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: var(--shadow-light);
  border-left: 4px solid var(--primary-color);
  transition: var(--transition-default);
}

.analise-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.analise-card h5 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.analise-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 15px 0;
}

.stat-box {
  background: var(--background-light);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  border: 2px solid var(--border-color);
  transition: var(--transition-default);
}

.stat-box:hover {
  border-color: var(--primary-color);
  transform: scale(1.02);
}

.stat-label {
  font-size: 0.85em;
  color: var(--text-gray);
  margin-bottom: 8px;
  font-weight: 600;
}

.stat-value {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-value.success {
  color: var(--success-color);
}

.stat-value.warning {
  color: var(--secondary-color);
}

.stat-value.danger {
  color: var(--danger-color);
}

.faixa-comum {
  background: #e8f5e9;
  border: 2px solid var(--success-color);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  text-align: center;
}

.faixa-comum strong {
  color: var(--success-color);
}

.lista-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  justify-content: center;
}

.lista-numeros .number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  color: white;
  background: var(--primary-color);
  font-size: 0.9em;
}

.lista-numeros .number.atrasado {
  background: var(--danger-color);
  animation: pulse 2s infinite;
}

.lista-numeros .number.regular {
  background: var(--success-color);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.tabela-correlacao {
  max-height: 300px;
  overflow-y: auto;
  margin: 15px 0;
}

.tabela-correlacao table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.tabela-correlacao th,
.tabela-correlacao td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.tabela-correlacao th {
  background: var(--primary-color);
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabela-correlacao tr:hover {
  background: var(--background-light);
}

.score-total {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-dark)
  );
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin: 15px 0;
}

.score-total .score-numero {
  font-size: 3em;
  font-weight: bold;
  margin: 10px 0;
}

.validacao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin: 8px 0;
  background: var(--background-light);
  border-radius: 8px;
  border-left: 4px solid var(--border-color);
}

.validacao-item.valido {
  border-left-color: var(--success-color);
  background: #e8f5e9;
}

.validacao-item.invalido {
  border-left-color: var(--danger-color);
  background: #ffebee;
}

.validacao-item .icone {
  font-size: 1.5em;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  .sections-container {
    flex-direction: column;
  }

  .panel {
    width: 100%;
    padding: 15px;
  }

  select {
    width: 100%;
  }

  .analysis-section,
  .real-time-section {
    min-width: 100%;
  }

  .tabs-container {
    gap: 5px;
    padding: 8px;
  }

  .tab {
    padding: 8px 12px;
    font-size: 0.85em;
  }

  .btn {
    width: 100%;
    margin: 5px 0;
  }

  .comparacao-box {
    grid-template-columns: 1fr;
  }

  .analise-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }

  .number {
    width: 35px;
    height: 35px;
    font-size: 1em;
  }

  .panel h1 {
    font-size: 1.2em;
  }

  .score-total .score-numero {
    font-size: 2em;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CHAT AI-FIRST (Claude integration)
   ════════════════════════════════════════════════════════════════════════ */

.chat-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  color: white;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(18, 140, 70, 0.5);
  z-index: 10001;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.chat-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(18, 140, 70, 0.7);
}

.chat-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.chat-sidebar--open {
  transform: translateX(0);
}

.chat-header {
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  color: white;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.chat-title {
  font-weight: 700;
  font-size: 1.15em;
}
.chat-subtitle {
  font-size: 0.78em;
  opacity: 0.85;
}
.chat-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.chat-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f7f8fb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-welcome {
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: #444;
  font-size: 0.95em;
  line-height: 1.5;
}
.chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.chat-suggestion {
  background: #f0f4ff;
  border: 1px solid #d6e0ff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 0.88em;
  color: #4a5cd9;
  transition: background 0.2s;
}
.chat-suggestion:hover {
  background: #e0e8ff;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}
.chat-msg--user {
  align-self: flex-end;
}
.chat-msg--assistant {
  align-self: flex-start;
}
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.93em;
  line-height: 1.45;
  word-wrap: break-word;
}
.chat-msg--user .chat-msg-bubble {
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-msg--assistant .chat-msg-bubble {
  background: white;
  color: #2c3e50;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.chat-msg-bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}
.chat-msg-bubble ul {
  margin: 6px 0 6px 20px;
  padding: 0;
}

.chat-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.chat-card {
  background: white;
  border-left: 4px solid #128c46;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.chat-card-title {
  font-weight: 600;
  color: #128c46;
  font-size: 0.9em;
  margin-bottom: 8px;
}
.chat-card-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chat-card-num {
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  color: white;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85em;
}
.chat-card-meta {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 8px;
}
.chat-card-copy {
  background: #f0f4ff;
  border: 1px solid #d6e0ff;
  color: #4a5cd9;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8em;
  cursor: pointer;
}
.chat-card-copy:hover {
  background: #e0e8ff;
}

.chat-tools-used {
  font-size: 0.72em;
  color: #999;
  margin-top: 4px;
  padding-left: 4px;
}
.chat-cached-badge {
  font-size: 0.7em;
  color: #5a8;
  margin-top: 2px;
  padding-left: 4px;
}

.chat-typing .chat-msg-bubble {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
}
.chat-typing .chat-msg-bubble span {
  width: 7px;
  height: 7px;
  background: #999;
  border-radius: 50%;
  animation: chatBounce 1.4s infinite ease-in-out;
}
.chat-typing .chat-msg-bubble span:nth-child(2) {
  animation-delay: 0.2s;
}
.chat-typing .chat-msg-bubble span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes chatBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background: white;
  flex-shrink: 0;
}
.chat-input-row textarea {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.92em;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s;
}
.chat-input-row textarea:focus {
  border-color: #128c46;
}
.chat-send {
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  color: white;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-send:hover {
  transform: scale(1.05);
}
.chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.chat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
  font-size: 0.78em;
  color: #666;
  flex-shrink: 0;
}
.chat-footer label {
  cursor: pointer;
  user-select: none;
}
.chat-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  opacity: 0.7;
}
.chat-clear:hover {
  opacity: 1;
}

@media (max-width: 480px) {
  .chat-sidebar {
    width: 100vw;
  }
  .chat-toggle {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   JOGOS QUENTES — modo minimalista
   ════════════════════════════════════════════════════════════════════════ */
.jq-minimal {
  max-width: 720px;
  margin: 24px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.jq-minimal-header {
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.jq-minimal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jq-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
}
.jq-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.jq-card-idx {
  font-size: 0.85em;
  font-weight: 700;
  color: #999;
  min-width: 28px;
}
.jq-card-numeros {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.jq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: #128c46;
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.95em;
}
.jq-card-score {
  font-size: 0.85em;
  font-weight: 600;
  color: #128c46;
  min-width: 42px;
  text-align: right;
}
.jq-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.jq-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.15s;
}
.jq-btn:hover {
  background: #f0f0f0;
}
.jq-btn--ghost {
  flex: 1;
}
.jq-btn--mini {
  padding: 4px 8px;
  font-size: 0.9em;
}
.jq-minimal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

/* ════════════════════════════════════════════════════════════════════════
   AI HERO — input central no topo
   ════════════════════════════════════════════════════════════════════════ */
.ai-hero {
  max-width: 720px;
  margin: 24px auto 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #128c46 0%, #0a5c2e 100%);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 6px 22px rgba(18, 140, 70, 0.35);
}
.ai-hero-title {
  font-size: 1.15em;
  margin-bottom: 4px;
}
.ai-hero-subtitle {
  font-size: 0.85em;
  opacity: 0.9;
  margin-bottom: 14px;
}
.ai-hero-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ai-hero-form input {
  flex: 1;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.95em;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  outline: none;
}
.ai-hero-form input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}
.ai-hero-btn {
  padding: 11px 18px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-hero-btn:hover {
  background: rgba(0, 0, 0, 0.4);
}
.ai-hero-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ai-hero-quick button {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 999px;
  font-size: 0.82em;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-hero-quick button:hover {
  background: rgba(255, 255, 255, 0.35);
}
.ai-hero-briefing {
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  font-size: 0.88em;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .ai-hero {
    margin: 12px;
    padding: 16px;
  }
  .ai-hero-form {
    flex-direction: column;
  }
  .ai-hero-btn {
    width: 100%;
  }
}
/* ═══ Auth box (Google sign-in) ═══ */
.auth-box {
  float: right;
  font-size: 13px;
}
.auth-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
}
.auth-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.auth-btn--ghost {
  background: transparent;
}
.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-user img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
/* ═══ Auth box (correção: flex em vez de float) ═══ */
.ai-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.auth-box {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  float: none !important;
}

/* ═══ Painel: Apetite a risco (home) ═══ */
.risk-config-panel {
  margin: -20px 0 24px;
  padding: 14px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.04);
}
.risk-config-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #111111;
}
.risk-config-header p {
  margin: 4px 0 10px;
  font-size: 0.88rem;
  color: #555555;
}
.risk-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
}
.risk-config-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.risk-config-field span {
  font-size: 0.8rem;
  color: #444444;
  font-weight: 700;
}
.risk-config-field select,
.risk-config-field input {
  width: 100%;
  height: 40px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: #222222;
  background: #ffffff;
}
.risk-config-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.risk-config-status {
  font-size: 0.9rem;
  color: #555555;
  min-height: 19px;
}
.risk-config-status.is-ok {
  color: #1f8a46;
}
.risk-config-status.is-error {
  color: #c0392b;
}

.risk-effective-summary {
  margin-top: 12px;
  border-top: 1px solid #efefef;
  padding-top: 10px;
}

.baseline-weekly-summary {
  margin-top: 12px;
  border-top: 1px solid #eef1f5;
  padding-top: 10px;
}

.baseline-weekly-header {
  font-size: 0.86rem;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 8px;
}

.baseline-weekly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}

.baseline-weekly-card {
  border: 1px solid #e7edf4;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fc 100%);
}

.baseline-weekly-card--empty {
  background: #fafafa;
}

.baseline-weekly-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.baseline-weekly-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
  margin-bottom: 6px;
}

.baseline-weekly-status--ok {
  background: #eaf9ef;
  color: #1f7a3b;
  border-color: #bde6ca;
}

.baseline-weekly-status--empty {
  background: #f2f2f2;
  color: #646464;
  border-color: #d9d9d9;
}

.baseline-weekly-line {
  font-size: 0.82rem;
  color: #444;
  margin: 2px 0;
}

.baseline-weekly-empty {
  font-size: 0.82rem;
  color: #666;
  padding: 8px 10px;
  border: 1px dashed #d7dde7;
  border-radius: 10px;
  background: #fcfdff;
}

.baseline-weekly-footnote {
  margin-top: 8px;
  font-size: 0.76rem;
  color: #667085;
}

.risk-effective-header {
  font-size: 0.86rem;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 8px;
}

.risk-effective-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}

.risk-effective-card {
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
}

.risk-effective-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.risk-effective-line {
  font-size: 0.82rem;
  color: #444;
  margin: 2px 0;
}

.risk-effective-divider {
  border-top: 1px dashed #e1e7f2;
  margin: 7px 0;
}

.risk-confidence-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.risk-conf-high {
  background: #e7f7ed;
  color: #1c7a3b;
  border-color: #b9e6c9;
}

.risk-conf-mid {
  background: #eef5ff;
  color: #1d4f9f;
  border-color: #c6dafd;
}

.risk-conf-low {
  background: #fff4e8;
  color: #9a5c09;
  border-color: #f1d3ad;
}

.risk-conf-none {
  background: #f2f2f2;
  color: #666;
  border-color: #dddddd;
}

.risk-last-change {
  color: #5a5a5a;
  font-size: 0.78rem;
  line-height: 1.35;
}

.risk-meta-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.risk-meta-high {
  background: #e8f8ef;
  color: #1f7a3b;
  border-color: #bee8cd;
}

.risk-meta-mid {
  background: #edf5ff;
  color: #1d4f9f;
  border-color: #c9dcfe;
}

.risk-meta-low {
  background: #fff4e8;
  color: #9a5c09;
  border-color: #f3d5af;
}

.risk-meta-none {
  background: #f2f2f2;
  color: #666;
  border-color: #ddd;
}

.risk-meta-weights {
  color: #555;
  font-size: 0.77rem;
  line-height: 1.35;
}

.feature-hints {
  margin-top: 12px;
  border: 1px solid #e8edf7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
  text-align: left;
}

.feature-hints summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f3d7a;
  padding: 10px 12px;
}

.feature-hints-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.feature-hint-card {
  border: 1px solid #dfe8f8;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.feature-hint-card h4 {
  font-size: 0.88rem;
  color: #17346a;
  margin: 0 0 6px;
}

.feature-hint-card p {
  font-size: 0.8rem;
  color: #334a73;
  margin: 0;
  line-height: 1.4;
}

.feature-hints--jogos {
  margin-bottom: 14px;
}

.ext-download-panel {
  margin: 10px 0 16px;
  border: 1px solid #dce7ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.ext-download-panel__text h3 {
  margin: 0 0 4px;
  color: #17346a;
  font-size: 0.96rem;
}

.ext-download-panel__text p {
  margin: 2px 0;
  color: #37527f;
  font-size: 0.82rem;
}

.ext-download-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 230px;
}

.ext-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 12px;
  background: #1e5ef0;
  color: #fff;
  font-weight: 700;
  border: 1px solid #1a53d6;
}

.ext-download-btn:hover {
  background: #184fd0;
}

.ext-download-link {
  text-align: center;
  font-size: 0.8rem;
  color: #305a9d;
}

@media (max-width: 820px) {
  .ext-download-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .ext-download-panel__actions {
    min-width: 0;
  }
}

.risk-level-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
  vertical-align: middle;
}

.risk-level-normal {
  background: #eaf9ef;
  color: #1f7a3b;
  border-color: #bde6ca;
}

.risk-level-atencao {
  background: #fff8e8;
  color: #9a6700;
  border-color: #f5d68b;
}

.risk-level-critico {
  background: #fdeeee;
  color: #a61f24;
  border-color: #efb7b9;
}

.risk-level-desconhecido {
  background: #f3f3f3;
  color: #666;
  border-color: #dbdbdb;
}

.risk-score {
  font-size: 0.78rem;
  color: #6a6a6a;
}

.risk-auto-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.risk-auto-detail {
  color: #5f5f5f;
  font-size: 0.76rem;
}

.risk-auto-status-off {
  background: #f2f2f2;
  color: #646464;
  border-color: #d9d9d9;
}

.risk-auto-status-assistido {
  background: #eaf3ff;
  color: #24539e;
  border-color: #c9dcfb;
}

.risk-auto-status-aplicado {
  background: #fff4e5;
  color: #8a4d00;
  border-color: #f0cd9c;
}

.risk-auto-status-monitor {
  background: #e8f6f0;
  color: #1f6b4d;
  border-color: #bfe5d4;
}

.risk-auto-status-indisponivel {
  background: #f5f5f5;
  color: #666;
  border-color: #e0e0e0;
}

.risk-trend-wrap {
  margin: 6px 0 8px;
  padding: 6px 8px;
  border: 1px dashed #e5e5e5;
  border-radius: 8px;
  background: #fff;
}

.risk-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 44px;
}

.risk-trend-bar {
  flex: 1;
  min-width: 8px;
  border-radius: 3px 3px 1px 1px;
  background: #d9d9d9;
  border: 1px solid #cfcfcf;
}

.risk-trend-caption {
  margin-top: 4px;
  font-size: 0.74rem;
  color: #6a6a6a;
  text-align: right;
}

@media (max-width: 980px) {
  .risk-config-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }

  .risk-effective-grid {
    grid-template-columns: 1fr;
  }

  .feature-hints-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .risk-config-grid {
    grid-template-columns: 1fr;
  }
  .risk-config-panel {
    margin-top: -10px;
  }
}

/* ═══ Sino de notificações ═══ */
.notif-bell {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 13px;
}
.notif-bell:hover {
  background: rgba(255, 255, 255, 0.3);
}
.notif-badge {
  background: #ff3366;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  margin-left: 4px;
}

/* ═══ Dashboard Meus Jogos ═══ */
.meus-jogos {
  margin: 24px auto;
  max-width: 760px;
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.meus-jogos-titulo {
  font-size: 18px;
  margin: 0 0 10px;
  color: #2c2c54;
}
.meus-jogos-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
.mj-stat {
  background: #f4f6fb;
  padding: 4px 10px;
  border-radius: 12px;
}
.mj-stat--premio {
  background: #fff3cd;
  color: #8a6d00;
}
.meus-jogos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mj-card {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafbfd;
}
.mj-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mj-card-jogo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: #128c46;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}
.mj-card-nums {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.mj-num {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: #128c46;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.mj-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef0f5;
  color: #555;
}
.mj-tag--ok {
  background: #d4edda;
  color: #155724;
}
.mj-btn-del {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
}
.mj-btn-del:hover {
  opacity: 1;
}
.mj-card-apelido {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
  padding-left: 4px;
}
/* ═══ Info do concurso (abaixo do jq-minimal-header) ═══ */
.jq-concurso-info {
  font-size: 13px;
  color: #444;
  padding: 8px 12px;
  margin: 4px 0 12px;
  background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%);
  border-radius: 8px;
  border-left: 3px solid #128c46;
}
.jq-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 2px 0;
}
.jq-info-row--anterior {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d8dde9;
  font-size: 12px;
  color: #555;
}
.jq-info-tag {
  background: #fff;
  border: 1px solid #e2e6ef;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  color: #333;
}
.jq-info-tag b {
  color: #2c2c54;
}
.jq-info-tag--premio b {
  color: #008f5d;
}
.jq-info-acum {
  background: #ffe066;
  color: #8a6d00;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  text-transform: uppercase;
}
.jq-info-anterior-label {
  font-weight: 600;
  color: #2c2c54;
}
.jq-info-anterior-val b {
  color: #008f5d;
}
/* ═══ Badge popularidade no card jq ═══ */
.jq-pop {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 4px;
  cursor: help;
  white-space: nowrap;
}
.jq-pop--ok {
  background: #d4edda;
  color: #155724;
}
.jq-pop--med {
  background: #fff3cd;
  color: #8a6d00;
}
.jq-pop--ruim {
  background: #f8d7da;
  color: #721c24;
}

/* ═══ Card de honestidade ═══ */
.jq-honestidade {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%);
  border-radius: 8px;
  border-left: 3px solid #888;
  font-size: 12px;
}
.jq-hon-titulo {
  font-weight: 600;
  color: #2c2c54;
  margin-bottom: 8px;
  font-size: 13px;
}
.jq-hon-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.jq-hon-stats > div {
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #e2e6ef;
}
.jq-hon-stats span {
  display: block;
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.jq-hon-stats b {
  color: #2c2c54;
  font-size: 13px;
}
.jq-hon-veredicto {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 6px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 6px;
}
.jq-hon-aviso {
  font-size: 11px;
  color: #666;
  font-style: italic;
  line-height: 1.4;
}
/* === Chat: botão minimizar e estado minimizado === */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-header-info {
  cursor: default;
  flex: 1;
  min-width: 0;
}
.chat-min {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.chat-min:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Sidebar minimizada: vira uma barra fina no rodapé direito */
.chat-sidebar.chat-sidebar--min {
  height: auto;
  top: auto;
  bottom: 0;
  right: 16px;
  width: 280px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  transform: translateX(0);
}
.chat-sidebar.chat-sidebar--min .chat-header {
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  padding: 10px 14px;
}
.chat-sidebar.chat-sidebar--min .chat-header-info {
  cursor: pointer;
}
.chat-sidebar.chat-sidebar--min .chat-title {
  font-size: 0.95em;
}
.chat-sidebar.chat-sidebar--min .chat-subtitle {
  display: none;
}
.chat-sidebar.chat-sidebar--min .chat-messages,
.chat-sidebar.chat-sidebar--min .chat-input-row,
.chat-sidebar.chat-sidebar--min .chat-footer {
  display: none;
}

/* === Controles inline do gerador (jq-controls) === */
.jq-controls {
  background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid #e2e6ef;
}
.jq-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.jq-controls-row + .jq-controls-row {
  border-top: 1px dashed #d8dde9;
  padding-top: 8px;
}
.jq-controls-label {
  font-size: 12px;
  color: #555;
  font-weight: 600;
  margin-right: 4px;
}
.jq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.jq-chip {
  background: #fff;
  border: 1px solid #d8dde9;
  color: #444;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.jq-chip:hover {
  border-color: #128c46;
  color: #128c46;
}
.jq-chip--active {
  background: #128c46;
  border-color: #128c46;
  color: #fff;
}
/* 🆕 2026-08-11: seleção múltipla de estratégias. O "✓" deixa explícito que
   marcar é acumulativo — sem ele o chip roxo parece o antigo "selecionado
   único" e o usuário não descobre que pode marcar mais. */
#jqChips .jq-chip--active::before {
  content: "✓ ";
  font-weight: 700;
}
/* 🆕 2026-08-12: "mais acertos no histórico". Visual deliberadamente sóbrio —
   não compete com o banner de campeã com evidência, porque é informação de
   natureza diferente (descreve o passado, não promete vantagem).

   🐛 FIX: `.jq-campea` é `display:flex`, então este bloco entrava como TERCEIRO
   item e espremia a coluna de texto do meio numa tira vertical. `flex-basis`
   de 100% + `flex-wrap` no pai jogam a nota para a própria linha. */
.jq-campea {
  flex-wrap: wrap;
}
.jq-campea-hist {
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #ddd;
  font-size: 12px;
  line-height: 1.45;
  color: #555;
  text-align: left;
}
.jq-campea-hist--abaixo {
  color: #8a6d3b;
}

/* 🆕 2026-08-11: seletor de teimosinha por jogo, ao lado do botão de carrinho. */
.jq-teimosinha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
  white-space: nowrap;
}
.jq-teimosinha select {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.jq-estrategias-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #777;
}
.jq-estrategias-resumo {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #128c46;
  min-height: 16px;
}
.jq-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #555;
  flex: 1;
  min-width: 140px;
}
.jq-slider-wrap b {
  color: #2c2c54;
}
.jq-slider-wrap input[type="range"] {
  width: 100%;
  accent-color: #128c46;
}
.jq-btn--primary {
  background: #128c46;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.jq-btn--primary:hover {
  background: #5b4bd6;
}
.jq-btn--primary:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Estrategia campea (walk-forward por estrategia) */
.jq-campea {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px 0;
  padding: 8px 12px;
  background: rgba(18, 140, 70, 0.08);
  border-left: 3px solid #128c46;
  border-radius: 6px;
  font-size: 0.92em;
}
.jq-campea-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
}
.jq-campea-txt {
  flex: 1;
  color: #2d3436;
}
.jq-campea-ganho {
  margin-left: 6px;
  font-weight: 600;
}

/* Estrategia campea (walk-forward por estrategia) */
.jq-campea {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px 0;
  padding: 8px 12px;
  background: rgba(18, 140, 70, 0.08);
  border-left: 3px solid #128c46;
  border-radius: 6px;
  font-size: 0.92em;
}
.jq-campea-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
}
.jq-campea-txt {
  flex: 1;
  color: #2d3436;
}
.jq-campea-ganho {
  margin-left: 6px;
  font-weight: 600;
}

/* ============================================================
   TEMA ZEBRINHA — homenagem retro a mascote da Loteria (1972)
   Borjalo / Rede Globo / Caixa Economica Federal
   "Olha eu ai! Zeeebra!!!"
   ============================================================ */

:root {
  --zebra-gold: #f1c40f;
  --zebra-gold-dark: #c9a300;
  --zebra-black: #1a1a1a;
  --zebra-stripe: repeating-linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.06) 0,
    rgba(26, 26, 26, 0.06) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* Banner campea com listras sutis */
.jq-campea {
  position: relative;
  background:
    var(--zebra-stripe),
    linear-gradient(
      90deg,
      rgba(241, 196, 15, 0.08) 0%,
      rgba(18, 140, 70, 0.06) 100%
    );
  border-left-width: 4px;
  transition: all 0.3s ease;
}

/* Variante "ZEBRA!" — destaque dourado quando estrategia surpresa vence */
.jq-campea--zebra {
  border-left-color: var(--zebra-gold);
  box-shadow: 0 2px 8px rgba(241, 196, 15, 0.2);
  animation: zebrinhaGlow 2.5s ease-in-out infinite alternate;
}
@keyframes zebrinhaGlow {
  from {
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.2);
  }
  to {
    box-shadow: 0 4px 14px rgba(241, 196, 15, 0.45);
  }
}

.jq-campea-zebra-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(
    135deg,
    var(--zebra-gold) 0%,
    var(--zebra-gold-dark) 100%
  );
  color: var(--zebra-black);
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: 0.5px;
  border-radius: 12px;
  margin-left: auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Toast bordao da Zebrinha (retro, canto inferior direito) */
.zebrinha-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 16px;
  background: #fff;
  background-image: var(--zebra-stripe);
  border: 3px solid var(--zebra-black);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-width: 360px;
  transform: translateX(420px) rotate(-2deg);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.zebrinha-toast--show {
  transform: translateX(0) rotate(-1deg);
  opacity: 1;
}
.zebrinha-emoji {
  font-size: 2.2em;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  animation: zebrinhaWiggle 0.6s ease-in-out 0.5s 2;
}
@keyframes zebrinhaWiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}
.zebrinha-fala {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--zebra-black);
  line-height: 1.25;
}
.zebrinha-fala b {
  font-size: 1.05em;
  letter-spacing: 0.3px;
}
.zebrinha-fala small {
  font-size: 0.78em;
  opacity: 0.7;
}

/* Acento dourado no chip ativo (touch retro) */
.jq-chip--active {
  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.3);
}

/* Listras sutis no header do chat (cartao-truca retro) */
.chat-header-info {
  background-image: var(--zebra-stripe);
}

/* Mobile: toast menor */
@media (max-width: 600px) {
  .zebrinha-toast {
    right: 12px;
    left: 12px;
    bottom: 16px;
    max-width: none;
  }
  .jq-campea-zebra-badge {
    margin-left: 0;
    margin-top: 4px;
  }
}
/* ════════════════════════════════════════════════════════════════════
   MINIMALISMO — camada final (inspirado em wix.com/blog/minimalist-websites)
   Princípios: 2-3 cores | ample white space | bold typography | flat hierarchy
   Paleta: branco quase puro + preto profundo + dourado Zebrinha como acento
   ════════════════════════════════════════════════════════════════════ */
:root {
  --m-bg: #fafaf7;
  --m-surface: #ffffff;
  --m-ink: #111111;
  --m-ink-soft: #555555;
  --m-line: #ececec;
  --m-accent: #f1c40f;
  --m-accent-ink: #1a1a1a;
  --m-radius: 14px;
  --m-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.04);
}

body {
  background: var(--m-bg);
  color: var(--m-ink);
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 48px 24px;
  line-height: 1.55;
}

.panel {
  max-width: 960px;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

/* ── Hero AI — protagonista, generoso, sem ruído ───────────────────── */
.ai-hero {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 56px 48px 44px;
  margin: 0 0 40px;
}
.ai-hero-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--m-ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ai-hero-title strong {
  font-weight: 800;
}
.ai-hero-subtitle {
  color: var(--m-ink-soft);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 28px;
}
.ai-hero-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
#aiHeroInput {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid var(--m-line);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--m-bg);
  color: var(--m-ink);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
#aiHeroInput:focus {
  outline: none;
  border-color: var(--m-ink);
  background: var(--m-surface);
}
.ai-hero-btn {
  padding: 16px 28px;
  background: var(--m-ink);
  color: var(--m-surface);
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.18s ease;
}
.ai-hero-btn:hover {
  background: #000;
  transform: translateY(-1px);
}
.ai-hero-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ai-hero-quick button {
  padding: 8px 14px;
  background: transparent;
  color: var(--m-ink-soft);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-hero-quick button:hover {
  border-color: var(--m-ink);
  color: var(--m-ink);
  background: var(--m-surface);
}

/* Auth box — discreta, alinhada ao título */
.auth-btn {
  background: transparent;
  color: var(--m-ink);
  border: 1px solid var(--m-line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-btn:hover {
  border-color: var(--m-ink);
}
.auth-btn--ghost {
  border: 0;
  color: var(--m-ink-soft);
  padding: 8px 10px;
}
/* ═══ Fator sorte: transparência do que o controle faz ═══
   A barra é a explicação — duas faixas proporcionais mostram a mistura real
   entre padrão da estratégia e sorteio uniforme. Cor só reforça; o texto
   ao lado carrega o número, então nada depende de enxergar a cor. */
.jq-sorte-explica {
  flex-basis: 100%;
  margin-top: 8px;
}
.jq-sorte-barra {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--m-line, #e3e6ea);
  max-width: 420px;
}
.jq-sorte-padrao { background: #2a78d6; }
.jq-sorte-aleat { background: #eda100; }
.jq-sorte-txt {
  margin-top: 5px;
  font-size: 12px;
  color: var(--m-ink-soft, #5b6672);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jq-sorte-nota { color: #b26a00; }
.jq-sorte-mais {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}
.jq-sorte-mais:hover { opacity: 1; }
.jq-sorte-detalhe {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--m-ink-soft, #5b6672);
  background: var(--m-surface, #f6f7f9);
  border: 1px solid var(--m-line, #e3e6ea);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 560px;
}

/* `.auth-btn` foi escrito para <button>; num <a> falta zerar o sublinhado e
   usar inline-flex, senão o padding da pílula não fecha em volta do texto. */
.auth-btn--link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Tabs — flat, indicador inferior ──────────────────────────────── */
.tabs-container {
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--m-line);
  border-radius: 0;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 32px;
}
.tab {
  background: transparent !important;
  color: var(--m-ink-soft) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: none !important;
  transform: none !important;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.tab:hover {
  color: var(--m-ink) !important;
  border-bottom-color: var(--m-line) !important;
}
.tab--active {
  color: var(--m-ink) !important;
  border-bottom-color: var(--m-ink) !important;
  background: transparent !important;
}

/* ── Cards / containers ──────────────────────────────────────────── */
#jogos-quentes-section {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 36px;
}

/* Chips de estratégia — pílulas leves */
.jq-chip {
  background: transparent !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-ink-soft) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.jq-chip:hover {
  border-color: var(--m-ink) !important;
  color: var(--m-ink) !important;
}
.jq-chip--active {
  background: var(--m-ink) !important;
  border-color: var(--m-ink) !important;
  color: var(--m-surface) !important;
}

/* Botão primário do bloco jogos quentes */
.jq-btn--primary {
  background: var(--m-ink) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.jq-btn--primary:hover {
  background: #000 !important;
}

/* ── Banner Estratégia campeã — minimalista com acento dourado ──── */
.jq-campea {
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-left: 3px solid var(--m-ink);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.92rem;
}
.jq-campea--zebra {
  border-left-color: var(--m-accent);
  background: linear-gradient(
    90deg,
    rgba(241, 196, 15, 0.08) 0%,
    var(--m-bg) 60%
  );
}
.jq-campea-badge {
  background: var(--m-ink);
  color: var(--m-surface);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
}
.jq-campea--zebra .jq-campea-badge {
  background: var(--m-accent);
  color: var(--m-accent-ink);
}

/* ── Tipografia geral mais limpa ─────────────────────────────────── */
h1,
h2,
h3,
h4 {
  letter-spacing: -0.015em;
  color: var(--m-ink);
}

/* Spinner overlay mais sóbrio */
.spinner-overlay {
  background: rgba(250, 250, 247, 0.85);
}

/* Mobile: respiro reduzido mas mantido */
@media (max-width: 720px) {
  body {
    padding: 24px 12px;
  }
  .ai-hero {
    padding: 32px 22px 26px;
  }
  .ai-hero-form {
    flex-direction: column;
  }
  .ai-hero-btn {
    width: 100%;
  }
  #jogos-quentes-section {
    padding: 22px 16px;
  }
}
/* ════════════════════════════════════════════════════════════════════
   PERSONALIDADE — overrides sobre a camada minimalista
   Devolve cor (roxo da marca), profundidade, calor visual e Zebrinha
   sem perder respiro/tipografia/hierarquia.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* 🎨 2026-08-24 — o roxo da marca virou verde de loteria. Este bloco
     governa o painel de geração, que é a maior área da tela: trocar só o
     :root do topo deixaria metade da interface roxa. */
  --m-bg: #eef7f1; /* verde muito claro, quase branco */
  --m-surface: #ffffff;
  --m-ink: #10281a; /* verde-escuro quase preto */
  --m-ink-soft: #4b6b58;
  --m-line: #dceae2;
  --brand: #128c46; /* verde de loteria */
  --brand-dark: #0a5c2e;
  --brand-soft: rgba(18, 140, 70, 0.12);
  --m-accent: #f1c40f;
  --m-accent-ink: #1a1a1a;
  --m-radius: 16px;
  --m-shadow:
    0 1px 2px rgba(10, 92, 46, 0.06), 0 12px 32px rgba(10, 92, 46, 0.08);
  --m-shadow-hover:
    0 2px 4px rgba(10, 92, 46, 0.08), 0 18px 44px rgba(10, 92, 46, 0.14);
}

body {
  background:
    radial-gradient(
      1200px 600px at 10% -10%,
      rgba(18, 140, 70, 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 110% 10%,
      rgba(241, 196, 15, 0.1),
      transparent 60%
    ),
    var(--m-bg);
  background-attachment: fixed;
}

/* Hero — gradiente sutil + acento dourado em "Consultor" */
.ai-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow);
  position: relative;
  overflow: hidden;
}
.ai-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--m-accent) 100%);
}
.ai-hero-title strong {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-hero-subtitle {
  color: var(--m-ink-soft);
}

#aiHeroInput {
  border: 2px solid var(--m-line);
  background: #ffffff;
  border-radius: 12px;
  transition: all 0.2s ease;
}
#aiHeroInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.ai-hero-btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 12px;
  padding: 16px 30px;
  box-shadow: 0 4px 14px rgba(18, 140, 70, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.ai-hero-btn:hover {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 140, 70, 0.45);
}

.ai-hero-quick button {
  background: #fff;
  border: 1px solid var(--m-line);
  color: var(--m-ink-soft);
}
.ai-hero-quick button:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-1px);
}

/* Auth pill — toque colorido */
.auth-btn {
  border: 1px solid var(--m-line);
  color: var(--brand-dark);
  font-weight: 600;
}
.auth-btn:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* Tabs — pílulas roxas, indicador embaixo persiste */
.tabs-container {
  border-bottom: 1px solid var(--m-line);
}
.tab {
  border-radius: 10px 10px 0 0 !important;
  padding: 14px 22px;
  font-weight: 600;
  position: relative;
}
.tab:hover {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
  border-bottom-color: var(--brand-soft) !important;
}
.tab--active {
  color: var(--brand-dark) !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--brand-soft) 100%
  ) !important;
  border-bottom: 3px solid var(--brand) !important;
}

/* Cards do bloco principal */
#jogos-quentes-section {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow);
}

/* Chips estratégia: leves, mas com cor no hover/active */
.jq-chip {
  background: #fff !important;
  border: 1.5px solid var(--m-line) !important;
  color: var(--m-ink-soft) !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}
.jq-chip:hover {
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  transform: translateY(-1px);
}
.jq-chip--active {
  background: linear-gradient(
    135deg,
    var(--brand) 0%,
    var(--brand-dark) 100%
  ) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow:
    0 4px 12px rgba(18, 140, 70, 0.35),
    0 0 0 2px rgba(241, 196, 15, 0.35) !important;
}

/* Botão primário */
.jq-btn--primary {
  background: linear-gradient(
    135deg,
    var(--brand) 0%,
    var(--brand-dark) 100%
  ) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 14px rgba(18, 140, 70, 0.32) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease !important;
}
.jq-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 140, 70, 0.45) !important;
}

/* Banner Estratégia campeã: roxo padrão, dourado quando ZEBRA */
.jq-campea {
  background: linear-gradient(
    90deg,
    var(--brand-soft) 0%,
    rgba(18, 140, 70, 0.04) 100%
  );
  border: 1px solid var(--m-line);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: 14px 18px;
}
.jq-campea-badge {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.jq-campea--zebra {
  background:
    var(--zebra-stripe),
    linear-gradient(
      90deg,
      rgba(241, 196, 15, 0.18) 0%,
      rgba(18, 140, 70, 0.05) 100%
    );
  border-left-color: var(--m-accent);
}
.jq-campea--zebra .jq-campea-badge {
  background: linear-gradient(
    135deg,
    var(--m-accent) 0%,
    var(--zebra-gold-dark) 100%
  );
  color: var(--m-accent-ink);
}

/* Headings com peso e leve gradiente sutil */
h1,
h2 {
  color: var(--m-ink);
}
h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Spinner */
.spinner-overlay {
  background: rgba(245, 243, 255, 0.85);
}

/* Mobile */
@media (max-width: 720px) {
  .ai-hero {
    padding: 32px 22px 26px;
  }
}
/* ── Ajustes finais de layout ─────────────────────────────────────── */

/* Auth no canto superior direito do hero, fora do fluxo do título */
.ai-hero {
  padding-top: 64px;
}
.ai-hero .auth-box {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 5;
}
.ai-hero-title {
  justify-content: flex-start;
  text-align: left;
}
.ai-hero-subtitle {
  text-align: left;
}
.ai-hero-form,
.ai-hero-quick {
  justify-content: flex-start;
}

/* Card único: o container interno fica transparente para evitar branco-no-branco */
#jogos-quentes-section > * {
  background: transparent;
  box-shadow: none;
}
#jogos-quentes-section .jq-card,
#jogos-quentes-section .jogos-quentes-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
#jogos-quentes-section {
  padding: 28px 32px;
}

/* Mobile: auth volta para o fluxo */
@media (max-width: 600px) {
  .ai-hero {
    padding-top: 56px;
  }
  .ai-hero .auth-box {
    position: static;
    margin-bottom: 12px;
  }
}
/* ── Refino de alinhamentos ──────────────────────────────────────── */

/* Título: tamanho mais contido, espaço garantido para auth absoluto */
.ai-hero-title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  padding-right: 180px; /* reserva espaço para botão Entrar */
  line-height: 1.2;
}
.ai-hero {
  padding: 56px 40px 36px;
}

/* Auth: posição absoluta com margem segura */
.ai-hero .auth-box {
  top: 22px;
  right: 26px;
}

/* Card interno (.jq-minimal): fica transparente para evitar branco-no-branco */
.jq-minimal {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
.jq-minimal-header {
  text-align: left !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--m-ink-soft) !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
#jogos-quentes-section {
  padding: 32px 36px;
}

/* Mobile: libera padding-right do título e reposiciona auth */
@media (max-width: 720px) {
  .ai-hero-title {
    padding-right: 0 !important;
    font-size: 1.4rem !important;
  }
  .ai-hero .auth-box {
    position: static !important;
    margin-bottom: 14px;
  }
  .ai-hero {
    padding-top: 28px;
  }
  #jogos-quentes-section {
    padding: 22px 16px;
  }
}
/* Badge EV (sharing model) — dourado quando ganhador, cinza quando ruim */
.jq-ev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
  letter-spacing: 0.2px;
}
.jq-ev--bom {
  background: linear-gradient(135deg, #f1c40f 0%, #c9a300 100%);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(241, 196, 15, 0.35);
}
.jq-ev--ruim {
  background: #f3f3f3;
  color: #888;
  border: 1px solid #e0e0e0;
}
/* Resumo educativo de sharing model dentro do card de honestidade */
.jq-hon-sharing {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--m-line, #e6e6e6);
}
.jq-hon-sharing-titulo {
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 12px;
  color: var(--m-ink, #222);
}
.jq-hon-sharing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.jq-hon-sharing-col {
  padding: 14px 12px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #eee;
}
.jq-hon-sharing-col--bom {
  background: linear-gradient(135deg, #fff8d6 0%, #fef0a8 100%);
  border-color: #f1c40f;
}
.jq-hon-sharing-col--ruim {
  background: #f7f7f7;
  border-color: #e0e0e0;
  color: #666;
}
.jq-hon-sharing-rotulo {
  font-size: 0.78em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.jq-hon-sharing-rotulo small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
.jq-hon-sharing-num {
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.1;
}
.jq-hon-sharing-leg {
  font-size: 0.72em;
  opacity: 0.75;
  margin-top: 2px;
}
.jq-hon-sharing-conclusao {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--m-ink-soft, #555);
  text-align: center;
  padding: 0 4px;
}
.jq-hon-sharing-conclusao b {
  color: #c9a300;
}
@media (max-width: 480px) {
  .jq-hon-sharing-grid {
    grid-template-columns: 1fr;
  }
}
/* ==== Toasts de notificação (in-app, real-time) ==== */
.notif-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--m-line, #e6e6e6);
  border-left: 4px solid var(--brand, #128c46);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  animation: notifSlideIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.notif-toast--premio {
  border-left-color: #f1c40f;
  background: linear-gradient(135deg, #fffbe6 0%, #fff5cc 100%);
  box-shadow: 0 10px 28px rgba(241, 196, 15, 0.35);
}
.notif-toast--saindo {
  transform: translateX(120%);
  opacity: 0;
}
.notif-toast-icone {
  font-size: 1.6em;
  line-height: 1;
}
.notif-toast-corpo {
  flex: 1;
  min-width: 0;
}
.notif-toast-titulo {
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 4px;
  color: var(--m-ink, #222);
}
.notif-toast-msg {
  font-size: 0.85em;
  color: var(--m-ink-soft, #555);
  line-height: 1.4;
}
.notif-toast-fechar {
  background: transparent;
  border: 0;
  font-size: 1.4em;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
}
.notif-toast-fechar:hover {
  color: #333;
}
@keyframes notifSlideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==== Modal de notificações ==== */
.notif-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 35, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: notifFadeIn 0.2s;
}
@keyframes notifFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.notif-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifPop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes notifPop {
  from {
    transform: scale(0.92) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.notif-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--m-line, #eee);
}
.notif-modal-header h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--m-ink, #222);
}
.notif-modal-fechar {
  background: transparent;
  border: 0;
  font-size: 1.6em;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
}
.notif-modal-fechar:hover {
  color: #333;
}
.notif-modal-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.notif-modal-footer {
  padding: 10px 22px;
  border-top: 1px solid var(--m-line, #eee);
  text-align: center;
  color: #999;
}
.notif-vazio {
  padding: 40px 20px;
  text-align: center;
  color: #888;
  line-height: 1.6;
}
.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid #f5f5f5;
}
.notif-item:last-child {
  border-bottom: 0;
}
.notif-item--premio {
  background: linear-gradient(90deg, #fffbe6 0%, transparent 100%);
}
.notif-item-icone {
  font-size: 1.5em;
}
.notif-item-corpo {
  flex: 1;
  min-width: 0;
}
.notif-item-titulo {
  font-weight: 700;
  font-size: 0.95em;
  color: var(--m-ink, #222);
  margin-bottom: 3px;
}
.notif-item-msg {
  font-size: 0.88em;
  color: var(--m-ink-soft, #555);
  line-height: 1.45;
  margin-bottom: 5px;
}
.notif-item-meta {
  font-size: 0.72em;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 480px) {
  .notif-toast-container {
    top: 70px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  .notif-modal {
    max-height: 90vh;
  }
}
/* ==== ROI honesto: tabela financeira no painel honestidade ==== */
.jq-hon-roi {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--m-line, #e6e6e6);
}
.jq-hon-roi-titulo {
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 12px;
  color: var(--m-ink, #222);
}
.jq-hon-roi-tabela-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid var(--m-line, #eee);
}
.jq-hon-roi-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}
.jq-hon-roi-tabela th {
  background: #f7f5fb;
  color: var(--m-ink, #333);
  text-align: left;
  padding: 9px 10px;
  font-weight: 700;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--m-line, #eee);
}
.jq-hon-roi-tabela td {
  padding: 9px 10px;
  border-bottom: 1px solid #f5f5f5;
  color: var(--m-ink-soft, #555);
}
.jq-hon-roi-tabela tbody tr:last-child td {
  border-bottom: 0;
}
.jq-hon-roi-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.jq-hon-roi-tabela .jq-roi-roi {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #888;
}
.jq-hon-roi-tabela .jq-roi-row--bom {
  background: linear-gradient(90deg, #e8f9ed 0%, transparent 100%);
}
.jq-hon-roi-tabela .jq-roi-row--bom .jq-roi-roi {
  color: #008f5d;
}
.jq-hon-roi-tabela .jq-roi-row--ruim .jq-roi-roi {
  color: #c0392b;
}
.jq-hon-roi-conclusao {
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--m-ink-soft, #555);
  text-align: center;
  padding: 4px;
}
.jq-hon-roi-conclusao small {
  display: block;
  margin-top: 6px;
  opacity: 0.7;
  font-size: 0.85em;
}
/* Drift detector alert */
.jq-hon-drift {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff7e6 0%, #fff 100%);
  border: 1px solid #ffd591;
  font-size: 0.92rem;
}
.jq-hon-drift-titulo {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
}
.jq-hon-drift-stats {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #555;
}
.jq-hon-drift-stats span {
  color: #888;
  margin-right: 0.3rem;
}
.jq-hon-drift-stats b {
  color: #222;
}
.jq-hon-drift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
}
.jq-hon-drift-rotulo {
  font-weight: 600;
  color: #444;
  margin-bottom: 0.2rem;
}
.jq-hon-drift-aviso {
  font-size: 0.82rem;
  color: #6b4f00;
  font-style: italic;
  border-top: 1px dashed #ffd591;
  padding-top: 0.45rem;
  margin-top: 0.4rem;
}
@media (max-width: 480px) {
  .jq-hon-drift-grid {
    grid-template-columns: 1fr;
  }
}

/* Idade do snapshot no painel de honestidade — a métrica é recalculada
   semanalmente, então mostrar "há N dias" evita ler número velho como atual. */
.jq-hon-idade {
  font-weight: 400;
  font-size: 0.82em;
  color: #888;
}

/* Estado "sem favorita": nenhuma estratégia sobreviveu ao teste com correção
   de multiplicidade. Visual neutro de propósito — não é alerta nem conquista,
   é informação honesta. */
.jq-campea--sem-evidencia {
  background: #f6f7f9;
  border-left: 3px solid #b6bcc6;
}
.jq-campea--sem-evidencia .jq-campea-txt {
  color: #55606e;
}

/* Consequência MEDIDA da geração atual — o número real de dezenas usadas.
   Fica ao lado da proporção para o usuário ver o efeito, não a promessa. */
.jq-sorte-medida {
  color: var(--m-ink-soft, #5b6672);
  border-left: 1px solid var(--m-line, #e3e6ea);
  padding-left: 8px;
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA VERDE (2026-08-24)
   ═══════════════════════════════════════════════════════════════════════

   Aproxima a interface da linguagem visual de app de loteria: fundo verde
   profundo com brilho radial, cartões claros flutuando por cima, dezenas em
   círculos brancos com número verde, e ações secundárias em grafite.

   Fica em bloco próprio no fim do arquivo de propósito: o CSS tem 4 mil
   linhas e reescrever regra a regra teria risco alto de regressão visual em
   telas que eu não estou olhando. Aqui a mudança é de SUPERFÍCIE — trocam-se
   fundo, dezenas, abas e botões, e o resto herda dos tokens.

   ⚠️ Deliberadamente NÃO reproduz a marca (trevo/wordmark) do app oficial da
   CAIXA: a linguagem visual verde é comum a loteria, mas a marca é dela. */

body {
  background: radial-gradient(
      120% 90% at 50% -10%,
      var(--verde-brilho) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, var(--verde-fundo-2) 0%, var(--verde-fundo) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* O contêiner deixa de ser um cartão branco gigante e passa a ser só o
   grid — os cartões internos é que flutuam. */
.panel {
  background: transparent;
  box-shadow: none;
  padding: 12px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ai-hero {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}
.ai-hero-title,
.ai-hero-subtitle {
  color: #fff;
}
.ai-hero-subtitle {
  opacity: 0.9;
}

/* ── Abas ─────────────────────────────────────────────────────────────── */
.tab {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 10px 20px;
}
.tab:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.tab--active,
.tab--active:hover {
  background: #fff;
  color: var(--primary-dark);
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* ── Dezenas ──────────────────────────────────────────────────────────────
   No app de referência as dezenas do usuário são círculos BRANCOS com o
   número escuro — o oposto do que havia aqui (círculo colorido, número
   branco). O contraste fica melhor sobre fundo verde e é o que dá o "ar"
   da tela. */
.jq-num {
  min-width: 42px;
  height: 42px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 1em;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

/* ── Cartões de jogo ──────────────────────────────────────────────────── */
.jq-card {
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  border: none;
}

/* ── Ações secundárias em grafite ─────────────────────────────────────── */
.ext-download-btn,
.auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
  background: var(--grafite);
  color: #fff;
  border: 1px solid var(--grafite-claro);
  border-radius: 12px;
}
.ext-download-btn:hover,
.auth-btn:not(.auth-btn--ghost):not(.auth-btn--link):hover {
  background: var(--grafite-claro);
}

/* Painel da extensão: cartão claro sobre o verde. */
.ext-download-panel {
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

/* Texto solto direto sobre o fundo verde precisa clarear. */
.panel > h1,
.panel > h2 {
  color: #fff;
}

/* ── Barra de ações FIXA no rodapé (2026-08-24) ───────────────────────────
   Ela ficava depois da lista de cards. Com lote de 20-50 jogos isso obriga a
   rolar a tela inteira para alcançar justamente as ações EM LOTE — que é o
   que quem não quer rolar procura.

   Fixa no rodapé, o par "Adicionar todos → Criar carrinho" fica sempre à mão,
   independente da posição na lista. Preferido a duplicar os botões no topo:
   controle duplicado diverge com o tempo. */
.jq-minimal-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--m-line, #dceae2);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 22px rgba(10, 92, 46, 0.16);
}

/* O "Adicionar todos" é a ação que alimenta o "Criar carrinho" — ganha peso
   visual de primária para a barra se ler como sequência. */
#jqBtnAddTodos:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .jq-minimal-actions {
    gap: 6px;
    padding: 10px 8px;
  }
  .jq-minimal-actions .jq-btn {
    flex: 1 1 auto;
    font-size: 0.85em;
  }
}

/* ── Destaque de prêmio nas abas (2026-08-25) ─────────────────────────────
   A classe `.tab--acumulado` já existia, mas nunca acendeu: dependia de
   `acumulou`, que a ingestão nunca propagou. Agora o gatilho é o prêmio
   estimado contra a mediana do PRÓPRIO jogo — comparação entre modalidades
   daria destaque errado (R$12M é acumulado na lotofácil, pouco na megasena).

   O gradiente claro anterior sumia no tema verde; refeito para dourado, que
   é o que lê como "prêmio grande" e contrasta com o verde. */
.tab-premio {
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.85;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.tab--acumulado {
  background: rgba(241, 196, 15, 0.18);
  border-color: rgba(241, 196, 15, 0.55);
  color: #fff;
}
.tab--acumulado .tab-premio {
  color: #ffd76a;
  opacity: 1;
}

/* Muito acima da mediana: dourado sólido, pesa mais que o "alto". */
.tab--acumulado-forte {
  background: linear-gradient(135deg, #f6c945 0%, #e0a800 100%);
  border-color: #ffd76a;
  color: #3a2c00;
  box-shadow: 0 6px 20px rgba(241, 196, 15, 0.35);
}
.tab--acumulado-forte .tab-premio {
  color: #4a3700;
  opacity: 1;
}
/* A aba ativa continua vencendo — saber onde você está importa mais que o
   prêmio. */
.tab--active.tab--acumulado,
.tab--active.tab--acumulado-forte {
  background: #fff;
  color: var(--primary-dark);
  border-color: #ffd76a;
  box-shadow: 0 8px 22px rgba(241, 196, 15, 0.45);
}
.tab--active.tab--acumulado .tab-premio,
.tab--active.tab--acumulado-forte .tab-premio {
  color: #a37800;
}

/* Versão da extensão ao lado do título do painel de download.
   Fica visível porque o zip publicado já ficou 14 versões atrás por mais de
   um mês sem nada apontar (ver scripts/verificar-zip-extensao.js). */
.ext-versao {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  color: var(--verde-escuro, #14532d);
  background: var(--verde-suave, #dcfce7);
  border: 1px solid var(--verde-borda, #86efac);
}

/* 2026-09-02 — painel de fechamento da carteira.
   A resposta da geração sempre trouxe `fechamento.garantia` e nada disso
   chegava na tela. Mesmas variáveis de cor do painel do fator sorte, pra
   não introduzir paleta nova. */
.jq-fechamento {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--m-line, #e3e6ea);
  border-radius: 8px;
  background: var(--m-surface-soft, #f7f9fb);
  max-width: 520px;
}
.jq-fechamento:empty {
  display: none;
}
.jq-fechamento__titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--m-ink-soft, #5b6672);
  margin-bottom: 4px;
}
.jq-fechamento__linha {
  font-size: 13px;
  line-height: 1.45;
  color: var(--m-ink, #22303c);
}
.jq-fechamento__sec {
  margin-top: 3px;
  color: var(--m-ink-soft, #5b6672);
}
.jq-fechamento__nota {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--m-ink-soft, #5b6672);
}

/* 2026-09-09 — balão de explicação dos chips (estratégia e fator sorte).

   O `title` nativo demora ~1s para aparecer, some sozinho e não formata —
   ruim para duas linhas explicando o que a estratégia faz. `data-tip` +
   ::after aparece na hora e quebra linha.

   ⚠️ Usa SÓ ::after. O ::before já é do "✓" do chip selecionado
   (`#jqChips .jq-chip--active::before`), e aquela regra tem ID: uma seta
   desenhada em ::before seria sobrescrita pelo check justamente no chip
   ativo. Por isso o balão não tem bico.

   ⚠️ Guardado por `@media (hover: hover)`: no celular o toque dá foco no
   botão, e sem a guarda o balão abriria por cima da lista logo depois de
   escolher a estratégia — atrapalhando exatamente quem não tem mouse para
   passar por cima. */
@media (hover: hover) and (pointer: fine) {
  .jq-chip[data-tip] {
    position: relative;
  }
  .jq-chip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 60;
    width: max-content;
    max-width: 260px;
    white-space: normal;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1f2430;
    color: #fff;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.12s ease 0.35s,
      visibility 0s linear 0.47s;
  }
  /* ⚠️ `:focus-visible` junto do hover: quem navega por teclado chega no
     chip com Tab e também precisa da explicação. */
  .jq-chip[data-tip]:hover::after,
  .jq-chip[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.25s, 0s;
  }
  /* ⚠️ O hover dos chips já tem `transform`, que cria contexto de
     empilhamento — sem subir o z-index do CHIP, o z-index do balão só vale
     dentro dele e um irmão posterior pode pintar por cima. */
  .jq-chip[data-tip]:hover,
  .jq-chip[data-tip]:focus-visible {
    z-index: 5;
  }
  /* O primeiro e o último chip encostam na borda da barra; ancorar pelo
     canto evita o balão sair da tela. */
  .jq-chips .jq-chip[data-tip]:first-child::after {
    left: 0;
    transform: none;
  }
  .jq-chips .jq-chip[data-tip]:last-child::after {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* A nota de honestidade ao lado do "marque quantas quiser": mesma família
   visual das outras ressalvas do gerador, sem competir com o texto. */
.jq-estrategias-hint__nota {
  color: var(--m-ink-soft, #5b6672);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLEAN (2026-09-09) — branco, amarelo claro, verde e azul
   ═══════════════════════════════════════════════════════════════════════

   Substitui o TEMA VERDE (24/08), que pintava a página inteira de verde
   escuro com cartões flutuando por cima. A referência agora é a linguagem
   do portal de loterias: **fundo branco**, respiro largo, cartões chapados
   separados por fio fino, e cor só onde ela carrega informação.

   ── A paleta, e o papel de cada cor ───────────────────────────────────
   | branco        | página e cartões — é o fundo, não um acento          |
   | verde         | marca, ação primária, dezenas, e o PRÓPRIO texto     |
   | azul          | ação secundária e informação (links, dado auxiliar)  |
   | amarelo claro | destaque: prêmio acumulado, campeã, ressalvas        |

   ⚠️ **O texto é verde-escuro (#10281a), não preto.** Foi assim que a
   restrição a quatro cores ficou possível sem inventar um cinza: a tinta
   pertence à família do verde, e as linhas (#d6e9dd) também. Preto e cinza
   sumiram da interface por consequência, não por regra à parte.

   ── Por que uma camada nova, e não uma reescrita ──────────────────────
   O arquivo tem 4.400 linhas e CINCO camadas de tema empilhadas
   (VARIÁVEIS → ZEBRINHA → MINIMALISMO → PERSONALIDADE → TEMA VERDE), várias
   com `!important`. Reescrever regra a regra teria alto risco de regressão
   em telas que não estou olhando — e boa parte da cor já vem de TOKENS.
   Por isso a ordem aqui é: **remapear os tokens primeiro** (o que leva
   junto botões, chips, painéis e bordas sem tocar em uma regra sequer) e só
   depois sobrescrever o punhado de regras que assumiam fundo ESCURO e
   ficariam ilegíveis no branco.

   ⚠️ Truque que evita ~20 regras: `--grafite` (botões secundários) passa a
   apontar para o AZUL, e `--zebra-gold` para o amarelo claro. As regras que
   já liam esses tokens mudam de cor sozinhas.

   ── Vermelho: nenhum, e não foi preciso abrir exceção ─────────────────
   Eu ia reservar o vermelho para mensagem de FALHA, porque pintar erro de
   verde troca compreensão por coerência visual. **Não foi necessário**: as
   duas únicas ocorrências de `#c0392b` no arquivo são
   `.risk-config-status.is-error` e o ROI negativo, e a primeira pertence a
   um painel que não existe mais — `risk-config-status` tem ZERO ocorrências
   em `index.html` e em `js/app.js` (conferido, não presumido).

   Então: o ROI negativo foi para o amarelo (é DADO, não falha — e o sinal
   de menos já diz o que houve), a regra órfã ficou vermelha onde está, e a
   interface no ar não tem nenhum pixel fora das quatro cores.

   ⚠️ Se o painel de risco voltar, ele volta vermelho. Aí é decisão nova.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — a paleta, crua — */
  --c-branco: #ffffff;
  --c-verde: #128c46;
  --c-verde-escuro: #0a5c2e;
  --c-verde-suave: #eef7f1;
  --c-verde-linha: #d6e9dd;
  --c-azul: #0b5fa8;
  --c-azul-escuro: #084a83;
  --c-azul-suave: #eaf2fb;
  --c-azul-linha: #cfe0f2;
  --c-amarelo: #fff8e1; /* amarelo claro — fundo */
  --c-amarelo-forte: #ffe9a8; /* amarelo claro — preenchimento */
  --c-amarelo-linha: #f0dca4;
  --c-amarelo-ink: #6b5200; /* leitura sobre amarelo */
  --c-ink: #10281a; /* verde quase preto — a tinta */
  --c-ink-soft: #4b6b58;

  /* — remapeamento dos tokens que o resto do arquivo já consome — */
  --m-bg: var(--c-branco);
  --m-surface: var(--c-branco);
  --m-ink: var(--c-ink);
  --m-ink-soft: var(--c-ink-soft);
  --m-line: var(--c-verde-linha);
  --m-surface-soft: var(--c-verde-suave);
  --brand: var(--c-verde);
  --brand-dark: var(--c-verde-escuro);
  --brand-soft: rgba(18, 140, 70, 0.1);
  --m-accent: var(--c-amarelo-forte);
  --m-accent-ink: var(--c-amarelo-ink);
  --m-radius: 14px;
  /* Sombra quase invisível: o que separa cartão do fundo aqui é o FIO, não
     a profundidade — é o que dá o ar "clean". */
  --m-shadow: 0 1px 2px rgba(16, 40, 26, 0.04);
  --m-shadow-hover: 0 4px 16px rgba(16, 40, 26, 0.08);

  /* — tokens legados (camada 1): seguem vivos em regras antigas — */
  --primary-color: var(--c-verde);
  --primary-dark: var(--c-verde-escuro);
  --background-light: var(--c-branco);
  --background-white: var(--c-branco);
  --text-dark: var(--c-ink);
  --text-gray: var(--c-ink-soft);
  --border-color: var(--c-verde-linha);
  --secondary-color: var(--c-azul);
  --info-color: var(--c-azul);
  --success-color: var(--c-verde);
  /* ⚠️ Os "grafite" eram o cinza dos botões secundários. Apontando para o
     azul, todos eles entram na paleta sem uma regra nova. */
  --grafite: var(--c-azul);
  --grafite-claro: var(--c-azul-escuro);
  /* ⚠️ Idem para o dourado da Zebrinha: vira amarelo claro na origem. */
  --zebra-gold: var(--c-amarelo-forte);
  --zebra-gold-dark: var(--c-amarelo-linha);
  --zebra-black: var(--c-ink);
  --verde-escuro: var(--c-verde-escuro);
  --verde-suave: var(--c-verde-suave);
  /* ⚠️ Estes três pintavam o FUNDO ESCURO da página no tema anterior. Hoje
     só são lidos pela regra `body` do TEMA VERDE, que a regra logo abaixo
     sobrescreve — ou seja, não renderizam. Remapeados mesmo assim: sem
     isso, apagar uma única regra minha faria a página inteira voltar a
     ficar verde-escura, e o defeito apareceria longe daqui. */
  --verde-fundo: var(--c-branco);
  --verde-fundo-2: var(--c-branco);
  --verde-brilho: var(--c-verde-suave);
}

/* ── Base: a página é branca ─────────────────────────────────────────── */
body {
  background: var(--c-branco);
  background-attachment: scroll;
  color: var(--c-ink);
  padding: 40px 24px 56px;
}
.panel {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 980px;
}
.panel > h1,
.panel > h2 {
  color: var(--c-ink);
}

/* ── Cabeçalho: cartão branco com fio verde→amarelo no topo ──────────── */
.ai-hero {
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  backdrop-filter: none;
  padding: 36px 32px 30px;
}
.ai-hero-title,
.ai-hero-subtitle {
  color: var(--c-ink);
}
.ai-hero-subtitle {
  color: var(--c-ink-soft);
  opacity: 1;
}

/* ── Abas ────────────────────────────────────────────────────────────────
   ⚠️ CORREÇÃO 2026-09-11. Esta seção dizia "pílula branca; a ativa é verde
   sólido" e tinha as regras para isso. **Nunca renderizou.** A camada
   PERSONALIDADE (≈ linha 3360) impõe com `!important`: cantos só em cima,
   gradiente suave e SUBLINHADO verde de 3px na ativa. Minha regra sem
   `!important` perdia em silêncio, e eu documentei uma tela que não
   existia — só vi o render de verdade no print do dono, dois dias depois.

   O sublinhado é limpo e está na paleta, então FICA. O que sobra aqui é só
   o que de fato vence: a cor da aba inativa e o fundo branco (a
   PERSONALIDADE não os define). A regra de pílula foi removida — regra
   morta que descreve outra tela é pior que nenhuma. */
.tab {
  background-color: var(--c-branco);
  color: var(--c-ink-soft);
  box-shadow: none;
}
.tab:hover {
  box-shadow: none;
}

/* Prêmio acumulado: amarelo claro — o único lugar em que ele preenche.

   ⚠️ A camada 1 ainda dá a esta aba `animation: pulse-green 2s infinite`,
   um halo verde e um PONTO PISCANTE em `::after` (`blink 1.5s infinite`),
   além de um `scale(1.02)` no hover. Nada disso sobrevive a "clean" — e
   sobreviveria em silêncio, porque minha regra só trocava a cor. O
   preenchimento amarelo já é o destaque; o resto era ruído somado. */
.tab--acumulado {
  background: var(--c-amarelo);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
  animation: none;
  box-shadow: none;
}
.tab--acumulado::after {
  content: none;
}
.tab--acumulado:hover {
  transform: none;
  box-shadow: none;
}
.tab--acumulado .tab-premio {
  color: var(--c-amarelo-ink);
}
.tab--acumulado-forte {
  background: var(--c-amarelo-forte);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
  box-shadow: none;
}
.tab--acumulado-forte .tab-premio {
  color: var(--c-amarelo-ink);
}
.tab--active.tab--acumulado,
.tab--active.tab--acumulado-forte {
  background: var(--c-verde);
  color: var(--c-branco);
  border-color: var(--c-verde);
  box-shadow: none;
}
.tab--active.tab--acumulado .tab-premio,
.tab--active.tab--acumulado-forte .tab-premio {
  color: var(--c-amarelo-forte);
}

/* ── Dezenas: bola verde com número branco ───────────────────────────────
   ⚠️ Elas eram brancas com número verde, desenhadas para o fundo escuro —
   no branco a bola sumiria e sobraria o número solto. Invertido. */
.jq-num {
  background: var(--c-verde);
  color: var(--c-branco);
  border: 2px solid var(--c-verde);
  box-shadow: none;
}

/* ── Superfícies: fio no lugar da sombra ─────────────────────────────── */
#jogos-quentes-section,
.ext-download-panel,
.jq-card,
.jq-honestidade {
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  box-shadow: var(--m-shadow);
}
.jq-card {
  border-radius: var(--m-radius);
}
.jq-minimal-actions {
  background: var(--c-branco);
  border-top: 1px solid var(--c-verde-linha);
  box-shadow: 0 -2px 10px rgba(16, 40, 26, 0.05);
}

/* ── Botões: primária verde, secundária AZUL ─────────────────────────── */
.jq-btn {
  border: 1px solid var(--c-verde-linha);
  background: var(--c-branco);
  color: var(--c-ink-soft);
}
.jq-btn:hover {
  background: var(--c-verde-suave);
  border-color: var(--c-verde);
  color: var(--c-verde-escuro);
}
.jq-btn--primary {
  background: var(--c-verde) !important;
  color: var(--c-branco) !important;
  border: 1px solid var(--c-verde) !important;
  box-shadow: none !important;
}
.jq-btn--primary:hover {
  background: var(--c-verde-escuro) !important;
  box-shadow: none !important;
  transform: none;
}
/* A ação secundária (baixar extensão, entrar) é o azul da paleta. */
.ext-download-btn,
.auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
  background: var(--c-azul);
  color: var(--c-branco);
  border: 1px solid var(--c-azul);
}
.ext-download-btn:hover,
.auth-btn:not(.auth-btn--ghost):not(.auth-btn--link):hover {
  background: var(--c-azul-escuro);
  border-color: var(--c-azul-escuro);
}
.auth-btn--link,
.ext-download-link,
a {
  color: var(--c-azul);
}

/* ── Amarelo claro: destaque, nunca fundo de página ──────────────────── */
.jq-campea {
  background: var(--c-amarelo);
  border-left-color: var(--c-verde);
}
.jq-campea--zebra {
  background: var(--c-amarelo-forte);
  border-left-color: var(--c-amarelo-linha);
  box-shadow: none;
  animation: none; /* piscar dourado não combina com "clean" */
}
.jq-campea-zebra-badge {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
}
.jq-fechamento,
.jq-sorte-explica {
  background: var(--c-verde-suave);
  border: 1px solid var(--c-verde-linha);
}

/* ── Azul informativo: o dado auxiliar deixa de disputar com a marca ─── */
.jq-info-tag {
  background: var(--c-azul-suave);
  border: 1px solid var(--c-azul-linha);
  color: var(--c-azul-escuro);
}
.jq-info-tag--premio {
  background: var(--c-amarelo);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
}

/* ── O que estava fora da paleta ─────────────────────────────────────────
   Roxo (#9c27b0) e ciano (#03a9f4) sobraram das seções antigas
   (`.btn-estrategia`, `.desdobramento-section`, `.premiacoes-section`...).
   ⚠️ Verificado: nenhuma dessas classes aparece mais no HTML nem no
   app.js — é CSS órfão. Recolorir mesmo assim custa nada e evita que uma
   dessas telas volte trazendo roxo junto. */
.btn-estrategia,
.estrategia-section,
.premiacoes-section,
.premiacao-item {
  border-color: var(--c-verde-linha) !important;
  color: var(--c-ink) !important;
}
.btn-desdobrar,
.jogo-numero {
  background-color: var(--c-verde) !important;
  color: var(--c-branco) !important;
}
.desdobramento-section,
.desdobramento-controls select,
.concurso-info {
  border-color: var(--c-azul-linha) !important;
  color: var(--c-azul-escuro) !important;
}

/* ROI negativo: amarelo de atenção, não vermelho. É DADO, não falha — e o
   sinal de menos já diz o que aconteceu. */
.jq-hon-roi-tabela .jq-roi-row--ruim {
  background: linear-gradient(90deg, var(--c-amarelo) 0%, transparent 100%);
}
.jq-hon-roi-tabela .jq-roi-row--ruim .jq-roi-roi {
  color: var(--c-amarelo-ink);
}
.jq-hon-roi-tabela .jq-roi-row--bom .jq-roi-roi {
  color: var(--c-verde);
}
.jq-hon-sharing-col--ruim {
  background: var(--c-branco);
  border-color: var(--c-verde-linha);
  color: var(--c-ink-soft);
}

/* O balão de explicação dos chips era grafite-azulado; entra na paleta
   como verde-escuro, a mesma tinta do texto. */
@media (hover: hover) and (pointer: fine) {
  .jq-chip[data-tip]::after {
    background: var(--c-verde-escuro);
    box-shadow: 0 4px 14px rgba(16, 40, 26, 0.18);
  }
}

/* ── Normalização: os 151 pontos que ainda pintavam fora da paleta ───────
   Remapear tokens levou a maior parte da interface, mas NÃO tudo: sobraram
   cinzas, dourados, laranjas, um roxo e três vermelhos escritos direto na
   regra, de camadas diferentes.

   ⚠️ Esta lista não foi escrita de memória nem "olhando a tela": saiu de
   uma varredura que resolve o seletor de cada cor, descarta comentário e
   fallback de `var()` (que nunca renderiza) e checa se aquele seletor
   ainda aparece em `index.html`/`app.js`. Sem isso eu estaria corrigindo o
   que é fácil de ver e deixando o resto — que é como o roxo sobreviveu a
   duas trocas de tema anteriores.

   O agrupamento é por PAPEL, não por elemento, para o resultado ser um
   sistema e não uma lista de remendos:

     verde   = bom / marca / ação      azul     = informação neutra
     amarelo = atenção / prêmio        branco   = base / estado apagado */

/* Tinta e linhas: os cinzas viram a família do verde. */
.jq-concurso-info,
.jq-info-tag,
.jq-teimosinha select,
.jq-hon-drift-rotulo,
.jq-hon-drift-stats b {
  color: var(--c-ink);
}
.jq-info-tag b,
.jq-info-anterior-label,
.jq-hon-titulo,
.jq-hon-stats b,
.jq-slider-wrap b,
.jq-campea-txt {
  color: var(--c-ink);
}
.jq-minimal-header,
.jq-info-row--anterior,
.jq-controls-label,
.jq-campea-hist,
.jq-teimosinha,
.jq-slider-wrap,
.jq-estrategias-hint,
.jq-hon-stats span,
.jq-hon-aviso,
.jq-hon-idade,
.jq-hon-drift-stats,
.jq-hon-drift-stats span,
.jq-card-idx,
.risk-trend-caption,
.jq-hon-roi-tabela .jq-roi-roi {
  color: var(--c-ink-soft);
}
.jq-info-row--anterior,
.jq-controls-row + .jq-controls-row,
.jq-campea-hist {
  border-top-color: var(--c-verde-linha);
}
.jq-hon-stats > div,
.jq-hon-sharing-col,
.jq-teimosinha select,
.risk-trend-wrap,
.jq-hon-roi-tabela td {
  border-color: var(--c-verde-linha);
}
.jq-honestidade {
  border-left-color: var(--c-verde);
}
.risk-trend-bar {
  background: var(--c-verde-suave);
  border-color: var(--c-verde-linha);
}
.spinner-progress {
  background-color: var(--c-verde-linha);
}
.tabs-container {
  background: transparent;
}

/* Superfícies que eram cinza-azuladas (#f8f9fc → #eef1f7). */
.jq-concurso-info,
.jq-honestidade,
.jq-controls,
.jq-hon-roi-tabela th,
.ai-hero,
#jogos-quentes-section {
  background: var(--c-branco);
}
.jq-controls,
.jq-concurso-info {
  border: 1px solid var(--c-verde-linha);
}
.jq-hon-roi-tabela th {
  color: var(--c-ink);
  border-bottom-color: var(--c-verde-linha);
}

/* Verde = bom. */
.jq-info-tag--premio b,
.jq-info-anterior-val b,
.jq-hon-roi-tabela .jq-roi-row--bom .jq-roi-roi {
  color: var(--c-verde);
}
.jq-pop--ok,
.jq-ev--bom,
.jq-hon-sharing-col--bom {
  background: var(--c-verde-suave);
  border-color: var(--c-verde-linha);
  color: var(--c-verde-escuro);
}
.jq-hon-roi-tabela .jq-roi-row--bom {
  background: linear-gradient(90deg, var(--c-verde-suave) 0%, transparent 100%);
}

/* Amarelo = atenção e prêmio. ⚠️ `.jq-pop--ruim` era VERMELHO (#f8d7da /
   #721c24): é dado de popularidade, não falha — vai para o branco apagado,
   e o degrau do meio fica com o amarelo. */
.jq-info-acum,
.jq-pop--med,
.jq-hon-drift {
  background: var(--c-amarelo);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
}
.jq-campea-hist--abaixo,
.jq-hon-drift-aviso,
.jq-hon-sharing-conclusao b,
.jq-sorte-txt {
  color: var(--c-amarelo-ink);
}
.jq-hon-drift-aviso {
  border-top-color: var(--c-amarelo-linha);
}

/* Branco apagado = estado sem destaque (o antigo cinza "ruim"). */
.jq-pop--ruim,
.jq-ev--ruim,
.jq-campea--sem-evidencia,
.risk-conf-none,
.risk-meta-none {
  background: var(--c-branco);
  border-color: var(--c-verde-linha);
  color: var(--c-ink-soft);
}
.jq-campea--sem-evidencia {
  border-left-color: var(--c-verde-linha);
}
.jq-campea--sem-evidencia .jq-campea-txt {
  color: var(--c-ink-soft);
}

/* Azul = informação neutra. O painel da extensão já era azulado por conta
   própria (#1e5ef0, #17346a...); passa a usar o azul da paleta. */
.ext-download-panel {
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
}
.ext-download-panel__text h3 {
  color: var(--c-ink);
}
.ext-download-panel__text p {
  color: var(--c-ink-soft);
}
.risk-conf-mid,
.risk-meta-mid {
  background: var(--c-azul-suave);
  border-color: var(--c-azul-linha);
  color: var(--c-azul-escuro);
}
.risk-conf-high,
.risk-meta-high {
  background: var(--c-verde-suave);
  border-color: var(--c-verde-linha);
  color: var(--c-verde-escuro);
}
.risk-conf-low,
.risk-meta-low {
  background: var(--c-amarelo);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
}
/* A barra do fator sorte ia de azul a laranja; agora é verde → azul, que é
   a própria escala "concentrado → espalhado". */
.jq-sorte-barra {
  background: linear-gradient(90deg, var(--c-verde) 0%, var(--c-azul) 100%);
}

/* ⚠️ Sobra do tema roxo, viva até hoje no hover da ação primária. */
.jq-btn--primary:hover {
  background: var(--c-verde-escuro) !important;
}

/* ── DENSIDADE (2026-09-09, mesma tarde) — "ficou muito branco" ──────────
   Retorno do dono sobre a primeira versão do tema CLEAN, e o diagnóstico é
   direto: eu tinha posto **página branca + cartões brancos + linha
   quase-branca**. Sem contraste entre os três, a tela vira uma superfície
   só — "clean" virou "apagado".

   O erro não foi a paleta, foi eu ter dado a mesma cor para camadas
   diferentes. A correção é hierarquia, não cor nova:

     página   = verde pálido   (o fundo recua)
     cartão   = branco         (sobe, e agora SE VÊ contra o fundo)
     cabeçalho= verde sólido   (âncora da marca, como em portal de loteria)

   E cada cor da paleta ganha uma FUNÇÃO visível em vez de aparecer só em
   detalhe de 1px: amarelo assume a faixa do concurso/prêmio, azul assume o
   painel da extensão. Antes, azul e amarelo existiam quase só em borda —
   é por isso que a tela lia como branca mesmo tendo quatro cores. */

:root {
  /* A página deixa de ser branca; o branco fica para o que está EM CIMA. */
  --c-verde-pagina: #f2f8f4;
  --m-bg: var(--c-verde-pagina);
  /* Linha com um pouco mais de presença — a anterior sumia sobre branco. */
  --c-verde-linha: #c8e0d3;
}

body {
  background: var(--c-verde-pagina);
}

/* ── Cabeçalho: bloco verde ────────────────────────────────────────────
   ⚠️ Isto NÃO é a volta do tema escuro de 24/08 — lá a PÁGINA inteira era
   verde e os cartões flutuavam. Aqui o verde é só o cabeçalho, sobre
   página clara: é o padrão de portal de loteria e dá o ponto de cor que
   faltava sem escurecer a leitura. */
.ai-hero {
  background: linear-gradient(
    135deg,
    var(--c-verde) 0%,
    var(--c-verde-escuro) 100%
  );
  border: none;
  box-shadow: 0 6px 20px rgba(10, 92, 46, 0.18);
}
.ai-hero::before {
  background: var(--c-amarelo-forte); /* faixa de acento no topo */
}
.ai-hero-title,
.ai-hero-title strong,
.ai-hero-subtitle {
  color: var(--c-branco);
}
/* ⚠️ O `strong` usa `background-clip: text` com o verde da marca — sobre o
   cabeçalho verde ele ficaria invisível. Some o clip, entra o amarelo. */
.ai-hero-title strong {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-amarelo-forte);
}
.ai-hero-subtitle {
  color: rgba(255, 255, 255, 0.92);
}
/* Ações dentro do cabeçalho: o azul sobre verde fica sujo — viram branco,
   que é o maior contraste disponível dentro da paleta. */
.ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
  background: var(--c-branco);
  color: var(--c-verde-escuro);
  border-color: var(--c-branco);
}
.ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link):hover {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
  border-color: var(--c-amarelo-forte);
}
.ai-hero .auth-btn--link,
.ai-hero .auth-btn--ghost,
.ai-hero .auth-user {
  color: var(--c-branco);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ── Amarelo com função: a faixa do concurso é o bloco de prêmio/data ─── */
.jq-concurso-info {
  background: var(--c-amarelo);
  border: 1px solid var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
}
.jq-concurso-info b,
.jq-concurso-info strong {
  color: var(--c-amarelo-ink);
}
/* ⚠️ Colisão que esta mudança criou: a faixa passou a ser amarela e
   `.jq-info-tag--premio` JÁ era amarela — a tag de prêmio desapareceria
   dentro dela. As tags viram chips BRANCOS sobre a faixa, e a de prêmio
   fica com o amarelo forte para continuar sendo a que puxa o olho. */
.jq-concurso-info .jq-info-tag {
  background: var(--c-branco);
  border-color: var(--c-amarelo-linha);
  color: var(--c-ink);
}
.jq-concurso-info .jq-info-tag b {
  color: var(--c-verde-escuro);
}
.jq-concurso-info .jq-info-tag--premio {
  background: var(--c-amarelo-forte);
  border-color: var(--c-amarelo-linha);
  color: var(--c-amarelo-ink);
}
.jq-concurso-info .jq-info-tag--premio b {
  color: var(--c-amarelo-ink);
}

/* ── Azul com função: o painel da extensão é o bloco auxiliar ────────── */
.ext-download-panel {
  background: var(--c-azul-suave);
  border: 1px solid var(--c-azul-linha);
}
.ext-download-panel__text h3 {
  color: var(--c-azul-escuro);
}
.ext-download-panel__text p {
  color: var(--c-azul-escuro);
  opacity: 0.85;
}

/* ── Agrupamento: o painel de controles precisa se ler como um bloco ─── */
.jq-controls {
  background: var(--c-verde-suave);
  border: 1px solid var(--c-verde-linha);
}
/* Os cartões sobem: branco sobre página tingida + sombra um pouco maior. */
.jq-card,
#jogos-quentes-section,
.jq-honestidade {
  background: var(--c-branco);
}
.jq-card {
  box-shadow: 0 2px 10px rgba(10, 92, 46, 0.07);
}
#jogos-quentes-section {
  box-shadow: 0 2px 14px rgba(10, 92, 46, 0.06);
}
/* Nome do jogo: era cinza-suave e sumia. É o título da tela. */
.jq-minimal-header {
  color: var(--c-verde-escuro);
  border-bottom: 2px solid var(--c-verde-linha);
  padding-bottom: 8px;
}
/* Aba inativa: sobre página tingida o branco puro já separa sozinho. */
.tab {
  box-shadow: 0 1px 2px rgba(10, 92, 46, 0.06);
}

/* ── ACESSIBILIDADE (2026-09-11) — achados da skill frontend-ui-engineering ──
   Três coisas concretas, verificadas no código antes de mexer:
   1. as abas eram <div>: sem foco, sem Enter, ZERO tabindex/role no app;
   2. os jogos entravam por innerHTML sem região aria-live — leitor de tela
      ouvia silêncio ao regerar;
   3. quatro cores em `style="..."` dentro do app.js, incluindo o roxo
      #667eea no ESTADO DE ERRO — o sweep de paleta de 09/09 só olhou CSS. */

/* As abas viraram <button role="tab">. O botão nativo traz fonte, margem e
   aparência próprias que a regra .tab não cobria porque nunca precisou:
   sem este reset a fonte trocaria para a do sistema e a altura mudaria. */
.tab {
  font: inherit;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
}
/* ⚠️ Anel de foco só para TECLADO (`:focus-visible`), não para clique.
   Verde-escuro sobre página verde-pálido passa de 3:1; e um deslocamento
   de 2px separa o anel da borda da própria aba, que também é verde. */
.tab:focus-visible {
  outline: 3px solid var(--c-verde-escuro);
  outline-offset: 2px;
}
.tab--active:focus-visible {
  outline-color: var(--c-azul);
}

/* Visualmente oculto, presente para tecnologia assistiva. A receita
   canônica: 1px, sem overflow, clip, sem white-space — display:none ou
   visibility:hidden tirariam o elemento da árvore de acessibilidade. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Estado de erro do gerador — o roxo saiu; tudo vem dos tokens. O botão
   reaproveita .jq-btn--primary (verde = ação), sem regra de cor própria. */
.jq-erro {
  padding: 24px 20px;
  text-align: center;
  background: var(--c-amarelo);
  border: 1px solid var(--c-amarelo-linha);
  border-radius: var(--m-radius);
}
.jq-erro__titulo {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.jq-erro__detalhe {
  font-size: 0.9em;
  color: var(--c-amarelo-ink);
  margin: 0 0 16px;
  word-break: break-word;
}
.jq-erro__btn {
  margin-top: 4px;
}

/* "Sem favorita": era cinza inline (#888). Na paleta, informação neutra é
   AZUL — e o badge de campeã ao lado é verde, então os dois se distinguem
   sem depender de tonalidade de cinza. */
.jq-campea-badge--neutro {
  background: var(--c-azul);
  color: var(--c-branco);
}

/* Aviso de ROI dominado por outlier: era vermelho inline. É ATENÇÃO sobre
   um dado (não falha) — amarelo, como o resto das ressalvas do painel. */
.jq-roi-outlier {
  color: var(--c-amarelo-ink);
  font-weight: 600;
}

/* Estados de botão que o JS ligava por `.style.x = "#..."` — oito
   atribuições, seis cores fora da paleta, e uma delas RESTAURAVA o roxo
   depois do flash (o botão de download ficava roxo para sempre após o
   primeiro clique). O JS agora só troca classe. Azul = em andamento
   (informação), verde = concluído (bom). */
.jq-btn--loading {
  background: var(--c-azul-suave);
  border-color: var(--c-azul-linha);
  color: var(--c-azul-escuro);
}
.jq-btn--ok,
.jq-btn--flash-ok {
  background: var(--c-verde-suave);
  border-color: var(--c-verde);
  color: var(--c-verde-escuro);
  font-weight: 700;
}
/* ⚠️ Sem `!important`, de propósito — e isso foi CONFERIDO, não presumido:
   os três botões que usam estes estados são `.jq-btn--mini`, `.jq-btn--ghost`
   e `.ext-download-btn`, e nenhuma regra deles tem `!important` no
   background. Estas classes vêm depois no arquivo e vencem sozinhas. Se um
   dia um `.jq-btn--primary` (que TEM `!important`) precisar de estado, o
   caminho é um modificador próprio, não `!important` aqui. */

/* ── CABEÇALHO organizado (2026-09-11) — a pedido do dono, com print ──────
   O print mostrava os botões de login POR CIMA do subtítulo e um bloco de
   verde vazio embaixo. Causa: `.ai-hero .auth-box` é `position: absolute`
   no canto (≈ linha 3499) e a camada de baixo reservava `padding-top: 64px`
   para o título não entrar embaixo dele. Meu tema CLEAN de 09/09 trocou
   por `padding: 36px ...` — o título subiu 28px e o subtítulo deslizou para
   baixo dos botões. **Regressão minha**, e eu não vi porque não olhei o
   render.

   A saída não é devolver os 64px (é isso que fazia o bloco parecer vazio):
   é tirar o auth-box do absoluto e deixá-lo FLUIR na linha do título, que
   já é flex com `flex-wrap`. É exatamente o que o mobile (≤720px) já fazia
   com `position: static !important` — o desktop passa a se comportar igual.
   Uma regra só para as duas larguras, sem o `padding-right` de reserva. */
.ai-hero {
  padding: 22px 28px 20px;
  /* `max-width: 720px; margin: auto` vinha da camada do hero de CHAT (o
     chat saiu do escopo em julho, a largura ficou). O cabeçalho aparecia
     720px centrado dentro de um painel de 980 — as bordas não alinhavam com
     as abas e os cartões abaixo. Agora ocupa a coluna inteira. */
  max-width: none;
  margin: 0 0 18px;
}
.ai-hero .auth-box {
  position: static;
  margin-left: auto;
  z-index: auto;
}
.ai-hero-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-right: 0;
  margin-bottom: 6px;
}
.ai-hero-subtitle {
  margin: 0;
  max-width: 64ch;
  line-height: 1.45;
}
/* Sobre o verde, o "Métricas" fantasma quase sumia (borda a 45%). Sobe o
   contraste do contorno e ganha um leve preenchimento — continua secundário
   ao lado do "Entrar", mas passa a ser legível. */
.ai-hero .auth-btn--link,
.ai-hero .auth-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-branco);
}
.ai-hero .auth-btn--link:hover,
.ai-hero .auth-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}
/* Com o auth no fluxo, a regra mobile antiga (`margin-bottom: 14px` sob
   `position: static !important`) abriria um vão abaixo dele; zera aqui. */
@media (max-width: 720px) {
  .ai-hero .auth-box {
    margin-bottom: 0;
    width: 100%;
    margin-left: 0;
  }
}

/* ── LANDING (2026-09-12) — gate de interface: o gerador só sobe logado ──
   Decisão do dono: antes do login, uma landing; depois, o app. Só os quatro
   tokens da paleta CLEAN. `hidden` precisa do `!important` porque `.landing`
   declara `display`, e um `display` em CSS vence o atributo do UA stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */
#landing[hidden],
#appArea[hidden] {
  display: none !important;
}
.landing {
  display: block;
  padding: 6px 0 28px;
}
.landing-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  border-radius: 14px;
  padding: clamp(30px, 5vw, 58px) clamp(22px, 5vw, 58px) clamp(28px, 4vw, 48px);
}
/* a faixa amarela: a cor precisa de ÁREA, não só de borda (lição de 09/09) */
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--c-amarelo-forte);
}
.landing-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-azul);
}
.landing h1 {
  margin: 0 0 18px;
  max-width: 20ch;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}
.landing-lead {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.landing-lead strong {
  color: var(--c-ink);
  font-weight: 700;
}
.landing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.landing-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 15px 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-branco);
  background: var(--c-verde);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.landing-btn:hover {
  background: var(--c-verde-escuro);
}
.landing-btn:active {
  transform: translateY(1px);
}
.landing-btn:focus-visible {
  outline: 3px solid var(--c-azul);
  outline-offset: 3px;
}
.landing-cta-nota {
  font-size: 13px;
  color: var(--c-ink-soft);
}
.landing-grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.landing-card {
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  border-top: 4px solid var(--c-verde-linha);
  border-radius: 12px;
  padding: 20px 20px 18px;
}
.landing-card--verde {
  border-top-color: var(--c-verde);
}
.landing-card--azul {
  border-top-color: var(--c-azul);
}
.landing-card--amarelo {
  border-top-color: var(--c-amarelo-forte);
}
.landing-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.landing-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.landing-rodape {
  margin: 20px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-ink-soft);
}
@media (max-width: 720px) {
  .landing-hero {
    border-radius: 12px;
  }
  .landing-btn {
    width: 100%;
    text-align: center;
  }
}
/* O `.panel` centraliza texto; o hero e os cards são alinhados à esquerda
   (o CTA já era, e metade centrado/metade à esquerda parecia defeito). */
.landing-hero,
.landing-card {
  text-align: left;
}
/* Com a landing visível, o subtítulo do cabeçalho fala de gerar jogos —
   ruído para quem ainda não entrou. `:has` é progressivo: sem suporte, fica.
   13/09 (dono): o link "📊 Métricas" (painel de operação) também some na
   landing — é ferramenta de quem opera, não de quem chega. Volta com o
   login, junto com o resto do app. */
body:has(#landing:not([hidden])) .ai-hero-subtitle,
body:has(#landing:not([hidden])) #linkMetricas {
  display: none;
}

/* ── LANDING lúdica (2026-09-12, mesma tarde: "gere uma landing mais lúdica")
   Bolinhas de loteria, um volante que se marca sozinho, marca-texto amarelo
   no título e três passos numerados como bolas. Mesmas quatro cores.
   ═══════════════════════════════════════════════════════════════════════ */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}
.landing-hero-texto {
  position: relative;
  z-index: 1;
}
/* bolinhas decorativas: só desktop, opacas o bastante para não brigar com o
   texto, flutuando devagar; param com prefers-reduced-motion */
.landing-bolas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bola {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  opacity: 0.55;
  animation: bola-flutua 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  box-shadow: inset -4px -5px 0 rgba(16, 40, 26, 0.12);
}
.bola--p {
  width: 34px;
  height: 34px;
  font-size: 12px;
}
.bola--verde {
  background: var(--c-verde);
  color: var(--c-branco);
}
.bola--azul {
  background: var(--c-azul);
  color: var(--c-branco);
}
.bola--amarela {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
}
@keyframes bola-flutua {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-14px) rotate(6deg);
  }
}
/* marca-texto: dois tons chapados, não é degradê — é caneta */
.landing h1 mark {
  background: linear-gradient(transparent 58%, var(--c-amarelo-forte) 58%);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 2px;
}
/* o volante: um bilhete de verdade, levemente torto de propósito */
.landing-volante {
  position: relative;
  z-index: 1;
  background: var(--c-branco);
  border: 2px dashed var(--c-verde);
  border-radius: 16px;
  padding: 16px 16px 14px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 28px rgba(16, 40, 26, 0.1);
}
.volante-topo,
.volante-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.volante-topo {
  margin-bottom: 12px;
}
.volante-rodape {
  margin-top: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.volante-tag {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
  border-radius: 999px;
  padding: 3px 10px;
}
.volante-ok {
  color: var(--c-verde);
}
/* 13/09: a grade passeia pelas 5 modalidades (25/60/80/100/50 células).
   aspect-ratio + align-content mantêm o cartão com a MESMA altura em todas —
   sem isso a troca de jogo faria a página pular a cada 6 s (no mobile o
   volante fica acima dos três passos). --volante-cols é setado pelo JS. */
.volante-grade {
  display: grid;
  grid-template-columns: repeat(var(--volante-cols, 5), 1fr);
  gap: 7px;
  aspect-ratio: 1;
  align-content: center;
}
.volante-grade[data-cols="10"] {
  gap: 5px;
}
.volante-grade[data-cols="10"] .volante-celula {
  font-size: 11px;
  border-radius: 6px;
}
.volante-celula {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1px solid var(--c-verde-linha);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink-soft);
  background: var(--c-branco);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
.volante-celula.marcada {
  background: var(--c-verde);
  border-color: var(--c-verde);
  color: var(--c-branco);
  transform: scale(1.06);
}
/* três passos: bloco amarelo — a cor precisa de área */
.landing-passos {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.landing-passos li {
  background: var(--c-amarelo);
  border: 1px solid var(--c-amarelo-linha);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-align: left;
}
.landing-passos h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-ink);
}
.landing-passos p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.passo-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--c-branco);
  box-shadow: inset -3px -4px 0 rgba(16, 40, 26, 0.14);
}
.passo-num--azul {
  background: var(--c-azul);
}
.passo-num--verde {
  background: var(--c-verde);
}
.passo-num--amarelo {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
}
.landing-card-icone {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bola {
    animation: none;
  }
  .volante-celula {
    transition: none;
  }
}
@media (max-width: 860px) {
  .landing-hero {
    grid-template-columns: 1fr;
  }
  .landing-bolas {
    display: none;
  }
  .landing-volante {
    transform: none;
    /* 13/09: largura EXPLÍCITA, não max-width. Com `margin: auto` numa
       área de grid, o cartão encolhia para o conteúdo (a linha do rodapé
       "estratégia: X" mandava na largura), e como a grade é um quadrado
       (aspect-ratio) a altura mudava 6–14px a cada troca de jogo — medido
       em 500px: cartão 305 → 291 → 299 de largura. Largura fixa, altura
       fixa. */
    width: min(100%, 360px);
    margin: 4px auto 0;
  }
  .landing-passos {
    grid-template-columns: 1fr;
  }
}
/* bolinhas: só nos cantos livres do hero (em cima do texto pareciam defeito) */
.bola {
  opacity: 0.5;
}

/* ── ACERTOS em destaque (2026-09-13, decisão do dono) ────────────────────
   Chips em ordem de média de acertos, com a média num selo; o campeão
   histórico (quando supera o acaso) leva o selo amarelo. */
.jq-chip-media {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--c-verde-suave);
  color: var(--c-verde-escuro);
  border: 1px solid var(--c-verde-linha);
}
.jq-chip--top .jq-chip-media {
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
  border-color: var(--c-amarelo-linha);
}
#jqChips .jq-chip--active .jq-chip-media {
  background: rgba(255, 255, 255, 0.22);
  color: var(--c-branco);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ── CHANCE DO LOTE (2026-09-13) — a métrica de "acertar" que o lote controla ──
   Mesma família visual do bloco de fechamento; verde quando o lote está
   acima do aleatório, neutro na paridade, amarelo se ficar abaixo (a I36
   acende antes disso, mas a tela também tem de dizer). */
.jq-chance-lote {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-verde-linha);
  border-left: 4px solid var(--c-verde-linha);
  border-radius: 8px;
  background: var(--c-branco);
  max-width: 520px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.jq-chance-lote:empty {
  display: none;
}
.jq-chance-lote--melhor {
  border-left-color: var(--c-verde);
  background: var(--c-verde-suave);
}
.jq-chance-lote--pior {
  border-left-color: var(--c-amarelo-forte);
  background: var(--c-amarelo);
}
.jq-chance-lote__titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-verde-escuro);
  margin-bottom: 4px;
}
.jq-chance-lote__num {
  font-size: 15px;
  color: var(--c-ink);
}
.jq-chance-lote__num b {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-verde-escuro);
}
.jq-chance-lote__vs {
  font-size: 13px;
  color: var(--c-ink-soft);
}
.jq-chance-lote__nota {
  margin-top: 4px;
  font-size: 12px;
}

/* ── PAINEL "Jogos gerados" (2026-09-14) — só tokens da paleta CLEAN ──
   Card depois da honestidade. Tabela com scroll horizontal próprio no
   celular (a página nunca rola de lado). Dezena acertada = verde sólido,
   igual à dezena marcada do volante; linha premiada = fundo amarelo. */
.jq-painel-jogos {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  border-left: 3px solid var(--c-azul);
  border-radius: 8px;
  font-size: 12px;
  color: var(--c-ink);
}
.jq-pj-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.jq-pj-titulo {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-ink);
}
.jq-pj-idade {
  font-weight: 500;
  color: var(--c-ink-soft);
  margin-left: 6px;
}
.jq-pj-filtros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.jq-pj-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 10px;
  color: var(--c-ink-soft);
}
.jq-pj-stat b {
  color: var(--c-ink);
}
.jq-pj-tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-verde-linha);
  border-radius: 6px;
}
.jq-pj-tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.jq-pj-tabela th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  background: var(--c-verde-suave);
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-verde-linha);
}
.jq-pj-tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-verde-linha);
  vertical-align: middle;
}
.jq-pj-tabela td {
  white-space: nowrap;
}
.jq-pj-tabela-wrap {
  min-width: 0;
}
/* Celular: tabela vira lista de cartões (thead some, cada linha empilha
   concurso · origem · estratégia / dezenas / resultado). Medido antes:
   com min-width 560 a coluna Resultado ficava atrás do scroll no primeiro
   render; sem min-width as dezenas quebravam em pares e a página rolava de
   lado 16px. Empilhar resolve os dois. */
@media (max-width: 640px) {
  .jq-pj-tabela {
    min-width: 0;
  }
  .jq-pj-tabela thead {
    display: none;
  }
  .jq-pj-tabela,
  .jq-pj-tabela tbody,
  .jq-pj-tabela tr,
  .jq-pj-tabela td {
    display: block;
  }
  .jq-pj-tabela tr {
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--c-verde-linha);
  }
  .jq-pj-tabela td {
    padding: 2px 0;
    border-bottom: none;
    white-space: normal;
  }
  .jq-pj-conc,
  .jq-pj-tabela td:nth-child(2),
  .jq-pj-tabela td:nth-child(3) {
    display: inline-block;
    margin-right: 10px;
    white-space: nowrap;
  }
  .jq-pj-conc small {
    display: inline;
    margin-left: 4px;
  }
  .jq-pj-dezenas {
    margin: 4px 0;
  }
}
.jq-pj-tabela tr:last-child td {
  border-bottom: none;
}
.jq-pj-linha--premiada td {
  background: var(--c-amarelo);
}
.jq-pj-conc {
  font-weight: 700;
}
.jq-pj-conc small {
  display: block;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.jq-pj-dezenas {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.jq-pj-num {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--c-verde-linha);
  background: var(--c-branco);
  font-weight: 700;
  font-size: 11px;
  color: var(--c-ink-soft);
}
.jq-pj-num--acerto {
  background: var(--c-verde);
  border-color: var(--c-verde);
  color: var(--c-branco);
}
.jq-pj-aguardando {
  color: var(--c-ink-soft);
}
.jq-pj-premio {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-amarelo-forte);
  color: var(--c-amarelo-ink);
  font-weight: 700;
}
.jq-pj-vazio,
.jq-pj-nota,
.jq-pj-aviso {
  margin-top: 8px;
  color: var(--c-ink-soft);
  font-size: 12px;
}
.jq-pj-vazio {
  padding: 10px;
  background: var(--c-verde-suave);
  border-radius: 6px;
}

/* ── Painel "Jogos gerados": vista do LAÇO automático (2026-09-14) ── */
.jq-pl-concurso {
  border: 1px solid var(--c-verde-linha);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--c-branco);
}
.jq-pl-concurso > summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--c-ink);
}
.jq-pl-concurso[open] > summary {
  border-bottom: 1px solid var(--c-verde-linha);
  background: var(--c-verde-suave);
}
.jq-pl-corpo {
  padding: 8px 10px 10px;
}
.jq-pl-sorteio {
  margin-bottom: 8px;
  color: var(--c-ink-soft);
}
.jq-pl-sorteadas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}
.jq-pl-tabela {
  min-width: 0;
}
.jq-pl-linha--controle td {
  background: var(--c-azul-suave);
  color: var(--c-azul-escuro);
}
.jq-pl-delta--pos {
  color: var(--c-verde-escuro);
}
.jq-pl-delta--neg {
  color: var(--c-amarelo-ink);
}
.jq-pl-detalhe {
  margin-top: 8px;
}
.jq-pl-estr {
  border-top: 1px solid var(--c-verde-linha);
  padding: 4px 0;
}
.jq-pl-estr > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.jq-pl-lista {
  display: grid;
  gap: 4px;
  padding: 4px 0 6px;
}
.jq-pl-jogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
}
.jq-pl-jogo--premiado {
  background: var(--c-amarelo);
}
.jq-pl-res {
  white-space: nowrap;
}
/* no celular a tabela do laço tem 4 colunas curtas: NÃO empilha (a regra
   geral do painel empilha .jq-pj-tabela; esta desfaz para a variante) */
@media (max-width: 640px) {
  .jq-pl-tabela thead {
    display: table-header-group;
  }
  .jq-pl-tabela,
  .jq-pl-tabela tbody {
    display: table;
    width: 100%;
  }
  .jq-pl-tabela tr {
    display: table-row;
    padding: 0;
  }
  .jq-pl-tabela td {
    display: table-cell;
    padding: 6px 6px;
    border-bottom: 1px solid var(--c-verde-linha);
    white-space: normal;
  }
}

/* ── Painel "Jogos gerados": ordenação por coluna (2026-09-14) ── */
.jq-pj-th {
  all: unset;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.jq-pj-th:hover,
.jq-pj-th:focus-visible {
  color: var(--c-verde-escuro);
  text-decoration: underline;
  outline: none;
}
.jq-pj-th--ativo {
  color: var(--c-verde-escuro);
}
/* o seletor só existe no celular, onde o cabeçalho da tabela some */
.jq-pj-ordem-mobile {
  display: none;
  margin-bottom: 8px;
  color: var(--c-ink-soft);
}
.jq-pj-ordem-mobile select {
  font: inherit;
  color: var(--c-ink);
  background: var(--c-branco);
  border: 1px solid var(--c-verde-linha);
  border-radius: 6px;
  padding: 3px 6px;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .jq-pj-ordem-mobile {
    display: block;
  }
}

/* ── LANDING VINTAGE (2026-09-15, pedido do dono: "deixe o visual da landing
   mais vintage", referência: o volante da LOTO da CAIXA dos anos 70/80 —
   papel creme, tinta vermelho-alaranjada chapada, grade 10×10 de células
   arredondadas com números vermelhos, "LOTO" em estêncil na vertical,
   condensada bold em caixa alta ("NÃO ESQUEÇA:") e a tabelinha de preços
   com fios vermelhos no rodapé).
   ─────────────────────────────────────────────────────────────────────
   Escopo: SÓ a landing. O app logado continua no tema CLEAN (4 cores);
   a página e o cabeçalho viram "papel + tinta" apenas enquanto
   #landing está visível (`body:has(...)`, progressivo — sem suporte a
   :has, só a landing muda; o cabeçalho fica verde). Duas famílias novas
   no <head>: Oswald (a condensada) e Saira Stencil One (o estêncil).
   Sem imagem: a textura do papel é um SVG inline de ruído a 6%.
   15/09, mesma noite (dono: "tom mais verde, lembrando um trevo da
   sorte"): a tinta passou do vermelho da LOTO para o VERDE — como os
   bilhetes verdes da Loteria Federal — e entrou o trevo (bloco TREVO).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --v-papel: #f1ecd7; /* creme levemente frio — o papel do bilhete verde */
  --v-papel-2: #e5e3c9; /* papel um pouco mais "guardado" (fundo da página) */
  --v-papel-claro: #f8f4e6; /* as células da grade */
  --v-verde: #2a8a49; /* a tinta: verde de trevo (15/09, mesma noite — era o vermelho da LOTO) */
  --v-verde-escuro: #1c6434;
  --v-tinta: #1f1a16; /* caneta */
  --v-tinta-suave: #5a4a3e;
  --v-condensada: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --v-estencil: "Saira Stencil One", "Oswald", Impact, sans-serif;
}

/* página + cabeçalho, só com a landing visível */
body:has(#landing:not([hidden])) {
  background-color: var(--v-papel-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}
body:has(#landing:not([hidden])) .ai-hero {
  background: var(--v-verde);
  box-shadow: none;
  border: 3px solid var(--v-papel-claro);
  outline: 3px solid var(--v-verde);
  border-radius: 10px;
}
body:has(#landing:not([hidden])) .ai-hero::before {
  background: var(--v-papel-claro);
  opacity: 0.35;
}
body:has(#landing:not([hidden])) .ai-hero-title,
body:has(#landing:not([hidden])) .ai-hero-title strong {
  color: var(--v-papel-claro);
  font-family: var(--v-estencil);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 26px;
}
body:has(#landing:not([hidden])) .ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
  background: var(--v-papel-claro);
  color: var(--v-verde-escuro);
  border-color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
}
body:has(#landing:not([hidden])) .ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link):hover {
  background: var(--v-tinta);
  color: var(--v-papel-claro);
  border-color: var(--v-tinta);
}

/* o hero: um bilhete — papel creme com moldura dupla vermelha arredondada */
.landing-hero {
  background: var(--v-papel);
  border: 3px solid var(--v-verde);
  outline: 2px solid var(--v-verde);
  outline-offset: 3px;
  border-radius: 14px;
  box-shadow: none;
}
.landing-hero::before {
  display: none; /* a faixa amarela do tema CLEAN não existe no papel */
}
.landing-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 12px 4px;
  background: var(--v-verde);
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  border-radius: 3px;
}
.landing h1 {
  font-family: var(--v-condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* 1.12, não 1.02: com a condensada em caixa alta o til de "NÃO" (linha 2)
     invadia o "O" de "SORTE" (linha 1) — visto no render, não presumido */
  line-height: 1.12;
  font-size: clamp(36px, 5.4vw, 60px);
  color: var(--v-verde);
  max-width: 16ch;
}
/* "Método, sim." vira a faixa carimbada: creme sobre vermelho, como o
   "CAIXA ECONÔMICA FEDERAL" do volante — nada de marca-texto amarelo */
.landing h1 mark {
  /* inline-block: como bloco na linha, a faixa não pinta por cima da
     linha de cima (inline com padding cobria "NÃO GARANTE.") */
  display: inline-block;
  margin-top: 0.1em;
  background: var(--v-verde);
  color: var(--v-papel-claro);
  padding: 0 0.2em 0.05em;
  line-height: 1.08;
  border-radius: 4px;
}
.landing-lead {
  color: var(--v-tinta-suave);
}
.landing-lead strong {
  color: var(--v-verde-escuro);
}
.landing-btn {
  background: var(--v-verde);
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 13px 26px;
  box-shadow: 4px 4px 0 var(--v-tinta); /* registro de impressão fora do lugar */
}
.landing-btn:hover {
  background: var(--v-verde-escuro);
}
.landing-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--v-tinta);
}
.landing-btn:focus-visible {
  outline: 3px solid var(--v-tinta);
}
.landing-cta-nota {
  color: var(--v-tinta-suave);
  font-family: var(--v-condensada);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* bolinhas: círculos chapados na tinta do volante, sem sombra de "3D" */
.bola {
  box-shadow: none;
  font-family: var(--v-condensada);
  font-weight: 700;
  opacity: 0.6;
}
.bola--verde {
  background: var(--v-verde);
  color: var(--v-papel-claro);
}
.bola--azul {
  background: var(--v-tinta);
  color: var(--v-papel-claro);
}
.bola--amarela {
  background: var(--v-papel-claro);
  color: var(--v-verde);
  border: 2px solid var(--v-verde);
}

/* o volante: vermelho chapado, células creme arredondadas com número
   vermelho, e o nome ("UMA FEZINHA" desde 15/09) em estêncil na vertical,
   como o "LOTO" */
.landing-volante {
  background: var(--v-verde);
  border: 3px solid var(--v-papel-claro);
  outline: 3px solid var(--v-verde);
  border-radius: 10px;
  padding: 14px 54px 12px 14px;
  box-shadow: 6px 8px 0 rgba(31, 26, 22, 0.18);
}
.landing-volante::after {
  content: "UMA FEZINHA";
  /* nowrap: em vertical-rl com top:50% a linha só tinha metade da altura e
     "UMA FEZINHA" quebrava em duas colunas — visto no site publicado */
  white-space: nowrap;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--v-estencil);
  font-size: 24px;
  letter-spacing: 0.22em;
  color: var(--v-papel-claro);
  line-height: 1;
  pointer-events: none;
}
.volante-topo,
.volante-rodape {
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.volante-rodape {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.volante-tag {
  background: var(--v-papel-claro);
  color: var(--v-verde);
  border-radius: 3px;
  padding: 2px 8px;
}
.volante-ok {
  color: var(--v-papel-claro);
}
.volante-celula {
  background: var(--v-papel-claro);
  border: 0;
  border-radius: 7px;
  color: var(--v-verde);
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 15px;
}
.volante-grade[data-cols="10"] .volante-celula {
  border-radius: 5px;
  font-size: 12px;
}
/* marcada = caneta: tinta preta sobre a célula, como no bilhete preenchido */
.volante-celula.marcada {
  background: var(--v-tinta);
  border-color: var(--v-tinta);
  color: var(--v-papel-claro);
  transform: none;
}

/* três passos: a tabelinha de preços do rodapé do volante — células
   coladas, fios vermelhos, título condensado em caixa alta */
.landing-passos {
  gap: 0;
  border: 2px solid var(--v-verde);
  border-radius: 10px;
  overflow: hidden;
  background: var(--v-papel);
}
.landing-passos li {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--v-verde);
  border-radius: 0;
  padding: 18px 20px 16px;
}
.landing-passos li:first-child {
  border-left: 0;
}
.landing-passos h2 {
  font-family: var(--v-condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  color: var(--v-verde);
}
.landing-passos p {
  color: var(--v-tinta-suave);
}
.passo-num,
.passo-num--azul,
.passo-num--verde,
.passo-num--amarelo {
  border-radius: 4px;
  background: var(--v-verde);
  color: var(--v-papel-claro);
  box-shadow: none;
  font-family: var(--v-estencil);
  font-weight: 400;
  font-size: 20px;
}

/* cartões: a caixa "NÃO ESQUEÇA" — papel, fio vermelho arredondado, título
   condensado; o emoji sai e entra um número em estêncil (01…04) */
.landing-grid {
  counter-reset: cartao;
}
.landing-card,
.landing-card--verde,
.landing-card--azul,
.landing-card--amarelo {
  background: var(--v-papel);
  border: 2px solid var(--v-verde);
  border-top-color: var(--v-verde);
  border-radius: 10px;
  position: relative;
}
.landing-card::before {
  counter-increment: cartao;
  content: counter(cartao, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-family: var(--v-estencil);
  font-size: 26px;
  line-height: 1;
  color: var(--v-verde);
}
.landing-card-icone {
  display: none;
}
.landing-card h2 {
  font-family: var(--v-condensada);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 19px;
  line-height: 1.15;
  color: var(--v-verde);
}
.landing-card p {
  color: var(--v-tinta-suave);
}
.landing-rodape {
  color: var(--v-tinta-suave);
  font-family: var(--v-condensada);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
@media (max-width: 860px) {
  .landing-volante {
    padding-right: 14px; /* sem a palavra vertical: em 360px ela comia a grade */
  }
  .landing-volante::after {
    display: none;
  }
  .landing-passos li {
    border-left: 0;
    border-top: 2px solid var(--v-verde);
  }
  .landing-passos li:first-child {
    border-top: 0;
  }
  .landing h1 {
    font-size: clamp(34px, 9.5vw, 44px);
  }
}

/* ── ZEBRINHA (2026-09-15, mesma noite — "se inspire também na história":
   a Zebrinha do Fantástico, boneco de papel do Borjalo com olhos e boca
   móveis, 1973 → Copa de 1986, lia os 13 resultados da Loteria Esportiva e
   gritava "olha eu aí… zeeebra!" no resultado que ninguém esperava).
   Três toques: a mascote em SVG que PISCA e MEXE A BOCA (CSS, sem JS), a
   faixa zebrada no topo do cabeçalho e do bilhete, e a faixa de memória.
   ═══════════════════════════════════════════════════════════════════════ */
/* a faixa zebrada: no topo do bilhete (o hero) e do cabeçalho */
.landing-hero::before {
  display: block;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--v-tinta) 0 9px,
    var(--v-papel-claro) 9px 18px
  );
}
body:has(#landing:not([hidden])) .ai-hero::before {
  opacity: 1;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--v-tinta) 0 8px,
    var(--v-papel-claro) 8px 16px
  );
}
@media (max-width: 860px) {
  /* o kicker cede o canto ao Trevinho */
  .landing-kicker {
    max-width: calc(100% - 104px);
  }
}

/* ── TREVO (2026-09-15, mesma noite — "tom mais verde, lembrando um trevo
   da sorte"). A tinta já virou verde nos tokens; aqui entra o trevo de
   quatro folhas, desenhado em SVG inline (quatro corações apontando para o
   centro + o caule), em três lugares: no cabeçalho no lugar do 🎯, no
   topo do volante, e como marca-d'água de impressão no canto do bilhete.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --v-trevo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><path id='f' d='M50 52 C50 52 31 38 31 25 A9.5 9.5 0 0 1 50 22 A9.5 9.5 0 0 1 69 25 C69 38 50 52 50 52Z'/></defs><g fill='%232a8a49'><use href='%23f'/><use href='%23f' transform='rotate(90 50 50)'/><use href='%23f' transform='rotate(180 50 50)'/><use href='%23f' transform='rotate(270 50 50)'/></g><path d='M52 54 Q56 72 66 86' stroke='%232a8a49' stroke-width='4.5' fill='none' stroke-linecap='round'/></svg>");
  --v-trevo-claro: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><path id='f' d='M50 52 C50 52 31 38 31 25 A9.5 9.5 0 0 1 50 22 A9.5 9.5 0 0 1 69 25 C69 38 50 52 50 52Z'/></defs><g fill='%23f8f4e6'><use href='%23f'/><use href='%23f' transform='rotate(90 50 50)'/><use href='%23f' transform='rotate(180 50 50)'/><use href='%23f' transform='rotate(270 50 50)'/></g><path d='M52 54 Q56 72 66 86' stroke='%23f8f4e6' stroke-width='4.5' fill='none' stroke-linecap='round'/></svg>");
}
/* cabeçalho: o 🎯 some e entra o trevo creme sobre o verde */
body:has(#landing:not([hidden])) .ai-hero-emoji {
  display: none;
}
body:has(#landing:not([hidden])) .ai-hero-title::before {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--v-trevo-claro) center / contain no-repeat;
}
/* volante: um trevo creme antes do nome do jogo (o topo deixa de ser
   space-between — com três itens o trevo iria parar sozinho na ponta) */
.volante-topo {
  justify-content: flex-start;
  gap: 8px;
}
.volante-tag {
  margin-left: auto;
}
.volante-topo::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: -2px;
  background: var(--v-trevo-claro) center / contain no-repeat;
}
/* marca-d'água no canto do bilhete: verde a 9%, atrás de tudo */
.landing-hero::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -56px;
  width: 300px;
  height: 300px;
  background: var(--v-trevo) center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px) {
  .landing-hero::after {
    width: 200px;
    height: 200px;
    right: -40px;
    bottom: -40px;
  }
}

/* ── LOTÉRICA (2026-09-15, mesma noite — "se inspire na fachada de uma
   lotérica"): parede de AZULEJO branco com rejunte (os cartões viram
   cartazes colados na parede), o letreiro com a faixa de baixo ("ABERTO
   TODOS OS DIAS"), e o cartaz da porta com os selos coloridos por
   modalidade — cada um na cor oficial do jogo, com o trevinho.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --v-azulejo: #efece0;
  --v-rejunte: #d3cfba;
  /* cores oficiais das modalidades (o cartaz da porta) */
  --v-megasena: #209869;
  --v-lotofacil: #930089;
  --v-quina: #260085;
  --v-lotomania: #f78100;
  --v-duplasena: #a61324;
}
/* a parede: azulejos de 44px com rejunte, no lugar do grão de papel */
body:has(#landing:not([hidden])) {
  background-color: var(--v-azulejo);
  background-image:
    linear-gradient(var(--v-rejunte) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--v-rejunte) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
  background-size: 44px 44px, 44px 44px, 44px 44px;
}
/* o letreiro: a faixa de baixo com o horário da casa */
body:has(#landing:not([hidden])) .ai-hero::after {
  content: "Uma fezinha com método · aberto todos os dias · a aposta é só nos canais oficiais da CAIXA";
  display: block;
  margin: 14px -28px -20px;
  padding: 6px 28px 7px;
  background: var(--v-verde-escuro);
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0 0 7px 7px;
}
/* o cartaz da porta: selos coloridos, um por modalidade */
.landing-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  letter-spacing: 0;
}
.jogo-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 2px solid var(--v-papel-claro);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(31, 26, 22, 0.25);
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.jogo-selo:nth-child(even) {
  transform: rotate(1.5deg);
}
.jogo-selo::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: var(--v-trevo-claro) center / contain no-repeat;
}
.jogo-selo--megasena {
  background: var(--v-megasena);
}
.jogo-selo--lotofacil {
  background: var(--v-lotofacil);
}
.jogo-selo--quina {
  background: var(--v-quina);
}
.jogo-selo--lotomania {
  background: var(--v-lotomania);
}
.jogo-selo--duplasena {
  background: var(--v-duplasena);
}
@media (max-width: 860px) {
  body:has(#landing:not([hidden])) .ai-hero::after {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 12px 7px;
  }
  /* a regra do balão da Zebrinha limitava o kicker a uma faixa; com selos
     que quebram linha sozinhos, o limite continua valendo para o canto */
  .landing-kicker {
    max-width: calc(100% - 92px);
  }
}

/* ── VITRINE (2026-09-15 — "dar mais vida à landing com base na home do
   Loterias Online da CAIXA"): um cartão por modalidade, faixa na cor
   oficial do jogo, prêmio estimado em condensada gigante, carimbo
   "ACUMULOU!" em estêncil, o último resultado em bolinhas, e "Gerar jogos"
   que é o mesmo Entrar. Entram deslizando, as bolinhas pipocam; no
   celular viram uma fita com scroll-snap (o carrossel da CAIXA).
   ═══════════════════════════════════════════════════════════════════════ */
.landing-vitrine {
  margin: 16px 0 0;
}
.vitrine-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 10px;
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-verde);
  text-align: left;
}
.vitrine-titulo-trevo {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--v-trevo) center / contain no-repeat;
}
.vitrine-titulo small {
  margin-left: auto;
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--v-tinta-suave);
}
.vitrine-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.vitrine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v-papel);
  border: 2px solid var(--v-tinta);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  animation: vitrine-entra 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes vitrine-entra {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vitrine-topo {
  display: flex;
  flex-wrap: wrap; /* "concurso 3058" desce em vez de quebrar "MEGA-SENA" */
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 10px;
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--v-verde);
}
.vitrine-card--megasena .vitrine-topo {
  background: var(--v-megasena);
}
.vitrine-card--lotofacil .vitrine-topo {
  background: var(--v-lotofacil);
}
.vitrine-card--quina .vitrine-topo {
  background: var(--v-quina);
}
.vitrine-card--lotomania .vitrine-topo {
  background: var(--v-lotomania);
}
.vitrine-card--duplasena .vitrine-topo {
  background: var(--v-duplasena);
}
.vitrine-nome {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.vitrine-conc {
  font-weight: 500;
  font-size: 10px;
  opacity: 0.9;
  white-space: nowrap;
}
.vitrine-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 12px 44px; /* o rodapé é do carimbo "ACUMULOU!" */
}
.vitrine-quando {
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-tinta-suave);
}
.vitrine-premio {
  margin-top: 2px;
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--v-verde);
}
.vitrine-premio--sem {
  font-size: 18px;
  color: var(--v-tinta-suave);
}
.vitrine-premio-nota {
  margin-top: 2px;
  font-size: 11px;
  color: var(--v-tinta-suave);
}
/* o carimbo "ACUMULOU!": estêncil, torto, tinta */
.vitrine-carimbo {
  /* canto inferior direito, ao lado do CTA (que fica à esquerda): no topo
     ele caía em cima de "sorteio hoje" / "próximo sorteio em breve" — visto
     no render do site publicado, a 1280 e a 500 px */
  position: absolute;
  bottom: 14px;
  right: 10px;
  padding: 2px 7px 3px;
  border: 2px solid var(--v-tinta);
  border-radius: 4px;
  transform: rotate(8deg);
  font-family: var(--v-estencil);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-tinta);
  background: rgba(248, 244, 230, 0.85);
}
.vitrine-ultimo {
  margin-top: 12px;
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-tinta-suave);
}
.vitrine-ultimo--2 {
  margin-top: 6px;
}
.vitrine-dezenas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.vitrine-bola {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--v-tinta);
  color: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 11px;
  animation: vitrine-pipoca 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 250ms + var(--j, 0) * 45ms);
}
/* lotomania são 20 bolinhas: menores para caberem no cartão */
.vitrine-card--lotomania .vitrine-bola,
.vitrine-card--lotofacil .vitrine-bola {
  width: 21px;
  height: 21px;
  font-size: 10px;
}
@keyframes vitrine-pipoca {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.vitrine-cta {
  margin-top: 14px;
  padding: 8px 10px 9px;
  align-self: flex-start;
  white-space: nowrap; /* "GERAR / JOGOS" quebrado parecia defeito (render) */
  border: 2px solid var(--v-verde);
  border-radius: 4px;
  background: transparent;
  color: var(--v-verde);
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.vitrine-cta:hover {
  background: var(--v-verde);
  color: var(--v-papel-claro);
}
.vitrine-cta:focus-visible {
  outline: 3px solid var(--v-tinta);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vitrine-card,
  .vitrine-bola {
    animation: none;
  }
}
@media (max-width: 1040px) {
  .vitrine-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* celular: a fita de cartões com scroll-snap, como o carrossel da CAIXA */
@media (max-width: 720px) {
  .vitrine-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 10px;
    margin: 0 -2px;
    -webkit-overflow-scrolling: touch;
  }
  .vitrine-card {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
  }
}

/* ── UMA FEZINHA (2026-09-15, novo nome, decisão do dono) ─────────────────
   A marca no letreiro: "uma" pequeno em condensada, "FEZINHA" no estêncil.
   Só com a landing visível; no app o <strong> continua como era. */
body:has(#landing:not([hidden])) .ai-hero-title .marca-uma {
  font-family: var(--v-condensada);
  font-weight: 500;
  font-size: 0.6em;
  letter-spacing: 0.16em;
  vertical-align: 0.22em;
  margin-right: 0.12em;
}

/* ── PAREDE v2 (2026-09-15, dono: "o quadriculado mais parecido com uma
   parede de lotérica da CAIXA"). Da foto: azulejo BRANCO brilhante de
   ~15 cm com rejunte cinza, peças com tons ligeiramente diferentes, e o
   barrado de azulejo AZUL CAIXA na base da parede. Aqui: um SVG de 4×4
   peças (64 px) com brilho diagonal e três peças um tom mais fechado —
   repetido, a variação parece natural — e o barrado azul ancorado no pé da
   página (repeat-x), com `padding-bottom` para o conteúdo não sentar nele.
   Clareado um tom em 15/09 (dono: "um pouco mais claro"): rejunte
   #bfc2bc→#d3d6d1, faces +~3% de luz, fallback #e9eae5→#f0f1ed.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --v-parede-azulejo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><defs><linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fcfcfa'/><stop offset='0.55' stop-color='%23f6f6f3'/><stop offset='1' stop-color='%23eeefeb'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fafaf8'/><stop offset='1' stop-color='%23ecede9'/></linearGradient></defs><rect width='256' height='256' fill='%23d3d6d1'/><g><rect x='2' y='2' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='66' y='2' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='130' y='2' width='60' height='60' rx='1.5' fill='url(%23b)'/><rect x='194' y='2' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='2' y='66' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='66' y='66' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='130' y='66' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='194' y='66' width='60' height='60' rx='1.5' fill='url(%23b)'/><rect x='2' y='130' width='60' height='60' rx='1.5' fill='url(%23b)'/><rect x='66' y='130' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='130' y='130' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='194' y='130' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='2' y='194' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='66' y='194' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='130' y='194' width='60' height='60' rx='1.5' fill='url(%23a)'/><rect x='194' y='194' width='60' height='60' rx='1.5' fill='url(%23a)'/></g><g fill='white' opacity='0.35'><path d='M6 6 h22 v3 h-19 v19 h-3z'/><path d='M70 6 h22 v3 h-19 v19 h-3z'/><path d='M134 6 h22 v3 h-19 v19 h-3z'/><path d='M198 6 h22 v3 h-19 v19 h-3z'/><path d='M6 70 h22 v3 h-19 v19 h-3z'/><path d='M70 70 h22 v3 h-19 v19 h-3z'/><path d='M134 70 h22 v3 h-19 v19 h-3z'/><path d='M198 70 h22 v3 h-19 v19 h-3z'/><path d='M6 134 h22 v3 h-19 v19 h-3z'/><path d='M70 134 h22 v3 h-19 v19 h-3z'/><path d='M134 134 h22 v3 h-19 v19 h-3z'/><path d='M198 134 h22 v3 h-19 v19 h-3z'/><path d='M6 198 h22 v3 h-19 v19 h-3z'/><path d='M70 198 h22 v3 h-19 v19 h-3z'/><path d='M134 198 h22 v3 h-19 v19 h-3z'/><path d='M198 198 h22 v3 h-19 v19 h-3z'/></g></svg>");
  --v-parede-barrado: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='72'><defs><linearGradient id='c' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%232b7bc4'/><stop offset='1' stop-color='%23084d8f'/></linearGradient></defs><rect width='64' height='72' fill='%23d3d6d1'/><rect y='0' width='64' height='8' fill='%23f0f1ed'/><rect x='2' y='10' width='60' height='60' rx='1.5' fill='url(%23c)'/><path d='M6 14 h22 v3 h-19 v19 h-3z' fill='white' opacity='0.28'/></svg>");
}
body:has(#landing:not([hidden])) {
  background-color: #f0f1ed;
  background-image: var(--v-parede-barrado), var(--v-parede-azulejo);
  background-repeat: repeat-x, repeat;
  background-position: left bottom, left top;
  background-size: 64px 72px, 256px 256px;
  padding-bottom: 84px; /* o conteúdo não senta no barrado azul */
}

/* ── LETREIRO v2 (2026-09-15, dono: cabeçalho "mais parecido com a imagem"
   — a placa de uma lotérica: bloco AZUL à esquerda com o trevo de quatro
   cores e a palavra em branco, painel CINZA de alumínio à direita com o
   nome da casa em caixa alta itálica azul, tudo numa moldura fina).
   Só com a landing visível. Aqui: bloco azul = .ai-hero-title (trevo em
   ::before + o <strong> "Uma Fezinha"); painel cinza = .ai-hero::after com
   duas linhas; os botões de login ficam à direita do painel (absolutos,
   como o header original fazia) e, no celular, dentro do bloco azul.
   ⚠️ O trevo de quatro cores lembra a marca das Loterias CAIXA de
   propósito (é a referência do dono); a palavra é a NOSSA — nunca
   "Loterias". ═══════════════════════════════════════════════════════════ */
:root {
  --v-placa-azul: #1a53a6;
  --v-placa-azul-2: #0f3f86;
  --v-placa-cinza: #cfd3d8;
  --v-placa-cinza-2: #aeb4bb;
  --v-placa-moldura: #8b9198;
  --v-trevo-caixa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><path id='f' d='M50 52 C50 52 31 38 31 25 A9.5 9.5 0 0 1 50 22 A9.5 9.5 0 0 1 69 25 C69 38 50 52 50 52Z'/></defs><use href='%23f' fill='%23f6b800' transform='rotate(-45 50 50)'/><use href='%23f' fill='%23f07e00' transform='rotate(45 50 50)'/><use href='%23f' fill='%2394c6f2' transform='rotate(135 50 50)'/><use href='%23f' fill='%23ffffff' transform='rotate(225 50 50)'/></svg>");
}
body:has(#landing:not([hidden])) .ai-hero {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(180deg, var(--v-placa-cinza) 0%, var(--v-placa-cinza-2) 100%);
  border: 3px solid var(--v-placa-moldura);
  outline: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #eef0f2, 0 4px 0 rgba(31, 26, 22, 0.18);
  overflow: hidden;
}
body:has(#landing:not([hidden])) .ai-hero::before {
  display: none; /* a placa não tem a faixa zebrada */
}
/* bloco azul: trevo em cima, nome embaixo */
body:has(#landing:not([hidden])) .ai-hero-title {
  position: static; /* o auth-box absoluto se posiciona pelo .ai-hero, não pelo bloco azul */
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 14px 26px 12px;
  background: linear-gradient(180deg, var(--v-placa-azul) 0%, var(--v-placa-azul-2) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
body:has(#landing:not([hidden])) .ai-hero-title::before {
  width: 62px;
  height: 62px;
  background: var(--v-trevo-caixa) center / contain no-repeat;
}
body:has(#landing:not([hidden])) .ai-hero-title strong {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}
body:has(#landing:not([hidden])) .ai-hero-title .marca-uma {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.7em;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
  margin-right: 0.15em;
  opacity: 0.92;
}
/* painel cinza: o nome da casa, itálico azul em caixa alta, duas linhas */
body:has(#landing:not([hidden])) .ai-hero::after {
  content: "Jogos com método\A aberto todos os dias";
  white-space: pre-line;
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0;
  padding: 12px 190px 12px 26px; /* a folga da direita é dos botões */
  background: transparent;
  border-radius: 0;
  color: var(--v-placa-azul-2);
  font-family: var(--v-condensada);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* os botões: na ponta direita do painel cinza */
body:has(#landing:not([hidden])) .ai-hero .auth-box {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: auto;
}
body:has(#landing:not([hidden])) .ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
  background: var(--v-placa-azul);
  color: #ffffff;
  border-color: var(--v-placa-azul-2);
}
body:has(#landing:not([hidden])) .ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link):hover {
  background: var(--v-placa-azul-2);
  border-color: var(--v-placa-azul-2);
}
@media (max-width: 720px) {
  body:has(#landing:not([hidden])) .ai-hero {
    flex-direction: column;
  }
  body:has(#landing:not([hidden])) .ai-hero-title {
    padding: 14px 16px 12px;
  }
  /* no celular os botões entram no bloco azul, abaixo do nome */
  body:has(#landing:not([hidden])) .ai-hero .auth-box {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: center;
  }
  body:has(#landing:not([hidden])) .ai-hero .auth-btn:not(.auth-btn--ghost):not(.auth-btn--link) {
    background: #ffffff;
    color: var(--v-placa-azul-2);
    border-color: #ffffff;
  }
  body:has(#landing:not([hidden])) .ai-hero::after {
    padding: 12px 16px;
    justify-content: center;
    text-align: center;
    font-size: 20px;
  }
}

/* ── TREVINHO v4 (2026-09-15): o mascote do artifact "Trevinho da Sorte",
   desenhado pelo dono. Animações e humores do próprio artifact, com as
   classes prefixadas (tv-*) e origens em coordenadas do viewBox
   (transform-box: view-box), como lá. "girar" é flip 2D (scaleX): rotateY
   não se aplica a elementos SVG. Os humores ciclam por JS
   (iniciarTrevinhoLanding). Tudo para com prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */
.landing-mascote {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  margin-right: 2px;
}
.landing-mascote::before {
  /* o "palco" do artifact: um brilho verde-claro atrás, sem raio */
  content: "";
  position: absolute;
  inset: 4% -8% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 217, 87, 0.28) 0%, rgba(139, 217, 87, 0) 68%);
  pointer-events: none;
}
.trevo-mascote {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tv-body {
  transform-box: view-box;
  transform-origin: 150px 300px;
  animation: tv-hop 1.5s ease-in-out infinite;
}
.tv-leaves {
  transform-box: view-box;
  transform-origin: 150px 200px;
  animation: tv-sway 3.4s ease-in-out infinite;
}
.tv-arm-right {
  transform-box: view-box;
  transform-origin: 200px 186px;
  animation: tv-wave 1.1s ease-in-out infinite;
}
.tv-arm-left {
  transform-box: view-box;
  transform-origin: 102px 190px;
  animation: tv-swing 1.5s ease-in-out infinite;
}
.tv-eyes {
  transform-box: view-box;
  transform-origin: 150px 130px;
  animation: tv-blink 4.6s infinite;
}
.tv-shadow {
  transform-box: view-box;
  transform-origin: 150px 330px;
  animation: tv-squish 1.5s ease-in-out infinite;
}
.tv-sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: tv-twinkle 2.6s ease-in-out infinite;
}
@keyframes tv-hop {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  18% {
    transform: translateY(2px) scale(1.04, 0.96);
  }
  50% {
    transform: translateY(-16px) scale(0.98, 1.03);
  }
  78% {
    transform: translateY(0) scale(1.02, 0.98);
  }
}
@keyframes tv-sway {
  0%,
  100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
@keyframes tv-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-24deg);
  }
}
@keyframes tv-swing {
  0%,
  100% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-8deg);
  }
}
@keyframes tv-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.08);
  }
}
@keyframes tv-squish {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.82);
  }
}
@keyframes tv-twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
/* humores (os do artifact) */
.tv-mood-dancar .tv-body {
  animation: tv-boogie 1.05s ease-in-out infinite;
}
@keyframes tv-boogie {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  25% {
    transform: translateY(-12px) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(5deg);
  }
  75% {
    transform: translateY(-12px) rotate(0deg);
  }
}
.tv-mood-dancar .tv-arm-left {
  animation: tv-swing 0.52s ease-in-out infinite;
}
.tv-mood-dancar .tv-arm-right {
  animation: tv-wave 0.52s ease-in-out infinite;
}
.tv-mood-pular .tv-body {
  animation: tv-bigjump 0.85s cubic-bezier(0.3, 0.9, 0.4, 1) infinite;
}
@keyframes tv-bigjump {
  0%,
  100% {
    transform: translateY(0) scale(1.06, 0.9);
  }
  20% {
    transform: translateY(-52px) scale(0.94, 1.08);
  }
  55% {
    transform: translateY(-58px) scale(1, 1);
  }
  85% {
    transform: translateY(0) scale(1.08, 0.9);
  }
}
.tv-mood-girar .tv-body {
  animation: tv-flip 1.6s ease-in-out infinite;
}
@keyframes tv-flip {
  0%,
  100% {
    transform: scaleX(1) translateY(0);
  }
  25% {
    transform: scaleX(0.05) translateY(-6px);
  }
  50% {
    transform: scaleX(-1) translateY(-10px);
  }
  75% {
    transform: scaleX(-0.05) translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-body,
  .tv-leaves,
  .tv-arm-left,
  .tv-arm-right,
  .tv-eyes,
  .tv-shadow,
  .tv-sparkle {
    animation: none !important;
  }
}
@media (max-width: 720px) {
  /* o botão vira 100%; o Trevinho fica centrado em cima dele */
  .landing-mascote {
    width: 118px;
    margin: 0 auto -8px;
  }
}

/* ── TREVINHO no canto (2026-09-15, dono: "substituir a Zebrinha pelo
   mascotinho"). Mesmo lugar que a Zebrinha tinha: canto superior direito
   do bilhete, atrás do texto e do volante (z-index 0), com um balão. O
   "pular" sobe ~29 px na largura de 150 — o top de 26 px é para o pulo não
   ser cortado pelo overflow do hero. No celular, menor e sem balão. */
.landing-mascote {
  position: absolute;
  top: 26px;
  right: 18px;
  width: 150px;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.landing-mascote::after {
  content: "uma fezinha?";
  display: block;
  margin: -6px auto 0;
  width: max-content;
  padding: 2px 9px;
  border: 2px solid var(--v-tinta);
  border-radius: 999px;
  background: var(--v-papel-claro);
  font-family: var(--v-condensada);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-tinta);
  transform: rotate(-4deg);
}
@media (max-width: 860px) {
  .landing-mascote {
    width: 96px;
    top: 14px;
    right: 10px;
    margin: 0;
  }
  .landing-mascote::after {
    display: none;
  }
}

/* ── TREVINHO pula pela tela (2026-09-15, dono: "o mascotinho deve ficar
   pulando na tela, em locais aleatórios"). Sai do canto do bilhete e vira
   `position: fixed` — está sempre na tela, mesmo rolando. Quem escolhe o
   próximo ponto é `iniciarTrevinhoLanding` (app.js): sorteia um lugar do
   viewport, evitando texto/botões/cartões quando dá (e, se não dá, o de
   menor sobreposição), e move o contêiner com transição de `transform`;
   o ARCO do pulo é a animação `tv-arco` no SVG, reiniciada a cada salto
   (classe `tv-voando`). Vira de lado quando vai para a esquerda (`scale`,
   que compõe com `transform` sem brigar com as animações do corpo).
   `pointer-events: none`: nunca rouba um clique, mesmo passando por cima
   do botão. Sem JS ou com prefers-reduced-motion fica parado no alto à
   direita, abaixo da placa. `#landing[hidden]` já o esconde com a landing.
   ═══════════════════════════════════════════════════════════════════════ */
.landing-mascote {
  position: fixed;
  top: 96px;
  right: 18px;
  left: auto;
  width: 150px;
  margin: 0;
  z-index: 60;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.42, 0.05, 0.58, 0.95);
  will-change: transform;
}
.landing-mascote.tv-solto {
  /* o JS assume: origem no canto e posição só por transform */
  top: 0;
  left: 0;
  right: auto;
}
.landing-mascote.tv-esquerda .trevo-mascote {
  scale: -1 1;
}
.landing-mascote.tv-voando .trevo-mascote {
  animation: tv-arco 0.9s cubic-bezier(0.35, 0.05, 0.55, 1) both;
}
@keyframes tv-arco {
  0% {
    transform: translateY(0) scale(1.08, 0.9);
  }
  12% {
    transform: translateY(-40px) scale(0.94, 1.1);
  }
  50% {
    transform: translateY(-150px) scale(1, 1);
  }
  88% {
    transform: translateY(-14px) scale(0.98, 1.04);
  }
  100% {
    transform: translateY(0) scale(1.06, 0.92);
  }
}
@media (max-width: 860px) {
  .landing-mascote {
    width: 96px;
    top: 84px;
    right: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-mascote {
    transition: none;
  }
  .landing-mascote.tv-voando .trevo-mascote {
    animation: none;
  }
}

/* ── TREVINHO clicável (2026-09-15, dono: "quando o usuário conseguir
   clicar no mascotinho, redirecionar para dentro da aplicação"). Volta a
   receber ponteiro (o bloco anterior o deixava com pointer-events: none),
   cursor de mão, balão "me pega!" no hover e "pegou!" quando pego
   (classe tv-pego, posta pelo JS junto com o login). O SVG é quem
   recebe o clique; o brilho (::before) continua sem ponteiro. */
.landing-mascote {
  pointer-events: auto;
  cursor: pointer;
}
.landing-mascote:hover .trevo-mascote {
  filter: drop-shadow(0 4px 10px rgba(42, 138, 73, 0.45)) brightness(1.06);
}
.landing-mascote:hover::after {
  content: "me pega!";
}
.landing-mascote.tv-pego::after,
.landing-mascote.tv-pego:hover::after {
  content: "pegou! 🎲";
  background: var(--v-verde);
  border-color: var(--v-verde-escuro);
  color: var(--v-papel-claro);
  transform: rotate(-4deg) scale(1.12);
}
@media (max-width: 860px) {
  .landing-mascote.tv-pego::after {
    display: block;
  }
}

/* ── CARTELA no topo do título (2026-09-15, dono: "coloque a cartela mais
   pra cima, mais próxima do topo do título"). O hero era grid de 2 colunas
   com `align-items: center`, e a cartela (mais baixa que a coluna de texto)
   ficava centrada — um vão de ~110 px acima dela. Em vez de margem mágica
   (a altura do kicker varia com a quebra dos selos), `.landing-hero-texto`
   vira `display: contents` no desktop: kicker, h1, lead e CTA passam a ser
   linhas da própria grade (col. 1), e a cartela ocupa a col. 2 a partir da
   LINHA DO H1 — o topo dela é o topo do título por construção. As margens
   dos quatro são só inferiores, então o espaçamento não muda. No celular
   (≤860 px) nada disso vale: a grade é 1 coluna e a cartela vem depois do
   CTA, como antes. Os filhos ganham z-index 1 porque, sem a caixa do pai,
   as bolinhas (absolutas) pintariam por cima do texto. */
@media (min-width: 861px) {
  .landing-hero {
    align-items: start;
    row-gap: 0; /* o `gap` da grade valia só entre colunas; com 4 linhas abriria 44 px entre kicker, título e lead */
  }
  .landing-hero-texto {
    display: contents;
  }
  .landing-hero-texto > * {
    position: relative;
    z-index: 1;
    grid-column: 1;
  }
  .landing-volante {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
  }
}

/* ── TREVINHO anjo (2026-09-15, dono: "asas brancas / auréolas douradas de
   anjo no mascotinho"; minutos depois, "não precisa das asas, só da
   auréola"). Ficou só a auréola: três elipses douradas sobre a cabeça,
   flutuando e cintilando. As asas (asa em <defs> + dois <use> em
   contrafase) saíram do HTML e daqui. Para com prefers-reduced-motion. */
.tv-halo {
  transform-box: view-box;
  transform-origin: 150px 30px;
  animation: tv-halo 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(242, 201, 76, 0.75));
}
@keyframes tv-halo {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px) rotate(3deg);
    opacity: 0.86;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-halo {
    animation: none !important;
  }
}

/* ── ZEBRINHA → TREVINHO nas imagens (2026-09-15, dono: "substituir imagens
   da Zebrinha pelo mascotinho em todo o sistema"). O emoji 🦓 do selo
   "ZEBRA!" da campeã e do toast de surpresa virou <img src="img/trevinho.svg">
   (arquivo GERADO do SVG inline da landing por scripts/exportar-trevinho.js;
   o guard da landing reprova deploy se ele divergir). A regra antiga do
   .zebrinha-emoji era font-size para emoji; para a imagem vale largura. As
   listras zebradas (faixa do bilhete, fundo do banner da campeã) ficam —
   são padrão, não imagem da Zebrinha. */
.zebrinha-emoji {
  width: 52px;
  height: auto;
  font-size: 0;
}
.jq-campea-zebra-img {
  width: 18px;
  height: auto;
  vertical-align: -5px;
  margin-right: 2px;
}