html, body { height: 100%; margin: 0; }

#map { height: 100%; width: 100%; }

#toolbar {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

button { cursor: pointer; padding: 6px 10px; }

.row { display: inline-flex; gap: 8px; align-items: center; }

input[type="range"] { width: 160px; }

#legend {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  max-width: 260px;
}

#legend.hidden { display: none; }

.legend-title { f

#layerList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 6px;
}

.layer-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

#legend img {
  display: block;
  max-width: 240px;
  margin-top: 6px;
}