/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --top-bar-h: 120px;
  color-scheme: dark;
  --bg: #040b10;
  --panel: rgba(8, 18, 24, 0.85);
  --text: #e6f3f7;
  --muted: #7a9ba8;
  --line: rgba(122, 155, 168, 0.2);
  --accent: #5ee7c7;
  --danger: #ff9e7d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
  height: 100%; 
  background: var(--bg); 
  color: var(--text); 
  font: 12px/1.3 Inter, system-ui, sans-serif;
  overflow: hidden;
}

.app-shell-map-first { position: relative; height: 100vh; width: 100vw; }

.map-canvas-fullscreen {
  position: fixed; inset: 0; z-index: 0;
}
.map-canvas-fullscreen .cesium-viewer,
.map-canvas-fullscreen .cesium-viewer-cesiumWidget,
.map-canvas-fullscreen .cesium-widget,
.map-canvas-fullscreen .cesium-widget canvas { width: 100% !important; height: 100% !important; }
.map-canvas-fullscreen .cesium-viewer-bottom,
.cesium-widget-credits,
.cesium-credit-lightbox-overlay,
.cesium-viewer-cesiumInspectorContainer { display: none !important; }
.map-canvas-fullscreen .cesium-viewer-toolbar { top: 8px; right: 8px; transform: scale(0.72); transform-origin: top right; }
.map-canvas-fullscreen .cesium-button { background: rgba(20, 40, 55, 0.9); border-color: var(--line); }

.top-bar {
  position: fixed; top: 8px; left: 8px; right: 8px; z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
}

.title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.title-block { display: flex; align-items: baseline; gap: 10px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }

.stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: rgba(20, 45, 60, 0.8); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; font-size: 10px; color: var(--muted); white-space: nowrap;
}
.chip-btn {
  cursor: pointer; transition: background 0.1s, border-color 0.1s;
}
.chip-btn:hover { background: rgba(94, 231, 199, 0.15); border-color: rgba(94, 231, 199, 0.4); color: var(--accent); }

/* Presets row */
.presets-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.preset-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(94, 231, 199, 0.3); background: rgba(94, 231, 199, 0.07);
  color: var(--accent); transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.preset-btn:hover { background: rgba(94, 231, 199, 0.18); border-color: rgba(94, 231, 199, 0.6); }
.preset-btn.active {
  background: rgba(94, 231, 199, 0.22); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 231, 199, 0.25);
}

.controls-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.controls-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.controls-divider {
  width: 1px; height: 20px; background: var(--line); flex-shrink: 0; margin: 0 2px;
}

/* Input widths */
.search-input.date-input { min-width: 110px; }
.search-input.val-input { min-width: 72px; }

.control-select {
  background: rgba(20, 45, 60, 0.9); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 11px; height: 28px; padding: 0 8px; min-width: 100px;
}
.control-select.wide { min-width: 180px; }

.search-input {
  background: rgba(20, 45, 60, 0.9); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 11px; height: 28px; padding: 0 10px; min-width: 140px;
}
.search-input.wide { min-width: 200px; }
.search-input::placeholder { color: var(--muted); }

.filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-chip {
  padding: 3px 8px; border-radius: 5px; font-size: 10px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(20,45,60,0.7); color: var(--muted);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.filter-chip:hover { border-color: rgba(122,155,168,0.5); color: var(--text); }
.filter-chip--include {
  background: rgba(94,231,199,0.15); border-color: rgba(94,231,199,0.5); color: var(--accent); font-weight: 600;
}
.filter-chip--exclude {
  background: rgba(255,80,60,0.12); border-color: rgba(255,80,60,0.5); color: #ff503c; font-weight: 600;
}

.type-chips { display: flex; gap: 4px; margin-left: auto; }
.type-chips span {
  background: rgba(94, 231, 199, 0.1); border: 1px solid rgba(94, 231, 199, 0.25);
  border-radius: 4px; padding: 3px 6px; font-size: 10px; color: var(--muted);
}

.error-row {
  background: rgba(255, 100, 80, 0.15); border: 1px solid rgba(255, 100, 80, 0.3);
  border-radius: 8px; padding: 6px 10px; font-size: 11px; color: var(--danger);
}

.side-panel {
  position: fixed; z-index: 20;
  top: var(--top-bar-h); bottom: 36px;
  width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px); overflow: hidden;
  display: flex; flex-direction: column;
}
.side-panel.left { left: 8px; }
.side-panel.right { right: 8px; width: 240px; }

.panel-header {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; background: rgba(20, 45, 60, 0.6);
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.panel-collapse-btn {
  background: none; border: none; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
.panel-caret {
  display: inline-block; font-size: 9px; color: var(--muted);
  transition: transform 0.15s; transform: rotate(0deg);
}
.panel-caret.open { transform: rotate(90deg); }
.side-panel.collapsed { bottom: auto; }
.side-panel.collapsed .panel-body { display: none; }
.side-panel.collapsed .panel-header { border-bottom: none; }

.export-btn {
  background: rgba(94, 231, 199, 0.15);
  border: 1px solid rgba(94, 231, 199, 0.3);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
}
.export-btn:hover {
  background: rgba(94, 231, 199, 0.25);
}

.panel-body { flex: 1 1; overflow-y: auto; padding: 6px; }
.panel-body.virtual { padding: 0; overflow: hidden; }

.list-item {
  width: 100%; text-align: left; padding: 8px; margin-bottom: 4px;
  background: rgba(20, 45, 60, 0.4); border: 1px solid transparent; border-radius: 8px;
  color: var(--text); cursor: pointer;
}
.list-item.active { border-color: var(--accent); background: rgba(94, 231, 199, 0.1); }

.item-meta { display: flex; justify-content: space-between; font-size: 9px; color: var(--accent); margin-bottom: 3px; }
.item-loc { font-size: 11px; font-weight: 500; line-height: 1.2; margin-bottom: 2px; }
.item-num { font-size: 9px; color: var(--muted); }

.detail-content { padding: 4px; }

.zip-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(94, 231, 199, 0.1); border: 1px solid rgba(94, 231, 199, 0.25);
  border-radius: 6px; padding: 5px 8px; font-size: 10px; color: var(--accent);
  margin-bottom: 8px;
}
.zip-strip-clear {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 10px; padding: 0 2px; line-height: 1;
}
.zip-strip-clear:hover { color: var(--text); }
.detail-loc { font-size: 13px; font-weight: 600; line-height: 1.2; margin-bottom: 4px; }
.detail-type { font-size: 10px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-badge { background: rgba(255,68,68,0.2); border: 1px solid rgba(255,68,68,0.5); color: #ff6666; border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
.stalled-badge { background: rgba(255,119,0,0.2); border: 1px solid rgba(255,119,0,0.5); color: #ff9933; border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
.stalled-chip { color: #ff9933 !important; }
.complaint-badge { border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
.complaint-badge.open { background: rgba(255,204,0,0.2); border: 1px solid rgba(255,204,0,0.5); color: #ffcc00; }
.complaint-badge.closed { background: rgba(136,136,136,0.2); border: 1px solid rgba(136,136,136,0.5); color: #aaaaaa; }

/* ── Alerts panel ────────────────────────────────────────────────────────── */
.alerts-panel {
  position: fixed; z-index: 20;
  top: var(--top-bar-h); bottom: 36px;
  right: 256px; width: 210px;
}
.alert-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.alert-label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--muted); }
.alert-row {
  position: relative; padding: 7px 24px 7px 8px; margin-bottom: 4px;
  background: rgba(20,45,60,0.4); border-radius: 6px; border: 1px solid transparent;
}
.alert-row:hover { border-color: var(--line); }
.alert-name { font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.alert-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.alert-meta span {
  font-size: 9px; color: var(--muted);
  background: rgba(20,45,60,0.6); border-radius: 3px; padding: 1px 4px;
}
.alert-delete {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 10px;
}
.alert-delete:hover { color: var(--danger); }

/* ── Auth modal ──────────────────────────────────────────────────────────── */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.auth-modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: 320px; overflow: hidden; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--line);
  background: rgba(20,45,60,0.6);
}
.auth-tab {
  flex: 1 1; padding: 10px; background: none; border: none;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.auth-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.auth-tab:hover:not(.active) { color: var(--text); }
.auth-close {
  padding: 10px 14px; background: none; border: none;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.auth-close:hover { color: var(--text); }
.auth-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.auth-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.auth-input {
  background: rgba(20,45,60,0.9); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 13px; padding: 7px 10px;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-error {
  background: rgba(255,80,60,0.12); border: 1px solid rgba(255,80,60,0.3);
  border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--danger);
}
.auth-submit {
  padding: 9px; background: var(--accent); color: #000;
  border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.auth-submit:disabled { opacity: 0.5; cursor: default; }
.auth-submit:not(:disabled):hover { opacity: 0.85; }

.tdlr-btn {
  margin-left: 6px; padding: 1px 6px; font-size: 9px; cursor: pointer;
  background: rgba(94,231,199,0.1); border: 1px solid rgba(94,231,199,0.3);
  border-radius: 4px; color: var(--accent);
}
.tdlr-btn:hover { background: rgba(94,231,199,0.2); }
.tdlr-loading { font-size: 9px; color: var(--muted); margin-left: 4px; }
.tdlr-row { font-size: 10px; margin-bottom: 2px; }
.tdlr-status { border-radius: 3px; padding: 1px 4px; font-size: 8px; font-weight: 700; letter-spacing: 0.05em; }
.tdlr-status.active { background: rgba(94,231,199,0.15); border: 1px solid rgba(94,231,199,0.35); color: var(--accent); }
.tdlr-status.expired { background: rgba(255,80,60,0.15); border: 1px solid rgba(255,80,60,0.35); color: #ff503c; }
.detail-desc { font-size: 11px; line-height: 1.35; color: var(--text); margin-bottom: 10px; max-height: 100px; overflow-y: auto; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; gap: 6px; }
.detail-grid div { background: rgba(20, 45, 60, 0.4); border-radius: 6px; padding: 6px 8px; }
.detail-grid-wide { grid-column: span 2; }
.detail-grid dt { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.detail-grid dd { font-size: 11px; }

.detail-link { 
  display: inline-block; margin-top: 10px; padding: 6px 12px; 
  background: var(--accent); color: #000; border-radius: 6px;
  font-size: 11px; font-weight: 600; text-decoration: none;
}

.empty { padding: 20px; text-align: center; color: var(--muted); font-size: 11px; }

.legend-bar {
  position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); flex-wrap: wrap;
  max-width: calc(100vw - 520px);
}
.leg { font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.leg.new { background: rgba(150, 255, 100, 0.2); color: #96ff64; }
.leg.aging { background: rgba(255, 200, 50, 0.2); color: #ffc832; }
.leg.old { background: rgba(255, 80, 60, 0.2); color: #ff503c; }
.leg-section {
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; padding: 0 2px;
}
.leg-divider { width: 1px; height: 14px; background: var(--line); flex-shrink: 0; margin: 0 2px; }

/* Sort pills in left panel */
.sort-pills {
  display: flex; gap: 4px;
  padding: 5px 8px 0; border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.sort-pill {
  padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: background 0.1s, color 0.1s;
}
.sort-pill:hover { color: var(--text); }
.sort-pill.active { background: rgba(94,231,199,0.12); border-color: rgba(94,231,199,0.4); color: var(--accent); }

/* In-View list */
.in-view-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 6px; cursor: pointer; border-radius: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.in-view-row:hover { background: rgba(94,231,199,0.08); }
.in-view-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.in-view-main { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.in-view-addr { font-size: 10px; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-view-sub { font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-view-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,0.08); color: var(--muted); flex-shrink: 0; }

/* Add-to-list button */
.add-to-list-btn {
  width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(94,231,199,0.3);
  background: rgba(94,231,199,0.07); color: var(--accent);
  font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.add-to-list-btn:hover { background: rgba(94,231,199,0.2); border-color: var(--accent); }
.add-to-list-btn.remove { border-color: rgba(255,80,60,0.35); background: rgba(255,80,60,0.08); color: #ff503c; }
.add-to-list-btn.remove:hover { background: rgba(255,80,60,0.2); }

/* Left panel mode tabs */
.left-mode-tabs { display: flex; gap: 2px; flex: 1 1; }
.left-tab {
  flex: 1 1; padding: 3px 6px; border-radius: 5px; font-size: 10px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background 0.1s, color 0.1s;
}
.left-tab:hover { color: var(--text); }
.left-tab.active { background: rgba(94,231,199,0.12); border-color: rgba(94,231,199,0.3); color: var(--accent); }

/* Prospect list selector */
.list-selector {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 6px 4px; border-bottom: 1px solid var(--line);
}
.list-tab {
  display: flex; align-items: center; gap: 4px;
  border-radius: 5px; padding: 0 4px 0 0;
}
.list-tab.active { background: rgba(94,231,199,0.08); }
.list-tab-name {
  flex: 1 1; text-align: left; background: none; border: none;
  color: var(--text); font-size: 11px; cursor: pointer; padding: 5px 6px;
}
.list-tab.active .list-tab-name { color: var(--accent); font-weight: 600; }
.list-tab-count { font-size: 9px; color: var(--muted); font-weight: 400; }
.list-tab-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 9px; padding: 2px 4px; border-radius: 3px;
}
.list-tab-del:hover { color: var(--danger); background: rgba(255,80,60,0.1); }
.list-new-btn {
  padding: 4px 8px; border-radius: 5px; font-size: 10px; cursor: pointer;
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  text-align: left; margin-top: 2px;
}
.list-new-btn:hover { color: var(--accent); border-color: rgba(94,231,199,0.4); }
.list-rename-input {
  flex: 1 1; background: rgba(20,45,60,0.9); border: 1px solid var(--accent);
  border-radius: 4px; color: var(--text); font-size: 11px; padding: 3px 6px;
  min-width: 0;
}
.list-actions {
  display: flex; gap: 5px; padding: 6px 6px 4px; align-items: center;
  border-bottom: 1px solid var(--line);
}

/* Trade status badges */
.trade-badge {
  display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; letter-spacing: 0.03em; white-space: nowrap;
}
.trade-badge.has {
  background: rgba(94, 231, 199, 0.12); border: 1px solid rgba(94, 231, 199, 0.35); color: var(--accent);
}
.trade-badge.missing {
  background: rgba(255, 119, 0, 0.15); border: 1px solid rgba(255, 119, 0, 0.45); color: #ff9933;
  font-weight: 800;
}

/* 311 SR Legend */
.sr-legend {
  position: fixed; bottom: 40px; right: 270px; z-index: 30;
  background: rgba(4,16,24,0.95); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; min-width: 200px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.sr-legend-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.sr-legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sr-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.sr-legend-label { font-size: 11px; color: var(--fg); }

@media (max-width: 1100px) {
  .side-panel { top: var(--top-bar-h); }
  .side-panel.left { width: 200px; }
  .side-panel.right { width: 210px; }
}

/* ── Tablet (≤900px) ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .top-bar { left: 6px; right: 6px; top: 6px; }
  .title-row { flex-wrap: wrap; }
  .stat-chips { width: 100%; }

  /* Side panels become bottom drawers */
  .side-panel {
    position: fixed; left: 6px; right: 6px; width: auto;
    top: auto; max-height: 30vh; border-radius: 10px;
  }
  .side-panel.left { bottom: 32vh; }
  .side-panel.right { bottom: 8px; }
  .side-panel.collapsed { max-height: none; }

  /* Chart panel: remove side-panel offset, use most of the width */
  .chart-panel {
    max-width: calc(100vw - 24px);
    bottom: 8px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
  }

  /* SR legend: anchor to bottom-left so it doesn't clash with right panel */
  .sr-legend { right: auto; left: 12px; bottom: 64vh; }
}

/* ── Phone (≤640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 13px; }
  .eyebrow { display: none; }

  /* Presets row: horizontal scroll on phone */
  .presets-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px;
    padding: 5px 10px;
  }
  .presets-row::-webkit-scrollbar { display: none; }

  /* Controls row: single horizontal scrolling strip — no wrapping */
  .controls-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 10px;
  }
  .controls-row::-webkit-scrollbar { display: none; }

  /* Shrink search inputs so they don't dominate */
  .search-input { min-width: 100px; }
  .search-input.wide { min-width: 120px; }

  /* Filter chips: don't wrap inside the scrolling row */
  .filter-chips { flex-wrap: nowrap; }

  /* Hide type count chips — redundant on small screens */
  .type-chips { display: none; }

  /* Stat chips: horizontal scroll */
  .stat-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .stat-chips::-webkit-scrollbar { display: none; }

  /* Hide chart on phone — too cramped */
  .chart-panel { display: none; }

  /* Side panels: shallower on phone */
  .side-panel { max-height: 26vh; }
  .side-panel.left { bottom: 28vh; }

  /* SR legend: above the left drawer */
  .sr-legend { left: 12px; right: auto; bottom: 56vh; }

  /* Bigger tap targets for toggle buttons */
  .toggle-btn { height: 32px; padding: 0 10px; }
}

/* ── Onboarding modal ──────────────────────────────────────────────────── */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
}
.onboard-modal {
  background: rgba(8,18,28,0.97); border: 1px solid var(--line); border-radius: 16px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 28px 28px 24px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px); box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
.onboard-header { margin-bottom: 22px; }
.onboard-header .eyebrow { display: block; margin-bottom: 6px; }
.onboard-header h2 { font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.02em; }
.onboard-header p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.onboard-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.onboard-step { display: flex; gap: 12px; align-items: flex-start; }
.onboard-step-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(94,231,199,0.15); border: 1px solid rgba(94,231,199,0.4);
  color: var(--accent); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.onboard-step strong { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.onboard-step p { font-size: 11px; color: var(--muted); line-height: 1.4; }
.onboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.list-truncated {
  padding: 10px; text-align: center; color: var(--muted); font-size: 10px;
  font-style: italic;
}

.toggle-btn {
  background: rgba(20, 45, 60, 0.9); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 11px; height: 28px; padding: 0 12px; cursor: pointer;
}
.toggle-btn:hover { background: rgba(30, 55, 70, 0.9); }
.toggle-btn.active { background: rgba(94, 231, 199, 0.2); border-color: var(--accent); color: var(--accent); }

/* ── Time-series chart ───────────────────────────────────────────────────── */
.chart-panel {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 20; width: 660px; max-width: calc(100vw - 480px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px); overflow: hidden;
}
.chart-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; background: none; border: none; color: var(--text);
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.chart-toggle:hover { background: rgba(255,255,255,0.04); }
.chart-caret { color: var(--muted); font-size: 9px; }
.chart-body { padding: 0 10px 8px; }
.chart-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.chart-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-legend-item {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font-size: 10px; padding: 2px 7px; cursor: pointer;
  opacity: 0.5; transition: opacity 0.15s;
}
.chart-legend-item.active { opacity: 1; border-color: var(--dot-color, var(--accent)); color: var(--text); }
.chart-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-color, var(--accent)); flex-shrink: 0; }
.chart-gran-btns { display: flex; gap: 4px; flex-shrink: 0; }
.chart-gran {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font-size: 10px; padding: 2px 8px; cursor: pointer;
}
.chart-gran.active { border-color: var(--accent); color: var(--accent); background: rgba(94,231,199,0.1); }
.chart-scroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
}
.chart-tooltip {
  font-size: 10px; color: var(--muted); padding: 4px 0 2px; min-height: 18px;
}
.chart-tooltip strong { color: var(--text); }

/* ── Lists tab badge ───────────────────────────────────────────────────── */
.list-badge {
  display: inline-block;
  background: rgba(94,231,199,0.15); border-radius: 8px;
  color: var(--accent); font-size: 9px; font-weight: 700;
  padding: 0 5px; min-width: 14px; text-align: center;
  transition: transform 0.15s, background 0.15s;
}
.list-badge:empty { display: none; }
.list-badge--flash {
  background: var(--accent); color: #040b10;
  transform: scale(1.35);
}

/* ── Map controls toggle button ────────────────────────────────────────── */
.map-controls-toggle {
  background: none; border: 1px solid var(--line); border-radius: 5px;
  color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; padding: 3px 8px; white-space: nowrap;
  flex-shrink: 0;
}
.map-controls-toggle:hover { color: var(--accent); border-color: rgba(94,231,199,0.4); }

/* ── Null-valuation note ───────────────────────────────────────────────── */
.null-val-note {
  font-size: 10px; color: var(--danger); white-space: nowrap;
  flex-shrink: 0; padding: 0 4px;
  cursor: help;
}

/* ── List pencil rename button ─────────────────────────────────────────── */
.list-tab-pencil {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 2px 3px; border-radius: 3px; flex-shrink: 0;
}
.list-tab-pencil:hover { color: var(--accent); background: rgba(94,231,199,0.1); }