html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
body { display: flex; }
#sidebar {
  width: 300px; padding: 16px; box-sizing: border-box; overflow-y: auto;
  background: #fafafa; border-right: 1px solid #ddd;
}
#map { flex: 1; }
h1 { font-size: 18px; margin: 0 0 16px; }
label { display: block; margin-top: 12px; font-size: 12px; text-transform: uppercase; color: #666; }
select, button { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }
button { margin-top: 16px; cursor: pointer; }
#species-status { margin-top: 8px; font-size: 13px; color: #555; }
#legend { margin-top: 20px; font-size: 13px; }
#legend div { margin-bottom: 4px; }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; }
#detail { margin-top: 20px; font-size: 13px; white-space: pre-wrap; }