/* ============================================================
   Sortei — Stylesheet Principal
   Mobile-first | CSS Custom Properties | Sem dependências
   ============================================================ */

/* --- Variáveis globais --- */
:root {
    --cor-primaria:   #1a472a;
    --cor-secundaria: #2d6a4f;
    --cor-destaque:   #52b788;

    --cor-lotofacil:  #930089;
    --cor-megasena:   #209869;
    --cor-quina:      #260085;
    --cor-timemania:  #FFCC00;
    --cor-diadesorte: #80881F;

    --cor-texto:      #1f2937;
    --cor-texto-leve: #6b7280;
    --cor-fundo:      #f8fafc;
    --cor-branco:     #ffffff;
    --cor-borda:      #e5e7eb;

    --sombra-sm: 0 1px 3px rgba(0,0,0,.08);
    --sombra-md: 0 4px 12px rgba(0,0,0,.10);
    --sombra-lg: 0 8px 24px rgba(0,0,0,.12);

    --raio-sm: 8px;
    --raio-md: 12px;
    --raio-lg: 20px;

    --fonte-principal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fonte-mono:      'Courier New', monospace;

    --max-largura: 1200px;
    --padding-x:   1rem;
    --transicao:   0.2s ease;
}

/* --- Reset e base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color var(--transicao);
}
a:hover { color: var(--cor-secundaria); }

ul { list-style: none; }

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--max-largura);
    margin: 0 auto;
    padding: 0 var(--padding-x);
}

/* ============================================================
   Cabeçalho / Navegação
   ============================================================ */

/* --- Wrapper geral do cabeçalho (sticky) --- */
.cabecalho {
    background: var(--cor-branco);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sombra-sm);
}

/* --- Barra superior: logo + Início/Conferidor/Blog + auth --- */
.cabecalho-topo {
    border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-topo .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1rem;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cor-primaria);
    flex-shrink: 0;
}
.logo:hover { color: var(--cor-primaria); }
.logo-icone { font-size: 1.6rem; }
.logo-texto  { letter-spacing: -0.5px; }
.logo-rodape {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cor-branco);
}

/* Botão hamburguer (mobile) */
.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cor-texto);
    border-radius: 2px;
    transition: transform var(--transicao), opacity var(--transicao);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav primária: oculta em mobile, visível no desktop */
.nav-primaria {
    display: none;
    align-items: center;
    gap: 0.125rem;
}

.nav-link-primario {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cor-texto);
    border-radius: var(--raio-sm);
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}
.nav-link-primario:hover,
.nav-link-primario.ativo {
    background: var(--cor-fundo);
    color: var(--cor-primaria);
}

/* Auth / usuário (desktop — dentro de .nav-primaria) */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 1px solid var(--cor-borda);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}

.nav-usuario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 1px solid var(--cor-borda);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}

.nav-link-auth {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cor-texto);
    padding: 0.375rem 0.5rem;
    border-radius: var(--raio-sm);
    transition: background var(--transicao);
}
.nav-link-auth:hover { background: var(--cor-fundo); }

.nav-sair {
    font-size: 0.8rem;
    color: var(--cor-texto-leve);
}
.nav-sair:hover { color: var(--cor-texto); }

.nav-usuario-nome {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cor-texto);
}

.badge-premium {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Dot colorido por loteria (usado em toda a nav) */
.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   Barra de jogos — desktop (nav-jogos)
   10 loterias em linha, hover abre dropdown de ferramentas
   ============================================================ */
.nav-jogos {
    display: none; /* oculta em mobile */
    background: var(--cor-branco);
    border-bottom: 1px solid var(--cor-borda);
}

/* Container sem overflow para não recortar os dropdowns absolutos */
.nav-jogos .container {
    overflow: visible;
}

.nav-jogos-lista {
    display: flex;
    /* Quebra em mais de uma linha entre 768 e ~1200px: com as 10 loterias em linha a página rolava de lado (B110) */
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Item de jogo */
.nav-jogo-item {
    position: relative;
    flex-shrink: 0;
}

/* Linha superior do item: link do jogo + seta */
.nav-jogo-cabecalho {
    display: flex;
    align-items: center;
    height: 44px;
}

/* Link clicável: vai para a página principal do jogo */
.nav-jogo-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.5rem 0 0.75rem;
    height: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cor-texto);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.nav-jogo-item:hover .nav-jogo-link {
    color: var(--cor-primaria);
}
.nav-jogo-item.ativo .nav-jogo-link {
    color: var(--cor-primaria);
    border-bottom-color: var(--cor-primaria);
}

/* Seta indicadora de dropdown (visual only — não é botão) */
.nav-jogo-seta {
    display: flex;
    align-items: center;
    padding: 0 0.625rem 0 0;
    height: 100%;
    font-size: 0.6rem;
    color: var(--cor-texto-leve);
    transition: transform var(--transicao), color var(--transicao);
    pointer-events: none;
    line-height: 1;
}
.nav-jogo-item:hover .nav-jogo-seta {
    transform: rotate(180deg);
    color: var(--cor-primaria);
}

/* Dropdown das ferramentas do jogo — ativado por :hover e :focus-within */
.nav-jogo-dropdown {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-lg);
    padding: 0.375rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
    z-index: 200;
}
.nav-jogo-item:hover .nav-jogo-dropdown,
.nav-jogo-item:focus-within .nav-jogo-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

/* Itens do dropdown de ferramentas */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cor-texto);
    border-radius: var(--raio-sm);
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}
.nav-dropdown-item:hover,
.nav-dropdown-item.ativo {
    background: var(--cor-fundo);
    color: var(--cor-primaria);
}

/* ============================================================
   Painel mobile — nav-mobile
   Hamburguer abre panel; split tap: nome=navegar, ▾=accordion
   ============================================================ */
.nav-mobile {
    display: none;
    position: absolute;
    top: 56px; /* altura de .cabecalho-topo */
    left: 0;
    right: 0;
    background: var(--cor-branco);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-md);
    overflow-y: auto;
    max-height: calc(100vh - 56px);
    z-index: 99;
}
.nav-mobile.aberta { display: block; }

.nav-mobile-lista {
    list-style: none;
    padding: 0.5rem 0;
}

/* Links simples: Início, Conferidor, Blog */
.nav-mobile-link {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cor-texto);
    transition: background var(--transicao), color var(--transicao);
}
.nav-mobile-link:hover,
.nav-mobile-link.ativo {
    background: var(--cor-fundo);
    color: var(--cor-primaria);
}

/* Item de jogo no mobile */
.nav-mobile-jogo-item {
    border-bottom: 1px solid var(--cor-borda);
}
.nav-mobile-jogo-item:first-of-type {
    border-top: 1px solid var(--cor-borda);
}

/* Linha do item: link (tap zone 1) + botão toggle (tap zone 2) */
.nav-mobile-jogo-cabecalho {
    display: flex;
    align-items: stretch;
}

/* Tap zone 1: navega para a página do jogo */
.nav-mobile-jogo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cor-texto);
    transition: color var(--transicao);
}
.nav-mobile-jogo-link:hover,
.nav-mobile-jogo-link.ativo {
    color: var(--cor-primaria);
}

/* Tap zone 2: expande/colapsa ferramentas do jogo */
.nav-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    background: none;
    border: none;
    border-left: 1px solid var(--cor-borda);
    cursor: pointer;
    color: var(--cor-texto-leve);
    transition: background var(--transicao), color var(--transicao);
}
.nav-mobile-toggle:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.nav-seta-icon {
    font-size: 0.7rem;
    display: inline-block;
    transition: transform var(--transicao);
}
.nav-mobile-toggle[aria-expanded="true"] .nav-seta-icon {
    transform: rotate(180deg);
}

/* Submenu de ferramentas (accordion) */
.nav-mobile-dropdown {
    background: #f1f5f9;
    border-top: 1px solid var(--cor-borda);
    padding: 0.25rem 0;
    list-style: none;
}
.nav-mobile-dropdown[hidden] { display: none; }

.nav-mobile-dropdown .nav-dropdown-item {
    padding: 0.625rem 1.25rem 0.625rem 2.75rem;
}

/* Auth no mobile */
.nav-mobile-auth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 2px solid var(--cor-borda);
    margin-top: 0.25rem;
}

/* ---- Desktop (≥ 768px) ---- */
@media (min-width: 768px) {
    .nav-toggle  { display: none; }
    .nav-mobile  { display: none !important; }
    .nav-primaria { display: flex; }
    .nav-jogos   { display: block; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
    color: var(--cor-branco);
    padding: 3rem var(--padding-x);
    text-align: center;
}

.hero-modalidade {
    background: linear-gradient(135deg, var(--cor-modal, var(--cor-primaria)) 0%, color-mix(in srgb, var(--cor-modal, var(--cor-primaria)) 70%, black) 100%);
}

.hero-titulo {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1rem;
}
.hero-titulo .destaque {
    color: var(--cor-destaque);
}

.hero-subtitulo {
    font-size: 1rem;
    opacity: 0.9;
    max-width: 560px;
    margin: 0 auto 1.5rem;
}

.hero-acoes {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .hero { padding: 4.5rem var(--padding-x); }
    .hero-titulo { font-size: 2.5rem; }
    .hero-subtitulo { font-size: 1.125rem; }
}

/* ============================================================
   Botões
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border-radius: var(--raio-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transicao);
    text-align: center;
}

.btn-primario {
    background: var(--cor-destaque);
    color: var(--cor-primaria);
}
.btn-primario:hover {
    background: #40916c;
    color: var(--cor-branco);
}

/* btn-secundario padrão: uso sobre fundo colorido (hero) */
.hero .btn-secundario {
    background: transparent;
    color: var(--cor-branco);
    border-color: rgba(255,255,255,0.7);
}
.hero .btn-secundario:hover {
    background: rgba(255,255,255,0.2);
    border-color: var(--cor-branco);
    color: var(--cor-branco);
}

.btn-lotofacil  { background: var(--cor-lotofacil);  color: #fff; }
.btn-megasena   { background: var(--cor-megasena);   color: #fff; }
.btn-quina      { background: var(--cor-quina);      color: #fff; }
.btn-timemania  { background: var(--cor-timemania);  color: #fff; }
.btn-diadesorte { background: var(--cor-diadesorte); color: #fff; }

.btn-lotofacil:hover  { background: #6d28d9; color: #fff; }
.btn-megasena:hover   { background: #047857; color: #fff; }
.btn-quina:hover      { background: #991b1b; color: #fff; }
.btn-timemania:hover  { background: #b45309; color: #fff; }
.btn-diadesorte:hover { background: #1d4ed8; color: #fff; }

/* ============================================================
   Seções
   ============================================================ */
.secao {
    padding: 2.5rem 0;
}

.secao-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--cor-texto);
}

.secao-subtitulo {
    color: var(--cor-texto-leve);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

@media (min-width: 768px) {
    .secao { padding: 3.5rem 0; }
    .secao-titulo { font-size: 1.875rem; }
}

/* ============================================================
   Grid de Resultados (Home)
   ============================================================ */
.grid-resultados {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 600px) {
    .grid-resultados { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-resultados { grid-template-columns: repeat(3, 1fr); }
}

/* Card de resultado */
.card-resultado {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    border-top: 4px solid var(--cor-modal, var(--cor-primaria));
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transicao), transform var(--transicao);
}
.card-resultado:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1rem 0.5rem;
    gap: 0.5rem;
}

.card-nome {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
}

.card-concurso {
    font-size: 0.75rem;
    color: var(--cor-texto-leve);
    background: var(--cor-fundo);
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    white-space: nowrap;
}

.card-data {
    padding: 0 1rem 0.5rem;
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Container de dezenas */
.dezenas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
}

.dezena {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cor-modal, var(--cor-primaria));
    color: var(--cor-dezena-texto, var(--cor-branco));
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--fonte-mono);
}

/* Dupla Sena — dois sorteios por concurso */
.dupla-sena-sorteios {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.dupla-sorteio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.25rem 1rem;
}

.dupla-sorteio-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 5.5rem;
    flex-shrink: 0;
}

/* 2º sorteio usa o mesmo estilo mas com leve distinção (borda) */
.dezena-sorteio2 {
    background: transparent !important;
    border: 2px solid var(--cor-modal, var(--cor-primaria));
    color: var(--cor-modal, var(--cor-primaria)) !important;
}

/* Trevos (+Milionária) — nos cards de resultado */
.trevos-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.25rem 1rem 0.5rem;
}

.trevos-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.dezena-trevo {
    background: #2a7c34 !important;
    border-radius: 6px !important; /* quadrado para diferenciar das dezenas redondas */
    font-size: 0.8rem !important;
    width: auto !important;
    padding: 0 0.4rem;
    color: #fff !important;
}

/* Time do Coração no gerador (Timemania) */
.time-coracao-secao {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.time-coracao-header {
    margin-bottom: .75rem;
}

.time-coracao-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .2rem;
}

.time-coracao-desc {
    font-size: .85rem;
    color: var(--cor-texto-leve);
}

.time-coracao-controle {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.select-time {
    flex: 1;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: .9rem;
    background: var(--cor-branco);
    color: var(--cor-texto);
    cursor: pointer;
}

.select-time:focus {
    outline: none;
    border-color: var(--cor-primaria);
}

.btn-sortear-time {
    padding: .55rem .9rem;
    border: none;
    border-radius: var(--raio-sm);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--transicao);
}

.btn-sortear-time:hover { opacity: .85; }

.time-selecionado {
    margin-top: .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}

.time-selecionado-label {
    color: var(--cor-texto-leve);
}

.time-selecionado-nome {
    font-weight: 700;
}

/* Badge de time do coração nos cards de jogos gerados */
.jogo-time-coracao {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    padding: .25rem .65rem;
    background: color-mix(in srgb, var(--cor-grid) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-grid) 30%, transparent);
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cor-texto);
}

/* Grade de meses (Dia de Sorte) — barras verticais */
.meses-grade {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .5rem;
    align-items: flex-end;
    height: 140px;
    padding-top: .5rem;
}

.mes-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    height: 100%;
}

.mes-barra-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--cor-borda);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.mes-barra {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height .4s ease;
    min-height: 4px;
}

.mes-abrev {
    font-size: .65rem;
    font-weight: 700;
    color: var(--cor-texto-leve);
}

.mes-freq {
    font-size: .65rem;
    color: var(--cor-texto-leve);
}

@media (max-width: 480px) {
    .meses-grade { grid-template-columns: repeat(6, 1fr); height: 120px; }
}

/* Trevos no gerador */
.trevo-secao {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.trevo-secao-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.25rem;
}

.trevo-contador-wrap {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
}

.trevo-secao-desc {
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
    margin-bottom: 0.75rem;
}

.trevo-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trevo-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--cor-texto);
    transition: all var(--transicao);
}

.trevo-cell:hover {
    border-color: #2a7c34;
    color: #2a7c34;
}

.trevo-cell.selecionado {
    background: #2a7c34;
    border-color: #2a7c34;
    color: #fff;
}

/* Trevos nos cards de jogos gerados */
.jogo-trevo-sep {
    font-weight: 700;
    color: var(--cor-texto-leve);
    margin: 0 0.15rem;
    align-self: center;
}

.jogo-trevo {
    background: #2a7c34 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    width: auto !important;
    padding: 0 0.4rem;
}

/* Badge acumulou */
.badge-acumulou {
    font-size: 0.65rem;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    letter-spacing: 0.05em;
}

/* Campos extras (time, mês) */
.extra-info {
    padding: 0.25rem 1rem;
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
}
.extra-label {
    font-weight: 600;
    color: var(--cor-texto);
    margin-right: 0.25rem;
}

/* Prêmio principal */
.premio-principal {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
    display: flex;
    flex-direction: column;
}
.premio-faixa {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
}

/* Sem dados */
.sem-dados {
    padding: 1rem;
    text-align: center;
    color: var(--cor-texto-leve);
    font-size: 0.875rem;
}
.sem-dados-dica {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    opacity: 0.7;
}

/* Link do card */
.card-link {
    display: block;
    padding: 0.75rem 1rem;
    margin-top: auto;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-modal, var(--cor-primaria));
    border-top: 1px solid var(--cor-borda);
    transition: background var(--transicao);
}
.card-link:hover {
    background: var(--cor-fundo);
}

/* ============================================================
   CTA Section
   ============================================================ */
.secao-cta {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cta-box {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.cta-box h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--cor-primaria);
}
.cta-box p {
    color: var(--cor-texto-leve);
    margin-bottom: 1.5rem;
}
.cta-botoes {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   Lista de Concursos (Modalidade)
   ============================================================ */
.lista-concursos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.concurso-item {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    padding: 1rem;
    border-left: 4px solid var(--cor-modal, var(--cor-primaria));
}

.concurso-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.concurso-numero {
    font-weight: 700;
    font-size: 0.9rem;
}

.concurso-data {
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
}

/* ============================================================
   Avisos e Erros
   ============================================================ */
.aviso {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--raio-sm);
    padding: 1rem 1.25rem;
    color: #92400e;
    font-size: 0.9rem;
}

.secao-erro .erro-box {
    text-align: center;
    padding: 4rem 1rem;
}
.secao-erro h1 {
    font-size: 5rem;
    font-weight: 900;
    color: var(--cor-borda);
    line-height: 1;
    margin-bottom: 1rem;
}

/* ============================================================
   Rodapé
   ============================================================ */
.rodape {
    background: #111827;
    color: #9ca3af;
    padding: 2.5rem 0 1.5rem;
    margin-top: auto;
}

.rodape-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .rodape-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.rodape-marca p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 0.75rem;
    max-width: 280px;
}

.rodape-links h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f9fafb;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rodape-links a {
    display: block;
    font-size: 0.875rem;
    color: #9ca3af;
    padding: 0.2rem 0;
    transition: color var(--transicao);
}
.rodape-links a:hover { color: #f9fafb; }

.rodape-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 1.5rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aviso-legal {
    color: #6b7280;
}


/* ============================================================
   Grid de dezenas clicável (gerador + conferidor)
   ============================================================ */
.grid-dezenas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1.9rem, 1fr));
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.num-cell {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--fonte-mono);
    border: 2px solid var(--cor-borda);
    background: var(--cor-branco);
    color: var(--cor-texto);
    cursor: pointer;
    transition: all var(--transicao);
    user-select: none;
    line-height: 1;
    padding: 0;
}

.grid-dezenas--interativo .num-cell:hover {
    border-color: var(--cor-grid, var(--cor-primaria));
    color: var(--cor-grid, var(--cor-primaria));
    transform: scale(1.1);
}

.num-cell.selecionado {
    background: var(--cor-grid, var(--cor-primaria));
    border-color: var(--cor-grid, var(--cor-primaria));
    color: var(--cor-branco);
    transform: scale(1.05);
}

.num-cell.acerto {
    background: #16a34a;
    border-color: #16a34a;
    color: var(--cor-branco);
}

.num-cell.erro {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #9ca3af;
}

.num-cell:disabled {
    cursor: default;
}

@media (min-width: 480px) {
    .grid-dezenas { grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); }
    .num-cell { font-size: 0.76rem; }
}

@keyframes piscaBolinha {
    0%, 100% {
        background: var(--cor-grid, var(--cor-primaria));
        border-color: var(--cor-grid, var(--cor-primaria));
        color: var(--cor-branco);
        transform: scale(1.1);
    }
    50% {
        background: var(--cor-branco);
        border-color: var(--cor-grid, var(--cor-primaria));
        color: var(--cor-grid, var(--cor-primaria));
        transform: scale(0.92);
        opacity: 0.5;
    }
}

.num-cell.gerando {
    animation: piscaBolinha 0.9s ease-in-out infinite;
}

/* ============================================================
   Super Sete — grid de colunas (volante)
   ============================================================ */

/* Wrapper do volante — linha horizontal de colunas */
.grid-supersete {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    justify-content: center;
    padding: 0.75rem 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.grid-supersete-col,
.ss-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 2.6rem;
}

/* Cabeçalho da coluna (número 1–7) — quadrado escuro para distinguir de bolinha sorteada */
.ss-col-header {
    width: 2.4rem;
    height: 2.4rem;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* Botão de dígito */
.ss-cell {
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.grid-supersete--interativo .ss-cell:hover {
    border-color: var(--cor-grid, #A8B400);
    color: var(--cor-grid, #A8B400);
    background: rgba(168, 180, 0, 0.06);
}

.ss-cell.selecionado {
    background: var(--cor-grid, #A8B400);
    border-color: var(--cor-grid, #A8B400);
    color: #1f2937;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Estado: acerto no conferidor */
.ss-cell.acerto {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* Estado: marcado mas não acertou (modo resultado) */
.ss-cell.marcado {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #6b7280;
}

/* Coluna que acertou ganha destaque sutil */
.ss-coluna--acerto .ss-col-header {
    background: #16a34a;
}

.ss-cell:disabled { cursor: default; }

/* Responsivo: reduz célula em telas muito pequenas */
@media (max-width: 360px) {
    .ss-col-header,
    .ss-cell { width: 2rem; height: 2rem; font-size: 0.75rem; }
    .ss-coluna { gap: 0.2rem; min-width: 2.1rem; }
    .grid-supersete { gap: 0.2rem; }
}

/* ============================================================
   Super Sete — card de jogo gerado
   ============================================================ */

/* Volante compacto nos cards de resultado */
.jogo-supersete-volante {
    display: flex;
    gap: 0.3rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    justify-content: center;
}

.jogo-ss-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.jogo-ss-col-header {
    width: 1.8rem;
    height: 1.8rem;
    background: #1f2937;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.jogo-ss-digito {
    width: 1.8rem;
    height: 1.8rem;
    background: var(--cor-grid, #A8B400);
    color: #1f2937;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Resultados: exibir Super Sete com layout de colunas */
.dezenas-supersete {
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: flex-start;
    padding: 0.25rem 0;
}

.dezena-ss-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.dezena-ss-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
}

/* Gerador full-width (sem sidebar) para Super Sete */
.gerador-layout--full {
    display: block;
    max-width: 820px;
    margin: 0 auto;
}

/* Compartilhado: colunas lado a lado */
.jogo-comp-col {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 0.3rem 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    gap: 0.15rem;
    min-width: 2.2rem;
}

.jogo-comp-col-label {
    font-size: 0.6rem;
    color: var(--cor-texto-leve);
    font-weight: 600;
}

/* ============================================================
   Gerador de jogos
   ============================================================ */
.gerador-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 900px) {
    .gerador-layout { grid-template-columns: 1fr 280px; }
}

.gerador-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gerador-contador {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cor-primaria);
    white-space: nowrap;
    flex-shrink: 0;
}

.gerador-contador #contadorAtual { color: var(--cor-texto); }

.contador-label {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
    margin-left: 0.15rem;
}

.gerador-aviso {
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--raio-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.aviso-todos-travados {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: var(--raio-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.83rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.select-qtd:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gerador-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.gerador-acoes-esquerda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.label-qtd {
    font-size: 0.875rem;
    color: var(--cor-texto-leve);
    font-weight: 500;
}

.select-qtd {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 0.875rem;
    background: var(--cor-branco);
    color: var(--cor-texto);
    cursor: pointer;
}

.btn-gerar {
    color: var(--cor-branco);
    border: none;
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
}
.btn-gerar:hover { filter: brightness(0.9); color: var(--cor-branco); }

.btn-limpar {
    background: var(--cor-fundo);
    color: var(--cor-texto-leve);
    border: 1px solid var(--cor-borda);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}
.btn-limpar:hover {
    background: var(--cor-borda);
    color: var(--cor-texto);
}

/* Jogos gerados */
.jogos-gerados { margin-top: 1.5rem; }

.jogos-gerados-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--cor-texto);
}

.lista-jogos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.jogo-card {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-left: 4px solid var(--cor-grid, var(--cor-primaria));
}

.jogo-card-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    min-width: 3rem;
}

.jogo-card-dezenas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
}

.jogo-dezena {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--cor-grid, var(--cor-primaria));
    color: var(--cor-branco);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--fonte-mono);
}

.btn-compartilhar {
    background: transparent;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--cor-texto-leve);
    cursor: pointer;
    transition: all var(--transicao);
    white-space: nowrap;
}
.btn-compartilhar:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}
.btn-compartilhar.copiado {
    background: #d1fae5;
    border-color: #16a34a;
    color: #16a34a;
}

.jogos-gratuitos-aviso {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
}

.link-premium { color: var(--cor-lotofacil); font-weight: 600; }

/* Jogo compartilhado via URL */
.jogo-compartilhado-aviso {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-radius: var(--raio-md);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    border-left: 4px solid var(--cor-lotofacil);
}

.jogo-compartilhado-aviso p:first-child {
    font-weight: 600;
    color: #4c1d95;
    margin-bottom: 0.25rem;
}

.jogo-compartilhado-nums {
    font-family: var(--fonte-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-lotofacil);
    letter-spacing: 0.05em;
}

/* ============================================================
   Filtros Premium (sidebar do gerador)
   ============================================================ */
.filtros-premium {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    padding: 1.25rem;
    border: 1px solid var(--cor-borda);
    position: sticky;
    top: 80px;
}

.filtros-premium-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.filtros-premium-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    flex: 1;
}

.filtros-premium-icone { font-size: 1.1rem; }

.badge-premium {
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.filtros-premium-desc {
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.filtro-item {
    margin-bottom: 0.9rem;
}

.filtro-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.3rem;
}

.filtro-icone-lock { font-size: 0.75rem; opacity: 0.6; }

.filtro-controle select,
.filtro-controle input {
    width: 100%;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 0.82rem;
    background: var(--cor-fundo);
    color: var(--cor-texto-leve);
    opacity: 0.6;
    cursor: not-allowed;
}

.filtro-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filtro-range input { flex: 1; }
.filtro-range span { color: var(--cor-texto-leve); font-size: 0.8rem; }

.filtro-bloqueado { position: relative; cursor: pointer; }
.filtro-bloqueado:hover .filtro-label { color: var(--cor-lotofacil); }

.btn-desbloquear {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: var(--raio-sm);
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 1rem;
    transition: filter var(--transicao);
}
.btn-desbloquear:hover { filter: brightness(1.1); color: white; }

/* ============================================================
   Seção Premium
   ============================================================ */
.secao-premium {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    color: white;
}

.premium-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .premium-banner { grid-template-columns: 1fr auto; }
}

.premium-banner-texto h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.premium-banner-texto p {
    opacity: 0.85;
    margin-bottom: 1rem;
}

.premium-lista {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 1rem;
}

.premium-lista li {
    font-size: 0.875rem;
    opacity: 0.9;
}

.premium-banner-cta {
    text-align: center;
    background: rgba(255,255,255,0.08);
    border-radius: var(--raio-lg);
    padding: 1.5rem;
    min-width: 180px;
}

.premium-preco {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.premium-valor {
    font-size: 2rem;
    font-weight: 900;
}

.premium-periodo {
    font-size: 1rem;
    opacity: 0.75;
}

.premium-alt {
    font-size: 0.78rem;
    opacity: 0.65;
    margin-bottom: 1rem;
}

.btn-premium {
    display: inline-block;
    background: white;
    color: #312e81;
    font-weight: 700;
    padding: 0.65rem 1.5rem;
    border-radius: var(--raio-sm);
    transition: all var(--transicao);
}
.btn-premium:hover {
    background: #e0e7ff;
    color: #312e81;
}

/* ============================================================
   Modal Premium
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-caixa {
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    padding: 2rem 1.5rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: var(--sombra-lg);
}

.modal-fechar {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--cor-texto-leve);
    cursor: pointer;
    line-height: 1;
}
.modal-fechar:hover { color: var(--cor-texto); }

.modal-icone { font-size: 2.5rem; margin-bottom: 0.5rem; }

.modal-caixa h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.modal-caixa p {
    color: var(--cor-texto-leve);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.modal-preco {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cor-lotofacil);
    margin-bottom: 1rem;
}

.modal-continuar {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    background: none;
    border: none;
    color: var(--cor-texto-leve);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

/* ============================================================
   Conferidor
   ============================================================ */
.conferidor-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 900px) {
    .conferidor-layout { grid-template-columns: 1fr 1fr; align-items: start; }
}

.aviso-erro {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
    margin-bottom: 1rem;
}

.conferidor-form { display: flex; flex-direction: column; gap: 0; }

.form-passo {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--cor-borda);
}

.form-passo:last-of-type { border-bottom: none; }

.passo-num {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.passo-corpo { flex: 1; }

.passo-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.4rem;
}

.passo-sublabel {
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
    margin-bottom: 0.75rem;
}

.form-select,
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 0.9rem;
    color: var(--cor-texto);
    background: var(--cor-branco);
    transition: border-color var(--transicao);
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
}

.contador-inline {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
}

.btn-conferir {
    background: var(--cor-primaria);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: var(--raio-sm);
    cursor: pointer;
    margin-top: 1.5rem;
    transition: all var(--transicao);
}

.btn-conferir:hover:not(:disabled) { background: var(--cor-secundaria); }

.btn-conferir:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--cor-borda);
    color: var(--cor-texto);
    padding: 0.55rem 1.25rem;
    border-radius: var(--raio-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transicao);
}
.btn-outline:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

/* Resultado do conferidor */
.resultado-card {
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-md);
    overflow: hidden;
    border-top: 5px solid var(--cor-res, var(--cor-primaria));
}

.resultado-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--cor-fundo);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cor-borda);
}

.resultado-modalidade {
    font-weight: 700;
    color: var(--cor-res, var(--cor-primaria));
}

.resultado-concurso {
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
}

.resultado-data {
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
    margin-left: auto;
}

.resultado-placar {
    text-align: center;
    padding: 1.5rem 1.25rem 1rem;
}

.placar-numero {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--cor-res, var(--cor-primaria));
    line-height: 1;
}

.placar-texto {
    display: block;
    font-size: 0.9rem;
    color: var(--cor-texto-leve);
    margin-top: 0.25rem;
}

.resultado-secao {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--cor-borda);
}

.resultado-secao-titulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.legenda-resultado {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.legenda-acerto { color: #16a34a; font-weight: 600; }
.legenda-erro   { color: #9ca3af; font-weight: 600; }

.resultado-premio {
    padding: 1.25rem;
    text-align: center;
    border-top: 1px solid var(--cor-borda);
}

.resultado-premiado  { }
.resultado-sem-premio { }
.resultado-perfeito  .resultado-placar .placar-numero { color: #d97706; }

/* Subtexto do placar (Dupla Sena "melhor sorteio") */
.placar-subtexto {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
    margin-top: 0.2rem;
}

/* Sorteio com melhor resultado na Dupla Sena */
.dupla-sorteio--melhor {
    background: color-mix(in srgb, var(--cor-modal) 8%, transparent);
    border-radius: var(--raio-sm);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Badge de acertos por sorteio no conferidor */
.dupla-acertos-badge {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0 0.3rem;
    vertical-align: middle;
}

/* Dezena com acerto no conferidor — anel verde */
.dezena--acerto-conferidor {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.com-premio { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }

.premio-icone { font-size: 2rem; margin-bottom: 0.5rem; }

.premio-faixa-desc {
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
    margin-bottom: 0.25rem;
}

.premio-valor-conf {
    font-size: 1.5rem;
    font-weight: 900;
    color: #16a34a;
    margin-bottom: 0.25rem;
}

.premio-ganhadores {
    font-size: 0.82rem;
    color: var(--cor-texto-leve);
}

.resultado-acoes {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--cor-borda);
}

/* ============================================================
   Página de modalidade — melhorias
   ============================================================ */
.secao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.btn-mod {
    background: var(--cor-mod, var(--cor-primaria));
    color: white;
    border: none;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}
.btn-mod:hover { filter: brightness(0.9); color: white; }

.concurso-premio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--cor-borda);
    margin-top: 0.5rem;
}

.premio-desc {
    font-size: 0.78rem;
    color: var(--cor-texto-leve);
}

.premio-valor-lista {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
}

.premio-ganhadores-lista {
    font-size: 0.78rem;
    color: var(--cor-texto-leve);
    margin-left: auto;
}

/* ============================================================
   Paginação
   ============================================================ */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pag-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--raio-sm);
    border: 1px solid var(--cor-borda);
    font-size: 0.875rem;
    color: var(--cor-texto);
    background: var(--cor-branco);
    transition: all var(--transicao);
    text-decoration: none;
}
.pag-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.pag-btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.pag-numeros {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--raio-sm);
    border: 1px solid var(--cor-borda);
    font-size: 0.875rem;
    color: var(--cor-texto);
    background: var(--cor-branco);
    transition: all var(--transicao);
    text-decoration: none;
}
.pag-num:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.pag-num--atual {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-branco);
    font-weight: 700;
}

.pag-ellipsis {
    color: var(--cor-texto-leve);
    font-size: 0.875rem;
    padding: 0 0.15rem;
}

/* ============================================================
   Páginas estáticas (termos, privacidade)
   ============================================================ */
.pagina-estatica {
    max-width: 720px;
    margin: 0 auto;
}

.pagina-estatica h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: var(--cor-texto);
}

.pagina-data {
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
    margin-bottom: 2rem;
}

.pagina-estatica h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: var(--cor-texto);
}

.pagina-estatica p {
    color: var(--cor-texto-leve);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.pagina-aviso-jogo {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #fef3c7;
    border-radius: var(--raio-sm);
    font-size: 0.875rem;
    color: #92400e;
    line-height: 1.5;
}

/* ============================================================
   Nav: usuário logado e auth (estilos compartilhados mobile/desktop)
   ============================================================ */
.nav-usuario-nome {
    font-size: 0.875rem;
    color: var(--cor-texto-leve);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.nav-sair {
    font-size: 0.8rem;
    color: var(--cor-texto-leve);
}
.nav-sair:hover { color: var(--cor-quina); }

.nav-link-auth {
    font-size: 0.875rem;
    color: var(--cor-texto-leve);
}
.nav-link-auth:hover { color: var(--cor-primaria); }

.badge-premium {
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ============================================================
   Botões auxiliares
   ============================================================ */
.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.btn-bloco {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   Auth — formulários de login e registro
   ============================================================ */
.auth-section {
    display: flex;
    align-items: flex-start;
    padding: 3rem 0 4rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    padding: 2rem 2rem 1.5rem;
}

.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-titulo {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cor-texto);
    margin-bottom: 0.25rem;
}

.auth-subtitulo {
    font-size: 0.9rem;
    color: var(--cor-texto-leve);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-form.recolhido {
    display: none !important;
}

.campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campo-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.campo-dica {
    font-weight: 400;
    color: var(--cor-texto-leve);
    font-size: 0.8rem;
}

.campo-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 0.95rem;
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background: var(--cor-branco);
    transition: border-color var(--transicao), box-shadow var(--transicao);
    outline: none;
}
.campo-input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26,71,42,.12);
}
.campo-input::placeholder { color: var(--cor-texto-leve); opacity: .7; }

.auth-termos {
    font-size: 0.78rem;
    color: var(--cor-texto-leve);
    text-align: center;
    line-height: 1.5;
}

.auth-rodape {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--cor-texto-leve);
    border-top: 1px solid var(--cor-borda);
    padding-top: 1rem;
}

/* OAuth — botões sociais */
.oauth-opcoes {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: var(--raio-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--cor-borda);
    background: #fff;
    color: #3c4043;
    transition: background 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.btn-oauth:hover {
    background: #f8f8f8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.btn-oauth-email {
    color: var(--cor-texto);
    background: var(--cor-fundo-alt, #f9fafb);
}

.btn-oauth-email:hover {
    background: #f1f5f9;
}

.oauth-separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--cor-texto-leve);
    font-size: 0.8125rem;
}

.oauth-separador::before,
.oauth-separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cor-borda);
}

/* Alertas */
.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--raio-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.alerta-erro {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.alerta-sucesso {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    margin: 0.75rem 0;
}

/* ============================================================
   Estatísticas
   ============================================================ */
.stats-pagina { padding: 1.5rem 0 3rem; }

.stats-header { margin-bottom: 1.5rem; }
.stats-titulo { font-size: 1.75rem; font-weight: 700; margin-bottom: .25rem; }
.stats-subtitulo { color: var(--cor-texto-leve); font-size: .9rem; }

/* Abas */
.stats-abas {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: .5rem;
}

.stats-aba {
    padding: .45rem 1rem;
    border: none;
    background: none;
    border-radius: var(--raio-sm) var(--raio-sm) 0 0;
    font-size: .875rem;
    font-family: var(--fonte-principal);
    cursor: pointer;
    color: var(--cor-texto-leve);
    transition: color var(--transicao), background var(--transicao);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.stats-aba:hover { color: var(--cor-texto); background: var(--cor-borda); }
.stats-aba.ativo {
    color: var(--cor-modal, var(--cor-primaria));
    font-weight: 600;
    border-bottom: 2px solid var(--cor-modal, var(--cor-primaria));
    margin-bottom: -2px;
}
.stats-aba.bloqueado { opacity: .7; }
.cadeado { font-size: .75rem; }

/* Cards */
.stats-card {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.stats-card-titulo { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.stats-descricao { font-size: .85rem; color: var(--cor-texto-leve); margin-bottom: 1rem; line-height: 1.5; }
.stats-sub-titulo { font-size: .9rem; font-weight: 600; margin: 1.25rem 0 .75rem; }
.stats-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.stats-vazio { padding: 2rem; text-align: center; color: var(--cor-texto-leve); }

/* Grade de frequência */
.freq-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .5rem;
    margin-top: .5rem;
}
.freq-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}
.freq-bolinha {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
}
.freq-barra-wrap {
    width: 100%;
    height: 4px;
    background: var(--cor-borda);
    border-radius: 2px;
    overflow: hidden;
}
.freq-barra {
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
    transition: width .3s;
}
.freq-pct { font-size: .65rem; color: var(--cor-texto-leve); }

/* Ranking */
.ranking-lista { display: flex; flex-direction: column; gap: .45rem; }
.ranking-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.ranking-pos { width: 2rem; text-align: right; color: var(--cor-texto-leve); font-size: .8rem; }
.ranking-bolinha {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .75rem; flex-shrink: 0;
}
.ranking-freq { font-weight: 600; }
.ranking-pct { color: var(--cor-texto-leve); font-size: .8rem; }

/* Atraso */
.atraso-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: .4rem;
    margin-top: .5rem;
}
.atraso-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .4rem .2rem;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo);
    position: relative;
}
.atraso-item--alerta { background: #fff1f1; }
.atraso-item--zerado { background: #f0fdf4; }
.atraso-dezena {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--cor-borda);
    font-size: .75rem; font-weight: 700;
}
.atraso-valor { font-size: .75rem; font-weight: 600; color: var(--cor-texto); }
.atraso-flag { font-size: .65rem; position: absolute; top: 2px; right: 2px; }
.badge-alerta {
    font-size: .65rem;
    background: #b91c1c;
    color: #fff;
    padding: .1rem .35rem;
    border-radius: 10px;
}

/* Temperatura */
.temp-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: .4rem;
    margin-top: .75rem;
}
.temp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .45rem .2rem;
    border-radius: var(--raio-sm);
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}
.temp-item--quente { background: #dc2626; }
.temp-item--media  { background: #6b7280; }
.temp-item--fria   { background: #2563eb; }
.temp-freq { font-size: .65rem; font-weight: 400; opacity: .9; }
.temp-legenda { margin: 0 .25rem; font-size: .8rem; }
.temp-legenda.quente { color: #dc2626; }
.temp-legenda.media  { color: #6b7280; }
.temp-legenda.fria   { color: #2563eb; }

/* Paridade */
.paridade-resumo {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
}
.paridade-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.paridade-valor { font-size: 1.5rem; font-weight: 700; color: var(--cor-texto); }
.paridade-label { font-size: .75rem; color: var(--cor-texto-leve); }
.paridade-stat.destaque .paridade-valor { color: var(--cor-modal, var(--cor-primaria)); }
.paridade-tabela-wrap { overflow-x: auto; }
.paridade-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.paridade-tabela th { text-align: left; padding: .5rem .75rem; border-bottom: 2px solid var(--cor-borda); font-size: .8rem; color: var(--cor-texto-leve); }
.paridade-tabela td { padding: .45rem .75rem; border-bottom: 1px solid var(--cor-borda); }
.barra-inline { height: 8px; border-radius: 4px; min-width: 2px; }

/* Soma */
.soma-resumo {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
}
.soma-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.soma-valor { font-size: 1.5rem; font-weight: 700; }
.soma-label { font-size: .75rem; color: var(--cor-texto-leve); }
.faixas-lista { display: flex; flex-direction: column; gap: .6rem; }
.faixa-item {
    display: grid;
    grid-template-columns: max-content 1fr 90px;
    align-items: center;
    gap: .75rem;
    padding: .35rem 0;
}
.faixa-item--destaque .faixa-nome { font-weight: 700; color: var(--cor-modal, var(--cor-primaria)); }
.faixa-nome { font-size: .85rem; white-space: nowrap; }
.faixa-barra-wrap { background: var(--cor-borda); border-radius: 4px; height: 10px; overflow: hidden; }
.faixa-barra { height: 100%; border-radius: 4px; min-width: 2px; transition: width .4s; }
.faixa-info { font-size: .8rem; color: var(--cor-texto-leve); text-align: right; white-space: nowrap; }

/* Bloqueio premium */
.bloqueio-premium {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
}
.bloqueio-icone { font-size: 2.5rem; margin-bottom: .75rem; }
.bloqueio-titulo { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.bloqueio-descricao { color: var(--cor-texto-leve); margin-bottom: 1.5rem; }
.bloqueio-acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Responsivo */
@media (max-width: 600px) {
    .stats-grid-2 { grid-template-columns: 1fr; }
    .freq-grade { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
    .faixa-item { grid-template-columns: max-content 1fr 70px; }
    .paridade-resumo, .soma-resumo { gap: 1rem; }
}

/* btn-secundario (usado no bloqueio premium) */
.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.4rem;
    border-radius: var(--raio-sm);
    font-size: .9rem;
    font-weight: 600;
    font-family: var(--fonte-principal);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
    text-decoration: none;
    border: 2px solid var(--cor-primaria);
    color: var(--cor-primaria);
    background: transparent;
}
.btn-secundario:hover {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

/* ============================================================
   Filtros premium ativos (sidebar do gerador)
   ============================================================ */
.filtros-ativos .filtros-premium-header { border-bottom: none; }

.filtro-input {
    width: 100%;
    padding: .5rem .7rem;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: .875rem;
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background: var(--cor-branco);
    transition: border-color var(--transicao);
    outline: none;
}
.filtro-input:focus { border-color: var(--cor-primaria); }

.filtro-dica {
    font-size: .72rem;
    color: var(--cor-texto-leve);
    margin-top: .2rem;
    line-height: 1.4;
}

.btn-limpar-filtros {
    width: 100%;
    margin-top: .5rem;
    padding: .45rem;
    background: none;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: .8rem;
    color: var(--cor-texto-leve);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
    font-family: var(--fonte-principal);
}
.btn-limpar-filtros:hover { background: var(--cor-borda); color: var(--cor-texto); }

/* Página de planos (rota /planos — stub) */
.planos-secao { padding: 3rem 0; text-align: center; }
.planos-secao h1 { font-size: 2rem; margin-bottom: 1rem; }
.planos-secao p { color: var(--cor-texto-leve); }

/* ============================================================
   Fechamentos
   ============================================================ */
.fechamento-pagina { padding: 1.5rem 0 3rem; }

.fech-grade {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0;
}

.fech-bolinha {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--cor-borda);
    background: var(--cor-branco);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
}
.fech-bolinha:hover { border-color: var(--cor-modal, var(--cor-primaria)); }
.fech-bolinha.selecionado { border-color: var(--cor-modal, var(--cor-primaria)); }

.fech-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .875rem;
    color: var(--cor-texto-leve);
    margin-top: .5rem;
    flex-wrap: wrap;
}

#fechPreview { font-weight: 600; color: var(--cor-texto); }

.fech-resumo {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    margin-bottom: 1rem;
}
.fech-resumo-item { display: flex; flex-direction: column; align-items: center; }
.fech-resumo-val { font-size: 1.5rem; font-weight: 700; }
.fech-resumo-label { font-size: .75rem; color: var(--cor-texto-leve); }

.fech-dezenas-usadas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .75rem;
}
.fech-tag {
    padding: .15rem .45rem;
    border-radius: 4px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.fech-acoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }

.fech-lista {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 600px;
    overflow-y: auto;
}
.fech-jogo {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .35rem 0;
    border-bottom: 1px solid var(--cor-borda);
}
.fech-jogo:last-child { border-bottom: none; }
.fech-jogo-num { font-size: .75rem; color: var(--cor-texto-leve); min-width: 2.5rem; text-align: right; }
.fech-jogo-dezena {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

/* ============================================================
   Simulador
   ============================================================ */
.simulador-pagina { padding: 1.5rem 0 3rem; }

.sim-grade-wrap { margin: 1rem 0; }

.sim-resultado-tabela-wrap { overflow-x: auto; margin-top: 1rem; }
.sim-resultado-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sim-resultado-tabela th { text-align: left; padding: .5rem .75rem; border-bottom: 2px solid var(--cor-borda); color: var(--cor-texto-leve); font-size: .8rem; }
.sim-resultado-tabela td { padding: .45rem .75rem; border-bottom: 1px solid var(--cor-borda); }
.sim-resultado-tabela tr.destaque td { font-weight: 700; background: #f0fdf4; }

.sim-resumo {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    margin-bottom: 1rem;
}
.sim-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.sim-val { font-size: 1.5rem; font-weight: 700; }
.sim-label { font-size: .75rem; color: var(--cor-texto-leve); }

.sim-grafico { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.sim-barra-item {
    display: grid;
    grid-template-columns: 90px 1fr 70px;
    align-items: center;
    gap: .75rem;
}
.sim-barra-label { font-size: .85rem; }
.sim-barra-wrap { background: var(--cor-borda); border-radius: 4px; height: 12px; overflow: hidden; }
.sim-barra { height: 100%; border-radius: 4px; min-width: 2px; transition: width .4s; }
.sim-barra-qtd { font-size: .8rem; color: var(--cor-texto-leve); text-align: right; }

/* Seções de elementos especiais no simulador (trevos / mês / time) */
.sim-extra-secao {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.sim-extra-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sim-extra-contador {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cor-texto-leve);
}

.sim-extra-desc {
    font-size: 0.85rem;
    color: var(--cor-texto-leve);
    margin-bottom: 0.75rem;
}

/* Grid de trevos no simulador — mesmo visual do gerador */
.sim-trevo-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sim-trevo-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--cor-texto);
    transition: all var(--transicao);
}

.sim-trevo-cell:hover {
    border-color: #2a7c34;
    color: #2a7c34;
}

.sim-trevo-cell.selecionado {
    background: #2a7c34;
    border-color: #2a7c34;
    color: #fff;
}

/* Select de mês / time */
.sim-select-wrap {
    display: flex;
    gap: 0.5rem;
}

.sim-select {
    flex: 1;
    max-width: 360px;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 0.9rem;
    background: var(--cor-branco);
    color: var(--cor-texto);
    cursor: pointer;
}

.sim-select:focus {
    outline: none;
    border-color: var(--cor-modal, var(--cor-primaria));
}

/* Área de ações do formulário do simulador */
.sim-acoes {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.sim-contador-texto {
    font-size: 0.875rem;
    color: var(--cor-texto-leve);
}

/* Jogo simulado exibido no bloco de resultado */
.sim-jogo-simulado {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    margin-bottom: 1rem;
}

.sim-jogo-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   Semana 4 — Planos, Pagamento, Painel do Usuário
   ============================================================ */

/* --- Página de Planos --- */
.planos-hero {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
    color: white;
    padding: 3rem 1rem;
    text-align: center;
}
.planos-hero h1 { font-size: 2rem; margin-bottom: .5rem; }
.planos-hero-subtitulo { font-size: 1.1rem; opacity: .9; }

.planos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .planos-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.plano-card {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.plano-card-destaque {
    border: 2px solid var(--cor-primaria);
    transform: scale(1.02);
    box-shadow: var(--sombra-lg);
}
@media (max-width: 767px) { .plano-card-destaque { transform: none; } }

.plano-badge-topo {
    background: var(--cor-primaria);
    color: white;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    padding: .35rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.plano-card-topo { padding: 1.5rem; text-align: center; }
.plano-nome { font-size: 1.25rem; color: var(--cor-texto-leve); margin-bottom: .75rem; }
.plano-preco { display: flex; align-items: baseline; justify-content: center; gap: .25rem; }
.plano-preco-valor { font-size: 2.25rem; font-weight: 800; color: var(--cor-primaria); }
.plano-preco-periodo { font-size: .9rem; color: var(--cor-texto-leve); }
.plano-economia { font-size: .8rem; color: var(--cor-destaque); margin-top: .4rem; font-weight: 600; }
.plano-economia-ouro { color: #d97706; }

.plano-lista {
    padding: 0 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.plano-lista li { font-size: .9rem; color: var(--cor-texto); }

.plano-rodape { padding: 0 1.5rem 1.5rem; }
.btn-bloco { width: 100%; text-align: center; justify-content: center; }
.btn-desabilitado { opacity: .5; cursor: not-allowed; pointer-events: none; }

.planos-obs {
    text-align: center;
    margin-top: 2rem;
    font-size: .9rem;
    color: var(--cor-texto-leve);
    line-height: 1.8;
}

.comparacao-tabela-wrap { overflow-x: auto; }
.comparacao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.comparacao-tabela th,
.comparacao-tabela td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
    text-align: center;
}
.comparacao-tabela th:first-child,
.comparacao-tabela td:first-child { text-align: left; }
.col-premium { background: #f0fdf4; font-weight: 600; color: var(--cor-primaria); }
.comparacao-tabela thead th { background: var(--cor-fundo); font-weight: 700; }

.planos-aviso-legal {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--raio-md);
    padding: 1rem 1.5rem;
    font-size: .875rem;
    color: #78350f;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Página de Pagamento (QR Code) --- */
.pagamento-wrap {
    max-width: 520px;
    margin: 2rem auto;
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    padding: 2rem;
}
.pagamento-cabecalho { text-align: center; margin-bottom: 1.5rem; }
.pagamento-icone { font-size: 2.5rem; margin-bottom: .5rem; }
.pagamento-cabecalho h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.pagamento-cabecalho p { color: var(--cor-texto-leve); font-size: .9rem; }

.pagamento-resumo {
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.pagamento-resumo-item { display: flex; flex-direction: column; gap: .1rem; }
.pagamento-resumo-label { font-size: .75rem; color: var(--cor-texto-leve); text-transform: uppercase; }
.pagamento-resumo-valor { font-weight: 600; }
.pagamento-resumo-valor.destaque { color: var(--cor-primaria); font-size: 1.2rem; font-weight: 800; }

.pagamento-status {
    border-radius: var(--raio-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.pagamento-status-pendente,
.pagamento-status-aprovado,
.pagamento-status-rejeitado {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pagamento-status-pendente { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--raio-sm); padding: .75rem 1rem; }
.pagamento-status-aprovado { color: #065f46; background: #d1fae5; border: 1px solid #6ee7b7; border-radius: var(--raio-sm); padding: .75rem 1rem; }
.pagamento-status-rejeitado { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; border-radius: var(--raio-sm); padding: .75rem 1rem; }

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.pulsando {
    animation: pulsar 1.5s ease-in-out infinite;
}
@keyframes pulsar {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.8); }
}

.pagamento-qr { text-align: center; margin-bottom: 1.5rem; }
.qr-imagem {
    border: 6px solid white;
    box-shadow: var(--sombra-md);
    border-radius: var(--raio-sm);
    display: inline-block;
}
.qr-instrucao { font-size: .85rem; color: var(--cor-texto-leve); margin-top: .75rem; }

.pagamento-copia-cola { margin-bottom: 1.25rem; }
.copia-cola-label { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.copia-cola-group { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 480px) { .copia-cola-group { flex-direction: row; align-items: flex-start; } }
.copia-cola-input {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: .8rem;
    font-family: var(--fonte-mono);
    resize: none;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.4;
}
.btn-sucesso { background: #059669 !important; color: white !important; }

.pagamento-aviso {
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    padding: .75rem 1rem;
    font-size: .8rem;
    color: var(--cor-texto-leve);
    text-align: center;
    margin-top: 1.5rem;
    line-height: 1.6;
}

.link-externo { color: var(--cor-primaria); text-decoration: underline; font-size: .875rem; }

/* --- Config / Sem credenciais --- */
.aviso-config-wrap {
    max-width: 640px;
    margin: 2rem auto;
    text-align: center;
}
.aviso-config-icone { font-size: 3rem; margin-bottom: 1rem; }
.aviso-config-subtitulo { color: var(--cor-texto-leve); margin: .5rem 0 2rem; }
.aviso-config-box {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    padding: 1.5rem;
    text-align: left;
}
.aviso-config-box h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.aviso-config-passos { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; line-height: 1.6; }
.aviso-config-code {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: var(--raio-sm);
    padding: .75rem 1rem;
    font-size: .8rem;
    overflow-x: auto;
    margin-top: .5rem;
    font-family: var(--fonte-mono);
    white-space: pre;
}

/* --- Painel do Usuário --- */
.painel-cabecalho {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
}
.painel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.painel-cabecalho-info h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.painel-email { font-size: .875rem; color: var(--cor-texto-leve); margin-bottom: .4rem; }
.badge-lg { font-size: .9rem; padding: .25rem .75rem; }
.badge-gratuito {
    background: #f3f4f6;
    color: var(--cor-texto-leve);
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-weight: 600;
}

.painel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 900px) {
    .painel-grid { grid-template-columns: 300px 1fr; align-items: start; }
}

.painel-coluna-lateral,
.painel-coluna-principal { display: flex; flex-direction: column; gap: 1.5rem; }

.painel-card { padding: 1.5rem; }
.painel-card-titulo { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--cor-texto); }
.painel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.badge-contagem {
    background: var(--cor-fundo);
    color: var(--cor-texto-leve);
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    border: 1px solid var(--cor-borda);
}

.assinatura-ativa { display: flex; flex-direction: column; gap: .5rem; }
.assinatura-plano-nome { font-size: 1rem; font-weight: 700; color: var(--cor-primaria); }
.assinatura-validade { font-size: .875rem; color: var(--cor-texto-leve); }
.assinatura-beneficios { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--cor-texto); margin-top: .5rem; }
.assinatura-gratuita { font-size: .9rem; }

.form-conta { display: flex; flex-direction: column; gap: 1rem; }
.campo-grupo { display: flex; flex-direction: column; gap: .3rem; }
.campo-label { font-size: .85rem; font-weight: 600; }
.campo-input {
    padding: .55rem .75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: .9rem;
    width: 100%;
    transition: border-color var(--transicao);
}
.campo-input:focus { outline: none; border-color: var(--cor-primaria); }
.campo-input:disabled { background: var(--cor-fundo); color: var(--cor-texto-leve); cursor: not-allowed; }

.painel-vazio { color: var(--cor-texto-leve); font-size: .9rem; }
.painel-vazio a { color: var(--cor-primaria); text-decoration: underline; }

.bloqueio-feature {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--cor-texto-leve);
    font-size: .9rem;
}

/* Jogos salvos */
.jogos-salvos-lista { display: flex; flex-direction: column; gap: 1rem; }
/* Estatísticas de trevos (+Milionária) */
.trevos-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.trevo-stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trevo-stat-bolinha {
    font-size: 1rem;
    font-weight: 700;
    min-width: 3rem;
    text-align: center;
}

.trevo-stat-barra-wrap {
    flex: 1;
    height: 10px;
    background: var(--cor-borda);
    border-radius: 99px;
    overflow: hidden;
}

.trevo-stat-barra {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.trevo-stat-pct {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 3.5rem;
    text-align: right;
}

.trevo-stat-freq {
    font-size: 0.8rem;
    color: var(--cor-texto-leve);
    min-width: 3rem;
}

/* Estatísticas de times do coração (Timemania) */
.times-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: .5rem;
}

.time-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .875rem;
}

.time-ranking {
    width: 2rem;
    text-align: right;
    color: var(--cor-texto-leve);
    font-size: .8rem;
    flex-shrink: 0;
}

.time-nome {
    min-width: 11rem;
    font-weight: 600;
    font-size: .85rem;
}

.time-barra-wrap {
    flex: 1;
    height: 8px;
    background: var(--cor-borda);
    border-radius: 99px;
    overflow: hidden;
}

.time-barra {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}

.time-freq {
    font-weight: 700;
    font-size: .85rem;
    min-width: 3rem;
    text-align: right;
}

.time-pct {
    font-size: .8rem;
    color: var(--cor-texto-leve);
    min-width: 3.5rem;
}

.ranking-time {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.ranking-time-nome {
    font-size: .85rem;
    font-weight: 600;
    flex: 1;
}

.jogo-salvo-item {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: .75rem 1rem;
    transition: opacity var(--transicao);
}
.jogo-salvo-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.jogo-salvo-modalidade { font-size: .8rem; font-weight: 700; }
.jogo-salvo-data { font-size: .75rem; color: var(--cor-texto-leve); margin-left: auto; }
.jogo-salvo-acertos {
    font-size: .75rem;
    background: #d1fae5;
    color: #065f46;
    padding: .1rem .5rem;
    border-radius: 20px;
    font-weight: 600;
}
.jogo-salvo-dezenas { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.jogo-salvo-dezenas .dezena {
    width: 28px;
    height: 28px;
    font-size: .8rem;
    background: var(--cor-modal, var(--cor-primaria));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.jogo-salvo-acoes { display: flex; gap: .5rem; }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    cursor: pointer;
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: var(--raio-sm);
    transition: all var(--transicao);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-ghost:hover { background: var(--cor-fundo); }
.btn-remover:hover { border-color: #fca5a5; color: #991b1b; }

/* Tabela de pagamentos */
.table-responsive { overflow-x: auto; }
.tabela-pagamentos { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela-pagamentos th { background: var(--cor-fundo); text-align: left; padding: .6rem .75rem; font-weight: 600; border-bottom: 2px solid var(--cor-borda); }
.tabela-pagamentos td { padding: .6rem .75rem; border-bottom: 1px solid var(--cor-borda); }
.badge-status {
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-weight: 600;
}
.status-pendente  { background: #fffbeb; color: #92400e; }
.status-aprovado  { background: #d1fae5; color: #065f46; }
.status-rejeitado { background: #fee2e2; color: #991b1b; }
.status-cancelado { background: #f3f4f6; color: #6b7280; }

/* --- Print: exportar jogos --- */
@media print {
    .cabecalho, .rodape, .btn, .nav-toggle,
    .pagamento-status, .pagamento-aviso,
    .painel-card-header .badge-contagem,
    .jogo-salvo-acoes,
    .alerta,
    [aria-hidden="true"] { display: none !important; }

    body { background: white; font-size: 11pt; }
    .container { max-width: 100%; padding: 0; }

    .gerador-jogos-lista {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        page-break-inside: auto;
    }
    .jogo-card {
        border: 1px solid #ccc;
        border-radius: 8pt;
        padding: 10pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .dezena {
        width: 22pt !important;
        height: 22pt !important;
        font-size: 8pt !important;
    }
}

/* --- Botão salvar jogo (gerador, Semana 4) --- */
.btn-salvar-jogo {
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-leve);
    cursor: pointer;
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: var(--raio-sm);
    transition: all var(--transicao);
    margin-top: .5rem;
}
.btn-salvar-jogo:hover:not(:disabled) { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-salvar-jogo.btn-sucesso { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.btn-salvar-jogo:disabled { opacity: .6; cursor: not-allowed; }

.jogos-gerados-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.jogos-gerados-titulo { margin-bottom: 0; }

/* ============================================================
   Espaços de publicidade (AdSense placeholders)
   Não aparecem para usuários premium (@media print também oculta)
   ============================================================ */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.ad-slot .ad-label {
    color: #bdbdbd;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    pointer-events: none;
    user-select: none;
}
/* Header: 728x90 desktop, 320x50 mobile */
.ad-header {
    min-height: 50px;
    max-width: 728px;
    margin: .5rem auto;
}
@media (min-width: 768px) {
    .ad-header { min-height: 90px; }
}
/* Footer: 728x90 desktop, 320x100 mobile */
.ad-footer {
    min-height: 100px;
    max-width: 728px;
    margin: 1rem auto 0;
}
@media (min-width: 768px) {
    .ad-footer { min-height: 90px; }
}
/* Inline: entre blocos de conteúdo */
.ad-inline {
    min-height: 90px;
    margin: 1.5rem 0;
}
/* Sidebar: 300x250 */
.ad-sidebar {
    min-height: 250px;
    max-width: 300px;
    margin: 1rem auto;
}
/* Ocultar em impressão */
@media print {
    .ad-slot { display: none !important; }
}

/* ============================================================
   CTA de afiliação no gerador
   ============================================================ */
.btn-apostar-online {
    display: inline-block;
    margin-top: .5rem;
    padding: .45rem .9rem;
    background: #16a34a;
    color: #fff;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.btn-apostar-online:hover {
    background: #15803d;
    color: #fff;
    text-decoration: none;
}
@media print {
    .btn-apostar-online { display: none !important; }
}

/* ============================================================
   Landing page — Semana 5
   ============================================================ */

/* Hero landing */
.hero-landing .hero-detalhe {
    margin-top: 1rem;
    font-size: .85rem;
    color: rgba(255,255,255,.75);
}
.btn-lg { padding: .75rem 1.75rem; font-size: 1rem; }

/* Benefícios */
.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (min-width: 600px) {
    .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .beneficios-grid { grid-template-columns: repeat(4, 1fr); }
}
.beneficio-card {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.beneficio-icone {
    font-size: 2rem;
    margin-bottom: .75rem;
}
.beneficio-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.beneficio-card p  { font-size: .875rem; color: var(--cor-texto-secundario); margin: 0; }

/* Como funciona */
.passos-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.passo-item {
    flex: 1;
    min-width: 180px;
    max-width: 260px;
    text-align: center;
}
.passo-num {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.passo-item h3 { font-size: 1rem; margin-bottom: .5rem; }
.passo-item p  { font-size: .875rem; color: var(--cor-texto-secundario); margin: 0; }
.passo-seta {
    font-size: 1.5rem;
    color: var(--cor-borda);
    padding-top: 1rem;
    display: none;
}
@media (min-width: 700px) {
    .passo-seta { display: block; }
}

/* FAQ */
.faq-lista { max-width: 720px; margin: 2rem auto 0; }
.faq-item {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    margin-bottom: .75rem;
    overflow: hidden;
}
.faq-pergunta {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta::after { content: '+'; font-size: 1.25rem; color: var(--cor-primaria); }
details[open] .faq-pergunta::after { content: '−'; }
.faq-resposta {
    padding: 0 1.25rem 1rem;
    font-size: .9rem;
    color: var(--cor-texto-secundario);
}
.faq-resposta p { margin: 0; }

/* ============================================================
   Blog
   ============================================================ */
.blog-lista { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.blog-card {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 1.5rem;
}
.blog-data { font-size: .8rem; color: var(--cor-texto-secundario); }
.blog-titulo { margin: .5rem 0; font-size: 1.2rem; }
.blog-titulo a { color: var(--cor-texto); text-decoration: none; }
.blog-titulo a:hover { color: var(--cor-primaria); }
.blog-descricao { font-size: .9rem; color: var(--cor-texto-secundario); margin-bottom: 1rem; }
.blog-ler-mais { font-size: .875rem; font-weight: 600; color: var(--cor-primaria); text-decoration: none; }
.blog-ler-mais:hover { text-decoration: underline; }

/* Layout artigo */
.artigo-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
}
@media (min-width: 900px) {
    .artigo-layout { grid-template-columns: 1fr 280px; }
}
.artigo-header { margin-bottom: 2rem; }
.artigo-titulo { font-size: 1.75rem; margin: .5rem 0 1rem; line-height: 1.3; }
.artigo-descricao { font-size: 1rem; color: var(--cor-texto-secundario); font-style: italic; }
.artigo-corpo { line-height: 1.8; }
.artigo-corpo h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.artigo-corpo h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.artigo-corpo p  { margin-bottom: 1rem; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.artigo-corpo li { margin-bottom: .4rem; }
.artigo-corpo a  { color: var(--cor-primaria); }
.artigo-nav { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cor-borda); }

/* Sidebar do artigo */
.artigo-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-bloco {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 1.25rem;
}
.sidebar-titulo { font-size: .9rem; font-weight: 700; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.sidebar-lista { list-style: none; padding: 0; margin: 0; }
.sidebar-lista li { padding: .35rem 0; border-bottom: 1px solid var(--cor-borda); }
.sidebar-lista li:last-child { border-bottom: none; }
.sidebar-lista a { font-size: .875rem; color: var(--cor-primaria); text-decoration: none; }
.sidebar-lista a:hover { text-decoration: underline; }

/* ============================================================
   Super Sete — Estatísticas por Coluna × Dígito
   ============================================================ */

/* Badge de regra no subtítulo */
.ss-regra-badge {
    display: inline-block;
    margin-left: .5rem;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 20px;
    padding: .2em .75em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    vertical-align: middle;
}

/* Card de destaque — fundo levemente colorido */
.ss-destaque-card {
    background: color-mix(in srgb, var(--cor-modal, #A8B400) 5%, var(--cor-cartao));
    border: 2px solid color-mix(in srgb, var(--cor-modal, #A8B400) 30%, transparent);
}

/* -------------------------------------------------------
   Jogo sugerido: 7 círculos grandes, um por coluna
   ------------------------------------------------------- */
.ss-jogo-sugerido {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.ss-js-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    flex: 1;
    min-width: 44px;
}
.ss-js-col {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-texto-leve);
    letter-spacing: .05em;
}
.ss-js-dig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    line-height: 1;
}
.ss-js-pct {
    font-size: .72rem;
    color: var(--cor-texto-leve);
    font-weight: 600;
}

/* -------------------------------------------------------
   Top 3 por coluna — tabela vertical sem scroll horizontal
   ------------------------------------------------------- */
.ss-top3-tabela {
    margin-top: .75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
}
.ss-top3-header,
.ss-top3-linha {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 1fr;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
}
.ss-top3-header {
    background: var(--cor-fundo);
    border-bottom: 2px solid var(--cor-borda);
}
.ss-top3-linha {
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-cartao);
}
.ss-top3-linha:last-child { border-bottom: none; }
.ss-top3-linha:hover { background: var(--cor-fundo); }
.ss-top3-col-label { font-size: .75rem; color: var(--cor-texto-leve); }
.ss-top3-pos {
    font-size: .75rem;
    font-weight: 700;
    color: var(--cor-texto-leve);
    text-align: center;
}
.ss-top3-col-nome {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.ss-top3-dig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
    border: 2px solid transparent;
    justify-self: center;
}
.ss-top3-dig--1 { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.ss-top3-dig--2, .ss-top3-dig--3 { background: transparent !important; border-width: 2px; border-style: solid; }

/* -------------------------------------------------------
   Seletor de coluna (C1…C7 botões)
   ------------------------------------------------------- */
.ss-col-seletor {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 1rem 0 .5rem;
}
.ss-col-btn {
    padding: .45rem .85rem;
    border-radius: 6px;
    border: 2px solid;
    background: transparent;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    min-width: 44px;
    min-height: 44px; /* alvo de toque adequado para idosos */
}
.ss-col-btn:hover { opacity: .8; }

/* -------------------------------------------------------
   Painel de detalhe: ranking dos 10 dígitos de uma coluna
   ------------------------------------------------------- */
.ss-col-detalhe { display: none; }
.ss-col-detalhe.ativo { display: block; }

.ss-det-linha {
    display: grid;
    grid-template-columns: 28px 44px 1fr 80px 52px;
    align-items: center;
    gap: .5rem;
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--cor-borda);
    border-radius: 4px;
}
.ss-det-linha:last-child { border-bottom: none; }
.ss-det-linha.ss-det--top { background: color-mix(in srgb, var(--cor-modal, #A8B400) 6%, transparent); }
.ss-det-linha.ss-det--alerta { background: #fef2f2; }

.ss-det-rank {
    font-size: .8rem;
    color: var(--cor-texto-leve);
    font-weight: 700;
    text-align: right;
}
.ss-det-dig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 800;
}
.ss-det-bar-wrap {
    height: 10px;
    background: var(--cor-borda);
    border-radius: 5px;
    overflow: hidden;
}
.ss-det-bar {
    height: 100%;
    border-radius: 5px;
    transition: width .3s;
}
.ss-det-freq {
    font-size: .85rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.ss-det-pct {
    font-size: .8rem;
    color: var(--cor-texto-leve);
    text-align: right;
    white-space: nowrap;
}

/* Repetições — grade de dígitos */
.ss-rep-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: .75rem;
}
.ss-rep-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.ss-rep-dig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Mobile — ajustes finos */
@media (max-width: 480px) {
    .ss-js-dig  { width: 44px; height: 44px; font-size: 1.35rem; }
    .ss-top3-header,
    .ss-top3-linha { grid-template-columns: 40px 1fr 1fr 1fr; padding: .5rem; gap: .35rem; }
    .ss-top3-dig  { width: 36px; height: 36px; font-size: 1rem; }
    .ss-det-linha { grid-template-columns: 24px 40px 1fr 60px 40px; gap: .35rem; padding: .45rem .35rem; }
    .ss-det-dig   { width: 36px; height: 36px; font-size: 1rem; }
    .ss-det-freq  { font-size: .75rem; }
    .ss-det-pct   { font-size: .7rem; }
}

/* ============================================================
   Lista de concursos — layout horizontal (3 colunas)
   ============================================================ */

/* Título discreto antes da lista de resultados anteriores */
.titulo-resultados-anteriores {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-leve);
    margin-bottom: .75rem;
}

/* Info de contagem/página acima da paginação */
.paginacao-info {
    font-size: .8rem;
    color: var(--cor-texto-leve);
    text-align: center;
    margin-bottom: .5rem;
}

/* Container: lista mais compacta */
.lista-concursos { gap: .4rem; }

/* Card: flex row com 3 zonas */
.concurso-item {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
}

/* Coluna esquerda — identificação */
.ci-id {
    flex-shrink: 0;
    width: 110px;
    padding: .65rem .9rem .65rem 1rem;
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;
    justify-content: center;
}
.ci-rotulo {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-texto-leve);
}
.ci-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cor-texto);
    line-height: 1.1;
}
.ci-data {
    font-size: .78rem;
    color: var(--cor-texto-leve);
}
.ci-badge-acum {
    margin-top: 3px;
    font-size: .6rem;
    padding: 2px 5px;
    align-self: flex-start;
}

/* Coluna central — dezenas e extras */
.ci-corpo {
    flex: 1;
    min-width: 0;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.ci-corpo .dezenas-container {
    padding: 0;
    gap: .3rem;
}
.ci-corpo .dupla-sena-sorteios { padding: 0; }
.ci-extra {
    font-size: .78rem;
    color: var(--cor-texto-leve);
    margin: 0;
    padding: 0;
    line-height: 1.3;
}
.ci-extra-label {
    font-weight: 600;
    color: var(--cor-texto);
    margin-right: .25rem;
}

/* Coluna direita — prêmio */
.ci-premio {
    flex-shrink: 0;
    width: 148px;
    padding: .65rem 1rem .65rem .75rem;
    border-left: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;
    justify-content: center;
    text-align: right;
}
.ci-premio--vazio { border-left: none; width: 0; padding: 0; }
.ci-premio-val {
    font-size: .95rem;
    font-weight: 800;
    color: var(--cor-modal, var(--cor-primaria));
    line-height: 1.2;
}
.ci-premio-desc {
    font-size: .7rem;
    color: var(--cor-texto-leve);
    line-height: 1.2;
}
.ci-premio-gan {
    font-size: .72rem;
    color: var(--cor-texto-leve);
    margin-top: 1px;
}

/* Mobile: empilha de volta */
@media (max-width: 640px) {
    .concurso-item { flex-direction: column; align-items: stretch; }
    .ci-id {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding: .6rem .9rem;
        border-right: none;
        border-bottom: 1px solid var(--cor-borda);
        align-self: auto;
    }
    .ci-rotulo { display: none; }
    .ci-num { font-size: .95rem; }
    .ci-badge-acum { margin-top: 0; }
    .ci-corpo { padding: .5rem .9rem; }
    .ci-premio {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding: .5rem .9rem;
        border-left: none;
        border-top: 1px solid var(--cor-borda);
        align-self: auto;
        text-align: left;
    }
    .ci-premio-desc { display: none; }
}

/* ============================================================
   Card Próximo Concurso
   ============================================================ */

.proximo-concurso {
    position: relative;
    background: var(--cor-branco);
    border: 2px solid var(--cor-modal, var(--cor-primaria));
    border-radius: var(--raio-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.pc-badge {
    display: inline-block;
    background: var(--cor-modal, var(--cor-primaria));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .65rem;
    border-radius: 20px;
    margin-bottom: .9rem;
}

.pc-corpo {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pc-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    flex: 1;
}

.pc-num, .pc-data, .pc-horario {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.pc-rotulo {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-texto-leve);
}

.pc-valor-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cor-modal, var(--cor-primaria));
    line-height: 1;
}

.pc-valor-data {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto);
}

.pc-valor-hora {
    font-size: .9rem;
    color: var(--cor-texto);
}

.pc-premio {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: right;
}

.pc-valor-premio {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cor-modal, var(--cor-primaria));
    line-height: 1.1;
    white-space: nowrap;
}

.pc-badge-acum {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .15rem .5rem;
    border-radius: 20px;
    align-self: flex-end;
}

.pc-cta {
    display: inline-block;
    padding: .6rem 1.25rem;
    border-radius: var(--raio-sm);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: opacity var(--transicao);
}

.pc-cta:hover { opacity: .88; }

.proximo-concurso.pc-encerrado {
    border-style: dashed;
    background: #f3f4f6;
}

/* Desbota só os dados (número, data, prêmio) — badge e aviso ficam intactos */
.proximo-concurso.pc-encerrado .pc-corpo {
    opacity: .6;
    filter: saturate(.4);
}

/* Badge vermelho fixo — sinal de alerta universal */
.pc-badge.pc-badge-enc {
    background: #dc2626;
}

.pc-aviso-enc {
    font-size: 1rem;
    color: var(--cor-texto);
    background: transparent;
    border-left: 4px solid var(--cor-modal, var(--cor-primaria));
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    padding: .55rem .9rem;
    margin-bottom: .9rem;
    line-height: 1.45;
}

/* Botão usa a cor do jogo via inline style — filter suaviza para indicar estado diferente */
.pc-cta-form {
    border: none;
    cursor: pointer;
    filter: saturate(.75);
}

@media (max-width: 640px) {
    .pc-corpo { flex-direction: column; gap: 1rem; }
    .pc-info { gap: 1rem; }
    .pc-premio { text-align: left; }
    .pc-badge-acum { align-self: flex-start; }
    .pc-valor-premio { font-size: 1.3rem; }
}

/* ============================================================
   Hub do Gerador — /gerador
   ============================================================ */

/* Hero */
.hero-gerador-hub {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #0f3d25 100%);
    color: #fff;
    padding: 3.5rem var(--padding-x);
}

.hub-hero-centro {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.hub-badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}

.hub-hero-centro h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #fff;
}

.hub-hero-centro h1 .destaque {
    color: var(--cor-destaque);
}

.hub-hero-centro > p {
    font-size: 1.05rem;
    opacity: .9;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.hub-hero-recursos {
    display: inline-flex;
    flex-direction: column;
    gap: .65rem;
    text-align: left;
}

.hub-recurso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    opacity: .9;
}

.hub-recurso-icone {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    color: var(--cor-destaque);
}

/* Grid de cards das modalidades */
.hub-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 480px) {
    .hub-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .hub-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
    .hub-cards-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Card individual de modalidade */
.hub-card {
    display: flex;
    flex-direction: column;
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    border-top: 5px solid var(--cor-modal, var(--cor-primaria));
    box-shadow: var(--sombra-sm);
    padding: 1.25rem 1.1rem 1rem;
    text-decoration: none;
    color: var(--cor-texto);
    transition: box-shadow var(--transicao), transform var(--transicao);
    cursor: pointer;
    gap: .5rem;
}

.hub-card:hover {
    box-shadow: var(--sombra-lg);
    transform: translateY(-3px);
    color: var(--cor-texto);
}

.hub-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
}

.hub-card-nome {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
    line-height: 1.3;
}

/* Faixa de destaque "SORTEIO HOJE" no topo do card */
.hub-card-hoje-faixa {
    margin: -.05rem -1.1rem .65rem;  /* sangra nas bordas laterais do card */
    padding: .35rem .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--cor-modal, var(--cor-primaria));
    color: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Variante "apostas encerradas" */
.hub-card-hoje-faixa--enc {
    background: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Card com sorteio hoje e apostas abertas: borda animada */
.hub-card--hoje-aberto {
    border-top-width: 5px;
    border-top-color: var(--cor-modal, var(--cor-primaria));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-modal, var(--cor-primaria)) 30%, transparent),
                var(--sombra-md);
    order: -1; /* sobe no grid */
}

.hub-card--hoje-aberto:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-modal, var(--cor-primaria)) 50%, transparent),
                var(--sombra-lg);
}

/* Card com apostas encerradas: levemente esmaecido */
.hub-card--hoje-encerrado {
    opacity: .72;
}

.hub-card--hoje-encerrado .hub-card-nome,
.hub-card--hoje-encerrado .hub-card-premio-valor {
    color: var(--cor-texto-leve);
}

.hub-card-data--enc {
    font-style: italic;
}

.hub-card-badge-acum {
    flex-shrink: 0;
    background: #dc2626;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .2rem .45rem;
    border-radius: 4px;
    margin-top: .1rem;
}

.hub-card-regra {
    font-size: .78rem;
    color: var(--cor-texto-leve);
}

.hub-card-premio {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .25rem;
}

.hub-card-premio-rotulo {
    font-size: .72rem;
    color: var(--cor-texto-leve);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.hub-card-premio-valor {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cor-modal, var(--cor-primaria));
    line-height: 1.2;
}

.hub-card-data {
    font-size: .75rem;
    color: var(--cor-texto-leve);
}

.hub-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .85rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--cor-modal, var(--cor-primaria));
    border-top: 1px solid var(--cor-borda);
}

.hub-card-seta {
    transition: transform var(--transicao);
}

.hub-card:hover .hub-card-seta {
    transform: translateX(4px);
}

/* Seção "Como funciona" do hub */
.secao-hub-como .hub-como-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .secao-hub-como .hub-como-grid {
        flex-direction: row;
        align-items: flex-start;
    }
}

.hub-como-item {
    flex: 1;
    text-align: center;
    max-width: 280px;
}

.hub-como-num {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
}

.hub-como-item h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.hub-como-item p {
    font-size: .9rem;
    color: var(--cor-texto-leve);
    line-height: 1.55;
}

.hub-como-seta {
    font-size: 1.5rem;
    color: var(--cor-borda);
    flex-shrink: 0;
    align-self: center;
    display: none;
}

@media (min-width: 768px) {
    .hub-como-seta { display: block; }
}

/* Seção diferenciais */
.hub-diferenciais-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .hub-diferenciais-grid { grid-template-columns: repeat(2, 1fr); }
}

.hub-diferencial {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    border: 1px solid var(--cor-borda);
    padding: 1.5rem;
}

.hub-diferencial-icone {
    font-size: 1.75rem;
    margin-bottom: .75rem;
}

.hub-diferencial h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.hub-diferencial p {
    font-size: .9rem;
    color: var(--cor-texto-leve);
    line-height: 1.55;
}

.hub-diferencial p a {
    color: var(--cor-primaria);
    font-weight: 600;
}

@media (min-width: 768px) {
    .hub-hero-centro h1 { font-size: 2.5rem; }
}

/* ============================================================
   Seletor de Modo (Manual / Assistido) — Sprint 2
   ============================================================ */
.modo-seletor {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    padding: 0.35rem;
    width: fit-content;
}

.btn-modo {
    background: transparent;
    border: none;
    border-radius: calc(var(--raio-lg) - 4px);
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cor-texto-leve);
    cursor: pointer;
    transition: all var(--transicao);
    white-space: nowrap;
}

.btn-modo:hover { color: var(--cor-texto); }

.btn-modo-ativo {
    background: var(--cor-texto);
    color: var(--cor-branco);
    font-weight: 600;
    box-shadow: var(--sombra-sm);
}

.btn-modo-ativo:hover { color: var(--cor-branco); }

/* ============================================================
   Modo Assistido — área de conversa
   ============================================================ */
.assistido-area {
    background: var(--cor-branco);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--cor-borda);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 640px;
}

.assistido-conversa {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.assistido-step { animation: assistido-fade-in 0.28s ease; }

@keyframes assistido-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.assistido-pergunta {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.assistido-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.assistido-card {
    background: var(--cor-fundo);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transicao);
    color: var(--cor-texto);
    line-height: 1.35;
}

.assistido-card:hover {
    border-color: var(--cor-primaria);
    background: #f0fdf4;
}

.assistido-card-selecionado {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

.assistido-card-selecionado:hover {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

/* Step com input de texto */
.assistido-campo {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.assistido-campo-input {
    flex: 1;
    min-width: 160px;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background: var(--cor-fundo);
    transition: border-color var(--transicao);
}

.assistido-campo-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background: var(--cor-branco);
}

.assistido-campo-input.campo-erro { border-color: #dc2626; }

.assistido-erro {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 0.3rem;
}

.btn-assistido-confirmar {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    border-radius: var(--raio-sm);
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicao);
    white-space: nowrap;
}

.btn-assistido-confirmar:hover { background: var(--cor-secundaria); }

.btn-assistido-pular {
    background: transparent;
    color: var(--cor-texto-leve);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transicao);
    white-space: nowrap;
}

.btn-assistido-pular:hover {
    border-color: var(--cor-texto-leve);
    color: var(--cor-texto);
}

/* Resposta registrada (passo anterior) — desabilitado visualmente */
.assistido-step--respondido .assistido-pergunta { color: var(--cor-texto-leve); }
.assistido-step--respondido .assistido-card { cursor: default; pointer-events: none; opacity: 0.55; }
.assistido-step--respondido .assistido-card-selecionado { opacity: 1; }
.assistido-step--respondido .assistido-campo-input { pointer-events: none; opacity: 0.6; }
.assistido-step--respondido .btn-assistido-confirmar,
.assistido-step--respondido .btn-assistido-pular { pointer-events: none; opacity: 0.45; }

/* Resumo da estratégia */
.assistido-resumo {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cor-borda);
    animation: assistido-fade-in 0.28s ease;
}

.assistido-resumo-texto {
    font-size: 0.97rem;
    color: var(--cor-texto);
    line-height: 1.55;
    margin-bottom: 1rem;
    background: #f0fdf4;
    border-left: 3px solid var(--cor-primaria);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}

/* ============================================================
   Narrativa automática do jogo gerado — Sprint 2
   ============================================================ */
.gerador-narrativa {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-left: 3px solid var(--cor-primaria);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-size: 0.88rem;
    color: var(--cor-texto);
    line-height: 1.65;
    animation: assistido-fade-in 0.3s ease;
}

/* ============================================================
   Utilitários remanescentes (usados fora da Mega-Sena) — o CSS
   exclusivo do antigo layout do Prof. Pitágoras (Mega) foi removido
   daqui; a Mega agora usa a folha isolada public/css/gerador-mesa.css.
   ============================================================ */

.btn-outline {
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: background var(--transicao);
    min-height: 44px;
}

.btn-outline:hover { background: var(--cor-fundo); }

/* --- Anúncios placeholder --- */
.ad-placeholder {
    background: #f5f5f5;
    border: 1px dashed #e0e0e0;
    color: #bdbdbd;
    text-align: center;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio-sm);
    margin: 0.75rem 0;
    letter-spacing: 0.05em;
}

.ad-banner-topo   { height: 50px; }
.ad-pos1          { min-height: 100px; }
.ad-pos2          { min-height: 250px; }

@media (min-width: 768px) {
    .ad-banner-topo { height: 90px; }
    .ad-pos1        { min-height: 90px; }
}

@media print {
    .ad-placeholder { display: none !important; }
}