* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, Segoe UI, Roboto, sans-serif; }
/* убираем логотип Leaflet с флагом намертво (на случай кэша JS) */
.leaflet-control-attribution svg,
.leaflet-attribution-flag { display: none !important; }
.leaflet-control-attribution a[href*="leafletjs"] { display: none !important; }
#map { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; }
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 1000;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--tg-theme-bg-color, #fff);
  border-bottom: 1px solid rgba(0,0,0,.1);
}
#topbar select, #topbar button {
  height: 32px; border-radius: 8px; border: 1px solid #ccc;
  background: #f5f5f5; font-size: 14px; padding: 0 10px; cursor: pointer;
}
#topbar button { background: #2ea6ff; color: #fff; border: none; }
#legend { font-size: 11px; color: #888; margin-left: auto; white-space: nowrap; }
.marker-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.m-GREEN { background: #2ecc40; }
.m-YELLOW { background: #ffdc00; }
.m-RED { background: #ff4136; }
.m-UNKNOWN { background: #aaaaaa; }
@media (max-width: 480px) { #legend { display: none; } }