:root {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --border: #dddddf;
  --text: #16181d;
  --muted: #5a6170;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
#app { display: grid; grid-template-columns: 390px 1fr; height: 100vh; }
#sidebar { overflow: auto; padding: 16px; border-right: 1px solid var(--border); background: #fafafa; }
main { min-width: 0; }
#map { height: 100vh; width: 100%; min-height: 400px; background: #eef2f7; }
h1 { font-size: 22px; margin: 0 0 10px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.45; }
.small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.grid-2, .grid-3 { display: grid; gap: 8px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.top-gap { margin-top: 8px; }
button, select, input[type="range"] {
  width: 100%; border-radius: 10px; padding: 10px; border: 1px solid var(--border); font-size: 14px;
}
button { background: #111827; color: #fff; border: none; cursor: pointer; }
button.secondary { background: #eef0f3; color: #111827; border: 1px solid var(--border); }
.status-wrap { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.toggle { display: block; margin: 8px 0; font-size: 14px; }
.legend div { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.swatch { width: 14px; height: 14px; border-radius: 999px; display: inline-block; }
.swatch.gain { background: rgba(210, 48, 48, 0.85); }
.swatch.loss { background: rgba(41, 98, 255, 0.85); }
.leaflet-popup-content { line-height: 1.45; }
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #sidebar { max-height: 48vh; border-right: none; border-bottom: 1px solid var(--border); }
  #map { height: 52vh; }
}