[hidden] { display: none !important; }

:root,
body[data-theme="dark"] {
  --bg: #0b0e11;
  --bg-elev: #12171c;
  --bg-panel: #0f1318;
  --border: #1e2630;
  --border-soft: #182028;
  --text: #e8edf2;
  --text-dim: #8b98a8;
  --text-mute: #5c6b7a;
  --accent: #3d9cf0;
  --accent-dim: rgba(61, 156, 240, 0.15);
  --up: #3ecf8e;
  --up-dim: rgba(62, 207, 142, 0.18);
  --down: #f0616d;
  --down-dim: rgba(240, 97, 109, 0.18);
  --warn: #e6b84d;
  --up-br: rgba(62, 207, 142, 0.45);
  --down-br: rgba(240, 97, 109, 0.45);
  --gray-br: #3a4654;
  --md-zone2: #151c24;
  --md-ztxt: #0b0e11;
  --session-vwap: #e05050;
  --fast-vwap: #6b8f3a;
  --week-vwap: #2f9e44;
  --price-line: #3d9cf0;
  --grid: #1a222c;
  --crosshair: rgba(139, 152, 168, 0.45);
  --readout-bg: rgba(15, 19, 24, 0.88);
  --chart-glow: rgba(61, 156, 240, 0.04);
  --splitter: #1e2630;
  --splitter-hover: #3d9cf0;
  --settings-bg: #12171c;
  --shadow: rgba(0, 0, 0, 0.35);
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "SF Mono", "Consolas", ui-monospace, monospace;
  --mod-width: 340px;
  --vol-height: 110px;
}

body[data-theme="light"] {
  --bg: #e7ecf2;
  --bg-elev: #ffffff;
  --bg-panel: #dde4ec;
  --border: #c2cdd9;
  --border-soft: #d3dce5;
  --text: #1a2330;
  --text-dim: #4d5e70;
  --text-mute: #8494a7;
  --accent: #1f7ad1;
  --accent-dim: rgba(31, 122, 209, 0.12);
  --up: #1f9d63;
  --up-dim: rgba(31, 157, 99, 0.14);
  --down: #d64550;
  --down-dim: rgba(214, 69, 80, 0.12);
  --warn: #c4921a;
  --up-br: rgba(31, 157, 99, 0.45);
  --down-br: rgba(214, 69, 80, 0.45);
  --gray-br: #b9c5d2;
  --md-zone2: #eef2f7;
  --md-ztxt: #ffffff;
  --session-vwap: #c0392b;
  --fast-vwap: #4e6b28;
  --week-vwap: #1b7a32;
  --price-line: #1f7ad1;
  --grid: #d0d9e3;
  --crosshair: rgba(90, 107, 125, 0.45);
  --readout-bg: rgba(255, 255, 255, 0.94);
  --chart-glow: rgba(31, 122, 209, 0.05);
  --splitter: #c2cdd9;
  --splitter-hover: #1f7ad1;
  --settings-bg: #ffffff;
  --shadow: rgba(20, 35, 55, 0.18);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.app {
  min-height: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

/* ——— Topbar ——— */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #10151a 0%, var(--bg) 100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: linear-gradient(145deg, #1a4a7a, #0d2a48);
  border: 1px solid #2a5f94;
  color: #9fd0ff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-text strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.brand-text span {
  font-size: 11px;
  color: var(--text-mute);
}

.instrument-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.tab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-dim);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex: none;
}

.tab:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.tab.active {
  background: var(--accent-dim);
  border-color: rgba(61, 156, 240, 0.35);
  color: var(--text);
}

.tab-ghost {
  border: 1px dashed var(--border);
  opacity: 0.7;
}

/* Кнопка «+» добавления инструмента и каталог */
.inst-add-wrap {
  position: relative;
  flex: none;
}

.tab-add {
  padding: 7px 13px;
  font-weight: 700;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-mute);
  background: transparent;
}

.tab-add:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.inst-catalog {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  min-width: 260px;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.inst-catalog-title {
  padding: 4px 8px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

.inst-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Пакет 39: живой поиск инструментов */
.inst-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 6px;
  padding: 7px 10px;
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  background: var(--bg, #14161c);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.inst-search:focus {
  border-color: #4fc3f7;
}

.inst-catalog-sub {
  padding: 6px 8px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

.inst-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border, #333);
}

.inst-cat-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.inst-cat-item:hover:not([disabled]) {
  background: var(--bg-elev);
}

.inst-cat-item[disabled] {
  opacity: 0.45;
  cursor: default;
}

.inst-cat-sec {
  font-family: var(--mono);
  font-weight: 700;
  min-width: 52px;
}

.inst-cat-name {
  font-size: 12px;
  color: var(--text-dim);
}

.inst-cat-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
}

.tab-close {
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  border-radius: 4px;
}

/* Пакет 36: вкладки инструментов с ценой и изменением */
.inst-tab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
}

.inst-tab:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.inst-tab.active {
  background: var(--accent-dim);
  border-color: rgba(61, 156, 240, 0.35);
  color: var(--text);
}

.inst-ticker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
}

.inst-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.inst-price.up { color: var(--up); }
.inst-price.down { color: var(--down); }

.inst-change {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
}

.inst-change.up { color: var(--up); }
.inst-change.down { color: var(--down); }
.inst-change.muted { color: var(--text-mute); opacity: 0.7; }

.inst-tab-remove {
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 4px;
  border-radius: 4px;
}

.inst-tab-remove:hover {
  color: var(--down);
}

.tab-close:hover {
  color: var(--down);
}

.tab-code {
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12px;
}

.tab-name {
  font-size: 11px;
  color: var(--text-mute);
}

.tab.active .tab-name {
  color: var(--text-dim);
}

/* Виджет инструмента в шапке: тикер · цена · изменение от открытия сессии */
.tab-quote {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
}

.tab-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.tab-price.up { color: var(--up); }
.tab-price.down { color: var(--down); }

.tab-change {
  font-size: 11px;
  color: var(--text-mute);
  white-space: nowrap;
}

.tab-change.up { color: var(--up); }
.tab-change.down { color: var(--down); }

/* Код контракта в заголовке графика */
.chart-sec {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-dim);
}

/* Чипы таймфреймов в заголовке графика — компактнее обычных */
.chart-panel .panel-title {
  align-items: center;
}

.panel-title .tf-group {
  margin-left: 6px;
  padding: 2px;
  max-width: none;
}

.panel-title .tf {
  min-width: 30px;
  padding: 3px 6px;
  font-size: 10px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.theme-btn {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}

.theme-btn:hover {
  color: var(--text);
}

.theme-btn.active {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
}

.dot.demo {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(230, 184, 77, 0.15);
}

.dot.live {
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-dim);
}

.clock {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  min-width: 72px;
  text-align: right;
}

/* ——— Instrument bar ——— */
.instrument-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.inst-main {
  flex: 1;
  min-width: 0;
}

.inst-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inst-title h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(61, 156, 240, 0.12);
  color: #8ec5f5;
  border: 1px solid rgba(61, 156, 240, 0.25);
}

.badge.muted {
  background: rgba(139, 152, 168, 0.1);
  color: var(--text-dim);
  border-color: var(--border);
}

.inst-meta {
  margin-top: 4px;
  color: var(--text-mute);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.inst-meta strong {
  color: var(--text-dim);
  font-weight: 600;
}

.sep {
  opacity: 0.5;
}

.price-block {
  text-align: right;
  min-width: 120px;
}

.last-price {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.price-change {
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 2px;
  color: var(--text-dim);
}

.price-change.up { color: var(--up); }
.price-change.down { color: var(--down); }

.tf-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 420px;
}

.tf {
  min-width: 36px;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
}

.tf:hover {
  color: var(--text);
}

.tf.active {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ——— Workspace: сеточный расклад виджетов (Пакет 40) ——— */
.workspace {
  display: block;
  padding: 8px;
  min-height: 0;
  height: calc(100vh - 118px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* Холст сетки: позиции виджетов ставит grid.js в пикселях */
.grid-canvas {
  position: relative;
  min-height: 100%;
}

.grid-canvas > .widget {
  position: absolute;
}

/* Цельный виджет с полной рамкой */
.widget,
.chart-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.chart-panel {
  border: 1px solid var(--border);
}

/* Одноколоночный режим (узкий экран): виджеты друг под другом */
.workspace.stacked {
  overflow-y: auto;
}
.workspace.stacked .grid-canvas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: auto !important;
}
.workspace.stacked .grid-canvas > .widget {
  position: static;
  width: 100%;
}

/* ——— Режим редактирования расклада ——— */
.workspace.editing .grid-canvas > .widget {
  outline: 1px dashed var(--border-strong, #4a5568);
  outline-offset: -1px;
}
.workspace.editing .widget .panel-head,
.workspace.editing .widget .widget-head {
  cursor: grab;
}
.workspace.editing .widget.dragging {
  opacity: 0.35;
  z-index: 10;
}

/* Ручки изменения размера (Пакет 42 · заплатка 1): все кромки и углы —
   тянуть можно любой край в любую сторону. Видны только в режиме «Раскладка». */
.widget-resize {
  position: absolute;
  display: none;
  z-index: 6;
  transition: background 0.12s, opacity 0.12s;
}
.workspace.editing .widget-resize { display: block; }
.widget-resize-e {
  top: 10px;
  bottom: 10px;
  right: -4px;
  width: 10px;
  cursor: ew-resize;
  border-radius: 4px;
}
.widget-resize-w {
  top: 10px;
  bottom: 10px;
  left: -4px;
  width: 10px;
  cursor: ew-resize;
  border-radius: 4px;
}
.widget-resize-s {
  left: 10px;
  right: 10px;
  bottom: -4px;
  height: 10px;
  cursor: ns-resize;
  border-radius: 4px;
}
.widget-resize-n {
  left: 10px;
  right: 10px;
  top: -4px;
  height: 10px;
  cursor: ns-resize;
  border-radius: 4px;
}
.widget-resize-se {
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--text-mute) 50% 60%, transparent 60% 70%, var(--text-mute) 70% 80%, transparent 80%);
  opacity: 0.8;
  border-bottom-right-radius: var(--radius);
}
.widget-resize-nw {
  left: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--text-mute) 50% 60%, transparent 60% 70%, var(--text-mute) 70% 80%, transparent 80%);
  opacity: 0.8;
  border-top-left-radius: var(--radius);
}
.widget-resize-ne {
  right: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
  background:
    linear-gradient(45deg, transparent 0 50%, var(--text-mute) 50% 60%, transparent 60% 70%, var(--text-mute) 70% 80%, transparent 80%);
  opacity: 0.8;
  border-top-right-radius: var(--radius);
}
.widget-resize-sw {
  left: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
  background:
    linear-gradient(45deg, transparent 0 50%, var(--text-mute) 50% 60%, transparent 60% 70%, var(--text-mute) 70% 80%, transparent 80%);
  opacity: 0.8;
  border-bottom-left-radius: var(--radius);
}
.widget-resize-e:hover,
.widget-resize-w:hover,
.widget-resize-s:hover,
.widget-resize-n:hover {
  background: var(--accent, #4fc3f7);
  opacity: 0.45;
}
.widget-resize-se:hover,
.widget-resize-nw:hover,
.widget-resize-ne:hover,
.widget-resize-sw:hover { opacity: 1; }

/* Кнопка скрытия виджета (правый верхний угол) */
.widget-hide {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--text-mute);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  z-index: 6;
  padding: 0;
}
.workspace.editing .widget-hide { display: inline-flex; }
.widget-hide:hover { color: var(--text); border-color: var(--border-strong, #4a5568); }

/* Заплатка 1 (12.09): кнопка «на весь экран» переехала из виджета в панель
   над графиком (#btn-chart-maximize) — отдельный стиль .widget-maximize
   больше не нужен. */

/* Развёрнутый виджет — поверх всего окна; сетка под ним не двигается. */
.widget.maximized {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 200 !important;
  border-radius: 0;
}
.widget.maximized .widget-resize,
.widget.maximized .widget-hide { display: none !important; }
.widget.maximized .widget-maximize { top: 8px; right: 8px; opacity: 0.9; }

/* Пакет 42: окраска призрака-предпросмотра при перетаскивании:
   swap — будет обмен местами (зелёный), invalid — откат на место (красный). */
.widget-placeholder.swap {
  border-color: var(--up, #3dd68c);
  background: rgba(61, 214, 140, 0.10);
}
.widget-placeholder.invalid {
  border-color: var(--down, #f07178);
  background: rgba(240, 113, 120, 0.08);
}

/* Призрак-предпросмотр позиции при перетаскивании */
.widget-placeholder {
  position: absolute;
  display: none;
  border: 2px dashed var(--accent, #4fc3f7);
  background: rgba(79, 195, 247, 0.08);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 5;
}

/* Кнопка «Раскладка» в активном состоянии */
#btn-layout-edit.active {
  background: var(--bg-elev);
  color: var(--accent, #4fc3f7);
  box-shadow: inset 0 0 0 1px var(--accent, #4fc3f7);
}

/* Меню «Виджеты» */
.widgets-menu-wrap { position: relative; }
.widgets-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 8px;
  z-index: 60;
}
.widgets-menu-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px 6px;
}
.widgets-menu-list { display: flex; flex-direction: column; gap: 2px; }
.widgets-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.widgets-menu-item:hover { background: var(--bg-elev); }
.widgets-menu-item .wm-state {
  font-size: 11px;
  color: var(--text-mute);
}
.widgets-menu-item button {
  font-size: 11px;
  padding: 2px 8px;
}
.widgets-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.widgets-menu-actions .btn-ghost {
  text-align: left;
  font-size: 12px;
}

.widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.widget-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.widget-title strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.widget-title .hint,
.widget-meta {
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.widget-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.widget-meta .sep { opacity: 0.45; }


.widget-note {
  margin: 6px 12px 10px;
  flex-shrink: 0;
}

.widget .ob-summary,
.widget .tape-summary {
  margin: 8px 12px 0;
}

.widget .ob-table-wrap,
.widget .tape-table-wrap {
  margin: 8px 12px 0;
  flex: 1;
  min-height: 0;
  max-height: none;
  /* Без полос прокрутки: строки подгоняются под высоту, лишнее обрезается */
  overflow: hidden;
}

/* У стакана нижнего инфоблока больше нет — таблица доходит до низа виджета */
.widget .ob-table-wrap {
  margin-bottom: 12px;
}

.widget .stat-grid.compact {
  margin: 8px 12px 0;
  grid-template-columns: repeat(3, 1fr);
}

.widget .kv.compact {
  margin: 8px 12px 10px;
  font-size: 11px;
}

.placeholder-mod.compact {
  padding: 10px 12px 14px;
}

.placeholder-mod.compact p {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 12px;
}

/* Разделители рамок (тянутся мышью) */
.splitter {
  background: var(--splitter);
  position: relative;
  z-index: 5;
  transition: background 0.12s;
  flex-shrink: 0;
}

.splitter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

.splitter:hover,
.splitter:focus-visible,
.splitter.is-dragging {
  background: var(--splitter-hover);
  outline: none;
}

.splitter-v {
  cursor: col-resize;
  width: 6px;
}

.splitter-v::after {
  left: -3px;
  right: -3px;
}

.splitter-h {
  cursor: row-resize;
  height: 6px;
}

.splitter-h::after {
  top: -3px;
  bottom: -3px;
}

/* Разделители подпанелей графика (Пакет 45, 27.09.2026): видимая линия 2px
   вместо полосы 6px; зона захвата мышью прежняя — сам элемент остаётся 6px. */
.sub-splitter {
  background: transparent;
}
.sub-splitter::after {
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  background: var(--splitter);
}
.sub-splitter:hover,
.sub-splitter:focus-visible,
.sub-splitter.is-dragging {
  background: transparent;
}
.sub-splitter:hover::after,
.sub-splitter:focus-visible::after,
.sub-splitter.is-dragging::after {
  background: var(--splitter-hover);
}

body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing-h {
  cursor: row-resize;
  user-select: none;
}

body.is-resizing iframe,
body.is-resizing canvas,
body.is-resizing-h iframe,
body.is-resizing-h canvas {
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}

.panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
}

.panel-title .hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-mute);
}

/* Пакет 36: ряд индикаторов внутри заголовка графика */
.ind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.chart-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ind-catalogs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ind-catalog {
  position: relative;
}

.ind-cat-btn[aria-expanded="true"] {
  color: var(--text);
  background: var(--accent-dim);
  border-color: rgba(61, 156, 240, 0.35);
}

.ind-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--settings-bg);
  box-shadow: 0 14px 40px var(--shadow);
  z-index: 40;
  display: grid;
  gap: 4px;
}

.ind-popover-wide {
  min-width: 280px;
}

.ind-pop-section {
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.ind-pop-section + .ind-pop-item {
  margin-top: 0;
}

.ind-popover[hidden] {
  display: none !important;
}

.ind-pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.ind-pop-item:hover,
.ind-pop-item:focus-visible {
  background: var(--accent-dim);
}

.ind-pop-item .fine {
  color: var(--text-mute);
  font-size: 11px;
}

.ind-pop-empty {
  padding: 8px;
  font-size: 12px;
  color: var(--text-mute);
}

.ind-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Пустой список чипов не занимает место; ряд с кнопкой «Индикаторы» остаётся */
.ind-row.isEmpty .ind-chips {
  display: none;
}

.ind-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 4px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  user-select: none;
  cursor: grab;
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.ind-chip:active {
  cursor: grabbing;
}

.ind-chip.is-dragging {
  opacity: 0.4;
  border-style: dashed;
}

.ind-chip.is-drag-over {
  border-color: var(--accent, #3d9cf0);
  transform: scale(1.03);
}

.ind-chip.is-drag-over-left {
  box-shadow: -3px 0 0 0 var(--accent, #3d9cf0);
}

.ind-chip.is-drag-over-right {
  box-shadow: 3px 0 0 0 var(--accent, #3d9cf0);
}

.ind-chip.is-off {
  opacity: 0.45;
}

.ind-chip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ind-chip-name {
  white-space: nowrap;
}

.ind-chip-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}

.ind-chip-btn:hover {
  color: var(--text);
  background: var(--bg-elev);
}

.ind-sheet {
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel);
  padding: 8px 12px 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.ind-sheet[hidden] {
  display: none !important;
}

.ind-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ind-sheet-head strong {
  font-size: 12px;
}

.ind-sheet-body {
  display: grid;
  gap: 8px;
  max-width: 520px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.ind-field {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
}

.ind-field input[type="number"],
.ind-field input[type="text"],
.ind-field input[type="color"],
.ind-field select {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 0 8px;
}

.ind-num {
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: stretch;
  min-width: 0;
}

.ind-num input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: var(--mono);
}

.ind-num-spinners {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  background: var(--bg);
}

.ind-num-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.ind-num-btn:last-child {
  border-bottom: 0;
}

.ind-num-btn:hover {
  background: var(--bg-2, rgba(255, 255, 255, 0.06));
  color: var(--text);
}

.ind-field input[type="color"] {
  padding: 2px;
  width: 56px;
  justify-self: start;
}

.ind-field em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  min-width: 36px;
  text-align: right;
}

.axis-drag {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 6;
  background: transparent;
}

.axis-drag:hover,
.axis-drag.is-dragging {
  background: rgba(61, 156, 240, 0.18);
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  user-select: none;
  cursor: pointer;
}

.check input {
  accent-color: var(--accent);
}

.btn-ghost {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--bg-elev);
}

.btn-settings[aria-expanded="true"],
.btn-ghost[aria-pressed="true"] {
  color: var(--text);
  background: var(--accent-dim);
  border-color: rgba(61, 156, 240, 0.35);
}

.chart-settings {
  position: relative;
}

/* Меню горизонтальной черты (щелчок по линии на графике) */
.line-menu {
  position: fixed;
  z-index: 90;
  min-width: 168px;
  padding: 10px 12px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.line-menu[hidden] {
  display: none !important;
}

.line-menu-title {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 8px;
}

.line-menu-title b {
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
}

.line-menu-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin: 8px 0 4px;
}

.line-menu-colors {
  display: flex;
  gap: 6px;
}

.line-color {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.line-color.is-active,
.line-color:hover {
  border-color: var(--accent);
}

.line-menu-widths {
  display: flex;
  gap: 6px;
}

.line-width {
  width: 28px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

.line-width.is-active,
.line-width:hover {
  background: var(--accent-dim);
  border-color: rgba(61, 156, 240, 0.35);
}

.line-menu-delete {
  margin-top: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(224, 80, 80, 0.45);
  background: rgba(224, 80, 80, 0.12);
  color: #f09090;
  font-size: 12px;
  cursor: pointer;
}

.line-menu-delete:hover {
  background: rgba(224, 80, 80, 0.22);
}

.settings-menu {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 16px 24px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev);
  flex-shrink: 0;
}

.settings-menu[hidden] {
  display: none !important;
}

.settings-group {
  display: grid;
  gap: 8px;
}

.settings-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 650;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
}

.settings-row span {
  white-space: nowrap;
}

.settings-row em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  min-width: 28px;
  text-align: right;
}

.settings-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.settings-reset {
  justify-self: start;
  margin-top: 2px;
}

.settings-fine {
  margin: 0;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.4;
  grid-column: 1 / -1;
}

.chart-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Тесное окно: прокрутка столбца вместо сжатия панелей в кашу. */
  overflow-y: auto;
}

.chart-wrap {
  position: relative;
  /* Доля 330 в гибком столбце: подвал с панелями делит высоту пропорционально */
  flex: 330 1 0;
  /* График не сжимается ниже читаемого минимума (несколько линеек цен). */
  min-height: 120px;
  background:
    radial-gradient(ellipse at 20% 0%, var(--chart-glow), transparent 50%),
    var(--bg);
}

.chart-wrap canvas,
.sub-panel-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-wrap canvas {
  cursor: crosshair;
  touch-action: none;
}

/* ——— Динамический подвал: панели-«кирпичи» генерируются из indicatorState ——— */
/* Модель долей: контейнер и панели получают flexGrow из app.js (вес = желаемая
   высота в px); при нехватке места столбец сжимается пропорционально, без обрезки. */
.sub-panels-container {
  display: flex;
  flex-direction: column;
  /* Чистая модель долей: grow задаёт app.js (сумма весов панелей), shrink=1,
     basis=0 — подвал всегда получает пропорциональную долю столбца и никогда
     не переполняется; панели внутри делят её пропорционально своим весам. */
  flex: 0 1 0;
  min-height: 0;
}

.sub-panels-container:empty {
  display: none;
}

.sub-panel-wrap {
  /* Доля внутри подвала: grow задаёт app.js (вес = сохранённая «высота»),
     shrink=1, basis=0, без минимума — панели сжимаются пропорционально
     и никогда не исчезают и не наезжают на ось времени. */
  flex: 1 1 0;
  min-height: 0;
  /* Канвас никогда не вылезает за пределы своей панели. */
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.crosshair-readout {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--readout-bg);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.crosshair-readout[hidden] {
  display: none;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-mute);
  font-size: 11px;
  flex-shrink: 0;
}

/* ——— Modules (legacy tabs) ——— */
.modules-panel {
  background: transparent;
}

.module-tabs {
  display: none;
}

.module-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.mod-pane {
  display: none;
}

.mod-pane.active {
  display: block;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.stat {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
}

.stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.stat-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}

.stat-value.up { color: var(--up); }
.stat-value.down { color: var(--down); }

.card {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.card.soft {
  background: transparent;
  border-style: dashed;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.fine {
  margin-top: 10px !important;
  font-size: 11px !important;
  color: var(--text-mute) !important;
}

.kv {
  margin: 0;
  display: grid;
  gap: 6px;
}

.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.kv dt {
  margin: 0;
  color: var(--text-mute);
}

.kv dd {
  margin: 0;
  font-family: var(--mono);
  color: var(--text);
}

.placeholder-mod {
  padding: 8px 4px 16px;
}

.ph-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  border: 1px solid rgba(61, 156, 240, 0.25);
  color: var(--accent);
  font-size: 18px;
  margin-bottom: 12px;
}

.placeholder-mod h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.placeholder-mod p {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 12px;
}

.roadmap {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  color: var(--text-mute);
  font-size: 12px;
}

.roadmap li {
  margin-bottom: 4px;
}

.empty-list {
  margin-top: 16px;
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-mute);
  font-size: 12px;
}

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-card {
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: rgba(18, 23, 28, 0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slot-card strong {
  font-size: 12px;
}

.slot-card span {
  font-size: 11px;
  color: var(--text-mute);
}

/* ——— Login (один пользователь) ——— */
.login-screen {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(61, 156, 240, 0.12), transparent),
    var(--bg);
}

.login-card {
  width: min(400px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.login-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.login-brand strong {
  display: block;
  font-size: 16px;
}

.login-brand span {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
}

.login-note {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 13px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 12px;
}

.field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.btn-primary {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #041018;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-error {
  margin: 0 0 10px;
  color: var(--down);
  font-size: 12px;
}

.login-fine {
  margin: 16px 0 0;
  color: var(--text-mute);
  font-size: 11px;
  line-height: 1.4;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.user-name {
  color: var(--text-dim);
  font-size: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dot.live {
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-dim);
}

.dot.warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(230, 184, 77, 0.2);
}

.boot-error {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--down-dim);
  color: var(--down);
  border: 1px solid var(--down);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 50;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--accent);
}

/* ——— Responsive ——— */
/* Переход в одноколоночный режим делает grid.js классом .stacked
   (порог 900 px по ширине холста). Здесь — только мелкие поправки. */
@media (max-width: 960px) {
  .instrument-bar {
    flex-wrap: wrap;
  }

  .chart-footer {
    flex-direction: column;
  }

  .user-menu {
    border-left: none;
    padding-left: 0;
  }

  .theme-switch {
    order: 5;
  }

  .settings-menu {
    grid-template-columns: 1fr;
  }
}

/* Светлая тема: точечные поправки ленты/карточек */
body[data-theme="light"] .brand-mark {
  background: linear-gradient(145deg, #3d8fd6, #1a5a96);
  border-color: #2f78b8;
  color: #eef7ff;
}

body[data-theme="light"] .topbar {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

body[data-theme="light"] .tape-table thead th {
  background: #eef2f7;
}

body[data-theme="light"] .tape-table-wrap,
body[data-theme="light"] .tape-chip {
  background: rgba(255, 255, 255, 0.7);
}

body[data-theme="light"] .slot-card {
  background: rgba(255, 255, 255, 0.65);
}

body[data-theme="light"] .login-card {
  box-shadow: 0 18px 50px var(--shadow);
}

body[data-theme="light"] .widget,
body[data-theme="light"] .chart-panel {
  box-shadow: 0 1px 2px rgba(20, 40, 70, 0.06);
}

/* Заплатка 1 (26.09.2026): светлая тема — белые тела виджетов и белое поле графика.
   Раньше тела наследовали --bg-panel (#dde4ec), а поле графика — --bg (#e7ecf2)
   с синим свечением --chart-glow, отсюда «синеватый» вид. */
body[data-theme="light"] .widget,
body[data-theme="light"] .chart-panel {
  background: var(--bg-elev);
}

body[data-theme="light"] .chart-wrap,
body[data-theme="light"] .sub-panel-wrap {
  background: var(--bg-elev);
}

/* === tape (лента сделок) === */
.tape-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.tape-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tape-title strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.tape-meta {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted, #8b93a7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tape-meta .sep { opacity: 0.5; }
.tape-delta.up { color: var(--up, #3dd68c); }
.tape-delta.down { color: var(--down, #f07178); }

.tape-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.tape-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #243044);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tape-chip span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8b93a7);
}
.tape-chip strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tape-chip.buy strong { color: var(--up, #3dd68c); }
.tape-chip.sell strong { color: var(--down, #f07178); }

.tape-table-wrap {
  max-height: 48vh;
  overflow: auto;
  border: 1px solid var(--border, #243044);
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}
.tape-table {
  width: 100%;
  /* Колонки пропорциональны ширине виджета, как в стакане */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tape-table thead th {
  position: sticky;
  top: 0;
  background: #121826;
  color: var(--muted, #8b93a7);
  font-weight: 500;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #243044);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}
.tape-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(36,48,68,0.55);
  white-space: nowrap;
  overflow: hidden;
}
.tape-table tr:last-child td { border-bottom: none; }
.tape-table .t-price { font-weight: 600; }
.tape-table .t-time { color: var(--muted, #8b93a7); width: 24%; }
.tape-table .t-qty { width: 20%; }
.tape-table .t-side { width: 24%; font-size: 11px; }
.tape-table tr.side-buy .t-side,
.tape-table tr.side-buy .t-price { color: var(--up, #3dd68c); }
.tape-table tr.side-sell .t-side,
.tape-table tr.side-sell .t-price { color: var(--down, #f07178); }
.tape-table tr.side-unk .t-side { color: var(--muted, #8b93a7); }
.tape-table tr.tape-empty td {
  text-align: center;
  color: var(--muted, #8b93a7);
  padding: 18px 8px;
}
.tape-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Полосы прокрутки скрыты по всему терминалу (виджеты, страница, всплывающие
   списки): прокрутка колесом/жестом сохраняется, мелькающих полос больше нет */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* === visibility locks (must be last) === */
[hidden] {
  display: none !important;
}
.login-screen[hidden],
#login-screen[hidden],
.app[hidden],
#app-shell[hidden] {
  display: none !important;
}

body.is-app #login-screen { display: none !important; }
body.is-login #app-shell { display: none !important; }


/* === orderbook (стакан) === */
.ob-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ob-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-title strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.ob-meta {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted, #8b93a7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ob-meta .sep { opacity: 0.5; }
.ob-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.ob-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #243044);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ob-chip span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8b93a7);
}
.ob-chip strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ob-chip.bid strong { color: var(--up, #3dd68c); }
.ob-chip.ask strong { color: var(--down, #f07178); }

.ob-table-wrap {
  border: 1px solid var(--border, #243044);
  border-radius: 10px;
  overflow: auto;
  max-height: min(52vh, 480px);
  background: rgba(0,0,0,0.12);
}
.ob-table {
  width: 100%;
  /* Колонки строго пропорциональны ширине виджета: сжимаются и тянутся вместе с ним */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ob-table thead th {
  position: sticky;
  top: 0;
  background: rgba(20, 26, 38, 0.96);
  color: var(--muted, #8b93a7);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border, #243044);
  text-align: center;
}
.ob-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(36, 48, 68, 0.45);
  white-space: nowrap;
  /* Ячейка обрезает содержимое по своему краю — ничто не распирает таблицу */
  overflow: hidden;
}
.ob-table tr.ob-empty td {
  text-align: center;
  color: var(--muted, #8b93a7);
  padding: 18px 8px;
}
.ob-bid-qty, .ob-bid-px { text-align: right; color: var(--up, #3dd68c); }
.ob-ask-px, .ob-ask-qty { text-align: left; color: var(--down, #f07178); }
.ob-bid-px, .ob-ask-px { font-weight: 600; }
.ob-row {
  position: relative;
}
.ob-row .ob-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  opacity: 0.14;
  pointer-events: none;
  border-radius: 2px;
}
/* Полоса живёт внутри своей ячейки и не вылезает за неё:
   bid прижата к ценам (правый край ячейки), ask — к ценам (левый край) */
.ob-row .ob-bar.bid {
  right: 0;
  background: var(--up, #3dd68c);
}
.ob-row .ob-bar.ask {
  left: 0;
  background: var(--down, #f07178);
}
.ob-table td { position: relative; z-index: 1; }

body[data-theme="light"] .ob-table-wrap,
body[data-theme="light"] .ob-chip {
  background: rgba(255, 255, 255, 0.7);
}
body[data-theme="light"] .ob-table thead th {
  background: #eef2f7;
}

/* ===== Пакет 44: аналитика VWAP (TimeStats) ===== */

/* Маркер аналитики на вкладке инструмента: буква «А» */
.inst-an {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-mute);
  border: 1px solid var(--border, #243044);
  opacity: 0.55;
  flex: none;
  align-self: center;
}
.inst-an:hover { opacity: 1; color: var(--text); }
.inst-an.on {
  opacity: 1;
  color: #0b0e14;
  background: var(--accent, #3d9cf0);
  border-color: var(--accent, #3d9cf0);
}

.widget-analyzer .an-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}
.an-summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.an-summary b { color: var(--text); font-weight: 600; }
/* Пакет 46: .an-tables/.an-block/.an-block-title/.an-note упразднены —
   три таблицы стали тремя отдельными виджетами, каркас даёт сетка. */
.an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.an-table thead th {
  background: #121826;
  color: var(--muted, #8b93a7);
  font-weight: 500;
  text-align: right;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #243044);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-table thead th:first-child,
.an-table td:first-child { text-align: left; }
.an-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(36, 48, 68, 0.55);
  white-space: nowrap;
  text-align: right;
  color: var(--text);
}
.an-table tr:last-child td { border-bottom: none; }
.an-table tr.an-empty td {
  text-align: center;
  color: var(--muted, #8b93a7);
  padding: 14px 8px;
}
.an-pct-good { color: var(--up, #3dd68c); }
.an-pct-mid { color: var(--text); }

body[data-theme="light"] .an-table thead th { background: #eef2f7; }

/* ===== Пакет 46 rev B (27.09): виджеты аналитики сжимаются по ширине =====
   Причина «не сжимается»: таблица с nowrap-ячейками держала минимальную ширину
   по содержимому. Фиксированная раскладка + обрезка текста с многоточием —
   тот же приём, что в стакане и ленте (решение Вадима 10.09). */
.widget-analyzer .an-table { table-layout: fixed; }
.widget-analyzer .an-table th,
.widget-analyzer .an-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Доли колонок: «Время» пошире, числовые делят остаток поровну */
#widget-analyzer .an-table th:nth-child(1) { width: 24%; }
#widget-analyzer .an-table th:nth-child(2) { width: 10%; }
#widget-analyzer-actual .an-table th:nth-child(1) { width: 28%; }
#widget-analyzer-near .an-table th:nth-child(1) { width: 34%; }
.widget-analyzer .an-body,
.widget-analyzer .an-summary { min-width: 0; }

/* ===== Пакет 48 (29.09, rev B): виджет «Выход и возврат» — узкая двухстрочная таблица =====
   33 интервала × 2 строки: верхняя строка пары — выход за полосу, нижняя —
   возврат. Чередование фона — по интервалам (пара целиком), разделитель —
   только под нижней строкой пары. Шапка прилипает при прокрутке.
   Rev B: у каждой строки своя ячейка времени (.an-btime) — начало окна вверху,
   конец внизу; полужирное начертание и левое выравнивание привязаны к классу,
   а не к :first-child (в старой разметке без ячейки времени в строке возврата
   эти стили ошибочно доставались первому числу строки). */
#widget-analyzer-bands .an-table th:nth-child(1) { width: 26%; }
.an-bands { border-collapse: separate; border-spacing: 0; }
.an-bands thead th { position: sticky; top: 0; z-index: 2; }
.an-bands td { padding: 3px 6px; border-bottom: none; }
.an-bands tr.an-band-r td { border-bottom: 1px solid rgba(36, 48, 68, 0.9); }
.an-bands tr.an-band-alt td { background: rgba(255, 255, 255, 0.03); }
.an-bands td.an-btime { font-weight: 600; text-align: left; }
body[data-theme="light"] .an-bands tr.an-band-alt td { background: rgba(15, 23, 42, 0.05); }

/* ===== Пакет 47: виджет рыночного скринера (порт QUIK v07) =====
   Две колонки «Параметр / Значение», фиксированная раскладка — виджет
   сжимается по ширине так же, как виджеты аналитики. */
.widget-screener .an-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}
.widget-screener .scr-table { table-layout: fixed; }
.widget-screener .scr-table th,
.widget-screener .scr-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-screener .scr-table th:nth-child(1) { width: 58%; }
.widget-screener .scr-table tr.scr-empty td,
.widget-screener .scr-table td.scr-empty {
  text-align: center;
  color: var(--muted, #8b93a7);
  padding: 14px 8px;
}
/* Подсветка слов ЛОНГ/ШОРТ в скринере (решение Вадима 28.09).
   Специфичность намеренно выше, чем у .an-table td (0,1,1): иначе цвет
   ячейки перебивает подсветку — поймано 28.09, ШОРТ был белым. */
.widget-screener .scr-table td.scr-long  { color: var(--up, #3dd68c); }
.widget-screener .scr-table td.scr-short { color: var(--down, #f0616d); }

/* --- Пакеты 49/51: виджет «Режим дня» — вид по утверждённому макету v01 --- */
.md-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 7px; overflow: auto; }

/* полоса режима: крупная плашка во всю ширину + точки + двустрочная подпись */
.md-strip { display: flex; align-items: center; gap: 10px; }
.md-mode {
  flex: 1; text-align: center; font-weight: 700; font-size: 14px; letter-spacing: 1px;
  padding: 7px 0; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
}
.md-mode.md-up   { color: var(--up);   background: var(--up-dim);   border-color: var(--up-br); }
.md-mode.md-down { color: var(--down); background: var(--down-dim); border-color: var(--down-br); }
.md-mode.md-gray { color: var(--text-dim); background: rgba(139, 152, 168, 0.14); border-color: var(--gray-br); }
.md-mode.md-none { color: var(--text-mute); background: rgba(139, 152, 168, 0.08); border-color: var(--border); }
.md-conf { display: inline-flex; gap: 4px; }
.md-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--text-mute); }
.md-dot.on { background: var(--text-dim); border-color: var(--text-dim); }
.md-side { font-size: 10.5px; color: var(--text-mute); text-align: right; line-height: 1.35; min-width: 96px; }

/* шкала отклонения: толстая полоса с заливкой зон, подписи маркеров */
.md-scale-wrap { width: 100%; }
.md-scale-cap { font-size: 10px; color: var(--text-mute); margin: 2px 0 4px; display: flex; justify-content: space-between; }
#md-scale { width: 100%; height: auto; display: block; }
.md-s-zone  { fill: var(--bg-elev); }
.md-s-zone2 { fill: var(--md-zone2); }
.md-s-tick  { stroke: var(--border); stroke-width: 1; }
.md-s-lbl   { fill: var(--text-mute); font-size: 9px; font-family: var(--mono); }
.md-s-range { stroke: var(--text-dim); stroke-width: 1.4; stroke-dasharray: 4 3; }
.md-s-range-lbl { fill: var(--text-dim); font-size: 8.5px; }
.md-s-america { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 2 2; }
.md-s-america-lbl { fill: var(--warn); font-size: 8.5px; }
.md-s-dot   { fill: var(--accent); }
.md-s-arrow { fill: var(--accent); }
.md-s-zbox  { fill: var(--accent); }
.md-s-ztxt  { fill: var(--md-ztxt); font-size: 9.5px; font-weight: 700; font-family: var(--mono); }

/* плитки признаков */
.md-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.md-tile {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 7px; padding: 6px 7px 7px; min-width: 0;
}
.md-tile-name { font-size: 9.5px; color: var(--text-mute); line-height: 1.2; min-height: 22px; }
.md-tile-val { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); margin: 2px 0 3px; }
.md-tile-tag { font-size: 9px; font-weight: 600; min-height: 11px; }
.md-tile-saw .md-tile-tag { color: var(--warn); }
.md-tile-trend .md-tile-tag { color: var(--up); }
.md-tile-neu .md-tile-tag { color: var(--text-mute); }
.md-tile-warm { height: 3px; border-radius: 2px; background: var(--border-soft); margin-top: 5px; overflow: hidden; }
.md-tile-warm i { display: block; height: 100%; background: var(--accent); opacity: 0.55; }

/* сценарии: плашки со светодиодом состояния и жирными значениями */
.md-scenarios { display: flex; flex-direction: column; gap: 5px; }
.md-scen {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 7px; padding: 6px 9px; font-size: 11.5px;
}
.md-scen.done { opacity: 0.45; }
.md-scen-led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-mute); }
.md-scen-led.on { background: var(--up); box-shadow: 0 0 6px var(--up); }
.md-scen-led.watch { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.md-scen-name { font-weight: 600; white-space: nowrap; color: var(--text); }
.md-scen-text { color: var(--text-dim); line-height: 1.35; }
.md-scen-text b { color: var(--text); font-weight: 600; }

/* слой скринера: плашка с кнопкой направления */
.md-screener {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--border-soft);
  border-radius: 7px; background: var(--bg-elev); font-size: 11.5px;
}
.md-scr-name { color: var(--text-mute); font-weight: 600; }
.md-scr-val { font-weight: 700; letter-spacing: 0.6px; padding: 2px 10px; border-radius: 5px; font-size: 12px; border: 1px solid transparent; }
.md-scr-val.long  { color: var(--up);   background: var(--up-dim);   border-color: var(--up-br); }
.md-scr-val.short { color: var(--down); background: var(--down-dim); border-color: var(--down-br); }
.md-scr-val.none  { color: var(--text-mute); background: rgba(139, 152, 168, 0.1); border-color: var(--border); }
.md-scr-note { margin-left: auto; font-size: 10px; color: var(--text-mute); text-align: right; }

/* совет: синяя плашка с левой каймой */
.md-advice {
  font-size: 12px; line-height: 1.45; color: var(--text);
  border-left: 3px solid var(--accent); padding: 8px 10px;
  background: var(--accent-dim); border-radius: 0 7px 7px 0;
}
.md-note { font-size: 11px; color: var(--text-mute); line-height: 1.4; grid-column: 1 / -1; }