/* ══════════════════════════════════════════════════════════════════════════
   StockChart Pro — style.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Layout sizing — kept identical for JS compatibility */
  --bar-h:   42px;
  --ctrl-h:  38px;
  --sp-h:   320px;
  --wl-w:   218px;
  --set-w:  260px;

  /* Core dark palette — deep navy, richer than default */
  --bg:     #080c16;
  --bg2:    #0c1020;
  --glass:  rgba(8, 12, 22, 0.90);
  --glass2: rgba(9, 14, 24, 0.96);
  --surf:   #0f1623;
  --surf2:  #161f30;
  --surf3:  #1d283d;
  --bdr:    #1a2640;
  --bdr2:   #223050;
  --txt:    #62748a;
  --txt2:   #96a8bc;
  --txtb:   #dce6f0;

  /* Accent system */
  --acc:      #2563eb;
  --acc-g:    rgba(37, 99, 235, .14);
  --acc-glow: rgba(37, 99, 235, .28);

  /* Semantic colors */
  --up:   #22c55e;
  --dn:   #ef4444;
  --up-d: rgba(34, 197, 94, .12);
  --dn-d: rgba(239, 68,  68, .12);

  /* Typography */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Geometry */
  --r:    8px;
  --r-sm: 5px;

  /* Elevation */
  --shadow:     0 8px 40px rgba(0, 0, 0, .70);
  --shadow-sm:  0 2px 12px rgba(0, 0, 0, .40);
  --shadow-acc: 0 4px 22px rgba(37, 99, 235, .32);

  /* Motion */
  --t: .18s cubic-bezier(.4, 0, .2, 1);

  /* Mobile dock */
  --mob-dock-h: 56px;
}

html, body { height: 100%; width: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--bdr2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--txt); }

/* ══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════════════ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--glass2);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--t), opacity var(--t);
  will-change: transform;
}

/* Subtle gradient accent line across the top — premium touch */
.top-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37, 99, 235, .55) 15%,
    rgba(99, 102, 241, .45) 50%,
    rgba(37, 99, 235, .2) 80%,
    transparent 100%);
  pointer-events: none;
}

/* Bottom rule — hair-line glow */
.top-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bdr2) 20%,
    var(--bdr2) 80%,
    transparent 100%);
  pointer-events: none;
}

/* Auto-hidden state (set by JS) */
.top-bar.hidden {
  transform: translateY(calc(-1 * var(--bar-h)));
  opacity: 0;
  pointer-events: none;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.tb-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: default;
  user-select: none;
  text-decoration: none;
}

.logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .35);
}

.logo-name {
  display: flex;
  align-items: baseline;
  gap: 2px;
  letter-spacing: -.2px;
}

.logo-sc {
  font-size: 13px;
  font-weight: 700;
  color: var(--txtb);
}

.logo-pro {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: .05px;
}

@media (max-width: 960px) { .logo-name { display: none; } }

/* ── Search (lives in tb-right) ──────────────────────────────────────────── */
.search-wrap {
  position: relative;
  width: 200px;
  flex-shrink: 0;
}

.search-icon {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  color: var(--txt);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 6px;
  color: var(--txtb);
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 10px 5px 28px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), width var(--t), background var(--t);
}
.search-input::placeholder { color: var(--txt); font-size: 11.5px; }
.search-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-g);
  width: 260px;
  background: var(--surf);
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: 300px;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03);
  list-style: none;
  z-index: 600;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}
.search-dropdown.hidden { display: none; }

.search-dropdown li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background var(--t);
  border-bottom: 1px solid var(--bdr);
}
.search-dropdown li:last-child { border-bottom: none; }
.search-dropdown li:hover { background: var(--surf2); }

.dd-symbol { font-weight: 700; color: var(--txtb); min-width: 52px; font-size: 12px; font-family: var(--font-mono); letter-spacing: .2px; }
.dd-name   { flex: 1; color: var(--txt2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-meta   { font-size: 9.5px; color: var(--txt); background: var(--surf3); border: 1px solid var(--bdr); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.dd-loading, .dd-empty { padding: 14px; color: var(--txt); text-align: center; font-size: 11px; }

/* ── Ticker inline (center — expands to fill between logo and search) ────── */
.tb-center {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 12px;
}

.tb-symbol {
  font-size: 13px;
  font-weight: 700;
  color: var(--txtb);
  flex-shrink: 0;
  letter-spacing: .2px;
}
.tb-dot { color: var(--bdr2); flex-shrink: 0; }
.tb-name {
  font-size: 12px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  background: none;
  border: none;
  padding: 2px 4px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--t), background var(--t);
}
.tb-name:hover {
  color: var(--txt2);
  background: var(--surf2);
}
.tb-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--txtb);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -.4px;
}
.tb-change {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: color var(--t), background var(--t), border-color var(--t);
  border-radius: 5px;
  border: 1px solid transparent;
}
.tb-change.up, .tb-change.down { padding: 3px 8px; }
.tb-change.up {
  color: var(--up);
  background: var(--up-d);
  border-color: rgba(34, 197, 94, .22);
}
.tb-change.down {
  color: var(--dn);
  background: var(--dn-d);
  border-color: rgba(239, 68, 68, .22);
}

/* ── Top-right (search + icon buttons) ──────────────────────────────────── */
.tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.refresh-ind {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--txt);
  white-space: nowrap;
  min-width: 52px;
}

.ri-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  padding: 0;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  color: var(--txt2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.ri-btn:hover { background: var(--surf3); color: var(--txt); }

.tb-icon-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: var(--r-sm);
  color: var(--txt2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.tb-icon-btn svg { width: 13px; height: 13px; }
.tb-icon-btn:hover {
  background: var(--surf3);
  color: var(--txtb);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tb-icon-btn.active {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  box-shadow: var(--shadow-acc);
}

/* Settings shortcut in top bar — wider pill with label */
.tb-settings-btn {
  width: auto;
  padding: 0 11px;
  gap: 6px;
  border-color: var(--bdr2);
  color: var(--txt2);
}
.tb-settings-label {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 700px) { .tb-settings-label { display: none; } .tb-settings-btn { width: 30px; padding: 0; } }

/* ── User menu ───────────────────────────────────────────────────────────── */
.user-menu {
  position: relative;
  flex-shrink: 0;
}

.user-avatar-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1.5px solid rgba(255,255,255,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
  transition: transform var(--t), box-shadow var(--t);
  flex-shrink: 0;
}
.user-avatar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .40);
}

/* Dropdown panel */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 218px;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.04);
  z-index: 500;
  overflow: hidden;
  animation: ud-in var(--t) both;
}
.user-dropdown.hidden { display: none; }

@keyframes ud-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

.ud-info {
  padding: 13px 15px 12px;
}
.ud-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--txtb);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-email {
  font-size: 11px;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-id {
  font-size: 10px;
  color: var(--txt);
  opacity: .6;
  margin-top: 4px;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ud-sep {
  height: 1px;
  background: var(--bdr);
  margin: 0;
}

.ud-action {
  width: 100%;
  padding: 10px 15px;
  background: none;
  border: none;
  color: var(--txt2);
  font-family: var(--font);
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  transition: background var(--t), color var(--t);
}
.ud-action:hover {
  background: var(--surf2);
  color: var(--txtb);
}

/* ── Top hover zone ──────────────────────────────────────────────────────── */
.top-zone {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  z-index: 299;
  /* pointer-events managed by JS */
  pointer-events: none;
}
.top-zone.active { pointer-events: all; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   CHART SHELL — fills the viewport below the header
   ══════════════════════════════════════════════════════════════════════════ */
.chart-shell {
  position: fixed;
  top: var(--bar-h);
  left: 0; right: 0; bottom: 0;
  transition: top var(--t), left var(--t), right var(--t), bottom var(--t);
  overflow: hidden;
}

/* When header is hidden, shell expands to top */
body.header-gone .chart-shell { top: 0; }

/* Docked watchlist: push chart shell right so panel and chart share the viewport */
body.wl-open  .chart-shell { left:  var(--wl-w); }
/* Docked settings: push chart shell left from the right */
body.set-open .chart-shell { right: var(--set-w); }

/* ── Horizontal legend strip (sits above the chart canvas) ─────────────────── */
.chart-legend {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  background: transparent;
  pointer-events: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.cl-sym {
  font-size: 12px;
  font-weight: 700;
  color: var(--txtb);
  letter-spacing: .3px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6);
}
.cl-dot {
  font-size: 10px;
  color: var(--bdr2);
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.cl-tf {
  font-size: 9px;
  font-weight: 600;
  color: var(--acc);
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.25);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.3;
  flex-shrink: 0;
}
.cl-div {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .15);
  flex-shrink: 0;
  margin: 0 3px;
}
.cl-time {
  font-size: 10px;
  color: var(--txt2);
  letter-spacing: .1px;
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
}
.cl-ohlcv {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
}
.cl-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cl-l {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cl-vol {
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .15);
}

/* The LightweightCharts canvas — fills the full chart shell */
.chart-container {
  position: absolute;
  inset: 0;
}

/* ── Change badge used by setLegend() — classes assigned dynamically by JS ── */
.of-chg {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05px;
  white-space: nowrap;
  flex-shrink: 0;
}
.of-chg.of-up { color: var(--up); background: var(--up-d); }
.of-chg.of-dn { color: var(--dn); background: var(--dn-d); }

.col-up { color: var(--up); }
.col-dn { color: var(--dn); }

/* ── Crosshair X-axis floating datetime label ────────────────────────────── */
.ch-time-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  transform: translateX(-50%);
  background: #1b2236;
  color: #b8c4d4;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  display: none;
  letter-spacing: .1px;
  line-height: 1.7;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
body.theme-light .ch-time-label {
  background: #e4e9f2;
  color: #2d3748;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ── Chart loading / error overlay ──────────────────────────────────────── */
.chart-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 20, .8);
  gap: 10px;
  font-size: 12px;
  color: var(--txt);
  pointer-events: none;
}
.chart-overlay.hidden { display: none; }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--bdr2);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.overlay-err { color: var(--dn); font-size: 12px; text-align: center; padding: 16px; }


/* ══════════════════════════════════════════════════════════════════════════
   FLOATING CONTROLS BAR (bottom of chart-shell)
   ══════════════════════════════════════════════════════════════════════════ */

/* Gradient fade above controls bar */
.chart-shell::after {
  content: '';
  position: absolute;
  bottom: var(--ctrl-h);
  left: 0; right: 0;
  height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(8, 12, 22, .45));
  pointer-events: none;
  z-index: 55;
}

.ctrl-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--ctrl-h);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 12px;
  background: var(--glass2);
  border-top: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

.cb-group { display: flex; align-items: center; gap: 2px; }

.cb-sep {
  width: 1px;
  height: 16px;
  background: var(--bdr2);
  margin: 0 4px;
  flex-shrink: 0;
}

.cb-btn {
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--txt);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 0 7px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}
.cb-btn svg { width: 12px; height: 12px; }
.cb-btn:hover {
  background: var(--surf2);
  color: var(--txt2);
  transform: translateY(-1px);
}
.cb-btn.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.cb-icon { padding: 0; width: 26px; }

/* Market Overview nav button */
.cb-market-btn {
  text-decoration: none;
  color: var(--txt);
  background: var(--acc-g);
  border-color: rgba(37,99,235,.25);
  position: relative;
}
.cb-market-btn:hover {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-g);
}
.cb-market-btn::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--up);
  border: 1px solid var(--bg);
}

/* Economic News nav button */
.cb-news-btn {
  text-decoration: none;
  color: var(--txt);
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.22);
  position: relative;
}
.cb-news-btn:hover {
  background: rgba(245,158,11,.85);
  color: #fff;
  border-color: rgba(245,158,11,.9);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.cb-news-btn::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid var(--bg);
}

/* TF buttons */
.tf-btn {
  background: var(--surf2);
  border-color: var(--bdr);
  color: var(--txt2);
  letter-spacing: .2px;
}
.tf-btn:hover {
  background: var(--surf3);
  border-color: var(--bdr2);
  color: var(--txtb);
  transform: translateY(-1px);
}
.tf-btn.active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .35);
  transform: none;
}

/* Settings button */
.cb-settings {
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--bdr2);
  color: var(--txt2);
  margin-left: 6px;
}
.cb-settings span { font-size: 11px; font-weight: 600; }
.cb-settings:hover {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--acc-g);
  transform: translateY(-1px);
}
.cb-settings.active { background: var(--acc); color: #fff; border-color: var(--acc); }

/* In focus mode: hide panel-toggle actions, show focus-exit group */
body.focus-mode .cb-actions  { display: none; }
body.focus-mode .cb-focus-only { display: flex !important; }
.cb-focus-only { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WATCHLIST PANEL  — slides in from left
   ══════════════════════════════════════════════════════════════════════════ */
.side-panel {
  position: fixed;
  top: var(--bar-h);
  left: 0; bottom: 0;
  width: var(--wl-w);
  z-index: 150;
  background: var(--surf);
  border-right: 1px solid rgba(255,255,255,.04);
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--wl-w)));
  transition: transform var(--t), top var(--t);
  will-change: transform;
}

.side-panel.open { transform: translateX(0); }

/* Expand to top when header is hidden */
body.header-gone .side-panel { top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   STATS PANEL  — slides up from bottom, sits above ctrl-bar
   ══════════════════════════════════════════════════════════════════════════ */
.stats-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--ctrl-h);
  height: var(--sp-h);
  max-height: 62vh;
  z-index: 200;
  background: var(--glass2);
  border-top: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  transform: translateY(calc(100% + var(--ctrl-h) + 2px));
  pointer-events: none;
  transition: transform var(--t), left var(--t), right var(--t);
  will-change: transform;
}

.stats-panel.open { transform: translateY(0); pointer-events: all; }

/* Scrollable body */
.sp-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.sp-body::-webkit-scrollbar { width: 3px; }
.sp-body::-webkit-scrollbar-track { background: transparent; }
.sp-body::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }

/* Section */
.sp-section {
  border-bottom: 1px solid var(--bdr);
  padding: 10px 0 6px;
}
.sp-section:last-child { border-bottom: none; }

.sp-sec-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--txt);
  padding: 0 12px 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sp-sec-title::before {
  content: '';
  width: 3px;
  height: 11px;
  background: var(--acc);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Company section ─────────────────────────────────────────────────────── */
.sp-section-company { padding-bottom: 16px; }

.sp-company-card {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tag pills row */
.sp-company-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.sp-meta-tag {
  display: inline-block;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt2);
  white-space: nowrap;
}
/* Hide separators — no longer needed with pill design */
.sp-meta-sep { display: none !important; }

.sp-website {
  display: inline-block;
  background: var(--acc-g);
  border: 1px solid rgba(37, 99, 235, .3);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--acc);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.sp-website:hover {
  background: rgba(37, 99, 235, .28);
  border-color: var(--acc);
}

/* Description block */
.sp-description {
  font-size: 12.5px;
  color: var(--txt2);
  line-height: 1.85;
  padding: 12px 14px;
  background: var(--surf2);
  border-left: 3px solid var(--bdr2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  /* No inner scroll — let the parent sp-body scroll */
}

/* Shift stats panel when either sidebar is docked */
body.wl-open  .stats-panel { left:  var(--wl-w); }
body.set-open .stats-panel { right: var(--set-w); }

/* ── Shared panel header ──────────────────────────────────────────────────── */
.sp-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.02), transparent);
}

.sp-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--txt2);
}

.sp-sym { color: var(--acc); text-transform: none; letter-spacing: 0; font-weight: 700; }

.sp-hdr-actions { display: flex; gap: 4px; align-items: center; }

.sp-icon-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--txt);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.sp-icon-btn svg { width: 11px; height: 11px; }
.sp-icon-btn:hover { background: var(--surf2); color: var(--txtb); }

/* ══════════════════════════════════════════════════════════════════════════
   WATCHLIST LIST SELECTOR — dropdown replaces scrolling tab strip
   ══════════════════════════════════════════════════════════════════════════ */
.wl-selector-wrap {
  position: relative;
  padding: 7px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bdr);
}

/* ── Trigger button ─────────────────────────────────────────────────────── */
.wl-dd-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background var(--t), border-color var(--t);
  user-select: none;
}
.wl-dd-trigger:hover               { background: var(--surf3); border-color: var(--bdr2); }
.wl-dd-trigger.open                { border-color: var(--acc); background: var(--acc-g); }

.wl-dd-icon { width: 11px; height: 11px; flex-shrink: 0; color: var(--txt); }

.wl-dd-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--txtb);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-dd-trigger.open .wl-dd-name { color: var(--acc); }

.wl-dd-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--txt);
  background: var(--surf3);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wl-dd-trigger.open .wl-dd-badge { background: rgba(37,99,235,.15); color: var(--acc); }

.wl-dd-arrow {
  width: 10px; height: 6px;
  flex-shrink: 0;
  color: var(--txt);
  transition: transform var(--t);
}
.wl-dd-trigger.open .wl-dd-arrow { transform: rotate(180deg); color: var(--acc); }

/* ── Dropdown panel ─────────────────────────────────────────────────────── */
.wl-dd-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 8px; right: 8px;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(0,0,0,.38);
  z-index: 60;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
  animation: wl-dd-open .15s cubic-bezier(.4,0,.2,1);
}
.wl-dd-panel.hidden { display: none; }
@keyframes wl-dd-open {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ── List rows ──────────────────────────────────────────────────────────── */
.wl-dd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  cursor: pointer;
  border-left: 2.5px solid transparent;
  transition: background var(--t), border-color var(--t);
  position: relative;
}
.wl-dd-row:hover                  { background: var(--surf2); }
.wl-dd-row.active                 { background: var(--acc-g); border-left-color: var(--acc); }

.wl-dd-row-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--txtb);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-dd-row.active .wl-dd-row-name { color: var(--acc); }

.wl-dd-row-count {
  font-size: 10px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 16px;
  text-align: right;
}

/* Action buttons (rename / delete) */
.wl-dd-row-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t);
}
.wl-dd-row:hover .wl-dd-row-actions { opacity: 1; }

.wl-dd-edit, .wl-dd-del {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--txt);
  padding: 0;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.wl-dd-edit svg, .wl-dd-del svg { width: 9px; height: 9px; }
.wl-dd-edit:hover { color: var(--acc); background: var(--acc-g); border-color: var(--acc); }
.wl-dd-del:hover  { color: var(--dn);  background: var(--dn-d);  border-color: var(--dn);  }

/* Inline rename input inside a row */
.wl-dd-rename-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--acc);
  color: var(--txtb);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  outline: none;
  padding: 0 2px;
}

/* Divider before "New watchlist" */
.wl-dd-divider {
  height: 1px;
  background: var(--bdr);
  margin: 3px 0;
}

/* "New watchlist" row at the bottom */
.wl-dd-add-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  transition: background var(--t), color var(--t);
}
.wl-dd-add-btn:hover { background: var(--surf2); color: var(--acc); }

/* New-list inline form (below selector) */
.wl-newlist-form {
  display: flex;
  gap: 5px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.wl-newlist-form.hidden { display: none; }

/* ── Add ticker form ─────────────────────────────────────────────────────── */
.add-form {
  display: flex;
  align-items: flex-start;  /* button stays at top when textarea grows */
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.add-form.hidden { display: none; }

.add-input {
  flex: 1;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  color: var(--txtb);
  font-family: var(--font);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  text-transform: uppercase;
}
.add-input:focus { border-color: var(--acc); }

/* Textarea variant — auto-expands for multi-ticker paste */
textarea.add-input {
  resize: none;
  overflow-y: hidden;   /* JS switches to auto once content > max-height */
  min-height: 28px;
  max-height: 108px;    /* ~4 lines */
  line-height: 1.5;
}

.add-confirm-btn {
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: opacity var(--t);
}
.add-confirm-btn:hover { opacity: .85; }

/* ── Multi-select toolbar ────────────────────────────────────────────────── */
.wl-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: var(--acc-g);
  border-bottom: 1px solid rgba(37, 99, 235, .3);
  flex-shrink: 0;
}
.wl-select-bar.hidden { display: none; }

.wl-sel-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt2);
  white-space: nowrap;
  flex: 1;
}

.wl-sel-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

.wl-sel-btn {
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t);
  white-space: nowrap;
}

.wl-sel-all {
  background: var(--surf2);
  border-color: var(--bdr2);
  color: var(--txt2);
}
.wl-sel-all:hover { background: var(--surf3); color: var(--txtb); }

.wl-sel-del {
  background: var(--dn-d);
  border-color: var(--dn);
  color: var(--dn);
}
.wl-sel-del:hover:not(:disabled) { background: var(--dn); color: #fff; }
.wl-sel-del:disabled { opacity: .35; cursor: not-allowed; }

.wl-sel-cancel {
  background: transparent;
  border-color: var(--bdr2);
  color: var(--txt);
}
.wl-sel-cancel:hover { background: var(--surf2); color: var(--txt2); }

/* ── Watchlist sort bar ─────────────────────────────────────────────────── */
.wl-sort-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}

.wl-srt-chip {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--txt2);
  cursor: pointer;
  letter-spacing: .02em;
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.wl-srt-chip:hover:not(.active) { background: var(--surf2); color: var(--txt); }
.wl-srt-chip.active { background: var(--acc); color: #fff; }

.wl-srt-dir {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--txt2);
  cursor: pointer;
  transition: background var(--t), color var(--t), opacity var(--t);
  min-width: 24px;
  text-align: center;
}
.wl-srt-dir:hover:not(:disabled) { background: var(--surf2); color: var(--txt); }
.wl-srt-dir:disabled { opacity: 0.3; cursor: default; }

/* ── Watchlist items ─────────────────────────────────────────────────────── */
.wl-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 12px;
}

.wl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t), border-left-color var(--t), transform var(--t);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  margin-bottom: 1px;
}
.wl-item:hover {
  background: var(--surf2);
  border-left-color: var(--bdr2);
}
.wl-item.active {
  background: var(--surf2);
  border-color: var(--bdr);
  border-left-color: var(--acc);
  box-shadow: inset 0 0 0 0 transparent;
}

.wl-info  { flex: 1; min-width: 0; }
.wl-sym   {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txtb);
  line-height: 1.25;
  letter-spacing: .2px;
  font-family: var(--font-mono);
}
.wl-name  { font-size: 10px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.wl-pc    { text-align: right; flex-shrink: 0; }
.wl-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  transition: color var(--t);
}
.wl-pct {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color var(--t), background var(--t), border-color var(--t);
  border-radius: 3px;
  border: 1px solid transparent;
}
.wl-pct.up, .wl-pct.down { padding: 2px 5px; display: inline-block; margin-top: 2px; }
.wl-pct.up {
  color: var(--up);
  background: var(--up-d);
  border-color: rgba(34, 197, 94, .18);
}
.wl-pct.down {
  color: var(--dn);
  background: var(--dn-d);
  border-color: rgba(239, 68, 68, .18);
}

.wl-rm {
  opacity: 0;
  background: none; border: none;
  color: var(--txt);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  transition: color var(--t), opacity var(--t), background var(--t);
  flex-shrink: 0;
}
.wl-item:hover .wl-rm { opacity: 1; }
.wl-rm:hover { color: var(--dn); background: var(--dn-d); }

/* ── Per-item checkbox (shown only in select mode) ───────────────────────── */
.wl-chk {
  display: none;            /* hidden by default */
  flex-shrink: 0;
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
  color: var(--bdr2);
  transition: color var(--t);
}
.wl-chk svg { width: 14px; height: 14px; }
.wl-chk-on  { display: none; }     /* checked icon hidden by default */

/* Select mode — show checkbox, hide remove button */
.side-panel.wl-sel-mode .wl-chk { display: flex; }
.side-panel.wl-sel-mode .wl-rm  { display: none; }
.side-panel.wl-sel-mode .wl-item { cursor: default; }
.side-panel.wl-sel-mode .wl-item:hover { background: var(--surf2); }

/* Selected item */
.side-panel.wl-sel-mode .wl-item.wl-sel {
  background: var(--acc-g);
  border-color: var(--acc);
}
.side-panel.wl-sel-mode .wl-item.wl-sel .wl-chk { color: var(--acc); }
.side-panel.wl-sel-mode .wl-item.wl-sel .wl-chk-off { display: none; }
.side-panel.wl-sel-mode .wl-item.wl-sel .wl-chk-on  { display: block; }
/* Unselected items in select mode show the empty checkbox */
.side-panel.wl-sel-mode .wl-item:not(.wl-sel) .wl-chk-off { display: block; }
.side-panel.wl-sel-mode .wl-item:not(.wl-sel) .wl-chk-on  { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WATCHLIST ADD NOTIFICATION CARD
   ══════════════════════════════════════════════════════════════════════════ */
.wl-notify {
  position: absolute;
  bottom: 10px; left: 8px; right: 8px;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  box-shadow: 0 6px 28px rgba(0,0,0,.38);
  z-index: 30;
  overflow: hidden;
  animation: wn-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes wn-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wn-out { to   { opacity: 0; transform: translateY(6px); } }

/* ── Stats row ─────────────────────────────────────────────────────────── */
.wn-row {
  display: flex;
  align-items: center;
  padding: 13px 10px 11px;
  gap: 0;
}

.wn-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.wn-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.wn-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .55px;
}

/* Added = green */
.wn-stat.wn-added .wn-count { color: var(--up); }
.wn-stat.wn-added .wn-label { color: var(--up); opacity: .8; }

/* Skipped = muted */
.wn-stat.wn-skipped .wn-count { color: var(--txt2); }
.wn-stat.wn-skipped .wn-label { color: var(--txt); }

/* Vertical divider between stats */
.wn-div {
  width: 1px;
  height: 38px;
  background: var(--bdr2);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Close button ──────────────────────────────────────────────────────── */
.wn-close {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--txt);
  cursor: pointer;
  font-size: 15px; line-height: 1;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: 2px;
  transition: background var(--t), color var(--t);
}
.wn-close:hover { background: var(--surf2); color: var(--txtb); }

/* ── Skipped ticker list ────────────────────────────────────────────────── */
.wn-skipped-list {
  padding: 7px 12px 10px;
  border-top: 1px solid var(--bdr);
}

.wn-skipped-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--txt);
  margin-bottom: 4px;
}

.wn-skipped-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wn-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--txt2);
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}

.wn-chip-more {
  font-size: 10px;
  color: var(--txt);
  padding: 1px 4px;
  align-self: center;
}

/* ── Auto-dismiss progress bar ─────────────────────────────────────────── */
.wn-progress {
  height: 2px;
  background: var(--acc);
  transform-origin: left center;
  animation: wn-progress linear forwards;
}
@keyframes wn-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Duplicate-name error shake on inputs */
@keyframes wl-input-err {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); border-color: var(--dn) !important; }
  75%       { transform: translateX( 4px); border-color: var(--dn) !important; }
}
.wl-input-err { animation: wl-input-err .4s ease; }

/* Search-add flash — brief accent pulse on the new watchlist row */
@keyframes wl-flash {
  0%   { background: rgba(37,99,235,.35); border-color: var(--acc); }
  60%  { background: rgba(37,99,235,.18); border-color: var(--acc); }
  100% { background: transparent;         border-color: transparent; }
}
.wl-flash { animation: wl-flash 1.4s ease-out forwards; }

.wl-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--txt);
  font-size: 12px;
  line-height: 2;
}

/* ── Stats tiles ─────────────────────────────────────────────────────────── */
.stats-row {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  padding: 8px 12px 12px;
  align-items: stretch;
}

.st {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 9px 13px 8px;
  min-width: 100px;
  flex-shrink: 0;
  gap: 5px;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  cursor: default;
}
.st:hover {
  border-color: rgba(37, 99, 235, .35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(37,99,235,.08);
}

.st-l {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--txt);
  white-space: nowrap;
}

.st-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--txtb);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYBOARD HELP OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */
.kbd-help {
  position: fixed;
  inset: 0;
  z-index: 820;
  background: rgba(7, 9, 18, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 20px 16px;
  animation: kh-in .14s both;
}
.kbd-help.hidden { display: none; }

@keyframes kh-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kh-card {
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.04);
  animation: kh-card-in .17s both;
}
@keyframes kh-card-in {
  from { opacity: 0; transform: scale(.94) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.kh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--bdr);
}
.kh-header-left {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--txtb);
}
.kh-header-left svg { color: var(--txt); flex-shrink: 0; }

.kh-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt);
  padding: 4px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.kh-x:hover { background: var(--surf2); color: var(--txtb); }

/* ── Groups container ────────────────────────────────────────────────────── */
.kh-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 6px 0 8px;
}

.kh-group {
  padding: 14px 22px 12px;
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}
/* Remove right border on even groups (right column) */
.kh-group:nth-child(even)  { border-right: none; }
/* Remove bottom border on last two groups */
.kh-group:nth-last-child(-n+2) { border-bottom: none; }

/* Full-width group (spans both columns) */
.kh-group-full {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid var(--bdr);
  padding-top: 14px;
}

.kh-group-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--acc);
  margin-bottom: 10px;
}

/* ── Shortcut row ────────────────────────────────────────────────────────── */
.kh-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.kh-row:last-child { margin-bottom: 0; }

.kh-row span {
  font-size: 12px;
  color: var(--txt2);
  margin-left: 2px;
}

/* ── kbd key pill ────────────────────────────────────────────────────────── */
.kh-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-bottom: 2px solid var(--bdr2);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--txtb);
  white-space: nowrap;
  min-width: 26px;
  text-align: center;
  line-height: 1.7;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPANY INFO POPUP
   ══════════════════════════════════════════════════════════════════════════ */
.co-overlay {
  position: fixed;
  inset: 0;
  z-index: 820;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 9, 18, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px 16px;
  animation: co-bg-in .15s both;
}
.co-overlay.hidden { display: none; }
@keyframes co-bg-in { from { opacity: 0; } to { opacity: 1; } }

.co-card {
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  width: 580px;
  max-width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(37,99,235,.05);
  animation: co-card-in .18s both;
  display: flex;
  flex-direction: column;
}
.co-card::-webkit-scrollbar { width: 3px; }
.co-card::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }
@keyframes co-card-in {
  from { opacity: 0; transform: scale(.93) translateY(-12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Header row ──────────────────────────────────────────────────────────── */
.co-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 0;
}
.co-hdr-left { display: flex; align-items: center; gap: 10px; }

.co-sym {
  font-size: 22px;
  font-weight: 800;
  color: var(--txtb);
  letter-spacing: -.3px;
  line-height: 1;
}
.co-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--acc);
  background: var(--acc-g);
  border: 1px solid rgba(37,99,235,.25);
  border-radius: 4px;
  padding: 2px 7px;
}
.co-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt);
  padding: 5px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.co-close:hover { background: var(--surf2); color: var(--txtb); }

/* ── Company name ────────────────────────────────────────────────────────── */
.co-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--txt2);
  padding: 6px 22px 14px;
  letter-spacing: -.2px;
  line-height: 1.3;
}

/* ── Meta pills ──────────────────────────────────────────────────────────── */
.co-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 22px 18px;
}
.co-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--txt2);
  white-space: nowrap;
}
.co-pill-link {
  background: var(--acc-g);
  border-color: rgba(37, 99, 235, .3);
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.co-pill-link:hover { background: rgba(37,99,235,.25); border-color: var(--acc); }

/* ── Key metrics strip ───────────────────────────────────────────────────── */
.co-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 22px 22px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  overflow: hidden;
}
.co-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surf2);
  padding: 14px 16px 13px;
  transition: background var(--t);
}
.co-stat:hover { background: var(--surf3); }
.co-stat-l {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--txt);
}
.co-stat-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--txtb);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}

/* ── About section ───────────────────────────────────────────────────────── */
.co-about-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--acc);
  padding: 0 22px 10px;
}
.co-description {
  font-size: 13.5px;
  color: var(--txt2);
  line-height: 1.9;
  padding: 0 22px 22px;
}

/* ── Website button ──────────────────────────────────────────────────────── */
.co-website-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 22px 22px;
  padding: 11px;
  background: var(--acc);
  border: none;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t), box-shadow var(--t);
  letter-spacing: .15px;
}
.co-website-btn:hover {
  opacity: .9;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERVAL QUICK-JUMP OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */
.interval-overlay {
  position: fixed;
  inset: 0;
  z-index: 810;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 9, 18, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: io-in .13s both;
}
.interval-overlay.hidden { display: none; }

@keyframes io-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.interval-card {
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03);
  padding: 30px 32px 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  animation: ic-in .16s both;
}
@keyframes ic-in {
  from { opacity: 0; transform: scale(.93) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);     }
}

/* Title row */
.ic-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--txtb);
  margin-bottom: 18px;
}

/* Info circle */
.ic-info {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--txt);
  color: var(--txt);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  position: relative;
}
.ic-info:hover { border-color: var(--txt2); color: var(--txt2); }
/* Tooltip */
.ic-info::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surf3);
  border: 1px solid var(--bdr2);
  border-radius: var(--r-sm);
  color: var(--txt2);
  font-size: 10.5px;
  font-weight: 400;
  white-space: nowrap;
  padding: 5px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
  z-index: 1;
}
.ic-info:hover::after { opacity: 1; }

/* Input */
.ic-input {
  display: block;
  width: 100%;
  background: var(--surf2);
  border: 2px solid var(--bdr2);
  border-radius: 10px;
  color: var(--txtb);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  padding: 12px 16px;
  outline: none;
  letter-spacing: 2px;
  transition: border-color var(--t), box-shadow var(--t);
  caret-color: var(--acc);
}
.ic-input:focus       { border-color: var(--acc);  box-shadow: 0 0 0 3px var(--acc-g); }
.ic-input.ic-valid    { border-color: var(--up);   box-shadow: 0 0 0 3px rgba(34,197,94,.13); }
.ic-input.ic-invalid  { border-color: var(--dn);   box-shadow: 0 0 0 3px rgba(239,68,68,.11); }

/* Status label */
.ic-status {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  height: 18px;
  color: var(--txt);
  transition: color var(--t);
}
.ic-status.ic-valid   { color: var(--up); }
.ic-status.ic-invalid { color: var(--dn); }

/* Quick-select chips */
.ic-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.ic-chip {
  padding: 4px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt2);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
}
.ic-chip:hover        { background: var(--surf3); color: var(--txtb); border-color: var(--acc); }
.ic-chip.ic-chip-active { background: var(--acc); color: #fff; border-color: var(--acc); }

/* Hint */
.ic-hint {
  text-align: center;
  font-size: 10.5px;
  color: var(--txt);
  opacity: .5;
  margin-top: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PANEL  — slides in from right
   ══════════════════════════════════════════════════════════════════════════ */
.settings-panel {
  position: fixed;
  top: var(--bar-h);
  right: 0; bottom: 0;
  width: var(--set-w);
  z-index: 150;
  background: var(--surf);
  border-left: 1px solid rgba(255,255,255,.04);
  box-shadow: -4px 0 24px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateX(var(--set-w));
  transition: transform var(--t), top var(--t);
  will-change: transform;
}
.settings-panel.open { transform: translateX(0); }
body.header-gone .settings-panel { top: 0; }

/* scrollable body inside the panel */
.set-body {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0 20px;
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.set-section {
  padding: 14px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.set-section:last-child { border-bottom: none; }

.set-section-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--txt2);
  padding: 0 14px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.set-section-title::before {
  content: '';
  width: 3px;
  height: 10px;
  background: var(--acc);
  border-radius: 2px;
  flex-shrink: 0;
}

.set-hint {
  font-size: 10px;
  color: var(--txt);
  opacity: .7;
  padding: 0 14px 8px;
  font-style: italic;
}

/* ── Row ──────────────────────────────────────────────────────────────────── */
.set-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px;
  min-height: 36px;
}

.set-label {
  flex: 1;
  font-size: 12px;
  color: var(--txt2);
  white-space: nowrap;
}

/* ── MA colour dot (label for the hidden color input) ────────────────────── */
.ma-color-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--dot-color, var(--acc));
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  border: 2.5px solid rgba(128, 128, 128, .22);
  transition: transform var(--t), box-shadow var(--t);
}
.ma-color-dot:hover {
  transform: scale(1.22);
  box-shadow: 0 0 0 3px var(--acc-g);
}
.ma-color-dot input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none; padding: 0;
}

/* "SMA" type badge */
.ma-type-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--txt);
  flex-shrink: 0;
}

/* Delete button */
.ma-del-btn {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--txt);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.ma-del-btn svg { width: 9px; height: 9px; }
.ma-del-btn:hover { color: var(--dn); background: var(--dn-d); border-color: var(--dn); }

/* ── MA card — groups head row + slider for one MA ───────────────────────── */
.ma-card {
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  margin: 5px 14px 0;
  overflow: hidden;
  transition: border-color var(--t), opacity var(--t);
}
.ma-card:last-of-type { margin-bottom: 0; }
.ma-card:hover        { border-color: var(--bdr2); }
.ma-card.ma-disabled  { opacity: .45; }

.ma-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 5px;
}

/* ── Period slider ────────────────────────────────────────────────────────── */
.ma-slider-wrap {
  padding: 4px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Labelled slider row (Period / Width) ─────────────────────────────────── */
.ma-slider-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ma-sl-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--txt);
  width: 36px;
  flex-shrink: 0;
  user-select: none;
}

/* Period value text  */
.ma-sl-val {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--txt2);
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* Width preview SVG */
.ma-width-preview { flex-shrink: 0; overflow: visible; }

.ma-slider {
  flex: 1;
  min-width: 0;
  height: 20px;           /* tall hit-area */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;  /* gradient set by JS */
  outline: none;
  cursor: pointer;
}

/* WebKit track */
.ma-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  /* background already set via element style by JS */
}

/* WebKit thumb */
.ma-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surf);
  border: 2.5px solid var(--thumb-color, var(--acc));
  margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: grab;
}
.ma-slider::-webkit-slider-thumb:hover  {
  transform: scale(1.2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--thumb-color, var(--acc)) 18%, transparent);
}
.ma-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }

/* Firefox track */
.ma-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  border: none;
}
/* Firefox thumb */
.ma-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 2.5px solid var(--thumb-color, var(--acc));
  border-radius: 50%;
  background: var(--surf);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: grab;
}

/* Empty-state message */
.ma-empty {
  padding: 14px 14px 8px;
  font-size: 11px;
  color: var(--txt);
  text-align: center;
  line-height: 1.6;
}

/* "Add Moving Average" dashed button */
.ma-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: calc(100% - 28px);
  margin: 8px 14px 4px;
  height: 30px;
  background: transparent;
  border: 1px dashed var(--bdr2);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t), border-style var(--t);
}
.ma-add-btn:hover:not(:disabled) {
  border-style: solid;
  border-color: var(--acc);
  color: var(--acc);
  background: var(--acc-g);
}
.ma-add-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Disabled MA card dims itself as a whole (opacity on .ma-card.ma-disabled above) */

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  width: 34px; height: 20px;
  flex-shrink: 0;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surf3);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t);
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--txt);
  border-radius: 50%;
  transition: transform var(--t), background var(--t);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-track { background: var(--acc); }
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(14px);
  background: #fff;
}

/* ── Auto-refresh interval select ────────────────────────────────────────── */
.ar-select {
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-size: 11px;
  font-family: var(--font);
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t), background var(--t);
}
.ar-select:hover { border-color: var(--bdr2); }
.ar-select:focus { border-color: var(--acc); }

/* Dim the interval row when auto-refresh is disabled */
.ar-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Period number input ──────────────────────────────────────────────────── */
.set-num-input {
  width: 52px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  color: var(--txtb);
  font-family: var(--font);
  font-size: 12px;
  padding: 4px 6px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  transition: border-color var(--t), opacity var(--t);
}
.set-num-input:focus { border-color: var(--acc); }
.set-num-input::-webkit-inner-spin-button,
.set-num-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-light {
  --bg:       #f3f6fc;
  --bg2:      #edf1f8;
  --glass:    rgba(243, 246, 252, 0.92);
  --glass2:   rgba(245, 248, 253, 0.97);
  --surf:     #e8edf6;
  --surf2:    #dde4f0;
  --surf3:    #cfd8e9;
  --bdr:      #d4dcea;
  --bdr2:     #bdc8da;
  --txt:      #7a8a9c;
  --txt2:     #4a5c72;
  --txtb:     #14202e;
  --acc-g:    rgba(37, 99, 235, .09);
  --acc-glow: rgba(37, 99, 235, .18);
  --up:       #15803d;
  --dn:       #dc2626;
  --up-d:     rgba(21, 128, 61,  .10);
  --dn-d:     rgba(220, 38,  38, .10);
  --shadow:     0 8px 40px rgba(0, 0, 0, .08);
  --shadow-sm:  0 2px 12px rgba(0, 0, 0, .06);
  --shadow-acc: 0 4px 20px rgba(37, 99, 235, .18);
}

body.theme-light {
  background-image: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

body.theme-light .chart-overlay {
  background: rgba(248, 249, 252, .88);
  color: var(--txt2);
}

body.theme-light .cl-sym,
body.theme-light .cl-dot,
body.theme-light .cl-time,
body.theme-light .cl-ohlcv {
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.8);
}
body.theme-light .cl-tf {
  background: rgba(37,99,235,.12);
}
body.theme-light .cl-div {
  background: rgba(0, 0, 0, .2);
}
body.theme-light .cl-vol {
  border-left-color: rgba(0, 0, 0, .2);
}

body.theme-light .spinner {
  border-color: var(--bdr2);
  border-top-color: var(--acc);
}

/* ── Theme toggle icon visibility ────────────────────────────────────────── */
.icon-light { display: none; }
body.theme-light .icon-dark  { display: none; }
body.theme-light .icon-light { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM DOCK
   ══════════════════════════════════════════════════════════════════════════ */
.mob-dock {
  /* display controlled by JS applyMobDock() — never set display here */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mob-dock-h);
  z-index: 600;
  background: var(--surf);
  border-top: 1px solid var(--bdr2);
  flex-direction: row;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mob-dock-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--txt);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t), background var(--t);
  -webkit-tap-highlight-color: transparent;
  padding: 4px 2px;
  user-select: none;
}

.mob-dock-btn:active {
  background: rgba(59,130,246,.1);
}

.mob-dock-btn.active {
  color: var(--acc);
}

body.theme-light .mob-dock-btn.active {
  color: var(--acc);
}

/* In focus mode the dock is hidden by JS (applyMobDock checks ui.focusMode) */
body.focus-mode .chart-shell { bottom: 0 !important; }
body.focus-mode .side-panel  { bottom: 0 !important; }
body.focus-mode .settings-panel { bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* Dock-active layout: JS adds body.mob-dock-on when dock is visible */
body.mob-dock-on .chart-shell    { bottom: var(--mob-dock-h); }
body.mob-dock-on .side-panel     { bottom: var(--mob-dock-h); }
body.mob-dock-on .settings-panel { bottom: var(--mob-dock-h); }
body.mob-dock-on .stats-panel    { bottom: calc(var(--ctrl-h) + var(--mob-dock-h)); }
body.mob-dock-on .stats-panel:not(.open) {
  transform: translateY(calc(100% + var(--ctrl-h) + var(--mob-dock-h) + 2px));
}

/* CSS fallback for browsers that handle media queries correctly */
@media (max-width: 900px) {
  body:not(.mob-dock-on) .chart-shell    { bottom: var(--mob-dock-h); }
  body:not(.mob-dock-on) .side-panel     { bottom: var(--mob-dock-h); }
  body:not(.mob-dock-on) .settings-panel { bottom: var(--mob-dock-h); }
  body:not(.mob-dock-on) .stats-panel    { bottom: calc(var(--ctrl-h) + var(--mob-dock-h)); }
}

/* Narrow portrait: layout tweaks for very small screens */
@media (max-width: 700px) {
  /* Ticker info: show symbol + price + change (hide long company name) */
  .tb-center { display: flex; }
  .tb-name, .tb-dot { display: none; }

  /* Declutter top bar: buttons now in dock */
  #wlNavBtn, #settingsBtnTop, #pinBtn { display: none; }

  .search-wrap { width: 140px; }
  .search-input:focus { width: 140px; }
  :root { --wl-w: 82vw; }

  /* Ctrl-bar: hide keyboard-only items */
  #wlToggleBtn, #focusBtn, #kbdHelpBtn { display: none; }
  .cb-settings span { display: none; }

  /* Scrollable ctrl-bar */
  .ctrl-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 8px; }
  .ctrl-bar::-webkit-scrollbar { display: none; }

  /* Legend: hide datetime on narrow screens */
  .cl-time, .cl-div-ohlcv { display: none; }

  /* Both sidebars revert to overlay on narrow screens */
  body.wl-open  .chart-shell  { left:  0; }
  body.wl-open  .stats-panel  { left:  0; }
  body.set-open .chart-shell  { right: 0; }
  body.set-open .stats-panel  { right: 0; }
  .side-panel {
    z-index: 400;
    box-shadow: 6px 0 32px rgba(0, 0, 0, .45);
  }
  .settings-panel {
    z-index: 400;
    box-shadow: -6px 0 32px rgba(0, 0, 0, .45);
  }
}

@media (max-width: 480px) {
  .tb-center { display: none; }
  .search-wrap { width: 110px; flex-shrink: 1; }
  .search-input:focus { width: 110px; }
  .refresh-ind { display: none !important; }
  .cb-btn { font-size: 10px; padding: 0 5px; }
  .cl-vol { display: none; }
}