:root {
  color-scheme: light;
  --topbar: 70px;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-soft: rgba(255, 255, 255, 0.54);
  --ink: #14202b;
  --muted: #687784;
  --line: rgba(122, 139, 153, 0.28);
  --line-strong: rgba(92, 108, 122, 0.36);
  --accent: #0b6b84;
  --accent-strong: #084f62;
  --green: #207a55;
  --shadow: 0 22px 70px rgba(11, 20, 30, 0.18);
  --small-shadow: 0 10px 30px rgba(11, 20, 30, 0.13);
  --radius: 8px;
  --desktop-panel-left: 16px;
  --desktop-panel-width: 368px;
  --filter-pane-height: 42%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body,
.app-shell,
.layout {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #e9eff3;
  color: var(--ink);
  overflow: hidden;
}

button,
input {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

.app-shell,
.layout,
.map-area {
  position: relative;
}

.topbar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  height: 58px;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--small-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.brand,
.top-actions,
.brand > div {
  display: flex;
  align-items: center;
}

.brand {
  gap: 11px;
  min-width: 0;
}

.brand > div {
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(11, 20, 30, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark rect { fill: #14202b; }
.brand-mark .sector-a { fill: #23b9d1; opacity: 0.82; }
.brand-mark .sector-b { fill: #35c18b; opacity: 0.86; }
.brand-mark .sector-c { fill: #f3be55; opacity: 0.92; }
.brand-mark .mark-line { fill: none; stroke: #f8fbfd; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .mark-node { fill: #f8fbfd; stroke: rgba(20, 32, 43, 0.48); stroke-width: 1.4; }

.brand strong {
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0;
}

.brand span:not(.brand-mark) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.top-actions { gap: 8px; }

.panel-menu-button {
  flex: 0 0 auto;
}

.icon-button,
.link-button,
.filter-chip,
.site-card {
  border: 0;
  border-radius: var(--radius);
}

.icon-button {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  color: #263542;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.icon-button svg,
.search-box svg { width: 18px; height: 18px; stroke-width: 2.2; }

.icon-button:hover,
.icon-button.active {
  background: rgba(236, 249, 252, 0.88);
  border-color: rgba(11, 107, 132, 0.34);
  color: var(--accent-strong);
}

.icon-button.active { box-shadow: 0 0 0 3px rgba(11, 107, 132, 0.13); }

.map-area,
#map {
  position: absolute;
  inset: 0;
}

#map {
  width: 100%;
  height: 100%;
  background: #dfe8ed;
}

.panel,
.inspector,
.map-badges span,
.distance-label span {
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.panel {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 74px);
  left: var(--desktop-panel-left);
  bottom: 16px;
  width: min(var(--desktop-panel-width), calc(100vw - 32px));
  z-index: 520;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: transform 220ms ease, opacity 160ms ease, visibility 0s linear 0s;
}

.panel-scroll {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-resizer {
  display: none;
}

.section {
  padding: 14px;
  border-bottom: 1px solid rgba(122, 139, 153, 0.18);
}

.section:last-child { border-bottom: 0; }

.source-section { padding-bottom: 12px; }

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.section-heading h1,
.section-heading h2,
.popup-antennas h3 {
  margin: 0;
  letter-spacing: 0;
}

.section-heading h1 { font-size: 21px; line-height: 1.05; }
.section-heading h2 { font-size: 14px; line-height: 1.15; }

.section-heading p {
  margin: 5px 0 0;
  max-width: 290px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.section-heading a,
.link-button {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.link-button {
  background: transparent;
  padding: 0;
}

.data-status,
.stat,
.search-box,
.filter-chip,
.site-card,
.summary-card,
.sector-chip-grid span,
.antenna-row,
.source-record-card,
.tower-profile-card,
.tower-layer,
.loading-row {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.data-status {
  margin-top: 12px;
  padding: 10px;
  display: grid;
  gap: 2px;
}

.data-status strong { font-size: 13px; line-height: 1.25; }
.data-status span { color: var(--muted); font-size: 12px; line-height: 1.25; }

.progress-shell { margin-top: 10px; }
.progress-track { height: 5px; border-radius: 999px; overflow: hidden; background: rgba(113, 128, 141, 0.18); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--green); border-radius: inherit; transition: width 160ms ease; }

.stats-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stat { padding: 10px; }
.stat span { display: block; font-size: 20px; font-weight: 850; line-height: 1; }
.stat small { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }

.filter-section { display: grid; gap: 12px; }

.search-box {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
}

.search-box svg { color: var(--muted); flex: 0 0 auto; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; min-width: 0; }
.search-box input::placeholder { color: rgba(104, 119, 132, 0.82); }

.filter-group { display: grid; gap: 8px; }
.filter-label { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

.filter-chip {
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  color: #26333d;
}

.filter-chip small { color: var(--muted); font-size: 11px; font-weight: 850; }
.filter-chip:hover { background: rgba(255, 255, 255, 0.78); }
.filter-chip.active { color: var(--accent-strong); background: rgba(227, 246, 250, 0.86); border-color: rgba(11, 107, 132, 0.34); }

.result-section {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.result-heading { align-items: center; margin-bottom: 10px; flex: 0 0 auto; }
.site-list { min-height: 0; flex: 1 1 auto; overflow: auto; display: grid; gap: 8px; padding-right: 2px; }

.site-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px;
  text-align: left;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.site-card:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.78); }
.site-card.active { background: rgba(240, 250, 252, 0.94); border-color: rgba(11, 107, 132, 0.42); box-shadow: 0 0 0 2px rgba(11, 107, 132, 0.13); }
.site-card.nearby { background: rgba(255, 248, 231, 0.9); }

.site-card strong { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.25; }
.site-card strong span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-card small,
.empty-state { color: var(--muted); font-size: 12px; line-height: 1.36; overflow-wrap: anywhere; }

.site-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--dot, #64727e);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88), 0 0 0 3px rgba(24, 33, 42, 0.1);
}

.map-badges {
  position: fixed;
  left: 424px;
  bottom: 18px;
  z-index: 430;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}

.map-badges span {
  border-radius: 999px;
  padding: 7px 10px;
  color: #263542;
  font-size: 12px;
  font-weight: 850;
}

.inspector {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 74px);
  right: 16px;
  bottom: 16px;
  width: min(430px, calc(100vw - 32px));
  z-index: 620;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 32px));
  transition: transform 200ms ease;
}

body.inspector-open .inspector { transform: translateX(0); }
body.inspector-open .panel-backdrop { display: none; }

.inspector-header {
  min-height: 62px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(122, 139, 153, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.inspector-header strong,
.inspector-header span { display: block; }
.inspector-header strong { font-size: 15px; line-height: 1.2; }
.inspector-header span { color: var(--muted); font-size: 12px; line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }

.inspector-content { padding: 14px; overflow: auto; min-height: 0; }
.loading-row { color: var(--muted); padding: 9px 10px; font-size: 12px; font-weight: 850; margin-bottom: 10px; }
.leaflet-popup-pane { display: none; }

.tower-profile-card { padding: 11px; display: grid; gap: 10px; margin-bottom: 10px; }
.tower-profile-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.profile-dot { width: 22px; height: 22px; border-radius: 999px; background: var(--dot, #64727e); border: 2px solid rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 1px rgba(24, 33, 42, 0.16); flex: 0 0 auto; }
.tower-profile-main strong,
.tower-profile-main span { display: block; overflow-wrap: anywhere; }
.tower-profile-main strong { font-size: 14px; line-height: 1.25; }
.tower-profile-main span { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.tower-profile-badges,
.popup-tags,
.owner-bands { display: flex; flex-wrap: wrap; gap: 5px; }
.tower-profile-badges span,
.popup-tags span,
.owner-bands span { border-radius: 999px; background: rgba(237, 244, 248, 0.86); color: #285067; border: 1px solid rgba(122, 139, 153, 0.22); padding: 3px 8px; font-size: 11px; font-weight: 850; }
.tower-profile-badges span:first-child { background: var(--badge, #64727e); color: #fff; border-color: transparent; }

.detail-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.summary-card { padding: 9px; min-width: 0; display: grid; gap: 3px; }
.summary-card span { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.summary-card strong { font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; }
.summary-card small { color: var(--muted); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }

.popup-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 10px; padding-top: 10px; border-top: 1px solid rgba(122, 139, 153, 0.18); font-size: 12px; line-height: 1.35; }
.popup-grid > span { color: var(--muted); font-weight: 850; }
.popup-grid > strong { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.popup-tags { margin-top: 10px; }

.popup-antennas { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(122, 139, 153, 0.18); }
.antenna-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.antenna-heading h3,
.source-records-head h3 { font-size: 13px; margin: 0; }
.antenna-heading small,
.source-records-head small,
.tower-layers > small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.sector-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.sector-chip-grid span { padding: 7px; min-width: 0; }
.sector-chip-grid strong,
.sector-chip-grid small { display: block; overflow-wrap: anywhere; }
.sector-chip-grid strong { font-size: 13px; }
.sector-chip-grid small { color: var(--muted); font-size: 11px; line-height: 1.25; margin-top: 2px; }

.tower-layers { display: grid; gap: 8px; }
.tower-layer { overflow: hidden; }
.layer-height-marker { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: rgba(235, 241, 245, 0.72); border-bottom: 1px solid rgba(122, 139, 153, 0.18); }
.layer-height-marker span { color: #26333d; font-size: 12px; font-weight: 850; white-space: nowrap; }
.layer-height-marker i { display: block; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(104, 119, 132, 0.45), rgba(104, 119, 132, 0)); }
.layer-owners { display: grid; }
.layer-owner-row.compact { display: flex; gap: 9px; padding: 9px 10px; border-bottom: 1px solid rgba(122, 139, 153, 0.14); }
.layer-owner-row.compact:last-child { border-bottom: 0; }
.owner-color-stripe { width: 4px; border-radius: 999px; background: var(--stripe, var(--accent)); align-self: stretch; flex: 0 0 auto; }
.owner-row-main { min-width: 0; display: grid; gap: 4px; }
.owner-row-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.owner-row-header strong { font-size: 12px; line-height: 1.2; }
.owner-row-header span,
.owner-row-main small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.source-records { display: grid; gap: 7px; margin-top: 10px; }
.source-records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.source-record-card { padding: 9px; display: grid; gap: 7px; }
.source-record-title { display: grid; gap: 2px; }
.source-record-title strong { font-size: 13px; line-height: 1.15; }
.source-record-title span,
.source-record-card small { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.source-record-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.source-record-meta span { border-radius: 999px; background: rgba(236, 244, 248, 0.88); color: #285067; border: 1px solid rgba(122, 139, 153, 0.18); padding: 3px 7px; font-size: 11px; font-weight: 850; }

.tower-icon { background: transparent; border: 0; }
.tower-dot { width: 14px; height: 14px; display: block; border-radius: 999px; background: var(--pin, #64727e); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(24, 33, 42, 0.18), 0 5px 12px rgba(24, 33, 42, 0.28); }
.tower-icon.selected .tower-dot { width: 18px; height: 18px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 7px rgba(11, 107, 132, 0.16), 0 8px 18px rgba(24, 33, 42, 0.3); }

.user-position-icon,
.distance-label { background: transparent; border: 0; }
.user-position-icon span { width: 28px; height: 28px; display: block; border-radius: 999px; background: rgba(11, 107, 132, 0.18); border: 2px solid rgba(11, 107, 132, 0.32); position: relative; box-shadow: 0 0 0 7px rgba(11, 107, 132, 0.12); }
.user-position-icon span::after { content: ""; position: absolute; inset: 7px; border-radius: 999px; background: #0b6b84; border: 2px solid #fff; }
.distance-label span { min-width: 70px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 900; }

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background-color: rgba(20, 32, 43, 0.74); color: #fff; font-size: 12px; font-weight: 850; }
.leaflet-antenna-pane path { stroke-linejoin: round; stroke-linecap: round; }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--small-shadow) !important; }
.leaflet-control-zoom a { border-color: rgba(122, 139, 153, 0.24) !important; }

.panel-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(14, 24, 32, 0.28); }
.desktop-only { display: inline-grid; }
.mobile-only { display: none; }
.hidden { display: none !important; }

@media (max-width: 1080px) and (min-width: 781px) {
  .panel { width: 350px; }
  .map-badges { left: 382px; }
  .inspector { width: min(400px, calc(100vw - 32px)); }
}

@media (max-width: 780px) {
  .topbar { left: 10px; right: 10px; height: 56px; top: max(8px, env(safe-area-inset-top)); }
  .brand span:not(.brand-mark) { display: none; }
  .mobile-only { display: inline-grid; }

  .panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(78vh, 680px);
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% - 86px));
    transition: transform 210ms ease;
    background: rgba(255, 255, 255, 0.84);
  }

  .panel::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(104, 119, 132, 0.42);
    transform: translateX(-50%);
    z-index: 1;
  }

  .panel-scroll { padding-top: 12px; }
  body.panel-open .panel { transform: translateY(0); }
  body.inspector-open .panel { transform: translateY(100%); }

  .section { padding: 13px; }
  .section-heading h1 { font-size: 18px; }
  .section-heading p { max-width: none; }
  .stats-section { gap: 7px; }
  .stat { padding: 9px; }
  .stat span { font-size: 18px; }
  .site-list { max-height: none; }

  .map-badges { left: 10px; right: 10px; bottom: 96px; }
  .map-badges span { max-width: 100%; }

  .inspector {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(78vh, 690px);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    background: rgba(255, 255, 255, 0.86);
  }

  body.inspector-open .inspector { transform: translateY(0); }
  body.panel-open .panel-backdrop,
  body.inspector-open .panel-backdrop { display: block; }
  .detail-summary-grid,
  .sector-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .popup-grid { grid-template-columns: 102px minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .panel {
    transform: translateY(calc(100% - 128px));
  }

  .map-badges {
    bottom: 138px;
  }

  body.panel-open .map-badges,
  body.inspector-open .map-badges {
    display: none;
  }
}

.top-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.brand {
  max-width: calc(100% - 102px);
}


/* Simplified control surface overrides */
.topbar {
  max-width: 520px;
  right: auto;
  width: min(var(--desktop-panel-width), calc(100vw - 32px));
}

.panel {
  width: min(var(--desktop-panel-width), calc(100vw - 32px));
}

.primary-controls {
  gap: 13px;
  padding: 13px;
}

.filter-group-header,
.result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.filter-label {
  letter-spacing: 0;
}

.chip-row {
  gap: 6px;
}

.filter-chip {
  min-height: 31px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.5);
}

.filter-chip small {
  opacity: 0.82;
}

.compact-filter .chip-row .filter-chip {
  min-width: 66px;
  justify-content: center;
}

.result-section {
  padding-top: 12px;
}

.result-heading h2 {
  font-size: 15px;
}

.result-count {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 2px;
}

.result-count strong {
  color: var(--ink);
}

.site-list {
  padding-bottom: 2px;
}

.site-card {
  background: rgba(255, 255, 255, 0.52);
}

.site-card small:nth-of-type(1) {
  color: #475867;
}

.map-badges {
  left: calc(var(--desktop-panel-left) + var(--desktop-panel-width) + 16px);
}

.leaflet-antenna-pane path {
  mix-blend-mode: multiply;
}

.leaflet-control-attribution {
  font-size: 10px;
}

@media (max-width: 1080px) and (min-width: 781px) {
  :root { --desktop-panel-width: 340px; }
  .topbar { max-width: none; }
  .panel { width: min(var(--desktop-panel-width), calc(100vw - 32px)); }
  .map-badges { left: calc(var(--desktop-panel-left) + var(--desktop-panel-width) + 10px); }
}

@media (min-width: 781px) {
  .topbar {
    max-width: none;
  }

  .primary-controls {
    flex: 0 0 clamp(180px, var(--filter-pane-height), calc(100% - 210px));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .primary-controls::-webkit-scrollbar {
    width: 8px;
  }

  .primary-controls::-webkit-scrollbar-thumb {
    background: rgba(104, 119, 132, 0.28);
    border-radius: 999px;
  }

  .panel-resizer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    position: relative;
    border-top: 1px solid rgba(122, 139, 153, 0.14);
    border-bottom: 1px solid rgba(122, 139, 153, 0.14);
    cursor: row-resize;
    touch-action: none;
  }

  .panel-resizer::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(104, 119, 132, 0.34);
    transition: background 140ms ease, width 140ms ease;
  }

  .panel-resizer:hover::before,
  .panel-resizer.dragging::before {
    width: 56px;
    background: rgba(11, 107, 132, 0.56);
  }

  body.panel-resizing {
    cursor: row-resize;
    user-select: none;
  }

  body.panel-resizing .panel {
    transition: none;
  }

  .panel-menu-button {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.56);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  .panel-menu-button.active {
    background: rgba(20, 32, 43, 0.9);
    border-color: rgba(255, 255, 255, 0.58);
    color: #ffffff;
  }

  body.panel-collapsed .panel {
    transform: translateY(calc(-100% - 180px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, opacity 140ms ease, visibility 0s linear 220ms;
  }

  body.panel-collapsed .panel-menu-button {
    background: rgba(255, 255, 255, 0.56);
    border-color: var(--line);
    color: #263542;
  }

  body.panel-collapsed .map-badges {
    left: 16px;
  }
}

@media (max-width: 780px) {
  .desktop-only { display: none !important; }

  .panel-resizer {
    display: none !important;
  }

  .topbar {
    width: auto;
    max-width: none;
    right: 10px;
  }

  .panel {
    height: min(76vh, 650px);
    transform: translateY(calc(100% - 158px));
  }

  .panel-scroll {
    padding-top: 14px;
  }

  .primary-controls {
    padding-top: 16px;
  }

  .filter-group:not(:first-of-type) {
    margin-top: 1px;
  }

  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .chip-row::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .result-section {
    padding-top: 10px;
  }

  .map-badges {
    bottom: 168px;
  }
}

@media (max-width: 420px) {
  .brand strong { font-size: 15px; }
  .brand-mark { width: 32px; height: 32px; }
  .top-actions { gap: 6px; }
  .icon-button { width: 38px; height: 38px; }
  .search-box { height: 42px; }
  .panel { transform: translateY(calc(100% - 150px)); }
  .map-badges { bottom: 158px; }
}

/* Keep mobile header controls in flex flow */

@media (max-width: 780px) {
  .topbar {
    display: flex;
    justify-content: space-between;
  }

  .top-actions {
    position: static;
    transform: none;
    margin-left: auto;
    display: flex !important;
    flex: 0 0 auto;
  }
}


/* Pin mobile actions to the viewport so they cannot be pushed off-screen by the compact header. */
@media (max-width: 780px) {
  .topbar {
    padding-right: 108px;
  }

  .top-actions {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 8px) !important;
    left: calc(100vw - 108px) !important;
    right: auto !important;
    width: 88px !important;
    transform: none !important;
    z-index: 820;
    justify-content: flex-end;
  }
}


/* Make mobile action buttons distinct from the frosted header surface. */
@media (max-width: 780px) {
  .top-actions .icon-button {
    background: rgba(20, 32, 43, 0.86);
    border-color: rgba(255, 255, 255, 0.58);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(11, 20, 30, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .top-actions .icon-button.active,
  .top-actions .icon-button:hover {
    background: rgba(11, 107, 132, 0.9);
    color: #ffffff;
  }
}

/* Mobile product pass: map-first, compact command bar, cleaner bottom sheet. */
@media (max-width: 780px) {
  :root {
    --mobile-sheet-peek: 96px;
  }

  .topbar {
    left: 10px;
    right: auto;
    width: auto;
    max-width: calc(100vw - 66px);
    height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(248, 252, 255, 0.78);
    box-shadow: 0 8px 26px rgba(11, 20, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  }

  .brand {
    gap: 9px;
    max-width: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .brand strong {
    font-size: 15px;
  }

  .top-actions {
    top: calc(max(8px, env(safe-area-inset-top)) + 5px) !important;
    left: auto !important;
    right: 10px !important;
    width: auto !important;
    gap: 6px;
  }

  .top-actions .icon-button,
  .icon-button {
    width: 42px;
    height: 42px;
  }

  .top-actions .icon-button {
    border-radius: 13px;
    background: rgba(20, 32, 43, 0.9);
  }

  .panel {
    left: 8px;
    right: 8px;
    bottom: 0;
    width: auto;
    height: var(--mobile-sheet-peek);
    border-radius: 22px 22px 0 0;
    transform: none;
    transition: height 210ms ease, transform 210ms ease;
    background: rgba(250, 252, 254, 0.92);
    box-shadow: 0 -18px 46px rgba(11, 20, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  .panel::before {
    content: none;
  }

  .sheet-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 96px;
    height: 30px;
    transform: translateX(-50%);
    z-index: 4;
    touch-action: none;
    cursor: grab;
  }

  .sheet-handle::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(104, 119, 132, 0.36);
    transform: translateX(-50%);
  }

  .panel-scroll {
    padding-top: 13px;
  }

  .primary-controls {
    padding: 17px 12px 10px;
    gap: 10px;
  }

  .search-box {
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
  }

  .search-box input {
    font-size: 16px;
  }

  .filter-label {
    font-size: 10px;
  }

  .filter-group-header {
    margin-top: 2px;
  }

  .filter-chip {
    min-height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
  }

  .filter-chip.active {
    background: rgba(225, 249, 252, 0.92);
  }

  .result-section {
    padding: 10px 12px 14px;
  }

  body:not(.panel-open):not(.panel-drag-preview) .panel .filter-group,
  body:not(.panel-open):not(.panel-drag-preview) .panel .result-section {
    visibility: hidden;
    pointer-events: none;
  }

  .result-heading {
    margin-bottom: 8px;
  }

  .site-list {
    gap: 7px;
  }

  .site-card {
    border-radius: 12px;
    padding: 10px 11px;
    background: rgba(255, 255, 255, 0.72);
  }

  .map-badges {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--mobile-sheet-peek) + 10px);
    gap: 6px;
  }

  .map-badges span {
    padding: 6px 9px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.74);
  }

  .leaflet-control-zoom {
    display: none;
  }

  .leaflet-bottom.leaflet-right {
    bottom: calc(var(--mobile-sheet-peek) + 7px);
  }

  .leaflet-control-attribution {
    margin: 0 10px 0 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 4px 14px rgba(11, 20, 30, 0.1);
  }

  body.panel-open .panel {
    height: min(79vh, 650px);
    transform: translateY(0);
  }

  body.panel-open .leaflet-bottom.leaflet-right {
    bottom: calc(min(79vh, 650px) + 7px);
  }

  body.inspector-open .panel {
    transform: translateY(100%);
  }

  body.inspector-open .leaflet-bottom.leaflet-right {
    bottom: calc(min(82vh, 700px) + 7px);
  }

  body.panel-open .map-badges,
  body.inspector-open .map-badges {
    display: none;
  }

  .inspector {
    left: 8px;
    right: 8px;
    bottom: 0;
    height: min(82vh, 700px);
    border-radius: 22px 22px 0 0;
    background: rgba(250, 252, 254, 0.94);
    box-shadow: 0 -20px 54px rgba(11, 20, 30, 0.22);
  }

  .panel.sheet-dragging,
  .inspector.sheet-dragging {
    transition: none !important;
  }

  .inspector-header {
    min-height: 70px;
    padding: 22px 12px 11px;
    touch-action: none;
  }

  .inspector-content {
    padding: 12px;
  }

  .popup-grid {
    grid-template-columns: 98px minmax(0, 1fr);
  }
}

/* Floating quick actions live outside the brand header. */
.app-shell > .top-actions {
  position: fixed;
  top: max(20px, calc(env(safe-area-inset-top) + 12px));
  right: 24px;
  z-index: 820;
  transform: none;
}

@media (max-width: 780px) {
  .app-shell > .top-actions {
    top: calc(max(8px, env(safe-area-inset-top)) + 5px) !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
  }
}