.modal-hint.warn {
  color: var(--down);
}

.tool-btn {
  position: relative;
}
.tool-caret {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0.5;
}
.tool-btn:hover .tool-caret {
  opacity: 1;
}
.ctx-head {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 12px 4px;
}
.ctx-item.tool-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ctx-item.tool-item .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.85;
}
.ctx-item.tool-item > span:nth-of-type(1) {
  flex: 1;
}
.ctx-key {
  color: var(--muted);
  font-size: 11px;
}
.ctx-fav {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--border);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.ctx-fav:hover {
  color: var(--muted);
}
.ctx-fav.on {
  color: #f0b90b;
}
.ctx-item.checked {
  color: var(--text-strong);
}

/* ------------------------------------------------------ dock sub-tabs + news */

.dock-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.dock-tabs button {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 8px 4px;
  cursor: pointer;
}
.dock-tabs button:hover {
  color: var(--text);
}
.dock-tabs button.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}
.dock-sub {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.dock-sub[hidden] {
  display: none;
}
.dock-sub .details {
  overflow-y: auto;
  padding: 10px 12px;
}
.dock-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dock-news {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.dnews {
  display: block;
  padding: 10px 12px;
  border-bottom: 1px solid var(--grid);
  text-decoration: none;
  color: inherit;
}
.dnews:hover {
  background: var(--hover);
}
.dnews-title {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-strong);
}
.dnews-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}
.dnews-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.dnews-tags span {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--text);
  cursor: pointer;
}
.dnews-tags span:hover {
  background: var(--accent);
  color: #fff;
}

/* ---------------------------------------------------- heatmap legend filter */

.hm-legend {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 14px 9px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
/* Each band is a labelled column, so the scale reads -3...0...+3 across the
   bottom the way TradingView's does, with the distribution kept inside. */
.hm-band-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hm-band-tick {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.hm-band {
  width: 55px;
  height: 8px;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease;
}
.hm-band-cell:first-child .hm-band {
  border-radius: 2px 0 0 2px;
}
.hm-band-cell:last-of-type .hm-band {
  border-radius: 0 2px 2px 0;
}
.hm-band:hover:not(:disabled) {
  transform: translateY(-2px);
}
/* With no room inside an 8px bar, a picked band shows as a lift plus a rule
   under it rather than a border around it. */
.hm-band.on {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 0 var(--text-strong);
}
.hm-band.empty,
.hm-band:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Once a band is picked, the rest recede so the selection reads at a glance. */
.hm-legend.filtered .hm-band:not(.on) {
  opacity: 0.42;
}
.hm-legend.filtered .hm-band.empty {
  opacity: 0.2;
}
.hm-band-clear {
  margin-left: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
}
.hm-band-clear:hover {
  background: var(--hover);
  color: var(--text-strong);
}

/* ---------------------------------------------------------------- screener */

.scr-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  min-height: 20px;
}
.scr-empty-filters {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.scr-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 6px 4px 9px;
  font-size: 12px;
}
.scr-filter-name {
  color: var(--muted);
}
.scr-filter input[type='number'] {
  width: 84px;
}
.scr-filter select[multiple] {
  min-width: 150px;
}
.scr-unit {
  color: var(--muted);
}
.scr-filter-x {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.scr-filter-x:hover {
  color: var(--down);
}

.scr-table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.scr-head,
.scr-row {
  display: grid;
  gap: 8px;
  padding: 0 14px;
  align-items: center;
}
.scr-head {
  height: 30px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.scr-th {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scr-th.left,
.scr-row .left {
  text-align: left;
}
.scr-th.sortable {
  cursor: pointer;
}
.scr-th.sortable:hover {
  color: var(--text-strong);
}
.scr-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.scr-row {
  height: 30px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}
.scr-row > span {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scr-row:hover {
  background: var(--hover);
}
.scr-sym {
  font-weight: 600;
  color: var(--text-strong);
}
.scr-error {
  padding: 26px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 620px;
}
.scr-error b {
  display: block;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.dd-head {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 12px 3px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* --------------------------------------------------------- chart settings */

.chart-settings-modal {
  width: min(680px, 94vw);
}
.cs-wrap {
  display: flex;
  min-height: 0;
  max-height: 60vh;
}
.cs-tabs {
  display: flex;
  flex-direction: column;
  flex: 0 0 148px;
  border-right: 1px solid var(--border);
  padding: 8px 0;
  gap: 1px;
  overflow-y: auto;
}
.cs-tabs button {
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.cs-tabs button:hover {
  background: var(--hover);
}
.cs-tabs button.active {
  background: var(--hover);
  border-left-color: var(--accent);
  color: var(--text-strong);
}
.cs-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 14px;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  min-height: 32px;
}
.cs-row > span:first-child {
  flex: 1;
}
.cs-row.off {
  opacity: 0.45;
  pointer-events: none;
}
.cs-note {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.cs-sep {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cs-sep:first-child {
  border-top: 0;
  margin-top: 6px;
  padding-top: 0;
}
.cs-row input[type='color'] {
  width: 40px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.cs-row input[type='number'] {
  width: 78px;
}
.cs-row select {
  min-width: 120px;
}

/* ==========================================================================
   LitView — TradingView-style terminal theme
   ========================================================================== */

:root {
  /* The heatmap's hover blue, sampled from TradingView's own. The same value
     in both themes, as theirs is. */
  --hm-hover: #3179f5;
  /* TradingView's own stack; on Windows it resolves to Trebuchet MS. Change it
     here and the canvas follows — chart.js reads this variable. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}

:root[data-theme='dark'] {
  --bg: #131722;
  --panel: #1e222d;
  --panel-2: #191c27;
  --hover: #2a2e39;
  --active: #2a2e39;
  --border: #2a2e39;
  --border-soft: #22262f;
  --text: #d1d4dc;
  --text-strong: #f0f3fa;
  --muted: #787b86;
  --accent: #2962ff;
  --accent-soft: rgba(41, 98, 255, 0.16);
  --up: #089981;
  --down: #f23645;
  --grid: #1f2431;
  --crosshair: #9c9c9c;
  --axis-label-bg: #3d3d3d;
  /* Axis text is its own colour, brighter than --muted: the scales are read
     constantly and TradingView keeps them well clear of the chrome grey. */
  --axis-text: #b8b8b8;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --scroll: #363a45;
  /* The heatmap sits on black, not on the app background: TradingView's does,
     and the gap between tiles reads as a seam rather than a panel edge. */
  --hm-gap: #000000;
  color-scheme: dark;
}

:root[data-theme='light'] {
  --hm-gap: #ffffff;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f8f9fd;
  --hover: #f0f3fa;
  --active: #e8ebf2;
  --border: #e0e3eb;
  --border-soft: #eceff5;
  --text: #131722;
  --text-strong: #0b0e15;
  --muted: #787b86;
  --accent: #2962ff;
  --accent-soft: rgba(41, 98, 255, 0.1);
  --up: #089981;
  --down: #f23645;
  --grid: #eef1f7;
  --crosshair: #9c9c9c;
  --axis-label-bg: #0f0f0f;
  --axis-text: #5d606b;
  --shadow: 0 8px 28px rgba(19, 23, 34, 0.14);
  --scroll: #c9cdd8;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* The UA's `[hidden] { display: none }` is a single attribute selector, so any
   author rule that sets `display` on a class (.modal, .chart-error, .replaybar)
   silently beats it and the element stays on screen. Everything in this app
   toggles visibility with the `hidden` attribute, so make it authoritative. */
[hidden] {
  display: none !important;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  display: flex;
  flex-direction: column;
}

.ico {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
  display: block;
}
.ico.caret {
  width: 14px;
  height: 14px;
  opacity: 0.55;
  margin-left: -3px;
}

kbd {
  font: 11px/1 ui-monospace, Menlo, Consolas, monospace;
  background: var(--hover);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 5px;
  color: var(--muted);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ───────────────────────────────────────────────────────────── top bar */

.topbar {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}

.logo {
  background: none;
  border: 0;
  padding: 4px 6px 4px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.tb-btn {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.tb-btn:hover {
  background: var(--hover);
}
.tb-btn.icon-only {
  padding: 0 7px;
}
.tb-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.tb-label {
  font-size: 13px;
}

.symbol-btn {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: var(--text-strong);
}

.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 5px;
  flex: none;
}
.tb-spacer {
  flex: 1;
}

.tf-group {
  display: flex;
  gap: 1px;
}
.tf-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font: 500 13px/1 inherit;
  cursor: pointer;
}
.tf-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.tf-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.market-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--hover);
  color: var(--muted);
  margin-right: 4px;
  letter-spacing: 0.3px;
}
.market-badge.open {
  background: rgba(8, 153, 129, 0.16);
  color: var(--up);
}

/* ───────────────────────────────────────────────────── view navigation */

.viewtabs {
  display: flex;
  gap: 1px;
  margin-left: 2px;
}
.view-tab {
  height: 30px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font: 600 13px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
}
.view-tab:hover {
  background: var(--hover);
  color: var(--text);
}
.view-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.view-tab .ico {
  width: 16px;
  height: 16px;
}

.chart-only {
  display: contents;
}
body:not(.view-chart) .chart-only {
  display: none;
}

/* ------------------------------------------------------------ levels bar */

.levelsbar {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 39;
}
body:not(.view-chart) .levelsbar {
  display: none;
}
.levelsbar .lb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 6px;
}
.lvl-btn {
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font: 500 12px/1 inherit;
  cursor: pointer;
}
.lvl-btn:hover {
  background: var(--hover);
  color: var(--text);
}
/* The swatch is the line's own colour, so a lit button is findable on the chart. */
.lvl-btn .swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--lvl);
  opacity: 0.45;
}
.lvl-btn.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.lvl-btn.active .swatch {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.lvl-btn:disabled,
.lvl-btn.unavail {
  opacity: 0.38;
  cursor: not-allowed;
}
.lvl-btn:disabled:hover,
.lvl-btn.unavail:hover {
  background: transparent;
  color: var(--muted);
}

/* Each non-chart view fills the same space the chart workspace occupies. */
.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.view[hidden] {
  display: none;
}
.view-bar {
  flex: none;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.view-bar select,
.view-bar input[type='text'] {
  height: 28px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.view-bar input[type='text'] {
  min-width: 220px;
}
.view-bar select:focus,
.view-bar input:focus {
  border-color: var(--accent);
}
.tgl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.view-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: auto;
}
.view-foot {
  flex: none;
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 11px;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────  heatmap */

.hm-canvas {
  position: absolute;
  inset: 0;
  background: var(--hm-gap);
}
.hm-sector {
  position: absolute;
  overflow: hidden;
}
/* Hovering anywhere inside a sector lifts the whole block: the header fills and
   a border wraps it. Anywhere, not just the header — that is how theirs reads,
   and it is what makes a sector legible as one thing while you scan tiles. */
.hm-sector:hover {
  outline: 3px solid var(--hm-hover);
  outline-offset: -3px;
  z-index: 2;
}
.hm-sector:hover .hm-sector-label {
  background: var(--hm-hover);
  color: #fff;
}
.hm-sector-label {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
/* The base label is click-through so it never steals a tile's click. A
   category that can be drilled into has to opt back in. */
.hm-sector-label.clickable {
  pointer-events: auto;
  cursor: pointer;
  border-radius: 3px;
}
.hm-sector-label.clickable:hover {
  color: #fff;
  background: var(--hm-hover);
}

.hm-crumb {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.hm-crumb .crumb-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}
.hm-crumb .crumb-link:hover {
  text-decoration: underline;
}
.hm-crumb .crumb-sep {
  color: var(--muted);
}
.hm-crumb .crumb-here {
  color: var(--text-strong);
  font-weight: 600;
}
.hm-crumb .crumb-count {
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.hm-tile {
  position: absolute;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  /* 2px surface gap between adjacent fills */
  outline: 2px solid var(--hm-gap);
  outline-offset: -1px;
}
.hm-tile:hover {
  outline-color: var(--hm-hover);
  z-index: 3;
}
.hm-sym {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.2px;
  /* Company names run long where tickers never do; clip rather than let one
     push its own tile wider than the treemap allotted it. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-chg {
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}
.hm-nocap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0 3px,
    transparent 3px 7px
  );
}

.hm-tip {
  position: fixed;
  z-index: 140;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 9px 11px;
  font-size: 12px;
  min-width: 180px;
}
.hm-tip[hidden] {
  display: none;
}
.hm-tip b {
  color: var(--text-strong);
  font-size: 13px;
}
.hm-tip .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 3px;
  color: var(--muted);
}
.hm-tip .row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hm-scale {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.hm-scale i {
  width: 15px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.hm-table-wrap {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 10px 12px;
}
.hm-table-wrap[hidden] {
  display: none;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.data th,
table.data td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
table.data th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  z-index: 1;
}
table.data th:hover {
  color: var(--text);
}
table.data td.num,
table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.data tbody tr:hover {
  background: var(--hover);
  cursor: pointer;
}

/* ──────────────────────────────────────────────────── calendar & news */

.cal-list,
.news-list {
  padding: 0 0 20px;
  overflow-y: auto;
}

/* News Flow: a scrolling column of rows beside a reading pane. */
.news-flow {
  display: flex;
  min-height: 0;
}
.news-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.news-head,
.news-row {
  display: grid;
  grid-template-columns: 64px 110px 1fr 132px;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
}
.news-head {
  flex: none;
  height: 30px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.news-row {
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.news-row:hover {
  background: var(--hover);
}
.news-row.active {
  background: var(--hover);
  box-shadow: inset 2px 0 0 var(--accent);
}
.news-time {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.news-inst {
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.news-headline {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.35;
}
.news-prov {
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-read {
  flex: none;
  width: 340px;
  border-left: 1px solid var(--border);
  padding: 14px;
  overflow-y: auto;
}
.news-read .read-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.news-read .read-prov {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.news-read .read-thumb {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--hover);
}
.news-read .read-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-strong);
}
.news-read .read-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.news-read .read-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
.news-read .read-ticks .news-tick {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.news-read .read-open {
  display: inline-block;
  text-decoration: none;
}
.news-read .read-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.news-tick.muted {
  background: none;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 900px) {
  .news-read {
    display: none;
  }
  .news-head,
  .news-row {
    grid-template-columns: 54px 84px 1fr;
  }
  .news-prov {
    display: none;
  }
}
/* Economic calendar ------------------------------------------------ */

.cal-tabs {
  display: flex;
  gap: 2px;
}
.cal-tab {
  background: none;
  border: 0;
  padding: 5px 11px;
  border-radius: 5px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
.cal-tab:hover {
  background: var(--hover);
  color: var(--text);
}
.cal-tab.active {
  background: var(--hover);
  color: var(--text-strong);
  font-weight: 600;
}
.cal-range {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 150px;
  text-align: center;
}

.cal-week {
  flex: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.cal-daycell {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
.cal-daycell:hover {
  background: var(--hover);
}
.cal-daycell.today {
  border-color: var(--accent);
  color: var(--text-strong);
}
.cal-daycell .dc-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cal-daycell .dc-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.cal-daycell .dc-count {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.econ-head,
.econ-row {
  display: grid;
  grid-template-columns: 58px 68px 1fr 92px 92px 92px;
  gap: 10px;
  align-items: center;
  padding: 0 4px;
}
.econ-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  height: 26px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.econ-row {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.econ-row:hover {
  background: var(--hover);
}
.econ-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.econ-country {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 11.5px;
}
.econ-title {
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.econ-period {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.econ-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.econ-actual {
  font-weight: 600;
  color: var(--text-strong);
}
.econ-actual.up {
  color: var(--up);
}
.econ-actual.down {
  color: var(--down);
}
/* Importance dot — three steps, distinguishable without relying on hue alone
   (size differs too, and the title attribute names the level). */
.imp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--border);
}
.imp-medium {
  background: var(--muted);
  width: 8px;
  height: 8px;
}
.imp-high {
  background: var(--accent);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

@media (max-width: 900px) {
  .econ-head,
  .econ-row {
    grid-template-columns: 48px 52px 1fr 72px;
  }
  .econ-head span:nth-child(5),
  .econ-head span:nth-child(6),
  .econ-row span:nth-child(5),
  .econ-row span:nth-child(6) {
    display: none;
  }
}

.cal-day {
  margin-bottom: 6px;
}
.cal-day-head {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 9px 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.cal-day-head.today {
  color: var(--accent);
}
.cal-row {
  display: grid;
  grid-template-columns: 74px 1fr 110px 96px;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.cal-row:hover {
  background: var(--hover);
}
.cal-sym {
  font-weight: 700;
  color: var(--text-strong);
}
.cal-name {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-meta {
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--muted);
}
.badge.earnings {
  background: var(--accent-soft);
  color: var(--accent);
}
.badge.dividend {
  background: rgba(8, 153, 129, 0.16);
  color: var(--up);
}
.badge.est {
  background: transparent;
  border: 1px solid var(--border);
}
.news-tick {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--text);
}
.view-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}

/* ───────────────────────────────────────────────────────────── dropdown */

.dropdown {
  position: relative;
}
.dd-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 210px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 5px;
  z-index: 60;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}
.dd-menu.wide {
  min-width: 288px;
}
.dropdown.open .dd-menu {
  display: block;
}
.dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 9px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.dd-item:hover {
  background: var(--hover);
}
.dd-item.checked {
  color: var(--accent);
}
.dd-item .tick {
  margin-left: auto;
  opacity: 0;
  width: 15px;
  height: 15px;
}
.dd-item.checked .tick {
  opacity: 1;
}
.dd-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 9px 5px;
}

/* ───────────────────────────────────────────────────────── workspace */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

.drawrail {
  width: 42px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  gap: 2px;
  z-index: 30;
}
.tool-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
}
.tool-btn:hover {
  background: var(--hover);
}
.tool-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.tool-btn .ico {
  width: 20px;
  height: 20px;
}
.rail-sep {
  width: 22px;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.chartwrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chart-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
}
.chart-grid.layout-1 {
  grid-template: 1fr / 1fr;
}
.chart-grid.layout-2h {
  grid-template: 1fr / 1fr 1fr;
}
.chart-grid.layout-2v {
  grid-template: 1fr 1fr / 1fr;
}
.chart-grid.layout-3 {
  grid-template: 1fr 1fr / 1fr 1fr;
}
/* first panel runs the full height of the left column */
.chart-grid.layout-3 .chart-panel:first-child {
  grid-row: 1 / span 2;
}
.chart-grid.layout-4 {
  grid-template: 1fr 1fr / 1fr 1fr;
}

.chart-panel {
  position: relative;
  background: var(--bg);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.chart-panel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* focus ring only matters when there is more than one panel */
.chart-grid:not(.layout-1) .chart-panel.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0.6;
  pointer-events: none;
  z-index: 9;
}

.stylebar {
  position: fixed;
}

.wl-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.wl-picker select {
  flex: 1;
  height: 26px;
  padding: 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: 600 12px/1 inherit;
  outline: none;
  cursor: pointer;
}

.legend-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.legend {
  position: absolute;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  font-size: 12px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 19px;
  padding: 0 5px;
  border-radius: 4px;
  pointer-events: auto;
  white-space: nowrap;
}
.legend-row:hover {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.legend-title {
  font-weight: 600;
  color: var(--text-strong);
}
.legend-sub {
  color: var(--muted);
}
.legend-vals {
  display: flex;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}
.legend-vals b {
  font-weight: 600;
}
.legend-actions {
  display: none;
  gap: 1px;
  margin-left: 3px;
}
.legend-row:hover .legend-actions {
  display: flex;
}
.legend-actions button {
  width: 20px;
  height: 18px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
}
.legend-actions button:hover {
  background: var(--hover);
  color: var(--text);
}
.legend-actions .ico {
  width: 14px;
  height: 14px;
}
.legend-row.hidden-series {
  opacity: 0.45;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.stylebar {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
}
.stylebar[hidden] {
  display: none;
}
.sb-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.sb-swatch:hover {
  background: var(--hover);
}
.sb-swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sb-swatch span {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.stylebar select {
  height: 26px;
  padding: 0 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.sb-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
}
.sb-btn:hover {
  background: var(--hover);
}
.sb-btn.on {
  background: var(--accent-soft);
  color: var(--accent);
}
.sb-btn.danger:hover {
  background: rgba(242, 54, 69, 0.16);
  color: var(--down);
}
.sb-btn .ico {
  width: 16px;
  height: 16px;
}

.chart-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  z-index: 5;
}
.chart-loading.on {
  display: grid;
}
.spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.chart-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  padding: 24px;
  z-index: 6;
  background: var(--bg);
}
.chart-error b {
  color: var(--text-strong);
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

/* ───────────────────────────────────────────────────────────── replay */

.replaybar {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.replay-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 4px;
}
.replaybar .icon-btn {
  width: 28px;
  height: 28px;
  color: var(--text);
}
.replaybar .icon-btn.play {
  background: var(--accent);
  color: #fff;
}
.replaybar .icon-btn.play:hover {
  filter: brightness(1.12);
  background: var(--accent);
}
.replaybar select {
  height: 26px;
  padding: 0 5px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  outline: none;
}
.rp-progress {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.btn.small {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statusbar {
  height: 27px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  /* The controls are the point of this bar; nothing may spill out of it. */
  overflow: hidden;
}
/* Below this the pane cannot hold the controls *and* the status text, and the
   controls win — the text is repeated in the symbol header and the tooltips. */
@media (max-width: 1400px) {
  #status-source,
  #status-bars {
    display: none;
  }
}
/* Controls hold their size... */
.statusbar .chip.btn,
.statusbar .range-group {
  flex: none;
}
/* ...and the status text gives way, since it is the only thing here that is
   merely informative. On a narrow window it ellipses down to nothing rather
   than pushing the buttons off the edge. */
#status-source,
#status-bars {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The date field backing "Go to". Zero-sized rather than display:none, because
   showPicker() refuses to open on a field that is not rendered. */
.chip.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.chip.btn:disabled:hover {
  background: none;
}

/* A chip that is currently on, for the bottom-bar toggles. */
.chip.btn.on {
  background: var(--accent-soft);
  color: var(--accent);
}
.chip.clock.btn {
  cursor: pointer;
  /* Last thing in the bar and the one with the least to say per pixel, so it
     runs tighter than the rest. */
  padding-left: 5px;
  padding-right: 3px;
}

.goto-date {
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.goto-date.shown {
  width: auto;
  opacity: 1;
  pointer-events: auto;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  padding: 1px 4px;
}

/* Quick ranges, where TradingView keeps them: bottom-left, ahead of the status
   text, sized to the 27px bar rather than to the toolbar above. */
.range-group {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: 4px;
}
.range-btn {
  min-width: 24px;
  height: 21px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font: 500 11px/1 inherit;
  cursor: pointer;
}
.range-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.range-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.chip {
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.chip.btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.chip.btn:hover {
  background: var(--hover);
  color: var(--text);
}
.chip.clock {
  font-variant-numeric: tabular-nums;
}
.chip.live {
  color: var(--up);
}
.chip.degraded {
  color: var(--down);
  background: rgba(242, 54, 69, 0.12);
}
.side-head {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.detail-head {
  border-top: 1px solid var(--border);
}
.icon-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.alerts {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
}
.alert-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  border-left: 2px solid var(--accent);
  background: var(--panel-2);
  margin-bottom: 5px;
}
.alert-row:hover {
  background: var(--hover);
}
.alert-row.triggered {
  border-left-color: var(--down);
  opacity: 0.72;
}
/* Every cell is placed explicitly: an item with a definite row but an auto
   column gets placed before the fully-auto items, which otherwise pushes the
   symbol out of column 1. */
.alert-sym {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  color: var(--text-strong);
  font-size: 12.5px;
}
.alert-cond {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.alert-note {
  grid-column: 1;
  grid-row: 3;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.alert-del {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.alerts-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.modal-hint {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
.modal-hint code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--hover);
  padding: 1px 4px;
  border-radius: 3px;
}
.field input[type='text'] {
  width: 160px;
  height: 30px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
  outline: none;
}
.field input[type='text']:focus {
  border-color: var(--accent);
}

.watch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 62px;
  gap: 4px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}
.watch-head .num {
  text-align: right;
}

.watchlist {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 90px;
}
/* minmax(0, 1fr): a plain 1fr column cannot shrink below its content, so a
   long company name would push Last and Chg% out of the panel. */
.wl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 62px;
  gap: 4px;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-variant-numeric: tabular-nums;
}
.wl-row:hover {
  background: var(--hover);
}
.wl-row.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.wl-sym {
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.wl-name {
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-last {
  text-align: right;
  font-size: 12.5px;
}
.wl-chg {
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 3px;
}
.wl-chg.up {
  color: var(--up);
  background: rgba(8, 153, 129, 0.12);
}
.wl-chg.down {
  color: var(--down);
  background: rgba(242, 54, 69, 0.12);
}

.details {
  flex: 0 0 auto;
  max-height: 42%;
  overflow-y: auto;
  padding: 8px 11px 12px;
}
.det-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.det-row span:first-child {
  color: var(--muted);
}
.det-row span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.det-price {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  margin-bottom: 2px;
}
.det-chg {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}

/* ───────────────────────────────────────────────────────────── modals */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
}
.modal {
  position: fixed;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-modal {
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 92vw);
  max-height: 66vh;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
#search-input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-strong);
  font: 500 16px/1.2 inherit;
}
.search-results {
  overflow-y: auto;
  padding: 5px;
  min-height: 60px;
}
.sr-row {
  display: grid;
  grid-template-columns: 92px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.sr-row.sel,
.sr-row:hover {
  background: var(--hover);
}
.sr-sym {
  font-weight: 700;
  color: var(--text-strong);
}
.sr-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-meta {
  font-size: 11px;
  color: var(--muted);
}
.sr-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--hover);
  color: var(--muted);
}
.sr-row.sel .sr-type {
  background: var(--panel-2);
}
.search-foot {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.search-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
}

.settings-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 92vw);
}

/* The editor wants width for long ta.* lines and height to see a whole
   script, so it is sized off the viewport rather than a fixed column. */
.pine-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
}
.pine-source {
  width: 100%;
  height: min(52vh, 460px);
  margin-top: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: vertical;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}
.pine-source:focus {
  outline: none;
  border-color: var(--accent);
}
.pine-status {
  margin-top: 8px;
  font-size: 11.5px;
  min-height: 16px;
  font-family: ui-monospace, Consolas, monospace;
}
.pine-status.ok {
  color: var(--up);
}
.pine-status.bad {
  color: var(--down);
}
/* The edit affordance stays out of the way until the row is hovered. */
.dd-edit {
  margin-left: auto;
  margin-right: 6px;
  padding: 1px 7px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  opacity: 0;
}
.dd-item:hover .dd-edit {
  opacity: 1;
}
.dd-edit:hover {
  color: var(--text);
  border-color: var(--muted);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
}
.modal-body {
  padding: 14px 16px;
  max-height: 56vh;
  overflow-y: auto;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}
.field label {
  color: var(--text);
  font-size: 13px;
}
.field input[type='number'],
.field select {
  width: 116px;
  height: 30px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
  outline: none;
}
.field input[type='number']:focus,
.field select:focus {
  border-color: var(--accent);
}
.field input[type='color'] {
  width: 40px;
  height: 26px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.btn {
  height: 32px;
  padding: 0 15px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: 600 13px/1 inherit;
  cursor: pointer;
}
.btn:hover {
  background: var(--hover);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  filter: brightness(1.1);
}
.btn.ghost {
  background: transparent;
}

.ctxmenu {
  position: fixed;
  z-index: 120;
  min-width: 184px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 5px;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.ctx-item:hover {
  background: var(--hover);
}
.ctx-item.danger:hover {
  background: rgba(242, 54, 69, 0.16);
  color: var(--down);
}
.ctx-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

.toast-host {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 13px;
  animation: rise 0.18s ease-out;
}
.toast.err {
  border-color: var(--down);
  color: var(--down);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .tb-label {
    display: none;
  }
}

/* ═════════════════════════════════════════════════════ right dock + rail */

.rightdock {
  display: flex;
  flex: none;
  min-height: 0;
  position: relative;
}

/* The rail is always visible; the panel beside it collapses to zero width. */
.siderail {
  width: 40px;
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  gap: 2px;
  z-index: 12;
}
.rail-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}
.rail-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.rail-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.rail-btn .ico {
  width: 19px;
  height: 19px;
}
.rail-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--down);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.dockpanels {
  width: 268px;
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.rightdock.collapsed .dockpanels,
.rightdock.collapsed .dock-resize {
  display: none;
}

.dock-resize {
  width: 5px;
  flex: none;
  cursor: col-resize;
  background: transparent;
  margin-right: -2px;
  z-index: 13;
}
.dock-resize:hover {
  background: var(--accent);
  opacity: 0.35;
}

.dock-head {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 11px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.dock-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dock-panel[hidden] {
  display: none;
}
.dock-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 14px;
}

/* ── data window ── */
.dw-group {
  margin-bottom: 12px;
}
.dw-group h4 {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.dw-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.dw-row span:first-child {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-row span:last-child {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dw-stamp {
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

/* ── object tree ── */
.ot-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
  border-radius: 4px;
  font-size: 12.5px;
  cursor: pointer;
}
.ot-row:hover {
  background: var(--hover);
}
.ot-row.sel {
  background: var(--accent-soft);
}
.ot-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.ot-row.off .ot-name {
  opacity: 0.45;
}
.ot-btn {
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
}
.ot-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}
.ot-btn .ico {
  width: 14px;
  height: 14px;
}

/* ── notes ── */
.notes-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px 10px;
}
.notes-head {
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 6px;
}
#notes-text {
  flex: 1;
  resize: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: 12.5px/1.6 inherit;
  padding: 9px 10px;
  outline: none;
}
#notes-text:focus {
  border-color: var(--accent);
}

.dock-empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

/* Company logo on a heatmap tile. Sits on its own white chip so a brand mark
   stays legible on any tile colour and in either ramp, and is click-through so
   it never steals the tile's click. */
.hm-logo {
  display: block;
  margin-bottom: 3px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  object-fit: contain;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* ── narrow-window hardening ─────────────────────────────────────────────
   A sector header is an 18px strip. At a larger browser zoom the multi-word
   names ("Consumer Non-Durables", "Producer Manufacturing") were wrapping to a
   second line and covering the tiles underneath. Pin it to one line: the name
   truncates, the percentage never does — it is the number being read. */
.hm-sector-label {
  white-space: nowrap;
  overflow: hidden;
}
.hm-sector-label > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hm-sector-label > span:last-child {
  flex: none;
  margin-left: auto;
}

/* Same story in the view toolbars: the checkbox captions were breaking across
   two lines and pushing the bar taller than its row. */
.tgl,
.view-bar label,
.view-bar option {
  white-space: nowrap;
}
/* The controls need ~1470px and rarely get it. Let the BAR wrap onto a second
   row — every control stays reachable and nothing is cut off — while the labels
   inside it stay on one line each (the rule above). Scrolling was worse: it hid
   the last control behind a scrollbar that also ate vertical space. */
.view-bar {
  flex-wrap: wrap;
  height: auto;
  min-height: 42px;
  padding: 5px 12px;
  row-gap: 6px;
}
.view-bar > * {
  flex: none;
}
.view-bar .tb-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}
/* The colour key is the least essential thing in the bar; drop it first when
   space is tight rather than pushing the controls onto a third row. */
@media (max-width: 820px) {
  .hm-scale {
    display: none;
  }
}

/* ----------------------------------------------------------- strategy report */

.strategy-panel {
  flex: 0 0 auto;
  max-height: 38vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.strategy-panel[hidden] {
  display: none;
}
.sp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.sp-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.sp-sub {
  font-size: 11px;
  color: var(--muted);
}
.sp-field {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.sp-field input {
  width: 74px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  padding: 2px 5px;
}
/* The headline numbers, in a row that wraps rather than scrolls. */
.sp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  padding: 9px 12px;
  flex: none;
}
.sp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-stat-label {
  font-size: 10.5px;
  color: var(--muted);
}
.sp-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.sp-stat-value.up {
  color: var(--up);
}
.sp-stat-value.down {
  color: var(--down);
}
.sp-stat-sub {
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sp-trades {
  overflow: auto;
  min-height: 0;
  flex: 1;
  border-top: 1px solid var(--grid);
}
.sp-trades table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sp-trades th {
  position: sticky;
  top: 0;
  background: var(--panel);
  text-align: right;
  font-weight: 500;
  color: var(--muted);
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sp-trades th:first-child,
.sp-trades td:first-child {
  text-align: left;
}
.sp-trades td {
  text-align: right;
  padding: 4px 10px;
  border-bottom: 1px solid var(--grid);
  white-space: nowrap;
}
.sp-trades tr:hover td {
  background: var(--hover);
}
.sp-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ------------------------------------------------------------ calendar bits */

.cal-search {
  width: 170px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  padding: 3px 7px;
}
.cal-search:focus {
  outline: none;
  border-color: var(--accent);
}
/* The range doubles as the week picker, the way TradingView's date label does. */
.cal-rangebtn {
  padding: 3px 8px;
}
.cal-rangebtn:hover .cal-range {
  color: var(--text-strong);
}
/* The next release still to come, and how long until it. */
.econ-row.next {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.econ-countdown {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A mark beside each ticker in the screener, as TradingView's table has. */
.scr-logo {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
  margin-right: 6px;
  vertical-align: -3px;
  object-fit: contain;
  flex: none;
}

/* ------------------------------------------------- heatmap display settings */

.dd-menu .dd-sub {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 3px;
}
.dd-menu .dd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.dd-menu .dd-check:hover {
  background: var(--hover);
}
.dd-menu .dd-check input {
  margin: 0;
}

/* One table, several views of it — TradingView's screener tabs. */
.scr-sets {
  display: flex;
  gap: 2px;
  padding: 5px 12px 0;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.scr-set {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px 6px;
  cursor: pointer;
}
.scr-set:hover {
  color: var(--text);
}
.scr-set.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}
.scr-set-note {
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  color: var(--down);
}

/* ==========================================================================
   GEX view — dealer exposure board (strikes × expirations)
   ========================================================================== */
.gx-seg {
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.gx-seg button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.gx-seg button.active {
  background: var(--active);
  color: var(--text-strong);
}
.view-bar input.gx-symbol {
  min-width: 0;
  width: 90px;
  text-transform: uppercase;
  font-weight: 600;
}
.gx-quick {
  display: flex;
  gap: 4px;
}
.gx-chip {
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-chip:hover {
  background: var(--hover);
}
.gx-chip.active {
  border-color: var(--accent);
  color: var(--text-strong);
  background: var(--accent-soft);
}
.gx-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up);
  opacity: 0.45;
}
.gx-live.busy {
  background: var(--muted);
}
.gx-live.tick {
  animation: gx-pulse 0.9s ease-out;
}
@keyframes gx-pulse {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(8, 153, 129, 0.7);
  }
  100% {
    opacity: 0.45;
    box-shadow: 0 0 0 7px rgba(8, 153, 129, 0);
  }
}

.gx-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}
.gx-boards {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 10px;
}
.gx-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.gx-phead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.gx-phead b {
  color: var(--text-strong);
  font-size: 13px;
  cursor: default;
}
.gx-spotpx {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.gx-king {
  color: #f7c948;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx-net {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.gx-net.up {
  color: var(--up);
}
.gx-net.down {
  color: var(--down);
}
.gx-state,
.gx-err {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--active);
  color: var(--text);
}
.gx-err {
  background: rgba(242, 54, 69, 0.18);
  color: var(--down);
}
.gx-empty {
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}
.gx-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.gx-grid {
  --rail: 76px;
  --pad: 18px; /* a cell's side padding and border */
  display: grid;
  /* Never narrower than the longest value on the board (--fit, set per board
     in ch of this monospace font), so values never spill across columns. */
  grid-template-columns: var(--rail)
    repeat(var(--cols), minmax(max(var(--col-min, 92px), calc(var(--fit, 0ch) + var(--pad))), var(--col-max, 150px)));
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.gx-row {
  display: contents;
}
.gx-cell {
  height: var(--row-h, 23px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  position: relative;
  white-space: nowrap;
}
.gx-head .gx-cell {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
  color: var(--text-strong);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.gx-hstrike,
.gx-strike {
  justify-content: flex-start;
}
.gx-strike {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  color: var(--text);
}
.gx-head .gx-hstrike {
  left: 0;
  z-index: 4;
}
.gx-strike.halo {
  box-shadow: inset 3px 0 0 #f7c948;
  color: var(--text-strong);
}
.gx-spot {
  background: #f0f3fa;
  color: #0b0e15;
  font-weight: 700;
  padding: 1px 6px 1px 5px;
  border-radius: 4px;
  position: relative;
}
.gx-spot::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: 0;
  border-left-color: #f0f3fa;
}
.gx-row.is-spot .gx-node {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.gx-node {
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  cursor: default;
  /* A value never spills into the next column (the grid sizes columns to fit). */
  overflow: hidden;
}
.gx-node:hover {
  outline: 1px solid #fff;
  outline-offset: -1px;
  z-index: 1;
}
.gx-node.is-king {
  font-weight: 700;
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.gx-tag {
  position: absolute;
  left: 4px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
.gx-node .gx-vel {
  position: absolute;
  left: 3px;
  top: 3px;
}
.gx-node .gx-tag + .gx-vel,
.gx-node .gx-vel + .gx-tag {
  left: 22px;
}
.gx-vel {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 14px;
}
.gx-vel.up {
  background: rgba(8, 153, 129, 0.9);
  color: #fff;
}
.gx-vel.down {
  background: rgba(242, 54, 69, 0.9);
  color: #fff;
}
.gx-boards.trinity .gx-grid {
  --rail: 68px;
  grid-template-columns: var(--rail) repeat(var(--cols), minmax(max(84px, calc(var(--fit, 0ch) + var(--pad))), 1fr));
}

.gx-movers {
  flex: none;
  width: 210px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  overflow: auto;
  font-size: 12px;
}
.gx-movers[hidden] {
  display: none;
}
.gx-movers h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-strong);
}
.gx-movers h5 {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
}
.gx-movers h5.up {
  color: var(--up);
}
.gx-movers h5.down {
  color: var(--down);
}
.gx-mv {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.gx-mv .n {
  color: var(--muted);
  width: 12px;
}
.gx-mv b {
  color: var(--text-strong);
}
.gx-mv .d {
  color: var(--muted);
}
.gx-mv .gx-vel {
  margin-left: auto;
}
.gx-note {
  margin: 4px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
#gx-foot {
  font-size: 11.5px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .gx-movers {
    display: none;
  }
  .gx-boards.trinity {
    flex-direction: column;
  }
}

/* GEX data source badge and the Schwab connect panel */
.gx-source {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-source.live {
  color: var(--up);
  border-color: rgba(8, 153, 129, 0.5);
}
.gx-source.warn {
  color: #f7c948;
  border-color: rgba(247, 201, 72, 0.5);
}
#view-gex {
  position: relative;
}
.gx-schwab {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 150;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}
.gx-schwab[hidden] {
  display: none;
}
.gx-schwab h4 {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 13.5px;
}
.gx-schwab ol {
  padding-left: 18px;
  margin: 0 0 10px;
}
.gx-schwab li {
  margin-bottom: 8px;
}
.gx-schwab code,
.gx-schwab pre {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 4px;
}
.gx-schwab pre {
  padding: 6px 8px;
  margin: 6px 0;
  white-space: pre-wrap;
}
.gx-schwab input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
}
.gx-schwab a.btn {
  text-decoration: none;
  display: inline-block;
}
.gx-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.gx-msg {
  margin: 8px 0 0;
  color: #f7c948;
}
.gx-x {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.gx-node.gx-none {
  background: var(--panel-2);
}
.gx-node.gx-none:hover {
  outline: none;
}
.levelsbar .lb-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* GEX node menu (right-click a cell) */
.gx-menu {
  position: fixed;
  z-index: 160;
  min-width: 260px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  font-size: 12.5px;
  color: var(--text);
}
.gx-menu[hidden] {
  display: none;
}
.gx-mhead {
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gx-mhead b {
  color: var(--text-strong);
}
.gx-mhead span {
  color: var(--muted);
  font-size: 11.5px;
}
.gx-mrow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 6px;
}
.gx-mrow label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.gx-mitem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-mitem:hover {
  background: var(--hover);
}
.gx-margin {
  margin-left: auto;
  color: var(--muted);
}
.gx-margin input {
  width: 58px;
  height: 22px;
  padding: 0 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-strong);
  font: inherit;
}
.gx-msep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* GEX side panel tabs, tracked nodes, hidden-strikes chip */
.gx-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.gx-tabs button {
  flex: 1;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-tabs button.active {
  color: var(--text-strong);
  background: var(--active);
}
.gx-tr {
  position: relative;
  padding: 6px 18px 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.gx-tr b {
  color: var(--text-strong);
}
.gx-tr .d {
  color: var(--muted);
  font-size: 11.5px;
}
.gx-tr .gx-x {
  top: 2px;
  right: 0;
  font-size: 15px;
}
.gx-hiddenchip {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.gx-hiddenchip:hover {
  color: var(--text-strong);
}

/* GEX replay bar */
.gx-replay {
  background: var(--panel-2);
}
.gx-replay[hidden] {
  display: none;
}
.gx-rp-slider {
  flex: 1 1 220px !important;
  min-width: 160px;
  accent-color: var(--accent);
}
.gx-rp-time {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  min-width: 70px;
}
.gx-rp-msg {
  color: var(--muted);
  font-size: 12px;
  white-space: normal !important;
}
.gx-rec {
  color: var(--down);
  font-size: 11.5px;
}
#gx-replay-btn.active {
  background: var(--accent-soft);
  color: var(--text-strong);
}

/* GEX velocity popover */
.gx-dd {
  position: relative;
}
.gx-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 150;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 12px;
  white-space: normal;
}
.gx-pop[hidden] {
  display: none;
}
.gx-pop h6 {
  margin: 10px 0 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gx-pop .tgl {
  margin-top: 8px;
}
.gx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gx-pill {
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.gx-pill.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-strong);
}
#gx-vel-btn.active {
  color: #f7c948;
}

/* GEX View Controls: zoom presets */
.gx-grid.zoom-tight {
  --row-h: 18px;
  --col-min: 74px;
  --col-max: 110px;
  font-size: 10.5px;
}
.gx-grid.zoom-tight {
  --pad: 12px;
}
.gx-grid.zoom-tight .gx-cell {
  padding: 0 5px;
}
.gx-grid.zoom-wide {
  --row-h: 29px;
  --col-min: 110px;
  --col-max: 190px;
  font-size: 13px;
}
/* Node %: low nodes */
.gx-node.gx-low-dim {
  opacity: 0.35;
}
.gx-node.gx-low-fade {
  filter: saturate(0.15) brightness(0.55);
  color: transparent !important;
}
.gx-node.gx-low-hide {
  background: var(--panel-2) !important;
}
/* Panels */
.gx-pop.right {
  left: auto;
  right: 0;
}
.gx-pophead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-strong);
}
.gx-slider {
  width: 100%;
  accent-color: var(--accent);
}
.gx-poprow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.gx-poprow input[type='number'],
.gx-poprow input[type='text'] {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-strong);
  font: inherit;
}
.gx-pill.struck {
  text-decoration: line-through;
  color: var(--muted);
}
.gx-pill.saved {
  display: inline-flex;
  padding: 0;
  overflow: hidden;
}
.gx-pill.saved button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
.gx-pill.saved button + button {
  padding: 2px 6px;
  border-left: 1px solid var(--border);
  color: var(--muted);
}
.gx-pop .tgl {
  white-space: normal;
  align-items: flex-start;
}

/* GEX tickers: star, picker, shortcut sheet */
.gx-star {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 0 2px;
}
.gx-star.on {
  color: #f7c948;
}
.gx-addfav {
  color: var(--muted);
}
.gx-picker,
.gx-help {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}
.gx-picker[hidden],
.gx-help[hidden] {
  display: none;
}
.gx-pickbox,
.gx-helpbox {
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px;
  font-size: 12.5px;
  color: var(--text);
}
.gx-pickbox input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
}
.gx-pickbox h6,
.gx-helpbox h6 {
  margin: 10px 0 4px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}
.gx-pickrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-pickrow.on,
.gx-pickrow:hover {
  background: var(--hover);
}
.gx-pickrow b {
  color: var(--text-strong);
  min-width: 64px;
}
.gx-pickrow span {
  flex: 1;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gx-helpbox h4 {
  margin: 0 0 6px;
  color: var(--text-strong);
}
.gx-helprow {
  display: flex;
  gap: 12px;
  padding: 3px 0;
}
.gx-helprow kbd {
  min-width: 150px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-strong);
}

/* Trinity panels: up to six, wrapping when they no longer fit side by side */
.gx-boards.trinity {
  flex-wrap: wrap;
  overflow: auto;
}
.gx-boards.trinity .gx-panel {
  min-width: 260px;
  flex: 1 1 260px;
  min-height: 320px;
  /* Each board scrolls inside its own frame, so its ticker bar and the row
     of expiry dates stay put while the strikes scroll (a frozen header). */
  max-height: 100%;
}
.gx-pctl {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}
.gx-pchip {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.gx-pchip:hover {
  color: var(--text-strong);
  border-color: var(--accent);
}
.gx-trinity-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gx-addpanel {
  width: 34px;
  height: 34px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--muted);
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}
.gx-addpanel:hover {
  color: var(--text-strong);
  border-color: var(--accent);
}

/* GEX Alerts page */
.gx-alertsbox {
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: 78vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text);
  position: relative;
}
.gx-ahead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text-strong);
}
.gx-ahead .gx-x {
  position: static;
  margin-left: auto;
}
.gx-atabs {
  display: flex;
  gap: 4px;
}
.gx-atabs button {
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.gx-atabs button.active {
  color: var(--text-strong);
  background: var(--active);
}
.gx-abody h6 {
  margin: 10px 0 4px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}
.gx-arow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.gx-arow b {
  min-width: 56px;
  color: var(--text-strong);
}
.gx-arow span {
  flex: 1;
}
.gx-arow em {
  font-style: normal;
  color: var(--muted);
  font-size: 11.5px;
}
.gx-arow.off {
  opacity: 0.55;
}
.gx-arow .gx-x {
  position: static;
}
.gx-arow2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.gx-ainput,
.gx-abody select {
  height: 28px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
}
.gx-ainput {
  width: 100%;
  box-sizing: border-box;
}
.gx-ainput.small {
  width: 90px;
}
.gx-ecards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gx-ecard {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gx-limits {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
}
.gx-limits.over {
  color: var(--down);
}
.gx-switch {
  position: relative;
  width: 30px;
  height: 16px;
  cursor: pointer;
}
.gx-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.gx-switch i {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--border);
  transition: background 0.15s;
}
.gx-switch i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.gx-switch input:checked + i {
  background: var(--up);
}
.gx-switch input:checked + i::after {
  transform: translateX(14px);
}

/* GEX beside the chart (Shift+H / Shift+T) */
.gx-side {
  flex: none;
  width: 330px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--panel);
  font-size: 11.5px;
}
.gx-side.trinity {
  width: 480px;
}
.gx-side[hidden] {
  display: none;
}
.gx-stitle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-strong);
  font-weight: 600;
  position: relative;
}
.gx-stitle .gx-x {
  position: static;
  margin-left: auto;
}
.gx-sbody {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  gap: 6px;
  padding: 6px;
}
.gx-spanel {
  flex: 1;
  min-width: 0;
}
.gx-shead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 2px 6px;
}
.gx-shead b {
  color: var(--text-strong);
}
.gx-stable {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.gx-stable th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 2px 4px;
  white-space: nowrap;
}
.gx-stable td {
  text-align: right;
  padding: 2px 5px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.gx-stable td.none {
  background: var(--panel-2);
}
.gx-stable td.king {
  outline: 2px solid #fff;
  outline-offset: -2px;
  font-weight: 700;
}
.gx-stable tr.spot th {
  color: var(--text-strong);
  background: var(--active);
}

/* Ask (Talon-style reader) */
.gx-ask {
  position: fixed;
  right: 12px;
  bottom: 40px;
  z-index: 170;
  width: 400px;
  max-width: calc(100vw - 24px);
  height: min(560px, 75vh);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--text);
}
.gx-ask[hidden] {
  display: none;
}
.gx-askhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-strong);
}
.gx-askhead .gx-pchip {
  margin-left: auto;
}
.gx-askhead .gx-x {
  position: static;
}
.gx-asklog {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}
.gx-askq {
  margin: 10px 0 4px auto;
  max-width: 85%;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 10px 10px 2px 10px;
  background: var(--accent-soft);
  color: var(--text-strong);
}
.gx-aska {
  padding: 8px 10px;
  border-radius: 10px 10px 10px 2px;
  background: var(--panel-2);
}
.gx-aska b {
  color: var(--text-strong);
}
.gx-aska p {
  margin: 3px 0;
  font-variant-numeric: tabular-nums;
}
.gx-asksug {
  padding: 6px 12px 0;
}
.gx-askform {
  display: flex;
  gap: 6px;
  padding: 8px 12px 12px;
}
.gx-askform input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-strong);
  font: inherit;
}
.gx-askform input:focus {
  border-color: var(--accent);
  outline: none;
}

/* GEX overlay settings */
.lvl-btn.lvl-caret {
  padding: 0 6px;
  margin-left: -6px;
}
.gx-ovpop {
  width: 300px;
}

/* Vol view (Tempest) */
.vol-num {
  width: 56px;
  height: 26px;
  padding: 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
}
.vol-mood {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vol-pill {
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--active);
  font-size: 11px;
}
.vol-pill.contango {
  color: var(--up);
}
.vol-pill.backwardation {
  color: var(--down);
}
.vol-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}
.vol-table-wrap {
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.vol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.vol-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  text-align: right;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
.vol-table th:first-child,
.vol-table td:first-child {
  text-align: left;
}
.vol-table th.on {
  color: var(--text-strong);
}
.vol-table td {
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.vol-table tr[data-sym] {
  cursor: pointer;
}
.vol-table tr[data-sym]:hover,
.vol-table tr.sel {
  background: var(--hover);
}
.vol-table td.vol-rank {
  background: rgba(242, 54, 69, calc(var(--heat, 0) * 0.45));
  color: var(--text-strong);
  font-weight: 600;
}
.vol-table td.rich {
  color: var(--down);
}
.vol-table td.cheap {
  color: var(--up);
}
.vol-detail {
  flex: none;
  width: 400px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  font-size: 12.5px;
}
.vol-detail h6 {
  margin: 14px 0 6px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}
.vol-dhead {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
}
.vol-dhead b {
  font-size: 15px;
}
.vol-dhead .btn:first-of-type {
  margin-left: auto;
}
.vol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.vol-grid div {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}
.vol-grid span {
  font-size: 10.5px;
  color: var(--muted);
}
.vol-grid b {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.vol-term,
.vol-spark {
  width: 100%;
  height: auto;
}
.vol-term .ax {
  stroke: var(--border);
}
.vol-term .lbl {
  fill: var(--muted);
  font-size: 9.5px;
}
.vol-term .ln,
.vol-spark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
}
.vol-term .pt {
  fill: var(--accent);
}
.vol-term .earn {
  stroke: #f7c948;
  stroke-dasharray: 3 3;
}
.vol-term .earn-t {
  fill: #f7c948;
}
.vol-mini {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.vol-mini th,
.vol-mini td {
  text-align: right;
  padding: 3px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.vol-mini th:first-child,
.vol-mini td:first-child {
  text-align: left;
}

/* Paper view (Nexus) */
.pp-wallet {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.pp-wallet b {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.pp-pos {
  color: var(--up) !important;
}
.pp-neg {
  color: var(--down) !important;
}
.pp-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  position: relative;
}
.pp-chain {
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.pp-chainhead {
  padding: 4px 2px 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.pp-chainhead b {
  color: var(--text-strong);
}
.pp-chaintable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pp-chaintable th {
  color: var(--muted);
  font-weight: 600;
  padding: 4px 6px;
  text-align: right;
  position: sticky;
  top: 0;
  background: var(--bg);
}
.pp-chaintable tbody th {
  position: static;
  text-align: center;
  color: var(--text-strong);
  background: var(--panel-2);
}
.pp-chaintable td {
  text-align: right;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.pp-chaintable td.ask {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.pp-chaintable td.ask:hover {
  background: var(--accent-soft);
}
.pp-chaintable tr.atm th {
  background: var(--accent);
  color: #fff;
}
.pp-chaintable tr.itm-c td:nth-child(-n + 5),
.pp-chaintable tr.itm-p td:nth-last-child(-n + 5) {
  background: rgba(41, 98, 255, 0.06);
}
.pp-side {
  flex: none;
  width: 400px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  font-size: 12.5px;
}
.pp-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.pp-chead {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--text-strong);
}
.pp-chead span {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.pp-cgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin: 6px 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pp-cacts {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.pp-cacts input,
.pp-noteinp {
  height: 26px;
  padding: 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
}
.pp-cacts input {
  width: 52px;
}
.pp-noteinp {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}
.pp-tl {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.pp-tl span {
  color: var(--muted);
}
.pp-ticket {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  z-index: 50;
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 12.5px;
}
.pp-ticket[hidden] {
  display: none;
}
.pp-thead {
  display: flex;
  align-items: center;
  color: var(--text-strong);
  position: relative;
}
.pp-thead .gx-x {
  position: static;
  margin-left: auto;
}
.pp-ticket input {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-strong);
  font: inherit;
}
.pp-radar {
  width: 100%;
  max-width: 280px;
  display: block;
  margin: 0 auto 8px;
}
.pp-radar .grid {
  fill: none;
  stroke: var(--border);
}
.pp-radar .val {
  fill: rgba(41, 98, 255, 0.25);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.pp-radar text {
  fill: var(--muted);
  font-size: 9.5px;
}
.pp-stats {
  grid-template-columns: repeat(3, 1fr);
}
.pp-coach li {
  margin-bottom: 8px;
  line-height: 1.45;
}

/* Drawing style presets */
.sb-presets {
  position: relative;
}
.sb-presets .sb-btn {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}
.sb-presets-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  font-size: 12px;
}
.sb-presets-menu[hidden] {
  display: none;
}
.sb-preset {
  display: flex;
}
.sb-preset button,
.sb-save {
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.sb-preset button:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-preset button:hover,
.sb-save:hover {
  background: var(--hover);
}
.sb-preset .dot {
  width: 22px;
  border-radius: 2px;
}
.sb-preset .del {
  color: var(--muted);
}
.sb-save {
  width: 100%;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin-top: 4px;
  color: var(--accent);
}
.sb-empty {
  margin: 4px 8px;
  color: var(--muted);
}

/* ═════════════════════════════════════════════════════ phones

   Under 700px the layout is reorganised for a phone held upright. The view
   tabs get their own scrolling row and the chart tools wrap beneath them.
   The drawing rail goes (drawing with a thumb is not worth the width). The
   dock panel floats over the chart instead of taking width from it. */
@media (max-width: 700px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 4px 6px;
  }
  /* Row one: logo, the scrolling tabs, the theme toggle. */
  .topbar .logo {
    order: -2;
  }
  #btn-theme {
    order: -1;
  }
  .topbar .viewtabs {
    order: -1;
    flex: 1 1 calc(100% - 84px);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar .viewtabs::-webkit-scrollbar {
    display: none;
  }
  .view-tab {
    flex: none;
    padding: 0 9px;
  }
  .tb-sep,
  .tb-spacer,
  .market-badge,
  #btn-screenshot,
  #btn-fullscreen {
    display: none;
  }
  .levelsbar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .levelsbar > * {
    flex: none;
  }
  .drawrail {
    display: none;
  }
  .rightdock .dockpanels {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    z-index: 30;
    width: min(320px, calc(100vw - 56px)) !important;
    box-shadow: var(--shadow);
  }
  .rightdock .dock-resize {
    display: none;
  }
  .statusbar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .statusbar > * {
    flex: none;
  }
  /* Vol and Paper: the table, then its detail below it, one scrolling column. */
  .vol-body,
  .pp-body {
    flex-direction: column;
    overflow-y: auto;
  }
  .vol-table-wrap,
  .pp-chain {
    flex: none;
    height: 58vh;
  }
  .vol-detail,
  .pp-side {
    width: auto;
    overflow: visible;
  }
  /* News: the reading pane covers the list instead of squeezing it. */
  .news-flow {
    position: relative;
  }
  .news-read {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: auto;
    background: var(--panel);
    border-left: 0;
  }
}

/* On any touch screen, panning and pinching belong to the chart, not the page. */
.chart-panel canvas {
  touch-action: none;
}

/* Key-levels hover card */
.lvl-tip {
  position: fixed;
  z-index: 300;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}
.lvl-tip[hidden] {
  display: none;
}
.lvl-tip .lt-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--text-strong);
}
.lvl-tip .lt-head .swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}
/* The value beside the title on the chart's line cards. */
.lvl-tip .lt-px {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lvl-tip .lt-state {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--hover);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}
.lvl-tip .lt-state.on {
  background: var(--accent-soft);
  color: var(--accent);
}
.lvl-tip p {
  margin: 0 0 6px;
}
.lvl-tip .lt-use {
  color: var(--muted);
}
.lvl-tip .lt-vals {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}
.lvl-tip .lt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.lvl-tip .lt-row em {
  min-width: 54px;
  color: var(--muted);
  font-style: normal;
  text-align: right;
}
.lvl-tip .lt-line {
  white-space: pre-wrap;
}
.lvl-tip .lt-foot {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

/* Toolbar: a newer LitView is ready */
.update-btn {
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  padding: 0 10px;
  font-weight: 600;
}
.update-btn:hover {
  filter: brightness(1.1);
}
.update-btn[hidden] {
  display: none;
}

/* ─────────────────────────────────────────────────────────── accounts */
/* The sign-in screen (hosted LitView only), the account button and its
   dialogs: public/js/session.js. */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: var(--bg);
}
.auth-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.auth-title {
  margin: 6px 0 0;
  font-size: 20px;
  color: var(--text-strong);
}
.auth-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--text);
}
.auth-field input {
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text-strong);
  /* 16px keeps iPhone Safari from zooming in on focus. */
  font: 16px/1 inherit;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--down);
}
.auth-go {
  height: 40px;
  font-size: 14px;
}
.auth-go:disabled {
  opacity: 0.6;
  cursor: progress;
}
.auth-switch {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font: 13px/1.3 inherit;
  cursor: pointer;
}

.account-btn .account-initial {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.account-menu {
  position: fixed;
  z-index: 120;
  min-width: 220px;
  padding: 6px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.account-menu .am-who {
  margin-bottom: 4px;
  padding: 6px 14px 9px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.account-menu .am-who b {
  color: var(--text-strong);
}
.account-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--text);
  font: 13px/1.3 inherit;
  text-align: left;
  cursor: pointer;
}
.account-menu button:hover {
  background: var(--accent-soft);
}

.account-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 92vw);
}
.acct-section h3 {
  margin: 16px 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.invite-link {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.invite-link input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text-strong);
  font: 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.acct-row small {
  margin-left: 8px;
  color: var(--muted);
}
.acct-empty {
  padding: 6px 0;
  font-size: 13px;
  color: var(--muted);
}