/* ══════════════════════════════════════════════════════════════════════════
   CU MARKETS EXPLORER — base, nav, layout, map, radial control
   (panel styles live in panel.css)
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --bg:#0A0E1A; --bg-rgb:10,14,26; --bg-2:#0D1320; --bg-elev:#11172A;
  --surface:rgba(255,255,255,0.025); --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.14);
  --text:#E8ECF3; --text-dim:#8892A6; --text-faint:#5A6478;
  --teal:#00E5C3; --teal-ink:#04231E; --teal-soft:rgba(0,229,195,0.12); --teal-glow:rgba(0,229,195,0.28);
  --violet:#7B5EA7; --violet-soft:rgba(123,94,167,0.15);
  --red:#F05252; --red-soft:rgba(240,82,82,0.15);
  --amber:#F59E0B; --amber-soft:rgba(245,158,11,0.12);
  --green:#10B981; --green-soft:rgba(16,185,129,0.12);
}
:root, :root[data-theme="light"] {
  --bg:#F7F5F0; --bg-rgb:247,245,240; --bg-2:#EFEDE6; --bg-elev:#FFFFFF;
  --surface:rgba(0,0,0,0.02); --border:rgba(15,19,32,0.10); --border-strong:rgba(15,19,32,0.20);
  --text:#0E1320; --text-dim:#4F5868; --text-faint:#8892A6;
  --teal:#C77B12; --teal-ink:#FFFFFF; --teal-soft:rgba(199,123,18,0.10); --teal-glow:rgba(199,123,18,0.22);
  --violet:#C53457; --violet-soft:rgba(197,52,87,0.10);
  --red:#E02424; --red-soft:rgba(224,36,36,0.12);
  --amber:#B45309; --amber-soft:rgba(180,83,9,0.10);
  --green:#059669; --green-soft:rgba(5,150,105,0.10);
}
:root {
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --max:1320px; --gutter:clamp(16px,3vw,40px); --nav-h:64px;
  --radius:14px; --radius-sm:10px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a { color:inherit; text-decoration:none; }

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter); background:rgba(var(--bg-rgb),0.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:11px; }
.logo-mark { width:30px; height:30px; color:var(--text); }
.brand-name { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.02em; }
.brand-name em { font-style:normal; color:var(--teal); }
.nav-links { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-dim); padding:7px 12px; border-radius:8px; transition:.15s; }
.nav-links a:hover { color:var(--text); background:var(--surface); }
.nav-links a.active { color:var(--teal); }
.nav-right { display:flex; align-items:center; gap:14px; }
@media (max-width:760px){ .nav-links { display:none; } }
.theme-toggle {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:9px; background:transparent;
  color:var(--text-dim); cursor:pointer; transition:.15s;
}
.theme-toggle:hover { color:var(--text); border-color:var(--border-strong); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
  font-weight:600; font-size:14px; border-radius:999px; padding:10px 20px; cursor:pointer;
  border:1px solid transparent; transition:.16s; }
.btn-sm { padding:10px 16px; font-size:13.5px; }
.btn-primary { background:var(--teal); color:var(--teal-ink); border-color:var(--teal); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 14px 38px -8px var(--teal-glow); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--surface); }

/* ── APP INTRO ── */
#app { max-width:var(--max); margin:0 auto; padding:clamp(24px,4vw,44px) var(--gutter) 40px; }
.app-intro { margin-bottom:24px; }
.eyebrow {
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-dim); border:1px solid var(--border);
  border-radius:999px; padding:5px 14px; margin-bottom:16px;
}
.app-title {
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; line-height:1.05;
  font-size:clamp(30px,5vw,52px); margin:0 0 12px; color:var(--text);
}
.app-sub { font-size:clamp(15px,1.6vw,18px); color:var(--text-dim); max-width:60ch; margin:0 0 20px; }

/* ── MODE TOGGLE ── */
.mode-toggle { display:inline-flex; gap:4px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:999px; padding:4px; }
.mode-btn { font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--text-dim);
  background:transparent; border:none; border-radius:999px; padding:9px 18px; cursor:pointer; transition:.15s; }
.mode-btn:hover { color:var(--text); }
.mode-btn.is-active { background:var(--teal); color:var(--teal-ink); }

/* ── EXPLORER LAYOUT ── */
.explorer-grid { display:grid; grid-template-columns:1fr 420px; gap:20px; align-items:stretch; }
.map-wrap { position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); min-height:620px; background:var(--bg-2); }
#map { position:absolute; inset:0; width:100%; height:100%; z-index:1; }

/* map search box */
.map-search { position:absolute; top:14px; left:14px; right:64px; z-index:600; max-width:360px; }
.map-search input { width:100%; font-family:var(--font-body); font-size:14px; padding:11px 14px;
  border-radius:10px; border:1px solid var(--border-strong); background:var(--bg-elev); color:var(--text);
  box-shadow:0 6px 20px -8px rgba(0,0,0,0.25); }
.map-search input:focus { outline:none; border-color:var(--teal); }
.addr-results { margin-top:6px; background:var(--bg-elev); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; box-shadow:0 12px 32px -10px rgba(0,0,0,0.3); }
.addr-results button { display:block; width:100%; text-align:left; padding:10px 14px; font-size:13px;
  background:transparent; border:none; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); }
.addr-results button:last-child { border-bottom:none; }
.addr-results button:hover { background:var(--surface); }

/* radius control */
.radius-control { position:absolute; bottom:14px; left:14px; z-index:600; display:flex; align-items:center;
  gap:12px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:12px;
  padding:10px 16px; box-shadow:0 8px 24px -10px rgba(0,0,0,0.3); }
.radius-control label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); }
.radius-control input[type=range] { width:160px; accent-color:var(--teal); }
.radius-readout { font-family:var(--font-mono); font-size:13px; color:var(--text); }
.radius-readout b { font-size:16px; color:var(--teal); }

/* center marker pin */
.center-pin { filter:drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.tract-tip { background:#11151f; color:#fff; border:none; border-radius:8px; font-family:var(--font-mono);
  font-size:11px; padding:6px 9px; box-shadow:0 6px 16px -6px rgba(0,0,0,0.5); }
.tract-tip b { font-size:12px; }
.leaflet-tooltip.tract-tip::before { display:none; }

/* branch markers + cluster styling */
.branch-dot { background:var(--violet); width:10px; height:10px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.35); }
.branch-dot.is-main { background:var(--teal); width:13px; height:13px; }

.panel-wrap { background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; min-height:620px; }

/* ── FOOTER ── */
.app-footer { border-top:1px solid var(--border); margin-top:48px; }
.footer-inner { max-width:var(--max); margin:0 auto; padding:24px var(--gutter); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-dim); }
.footer-inner a { color:var(--teal); }
.footer-note { color:var(--text-faint); }

/* ── RESPONSIVE ── */
@media (max-width:980px) {
  .explorer-grid { grid-template-columns:1fr; }
  .map-wrap { min-height:440px; }
  .panel-wrap { min-height:auto; }
}
@media (max-width:560px) {
  .brand-name { font-size:15px; }
  .mode-toggle { width:100%; overflow-x:auto; }
}