.cp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg, #1a1a2e);
  display: flex; flex-direction: column;
  color: var(--fg, #e0e0e0);
  font-family: inherit;
}

.cp-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem;
  background: var(--nav-bg, #16213e);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.cp-header h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.cp-filters { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cp-filters label { font-size: .85rem; white-space: nowrap; cursor: pointer; }
.cp-filters input[type="checkbox"] { margin-right: .25rem; }

.cp-btn {
  padding: .35rem .9rem; border: none; border-radius: 4px;
  cursor: pointer; font-size: .9rem; font-weight: 500;
}
.cp-btn-confirm {
  background: var(--accent, #4895ef); color: #fff;
}
.cp-btn-confirm:hover { filter: brightness(1.15); }
.cp-btn-x {
  background: transparent; color: var(--fg, #e0e0e0);
  border: none; font-size: 1.3rem; line-height: 1; padding: .2rem .5rem;
  cursor: pointer; order: 99;
}
.cp-btn-x:hover { color: #fff; }
.cp-btn-cancel {
  background: transparent; color: var(--fg, #e0e0e0);
  border: 1px solid rgba(255,255,255,.15);
}
.cp-btn-cancel:hover { background: rgba(255,255,255,.06); }
.cp-btn-clear {
  background: transparent; color: var(--fg, #e0e0e0);
  border: 1px solid rgba(255,255,255,.1);
  font-size: .8rem; padding: .25rem .6rem;
}
.cp-btn-clear:hover { background: rgba(255,255,255,.06); }

.cp-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.cp-tree-col {
  width: 300px; min-width: 220px; max-width: 380px;
  overflow-y: auto; padding: .5rem;
  border-right: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.cp-map-col { flex: 1; position: relative; }
.cp-map-col .leaflet-container { width: 100%; height: 100%; }

/* Search box */
.cp-search {
  width: calc(100% - 1rem); margin: .3rem .5rem;
  padding: .4rem .6rem; border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; background: rgba(255,255,255,.05);
  color: var(--fg, #e0e0e0); font-size: .85rem;
}
.cp-search::placeholder { color: rgba(255,255,255,.35); }
.cp-search:focus { outline: none; border-color: var(--accent, #4895ef); }

/* Select all/none bar */
.cp-sel-bar {
  display: flex; gap: .3rem; padding: .2rem .5rem;
}
.cp-sel-btn {
  padding: .15rem .5rem; border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px; background: transparent;
  color: var(--fg, #e0e0e0); font-size: .75rem; cursor: pointer;
}
.cp-sel-btn:hover { background: rgba(255,255,255,.08); }

/* County tree */
.cp-county { margin-bottom: .15rem; }
.cp-county summary {
  cursor: pointer; font-weight: 600; font-size: .9rem;
  padding: .25rem .4rem; border-radius: 3px;
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
.cp-county summary::-webkit-details-marker { display: none; }
.cp-county summary::before {
  content: '▸'; display: inline-block; width: 1em; text-align: center;
  transition: transform .15s;
}
.cp-county[open] summary::before { transform: rotate(90deg); }
.cp-county summary:hover { background: rgba(255,255,255,.05); }
.cp-county-toggle { margin-right: .35rem; cursor: pointer; }
.cp-group-count {
  font-size: .75rem; opacity: .5; margin-left: auto;
}
.cp-city-list { list-style: none; margin: 0; padding: 0 0 0 1.2rem; }
.cp-city-item {
  display: flex; align-items: center; gap: .35rem;
  padding: .15rem .3rem; border-radius: 3px;
  cursor: pointer; font-size: .85rem;
}
.cp-city-item:hover { background: rgba(255,255,255,.05); }
.cp-city-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.cp-city-name { flex: 1; }
.cp-city-pop { font-size: .75rem; opacity: .45; }
.cp-city-capital .cp-city-name { font-weight: 600; }
.cp-city-count {
  font-size: .7rem; opacity: .5; margin-left: auto;
  white-space: nowrap;
}

/* Indented content inside counties */
.cp-county > .cp-city-list,
.cp-county > .cp-sub-group {
  margin-left: .5rem;
  border-left: 2px solid rgba(255,255,255,.5);
  padding-left: .4rem;
}

/* Sub-groups (Buda/Pest within capital) */
.cp-sub-group {
  margin: .1rem 0 .1rem .5rem;
  border-left: 2px solid rgba(255,255,255,.1);
  padding-left: .4rem;
}
.cp-sub-group summary {
  font-weight: 600; font-size: .85rem;
  cursor: pointer; padding: .2rem .3rem; border-radius: 3px;
  list-style: none; display: flex; align-items: center; gap: .3rem;
}
.cp-sub-group summary::-webkit-details-marker { display: none; }
.cp-sub-group summary::before {
  content: '▸'; display: inline-block; width: .8em; text-align: center;
  transition: transform .15s; font-size: .8em;
}
.cp-sub-group[open] summary::before { transform: rotate(90deg); }
.cp-sub-group summary:hover { background: rgba(255,255,255,.05); }
.cp-sub-toggle { margin-right: .35rem; cursor: pointer; }
.cp-sub-capital { border-left-color: var(--accent, #4895ef); }
.cp-sub-capital > summary { color: var(--accent, #4895ef); font-size: .9rem; }
.cp-sub-buda { border-left-color: #f59e0b; }
.cp-sub-buda summary { color: #fbbf24; }
.cp-sub-pest { border-left-color: #8b5cf6; }
.cp-sub-pest summary { color: #a78bfa; }

/* State styling */
.cp-city-item.cp-selected { background: rgba(72, 149, 239, .12); }
.cp-city-item.cp-excluded {
  background: rgba(239, 68, 68, .08);
  text-decoration: line-through;
  opacity: .55;
}
.cp-city-item.cp-excluded .cp-city-name { color: #ef4444; }
.cp-city-item.cp-hidden { display: none; }
.cp-county.cp-county-empty { display: none; }

/* Selected count in header */
.cp-summary-count {
  font-size: .85rem; opacity: .7; white-space: nowrap;
}

/* Excluded bar at bottom — only visible when exclusions exist */
.cp-summary {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .35rem 1rem; font-size: .85rem;
  background: rgba(239, 68, 68, .06);
  border-top: 1px solid rgba(239, 68, 68, .15);
  flex-shrink: 0;
  max-height: 4.5rem; overflow-y: auto;
}
.cp-excluded-label {
  opacity: .6; white-space: nowrap; font-size: .8rem; padding-top: .1rem;
}
.cp-excluded-list {
  display: flex; gap: .3rem; flex-wrap: wrap;
  flex: 1;
}
.cp-excluded-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(239, 68, 68, .15); color: #f87171;
  padding: .1rem .45rem; border-radius: 10px;
  font-size: .75rem; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(239, 68, 68, .25);
}
.cp-excluded-chip:hover { background: rgba(239, 68, 68, .25); }
.cp-excluded-chip .cp-x { font-weight: 700; }

/* Mobile: single column, toggle tabs */
.cp-mobile-tabs {
  display: none; justify-content: center; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.cp-mobile-tab {
  flex: 1; padding: .5rem; text-align: center; border: none;
  background: transparent; color: var(--fg, #e0e0e0); cursor: pointer;
  font-size: .9rem;
}
.cp-mobile-tab.active {
  border-bottom: 2px solid var(--accent, #4895ef);
  font-weight: 600;
}

@media (max-width: 640px) {
  .cp-body { flex-direction: column; }
  .cp-tree-col {
    width: 100%; max-width: none; border-right: none;
    flex: 1 1 0; min-height: 0; overflow-y: auto;
  }
  .cp-map-col { flex: 1 1 0; min-height: 0; }
  .cp-mobile-tabs { display: flex; }
  .cp-body[data-view="map"] .cp-tree-col { display: none; }
  .cp-body[data-view="tree"] .cp-map-col { display: none; }
  .cp-header { flex-wrap: wrap; }
}