html, body { margin:0; height:100%; }
#topbar{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0b1220;
  color: #fff;
}
.brand{ font-weight:900; letter-spacing:0.2px; }
.ver{ font-weight:800; font-size:12px; opacity:0.85; margin-left:6px; padding:2px 6px; border-radius:10px; background:rgba(255,255,255,0.12); }
.controls{ display:flex; gap:10px; align-items:center; font-size:12px; flex-wrap: wrap; }
.ctl{ display:flex; gap:6px; align-items:center; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,0.08); }
.ctl.chk{ background:rgba(255,255,255,0.08); }
select{ border:0; border-radius:8px; padding:5px 8px; font-weight:800; }
#btnFit{ border:0; border-radius:10px; padding:7px 10px; font-weight:900; cursor:pointer; }
#status{ opacity:0.95; }

#map{ height: calc(100% - 54px); width: 100%; background:#e9eef6; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal.show { display: flex; }
.modal-card { width: 860px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 24px); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: grid; grid-template-columns: 360px 1fr; }
.modal-left { padding: 12px; border-right: 1px solid #eee; overflow: auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 13px; }
.modal-right { position: relative; background: #111; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 10; background: rgba(255,255,255,0.9); border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: 900; }
.modal-title { font-weight: 900; margin: 0 0 8px 0; font-size: 14px; }
table{ width:100%; border-collapse: collapse; font-size: 12px; }
td{ border-bottom: 1px solid #f0f0f0; padding: 6px 4px; vertical-align: top; word-break: break-word; }
td.k{ width: 40%; color: #666; }
.hint{ color:#666; font-size:12px; margin-top:10px; line-height:1.4; }
iframe{ width:100%; height:100%; border:0; }

/* pg_hide_leaflet_search_v1: prevent flicker (remove small black search/geocoder controls) */
.leaflet-control-search,
.leaflet-control-searchbox,
.leaflet-control-geocoder {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* pg_hide_leaflet_search_v2: safety net */
.leaflet-control-search,
.leaflet-control-searchbox,
.leaflet-control-geocoder,
.leaflet-control-geosearch,
.leaflet-control.locate,
.leaflet-control-layers {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* pg_hide_leaflet_search_v3: safety net */
.leaflet-control-search,
.leaflet-control-searchbox,
.leaflet-control-geocoder,
.leaflet-control-geosearch,
.leaflet-control .search-input,
.leaflet-control .search-button,
.leaflet-control .search-tooltip,
.leaflet-control .search-cancel {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* pg_ui_guard_v1: kill small search flicker + keep clicks working */
.leaflet-control-search,
.leaflet-control-searchbox,
.leaflet-control-geocoder,
#__pg_search_btn{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* quicklook overlay should not steal clicks */
.leaflet-image-layer,
canvas.leaflet-image-layer,
img.leaflet-image-layer{
  pointer-events:none !important;
}