/* ═══════════════════════════════════════════
   EARTH XI — Premium Dark UI
   Design system matched to aibusinessfacts.com
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#06070b;
  --bg-card:rgba(255,255,255,.03);
  --bg-elevated:rgba(255,255,255,.05);
  --text:#eef0f6;
  --text-dim:rgba(238,240,246,.4);
  --text-mid:rgba(238,240,246,.6);
  --border:rgba(255,255,255,.07);
  --border-hover:rgba(255,255,255,.14);
  --green:#22c55e;
  --green-dim:rgba(34,197,94,.15);
  --red:#ef4444;
  --yellow:#eab308;
  --blue:#3b82f6;
  --accent:#818cf8;
  --radius:20px;
  --radius-sm:12px;
  --font-display:'Plus Jakarta Sans',-apple-system,sans-serif;
  --font-body:'DM Sans',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

::selection{background:rgba(129,140,248,.3)}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;height:100vh;font-size:13px;
}

/* ═══════════ ANIMATIONS ═══════════ */

@keyframes stepIn{
  0%{opacity:0;transform:translateY(16px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeIn{
  0%{opacity:0;transform:translateY(-8px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes skel{0%{background-position:-200px 0}100%{background-position:200px 0}}

/* ═══════════ MAP ═══════════ */

#mapContainer{position:fixed;inset:0;z-index:0}

/* ═══════════ CHAT PANEL ═══════════ */
.chat-panel{
  position:fixed;top:64px;right:0;bottom:0;width:380px;z-index:750;
  background:rgba(15,17,23,0.95);border-left:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  font-family:var(--font-body);
}
.chat-panel.open{transform:translateX(0)}
.chat-hdr{
  display:flex;align-items:center;justify-content:space-between;
  height:44px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.chat-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.chat-title svg{color:var(--green)}
.chat-hdr-actions{display:flex;gap:6px}
.chat-hb{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--text-mid);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:inherit}
.chat-hb:hover{background:rgba(255,255,255,.05);color:var(--text)}
.chat-x{font-size:18px;line-height:1;padding:0 8px;height:24px}

.chat-list{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.chat-list::-webkit-scrollbar{width:6px}
.chat-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.cm-row{display:flex}
.cm-row.cm-user{justify-content:flex-end}
.cm-row.cm-ai{justify-content:flex-start}
.cm-row.cm-system{justify-content:center}

.cm-bubble{
  max-width:85%;padding:8px 12px;font-size:13px;line-height:1.45;color:#e8e9ed;
  border-radius:12px 12px 12px 2px;word-wrap:break-word;
}
.cm-row.cm-user .cm-bubble{
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.2);
  border-radius:12px 12px 2px 12px;
}
.cm-row.cm-ai .cm-bubble{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.cm-sys{font-size:10px;color:rgba(255,255,255,.35);text-align:center;padding:2px 6px;display:flex;align-items:center;gap:6px}
.cm-bubble a{color:var(--green);text-decoration:none;border-bottom:1px dashed rgba(0,222,166,.4)}
.cm-bubble a:hover{color:#5ff3c3;border-bottom-color:#5ff3c3}

.cm-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:9px}
.cm-act-btn{
  padding:6px 12px;border-radius:8px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);
  color:var(--green);font-size:12px;font-weight:500;font-family:var(--font-body);
  cursor:pointer;transition:background .15s,border-color .15s,opacity .2s;
}
.cm-act-btn:hover{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.4)}
.cm-act-btn.ran{opacity:.55;cursor:default;background:rgba(34,197,94,.04)}
.cm-act-btn.err{opacity:.55;border-color:rgba(239,68,68,.3);color:var(--red)}
.cm-act-btn:disabled{cursor:default}

.cm-dots{display:inline-flex;gap:3px}
.cm-dots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);animation:dot 1.2s infinite}
.cm-dots span:nth-child(2){animation-delay:.2s}
.cm-dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}

.chat-input-row{
  display:flex;gap:6px;padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
#chatInput{
  flex:1;height:36px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:6px;
  color:var(--text);padding:0 10px;font-size:12px;font-family:inherit;outline:none;
}
#chatInput:focus{border-color:rgba(0,222,166,.4)}
.chat-send{
  height:36px;width:36px;background:rgba(0,222,166,.15);border:1px solid rgba(0,222,166,.3);
  color:var(--green);border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;
}
.chat-send:hover{background:rgba(0,222,166,.25)}

/* When chat is open, slide stats panel away so it doesn't overlap */
body.chat-open .sts{right:394px}
body.chat-open .ins{display:none}

@media(max-width:768px){
  .chat-panel{inset:0;width:100%;max-width:100%;border-radius:0;z-index:950}
  body.chat-open .sts{display:none}
}

/* ═══════════ DATA INSIGHTS PANEL ═══════════ */
.data-insights{
  position:fixed;right:-400px;top:60px;bottom:70px;
  width:360px;max-width:90vw;
  background:rgba(10,12,18,.97);border:1px solid rgba(255,255,255,.08);
  border-right:none;border-radius:16px 0 0 16px;
  /* Stack: inspect (1400) > popup (1300) > insights (1200) > chat/stats */
  z-index:1200;display:flex;flex-direction:column;
  transition:right .3s ease;backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);overflow-y:auto;
  box-shadow:-10px 0 40px rgba(0,0,0,.4);
  font-family:var(--font-body);
}
/* Floating "ℹ" pill the panel drops on close so the user can reopen. */
#insights-toggle-btn{
  position:fixed;top:68px;right:16px;z-index:1150;
  width:32px;height:32px;border-radius:50%;
  background:rgba(12,14,20,.92);border:1px solid rgba(255,255,255,.12);
  color:var(--green);font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .15s, background .15s;
  font-family:var(--font-body);
}
#insights-toggle-btn:hover{background:rgba(20,25,35,.96);transform:scale(1.08)}
.data-insights.open{right:0}
body.chat-open .data-insights.open{right:400px}

.di-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;background:rgba(10,12,18,.97);z-index:2;
}
.di-title{font-weight:700;font-size:11px;color:var(--green);text-transform:uppercase;letter-spacing:1.2px}
.di-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.di-close:hover{color:var(--text)}

/* Tab strip — only rendered when a correlation result is cached.
   Lets the user toggle between per-layer detail and the correlation
   card without losing either. Sticky beneath the header. */
.di-tabs{
  display:flex;gap:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,12,18,.97);
  position:sticky;top:43px;z-index:2;
}
.di-tab{
  flex:1;background:none;border:none;color:var(--text-dim);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 12px;cursor:pointer;font-weight:600;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.di-tab:hover{color:var(--text)}
.di-tab.active{color:var(--green);border-bottom-color:var(--green)}

.di-section-title{
  font-size:17px;font-weight:800;color:var(--text);
  padding:16px 18px 6px;line-height:1.3;
}
.di-summary{
  font-size:13px;color:#9ca3af;padding:0 18px 14px;line-height:1.6;
}
.di-summary-pending{
  display:inline-block;margin-right:8px;
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase;
  background:rgba(34,197,94,.1);color:var(--green);
  border:1px solid rgba(34,197,94,.25);
  padding:2px 7px;border-radius:4px;vertical-align:middle;
  animation:di-summary-pulse 1.3s ease-in-out infinite;
}
@keyframes di-summary-pulse{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

.di-stats{padding:0 18px 14px;display:flex;flex-direction:column;gap:6px}
.di-stat{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 12px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
}
.di-stat-label{font-size:11px;color:#888}
.di-stat-value{font-size:12px;font-weight:700;color:var(--text);text-align:right}

.di-legend-title{
  font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px;
  padding:10px 18px 6px;font-weight:600;
}
.di-legend{padding:0 18px 14px;display:flex;flex-direction:column;gap:6px}
.di-legend-item{display:flex;align-items:center;gap:10px;font-size:12px}
.di-legend-icon{font-size:16px;font-weight:bold;width:28px;text-align:center;letter-spacing:.5px}
.di-legend-label{color:var(--text)}

.di-table-count{
  display:inline-block;font-size:11px;font-weight:600;color:var(--green);
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle;
}
.di-table-search{
  display:block;margin:0 18px 8px;padding:6px 10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:6px;color:var(--text);font-size:11px;font-family:var(--font-body);
  width:calc(100% - 36px);box-sizing:border-box;
}
.di-table-search:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.05)}
.di-table-thead{
  display:grid;grid-template-columns:1.3fr 0.8fr 1.2fr;gap:6px;
  padding:4px 18px;font-size:9px;color:#666;text-transform:uppercase;
  letter-spacing:.5px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.04);
}
.di-table-th{cursor:pointer;user-select:none;padding:4px 0;transition:color .15s}
.di-table-th:hover{color:var(--text-mid)}
.di-table-th.sort-asc::after{content:' ▲';color:var(--green);font-size:8px}
.di-table-th.sort-desc::after{content:' ▼';color:var(--green);font-size:8px}
.di-table-rows{
  padding:0 18px 8px;max-height:320px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
}
.di-table-rows::-webkit-scrollbar{width:6px}
.di-table-rows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.di-table-row{
  display:grid;grid-template-columns:1.3fr 0.8fr 1.2fr;gap:6px;
  padding:6px 0;font-size:11px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.03);transition:background .1s;
}
.di-table-row:hover{background:rgba(34,197,94,.04)}
.di-table-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-table-label{color:var(--text);font-weight:500;display:flex;align-items:center;gap:6px}
.di-table-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 3px rgba(0,0,0,.4);
}
.di-table-value{color:var(--green);font-family:'JetBrains Mono',monospace;font-size:10px}
.di-table-detail{color:var(--text-mid);font-size:10px}
.di-table-empty{padding:14px 0;font-size:11px;color:#555;text-align:center;font-style:italic}

.di-source{
  padding:10px 18px;font-size:10px;color:#555;
  border-top:1px solid rgba(255,255,255,.04);margin-top:auto;
}
.di-sources{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 12px;}
.di-source-badge{display:inline-block;padding:4px 8px;background:rgba(0,222,166,0.1);border:1px solid rgba(0,222,166,0.2);border-radius:6px;color:var(--ac);font-size:10px;font-weight:600;}

/* ═══ Agent provenance card (Phase D) ═══ */
.di-prov-card{
  margin:0 18px 14px;padding:12px 14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;font-size:12px;line-height:1.45;color:var(--text-mid);
}
.di-prov-row{display:flex;gap:10px;padding:3px 0;align-items:baseline}
.di-prov-row .di-prov-k{
  flex:0 0 70px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);
}
.di-prov-row strong{color:var(--text);font-weight:600}
.di-prov-reason{color:var(--text-mid);font-style:italic}
.di-prov-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.di-prov-badge{
  display:inline-block;padding:3px 8px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.04em;
  border:1px solid transparent;
}
.di-prov-ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28);color:#86efac}
.di-prov-warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#fcd34d}
.di-prov-neutral{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.28);color:#cbd5e1}
.di-prov-note{margin-top:8px;font-size:11px;color:var(--text-dim);line-height:1.5}
.di-prov-note em{color:var(--text-mid);font-style:normal;font-weight:600;margin-right:4px}
.di-prov-expected{color:#fcd34d}
.di-prov-issues{margin:6px 0 4px 16px;padding:0;font-size:11px}
.di-prov-issues li{margin-bottom:2px;color:var(--text-mid)}
.di-prov-citations{margin-top:8px;font-size:10px;color:var(--text-dim)}
.di-prov-citations a{color:var(--green);text-decoration:none;margin-right:6px}
.di-prov-citations a:hover{text-decoration:underline}
.di-prov-factcheck{
  margin-top:10px;padding:6px 12px;width:100%;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  border-radius:6px;color:#86efac;font-size:11px;font-weight:600;
  cursor:pointer;font-family:var(--font-body);transition:all .2s;
}
.di-prov-factcheck:hover:not([disabled]){background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4)}
.di-prov-factcheck[disabled]{opacity:.6;cursor:wait}
/* Level-3 multi-step provenance */
.di-prov-level-badge{
  display:inline-block;margin-left:6px;padding:1px 7px;
  background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.35);
  border-radius:8px;color:#d8b4fe;font-size:10px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;vertical-align:middle;
}
.di-prov-combine-kind{color:var(--text-dim);font-weight:400;font-size:10px}
.di-prov-steps{
  margin:8px 0 6px;padding:6px 8px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  border-radius:6px;display:flex;flex-direction:column;gap:4px;
}
.di-prov-step{
  display:grid;grid-template-columns:18px 1fr auto auto auto;
  gap:8px;align-items:baseline;font-size:11px;line-height:1.4;
  padding:3px 4px;border-radius:4px;
}
.di-prov-step-ok{color:var(--text-mid)}
.di-prov-step-fail{color:#fca5a5;background:rgba(248,113,113,.06)}
.di-prov-step-id{
  font-family:var(--font-mono,ui-monospace,monospace);font-weight:700;
  color:var(--text-dim);text-transform:uppercase;
}
.di-prov-step-label{color:var(--text);font-weight:500}
.di-prov-step-tool{
  font-size:10px;color:var(--text-dim);
  font-family:var(--font-mono,ui-monospace,monospace);
}
.di-prov-step-count{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.di-prov-step-warn{color:#fcd34d}
/* Level-3 grounded synthesis (the analytical narrative) */
.di-prov-synth{
  margin:-2px 0 12px;padding:12px 14px 10px;
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(34,197,94,.05));
  border:1px solid rgba(168,85,247,.22);
  border-radius:8px;
}
.di-prov-synth-conclusion{
  display:inline-block;margin-bottom:8px;padding:3px 10px;
  background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.4);
  border-radius:10px;color:#e9d5ff;font-size:10px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
}
.di-prov-synth-narrative{
  font-size:13px;line-height:1.55;color:var(--text);margin-bottom:8px;
}
.di-prov-synth-insights{
  margin:6px 0 4px 0;padding-left:18px;font-size:12px;line-height:1.45;
}
.di-prov-synth-insights li{margin-bottom:4px;color:var(--text-mid)}
.di-prov-synth-citations{
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);
  font-size:10px;color:var(--text-dim);
}
.di-prov-synth-citations a{color:var(--green);text-decoration:none;margin-right:6px}
.di-prov-synth-citations a:hover{text-decoration:underline}
.di-citations{
  padding:0 18px 12px;display:flex;flex-direction:column;gap:4px;
  /* Cap the citations block so a long list doesn't push the Data Points
     table off-screen. The block scrolls internally; the panel still scrolls
     as a whole. 10 entries at ~28px each ≈ 280px ceiling. */
  max-height:200px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
}
.di-citations::-webkit-scrollbar{width:6px}
.di-citations::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.di-citation{font-size:10px;color:var(--t2);text-decoration:none;padding:4px 8px;border-radius:4px;background:rgba(255,255,255,0.02);transition:all .15s;}
.di-citation:hover{background:rgba(0,222,166,0.05);color:var(--ac);}
.layer-source{font-size:8px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;margin-left:4px;}
.layer-source.wikidata{background:rgba(59,130,246,0.15);color:#3b82f6;}
.layer-source.places{background:rgba(34,197,94,0.15);color:#22c55e;}
.layer-source.osm{background:rgba(245,158,11,0.15);color:#f59e0b;}
.layer-source.wb{background:rgba(139,92,246,0.15);color:#8b5cf6;}
.layer-source.ai{background:rgba(99,102,241,0.15);color:#6366f1;}

@media(max-width:768px){
  /* Note: the canonical mobile sizing for .data-insights lives in the
     responsive block at the BOTTOM of this file (search for "Data
     Insights — bottom sheet"). That rule has !important on the
     bottom/transform fields so it wins over this block; this one
     is kept only for the chat-open right:auto override. Owner saw a
     squashed 99-row data table because of a stale 55vh cap there;
     fixed in the canonical rule. */
  body.chat-open .data-insights{right:auto}

  /* Inner sub-section caps — let the panel as a whole scroll instead
     of having tiny inner scrollers that fight each other. */
  .di-table-rows{max-height:none;overflow-y:visible}
  .di-citations{max-height:none;overflow-y:visible}
  /* Tighten section padding so more vertical room goes to content. */
  .di-section-title{font-size:15px;padding:12px 16px 4px}
  .di-summary{font-size:12.5px;padding:0 16px 10px;line-height:1.5}
  .di-stats,.di-legend,.di-table-search,.di-citations{padding-left:16px;padding-right:16px}
  .di-table-thead{padding:4px 16px;grid-template-columns:1.4fr 0.7fr 1fr;gap:4px;font-size:8.5px}
  .di-table-rows{padding:0 16px 8px}
  .di-table-row{grid-template-columns:1.4fr 0.7fr 1fr;gap:4px;font-size:11px;padding:6px 0}
  /* Feedback bar slightly tighter on mobile. */
  .feedback-bar{padding:12px 16px 14px}
}

/* ═══════════ ROUTE INFO CARD ═══════════ */
.route-info{
  position:fixed;top:76px;left:300px;transform:none;bottom:auto;
  width:min(380px,calc(100vw - 320px));
  background:rgba(15,17,23,.95);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:14px 16px;z-index:850;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:none;font-family:var(--font-body);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:left .3s cubic-bezier(.22,1,.36,1);
}
.sb.closed ~ .route-info{left:12px;width:min(380px,calc(100vw - 24px))}
@media(max-width:768px){
  .route-info{left:12px;top:60px;width:calc(100vw - 24px)}
}
.route-info.show{display:block;animation:stepIn .4s cubic-bezier(.22,1,.36,1)}
.route-info-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.route-info-title{font-size:11px;color:var(--text-mid);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;font-family:var(--font-mono)}
.route-info-x{background:none;border:none;color:var(--text-mid);font-size:14px;cursor:pointer;padding:4px 8px;border-radius:6px}
.route-info-x:hover{background:rgba(255,255,255,.05);color:var(--text)}
.route-info-main{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.route-info-duration{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--green)}
.route-info-distance{font-size:13px;color:var(--text-mid)}
.route-info-endpoints{margin:8px 0}
.route-endpoint{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text);padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-endpoint span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.route-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.route-dot.start{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.5)}
.route-dot.end{background:var(--red);box-shadow:0 0 8px rgba(242,78,106,.5)}
.route-line-connector{width:2px;height:12px;background:rgba(255,255,255,.15);margin-left:4px}
.route-info-modes{display:flex;gap:4px;margin:10px 0}
.route-mode{flex:1;padding:7px 4px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--text-mid);font-size:11px;cursor:pointer;transition:all .2s;text-align:center;font-family:inherit}
.route-mode:hover{border-color:rgba(255,255,255,.2);color:var(--text)}
.route-mode.active{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.1)}
.route-steps-toggle{font-size:12px;color:var(--text-mid);cursor:pointer;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);user-select:none}
.route-steps-toggle:hover{color:var(--text)}
.route-steps{max-height:200px;overflow-y:auto;font-size:12px;color:var(--text-dim);margin-top:4px;scrollbar-width:thin}
.route-step-item{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;gap:8px}
.route-step-instruction{flex:1;min-width:0;color:var(--text)}
.route-step-distance{color:var(--text-mid);font-family:var(--font-mono);flex-shrink:0;font-size:11px}

/* Waypoint list in route card */
.route-waypoints{margin:8px 0;display:flex;flex-direction:column;gap:2px}
.route-wp{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:12px;color:var(--text)}
.route-wp-num{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;font-family:var(--font-mono);box-shadow:0 0 8px rgba(0,0,0,.4)}
.route-wp-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-wp-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:2px 6px;font-size:11px;border-radius:4px}
.route-wp-remove:hover{color:var(--red);background:rgba(242,78,106,.1)}
.route-wp-leg{font-size:10px;color:var(--text-dim);padding-left:34px;font-family:var(--font-mono)}
.route-add-stop-row{display:flex;gap:6px;margin:6px 0 10px}
.route-add-stop{flex:1;padding:6px 8px;background:rgba(0,222,166,.1);border:1px dashed rgba(0,222,166,.3);color:var(--green);border-radius:8px;cursor:pointer;font-size:11px;font-family:inherit}
.route-add-stop:hover{background:rgba(0,222,166,.18)}
.route-add-stop.alt{background:transparent;color:var(--text-mid);border-color:rgba(255,255,255,.12)}
.route-add-stop.alt:hover{border-color:rgba(255,255,255,.25);color:var(--text)}

/* Numbered waypoint markers on the map */
.route-wp-marker{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;font-family:var(--font-mono);
  border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:pointer;
}

/* Overlay layer badge in sidebar */
.lbadge{display:inline-block;font-size:8px;font-weight:700;letter-spacing:1px;padding:2px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;font-family:var(--font-mono)}
.lbadge.overlay{background:rgba(156,108,247,.15);color:#b48cf9;border:1px solid rgba(156,108,247,.3)}
.lbadge.live{background:rgba(0,222,166,.15);color:var(--green);border:1px solid rgba(0,222,166,.3)}
.lbadge.route{background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3)}

/* ═══════════ SATELLITE TIMELAPSE UI ═══════════ */
.timelapse-ui{
  position:fixed;top:76px;left:50%;transform:translateX(-50%);
  background:rgba(15,17,23,.95);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 20px;z-index:900;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  text-align:center;min-width:340px;font-family:var(--font-body);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.timelapse-ui .tl-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.timelapse-ui .tl-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:700;font-family:var(--font-mono)}
.timelapse-ui .tl-header select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:6px;padding:4px 8px;font-size:11px;font-family:inherit;cursor:pointer}
.timelapse-ui .tl-close{background:none;border:none;color:var(--text-mid);cursor:pointer;font-size:14px;padding:2px 8px;border-radius:4px}
.timelapse-ui .tl-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.timelapse-ui .tl-year{font-family:var(--font-display);font-size:48px;font-weight:800;color:var(--green);letter-spacing:-2px;margin:2px 0;line-height:1;transition:opacity .2s}
.timelapse-ui .tl-year.tl-loading{opacity:.5;animation:tlPulse 1s ease-in-out infinite}
@keyframes tlPulse{0%,100%{opacity:.45}50%{opacity:.9}}
.timelapse-ui .tl-controls{display:flex;align-items:center;gap:10px;margin-top:6px}
.timelapse-ui .tl-controls button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-size:14px;cursor:pointer;flex-shrink:0}
.timelapse-ui .tl-controls button:hover{background:rgba(255,255,255,.1)}
.timelapse-ui .tl-controls input[type=range]{flex:1;accent-color:var(--green)}
.timelapse-ui .tl-range{font-size:10px;color:var(--text-dim);white-space:nowrap;font-family:var(--font-mono)}

@media(max-width:768px){
  .timelapse-ui{min-width:280px;left:12px;right:12px;transform:none;width:auto}
  .timelapse-ui .tl-year{font-size:36px}
}

/* ═══════════ MAP LEGEND ═══════════ */
.map-legend{
  position:fixed;bottom:90px;left:12px;z-index:600;
  background:rgba(15,17,23,.92);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 14px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  min-width:170px;max-width:240px;font-family:var(--font-body);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.legend-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.legend-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-close{
  background:none;border:1px solid transparent;color:var(--text-dim);
  cursor:pointer;font-size:16px;line-height:1;
  width:24px;height:24px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s,border-color .15s;
  /* Larger touch target on mobile — 44px is iOS / WCAG minimum. */
}
.legend-close:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
@media(max-width:768px){
  .legend-close{width:32px;height:32px;font-size:18px}
}

/* Tools-modal settings toggle row (Map legend on/off, etc.). */
.tools-toggle{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 6px;cursor:pointer;color:var(--text);
  border-radius:4px;transition:background .15s;
}
.tools-toggle:hover{background:rgba(255,255,255,.03)}
.tools-toggle input[type="checkbox"]{
  margin-top:2px;flex-shrink:0;
  width:16px;height:16px;accent-color:var(--green);cursor:pointer;
}
.tools-toggle .tt-name{
  display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;
}
.tools-toggle .tt-hint{
  display:block;font-size:11.5px;color:var(--text-mid);line-height:1.4;
}
.legend-body{display:flex;flex-direction:column;gap:4px}
.legend-bar{width:100%;border-radius:4px;border:1px solid rgba(255,255,255,.08)}
.legend-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--text-mid);font-family:var(--font-mono);margin-top:2px}
.legend-unit{font-size:9px;color:var(--text-dim);text-align:center;margin-top:2px;font-family:var(--font-mono)}
.legend-item{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}

@media(max-width:768px){
  .map-legend{bottom:120px;min-width:140px;max-width:200px;padding:8px 10px}
  .sb:not(.closed) ~ .map-legend{display:none !important}
}

.mapboxgl-ctrl-logo{display:none!important}
.mapboxgl-ctrl-attrib{opacity:0.4;font-size:9px!important}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group,
.mapboxgl-ctrl-top-right .mapboxgl-ctrl{display:none!important}
.mapboxgl-ctrl-bottom-right{display:none!important}
.mapboxgl-ctrl-bottom-left{opacity:0.5;font-size:9px}

/* ═══════════ HEADER ═══════════ */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;height:64px;
  padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
  background:rgba(6,7,11,.82);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid var(--border);
}
.hdr>*{pointer-events:auto}
.hdr-l{display:flex;align-items:center;gap:10px}

.hb{
  padding:8px 16px;border-radius:8px;
  background:transparent;border:none;
  color:var(--text-mid);display:grid;place-items:center;
  cursor:pointer;font-size:14px;font-weight:500;
  font-family:var(--font-body);
  transition:all .2s;
}
.hb:hover{background:rgba(255,255,255,.05);color:var(--text)}

.br{display:flex;align-items:center;gap:8px}
.br-i{
  width:30px;height:30px;border-radius:6px;background:var(--green);
  display:grid;place-items:center;font-size:10px;font-weight:800;
  color:#fff;font-family:var(--font-mono);
}
.hdr-logo-img{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;display:block;
}
.br-n{font-family:var(--font-body);font-weight:800;font-size:15px;letter-spacing:-.3px}
.br-v{
  font-size:9px;font-family:var(--font-mono);font-weight:500;
  background:var(--green-dim);color:var(--green);padding:3px 8px;border-radius:6px;
  letter-spacing:.6px;text-transform:uppercase;
}
.beta-tag{
  display:inline-block;padding:3px 8px;
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);
  color:#a78bfa;border-radius:6px;text-transform:uppercase;
  margin-left:4px;vertical-align:middle;
}

/* ═══════════ AUTH MODAL + USER MENU ═══════════ */
.user-menu{display:none;align-items:center;cursor:pointer}
.user-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--green);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;font-family:var(--font-body);
}

.auth-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.auth-modal{
  position:relative;background:rgba(15,17,24,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:38px 34px 28px;width:360px;max-width:92vw;text-align:center;
  font-family:var(--font-body);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.auth-close{
  position:absolute;top:14px;right:14px;background:none;border:none;
  color:#666;font-size:22px;cursor:pointer;line-height:1;padding:4px 8px;
}
.auth-close:hover{color:var(--text)}
.auth-logo{font-size:28px;margin-bottom:10px}
.auth-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px}
.auth-subtitle{font-size:12px;color:#888;margin-bottom:22px;line-height:1.5}
.auth-google-btn{
  width:100%;padding:11px 14px;background:#fff;color:#333;border:none;
  border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-google-btn:hover{background:#f3f4f6}
.auth-google-btn span{font-size:16px;font-weight:700;color:#4285f4}
.auth-divider{display:flex;align-items:center;margin:18px 0;color:#555;font-size:11px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.auth-divider span{padding:0 10px}
.auth-input{
  width:100%;padding:11px 14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--text);
  font-size:13px;margin-bottom:9px;outline:none;box-sizing:border-box;
  font-family:var(--font-body);
}
.auth-input:focus{border-color:rgba(34,197,94,.45)}
.auth-submit-btn{
  width:100%;padding:11px;background:var(--green);color:#000;border:none;
  border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;margin-top:4px;
}
.auth-submit-btn:hover{filter:brightness(1.1)}
.auth-submit-btn:disabled{opacity:.6;cursor:default}
.auth-toggle{font-size:12px;color:#888;margin-top:14px}
.auth-toggle a{color:var(--green);text-decoration:none}
.auth-toggle a:hover{text-decoration:underline}

/* ═══════════ CACHED-RESULT BADGE ═══════════ */
/* Docked top-right. If the feedback bar is also visible (top:60px) the
   cache badge slides underneath at top:100px so they stack cleanly. */
.cached-badge{
  position:fixed;top:100px;right:16px;z-index:9000;
  background:rgba(12,14,20,.94);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:6px 8px 6px 14px;
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:#94a3b8;font-family:var(--font-body);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:fbSlideIn .3s ease;
}
.cached-badge .cb-label{color:#cbd5e1}
.cached-badge .cb-refresh{
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  border-radius:12px;padding:3px 10px;color:var(--green);
  font-size:11px;cursor:pointer;font-family:var(--font-body);
}
.cached-badge .cb-refresh:hover{background:rgba(34,197,94,.2)}
.cached-badge .cb-close{
  background:none;border:none;color:#666;font-size:13px;cursor:pointer;
  padding:0 4px;
}
.cached-badge .cb-close:hover{color:var(--text)}

/* ═══════════ FEEDBACK BAR (query ML telemetry) ═══════════ */
.fb-bar{
  position:fixed;top:60px;right:16px;z-index:9000;
  background:rgba(12,14,20,.95);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:6px 10px 6px 14px;
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:#aaa;font-family:var(--font-body);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:fbSlideIn .3s ease;
}
@keyframes fbSlideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.fb-label{color:#cbd5e1;margin-right:2px}
.fb-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 6px;border-radius:6px;line-height:1}
.fb-btn:hover{background:rgba(255,255,255,.06)}
.fb-close{background:none;border:none;cursor:pointer;color:#666;font-size:14px;margin-left:2px;padding:0 4px}
.fb-close:hover{color:var(--text)}

.hdr-r{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-dim);display:flex;align-items:center;gap:6px;
}
.hdr-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 8px rgba(34,197,94,.4)}

.hb2{
  padding:8px 16px;border-radius:8px;
  border:none;background:transparent;
  color:var(--text-mid);cursor:pointer;font-size:13px;font-weight:500;
  font-family:var(--font-body);transition:all .2s;
  display:inline-flex;align-items:center;gap:4px;
}
.hb2:hover{background:rgba(255,255,255,.05);color:var(--text)}
.hb2.on{background:rgba(234,179,8,.08);color:var(--yellow);border:1px solid rgba(234,179,8,.15)}
#mBtn{padding:8px 14px}

/* ═══════════ SIDEBAR ═══════════ */

.sb{
  position:fixed;top:64px;left:0;bottom:0;width:280px;z-index:800;
  background:var(--bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
  scrollbar-width:none;transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.sb::-webkit-scrollbar{display:none}
.sb.closed{transform:translateX(-280px)}

.ss{padding:14px 16px;border-bottom:1px solid var(--border)}

.sh{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:8px;
}

.tr{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.tl{font-size:13px;color:var(--text-mid);font-weight:500}
.sb-sel{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:3px 6px;font-family:inherit;cursor:pointer}

/* ═══ Dark-theme select / dropdown fix ═══ */
select,
.sb select,
#tl-layer,
#selWx,
#selBnd,
.tl-header select,
.ai-sel{
  background:rgba(15,17,23,.95) !important;
  color:#e8e9ed !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  padding:6px 28px 6px 10px !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23888' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 8px center !important;
}
select:hover{border-color:rgba(255,255,255,.22) !important}
select:focus{
  border-color:var(--green) !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.15) !important;
}
select option{
  background:#0f1117 !important;
  color:#e8e9ed !important;
  padding:8px !important;
}
select option:checked{
  background:rgba(34,197,94,.2) !important;
  color:#fff !important;
}
select option:disabled,
select option[disabled]{color:rgba(255,255,255,.25) !important}

/* Tighter variants for sidebar selects that need to fit compactly */
.sb-sel{font-size:11px !important;padding:4px 24px 4px 8px !important;border-radius:6px !important}

.tw{
  width:32px;height:18px;border-radius:9px;
  background:rgba(255,255,255,.08);position:relative;
  cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);flex-shrink:0;
}
.tw.on{background:var(--green);box-shadow:0 0 20px rgba(34,197,94,.2)}
.tw::after{
  content:'';position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.tw.on::after{transform:translateX(14px)}

/* Map tiles */
.map-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.map-tile{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px;border-radius:var(--radius-sm);border:2px solid transparent;
  background:transparent;cursor:pointer;transition:all .3s;
  color:var(--text-dim);font-size:8px;font-family:var(--font-mono);
}
.map-tile:hover{border-color:var(--border-hover)}
.map-tile.a{border-color:var(--green);color:var(--green);box-shadow:0 0 12px rgba(34,197,94,.2)}
.map-tile.g3d{border-color:rgba(234,179,8,.3);color:var(--yellow)}
.map-tile.g3d.a{border-color:var(--yellow);box-shadow:0 0 12px rgba(234,179,8,.25)}
.map-thumb{width:100%;height:32px;border-radius:8px}
.map-tile span{font-size:8px}

/* Sidebar search */
.sr{display:flex;gap:4px}
.sr input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 18px;font-size:15px;color:var(--text);
  outline:none;font-family:var(--font-body);transition:all .3s;
}
.sr input::placeholder{color:var(--text-dim)}
.sr input:focus{border-color:rgba(34,197,94,.4);box-shadow:0 0 0 3px rgba(34,197,94,.08);background:rgba(255,255,255,.06)}
.sr button{
  padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text-mid);cursor:pointer;
  font-size:13px;font-weight:500;font-family:var(--font-body);transition:all .3s;
}
.sr button:hover{background:rgba(255,255,255,.1);border-color:var(--border-hover);color:var(--text)}

/* Sidebar action buttons */
.sb-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px 14px}
.sb-act{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text-mid);cursor:pointer;
  font-size:9px;font-family:var(--font-mono);font-weight:500;transition:all .3s;
  height:auto;min-height:42px;
}
.sb-act svg{width:14px;height:14px;opacity:.5;transition:all .3s}
.sb-act:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.sb-act:hover svg{opacity:1}

.feed-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Feed/tool list buttons */
.lb{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text-mid);cursor:pointer;
  transition:all .3s;font-size:13px;text-align:left;width:100%;font-weight:500;
}
.lb:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.ll{font-weight:600;font-size:13px;color:var(--text)}
.ld{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}

/* ═══════════ LAYERS ═══════════ */

.lw{border-bottom:1px solid var(--border);padding:6px 0;transition:all .3s cubic-bezier(.22,1,.36,1)}
.lw:last-child{border:none}
.lw:hover{background:rgba(255,255,255,.04)}
.lw.expanded{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2)}

.lh{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 0;min-height:32px}
.lh:hover{opacity:.85}
.ldot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.li{flex:1;min-width:0}
.ln{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);margin-top:2px}

/* Drag-to-reorder feedback on the sidebar layer rows. The dragging source
   fades + outlines; the drop target gets a 2px green bar above or below to
   show exactly where the layer will land when released. */
.lw[draggable="true"]{cursor:grab}
.lw[draggable="true"]:active{cursor:grabbing}
.lw.lw-dragging{opacity:.5;outline:1px dashed rgba(34,197,94,.5);border-radius:8px}
.lw.lw-drop-above{box-shadow:0 -2px 0 0 var(--green) inset}
.lw.lw-drop-below{box-shadow:0 2px 0 0 var(--green) inset}

/* Right-click context menu on the map (Research / Weather / Copy coords). */
.place-ctx-menu{
  position:fixed;z-index:1500;min-width:220px;
  background:rgba(15,17,23,.97);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:4px;backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);font-family:var(--font-body);
  display:flex;flex-direction:column;gap:1px;
}
.place-ctx-menu button{
  background:transparent;border:none;color:var(--text);
  text-align:left;padding:8px 12px;border-radius:6px;cursor:pointer;
  font-size:12px;font-family:inherit;display:flex;align-items:center;gap:8px;
}
.place-ctx-menu button:hover{background:rgba(34,197,94,.14);color:#fff}

/* Research-this-place card rendered inside Data Insights via _customBody. */
.research-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
.research-thumb{
  width:100%;max-height:160px;object-fit:cover;border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
}
.research-extract{font-size:12px;line-height:1.55;color:var(--text);white-space:pre-wrap}
.research-link{
  font-size:11px;color:var(--green);text-decoration:none;padding:6px 10px;
  border:1px solid rgba(34,197,94,.3);border-radius:6px;align-self:flex-start;
  transition:background .15s;
}
.research-link:hover{background:rgba(34,197,94,.1)}

/* Correlation card — rendered inside Data Insights after a multi-dataset
   correlation query lands. Two flavours share the same card: proximity
   (big distance + co-location %) and grid-Pearson (big R). */
.corr-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;
}
.corr-headline{text-align:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.corr-big{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--green);line-height:1}
.corr-headline-sub{font-size:11px;color:var(--text-mid);margin-top:6px;line-height:1.4}
.corr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.corr-stat{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.02);
}
.corr-stat span{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px}
.corr-stat strong{font-family:var(--font-mono);font-size:13px;color:var(--text);margin-top:3px}
.corr-section-title{
  font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px;
  font-weight:600;margin-top:6px;
}
.corr-pair-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:11px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.02);
}
.corr-pair-row span{
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.corr-pair-row strong{color:var(--green);font-family:var(--font-mono);font-size:11px;flex-shrink:0}
.corr-toggle{
  background:transparent;border:1px solid rgba(34,197,94,.35);color:var(--green);
  padding:8px 10px;border-radius:8px;cursor:pointer;font-size:11px;font-weight:600;
  font-family:var(--font-body);transition:background .15s;
}
.corr-toggle:hover{background:rgba(34,197,94,.1)}
.corr-toggle.active{background:rgba(34,197,94,.18)}

/* Weather forecast widget rendered inside the Data Insights panel. */
.di-custom-body{padding:0 18px 4px}
.wx-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;
}
.wx-head{display:flex;align-items:center;gap:14px}
.wx-icon{font-size:42px;line-height:1}
.wx-head-main{flex:1;min-width:0}
.wx-temp{font-size:28px;font-weight:700;color:var(--text);line-height:1;font-family:var(--font-display)}
.wx-cond{font-size:13px;color:var(--text-mid);margin-top:4px}
.wx-metrics{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.06);
}
.wx-metric{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px}
.wx-metric span{color:var(--text-dim)}
.wx-metric strong{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:12px}
.wx-days{
  display:flex;gap:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);
}
.wx-day{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.02);
}
.wx-day-name{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.wx-day-icon{font-size:22px;line-height:1;margin:2px 0}
.wx-day-hi{font-size:13px;font-weight:700;color:var(--text);font-family:var(--font-mono)}
.wx-day-lo{font-size:11px;color:var(--text-mid);font-family:var(--font-mono)}
.wx-day-pop{font-size:9px;color:var(--blue);font-family:var(--font-mono);margin-top:2px}

/* Side-by-side weather compare. Columns flex to equal width; the per-column
   city title sits above each mini card. Scrolls horizontally on the narrow
   Data Insights panel when there are 3+ cities. */
.wx-compare{
  /* Stack vertically in the Data Insights panel — previously flex-row
     with min-width 180px cards overflowed the 360px panel so the second
     city needed horizontal scroll. Owner saw "only shows 1" because card
     2 was off-screen. Vertical stack keeps every city visible at once. */
  display:flex;flex-direction:column;gap:10px;padding-bottom:4px;
}
.wx-compare .wx-card{flex:0 0 auto;width:100%;padding:10px;gap:8px;box-sizing:border-box}
.wx-compare .wx-icon{font-size:28px}
.wx-compare .wx-temp{font-size:20px}
.wx-compare .wx-cond{font-size:10px}
.wx-compare .wx-metric{font-size:10px}
.wx-compare .wx-metric strong{font-size:11px}
.wx-compare .wx-day{padding:6px 2px}
.wx-compare .wx-day-icon{font-size:16px}
.wx-compare .wx-day-hi{font-size:11px}
.wx-compare-title{
  font-size:11px;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:.8px;
  border-bottom:1px solid rgba(34,197,94,.22);padding-bottom:6px;
}

/* Per-category sub-layer toggles, drawn inside a layer's expanded panel. */
.sublayer-list{display:flex;flex-direction:column;gap:4px;padding:4px 0 8px}
.sublayer-row{
  display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
}
.sublayer-row:hover{background:rgba(255,255,255,.04)}
.sublayer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 4px rgba(0,0,0,.4)}
.sublayer-name{
  flex:1;font-size:11px;color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sublayer-count{
  font-size:9px;color:var(--text-mid);font-family:var(--font-mono);
  padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.04);
}

/* Master "All Layers" toggle — sits above the individual rows and flips every
   layer's visibility at once. Slightly dimmed background distinguishes it. */
.lw.ll-master{background:rgba(34,197,94,.04);border-radius:8px;padding:2px 6px;margin-bottom:4px}
.lw.ll-master .lh{cursor:default}
.lw.ll-master .ln{font-size:12px;color:var(--green);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.lw.ll-master .lm{font-size:9px}

.lt2{
  width:28px;height:15px;border-radius:8px;
  background:rgba(255,255,255,.08);position:relative;
  transition:all .3s cubic-bezier(.22,1,.36,1);flex-shrink:0;cursor:pointer;
}
.lt2.on{background:var(--green);box-shadow:0 0 12px rgba(34,197,94,.15)}
.lt2::after{
  content:'';position:absolute;top:2px;left:2px;
  width:11px;height:11px;border-radius:50%;background:#fff;
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.lt2.on::after{transform:translateX(13px)}

.ldel{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:4px 6px;transition:all .3s;flex-shrink:0;border-radius:6px}
.ldel:hover{color:var(--red);background:rgba(239,68,68,.08)}

/* Up/down reorder arrows on each layer card. */
.lord{display:flex;flex-direction:column;gap:0;margin-left:2px;flex-shrink:0}
.lord-btn{
  background:none;border:none;color:var(--text-dim);
  font-size:8px;line-height:1;padding:1px 4px;cursor:pointer;
  transition:color .15s;
}
.lord-btn:hover{color:var(--green)}

.la{color:var(--text-dim);font-size:10px;transition:transform .25s cubic-bezier(.22,1,.36,1);flex-shrink:0}
.la.op{transform:rotate(90deg)}

.lp{display:none;padding:8px 0 6px 16px;animation:stepIn .3s cubic-bezier(.22,1,.36,1)}
.lp.op{display:block}

.lpl{
  font-size:9px;font-family:var(--font-mono);font-weight:700;
  color:var(--text-dim);letter-spacing:1.2px;text-transform:uppercase;margin:8px 0 4px;
}
.lpl:first-child{margin-top:0}
.lpc{display:flex;gap:3px;flex-wrap:wrap}
.lpb{
  font-size:9px;font-family:var(--font-mono);font-weight:500;
  padding:4px 8px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text-mid);cursor:pointer;transition:all .3s;
}
.lpb:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.lpb.a{border-color:rgba(34,197,94,.3);color:var(--green);background:var(--green-dim)}

.lps{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-mid)}
.lps input[type=range]{flex:1}

/* Global range-slider styling — applies app-wide so every slider is drag-friendly */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;background:rgba(255,255,255,.12);
  border-radius:3px;outline:none;cursor:pointer;
  position:relative;z-index:1;touch-action:pan-y;
  margin:6px 0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;background:rgba(255,255,255,.12);border-radius:3px;
}
input[type=range]::-moz-range-track{
  height:6px;background:rgba(255,255,255,.12);border-radius:3px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--green);cursor:grab;border:2px solid #fff;
  box-shadow:0 0 6px rgba(34,197,94,.5);
  margin-top:-5px; /* center on 6px track */
  transition:transform .1s;
}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--green);cursor:grab;border:2px solid #fff;
  box-shadow:0 0 6px rgba(34,197,94,.5);
}
input[type=range]::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.2)}
.lps span{font-family:var(--font-mono);color:var(--green);min-width:28px;text-align:right;font-size:10px;font-weight:500}

.rg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ro{height:14px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .3s}
.ro:hover{transform:scaleY(1.3)}
.ro.a{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.2)}

.lpe{
  font-size:9px;font-family:var(--font-mono);font-weight:500;
  padding:4px 8px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text-mid);cursor:pointer;transition:all .3s;
}
.lpe:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}

.lpst{font-size:10px;font-family:var(--font-mono);color:var(--text-mid);line-height:1.6}
.lpst b{color:var(--text)}

.lpsrc{
  font-size:10px;color:var(--text-dim);background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-top:4px;
  font-family:var(--font-mono);line-height:1.5;
}

/* ═══ Refined layer panel ═══ */
.lpl-hint{font-size:9px;color:var(--text-dim);font-weight:500;letter-spacing:0;text-transform:none;margin-left:6px;font-family:var(--font-body)}

.layer-meta{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 8px}
.meta-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-mid)}
.meta-chip.ai{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);color:var(--green)}
.meta-chip.live{background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.25);color:#f5a623}
.meta-chip .meta-ico{font-size:8px;opacity:.85}

.layer-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:6px 0 10px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.stat-row{display:flex;justify-content:space-between;align-items:baseline}
.stat-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.stat-value{font-size:11px;font-family:var(--font-mono);color:var(--text);font-weight:600}

.viz-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:2px 0 10px}
.viz-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:10px;font-weight:600;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--text-mid);border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}
.viz-pill:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:rgba(255,255,255,.15)}
.viz-pill.active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:var(--green)}
.viz-pill-ico{display:inline-flex;align-items:center}

.more-options-btn{width:100%;text-align:center;padding:8px;margin:6px 0 10px;background:transparent;border:1px dashed rgba(255,255,255,.12);color:var(--text-mid);border-radius:8px;cursor:pointer;font-size:11px;font-family:inherit}
.more-options-btn:hover{border-color:rgba(34,197,94,.3);color:var(--green)}

.more-options-panel{padding-top:4px;border-top:1px solid rgba(255,255,255,.04)}

.ramp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 8px}
.ramp-cell{display:flex;flex-direction:column;gap:3px;position:relative}
.ramp-swatch{width:100%;height:20px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s}
.ramp-swatch:hover{transform:scaleY(1.1)}
.ramp-swatch.active{border-color:var(--green);box-shadow:0 0 8px rgba(34,197,94,.3)}
.ramp-label{font-size:9px;color:var(--text-dim);text-align:center;margin-top:2px;line-height:1.2}
.ai-badge{display:inline-block;margin-left:4px;font-size:8px;padding:1px 4px;background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3);border-radius:4px;font-family:var(--font-mono);font-weight:700;letter-spacing:.3px}

.single-colors{gap:6px;padding:4px 0}
.single-color{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.single-color.active{border-color:#fff;box-shadow:0 0 6px rgba(255,255,255,.3)}

.filter-row .filter-label{min-width:14px;color:var(--green);font-family:var(--font-mono);text-align:center}

.export-row{gap:4px;flex-wrap:wrap}
.export-row .lpe{flex:1;min-width:72px;text-align:center}

.layer-source{font-size:11px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-top:2px}
.layer-source .source-engine{color:var(--text);font-weight:600;font-size:11px;margin-bottom:2px}
.layer-source .source-type{color:var(--text-dim);font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-family:var(--font-mono)}
.layer-source .source-refs{display:flex;flex-wrap:wrap;gap:6px}
.layer-source .source-refs a{color:var(--blue);font-family:var(--font-mono);font-size:10px;text-decoration:none;padding:2px 6px;background:rgba(77,141,247,.08);border-radius:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-source .source-refs a:hover{background:rgba(77,141,247,.18)}
.lpsrc a{color:var(--blue);text-decoration:none;transition:color .2s}
.lpsrc a:hover{text-decoration:underline;color:#60a5fa}
.nol{font-size:13px;color:var(--text-dim);padding:6px 0}

.ni{display:flex;gap:8px;padding:3px 0;font-size:11px;color:var(--text-mid)}
.nk{font-family:var(--font-mono);font-size:10px;color:var(--green);min-width:64px;flex-shrink:0;font-weight:500}

.sg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sb2{
  font-size:10px;font-family:var(--font-mono);font-weight:500;padding:6px;
  border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--text-mid);cursor:pointer;transition:all .3s;text-align:center;
}
.sb2:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.sb2.a{border-color:rgba(34,197,94,.3);color:var(--green);background:var(--green-dim)}

/* ═══════════ API FORM ═══════════ */

.api-form{display:flex;flex-direction:column;gap:6px}
.api-form input,.api-form select{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 18px;font-size:15px;color:var(--text);
  outline:none;font-family:var(--font-body);width:100%;transition:all .3s;
}
.api-form input:focus,.api-form select:focus{border-color:rgba(34,197,94,.4);box-shadow:0 0 0 3px rgba(34,197,94,.08);background:rgba(255,255,255,.06)}
.api-form input::placeholder{color:var(--text-dim)}
.api-form select{color:var(--text-mid)}
.api-form label{
  font-size:11px;color:var(--text-dim);font-family:var(--font-mono);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
}
.api-test{
  padding:14px 28px;border-radius:var(--radius-sm);border:none;
  background:var(--green);color:#fff;cursor:pointer;
  font-size:14px;font-weight:600;font-family:var(--font-body);
  transition:all .3s;width:100%;
}
.api-test:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.api-test:active{transform:translateY(0)}

/* ═══════════ MODALS ═══════════ */

.modal-bg{
  position:fixed;inset:0;z-index:1500;
  background:rgba(6,7,11,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;
}
.modal-bg.open{display:flex}

.modal-box{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;max-width:420px;width:90vw;max-height:80vh;
  overflow-y:auto;scrollbar-width:none;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  backdrop-filter:blur(12px);
  animation:fadeIn .25s cubic-bezier(.22,1,.36,1);
}
.modal-box::-webkit-scrollbar{display:none}
.modal-sm{max-width:340px}
.modal-fs-box{max-width:860px;width:95vw;max-height:90vh}

.modal-hdr{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:16px;font-weight:700;font-family:var(--font-display);
}
.modal-hdr span:first-child{flex:1}
.modal-x{
  background:none;border:none;
  color:var(--text-mid);font-size:18px;cursor:pointer;
  transition:all .2s;padding:8px;border-radius:8px;
}
.modal-x:hover{color:var(--text);background:rgba(255,255,255,.05)}

/* ═══════════ INSPECT PANEL ═══════════ */

.ins{
  position:fixed;top:60px;right:0;width:260px;bottom:70px;z-index:1400;
  background:rgba(10,12,18,.97);
  border:1px solid rgba(255,255,255,.08);border-right:none;
  border-radius:16px 0 0 16px;
  display:none;flex-direction:column;overflow-y:auto;
  scrollbar-width:none;padding:18px 20px;
  animation:stepIn .5s cubic-bezier(.22,1,.36,1);
  box-shadow:-10px 0 40px rgba(0,0,0,.4);
  transition:right .3s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-family:var(--font-body);
}
/* When the Data Insights panel is open, the inspect card attaches flush to
   its left edge so the two read as one continuous panel. The combined unit
   keeps its OUTER rounded corners (top-left + bottom-left of the inspect,
   which is now the leftmost edge), and BOTH inner-seam corners are flat:
     - inspect's top-right + bottom-right (the side touching insights)
     - insights's top-left + bottom-left (the side touching inspect)
   Owner reported the seam looked broken because the previous rule kept
   insights's bottom-left at 16px curve while the inspect's bottom-right
   was flat — the bottom corner of the seam visually pulled apart. Now
   both seam corners are flat; both outer corners stay rounded. Desktop
   only — on mobile the insights panel becomes a bottom sheet so the
   layout problem doesn't apply. */
body.insights-open .ins{
  right:360px;
  border-radius:16px 0 0 16px;  /* keep outer left corners rounded */
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
body.insights-open .data-insights.open{
  border-radius:0;              /* flatten ALL — outer right against screen edge, left against inspect */
  border-left:none;
  box-shadow:none;
}
@media(max-width:768px){
  body.insights-open .ins{right:0;border-radius:16px 0 0 16px;border-left:1px solid rgba(255,255,255,.08)}
  body.insights-open .data-insights.open{border-radius:16px 16px 0 0}
}
.ins.op{display:flex}
.ins::-webkit-scrollbar{display:none}
.ins-c{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-mid);font-size:16px;cursor:pointer;padding:6px;border-radius:6px;transition:all .2s}
.ins-c:hover{color:var(--text);background:rgba(255,255,255,.05)}
.ins-v{font-family:var(--font-display);font-size:clamp(18px,4vw,28px);font-weight:700;margin:6px 0;word-wrap:break-word;overflow-wrap:break-word;line-height:1.2}
.ins-n{font-size:16px;font-weight:700;font-family:var(--font-display);margin-bottom:4px}
.ins-d{font-size:12px;color:var(--text-mid);margin-bottom:10px}
.ins-r{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid var(--border)}
.ins-r:last-child{border:none}
.ins-k{color:var(--text-dim)}
.ins-vv{font-family:var(--font-mono);color:var(--text);font-weight:500}
.ins-fly{
  margin-top:10px;padding:14px 28px;border-radius:var(--radius-sm);border:none;
  background:var(--green);color:#fff;cursor:pointer;font-size:14px;
  font-weight:600;font-family:var(--font-body);text-align:center;transition:all .3s;width:100%;
}
.ins-fly:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.ins-fly:active{transform:translateY(0)}
.ins-nb{font-size:11px;padding:4px 0;border-bottom:1px solid var(--border);cursor:pointer;color:var(--text-mid);transition:all .2s}
.ins-nb:hover{color:var(--green)}

/* ═══════════ STATS ═══════════ */

.sts{
  position:fixed;top:72px;right:14px;z-index:700;
  display:flex;flex-direction:column;gap:6px;width:140px;transition:right .3s cubic-bezier(.22,1,.36,1);
}
.sts.sh{right:274px}
.stc{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
  backdrop-filter:blur(12px);
  animation:stepIn .5s cubic-bezier(.22,1,.36,1);
}
.stl{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.stv{font-family:var(--font-display);font-size:18px;font-weight:700;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.stv.green{color:var(--green)}
.stv.blue{color:var(--blue)}
.stv.red{color:var(--red)}
.sts2{font-size:9px;color:var(--text-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ═══════════ DOCK (PROMPT + TIMELINE) ═══════════ */

.dk{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:900;width:min(620px,calc(100vw - 300px));
  display:flex;flex-direction:column;gap:6px;transition:width .3s cubic-bezier(.22,1,.36,1);
}
.dk.wide{width:min(680px,calc(100vw - 24px))}

/* Prompt bar */
.pm{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
}
.pm:focus-within{border-color:rgba(34,197,94,.4);box-shadow:0 0 0 3px rgba(34,197,94,.08),0 8px 32px rgba(0,0,0,.4)}

/* Loading state: green glow + animated progress bar along the bottom edge */
.pm.loading{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 20px rgba(34,197,94,.1),0 8px 32px rgba(0,0,0,.4)}
.pm.loading::after{
  content:'';position:absolute;bottom:0;left:0;height:2px;
  background:var(--green);border-radius:0 0 12px 12px;
  animation:earthxi-loading-bar 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes earthxi-loading-bar{
  0%   {width:0;  left:0}
  50%  {width:60%;left:20%}
  100% {width:0;  left:100%}
}

/* Mode-change flash — brief coloured glow when the user toggles the
   speed mode. JS adds .mode-flash-{mode} for ~700ms then strips it.
   Each mode gets its own colour cue so the flash doubles as visual
   confirmation of which mode you just selected. */
.pm.mode-flash-balanced{animation:pm-flash-green .75s cubic-bezier(.22,1,.36,1)}
.pm.mode-flash-fast    {animation:pm-flash-amber .75s cubic-bezier(.22,1,.36,1)}
.pm.mode-flash-verify  {animation:pm-flash-blue  .75s cubic-bezier(.22,1,.36,1)}
@keyframes pm-flash-green{
  0%  {box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
  35% {box-shadow:0 0 0 4px rgba(34,197,94,.45),0 0 28px rgba(34,197,94,.5),0 8px 32px rgba(0,0,0,.4);border-color:rgba(34,197,94,.7)}
  100%{box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
}
@keyframes pm-flash-amber{
  0%  {box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
  35% {box-shadow:0 0 0 4px rgba(245,158,11,.45),0 0 28px rgba(245,158,11,.5),0 8px 32px rgba(0,0,0,.4);border-color:rgba(245,158,11,.7)}
  100%{box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
}
@keyframes pm-flash-blue{
  0%  {box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
  35% {box-shadow:0 0 0 4px rgba(59,130,246,.45),0 0 28px rgba(59,130,246,.5),0 8px 32px rgba(0,0,0,.4);border-color:rgba(59,130,246,.7)}
  100%{box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--border)}
}

/* "Thinking" indicator that replaces the static helper text while a
   query is in flight. Three bouncing dots out of phase so the
   sub-second wait reads as active rather than frozen — beta tester
   said a 40s wait felt longer than ChatGPT/Claude because we only
   had a static toast. */
.pm-thinking{
  display:none;
  font-size:10px;color:var(--green);
  font-weight:500;letter-spacing:.04em;
  padding:2px 14px 6px;
  font-family:var(--font-body);
}
.pm.loading .pm-h{display:none}
.pm.loading .pm-thinking{display:block}
.pm-thinking .pm-thinking-msg{display:inline-block;min-width:140px}
.pm-thinking .pm-dot{
  display:inline-block;width:4px;height:4px;margin:0 1px;
  border-radius:50%;background:var(--green);
  animation:pm-dot-pulse 1.2s ease-in-out infinite;
  vertical-align:middle;
}
.pm-thinking .pm-dot:nth-child(2){animation-delay:.18s}
.pm-thinking .pm-dot:nth-child(3){animation-delay:.36s}
@keyframes pm-dot-pulse{
  0%,100%{opacity:.3;transform:translateY(0)}
  40%    {opacity:1; transform:translateY(-3px)}
}

/* Stop state for the send button while a query is in flight — red bg with subtle pulse */
.pm-g.stopping{background:#ef4444;animation:earthxi-pulse-cancel 1.2s ease infinite}
.pm-g.stopping:hover{background:#dc2626;box-shadow:0 4px 20px rgba(239,68,68,.3)}
.pm-g.stopping svg{display:block}
@keyframes earthxi-pulse-cancel{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}
  50%    {box-shadow:0 0 0 6px rgba(239,68,68,0)}
}

.pm-r{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:40px}
.pm-i{
  width:28px;height:28px;border-radius:8px;background:var(--green);
  display:grid;place-items:center;font-size:11px;flex-shrink:0;color:#fff;
}

.ai-sel{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:13px;color:var(--text-mid);
  outline:none;font-family:var(--font-body);font-weight:500;
  cursor:pointer;flex-shrink:0;transition:all .3s;
}
.ai-sel:hover{background:rgba(255,255,255,.06)}
.ai-sel:focus{border-color:rgba(34,197,94,.4);color:var(--text);box-shadow:0 0 0 3px rgba(34,197,94,.08)}
.ai-sel option{background:var(--bg);color:var(--text)}

/* ═══ Speed-mode toggle (Balanced / Fast / Research) ═══ */
.speed-mode{
  display:flex;gap:1px;flex-shrink:0;margin-left:4px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:2px;
}
.speed-btn{
  background:none;border:none;padding:5px 7px;border-radius:6px;
  cursor:pointer;color:rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s;
}
.speed-btn:hover{color:rgba(255,255,255,.7)}
.speed-btn.active{color:var(--green);background:rgba(34,197,94,.12)}
.speed-btn:focus-visible{outline:1px solid rgba(34,197,94,.4);outline-offset:-1px}
.speed-btn-disabled,.speed-btn-disabled:hover{color:rgba(255,255,255,.2);cursor:not-allowed;background:transparent;opacity:.5}
@media(max-width:640px){
  .speed-mode{padding:1px}
  .speed-btn{padding:4px 5px}
}

/* ═══ AI engine picker (minimal — body-portal dropdown) ═══ */
.ai-pick{position:relative;flex-shrink:0}
.ai-pick-sel{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;color:var(--text);font-size:12px;font-family:var(--font-body);
  cursor:pointer;transition:border-color .2s,background .2s;white-space:nowrap;user-select:none;
}
.ai-pick-sel:hover{border-color:var(--green);background:rgba(255,255,255,.08)}
.ai-pick-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;font-size:14px;line-height:1;color:var(--green)}
.ai-pick-label{font-weight:600}
.ai-pick-arrow{font-size:10px;color:var(--text-dim);margin-left:2px}

/* Body-level dropdown — position:fixed so it can never be clipped. */
.ai-dropdown{
  display:none;position:fixed;z-index:999999;min-width:240px;
  background:rgba(10,12,18,.98);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:6px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  font-family:var(--font-body);
}
.ai-dropdown.open{display:block}

.ai-dd-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:8px;cursor:pointer;color:var(--text);font-size:13px;
  transition:background .12s;
}
.ai-dd-row:hover{background:rgba(255,255,255,.06)}
.ai-dd-row.active{background:rgba(34,197,94,.1);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
.ai-dd-row.disabled{opacity:.4;cursor:not-allowed}
.ai-dd-row.disabled:hover{background:transparent}
.ai-dd-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;font-weight:700}
.ai-dd-name{font-weight:600}
.ai-dd-desc{font-size:10px;color:var(--text-dim);margin-left:auto;white-space:nowrap}

/* ═══ Multi-select overlay chip panels (Weather / Boundaries / Infrastructure) ═══ */
.sb-expand-btn{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  color:var(--text);font-size:11px;font-family:var(--font-body);
  cursor:pointer;min-width:78px;justify-content:space-between;
  transition:border-color .15s,background .15s;
}
.sb-expand-btn:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.sb-expand-btn.open{border-color:rgba(34,197,94,.3)}
.sb-expand-arrow{font-size:9px;color:var(--text-dim);transition:transform .2s}
.sb-expand-btn.open .sb-expand-arrow{transform:rotate(180deg)}
.overlay-count{font-size:10px;color:var(--green);font-weight:700;letter-spacing:.2px}
.overlay-count:empty::before{content:'Off';color:var(--text-dim);font-weight:400}

.overlay-panel{
  display:flex;flex-direction:column;gap:1px;
  padding:4px 0 8px 4px;margin-bottom:2px;
  border-left:1px solid rgba(255,255,255,.06);
}
.overlay-chip{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:6px;cursor:pointer;
  font-size:11px;color:var(--text-mid);user-select:none;
  transition:background .15s,color .15s;
}
.overlay-chip:hover{background:rgba(255,255,255,.04);color:var(--text)}
/* Custom-drawn overlay chip checkboxes. The native OS checkbox looks out of
   place against the dark sidebar, so we hide it and render a pill-shaped
   badge with a subtle ring → filled green-with-check when selected. The
   underlying input stays keyboard- and screen-reader-accessible. */
.overlay-chip input[type="checkbox"],
.overlay-chip input[type="radio"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:14px;height:14px;border-radius:4px;
  border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  cursor:pointer;margin:0;flex-shrink:0;
  display:inline-grid;place-content:center;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.overlay-chip input[type="radio"]{border-radius:50%}
.overlay-chip input[type="checkbox"]:hover,
.overlay-chip input[type="radio"]:hover{border-color:rgba(34,197,94,.5)}
.overlay-chip input[type="checkbox"]:checked,
.overlay-chip input[type="radio"]:checked{
  background:var(--green);border-color:var(--green);
  box-shadow:0 0 0 2px rgba(34,197,94,.18);
}
.overlay-chip input[type="checkbox"]:checked::after{
  content:'';width:8px;height:4px;
  border-left:2px solid #0b0d12;border-bottom:2px solid #0b0d12;
  transform:rotate(-45deg) translate(1px, -1px);
}
.overlay-chip input[type="radio"]:checked::after{
  content:'';width:5px;height:5px;border-radius:50%;background:#0b0d12;
}
.overlay-chip input[type="checkbox"]:focus-visible,
.overlay-chip input[type="radio"]:focus-visible{
  outline:2px solid rgba(34,197,94,.45);outline-offset:2px;
}
.overlay-chip input:checked ~ .chip-label{color:var(--text);font-weight:500}
.chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.chip-label{flex:1;line-height:1.2}
.chip-note{font-size:9px;color:var(--text-dim);font-weight:500;letter-spacing:.02em;flex-shrink:0;margin-left:auto}

/* Clickable color swatch on layer cards (satellites only for now). */
.ldot.ldot-pickable{
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
  transition:box-shadow .18s ease,transform .18s ease;
}
.ldot.ldot-pickable:hover{
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 12px rgba(255,255,255,.18);
  transform:scale(1.1);
}

/* Color preset popup floated above the swatch (position:fixed in JS so it's
   never clipped by sidebar overflow). */
.color-picker-popup{
  position:fixed;z-index:99999;
  display:flex;gap:6px;padding:8px 10px;
  background:rgba(15,17,23,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.color-picker-dot{
  width:20px;height:20px;border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.15);
  transition:transform .15s ease,border-color .15s ease;
}
.color-picker-dot:hover{transform:scale(1.15);border-color:rgba(255,255,255,.5)}

/* "Show full map" pill — appears while infra is scoped to an area via zoom-range. */
.mask-clear-btn,
.infra-unlock-btn{
  position:fixed;top:56px;left:50%;transform:translateX(-50%);
  padding:6px 16px;z-index:600;
  background:rgba(15,17,23,.92);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;color:var(--text);font-size:11px;cursor:pointer;
  font-family:var(--font-body);letter-spacing:.2px;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:border-color .2s,transform .15s;
}
.mask-clear-btn:hover,
.infra-unlock-btn:hover{border-color:var(--green);transform:translateX(-50%) translateY(-1px)}

/* ═══ Rain radar legend (bottom-left floating panel) ═══ */
.rv-legend{
  position:fixed;left:14px;bottom:100px;z-index:900;
  width:260px;padding:10px 12px;
  background:rgba(15,17,23,.95);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-family:var(--font-body);color:#e2e8f0;
  transition:left .3s cubic-bezier(.22,1,.36,1);
}
/* Sidebar (.sb) is 280px wide, fixed at left:0. When it's open the radar
   legend at left:14px is hidden behind it. Shift the legend right of the
   sidebar so beta tester can read the time AND the layers panel at the
   same time. */
.sb:not(.closed) ~ .rv-legend{left:294px}
.rv-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rv-play,.rv-close{
  background:rgba(255,255,255,.08);border:none;color:#e2e8f0;
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  font-size:12px;display:grid;place-items:center;flex-shrink:0;
}
.rv-play:hover,.rv-close:hover{background:rgba(255,255,255,.15)}
.rv-info{flex:1;min-width:0}
.rv-time{font-family:var(--font-mono);font-weight:700;font-size:13px;color:#fff}
.rv-label{font-size:10px;color:var(--text-dim);margin-top:1px}
/* Custom-styled scrub slider so the hit target is obvious on touch and the
   native OS theming doesn't clash with the dark panel. `touch-action:
   manipulation` lets the thumb be dragged on mobile without triggering
   the page's pan gesture. */
.rv-scrub{
  -webkit-appearance:none;appearance:none;
  width:100%;height:24px;margin:6px 0 2px;background:transparent;
  cursor:pointer;touch-action:manipulation;
  position:relative;z-index:1;pointer-events:auto;
}
.rv-scrub:focus{outline:none}
.rv-scrub::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,#cfe8ff,#60a5fa,#3b82f6,#1d4ed8,#7c3aed,#db2777,#dc2626);
}
.rv-scrub::-moz-range-track{
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,#cfe8ff,#60a5fa,#3b82f6,#1d4ed8,#7c3aed,#db2777,#dc2626);
}
.rv-scrub::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;margin-top:-6px;
  background:var(--green);border:2px solid #0b0d12;
  box-shadow:0 2px 8px rgba(34,197,94,.5);cursor:grab;
}
.rv-scrub::-webkit-slider-thumb:active{cursor:grabbing}
.rv-scrub::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--green);border:2px solid #0b0d12;
  box-shadow:0 2px 8px rgba(34,197,94,.5);cursor:grab;
}
.rv-ramp{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text-dim)}
.rv-gradient{
  flex:1;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#cfe8ff,#60a5fa,#3b82f6,#1d4ed8,#7c3aed,#db2777,#dc2626);
}

/* Engine badge on layer card / chat response */
.engine-badge{
  display:inline-block;font-size:9px;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.06);color:var(--text-dim);margin-left:4px;
  font-family:var(--font-mono);letter-spacing:.3px;white-space:nowrap;vertical-align:middle;
}

#pi{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:15px;font-weight:500;
  caret-color:var(--green);
}
#pi::placeholder{color:var(--text-dim)}

.pm-g{
  width:36px;height:36px;border-radius:var(--radius-sm);border:none;
  background:var(--green);color:#fff;font-size:15px;
  cursor:pointer;display:grid;place-items:center;
  transition:all .3s;flex-shrink:0;font-weight:700;
}
.pm-g:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.pm-g:active{transform:translateY(0)}
.pm-g:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}

.pm-h{font-size:10px;color:var(--text-dim);padding:2px 14px 6px;font-weight:500}

/* Timeline */
.tll{display:none;align-items:center;gap:8px;padding:0 4px}
.tll.on{display:flex}
.tp{
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(34,197,94,.3);background:var(--green-dim);
  color:var(--green);display:grid;place-items:center;
  cursor:pointer;font-size:11px;transition:all .3s;flex-shrink:0;
}
.tp:hover{background:rgba(34,197,94,.2);box-shadow:0 0 12px rgba(34,197,94,.2)}

.tw2{flex:1;position:relative;height:20px;cursor:pointer}
.tbg{position:absolute;top:9px;left:0;right:0;height:2px;background:rgba(255,255,255,.06);border-radius:1px}
.tpr{position:absolute;top:9px;left:0;height:2px;background:var(--green);border-radius:1px;box-shadow:0 0 6px rgba(34,197,94,.3)}
.tth{
  position:absolute;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg);
  box-shadow:0 0 10px rgba(34,197,94,.3);transform:translateX(-50%);pointer-events:none;
}
.tdt{font-family:var(--font-mono);font-size:10px;color:var(--green);flex-shrink:0;min-width:76px;text-align:right;font-weight:500}

.tsp{display:flex;gap:3px;flex-shrink:0}
.ts{
  font-size:9px;font-family:var(--font-mono);font-weight:500;
  padding:4px 6px;border-radius:6px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);color:var(--text-mid);cursor:pointer;transition:all .3s;
}
.ts:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.ts.on{border-color:rgba(34,197,94,.3);color:var(--green);background:var(--green-dim)}

/* Suggestions */
.sug2{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sg2{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;padding:10px 18px;border-radius:10px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--text-mid);cursor:pointer;transition:all .3s;
  font-family:var(--font-body);
}
.sg2:hover{background:rgba(255,255,255,.07);border-color:var(--border-hover);transform:translateY(-2px);color:var(--text)}

.nsb{
  font-size:11px;font-family:var(--font-mono);font-weight:500;
  padding:8px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text-mid);
  cursor:pointer;transition:all .3s;display:none;margin:0 auto;
}
.nsb.show{display:block}
.nsb:hover{background:rgba(255,255,255,.07);border-color:var(--border-hover);color:var(--text);transform:translateY(-1px)}

/* ═══════════ BUILDINGS 3D — tour button ═══════════ */
.layer-tour-btn{
  background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.3);
  color:#a78bfa;padding:6px 12px;border-radius:6px;cursor:pointer;
  font-size:11px;font-weight:600;margin:6px 0;
  font-family:var(--font-body);transition:background .15s ease;
}
.layer-tour-btn:hover{background:rgba(139,92,246,0.25)}

/* ═══════════ TOAST ═══════════ */

.toast{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  z-index:1000;font-size:13px;font-family:var(--font-body);font-weight:500;
  padding:10px 18px;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-mid);
  display:none;align-items:center;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  max-width:90vw;
  animation:fadeIn .25s cubic-bezier(.22,1,.36,1);
}
.toast.v{display:flex}
.toast.err{border-color:rgba(239,68,68,.2);color:#fca5a5;background:rgba(239,68,68,.1)}
.toast-pbar{position:absolute;bottom:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .4s ease;border-radius:0 0 8px 8px}
.toast.toast-done .toast-pbar{width:100%!important;transition:width .2s ease}

.spin{
  width:12px;height:12px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite;
}

/* ═══════════ TOOLTIP ═══════════ */

.hov{
  position:fixed;z-index:950;
  background:rgba(15,17,23,.95);color:#e2e8f0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:8px 12px;pointer-events:none;
  opacity:0;transition:opacity .15s;max-width:240px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--font-body);
}
.hov.sh{opacity:1}

/* ═══════════ MEASURE ═══════════ */

.mr{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  z-index:850;background:var(--bg-card);border:1px solid rgba(234,179,8,.25);
  border-radius:var(--radius-sm);padding:10px 20px;font-family:var(--font-mono);
  font-size:13px;font-weight:500;color:var(--yellow);display:none;align-items:center;
  gap:8px;box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(12px);
}
.mr.show{display:flex}
.mr button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:4px;border-radius:4px;transition:all .2s}
.mr button:hover{color:var(--text);background:rgba(255,255,255,.05)}

/* ═══════════ WELCOME ═══════════ */

.wel{
  position:fixed;inset:0;z-index:2000;
  background:rgba(6,7,11,.96);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
}
.wel.hid{display:none}
.wc{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:40px;max-width:440px;width:90vw;text-align:center;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  animation:fadeIn .5s cubic-bezier(.22,1,.36,1);
}
.wt{font-size:28px;font-weight:800;font-family:var(--font-display);margin:12px 0 6px;letter-spacing:-.5px}
.ws{font-size:14px;color:var(--text-mid);margin-bottom:24px;font-weight:500}
.wf{text-align:left;margin-bottom:24px}
.wfi{display:flex;gap:10px;padding:6px 0;font-size:13px;color:var(--text-mid);font-weight:500}
.wfi span:first-child{font-size:14px;width:18px;text-align:center;flex-shrink:0;color:var(--green)}
.wg{
  padding:14px 28px;border-radius:var(--radius-sm);border:none;
  background:var(--green);color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;font-family:var(--font-body);transition:all .3s;
}
.wg:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,197,94,.3)}
.wg:active{transform:translateY(0)}

/* ═══════════ ERROR BOUNDARY ═══════════ */

.error-boundary{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:1001;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius-sm);padding:12px 20px;font-size:12px;color:#fca5a5;
  font-family:var(--font-mono);max-width:90vw;display:none;
  backdrop-filter:blur(12px);
}
.error-boundary.show{display:block}

/* ═══════════ SKELETON ═══════════ */

.skel{
  background:linear-gradient(90deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.02) 100%);
  background-size:200px 100%;animation:skel 1.5s ease-in-out infinite;border-radius:6px;height:12px;
}

/* ═══════════ SCROLLBAR (hidden) ═══════════ */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}

/* ═══════════ SAFE AREAS ═══════════ */

.hdr{padding-top:env(safe-area-inset-top)}
.dk{padding-bottom:env(safe-area-inset-bottom)}

/* ═══════════ SIDEBAR OVERLAY (mobile) ═══════════ */

.sb-overlay{
  position:fixed;inset:0;z-index:799;
  background:rgba(6,7,11,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;opacity:0;transition:opacity .3s;
}
.sb-overlay.show{display:block;opacity:1}

/* ═══════════ INSPECT HANDLE (mobile) ═══════════ */

.ins-handle{
  display:none;width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.2);margin:0 auto 12px;
}

/* ═══════════ RESPONSIVE: TABLET LANDSCAPE ═══════════ */

@media(max-width:1024px){
  .dk{width:min(580px,calc(100vw - 300px))}
  .dk.wide{width:min(620px,calc(100vw - 20px))}
}

/* ═══════════ RESPONSIVE: TABLET / LARGE PHONE ═══════════ */

@media(max-width:768px){
  /* Header */
  .hdr{height:56px;padding:0 12px}
  .hb2{padding:6px 10px;font-size:12px}
  .br-v{display:none}

  /* Header stays above the sidebar drawer */
  .hdr{z-index:1000}

  /* Sidebar: full drawer starting BELOW the header, with dynamic-viewport height */
  .sb{
    top:56px;width:min(85vw,340px);z-index:900;
    height:calc(100vh - 56px);height:calc(100dvh - 56px);
    border-right:none;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    box-shadow:16px 0 48px rgba(0,0,0,.5);
    padding-top:12px;
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }
  .sb.closed{transform:translateX(-100%)}

  /* Stats: hidden on mobile */
  .sts{display:none!important}

  /* Inspect: bottom sheet sitting ABOVE the prompt bar, not behind it. The
     prompt bar (.dk) takes ~80px plus safe-area; pad extra so the data card
     has breathing room and a visible drag-handle. */
  .ins{
    top:auto!important;right:0!important;left:0!important;
    bottom:calc(96px + env(safe-area-inset-bottom));
    width:100%!important;
    max-height:calc(100vh - 220px);
    max-height:calc(100dvh - 220px);
    border-left:none;border-top:1px solid var(--border);
    border-radius:var(--radius) var(--radius) 0 0;
    margin:0 8px;
    width:calc(100% - 16px)!important;
    z-index:810;
  }
  .ins-handle{display:block}

  /* Dock: full width */
  .dk{
    width:calc(100vw - 24px)!important;
    bottom:8px;
  }
  .dk.wide{width:calc(100vw - 16px)!important}

  /* Prompt */
  .pm{border-radius:16px;padding:4px}
  .pm-r{gap:6px;padding:4px 8px;min-height:44px}
  .pm-h{display:none}
  #pi{font-size:14px}
  .pm-g{width:40px;height:40px}

  /* Suggestions: horizontal scroll */
  .sug2{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:0 4px;gap:4px;
  }
  .sg2{flex-shrink:0;font-size:12px;padding:8px 14px}

  /* Timeline */
  .tll{gap:6px}
  .tp{width:36px;height:36px;font-size:13px}
  .tth{width:16px;height:16px;top:2px}
  .tw2{height:24px}
  .tbg,.tpr{top:11px}

  /* Modals: full screen */
  .modal-box{
    max-width:100vw!important;width:100vw!important;max-height:100vh!important;
    height:100vh;border-radius:0;padding:20px;
  }
  .modal-fs-box{max-width:100vw!important;width:100vw!important}
  .modal-x{width:44px;height:44px;font-size:22px}

  /* Map tiles: horizontal scroll */
  .map-tiles{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:6px;
  }
  .map-tile{min-width:56px;flex-shrink:0}
  .map-thumb{height:36px;width:48px}

  /* Layer expanded panel */
  .lp{padding:8px 0 6px 8px}
  .rg{grid-template-columns:repeat(2,1fr)}

  /* Sliders: bigger touch target */
  .lps input[type=range]{height:6px}
  .lps input[type=range]::-webkit-slider-thumb{width:18px;height:18px}

  /* Toast — pin to the top on mobile so it never overlaps the prompt bar
     or the inspect sheet at the bottom. */
  .toast{top:60px;bottom:auto;font-size:12px;max-width:calc(100vw - 32px);padding:8px 16px;z-index:9998}

  /* Mapbox popups: narrower so they don't blow past the edges on phones. */
  .mapboxgl-popup{max-width:250px!important;z-index:1300}
  .mapboxgl-popup-content{font-size:12px;padding:10px 12px}

  /* Measure */
  .mr{top:auto;bottom:80px}

  /* Welcome */
  .wc{padding:28px 20px;max-width:95vw}
  .wt{font-size:22px}

  /* Data table: bottom sheet */
  .dt{
    top:auto !important;right:0 !important;left:0 !important;bottom:0 !important;
    width:100% !important;max-width:100% !important;
    border-radius:16px 16px 0 0;
    max-height:45vh;
    z-index:840;
  }
  .dt-body{max-height:calc(45vh - 48px)}

  /* Map legend — tighter on mobile */
  .map-legend{
    bottom:calc(80px + env(safe-area-inset-bottom));left:8px;
    min-width:140px;max-width:200px;padding:8px 10px;
  }
  /* Hide legend when sidebar is open to prevent overlap */
  body:has(.sb:not(.closed)) .map-legend{display:none !important}

  /* Header label text in measure button */
  .hb2 .m-label{display:none}

  /* Header crowd control on mobile — the hdr-r row runs out of room fast
     because Measure + Route + screenshot + chat + status + menu buttons
     all compete with the brand block. Drop the decorative pill ("BETA")
     and the "Ready" status text on narrow screens; keep the quota badge
     visible (owner asked for it) but tighten its padding so it fits.
     Icons + hamburger still get the user everywhere they need to go. */
  .beta-tag{display:none}
  .hdr-r #pc{display:none}
  .hdr-r .hdr-dot{margin-left:4px}
  .quota-badge{padding:2px 6px;font-size:8.5px;letter-spacing:.3px;margin-left:4px}

  /* Safe-area insets */
  .pm{padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .ins{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .chat-panel{padding-bottom:env(safe-area-inset-bottom)}

  /* Route info — already has mobile rules but ensure top sits under header */
  .route-info{top:60px}

  /* Timelapse UI — ensure sits under header */
  .timelapse-ui{top:60px}
}

/* ═══════════ RESPONSIVE: SMALL PHONE ═══════════ */

@media(max-width:480px){
  /* Header: compact */
  .hdr{padding:0 8px}
  .br-n{display:none}
  .hb{padding:6px 8px;font-size:12px}
  .hb2{padding:6px 8px;font-size:11px;gap:2px}
  .hb2 .m-label{display:none}
  .hdr-r{font-size:8px;gap:3px}

  /* AI selector: compact */
  .ai-sel{font-size:11px;padding:4px 6px}
  .ai-pick-sel{font-size:11px;padding:4px 6px;gap:4px}
  .ai-pick-label{display:none}
  .ai-dropdown{min-width:220px}

  /* Prompt: tighter */
  .pm-r{gap:4px;padding:2px 6px}
  #pi{font-size:13px}

  /* Suggestions: smaller */
  .sg2{font-size:11px;padding:6px 10px}

  /* Sidebar */
  .sb{width:min(90vw,280px)}

  /* Dock */
  .dk{bottom:6px;width:calc(100vw - 16px)!important}
}

/* ═══════════ ADAPTIVE UI (based on map style) ═══════════
   All floating UI stays dark with light text regardless of the
   map background, so it remains readable on both light and dark
   basemaps. The .light-ui class (on body) applies stronger
   opacity/contrast for light maps; .dark-ui for the dark style. */

/* HEADER */
.light-ui .hdr{background:rgba(15,17,23,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* PROMPT BAR */
.light-ui .pm{
  background:rgba(15,17,23,.92);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.light-ui .pm input{color:#e8e9ed}
.light-ui .pm input::placeholder{color:rgba(255,255,255,.4)}
.light-ui .pm-h{color:rgba(255,255,255,.4)}

.dark-ui .pm{
  background:rgba(15,17,23,.92);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.dark-ui .pm input{color:#e8e9ed}
.dark-ui .pm input::placeholder{color:rgba(255,255,255,.4)}

/* TIMELINE */
.light-ui .tll{
  background:rgba(15,17,23,.88);
  border-radius:12px;
  padding:6px 12px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.light-ui .tdt,.light-ui .ts{color:rgba(255,255,255,.7)}
.light-ui .ts.on{color:var(--green)}

/* TOAST */
.light-ui .toast{
  background:rgba(15,17,23,.92);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.light-ui .toast.err{border-color:var(--red);color:#fca5a5}

/* SUGGESTION CHIPS */
.light-ui .sg2{
  background:rgba(15,17,23,.85);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
}
.light-ui .sg2:hover{
  background:rgba(15,17,23,.95);
  border-color:var(--green);
  color:#fff;
}

/* SUGGESTIONS BUTTON */
.light-ui .nsb{
  background:rgba(15,17,23,.85);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
}
.light-ui .nsb:hover{
  background:rgba(15,17,23,.95);
  border-color:var(--green);
  color:#fff;
}

/* STATS PANEL */
.light-ui .stc{
  background:rgba(15,17,23,.88);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#e8e9ed;
}
.light-ui .stl{color:rgba(255,255,255,.5)}
.light-ui .sts2{color:rgba(255,255,255,.4)}

/* MAPBOX POPUP (always dark, fully opaque so text stays readable) */
.mapboxgl-popup{z-index:1300}
.mapboxgl-popup-content{
  background:rgba(15,17,23,.95)!important;
  color:#e2e8f0!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:12px!important;
  padding:12px 16px!important;
  font-family:var(--font-body)!important;
  font-size:12px!important;
  box-shadow:0 8px 32px rgba(0,0,0,.5)!important;
  max-width:280px!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.mapboxgl-popup-tip{border-top-color:rgba(15,17,23,.95)!important}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{border-top-color:rgba(15,17,23,.95)!important}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{border-bottom-color:rgba(15,17,23,.95)!important}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{border-right-color:rgba(15,17,23,.95)!important}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{border-left-color:rgba(15,17,23,.95)!important}
.mapboxgl-popup-close-button{
  color:#999!important;font-size:18px!important;
  padding:4px 8px!important;right:2px!important;top:2px!important;
  border:none!important;background:transparent!important;
}
.mapboxgl-popup-close-button:hover{
  color:#fff!important;background:rgba(255,255,255,.1)!important;
  border-radius:4px!important;
}

/* ═══════════ DATA TABLE PANEL ═══════════ */

.dt{
  position:fixed;
  bottom:80px;right:12px;
  width:360px;height:auto;
  max-height:40vh;
  z-index:600;
  background:rgba(15,17,23,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  display:none;
  flex-direction:column;
  font-family:var(--font-body);
  color:#e8e9ed;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:max-height .22s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.dt.show{display:flex}
.dt.collapsed{max-height:34px;height:34px;min-height:34px}
/* Shift left when inspect panel is open (unless user has dragged to a custom position) */
body:has(.ins.op) .dt:not(.user-pos){right:272px}
.dt.collapsed .dt-body,.dt.collapsed .dt-resize{display:none}
.dt.dragging{transition:none;cursor:grabbing;user-select:none}
.dt.dragging *{user-select:none}
.dt.resizing{transition:none}

.dt-hdr{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  user-select:none;
  cursor:grab;
  flex-shrink:0;
  height:34px;
}
.dt-hdr:active{cursor:grabbing}
.dt.collapsed .dt-hdr{border-bottom:none;cursor:pointer}
.dt.collapsed .dt-hdr:hover{background:rgba(255,255,255,.03)}

.dt-chev{
  font-size:9px;color:rgba(255,255,255,.5);
  transition:transform .2s;
  line-height:1;
}
.dt.collapsed .dt-chev{transform:rotate(180deg)}

.dt-ttl{
  font-size:10px;font-family:var(--font-mono);
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:200px;
}
.dt-count{
  font-size:9px;font-family:var(--font-mono);
  color:var(--green);
  background:rgba(34,197,94,.12);
  padding:2px 6px;border-radius:6px;
}
.dt-sp{flex:1}
.dt-btn{
  background:none;border:none;color:rgba(255,255,255,.5);
  cursor:pointer;font-size:11px;line-height:1;padding:2px 6px;
  transition:color .15s;
}
.dt-btn:hover{color:#fff}

.dt-body{
  display:flex;flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.dt-resize{
  position:absolute;bottom:0;right:0;
  width:14px;height:14px;
  cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.25) 40%,rgba(255,255,255,.25) 50%,transparent 50%,transparent 60%,rgba(255,255,255,.25) 60%,rgba(255,255,255,.25) 70%,transparent 70%);
  z-index:2;
}

.dt-search{
  margin:6px 8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#e8e9ed;
  font-size:11px;padding:5px 8px;border-radius:6px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color .15s;
}
.dt-search:focus{border-color:rgba(34,197,94,.35)}
.dt-search::placeholder{color:rgba(255,255,255,.3)}

.dt-thead{
  display:grid;grid-template-columns:1.4fr .8fr 1fr;
  gap:6px;padding:6px 10px;
  position:sticky;top:0;z-index:1;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8px;font-family:var(--font-mono);
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.dt-th{cursor:pointer;user-select:none;transition:color .15s}
.dt-th:hover{color:#fff}
.dt-th.sort-asc::after{content:' ▲';font-size:7px;color:var(--green)}
.dt-th.sort-desc::after{content:' ▼';font-size:7px;color:var(--green)}

.dt-rows{
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
  flex:1;
}
.dt-rows::-webkit-scrollbar{width:6px}
.dt-rows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.dt-rows::-webkit-scrollbar-track{background:transparent}

.dt-row{
  display:grid;grid-template-columns:1.4fr .8fr 1fr;
  gap:6px;padding:6px 10px;
  font-size:10px;
  cursor:pointer;
  border-left:2px solid transparent;
  transition:background .1s, border-color .1s;
}
.dt-row:nth-child(even){background:rgba(255,255,255,.02)}
.dt-row:hover,.dt-row.hover{background:rgba(34,197,94,.08);border-left-color:var(--green)}

.dt-c{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(255,255,255,.75);
  display:flex;align-items:center;gap:5px;
}
.dt-label{color:#e8e9ed}
.dt-value{font-family:var(--font-mono);color:var(--green);font-weight:500}
.dt-detail{color:rgba(255,255,255,.45);font-size:9px}
.dt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

.dt-empty{
  padding:18px 10px;
  font-size:10px;font-style:italic;
  color:rgba(255,255,255,.4);
  text-align:center;
}

/* Mobile: full-width bottom sheet */
@media (max-width:768px){
  .dt{
    bottom:80px;right:8px;left:8px;
    width:auto!important;
    max-height:50vh;
  }
  .dt.collapsed{max-height:34px;height:34px}
  .dt-resize{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — floating UI
   Uses real selectors (.ins, .fb-bar, #feedback-bar, .cached-badge,
   #insights-toggle-btn, #category-legend, .data-insights, .mapboxgl-popup,
   .speed-mode). Earlier parts of this file already handle the sidebar,
   prompt bar, and chat panel — we only touch what still overlaps on mobile.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* Data Insights — bottom sheet, generous height so 99-row data
     tables and long citations lists are actually scrollable. Owner
     screenshot showed 99 data points squashed into a single visible
     row because the panel was capped at 55vh; the inner table-rows
     scroller (which I'd already set to max-height:none on mobile)
     can't help if the parent panel itself is 55vh tall and that
     space is mostly consumed by header + summary + stats. Bumped to
     85vh + explicit overflow-y:auto so the WHOLE panel scrolls
     and 99 rows fit. dvh used for browsers that support it (Safari
     iOS 15.4+, Chrome 108+) to handle dynamic toolbar height. */
  .data-insights{
    top:auto!important;bottom:0!important;
    left:0!important;right:auto!important;
    width:100%!important;max-width:100%!important;
    height:85vh;
    height:85dvh;
    max-height:85vh;
    max-height:85dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0!important;
    border-left:none!important;border-top:1px solid rgba(255,255,255,.08);
    transform:translateY(100%);transition:transform .3s ease;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .data-insights.open{transform:translateY(0)}
  body.chat-open .data-insights.open{right:auto!important}       /* no horizontal shift on mobile */
  .data-insights::before{
    content:'';display:block;width:40px;height:4px;margin:8px auto 2px;
    background:rgba(255,255,255,.22);border-radius:2px;
  }
  .di-section-title{font-size:16px;padding:10px 16px 4px}
  .di-summary{font-size:12px;padding:0 16px 10px}
  .di-stats,.di-legend{padding:0 16px 10px}
  .di-stat{padding:6px 10px}
  .di-stat-label{font-size:10px}
  .di-stat-value{font-size:12px}

  /* Inspect card — same bottom-sheet pattern, sits above the prompt bar. */
  .ins{
    top:auto!important;right:8px!important;left:8px!important;
    bottom:128px!important;
    width:auto!important;max-width:none!important;
    max-height:42vh;overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:16px!important;border-left:none!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.45);
    padding:10px 14px 14px!important;
  }
  .ins::before{
    content:'';display:block;width:40px;height:4px;margin:0 auto 8px;
    background:rgba(255,255,255,.22);border-radius:2px;
  }

  /* Feedback pill + cached badge — top-right, stacked. Never crosses the
     Inspect card (which sits above the prompt bar at bottom:128 px). */
  #feedback-bar,.fb-bar{
    top:50px!important;right:8px!important;left:auto!important;
    transform:none!important;
    padding:5px 10px!important;font-size:10px!important;border-radius:14px!important;
    max-width:calc(100% - 16px)!important;
  }
  .fb-btn{padding:2px 6px!important;font-size:13px!important}
  .cached-badge{
    top:88px!important;right:8px!important;left:auto!important;
    transform:none!important;
    padding:5px 10px!important;font-size:10px!important;
    max-width:calc(100% - 16px)!important;
  }
  .cached-badge .cb-refresh{padding:2px 8px!important;font-size:10px!important}

  /* Floating ℹ reopen button — hoist above the prompt bar. */
  #insights-toggle-btn{
    top:auto!important;right:8px!important;bottom:138px!important;
    width:32px!important;height:32px!important;font-size:14px!important;
  }

  /* Category legend — bottom-left, compact, above prompt. */
  #category-legend{
    bottom:138px!important;top:auto!important;
    right:auto!important;left:8px!important;
    max-width:180px!important;padding:8px 10px!important;font-size:11px!important;
  }

  /* Mapbox popup — already constrained earlier; tighten the close button. */
  .mapboxgl-popup-content{max-height:40vh;overflow-y:auto}
  .mapboxgl-popup-close-button{
    font-size:20px!important;right:6px!important;top:6px!important;
    width:28px!important;height:28px!important;
  }

  /* Speed-mode toggle — make sure all three icons fit. */
  .speed-mode{gap:0;padding:1px;margin-left:2px}
  .speed-btn{padding:4px 5px}

  /* AI picker dropdown — clamp to viewport so it can't overflow. */
  #ai-dropdown,.ai-dropdown{
    min-width:180px!important;max-width:calc(100vw - 32px)!important;
  }
}

/* Feedback bar — reworked to match Data Insights section styling
   (uppercase header, 18px padding, subtle borders, neutral pill chrome).
   Previously looked like a tacked-on plugin; now reads as part of the
   panel's rhythm. */
.feedback-bar {
  margin-top: 18px;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body);
}
.feedback-bar::before {
  content: 'Feedback';
  display: block;
  font-size: 10px; color: #666;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  margin-bottom: 10px;
}
.feedback-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.feedback-label {
  font-size: 12px; color: var(--text-mid, #9ca3af);
}
.feedback-btns {
  display: flex; gap: 6px;
}
.feedback-btn {
  width: 34px; height: 34px; padding: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-mid, #c5c7cc);
  cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.feedback-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.feedback-btn:active { transform: scale(0.94); }
.feedback-btn[data-action="up"]:hover { border-color: rgba(34,197,94,0.35); }
.feedback-btn[data-action="down"]:hover { border-color: rgba(239,68,68,0.35); }

.feedback-elab {
  display: flex; flex-direction: column; gap: 8px;
}
.feedback-elab-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text, #e5e7eb);
  font-family: inherit; font-size: 12px; line-height: 1.5;
  padding: 10px 12px; resize: vertical; min-height: 64px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.feedback-elab-input::placeholder { color: #666; }
.feedback-elab-input:focus {
  background: rgba(255,255,255,0.05);
  border-color: rgba(34,197,94,0.35);
}
.feedback-elab-actions {
  display: flex; justify-content: flex-end; gap: 6px;
}
.feedback-elab-skip, .feedback-elab-send {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  padding: 6px 14px; border-radius: 7px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.feedback-elab-skip {
  background: transparent; color: var(--text-dim, #888);
  border: 1px solid rgba(255,255,255,0.1);
}
.feedback-elab-skip:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-mid, #c5c7cc);
}
.feedback-elab-send {
  background: rgba(34,197,94,0.12);
  color: var(--green, #22c55e);
  border: 1px solid rgba(34,197,94,0.3);
}
.feedback-elab-send:hover {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.45);
}

.feedback-thanks {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--green, #22c55e);
  padding: 4px 0;
}
.feedback-thanks::before {
  content: '\2713';  /* checkmark */
  font-size: 13px; font-weight: 700;
}

/* Quota-exhausted modal — explains the daily AI cap in plain language so
   the user knows the rest of the app still works. Shown once per session
   when the first 429 with body {error:"quota_exceeded"} arrives. */
.quota-modal-bg {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(5,7,12,0.72);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
}
.quota-modal-bg.open { display: flex; }

/* ── Branded confirm/prompt dialogs (replaces native window.confirm /
      window.prompt). Sits a hair above the quota modal so it can stack
      if a prompt fires from inside another modal flow. ── */
.exi-dialog-bg {
  position: fixed; inset: 0; z-index: 10005;
  background: rgba(5,7,12,0.72);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
}
.exi-dialog-bg.open { display: flex; }
.exi-dialog {
  position: relative;
  width: 420px; max-width: calc(100vw - 32px);
  background: rgba(15,17,24,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: var(--text, #e5e7eb);
  outline: none;
}
.exi-dialog__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green, #22c55e);
  margin: 0 0 6px;
}
.exi-dialog__msg {
  font-size: 14.5px; line-height: 1.5;
  color: var(--text, #f2f3f5);
  margin: 0 0 16px;
  white-space: pre-wrap;
}
.exi-dialog__input {
  width: 100%;
  padding: 10px 12px; margin-bottom: 18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  color: var(--text, #f2f3f5);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.exi-dialog__input:focus { border-color: var(--green, #22c55e); }
.exi-dialog__btns {
  display: flex; justify-content: flex-end; gap: 8px;
}
.exi-dialog__btn {
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
  transition: background .15s, color .15s, border-color .15s;
  min-width: 84px;
}
.exi-dialog__btn--cancel {
  background: transparent;
  color: var(--text-mid, #94a3b8);
  border-color: rgba(255,255,255,0.18);
}
.exi-dialog__btn--cancel:hover {
  color: var(--text, #f2f3f5);
  border-color: rgba(255,255,255,0.4);
}
.exi-dialog__btn--ok {
  background: var(--green, #22c55e);
  color: #0a0a0b;
  border-color: var(--green, #22c55e);
}
.exi-dialog__btn--ok:hover {
  background: #15a046;
  border-color: #15a046;
}
.exi-dialog__btn--danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.exi-dialog__btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.exi-dialog__btn:focus-visible {
  outline: 2px solid var(--green, #22c55e);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .exi-dialog { padding: 18px 18px 14px; border-radius: 10px; }
  .exi-dialog__btn { min-width: 72px; padding: 9px 12px; }
}

/* ── Marks modal — bookmarks + annotations rows ── */
.mark-section-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim, #94a3b8);
  margin: 0 0 8px;
  font-weight: 600;
}
.mark-section-h__hint {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
  font-size: 10px;
  color: var(--text-dim, #94a3b8);
  opacity: 0.7;
}
.mark-list {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  max-height: 200px;
  overflow-y: auto;
}
.mark-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font-style: normal;
  color: var(--text, #e2e8f0);
}
.mark-row:hover {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.25);
}
.mark-row__icon {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.85;
}
.mark-row__main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 1px;
}
.mark-row__title {
  font-size: 12px;
  color: var(--text, #f2f3f5);
  line-height: 1.3;
  word-break: break-word;
}
.mark-row__sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--text-dim, #94a3b8);
  letter-spacing: 0.02em;
}
.mark-row__del {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim, #94a3b8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.mark-row__del:hover {
  background: rgba(239,68,68,0.18);
  color: #ef4444;
  border-color: rgba(239,68,68,0.4);
}

/* ── On-map annotation bubble (replaces the small black-and-pink box).
   Pinned to the lat/lng with a downward triangle pointing at the spot. ── */
.exi-ann {
  display: inline-flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px 6px 9px;
  background: rgba(15,17,24,0.94);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--green, #22c55e);
  border-radius: 4px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text, #f2f3f5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  max-width: 240px;
  white-space: normal;
  position: relative;
  cursor: default;
  /* Mapbox marker DOM gets `cursor:pointer` by default — override so the
     bubble doesn't beg to be clicked. The × inside has its own cursor. */
}
.exi-ann__pin {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green, #22c55e);
  box-shadow: 0 0 6px rgba(34,197,94,0.7);
  flex-shrink: 0;
  margin-top: 4px;
}
.exi-ann__text {
  flex: 1;
  word-break: break-word;
}
.exi-ann__close {
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.42);
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  transition: background .12s, color .12s;
}
.exi-ann__close:hover {
  background: rgba(239,68,68,0.18);
  color: #ef4444;
}
/* Pointer triangle below the bubble, anchored to the dot. */
.exi-ann::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 12px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(15,17,24,0.94);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.3));
}

/* ── General feedback modal (header "Feedback" button → mdFeedback). ── */
.fb-lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid, #94a3b8);
  margin: 0 0 14px;
}
.fb-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fb-pill {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-mid, #94a3b8);
  font-family: var(--font-body), 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  text-align: center;
}
.fb-pill:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--text, #f2f3f5);
}
.fb-pill.active {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.5);
  color: var(--green, #22c55e);
}
.fb-msg {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--text, #f2f3f5);
  font-family: var(--font-body), 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color .15s;
}
.fb-msg:focus { border-color: var(--green, #22c55e); }
.fb-send {
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  background: var(--green, #22c55e);
  color: #0a0a0b;
  border: 1px solid var(--green, #22c55e);
  border-radius: 4px;
  font-family: var(--font-body), 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fb-send:hover  { background: #15a046; border-color: #15a046; }
.fb-send:disabled { opacity: 0.6; cursor: not-allowed; }
.fb-status {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12px;
  font-family: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.fb-status.ok  { color: var(--green, #22c55e); }
.fb-status.err { color: #f87171; }

/* On phones the header has limited room — keep the icon, drop the
   label. The same .m-label hide-on-mobile rule already covers Measure
   and Route; Feedback piggybacks on it. */
@media (max-width: 480px) {
  .fb-pills { gap: 4px; }
  .fb-pill  { padding: 8px 6px; font-size: 11.5px; }
}

/* ── Welcome / Tutorial modal. Cheat-sheet style — one big modal with
   a vertical list of UI surfaces and what each does. Auto-fires on
   first sign-in (gated by localStorage), re-openable via the sidebar
   "Tutorial" button. ── */
.modal-tut {
  max-width: 560px !important;
  width: 92vw !important;
}
.tut-lede {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mid, #94a3b8);
  margin: 0 0 18px;
}
.tut-grid {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.tut-row {
  display: flex; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  transition: border-color .15s, background .15s;
}
.tut-row:hover {
  background: rgba(34,197,94,0.04);
  border-color: rgba(34,197,94,0.18);
}
.tut-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--green, #22c55e);
}
.tut-title {
  font-family: var(--font-display), 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #f2f3f5);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.tut-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mid, #94a3b8);
}
.tut-desc strong { color: var(--text, #f2f3f5); font-weight: 600; }
.tut-tip {
  padding: 10px 14px;
  background: rgba(234,179,8,0.07);
  border: 1px solid rgba(234,179,8,0.25);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mid, #cbd5e1);
  margin-bottom: 16px;
}
.tut-tip strong { color: #eab308; font-weight: 600; }
.tut-cta {
  width: 100%;
  padding: 12px 16px;
  background: var(--green, #22c55e);
  color: #0a0a0b;
  border: 1px solid var(--green, #22c55e);
  border-radius: 4px;
  font-family: var(--font-body), 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tut-cta:hover { background: #15a046; border-color: #15a046; }

@media (max-width: 480px) {
  .tut-row { padding: 10px 12px; gap: 11px; }
  .tut-icon { width: 28px; height: 28px; }
  .tut-title { font-size: 13px; }
  .tut-desc  { font-size: 12px; }
}

.quota-modal {
  position: relative; width: 420px; max-width: calc(100vw - 32px);
  background: rgba(15,17,24,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: var(--text, #e5e7eb);
  text-align: left;
}
.quota-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none;
  color: #888; font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 8px;
  transition: background .15s, color .15s;
}
.quota-modal-x:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.quota-modal-icon {
  font-size: 28px; line-height: 1;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 14px;
  margin-bottom: 16px;
}
.quota-modal h2 {
  font-size: 19px; font-weight: 700; line-height: 1.3;
  margin: 0 0 6px 0; color: var(--text, #f3f4f6);
}
.quota-modal-stats {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim, #888); letter-spacing: .3px;
  margin: 0 0 18px 0;
}
.quota-modal-body {
  font-size: 13px; line-height: 1.55; color: var(--text-mid, #c5c7cc);
  margin: 0 0 18px 0;
}
.quota-modal-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; margin-bottom: 22px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.quota-modal-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-mid, #c5c7cc);
}
.quota-modal-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.quota-modal-row--ok .quota-modal-dot { background: var(--green, #22c55e); }
.quota-modal-row--blocked .quota-modal-dot { background: rgba(239,68,68,0.7); }
.quota-modal-row--blocked { color: rgba(239,68,68,0.85); }
.quota-modal-ok {
  width: 100%; padding: 11px 16px;
  background: rgba(34,197,94,0.14); color: var(--green, #22c55e);
  border: 1px solid rgba(34,197,94,0.32);
  border-radius: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.quota-modal-ok:hover {
  background: rgba(34,197,94,0.22);
  border-color: rgba(34,197,94,0.5);
}

/* Static quota badge in the header — replaces the old popup toast */
.quota-badge {
  display: inline-block;
  margin-left: 6px; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #a7adb8; border-radius: 6px;
  vertical-align: middle;
}
.quota-badge--warn {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.28);
  color: #fca5a5;
}