:root {
  --fundo: #0e0e10; --painel: #161619; --painel2: #1d1d21; --linha: #2a2a30; --linha2: #34343b;
  --texto: #ededf0; --suave: #9b9ba6; --apagado: #6c6c76;
  --a: #e5484d; --b: #4c6ef5;          /* Lula (PT) e Flávio (PL); o app troca pelos do config */
  --aviso: #f5c542;
  --serifa: Newsreader, Georgia, 'Times New Roman', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.45 Inter, system-ui, -apple-system, sans-serif; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h3 { font-size: 15px; font-weight: 600; }
.suave { color: var(--suave); }
.nota { color: var(--apagado); font-size: 12px; margin: 10px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--painel2); border: 1px solid var(--linha); color: var(--texto); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--aviso); }
.num { font-variant-numeric: tabular-nums; }

.faixa-teste { background: #2a2410; color: #f5dc8a; text-align: center; font-size: 13px; padding: 7px 16px; border-bottom: 1px solid #4a3f17; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 16px 24px; padding: 14px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); }
.marca h1 { font-family: var(--serifa); font-size: 26px; letter-spacing: -.01em; line-height: 1.1; }
.marca h1 span { color: var(--suave); }
.status { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; color: var(--suave); font-size: 13px; margin-left: auto; }
.status b { color: var(--texto); font-weight: 600; }
.ao-vivo::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8b8b95; margin-right: 7px; vertical-align: 1px; }
.ao-vivo.vivo::before { background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.2); }
.pessoas { display: inline-flex; align-items: center; gap: 6px; }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); animation: pulso 2s infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
.anuncio-topo { display: flex; flex-direction: column; justify-content: center; text-decoration: none; border: 1px dashed var(--linha2); border-radius: 10px; padding: 5px 14px; min-width: 170px; }
.anuncio-topo small, .anuncio-bloco small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.anuncio-topo b { font-weight: 600; font-size: 13px; }

/* ---------- grade ---------- */
.grade { display: grid; gap: 14px; padding: 14px 20px; max-width: 1600px; margin: 0 auto; align-items: start;
  grid-template-columns: 330px minmax(0, 1fr) 320px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.placar { grid-area: placar; } .mapa-cartao { grid-area: mapa; } .grafico-cartao { grid-area: grafico; }
.mercados { grid-area: mercados; } .regioes { grid-area: regioes; } .eventos { grid-area: eventos; }
.superchat { grid-area: superchat; } .anuncio-bloco { grid-area: anuncio; }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; min-width: 0; }
.cartao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cartao-cab .suave { font-size: 12px; }
.cartao > h3 { margin-bottom: 10px; }

@media (max-width: 1180px) {
  .col { display: contents; }
  .grade { grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "placar mercados" "mapa mapa" "grafico regioes" "eventos superchat" "eventos anuncio"; }
}
@media (max-width: 760px) {
  .topo { padding: 12px 16px; }
  .marca h1 { font-size: 22px; }
  .status { margin-left: 0; width: 100%; }
  .anuncio-topo { display: none; }
  .grade { padding: 12px 16px; gap: 12px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "placar" "mapa" "mercados" "regioes" "grafico" "eventos" "superchat" "anuncio"; }
}

/* ---------- placar ---------- */
.placar-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; flex-wrap: wrap; }
.manchete { font-family: var(--serifa); font-size: 27px; line-height: 1.18; margin: 14px 0 16px; letter-spacing: -.01em; }
.manchete .ca { color: var(--a); } .manchete .cb { color: var(--b); }
.duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cand.dir { align-items: flex-end; text-align: right; }
.cand-id { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.cand.dir .cand-id { flex-direction: row-reverse; }
.foto { width: 52px; height: 56px; border-radius: 6px; object-fit: cover; object-position: top; background: var(--painel2); flex: none; }
.foto.a { box-shadow: inset 0 -3px 0 var(--a); background: color-mix(in srgb, var(--a) 70%, #000); }
.foto.b { box-shadow: inset 0 -3px 0 var(--b); background: color-mix(in srgb, var(--b) 70%, #000); }
.cand-nome { font-weight: 600; font-size: 14px; line-height: 1.2; }
.cand-partido { font-size: 12px; }
.cand-partido.a { color: var(--a); } .cand-partido.b { color: var(--b); }
.cand-pct { font-family: var(--serifa); font-size: 46px; line-height: 1; margin-top: 12px; letter-spacing: -.02em; }
.cand-pct sup { font-size: 16px; vertical-align: 22px; margin-left: 1px; }
.cand.a .cand-pct sup { color: var(--a); } .cand.b .cand-pct sup { color: var(--b); }
.cand-votos { color: var(--suave); font-size: 12px; }
.selo { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; margin-top: 4px; background: #183d24; color: #8ee6a8; }
.barra-wrap { margin: 18px 0 6px; }
.barra-meta { text-align: center; font-size: 11px; color: var(--suave); height: 14px; position: relative; }
.barra { position: relative; height: 8px; background: var(--painel2); border-radius: 4px; margin-top: 2px; }
.barra i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.barra .ba { left: 0; background: var(--a); } .barra .bb { right: 0; background: var(--b); }
.barra .meio { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--texto); border-radius: 1px; }
.faltam { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); margin-top: 7px; gap: 8px; }
.linhas, .numeros { margin: 14px 0 0; }
.linhas div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linha); font-size: 13px; }
.linhas dt { color: var(--suave); } .linhas dd { margin: 0; text-align: right; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--linha); padding-top: 12px; }
.numeros dt { font-size: 11px; color: var(--suave); } .numeros dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }

/* ---------- mapa ---------- */
.mapa-cartao { position: relative; padding: 12px; display: flex; flex-direction: column; }
.mapa-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.abas { display: inline-flex; background: var(--painel2); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; }
.abas button { background: none; border: 0; color: var(--suave); font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.abas button[aria-selected="true"] { background: var(--linha2); color: var(--texto); }
.abas button:focus-visible, .zoom button:focus-visible { outline: 2px solid var(--aviso); outline-offset: 1px; }
.legenda { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }
.legenda .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legenda .escala { display: inline-flex; gap: 2px; vertical-align: -1px; margin-right: 6px; }
.legenda .escala i { width: 14px; height: 8px; border-radius: 1px; }
.legenda b { color: var(--texto); font-weight: 600; }
.mapa { position: relative; min-height: 200px; margin-top: 8px; overflow: hidden; touch-action: pan-y; border-radius: 8px; }
.mapa.zoomado { touch-action: none; cursor: grab; }
.mapa svg { display: block; width: 100%; height: auto; max-height: 82vh; }
.mapa-carregando { color: var(--suave); padding: 40px; text-align: center; }
#gMun path { stroke: var(--fundo); stroke-width: .7; stroke-linejoin: round; }
.modo-estados #gMun path { stroke-width: 0; }
#gMun path.foco { stroke: #fff; stroke-width: 3; }
.divisas { fill: none; stroke: #0b0b0d; stroke-width: 3.2; stroke-linejoin: round; pointer-events: none; }
.contorno { fill: none; stroke: #4a4a52; stroke-width: 2; pointer-events: none; }
.rot text { font-family: Inter, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-linejoin: round; pointer-events: none; }
.rot .sig { font-weight: 700; }
.rot .pc { font-weight: 500; }
.rot .linha { stroke: #6c6c76; fill: none; }
.rot .caixa { rx: 6; }
.rot .caixa-txt { stroke: none; }
.zoom { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linha2); background: rgba(22,22,25,.9); color: var(--texto); font-size: 17px; cursor: pointer; line-height: 1; }
.dica { position: absolute; display: none; z-index: 5; pointer-events: none; background: rgba(14,14,16,.97); border: 1px solid var(--linha2); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; min-width: 190px; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.dica .t { font-weight: 600; } .dica .s { color: var(--suave); font-size: 12px; margin-bottom: 6px; }
.dica .l { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dica .l span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); }

/* ---------- gráfico ---------- */
.legenda-serie { display: flex; gap: 14px; font-size: 12px; color: var(--suave); margin: -4px 0 6px; }
.legenda-serie span::before { content: ''; display: inline-block; width: 12px; height: 2px; vertical-align: 3px; margin-right: 6px; background: var(--c); }
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .eixo { font-size: 11px; fill: var(--apagado); font-family: Inter, sans-serif; }
.grafico .grade-l { stroke: var(--linha); stroke-width: 1; }
.grafico .cinquenta { stroke: var(--linha2); stroke-dasharray: 3 3; }
.grafico .serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .mira { stroke: var(--suave); stroke-width: 1; }
.grafico .dica-g { position: absolute; pointer-events: none; display: none; background: rgba(14,14,16,.97); border: 1px solid var(--linha2); border-radius: 8px; padding: 7px 9px; font-size: 12px; white-space: nowrap; }

/* ---------- mercados ---------- */
.mercado { padding: 10px 0; border-top: 1px solid var(--linha); }
.mercado:first-child { border-top: 0; padding-top: 0; }
.mercado-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--suave); margin-bottom: 6px; gap: 8px; }
.mercado-cab b { color: var(--texto); font-size: 13px; }
.mercado-cab a { color: var(--suave); }
.odd { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 4px 0; }
.odd .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.odd .nm::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.odd .pr { font-family: var(--serifa); font-size: 24px; line-height: 1; }
.odd .vr { font-size: 12px; min-width: 52px; text-align: right; }
.vr.sobe { color: #4ade80; } .vr.desce { color: #f87171; } .vr.igual { color: var(--apagado); }
.odd-barra { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; margin: 6px 0 4px; }
.odd-barra i { display: block; }
.mercado .vol { font-size: 11px; color: var(--apagado); }
.indisp { color: var(--suave); font-size: 13px; }

/* ---------- regiões ---------- */
.reg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.reg:first-child { border-top: 0; padding-top: 0; }
.reg .nm { font-weight: 500; }
.reg .ld { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 13px; }
.reg .ld img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; }
.reg .ld .pt { font-size: 11px; }
.reg .ld b { font-weight: 600; min-width: 46px; text-align: right; }
.reg .ap { font-size: 11px; color: var(--apagado); }
.reg .mini { display: flex; height: 4px; border-radius: 2px; overflow: hidden; gap: 2px; align-self: center; width: 110px; justify-self: end; background: var(--painel2); }
.reg .mini i { display: block; }

/* ---------- feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 44px 30px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 13px; }
.feed li:first-child { border-top: 0; padding-top: 0; }
.feed .h { color: var(--apagado); font-size: 12px; padding-top: 2px; }
.feed .av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--painel2); }
.feed .anel { width: 24px; height: 24px; margin: 2px; border-radius: 50%; border: 3px solid var(--texto); }
.feed .ca { color: var(--a); } .feed .cb { color: var(--b); }
.feed .vazio { display: block; color: var(--suave); }

/* ---------- super chat / anúncio ---------- */
.superchat-vazio { border: 1px dashed var(--linha2); border-radius: 10px; padding: 14px; }
.superchat-vazio p { margin: 0 0 4px; }
.anuncio-bloco { display: flex; flex-direction: column; gap: 4px; justify-content: center; border-style: dashed; }
.anuncio-bloco b { font-family: var(--serifa); font-size: 22px; font-weight: 500; }

.rodape { max-width: 1600px; margin: 0 auto; padding: 8px 20px 40px; color: var(--suave); font-size: 12px; }
.rodape p { margin: 4px 0; }
@media (max-width: 760px) { .rodape { padding: 8px 16px 32px; } }