* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #151515; }
header { padding: 12px 20px; border-bottom: 1px solid #e5e5e5; }
header h1 { margin: 0; font-size: 18px; }
header p { margin: 2px 0 0; color: #777; font-size: 12px; }
main { display: flex; height: calc(100vh - 60px); }
#panel { width: 420px; padding: 16px; overflow-y: auto; border-right: 1px solid #e5e5e5; }
#mapa { flex: 1; }
#panel input[type=search], #panel select { width: 100%; padding: 8px; margin-bottom: 8px;
  border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
#panel label { display: block; margin-bottom: 4px; }
#licznik { margin: 12px 0 8px; font-weight: 600; }
#eksport { width: 100%; padding: 8px; margin-bottom: 12px; cursor: pointer;
  background: #151515; color: #c5ff00; border: 0; border-radius: 4px; font-size: 14px; }
#lista { list-style: none; margin: 0; padding: 0; }
#lista li { padding: 10px 0; border-bottom: 1px solid #eee; cursor: pointer; }
#lista li:hover { background: #fafafa; }
#lista .nazwa { font-weight: 600; }
#lista .adres { color: #666; font-size: 12px; }
#lista .kontakt { font-size: 12px; margin-top: 2px; }
#lista .kontakt a { color: #151515; }
.brak { color: #b00; }

/* Odbarwienie kafli — mapa ma byc tlem, nie bohaterem. Filtr obejmuje TYLKO
   warstwe kafli, wiec pinezki zachowuja kolory marki. */
.leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.06); }

/* Pinezka i klaster — kolory marki, zero grafiki z zewnatrz */
.pinezka span { display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #151515; border: 3px solid #c5ff00; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pinezka:hover span { background: #c5ff00; border-color: #151515; }
.marker-cluster { background: rgba(21,21,21,.25); }
.marker-cluster div { background: #151515; color: #c5ff00; font-weight: 600;
  font-family: system-ui, sans-serif; }
.leaflet-popup-content { font: 13px/1.5 system-ui, sans-serif; }