/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── App layout, header, sidebar ───────────── */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;   /* мобильные: без полосы под тулбаром браузера */
  width: 100vw;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  /* чёлка / home-индикатор: контент не упирается в края */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.collapse-btn {
  position: fixed;
  /* вертикальный центр шапки (40px / 2 − 14px) — полоски на одной оси с лого */
  top: 6px;
  left: 14px;
  z-index: 100;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition), filter var(--transition),
              transform var(--transition);
}
/* свечение именно полосок: drop-shadow по форме svg-линий */
.collapse-btn:hover {
  color: var(--accent);
  transform: scale(1.1);
}
.collapse-btn:hover svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.collapse-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ── морф бургер ↔ X ──
   Раньше whole-svg rotate(180deg) был визуально пустым: три симметричные
   линии после поворота выглядят так же, анимации не было видно вообще.
   Теперь каждая линия анимируется отдельно: раскрытый сайдбар — X
   («скрыть»), схлопнутый — бургер («показать»). */
.collapse-btn .bl {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s var(--ease), opacity 0.18s ease;
}
/* раскрыт (нет .collapsed): верхняя едет в центр и +45°, нижняя −45°,
   средняя гаснет — получается X */
.collapse-btn:not(.collapsed) .bl1 { transform: translateY(6px) rotate(45deg); }
.collapse-btn:not(.collapsed) .bl2 { transform: scaleX(0.15); opacity: 0; }
.collapse-btn:not(.collapsed) .bl3 { transform: translateY(-6px) rotate(-45deg); }
/* схлопнут (.collapsed): классический бургер */
.collapse-btn.collapsed .bl1,
.collapse-btn.collapsed .bl2,
.collapse-btn.collapsed .bl3 { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .collapse-btn .bl { transition: none; }
}

.header {
  position: relative;
  z-index: 1;
  padding: 6px 16px 6px 54px;
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  flex-shrink: 0;
  min-height: 40px;
}
.header h1 {
   font-family: var(--font-display);
   font-size: var(--fs-title);
   font-weight: var(--fw-title);
   letter-spacing: var(--ls-title);
   background: linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   /* отдельный композитный слой: градиентный текст не перерисовывается
      и не мигает, когда поверх анимируются блюры оверлеев */
   transform: translateZ(0);
}
h1.logo-btn {
  cursor: pointer;
  user-select: none;
  transition: filter var(--transition), transform var(--transition), opacity var(--transition);
}
h1.logo-btn:hover {
  filter: brightness(1.35) drop-shadow(0 0 14px var(--accent-glow));
}
h1.logo-btn:active { transform: scale(0.97); opacity: 0.9; }
.header h1 span {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}
/* ── кнопки шапки и переключатель ТФ ── */
/* ТФ — строго по центру ОКНА: absolute от ширины шапки, паддинги шапки
   (68px слева под бургер против 28px справа) на центр не влияют */
.header #gridTfBar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* меню-кнопки (Тема / Настройки / Формации) — правая группа шапки */
.header .header-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ── перетаскивание иконок шапки (HeaderOrder) ──
   Зазоры gap НЕ трогаем: 8px справа / 10px слева остаются стандартом,
   плейсхолдер занимает ровно один слот — соседи сдвигаются FLIP-анимацией.
   wrap — только страховка от переполнения, когда в группу накидали много
   иконок: дефолтный набор в одну строку ложится как раньше. */
.header-left,
.header .header-status {
  flex-wrap: wrap;
  min-width: 0;
}
.header [data-hblock] {
  -webkit-touch-callout: none;
}
/* подсказка, что блоки шапки таскаются (кнопки свой pointer сохраняют) */
#logoBtn,
#chipRow,
#gridTfBar { cursor: grab; }
body.h-dragging,
body.h-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.h-dragging { cursor: grabbing; }
/* перетаскиваемый узел: вынут из потока, следует за курсором.
   transition гасим жёстко: у кнопок/чипов/лого свои transition'ы
   transform (0.08–0.12с) — иначе призрак едет не за курсором, а со
   шлейфом, причём у каждого типа иконок со своим. */
.h-ghost {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1000;
  pointer-events: none !important;
  margin: 0 !important;
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  will-change: transform;
  transition: none !important;
}
/* место вставки — тонкая светящаяся линия (без прямоугольников):
   в горизонтальном ряду — вертикальная черта, в вертикальном —
   горизонтальная. Растягивается на высоту/ширину ряда. */
.h-placeholder {
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow, var(--accent));
  pointer-events: none;
}
.h-placeholder.line-v { width: 3px; min-width: 3px; margin: 3px 0; }
.h-placeholder.line-h { height: 3px; min-height: 3px; margin: 0 3px; }
/* сдвиг соседей при освобождении места.
   Специфичность 0-2-0: родные transition'ы кнопок/чипов/ТФ (0-1-0,
   часть — в файлах позже по каскаду) иначе перебивали бы 0.18с —
   соседи у разных иконок ехали с разной скоростью или прыгали. */
.header .h-shift { transition: transform 0.18s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .header .h-shift { transition: none; }
}
/* ТФ-переключатель, перетащенный в левую/правую группу: из абсолютного
   центра — в обычный поток группы */
.header #gridTfBar.in-flow {
  position: static;
  transform: none;
}

/* ── индикатор края для докинга (Dock): тонкая светящаяся линия
   у самого края. Без прямоугольников. 4px + двойное свечение, чтобы
   полоску было видно даже под курсором у самой кромки экрана. */
.dock-edge {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent),
              0 0 16px var(--accent-glow, var(--accent));
  opacity: 0;
  transition: opacity 0.12s ease;
}
.dock-edge.hide { opacity: 0; }
.dock-edge.show { opacity: 1; }
.dock-edge.dock-top { left: 0; right: 0; top: 0; height: 4px; }
.dock-edge.dock-bottom { left: 0; right: 0; bottom: 0; height: 4px; }
.dock-edge.dock-left { top: 0; bottom: 0; left: 0; width: 4px; }
.dock-edge.dock-right { top: 0; bottom: 0; right: 0; width: 4px; }
/* шеврон у курсора при докинге: линия у самой кромки бывает закрыта
   курсором/скроллбаром — шеврон всегда рядом с указателем и показывает
   сторону стрелкой. Без прямоугольников и текста. */
#dockCaret {
  position: fixed;
  z-index: 2001;
  pointer-events: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow, var(--accent)),
               0 0 16px var(--accent-glow, var(--accent));
  opacity: 0;
  transition: opacity 0.12s ease;
  transform: translate(-50%, -50%);
}
#dockCaret.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dock-edge { transition: none; }
}
/* статус-элементы скрыты из шапки (JS-цели сохранены) */
.header .dot, .header #statusText, .header .count { display: none !important; }
.header .header-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  transition: background var(--transition);
}
.header .header-status .dot.on {
  background: var(--accent);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}
.header .header-status .count { color: var(--text-secondary); }

/* ── тумблер формаций ── */
/* Кнопки шапки: Тема / Настройки / Формации / Обновления — только иконки,
   квадрат 28px, подпись — в тултипе title */
.form-btn,
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
              box-shadow var(--transition), background var(--transition),
              transform 0.08s var(--ease);
}
.form-btn:hover,
.theme-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--menu-hover);
  box-shadow: 0 0 12px var(--accent-soft-2);
}
.form-btn:active,
.theme-btn:active { transform: scale(0.96); }
/* иконки кнопок шапки — единый размер (перебивает 12px из themes.css:
   layout.css подключён позже при равной специфичности) */
.form-btn svg,
.theme-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* шестерёнка настроек оптически меньше соседей (разреженные штрихи):
   чуть крупнее иконка — визуальный вес как у остальных */
#settingsBtn svg {
  width: 18px;
  height: 18px;
}
/* тёмные темы: все иконки шапки белые (кнопки, аватар, бургер) */
html[data-mode="dark"] .header .theme-btn,
html[data-mode="dark"] .header .form-btn,
html[data-mode="dark"] .header .avatar-btn,
html[data-mode="dark"] #collapseBtn {
  color: #FFFFFF;
}
html[data-mode="dark"] .header .theme-btn:hover,
html[data-mode="dark"] .header .form-btn:hover,
html[data-mode="dark"] .header .avatar-btn:hover {
  color: #FFFFFF;
}
#settingsBtn svg {
  width: 18px;
  height: 18px;
}
/* буква вместо иконки: тот же квадрат 28px, кегль под иконки 16px */
.form-letter {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
/* активное состояние тумблера — сдержанное, одинаковое на всех темах */
.form-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--text-primary);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip {
  height: 18px;
  min-width: 18px;
  padding: 0 7px 0 5px;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  color: var(--text-secondary);
}
/* взаимодействие — тот же серый, но оттенком светлее/темнее:
   text-secondary светлый на тёмных темах и тёмный на светлых */
.chip:hover { border-color: var(--text-secondary); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
/* активный фильтр виден всегда, даже под курсором: залитая пилюля +
   увеличенная точка. Ховер — только рамка и лифт, перепутать нельзя.
   Всё в монохроме, без акцентного цвета */
.chip.active {
  border-color: var(--text-secondary);
  background: var(--surface-hover);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  transition: transform var(--transition);
}
.chip.active .chip-dot { transform: scale(1.35); }
.chip-n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1;
}
.chip.active .chip-n { color: var(--text-primary); }

.main {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
  flex-direction: row;
}

.charts-panel {
  flex: 1;
  /* панель ТФ теперь в шапке — сетка начинается сразу под ней */
  padding: 4px;
  overflow-y: auto;
  background: var(--panel-tint);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar {
  width: var(--sidebar-w, 420px);
  min-width: var(--sidebar-w, 420px);
  border-left: 1px solid var(--border);
  background: var(--sidebar-bg);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  display: flex;
  flex-direction: column;
  /* без фейда opacity: его конец давал световую вспышку (blur-слой
     переключается на live-режим при opacity=1) */
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
/* ручка растягивания панели котировок */
.sidebar-resizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 30;
  transition: background 0.08s ease;
}
.sidebar-resizer:hover,
.sidebar-resizer.dragging {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}
.sidebar.collapsed .sidebar-resizer { display: none; }
.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none;
  opacity: 0;
}

.coin-list-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 20px;
}
/* биржа сменилась, юниверсум ещё в пути (холодный venue_pairs — до ~2 с):
   старое содержимое затемнено СРАЗУ — отклик клика виден мгновенно. На
   тёплом кэше класс ставится и снимается в одном тике — не мигает */
#coinList.vc-wait, #chartGrid.vc-wait {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s;
}
.coin-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* MacBook 13–14" (1440–1512px): сайдбар уже, место — графикам.
   Гард висит на <html>: именно там лежит inline --sidebar-w, проверка
   на .sidebar никогда бы не сработала и дефолт душил бы ручную ширину. */
@media (max-width: 1512px) {
  html:not([style*="--sidebar-w"]) .sidebar { width: 340px; min-width: 340px; }
}
@media (max-width: 900px) {
  html:not([style*="--sidebar-w"]) .sidebar { width: 280px; min-width: 280px; }
}
/* ───────────── Положение шапки и стороны панелей ─────────────
   Настройки «Внешний вид»: data-header на #app (top/bottom/left/right),
   data-side на #app (right/left — сторона меню монет) */

/* низ: шапка после рабочей области */
.app[data-header="bottom"] .header {
  order: 10;
  border-bottom: none;
  border-top: 1px solid var(--border);
}
.app[data-header="bottom"] .collapse-btn { top: auto; bottom: 6px; }
.app.ws-full[data-header="bottom"] .header { border-top-color: transparent; }

/* лево/право: шапка — вертикальная рейка */
.app[data-header="left"],
.app[data-header="right"] { flex-direction: row; }
.app[data-header="left"] .header,
.app[data-header="right"] .header {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 0;
  max-height: none;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  padding: 44px 0 10px;   /* 44px сверху — место под кнопку-бургер возле логотипа */
  border-bottom: none;
  overflow-y: auto;       /* низким экранам: рейка скроллится, а не распирает */
  overflow-x: hidden;
  scrollbar-width: none;
}
.app[data-header="left"] .header::-webkit-scrollbar,
.app[data-header="right"] .header::-webkit-scrollbar { display: none; }
/* рамка с обеих сторон (внешняя — прозрачная): padding-блок, в котором
   центрируются пилюля ТФ/лого/кнопки, ровно по середине рейки —
   иначе 1px-рамка с одного бока даёт системный сдвиг центра */
.app[data-header="left"] .header {
  order: -1;
  border-right: 1px solid var(--border);
  border-left: 1px solid transparent;
}
.app[data-header="right"] .header {
  order: 10;
  border-left: 1px solid var(--border);
  border-right: 1px solid transparent;
}
.app[data-header="left"] .ws-viewport,
.app[data-header="right"] .ws-viewport { min-width: 0; }
.app[data-header="left"] .header-left,
.app[data-header="right"] .header-left { flex-direction: column; gap: 8px; }
/* в рейке — короткий бейдж «FX» вместо полного названия:
   текст прячем, псевдо красим явно (иначе унаследует прозрачную
   заливку градиентного логотипа и станет невидимым) */
.app[data-header="left"] .logo-btn,
.app[data-header="right"] .logo-btn {
  font-size: 0;
  line-height: 0;
  background: none;
}
.app[data-header="left"] .logo-btn::after,
.app[data-header="right"] .logo-btn::after {
  content: "FX";
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.2px;
  /* те же цвета, что у названия в верхней шапке: бело-серый градиент */
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.app[data-header="left"] .chip-row,
.app[data-header="right"] .chip-row { flex-direction: column; gap: 6px; }
/* в рейке чипы маркеров — только цветные круги без циферблата:
   цифры скрыты, пилюля ужата в кольцо ради экономии места.
   Счётчики и фильтр продолжают работать как раньше */
.app[data-header="left"] .chip,
.app[data-header="right"] .chip {
  width: 18px;
  height: 18px;
  min-width: 0;
  padding: 0;
  gap: 0;
  border-radius: 50%;
}
.app[data-header="left"] .chip-n,
.app[data-header="right"] .chip-n { display: none; }
/* ТФ-переключатель в рейке — строго по центру рейки (как в верхней шапке
   по центру окна). Центрирование — полями left/right:0 + margin:auto,
   а не translateX: переживает любое переопределение transform в каскаде */
.app[data-header="left"] .header > #gridTfBar,
.app[data-header="right"] .header > #gridTfBar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 8px);
  margin: 0 auto;
  transform: translateY(-50%);
  flex-direction: column;
}
/* кнопки рейки — квадратные иконки без подписей */
.app[data-header="left"] .header-status,
.app[data-header="right"] .header-status { flex-direction: column; gap: 6px; }
/* кнопки рейки — те же квадратные иконки, что и в горизонтальной шапке */
.app[data-header="left"] .form-btn,
.app[data-header="right"] .form-btn,
.app[data-header="left"] .theme-btn,
.app[data-header="right"] .theme-btn { width: 28px; height: 28px; padding: 0; }
/* бургер — вверху рейки, возле названия продукта (как в верхней шапке) */
.app[data-header="left"] .collapse-btn { top: 6px; bottom: auto; left: 9px; }
.app[data-header="right"] .collapse-btn { top: 6px; bottom: auto; left: auto; right: 9px; }
/* скрытие шапки на слайдах 1–2: рейка схлопывается шириной */
.app.ws-full[data-header="left"] .header,
.app.ws-full[data-header="right"] .header {
  max-height: none;
  max-width: 0;
  min-width: 0;
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}

/* ── сторона меню монет: слева вместо справа ── */
.app[data-side="left"] .main { flex-direction: row-reverse; }
.app[data-side="left"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--border);
}
.app[data-side="left"] .sidebar.collapsed { border-right: none; }
/* ручка растягивания переезжает на внешнюю кромку (справа) */
.app[data-side="left"] .sidebar-resizer { left: auto; right: 0; }
.app[data-side="left"] .sidebar-resizer:hover,
.app[data-side="left"] .sidebar-resizer.dragging {
  background: linear-gradient(270deg, var(--accent-soft), transparent);
}
@media (max-width: 600px) {
  /* телефонная тема живёт в css/mobile.css (data-layout="mobile") */
  html:not([style*="--sidebar-w"]) .sidebar { width: 200px; min-width: 200px; }
  .charts-panel { padding: 4px; }
}

/* ── низкие экраны (MacBook Air 900px и ниже): вертикальная плотность ── */
@media (max-height: 900px) {
  .header { padding: 4px 16px 4px 54px; min-height: 36px; }
  .header h1 { font-size: 13px; }
  .collapse-btn { top: 4px; width: 28px; height: 28px; }
}

/* Телефоны: шторка монет и вся телефонная тема — css/mobile.css. */