/* ============================================================
   OpenLock Leads — Design Tokens
   Mirrors PRODUCT.md / DESIGN.md frontmatter.
   Source of truth: DESIGN.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COLOR · Surfaces ---------- */
  --canvas:            #0A0B0F;   /* Carbon Canvas — app background */
  --surface:           #14151A;   /* first elevation */
  --surface-elevated:  #1C1D24;   /* cards, inputs */
  --surface-overlay:   #24262F;   /* hover state of cards */
  --surface-glass:     rgba(20, 21, 26, 0.72); /* blurred popovers */

  /* ---------- COLOR · Borders ---------- */
  --border-subtle:     #1F2027;
  --border:            #2A2C36;
  --border-strong:     #3A3D49;
  --border-focus:      #6E8BFF;

  /* ---------- COLOR · Text ---------- */
  --fg:                #ECEDEE;
  --fg-2:              #A1A1AA;
  --fg-3:              #71717A;
  --fg-4:              #52525B;
  --fg-on-brand:       #0A0B0F;

  /* ---------- COLOR · Brand ---------- */
  --brand:             #6E8BFF;   /* Operator Cobalt */
  --brand-hover:       #8AA1FF;
  --brand-press:       #5A78EF;
  --brand-soft:        rgba(110, 139, 255, 0.12);
  --brand-soft-strong: rgba(110, 139, 255, 0.22);

  /* ---------- COLOR · Status ---------- */
  --success:           #3FB97F;
  --success-soft:      rgba(63, 185, 127, 0.14);
  --warning:           #F5A524;
  --warning-soft:      rgba(245, 165, 36, 0.14);
  --danger:            #F26D6D;
  --danger-soft:       rgba(242, 109, 109, 0.14);
  --info:              #6E8BFF;
  --info-soft:         rgba(110, 139, 255, 0.14);

  /* ---------- COLOR · Categories ---------- */
  --cat-hotel:         #5B8DEF;   /* Hotel Sapphire */
  --cat-hotel-soft:    rgba(91, 141, 239, 0.16);
  --cat-cafe:          #E8A055;   /* Cafe Amber */
  --cat-cafe-soft:     rgba(232, 160, 85, 0.16);
  --cat-coworking:     #A78BFA;   /* Coworking Violet */
  --cat-coworking-soft:rgba(167, 139, 250, 0.16);
  --cat-school:        #4ED3B2;   /* School Mint */
  --cat-school-soft:   rgba(78, 211, 178, 0.16);
  --cat-clinic:        #F291B7;   /* Clinic Rose */
  --cat-clinic-soft:   rgba(242, 145, 183, 0.16);
  --cat-retail:        #7DD3FC;   /* Retail Sky */
  --cat-retail-soft:   rgba(125, 211, 252, 0.16);

  /* ---------- COLOR · Heatmap stops ---------- */
  --heat-0:            #1E3A8A;   /* coolest */
  --heat-1:            #6E8BFF;
  --heat-2:            #A78BFA;
  --heat-3:            #F291B7;
  --heat-4:            #F5A524;
  --heat-5:            #F26D6D;   /* hottest */

  /* ---------- COLOR · Map palette ---------- */
  --map-water:         #0A1220;
  --map-land:          #15161B;
  --map-road:          #2A2C36;
  --map-road-major:    #3A3D49;
  --map-label:         #71717A;

  /* ---------- TYPE · Families ---------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE · Sizes ---------- */
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-36: 36px;
  --t-48: 48px;

  /* ---------- TYPE · Weights ---------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---------- SPACING ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- RADII ---------- */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-full: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1:      0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-pop:    0 8px 24px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.28);
  --shadow-modal:  0 24px 64px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.35);
  --ring-focus:    0 0 0 2px rgba(110,139,255,0.55);
  --ring-danger:   0 0 0 2px rgba(242,109,109,0.55);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  240ms;

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 256px;
  --right-w:   320px;
  --topbar-h:  56px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--canvas); color:var(--fg); font-family:var(--font-sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; }
input, textarea, select { font-family:inherit; color:inherit; }
::selection { background:var(--brand-soft-strong); color:var(--fg); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; border:2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong); }

/* ── App Shell ── */
#app { display:flex; flex-direction:column; height:100vh; padding:10px; gap:10px; background:var(--canvas); }

/* ── Topbar ── */
#topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,0.04);
}
.topbar-logo { display:flex; align-items:center; min-width:200px; }
.logo-fallback { font-size:16px; font-weight:700; color:var(--fg); letter-spacing:-0.01em; }
.topbar-search { flex:1; max-width:560px; position:relative; }
.topbar-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
.topbar-sep { width:1px; height:22px; background:var(--border); margin:0 6px; }

/* ── Input ── */
.input-wrap {
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px;
  background:var(--surface-elevated); border:1px solid var(--border); border-radius:8px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input-wrap:focus-within { border-color:var(--brand); box-shadow:var(--ring-focus); }
.input-wrap input {
  border:none; background:transparent; color:var(--fg); outline:none;
  flex:1; font-size:13px;
}
.input-wrap input::placeholder { color:var(--fg-4); }
.input-icon { color:var(--fg-3); flex-shrink:0; }
.kbd {
  font-family:var(--font-mono); font-size:10px; padding:1px 5px; border-radius:4px;
  background:var(--surface); border:1px solid var(--border); color:var(--fg-3); white-space:nowrap;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:8px; font-size:13px; font-weight:500;
  padding:0 14px; height:36px; cursor:pointer; transition:background var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #8AA1FF 100%);
  color: var(--fg-on-brand);
  box-shadow: 0 2px 10px rgba(110,139,255,0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-hover) 0%, #A0B4FF 100%);
  box-shadow: 0 4px 16px rgba(110,139,255,0.40);
}
.btn-secondary { background:var(--surface-elevated); color:var(--fg); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--surface-overlay); }
.btn-ghost { background:transparent; color:var(--fg-2); border:1px solid transparent; }
.btn-ghost:hover { background:var(--surface-elevated); }
.btn-danger { background:var(--surface-elevated); color:var(--danger); border:1px solid var(--border); }
.btn-danger:hover { background:var(--danger-soft); }

/* ── Icon button ── */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:none;
  background:transparent; color:var(--fg-2);
  transition:background var(--dur) var(--ease);
}
.icon-btn:hover { background:var(--surface-elevated); }

/* ── User button ── */
.user-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--surface-elevated); border:1px solid var(--border);
  padding:4px 4px 4px 10px; border-radius:999px; color:var(--fg); font-size:13px;
}
.user-btn:hover { background:var(--surface-overlay); }
.user-avatar {
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#6E8BFF,#A78BFA);
  display:flex; align-items:center; justify-content:center;
  color:#0A0B0F; font-size:12px; font-weight:600;
}

/* ── Body layout ── */
#body-wrap { flex:1; display:flex; min-height:0; gap:10px; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow-y: auto;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease), padding var(--dur) var(--ease);
  position: relative;
}
#sidebar.collapsed {
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.workspace-selector {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--surface-elevated); border:1px solid var(--border);
  border-radius:8px; cursor:pointer;
}
.workspace-badge {
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  background:linear-gradient(135deg,#6E8BFF,#5A78EF);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#0A0B0F;
}
.workspace-name { font-size:12px; font-weight:500; line-height:1.2; color:var(--fg); }
.workspace-sub  { font-size:10px; color:var(--fg-3); }

.section-label {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px; font-size:11px; font-weight:500;
  color:var(--fg-3); text-transform:uppercase; letter-spacing:0.04em;
}
.section-action {
  background:none; border:none; color:var(--fg-3); cursor:pointer; padding:2px;
  display:flex; align-items:center;
}
.section-action:hover { color:var(--fg-2); }

.sidebar-divider { height:1px; background:var(--border-subtle); }

/* ── Category toggles ── */
#category-list { display:flex; flex-direction:column; gap:2px; }

.cat-toggle {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 10px; border-radius:8px; border:none;
  background:transparent; color:var(--fg-2); font-size:13px; text-align:left;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-toggle:hover { background:var(--surface-elevated); }
.cat-toggle.active { background:var(--brand-soft); color:#C2CFFF; }
.cat-toggle .cat-emoji { width:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cat-toggle .cat-emoji svg { width:16px; height:16px; }
.cat-toggle .cat-name  { flex:1; }
.cat-toggle .cat-count { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
.cat-toggle.active .cat-count { color:#A8B7FF; }

/* ── Saved searches ── */
#saved-searches-list { display:flex; flex-direction:column; gap:2px; }

.saved-search-item {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:6px 10px; border-radius:8px; border:none;
  background:transparent; color:var(--fg-2); font-size:12px; text-align:left;
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.saved-search-item:hover { background:var(--surface-elevated); color:var(--fg); }
.saved-search-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); flex-shrink:0; }
.saved-search-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-search-del {
  background:none; border:none; color:var(--fg-4); cursor:pointer; padding:2px 4px;
  border-radius:4px; opacity:0; transition:opacity var(--dur);
}
.saved-search-item:hover .saved-search-del { opacity:1; }
.saved-search-del:hover { color:var(--danger); }

/* ── Sidebar help ── */
.sidebar-help {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; background:var(--surface-elevated);
  border:1px solid var(--border); border-radius:10px;
}

/* ── Panel collapse reveal buttons ── */
.panel-reveal-btn {
  position: absolute;
  z-index: 200;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--fg-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: var(--shadow-pop);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.panel-reveal-btn:hover { background: var(--surface-overlay); color: var(--fg); }
.panel-reveal-btn.left  { left: -11px; }
.panel-reveal-btn.right { right: -11px; }

/* panel collapse toggle inside panels */
.panel-collapse-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--fg-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 10;
}
#sidebar:hover .panel-collapse-btn,
#right-panel:hover .panel-collapse-btn { opacity: 1; }
.panel-collapse-btn:hover { background: var(--surface-overlay); color: var(--fg-2); }
#sidebar .panel-collapse-btn   { right: -10px; }
#right-panel .panel-collapse-btn { left: -10px; }

/* floating reveal when panel collapsed */
.panel-float-reveal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2000;
  width: 28px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-overlay);
  color: var(--fg-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
  transition: background var(--dur), color var(--dur), transform var(--dur);
}
.panel-float-reveal:hover { background: var(--surface-glass); color: var(--fg); transform: translateY(-50%) scale(1.08); }
.panel-float-reveal.left  { left: 16px; }
.panel-float-reveal.right { right: 16px; }
.panel-float-reveal[hidden] { display: none; }

/* ── Main ── */
#main {
  flex:1; display:flex; flex-direction:column; min-width:0; gap:12px;
}

#map-header {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.header-actions { margin-left:auto; display:flex; gap:6px; }

/* ── Map ── */
#map-wrap {
  flex:1; position:relative; min-height:480px;
  border-radius:12px; overflow:hidden; border:1px solid var(--border);
}

#map { height:100%; width:100%; background:#15161B; }

/* ── Empty state ── */
#empty-state {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:#15161B; z-index:10;
  pointer-events:none;
}
#empty-state.hidden { display:none; }
.empty-icon { display:flex; align-items:center; justify-content:center; opacity:0.4; color:var(--fg-4); }
.empty-title { font-size:16px; font-weight:500; color:var(--fg-2); }
.empty-sub   { font-size:13px; color:var(--fg-3); text-align:center; max-width:300px; }

/* ── Loader ── */
#map-loader {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,15,0.5); backdrop-filter:blur(4px);
}
#map-loader[hidden] { display:none; }
.spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--brand);
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Right Panel ── */
#right-panel {
  width: var(--right-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease);
  position: relative;
}
#right-panel.collapsed {
  width: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.panel-tabs {
  height:48px; flex-shrink:0;
  padding:6px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:4px;
  background: var(--surface);
}
.panel-tab {
  font-size:12px; font-weight:500; color:var(--fg-3);
  padding:5px 12px; border-radius:8px; cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space:nowrap;
}
.panel-tab:hover:not(.active) { background:var(--surface-elevated); color:var(--fg-2); }
.panel-tab.active {
  color:var(--fg);
  background: linear-gradient(135deg, rgba(110,139,255,0.18) 0%, rgba(138,161,255,0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(110,139,255,0.28);
}

.panel-body { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:20px; }
.filter-section { display:flex; flex-direction:column; gap:10px; }
.filter-row { display:flex; align-items:center; justify-content:space-between; }
.panel-divider { height:1px; background:var(--border-subtle); }

/* ── Switch ── */
.switch {
  position:relative; width:34px; height:20px; border-radius:999px; border:none;
  background:var(--surface-overlay); cursor:pointer;
  transition:background var(--dur) var(--ease);
  flex-shrink:0;
}
.switch::after {
  content:''; position:absolute; top:3px; left:3px;
  width:14px; height:14px; border-radius:50%; background:#ECEDEE;
  transition:left var(--dur) var(--ease);
}
.switch.on { background:var(--brand); }
.switch.on::after { left:17px; }

/* ── Slider ── */
.slider-wrap { display:flex; flex-direction:column; gap:4px; }
input[type=range] {
  -webkit-appearance:none; width:100%; height:4px; border-radius:999px;
  background:var(--surface-overlay); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--brand);
  box-shadow:0 2px 4px rgba(0,0,0,0.4); cursor:pointer;
}
input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--brand); cursor:pointer;
}
.slider-labels { display:flex; justify-content:space-between; font-size:11px; font-family:var(--font-mono); color:var(--fg-3); }

/* ── Quality presets ── */
.quality-preset {
  height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-2); font-size:11px; font-weight:500;
  transition:all var(--dur) var(--ease);
}
.quality-preset:hover, .quality-preset.active { background:var(--brand-soft); color:#C2CFFF; border-color:transparent; }

/* ── Panel footer ── */
.panel-footer {
  flex-shrink:0; padding:14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.result-count-row { display:flex; justify-content:space-between; align-items:center; }

/* ── Search suggestions ── */
.search-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1000;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop); overflow:hidden; max-height:300px; overflow-y:auto;
  list-style:none; margin:0; padding:4px;
}
.search-suggestion {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--fg-2); transition:background var(--dur);
}
.search-suggestion:hover { background:var(--surface-elevated); color:var(--fg); }
.search-suggestion-icon { color:var(--fg-4); flex-shrink:0; }

/* ════ LEAFLET POPUP OVERRIDES ════ */
.leaflet-popup-content-wrapper {
  background:var(--surface-glass) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-pop) !important;
  padding:0 !important;
  color:var(--fg);
}
.leaflet-popup-tip-container { display:none; }
.leaflet-popup-content { margin:0 !important; width:280px !important; }
.leaflet-container { font-family:var(--font-sans); }

/* ── Lead popup content ── */
.lead-popup-hero {
  height:80px; display:flex; align-items:center; justify-content:center;
  position:relative; border-radius:12px 12px 0 0;
  overflow:hidden;
}
.lead-popup-emoji { display:flex; align-items:center; justify-content:center; opacity:0.9; }
.lead-popup-emoji svg { width:30px; height:30px; }
.lead-popup-category-tag {
  position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:999px;
  background:rgba(10,11,15,0.7); backdrop-filter:blur(6px);
  font-size:11px; color:#ECEDEE; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px;
}
.lead-popup-category-tag svg { width:12px; height:12px; }
.lead-popup-close {
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:6px;
  background:rgba(10,11,15,0.6); border:none; color:#ECEDEE; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1;
}
.lead-popup-body { padding:12px 14px; }
.lead-popup-name { font-size:14px; font-weight:600; color:var(--fg); }
.lead-popup-addr { font-size:12px; color:var(--fg-3); margin-top:2px; }
.lead-popup-meta { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; }
.lead-popup-actions {
  display:flex; gap:6px; padding:10px 14px 12px;
  border-top:1px solid var(--border-subtle);
}

/* ── Opportunity badge ── */
.opp-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500;
}
.opp-badge.alta   { background:rgba(63,185,127,0.18); color:#3FB97F; }
.opp-badge.media  { background:rgba(245,165,36,0.18);  color:#F5A524; }
/* "Baja" antes usaba --fg-3 sobre gris 18%: casi invisible en tema oscuro */
.opp-badge.baja   { background:rgba(161,161,170,0.16); color:#B8B8C0; border:1px solid rgba(161,161,170,0.25); }

/* ── Copy button ── */
.copy-btn {
  display:inline-flex; align-items:center; gap:4px;
  height:28px; padding:0 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-2); font-size:12px; font-weight:500;
  cursor:pointer; transition:all var(--dur);
}
.copy-btn:hover { background:var(--surface-overlay); color:var(--fg); }
.copy-btn.copied { background:var(--success-soft); color:var(--success); border-color:transparent; }

/* ════ ONBOARDING ════ */
#onboarding-overlay { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; }
#onboarding-overlay[hidden] { display:none; }
#onboarding-backdrop { position:absolute; inset:0; background:rgba(10,11,15,0.7); backdrop-filter:blur(4px); }
#onboarding-card {
  position:relative; z-index:1; width:420px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:28px; display:flex; flex-direction:column; gap:20px;
  box-shadow:var(--shadow-modal);
  animation:fadeUp 240ms var(--ease);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } }
#onboarding-steps-dots { display:flex; gap:6px; }
.onb-dot {
  height:4px; width:18px; border-radius:999px;
  background:var(--border-strong); transition:all var(--dur) var(--ease);
}
.onb-dot.active { width:28px; background:var(--brand); }
#onboarding-body { display:flex; flex-direction:column; gap:8px; }
#onboarding-title { font-size:20px; font-weight:600; letter-spacing:-0.01em; color:var(--fg); }
#onboarding-desc  { font-size:14px; color:var(--fg-2); line-height:1.5; }
#onboarding-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ── Leaflet map markers ── */
.ol-marker {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  border:2px solid rgba(0,0,0,0.6);
  transition:transform 0.15s;
}
.ol-marker svg, .ol-marker .ic { width:18px; height:18px; }
.ol-marker:hover { transform:scale(1.15); }

/* ── Toast ── */
.ol-toast {
  position:fixed; right:24px; bottom:24px; z-index:9999;
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; min-width:280px; max-width:360px;
  background:var(--surface-glass); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop);
  animation:slideIn 240ms var(--ease);
}
@keyframes slideIn { from { opacity:0; transform:translateY(8px); } }
.ol-toast-icon { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px; }
.ol-toast-title { font-size:13px; font-weight:600; color:var(--fg); }
.ol-toast-sub   { font-size:12px; color:var(--fg-2); margin-top:2px; }
.ol-toast-close { background:none; border:none; color:var(--fg-3); cursor:pointer; margin-left:auto; font-size:18px; line-height:1; padding:0; }

/* ════ MINING PROGRESS ════ */
#mining-progress {
  display:none;
  position:absolute;
  bottom:16px; left:16px; right:16px;
  z-index:1000;
  background:var(--surface-glass);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--shadow-pop);
}
#mining-progress.visible { display:block; }
.mining-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.mining-label { font-size:12px; font-weight:500; color:var(--fg); }
.mining-eta   { font-size:11px; color:var(--fg-3); font-family:var(--font-mono); }
.progress-bar-track {
  height:4px; border-radius:999px; background:var(--surface-overlay); overflow:hidden;
}
.progress-bar-fill {
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--brand) 0%, #A0B4FF 50%, var(--brand) 100%);
  background-size: 200% 100%;
  animation: progressShimmer 1.8s linear infinite;
  transition: width 0.4s var(--ease);
}
@keyframes progressShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.mining-label { animation: miningPulse 2s ease-in-out infinite; }
@keyframes miningPulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
.mining-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.btn-cancel {
  height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--danger); font-size:11px; font-weight:500;
  cursor:pointer; transition:background var(--dur);
}
.btn-cancel:hover { background:var(--danger-soft); }

/* ════ LEADS LIST (panel derecho, tab Lista) ════ */

/*
  Override .panel-body overflow-y:auto for structured tabs.
  These tabs have an inner scrollable list — the tab itself must not scroll
  or the inner flex:1 + overflow-y:auto on #leads-list / #my-leads-list
  never gets a bounded height and cards clip instead of scroll.
*/
#list-tab    { display:flex; flex-direction:column; gap:10px; overflow:hidden; min-height:0; }
#my-leads-tab { overflow:hidden; gap:10px; min-height:0; }

/*
  flex items with overflow-y:auto require min-height:0 to shrink below
  their natural content height. Without it, the item grows to fit all cards
  and the parent scrolls instead of the list.
*/
#leads-list            { min-height:0; padding-bottom:8px; }
#my-leads-list         { flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:8px; }
#list-tab > details    { flex-shrink:0; }

#list-tab.hidden    { display:none; }
#filters-tab.hidden { display:none; }
#my-leads-tab.hidden { display:none; }

.list-filters {
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.list-filter-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.list-search-input {
  width:100%; height:30px; padding:0 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-elevated);
  color:var(--fg); font-size:12px; outline:none;
  transition:border-color var(--dur);
}
.list-search-input:focus { border-color:var(--brand); }
.list-search-input::placeholder { color:var(--fg-4); }

.prob-chip {
  height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-3); font-size:11px; font-weight:500;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.prob-chip.alta.active   { background:rgba(63,185,127,0.20); color:#3FB97F; border-color:transparent; }
.prob-chip.media.active  { background:rgba(245,165,36,0.20);  color:#F5A524; border-color:transparent; }
.prob-chip.baja.active   { background:rgba(113,113,122,0.20); color:var(--fg-3); border-color:transparent; }
.prob-chip:not(.active):hover { background:var(--surface-overlay); }

.cat-chip {
  height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-3); font-size:11px; cursor:pointer;
  transition:all var(--dur) var(--ease);
  display:inline-flex; align-items:center; justify-content:center;
}
.cat-chip svg { width:14px; height:14px; }
.cat-chip.active { background:var(--brand-soft); color:#C2CFFF; border-color:transparent; }
.cat-chip:not(.active):hover { background:var(--surface-overlay); }
/* Chip de categoría desactivada en el sidebar: no filtrable desde la lista */
.cat-chip:disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }

/* Chips "Con tel" / "Con email" — clase propia para no chocar con el selector .cat-chip */
.has-chip {
  height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-3); font-size:11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  transition:all var(--dur) var(--ease);
}
.has-chip svg { width:12px; height:12px; }
.has-chip.active { background:var(--brand-soft); color:#C2CFFF; border-color:transparent; }
.has-chip:not(.active):hover { background:var(--surface-overlay); }

.list-sort-select {
  height:24px; padding:0 6px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-2); font-size:11px;
  outline:none; cursor:pointer; font-family:var(--font-sans);
}


#leads-list { display:flex; flex-direction:column; gap:8px; flex:1; overflow-y:auto; }

.lead-card {
  display:flex; flex-direction:row; align-items:center; gap:10px;
  padding:14px 10px 14px 15px; border-radius:10px; border:1px solid var(--border-subtle);
  background:var(--surface-elevated); cursor:pointer;
  position:relative; overflow:hidden; flex-shrink:0;
  transition:background var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.lead-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:10px 0 0 10px;
  background:var(--border);
  transition:background var(--dur) var(--ease);
}
.lead-card[data-prob="Alta"]::before  { background:var(--success); }
.lead-card[data-prob="Media"]::before { background:var(--warning); }
.lead-card[data-prob="Baja"]::before  { background:var(--fg-4); }
.lead-card:hover { background:var(--surface-overlay); border-color:var(--border); box-shadow:0 2px 8px rgba(0,0,0,0.20); }
.lead-card-emoji { display:flex; align-items:center; flex-shrink:0; }
.lead-card-emoji svg { width:18px; height:18px; }
.lead-card-body  { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lead-card-name  { font-size:13px; font-weight:500; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead-card-addr  { font-size:11px; color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead-card-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.lead-card-arrow { display:flex; align-items:center; color:var(--fg-4); }
.lead-card-arrow svg { width:14px; height:14px; }

.enrich-data { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.enrich-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; color:var(--fg-2);
  padding:2px 7px; border-radius:999px;
  background:var(--surface-overlay); border:1px solid var(--border-subtle);
  cursor:pointer; transition:background var(--dur);
  overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap;
}
.enrich-chip:hover { background:var(--surface-elevated); }
.enrich-chips-row { display:flex; flex-wrap:wrap; gap:3px; }

/* list tab actions row */
.list-actions-row {
  display:flex; gap:6px; align-items:center; flex-shrink:0;
}
.btn-enrich-all {
  flex:1; height:28px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-elevated); color:var(--fg-2); font-size:11px; font-weight:500;
  cursor:pointer; transition:all var(--dur);
}
.btn-enrich-all:hover { background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.btn-enrich-all:disabled { opacity:0.4; pointer-events:none; }

/* CSE settings section */
.cse-settings {
  display:flex; flex-direction:column; gap:6px;
  padding:10px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-elevated);
}
.cse-label { font-size:11px; color:var(--fg-3); font-weight:500; }
.cse-input {
  width:100%; height:26px; padding:0 8px; border-radius:6px;
  border:1px solid var(--border); background:var(--surface-overlay);
  color:var(--fg); font-size:11px; font-family:var(--font-mono); outline:none;
}
.cse-input:focus { border-color:var(--brand); }

/* Export menu */
.export-menu-wrap { position:relative; }
.export-dropdown {
  position:absolute; right:0; top:calc(100% + 6px); z-index:500;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop); padding:4px; min-width:140px;
}
.export-dropdown[hidden] { display:none; }
.export-option {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--fg-2); border:none; background:none; width:100%; text-align:left;
  transition:background var(--dur);
}
.export-option:hover { background:var(--surface-elevated); color:var(--fg); }

/* deep mining toggle in right panel */
.deep-mining-row {
  display:flex; align-items:center; justify-content:space-between;
}
.deep-mining-label { font-size:13px; font-weight:500; color:var(--fg); }
.deep-mining-sub   { font-size:11px; color:var(--fg-3); margin-top:1px; }

/* ── Accessibility & cursor polish ── */
.panel-tab, .prob-chip, .cat-chip, .cat-toggle, .quality-preset,
.saved-search-item, .workspace-selector, .lead-card,
.list-sort-select, .panel-tab, .switch { cursor:pointer; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline:none; box-shadow:var(--ring-focus);
}

/* ── List count badge ── */
#list-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--surface-overlay);
  font-size:9px; font-weight:600; font-family:var(--font-mono);
  color:var(--fg-3); margin-left:4px; vertical-align:middle;
}
.panel-tab.active #list-count { background:var(--brand-soft); color:var(--brand); }

/* ── Improved sidebar section labels ── */
.section-label {
  margin-top:2px;
}

/* ── Score chip in lead card ── */
.lead-score-badge {
  font-family:var(--font-mono); font-size:9px; font-weight:600;
  padding:1px 5px; border-radius:4px;
  background:var(--surface-overlay); color:var(--fg-4);
}

/* ── Save button on lead cards ── */
.lead-save-btn {
  background:none; border:none; padding:2px 4px;
  font-size:14px; color:var(--fg-4); cursor:pointer;
  font-family:var(--font-sans); transition:color 120ms; line-height:1;
}
.lead-save-btn:hover { color:var(--brand); }

.lead-saved-dot {
  font-size:12px; color:var(--success); font-weight:600; line-height:1;
}

/* ── Popup save button variant ── */
.copy-btn.popup-save-btn { margin-left:0; }
.copy-btn.popup-save-btn.saved { color:var(--success); border-color:rgba(63,185,127,0.3); }

/* ── My Leads tab ── */
.ml-filter-bar {
  display:flex; flex-wrap:wrap; gap:4px; padding:8px 0 6px; flex-shrink:0;
}

.ml-status-chip {
  background:var(--surface-overlay); border:1px solid var(--border);
  border-radius:999px; padding:2px 10px; font-size:11px;
  color:var(--fg-3); cursor:pointer; font-family:var(--font-sans);
  transition:background 120ms, border-color 120ms, color 120ms;
}
.ml-status-chip:hover  { border-color:var(--border-strong); color:var(--fg-2); }
.ml-status-chip.active { background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }

/* ── My lead card ── */
.my-lead-card {
  background:var(--surface-elevated); border:1px solid var(--border-subtle);
  border-radius:10px; padding:10px 12px; margin-bottom:6px; cursor:pointer;
  flex-shrink:0; /* no aplastar dentro de #my-leads-list (flex column scrollable) */
  transition:border-color 120ms, background 120ms;
}
.my-lead-card:hover { border-color:var(--border); background:var(--surface-overlay); }

.my-lead-top {
  display:flex; align-items:center; gap:6px;
}
.my-lead-name {
  flex:1; font-size:12px; font-weight:500; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.my-lead-del {
  background:none; border:none; color:var(--fg-4); cursor:pointer;
  font-size:14px; padding:0 2px; line-height:1; border-radius:4px;
  transition:color 120ms;
}
.my-lead-del:hover { color:var(--danger); }

.my-lead-contact-row {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
}

.my-lead-status-row {
  display:flex; align-items:center; gap:6px; margin-top:6px;
}
.my-lead-status-select {
  background:var(--surface-overlay); border:1px solid var(--border);
  border-radius:6px; padding:2px 6px; font-size:11px; color:var(--fg-2);
  font-family:var(--font-sans); cursor:pointer;
}
.my-lead-status-select:focus { outline:none; border-color:var(--brand); }

.my-lead-notes {
  font-size:11px; color:var(--fg-3); margin-top:4px; font-style:italic;
}
.my-lead-notes-input {
  width:100%; margin-top:6px; padding:5px 8px;
  background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:6px; font-size:11px; color:var(--fg-2); font-family:var(--font-sans);
  resize:vertical; min-height:36px; max-height:120px; box-sizing:border-box;
}
.my-lead-notes-input:focus { outline:none; border-color:var(--border-focus); }

/* ── My leads count badge (same as list-count) ── */
#my-leads-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--surface-overlay);
  font-size:9px; font-weight:600; font-family:var(--font-mono);
  color:var(--fg-3); margin-left:4px; vertical-align:middle;
}
.panel-tab.active #my-leads-count { background:var(--brand-soft); color:var(--brand); }

/* ── SVG icon base ── */
.ic { flex-shrink:0; vertical-align:middle; }

/* ── Toast icon SVG sizing ── */
.ol-toast-icon svg { width:15px; height:15px; }
.ol-toast-close svg { width:13px; height:13px; }

/* ── Zona dibujada: botón, chip y "Buscar en esta área" ── */
#draw-zone-btn.active {
  background:var(--brand-soft-strong); color:#C2CFFF; border-color:var(--brand);
}
#zone-chip {
  position:absolute; top:12px; left:12px; z-index:900;
  display:flex; align-items:center; gap:6px;
  padding:4px 6px 4px 10px; border-radius:999px;
  background:var(--surface-glass); backdrop-filter:blur(10px);
  border:1px solid var(--brand); color:#C2CFFF;
  font-size:11px; font-weight:500; box-shadow:var(--shadow-pop);
}
#zone-chip[hidden] { display:none; }
#zone-chip button {
  background:none; border:none; color:var(--fg-3); cursor:pointer;
  font-size:14px; line-height:1; padding:0 4px; border-radius:50%;
}
#zone-chip button:hover { color:var(--danger); }

.search-area-btn {
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:900;
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px; border-radius:999px;
  background:var(--surface-overlay); border:1px solid var(--border-strong);
  color:var(--fg); font-size:12px; font-weight:500;
  box-shadow:var(--shadow-pop); cursor:pointer;
  transition:background var(--dur), border-color var(--dur);
}
.search-area-btn:hover { background:var(--brand-soft-strong); border-color:var(--brand); }
.search-area-btn[hidden] { display:none; }

/* ── Barra de intención (chips bajo el título del mapa) ── */
#map-subtitle { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.intent-chip {
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 9px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-elevated);
  color:var(--fg-2); font-size:11px; font-weight:500; cursor:pointer;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background var(--dur), border-color var(--dur), color var(--dur);
}
.intent-chip:hover { background:var(--brand-soft); color:#C2CFFF; border-color:transparent; }
.intent-results { font-size:11px; color:var(--fg-3); margin-left:2px; }

/* ── Export CSV de Mis leads ── */
.btn-export-myleads {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-elevated);
  color:var(--fg-2); font-size:11px; font-weight:500; text-decoration:none;
  transition:all var(--dur); flex-shrink:0; align-self:flex-start;
}
.btn-export-myleads:hover { background:var(--brand-soft); color:var(--brand); border-color:transparent; }

/* ── Score info popover (Calidad mínima) ── */
.score-info { position:relative; display:inline-flex; }
.score-info summary {
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  border:1px solid var(--border-strong); color:var(--fg-3);
  font-size:10px; font-weight:600; line-height:1;
  transition:color var(--dur), border-color var(--dur);
}
.score-info summary::-webkit-details-marker { display:none; }
.score-info summary:hover { color:var(--brand); border-color:var(--brand); }
.score-info[open] summary { color:var(--brand); border-color:var(--brand); }
.score-info-pop {
  position:absolute; top:calc(100% + 8px); left:-8px; z-index:600;
  width:240px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop);
  font-size:11px; font-weight:400; color:var(--fg-2); line-height:1.5;
}

/* ── Mobile panel buttons + backdrop ── */
.mobile-panel-btn { display:none; }
#panel-backdrop {
  display:none; position:fixed; inset:0; z-index:550;
  background:rgba(10,11,15,0.55);
}
#panel-backdrop.visible { display:block; }

/* ── Fallbacks Firefox ── */
/* Scrollbar (las reglas ::-webkit-* no aplican en Gecko) */
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
/* Superficies glass sin backdrop-filter → fondo sólido */
@supports not (backdrop-filter: blur(1px)) {
  .leaflet-popup-content-wrapper { background:var(--surface) !important; }
  .ol-toast, #mining-progress { background:var(--surface); }
  #map-loader { background:rgba(10,11,15,0.85); }
}

/* ── Responsive layout ── */
@media (max-width: 1024px) {
  /* Paneles off-canvas: se deslizan sobre el mapa con backdrop, en vez de
     superponerse sin afordancia como antes. Botones hamburguesa en topbar. */
  .mobile-panel-btn { display:inline-flex; }
  .panel-collapse-btn, .panel-float-reveal { display:none !important; }

  #sidebar, #right-panel {
    position:fixed; top:76px; bottom:10px; z-index:600;
    height:auto; margin:0;
    transition:transform var(--dur-slow) var(--ease);
  }
  #sidebar {
    left:10px; width:min(300px, 85vw);
    transform:translateX(calc(-100% - 20px));
  }
  #right-panel {
    right:10px; width:min(340px, 92vw);
    transform:translateX(calc(100% + 20px));
  }
  #sidebar.mobile-open, #right-panel.mobile-open { transform:none; }
  /* el colapso de escritorio no debe dejar el panel en width:0 en móvil */
  #sidebar.collapsed, #right-panel.collapsed {
    width:min(300px, 85vw); padding:14px; opacity:1;
    border:1px solid var(--border); box-shadow:var(--shadow-pop);
  }
  #right-panel.collapsed { width:min(340px, 92vw); padding:0; }

  .ds-topbar .ds-topbar-logo { min-width:0; }
}
@media (max-width: 720px) {
  #map-wrap { min-height:60vh; }
  .ds-topbar .ds-topbar-search { max-width:none; }
  .ds-topbar .ds-topbar-logo { display:none; }
  #onboarding-card { width:calc(100vw - 32px); max-width:420px; padding:20px; }
}