html, body { height: 100%; margin: 0; font: 14px/1.4 system-ui, sans-serif; }
#map { position: absolute; inset: 0; }

#panel {
  position: absolute; z-index: 1000; bottom: 24px; left: 10px;
  max-width: 260px; padding: 10px 14px;
  background: rgba(255, 255, 255, 0.95); border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
#panel h1 { font-size: 16px; margin: 0 0 6px; }
#legend { list-style: none; margin: 0; padding: 0; }
#legend li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
#legend label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.swatch { width: 18px; height: 12px; border: 1px solid #555; flex: none; }
.count { color: #666; }
.muted { color: #666; margin: 6px 0 0; font-size: 12px; }

.sel-form { display: grid; gap: 6px; min-width: 200px; }
.sel-form input, .sel-form select, .sel-form textarea { width: 100%; box-sizing: border-box; padding: 3px; }
.sel-form .buttons { display: flex; gap: 6px; }
.sel-form .danger { margin-left: auto; color: #b00; }
.sel-form .error { color: #b00; }
.note { white-space: pre-wrap; margin: 4px 0; }
.sel-info { margin: 0 0 4px; }
.admin-link { margin-top: 6px; font-size: 12px; }
.area-type { font-size: 12px; margin: 2px 0; }