* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
body { display: flex; }
#sidebar {
  width: 300px; padding: 16px; overflow-y: auto;
  background: #f4f5f7; border-right: 1px solid #d0d3d8;
}
#sidebar h1 { font-size: 20px; margin: 0 0 12px; }
.panel { background: #fff; border: 1px solid #e0e2e6; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.panel h2 { font-size: 14px; margin: 0 0 10px; text-transform: uppercase; color: #555; }
.panel label { display: block; font-size: 13px; margin-bottom: 8px; }
.panel label.inline { display: flex; align-items: center; gap: 6px; }
.panel input { width: 100%; padding: 6px; margin-top: 2px; border: 1px solid #c4c7cc; border-radius: 4px; }
.panel label.inline input { width: auto; margin-top: 0; }
.panel button { width: 100%; padding: 8px; background: #2563eb; color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-size: 14px; }
.panel button:hover { background: #1d4ed8; }
#status { font-size: 12px; color: #444; min-height: 1em; }
#status.error { color: #b91c1c; }
#map { flex: 1; height: 100%; }
.panel button.secondary { background: #6b7280; margin-bottom: 8px; }
.panel button.secondary:hover { background: #4b5563; }
.panel button.secondary.active { background: #059669; }
.panel button.secondary.active:hover { background: #047857; }
.leaflet-container.picking,
.leaflet-container.picking .leaflet-grab,
.leaflet-container.picking .leaflet-interactive { cursor: crosshair !important; }
.panel .hint { font-size: 12px; color: #666; margin: 6px 0 0; }