:root {
  --verde: #00843D;
  --verde-escuro: #006B32;
  --verde-claro: #E6F4EC;
  --amarelo: #FFD500;
  --azul: #1D4E9E;
  --zap: #1FA855;
  --bg: #F5F7F6;
  --card: #FFFFFF;
  --texto: #14201A;
  --texto-2: #4A5A51;
  --borda: #DDE5E0;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
  --raio: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde-claro: #12301F;
    --bg: #0E1411;
    --card: #17201B;
    --texto: #EAF1EC;
    --texto-2: #A7B6AD;
    --borda: #2A3630;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.topo {
  background: linear-gradient(135deg, #123A66, #0A284A);
  border-bottom: 4px solid var(--amarelo);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.topo-inner > div { flex: 1; min-width: 0; }
.btn-topo-share {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--amarelo); color: #0A284A; border: 0; border-radius: 999px;
  padding: 9px 14px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.btn-topo-share:active { transform: scale(.96); }
@media (max-width: 380px) { .btn-topo-share span { display: none; } .btn-topo-share { padding: 10px; } }
.topo-inner, main, .rodape { max-width: 640px; margin: 0 auto; }
.topo-inner { display: flex; align-items: center; gap: 12px; }
.topo img { display: block; }
.topo h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.topo h1 { display: flex; align-items: center; gap: 6px; }
.sinal { width: 15px; height: 26px; color: var(--amarelo); }
.sinal circle { fill: currentColor; }
.sinal path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .sinal path { animation: onda 1.8s ease-in-out infinite; }
  .sinal path:nth-of-type(2) { animation-delay: .2s; }
  .sinal path:nth-of-type(3) { animation-delay: .4s; }
}
@keyframes onda { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
.topo p { margin: 0; font-size: .9rem; color: var(--amarelo); font-weight: 600; }

main { padding: 0 16px 24px; }

.intro { padding: 18px 0 6px; }
.intro p { margin: 0 0 14px; color: var(--texto-2); }
.passos { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; font-size: .85rem; font-weight: 600; }
.passos li { flex: 1; display: flex; align-items: center; gap: 6px; }
.passos span {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amarelo); color: #3A3000; display: grid; place-items: center; font-size: .8rem;
}

.instalar {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px;
  background: var(--card); border: 1px solid var(--verde); border-radius: var(--raio); position: relative;
}
.instalar img { flex: none; border-radius: 9px; }
.instalar div { flex: 1; min-width: 0; font-size: .88rem; }
.instalar p { margin: 2px 0 0; color: var(--texto-2); font-size: .82rem; }
.instalar .btn { flex: none; padding: 8px 16px; }
.instalar-fechar { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--texto-2); font-size: .8rem; cursor: pointer; padding: 4px; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--borda); background: var(--card); color: var(--texto);
  padding: 7px 14px; border-radius: 999px; font: inherit; font-size: .88rem; cursor: pointer;
}
.chip.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }

.lista { display: grid; gap: 14px; padding-top: 12px; }
.carregando { color: var(--texto-2); text-align: center; }

.card {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra); scroll-margin-top: 90px;
}
.card.alvo { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.card.feito { opacity: .75; }
.card-meta { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
.badge { background: var(--verde-claro); color: var(--verde); font-weight: 700; padding: 3px 9px; border-radius: 6px; }
@media (prefers-color-scheme: dark) { .badge { color: #6FD39B; } }
.tipo { color: var(--texto-2); }
.titulo { font-size: 1.08rem; line-height: 1.3; margin: 10px 0 6px; }
.resumo { margin: 0 0 8px; color: var(--texto-2); font-size: .94rem; }
.posicao {
  margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: #FFF8D6; border-left: 4px solid var(--amarelo); color: #2E2600;
}
.posicao-voto { margin: 0; font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; }
.posicao-motivo { margin: 2px 0 0; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .posicao { background: #2E2A12; color: #FFF3B8; } }
.placar { margin: 10px 0 4px; font-size: .84rem; }
.placar-status { margin: 0 0 6px; font-weight: 700; font-size: .9rem; }
.placar-status.bom { color: var(--verde); }
.placar-status.alerta { color: #B54708; }
@media (prefers-color-scheme: dark) { .placar-status.bom { color: #6FD39B; } .placar-status.alerta { color: #F5B262; } }
.placar-barra { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--borda); gap: 2px; }
.placar-barra span { display: block; height: 100%; }
.placar-barra .nosso { background: var(--verde); }
.placar-barra .outro { background: #C8D3CD; }
@media (prefers-color-scheme: dark) { .placar-barra .outro { background: #46554D; } }
.placar-legenda { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.placar-legenda b { color: var(--texto); }
.placar-fonte { margin: 3px 0 0; font-size: .74rem; color: var(--texto-2); }
.acao { margin: 0; font-size: .88rem; font-weight: 600; }
.acao::before { content: "Como votar: "; font-weight: 400; color: var(--texto-2); }
.prazo, .contagem { margin: 6px 0 0; font-size: .85rem; color: var(--texto-2); }

.acoes { margin-top: 14px; display: grid; gap: 8px; }
.acoes-sec { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 0;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn-sm { min-height: 40px; padding: 8px 6px; font-size: .84rem; font-weight: 600; }
.btn-votar { background: var(--verde); color: #fff; font-size: 1rem; }
.btn-votar:active { background: var(--verde-escuro); }
.btn-zap { background: var(--zap); color: #fff; }
.btn-sec { background: var(--verde-claro); color: var(--texto); }
.btn-feito[aria-pressed="true"] { background: var(--amarelo); color: #3A3000; }

.convite {
  margin-top: 24px; padding: 20px 16px; text-align: center; border-radius: var(--raio);
  background: var(--card); border: 1px dashed var(--verde);
}
.convite h2 { margin: 0 0 4px; font-size: 1.1rem; }
.convite p { margin: 0 0 14px; color: var(--texto-2); }
.convite .btn { width: 100%; }

.sugerir { border-style: solid; border-color: var(--borda); }
.sugerir .btn { width: 100%; }

.dialogo {
  width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0;
  border: 0; border-radius: var(--raio); background: var(--card); color: var(--texto);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dialogo::backdrop { background: rgba(5, 20, 38, .6); }
.dialogo form { display: grid; gap: 6px; padding: 18px 16px 16px; }
.dlg-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dlg-cab h2 { margin: 0; font-size: 1.15rem; }
.dlg-fechar { border: 0; background: none; color: var(--texto-2); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }
.dialogo label { font-size: .86rem; font-weight: 600; margin-top: 6px; }
.dialogo .opc { font-weight: 400; color: var(--texto-2); }
.dialogo input, .dialogo select, .dialogo textarea {
  font: inherit; font-size: 1rem; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--bg); color: var(--texto);
}
.dialogo textarea { resize: vertical; }
.dialogo .btn { margin-top: 12px; }
.turnstile { margin-top: 10px; min-height: 0; }
.pote { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.erro-form { margin: 6px 0 0; color: #C0392B; font-size: .88rem; }

.rodape {
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
  font-size: .8rem; color: var(--texto-2);
}
.rodape p { margin: 8px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #14201A; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: calc(100% - 32px);
}