body { margin:0; font-family:"Segoe UI",Arial,sans-serif; background:#eef5ee;}
header { background:#2e7d32; color:#fff; text-align:center; padding:12px; }
.citybar, .tabs {
  display:flex; justify-content:center; flex-wrap:wrap; background:#c8e6c9;
  padding:8px; border-bottom:1px solid #a5d6a7;
}
.citybar button, .tabs button {
  margin:4px; padding:8px 16px; border:none; border-radius:6px;
  background:#388e3c; color:#fff; font-weight:600; cursor:pointer;
}
.citybar button:hover, .tabs button:hover { background:#2e7d32; }
#infoPane {
  display:none; background:#fffbe6; color:#333; text-align:center;
  padding:8px; font-weight:600; border-bottom:1px solid #ccc;
}
#map { width:100%; height:80vh; }
.legend {
  position:absolute; bottom:15px; left:15px; background:#fff;
  padding:8px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.legend div { display:flex; align-items:center; margin:3px 0; }
.dot { width:12px; height:12px; border-radius:50%; margin-right:6px; border:1px solid #333;}
.city-problem-marker {
  font-size: 24px;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}