* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, sans-serif;
  background: #0f1115; color: #f5f5f5; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
}
h1 { font-size: 1.4rem; margin: 8px 0 4px; }
p.sub { color: #9aa0a6; margin: 0 0 24px; text-align: center; }
button {
  font-size: 1.15rem; font-weight: 600; padding: 18px 24px;
  border: none; border-radius: 16px; background: #1b5e20; color: #fff;
  width: 100%; max-width: 360px; cursor: pointer;
}
button:active { transform: scale(0.98); }
/* Pesquisa de morada */
.busca { display: flex; gap: 8px; width: 100%; max-width: 360px; margin-top: 14px; }
.busca input {
  flex: 1; font-size: 1rem; padding: 14px 16px; border-radius: 14px;
  border: 1px solid #2a2f3a; background: #171a21; color: #f5f5f5;
}
.busca input::placeholder { color: #9aa0a6; }
.busca button { width: auto; padding: 14px 18px; font-size: 1.15rem; }
.resultados {
  list-style: none; padding: 0; margin: 10px 0 0; width: 100%; max-width: 360px;
}
.resultados li {
  padding: 12px 14px; border: 1px solid #2a2f3a; border-radius: 12px;
  margin-bottom: 6px; background: #171a21; color: #c8cdd4; font-size: 0.9rem;
  cursor: pointer; line-height: 1.35;
}
.resultados li:hover, .resultados li:active { background: #1e2330; color: #fff; }
#estado { margin-top: 18px; color: #9aa0a6; min-height: 1.4em; text-align: center; }
#cartao {
  display: none; margin-top: 22px; width: 100%; max-width: 360px;
  border-radius: 18px; padding: 22px; text-align: center;
}
#cartao .grande { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
#cartao .info { font-size: 1rem; opacity: 0.95; }
.pago      { background: #7f1d1d; }
.residentes{ background: #92500e; }
.livre     { background: #14532d; }
.nao_mapeado { background: #1e3a5f; }
.outro     { background: #374151; }
.exemplo { margin-top: 26px; }
.exemplo a { color: #7aa2f7; font-size: 0.9rem; }
.cidades { color: #9aa0a6; font-size: 0.85rem; margin: 0 0 12px; text-align: center; max-width: 420px; }
.cidades b { color: #c8cdd4; font-weight: 600; }
.listas { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#mapa {
  width: 100%; max-width: 720px; height: 68vh; min-height: 420px; max-height: 680px;
  margin-top: 18px;
  border-radius: 16px; overflow: hidden; border: 1px solid #2a2f3a;
}
.dica-mapa { color: #9aa0a6; font-size: 0.85rem; margin: 14px 0 0; text-align: center; }
/* tiles do mapa em modo escuro, a condizer com a app */
.leaflet-tile { filter: brightness(0.7) invert(1) contrast(0.9) hue-rotate(180deg) saturate(0.6); }
.leaflet-container { background: #0f1115; }
.leaflet-control-attribution { background: rgba(15,17,21,0.7) !important; color: #9aa0a6 !important; }
.leaflet-control-attribution a { color: #7aa2f7 !important; }
.legenda-zonas {
  background: rgba(15,17,21,0.85); color: #c8cdd4; padding: 6px 9px;
  border-radius: 8px; font-size: 0.75rem; line-height: 1.6;
  border: 1px solid #2a2f3a;
}
.legenda-zonas i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 2px; opacity: 0.85; vertical-align: -1px; }
.legenda-zonas i.cor-pago { background: #ef4444; }
.legenda-zonas i.cor-residentes { background: #f59e0b; }
.legenda-zonas i.cor-outro { background: #9aa0a6; }