/* =========================================================================
   COREX Terminal (Dark Edition) — style.css
   Dark theme.
   Bullish candles: hollow, near-white outline · Bearish candles: filled white.
   ========================================================================= */

:root {
  color-scheme: dark;
  --bg: #060608;                             /* moto canvas — main-site dark */
  --panel: #0e0f13;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f6f7;
  --text-2: #9ba1a8;
  --accent: #c9d1da;               /* platinum — chrome accent on dark */
  --accent-soft: rgba(201, 209, 218, 0.14);
  --up: #0db387;
  --down: #f23645;
  --gold: #e0a63f;   /* semantic amber: warnings/status only */
  --mid: #33363d;   /* neutral gauge / gray chips */
  --chip: rgba(255, 255, 255, 0.055);  /* toggle pill tracks, hover rows */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --font: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --field: #131318;
  --field-hover: #1c1d23;
  /* liquid glass — same system as assets/css/site.css (Moto × glass) */
  --glass-bg: rgba(15, 16, 19, 0.52);
  --glass-brd: rgba(255, 255, 255, 0.10);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 24px rgba(255, 255, 255, 0.015);
  --glass-blur: blur(20px) saturate(1.5);
  --topbar-bg: rgba(9, 9, 12, 0.62);
  --dock-bg: rgba(12, 13, 16, 0.5);   /* translucent, NO blur — content shows through */
  --dock-active: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* topbar / layout / mobile-tabs stack cleanly */
}

button { font-family: var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, select { font-family: var(--font); }
input::placeholder { color: #74777e; }

/* ============================== TOP BAR ============================== */
#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  flex: 0 0 auto;
  padding: 0 12px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi);
  position: relative;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

/* symbol dropdown */
.symbol-select { position: relative; }
.symbol-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--field);
  border-radius: var(--radius);
  padding: 7px 12px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.symbol-btn:hover { border-color: var(--border-strong); background: var(--field-hover); }
.sym-id { font-weight: 800; font-size: 14px; }
.sym-name { color: var(--text-2); font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { color: var(--text-2); }

.symbol-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 100;
}
.menu-group-title, .rail-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding: 8px 10px 4px;
}
.menu-item {
  display: grid;
  /* fit-content: the ID column sizes to the widest symbol (long crypto
     perp IDs like 1000SHIBUSDT.P used to overflow the fixed 74px track
     and paint over the name); cap + ellipsis keep it bounded */
  grid-template-columns: fit-content(112px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--text);
}
.menu-item:hover { background: var(--accent-soft); }
.menu-item.active { background: var(--accent-soft); }
.menu-item.active .mi-id { color: var(--accent); }
.mi-id { font-weight: 800; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-name { color: var(--text-2); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-price { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }

/* category pages' symbol dropdown: sticky search + scrollable rows
   (category.js renders items into .menu-rows inside .symbol-menu) */
.menu-search {
  position: sticky;
  top: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  padding: 7px 9px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.menu-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
.menu-search input::placeholder { color: var(--text-2); }
/* category rows: no price column — the freed width goes to a wider ID cap
   (full Binance perp IDs incl. the .P suffix) and the full name */
.menu-rows .menu-item { grid-template-columns: fit-content(132px) minmax(0, 1fr); }

/* price block */
.price-block { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.last-price { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chg-pct { font-weight: 700; font-size: 12.5px; }
.chg-pct.up, .rr-chg.up, .lg-ohlc .up, b.up { color: var(--up); }
.chg-pct.down, .rr-chg.down, .lg-ohlc .down, b.down { color: var(--down); }

/* timeframe pills */
.tf-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--field);
  border-radius: 10px;
  padding: 3px;
}
.tf-pill {
  border: 0;
  background: none;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.tf-pill:hover { color: var(--text); }
.tf-pill.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }

/* chart type + icon buttons */
.ctype-group { display: flex; gap: 2px; background: var(--field); border-radius: 10px; padding: 3px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--text-2);
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--field-hover); color: var(--text); }
.icon-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* FX sessions card — injected by ui.js under the Trend Finder / News
   panels to use the dead space at the bottom of the desktop sidebar.
   Pure local-clock math — no requests. Hidden on mobile sheet views. */
.side-sessions {
  margin: 10px 12px 18px;
  padding: 11px 12px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 11px;
}
.ss-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 7px;
}
.ss-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ss-row { display: flex; align-items: center; gap: 8px; padding: 3.5px 0; color: var(--text); }
.ss-city { font-weight: 700; flex: 1; min-width: 0; }
.ss-hours { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.ss-state { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; border-radius: 99px; padding: 2px 7px; }
.ss-state.open { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.ss-state.closed { color: var(--text-2); background: var(--chip); }
.ss-note { margin: 7px 0 0; color: var(--text-2); font-size: 9.5px; }
@media (max-width: 900px) {
  .side-sessions { display: none; }
}

/* alerts */
.alerts-wrap { position: relative; }
.alerts-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--down);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alerts-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 12px;
  z-index: 100;
}
.panel-title { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.panel-note { color: var(--text-2); font-size: 10.5px; margin: 0 0 10px; }
  /* push opt-in row (alerts panel) — small relay cloud, E2E-encrypted payloads */
  .push-row { margin: 8px 0 2px; }
  .push-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  }
  .push-btn:hover { border-color: var(--accent); color: var(--text); }
  .push-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .push-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
  .push-btn .push-state {
    margin-left: auto;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-2);
  }
  .push-btn.on .push-state { background: var(--accent); color: var(--bg); }
  .push-note {
    margin: 6px 2px 0;
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-2);
    opacity: 0.85;
  }
.alert-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.alert-form-sym {
  grid-column: 1 / 2;
  justify-self: start;
  font-weight: 800;
  font-size: 11.5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 7px;
  padding: 6px 8px;
  white-space: nowrap;
}
.alert-form input {
  grid-column: 2 / 3;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--field);
  color: var(--text);
}
.alert-form select {
  grid-column: 1 / 2;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 4px;
  font-size: 11.5px;
  background: var(--field);
  color: var(--text);
}
.alert-form .btn-primary { grid-column: 2 / 3; width: 100%; }
.btn-primary {
  border: 0;
  background: var(--accent);
  color: #0b0b0e; /* ink on accent */
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-ghost {
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
}
.btn-ghost:hover { background: var(--field-hover); color: var(--text); }

.alert-list { margin-top: 10px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.alert-empty { color: var(--text-2); font-size: 11.5px; text-align: center; padding: 14px 6px; line-height: 1.6; }
.alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
}
.alert-row.triggered { opacity: 0.55; }
.alert-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.alert-dir { color: var(--text-2); font-size: 11px; }
.alert-hit {
  background: var(--gold);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.alert-del {
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
}
.alert-del:hover { background: rgba(242, 54, 69, 0.15); color: var(--down); }
.panel-footer { display: flex; justify-content: flex-end; margin-top: 8px; }

/* connection badge */
.conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text-2);
}
.conn-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #33363d; }
.conn-badge.live { color: var(--up); border-color: rgba(13, 179, 135, 0.4); background: rgba(13, 179, 135, 0.12); }
.conn-badge.live .dot { background: var(--up); animation: pulse 1.6s infinite; }
.conn-badge.partial { color: var(--gold); border-color: rgba(224, 166, 63, 0.4); background: rgba(224, 166, 63, 0.12); }
.conn-badge.partial .dot { background: var(--gold); }
.conn-badge.offline { color: var(--down); border-color: rgba(242, 54, 69, 0.4); background: rgba(242, 54, 69, 0.12); }
.conn-badge.offline .dot { background: var(--down); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================== LAYOUT ============================== */
#layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* symbol rail */
.rail {
  width: 232px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px 8px 20px;
}
.rail-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding: 4px 8px 8px;
  display: flex;
  justify-content: space-between;
}
.rail-count { color: #74777e; }
.rail-group { margin-bottom: 10px; }
.rail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  background: none;
  border-radius: 9px;
  color: var(--text);
  text-align: left;
}
.rail-row:hover { background: var(--field-hover); }
.rail-row.active { background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); }
.rr-left { display: flex; flex-direction: column; min-width: 0; }
.rr-id { font-weight: 800; font-size: 12.5px; }
.rail-row.active .rr-id { color: var(--accent); }
.rr-name { color: var(--text-2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.rr-right { display: flex; flex-direction: column; align-items: flex-end; }
.rr-price { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.rr-chg { font-size: 10px; font-weight: 700; }

/* chart area */
#chart-area {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #0b0b0e; /* sync: painted canvas bg (chart.js COLORS.bg) */
}
#chart-host {
  position: absolute;
  inset: 0;
}
#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* drawing toolbar */
.toolbar {
  position: absolute;
  left: 10px;
  top: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 5px;
  box-shadow: var(--shadow);
}
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.tool-btn:hover { background: var(--field-hover); color: var(--text); }
.tool-btn.active { background: var(--accent); color: #0b0b0e; }
.tool-btn.danger:hover { background: rgba(242, 54, 69, 0.15); color: var(--down); }
.tool-sep { height: 1px; background: var(--border); margin: 2px 4px; }

/* OHLC legend (the floating glass card treatment lives in the final
   "one cohesive glass block" rule near the end of this file) */
.legend {
  position: absolute;
  left: 58px;
  top: 12px;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  pointer-events: none;
  font-size: 11.5px;
}
.lg-br { display: none; }   /* mobile: force the price row under the symbol row */
.lg-sym { font-weight: 800; font-size: 12.5px; }
.lg-name { color: var(--text-2); font-size: 10.5px; }
.lg-tf {
  background: var(--field-hover);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1.5px 5px;
}
.lg-type { color: var(--text-2); font-size: 10.5px; }
.lg-ohlc { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lg-ohlc b { color: var(--text); font-weight: 700; }

/* text editor popup */
.text-editor {
  position: absolute;
  z-index: 30;
}
.text-editor input {
  width: 240px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  background: var(--field);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  outline: none;
}

/* bar-close countdown chip (price axis, under the last-price label) */
.bar-countdown {
  position: absolute;
  right: 4px;
  z-index: 12;
  pointer-events: none;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-2);
  box-shadow: var(--shadow);
}

/* floating drawing-properties toolbar (colors + label text + anchor grid) */
.draw-toolbar {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 236px;
  max-width: calc(100% - 8px);
  padding: 8px;
  /* glass family — dock recipe, see .tools-window */
  background: var(--dock-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 11px;
  box-shadow: var(--glass-hi), 0 10px 26px -14px rgba(0, 0, 0, 0.6);
}
.draw-toolbar[hidden] { display: none; }
.dt-colors { display: flex; align-items: center; gap: 6px; }
.dt-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: transform 0.12s;
}
.dt-swatch:hover { transform: scale(1.14); }
.dt-swatch.active { outline: 2px solid var(--accent); outline-offset: 1.5px; }
.dt-swatch.dt-auto {
  background: var(--panel);
  border: 1.5px dashed var(--border-strong);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}
.dt-delete {
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.dt-delete:hover { background: rgba(242, 54, 69, 0.15); color: var(--down); }
.dt-label-row { display: flex; align-items: center; gap: 8px; }
.dt-label-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 11.5px;
  background: var(--field);
  color: var(--text);
  outline: none;
}
.dt-label-input:focus { border-color: var(--accent); }
.dt-grid {
  display: grid;
  grid-template-columns: repeat(3, 15px);
  grid-auto-rows: 15px;
  gap: 2.5px;
  flex: none;
}
.dt-cell {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 3.5px;
  background: var(--panel);
  padding: 0;
}
.dt-cell::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-2);
  transform: translate(-50%, -50%);
}
.dt-cell[data-pos="tl"]::after { left: 25%; top: 25%; }
.dt-cell[data-pos="tc"]::after { left: 50%; top: 25%; }
.dt-cell[data-pos="tr"]::after { left: 75%; top: 25%; }
.dt-cell[data-pos="ml"]::after { left: 25%; top: 50%; }
.dt-cell[data-pos="mc"]::after { left: 50%; top: 50%; }
.dt-cell[data-pos="mr"]::after { left: 75%; top: 50%; }
.dt-cell[data-pos="bl"]::after { left: 25%; top: 75%; }
.dt-cell[data-pos="bc"]::after { left: 50%; top: 75%; }
.dt-cell[data-pos="br"]::after { left: 75%; top: 75%; }
.dt-cell.active { border-color: var(--accent); background: var(--accent-soft); }
.dt-cell.active::after { background: var(--accent); }

/* loading / error */
.chart-msg {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(11, 15, 22, 0.85);
  backdrop-filter: blur(2px);
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  padding: 20px;
}
.chart-msg.error { color: var(--down); font-weight: 600; }
.spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== TOASTS ============================== */
.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: #1f2027;
  color: #e8eaee;
  border: 1px solid #33363d;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  max-width: 88vw;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ========================= RIGHT SIDEBAR ========================= */
#side {
  width: 296px;
  flex-shrink: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.side-tab {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 4px 9px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.side-tab:hover { color: var(--text); }
.side-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.side-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 24px;
  -webkit-overflow-scrolling: touch;
}

/* --- Trend Finder --- */
.tf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.tf-sym { font-weight: 800; font-size: 14.5px; }
.tf-sub { color: var(--text-2); font-size: 10.5px; margin-top: 1px; }
.tf-updated { color: var(--text-2); font-size: 9.5px; white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }

.gauge-wrap { margin-bottom: 16px; }
.gauge-scale {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-bottom: 4px;
}
.gauge {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--down), var(--mid) 50%, var(--up));
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
.gauge-needle {
  position: absolute;
  top: -4px;
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: var(--text);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35);
  transform: translateX(-50%);
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-verdict { margin-top: 8px; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; }
.gauge-cap { color: var(--text-2); font-size: 9.5px; margin-top: 2px; }

.tf-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tf-row {
  display: grid;
  grid-template-columns: 34px 1fr 78px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 9px;
  padding: 7px 9px;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.tf-row:hover { background: var(--chip); }
.tf-row.active { border-color: var(--accent); background: var(--accent-soft); }
.tfr-name { font-weight: 800; font-size: 11.5px; color: var(--text); }
.tfr-meter {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
}
.tfr-meter i {
  position: absolute;
  top: -2.5px;
  width: 5px;
  height: 13px;
  border-radius: 3px;
  background: var(--text-2);
  border: 1.5px solid var(--panel);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  transform: translateX(-50%);
  transition: left 0.4s ease;
}
.tfr-rating { font-weight: 800; font-size: 10.5px; text-align: right; white-space: nowrap; }
.tfr-rating.sb, .gauge-verdict.sb { color: var(--up); }
.tfr-rating.b, .gauge-verdict.b { color: var(--up); opacity: 0.8; }
.tfr-rating.n, .gauge-verdict.n { color: var(--text-2); }
.tfr-rating.s, .gauge-verdict.s { color: var(--down); opacity: 0.8; }
.tfr-rating.ss, .gauge-verdict.ss { color: var(--down); }
.tfr-rating.na { color: var(--mid); }

/* --- News (Forex Factory) --- */
.news-toggle {
  display: flex;
  gap: 2px;
  background: var(--chip);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 12px;
}
.nt-btn {
  flex: 1;
  border: 0;
  background: none;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.nt-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); }
.news-note {
  border: 1px solid var(--border);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 12px;
}
.news-note b { font-weight: 800; }
.news-day {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin: 10px 2px 5px;
}
.news-list { display: flex; flex-direction: column; }
.news-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
}
.news-row:last-child { border-bottom: 0; }
.news-time {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  padding-top: 2px;
  width: 34px;
  flex: none;
}
.news-main { flex: 1; min-width: 0; }
.news-title { font-size: 11.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.news-stats {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  font-size: 9.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.ns-act { font-weight: 800; color: var(--accent); }
.news-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.news-cur {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
}
.news-imp { font-size: 8.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; color: #fff; }
.news-imp.hi { background: var(--down); }
.news-imp.md { background: var(--gold); }
.news-imp.lo { background: var(--text-2); }
.news-imp.ho { background: var(--mid); color: var(--text); }
.news-empty { color: var(--text-2); font-size: 11.5px; text-align: center; padding: 18px 8px; line-height: 1.6; }

/* --- shared: skeleton loader + notes + errors --- */
.tf-skel-block { margin-bottom: 14px; }
.tf-skel {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--border), var(--chip), var(--border));
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
  margin-bottom: 7px;
}
.tf-skel.w60 { width: 60%; }
.tf-skel.w40 { width: 40%; }
.tf-skel.gauge { height: 12px; }
.tf-skel.row { height: 31px; border-radius: 9px; }
@keyframes skel { to { background-position: -200% 0; } }
.tf-note { color: var(--text-2); font-size: 9.5px; line-height: 1.6; }
.tf-error { color: var(--down); font-size: 11px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }

/* ============================== MOBILE ============================== */
#mobile-tabs { display: none; }

@media (max-width: 980px) {
  .sym-name { display: none; }
  /* long ids (SPX500_USD, BTCUSDT.P, …) get capped + ellipsised so the
     symbol button can't push the alerts/connection chips onto their own
     orphan topbar row on phones (13px keeps even SPX500_USD readable) */
  .sym-id { font-size: 13px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .last-price { font-size: 15px; }
}

@media (max-width: 900px) {
  /* topbar wraps to two rows instead of scrolling horizontally —
     scrolling clipped the symbol dropdown, one of the mobile bugs */
  #topbar {
    gap: 6px;
    padding: 6px 8px;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .brand { order: 0; }
  .brand-name { display: none; }
  .symbol-select { order: 1; }
  .price-block { order: 2; }
  .topbar-right { order: 3; margin-left: auto; }
  .tf-group { order: 10; }
  .ctype-group { order: 11; }
  .symbol-btn { padding: 6px 8px; }
  .conn-badge { padding: 5px 8px; }
  #conn-label { display: none; }
  /* asset dropdown pinned INSIDE the screen on phones: previously it was
     absolutely positioned at the button's left edge with a 320px min-width,
     so it poked past the right edge and stretched the layout viewport
     (opening it grew 360px phones to 406px — prices clipped off-screen).
     Fixed + bounded on both sides; ui.js anchors the top on open. */
  .symbol-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 100px; /* refined by ui.js when opened */
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - 120px);
    overscroll-behavior: contain;
  }

  .rail {
    display: none;
    width: 100%;
    border-right: 0;
  }

  body[data-view='symbols'] .rail { display: block; }
  body[data-view='symbols'] #chart-area { display: none; }

  /* floating translucent dock — raised 22px off the glass edge (user ask:
     sits "a little bit above" the very bottom, clearing gesture areas);
     screen content and text stay visible behind it on the terminal too
     (no bottom padding — the chart runs beneath the dock). */
  #mobile-tabs {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    height: 56px;
    flex: 0 0 auto;
    z-index: 140;
    background: var(--dock-bg);
    border: 1px solid var(--glass-brd);
    border-radius: 999px;
    box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(0, 0, 0, 0.65);
    padding: 6px;
    gap: 2px;
  }
  #mobile-tabs button {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-2);
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  #mobile-tabs button.active {
    color: var(--text);
    background: var(--dock-active);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  #mobile-tabs button.active svg { transform: translateY(-0.5px); }

  .alerts-panel { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; }
  .toolbar { left: 8px; top: 8px; }
  .tool-btn { width: 34px; height: 34px; }
  /* right inset clears the live price scale (--axis-w published by chart.js)
     and the break span sends price / change / clock to their own row */
  .legend { left: 56px; right: calc(var(--axis-w, 64px) + 10px); font-size: 11px; row-gap: 3px; }
  .lg-br { display: block; flex-basis: 100%; height: 0; }
  .lg-name, .lg-type { display: none; }        /* keep the legend compact */
  .lg-o, .lg-h, .lg-l { display: none; }       /* close + change only on phones */
  .toasts { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }

  /* right sidebar becomes a mobile view (Trend / News tabs below) */
  #side { display: none; width: 100%; border-left: 0; }
  body[data-view='trend'] #side,
  body[data-view='news'] #side { display: flex; }
  body[data-view='trend'] #chart-area,
  body[data-view='news'] #chart-area { display: none; }

  /* 16px inputs: iOS Safari zooms the page when focusing smaller ones */
  .alert-form input,
  .alert-form select,
  .text-editor input,
  .dt-label-input { font-size: 16px; }
}

/* ============================== SPLASH / LOADING SCREEN ============================== */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  transition: opacity 0.45s ease;
}
#splash.done { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.splash-logo {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  animation: splash-pulse 1.6s ease-in-out infinite;
}
.splash-name {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.splash-sub { color: var(--text-2); font-size: 12px; }
.splash-bar {
  width: 156px;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--chip);
  overflow: hidden;
}
.splash-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--text), transparent);
  animation: splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes splash-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-bar span { animation: none; }
}

/* ============================== EMBED MODAL ============================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 7, 12, 0.66);
}
/* Pip assistant duck-out — the launcher + tip carry a max z-index and used
   to float ABOVE every open modal (settings, tools, embed…), covering the
   bottom rows. While any modal backdrop is visible they fade out; the
   chat panel itself stays open if the user was mid-conversation.
   (:has() unsupported → rule ignored, previous behavior.) */
body:has(.modal-backdrop:not([hidden])) .cx-pip-launcher,
body:has(.modal-backdrop:not([hidden])) .cx-pip-tip {
  opacity: 0;
  pointer-events: none;
}
.modal {
  width: 580px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-weight: 800; font-size: 14px; }
.modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.embed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
}
.embed-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.embed-grid select,
.embed-grid input {
  border: 1px solid var(--border);
  background: var(--field, #fbfcfe);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font);
}
#embed-code {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field, #fbfcfe);
  color: var(--text);
}
.embed-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.embed-hint { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.embed-hint code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  background: var(--chip);
  border-radius: 4px;
  padding: 1px 4px;
}
.embed-preview-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}
#embed-preview {
  width: 100%;
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

/* ============================== EMBED WIDGET PAGE (embed.html) ============================== */
body.embed { display: flex; flex-direction: column; }
#embed-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0 10px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: var(--glass-hi);
  position: relative;
  z-index: 50;
}
#embed-top .brand { text-decoration: none; }
#embed-top .brand-logo { width: 26px; height: 26px; border-radius: 7px; }
#embed-top .brand-name { font-size: 15px; }
.embed-sym { font-weight: 800; font-size: 13.5px; }
.embed-price-wrap { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
#embed-top .tf-group { margin-left: auto; }
body.embed #chart-area {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #0b0b0e; /* sync: painted canvas bg */
}
#embed-brand {
  position: absolute;
  left: 8px;
  bottom: 26px;
  z-index: 16;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-decoration: none;
  opacity: 0.75;
  pointer-events: auto;
}
#embed-brand:hover { opacity: 1; color: var(--accent); }
body.embed-notoolbar .tf-group,
body.embed-notoolbar .ctype-group { display: none; }
.hide-countdown .bar-countdown { display: none !important; }

@media (max-width: 900px) {
  #embed-top { flex-wrap: wrap; height: auto; padding: 6px 8px; row-gap: 4px; }
  #embed-top .tf-group { order: 10; margin-left: 0; width: 100%; overflow-x: auto; }
  .embed-sym { order: 2; }
  .embed-price-wrap { order: 3; }
  #embed-top .brand-name { display: none; }
  #embed-preview { height: 240px; }
}

/* CoreX dark tile — faint hairline on dark surfaces */
.brand-logo, #embed-top .brand-logo, .splash-logo { border: 1px solid rgba(255, 255, 255, 0.10); }

/* collapsible sidebars (desktop full-screen charting) */
.edge-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  z-index: 26;
}
.edge-toggle:hover { opacity: 1; color: var(--text); }
.edge-toggle.left { left: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.edge-toggle.right { right: 0; border-right: 0; border-radius: 8px 0 0 8px; }
.edge-toggle svg { transition: transform 0.2s; }
@media (min-width: 901px) {
  body.rail-collapsed #rail { display: none; }
  body.side-collapsed #side { display: none; }
}
body.rail-collapsed #rail-toggle svg { transform: rotate(180deg); }
body.side-collapsed #side-toggle svg { transform: rotate(180deg); }
@media (max-width: 900px) {
  .edge-toggle { display: none !important; }
}

/* collapsible split toolbars + long-press drag (grip) */
.bar-grip { touch-action: none; cursor: grab; }
.bar-grip:active { cursor: grabbing; }
.bar-grip svg { transition: transform 0.2s; }
.toolbar.collapsed .tool-btn { display: none; }
.toolbar.collapsed .tool-sep { display: none; }
.toolbar.collapsed .bar-grip { display: flex; }
.toolbar.collapsed .bar-grip svg { transform: rotate(180deg); }
.toolbar.dragging { opacity: 0.9; box-shadow: 0 0 0 2px var(--accent), var(--shadow); z-index: 40; }
#toolbar2 { top: 320px; }  /* pre-JS default; ui.js stacks it under bar 1 at boot */

/* ===================== trading panel ===================== */
.trade-wrap { position: relative; }
.trade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  background: var(--accent);
  color: #0b0b0e; /* ink on accent */
  font-weight: 800;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s;
}
.trade-btn:hover { filter: brightness(1.1); }
.trade-btn.open { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }
.trade-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  z-index: 110;
  overflow: hidden;
}
.trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.trade-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.trade-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(540px, calc(100vh - 130px));
  overflow: auto;
}.trade-body > * { flex: 0 0 auto; }

.trade-row { display: flex; align-items: center; gap: 6px; }
.trade-row .icon-btn { flex: 0 0 auto; }
.trade-panel .icon-btn:hover { background: var(--chip); color: var(--text); }
.trade-panel .btn-ghost:hover { background: var(--chip); color: var(--text); }
.trade-acct-sel {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.trade-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-2);
  background: var(--chip);
  border-radius: 6px;
  padding: 3px 7px;
  text-transform: uppercase;
}
.trade-tag.warn { color: var(--gold); }
.trade-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.55;
  background: var(--chip);
}
.trade-acct-line { word-break: break-word; }
.trade-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--down);
  vertical-align: middle;
}
.trade-dot.on { background: var(--up); }
.trade-msg { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.trade-msg.ok { color: var(--up); font-weight: 700; }
.trade-msg.err { color: var(--down); font-weight: 700; }
.trade-empty {
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.7;
  padding: 14px 6px 4px;
}
.trade-qty-wrap { gap: 4px; }
.trade-step {
  width: 30px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.trade-step:hover { background: var(--chip); }
.trade-qty {
  flex: 1;
  min-width: 0;
  height: 32px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}
.trade-side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trade-buy, .trade-sell {
  height: 38px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.trade-buy { background: var(--up); }
.trade-sell { background: var(--down); }
.trade-buy:hover, .trade-sell:hover { filter: brightness(1.08); }
.trade-buy:active, .trade-sell:active { transform: translateY(1px); }
.trade-buy.armed, .trade-sell.armed {
  animation: trade-pulse 1s ease-in-out infinite;
  filter: brightness(1.12);
}
@keyframes trade-pulse { 50% { opacity: 0.7; } }
.trade-form { display: flex; flex-direction: column; gap: 9px; }
.trade-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.trade-form input, .trade-form select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}
.trade-check { flex-direction: row !important; align-items: center; gap: 7px !important; font-weight: 600 !important; }
.trade-check input { width: 14px; height: 14px; flex: 0 0 auto; }
.trade-back { align-self: flex-start; }
.trade-setup-code {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--chip);
}
.trade-setup-code span {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  word-break: break-all;
  color: var(--text);
  font-weight: 600;
}
.trade-setup-code .icon-btn { width: 24px; height: 24px; flex: 0 0 auto; }
.trade-log {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 10.5px;
  color: var(--text-2);
  line-height: 1.7;
  max-height: 130px;
  overflow: auto;
  word-break: break-word;
}
.trade-list { display: flex; flex-direction: column; gap: 4px; }
.trade-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  background: var(--chip);
}
@media (max-width: 900px) {
  .trade-panel {
    position: fixed;
    top: auto;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: 8px;
    left: 8px;
    width: auto;
  }
  .trade-body { max-height: min(430px, calc(100vh - 220px)); }
}
/* trade panel: SL/TP fields + position close buttons */
.trade-stp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trade-stp-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.trade-stp-field input {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  width: 100%;
  padding: 0 8px;
  min-width: 0;
}
.trade-stp-field input::placeholder { color: var(--text-2); opacity: 0.6; }
.trade-pos-right { display: flex; align-items: center; gap: 2px; }
.trade-close { width: 22px; height: 22px; border-radius: 6px; }
.trade-close:hover { background: var(--down); color: #fff; }


/* ============ in-chart legend toolbar (Trade button) ============ */
.legend { align-items: center; }
.legend .trade-wrap { pointer-events: auto; }
.legend .trade-btn {
  padding: 3.5px 9px;
  font-size: 11px;
  gap: 4px;
  border-radius: 7px;
}
.legend .trade-btn svg { width: 12px; height: 12px; }
@media (min-width: 901px) {
  /* legend sits at the chart's left edge — panel must open rightwards */
  .legend .trade-panel { right: auto; left: 0; }
}
@media (max-width: 900px) {
  .legend { row-gap: 4px; }
  /* the fixed bottom-sheet panel lives inside the legend's stacking context —
     keep it above the drawing toolbar (z 20) or the toolbar clips its edge */
  .legend { z-index: 30; }
}

/* trade panel — tutorial links */
.trade-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--text-2);
}
.trade-help:hover { color: var(--accent); background: var(--field); }
.trade-help-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.trade-help-link:hover { text-decoration: underline; }
.trade-empty-link { display: inline-block; margin-top: 7px; font-size: 12px; }

/* trade panel — account backup / restore row (Task 24) */
.trade-io { margin-top: 8px; gap: 8px; }
.trade-io-btn { flex: 1; font-size: 11.5px; padding: 6px 8px; border-radius: 8px; text-align: center; }
.trade-io-btn:last-of-type { margin-left: auto; }

/* =========================================================================
   Task 25 — indicators menu · bar replay · risk sizing · stats · copy
   ========================================================================= */

/* ƒx indicators menu (top bar) */
.ind-wrap { position: relative; }
.ind-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 264px;
  max-width: 92vw;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 12px 8px;
  z-index: 70;
}
.ind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.ind-row:hover { color: var(--accent); }
.ind-row input { accent-color: var(--accent); flex: 0 0 auto; }
.ind-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ind-label { flex: 1; min-width: 0; }
.ind-note { font-size: 10px; color: var(--text-2); border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 6px; line-height: 1.5; }

/* v2 instance editor — any periods, any colors, multiple instances */
.ind-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.ind-row2.off .ind-name, .ind-row2.off .ind-num, .ind-row2.off .ind-color { opacity: 0.45; }
.ind-color {
  width: 24px;
  height: 24px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.ind-color::-webkit-color-swatch-wrapper { padding: 2px; }
.ind-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ind-color::-moz-color-swatch { border: 0; border-radius: 4px; }
.ind-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-num {
  width: 48px;
  height: 24px;
  padding: 0 4px;
  flex: 0 0 auto;
  font-size: 11px;
  font-family: inherit;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}
.ind-num.multi { width: 42px; }
.ind-vis { accent-color: var(--accent); flex: 0 0 auto; }
.ind-del {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.ind-del:hover { background: var(--chip); color: var(--down); }
.ind-add { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.ind-add button {
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--chip);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.ind-add button:hover { border-color: var(--accent); color: var(--accent); }

/* bar replay */
#replay-pick {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0b0b0e; /* ink on accent */
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 46;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#replay-btn.replaying { background: var(--accent); color: #0b0b0e; }
#replay-bar {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 5px 8px;
  z-index: 45;
}
#replay-bar .icon-btn { width: 26px; height: 26px; }
.replay-label {
  font-size: 11px;
  color: var(--text-2);
  min-width: 128px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#rp-speed {
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  padding: 0 4px;
}

/* risk-based position sizing row */
.trade-risk { margin-top: 2px; }
.trade-risk-mode {
  flex: 0 0 96px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 11.5px;
  padding: 0 4px;
}
.trade-risk-in {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  padding: 0 8px;
}

/* copy trading section */
.trade-copy {
  border-top: 1px dashed var(--border);
  margin-top: 10px;
  padding-top: 8px;
}
.trade-copy .trade-row { margin-bottom: 6px; }

/* stats view */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 4px;
}
.stat-cell {
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-cell span { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-cell b { font-size: 14px; line-height: 1.2; }
.stat-cell b.up { color: var(--up); }
.stat-cell b.down { color: var(--down); }
.trade-curve { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--chip); }

@media (max-width: 900px) {
  #replay-bar { bottom: 54px; }
  #replay-pick { top: 84px; font-size: 11px; }
  .ind-menu { position: fixed; top: 58px; left: 8px; right: 8px; min-width: 0; max-width: none; transform: none; max-height: calc(100vh - 132px); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #toolbar2 { top: 356px; }
}

/* =========================================================================
   Task 26 — Market category pages (crypto / forex / commodities / stocks)
   Markets links on the terminal rail · category tabs · watchlist panel ·
   "All symbols" browser. Theme-variable driven — identical block works on
   both editions.
   ========================================================================= */

/* brand + tab links must never show the browser's link underline */
a.brand, a.brand:hover, a.brand:focus,
.cat-tab, .cat-tab:hover, .cat-tab:focus,
.market-link, .market-link:hover, .market-link:focus,
.side-tabs .side-tab, .ml-label { text-decoration: none; }

/* ---- Markets grid (terminal rail) --------------------------------------
   One full-width row per market: a 2x2 grid was wider than the 232px rail
   (nowrap subtitles inflated the 1fr tracks -> right column clipped half
   out of the rail). Full-width rows fit every label + subtitle untruncated. */
.markets-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  margin-bottom: 14px;
}
.market-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;              /* allow the card to shrink inside its track */
  padding: 8px 8px;
  border-radius: 9px;
  background: var(--chip);
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.market-link:hover { background: var(--accent-soft); border-color: var(--border); }
.market-link svg { color: var(--text-2); flex: 0 0 auto; }
.market-link:hover svg { color: var(--accent); }
.ml-txt { display: flex; flex-direction: column; min-width: 0; }
.ml-label {
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-sub {
  color: var(--text-2);
  font-size: 9px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Category tabs (top bar) -------------------------------------------- */
.cat-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.cat-tab:hover { background: var(--chip); color: var(--text); }
.cat-tab.active { background: var(--accent-soft); color: var(--accent); }
.cat-tab svg { flex: 0 0 auto; }

/* ---- Category rail: watchlist + symbol browser -------------------------- */
@media (min-width: 901px) {
  body[data-page='category'] .rail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 8px;
  }
}
.watch-panel { flex: 0 0 auto; margin-bottom: 10px; }
.wl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
}
.wl-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.wl-count {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--chip);
  border-radius: 8px;
  padding: 1px 6px;
}
.wl-add {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 0;
  background: var(--chip);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wl-add:hover { background: var(--accent-soft); color: var(--accent); }
.wl-add.on { color: var(--accent); background: var(--accent-soft); }
.wl-add.pulse { animation: wl-pulse 0.5s ease; }
@keyframes wl-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.wl-rows { max-height: 236px; overflow-y: auto; padding: 0 2px; }
.wl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.wl-row:hover { background: var(--chip); }
.wl-row.active { background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); }
.wl-star { color: var(--accent); font-size: 11px; flex: 0 0 auto; }
.wl-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wl-id { font-weight: 800; font-size: 12px; line-height: 1.25; }
.wl-row.active .wl-id { color: var(--accent); }
.wl-name {
  color: var(--text-2); font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px;
}
.wl-row .rr-right { flex: 0 0 auto; }
.wl-x {
  color: var(--text-2);
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 6px;
  flex: 0 0 auto;
  visibility: hidden;
}
.wl-row:hover .wl-x { visibility: visible; }
.wl-x:hover { color: var(--down); background: rgba(242, 54, 69, 0.12); }
.wl-empty, .wl-more {
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1.5;
  padding: 8px 9px;
}
.wl-more { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 7px; }

/* symbol browser */
.browser-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 8px 6px;
}
.bp-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.bp-count { font-size: 9.5px; color: var(--text-2); font-weight: 600; }
.bp-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 8px;
  padding: 6px 9px;
  background: var(--chip);
  border-radius: 9px;
  color: var(--text-2);
}
.bp-search:focus-within { box-shadow: 0 0 0 2px var(--accent-soft); }
.bp-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  width: 100%;
  padding: 0;
}
.bp-rows { flex: 1 1 auto; overflow-y: auto; padding: 0 2px; min-height: 0; }
.bp-group {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  padding: 8px 8px 4px;
}
.bp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.bp-row:hover { background: var(--chip); }
.bp-row.active { background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); }
.bp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bp-id { font-weight: 800; font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-row.active .bp-id { color: var(--accent); }
.bp-name {
  color: var(--text-2); font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-star {
  flex: 0 0 auto;
  color: var(--text-2);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0.55;
}
.bp-star:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }
.bp-star.on { color: var(--accent); opacity: 1; }
.bp-empty, .bp-more { color: var(--text-2); font-size: 10.5px; padding: 8px 9px; }

/* ---- Topbar fit on category pages --------------------------------------- */
@media (max-width: 1500px) {
  body[data-page='category'] .sym-name { display: none; }
}
@media (max-width: 1240px) {
  body[data-page='category'] .cat-tab { padding: 5px 8px; font-size: 11px; }
  body[data-page='category'] .cat-home span { display: none; }
}
@media (max-width: 1120px) {
  body[data-page='category'] .cat-tabs { gap: 2px; }
  body[data-page='category'] .cat-tab { padding: 5px 6px; }
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 900px) {
  body[data-page='category'] #topbar { padding-bottom: 6px; }
  body[data-page='category'] .cat-tabs { order: 10; flex-basis: 100%; padding: 4px 2px 0; }
  .markets-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Palette popover — chart colors (candles & background) --------------- */
/* z 470: floats ABOVE every modal layer (.modal-backdrop 400, jsed 460) —
   the picker is opened from the "More tools" modal and must never be
   trapped behind it. Toasts (900) stay on top. */
.palette-pop {
  position: fixed;
  z-index: 470;
  width: 232px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.18);
  padding: 10px 12px 12px;
  display: none;
  font-family: var(--font);
}
.palette-pop.open { display: block; }
.palette-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 8px;
}
.palette-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text);
  padding: 4px 0;
  cursor: pointer;
}
.palette-row input[type='color'] {
  width: 36px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: none;
  padding: 1px;
  cursor: pointer;
}
.palette-check input { width: auto; accent-color: var(--accent); }
.palette-actions { margin-top: 9px; display: flex; justify-content: flex-end; }
.palette-reset {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  border-radius: 7px;
  padding: 4px 11px;
  cursor: pointer;
}
.palette-reset:hover { background: var(--chip); }

/* =========================================================================
   Task 27 — news counts + A/F/P chips · legend brand clock · draw toolbar
   size buttons + fib level editor (theme-variable driven, both editions)
   ========================================================================= */
.nt-cnt {
  display: inline-block;
  min-width: 14px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(127, 137, 161, 0.16);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nt-btn.active .nt-cnt { background: var(--accent-soft); color: var(--accent); }
.ns-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--chip);
  border: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ns-chip b { font-weight: 800; }
.ns-chip.act { color: var(--text); }
.ns-chip.act.up { border-color: var(--up); color: var(--up); background: transparent; }
.ns-chip.act.down { border-color: var(--down); color: var(--down); background: transparent; }
.ns-chip.act b { color: inherit; }
.lg-brand {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--chip);
}
.lg-clock { color: var(--text-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.dt-row { display: flex; align-items: center; gap: 8px; }
.dt-row[hidden] { display: none; }
.dt-lab {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dt-sizes { display: flex; gap: 4px; }
.dt-size {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--chip);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.dt-size:hover { border-color: var(--accent); color: var(--accent); }
.dt-size.active { background: var(--accent); border-color: var(--accent); color: #0b0b0e; }
.dt-fib-in {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
}
.dt-fib-in:focus { border-color: var(--accent); outline: none; }

@media (max-width: 900px) {
  .text-editor input { width: min(240px, calc(100vw - 48px)); }  /* iOS zoom guard */
  .dt-fib-in { font-size: 16px; height: 30px; }
}

/* ======================================================================
 * Task 28 — editable instruments rail, symbol picker, custom indicators
 * (append-only; uses the theme's existing CSS variables only)
 * ====================================================================== */
.rail-edit {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.rail-edit:hover { color: var(--text); }
/* ink on inverted pill — --chip is a translucent track tint (~4-6% alpha),
   invisible against the solid --text fill (user report: the black "All" chip
   ate its own label). var(--panel) is the opaque inverse ink for BOTH
   editions: white ink on the black pill in light, near-black ink on the
   white pill in dark. Same fix on sp-chip.on / sp-add / cu-ok below. */
.rail-edit.on { background: var(--text); color: var(--panel); }
.re-row { cursor: default; }
.re-ctl { display: flex; align-items: center; gap: 6px; }
.re-swap, .re-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.re-swap:hover { color: var(--text); border-color: var(--text-2); }
.re-x:hover { color: #e2564a; border-color: #e2564a; }
.re-tools { display: flex; gap: 8px; padding: 10px 12px 16px; flex-wrap: wrap; }
.re-add {
  flex: 1 1 auto;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.re-add:hover { color: var(--text); border-color: var(--text-2); }
.re-reset {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 10.5px;
  cursor: pointer;
  text-decoration: underline;
}
.re-reset:hover { color: var(--text); }
.sym-picker {
  position: fixed;
  top: 64px;
  left: 216px;
  z-index: 90;
  width: 330px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  /* real panel surface — the old var(--chip) tint (4-5% alpha) made the
     add/replace search panel nearly invisible over the chart, so symbol
     names were unreadable. Same surface family as the other floaters. */
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  padding: 10px;
}
.sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-title { font-size: 12px; font-weight: 800; color: var(--text); }
.sp-close {
  border: 0; background: transparent; color: var(--text-2);
  font-size: 13px; cursor: pointer; padding: 2px 6px;
}
.sp-close:hover { color: var(--text); }
.sp-q {
  width: 100%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  margin-bottom: 8px;
}
.sp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sp-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.sp-chip.on { background: var(--text); color: var(--panel); border-color: var(--text); } /* ink on inverted, see rail-edit.on */
.sp-list { overflow-y: auto; min-height: 90px; flex: 1 1 auto; }
.sp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.sp-row:hover { background: var(--border); }
.sp-row.have { opacity: 0.45; }
.sp-id { font-weight: 800; font-size: 11.5px; min-width: 74px; }
.sp-name {
  flex: 1 1 auto;
  font-size: 10.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-tag {
  flex: none;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.sp-empty { color: var(--text-2); font-size: 11px; padding: 14px 6px; text-align: center; }
.sp-note { color: var(--text-2); font-size: 9.5px; padding: 8px 2px 0; }
.sp-manual { display: flex; gap: 6px; padding: 8px 4px; }
.sp-sel {
  flex: 1 1 auto;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  border-radius: 8px;
  font-size: 10.5px;
  padding: 6px;
}
.sp-add {
  border: 1px solid var(--border);
  background: var(--text);
  color: var(--panel);   /* ink on inverted, see rail-edit.on */
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.cu-in {
  width: 100%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  margin-bottom: 8px;
}
.cu-fx { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cu-hint { color: var(--text-2); font-size: 10px; line-height: 1.5; margin-bottom: 8px; }
.cu-hint b { color: var(--text); }
.cu-stylerow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cu-lib { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 10.5px; cursor: pointer; }
.cu-err { color: #e2564a; font-size: 10.5px; margin-bottom: 8px; }
.cu-btns { display: flex; gap: 8px; }
.cu-ok {
  flex: 1 1 auto;
  border: 0;
  background: var(--text);
  color: var(--panel);   /* ink on inverted, see rail-edit.on */
  font-weight: 800;
  font-size: 11.5px;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.cu-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
  font-size: 11.5px;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.cu-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.cu-chips-lab { color: var(--text-2); font-size: 10px; }
.cu-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 10px;
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
}
.cu-chip:hover { color: var(--text); border-color: var(--text-2); }
.ind-edit { margin-left: 2px; }
@media (max-width: 900px) {
  .sym-picker { left: 12px; right: 12px; width: auto; top: 56px; max-height: min(560px, calc(100vh - 140px)); }
}
/* ========================= MULTI-CHART LAYOUT ========================= */
/* Pane 1 is the existing main chart, re-anchored top-left in every
   layout so the drawing overlay canvas stays aligned (it follows the
   #chart-host rect via its own ResizeObserver). Secondary panes carry
   their own instrument chip; the grid separators reuse --border. */
#mc-pane-2, #mc-pane-3, #mc-pane-4 {
  position: absolute;
  display: none;
  z-index: 4;
  background: inherit;
}
.mc-host { position: absolute; inset: 0; }
.mc-head {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.mc-head > * { pointer-events: auto; }
.mc-sym {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 8px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.mc-sym:hover { border-color: var(--accent); color: var(--accent); }
.mc-caret { opacity: 0.6; }
.mc-tf {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 6px;
}
.mc-price {
  font-weight: 800;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 7px;
}
.mc-chg { font-weight: 700; font-size: 10.5px; }
.mc-chg.up { color: var(--up); }
.mc-chg.down { color: var(--down); }

/* instrument menu for a secondary pane */
.mc-menu {
  position: fixed;
  z-index: 300;
  min-width: 250px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: min(60vh, 480px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  padding: 6px;
}
.mc-menu-g {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  padding: 6px 8px 4px;
}
.mc-menu-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  border: 0;
  background: none;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
}
.mc-menu-row:hover { background: var(--accent-soft); }
.mc-menu-row.on { box-shadow: inset 2.5px 0 0 var(--accent); }
.mc-menu-id { font-weight: 800; font-size: 12px; min-width: 72px; }
.mc-menu-name {
  font-size: 10.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- layout: 2 charts (main left · pane 2 right) --- */
#chart-area.mc-2 #chart-host { right: 50%; }
#chart-area.mc-2 #mc-pane-2 {
  display: block;
  left: 50%; top: 0; right: 0; bottom: 0;
  border-left: 1px solid var(--border);
}

/* --- layout: 4 charts (2×2 grid, main top-left) --- */
#chart-area.mc-4 #chart-host { right: 50%; bottom: 50%; }
#chart-area.mc-4 #mc-pane-2 {
  display: block;
  left: 50%; top: 0; right: 0; bottom: 50%;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#chart-area.mc-4 #mc-pane-3 {
  display: block;
  left: 0; top: 50%; right: 50%; bottom: 0;
  border-top: 1px solid var(--border);
}
#chart-area.mc-4 #mc-pane-4 {
  display: block;
  left: 50%; top: 50%; right: 0; bottom: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* phones: 2 charts stack vertically; 4 charts keep the 2×2 grid */
@media (max-width: 700px) {
  #chart-area.mc-2 #chart-host { right: 0; bottom: 50%; }
  #chart-area.mc-2 #mc-pane-2 {
    left: 0; top: 50%; right: 0; bottom: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* multi-chart refinements: keep the main legend inside pane 1 (it would
   otherwise run underneath pane 2's instrument chip), and keep pane 3's
   chip clear of the vertical toolbars in the 2x2 grid */
#chart-area.mc-2 #legend, #chart-area.mc-4 #legend { right: 50%; }
@media (min-width: 701px) {
  #chart-area.mc-4 #mc-pane-3 .mc-head { left: auto; right: 64px; }
}
#chart-area.mc-2 #legend, #chart-area.mc-4 #legend { right: 50%; }
@media (min-width: 701px) {
  #chart-area.mc-4 #mc-pane-3 .mc-head { left: auto; right: 64px; }
}

/* =================== MULTI-CHART per-pane TIMEFRAME =================== */
/* The .mc-tf chip became a button (opens the pane's own timeframe menu:
   1m…1D + "Follow main chart"). Chip visuals stay identical — only the
   clickable wrapper + caret and the compact tf menu are new. */
.mc-tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  cursor: pointer;
}
.mc-tf-btn:hover .mc-tf { border-color: var(--accent); color: var(--accent); }
.mc-menu-tf { min-width: 0; width: 172px; }
.mc-menu-tf .mc-menu-id { min-width: 34px; }

/* =================== FUNDING CHIP (legend, perp charts) =================== */
.lg-fund {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.lg-fund.up { color: var(--up); }
.lg-fund.down { color: var(--down); }

/* ============ BRIDGED-FEED CHIP (legend, OANDA fallback) =================== */
/* shown while a broker feed (OANDA) rides its level-bridged fallback.
   Text uses var(--gold) (light #b7791f / dark #e0a63f — readable in both
   editions since each ships its own palette). */
.lg-feed {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.1);
  color: var(--gold);
  white-space: nowrap;
}

/* =================== ALERTS v2 (types · repeat · pause · distance) =================== */
/* the type selector sits next to the direction select (grid col 2) */
.alert-form select.alert-type { grid-column: 2 / 3; }
.alert-form .alert-repeat {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.alert-form .alert-repeat input { margin: 0; accent-color: var(--accent); }
.alert-kind {
  background: var(--chip);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.alert-kind.rep { background: var(--accent-soft); color: var(--accent); padding: 2px 6px; }
.alert-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.alert-pause {
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
}
.alert-pause:hover { background: var(--chip); color: var(--accent); }
.alert-row.paused { opacity: 0.6; border-style: dashed; }
.alert-dist { color: var(--text-2); font-size: 10.5px; white-space: nowrap; }

/* =================== PAPER TRADING (sim account · live + replay) =================== */
#paper-panel {
  position: absolute;
  top: 52px;
  left: 96px;
  width: 292px;
  max-height: calc(100% - 68px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
  padding: 12px;
  z-index: 95;
  font-size: 12px;
}
.pp-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.pp-badge {
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}
.pp-badge.rp { background: var(--down); } /* replay badge: red, distinct from the gold PAPER badge */
.pp-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
}
.pp-close:hover { background: var(--chip); color: var(--text); }
.pp-acct { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; color: var(--text-2); font-size: 11px; }
.pp-acct b { color: var(--text); font-size: 11.5px; }
.pp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.pp-form input, .pp-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--panel);
  color: var(--text);
}
.pp-form .pp-qty { grid-column: 1 / 3; }
.pp-note { color: var(--text-2); font-size: 10px; margin: 0 0 8px; }
.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pp-sell, .pp-buy {
  border: 0;
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: filter 0.15s;
}
.pp-sell { background: var(--down); }
.pp-buy { background: var(--up); }
.pp-sell:hover, .pp-buy:hover { filter: brightness(1.08); }
.pp-sec { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); margin: 10px 0 4px; }
.pp-pos { display: flex; flex-direction: column; gap: 4px; }
.pp-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}
.pp-row .pp-sym { font-weight: 800; }
.pp-row .pp-side { font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; color: #fff; }
.pp-row .pp-side.long { background: var(--up); }
.pp-row .pp-side.short { background: var(--down); }
.pp-row .pp-tag { font-size: 9px; font-weight: 800; color: var(--accent); }
.pp-row .pp-pnl { margin-left: auto; font-weight: 800; }
.pp-row .pp-pnl.up { color: var(--up); }
.pp-row .pp-pnl.down { color: var(--down); }
.pp-x {
  border: 0; background: none; color: var(--text-2);
  font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 5px;
}
.pp-x:hover { background: var(--accent-soft); color: var(--accent); }
.pp-empty { color: var(--text-2); font-size: 11px; text-align: center; padding: 8px 4px; }
.pp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pp-foot .pp-note2 { color: var(--text-2); font-size: 9.5px; }
.pp-hist { display: flex; flex-direction: column; gap: 3px; }
.pp-hist .pp-row { padding: 4px 8px; font-size: 11px; }
.pp-hist .pp-why { font-size: 9px; color: var(--text-2); }
@media (max-width: 700px) {
  #paper-panel { left: 50%; transform: translateX(-50%); top: 60px; width: min(320px, calc(100vw - 24px)); max-height: calc(100% - 76px); }
  .pp-form input, .pp-form select { font-size: 16px; }
}

/* ============================== TOOLS WINDOW (Option C) ============================== */
/* One floating settings-style panel replacing the two slim tool bars.
   Header: grip · TOOLS · settings gear (injected by ui.js) · "..." More ·
   collapse chevron. Sections: Draw / Chart type / Studies / Actions; the
   More popover holds embed · palette · delete-all · reset. Sits under the
   OHLC legend by default; drag the grip to move it anywhere over the
   chart, click it (or the chevron) to collapse to a grip pill. */
.tools-window {
  position: absolute;
  left: 10px;
  top: 44px;
  z-index: 25;
  width: 212px;
  max-width: calc(100% - 12px);
  /* liquid-glass surface — the dock's translucent recipe, same family as
     the legend: translucent tint, hairline glass border, specular
     highlight, NO backdrop blur, so the chart stays faintly visible
     behind the floating toolbar (user: "give the liquid glass vibe like
     bottom navbar in mobile"). */
  background: var(--dock-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: var(--glass-hi), 0 14px 34px -18px rgba(14, 18, 26, 0.45);
  user-select: none;
  -webkit-user-select: none;
}
.tools-window.dragging { opacity: 0.92; box-shadow: 0 0 0 2px var(--accent), 0 14px 34px rgba(16, 24, 40, 0.2); }
.tw-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 5px 6px 6px;
  border-bottom: 1px solid var(--border);
}
.tw-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -4px;
  border-radius: 6px;
  color: var(--text-2);
  cursor: grab;
  touch-action: none;
  flex: 0 0 auto;
}
.tw-grip:active { cursor: grabbing; }
/* 2.0 header — same title treatment as the other boards (sm-title) */
.tw-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.tw-head-tools { display: inline-flex; align-items: center; gap: 2px; }
.tw-head .tool-btn { width: 24px; height: 24px; }
.tw-head .tool-btn svg { width: 13px; height: 13px; }
.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  border-radius: 6px;
  color: var(--text-2);
  flex: 0 0 auto;
}
.tw-btn:hover { background: var(--chip); color: var(--text); }
.tw-body {
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: min(56vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* 2.0 section head — uppercase label + hairline, echoes alert groups */
.tw-sec-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 7px;
}
.tw-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tw-grid .tool-btn {
  width: 100%;
  height: 29px;
  border: 1px solid transparent;
  background: var(--chip);
  border-radius: 9px;
}
.tw-grid .tool-btn:hover { border-color: var(--border-strong); background: var(--panel); color: var(--text); }
.tw-grid .tool-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tw-grid .tool-btn svg { width: 14px; height: 14px; }
.tw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tw-tile {
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 42px;
  border: 1px solid transparent;
  background: var(--chip);
  border-radius: 9px;
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
}
.tw-tile:hover { border-color: var(--border-strong); background: var(--panel); color: var(--text); }
.tw-tile.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tw-studies { position: relative; }
/* 2.0 add button — same accent treatment as the symbol menu "+ Add" */
.tw-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
}
.tw-add:hover, .tw-add.active { border-color: var(--accent); color: var(--accent); }
/* active studies — pill chips under the add button (click hide/show, × remove) */
.tw-study-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tw-study-chips[hidden] { display: none; }
.tw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  font: 700 10px/1 var(--font);
  padding: 5px 6px 5px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.tw-chip:hover { border-color: var(--accent); color: var(--accent); }
.tw-chip.off { opacity: 0.55; border-style: dashed; }
.tw-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.tw-chip-x:hover { background: var(--down); color: #fff; }
/* the studies menu is positioned by ui.js (fixed) so it never clips
   against the window's scrollable body */
.tools-window .ind-menu { position: fixed; z-index: 80; }
.tw-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tw-act {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 45px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--chip);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
}
.tw-act:hover { border-color: var(--border-strong); background: var(--panel); color: var(--text); }
.tw-act svg { width: 15px; height: 15px; }
.tw-dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 0 2px var(--panel);
}
/* "..." More menu */
.tw-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 6px;
  min-width: 196px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.18);
  padding: 6px;
  z-index: 85;
}
.tw-mi {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.tw-mi:hover { background: var(--chip); }
.tw-mi.danger { color: var(--down); }
.tw-mi.danger:hover { background: color-mix(in srgb, var(--down) 9%, transparent); }
/* collapsed → single grip pill (drag to move, click to expand) */
.tools-window.collapsed { width: 40px; }
.tools-window.collapsed .tw-title,
.tools-window.collapsed .tw-head-tools,
.tools-window.collapsed .tw-btn,
.tools-window.collapsed .tw-body,
.tools-window.collapsed .tw-more-menu { display: none; }
.tools-window.collapsed .tw-head { border-bottom: 0; padding: 4px; justify-content: center; }
.tools-window.collapsed .tw-grip { width: 32px; height: 32px; margin: 0; background: transparent; border-radius: 9px; color: var(--text); } /* shell provides the glass */
@media (max-width: 900px) {
  /* Task 48 — Tools window is a 2.0 bottom sheet on phones, the same
     pattern as the paper / alerts / symbol-menu sheets: full width above
     the tab bar, rounded top corners, scrollable body. Inline drag
     positions are cleared by ui.js so the sheet always wins. */
  .tools-window {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: calc(100vh - 130px);
    border-radius: 16px;
    box-shadow: 0 -8px 34px rgba(16, 24, 40, 0.24);
  }
  .tools-window.collapsed { width: 40px; right: auto; } /* grip pill stays pocket-size */
  .tw-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tw-grid .tool-btn { height: 38px; }  /* touch targets — same as the old bars */
  /* the More popover would fall off-screen under the sheet — float it
     fixed above the sheet instead */
  .tw-more-menu {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(100px + env(safe-area-inset-bottom));
    min-width: 0;
  }
}/* ==========================================================================
   PANELS 2.0 — unified modernization of every board from the final UI pack
   (paper trading 2.0 · alerts 2.0 · symbol menu 2.0 / all-categories picker
   · mobile symbols-tab search · trade + embed refresh). Vars-only: both
   editions render it from the same component block.
   ========================================================================== */

/* ---- Paper trading 2.0 ---------------------------------------------------- */
#paper-panel { left: auto; right: 12px; width: 300px; padding: 12px; }
.pp-head { margin-bottom: 8px; }

.pp-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--chip);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 10px;
}
.pp-tab {
  position: relative;
  border: 0;
  background: none;
  color: var(--text-2);
  font: 700 11.5px/1 var(--font);
  padding: 7px 4px;
  border-radius: 7px;
  cursor: pointer;
}
.pp-tab.on {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}
.pp-tab-dot {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--down);
}

.pp-acct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.pp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 8px;
  font: 600 8.5px/1.2 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 0;
}
.pp-stat b { font-size: 11.5px; color: var(--text); letter-spacing: 0; }

.pp-row2 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pp-row2 .pp-symchip { flex: 1; min-width: 0; }
.pp-row2 select {
  flex: 0 0 72px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: 700 12px var(--font);
  padding: 0 6px;
}
.pp-qty {
  width: 100%;
  height: 34px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font: 600 12.5px var(--font);
  padding: 0 10px;
}
.pp-qty:focus, .pp-form input:focus, .pp-row2 select:focus {
  outline: none;
  border-color: var(--accent);
}

.pp-chips { display: flex; gap: 6px; margin-bottom: 8px; }
.pp-chip {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text-2);
  font: 700 10.5px/1 var(--font);
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.pp-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.pp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.pp-form input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: 600 11.5px var(--font);
  padding: 0 9px;
}

.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pp-sell, .pp-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font: 800 12px/1 var(--font);
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pp-bp {
  font: 700 10.5px/1 var(--font);
  letter-spacing: 0;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

/* mobile: paper panel becomes a bottom sheet above the tab bar */
@media (max-width: 900px) {
  #paper-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    transform: none; /* reset the legacy centered-dialog translateX */
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100vh - 130px);
    box-shadow: 0 -8px 34px rgba(16, 24, 40, 0.22);
  }
}

/* ---- Alerts 2.0 ------------------------------------------------------------ */
.alerts-panel { width: 322px; }

.alert-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 2px;
}
.alert-quick button {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text-2);
  font: 700 10px/1 var(--font);
  padding: 5px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.alert-quick button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.alert-sec-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 800 10px/1 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 12px 2px 6px;
}
.alert-sec-n {
  font: 700 9px/1 var(--font);
  background: var(--chip);
  color: var(--text-2);
  border-radius: 999px;
  padding: 3px 7px;
}
.alert-empty.small { padding: 10px 4px; font-size: 10.5px; text-align: left; }

@media (max-width: 900px) {
  .alerts-panel {
    position: fixed;
    top: auto;
    bottom: calc(90px + env(safe-area-inset-bottom));
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - 130px);
    overflow: auto;
    box-shadow: 0 -8px 34px rgba(16, 24, 40, 0.22);
  }
}

/* ---- Symbol menu 2.0 (all-categories picker entry) ------------------------ */
.sm-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 9px;
  border-bottom: 1px solid var(--border);
}
.sm-title { font: 800 12.5px/1 var(--font); }
.sm-count {
  font: 700 9.5px/1 var(--font);
  background: var(--chip);
  color: var(--text-2);
  border-radius: 999px;
  padding: 3px 7px;
}
.sm-add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  background: var(--accent-soft);
  color: var(--accent);
  font: 800 11px/1 var(--font);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.sm-add:hover { border-color: var(--accent); }
.sm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 8px 9px;
  border-bottom: 1px solid var(--border);
}
.sm-chip {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text-2);
  font: 700 10.5px/1 var(--font);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.sm-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.menu-item { grid-template-columns: 80px 1fr auto; }
.mi-mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mi-mid .mi-name { flex: 1 1 auto; min-width: 0; }
.mi-tag {
  flex: 0 0 auto;
  font: 700 8.5px/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--chip);
  border-radius: 5px;
  padding: 2px 5px;
}

/* mobile: the menu becomes a bottom sheet */
@media (max-width: 900px) {
  .symbol-menu.sheet {
    top: auto;
    bottom: calc(90px + env(safe-area-inset-bottom));
    border-radius: 16px;
    box-shadow: 0 -8px 34px rgba(16, 24, 40, 0.24);
  }
}

/* ---- Mobile Symbols-tab search (rail) -------------------------------------- */
.rail-search { display: none; }
.rf-hide { display: none !important; }

@media (max-width: 900px) {
  body[data-view='symbols'] .rail-search {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding: 8px 10px;
  }
  .rail-search input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font: 600 13px var(--font);
    padding: 0 12px;
  }
  .rail-search input:focus { outline: none; border-color: var(--accent); }
}

/* ---- Trade panel 2.0 (settings-style refresh) ------------------------------ */
.trade-panel { border-radius: 14px; }
.trade-head { padding: 10px 12px; background: var(--panel); }
.trade-title { font-size: 13.5px; }
.trade-acct-sel { height: 34px; border-radius: 9px; }
.trade-tag { border-radius: 7px; }
.trade-card {
  border-radius: 11px;
  background: var(--chip);
  border-color: transparent;
}
.trade-row .icon-btn, .trade-step {
  border-radius: 8px;
}
.trade-qty .trade-step { width: 32px; height: 32px; }
.trade-buy, .trade-sell {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: 10px;
  font: 800 12.5px var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #fff;
}
.trade-buy:hover, .trade-sell:hover { filter: brightness(1.07); }
.trade-stp-field input { border-radius: 8px; }
.trade-risk-mode { height: 32px; border-radius: 8px; }

/* ---- Embed modal 2.0 -------------------------------------------------------- */
.modal { border-radius: 16px; }
.modal-body { padding: 16px; }
.embed-grid { gap: 10px; }
.embed-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 700 10.5px/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.embed-grid select, .embed-grid input {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: 600 12.5px var(--font);
  padding: 0 9px;
}
#embed-code {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px;
  resize: vertical;
}
.embed-actions { margin-top: 8px; }
.embed-preview-label {
  font: 800 10px/1 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 14px 0 6px;
}
#embed-preview {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}


/* =========================================================================
   JS study code editor (Task 49) — full-screen modal for writing real
   JavaScript indicators (+ JS in the ƒx menu). Vars-only: auto-themes.
   ========================================================================= */
.jsed-backdrop { z-index: 460; }
.jsed-backdrop .modal { width: min(700px, 100%); }
.jsed-body { display: flex; flex-direction: column; gap: 10px; }
.jsed-name { display: flex; align-items: center; gap: 8px; }
.jsed-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2); flex: 0 0 auto; }
.jsed-name .cu-in { flex: 1; }
.jsed-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jsed-chips-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2); }
.jsed-chip { padding: 5px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--chip); color: var(--text);
  font-size: 11.5px; font-weight: 600; cursor: pointer; }
.jsed-chip:hover { border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); }
.jsed-code { width: 100%; min-height: 230px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--chip); color: var(--text);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2; outline: none; }
.jsed-code:focus { border-color: var(--accent); }
.jsed-hint { margin-top: 0; }
@media (max-width: 640px) {
  .jsed-backdrop { padding: 10px; }
  .jsed-code { min-height: 180px; font-size: 11.5px; }
}

/* ================== TASK 50 — MULTICHART LAYOUT POPOVER ================== */
/* The Multi button now opens a 2.0-style popover with layout tiles
   (1 chart · 2 columns · 2 rows · 4 grid · 6 grid) instead of the old
   1 -> 2 -> 4 click-cycle. Tiles are mini diagrams of the layout. */
.mc-layout-pop {
  position: fixed;
  z-index: 300;
  width: 272px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.20);
  padding: 10px;
}
.mc-pop-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 2px 4px 8px;
}
.mc-pop-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
}
.mc-tile:hover { border-color: var(--accent); }
.mc-tile.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.mc-tile-diag { display: grid; gap: 2px; width: 34px; height: 26px; }
.mc-tile-diag i { background: var(--border); border-radius: 1.5px; }
.mc-tile-diag.t1 { grid-template-columns: 1fr; }
.mc-tile-diag.t2c { grid-template-columns: 1fr 1fr; }
.mc-tile-diag.t2r { grid-template-rows: 1fr 1fr; }
.mc-tile-diag.t4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mc-tile-diag.t6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.mc-tile.on .mc-tile-diag i { background: var(--accent); }
.mc-tile-label { font-size: 9.5px; font-weight: 700; color: var(--text-2); }
.mc-tile.on .mc-tile-label { color: var(--accent); }
.mc-pop-note { font-size: 9.5px; color: var(--text-2); padding: 8px 4px 0; line-height: 1.45; }

/* --- layout: 2 rows (main top · pane 2 bottom) --- */
#chart-area.mc-2v #chart-host { bottom: 50%; }
#chart-area.mc-2v #mc-pane-2 {
  display: block;
  left: 0; top: 50%; right: 0; bottom: 0;
  border-top: 1px solid var(--border);
}

/* --- layout: 6 charts (3×2 grid, main top-left) --- */
#mc-pane-5, #mc-pane-6 {
  position: absolute;
  display: none;
  z-index: 4;
  background: inherit;
}
#chart-area.mc-6 #chart-host { right: 66.666%; bottom: 50%; }
#chart-area.mc-6 #mc-pane-2 {
  display: block;
  left: 33.334%; top: 0; right: 33.332%; bottom: 50%;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#chart-area.mc-6 #mc-pane-3 {
  display: block;
  left: 66.668%; top: 0; right: 0; bottom: 50%;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#chart-area.mc-6 #mc-pane-4 {
  display: block;
  left: 0; top: 50%; right: 66.666%; bottom: 0;
  border-top: 1px solid var(--border);
}
#chart-area.mc-6 #mc-pane-5 {
  display: block;
  left: 33.334%; top: 50%; right: 33.332%; bottom: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
#chart-area.mc-6 #mc-pane-6 {
  display: block;
  left: 66.668%; top: 50%; right: 0; bottom: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
/* keep the main legend inside the top-left third */
#chart-area.mc-6 #legend { right: 66.668%; }
/* bottom-left cell chip clears the vertical toolbars (as pane 3 in 2x2) */
@media (min-width: 701px) {
  #chart-area.mc-6 #mc-pane-4 .mc-head { left: auto; right: 64px; }
}

/* ===================== TASK 50 — PICKER FAVORITES ======================= */
/* Star toggle on every instrument-picker row; starred rows pin to the
   top of the list under a small gold divider. */
.sp-star {
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  color: var(--text-2);
  opacity: 0.45;
  transition: opacity 0.12s, color 0.12s, transform 0.12s;
}
.sp-star:hover { opacity: 1; transform: scale(1.15); }
.sp-row:hover .sp-star { opacity: 0.8; }
.sp-star.on { opacity: 1; color: var(--accent); }
.sp-fav-div {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 10px 4px;
}

/* ===================== TASK 50 — BAR-CLOSE COUNTDOWN ==================== */
/* Legend chip next to the clock: time left until the active candle
   closes (m:ss intraday, h:mm:ss for long bars, UTC midnight for 1D). */
.lg-count {
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ==========================================================================
   DEEP FLOW SUITE — Tasks 51/52
   flow panel · tape · DOM ladder · events · HUD · fx-flow menu section ·
   paper pending orders (oseg/price/pendings) · journal (stats/eq/journal)
   Appended byte-identical to both editions (light + dark).
   ========================================================================== */

/* ---- flow panel (desktop: docked right · mobile: bottom sheet) ---- */
#flow-panel {
  position: absolute;
  top: 52px;
  right: 12px;
  width: 300px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 68px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
  padding: 12px;
  z-index: 96;
  display: flex;
  flex-direction: column;
}
#flow-panel[hidden] { display: none; }
.fp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.fp-title { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; }
.fp-feed {
  font-size: 9.5px; font-weight: 800; color: var(--text-2);
  background: rgba(127, 127, 127, 0.12); border-radius: 6px; padding: 2px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.fp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: 0 0 auto; }
.fp-dot.on { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); }
.fp-dot.on.warn { background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2); }
.fp-close {
  margin-left: auto; border: 0; background: none; color: var(--text-2);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer;
}
.fp-close:hover { background: var(--accent-soft); color: var(--accent); }

.fp-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--chip); border-radius: 9px; padding: 3px; margin-bottom: 10px;
}
.fp-tab {
  position: relative; border: 0; background: none; color: var(--text-2);
  font: 700 11.5px/1 var(--font); padding: 7px 4px; border-radius: 7px; cursor: pointer;
}
.fp-tab.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16); }
.fp-tab-dot {
  position: absolute; top: 5px; right: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--down);
}
.fp-view { min-height: 0; }

/* ---- tape ---- */
.ts-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2); padding: 0 2px 4px;
}
.ts-head span:last-child { text-align: right; }
.ts-list { display: flex; flex-direction: column; gap: 1px; }
.ts-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 3px 6px; border-radius: 5px; border-left: 2px solid transparent;
}
.ts-row .ts-t { color: var(--text-2); font-size: 9.5px; }
.ts-row .ts-q { text-align: right; font-weight: 800; }
.ts-row.buy { border-left-color: var(--up); }
.ts-row.buy .ts-p, .ts-row.buy .ts-q { color: var(--up); }
.ts-row.sell { border-left-color: var(--down); }
.ts-row.sell .ts-p, .ts-row.sell .ts-q { color: var(--down); }
.ts-row.big { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 800; }
.ts-empty { color: var(--text-2); font-size: 11px; text-align: center; padding: 14px 6px; line-height: 1.5; }

/* ---- DOM ladder ---- */
.dom-wrap { display: flex; flex-direction: column; gap: 1px; }
.dom-row {
  display: grid; grid-template-columns: 44px 1fr 76px; align-items: center; gap: 6px;
  font-size: 10.5px; font-variant-numeric: tabular-nums; padding: 2px 4px;
}
.dom-row .dom-q { font-weight: 800; }
.dom-row.ask .dom-p { color: var(--down); text-align: right; }
.dom-row.bid .dom-p { color: var(--up); text-align: right; }
.dom-bar { height: 12px; border-radius: 3px; min-width: 1px; }
.dom-row.ask .dom-bar { background: color-mix(in srgb, var(--down) 26%, transparent); justify-self: end; order: 3; }
.dom-row.bid .dom-bar { background: color-mix(in srgb, var(--up) 26%, transparent); }
.dom-mid {
  text-align: center; font-size: 10px; font-weight: 800; color: var(--text-2);
  padding: 5px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  margin: 3px 0; font-variant-numeric: tabular-nums;
}
.dom-book { display: flex; flex-direction: column; gap: 2px; }
.dom-bookrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.dom-bookrow .dom-bp { flex: 0 0 76px; text-align: center; font-weight: 700; }
.dom-bar.lp { background: color-mix(in srgb, var(--up) 30%, transparent); height: 11px; border-radius: 3px; }
.dom-bar.sp { background: color-mix(in srgb, var(--down) 30%, transparent); height: 11px; border-radius: 3px; margin-left: auto; }
.dom-note { font-size: 9.5px; color: var(--text-2); text-align: center; padding-top: 6px; line-height: 1.45; }

/* ---- events feed ---- */
.ev-list { display: flex; flex-direction: column; gap: 3px; }
.ev-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 6px; align-items: baseline;
  font-size: 10.5px; padding: 5px 7px; border-left: 2px solid var(--accent);
  background: var(--chip); border-radius: 6px;
}
.ev-row .ev-kind { font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; }
.ev-row .ev-note { color: var(--text); line-height: 1.4; }
.ev-row .ev-t { color: var(--text-2); font-size: 9px; font-variant-numeric: tabular-nums; }
.fp-foot { font-size: 9px; color: var(--text-2); line-height: 1.5; margin-top: 9px; border-top: 1px dashed var(--border); padding-top: 7px; }

/* ---- HUD chip strip (under the legend) ---- */
#flow-hud {
  position: absolute;
  left: 248px;
  /* self-adapting: chart.js publishes the legend's live height as --lg-h
     (ResizeObserver), so the chips always clear the glass legend card —
     not just in fullscreen but on the normal desktop too */
  top: calc(12px + var(--lg-h, 40px) + 10px);
  z-index: 16;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  max-width: calc(100% - 260px);
  pointer-events: none;
}
#flow-hud[hidden] { display: none; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 8px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
.hud-chip .hud-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.hud-chip:first-child .hud-dot { background: var(--up); }

/* ---- ƒx menu section (Deep flow, 8 switches) ---- */
.fx-flow { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 6px; }
.fx-flow-head {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-2); padding: 2px 2px 4px;
}
.fx-flow-row { padding: 4px 0; border-bottom: 0; }

/* ---- indicators menu — wider, scrollable (Task 52 single-line rows) ---- */
.ind-menu { min-width: 340px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; }
.ind-menu .ind-row2 { flex-wrap: nowrap; }
.pp-tabs { grid-template-columns: repeat(3, 1fr); }

/* ---- paper pending orders + journal (Task 51/52) ---- */
.pp-oseg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--chip); border-radius: 8px; padding: 3px; margin-bottom: 6px;
}
.pp-oseg button {
  border: 0; background: none; color: var(--text-2);
  font: 700 11px/1 var(--font); padding: 6px 4px; border-radius: 6px; cursor: pointer;
}
.pp-oseg button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
.pp-price {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); padding: 8px 10px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pp-pend { display: flex; flex-direction: column; gap: 4px; }
.pp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 4px;
}
.pp-stat-card {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 7px;
  font: 600 8px/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2);
}
.pp-stat-card b { font-size: 10.5px; color: var(--text); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-stat-card b.up { color: var(--up); }
.pp-stat-card b.down { color: var(--down); }
.pp-eqcanvas { width: 100%; height: 110px; display: block; border: 1px solid var(--border); border-radius: 8px; background: var(--chip); }
.pp-journal { display: flex; flex-direction: column; gap: 3px; max-height: 200px; overflow-y: auto; }
.pp-journal .pp-row { padding: 4px 7px; font-size: 10.5px; }
.pp-journal .pp-jt { color: var(--text-2); font-size: 9px; font-variant-numeric: tabular-nums; }
.pp-journal .pp-why { font-size: 9px; color: var(--text-2); }

/* ---- mobile (≤900px): bottom sheet + HUD under the legend ---- */
@media (max-width: 900px) {
  #flow-panel {
    left: 8px; right: 8px; top: auto; bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 8px);
    width: auto; max-width: none; max-height: min(46vh, 380px);
    border-radius: 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #flow-hud {
    left: 8px; right: 8px; top: 74px; max-width: none;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  #flow-hud::-webkit-scrollbar { display: none; }
  .ts-row { font-size: 11px; padding: 4px 6px; }
  .ind-menu { min-width: 0; }
  .pp-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Task 52 fix — timeframe strip scrolls inside its own row on phones.
   The 10-tf catalog (1s…1w) overflowed the 360px layout viewport (tf-group
   right edge 390-427px), silently zooming mobile browsers out. The strip now
   shrinks with the row and swipes horizontally; pills never wrap. ===== */
@media (max-width: 900px) {
  .tf-group {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tf-group::-webkit-scrollbar { display: none; }
  .tf-pill { flex: 0 0 auto; padding: 5px 9px; }
}

/* ============ TASK 58 FIX — mc-6 LEFT COLUMN AXES + PHONE HEADS ============ */
/* (1) In the 6-grid the two left-column cells (#chart-host and #mc-pane-4)
   were laid out two cells wide (right: 33.33x%), so the middle panes 2/5
   painted their opaque canvas over their right half — hiding the price
   scale (right edge) and the right part of the time scale. They now end
   at 66.666%, i.e. exact 1/3-wide cells that sit flush against the middle
   column, keeping both axes fully visible. */
/* (2) Narrow cells let the per-pane head chips overflow into the neighbor
   cell: the symbol chip refused to shrink (flex min-width:auto), pushing
   price/change past the cell edge. The symbol now shrinks with an
   ellipsis, and on phones the change chip is dropped in the grid layouts
   (4/6) where cells are tightest — sym + tf + price still fit. */
.mc-head .mc-sym { min-width: 0; }
.mc-sym .mc-sym-id {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 700px) {
  #chart-area.mc-4 .mc-head .mc-chg,
  #chart-area.mc-6 .mc-head .mc-chg { display: none; }
}
/* ====== TASK 59 — MORE MENU PLACEMENT · MOBILE FLOATING TOOLS · THIN PHONES ====== */
/* (1) The "..." More popover now opens to the RIGHT of the Tools panel
   (ui.js also flips it left near the area's right edge and clamps it
   vertically). The old below-panel popover ran past short viewports and
   was cut off / hidden under the panel. */
@media (min-width: 901px) {
  .tw-more-menu { top: 0; right: auto; left: calc(100% + 8px); }
  .tw-more-menu.tw-more-left { left: auto; right: calc(100% + 8px); }
}
@media (max-width: 900px) {
  .tools-window.tw-float .tw-more-menu {
    position: absolute;
    top: 0; left: calc(100% + 8px); right: auto; bottom: auto;
    min-width: 196px;
  }
  .tools-window.tw-float .tw-more-menu.tw-more-left { left: auto; right: calc(100% + 8px); }
}
/* (2) The Tools window floats on phones too — the bottom sheet stays the
   default, but dragging the grip undocks it anywhere over the chart
   (approved Option C: collapsible + movable, now on mobile as well).
   Dropping it near the bottom edge re-docks the sheet. */
@media (max-width: 900px) {
  .tools-window.tw-float {
    position: absolute;
    left: 0; right: auto; bottom: auto; top: auto;
    max-height: none;
  }
  .tools-window.tw-float:not(.collapsed) { width: 226px; }
}
#tw-grip { touch-action: none; } /* pointer drag on touch — no scroll steal */
/* (3) Thin phones (Infinix Hot 60i class, 360px CSS width and below):
   tighten the TF pills and fix the heatmap top nav, whose Commodities /
   Stocks / Heatmap tabs were cut off the right edge. The nav gets its own
   wrapped row under the brand, with the category-page shrink rules. */
@media (max-width: 400px) {
  .tf-pill { padding: 5px 8px; }
}
@media (max-width: 360px) {
  body[data-page='category'] .cat-tab { padding: 5px 4px; font-size: 10.5px; }
  body[data-page='category'] .cat-tabs { gap: 1px; }
}
@media (max-width: 1240px) {
  body[data-page='heatmap'] .cat-tab { padding: 5px 8px; font-size: 11px; }
  body[data-page='heatmap'] .cat-home span { display: none; }
  body[data-page='heatmap'] .cat-tabs { gap: 2px; }
}
/* ==========================================================================
   TASK 60 — PANEL 2.0 · CHART-ONLY FULLSCREEN · FLOW PANEL FIX
   1) Flow panel: proper flex layout — head/tabs/foot are FIXED, the active
      view scrolls its own content. Fixes the tape rows visually overlapping
      the description foot (the view used to shrink and spill over it).
   2) Panel 2.0 modern pass: unified radii, layered shadows, glass surfaces,
      refined tabs/rows, pulsing live dot, tape reading aids (pause tape +
      big-prints-only whale filter), Fullscreen joins Actions as 5th tile.
   3) Chart-only fullscreen: #chart-area goes fullscreen itself (native
      element fullscreen) or body.cx-fs CSS mode (fallback) — chart with
      its own scales, legend and tools plus a floating Exit button. No top
      bar, no rail, no side panel, no bottom nav, no brand chip.
   Appended byte-identical to both editions (light + dark).
   ========================================================================== */

/* ---- 1) flow panel 2.0 — flex layout, nothing overlaps anymore ---- */
#flow-panel {
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.07), 0 20px 48px rgba(16, 24, 40, 0.18);
}
#flow-panel[hidden] { display: none; }
.fp-head {
  margin-bottom: 0;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--border);
}
.fp-dot.on { animation: cx-pulse 2.2s ease-out infinite; }
@keyframes cx-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 38%, transparent); }
  70% { box-shadow: 0 0 0 7px rgba(8, 153, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 153, 129, 0); }
}
.fp-tabs { margin: 10px 12px 8px; gap: 3px; border-radius: 10px; }
.fp-tab { border-radius: 8px; }
.fp-tab.on { color: var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
.fp-view {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 10px;
  scrollbar-width: thin;
}
/* definite panel height: the view flex-fills what is left between the
   fixed head/tabs/foot (a content-height flex parent gives a
   flex-basis-0 view zero free space — the tape collapsed to 0) */
#flow-panel { height: min(600px, calc(100% - 68px)); }
.fp-view[hidden] { display: none; }
#fp-view-tape .ts-head {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  padding: 6px 2px 5px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ts-tools { display: flex; gap: 3px; justify-self: end; }
.ts-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-2);
  cursor: pointer;
}
.ts-tool:hover { background: var(--chip); color: var(--text); }
.ts-tool.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ts-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.fp-foot {
  margin: 0;
  padding: 8px 12px 10px;
  border-top: 1px dashed var(--border);
}

/* ---- 2) panel 2.0 — one modern surface language ---- */
#flow-panel, .alerts-panel, .trade-panel, .ind-menu, .tw-more-menu, .symbol-menu {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.tools-window {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06), 0 20px 48px rgba(16, 24, 40, 0.17);
}
.hud-chip { border-radius: 8px; }
#flow-hud .hud-chip:first-child .hud-dot { animation: cx-pulse 2.2s ease-out infinite; }

/* Fullscreen joins the Actions row — 6 tiles balance as 3 x 2 */
.tw-actions { grid-template-columns: repeat(3, 1fr); }
#tw-fs-act.on {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* phones: the flow sheet owns the bottom slot — Tools steps aside */
.tools-window.tw-suppressed { display: none; }

/* ---- 3) chart-only fullscreen ---- */
#chart-area:fullscreen { width: 100%; height: 100%; }
#chart-area:-webkit-full-screen { width: 100%; height: 100%; }
#fs-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 320;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 700 11.5px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.2);
}
#fs-close:hover { border-color: var(--accent); color: var(--accent); }
#fs-close[hidden] { display: none; }
body.cx-fs #topbar,
body.cx-fs #rail,
body.cx-fs #side,
body.cx-fs #mobile-tabs,
body.cx-fs .lg-brand,
body.cx-fs .edge-toggle { display: none !important; }
body.cx-fs #layout {
  position: fixed;
  inset: 0;
  z-index: 900;
  height: 100vh;
  height: 100dvh;
}
body.cx-fs, body.cx-fs #chart-area { background: var(--bg); }

/* phones: the flow sheet grows a bit (its foot is now always visible) and,
   in fullscreen, the docked tools sheet sits on the true bottom — no tab
   bar below it anymore. Floated windows keep their own position. */
@media (max-width: 900px) {
  #flow-panel { height: min(54vh, 440px); max-height: min(54vh, 440px); }
  .tools-window.tw-suppressed { display: none; }
  body.cx-fs #tools-window:not(.tw-float) {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  body.cx-fs #flow-hud { top: calc(12px + var(--lg-h, 32px) + 10px); }
  /* Task 59 thin-phone rule restored — the TASK 60 insert had swallowed it */
  body[data-page='heatmap'] .cat-tabs { order: 10; flex-basis: 100%; padding: 4px 2px 0; flex-wrap: wrap; }
}

/* ==========================================================================
   TASK 60B — LEGEND-AWARE HUD · DOM IMBALANCE METER · FULLSCREEN POLISH
   1) #flow-hud follows the REAL legend height (--lg-h, published by
      chart.js ResizeObserver) — the legend wraps to a second row on
      narrow panes and with the countdown/clock chips; the HUD chips and
      the canvas footprint badge now always clear it. No more "legend on
      order flow text" overlaps.
   2) DOM ladder upgrade: bid/ask depth totals + an imbalance meter
      (buy share bar) above the ladder — a real read on book pressure.
   3) Fullscreen / panel 2.0 detail polish.
   Appended byte-identical to both editions (light + dark).
   ========================================================================== */

/* ---- 1) legend-aware HUD offset (desktop + phones) ---- */
#flow-hud { top: calc(12px + var(--lg-h, 32px) + 10px); }
@media (max-width: 900px) {
  #flow-hud { top: calc(12px + var(--lg-h, 46px) + 8px); }
}

/* ---- 2) DOM ladder — depth totals + imbalance meter ---- */
.dom-totals {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-2); padding: 4px 2px 0;
}
.dom-totals .dt-bid { color: var(--up); }
.dom-totals .dt-ask { color: var(--down); text-align: right; }
.dom-imb {
  position: relative; height: 6px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--down) 32%, transparent);
  margin: 4px 2px 2px;
}
.dom-imb > span {
  position: absolute; inset: 0 auto 0 0; min-width: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--up) 72%, transparent), var(--up));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.dom-imb-lbl {
  display: flex; justify-content: space-between;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-2); padding: 2px 2px 7px;
}
.dom-mid { margin: 2px 0; }

/* ---- 3) detail polish ---- */
.ts-row.big .ts-q { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.fp-view::-webkit-scrollbar { width: 8px; }
.fp-view::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 14%, transparent); border-radius: 4px; }
.fp-view::-webkit-scrollbar-track { background: transparent; }
#fs-close:active { transform: scale(0.96); }
#fs-close { transition: border-color 0.15s, color 0.15s, transform 0.1s; }
body.cx-fs #fs-close {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ==========================================================================
   TASK 61 — UI 3.0 · desktop tape containment · mobile tools sheet 2.0
   Appended byte-identical to both editions (light + dark).
   ========================================================================== */

/* ---- 1) desktop tape / DOM / events containment --------------------------
   The owner hit horizontal overflow in the flow panel on desktop: grid
   tracks sized `1fr` cannot shrink below min-content, so one long price
   or size string stretched its row past the panel. Every track is now
   shrinkable and every cell ellipsizes — the panel can never overflow. */
#flow-panel { overflow: hidden; }
#flow-panel .fp-view { max-width: 100%; }
.ts-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.ts-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-head span:not(.ts-tools) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-row { grid-template-columns: 44px minmax(0, 1fr) 76px; }
.dom-row > span { min-width: 0; }
.dom-bp, .dom-sz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row { min-width: 0; }
.ev-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-foot, .fp-feed { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* the sticky tape head is 4-track (time/price/size/tools) — rows stay
   3-track; align the first three so columns line up visually */
#fp-view-tape .ts-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }

/* ---- 2) mobile tools sheet 2.0 -------------------------------------------
   Redesign of the phone toolbar + its panel: the collapsed state is now a
   proper floating action button (accent, elevated, bottom-right), the
   expanded sheet gains a real grab handle, tighter height budget and 44px
   touch targets, and it can never bury the chart on first visit (phones
   start pocketed — ui.js). Tap-through after expand/collapse is guarded
   in ui.js. */
@media (max-width: 900px) {
  .tools-window {
    border-radius: 18px;
    max-height: min(58vh, calc(100vh - 148px));
    box-shadow: 0 -10px 40px rgba(16, 24, 40, 0.28);
  }
  .tools-window .tw-head { position: relative; padding: 12px 8px 9px; }
  .tools-window:not(.collapsed) .tw-head::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text) 24%, transparent);
    pointer-events: none;
  }
  .tw-body {
    max-height: calc(min(58vh, calc(100vh - 148px)) - 52px);
    padding: 2px 10px 12px;
  }
  .tw-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .tw-grid .tool-btn { height: 44px; border-radius: 11px; }
  .tw-grid .tool-btn svg { width: 18px; height: 18px; }
  .tw-sec-title { margin-top: 12px; }
  /* collapsed state = floating action button, bottom-right */
  .tools-window.collapsed {
    left: auto;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
    border-radius: 17px;
    /* transparent liquid glass — same recipe as the bottom nav dock */
    background: var(--dock-bg);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--glass-hi), 0 8px 24px rgba(16, 24, 40, 0.32);
  }
  .tools-window.collapsed .tw-head { border-bottom: 0; padding: 0; justify-content: center; height: 100%; }
  .tools-window.collapsed .tw-grip {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 17px;
    background: transparent;   /* the shell IS the glass surface */
    color: var(--text);
    justify-content: center;
  }
  .tools-window.collapsed .tw-grip svg { width: 20px; height: 20px; }
  .tools-window.collapsed { width: 50px; right: 12px; } /* keep the FAB size authoritative */
  .tools-window.tw-float.collapsed { width: 50px; }     /* floated phones keep the FAB too */
}

/* ---- 3) UI 3.0 modernization pass ----------------------------------------
   One coherent surface language on top of the approved layout: deeper
   glass on the boards, calmer borders, consistent focus rings, floating
   feel for the mobile tab bar, thinner scrollbars. Vars-only — both
   editions render it from their own tokens. */
.flow-panel-fallback, #flow-panel, .alerts-panel, .trade-panel,
.ind-menu, .tw-more-menu, .symbol-menu, .tools-window, .modal {
  border-radius: 16px;
}
.topbar {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar button:focus-visible, .tool-btn:focus-visible, .fp-tab:focus-visible,
#mobile-tabs button:focus-visible, .ts-tool:focus-visible, .tw-btn:focus-visible,
.hud-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
#mobile-tabs button.active {
  background: var(--dock-active);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
#legend { border-radius: 14px; }  /* glass capsule — dock vibe (18px on big screens, see the legend block below) */
.lg-chip { border-radius: 7px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 26%, transparent); }
/* inputs keep the accent ring instead of the default outline */
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* end TASK 61 */

/* ==========================================================================
   Task 15 — top-bar stability + price hover card
   ========================================================================== */

/* --- reserved space in the top bar ---------------------------------------
   The asset name and its value keep the SAME space whether the value is
   "1.08" or "104,231.55" — nothing shifts on a tick, nothing overlaps. */
.price-block { position: relative; flex: 0 0 auto; }
.last-price { min-width: 9.5ch; white-space: nowrap; }
.chg-pct { min-width: 6.5ch; white-space: nowrap; }
.sym-name { min-width: 0; }
.sym-id { min-width: 7ch; }

/* one stable symbol-button width on standard desktops — short or long
   names render identically, the long name just ellipsises in its slot */
@media (min-width: 1121px) {
  .symbol-btn { width: 244px; }
  .sym-name { max-width: 104px; }
}
/* smaller desktops drop the long name first instead of jamming the row */
@media (max-width: 1120px) and (min-width: 981px) {
  .symbol-btn { width: auto; }
  .sym-name { display: none; }
  .sym-id { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* phones keep the bar minimal — the change chip stays off it */
@media (max-width: 980px) {
  body:not(.embed) .chg-pct { display: none; }
  .last-price { min-width: 8.5ch; }
}

/* --- price tick flash ----------------------------------------------------- */
@keyframes pxFlashUp { 0% { color: var(--up); } 100% { } }
@keyframes pxFlashDown { 0% { color: var(--down); } 100% { } }
.last-price.flash-up { animation: pxFlashUp 0.8s ease; }
.last-price.flash-down { animation: pxFlashDown 0.8s ease; }

/* --- price hover card: 24h High / Low / Current --------------------------- */
.px-tip {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 90;
  min-width: 216px;
  max-width: min(300px, 88vw);
  padding: 10px 13px 9px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(2, 8, 20, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.px-tip[hidden] { display: none; }
.px-tip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.px-tip-k { color: var(--text-2); font-weight: 600; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.px-tip-v { font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.px-tip-v.up { color: var(--up); }
.px-tip-v.down { color: var(--down); }
.px-tip-range { display: block; margin-top: 1px; }
.px-tip-range[hidden] { display: none; }
.px-tip-bar {
  position: relative; display: block; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--down), #8b929c 52%, var(--up));
  opacity: 0.9;
}
.px-tip-pos {
  position: absolute; top: -3.5px; left: 50%; width: 3px; height: 12px;
  border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--panel);
  transition: left 0.25s ease;
}
.px-tip-cap { color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  .last-price.flash-up, .last-price.flash-down { animation: none; }
  .px-tip-pos { transition: none; }
}
/* ==========================================================================
   Task 15.3 — toggle switches + settings-style panels for toolbar popups
   Toggles replace tick-mark checkboxes everywhere in the chart UI; the
   Indicators and More panels now open centered like Chart settings.
   Vars-only — both editions render from their own tokens.
   ========================================================================== */

/* ---- 1) toggle switches (pure CSS over the existing checkboxes) ---- */
#set-backdrop input[type="checkbox"],
.ind-vis,
.palette-check input[type="checkbox"],
.trade-check input[type="checkbox"],
.cu-lib input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 34px;
  height: 19px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.16s ease, border-color 0.16s ease;
}
#set-backdrop input[type="checkbox"]::before,
.ind-vis::before,
.palette-check input[type="checkbox"]::before,
.trade-check input[type="checkbox"]::before,
.cu-lib input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.16s ease, background 0.16s ease;
}
#set-backdrop input[type="checkbox"]:checked,
.ind-vis:checked,
.palette-check input[type="checkbox"]:checked,
.trade-check input[type="checkbox"]:checked,
.cu-lib input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
#set-backdrop input[type="checkbox"]:checked::before,
.ind-vis:checked::before,
.palette-check input[type="checkbox"]:checked::before,
.trade-check input[type="checkbox"]:checked::before,
.cu-lib input[type="checkbox"]:checked::before {
  background: #fff;
  transform: translateX(15px);
}
#set-backdrop input[type="checkbox"]:focus-visible,
.ind-vis:focus-visible,
.palette-check input[type="checkbox"]:focus-visible,
.trade-check input[type="checkbox"]:focus-visible,
.cu-lib input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#set-backdrop input[type="checkbox"]:disabled,
.ind-vis:disabled,
.palette-check input[type="checkbox"]:disabled,
.trade-check input[type="checkbox"]:disabled,
.cu-lib input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- 2) Indicators — dropdown → settings-style modal ---- */
.ind-modal { width: 560px; }
.ind-modal .ind-menu {
  position: static;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}
.ind-modal .ind-row2:last-of-type { border-bottom: 0; }
#ind-title { display: flex; align-items: baseline; gap: 8px; }
#ind-title .ind-count {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* ---- 3) More tools — popover → settings-style modal ---- */
.tw-more-modal { width: 340px; }
.tw-more-modal .tw-more-menu {
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
  #set-backdrop input[type="checkbox"],
  .ind-vis,
  .palette-check input[type="checkbox"],
  .trade-check input[type="checkbox"],
  .cu-lib input[type="checkbox"],
  #set-backdrop input[type="checkbox"]::before,
  .ind-vis::before,
  .palette-check input[type="checkbox"]::before,
  .trade-check input[type="checkbox"]::before,
  .cu-lib input[type="checkbox"]::before {
    transition: none;
  }
}


/* ==========================================================================
   Task 15.5 — compact header caps + legend as one flush-left block.
   Appended byte-identical to both
   editions (light + dark). Vars only.
   ========================================================================== */

/* --- legend: one cohesive glass block at the very left of the chart -------
   The old 58px left inset (clearance for a legacy layout) is gone — the
   legend now starts 12px from the edge, its chips sit in ONE rounded
   surface. Task 34b: the surface uses the DOCK's translucent recipe —
   var(--dock-bg) tint, hairline glass border, specular highlight, soft
   float shadow and NO backdrop blur, so candles stay faintly visible
   behind it (same transparent dock vibe). */
.legend {
  left: 12px;
  top: 10px;
  gap: 5px;
  row-gap: 3px;
  padding: 6px 12px;
  background: var(--dock-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: var(--glass-hi), 0 14px 34px -18px rgba(14, 18, 26, 0.45);
}

/* big screens: roomier legend card — more air, larger type, deeper radius */
@media (min-width: 1100px) {
  .legend { font-size: 12.5px; gap: 9px; row-gap: 4px; padding: 9px 15px; }
  #legend { border-radius: 18px; }
  .lg-sym { font-size: 13.5px; }
  .lg-name, .lg-type { font-size: 11.5px; }
  .lg-ohlc { font-size: 12px; }
  .lg-clock { font-size: 11.5px; }
  .lg-brand { font-size: 11px; padding: 2px 7px; }
}

/* --- big desktops: the asset name and price space is CAPPED, not reserved -
   Small assets no longer leave a wide blank slot in the top bar: the
   symbol button and the price size to their content within max limits
   (long values ellipsis instead of stretching the row). Per-asset widths
   stay tick-stable (tabular numerals, fixed decimals); only switching
   assets may re-flow the row. */
@media (min-width: 981px) {
  .last-price {
    min-width: 0;
    max-width: 13ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (min-width: 1121px) {
  .symbol-btn { width: auto; min-width: 0; max-width: 236px; }
  .sym-name { max-width: 108px; flex: 0 1 auto; }
  .sym-id { min-width: 0; }
}

/* ==========================================================================
   Task 15.6 — fullscreen ANALYSIS mode. The chart-only fullscreen is the
   technical-analysis / drawing space: the normal legend and the floating
   Tools window stay out of it. Instead it carries
   1) an instrument + timeframe chip pair in the multi-chart pane style
      (dropdown menus open INSIDE the chart-area element - body-level nodes
      never render in native element fullscreen),
   2) a dedicated DRAW-ONLY toolbar (clone of the Tools window Draw grid)
      docked on the left on desktop / as a bottom scroll row on phones.
   Appended byte-identical to both editions (light + dark). Vars only.
   NOTE: the "Xidden]" selectors seen in terminal output are a DISPLAY
   artifact (output transport eats the two-char sequence bracket+h).
   Verify with char codes, never with rg/cat/sed display. This file was
   never corrupted; no repair was needed or made.
   ========================================================================== */

/* drop the normal chrome while fullscreen is active */
body.cx-fs #legend,
body.cx-fs #tools-window { display: none !important; }

/* --- instrument + timeframe chips (multi-chart pane pattern) --- */
#fs-head {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 330;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 110px);
}
#fs-head[hidden] { display: none; }
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  color: var(--text);
  font: 800 12px/1.1 var(--font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.fs-chip:hover { border-color: var(--accent); color: var(--accent); }
.fs-chip:active { transform: scale(0.97); }
.fs-chip .fs-caret { opacity: 0.55; }
.fs-chip-tf .fs-chip-label { color: var(--text-2); font-weight: 700; font-size: 11px; }
.fs-chip[aria-expanded="true"] { border-color: var(--accent); }
.fs-chip[aria-expanded="true"] .fs-chip-label { color: var(--accent); }
.fs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* dropdown menus - same .mc-menu look as the multi-chart pane menus, but
   absolutely positioned inside the fullscreen host */
.mc-menu.fs-menu { position: absolute; z-index: 350; }
.fs-menu .mc-menu-search { padding: 2px 4px 6px; position: sticky; top: -6px; background: var(--panel); z-index: 1; }
.fs-menu .mc-menu-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--field, var(--panel));
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: var(--font);
  outline: none;
}
.fs-menu .mc-menu-search input:focus { border-color: var(--accent); }
.fs-menu .mc-menu-cap { font-size: 10.5px; color: var(--text-2); padding: 7px 9px 5px; text-align: center; }

/* --- draw-only toolbar: vertical dock on the left (desktop) --- */
#fs-tools {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 330;
  max-height: calc(100% - 96px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.14);
}
#fs-tools::-webkit-scrollbar { display: none; }
#fs-tools[hidden] { display: none; }
.fs-tools-grid { display: flex; flex-direction: column; gap: 3px; }
#fs-tools .tool-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--chip);
  color: var(--text-2);
}
#fs-tools .tool-btn:hover { border-color: var(--border-strong); background: var(--panel); color: var(--text); }
#fs-tools .tool-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#fs-tools .tool-btn svg { width: 16px; height: 16px; }

/* flow HUD: below the chip pair, clear of the vertical toolbar */
body.cx-fs #flow-hud { left: 66px; top: 48px; max-width: calc(100% - 130px); }

/* phones: chips stay top-left; the draw toolbar becomes a horizontal
   scroll row docked at the true bottom (the tools sheet is gone there) */
@media (max-width: 900px) {
  #fs-head { top: 8px; left: 10px; }
  body.cx-fs #flow-hud { left: 10px; top: 44px; max-width: calc(100% - 110px); }
  #fs-tools {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    transform: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .fs-tools-grid { flex-direction: row; }
  #fs-tools .tool-btn { width: 38px; height: 38px; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-chip { transition: none; }
}

/* ==========================================================================
   Task 16 — collapsible fullscreen draw toolbar. The #fs-tools dock gains
   a small fold tab as its first row; .fs-min hides the grid + separator so
   the dock shrinks to the tab alone. State persists via localStorage. The
   caret points toward the fold: left/right on the desktop side dock,
   down/up on the phone bottom row. Appended byte-identical to both
   editions. Vars only.
   ========================================================================== */
#fs-tools { display: flex; flex-direction: column; gap: 3px; }
.fs-tools-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.fs-tools-toggle:hover { background: var(--chip); color: var(--text); }
.fs-tools-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fs-tools-toggle svg { transition: transform 0.18s ease; }
.fs-tools-sep {
  flex: 0 0 auto;
  align-self: stretch;
  height: 1px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
}
#fs-tools.fs-min .fs-tools-grid,
#fs-tools.fs-min .fs-tools-sep { display: none; }
#fs-tools.fs-min .fs-tools-toggle { width: 30px; height: 26px; }
#fs-tools.fs-min .fs-tools-toggle svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  #fs-tools { flex-direction: row; align-items: center; }
  /* collapsed: shrink-wrap to the fold tab instead of the full-width strip */
  #fs-tools.fs-min { right: auto; }
  .fs-tools-toggle { width: 38px; height: 38px; border-radius: 9px; }
  .fs-tools-toggle svg { transform: rotate(-90deg); }
  .fs-tools-sep { width: 1px; height: auto; }
  #fs-tools.fs-min .fs-tools-toggle { width: 34px; height: 34px; }
  #fs-tools.fs-min .fs-tools-toggle svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-tools-toggle svg { transition: none; }
}

/* ==========================================================================
   Task 17 — picker-style selector boxes. The settings-modal dropdowns
   (order-flow cell colors, rows per candle, imbalance, bubble threshold,
   heatmap intensity) and the compact ƒx-menu pickers drop the native OS
   look for the same treatment as the 15.3 toggle switches: field surface,
   hairline border, custom chevron, accent focus ring. Vars only; appended
   byte-identical to both editions. (The JS-injected
   '#set-backdrop .set-row select{width:104px}' rule loses on specificity:
   the extra .modal-body class here wins the cascade.)
   ========================================================================== */
#set-backdrop .modal-body .set-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 132px;
  min-height: 30px;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--field, var(--panel));
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a93a5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 10px;
  color: var(--text);
  font: 600 12px/1.2 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#set-backdrop .modal-body .set-row select:hover { border-color: var(--border-strong); }
#set-backdrop .modal-body .set-row select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
#set-backdrop .modal-body .set-row select option,
#set-backdrop .modal-body .set-row select optgroup {
  background: var(--panel);
  color: var(--text);
  font: 500 12px/1.3 var(--font);
}
/* ƒx indicator rows + deep-flow heatmap picker — same picker look at the
   compact toolbar size (the inline JS widths stay in charge) */
select.ind-num {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 18px 0 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select.ind-num:hover { border-color: var(--border-strong); }
select.ind-num:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
select.ind-num option { background: var(--panel); color: var(--text); }
/* symbol-picker manual-add type selector — same chevron for coherence */
.sp-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a93a5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 9px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  #set-backdrop .modal-body .set-row select,
  select.ind-num { transition: none; }
}

/* ============ v50 FIX — category top bar: right cluster never squeezed =
   On the category pages (crypto / forex / commodities / stocks) the top
   bar carries more content than the terminal (category tabs + the extra
   1s pill), so above 900px flexbox could shrink .topbar-right below its
   content width: the bell + cloud buttons then wrapped into a vertical
   strip and the Live pill dropped off — the "icons stacked on the
   category pages" report. SCOPED to the category pages only, so the
   terminal top bar keeps its exact v47 layout at every width. The
   timeframe strip absorbs the pressure by scrolling horizontally — the
   same mechanism as the Task 52 phone fix, extended to all widths. */
@media (min-width: 901px) {
  body[data-page='category'] .topbar-right { flex: 0 0 auto; }
  body[data-page='category'] .alerts-wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }
  body[data-page='category'] .tf-group {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page='category'] .tf-group::-webkit-scrollbar { display: none; }
  body[data-page='category'] .tf-pill { flex: 0 0 auto; }
}

/* ======================= THEME SWITCH (added in the Cloudflare single-edition build) =======================
   One edition now carries both themes: style.css stays the untouched dark
   base, css/theme-light.css is the light layer scoped by
   html[data-theme="light"]. Everything below only styles the NEW toggle
   control and swaps the splash/brand art per theme — no existing rule is
   changed, so both themes keep their original look. */
#theme-btn { position: relative; }
#theme-btn .icon-sun { display: none; }
#theme-btn .icon-moon { display: block; }
html[data-theme="light"] #theme-btn .icon-sun { display: block; }
html[data-theme="light"] #theme-btn .icon-moon { display: none; }
.splash-logo--light { display: none; }
html[data-theme="light"] .splash-logo--dark { display: none; }
html[data-theme="light"] .splash-logo--light { display: block; }

/* heatmap page toggle (heatmap/index.html has its own header, not #topbar) */
.hm-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--chip); color: var(--text);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.hm-theme-btn:hover { background: var(--accent-soft); }
.hm-theme-btn .icon-sun { display: none; }
html[data-theme="light"] .hm-theme-btn .icon-sun { display: inline; }
html[data-theme="light"] .hm-theme-btn .icon-moon { display: none; }