#legend {
  position: absolute;
  bottom: 30px;
  left: 10px;
  background: rgba(255,255,255,0.9);
  padding: 10px;
  font: 12px/1.5 "Arial", sans-serif;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  max-width: 220px;
}

#legend h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
}

.gradient-bar {
  width: 200px;
  height: 12px;
  border: 1px solid #999;
  margin-bottom: 4px;
}

.gradient-bar.province {
  background: linear-gradient(
    to right,
    #ffffd9 0%,
    #edf8b1 16%,
    #c7e9b4 32%,
    #7fcdbb 48%,
    #41b6c4 64%,
    #2c7fb8 80%,
    #253494 100%
  );
}

.gradient-bar.district {
  background: linear-gradient(
    to right,
    #ffffd9 0%,
    #edf8b1 16%,
    #c7e9b4 32%,
    #7fcdbb 48%,
    #41b6c4 64%,
    #2c7fb8 80%,
    #253494 100%
    /* #ffffcc 0%,
    #fee6ce 16%,
    #fdae6b 32%,
    #fd8d3c 48%,
    #e6550d 64%,
    #a63603 80%,
    #7f2704 100% */
  );
}

.gradient-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 8px;
}

#legend hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 8px 0;
}

/* Improved popup styling */
.maplibregl-popup-content {
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.maplibregl-popup-content strong {
  color: #333;
  font-size: 14px;
}

/* Better legend positioning and styling */
#legend {
  min-width: 200px;
  backdrop-filter: blur(10px);
}

#current-level {
  font-weight: 500;
  text-align: center;
  color: #555 !important;
}