:root {
  --fundo: #f4f5f8; --cartao: #fff; --texto: #161a22; --fraco: #5d6675; --borda: #e1e5ee;
  --flavio: #1f8a4c; --lula: #c8322b; --alerta: #ffd43b; --alerta-texto: #2b2300;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #11141b; --cartao: #1b202b; --texto: #eceff4; --fraco: #9aa4b6; --borda: #2c3342; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;
}
.faixa {
  background: var(--alerta); color: var(--alerta-texto); text-align: center;
  font-weight: 700; padding: 10px 16px; font-size: .95rem; position: sticky; top: 0; z-index: 2;
}
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 2rem; margin: 8px 0 4px; text-align: center; }
.sub { text-align: center; color: var(--fraco); margin: 0 0 24px; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voto {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px;
  background: var(--cartao); color: var(--texto); border: 2px solid var(--borda); border-radius: 16px;
  font: inherit; cursor: pointer; transition: transform .08s, border-color .15s;
}
.voto:hover { border-color: currentColor; }
.voto:active { transform: scale(.97); }
.voto:disabled { opacity: .55; cursor: wait; }
.sigla {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.4rem;
}
.voto.flavio .sigla { background: var(--flavio); }
.voto.lula .sigla { background: var(--lula); }
.nome { font-weight: 700; text-align: center; }
.acao {
  padding: 6px 22px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .95rem;
}
.voto.flavio .acao { background: var(--flavio); }
.voto.lula .acao { background: var(--lula); }
.aviso { min-height: 1.5em; text-align: center; margin: 14px 0; font-weight: 600; }
.aviso.erro { color: var(--lula); }
.placar {
  position: relative; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 16px; padding: 18px 18px 14px; overflow: hidden;
}
.placar h2 { margin: 0 0 14px; font-size: 1.15rem; }
.selo {
  position: absolute; top: 14px; right: -38px; transform: rotate(35deg);
  background: var(--alerta); color: var(--alerta-texto); font-weight: 800; font-size: .7rem;
  padding: 4px 44px; letter-spacing: .04em;
}
.linha { margin-bottom: 14px; }
.rotulo { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; margin-bottom: 5px; }
.barra { height: 18px; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.enche { height: 100%; width: 0; border-radius: 999px; transition: width .4s ease; }
.enche.flavio { background: var(--flavio); }
.enche.lula { background: var(--lula); }
.total { margin: 6px 0 0; color: var(--fraco); font-size: .9rem; text-align: right; }
.rodape { color: var(--fraco); font-size: .82rem; text-align: center; margin-top: 22px; }