* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; }

#sidebar {
  width: 340px;
  min-width: 340px;
  height: 100vh;
  overflow-y: auto;
  padding: 16px;
  background: #f7f8fa;
  border-right: 1px solid #dfe3e8;
}
#map { flex: 1; height: 100vh; }

#sidebar h1 { font-size: 20px; margin: 0 0 2px; }
#sidebar .sub { margin: 0 0 16px; color: #667; font-size: 13px; }
#sidebar h2 { font-size: 14px; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; color: #445; }
#sidebar section { border-top: 1px solid #e6e9ee; padding-top: 6px; }
#sidebar label { display: block; font-size: 14px; padding: 3px 0; cursor: pointer; }
.hint { font-size: 12px; color: #778; margin: 2px 0 8px; }

#weights .w-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin-bottom: 6px; }
#weights .w-label { font-size: 13px; }
#weights .w-val { font-size: 12px; color: #556; width: 30px; text-align: right; }
#weights input[type=range] { grid-column: 1 / -1; width: 100%; }

button {
  margin-top: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer;
  background: #2b6cb0; color: #fff; border: none; border-radius: 5px;
}
button:hover { background: #245a94; }

#legend .row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
#legend .swatch { width: 22px; height: 12px; border-radius: 2px; display: inline-block; }

#details-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
#details-body td { padding: 2px 4px; border-bottom: 1px solid #edf0f3; }
#details-body td.k { color: #556; }
#details-body td.v { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 4px; background: #e2e6ea; overflow: hidden; }
.bar > span { display: block; height: 100%; background: #2b6cb0; }

.footer { font-size: 11px; color: #99a; margin-top: 18px; border-top: 1px solid #e6e9ee; padding-top: 8px; }
code { background: #eceff3; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

.leaflet-popup-content { font-size: 13px; }