:root{
    --bg: #241730;
    --bg-2: #2f1e3f;
    --card: #34223f;
    --card-line: #4a3358;
    --ink: #f3ede3;
    --ink-dim: #c9bcd6;
    --gold: #f2b705;
    --gold-dim: #a67e03;
    --mint: #4fd1a5;
    --mint-dim: #1f8a63;
    --red: #e2554f;
  }
  /* Layout do Bloco de Integração do Otimizador */
.integration-box {
    background: var(--card);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.integration-box p {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: var(--ink-dim);
}
.btn-access-otimizador {
    display: inline-block;
    padding: 14px 28px;
    background: var(--gold);
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    transition: transform 0.2s, background 0.2s;
}
.btn-access-otimizador:hover {
    background: #ffcf33;
    transform: scale(1.02);
}

  *{box-sizing:border-box;}
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    padding: 32px 16px 64px;
  }
  .wrap{max-width: 820px; margin: 0 auto;}
  .masthead{
    display:flex; align-items:baseline; justify-content:space-between;
    border-bottom: 2px solid var(--card-line);
    padding-bottom: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .masthead h1{
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 34px;
    letter-spacing: 0.5px;
    margin: 0;
    color: var(--gold);
    text-transform: uppercase;
  }
  .masthead .tag{
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 22px; }
  .chip{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--card-line);
    background: var(--card);
    color: var(--ink-dim);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .chip:hover{ border-color: var(--mint-dim); }
  .chip.active{ background: var(--mint); border-color: var(--mint); color: #0e2f24; }
  .chip.gold.active{ background: var(--gold); border-color: var(--gold); color: #3a2900; }
  /* atalho "10 jogos prontos": no extremo direito da fila de Erre, em contorno dourado para combinar com o painel */
  .chip.quick{
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 7px;
    border-color: var(--gold); color: var(--gold);
    background: transparent;
  }
  .chip.quick .quick-ico{ font-size: 12px; }
  .chip.quick:hover{ background: var(--gold); border-color: var(--gold); color: #3a2900; }
  .chip.quick:disabled{ opacity: .6; cursor: progress; }
  .card{
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
  }
  .card h2{
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-dim);
    margin: 0 0 16px;
  }
  .result-meta{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-dim);
  }
  .result-meta .acc{ color: var(--gold); font-weight: 700; }
  .balls{ display:flex; flex-wrap: wrap; gap: 10px; }
  .ball{
    width: 42px; height: 42px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    background: var(--gold);
    color: #3a2900;
    flex-shrink: 0;
    opacity: 0;
    animation: pop 0.35s ease forwards;
  }
  .ball.small{ width:34px; height:34px; font-size:12px; }
  .ball.pick{
    width: 38px; height: 38px;
    background: var(--bg-2);
    color: var(--ink-dim);
    border: 1.5px solid var(--card-line);
    cursor: pointer;
    opacity: 1;
    animation: none;
    font-weight: 700;
    user-select: none;
  }
  .ball.pick.selected{
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  @keyframes pop{
    0%{ opacity:0; transform: scale(0.4);}
    100%{ opacity:1; transform: scale(1);}
  }
  .controls{ display:flex; gap: 16px; align-items:center; flex-wrap: wrap; margin-bottom: 18px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{
    font-size: 12px; color: var(--ink-dim); font-weight:600;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  select, input[type=number]{
    background: var(--bg-2);
    border: 1.5px solid var(--card-line);
    color: var(--ink);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
  button.generate, button.dl{
    background: var(--gold);
    color: #3a2900;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease;
  }
  button.generate:hover, button.dl:hover{ background: #ffcb2e; }
  button.generate:active, button.dl:active{ transform: scale(0.97); }
  button.generate:disabled{ background: var(--card-line); color: var(--ink-dim); cursor: not-allowed; }
  button.dl{ background: var(--mint); color:#0e2f24; }
  button.dl:hover{ background: #6fe0b8; }
  .game-block{ border-top: 1px solid var(--card-line); padding-top: 14px; margin-top: 14px; }
  .game-block:first-of-type{ border-top:none; margin-top:0; padding-top:0; }
  .game-label{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .super7{ display:flex; gap:6px; }
  .super7 .digit{
    width: 34px; height: 42px;
    background: var(--gold);
    color:#3a2900;
    border-radius: 6px;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-weight:700; font-size:16px;
  }
  .status{ font-size: 13px; color: var(--ink-dim); font-style: italic; }
  .status.err{ color: var(--red); }
  .footer-note{
    font-size: 12px; color: var(--ink-dim); text-align:center; margin-top: 28px;
    line-height: 1.6;
  }
  .picker-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 14px; }
  .wheel-summary{
    display:flex; gap: 20px; flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-dim);
    margin-bottom: 16px;
  }
  .wheel-summary b{ color: var(--gold); }
  .hint{ font-size: 12.5px; color: var(--ink-dim); line-height:1.6; margin-bottom: 14px; }
  .games-note{
    font-size: 12.5px; color: var(--ink-dim); margin-top: 14px; font-style: italic;
  }
  .games-full{
    margin-top: 10px;
    max-height: 520px;
    overflow: auto;
    background: var(--bg-2);
    border: 1px solid var(--card-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    white-space: pre;
  }
  .games-full:focus{ outline: 1.5px solid var(--gold); }

  /* cartão "Lançar no site da Caixa" (lotes para a extensão Preenchedor Lotofácil) */
  .caixa-card{
    margin-top: 22px; padding: 16px 18px;
    background: var(--bg-2); border: 1px solid var(--card-line); border-radius: 12px;
  }
  .caixa-card h3{
    margin: 0 0 8px;
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--gold);
  }
  .caixa-card code{ font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); }
  .caixa-card .controls{ margin: 10px 0 8px; }
  .caixa-card select{ max-width: 100%; }
  .caixa-feedback{ min-height: 18px; font-size: 12.5px; color: var(--mint); }
  .caixa-feedback.err{ color: var(--red); }
  .caixa-steps{ margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.7; }
  .caixa-aviso{ margin-top: 10px; font-size: 11.5px; color: var(--ink-dim); line-height: 1.6; }

  /* RESULTS OVERVIEW GRID */
  .overview-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .overview-head h2{
    font-family:'Anton', sans-serif; font-weight:400; font-size:20px;
    text-transform: none; letter-spacing:0.3px; color: var(--gold); margin:0 0 6px;
  }
  .overview-head p{ margin:0; font-size:13px; color: var(--ink-dim); max-width: 520px; line-height:1.5; }
  .refresh-btn{
    background: var(--bg-2); color: var(--ink-dim);
    border: 1.5px solid var(--card-line); border-radius: 8px;
    padding: 8px 14px; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    cursor:pointer; white-space: nowrap;
  }
  .refresh-btn:hover{ border-color: var(--mint-dim); color: var(--mint); }
  .overview-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }
  .lot-block{
    background: var(--bg-2);
    border: 1px solid var(--card-line);
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    padding: 16px;
  }
  .lot-block-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 10px;
  }
  .lot-block-head strong{ font-size:15px; color: var(--ink); }
  .lot-block-head a{
    font-size: 12px; font-weight:700; color: var(--mint);
    text-decoration:none; white-space:nowrap;
  }
  .lot-block-head a:hover{ text-decoration:underline; }
  .lot-concurso{
    border-top: 1px solid var(--card-line);
    padding-top: 10px; margin-top: 10px;
  }
  .lot-concurso:first-of-type{ border-top:none; margin-top:0; padding-top:0; }
  .lot-concurso-meta{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono', monospace; font-size:11.5px; color: var(--ink-dim);
    margin-bottom: 8px; gap: 8px; flex-wrap:wrap;
  }
  .badge{
    font-size: 10.5px; font-weight:700; padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.3px;
  }
  .badge.acumulou{ background: rgba(242,183,5,.18); color: var(--gold); }
  .badge.premiado{ background: rgba(79,209,165,.18); color: var(--mint); }
  .lot-balls{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 8px; }
  .lot-balls .ball{ width:28px; height:28px; font-size:11px; }
  .lot-premio{ font-size: 12px; color: var(--ink-dim); }
  .lot-premio b{ color: var(--gold); }

  /* FILTRO MANUAL */
  .filter-toggle-row{
    display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-dim);
    margin-bottom: 10px; cursor:pointer; flex-wrap: wrap;
  }
  .manual-filter-panel{
    display:none;
    background: var(--bg-2);
    border: 1px solid var(--card-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .manual-filter-panel.open{ display:block; }
  .mf-row{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    gap: 6px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--card-line);
    font-size: 12.5px;
  }
  .mf-row:last-child{ border-bottom:none; }
  .mf-row input[type=checkbox].mf-enable{ flex: 0 0 auto; }
  .mf-row label.mf-name{
    color: var(--ink); font-weight:600;
    display:flex; flex-direction:column; line-height:1.3;
    flex: 1 1 130px; min-width: 0;
  }
  .mf-row .mf-detail{
    font-weight:400; font-size:10.5px; color: var(--ink-dim);
    font-family:'JetBrains Mono', monospace;
  }
  .mf-range{
    display:flex; align-items:center; gap:6px;
    flex: 0 0 auto; margin-left:auto;
  }
  .mf-row .mf-sep{ color: var(--ink-dim); }
  .mf-row input[type=number]{
    width: 58px; padding: 6px 6px; font-size:13px; text-align:center;
  }
  .mf-row input[type=checkbox]{ width:18px; height:18px; }
  .mf-note{ font-size: 11.5px; color: var(--ink-dim); margin-top: 10px; line-height:1.5; }
  .mf-live{
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(79,209,165,0.1);
    border: 1px solid var(--mint-dim);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--mint);
    transition: opacity 0.15s ease;
  }
  .mf-live.stale{ opacity: 0.5; }

  /* ===== MOBILE ===== */
  @media (max-width: 480px){
    body{ padding: 18px 12px 48px; }
    .masthead h1{ font-size: 26px; }
    .card{ padding: 16px 14px; }
    .chip{ padding: 8px 12px; font-size: 12.5px; }
    .ball{ width: 34px; height: 34px; font-size: 12px; }
    .ball.small{ width: 30px; height: 30px; font-size: 11px; }
    .ball.pick{ width: 32px; height: 32px; font-size: 12px; }
    .picker-grid{ gap: 6px; }
    .controls{ gap: 10px; }
    button.generate, button.dl{ width: 100%; padding: 12px 18px; font-size: 14.5px; }
    .controls .field{ width: 100%; }
    .controls .field input[type=number], .controls .field select{ width: 100%; }
    .overview-head{ flex-direction: column; align-items: stretch; }
    .overview-head div > p{ max-width: none; }
    .refresh-btn{ width: 100%; text-align:center; }
    .overview-head > div:last-child{ flex-direction: column; }
    .overview-grid{ grid-template-columns: 1fr; }
    .lot-block-head{ flex-wrap: wrap; gap: 4px; }
    .result-meta{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .lot-concurso-meta{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .wheel-summary{ flex-direction: column; gap: 6px; }
    .mf-row{ font-size: 12px; }
    .mf-row label.mf-name{ flex-basis: 100%; }
    .mf-range{ margin-left: 30px; }
    .filter-toggle-row{ font-size: 12.5px; }
    label[style*="display:flex"]{ font-size: 12.5px !important; }
  }

/* ===== FILTRO PARES x IMPARES ===== */
.par-onoff{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); margin-bottom:12px; cursor:pointer; }
.par-scroll{ overflow-x:auto; margin:12px 0 4px; }
.par-tab{ width:100%; border-collapse:collapse; font-size:13px; }
.par-tab th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); padding:6px 8px; border-bottom:1.5px solid var(--card-line); white-space:nowrap; }
.par-tab td{ padding:7px 8px; border-bottom:1px solid var(--card-line); }
.par-tab input[type=checkbox]{ width:18px; height:18px; }
.par-tab.off{ opacity:.45; }
.par-row.sel{ background:rgba(79,209,165,0.08); }
.par-pad{ font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--gold); white-space:nowrap; }
.par-num{ font-family:'JetBrains Mono', monospace; font-size:12px; white-space:nowrap; }
.par-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid; white-space:nowrap; }
.par-badge.c-nula{ color:#ff8b86; border-color:#ff8b86; background:rgba(226,85,79,.15); }
.par-badge.c-baixa{ color:#f6a24a; border-color:#f6a24a; background:rgba(246,162,74,.15); }
.par-badge.c-media{ color:#ecd95a; border-color:#ecd95a; background:rgba(236,217,90,.14); }
.par-badge.c-alta{ color:#6db6f0; border-color:#6db6f0; background:rgba(109,182,240,.15); }
.par-badge.c-prepond{ color:var(--mint); border-color:var(--mint); background:rgba(79,209,165,.15); }
.par-cobertura{ font-size:12.5px; color:var(--ink-dim); margin:8px 0 4px; line-height:1.5; }
.par-cobertura b{ color:var(--gold); }

.par-janela-t{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin:4px 0 6px; }
.par-dim{ color:var(--ink-dim); opacity:.8; font-size:11px; }
.par-detalhes{ margin:12px 0 4px; font-size:13px; color:var(--ink-dim); }
.par-detalhes summary{ cursor:pointer; color:var(--gold); font-weight:600; }

/* tabela no padrão do e-book (Excel): linhas coloridas, texto centralizado */
.par-ebook{ width:100%; min-width:520px; border-collapse:collapse; background:#fff; color:#000; text-align:center; font-size:14px; border:1px solid #000; }
.par-ebook th, .par-ebook td{ padding:8px 6px; border:1px solid #fff; }
.par-ebook thead th{ border:1px solid #000; background:#fff; color:#000; font-weight:700; letter-spacing:0; text-transform:none; text-align:center; font-size:13px; }
.par-ebook .pe-titulo th{ font-size:14px; }
.par-ebook .pe-sub .pe-cinza{ background:#d9d9d9; }
.par-ebook .pe-cab th{ color:#ff0000; }
.par-ebook .par-row td{ color:#000; font-weight:600; cursor:default; }
.par-ebook .par-row.c-nula td{ background:#ff0000; }
.par-ebook .par-row.c-nula-a td{ background:#f4431f; }
.par-ebook .par-row.c-baixa td{ background:#ed7d31; }
.par-ebook .par-row.c-media td{ background:#ffff00; }
.par-ebook .par-row.c-alta td{ background:#00b0f0; }
.par-ebook .par-row.c-prepond td{ background:#00b050; }
.par-atualiza{ font-size:12px; color:var(--ink-dim); margin:8px 0 2px; line-height:1.5; }
.par-atualiza b{ color:var(--gold); }

/* ===== RESULTADOS: Lotofácil em destaque, outras loterias em botões ===== */
.overview-outras-t{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin:14px 0 8px; }
.overview-outras{ margin-bottom:14px; }
.overview-outras .chip .ov-sinal{ display:inline-block; width:14px; font-weight:700; color:var(--gold); }
.overview-outras .chip.active .ov-sinal{ color:#0e2f24; }
.lot-block.featured{ grid-column:1 / -1; border-color:var(--gold); box-shadow:0 0 0 1px rgba(242,183,5,.35), 0 6px 22px rgba(242,183,5,.08); }
.lot-block.featured .lot-block-head strong{ font-size:18px; color:var(--gold); }
.lot-block.featured .lot-balls .ball{ width:32px; height:32px; font-size:12px; }
.badge.destaque{ background:var(--gold); color:#3a2900; margin-left:8px; vertical-align:middle; }
.chip.featured{ font-weight:700; border-color:var(--gold); color:var(--gold); }
.chip.featured.active{ color:#3a2900; }
#overviewDestaque .lot-block.featured{ margin-bottom:4px; }

/* botão que abre a tabela e escolha do modo Personalizado */
.par-abrir{ margin:12px 0 10px; }
.par-abrir .par-seta{ display:inline-block; width:14px; }
.par-pers{ margin:4px 0 8px; }
.par-pers .chip.active{ background:var(--mint); border-color:var(--mint); color:#0e2f24; }
#paridadeTabelaBox{ margin-bottom:8px; }

/* caixa: quantos concursos analisar */
.par-qtd{margin:6px 0 12px}
.par-qtd label{display:block;font-weight:600;margin-bottom:6px}
.par-qtd-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.par-qtd input[type=number]{width:140px;padding:9px 10px;border-radius:8px;border:1px solid var(--line,#3a3f4b);background:transparent;color:inherit;font:inherit}
.par-qtd .par-dim{margin-top:6px;font-size:.85rem}

/* botões das tabelas de padrões (uma tabela aberta por vez) */
.pad-botoes{margin:4px 0 10px}
.pad-botoes .chip.active{background:var(--gold);border-color:var(--gold);color:#241a04}
.pad-painel{margin:6px 0 12px}
.par-ebook.pad-tab{min-width:420px}
.par-ebook .par-row td:first-child{font-weight:700}
.par-ebook.pad-soma{min-width:640px;font-size:13px}
.par-ebook.pad-soma .par-row td{background:#ffc000;color:#000;font-weight:600;white-space:nowrap}
.par-ebook.pad-soma .par-row td.pad-l{background:#ffc000;font-weight:700}
.par-ebook.pad-soma .par-row td.pad-vazio{background:#fff}
.par-ebook.pad-soma .pe-cab th{color:#000}
.pad-fora{margin-top:6px}

/* legenda de cores embaixo das tabelas */
.pad-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 4px;font-size:12px;color:var(--ink-dim)}
.pad-legenda span{display:inline-flex;align-items:center;gap:6px}
.pad-legenda i{display:inline-block;width:22px;height:12px;border-radius:2px}
.pad-legenda .c-nula{background:#ff0000}.pad-legenda .c-baixa{background:#ed7d31}.pad-legenda .c-media{background:#ffff00}
.pad-legenda .c-alta{background:#00b0f0}.pad-legenda .c-prepond{background:#00b050}

.pad-btn{display:flex;width:fit-content;max-width:100%;margin:10px 0 6px}
.pad-botoes{display:none}

/* Resultado + Análise */
.ra-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ra-balls{ gap: 8px; }
/* Afastamento das bolas do resultado igual ao do volante do Erre (27/10):
   colunas 12px como o picker; fileiras 24px porque os selos F/M/f avançam
   ~12px abaixo da bola — sobram 12px de respiro limpo entre o selo e a
   fileira seguinte. */
.ra-balls.ra-5col{ display:grid; grid-template-columns:repeat(5,44px); gap:24px 12px; justify-content:center; }
.ra-balls .ball{ position:relative; width:44px; height:44px; font-size:15px; }
.ra-balls .ball i{ position:absolute; right:-4px; bottom:-4px; background:#7b2ff7; color:#fff; font-style:normal; font-size:10px; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.35); }
.ra-tend{width:100%;border-collapse:collapse;font-size:13px;min-width:1500px}
.ra-tend th,.ra-tend td{white-space:nowrap}
.ra-tend th:first-child,.ra-tend td.ra-cc{position:sticky;left:0;background:var(--card);z-index:1}
.ra-tend th{color:var(--gold);padding:6px 4px;text-align:left;font-size:12px}
.ra-tend td{padding:6px 4px;border-top:1px solid var(--card-line)}
.ra-tend tr.ra-hl td{background:rgba(242,183,5,.10);color:var(--gold);font-weight:700}
.ra-tend tr.ra-sum td{color:var(--gold);font-weight:700}
.ra-tend td.ra-cc{color:var(--gold);font-weight:700}
.ra-tend td.ra-fora{color:var(--red);font-weight:700;background:rgba(226,85,79,.12)}

/* Fase 2 (25/10): fixar dezenas + Erre automático */
.chip.gold{ background: var(--gold); border-color: var(--gold); color: #3a2900; }
.ball.pick.fixed{ background: var(--gold); border-color: var(--gold); color: #3a2900; }
.qty-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.qty-row label{ font-size:13px; color:var(--ink-dim); }
.qtd-input{ width:90px; padding:8px 10px; border-radius:8px; border:1px solid var(--card-line); background:#fff; color:#111; font-size:14px; }

/* ===== RESPONSIVO: cada tela com sua medida (26/10) =====
   Celular já tinha o bloco @480px acima; aqui vão os complementos:
   - desktop largo usa mais da tela (a coluna era travada em 820px);
   - tablet herda o layout fluido (coluna única + quebras) com respiro próprio;
   - telas pequenas: dígitos do Super 7 e bolas do resultado encolhem
     para não estourar o cartão. Nada aqui muda o desenho do desktop. */

/* Layout amplo no desktop (26/10): o painel usa quase toda a largura,
   como o site da Caixa — a tabela de Tendências (1500px) cabe inteira
   em telas grandes e os filtros ganham respiro. Mobile/tablet não mudam. */
@media (min-width:1025px){
  body.painel .wrap{ max-width:1600px; }
  body.painel .ra-janela{ padding:13px 20px; font-size:15px; }
}

/* Fluido e harmônico no desktop (26/10): o cartão largo deixava o conteúdo
   "perdido" — o painel de critérios esticava cada linha de uma ponta à outra
   (rótulo à esquerda, números colados na direita, com um vão enorme no meio),
   o volante do Erre virava uma ilhazinha no centro do cartão e os textos
   corriam a tela inteira. Correção, só no desktop: critérios em 2 colunas
   (o painel fica com metade da altura e sem o vão); bolas do Erre maiores
   (38px→50px) para o volante ganhar presença; textos longos dos cartões
   limitados a 1100px para não virarem linhas intermináveis. Mobile/tablet
   e a tabela de Tendências não mudam. */
@media (min-width:1025px){
  body.painel .manual-filter-panel.open{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
  body.painel .manual-filter-panel.open .mf-note,
  body.painel .manual-filter-panel.open .mf-live{ grid-column:1 / -1; }
  body.painel .picker-grid{ grid-template-columns:repeat(5,50px); gap:12px; }
  body.painel .ball.pick{ width:50px; height:50px; font-size:15px; }
  body.painel .card > p,
  body.painel .card > .hint{ max-width:1100px; }
}

/* Rastreador em grade + Erre sem vão no desktop (26/10): a revisão visual
   mostrou o card do Rastreador como o mais desequilibrado — 16 botões
   empilhados numa coluna estreita à esquerda com 2/3 do cartão vazio — e
   o botão "10 jogos prontos" jogado na extrema direita com um vão de ~40%.
   Só no desktop: os botões do Rastreador viram grade 4×4 (cada painel
   aberto ocupa a linha inteira abaixo da fileira do seu botão); o botão
   rápido volta para junto dos Erres (de quebra, some a sobreposição com o
   botão flutuante "Assistente"); o texto explicativo da quantidade fica
   com largura limitada. Mobile/tablet não mudam. */
@media (min-width:1025px){
  body.painel #paridadeBody{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
  body.painel #paridadeBody > .hint,
  body.painel #paridadeBody > .par-janela-t,
  body.painel #paridadeBody > .par-qtd,
  body.painel #paridadeBody > .par-atualiza,
  body.painel #paridadeBody > .pad-painel{ grid-column:1 / -1; }
  body.painel #paridadeBody > .pad-btn{ width:auto; margin:0; }
  body.painel .chip.quick{ margin-left:0; }
  body.painel .qty-row .hint{ display:inline-block; max-width:640px; vertical-align:middle; }
}

/* Tablet (481–1024px): respiro próprio, resto fluido como já era. */
@media (min-width:481px) and (max-width:1024px){
  body{ padding:24px 20px 56px; }
  .masthead h1{ font-size:30px; }
  .card{ padding:20px 22px; }
}

/* Celular: dígitos do Super 7 (7×34px + gaps = 274px) estouravam o cartão
   em telas de 320px (miolo de ~268px); com 30px cabem com folga. */
@media (max-width:480px){
  .super7{ gap:4px; }
  .super7 .digit{ width:30px; height:38px; font-size:14px; }
  .masthead .tag{ font-size:11px; }
}

/* Telas bem pequenas (até 360px): bolas do resultado de 44px para 40px,
   para a grade 5×5 manter folga dentro do cartão. */
@media (max-width:360px){
  .ra-balls .ball{ width:40px; height:40px; font-size:14px; }
  .ra-balls.ra-5col{ grid-template-columns:repeat(5,40px); }
  .ra-balls .ball i{ width:15px; height:15px; font-size:9px; }
}

/* Topo harmonizado no celular (26/10): antes os dois botões viravam
   largura total e o e-mail ficava solto entre eles. Agora: título em
   linha própria, e-mail em linha própria, e Caderno/Sair lado a lado
   em dois botões iguais. Desktop não muda. */
@media (max-width:480px){
  .masthead{ flex-direction:column; align-items:stretch; gap:10px; }
  .masthead .tag{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
  .masthead .tag #userEmail{ flex:1 1 100%; order:-1; }
  .masthead .tag .refresh-btn{ width:auto; flex:1 1 0; text-align:center; }
}

/* Números do Erre em fileiras de 5, como o resultado (26/10): antes o
   seletor era flex e enchia a linha inteira (1–19 numa fileira só no
   desktop). Agora é grade de 5 colunas, centralizada, igual ao cartão
   do resultado. As bolas continuam do mesmo tamanho; só o arranjo muda. */
.picker-grid{ display:grid; grid-template-columns:repeat(5,38px); gap:8px; justify-content:center; }
@media (max-width:480px){
  .picker-grid{ grid-template-columns:repeat(5,32px); gap:6px; }
}

/* Filtros de janela no desenho dos botões roxos (26/10): mesmo desenho
   da referência — botão roxo com ícone de gráfico e "N Últimos sorteios".
   O selecionado fica dourado; Atualizar fica em contorno, secundário. */
/* Espaço entre as bolas e os filtros (27/10): a fileira de botões ficava
   colada na grade de bolas (sem margem nenhuma entre os dois blocos). */
.ra-janelas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; margin-bottom:18px; }
.ra-janela{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#8b5cf6,#7b2ff7);
  color:#fff; border:none; border-radius:12px;
  padding:11px 16px; font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
  cursor:pointer; box-shadow:0 2px 10px rgba(123,47,247,.35);
  transition:transform .1s ease, box-shadow .15s ease;
}
.ra-janela:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(123,47,247,.45); }
.ra-janela:active{ transform:scale(.97); }
.ra-janela svg{ flex-shrink:0; }
.ra-janela.active{ background:var(--gold); color:#3a2900; box-shadow:0 2px 10px rgba(242,183,5,.35); }
.ra-janela-refresh{ background:transparent; color:var(--ink-dim); border:1.5px solid var(--card-line); box-shadow:none; }
.ra-janela-refresh:hover{ border-color:var(--mint-dim); color:var(--mint); box-shadow:none; transform:none; }
@media (max-width:480px){
  .ra-janelas{ gap:8px; }
  .ra-janela{ flex:1 1 40%; justify-content:center; padding:11px 10px; font-size:13px; }
  .ra-janela-refresh{ flex:1 1 100%; }
}

/* Erre selecionado visível (27/10): o botão clicado recebia .active, mas
   .chip.gold.active tinha exatamente as mesmas cores do .chip.gold — o
   marcado ficava indistinguível dos demais. Só nos Erres, o selecionado
   vira verde (a cor de "ativo" do painel); o dourado da Lotofácil ativa e
   dos botões do Rastreador não muda. Vale em todas as larguras. */
#erreChips .chip.active{ background:var(--mint); border-color:var(--mint); color:#0e2f24; }

/* Card Extra no final do painel (27/10): o seletor de loterias saiu do topo
   e virou seção de destaque — borda dourada, degradê dourado sutil e selo
   EXTRA ao lado do título. O comportamento dos botões não muda. */
.card-extra{ border:2px solid var(--gold); background:linear-gradient(180deg, rgba(242,183,5,.10), var(--card) 60%); }
.card-extra h2{ color:var(--gold); }
.extra-badge{ display:inline-block; background:var(--gold); color:#3a2900; font-family:'Inter',sans-serif; font-weight:700; font-size:11px; letter-spacing:1px; padding:4px 10px; border-radius:999px; margin-right:10px; vertical-align:middle; }

/* Extra sem espaço morto embaixo (27/10): .chips carrega margin-bottom de
   22px (era o respiro quando os chips ficavam no topo da página); dentro do
   card, essa margem somava com o padding do card e deixava uma faixa vazia
   no fim. Zerada só aqui — o card termina no padding normal, igual aos
   demais. */
.card-extra .chips{ margin-bottom:0; }