/* ════════════════════════════════════════════════════════════
   ArtemonTools — Design System
   Dark theme default (data-theme="dark")
   Light theme via data-theme="light"
   ════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px;

  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Transitions */
  --dur: 120ms;
  --ease: cubic-bezier(.4,0,.2,1);

  /* Brand — богатое «старое золото» вместо салатового (просьба владельца) */
  --brand:      #D4AF37;   /* rich old gold */
  --brand-dim:  #B08F2D;
  --brand-glow: rgba(212,175,55,.16);
  --gold:       #F5B50A;   /* active nav marker */
  --gold-dim:   #D19A08;

  /* Semantic colours — биржевая палитра (Binance/TradingView) */
  --c-pos:   #00C853;   /* positive / long */
  --c-neg:   #FF3B30;   /* negative / short */
  --c-warn:  #F59E0B;
  --c-info:  #3B82F6;

  /* Контур активных переключателей: белый вместо золота — золото остаётся
     фирменным цветом текста и акцентов, но рамки читаются лучше белыми */
  --outline:      rgba(255,255,255,.85);
  --outline-soft: rgba(255,255,255,.10);

  /* Крестик «скрыть связку»: приглушённый кирпич, чтобы столбец крестиков
     не читался как красная полоса вдоль всей таблицы */
  --hide-x:    #8C453E;
  --hide-x-hi: #FF3B30;

  /* Кнопка графика связки в колонке «48ч» */
  --spark-btn-fg:      #D4AF37;
  --spark-btn-bg:      rgba(212,175,55,.12);
  --spark-btn-bd:      rgba(212,175,55,.38);
  --spark-btn-glow:    rgba(212,175,55,.20);
  --spark-btn-fg-hi:   #F5B50A;
  --spark-btn-bg-hi:   rgba(245,181,10,.22);
  --spark-btn-bd-hi:   rgba(245,181,10,.70);
  --spark-btn-glow-hi: rgba(245,181,10,.45);

  /* Sidebar width */
  --sidebar-w: 220px;
}

/* ── Dark theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0E1011;
  --bg-panel:  #15181A;
  --bg-card:   #1C2023;
  --bg-hover:  #23282C;
  --bg-modal:  #131619;
  --border:    rgba(255,255,255,.09);
  --border-hi: rgba(255,255,255,.16);

  --text-1:    #F0F2F2;   /* primary */
  --text-2:    #A3ABAA;   /* secondary */
  --text-3:    #6B7476;   /* tertiary */

  --scrollbar-thumb: #2C3236;
  --input-bg:  #1C2023;
  --border-soft: rgba(255,255,255,.05);
  --bg-float: rgba(8,10,9,.62);   /* плашки поверх графика */

  /* минималистичные фишки тулбара */
  --tb-chip-bg:    #14181B;
  --tb-chip-bg-hi: #1B2024;
  --tb-chip-bd:    rgba(255,255,255,.07);
  --tb-chip-bd-hi: rgba(255,255,255,.16);
  --tb-badge-bg:   rgba(255,255,255,.06);
  --tb-badge-fg:   #C6CDCC;
  --tb-badge-bd:   rgba(255,255,255,.12);

  color-scheme: dark;
}

/* ── Light theme ────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #F3F4F5;
  --bg-panel:  #FFFFFF;
  --bg-card:   #F8F9FA;
  --bg-hover:  #EDF0F1;
  --bg-modal:  #FFFFFF;
  --border:    rgba(0,0,0,.10);
  --border-hi: rgba(0,0,0,.17);

  --text-1:    #14181A;
  --text-2:    #4C555A;
  --text-3:    #8A9499;

  --scrollbar-thumb: #CDD3D6;
  --input-bg:  #F1F3F4;
  --border-soft: rgba(0,0,0,.06);

  /* минималистичные фишки тулбара (light) */
  --tb-chip-bg:    #FFFFFF;
  --tb-chip-bg-hi: #F1F3F4;
  --tb-chip-bd:    rgba(0,0,0,.10);
  --tb-chip-bd-hi: rgba(0,0,0,.20);
  --tb-badge-bg:   rgba(0,0,0,.06);
  --tb-badge-fg:   #4C555A;
  --tb-badge-bd:   rgba(0,0,0,.12);
  /* плашки поверх графика: на белом холсте нужна светлая подложка,
     иначе тёмный текст ложится на тёмный фон и не читается */
  --bg-float: rgba(255,255,255,.86);
  /* на светлой теме белый контур не виден — берём тёмный */
  --outline:      rgba(0,0,0,.75);
  --outline-soft: rgba(0,0,0,.08);

  /* На белом тёмный кирпич сливается с текстом — берём чуть насыщеннее */
  --hide-x:    #B0655D;
  --hide-x-hi: #C62B20;

  /* Светлое золото на белом не читается — уводим в бронзу и уплотняем фон */
  --spark-btn-fg:      #7A5B06;
  --spark-btn-bg:      rgba(212,175,55,.30);
  --spark-btn-bd:      rgba(150,112,10,.55);
  --spark-btn-glow:    rgba(150,112,10,.14);
  --spark-btn-fg-hi:   #FFFFFF;
  --spark-btn-bg-hi:   #B8860B;
  --spark-btn-bd-hi:   #8A6508;
  --spark-btn-glow-hi: rgba(184,134,11,.45);

  color-scheme: light;
}

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

html { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-1);
  background: var(--bg);
  display: flex;
  height: 100%;
  overflow: hidden;
  zoom: 1.08;            /* чуть крупнее весь интерфейс */
}

#footer { zoom: 0.926; }  /* футер оставляем прежнего размера */
/* canvas-графики не дружат с zoom на body: координаты мыши (перекрестие,
   тултип) уезжают. Нейтрализуем зум на странице графиков (1/1.08). */
#page-charts { zoom: 0.9259; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dim); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar ────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  transition: width .35s cubic-bezier(.16,1,.3,1);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 56px;            /* = высота #topbar, чтобы линии совпадали */
  flex-shrink: 0;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: gap .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1);
}

.sidebar-brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
}

.sidebar-brand-name {
  font-family: "Unbounded", var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.2px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-3) 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              gap .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.nav-item svg { flex-shrink: 0; opacity: .7; }

.nav-item:hover {
  color: var(--text-1);
  background: var(--bg-hover);
}

.nav-item.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: var(--bg-hover);
}

.nav-item.active svg { opacity: 1; }

/* ── "Soon" nav item (disabled, upcoming feature) ───────── */
.nav-item.nav-soon {
  cursor: default;
  opacity: .55;
}
.nav-item.nav-soon:hover {
  color: var(--text-2);
  background: transparent;
}
.soon-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  opacity: .9;
  white-space: nowrap;
}

/* ── Collapsed sidebar ──────────────────────────────────── */
.sidebar-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sp-3) var(--sp-4);
}
html[data-sidebar="collapsed"] .sidebar-bottom {
  justify-content: center;
  padding: var(--sp-3) 0;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.sidebar-toggle:hover {
  color: var(--text-1);
  border-color: var(--border-hi);
  background: var(--bg-hover);
}

/* тексты плавно гаснут и схлопываются вместо резкого display:none */
.sidebar-brand-name,
.nav-item span {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  transition: opacity .18s var(--ease), max-width .35s cubic-bezier(.16,1,.3,1);
}
.sidebar-brand-name { white-space: nowrap; }
/* длинные названия пунктов переносятся на вторую строку, а не обрезаются */
.nav-item > span:not(.soon-badge) {
  white-space: normal;
  line-height: 1.3;
  min-width: 0;
}
.nav-item .soon-badge { flex-shrink: 0; }

html[data-sidebar="collapsed"] #sidebar { width: 64px; }
html[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0; gap: 0; }
html[data-sidebar="collapsed"] .sidebar-brand-name { opacity: 0; max-width: 0; }
/* Свёрнутый пункт: значок прижат слева на позиции, где он оказался бы по
   центру 64px, а не justify-content:center. При center текст и бейдж
   «Скоро», пока схлопываются, переполняли пункт, и значок улетал влево,
   а потом возвращался. Теперь значок стоит на месте всю анимацию */
html[data-sidebar="collapsed"] .nav-item { justify-content: flex-start; padding: var(--sp-3) 0 var(--sp-3) 22px; gap: 0; }
/* nowrap обязателен: у нулевой ширины перенос ставит КАЖДЫЙ символ на свою
   строку, и свёрнутый пункт вытягивался в столбик высотой в полэкрана
   (заметнее всего в корейском и китайском, где переносить можно везде) */
html[data-sidebar="collapsed"] .nav-item span { opacity: 0; max-width: 0; white-space: nowrap; }
html[data-sidebar="collapsed"] .soon-badge {
  padding: 0;
  border-color: transparent;
  margin-left: 0;
  animation: none;
}

/* ── Main area ──────────────────────────────────────────── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Top bar ────────────────────────────────────────────── */
#topbar {
  height: 56px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
  z-index: 90;
}

.topbar-spacer { flex: 1; }

.topbar-cluster {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Language picker */
.lang-btn {
  background: none;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--dur) var(--ease);
}
.lang-btn:hover { color: var(--text-1); border-color: var(--outline); }
.lang-btn span { font-size: 10px; opacity: .7; }

/* Theme toggle */
.theme-btn {
  background: none;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 5px 7px;
  line-height: 1;
  transition: all var(--dur) var(--ease);
}
.theme-btn:hover { color: var(--text-1); border-color: var(--outline); }

/* Sign in button — зелёный контур (жёлтые кнопки убраны по решению владельца) */
.signin-btn {
  background: none;
  border: 1px solid #00D26A;
  color: #00D26A;
  border-radius: var(--r-sm);
  padding: 5px var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  /* в узком окне подпись ломалась на две строки и распирала шапку */
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.signin-btn:hover { background: rgba(0, 210, 106, .14); }
.signin-btn.logged-in {
  border-color: #00D26A;
  color: #00D26A;
  /* залогинен — компактная квадратная кнопка-аватар вместо ника */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
}
.signin-btn.logged-in svg { display: block; }

/* ── Toolbar (внутри topbar, одна строка) ───────────────── */
#toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow-x: auto;
}

/* Toolbar buttons */
/* минималистичные фишки тулбара: плоский тёмный фон, мягкие скругления,
   тонкий бордер, без свечения (просьба владельца 2026-09-05) */
.tb-btn {
  background: var(--tb-chip-bg);
  border: 1px solid var(--tb-chip-bd);
  color: var(--text-1);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tb-btn:hover { background: var(--tb-chip-bg-hi); border-color: var(--tb-chip-bd-hi); }
.tb-btn.has-active { border-color: var(--tb-chip-bd-hi); color: var(--text-1); }

/* бейдж-счётчик в фишках: минималистичный тёмный, а не золотая заливка */
/* пустой бейдж не показываем: до инициализации JS счётчики мигали «0/0» */
.tb-badge:empty { display: none; }
.tb-badge {
  background: var(--tb-badge-bg);
  color: var(--tb-badge-fg);
  border: 1px solid var(--tb-badge-bd);
  border-radius: 8px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Table fields dropdown ──────────────────────────────── */
.fields-dropdown { position: relative; }
.fields-menu {
  display: none;
  position: fixed;         /* #toolbar has overflow-x:auto and would clip an absolute menu */
  min-width: 240px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  padding: 6px;
  z-index: 300;
}
.fields-menu.open { display: block; }
.field-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
  user-select: none;
}
.field-item:hover { background: var(--bg-hover); }
.field-item input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
}
.fields-menu-foot {
  display: flex;
  gap: 8px;
  padding: 8px 12px 10px;
  margin: 4px -6px -6px;      /* растянуть на всю ширину меню, накрыв его padding */
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: -6px;               /* компенсирует нижний padding меню */
  background: var(--bg-modal);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.5);
}
.fields-menu-foot .tb-btn { flex: 1; justify-content: center; }

/* Ticker search */
.ticker-search {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-3);
  font-size: 13px;
  /* одна фиксированная ширина: раньше было 160px, а при фокусе 200px —
     поле прыгало на каждый клик и сдвигало кнопки справа */
  width: 200px;
  flex: 0 0 200px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ticker-search:focus {
  outline: none;
  border-color: var(--outline);
  background: var(--input-bg);
  /* ширину при фокусе не меняем: поле дёргалось и толкало соседние кнопки */
}
.ticker-search::placeholder { color: var(--text-3); }

/* Countdown */
/* Кнопка «график связки» рядом с мини-графиком */
/* Кнопка стоит В ПОТОКЕ, сразу за мини-графиком: абсолютную у правого
   края ячейки срезал край таблицы — в последней колонке её было не нажать */
.spark-cell { white-space: nowrap; }
.spark-open {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 5px;
  width: 20px; height: 20px; padding: 3px;
  border: 1px solid var(--spark-btn-bd); border-radius: 5px;
  background: var(--spark-btn-bg); cursor: pointer;
  color: var(--spark-btn-fg);
  box-shadow: 0 0 8px var(--spark-btn-glow);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.spark-open svg { width: 100%; height: 100%; display: block; }
.spark-open:hover {
  color: var(--spark-btn-fg-hi);
  background: var(--spark-btn-bg-hi); border-color: var(--spark-btn-bd-hi);
  box-shadow: 0 0 14px var(--spark-btn-glow-hi);
  transform: scale(1.14);
}

/* Всплывающий график связки */
#spark-pop {
  position: fixed; z-index: 220; width: 520px; max-width: 94vw;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  padding: 10px 12px 12px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#spark-pop.on { opacity: 1; visibility: visible; transform: none; }
.pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pop-head b { font-size: 14px; color: var(--text-1); }
.pop-head i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.pop-tabs { margin-left: auto; display: inline-flex; gap: 2px;
            background: var(--bg-card); border-radius: var(--r-sm); padding: 2px; }
.pop-tabs button {
  border: 0; background: none; cursor: pointer; padding: 3px 10px;
  border-radius: 4px; color: var(--text-3); font: inherit; font-size: 11.5px; font-weight: 600;
}
.pop-tabs button.on { background: var(--bg-hover); color: var(--text-1); }
/* колёсиком зумим, с Shift — прокручиваем: курсор об этом и говорит */
.pop-plot {
  position: relative; cursor: crosshair; overscroll-behavior: contain;
  display: flex; align-items: stretch;
}
/* холст и шкала — соседи: шкала своей ширины, холст забирает остальное.
   Высота 220px совпадает с viewBox по вертикали, поэтому пиксели и единицы
   viewBox по Y равны один к одному — на этом держится перекрестие */
.pop-canvas { position: relative; flex: 1 1 auto; min-width: 0; height: 220px; }
.pop-plot svg { display: block; width: 100%; height: 220px; overflow: visible; }
.pop-axis {
  position: relative; flex: 0 0 58px; width: 58px;
  border-left: 1px solid var(--border);
}
.pop-tick {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  white-space: nowrap; pointer-events: none;
}
.pop-tick.zero { color: var(--text-2); }
/* Сетку не рисуем: значения читаются по шкале справа, а внутри холста
   пунктир сетки путался с нулевой линией и нитями перекрестия */
.pop-grid { display: none; }

/* ── Перекрестие ── */
.pop-cv, .pop-ch {
  position: absolute; pointer-events: none; z-index: 3;
  background: transparent;
  border-color: var(--text-3);
}
.pop-cv { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--text-3); opacity: .75; }
.pop-ch { left: 0; right: 0; height: 0; border-top: 1px dashed var(--text-3); opacity: .75; }
/* точки на линиях под курсором */
.pop-cd {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
  border: 1.5px solid var(--bg-modal);
}
.pop-cd.pos { background: var(--c-pos); }
.pop-cd.neg { background: var(--c-neg); }
/* значение под горизонталью — прямо на шкале */
.pop-cval {
  position: absolute; right: 3px; transform: translateY(-50%);
  padding: 1px 5px; border-radius: 3px; z-index: 5;
  background: var(--text-2); color: var(--bg-modal);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  white-space: nowrap; pointer-events: none;
}
/* подсказка со временем и значениями.
   [hidden] здесь ОБЯЗАТЕЛЕН отдельным правилом: авторский display: flex
   перебивает браузерное [hidden] { display: none }, и пустая рамка
   подсказки висела поверх графика всё время, а не только под курсором */
.pop-tip[hidden] { display: none !important; }
.pop-tip {
  position: absolute; top: 6px; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; border-radius: var(--r-sm);
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  font-size: 11px; white-space: nowrap;
}
.pop-tip b { color: var(--text-2); font-size: 10.5px; font-weight: 600; }
.pop-tip .pos { color: var(--c-pos); font-family: var(--font-mono); font-weight: 600; }
.pop-tip .neg { color: var(--c-neg); font-family: var(--font-mono); font-weight: 600; }
.pop-area { stroke: none; }
.pop-line { fill: none; stroke-width: 1.4;
            stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pop-line.pos { stroke: var(--c-pos); filter: drop-shadow(0 0 4px rgba(0,200,83,.45)); }
.pop-line.neg { stroke: var(--c-neg); filter: drop-shadow(0 0 4px rgba(255,59,48,.45)); }
.pop-dot.pos { fill: var(--c-pos); }
.pop-dot.neg { fill: var(--c-neg); }
.pop-zero { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5;
            vector-effect: non-scaling-stroke; }
/* Подписи последних значений In/Out у правого края — как на большом графике */
.pop-badge {
  position: absolute; right: 2px; transform: translateY(-50%); z-index: 2;
  padding: 1px 6px; border-radius: 3px; pointer-events: none;
  font-family: var(--font-mono, inherit); font-size: 10.5px; font-weight: 700;
  color: #0B0E0C; white-space: nowrap;
}
.pop-badge.pos { background: var(--c-pos); box-shadow: 0 0 10px rgba(0,200,83,.35); }
.pop-badge.neg { background: var(--c-neg); box-shadow: 0 0 10px rgba(255,59,48,.35); }
.pop-range { position: absolute; left: 4px; top: 2px; z-index: 2;
             font-size: 10.5px; color: var(--text-3); pointer-events: none; }
.pop-empty { height: 220px; display: flex; align-items: center; justify-content: center;
             color: var(--text-3); }

/* Пояснение «тикер не проходит по фильтрам» */
#filter-notice {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 12px; padding: 9px 12px;
  border: 1px solid var(--border-hi); border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  font-size: 12.5px; color: var(--text-2);
}
#filter-notice .fn-tick {
  font-weight: 700; color: var(--text-1); letter-spacing: .02em;
}
#filter-notice .fn-text { flex: 1; min-width: 0; }

/* Кнопка догрузки под таблицей */
.load-more {
  display: block; margin: 10px auto 18px; height: 32px; padding: 0 18px;
}
.load-more:disabled { opacity: .5; cursor: default; }
/* Подсказка на месте кнопки, когда упёрлись в потолок раскрытия */
.load-more-note {
  display: block;
  margin: 10px auto 18px;
  padding: 0 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}

/* Крестик в строке: убрать связку в «Скрытые» */
.tick-cell { position: relative; padding-left: 24px !important; text-align: left !important; }
/* Тикер режется по ширине колонки; колонку считает tickColWidth() по топ-10
   строкам — редкий длинный тикер её не раздвигает, а раскрывается кликом */
.tick-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «…» — это кликабельно: подчёркиваем пунктиром, чтобы было видно */
.tick-name.tick-cut {
  cursor: pointer;
  text-decoration: underline dotted var(--text-3);
  text-underline-offset: 3px;
}
.tick-name.tick-cut:hover { color: var(--brand); text-decoration-color: var(--brand); }
/* раскрытый тикер ложится плашкой поверх строки — колонку он не двигает */
.tick-cell.tick-open { overflow: visible; z-index: 40; }
.tick-cell.tick-open .tick-name {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 280px;
  overflow: visible; text-decoration: none;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  color: var(--text-1); z-index: 41;
}
.row-hide {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; background: none; cursor: pointer;
  /* яркость как у закладки; без transform-анимации — она давала дрожание */
  color: var(--hide-x); font-size: 14px; font-weight: 600; opacity: .8;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease),
              text-shadow var(--dur) var(--ease);
}
.opp-table tbody tr:hover .row-hide { opacity: 1; }
/* Сохранённые: вместо крестика — светящаяся закладка; клик убирает связку */
.row-hide.fav-mark { width: 18px; height: 18px; opacity: 1; color: #F5B50A; }
.row-hide.fav-mark svg {
  width: 16px; height: 16px; display: block; margin: 0 auto;
  fill: #F5B50A; stroke: #F5B50A; stroke-width: 1.2;
  filter: drop-shadow(0 0 5px rgba(245,181,10,.55));
  transition: filter var(--dur) var(--ease), fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.row-hide.fav-mark:hover { color: #F5B50A; text-shadow: none; }
.row-hide.fav-mark:hover svg { fill: transparent; filter: none; }
.row-hide:hover {
  opacity: 1 !important; color: var(--hide-x-hi);
  text-shadow: 0 0 9px rgba(255, 59, 48, .55);
}
/* Закладка «в избранное» под крестиком (строка двухэтажная): пустой
   контур пока не сохранено, золотая светящаяся — когда сохранено */
.tick-cell.tick-2 .row-hide { top: 32%; }   /* только там, где под крестиком закладка */
.row-fav {
  position: absolute; left: 3px; top: 68%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; background: none; cursor: pointer;
  color: #F5B50A; opacity: .8;   /* золотой контур — чтобы закладку было видно сразу */
  /* без transform-анимации: увеличение при наведении меняло область
     кнопки под курсором, и закладка дрожала на границе */
  transition: opacity var(--dur) var(--ease);
}
.row-fav svg {
  width: 16px; height: 16px; display: block; margin: 0 auto;
  fill: transparent; stroke: currentColor; stroke-width: 1.8;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.opp-table tbody tr:hover .row-fav { opacity: 1; }
.row-fav:hover { opacity: 1 !important; color: #F5B50A; }
.row-fav.on { opacity: 1; color: #F5B50A; }
.row-fav.on svg { fill: #F5B50A; stroke: #F5B50A; filter: drop-shadow(0 0 5px rgba(245,181,10,.55)); }
.row-fav:disabled { cursor: default; }
/* рамка фокуса после клика мышью не нужна (с клавиатуры остаётся) */
.row-fav:focus:not(:focus-visible), .row-hide:focus:not(:focus-visible) { outline: none; }
.ptype-cell { color: var(--text-3); font-size: 11.5px; }

/* ── Категория инструмента ──
   Ярлык в таблице. Крипта — приглушённая: она в подавляющем большинстве
   строк, и красить её ярко значит зашумить всю колонку. Реальные активы,
   наоборот, выделяем — их ищут глазами. */
.cat-cell { font-size: 11.5px; }
.cat-tag {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
.cat-crypto      { color: var(--text-3); }
.cat-stocks      { color: #58A6FF; background: rgba(88,166,255,.12);  border-color: rgba(88,166,255,.30); }
.cat-indices     { color: #A78BFA; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.30); }
.cat-commodities { color: var(--brand); background: rgba(212,175,55,.14); border-color: rgba(212,175,55,.32); }
.cat-fx          { color: #2DD4BF; background: rgba(45,212,191,.12);  border-color: rgba(45,212,191,.30); }
.cat-pre_ipo     { color: #F472B6; background: rgba(244,114,182,.14); border-color: rgba(244,114,182,.32); }
.cat-pre_market  { color: #FB923C; background: rgba(251,146,60,.14);  border-color: rgba(251,146,60,.32); }

/* RWA — заголовок группы, пять подкатегорий под ним с отступом */
.field-item.cat-group { font-weight: 700; color: var(--text-1); }
.field-item.cat-sub { padding-left: 28px; }
.field-item.cat-sub::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0;
  border-left: 1px solid var(--border);
}
.field-item.cat-sub { position: relative; }

/* Список скрытых связок */
#hidden-menu {
  min-width: 380px; max-width: 460px; max-height: 340px;
  overflow-y: auto; overflow-x: hidden; padding: 4px;
}
.hidden-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 18px; font-size: 12px; color: var(--text-2);
}
.hidden-item + .hidden-item { border-top: 1px solid var(--border); }
/* группа монеты: шапка «BP · 5 · Вернуть» + её связки с отступом */
.hidden-grp + .hidden-grp { border-top: 1px solid var(--border-hi); }
.hidden-grp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 3px;
  cursor: pointer; user-select: none;
}
.hidden-grp-head:hover .hg-coin { color: var(--brand); }
.hg-car { width: 10px; color: var(--text-3); font-size: 10px; flex-shrink: 0; }
.hidden-grp-items[hidden] { display: none; }
.hg-coin { font-size: 12.5px; color: var(--text-1); letter-spacing: .03em; }
.hg-cnt {
  min-width: 16px; padding: 0 4px; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-3); font-size: 10px; font-weight: 700; text-align: center;
}
.hidden-grp-head .hidden-back-grp { margin-left: auto; }
/* имя связки — единственное, что тянется и жмётся; спред и кнопка держат
   свою ширину, иначе строка распирала меню и внизу появлялась прокрутка */
.hi-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Спред связки: по нему видно, зачем её вообще убрали из таблицы */
.hi-spread {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
}
.hi-spread.pos  { color: var(--c-pos); }
.hi-spread.neg  { color: var(--c-neg); }
.hi-spread.none { color: var(--text-3); }
/* тег категории в строке: ширину держит по содержимому, имя связки жмётся */
.hidden-item .cat-tag { flex: 0 0 auto; }
/* В таблице `crypto` намеренно без подложки — иначе колонка зашумлена.
   А в «Скрытых» строк десятки, и голый текст рядом с пилюлями Pre-IPO
   читается как «тега нет»: здесь даём ту же форму, только нейтральную. */
.hidden-item .cat-crypto {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}
.hidden-item .tb-btn { flex: 0 0 auto; height: 24px; padding: 0 8px; font-size: 11px; }
.hidden-empty { padding: 10px; color: var(--text-3); font-size: 12px; }

/* Период обновления таблицы: часы + число секунд */
.rate-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 30px; padding: 0 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: text;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rate-pill:hover, .rate-pill:focus-within { color: var(--text-1); border-color: var(--outline); }
.rate-pill input {
  width: 34px; padding: 0; border: 0; background: none;
  color: var(--text-1); font: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: left; outline: none;
  -moz-appearance: textfield;
}
.rate-pill input::-webkit-outer-spin-button,
.rate-pill input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.countdown-pill {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ── Content pane ───────────────────────────────────────── */
#content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Page sections */
.page { display: none; }
.page.active { display: flex; flex-direction: column; height: 100%; }

/* ════════════════════════════════════════════════════════════
   OPPORTUNITIES TABLE
   ════════════════════════════════════════════════════════════ */
.table-wrap {
  flex: 1;
  overflow: auto;
}

table.opp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
/* Ширины колонок задаёт applyColVis отдельным <style> (table-layout: fixed).
   Прежнее width:1% раскладывало таблицу по содержимому — длинный тикер или
   цена с восемью знаками сдвигали все колонки вбок на каждом обновлении. */

.opp-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  color: var(--text-3);
  /* Заголовки ужаты и переносятся на две строки: так колонка живёт по
     ширине ЧИСЕЛ, а не по длине подписи — русские «СПРЕД НА ВЫХОД» и
     «ФАНДИНГ-СПРЕД» в одну строку требовали втрое больше места, чем сами
     значения, и на экран влезало вдвое меньше колонок. */
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2px;
  line-height: 1.25;
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  user-select: none;
}

.opp-table thead th:hover { color: var(--text-1); }
/* Указатель сортировки. Раньше это была стрелка через content:" ↑" —
   она добавлялась В ПОТОК и на каждый клик сдвигала заголовок столбца.
   Теперь это шеврон в своём, заранее отведённом месте: место занято
   всегда, поэтому текст на месте, а появляется только сам значок. */
.opp-table thead th { position: relative; padding-right: 15px; }
/* перетаскивание колонки за заголовок */
.opp-table thead th { cursor: grab; user-select: none; }
.opp-table thead th.col-dragging { cursor: grabbing; background: var(--bg-hover); opacity: .75; }
.opp-table thead th::after {
  content: "";
  position: absolute; top: 50%; right: 6px;
  width: 9px; height: 9px; margin-top: -5px;
  background: currentColor; opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* шеврон «⌄» одной маской — без шрифтовых глифов и лишних узлов */
  -webkit-mask: no-repeat center / 9px 9px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1.4 5 4.6 9 1.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: no-repeat center / 9px 9px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1.4 5 4.6 9 1.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.opp-table thead th.sort-desc::after { opacity: 1; color: var(--brand); }
.opp-table thead th.sort-asc::after  { opacity: 1; color: var(--brand); transform: rotate(180deg); }

.opp-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
  cursor: pointer;
}
.opp-table tbody tr:hover { background: var(--bg-hover); }

/* ── Мини-график за 48 часов в строке таблицы ── */
.spark-cell { padding: 3px 9px !important; }
.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark-zero {
  stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45;
}
.spark-l { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.spark-l.pos { stroke: var(--c-pos); }
.spark-l.neg { stroke: var(--c-neg); }
.spark-bar.pos { fill: var(--c-pos); opacity: .9; }
.spark-bar.neg { fill: var(--c-neg); opacity: .9; }
.pop-bar.pos { fill: var(--c-pos); opacity: .85; }
.pop-bar.neg { fill: var(--c-neg); opacity: .85; }
.spark-dot.pos { fill: var(--c-pos); }
.spark-dot.neg { fill: var(--c-neg); }
/* Нет данных — прочерк занимает РОВНО ту же ширину, что и график, иначе
   кнопка съезжала к центру ячейки и выпадала из общего столбца кнопок */
.spark-empty { color: var(--text-3); display: inline-block; vertical-align: middle; }
.spark-cell  .spark-empty { width: 88px; }
.spark2-cell .spark-empty { width: 104px; }
/* «48ч спред»: две линии в ячейке — вход зелёный сверху, выход красный снизу */
.spark2 { display: inline-block; vertical-align: middle; overflow: visible; }
.spark2-cell { padding: 3px 9px !important; white-space: nowrap; }

.opp-table td {
  padding: 4px 6px;
  text-align: right;
  color: var(--text-1);
  white-space: nowrap;
}

/* По центру всё, кроме «Тикера» и «Пары»: их читают слева направо.
   Ставим ПОСЛЕ базового правила td — иначе оно перебивало выравнивание. */
.opp-table thead th, .opp-table tbody td { text-align: center; }

/* Цвет числа в самой ячейке: класс висит на <td>, а базовое правило
   .opp-table td (вес выше) красило его в обычный текст — колонки спреда,
   фандинг-спреда и годовых были белыми, хотя классы им проставлялись. */
.opp-table tbody td.val-pos { color: var(--num-pos); font-weight: 600; }
.opp-table tbody td.val-neg { color: var(--num-neg); font-weight: 600; }
.opp-table tbody td.val-neutral { color: var(--text-3); }

/* ── колонка «Деп/Выв»: строка на ногу «L ↓● ↑●» — депозит и вывод раздельно ── */
.nets-cell { font-size: 11px; }
.nets-row { display: flex; align-items: center; gap: 8px; line-height: 1.9; white-space: nowrap; }
.nets-row b {
  font-weight: 600; font-size: 10.5px; letter-spacing: .5px;
  color: var(--text-3);
}
.nets-grp { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); }
/* объединённая колонка «Спред вход/выход»: вход сверху, выход снизу */
.io-cell { line-height: 1.5; }
/* «Макс. позиция»: две строки L/S, как у «Деп/Выв»; ∞ — лимита нет (спот, DEX) */
.mp-cell { font-size: 11px; }
.mp-row { display: flex; align-items: center; gap: 8px; line-height: 1.9; white-space: nowrap; }
.mp-row b { font-weight: 600; font-size: 10.5px; letter-spacing: .5px; color: var(--text-3); }
.mp-inf { color: var(--c-pos); font-weight: 700; font-size: 14px; line-height: 1; cursor: default; }
.nd {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3); opacity: .35; display: inline-block;
}
.nd.on  { background: var(--c-pos); opacity: 1; }
.nd.off { background: var(--c-neg); opacity: 1; }
.nd + .nd { margin-left: -1px; }   /* несколько открытых сетей — точки подряд */

/* ── ховер-окно «Деп/Выв»: все биржи монеты ── */
.nets-pop {
  position: fixed; z-index: 120;
  /* на узком экране окно не шире вьюпорта — иначе никакой клампинг
     позиции не спасал бы от обрезания правой колонки */
  min-width: min(380px, calc(100vw - 16px));
  max-width: min(460px, calc(100vw - 16px));
  max-height: 60vh; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  font-size: 12px;
}
.npop-head {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-3);
  padding: var(--sp-1) 0 var(--sp-2);
}
.npop-row {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--sp-2) var(--sp-3); align-items: center;
  padding: 5px 6px; border-radius: var(--r-sm);
}
.npop-row:hover { background: var(--bg-card); }
/* ноги связки подсвечены слева: лонг зелёным, шорт красным */
.npop-long  { box-shadow: inset 2px 0 0 var(--c-pos); }
.npop-short { box-shadow: inset 2px 0 0 var(--c-neg); }
.npop-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.npop-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npop-frh {
  font-size: 9.5px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px;
  flex-shrink: 0;
}
/* сети ноги: чипы «СЕТЬ Д✓ В✕», перенос по ширине окна */
.npop-nets { display: flex; flex-wrap: wrap; gap: 5px; }
.npop-net {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--input-bg); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-2); white-space: nowrap;
}
.npop-net b { color: var(--text-1); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.npop-dv { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); }
.npop-mk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.npop-mk.ok  { background: #00D26A; box-shadow: 0 0 5px rgba(0,210,106,.6); }
.npop-mk.bad { background: #FF5A52; box-shadow: 0 0 5px rgba(255,90,82,.5); }
.npop-mk.dim { background: var(--text-3); opacity: .5; }
.npop-pending, .npop-nonet { color: var(--text-3); font-size: 11px; }
.npop-sep { border-top: 1px solid var(--border); margin: var(--sp-1) 0; grid-column: 1 / -1; }

/* Ширины ставит applyColVis (table-layout: fixed). Содержимое, которое всё
   же не влезло, режем многоточием — иначе оно снова растянет колонку. */
.opp-table td { overflow: hidden; text-overflow: ellipsis; }
.opp-table th { overflow: hidden; }
.opp-table .leg-row { min-width: 0; }
.opp-table thead th:first-child, .opp-table tbody td:first-child,
.opp-table thead th:nth-child(2), .opp-table tbody td:nth-child(2) { text-align: left; }

/* три колонки в линию: ставка | интервал | отсчёт. Раньше строка без
   отсчёта (у 1ч-ноги его нет) уезжала вправо, и ставки двух ног не
   стояли друг под другом */
.fr-line {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr auto 46px;
  column-gap: 4px;
  align-items: center;
  justify-items: end;
}
.fr-line .countdown-tag { display: inline; margin-left: 0; justify-self: start; }
.fr-line .countdown-tag.cd-none { visibility: hidden; }
.fr-line .fr-int { margin-left: 0; }
/* Период начисления рядом со ставкой: 0.0050% раз в 4 часа и раз в 8 —
   разные деньги, а на глаз числа выглядят одинаковыми */
.fr-int {
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 2px;
}
.opp-table td:first-child,
.opp-table td:nth-child(2) { text-align: left; }

/* Venue chip */
.venue-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  vertical-align: middle;
}
.venue-chip:hover { border-color: var(--outline); color: var(--text-1); }

.venue-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Pair cell */
.pair-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Funding values */
.venue-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: contain;
}
.exc-title .venue-logo { width: 20px; height: 20px; }

/* ── Home / landing ─────────────────────────────────────── */
.home-page {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6) 72px;
  isolation: isolate;
}

/* ── Ambient aurora background (full-screen) ────────────── */
.home-aurora {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.home-aurora::before {        /* deep colour wash at the top */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 65% at 50% -5%, rgba(0,90,55,.30), transparent 60%);
}
.home-aurora::after {         /* cinematic vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 35%, transparent 55%, rgba(0,0,0,.42) 100%);
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .55;
  will-change: transform;
}
.aurora-blob.a1 {
  width: 55vw; height: 55vw;
  left: 50%; top: -30vw;
  margin-left: -27.5vw;
  background: radial-gradient(circle, rgba(212,175,55,.32), transparent 65%);
  animation: auroraDrift1 24s ease-in-out infinite alternate;
}
.aurora-blob.a2 {
  width: 44vw; height: 44vw;
  left: -18vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(0,190,180,.20), transparent 65%);
  animation: auroraDrift2 30s ease-in-out infinite alternate;
}
.aurora-blob.a3 {
  width: 38vw; height: 38vw;
  right: -14vw; top: 22vh;
  background: radial-gradient(circle, rgba(245,181,10,.12), transparent 65%);
  animation: auroraDrift3 27s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 { from { transform: translate(-5vw,0) scale(1); }   to { transform: translate(5vw,4vw) scale(1.18); } }
@keyframes auroraDrift2 { from { transform: translate(0,0) scale(1); }      to { transform: translate(8vw,-5vw) scale(1.12); } }
@keyframes auroraDrift3 { from { transform: translate(0,3vw) scale(1.05); } to { transform: translate(-7vw,-3vw) scale(.94); } }

/* rotating light beam behind the hero */
.aurora-beam {
  position: absolute;
  left: 50%; top: 30vh;
  width: 110vmin; height: 110vmin;
  margin: -55vmin 0 0 -55vmin;
  background: conic-gradient(from 0deg,
    transparent 0deg  40deg,  rgba(212,175,55,.10) 62deg,  transparent 84deg,
    transparent 150deg 190deg, rgba(0,190,180,.08) 212deg, transparent 234deg,
    transparent 300deg 322deg, rgba(245,181,10,.05) 338deg, transparent 354deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  animation: beamSpin 48s linear infinite;
  will-change: transform;
}
@keyframes beamSpin { to { transform: rotate(360deg); } }

.home-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 28%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 28%, #000 25%, transparent 78%);
}

/* ── Аврора на светлой теме ───────────────────────────────
   Тёмная виньетка и плотные блобы на белом давали серую муть.
   Светлой теме — лёгкая пастель: нежный зелёно-золотой градиент,
   полупрозрачные блобы, никакого затемнения по краям */
[data-theme="light"] .home-aurora::before {
  background: radial-gradient(ellipse 90% 65% at 50% -5%, rgba(0,170,95,.10), transparent 60%);
}
[data-theme="light"] .home-aurora::after { background: none; }
[data-theme="light"] .aurora-blob { opacity: .28; }
[data-theme="light"] .aurora-blob.a1 {
  background: radial-gradient(circle, rgba(212,175,55,.45), transparent 65%);
}
[data-theme="light"] .aurora-blob.a2 {
  background: radial-gradient(circle, rgba(0,170,150,.30), transparent 65%);
}
[data-theme="light"] .aurora-beam { opacity: .45; }
[data-theme="light"] .home-particles span {
  background: var(--gold-dim);
  box-shadow: 0 0 8px rgba(184,134,11,.55);
}

/* rising glow particles */
.home-particles { position: absolute; inset: 0; }
.home-particles span {
  position: absolute;
  bottom: -4vh;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(212,175,55,.75);
  opacity: 0;
  animation: particleRise linear infinite;
  will-change: transform, opacity;
}
@keyframes particleRise {
  0%   { transform: translateY(0) translateX(0);        opacity: 0; }
  8%   { opacity: .65; }
  60%  { opacity: .35; }
  100% { transform: translateY(-112vh) translateX(4vw); opacity: 0; }
}

/* ── Reveal (staggered entrance) ────────────────────────── */
.home-page .reveal {
  opacity: 0;
  animation: homeRise 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes homeRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
/* Повторный заход на главную (SPA-навигация): стартовый въезд не
   переигрываем — герой и фон стоят на местах сразу, без «прыжка» через
   секунду. Бесконечные анимации (парение лого, шиммер заголовка) живут */
#page-home.seen .home-page .reveal {
  opacity: 1;
  animation: none;
}
#page-home.seen .home-page .home-logo.reveal {
  animation: logoFloat 6s ease-in-out infinite;
}
#page-home.seen .home-page .home-title.reveal {
  animation: titleShimmer 7s linear infinite;
}

/* ── Hero ───────────────────────────────────────────────── */
/* компактнее по вертикали: герой вместе со статистикой (13 / 30K+ / 24/7)
   обязан помещаться в первый экран без прокрутки */
.home-hero { text-align: center; padding: 24px 0 var(--sp-6); }

.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-panel) 65%, transparent);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-2);
  margin-bottom: var(--sp-6);
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(212,175,55,.55);
  animation: badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.home-page .home-logo.reveal {
  display: block;
  margin: 0 auto var(--sp-4);
  border-radius: 20px;
  filter: drop-shadow(0 0 28px rgba(212,175,55,.35));
  animation: homeRise 1s cubic-bezier(.16,1,.3,1) var(--d, 0s) forwards,
             logoFloat 6s ease-in-out 1.4s infinite;
  transition: filter .35s var(--ease);
}
/* лёгкая подсветка при наведении — чуть шире ореол, чуть светлее плашка */
.home-page .home-logo:hover {
  filter: drop-shadow(0 0 34px rgba(212,175,55,.5)) brightness(1.06);
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.home-page .home-title.reveal {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -1.8px;
  background: linear-gradient(110deg, var(--text-1) 30%, var(--brand) 50%, var(--text-1) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: homeRise 1s cubic-bezier(.16,1,.3,1) var(--d, 0s) forwards,
             titleShimmer 7s linear 1.6s infinite;
}
@keyframes titleShimmer {
  from { background-position: 0% center; }
  to   { background-position: -220% center; }
}

.home-tagline {
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-top: var(--sp-4);
}
.home-sub {
  color: var(--text-2);
  margin: var(--sp-3) auto 0;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.7;
}

/* ── CTA ────────────────────────────────────────────────── */
.home-cta {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-top: var(--sp-6);
  /* стиль как у Sign In в шапке: прозрачный фон, зелёная рамка и текст */
  background: none;
  border: 1px solid #00D26A;
  color: #00D26A;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  padding: 15px 38px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(0, 210, 106, .12);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1),
              background .25s var(--ease);
}
@keyframes ctaSheen {
  0%, 55%  { left: -80%; }
  75%, 100% { left: 130%; }
}
.home-cta:hover {
  color: #00D26A;          /* глобальный a:hover не должен перекрасить текст */
  background: rgba(0, 210, 106, .14);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 18px rgba(0, 210, 106, .25), 0 18px 48px rgba(0, 210, 106, .18);
}

/* ── Stats strip ────────────────────────────────────────── */
.home-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  margin-top: 34px;
}
.home-stat-v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.5px;
}
.home-stat-l {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}
.home-stat-sep {
  width: 1px;
  height: 34px;
  background: linear-gradient(transparent, var(--border-hi), transparent);
}

/* ── Feature cards ──────────────────────────────────────── */
.home-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-top: 64px;
}
.home-feature {
  position: relative;
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .5s cubic-bezier(.16,1,.3,1);
}
.home-feature::before {      /* top light line */
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.home-feature:hover {
  transform: translateY(-8px);
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 24px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.10), 0 8px 40px rgba(212,175,55,.10);
}
.home-feature:hover::before { opacity: 1; }

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  margin-bottom: var(--sp-4);
  color: var(--brand);
  background: var(--brand-glow);
  border: 1px solid rgba(212,175,55,.25);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
/* без поворота и жёлтого «пятна»: иконка на ховере лишь слегка подрастает */
.home-feature:hover .feature-icon {
  transform: scale(1.05);
}
.home-feature h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: var(--sp-2);
  color: var(--text-1);
  letter-spacing: -.2px;
}
.home-feature p { font-size: 13px; color: var(--text-2); line-height: 1.65; }

@media (max-width: 640px) {
  .home-stats { gap: var(--sp-5); }
  .home-title { letter-spacing: -1px; }
}

/* ════════════════════════════════════════════════════════════
   GUIDE PAGE (статья)
   ════════════════════════════════════════════════════════════ */
.guide-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) 80px;
}
.guide-article h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-1);
  margin-bottom: var(--sp-5);
}
.guide-article h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text-1);
  margin: 44px 0 var(--sp-4);
}
.guide-article h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin: 30px 0 var(--sp-3);
}
.guide-article p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}
.guide-article .g-lead { color: var(--text-2); font-size: 15.5px; }
.guide-article img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin: var(--sp-2) 0 var(--sp-5);
}
.guide-article a { color: var(--brand); border-bottom: 1px solid rgba(212,175,55,.35); }
.guide-article a:hover { color: var(--brand-dim); }
.guide-article ul { margin: 0 0 var(--sp-4); padding-left: 22px; }
.guide-article li { font-size: 15px; line-height: 1.7; color: var(--text-1); margin-bottom: 6px; }
.guide-article blockquote {
  border-left: 3px solid var(--brand);
  background: var(--brand-glow);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--sp-4);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-1);
}
.guide-article .g-code {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}
.guide-article .g-note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ── Ноги пары (лонг/шорт) ──────────────────────────────── */
.leg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
  width: fit-content;     /* ссылка кликается только по тексту, не по пустоте справа */
  max-width: 100%;
}
.leg-side {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.leg-long  { background: var(--c-pos); }
.leg-short { background: var(--c-neg); }
.leg-name  { font-weight: 600; color: var(--text-1); white-space: nowrap; }
/* «!» у ноги, которую биржа снимает с торгов (объявлен/идёт делистинг) */
.leg-dl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 2px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255, 59, 48, .18);
  color: var(--c-neg); font-size: 10.5px; font-weight: 800; line-height: 1;
  cursor: help;
}
a.leg-row:hover .leg-name { color: var(--brand); }

/* ── Цифры моноширинным + тонкие разделители колонок ────── */
.mono,
.opp-table td:nth-child(n+3),
.exec-table td:not(:first-child),
.exc-fee-val, .exc-cost-val,
.info-card-val, .countdown-pill {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.opp-table th:not(:first-child),
.opp-table td:not(:first-child) {
  border-left: 1px solid var(--border-soft);
}

/* Цифры в таблице красим мягче, чем линии на графиках: неоновый
   зелёный поверх сотни чисел режет глаз, а приглушённый читается
   спокойно и не спорит с золотом акцентов. На графиках цвета прежние —
   там линия одна и ей нужна яркость. */
:root { --num-pos: #3FB950; --num-neg: #E05C5C; }
.val-pos { color: var(--num-pos); font-weight: 600; }
.val-neg { color: var(--num-neg); font-weight: 600; }
.val-neutral { color: var(--text-2); }

.countdown-tag {
  font-size: 11px;
  color: var(--text-3);
  display: block;
}

/* Realized indicator dots */
.real-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-left: 4px;
}

/* ── Table states ───────────────────────────────────────── */
.table-state {
  padding: 60px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
.table-state-icon { font-size: 36px; margin-bottom: var(--sp-3); }

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 13px;
  color: var(--text-2);
}
.pg-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 4px var(--sp-3);
  font-size: 12px;
  transition: all var(--dur) var(--ease);
}
.pg-btn:hover:not(:disabled) { border-color: var(--outline); color: var(--text-1); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

.per-page-sel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 4px var(--sp-2);
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════
   EXECUTION COST PAGE
   ════════════════════════════════════════════════════════════ */
.exec-page {
  padding: var(--sp-5);
}

/* Exec table */
.exec-table-wrap { overflow-x: auto; }
table.exec-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.exec-table th {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.exec-table th:first-child { text-align: left; }
.exec-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.exec-table td:first-child { text-align: left; }
.exec-table tr.best-row td:first-child { color: var(--c-pos); font-weight: 700; }
.exec-table tr.best-row td { background: rgba(38,196,126,.06); }
.exec-badge-best {
  display: inline-block;
  background: var(--c-pos);
  color: #000;
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
.exec-not-trading { color: var(--text-3); font-size: 12px; }

/* ════════════════════════════════════════════════════════════
   EXCHANGES PAGE
   ════════════════════════════════════════════════════════════ */
.exchanges-grid {
  display: grid;
  /* минимум 380px на карточку: с двумя рынками (FUT/SPOT) в четыре колонки
     цифры жались; шире карточка — максимум ТРИ биржи в ряд */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  max-width: 1420px;
  margin: 0 auto;
}

.exc-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur) var(--ease);
}
.exc-card:hover { border-color: var(--border-hi); }

.exc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exc-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.exc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-3);
}
.exc-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-ok   .exc-status-dot { background: var(--c-pos); }
.status-demo .exc-status-dot { background: var(--c-warn); }
.status-err  .exc-status-dot { background: var(--c-neg); }

.exc-fees-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--text-2);
}
/* биржа с нулевыми комиссиями: спокойная плашка вместо «скидки от $0» */
.exc-zero {
  padding: 10px 12px;
  border: 1px solid rgba(0, 210, 106, .35);
  border-radius: var(--r-md);
  background: rgba(0, 210, 106, .07);
  color: var(--c-pos); font-size: 12.5px; font-weight: 600;
  text-align: center; line-height: 1.5;
}
/* подстроки «Фьючерсы / Спот» под общей подписью комиссий */
.exc-fee-sub { margin-top: 2px; padding-left: var(--sp-2); }
.exc-fee-kind {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
/* значения комиссий не переносятся по «/» на новую строку */
.exc-fee-val, .exc-cost-val { white-space: nowrap; }
.exc-fee-val {
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  font-weight: 500;
}

.exc-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
}

.btn-signup {
  flex: 1;
  background: rgba(0, 210, 106, .12);
  border: 1px solid #00D26A;
  color: #00D26A;
  border-radius: var(--r-sm);
  padding: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  display: block;
}
.btn-signup:hover { background: #00D26A; color: #04150C; }

/* ════════════════════════════════════════════════════════════
   СТРАНИЦА БИРЖ: цена без ссылки и по ссылке
   ════════════════════════════════════════════════════════════ */

/* Шапка со сводкой: одно число вместо десятка карточек — сколько
   всего возвращается на каждом миллионе оборота */
.exc-hero {
  /* шапка выровнена с сеткой карточек (та ограничена 1420px по центру) */
  margin: var(--sp-5) auto 0;
  max-width: calc(1420px - 2 * var(--sp-5));
  width: calc(100% - 2 * var(--sp-5));
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid rgba(245, 181, 10, .28);
  background:
    radial-gradient(ellipse 80% 140% at 12% 0%, rgba(0, 210, 106, .10), transparent 70%),
    radial-gradient(ellipse 60% 160% at 92% 50%, rgba(245, 181, 10, .12), transparent 70%),
    linear-gradient(135deg, rgba(245, 181, 10, .10), rgba(245, 181, 10, .02));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.exc-hero-main { min-width: 0; }
.exc-hero-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  color: #04140B;
  background: linear-gradient(135deg, #00E27A, #00B058);
  box-shadow: 0 2px 10px rgba(0, 210, 106, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.exc-hero-t {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.3px;
  color: var(--text-1);
}
.exc-hero-s { margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
/* правая колонка: одна большая золотая цифра, продающая сильнее текста */
.exc-hero-stat { flex-shrink: 0; text-align: right; }
.exc-hero-num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  color: #F5B50A;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(245, 181, 10, .35);
  line-height: 1.1;
}
.exc-hero-lbl {
  margin-top: 2px;
  font-size: 12px; color: var(--text-2);
  max-width: 250px;
}
@media (max-width: 720px) {
  .exc-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .exc-hero-stat { text-align: left; }
}

/* Две колонки цены. Левая — сколько платит тот, кто пришёл сам,
   правая — сколько по ссылке. Разница должна читаться за полсекунды:
   левая приглушена и зачёркнута, правая зелёная и крупнее. */
.exc-cmp {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.exc-cmp-col { padding: 10px 12px; background: rgba(255, 255, 255, .02); min-width: 0; }
.exc-cmp-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.exc-cmp-val {
  margin-top: 3px;
  font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.exc-cmp-plain { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
/* две строки в колонке сравнения: FUT $500 / SPOT $1 000. Подписи короткие
   (FUT/SPOT, не переводятся): полные «Фьючерсы» распирали полуколонку,
   грид вылезал за карточку и правые значения резались */
.exc-cmp-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 3px; min-width: 0;
}
.exc-cmp-row .exc-cmp-val {
  margin-top: 0; font-size: 15px; white-space: nowrap;
}
.exc-cmp-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Правая колонка — цена по ссылке, главный акцент блока: зелёное стекло
   со свечением снизу, как у кнопки регистрации, чтобы читались одной
   системой. Значения светятся, зачёркнутая левая колонка остаётся тусклой */
.exc-cmp-ref {
  background:
    radial-gradient(ellipse 90% 150% at 50% 125%, rgba(0, 210, 106, .16), transparent 70%),
    rgba(0, 210, 106, .05);
  border-left: 1px solid rgba(0, 226, 122, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.exc-cmp-ref .exc-cmp-lbl { color: rgba(0, 226, 122, .75); }
.exc-cmp-ref .exc-cmp-val {
  color: #00E27A;
  text-shadow: 0 0 14px rgba(0, 210, 106, .30);
}
.exc-disc {
  padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 0;
  color: #04140B; background: linear-gradient(135deg, #00E27A, #00B058);
  box-shadow: 0 1px 6px rgba(0, 210, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Строка экономии: то же число, но словами — разницу между двумя
   ценами в голове считать не должен никто */
.exc-save {
  margin-top: var(--sp-2);
  font-size: 12.5px; color: var(--text-2);
}
.exc-save b { color: #F5B50A; font-weight: 700; font-variant-numeric: tabular-nums; }
.exc-save i { font-style: normal; color: var(--text-3); }

/* Кнопка со скидкой — главное действие карточки. Стиль главной CTA
   («Открыть сканер»): тёмное стекло, зелёная рамка со свечением и
   пробегающий блик; сплошная кислотная заливка выглядела чужеродно */
.btn-signup-hot {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px;
  background:
    radial-gradient(ellipse 90% 160% at 50% 130%, rgba(0, 210, 106, .18), transparent 70%),
    rgba(0, 210, 106, .04);
  border: 1px solid rgba(0, 226, 122, .55);
  color: #00E27A; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 0 20px rgba(0, 210, 106, .10), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease);
}
.btn-signup-hot:hover {
  background:
    radial-gradient(ellipse 90% 160% at 50% 130%, rgba(0, 210, 106, .26), transparent 70%),
    rgba(0, 210, 106, .10);
  color: #14F58C;
  border-color: #00E27A;
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(0, 210, 106, .28), 0 10px 26px rgba(0, 200, 83, .16);
}
.bs-disc {
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #00E27A, #00B058);
  color: #04140B;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 210, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ════════════════════════════════════════════════════════════
   SPREAD CHART PAGE
   ════════════════════════════════════════════════════════════ */
.charts-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-grid-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

/* «Развернуть» показываем только там, где есть что разворачивать */
.chart-grid.g1 .btn-max { display: none; }

.grid-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 5px var(--sp-3);
  font-size: 13px;
  transition: all var(--dur) var(--ease);
}
.grid-btn:hover, .grid-btn.active {
  border-color: var(--outline);
  color: var(--text-1);
}

.chart-grid {
  flex: 1;
  overflow: hidden;
  display: grid;
  gap: 1px;
  background: var(--border);
}
/* доли колонок/строк тянутся мышью за разделители (см. .grid-split) */
.chart-grid { --gc: 1; --gr: 1; position: relative; }
.chart-grid.g1 { grid-template-columns: 1fr; }
/* доли задаёт JS через style.gridTemplateColumns/Rows: в CSS нельзя
   склеить var() с единицей fr, а calc() с fr не работает */
.chart-grid.g2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.chart-grid.g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Разделители сетки: сама полоса тонкая, зона захвата шире — попасть
   мышью в 1px невозможно */
.grid-split {
  position: absolute; z-index: 20; display: none;
}
.chart-grid.g2 .grid-split-v, .chart-grid.g4 .grid-split-v { display: block; }
.chart-grid.g4 .grid-split-h { display: block; }
.grid-split-v { top: 0; bottom: 0; width: 9px; margin-left: -4px; cursor: col-resize; }
.grid-split-h { left: 0; right: 0; height: 9px; margin-top: -4px; cursor: row-resize; }
.grid-split::after {
  content: ""; position: absolute; background: var(--border);
  transition: background .12s ease;
}
.grid-split-v::after { top: 0; bottom: 0; left: 4px; width: 1px; }
.grid-split-h::after { left: 0; right: 0; top: 4px; height: 1px; }
.grid-split:hover::after, .grid-split.dragging::after { background: var(--brand); }

.chart-tile {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Шапка плитки — ручка переноса в сетке 2/4: на планшете долгое нажатие
   вместо переноса выделяло текст и показывало «Скопировать», а браузер
   отдавал жест прокрутке и обрывал pointer-события. Текст не выделяем,
   callout не показываем, жест целиком наш */
.chart-tile-header, .chart-tile-header * {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  .chart-grid.g2 .chart-tile-header, .chart-grid.g4 .chart-tile-header { touch-action: none; }
}
.chart-tile-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.chart-tile-pair { font-weight: 700; color: var(--text-1); }
.chart-tile-meta { color: var(--text-3); font-size: 11.5px; }
.chart-tile-spacer { flex: 1; }

.chart-tile-actions {
  display: flex;
  gap: var(--sp-1);
}

.tile-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: var(--r-sm);
  /* кнопки крупнее: в них целятся мышью, а иконка 13px была мелковата */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  font-size: 13px;
  transition: all var(--dur) var(--ease);
}
.tile-btn:hover { border-color: var(--outline); color: var(--text-1); }
.tile-btn svg { display: block; }

/* TF pills */
.tf-bar {
  display: flex;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.tf-pill {
  background: none;
  border: none;
  color: var(--text-3);
  border-radius: var(--r-sm);
  /* заодно крупнее: попасть в таймфрейм мышью было тесновато */
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.tf-pill:hover { color: var(--text-1); }
.tf-pill.active {
  background: var(--outline-soft);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--outline);
}

/* ── Таймфрейм списком: в сетке ряд пилюль не влезает ── */
.tf-dd { position: relative; display: none; flex-shrink: 0; }
.tf-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-1);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.tf-dd-btn:hover, .tf-dd.open .tf-dd-btn { border-color: var(--outline); }
.tf-dd-val { min-width: 26px; text-align: left; }
.tf-dd-car { font-size: 9px; color: var(--text-3); line-height: 1; }
.tf-dd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 76px; padding: 4px;
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.tf-dd.open .tf-dd-menu { display: block; animation: pageEnter .16s cubic-bezier(.16,1,.3,1); }
.tf-dd-opt {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border: none; background: none;
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.tf-dd-opt:hover { background: var(--bg-hover); color: var(--text-1); }
.tf-dd-opt.active {
  color: var(--text-1); background: var(--outline-soft);
  box-shadow: inset 0 0 0 1px var(--outline);
}

/* ── Панели списком: та же логика, что у таймфрейма ── */

/* ── Сохранённые раскладки графика (кнопка в строке панелей, 3 слота) ── */
.lay-dd { position: relative; margin-left: auto; flex-shrink: 0; }
.lay-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.lay-btn svg { width: 14px; height: 14px; }
/* подпись на кнопке — что это вообще такое; в тесной сетке 2×2 прячется */
.lay-btn-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.chart-grid.g4 .lay-btn-lbl { display: none; }
.lay-btn:hover, .lay-dd.open .lay-btn { border-color: var(--outline); color: var(--text-1); }
.lay-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 190px; padding: 4px;
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.lay-dd.open .lay-menu { display: block; animation: pageEnter .16s cubic-bezier(.16,1,.3,1); }
.lay-row { display: flex; align-items: center; gap: 4px; }
.lay-apply {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border: none; background: none; text-align: left;
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.lay-apply i { font-style: normal; font-size: 11px; color: var(--text-3); }
.lay-apply:not(.lay-none) i { color: var(--c-pos); }
.lay-apply:hover { background: var(--bg-hover); color: var(--text-1); }
.lay-apply.lay-none { cursor: default; }
.lay-apply.lay-none:hover { background: none; color: var(--text-2); }
.lay-save {
  flex-shrink: 0; display: inline-flex; padding: 5px;
  border: none; background: none; border-radius: var(--r-sm);
  color: var(--text-3); cursor: pointer; transition: all var(--dur) var(--ease);
}
.lay-save svg { width: 14px; height: 14px; }
.lay-save:hover { background: var(--bg-hover); color: var(--brand); }

.lay-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 10px 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.lay-cur {
  min-width: 13px; height: 13px; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-glow); border: 1px solid var(--brand);
  border-radius: 4px; color: var(--brand);
  font-size: 9px; font-weight: 800; font-style: normal; line-height: 1;
}
.lay-chip {
  flex-shrink: 0; padding: 2px 6px;
  background: var(--brand-glow); border: 1px solid var(--border-hi);
  border-radius: 999px; color: var(--text-2);
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.lay-star, .lay-ren {
  flex-shrink: 0; display: inline-flex; padding: 5px;
  border: none; background: none; border-radius: var(--r-sm);
  color: var(--text-3); cursor: pointer; transition: all var(--dur) var(--ease);
}
.lay-star svg, .lay-ren svg { width: 13px; height: 13px; }
.lay-star:hover, .lay-ren:hover { background: var(--bg-hover); color: var(--text-1); }
.lay-star.on { color: var(--gold, #F5B50A); }
.lay-star.on svg { fill: currentColor; }
.lay-inp {
  flex: 1; min-width: 0; padding: 4px 8px;
  background: var(--bg-card); border: 1px solid var(--outline);
  border-radius: var(--r-sm); color: var(--text-1);
  font-size: 12.5px; font-weight: 600; outline: none;
}
.lay-apply i { flex-shrink: 0; }
.lay-menu { min-width: 340px; }

/* булавка «закрепить график»: закреплённый горит фирменным золотом */
/* кнопка панели ног существует только на телефоне (см. @768) */
.btn-legs { display: none; }
.btn-legs.on { color: var(--brand); border-color: var(--brand); }
.btn-pin.on { color: var(--gold); border-color: var(--gold); }
.btn-pin.on svg { fill: rgba(245,181,10,.25); }
/* Подсказка «нажми булавку»: после попытки включить сетку без пина тост
   говорит «закрепите», а пульс 4 секунды показывает, ГДЕ именно */
@keyframes pin-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 181, 10, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(245, 181, 10, .6); }
}
.btn-pin.pin-hint {
  animation: pin-hint-pulse 1s ease-in-out 4;
  color: var(--gold);
  border-color: var(--gold);
}
/* булавку нажали — подсказка отработала, пульс гаснет немедленно */
.btn-pin.pin-hint.on { animation: none; box-shadow: none; }

/* ── Группы панелей выпадашками: ЦЕНА / СПРЕД / ФАНДИНГ / ОИ ── */
.ptb-dd { position: relative; flex-shrink: 0; }
.ptb-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ptb-dd-btn:hover, .ptb-dd.open .ptb-dd-btn { border-color: var(--outline); color: var(--text-1); }
.ptb-dd-btn.has-on { color: var(--text-1); }
.ptb-cnt {
  min-width: 14px; height: 14px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-glow); border: 1px solid var(--brand);
  border-radius: 4px; color: var(--brand);
  font-size: 9px; font-weight: 800; line-height: 1;
}
.ptb-dd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 210px; padding: 4px;
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.ptb-dd.open .ptb-dd-menu { display: block; animation: pageEnter .16s cubic-bezier(.16,1,.3,1); }
.ptb-dd-menu .pane-pill {
  display: flex; width: 100%; align-items: center;
  text-transform: none; letter-spacing: 0;
}
.ptb-dd-btn .ptb-group { color: inherit; font-size: 11px; letter-spacing: .05em; }
.ptb-dd-menu .pane-help { margin-left: auto; }
/* имя слота в одну строку: с чипом умолчания оно переносилось на две */
.lay-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-row { min-width: 0; }
.lay-apply { min-width: 0; }

.pn-dd { position: relative; display: none; flex-shrink: 0; }
.pn-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 7px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-2);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.pn-dd-btn svg {
  width: 14px; height: 14px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.pn-dd-btn:hover, .pn-dd.open .pn-dd-btn { border-color: var(--outline); color: var(--text-1); }
.pn-dd-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  padding: var(--sp-3);
  background: var(--bg-modal); border: 1px solid var(--border-hi);
  border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.pn-dd.open .pn-dd-menu { display: block; animation: pageEnter .16s cubic-bezier(.16,1,.3,1); }
/* внутри списка группы идут колонкой: строка-меню там не нужна */
.pn-dd-menu .pane-toolbar {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; padding: 0; background: none; border-bottom: none;
  min-width: 240px;
}
.pn-dd-menu .ptb-grp { flex-wrap: wrap; }

.tf-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-3);
}
.tf-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-pos);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .3; }
}

.chart-canvas { flex: 1; position: relative; min-height: 0; }

/* Info cards below chart */
.chart-info-cards {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow-x: auto;
  flex-wrap: wrap;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.info-card-label {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.info-card-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* Funding mini panel */
.funding-panel {
  height: 80px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  position: relative;
}

/* Chart empty state */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-3);
  gap: var(--sp-3);
  font-size: 14px;
}
.chart-empty-icon { font-size: 40px; }

/* ════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  /* Закрытая модалка — display:none, а не только opacity:0. Иначе её
     бесконечные CSS-анимации (aurora, beamSpin, particleRise, shimmer у
     auth-модалки) и backdrop-filter крутятся ВСЕГДА, вхолостую нагружая
     GPU/CPU, даже когда окно невидимо. display:none их полностью
     останавливает. Появление всё равно анимируется (modalIn у .modal). */
  display: none;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-xl);
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(245, 181, 10, .07),
              inset 0 1px 0 rgba(255, 255, 255, .04);
}
.modal-overlay.open .modal { transform: none; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}
.modal-close:hover { color: var(--text-1); background: var(--bg-hover); }

.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
/* ── Карточка «поделиться» ──
   Окно шире базовой модалки: слева формат/период/тип и «сцена» с картинкой,
   справа галочки. Сцена — постоянного размера: смена 9:16 / 16:9 меняет
   только картинку внутри (размер в px ставит share.js по пропорции).
   Высота сцены считается от окна браузера за вычетом шапки, строк
   переключателей и кнопок — иначе на планшете кнопки уезжали под край */
.share-modal { width: 820px; }
.share-modal .modal-body { overflow: visible; }
.share-body { padding: var(--sp-4); display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.share-left { display: flex; flex-direction: column; gap: 10px; flex: 0 1 auto; min-width: 0; }
.share-fmt-row { display: flex; align-items: center; gap: 12px; }
.share-fmt-row .share-side-title { margin-bottom: 0; min-width: 64px; }
.share-fmt { display: flex; gap: 6px; }
.share-fmt .seg-btn { min-width: 64px; }
.share-side { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1 1 200px; padding-top: 4px; }
.share-side-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.share-side .filter-flow { padding: 6px 8px; border-radius: 8px; }
.share-side .filter-flow:hover { background: var(--bg-hover); }
.share-side .share-sub { padding: 3px 8px 3px 30px; font-size: 12px; }
.share-side .share-sub.hidden { display: none; }
/* включённые галочки — цветом плашки «LONG» в шапке графика */
.share-side .filter-flow input { accent-color: var(--c-pos); }
.share-side .filter-flow:has(input:checked) > span { color: var(--c-pos); font-weight: 600; }
.share-stage { width: 520px; max-width: 100%; height: min(48vh, 540px, calc(85vh - 380px));
  display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.share-canvas { max-width: 100%; max-height: 100%; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55); display: block; }
.share-ctl { display: flex; flex-direction: column; gap: 10px; }
/* ПК: три колонки — переключатели слева, карточка по центру, галочки справа;
   без строк над картинкой сцена берёт всю высоту тела окна */
@media (min-width: 1100px) {
  .share-modal { width: 1160px; }
  .share-modal .modal-body { min-height: 0; }
  /* без переноса: при масштабе страницы окно упирается в 95vw, и колонка
     галочек уезжала под карточку, распирая окно за нижний край */
  .share-body { flex-wrap: nowrap; }
  .share-left { flex: 1 1 auto; min-width: 0; flex-direction: row; gap: var(--sp-5); align-items: flex-start; }
  .share-ctl { flex: 0 0 auto; min-width: 280px; }
  .share-stage { flex: 1 1 auto; width: auto; min-width: 0; max-width: 640px;
    height: min(62vh, 760px, calc(85vh - 250px)); }
  .share-side { flex: 0 0 200px; min-width: 200px; }
}
@media (min-width: 1500px) {
  .share-modal { width: 1280px; }
}
/* телефон: панель под карточкой, тело окна прокручивается, кнопки на месте */
@media (max-width: 640px) {
  .share-stage { height: min(52vh, calc(85vh - 360px)); min-height: 220px; }
  .share-modal .modal-body { overflow-y: auto; }
}
.share-foot { display: flex; gap: 10px; justify-content: flex-end; padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}
.modal-footer-center { justify-content: center; }
/* «Выбрать все / Снять все» слева от «Применить» */
.exc-foot-btns {
  display: flex;
  gap: var(--sp-2);
  margin-right: auto;
}

/* ── Exchange picker modal ── */
.exc-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.exc-pick-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.exc-pick-chip:hover { border-color: var(--outline); }
.exc-pick-chip.selected {
  background: var(--outline-soft);
  border-color: var(--outline);
  color: var(--text-1);
}
.exc-pick-all {
  grid-column: 1/-1;
  background: var(--bg-hover);
  border: 1px solid var(--border-hi);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
  padding: var(--sp-3);
}
.exc-pick-all:hover { border-color: var(--outline); color: var(--text-1); }

/* ── Filters modal ── */
.filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.filter-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* подзаголовок секции DEX-фильтров: на всю ширину сетки, с отбивкой сверху */
.filters-dex-head {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.filter-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.filter-row label {
  font-size: 12px;
  color: var(--text-3);
  width: 28px;
  flex-shrink: 0;
}

.filter-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  width: 0;
  min-width: 0;
}
.filter-input:focus { outline: none; border-color: var(--outline); }
/* автозаполнение Chrome красило поля фильтров в голубой — глушим, как у .form-input */
.filter-input:-webkit-autofill,
.filter-input:-webkit-autofill:hover,
.filter-input:-webkit-autofill:focus,
.filter-input:autofill,
.filter-input:autofill:hover,
.filter-input:autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--text-1);
  transition: background-color 9999s ease-out;
}

/* строки Long/Short (объём и ОИ по ногам): подпись шире, два поля в ряд */
.filter-row-ls label { width: 40px; }

.filter-group-label .pane-help { margin-left: 6px; vertical-align: middle; }

/* ── Ликвидность связки: сумма на ногу + сдвиг спреда, чипы-пресеты ── */
.filter-liq {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.filter-liq > .filter-group-label { margin-bottom: 2px; }
.filter-liq-row { display: flex; flex-direction: column; gap: 6px; }
.filter-liq-row label { font-size: 12.5px; color: var(--text-2); }
.filter-liq-row .filter-input { width: 100%; max-width: 100%; }
.seg-liq { margin-bottom: var(--sp-2); }
.seg-liq .seg-btn.active { color: #00D26A; border-color: rgba(0,210,106,.55); background: rgba(0,210,106,.10); }
.filter-liq-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }

/* ── Депозиты / выводы: сегменты + направленный маршрут ── */
.filter-nets {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.filter-nets-row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.filter-nets-row .filter-group-label { min-width: 108px; margin: 0; }
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
}
.seg-btn {
  padding: 5px 11px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.seg-btn:hover { color: var(--text-1); border-color: var(--outline); }
/* активный: «Все» нейтрально-акцентный, «открыт» зелёный, «закрыт» красный */
.seg-btn.active { color: var(--text-1); border-color: var(--outline); background: var(--bg-hover, rgba(255,255,255,.04)); }
.seg-btn.ok.active  { color: #00D26A; border-color: rgba(0,210,106,.55); background: rgba(0,210,106,.10); }
.seg-btn.bad.active { color: #FF5A52; border-color: rgba(255,90,82,.55); background: rgba(255,90,82,.10); }
.seg-btn.ok::before  { content: "✓ "; }
.seg-btn.bad::before { content: "✕ "; }
.seg-btn[data-v=""]::before { content: none; }

.filter-flow {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
  padding: 2px 0;
}
.filter-flow input { accent-color: #00D26A; width: 15px; height: 15px; cursor: pointer; }
.filter-flow .pane-help { margin-left: 2px; }
/* включённая галочка «светится» как активная кнопка сегмента */
.filter-flow:has(input:checked) > span:not(.pane-help) { color: #00D26A; }

.filter-hint {
  font-size: 11.5px;
  color: var(--text-3);
  grid-column: 1/-1;
}

.preset-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  grid-column: 1/-1;
  margin-bottom: var(--sp-2);
}
.preset-select {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
  font-size: 13px;
}

/* ── Auth modal ── */
/* редизайн: карточка с центральным логотипом и aurora-свечением */
.auth-modal { position: relative; overflow: hidden; }
.auth-modal .modal-body { position: relative; z-index: 1; }
.auth-header-bare {
  position: absolute;
  top: 6px; right: 6px;
  border: none;
  background: none;
  padding: 6px;
  z-index: 2;
}

.auth-hero { text-align: center; padding: 10px 0 20px; }
.auth-hero-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 28px rgba(0, 210, 106, .35);
}
.auth-hero-title { font-size: 22px; font-weight: 700; margin-top: 12px; color: var(--text-1); }
.auth-hero-sub   { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* мягкие светящиеся пятна в фирменных цветах (зелёный + золото) */
.auth-glow {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: authFloat 9s ease-in-out infinite;
}
.auth-glow.g1 { top: -70px; left: -70px;  background: rgba(0, 210, 106, .26); }
.auth-glow.g2 { top: -50px; right: -80px; background: rgba(245, 181, 10, .18);
                animation-duration: 12s; animation-delay: -3s; }
.auth-glow.g3 { bottom: -90px; left: 30%; background: rgba(0, 210, 106, .14);
                animation-duration: 11s; animation-delay: -6s; }
@keyframes authFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14px, 10px); }
}

.auth-tabs {
  display: flex;
  gap: var(--sp-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1);
  margin-bottom: var(--sp-6);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: calc(var(--r-md) - 2px);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.auth-tab:hover { color: var(--text-1); }
.auth-tab.active {
  color: var(--text-1);
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.form-group label { font-size: 12.5px; color: var(--text-2); font-weight: 500; letter-spacing: .02em; }
.form-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-md);
  padding: 11px var(--sp-4);
  font-size: 14px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input::placeholder { color: var(--text-3); }
.form-input:focus {
  outline: none;
  border-color: var(--outline);
  box-shadow: 0 0 0 3px var(--outline-soft);
}
/* автозаполнение Chrome не должно перекрашивать поле */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:autofill,
.form-input:autofill:hover,
.form-input:autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--text-1);
  transition: background-color 9999s ease-out;
}

.form-error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-neg);
  font-size: 12.5px;
  background: rgba(255,59,48,.10);
  border: 1px solid rgba(255,59,48,.35);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.form-error:not(:empty) { display: flex; }

/* «Забыли пароль?» / «Назад ко входу» — тихая текстовая кнопка под формой */
.auth-link {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.auth-link:hover { color: var(--text-1); text-decoration-color: currentColor; }
.auth-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
/* «Отправить код ещё раз» стоит НАД кнопкой Confirm — ему нужен воздух
   и снизу, иначе ссылка прилипает к кнопке */
#verify-resend { margin: var(--sp-3) 0 var(--sp-4); }

/* 6-значный код: шесть ячеек-цифр; настоящий input прозрачен и растянут
   поверх — фокус, вставка и автозаполнение работают как у обычного поля */
.code-cells {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.verify-code-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: none; background: none;
  font-size: 22px;   /* >=16px — iOS не зумит страницу при фокусе */
  cursor: text;
  z-index: 1;
}
.code-cell {
  display: flex; align-items: center; justify-content: center;
  height: 54px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 22px; font-weight: 700;
  color: var(--text-1);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.code-cell.filled {
  border-color: rgba(0, 210, 106, .5);
  color: #00D26A;
  text-shadow: 0 0 14px rgba(0, 210, 106, .35);
}
.code-cell.active {
  border-color: #00D26A;
  box-shadow: 0 0 0 3px rgba(0, 210, 106, .14), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* мигающий каретка-штрих в активной пустой ячейке */
.code-cell.active:empty::after {
  content: "";
  width: 2px; height: 22px;
  background: #00D26A;
  animation: codeCaret 1.1s steps(1) infinite;
}
@keyframes codeCaret { 50% { opacity: 0; } }

.auth-hint {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 var(--sp-4);
}

/* ── Сброс пароля по ссылке из письма ── */
/* под модалкой — непрозрачный фон на весь экран в стиле главной (aurora:
   зелёная заливка сверху, золото/бирюза, виньетка, лёгкая сетка): сайт под
   ней не мельтешит, форма выглядит отдельной страницей */
.modal-overlay.reset-solid,
html.reset-boot body::before {
  background:
    radial-gradient(ellipse 75% 65% at 50% 35%, transparent 55%, rgba(0,0,0,.42) 100%),
    radial-gradient(ellipse 90% 65% at 50% -5%, rgba(0,90,55,.30), transparent 60%),
    radial-gradient(circle at 62% -12%, rgba(212,175,55,.16), transparent 50%),
    radial-gradient(circle at -8% 112%, rgba(0,190,180,.10), transparent 55%),
    radial-gradient(circle at 108% 40%, rgba(245,181,10,.07), transparent 55%),
    linear-gradient(var(--border-soft) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--bg);
}
.modal-overlay.reset-solid { backdrop-filter: none; }
/* Заглушка ДО загрузки скриптов (инлайн-скрипт в index.html): тот же фон
   прикрывает страницу мгновенно, модалка (z-index 1000) встаёт поверх */
html.reset-boot body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}
/* чей аккаунт: email — фирменным зелёным, как в макете */
.reset-account b { color: #00D26A; font-weight: 600; word-break: break-all; }
.auth-hint.reset-note { color: var(--text-3); }
/* поле пароля с тумблером «Показать» */
/* Поле пароля: замок слева, кнопка-глаз справа, ровные точки с разрядкой.
   Точки рисует сам браузер (type=password), поэтому менеджеры паролей и
   автозаполнение работают как обычно; мы задаём только шрифт и разрядку,
   чтобы точки были одного размера и не слипались (iPad рисовал их крупно) */
.pass-wrap { position: relative; }
.pass-wrap .form-input { width: 100%; padding-left: 40px; padding-right: 48px; }
.pass-wrap .form-input[type="password"] {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .16em;
}
.pass-wrap .form-input[type="password"]::placeholder { letter-spacing: .16em; }
.pass-lock {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.pass-wrap:focus-within .pass-lock { color: #00D26A; }
.pass-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  color: var(--text-3); padding: 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pass-eye:hover { color: var(--text-1); background: var(--outline-soft); }
.pass-eye .eye-off { display: none; }
.pass-eye.on .eye-on { display: none; }
.pass-eye.on .eye-off { display: block; }
.pass-eye.on { color: #00D26A; }
/* «Ссылка отправлена»: карточка-подтверждение по центру, зелёный возврат */
.reset-sent { text-align: center; padding: var(--sp-3) 0; }
.reset-sent .auth-hint { margin-bottom: var(--sp-3); }
.reset-sent .sent-back { color: #00D26A; }
.reset-sent .sent-back:hover { color: var(--text-1); }

/* «Ещё нет аккаунта? — Зарегистрироваться» — отдельная карточка под формой */
.auth-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-2);
}
.auth-switch-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(0, 210, 106, .55);
  border-radius: var(--r-md);
  color: #00D26A;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 9px 16px;
  cursor: pointer;
  /* бегущий блик при наведении — та же анимация, что у кнопки «Войти» в
     шапке (.signin-btn): контур + светлая полоса пробегает слева направо */
  position: relative;
  overflow: hidden;
  transition: all .25s var(--ease);
}
.auth-switch-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
.auth-switch-btn:hover {
  border-color: #00D26A;
  background: rgba(0, 210, 106, .10);
  box-shadow: 0 0 16px rgba(0, 210, 106, .25);
  transform: translateY(-1px);
}
.auth-switch-btn:hover::after { left: 120%; }

/* ── Админка (только владелец) ─────────────────────────────── */
.admin-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
}
.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.admin-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #F5B50A;
  line-height: 1.1;
}
.admin-lbl {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}
.admin-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.admin-range { display: flex; gap: 6px; }
.admin-range button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.admin-range button:hover { color: var(--text-1); border-color: rgba(255,255,255,.3); }
.admin-range button.active {
  color: #F5B50A;
  border-color: rgba(245,181,10,.6);
  background: rgba(245,181,10,.08);
}
.admin-chart-info { font-size: 13px; color: var(--text-2); }
.admin-chart-info b { color: #F5B50A; font-size: 15px; }
.admin-chart-info .adm-add { color: #00D26A; }
.admin-chart-box { width: 100%; }
#adm-chart { display: block; width: 100%; height: 260px; }
#adm-chart .adm-grid { stroke: var(--border); stroke-width: 1; }
#adm-chart .adm-ax { fill: var(--text-3); font-size: 11px; }
.admin-users-title { margin: 0 0 var(--sp-3); font-size: 13px; }
.admin-users-scroll { overflow-x: auto; max-height: 480px; overflow-y: auto; }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-users-table th {
  text-align: left;
  color: var(--text-3);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-card);
}
.admin-users-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
.admin-users-table td:nth-child(2) { color: var(--text-1); }
.admin-users-table .adm-i { color: var(--text-3); }
.admin-backups-card .profile-note { margin: 0 0 var(--sp-3); }
/* ── Админка: настройки сервера ── */
.admin-settings-card .profile-note { margin: 0 0 var(--sp-3); }
.adm-set-grp { margin-top: var(--sp-4); }
.adm-set-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.adm-venues { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-venue {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border-hi); border-radius: var(--r-sm); background: var(--bg-card);
  font-size: 12.5px; cursor: pointer; user-select: none;
}
.adm-venue.off { color: var(--text-3); border-style: dashed; }
.adm-venue input { width: 15px; height: 15px; accent-color: var(--c-pos); }
.adm-ret { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.adm-ret-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.adm-ret-lbl { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.adm-ret-lbl i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.adm-ret-inp { display: inline-flex; align-items: center; gap: 6px; }
.adm-ret-inp input { width: 84px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--r-sm); color: var(--text-1); font: inherit; text-align: right; }
.adm-ret-inp b { font-size: 11px; color: var(--text-3); min-width: 30px; }
.adm-set-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.adm-set-status { font-size: 12px; color: var(--text-3); }

.adm-backup-btn { display: inline-block; text-decoration: none; }
.adm-backups-scroll { margin-top: var(--sp-3); max-height: 320px; }
.adm-dl { color: #00D26A; text-decoration: none; font-weight: 600; }
.adm-dl:hover { text-decoration: underline; }
.adm-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(0,210,106,.45);
  border-radius: 999px;
  color: #00D26A;
  font-size: 10.5px;
  font-weight: 600;
}

/* «или» между формой и кнопкой Google: тонкие линии по бокам */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* «Продолжить с Google»: нейтральная пилюля, спокойный ховер без блика */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-1);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-google:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 16px rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.btn-google svg { flex-shrink: 0; }

.chpass-block {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.chpass-title { font-size: 14px; font-weight: 600; margin-bottom: var(--sp-3); }

/* ── Preset management ── */
.preset-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.preset-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.preset-item-name { flex: 1; font-size: 13px; font-weight: 500; }
.preset-item-del {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  padding: 2px 5px;
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}
.preset-item-del:hover { color: var(--c-neg); background: rgba(242,87,87,.1); }

/* ════════════════════════════════════════════════════════════
   BUTTONS (generic)
   ════════════════════════════════════════════════════════════ */
.btn {
  border-radius: var(--r-sm);
  padding: 8px var(--sp-4);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
}
/* «богатый» зелёный: градиент + внутренний блик + свечение, не плоская заливка */
/* Чёткий сплошной зелёный вместо градиента: пользователю не нравился
   градиент со «светлой полосой». Ровный фирменный #00D26A, тёмный текст. */
.btn-primary {
  background: #00D26A;
  color: #04150C;
  border-color: #00D26A;
  box-shadow: 0 4px 14px rgba(0, 210, 106, .28);
}
.btn-primary:hover {
  background: #12DD77;
  border-color: #12DD77;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 210, 106, .40);
}
.btn-primary:active {
  transform: translateY(0);
  background: #00BE60;
  box-shadow: 0 3px 10px rgba(0, 210, 106, .3);
}
.btn-ghost {
  background: none;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--border-hi); }
.btn-danger {
  background: rgba(242,87,87,.12);
  color: var(--c-neg);
  border-color: var(--c-neg);
}

/* ════════════════════════════════════════════════════════════
   LANG DROPDOWN
   ════════════════════════════════════════════════════════════ */
.lang-dropdown {
  position: relative;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  min-width: 140px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all var(--dur) var(--ease);
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.lang-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.lang-opt {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.lang-opt:hover { background: var(--bg-hover); color: var(--text-1); }
.lang-opt.active { color: var(--brand); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.toast-wrap {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-5);
  font-size: 13.5px;
  color: var(--text-1);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  animation: toast-in .25s ease;
  /* мышь тост не ловит; курсор в его зоне — призрачнеет (см. dodge в JS),
     чтобы сообщение не заслоняло график, который листают под ним */
  pointer-events: none;
  transition: opacity .15s ease;
}
.toast.dodge { opacity: .12; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* предупреждение (лимит пинов и т.п.): золотая булавка + мягкое свечение,
   текст подлиннее — даём ему ширину и нормальный межстрочный интервал */
.toast.toast-warn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 520px;
  line-height: 1.45;
  border-color: rgba(245,181,10,.55);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 22px rgba(245,181,10,.18);
}
.toast.toast-warn svg { flex-shrink: 0; color: #F5B50A; }
/* тост с кнопками (лимит пинов): текст сверху, ряд кнопок снизу; такой
   тост ловит мышь, призрачнеть под курсором ему нельзя */
.toast.has-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; pointer-events: auto; }
.toast.has-actions.dodge { opacity: 1; }
.toast-actions { grid-column: 1 / -1; display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
.toast-btn { padding: 6px 12px; font-size: 12.5px; border-color: rgba(245,181,10,.45); }
.toast-btn:hover { border-color: #F5B50A; color: #F5B50A; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
#footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 12px;
  color: var(--text-3);
}
#footer a { color: var(--text-3); transition: color var(--dur) var(--ease); }
#footer a:hover { color: var(--brand); }
.footer-spacer { flex: 1; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.footer-link svg { display: block; flex-shrink: 0; }
.footer-sep { color: var(--text-3); opacity: .45; margin: 0 var(--sp-2); user-select: none; }
.made-by { display: inline-flex; align-items: center; gap: 6px; }

/* ════════════════════════════════════════════════════════════
   DEMO BADGE
   ════════════════════════════════════════════════════════════ */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245,166,35,.15);
  border: 1px solid var(--c-warn);
  color: var(--c-warn);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════
   CHART TOOLTIP
   ════════════════════════════════════════════════════════════ */
.chart-tooltip {
  position: absolute;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: 12px;
  pointer-events: none;
  z-index: 50;
  min-width: 140px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.tooltip-date { color: var(--text-3); margin-bottom: 4px; }
.tooltip-row { display: flex; justify-content: space-between; gap: var(--sp-4); }
.tooltip-in  { color: var(--c-pos); font-weight: 600; }
.tooltip-out { color: var(--c-neg); font-weight: 600; }
/* цены выхода из позиции — приглушённая пара к цветам входа */
.tooltip-dimpos, .val-dimpos { color: #8A9A2B; font-weight: 600; }
.tooltip-dimneg, .val-dimneg { color: #C2549D; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   MOBILE — sidebar becomes top bar
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { flex-direction: column; }

  #sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  .sidebar-brand { border-bottom: none; padding: var(--sp-3) var(--sp-4); }
  .sidebar-nav { display: flex; padding: 0; flex-direction: row; align-items: center; }
  .nav-item {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: var(--sp-3) var(--sp-3);
    font-size: 12.5px;
  }
  .nav-item svg { display: none; }
  .nav-item.active { border-bottom-color: var(--gold); border-left-color: transparent; }

  #topbar { padding: 0 var(--sp-3); }
  .sidebar-bottom { display: none; }

  /* На телефоне ленту разделов съедало название бренда: наружу торчал
     только активный пункт, а остальные уезжали за экран без намёка на
     прокрутку — навигации по сайту фактически не было. Логотип
     оставляем, подпись убираем. */
  .sidebar-brand { padding: var(--sp-3); gap: 0; }
  .sidebar-brand-name { display: none; }
  .sidebar-brand img { width: 26px; height: 26px; }
  #sidebar { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #sidebar::-webkit-scrollbar { height: 2px; }
  #sidebar::-webkit-scrollbar-thumb { background: var(--border-hi); }

  /* Кнопки тулбара сжимались до нечитаемых огрызков («B…» вместо
     названия). Ширину держим, а сам ряд листается по горизонтали. */
  #toolbar { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #toolbar > * { flex-shrink: 0; }
  #toolbar::-webkit-scrollbar { height: 2px; }
  #toolbar::-webkit-scrollbar-thumb { background: var(--border-hi); }
  .ticker-search { min-width: 150px; }

  /* Конструктор связки: в одну строку он не влезает ни на одном телефоне */
  .pair-builder { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3); }
  .pb-col { min-width: 100%; }
  .pb-swap { align-self: center; }
  html[data-sidebar="collapsed"] #sidebar { width: 100%; }
  html[data-sidebar="collapsed"] .sidebar-brand-name,
  html[data-sidebar="collapsed"] .nav-item span { display: initial; }
  .filters-grid { grid-template-columns: 1fr; }
  .exchanges-grid { grid-template-columns: 1fr; }
  .chart-grid.g2, .chart-grid.g4 { grid-template-columns: 1fr; }
  .chart-info-cards { flex-wrap: nowrap; overflow-x: auto; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Utilities ──────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.text-pos { color: var(--c-pos) !important; }
.text-neg { color: var(--c-neg) !important; }
.text-muted { color: var(--text-3) !important; }
.fw-700 { font-weight: 700 !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════
   RICH LAYER — premium look & motion for the app UI
   (в одном вкусе с главной: aurora-свечение, шиммер, gold/green)
   ════════════════════════════════════════════════════════════ */

/* ── Page enter (staggered rise, как reveal на главной) ───── */
.page.active { animation: pageEnter .45s cubic-bezier(.16,1,.3,1); }
/* У главной свой каскад (reveal), а pageEnter ей вредил: transform страницы
   на время анимации превращал fixed-аврору в «приклеенную» к странице, и
   через полсекунды фон заметно перескакивал на место. Без pageEnter фон
   стоит как вкопанный с первого кадра */
#page-home.active { animation: none; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Ambient aurora wash за контентом (только dark) ───────── */
[data-theme="dark"] #content {
  background:
    radial-gradient(90% 42% at 72% -12%, rgba(212,175,55,.055), transparent 60%),
    radial-gradient(70% 38% at 8% -10%, rgba(245,181,10,.035), transparent 55%),
    var(--bg);
}

/* ── Sidebar: глубина + брендовое свечение ────────────────── */
[data-theme="dark"] #sidebar {
  background:
    radial-gradient(120% 45% at 0% 0%, rgba(212,175,55,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-panel), #111416);
}
/* Логотип — как большой на главной: без CSS-кольца (ободок нарисован в
   самом PNG), только мягкое золотое свечение вокруг плашки */
.sidebar-brand img {
  transition: filter .4s var(--ease);
  filter: drop-shadow(0 0 10px rgba(212,175,55,.35));
}
.sidebar-brand:hover img {
  filter: drop-shadow(0 0 14px rgba(212,175,55,.5));
}
/* Имя — золото, перетекающее в светлый металл («Artemon» тёплый,
   «Tools» серебристый), как на брендовом лого. Два слоя фона, оба
   режутся по буквам: нижний — сам градиент, верхний — блик, который
   при наведении пробегает по надписи */
.sidebar-brand-name {
  /* три слоя, все режутся по буквам: бегущий блик (на ховере), световая
     «шапка» сверху (металл, как на брендовом лого) и золото→светлый низ */
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(255,244,214,.38) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255,247,229,.88) 6%, rgba(255,247,229,0) 60%),
    linear-gradient(100deg, #DE9A3F 0%, #D8933C 26%, #EFC275 46%, #E7E4DC 74%, #CDCDD3 100%);
  background-size: 250% 100%, 100% 100%, 100% 100%;
  background-position: 180% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-brand:hover .sidebar-brand-name {
  animation: brandSweep 1.5s ease-in-out infinite;
}
@keyframes brandSweep {
  0%   { background-position: 180% 0, 0 0, 0 0; }
  100% { background-position: -120% 0, 0 0, 0 0; }
}
/* золотой фон за брендом — проявляется на наведении */
.sidebar-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(95% 150% at 28% 50%, rgba(240,180,80,.07), transparent 72%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.sidebar-brand:hover::after { opacity: 1; }

/* nav: скольжение иконки + золотое свечение активного */
.nav-item svg { transition: transform .25s cubic-bezier(.16,1,.3,1), opacity var(--dur) var(--ease); }
.nav-item:not(.nav-soon):hover svg { transform: translateX(2px) scale(1.08); opacity: 1; }
.nav-item:not(.nav-soon):not(.active):hover { border-left-color: rgba(245,181,10,.4); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(245,181,10,.12), var(--bg-hover) 65%);
  text-shadow: 0 0 16px rgba(245,181,10,.35);
}
.nav-item.active svg { filter: drop-shadow(0 0 6px rgba(245,181,10,.5)); }

/* SOON badge — мягкая пульсация */
.soon-badge { animation: soonPulse 2.6s ease-in-out infinite; }
@keyframes soonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,181,10,0); }
  50%      { box-shadow: 0 0 10px 1px rgba(245,181,10,.3); }
}

/* ── Topbar: светящаяся градиентная линия снизу ───────────── */
#topbar { position: relative; }
#topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(212,175,55,.35) 30%, rgba(245,181,10,.3) 65%, transparent);
  opacity: .55;
}

/* Sign In — градиент, glow и sheen как у CTA на главной.
   Та же анимация у «Войти» на странице вотчлиста (favs-login-cta) */
.signin-btn,
.favs-login-cta {
  position: relative;
  overflow: hidden;
  transition: all .25s var(--ease);
}
.signin-btn::after,
.favs-login-cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
.signin-btn:hover,
.favs-login-cta:hover {
  background: rgba(0, 210, 106, .14);
  box-shadow: 0 0 18px rgba(0, 210, 106, .25);
  transform: translateY(-1px);
}
.signin-btn:hover::after,
.favs-login-cta:hover::after { left: 120%; }

/* toolbar-кнопки минималистичны: hover без свечения (см. базовое правило) */

/* ── Таблица возможностей ─────────────────────────────────── */
/* шапка непрозрачная (--bg-panel сплошной), поэтому backdrop-filter не
   нужен: блюр на ~19 липких ячейках пересчитывался КАЖДЫЙ кадр прокрутки
   таблицы и давал заметный скролл-джанк на самом нагруженном экране */
/* hover строки: брендовая полоса слева + градиентная заливка */
.opp-table tbody tr:hover {
  background: linear-gradient(90deg, var(--brand-glow), var(--bg-hover) 30%);
  box-shadow: inset 3px 0 0 var(--brand);
}
/* свечение значений (только dark, чтобы не грязнить light) */
/* свечение под числами убрано: с мягкими цветами оно делало текст
   размытым, а на плотной таблице ещё и утомляло */
[data-theme="dark"] .val-pos { text-shadow: none; }
[data-theme="dark"] .val-neg { text-shadow: none; }

/* чипы бирж: подъём при наведении */
.venue-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px var(--brand-glow);
}

/* ── Карточки (биржи / exec cost): подъём + свечение края ─── */
.exc-card {
  transition: border-color var(--dur) var(--ease),
              transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s var(--ease);
}
.exc-card:hover {
  border-color: var(--outline);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 20px var(--outline-soft);
}

/* ── Скроллбар: при наведении просто светлее, без золота ──── */
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ════════════════════════════════════════════════════════════
   CHARTS: pair builder + tile side panel (в стиле конкурентного
   спред-терминала: пилюли LONG/SHORT, панель данных по ногам)
   ════════════════════════════════════════════════════════════ */

/* ── Pair builder ─────────────────────────────────────────── */
.pair-builder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pb-side {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pb-tag-long  { color: var(--c-pos); }
.pb-tag-short { color: var(--c-neg); }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pb-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 7px var(--sp-3);
  font-size: 13px;
  min-width: 130px;
}
.pb-select:hover, .pb-select:focus { border-color: var(--outline); outline: none; }
.pb-coin {
  -webkit-appearance: none; appearance: none;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 7px var(--sp-3);
  font-size: 13px;
  font-family: var(--font-mono);
  width: 180px;
  text-transform: uppercase;
}
.pb-coin:focus { border-color: var(--outline); outline: none; box-shadow: 0 0 0 3px var(--outline-soft); }
.pb-swap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-sm);
  width: 32px; height: 32px;
  font-size: 15px;
  transition: all var(--dur) var(--ease);
}
.pb-swap:hover { color: var(--text-1); border-color: var(--outline); transform: rotate(180deg); }
/* «Создать» — в формате тёмных тулбарных кнопок (как переключатель сетки),
   а не яркая заливка: нейтральный фон, тёплый бордер, зелёный акцент текста
   и мягкое зелёное свечение на hover */
.pb-create {
  padding: 7px var(--sp-4);
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  color: #00D26A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pb-create:hover {
  border-color: rgba(0,210,106,.55);
  background: rgba(0,210,106,.08);
  box-shadow: 0 0 16px rgba(0,210,106,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.pb-create:active { transform: translateY(1px); }
[data-theme="light"] .pb-create { color: #00A857; background: var(--bg-card); }

/* ── Пилюли пары в шапке плитки ───────────────────────────── */
.pair-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.pill-long  { color: var(--c-pos); border-color: rgba(0,200,83,.5); }
.pill-short { color: var(--c-neg); border-color: rgba(255,59,48,.5); }
/* тикер в пилюле: «Bybit CASHKET» — чуть тише названия биржи.
   Каждая часть отдельным span: расстояние между ними держит gap пилюли,
   у текстовых узлов оно складывалось с пробелом и «плыло» */
.pill-name, .pill-coin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-coin { color: var(--text-1); opacity: .8; }
.pill-arr { flex-shrink: 0; }
.pill-long:hover  { background: rgba(0,200,83,.1);  color: var(--c-pos); box-shadow: 0 0 12px rgba(0,200,83,.25); }
.pill-short:hover { background: rgba(255,59,48,.1);  color: var(--c-neg); box-shadow: 0 0 12px rgba(255,59,48,.25); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-sym { opacity: .75; font-weight: 500; font-size: 11px; }

.tile-inout {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--sp-3);
  font-size: 12.5px;
}
.io-lbl { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.io-val { font-weight: 700; }
/* In/Out в шапке плитки и подписи-тумблеры панелей — ЯРКИМИ цветами линий
   графика (--c-pos/--c-neg): приглушённые табличные --num-* рядом с сочными
   линиями выглядели выцветшими */
.chart-tile .io-val.val-pos, .pane-eye .val-pos, .pane-eyes .val-pos { color: var(--c-pos); }
.chart-tile .io-val.val-neg, .pane-eye .val-neg, .pane-eyes .val-neg { color: var(--c-neg); }

/* ── Сворачивание ОРГАНОВ УПРАВЛЕНИЯ шапки: калькулятор, таймфреймы,
   список панелей и кнопки действий прячутся, а пилюли бирж и In/Out
   остаются на виду; шеврон разворачивает обратно ── */
.chart-tile.hdr-folded .chart-tile-header .calc-btn,
.chart-tile.hdr-folded .chart-tile-header .tf-pill,
.chart-tile.hdr-folded .chart-tile-header .tf-dd,
.chart-tile.hdr-folded .chart-tile-header .pn-dd,
.chart-tile.hdr-folded .chart-tile-actions > *:not(.btn-hdr-fold) { display: none; }
.btn-hdr-fold svg { display: block; transition: transform .15s ease; }
.chart-tile.hdr-folded .btn-hdr-fold svg { transform: rotate(180deg); }
/* шеврон нужен только в тесной сетке 2/4 — в одиночном полном экране места
   хватает всем, и кнопка там лишняя */
.btn-hdr-fold { display: none; }
.chart-grid.g2 .btn-hdr-fold,
.chart-grid.g4 .btn-hdr-fold { display: inline-flex; }

/* ── Тело плитки: боковая панель + график ─────────────────── */
.chart-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.chart-side {
  width: 230px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.leg-card {
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.leg-card-long  { border-left-color: var(--c-pos); }
.leg-card-short { border-left-color: var(--c-neg); }
.leg-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
}
.leg-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-3);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  padding: 1px 5px;
}
.leg-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-3);
  padding: 2.5px 0;
}
.leg-row2 b {
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.leg-row2 b.val-pos { color: var(--c-pos); }
.leg-row2 b.val-neg { color: var(--c-neg); }
/* в светлой теме мягкие цвета нужно притемнить, иначе они «выцветают» */
[data-theme="light"] { --num-pos: #1A7F37; --num-neg: #C0392B; }

.side-idx, .side-misc, .side-cap {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
/* «нет спота» в карточке ноги — золотой статус */
/* без акцентных цветов: «нет спотового рынка» и Bid/Ask — обычным
   (просьба пользователя; жёлтый в панели тоже не используем) */
.leg-row2 b.no-spot { color: var(--text-1); }
.side-misc { border-bottom: none; margin-top: auto; }
.idx-name  { font-size: 11.5px; }
.idx-long  { color: var(--c-pos); }
.idx-short { color: var(--c-neg); }

/* компактные сетки (1×2 и 2×2): панель прячем, графику всё место */
/* В сетке 2/4 боковая панель НЕ прячется целиком, а живёт свёрнутой
   полоской с «глазиком» (складывает её setSize автоматически) — панель
   можно развернуть и в сетке, а при возврате к одному окну каждая плитка
   вспоминает своё состояние */

/* в сетке строка-меню панелей занимает два ряда — прячем её и отдаём
   те же тумблеры выпадающим списком в шапке (.pn-dd) */
.chart-grid.g2 .pane-toolbar.pt-main,
.chart-grid.g4 .pane-toolbar.pt-main { display: none; }
.chart-grid.g2 .pn-dd, .chart-grid.g4 .pn-dd { display: inline-flex; }
/* и бар панели сворачиваем до «глаз + название»: в половине и четверти
   экрана порядок, закрытие, «?» и галочки-переключатели только мешают
   читать график (в g2 правила раньше не было — галочки торчали) */
.chart-grid.g2 .pane-bar .pbar-x,
.chart-grid.g2 .pane-bar .pbar-up,
.chart-grid.g2 .pane-bar .pbar-dn,
.chart-grid.g2 .pane-bar .pane-help,
.chart-grid.g2 .pane-bar .pane-eyes,
.chart-grid.g4 .pane-bar .pbar-x,
.chart-grid.g4 .pane-bar .pbar-up,
.chart-grid.g4 .pane-bar .pbar-dn,
.chart-grid.g4 .pane-bar .pane-help,
.chart-grid.g4 .pane-bar .pane-eyes { display: none; }
/* Планшет и телефон: в сетке бар по умолчанию свёрнут (PANE_FOLD_MQ), а
   глазок его разворачивает, и тогда крестик, стрелки порядка, «?» и
   переключатели линий должны появиться: правило выше прятало их
   безусловно, и тап по глазку в 2×2 ничего не показывал */
@media (pointer: coarse) {
  .chart-grid.g2 .pane-bar:not(.folded) .pbar-x,
  .chart-grid.g2 .pane-bar:not(.folded) .pbar-up,
  .chart-grid.g2 .pane-bar:not(.folded) .pbar-dn,
  .chart-grid.g4 .pane-bar:not(.folded) .pbar-x,
  .chart-grid.g4 .pane-bar:not(.folded) .pbar-up,
  .chart-grid.g4 .pane-bar:not(.folded) .pbar-dn { display: inline-block; }
  .chart-grid.g2 .pane-bar:not(.folded) .pane-help,
  .chart-grid.g4 .pane-bar:not(.folded) .pane-help { display: inline-block; }
  .chart-grid.g2 .pane-bar:not(.folded) .pane-eyes,
  .chart-grid.g4 .pane-bar:not(.folded) .pane-eyes { display: flex; }
}

/* в сетке шапка плитки держится одной строкой: биржи ужимаются
   многоточием, кнопки от калькулятора и правее не переносятся */
.chart-grid.g2 .chart-tile-header,
.chart-grid.g4 .chart-tile-header { flex-wrap: nowrap; }
.chart-grid.g2 .pair-pill,
.chart-grid.g4 .pair-pill {
  min-width: 0; overflow: hidden; padding: 3px 8px; gap: 5px;
}
.chart-grid.g2 .pill-dot,
.chart-grid.g4 .pill-dot { display: none; }
/* Сетка 2/4: место в шапке дорого, вместо названия биржи логотип, рядом
   тикер. Одна и та же монета на обеих ногах пишется один раз, у лонга
   (класс same-coin ставит setPillCoin в charts.js); у разных монет оба
   тикера, первый — лонг. Логотип не прогрузился (no-logo) — название назад */
.pill-logo { display: none; }
.chart-grid.g2 .pair-pill:not(.no-logo) .pill-logo,
.chart-grid.g4 .pair-pill:not(.no-logo) .pill-logo { display: block; }
.chart-grid.g2 .pair-pill:not(.no-logo) .pill-name,
.chart-grid.g4 .pair-pill:not(.no-logo) .pill-name { display: none; }
.chart-grid.g2 .chart-tile.same-coin .pill-short .pill-coin,
.chart-grid.g4 .chart-tile.same-coin .pill-short .pill-coin { display: none; }
/* Сетка 2/4: тикер НЕ в рамке пилюли, а отдельной подписью перед IN —
   в рамке на планшете он обрезался; пилюля остаётся логотипом со стрелкой */
.chart-grid.g2 .pair-pill .pill-coin,
.chart-grid.g4 .pair-pill .pill-coin { display: none; }
.tile-coin {
  display: none;
  flex-shrink: 0;             /* тикер не ужимать: в узкой плитке пусть режется IN/OUT */
  margin-left: var(--sp-2);
  font-size: 12.5px; font-weight: 700;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-grid.g2 .tile-coin,
.chart-grid.g4 .tile-coin { display: block; }
.chart-grid.g2 .tile-coin + .tile-inout,
.chart-grid.g4 .tile-coin + .tile-inout { margin-left: var(--sp-2); }
.chart-grid.g2 .tile-inout,
.chart-grid.g4 .tile-inout { flex-shrink: 1; min-width: 0; overflow: hidden; }
.chart-grid.g2 .chart-tile-spacer,
.chart-grid.g4 .chart-tile-spacer { flex: 1 1 0; min-width: 0; }
.chart-grid.g2 .calc-btn, .chart-grid.g4 .calc-btn,
.chart-grid.g1 .tf-dd,    .chart-grid.g2 .tf-dd,    .chart-grid.g4 .tf-dd,
.chart-grid.g2 .pn-dd,    .chart-grid.g4 .pn-dd,
.chart-grid.g2 .chart-tile-actions, .chart-grid.g4 .chart-tile-actions { flex-shrink: 0; }
/* ряд пилюль таймфрейма всюду заменяет один выпадающий список: и в сетке
   2/4, и в одиночном окне (там пилюль стало больше — 5s/20s/1m…/1d — и они
   распирали шапку). Панельный тулбар в одиночном окне остаётся рядом пилюль */
.chart-grid.g1 .tf-pill, .chart-grid.g2 .tf-pill, .chart-grid.g4 .tf-pill { display: none; }
.chart-grid.g1 .tf-dd,   .chart-grid.g2 .tf-dd,   .chart-grid.g4 .tf-dd   { display: inline-flex; }
/* компактнее, чтобы весь хвост шапки помещался в четверть экрана */
.chart-grid.g4 .tf-pill { padding: 5px 7px; font-size: 11.5px; }
.chart-grid.g4 .tile-btn { min-width: 26px; height: 26px; padding: 0 5px; }
@media (max-width: 900px) {
  .chart-side { display: none; }
  .pb-coin { width: 120px; }
}

/* ── Узкое окно: место отдаём данным ──────────────────────────
   Правила не зависят от языка — в китайском и корейском подписи
   короче, в турецком и немецком длиннее, поэтому ужимаем отступы
   и убираем разрядку, а не подгоняем ширины под конкретный текст. */
/* боковое меню само сворачивается в иконки: 220px в узком окне — это
   половина таблицы. Только для настольной раскладки: ниже 768px меню
   и так превращается в верхнюю строку, где подписи нужны (иконки скрыты) */
@media (max-width: 1200px) and (min-width: 769px) {
  /* через #sidebar: у правила переноса подписей вес выше, и без id
     подписи продолжали переноситься по символу, вытягивая пункты */
  #sidebar { width: 64px; }
  #sidebar .sidebar-brand { justify-content: center; padding: 0; gap: 0; }
  #sidebar .sidebar-brand-name { opacity: 0; max-width: 0; }
  #sidebar .nav-item { justify-content: center; padding: var(--sp-3) 0; gap: 0; }
  #sidebar .nav-item > span { opacity: 0; max-width: 0; white-space: nowrap; }
  #sidebar .soon-badge { padding: 0; border-color: transparent; margin-left: 0; animation: none; }
  .sidebar-toggle { display: none; }
}

@media (max-width: 1200px) {
  /* таблица: разрядка заголовков и широкие отступы съедали до трети
     ширины — в узком окне колонок помещается заметно больше */
  .opp-table { font-size: 12px; }
  .opp-table thead th {
    letter-spacing: 0;
    padding: var(--sp-2) var(--sp-2);
    font-size: 10.5px;
  }
  .opp-table td { padding: 4px var(--sp-2); }
}

/* ── Кастомный дропдаун бирж (pair builder) ───────────────── */
.pb-dd { position: relative; }
.pb-dd-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 7px var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  min-width: 150px;
  transition: all var(--dur) var(--ease);
}
.pb-dd-btn:hover, .pb-dd.open .pb-dd-btn {
  border-color: var(--outline);
  box-shadow: 0 0 12px var(--outline-soft);
}
.pb-dd-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.pb-dd-car {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.pb-dd.open .pb-dd-car { transform: rotate(180deg); }

.pb-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 20px var(--brand-glow);
  padding: 6px;
  z-index: 250;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .22s cubic-bezier(.16,1,.3,1);
}
.pb-dd.open .pb-dd-menu,
.pb-dd-menu.pb-float {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Планшет: открытое меню бирж и подсказки тикера на время открытия
   переезжают в body (bindPbFloat, app.js) — Safari на iPad обрезал
   position: fixed внутри прокручиваемого ряда конструктора, и биржу
   было не выбрать. Правило общее, потому что предка .pair-builder у
   меню в этот момент нет */
.pb-dd-menu.pb-float, .pb-sug.pb-float { position: fixed; }
/* Вкладки «Фьючерсы / Спот / DEX» и поиск в меню бирж конструктора
   (классы lp-* — те же, что в переключателе ноги на графике). Шапка меню
   стоит на месте, прокручивается только список площадок */
.pb-dd-menu {
  display: flex; flex-direction: column;
  overflow-y: hidden;
  min-width: max(100%, 290px);
}
.pb-dd-menu .lp-tabs, .pb-dd-menu .lp-search { flex-shrink: 0; margin-bottom: var(--sp-2); }
/* в узком меню иконки вкладок съедали место — «Фьючерсы 11» наезжал на
   «Спот»: без иконок все три вкладки со счётчиками влезают целиком */
.pb-dd-menu .lp-ico { display: none; }
.pb-dd-opts { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.pb-dd-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.pb-dd-opt:hover {
  background: linear-gradient(90deg, var(--brand-glow), var(--bg-hover));
  color: var(--brand);
}
.pb-dd-opt.selected { color: var(--brand); font-weight: 700; }
.pb-dd-check { margin-left: auto; color: var(--brand); opacity: 0; transition: opacity var(--dur) var(--ease); }
.pb-dd-opt.selected .pb-dd-check { opacity: 1; }

/* ── Иконки переключателя сетки ───────────────────────────── */
.grid-label {
  color: var(--text-3);
  font-size: 12.5px;
  margin-right: var(--sp-1);
}
.grid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
}
.grid-btn svg { display: block; }
.grid-btn.active {
  background: var(--outline-soft);
  box-shadow: 0 0 10px var(--outline-soft);
}

/* конструктор и сетка в одной строке; кликабельные имена ног в боковой панели */
a.leg-card-name { color: var(--text-1); text-decoration: none; transition: color var(--dur) var(--ease); }
a.leg-card-name[href]:hover { color: var(--brand); }
/* стрелка-ссылка у названия ноги: видна только когда ссылка реально есть */
.leg-link-arr { display: none; font-size: 10px; opacity: .6; }
a.leg-card-name[href] .leg-link-arr { display: inline; }
a.leg-card-name[href]:hover .leg-link-arr { opacity: 1; }
.pb-hint { white-space: nowrap; }
@media (max-width: 1280px) { .pb-hint { display: none; } }

/* ── Конструктор пары: карточная раскладка как у конкурента ── */
.pair-builder { align-items: flex-end; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); flex-wrap: nowrap; }
/* кнопка-сворачивалка конструктора существует только на телефоне (@768) */
.pb-fold { display: none; }
.pb-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pb-row { display: flex; gap: var(--sp-3); align-items: center; }
.pb-row .pb-dd { flex: 1; min-width: 0; }
.pb-dd-btn { width: 100%; padding: 10px var(--sp-4); border-radius: var(--r-md); }
.pb-dd-type { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-3); margin-left: 2px; white-space: nowrap; }
.pb-search { position: relative; flex: 1.2; min-width: 0; }
.pb-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.pb-search .pb-coin { width: 100%; padding: 10px var(--sp-3) 10px 34px; border-radius: var(--r-md); }
.pb-swap { width: 38px; height: 38px; border-radius: var(--r-md); margin-bottom: 1px; flex-shrink: 0; }
/* пропорция связки «1 к 10» — ДВА отдельных поля с двоеточием между:
   каждое число в своей рамке, чтобы было видно, что вводов два */
.pb-coef { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: 110px; }
.pb-coef-sep { color: var(--text-3); font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; }
/* flex/min-width: Safari на iPad ужимал первое поле до нуля в прокручиваемом
   ряду шапки — оставалось «: 10» без единицы. appearance: none — без родной
   рамки поля iOS поверх нашей */
.pb-coef-val {
  background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text-1); border-radius: var(--r-md);
  height: 38px; width: 46px; flex: 0 0 46px; min-width: 46px; box-sizing: border-box;
  padding: 0 4px; font-size: 13px;
  font-family: var(--font-mono); text-align: center;
  -webkit-appearance: none; appearance: none;
}
.pb-coef-val::placeholder { color: var(--text-3); }
.pb-coef-val:focus { outline: none; border-color: var(--outline); }
.pb-create { padding: 10px var(--sp-5); border-radius: var(--r-md); white-space: nowrap; }
.pb-grid-ctl { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); margin-bottom: 4px; }
@media (max-width: 1100px) { .pair-builder { flex-wrap: wrap; } .pb-grid-ctl { margin-left: auto; } }

/* модалки: нейтрализация zoom (оверлеи браузера — автозаполнение Edge —
   позиционируются без учёта zoom и «уезжают») */
.modal-overlay { zoom: 0.9259; }

/* боковая панель графика: компактнее, чтобы влезала без прокрутки */
.chart-side { width: 240px; scrollbar-width: thin; }
.chart-side .leg-card { padding: 8px 10px; }
.chart-side .leg-card-head { margin-bottom: 4px; font-size: 13px; }
.chart-side .leg-row2 { padding: 1.5px 0; font-size: 11.5px; }
.chart-side .side-idx, .chart-side .side-misc, .chart-side .side-cap { padding: 7px 10px; }
.chart-side .side-misc { margin-top: 0; }

/* ── Калькулятор связки на графике ────────────────────────── */
.calc-btn.active {
  border-color: var(--outline);
  color: var(--text-1);
  box-shadow: 0 0 10px var(--outline-soft);
}
.calc-panel {
  position: absolute;
  top: 76px;
  right: 12px;
  width: 330px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 100px);
  overflow-y: auto;
  z-index: 60;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 24px var(--brand-glow);
  padding: var(--sp-4);
  display: none;
  scrollbar-width: thin;
}
.calc-panel.open { display: block; animation: pageEnter .3s cubic-bezier(.16,1,.3,1); }
.calc-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); }
.calc-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
.calc-tab {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.calc-tab.active { color: var(--text-1); border-color: var(--outline); background: var(--outline-soft); }
.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px 0;
}
.calc-lbl { min-width: 0; }
.calc-lbl b { display: block; font-size: 12.5px; color: var(--text-1); }
.calc-lbl span { font-size: 10.5px; color: var(--text-3); line-height: 1.3; display: block; }
.calc-inp {
  width: 120px;
  flex-shrink: 0;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}
.calc-inp:focus { border-color: var(--outline); outline: none; box-shadow: 0 0 0 3px var(--outline-soft); }
.calc-pm { display: flex; gap: 6px; flex-shrink: 0; }
.calc-pm .calc-inp { width: 88px; }
.pm-btn {
  width: 30px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: all var(--dur) var(--ease);
}
.pm-btn:hover { color: var(--text-1); border-color: var(--outline); }
.calc-res { border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.calc-rrow {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--text-2);
  padding: 3px 0;
}
.calc-rrow b { font-weight: 700; color: var(--text-1); }
/* знак результата виден цветом: плюс — зелёный, убыток — красный.
   Классы вешает recalc, но общий цвет .calc-rrow b их перебивал */
.calc-rrow b.val-pos { color: var(--num-pos); }
.calc-rrow b.val-neg { color: var(--num-neg); }
.calc-profit { font-size: 13.5px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.calc-note { font-size: 10.5px; color: var(--text-3); margin-top: 8px; line-height: 1.45; }

/* боковая панель: максимально компактно — всё видно без прокрутки */
.chart-side { width: 200px; }
.chart-side .leg-card { padding: 6px 10px; }
.chart-side .leg-card-head { margin-bottom: 3px; font-size: 12.5px; gap: 6px; }
.chart-side .leg-type { font-size: 8.5px; padding: 1px 4px; }
.chart-side .leg-row2 { padding: 1px 0; font-size: 11px; }
.chart-side .leg-row2 b { font-size: 11px; }
.chart-side .side-idx, .chart-side .side-misc { padding: 6px 10px; }
.chart-side .idx-name { font-size: 10.5px; }

/* шапка плитки: всё в одну строку (перенос только если совсем узко) */
.chart-tile-header { flex-wrap: wrap; row-gap: 4px; }
.chart-tile-header .tf-live { margin-left: 0; }
/* калькулятор открывается под шапкой и строкой-меню панелей */
.calc-panel { top: 78px; }

/* график обязан сжиматься вместе с плиткой: без min-width:0 канвас
   удерживает старую ширину и шкала цены уезжает за обрез */
.chart-tile   { min-width: 0; min-height: 0; }
.chart-body   { min-width: 0; }
.chart-canvas { min-width: 0; }
.funding-panel { min-width: 0; }

/* макс. позиция — акцент как у конкурента */
/* без золота в боковой панели: «Макс. позиция» и ликвидность — обычным */
.leg-row2 b.mp-val { color: var(--text-1); }
/* нога без индекса (OKX DEX): шеврона нет, но место под него держим —
   цены строк «Цена индекса» стоят в одну колонку */
.idx-pop-btn.ipb-ghost { visibility: hidden; pointer-events: none; }

/* разделитель графика и панели фандинга — тянется мышью */
/* Граница между панелями целиком служит ручкой: тянуть можно в любом месте
   по ширине, а не только за метку посередине. Зона захвата шире самой
   полосы (::before выступает на 4px вверх и вниз) — в неё легко попасть */
/* Разделитель — тонкая линия в 1px: панели стоят вплотную, а не через
   широкую полосу. Тянуть при этом удобно: невидимая зона захвата ::before
   выступает на 5px вверх и вниз, попадать в неё легко */
.panel-resizer {
  height: 1px;
  flex-shrink: 0;
  cursor: ns-resize;
  background: var(--border);
  position: relative;
  z-index: 6;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.panel-resizer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -5px; bottom: -5px;
}
/* Нижняя ручка стека: зона захвата вниз не растёт. Абсолютный ::before
   считается в прокрутку .chart-main — с ним стек всегда был на 5–14px
   «выше» контейнера и листался, хотя панели целиком влезали (на iPad ещё
   и с резиновым отскоком — весь стек уезжал вверх) */
.chart-main .pane-bottom-rz::before { bottom: 0 !important; }   /* важно: тач-блоки ниже ставят -10/-14px всем ручкам */
/* и ручка-стрелка у нижней границы живёт НАД линией: её нижняя стрелка
   торчала на 10px под контейнер и тоже считалась в прокрутку */
.pane-bottom-rz .rz-grip { top: -11px; }
.panel-resizer:hover, .panel-resizer.dragging {
  background: var(--outline);
  box-shadow: 0 0 8px var(--outline-soft);
}

/* Ручка со стрелками вверх/вниз: появляется по центру границы при
   наведении — сразу видно, что линию можно тянуть */
.rz-grip {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--outline);
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform .2s cubic-bezier(.16, 1, .3, 1);
}
.rz-grip::before, .rz-grip::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.rz-grip::before { bottom: 6px; border-bottom: 5px solid var(--outline); }
.rz-grip::after  { top: 6px;    border-top: 5px solid var(--outline); }
.panel-resizer:hover .rz-grip,
.panel-resizer.dragging .rz-grip {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.panel-resizer.dragging .rz-grip { filter: drop-shadow(0 0 6px var(--outline-soft)); }

/* сети депозит/вывод в карточке ноги.
   Названия сетей длинные («Ethereum», «Polkadot Asset Hub»), в строку с
   подписью они не влезали и рвались — подпись сверху, чипы отдельной
   строкой под ней. */
.leg-nets {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 3px 0;
  font-size: 11px;
  color: var(--text-3);
}
.leg-nets-lbl { flex-shrink: 0; min-width: 52px; line-height: 18px; }
.net-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: 1; }
.net-chip {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .01em;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.net-chip.on  { color: var(--c-pos); border-color: rgba(0,200,83,.28);  background: rgba(0,200,83,.10); }
.net-chip.off { color: var(--c-neg); border-color: rgba(255,59,48,.28); background: rgba(255,59,48,.09); }
.net-chip.on:hover  { background: rgba(0,200,83,.18);  border-color: rgba(0,200,83,.5); }
.net-chip.off:hover { background: rgba(255,59,48,.17); border-color: rgba(255,59,48,.5); }
/* «+N» — раскрывает остальные сети */
button.net-chip.net-more {
  color: var(--text-3);
  border-color: var(--border);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
button.net-chip.net-more:hover { color: var(--text-1); border-color: var(--text-3); }

/* ── Саджест тикеров в конструкторе (в стиле конкурента) ──── */
.pb-sug {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 20px var(--brand-glow);
  padding: 4px;
  z-index: 260;
  display: none;
  scrollbar-width: thin;
}
.pb-sug.open { display: block; animation: pageEnter .18s cubic-bezier(.16,1,.3,1); }
.pb-sug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.pb-sug-row.sel { background: linear-gradient(90deg, var(--brand-glow), var(--bg-hover)); }
/* «токена нет на этой бирже» — сообщение, а не пункт выбора */
.pb-sug-none {
  cursor: default;
  color: var(--text-3);
  font-size: 12.5px;
  justify-content: flex-start;
}
.pb-sug-name { min-width: 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pb-sug-name b { font-size: 13.5px; color: var(--text-1); font-weight: 700; }
.pb-sug-q { font-size: 12px; color: var(--text-3); }
.pb-sug-sub {
  display: block;
  width: 100%;
  font-size: 10px;
  color: var(--text-3);
  text-transform: capitalize;
}
.pb-sug-px { color: var(--text-1); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ── Расположение как у конкурента: все панели (график + фандинг) одной
   колонкой слева, карточки ног — колонкой справа на всю высоту плитки */
.chart-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chart-side {
  border-right: none;
  border-left: 1px solid var(--border);
}
.chart-main .funding-panel { flex-shrink: 0; }

/* ── Пара-билдер в шапке (#topbar): компактная одна строка ── */
#topbar .pair-builder {
  /* grow 999: topbar-spacer (flex:1) не должен отжимать место у билдера */
  flex: 999 1 auto;
  min-width: 0;
  background: transparent;
  border-bottom: none;
  padding: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
}
/* Обе колонки — ровно дропдаун + поиск, место делят зеркально
   (пропорция и «Создать» стоят вне колонок, см. index.html) */
#topbar .pb-col { flex-direction: row; align-items: center; gap: var(--sp-2); flex: 1 1 0; }
#topbar .pb-tag { flex-shrink: 0; margin: 0; }
#topbar .pb-row { flex: 1; min-width: 0; }
/* Минимумы ниже «красивых»: до брейкпоинта переноса (1200px) строка
   обязана УЖИМАТЬСЯ, иначе колонки вылезают за свой край и поле тикера
   налезает на «⇄» и пропорцию. Имя биржи при нехватке места — троеточием */
#topbar .pb-dd { flex: 1 1 210px; min-width: 104px; }
#topbar .pb-dd-btn { padding: 8px var(--sp-3); min-width: 0; }
#topbar .pb-dd-name {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* имя не влезло (fitType вешает logo-only) — остаются логотип и тип рынка;
   тип возвращаем поверх правила @1500, которое прячет его при живом имени */
#topbar .pb-dd-btn.logo-only .pb-dd-name { display: none; }
#topbar .pb-dd-btn.logo-only .pb-dd-type { display: inline; }
#topbar .pb-search { flex: 1 1 200px; min-width: 88px; max-width: 280px; }
#topbar .pb-search .pb-coin { padding-top: 8px; padding-bottom: 8px; }
#topbar .pb-swap { margin-bottom: 0; flex-shrink: 0; }
#topbar .pb-create { flex-shrink: 0; padding: 8px var(--sp-4); }
#topbar .pb-grid-ctl { margin-bottom: 0; flex-shrink: 0; margin-left: var(--sp-4); }
/* «Сетка:» не должна прижиматься к «Создать»: жёсткий зазор + разделитель */
#topbar .pair-builder .pb-grid-ctl {
  margin-left: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
}
/* сетка в режиме «посмотреть» стоит справа, перед языком/темой — небольшой
   зазор, чтобы не слипалась с кластером */
#hold-grid-ctl { margin-right: var(--sp-3); }
@media (max-width: 1500px) { #topbar .pb-dd-type { display: none; } }

/* ── Правая панель на всю высоту плитки (шапка — только над графиком),
   и пошире, чтобы «Interval / Next funding» читался в одну строку */
.chart-side { width: 280px; }
.chart-side .leg-row2 { font-size: 11.5px; }
.chart-side .leg-row2 b { font-size: 11.5px; }
.chart-main > .chart-tile-header { flex-shrink: 0; }

/* ── Панель ОИ и блок «откуда берётся индекс» ── */
.oi-panel { height: 80px; border-top: 1px solid var(--border); }
.idxcomp-title {
  font-size: 10.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}

/* ── «Откуда берётся индекс»: выезжает из строки цены индекса ── */
.idx-row { position: relative; }
/* Цифры обеих строк «Цена индекса» — в один столбик, вплотную к шеврону.
   Без flex:1 у подписи space-between ставил цену «посередине» строки, и
   позиция гуляла от ширины названия биржи и длины числа */
.idx-row .idx-name { flex: 1 1 auto; }
/* место под шеврон держим всегда — даже пока состав корзины ещё грузится
   (.hidden): иначе цена строки без кнопки уезжала правее соседней */
.idx-row .idx-pop-btn.hidden {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}
.idx-pop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; flex-shrink: 0;
  padding: 0; border: 1px solid var(--border-hi); border-radius: 4px;
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, transform .18s ease;
}
.idx-pop-btn.hidden { display: none; }
.idx-pop-btn svg { width: 8px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.idx-pop-btn:hover { color: var(--text-1); border-color: var(--text-3); }
.idx-pop-btn.on { color: var(--brand); border-color: var(--brand); transform: rotate(180deg); }

.idx-pop { margin-top: 7px; }
.idx-pop.hidden { display: none; }
.idx-pop-head {
  font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.idxc-block + .idxc-block { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.idxc-venue {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-1); margin-bottom: 6px;
}
.idxc-table {
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.02); padding: 6px 8px;
}
/* биржа не публикует корзину индекса — аккуратная заметка вместо таблицы */
.idxc-none {
  border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(255,255,255,.02); padding: 8px 10px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
/* короткая подпись строки карточки ноги живёт только в панели телефона */
.lbl-short { display: none; }
/* общая кнопка состава индексов существует только в панели телефона */
.idx-pop-both { display: none !important; }
/* пометка под таблицей состава: веса не опубликованы, доли равные */
.idxc-note { padding: 4px 10px 6px; font-size: 10.5px; color: var(--text-3); line-height: 1.3; }
.idxc-w-eq { color: var(--text-2); }
.idxc-th, .idxc-tr { display: flex; align-items: center; gap: 6px; }
.idxc-th {
  font-size: 9px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--border);
}
.idxc-tr { padding: 3px 0; font-size: 11px; color: var(--text-2); }
.idxc-tr + .idxc-tr { border-top: 1px solid rgba(255,255,255,.03); }
.idxc-e { flex: 1 1 44%; min-width: 0; display: flex; align-items: center; gap: 5px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.idxc-s { flex: 1 1 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; color: var(--text-3); font-size: 10.5px; }
.idxc-th b, .idxc-tr b { flex: 0 0 auto; margin-left: auto; text-align: right;
                         font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.idxc-th span:first-child { flex: 1 1 44%; }
.idxc-th span:nth-child(2) { flex: 1 1 34%; }
.idxc-venue .venue-logo, .idxc-e .venue-logo { width: 14px; height: 14px; border-radius: 3px; }
.idxc-venue .venue-dot, .idxc-e .venue-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
/* источник без логотипа (Upbit, CoinBase…) — кружок с первой буквой */
.idxc-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  font-size: 8px; font-weight: 700; color: #fff;
}

/* ── Сворачивание карточки ноги ── */
.leg-fold {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--border-hi); border-radius: 4px;
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, transform .18s ease;
}
.leg-fold svg { width: 9px; height: 6px; fill: none; stroke: currentColor;
                stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leg-fold:hover { color: var(--text-1); border-color: var(--text-3); }
.leg-fold.on { transform: rotate(-90deg); }
.leg-card.folded .leg-row2,
.leg-card.folded .leg-netsbox { display: none; }
.leg-card.folded .leg-card-head { margin-bottom: 0; }

/* ── Копирование контракта у ончейн-ноги ──────────────────
   Размер и рамка — как у .leg-fold рядом; анимацию галочки кнопка
   берёт из .btn-share — той же, что у копирования ссылки на связку. */
.leg-copy {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--border-hi); border-radius: 4px;
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.leg-copy svg { width: 11px; height: 11px; display: block; }
.leg-copy:hover { color: var(--text-1); border-color: var(--text-3); }
/* .ic-done у .btn-share стоит inset:0 с margin:auto — здесь коробка
   мельче, и без своего размера галочка растягивалась за рамку */
.leg-copy .ic-done { width: 11px; height: 11px; }

/* ── Ширина боковой панели: тянется за левую границу ────────
   Сама полоса тонкая, а зона захвата шире (::before выступает по 3px
   в обе стороны) — в линию в 1px мышью не попасть. Тот же приём,
   что у .grid-split и .panel-resizer. */
.side-resizer {
  flex: 0 0 5px;
  position: relative;
  z-index: 8;
  cursor: col-resize;
}
.side-resizer::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px;
}
/* Своей линии у резайзера нет: границу рисует сама .chart-side
   (border-left), и вторая полоска в трёх пикселях от неё читалась
   как брак. Ложимся ровно на её границу и подсвечиваем при наведении */
.side-resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px;
  background: transparent; transition: background .12s ease;
}
.side-resizer:hover::after, .side-resizer.dragging::after { background: var(--brand); }
/* гриф посередине: без него о возможности тянуть не догадаться */
.srz-grip {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 26px; border-radius: 2px;
  background: var(--outline);
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform .2s cubic-bezier(.16, 1, .3, 1);
}
.side-resizer:hover .srz-grip, .side-resizer.dragging .srz-grip {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
/* панели нет — тянуть нечего: свёрнута, узкое окно, сетки 2 и 4 */
.chart-tile.side-folded .side-resizer,
.chart-grid.g2 .side-resizer,
.chart-grid.g4 .side-resizer { display: none; }
@media (max-width: 900px) { .side-resizer { display: none; } }

/* ── Сворачивание боковой панели плитки ──────────────────
   Сделано по образцу бокового меню сайта: кнопка внизу панели.
   Панель уходит в узкую полоску, а не исчезает совсем: иначе вместе
   с ней ушла бы и кнопка, и развернуть её было бы нечем. */
.side-bottom {
  margin-top: auto;                 /* короткое содержимое — кнопка всё равно внизу */
  position: sticky; bottom: 0;      /* длинное — не уезжает в прокрутку */
  flex-shrink: 0;
  /* кнопка слева, как у бокового меню: обе складывают свою панель
     к краю экрана, и жест читается одинаково */
  display: flex; justify-content: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
/* размер один в один с .sidebar-toggle — это одна и та же кнопка по смыслу */
.side-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.side-toggle svg { width: 16px; height: 16px; display: block; }
.side-toggle:hover { color: var(--text-1); border-color: var(--border-hi); background: var(--bg-hover); }

/* !important: ширина панели задаётся резайзером инлайном (style.width),
   и без него свёрнутая панель оставалась широченной пустой полосой,
   а кнопка разворота висела по центру пустоты */
.chart-tile.side-folded .chart-side { width: 46px !important; overflow: hidden; }
.chart-tile.side-folded .chart-side > *:not(.side-bottom) { display: none; }
/* в полоске боковых отступов нет — иначе кнопка не влезает */
.chart-tile.side-folded .side-bottom { justify-content: center; padding: var(--sp-3) 0; }
/* свёрнутой панели значок зеркалим: стрелка смысла «развернуть» */
.chart-tile.side-folded .side-toggle svg { transform: scaleX(-1); }
.chart-tile.side-folded .side-toggle { color: var(--text-1); border-color: var(--outline); }

/* ── Легенда панели ОИ и экран загрузки плитки ── */
.chart-main { position: relative; }

/* ── Часовой пояс оси времени ──
   Кнопка живёт в правом нижнем углу графика (пустой угол под шкалой цены):
   показывает текущий пояс, клик открывает список смещений UTC. Выбор общий
   для всех графиков и переживает перезагрузку (at_tz) */
.tz-btn {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 8;
  /* ровно угол под шкалой цены: ширина шкалы (SCALE_MIN_W, charts.js) на
     высоту оси времени; текст по центру — на одной линии и тем же кеглем
     и цветом, что метки времени, иначе подпись выглядела чужой и «утопала» */
  width: 84px; height: 28px;
  min-width: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  /* как метки оси времени: тот же приглушённый цвет и кегль, ничем не
     выделяется (просьба владельца); ручной пояс — тоже без акцента */
  color: var(--text-3);
  font-size: 11px; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tz-btn:hover { color: var(--text-2); background: var(--bg-panel); }
.tz-btn.tz-custom { color: var(--text-3); }
@media (max-width: 768px) {
  .tz-btn { font-size: 10px; width: 58px; }   /* шкала на телефоне у́же (SCALE_MIN_W) */
}
.tz-menu {
  position: absolute;
  right: 4px; bottom: 30px;
  z-index: 40;
  min-width: 168px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.tz-menu button {
  display: block;
  width: 100%;
  padding: 4px 9px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.tz-menu button:hover { color: var(--text-1); background: rgba(255, 255, 255, .05); }
.tz-menu button.active { color: var(--brand); }

/* ── Перестановка плиток сетки 2/4 перетаскиванием за шапку ──
   ВАЖНО для производительности: плитка — это десяток живых канвасов.
   Никаких filter на плитке и никаких анимаций box-shadow/background —
   они перерисовывали всю плитку каждый кадр и вешали страницу.
   Свечение статичное, «дышит» только opacity оверлея (композитор, без
   перерисовок). Курсор — только в пределах сетки: правило `body *`
   пересчитывало стили всего DOM, включая таблицу связок */
.chart-grid.g2 .chart-tile-header, .chart-grid.g4 .chart-tile-header { cursor: grab; }
body.tile-dragging { cursor: grabbing; user-select: none; }
body.tile-dragging .chart-grid * { cursor: grabbing !important; user-select: none; }
/* пока плитку тащат, графики не ловят мышь: без этого курсор над целью
   рисовал перекрестие, тултипы и цены прямо во время переноса. Заодно
   elementFromPoint в жесте попадает в саму плитку, а не в канвасы */
body.tile-dragging .chart-tile .chart-body { pointer-events: none; }
/* плитка в руке: притушена, поверх — серый пунктир «отсюда забрали» */
.chart-tile.tile-drag { opacity: .55; }
.chart-tile.tile-drag::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1.5px dashed var(--text-3);
  border-radius: 10px;
  pointer-events: none;
  z-index: 60;
}
/* цель переноса: зелёная рамка со статичным свечением, пульс — opacity */
.chart-tile.tile-drop::after {
  content: "";
  position: absolute; inset: 2px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0, 210, 106, .10), transparent 60%);
  box-shadow: 0 0 0 1px rgba(0, 210, 106, .35),
              0 0 20px rgba(0, 210, 106, .4),
              inset 0 0 26px rgba(0, 210, 106, .12);
  animation: tile-drop-pulse 1.1s ease-in-out infinite;
}
@keyframes tile-drop-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.oi-legend {
  position: absolute; top: 4px; left: 10px; z-index: 6;
  display: flex; gap: 14px; font-size: 11px; font-weight: 600;
  pointer-events: none;
}
/* легенда весов корзины индекса: по кнопке на источник, клик прячет линию */
.w-legend {
  /* 37px — шапка панели занимает 8..33px; при 26px первая строка легенды
     уезжала под неё и текст резало пополам */
  position: absolute; top: 37px; left: 10px; right: 56px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  pointer-events: none;          /* пустое место легенды не перехватывает клики */
}
.w-leg { pointer-events: auto; }
.w-leg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
  opacity: .45; transition: opacity .12s ease;
}
.w-leg.on { opacity: 1; color: var(--text-2); }
.w-leg i { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; background: var(--wc); }
/* шорт-нога рисуется пунктиром — маркер в легенде такой же */
.w-leg i.w-dash { background: repeating-linear-gradient(90deg, var(--wc) 0 4px, transparent 4px 7px); }
.w-leg b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
/* тултип весов: заголовок ноги и строка источника с его цветом */
.wtip-head {
  font-size: 10px; font-weight: 700; color: var(--text-1);
  margin: 5px 0 3px; text-transform: uppercase; letter-spacing: .04em;
}
.wtip-head i { font-style: normal; font-weight: 500; color: var(--text-3); }
.wtip-src { display: inline-flex; align-items: center; gap: 5px; }
.wtip-src i { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.wtip-sum { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 3px; }
.oi-leg-a { color: var(--c-pos); }
.oi-leg-b { color: var(--c-neg); }

.tile-loading {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.tile-loading.hidden { display: none; }
.tile-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: tileSpin .8s linear infinite;
}
@keyframes tileSpin { to { transform: rotate(360deg); } }

/* тултип панели фандинга (всплывает над низкой панелью) */
.funding-panel .chart-tooltip { z-index: 30; }
.tip-hedge { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* ── Бары панелей: название, ✕, ↑↓, глазки — ПОВЕРХ графика (как у
   конкурента), а не отдельной полоской, съедавшей высоту ── */
.pane-wrap { display: flex; flex-direction: column; min-height: 0; flex-shrink: 0; position: relative; }
/* flex-shrink:0 + минимум — спред-график больше не отдаёт последние
   пиксели сохранённым высотам панелей; лишнее уходит в прокрутку */
/* flex-shrink:1 — спред обязан отдавать место соседям, иначе панели
   перестают тянуться мышью; от схлопывания в полоску его держит
   min-height, а не запрет сжиматься */
.pw-spread { flex: 1 1 auto; min-height: 150px; }
.chart-main.fill-panes .pw-spread { min-height: 0; }
/* панели тянутся мышью без верхнего предела: сначала место отдаёт спред,
   а что уже не влезло — прокручивается, а не обрезается.
   overflow-x строго hidden: при overflow-y:auto браузер делает вторую ось
   тоже прокручиваемой, и широкая плашка панели (она позиционирована
   абсолютно, но в прокрутку считается) вылезала горизонтальной полосой */
.chart-main {
  overflow-y: auto; overflow-x: hidden;
  /* полосу прокрутки не рисуем: жёлтая планка у правого края перекрывала
     шкалу цены. Заодно уходит и дрожание плитки при протяжке разделителя —
     ширина графиков больше не скачет на толщину полосы */
  scrollbar-width: none;
}
.chart-main::-webkit-scrollbar { width: 0; height: 0; }
.pane-bar {
  position: absolute; top: 8px; left: 8px; z-index: 7;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--bg-float, rgba(8, 10, 9, .62));
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  font-size: 11px; color: var(--text-2);
}
/* при наведении бар всплывает над барами соседних панелей: иначе
   карточка у «?» (z-index внутри контекста бара) пряталась под
   баром следующей панели с тем же z-index: 7 */
.pane-bar:hover { z-index: 30; }
/* легенда ОИ уходит под плавающий бар, чтобы не пересекаться */
.oi-legend { top: 32px; }
.pane-bar-title { font-weight: 700; letter-spacing: .04em; margin-right: 6px; }
.pbar-x, .pbar-up, .pbar-dn {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 11px; padding: 1px 3px; line-height: 1;
}
.pbar-x:hover, .pbar-up:hover, .pbar-dn:hover { color: var(--brand); }
/* глазок рядом с крестиком: сворачивает настройки панели до названия */
.pbar-fold {
  background: none; border: none; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 1px 2px;
  opacity: .5; transition: opacity var(--dur) var(--ease);
}
.pbar-fold:hover { opacity: 1; }
.pane-bar.folded .pbar-fold { opacity: .28; }
.pane-bar.folded .pbar-x,
.pane-bar.folded .pbar-up,
.pane-bar.folded .pbar-dn,
.pane-bar.folded .pane-help,
.pane-bar.folded .pane-eyes { display: none; }
.pane-bar.folded .pane-bar-title { margin-right: 0; }
/* телефон и планшет: шапка панели по умолчанию свёрнута (charts.js,
   PANE_FOLD_MQ), глазок остаётся — им шапку разворачивают, чтобы
   переключать линии панели пальцем; под палец он крупнее */
@media (pointer: coarse) and (max-width: 1200px) {
  .pane-bar .pbar-fold { font-size: 13px; padding: 2px 4px; opacity: .7; }
}

.pane-eyes { display: flex; gap: 12px; margin-left: 8px; }
.pane-eye { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.pane-eye .eye { opacity: .55; font-size: 10px; }
/* подпись единственной линии: не переключатель, курсор обычный */
.pane-eye-static { cursor: default; }
.pane-eye:not(.on) { opacity: .38; }
.pane-eye:not(.on) .eye { opacity: .3; }
/* ── Окно «История фандинга» ── */
/* шапка: логотип + название, кнопки периода вынесены отдельной строкой ниже —
   в один ряд они не влезали и упирались в заголовок на ru/uk */
.fh-header { gap: var(--sp-3); align-items: center; border-bottom: none; padding-bottom: var(--sp-4); }
.fh-id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.fh-logo { border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.fh-names { min-width: 0; }
.fh-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
/* сегмент-контрол на всю ширину окна */
.fh-tabs {
  display: flex; gap: 4px;
  padding: 0 var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.fh-tab {
  flex: 1 1 0; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r-sm);
  padding: 6px var(--sp-3); font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: all var(--dur) var(--ease);
}
.fh-tab:hover { color: var(--text-1); border-color: var(--text-3); }
.fh-tab.active { color: var(--text-1); border-color: var(--outline); background: var(--outline-soft); }
.fh-body { padding: 0; max-height: 52vh; }
.fh-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.fh-row:hover { background: var(--bg-hover); }
.fh-time { color: var(--text-2); }
.fh-empty { padding: var(--sp-5); text-align: center; color: var(--text-3); font-size: 13px; }
.fh-foot { display: flex; align-items: center; justify-content: space-between; }
.fh-total-lbl { color: var(--text-2); font-size: 13px; }
.fh-total { font-size: 15px; font-weight: 700; }
/* строка Funding в карточке ноги — кликабельна */
/* ── Смена ноги: название биржи как кнопка + всплывающий выбор ── */
.leg-card-name.leg-pick {
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-weight: 700; color: var(--text-1);
  cursor: pointer;
}
.leg-card-name.leg-pick:hover { color: var(--brand); }
.leg-pick-car { font-size: 10px; color: var(--text-3); }
.leg-card-name.leg-pick:hover .leg-pick-car { color: var(--brand); }
/* Кнопка-«цепочка» вместо мелкой стрелки ↗: размер и рамка — как у
   соседних .leg-fold / .leg-copy, чтобы шапка ноги читалась одним рядом */
.leg-link-arr {
  flex-shrink: 0;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--border-hi); border-radius: 4px;
  color: var(--text-3); text-decoration: none;
  margin-left: 2px;
  transition: color .12s ease, border-color .12s ease;
}
.leg-link-arr svg { width: 11px; height: 11px; display: block; }
/* display возвращаем явно: выше по файлу .leg-link-arr прячется общим
   display:none (стрелка боковой панели), и без этого ссылка на биржу
   в карточке ноги на графике не показывалась вовсе */
.leg-link-arr[href] { display: inline-flex; }
.leg-link-arr[href]:hover { color: var(--brand); border-color: var(--text-3); }

.leg-pick-pop {
  position: absolute;
  z-index: 90;
  width: 300px;
  display: none;
  padding: var(--sp-3);
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.leg-pick-pop.open { display: block; animation: pageEnter .18s cubic-bezier(.16,1,.3,1); }
/* сегмент-контрол «Futures / Spot / DEX» на подложке */
.lp-tabs {
  display: flex; gap: 2px; margin-bottom: var(--sp-3);
  padding: 3px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--border);
}
.lp-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 3px; border: none; background: none; border-radius: var(--r-sm);
  color: var(--text-3); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  /* содержимому тесной вкладки нельзя вылезать на соседнюю кнопку */
  overflow: hidden;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.lp-ico {
  width: 13px; height: 13px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-ico .lp-ico-fill { fill: currentColor; stroke: none; }
/* В 300px попапа три русских подписи с иконками не помещаются — «Фьючерсы
   12» резал счётчик. Иконки декоративные, счётчик — нет: иконки прячем,
   счётчик не сжимается, ужимается (троеточием) только подпись */
.leg-pick-pop .lp-ico { display: none; }
.lp-tab > span:not(.lp-cnt) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-tab:hover { color: var(--text-2); }
.lp-tab.active { color: var(--text-1); background: var(--bg-modal); box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lp-cnt { font-size: 10.5px; font-weight: 700; color: var(--text-3); flex-shrink: 0; }
.lp-tab.active .lp-cnt { color: var(--brand); }

/* поиск по биржам */
.lp-search { position: relative; margin-bottom: var(--sp-3); }
.lp-search-ico {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; fill: none; stroke: var(--text-3);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.lp-vq {
  width: 100%; padding: 7px var(--sp-3) 7px 29px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-1); font-size: 12.5px;
}
.lp-vq:focus { outline: none; border-color: var(--outline); }
.lp-vq::placeholder { color: var(--text-3); }

/* список бирж — вертикальный, с крупными логотипами */
.lp-venues {
  display: flex; flex-direction: column; gap: 1px;
  max-height: min(260px, 38vh); overflow-y: auto;
}
.lp-venue {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: var(--r-sm);
  background: none; border: 1px solid transparent;
  color: var(--text-2); font-size: 13px; font-weight: 600; text-align: left;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.lp-venue img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.lp-venue-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-venue:hover { color: var(--text-1); background: var(--bg-hover); }
.lp-venue.active { color: var(--text-1); border-color: var(--outline); background: var(--outline-soft); }
.lp-venue.busy { opacity: .35; cursor: not-allowed; }
.lp-empty { font-size: 12px; color: var(--text-3); padding: 4px 0; }

.leg-row2.fh-open { cursor: pointer; }
.leg-row2.fh-open:hover { color: var(--brand); }
/* стрелка стоит сразу за словом «Фандинг», а не у правого края строки */
.fh-lbl { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
/* символ «⌄» в системных шрифтах падает ниже базовой линии и выглядит крошкой —
   рисуем шеврон вектором: ровно по центру строки и одной толщины с текстом */
.fh-caret {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: var(--text-3); transition: color var(--dur) var(--ease);
}
.fh-caret svg { width: 9px; height: 6px; display: block; }
.fh-caret svg path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.leg-row2.fh-open:hover .fh-caret { color: var(--brand); }

/* Одна сплошная вертикаль через все панели: у каждой панели свой холст, и
   в стыках (разделитель, границы) линия библиотеки прерывалась. Рисуем свою
   поверх всей колонки — от верха первой панели до низа последней */
.cross-vline {
  position: absolute;
  width: 0;
  border-left: 1px dashed var(--text-3);
  pointer-events: none;
  /* выше разделителя высоты (6): он перекрывал линию, и в стыке панелей
     оставался разрыв. Плашки панелей (7) остаются поверх линии */
  z-index: 6;
  display: none;
}

.pane-wrap .funding-panel { flex-shrink: 0; }
/* спред-график скрыт: панели делят освободившуюся высоту поровну
   (заданные мышью высоты в этом режиме не нужны — экран заполняется) */
/* 44px — тот же порог, что и PANE_MIN_H в charts.js */
/* Спред-график выключен — заполнять высоту должны панели. Раньше здесь
   всем ставилось flex:1 1 0, и панели делили тайл поровну: выставленная
   мышью высота полностью игнорировалась, тянуть границы было нельзя.
   Теперь высоты у всех свои (значит, тянутся), а остаток забирает
   последняя видимая панель — пустой полосы внизу всё так же нет. */
.chart-main.fill-panes .pane-wrap { min-height: 44px; }
.chart-main.fill-panes .pane-wrap.pane-fill { flex: 1 1 auto; }
.chart-main.fill-panes .pane-wrap.pane-fill .funding-panel {
  height: auto !important; flex: 1 1 auto; min-height: 0;
}

/* Легенды поверх графика (веса корзины, ОИ) съедают половину маленькой
   плитки — в сетках 2 и 4 их прячем, как и при свёрнутой шапке панели */
.chart-grid.g2 .w-legend, .chart-grid.g4 .w-legend,
.chart-grid.g2 .oi-legend, .chart-grid.g4 .oi-legend { display: none; }
.pane-wrap.bar-folded .w-legend,
.pane-wrap.bar-folded .oi-legend { display: none; }

/* ── Свёрнутая строка тумблеров панелей ───────────────
   Строка стоит постоянно, хотя тумблеры в ней переключают раз в
   сессию, а на двух строках она съедает заметный кусок графика.
   Сворачивается кнопкой в шапке; чтобы тумблеры не пропали совсем,
   на их место выходит тот же список «Панели», что и в сетках 2 и 4. */
.chart-tile.panes-folded .pane-toolbar.pt-main { display: none; }
.chart-tile.panes-folded .pn-dd { display: inline-flex; }
.btn-panes-fold svg { transition: transform var(--dur) var(--ease); }
.chart-tile.panes-folded .btn-panes-fold svg { transform: rotate(180deg); }
/* сложенное состояние подсвечиваем: иначе непонятно, где строка */
.chart-tile.panes-folded .btn-panes-fold {
  color: var(--text-1);
  border-color: var(--outline);
}
/* в сетках 2 и 4 строки и так нет — кнопка там не о чём */
.chart-grid.g2 .btn-panes-fold,
.chart-grid.g4 .btn-panes-fold { display: none; }

/* ── Дропдаун «Тип связок» ── */
.tb-caret { font-size: 9px; color: var(--text-3); }
.ptype-menu { min-width: 190px; padding: 4px; }
.ptype-item {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ptype-item:hover { background: var(--bg-hover); color: var(--text-1); }
.ptype-item.active { color: var(--brand); background: var(--bg-hover); font-weight: 600; }

/* Общая всплывающая подсказка (см. bindTips): одна карточка на страницу */
.gtip {
  /* выше модалок (1000): «?» в фильтрах показывает эту же карточку */
  position: fixed; z-index: 1100; left: 0; top: 0;
  max-width: 340px;
  background: var(--bg-modal);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--text-2);
  font-size: 12px; font-weight: 400; line-height: 1.55;
  text-align: left; text-transform: none; letter-spacing: normal;
  /* pre-line — тексты пояснений у «?» разделены пустой строкой на абзацы */
  white-space: pre-line;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.gtip.on { opacity: 1; visibility: visible; }

/* «?» у панелей: пояснение из data-tip показывает ОБЩАЯ карточка .gtip
   (bindTips) — она живёт в body с высоким z-index, поэтому её не
   перекрывают плавающие плашки соседних панелей, как перекрывали
   прежний ::after внутри бара (он жил в stacking context бара) */
.pane-help {
  display: inline-block; width: 14px; height: 14px;
  line-height: 12px; text-align: center; flex-shrink: 0;
  border: 1px solid var(--border-hi); border-radius: 3px;
  color: var(--text-3); font-size: 10px; cursor: help;
  position: relative;
}
.pane-help:hover { color: var(--text-1); border-color: var(--outline); }

/* ── Строка-меню панелей над графиком: группы + тумблеры с «?» ── */
.pane-toolbar {
  /* расстояние между группами — через gap контейнера: у flex он ставится
     ТОЛЬКО между элементами строки, поэтому перенесённая на новую строку
     группа начинается вровень с левым краем, без лишнего отступа */
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; row-gap: 5px;
  padding: 5px var(--sp-3);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* группа = подпись + её кнопки; переносится целиком */
.ptb-grp {
  display: inline-flex; align-items: center;
  flex-wrap: wrap; gap: 6px; row-gap: 5px;
}
.ptb-group {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.ptb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.ptb-btn:hover { color: var(--text-1); border-color: var(--text-3); }
/* квадратик-индикатор: гаснет у выключенной панели, светится у включённой */
.ptb-dot {
  width: 7px; height: 7px; flex-shrink: 0;
  background: var(--text-3); border-radius: 1px;
  transition: all var(--dur) var(--ease);
}
.ptb-btn.active { color: var(--text-1); border-color: var(--outline); }
.ptb-btn.active .ptb-dot {
  background: var(--outline);
  box-shadow: 0 0 7px var(--outline-soft);
}
.ptb-btn .pane-help { cursor: help; }

/* ── Страница «Избранные» — премиум-дарк, золото + зелёный ── */
/* таблица вотчлиста живёт как таблица сканера: на весь экран, без
   центрированной колонки — те же края, тот же скролл */
.favs-page {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.favs-tablewrap { overflow: auto; }
/* название страницы — по центру, счётчик рядом */
.favs-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.favs-title {
  font-size: 26px; font-weight: 800; letter-spacing: -.4px;
  background: linear-gradient(110deg, var(--text-1) 30%, #F5B50A 50%, var(--text-1) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 7s linear 1s infinite;
}
/* тулбар вотчлиста — та же полка в шапке, что #toolbar у таблицы */
.favs-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow-x: auto;
}
.favs-toolbar .ticker-search { flex: 0 1 220px; min-width: 110px; }
/* строки меню «Фильтры»: подпись + компактное поле */
.ff-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: 13px; color: var(--text-2);
  white-space: nowrap;
}
.ff-inp {
  width: 84px;
  background: var(--input-bg, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  padding: 5px 8px;
  font-size: 13px;
}
/* живые значения строки вотчлиста */
.fav-live {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto;
  font-family: var(--font-mono); font-size: 12.5px;
  white-space: nowrap;
}
.fav-live .fav-in   { color: var(--c-pos); }
.fav-live .fav-out  { color: var(--c-neg); }
.fav-live .fav-fund { color: var(--text-2); }
.fav-live .fav-vol  { color: var(--text-3); }
.fav-del { margin-left: 0; }   /* вправо теперь прижимается .fav-live */
.favs-nomatch {
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  padding: var(--sp-6) 0;
}
.favs-count {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #F5B50A; background: rgba(245,181,10,.1);
  border: 1px solid rgba(245,181,10,.35); border-radius: 999px;
  padding: 2px 10px; min-width: 20px; text-align: center;
}
.favs-count:empty { display: none; }
.favs-list { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-height: 0; }

/* строки: появление каскадом, золотая звезда, подсветка на ховере */
.fav-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  opacity: 0;
  animation: favRowIn .55s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 60ms) forwards;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@keyframes favRowIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.fav-row:hover {
  border-color: rgba(245,181,10,.5); background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(245,181,10,.12);
}
.fav-row-star { width: 15px; height: 15px; fill: #F5B50A; flex-shrink: 0;
                filter: drop-shadow(0 0 5px rgba(245,181,10,.45)); }
.fav-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); }
.fav-leg b { color: var(--text-1); font-family: var(--font-mono); }
.fav-long  .pb-dot { background: var(--c-pos); }
.fav-short .pb-dot { background: var(--c-neg); }
.fav-arrow { color: var(--text-3); }
.fav-del {
  margin-left: auto; background: none; border: none;
  color: var(--text-3); font-size: 13px; padding: 4px 8px; border-radius: var(--r-sm);
  opacity: 0; transition: all var(--dur) var(--ease);
}
.fav-row:hover .fav-del { opacity: 1; }
.fav-del:hover { color: var(--c-neg); background: var(--bg-hover); transform: scale(1.15); }

/* пустое состояние: парящая золотая звезда, сияние, искры */
.favs-empty {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  color: var(--text-3); line-height: 1.7;
  animation: pageEnter .5s var(--ease, ease) both;
}
/* сдержанный знак: тонкое золотое кольцо, контурная закладка, лёгкая
   внутренняя подсветка — без сияний, парения и искр */
.favs-mark {
  width: 72px; height: 72px; margin: 0 auto var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 181, 10, .45);
  background:
    radial-gradient(circle at 32% 26%, rgba(245, 181, 10, .10), transparent 62%),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .35);
}
.favs-mark svg {
  width: 26px; height: 26px;
  fill: none; stroke: #F5B50A; stroke-width: 1.6; stroke-linejoin: round;
}

/* ── «Как сохранить»: макет шапки графика с подсвеченной закладкой ── */
.favs-howto { margin-top: var(--sp-8); }
.favs-howto-title {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--sp-3);
}
.favs-howto-shot {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.fh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-2);
}
.fh-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-pos);
}
.fh-short::before { background: var(--c-neg); }
.fh-tf {
  padding: 4px 9px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; color: var(--text-1);
  background: var(--outline-soft); box-shadow: inset 0 0 0 1px var(--outline);
  margin-right: 4px;
}
.fh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-3);
}
.fh-btn svg { width: 15px; height: 15px; display: block; }
.fh-btn:first-of-type { display: inline-flex; }
/* подсвечиваем именно закладку — на неё и надо нажать */
.favs-howto-shot .fh-btn:not(.fh-dim) {
  color: #F5B50A; border-color: rgba(245,181,10,.55);
  background: rgba(245,181,10,.10);
  animation: favHowPulse 2.4s ease-in-out infinite;
}
.favs-howto-shot .fh-btn:not(.fh-dim) svg { fill: #F5B50A; stroke: none; }
@keyframes favHowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,181,10,.35); }
  55%      { box-shadow: 0 0 0 7px rgba(245,181,10,0); }
}
/* курсор-подсказка «сюда нажать» */
.fh-cursor {
  position: absolute; right: 62px; bottom: -6px;
  width: 16px; height: 16px;
  background: var(--text-1);
  clip-path: polygon(0 0, 0 76%, 26% 58%, 44% 100%, 62% 90%, 44% 50%, 76% 46%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation: favHowTap 2.4s ease-in-out infinite;
}
@keyframes favHowTap {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3px, -6px); }
}
.favs-howto-sub {
  margin-top: var(--sp-3);
  font-size: 13px; color: var(--text-3);
}
.favs-empty-title { font-size: 20px; font-weight: 700; color: var(--text-1); margin-bottom: var(--sp-2); }
.favs-empty-sub { max-width: 420px; margin: 0 auto; font-size: 14px; }
.favs-cta {
  position: relative; overflow: hidden;
  margin-top: var(--sp-5); padding: 10px 28px;
}
/* кнопка входа в пустом вотчлисте — контурная, как «Войти» в шапке */
.favs-login-cta {
  margin-top: var(--sp-5);
  padding: 10px 30px;
  background: none;
  border: 1px solid #00D26A;
  color: #00D26A;
  transition: all var(--dur) var(--ease);
}
.favs-login-cta:hover {
  background: rgba(0,210,106,.10);
  box-shadow: 0 0 18px rgba(0,210,106,.25);
  transform: translateY(-1px);
}
.favs-cta::after {           /* sheen, как у главного CTA */
  content: "";
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: ctaSheen 4.2s ease-in-out 1.5s infinite;
}

/* закладка «сохранить» в шапке плитки: контур -> золотая заливка с «поп» */
.tile-btn.btn-fav svg { display: block; fill: none; stroke: currentColor;
                        stroke-width: 1.8; stroke-linejoin: round;
                        transition: all var(--dur) var(--ease); }
.tile-btn.btn-fav:hover { color: #F5B50A; }
.tile-btn.btn-fav.fav-on { color: #F5B50A; border-color: rgba(245,181,10,.55); }
.tile-btn.btn-fav.fav-on svg {
  fill: #F5B50A; stroke: #F5B50A;
  filter: drop-shadow(0 0 6px rgba(245,181,10,.6));
  animation: favPop .45s cubic-bezier(.16,1,.3,1);
}
@keyframes favPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) translateY(-2px); }
  100% { transform: scale(1); }
}

/* копирование ссылки: цепочка -> галочка на пару секунд */
.btn-share { position: relative; }
.btn-share .ic-done { position: absolute; inset: 0; margin: auto;
                      opacity: 0; transform: scale(.5); }
.btn-share .ic-link { transition: opacity var(--dur) var(--ease),
                                  transform var(--dur) var(--ease); }
.btn-share.copied { color: var(--c-pos); border-color: rgba(0,200,83,.55); }
.btn-share.copied .ic-link { opacity: 0; transform: scale(.5); }
.btn-share.copied .ic-done {
  opacity: 1;
  animation: copyPop .5s cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 0 6px rgba(0,200,83,.5));
}
@keyframes copyPop {
  0%   { opacity: 0; transform: scale(.4); }
  55%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* сворачивание блока «откуда берётся индекс» */


/* ── Блок «Резервы бирж» ── */
.side-reserves { border-top: 1px solid var(--border); padding: 7px 10px; }
.side-reserves.hidden { display: none; }
/* пометка, пока резервов по монете нет */
.res-none { padding: 3px 0; font-size: 11px; color: var(--text-3); }
.res-sub { font-size: 10px; color: var(--text-3); margin: 2px 0 5px; line-height: 1.35; }
.res-ago { font-style: normal; font-size: 9.5px; color: var(--text-3); }

/* ── Резервы бирж: разворачиваемые подробности со ссылкой в Arkham ── */
.res-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.res-detail { margin-top: 7px; border: 1px solid var(--border); border-radius: 8px;
              background: rgba(255,255,255,.02); padding: 6px 8px; }
.res-detail.hidden { display: none; }
.resd-th, .resd-tr { display: flex; align-items: flex-start; gap: 6px; }
.resd-th {
  font-size: 9px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--border);
}
.resd-th span:first-child { flex: 1 1 52%; }
.resd-th span:nth-child(2) { flex: 0 0 auto; margin-left: auto; }
.resd-th b { flex: 0 0 auto; text-align: right; min-width: 58px; font-weight: 600; }
.resd-tr {
  padding: 6px 0; font-size: 11px; color: var(--text-2);
  text-decoration: none; border-radius: 6px;
}
a.resd-tr:hover { background: rgba(255,255,255,.04); }
.resd-tr + .resd-tr { border-top: 1px solid rgba(255,255,255,.04); }
.resd-e { flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resd-name { display: flex; align-items: center; gap: 5px; color: var(--text-1); font-weight: 600; }
.resd-name .venue-logo { width: 14px; height: 14px; border-radius: 3px; }
.resd-name .venue-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.resd-side {
  font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1px solid;
}
.resd-side.long  { color: var(--c-pos); border-color: rgba(0,200,83,.4);  background: rgba(0,200,83,.1); }
.resd-side.short { color: var(--c-neg); border-color: rgba(255,59,48,.4); background: rgba(255,59,48,.1); }
.resd-sub, .resd-src { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.resd-n { flex: 0 0 auto; margin-left: auto; color: var(--text-1); font-variant-numeric: tabular-nums; }
.resd-tr b { flex: 0 0 auto; text-align: right; min-width: 58px;
             color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }


/* ═══════════════════════════════════════════════════════════
   ТАБЛИЦА НА УЗКОМ ЭКРАНЕ: первый столбец приклеен
   Таблица шириной под две тысячи пикселей, и ни на телефоне,
   ни на планшете она целиком не видна. Сворачивать колонки в
   карточки нельзя — смысл таблицы в том, что числа сравнивают
   в столбик. Поэтому прокрутка вбок остаётся, но тикер не уезжает:
   без него через два свайпа непонятно, чья это строка.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .table-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .opp-table thead th:first-child,
  .opp-table tbody td:first-child {
    position: sticky;
    left: 0;
    /* фон обязателен: под приклеенной ячейкой проезжают соседние */
    background: var(--bg);
    box-shadow: 1px 0 0 var(--border);
  }
  /* порядок слоёв важен: шапка выше приклеенного столбца, иначе при
     прокрутке вниз тикеры проезжают ПОВЕРХ заголовков */
  .opp-table thead th { z-index: 2; }
  .opp-table thead th:first-child { background: var(--bg-panel); z-index: 3; }
  .opp-table tbody td:first-child { z-index: 1; }
}

/* ════════════════════════════════════════════════════════════
   ПЛАНШЕТ — 769…1200px
   ────────────────────────────────────────────────────────────
   Диапазон уже был занят правилами «узкое окно» (сайдбар в
   иконки, плотная таблица) — они писались под уменьшенное окно
   браузера на мониторе. Планшет отличается двумя вещами: экран
   не сужается временно, а такой всегда, и управляют им пальцем.
   Здесь — только то, что от этого ломается; размеры под палец
   вынесены ниже, в блок (pointer: coarse), потому что зависят
   от способа ввода, а не от ширины.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1200px) {

  /* Шапка перестаёт быть строго одной строкой. На 820px (iPad
     портретом) конструктор связки требовал ~900px и просто
     вылезал за правый край: `#topbar .pair-builder` объявлен
     nowrap, и правило @1100 с переносом его не перебивало —
     у селектора с id вес выше. */
  #topbar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
  }
  #topbar .pair-builder { flex-wrap: wrap; row-gap: var(--sp-2); }
  /* 320px = пилюля LONG + выбор биржи + поле тикера. Две ноги в
     строку влезают от ~1000px, ниже вторая переезжает вниз сама */
  #topbar .pb-col { flex: 1 1 320px; }
  #topbar .pb-grid-ctl { margin-left: auto; }

  /* боковая панель ноги на 900…1200px забирала 280px из ~1000:
     графику оставалась половина плитки */
  .chart-side { width: 240px; }
}

/* ════════════════════════════════════════════════════════════
   СЕНСОРНЫЙ ЭКРАН (pointer: coarse) — планшет и всё остальное,
   чем управляют пальцем, независимо от ширины.
   Интерфейс рисовался под курсор: кнопки 28–30px, чекбоксы 15px,
   поля 12.5px. Курсор — точка, подушечка пальца — примерно 9мм,
   поэтому всё, во что целятся, поднимаем до ~38px.
   ════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  .tb-btn, .grid-btn { min-height: 38px; padding: 7px var(--sp-3); }
  /* кнопки сетки 1/2/4: под палец они выросли до 38px, а значок внутри
     остался 16px и терялся — квадратная кнопка со значком во весь размер */
  .grid-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .grid-btn svg { width: 22px; height: 22px; }
  .btn { min-height: 38px; }
  .rate-pill { min-height: 38px; }
  .rate-pill input { width: 40px; }
  .tile-btn { min-width: 34px; height: 32px; }
  .tf-pill { padding: 7px 11px; }
  .field-item, .ptype-item { padding: 10px 12px; }
  .field-item input[type="checkbox"] { width: 17px; height: 17px; }
  .lang-opt { padding: 10px var(--sp-4); }
  .exc-pick-chip { min-height: 40px; }
  .modal-close { font-size: 22px; padding: 4px 10px; }
  .fav-del { padding: 6px 10px; }
  .preset-item-del { padding: 6px 10px; font-size: 18px; }
  /* строка таблицы — тоже кнопка (открывает график связки), а при
     4px отступах её высота 24px — пальцем попадаешь в соседнюю */
  .opp-table td { padding: 6px var(--sp-2); }
  /* линия между панелями графика: сама она 1px, попадать надо в зону */
  .panel-resizer::before { top: -10px; bottom: -10px; }
  .rz-grip { display: none; }
  /* iPadOS, как и iPhone, зумит страницу на фокусе поля мельче 16px
     и обратно не отъезжает — размер тут не про читаемость */
  .ticker-search, .form-input, .filter-input, .preset-select,
  .pb-coin, .calc-inp, #rate-input { font-size: 16px; }
}

/* ── Планшет: боковое меню иконками, но с подписями ─────────
   В диапазоне 769…1200px сайдбар сворачивается в 64px иконок, а
   кнопку разворота там прячут, и подписей нет нигде — ни
   в самом пункте, ни во всплывающей подсказке. На мониторе это
   терпимо: окно растягивается обратно. Планшет такой всегда:
   остаются семь неподписанных значков, и «Watchlist» от
   «Exchanges» не отличить. Возвращаем подпись под иконку. */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1200px) {
  /* 92px, а не 76: в 76 не влезали «Сохранённые» и «Автоторговля» —
     слово рвалось по буквам («Сохранённы / е»). Подпись без боковых
     отступов и левой полоски-акцента: вся ширина под слово. Слова
     переносим по пробелам; по буквам — только если слово шире колонки */
  #sidebar,
  html[data-sidebar="collapsed"] #sidebar { width: 92px; }
  #sidebar .nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 9px 2px;
    border-left-width: 0;
  }
  #sidebar .nav-item > span:not(.soon-badge) {
    opacity: 1;
    max-width: 100%;
    width: 100%;
    font-size: 9.5px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word; /* «Auto Spread Trading» рвём по словам, а не обрезаем */
    hyphens: auto;
  }
  #sidebar .nav-item .soon-badge {
    opacity: .9;
    max-width: none;
    margin-left: 0;
    padding: 0 5px;
    font-size: 8px;
    border-color: var(--gold);
  }
}

/* ════════════════════════════════════════════════════════════
   ТЕЛЕФОН — сплошной проход по всем экранам
   ────────────────────────────────────────────────────────────
   Блок стоит ПОСЛЕДНИМ в файле намеренно. Часть десктопных правил
   лежит НИЖЕ прежнего мобильного блока (@768) — например
   `#topbar .pair-builder{flex-wrap:nowrap}` — и перебивала его при
   равной специфичности: конструктор связки на телефоне уезжал за
   экран. Здесь же «последний выигрывает» работает в нашу пользу.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Основа ──────────────────────────────────────────────
     zoom:1.08 задуман для монитора. На 390px он съедает 30px
     ширины — это целая колонка таблицы, поэтому на телефоне
     масштаб честный. Вместе с ним снимаем и компенсации зума
     (#footer, #page-charts): они существуют только ради него. */
  body, #footer, #page-charts, .modal-overlay { zoom: 1; }
  /* 100vh на мобильных считается по РАЗВЁРНУТОМУ окну: при видимой
     адресной строке футер уезжал под неё. dvh меряет то, что видно
     сейчас; строка выше — запасной вариант для старых движков */
  html, body { height: 100vh; height: 100dvh; }
  /* Safari сам увеличивает шрифт в узких блоках — таблица разъезжалась */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* ── Верхняя лента разделов (бывший сайдбар) ────────────── */
  #sidebar { padding-right: var(--sp-2); }
  .nav-item {
    padding: 10px var(--sp-3);
    font-size: 12.5px;
    min-height: 42px;          /* палец, а не курсор */
  }
  .sidebar-brand { height: auto; }

  /* ── Шапка: три ряда вместо одной строки ─────────────────
     Всё в 56px влезало только на мониторе. Раскладываем по
     порядку: сверху язык/тема/вход, под ними тулбар во всю
     ширину (листается вбок), ещё ниже — конструктор связки. */
  #topbar {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    row-gap: var(--sp-2);
  }
  #demo-badge     { order: 1; }
  .topbar-spacer  { order: 2; flex: 1 1 auto; }
  .topbar-cluster { order: 3; flex: 0 0 auto; }
  #toolbar        { order: 4; flex: 1 0 100%; width: 100%; }
  .favs-toolbar   { order: 4; flex: 1 0 100%; width: 100%; }
  #topbar .pair-builder { order: 5; flex: 1 0 100%; width: 100%; }

  /* ── Тулбар ──────────────────────────────────────────────
     Ряд не переносим: кнопок семь, в две строки они съедят
     треть экрана. Вместо этого — горизонтальная прокрутка,
     а сами кнопки крупнее, чтобы в них попадал палец. */
  #toolbar, .favs-toolbar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* полоска прокрутки (2px) рисуется у нижнего края бокса; без зазора
       она ложилась прямо на нижний бордер фишек — отодвигаем её вниз */
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .favs-toolbar::-webkit-scrollbar { height: 2px; }
  .favs-toolbar::-webkit-scrollbar-thumb { background: var(--border-hi); }
  .tb-btn, .grid-btn {
    padding: 8px var(--sp-3);
    min-height: 38px;
    font-size: 12.5px;
  }
  .ticker-search {
    width: 150px; flex: 0 0 150px;
    /* 16px — не про красоту: при меньшем размере iOS зумит страницу
       на фокусе поля и обратно уже не отъезжает */
    font-size: 16px;
    min-height: 38px;
  }
  .rate-pill { min-height: 38px; }
  .signin-btn, .lang-btn, .theme-btn { padding: 7px var(--sp-3); min-height: 34px; }

  /* ── Выпадающие меню тулбара ─────────────────────────────
     Ширины 240/380px задумывались под мышь. На 390px меню
     упиралось в край экрана и обрезалось — растягиваем во всю
     ширину, позицию досчитывает placeMenu() по факту. */
  .fields-menu, #hidden-menu, .ptype-menu {
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: 62vh;
  }
  .field-item, .ptype-item { padding: 11px 10px; font-size: 13.5px; }
  .field-item input[type="checkbox"] { width: 18px; height: 18px; }
  .hidden-item { padding: 8px; gap: 8px; }
  .hidden-item .tb-btn { padding: 6px 10px; min-height: 32px; }

  /* ── Конструктор связки (страница графиков) ──────────────
     В строку он не влезает: две ноги, свап и выбор сетки.
     Каждая нога — своей строкой, свап между ними по центру. */
  #topbar .pair-builder {
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: stretch;
  }
  /* Свёрнутый конструктор: одна кнопка «+ Create» вместо шести рядов —
     график начинается сразу под шапкой. Тап разворачивает (см. app.js) */
  /* Кнопка-«ручка»: надпись «+ Создать» и справа от неё стрелка вниз,
     всё одной строкой по центру. В развёрнутом виде надпись прячется
     (внизу формы есть настоящая «Создать»), остаётся тонкая ручка со
     стрелкой вверх */
  .pb-fold {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px;
    width: 100%; min-height: 44px; padding: 4px 0;
    background: none;
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    color: var(--text-2);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
  }
  .pb-fold-txt { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
  .pb-fold-plus { color: #00D26A; font-weight: 700; }
  .pb-fold-caret {
    display: block; width: 18px; height: 18px; flex-shrink: 0;
    color: var(--text-3);
    transition: transform .2s var(--ease);
  }
  #topbar .pair-builder:not(.pb-folded) .pb-fold { min-height: 30px; padding: 3px 0; }
  #topbar .pair-builder:not(.pb-folded) .pb-fold-txt { display: none; }
  #topbar .pair-builder:not(.pb-folded) .pb-fold-caret { transform: rotate(180deg); }
  #topbar .pair-builder.pb-folded > :not(.pb-fold) { display: none; }
  /* Кнопка переехала в верхнюю строку (#sidebar, setupMobileNav): тянется
     между бургером и языком/темой; свёрнутый конструктор без неё пуст —
     его строку прячем целиком, график начинается сразу под шапкой */
  #sidebar .pb-fold {
    flex: 1 1 auto; min-width: 0; width: auto;
    min-height: 40px; margin: 0 var(--sp-2); padding: 4px var(--sp-2);
  }
  #sidebar .pb-fold.open .pb-fold-caret { transform: rotate(180deg); }
  #sidebar .pb-fold.off { display: none !important; }
  #topbar .pair-builder.fold-out.pb-folded,
  #topbar .pair-builder.pb-folded { display: none !important; }   /* и до JS: класс стоит в разметке */
  #topbar.tb-empty { display: none; }
  /* Две ноги стоят РЯДОМ в одной строке (лонг слева, шорт справа), между
     ними узкий свап. Нога — карточка в три ряда: пилюля LONG/SHORT, биржа,
     поле тикера, каждый во всю ширину карточки. Обёртка .pb-row раскрыта
     (display: contents), чтобы биржа и тикер легли в сетку по отдельности.
     Длинное имя биржи не влезает — fitType (app.js) оставляет логотип и
     тип рынка. Высоты 44px — под палец */
  #topbar .pb-col {
    /* базис: две карточки + свап (34px) + два зазора = ровно строка,
       чтобы пропорция и «Создать» ушли на следующую */
    flex: 1 1 calc(50% - 25px); min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2); align-content: start;
    padding: var(--sp-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  #topbar .pb-row { display: contents; }
  #topbar .pb-tag { font-size: 12px; min-width: 0; }
  #topbar .pb-dd { flex: none; min-width: 0; }
  #topbar .pb-dd-btn { min-height: 44px; padding: 8px var(--sp-2); font-size: 13.5px; border-radius: var(--r-md); gap: 6px; }
  #topbar .pb-dd-car { font-size: 12px; }
  /* в узкой карточке имя биржи важнее типа рынка: показываем имя с
     троеточием, тип (SPOT/FUTURES) прячем, даже если fitType навесил logo-only */
  #topbar .pb-dd-btn .pb-dd-name, #topbar .pb-dd-btn.logo-only .pb-dd-name { display: block; flex: 1 1 auto; min-width: 0; text-align: left; }
  #topbar .pb-dd-btn .pb-dd-type, #topbar .pb-dd-btn.logo-only .pb-dd-type { display: none; }
  #topbar .pb-search { flex: none; min-width: 0; max-width: none; }
  #topbar .pb-search .pb-coin { min-height: 44px; padding-left: 30px; padding-right: var(--sp-2); }
  #topbar .pb-search-ico { left: 10px; }
  #topbar .pb-swap { flex: 0 0 auto; align-self: center; margin: 0; width: 34px; height: 42px; font-size: 16px; }
  /* Пропорция и «Создать» в одной строке: поля пропорции слева, кнопка
     занимает всю оставшуюся ширину */
  #topbar .pb-coef { flex: 0 0 auto; min-width: 0; gap: 6px; }
  #topbar .pb-coef-val { width: 56px; flex-basis: 56px; min-width: 56px; height: 44px; font-size: 16px; }
  #topbar .pb-create { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 44px; font-size: 14px; }
  #topbar .pb-grid-ctl { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
  .pb-coin { width: auto; font-size: 16px; }
  /* подсказки тикера и список бирж — не шире экрана */
  .pb-sug, .pb-dd-menu { max-height: 50vh; max-width: calc(100vw - 24px); }
  /* Ноги стоят рядом: список бирж (290px) и подсказки тикера у правой ноги
     открываются от её левого края и уезжали за экран — правую ногу
     привязываем к правому краю, список ложится поверх левой карточки */
  #topbar .pb-sug { min-width: 290px; right: auto; }
  #topbar #pb-venue-b .pb-dd-menu, #topbar #pb-sug-b { left: auto; right: 0; }

  /* ── Таблица связок ──────────────────────────────────────
     Прокрутка вбок и приклеенный тикер заданы выше, в общем блоке
     на весь узкий диапазон — на планшете они нужны ровно так же.
     Здесь только высота строки: клик по строке открывает график,
     а 24px — не цель для пальца. */
  .opp-table td { padding: 7px 6px; }
  .opp-table thead th { padding: 7px 15px 7px 6px; }
  /* «Категория» и «Тип» на телефоне только отодвигают цены и спреды за
     экран — прячем их независимо от настроек полей (классы ячеек и
     data-i18n заголовков стабильны при любом порядке колонок).
     !important: ширины колонок пишет сгенерированный <style> (applyColVis) */
  .opp-table td.cat-cell, .opp-table td.ptype-cell,
  .opp-table th[data-i18n="th_cat"], .opp-table th[data-i18n="th_ptype"] {
    display: none !important;
  }
  /* ячейка связки — компактнее: мелкие иконки и имя площадки в одну строку
     с многоточием, ряд не распухает */
  .leg-row { gap: 5px; }
  .leg-row .venue-logo { width: 15px; height: 15px; }
  .leg-name {
    font-size: 12px;
    max-width: 96px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tick-name { font-size: 13px; }
  /* первые две колонки у́же — тогда цены И спред на вход влезают в первый
     экран без прокрутки (типовая ширина 390px: 76+116+96+96 = 384) */
  #opp-table th[data-i18n="th_ticker"], #opp-table td.tick-cell { width: 76px !important; }
  #opp-table th[data-i18n="th_pair"], #opp-table td:nth-child(2) { width: 116px !important; }
  .leg-name { max-width: 72px; }
  .opp-table td.mono, .opp-table td .mono { font-size: 12px; }

  /* ── Модалки: лист снизу ─────────────────────────────────
     Окно по центру на телефоне оказывается под клавиатурой.
     Прижатое к низу открывается от края, куда дотягивается
     большой палец, и клавиатура его не перекрывает. */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    /* !important: у модалки фильтров max-width прописан в атрибуте style */
    max-width: 100% !important;
    max-height: 92vh; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .modal-header, .modal-body { padding: var(--sp-4); }
  /* Клавиатура открыта (класс kb-open ставит bindKeyboardViewport, app.js):
     оверлей ужат до видимой области, лист не выше неё; логотип и подзаголовок
     авторизации прячем — экрана над клавиатурой мало, поле важнее */
  .modal-overlay.kb-open .modal { max-height: 100%; }
  .modal-overlay.kb-open .auth-hero { padding: 0 0 10px; }
  .modal-overlay.kb-open .auth-hero-logo,
  .modal-overlay.kb-open .auth-hero-sub { display: none; }
  /* у истории фандинга отступы держат сами строки — иначе поля складываются,
     а разделители строк перестают доходить до края окна */
  .fh-body { padding: 0; }
  .fh-tabs { padding: 0 var(--sp-4) var(--sp-3); }
  .fh-row  { padding: 9px var(--sp-4); }
  .modal-footer { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; min-height: 42px; }
  /* подвал карточки Share: три кнопки (ссылка / галерея / файл) в ряд,
     на совсем узком экране «Скачать PNG» переносится второй строкой */
  .share-foot { gap: 8px; }
  .share-foot .btn { padding-inline: 10px; font-size: 13.5px; white-space: nowrap; }
  .modal-close { font-size: 24px; padding: 4px 10px; }
  .form-input, .filter-input, .preset-select, #rate-input { font-size: 16px; }
  .filter-input { padding: 8px var(--sp-2); }
  .preset-row { flex-wrap: wrap; }
  .exc-picker-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .exc-pick-chip { min-height: 40px; }

  /* ── Главная ─────────────────────────────────────────────
     Герой со статистикой обязан влезать в первый экран и на телефоне
     (с учётом панелей браузера): ужимаем отступы, лого и заголовок. */
  .home-page { padding: var(--sp-3) var(--sp-4) 56px; }
  .home-hero { padding: var(--sp-3) 0 var(--sp-4); }
  .home-badge { margin-bottom: var(--sp-5); font-size: 11.5px; padding: 5px 12px; }
  .home-page .home-logo.reveal { width: 64px; height: 64px; margin-bottom: var(--sp-3); }
  .home-page .home-title.reveal { font-size: clamp(32px, 9vw, 40px); }
  .home-tagline { margin-top: var(--sp-3); font-size: 15px; }
  .home-sub { font-size: 14px; }
  .home-cta { display: block; width: 100%; text-align: center; padding: 13px var(--sp-5); margin-top: var(--sp-5); }
  .home-stats { flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); }
  .home-features { grid-template-columns: 1fr; margin-top: var(--sp-8); }
  /* 110px размытия на полэкрана телефон перерисовывает каждый кадр —
     на слабых аппаратах это заметные рывки. Картинка та же, цена ниже */
  .aurora-blob { filter: blur(64px); }

  /* ── Графики ─────────────────────────────────────────────
     Сетки 1×2 и 2×2 на телефоне бессмысленны: плитка выходит
     с ладонь. Складываем их в столбик — доли колонок JS пишет
     в style, поэтому только !important. */
  .chart-grid.g2, .chart-grid.g4 {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(320px, auto);
    overflow-y: auto;
  }
  /* разделители тянут мышью — пальцем в 9px не попасть, а прокрутку
     они перехватывают, поэтому на телефоне их просто нет */
  .grid-split { display: none !important; }
  .chart-tile-header { flex-wrap: wrap; row-gap: 6px; padding: var(--sp-2); }
  .tile-btn { min-width: 34px; height: 34px; }
  .tf-pill { padding: 7px 10px; }
  .chart-info-cards { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-2) var(--sp-3); }
  .info-card { min-width: 96px; }
  .calc-panel {
    top: 56px; left: var(--sp-2); right: var(--sp-2);
    width: auto; max-width: none;
    max-height: 70vh;
  }
  .calc-inp { width: 96px; font-size: 16px; }
  .leg-pick-pop { width: auto; left: var(--sp-2); right: var(--sp-2); max-width: calc(100vw - 16px); }
  .pane-toolbar { padding: 6px var(--sp-2); }
  .ptb-btn { padding: 6px 9px; font-size: 12px; }
  /* бар панели («Fill spread · In · Out · Table») на 390px переносился на
     вторую строку и НАКРЫВАЛ график. Одна строка с прокруткой вбок и
     потолком ширины — бар остаётся тонкой полоской в углу панели */
  .pane-bar {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    max-width: calc(100% - 96px);   /* правее живёт ценовая шкала */
    gap: 5px;
    font-size: 10.5px;
    scrollbar-width: none;
  }
  .pane-bar::-webkit-scrollbar { display: none; }
  .pane-bar .pane-bar-title { white-space: nowrap; }
  /* граница между панелями: сама линия тонкая, но зона захвата
     в 11px — под курсор. Подушечка пальца шире, растягиваем до 30px */
  .panel-resizer::before { top: -14px; bottom: -14px; }

  /* ── Избранное / биржи / гайд ────────────────────────────── */
  .favs-title { font-size: 21px; }
  .fav-row { flex-wrap: wrap; row-gap: 6px; padding: 10px var(--sp-3); }
  /* .exec-page и .exchanges-grid вложены друг в друга, и их отступы
     складывались в 40px полей с каждой стороны — карточка сжималась до 310px */
  .exec-page { padding: 0; }
  .exchanges-grid { padding: var(--sp-4); }
  .exc-card { padding: var(--sp-4); }
  .btn-signup { padding: 10px; }
  .guide-page { padding: var(--sp-5) var(--sp-4) 64px; }
  .guide-article .g-code { overflow-x: auto; }
  .guide-article ul { padding-left: 18px; }

  /* ── Подсказки, попапы, футер ───────────────────────────── */
  .gtip { max-width: calc(100vw - 24px); }
  #spark-pop { left: 8px !important; right: 8px; width: auto; max-width: none; }
  #footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: 11px;
  }
  .footer-spacer { display: none; }
  .footer-sep { margin: 0; }
  .toast-wrap { left: var(--sp-3); right: var(--sp-3); transform: none; }
}

/* ── Совсем узкие экраны (iPhone SE / mini) ───────────────── */
@media (max-width: 400px) {
  .nav-item { padding: 10px var(--sp-2); font-size: 12px; }
  .tb-btn { padding: 8px var(--sp-2); gap: 5px; }
  .ticker-search { width: 128px; flex: 0 0 128px; }
  .home-stat-sep { display: none; }
  .home-stats { gap: var(--sp-3) var(--sp-5); }
  .modal-header, .modal-body { padding: var(--sp-3); }
  .fh-body { padding: 0; }
  .signin-btn { padding: 7px var(--sp-2); font-size: 12px; }
}

/* ── Сенсорный ввод (без мыши) ─────────────────────────────
   Правила по :hover на телефоне срабатывают ОТ КАСАНИЯ и
   залипают до следующего тапа: карточка оставалась приподнятой,
   свап — перевёрнутым. А то, что показывается только на ховере
   (крестик у избранного), пальцем не достать вовсе. */
@media (hover: none) {
  .home-feature:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .home-feature:hover .feature-icon { transform: none; box-shadow: none; }
  .home-cta:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .pb-swap:hover { transform: none; }
  .spark-open:hover { transform: none; }
  .fav-row:hover { transform: none; box-shadow: none; }
  .fav-del:hover { transform: none; }
  /* ручка на границе панелей показывалась только под курсором —
     без мыши о возможности тянуть вообще нельзя было догадаться */
  /* Стрелки-ручки на границах панелей на телефоне и планшете не показываем
     вовсе (просьба владельца 2026-09-11: как у конкурента, только тонкие
     линии). Граница по-прежнему тянется пальцем, зона захвата шире линии */
  .rz-grip { display: none; }
  /* удалить из избранного можно и без курсора */
  .fav-del { opacity: 1; }
  /* нажатие вместо ховера — единственная обратная связь на тапе */
  .tb-btn:active, .btn:active, .nav-item:active { filter: brightness(1.25); }
  /* Подсветка строки таблицы по :hover на сенсоре залипала за точкой
     последнего касания: таблица перерисовывается каждый опрос, под той же
     точкой оказывалась ДРУГАЯ строка — подсветка перепрыгивала на чужую
     связку и моргала между перерисовками. Без мыши :hover не нужен вовсе,
     обратная связь тапа — :active */
  .opp-table tbody tr:hover { background: transparent; box-shadow: none; }
  .opp-table tbody tr:active { background: var(--bg-hover); }
}

/* ════════════════════════════════════════════════════════════
   RICH LAYER v2 — «статусное освещение» (просьба владельца
   2026-09-05: свет как у дорогих сайтов). Тёмная тема получает
   глубину: чуть глубже фоны, тёплые champagne-бордеры, объёмный
   свет по углам, свечение активных элементов. Light не трогаем.
   ════════════════════════════════════════════════════════════ */

/* ── Палитра глубже + тёплые бордеры (champagne вместо серого) */
[data-theme="dark"] {
  --bg:        #0B0D0F;
  --bg-panel:  #121517;
  --bg-card:   #191D21;
  --bg-hover:  #21262B;
  --bg-modal:  #111417;
  --border:      rgba(255, 240, 205, .075);
  --border-hi:   rgba(255, 240, 205, .16);
  --border-soft: rgba(255, 240, 205, .045);
  --input-bg:  #14181B;
}

/* ── Объёмный свет контента: золото сверху, изумруд снизу, виньетка */
[data-theme="dark"] #content {
  background:
    radial-gradient(85% 40% at 74% -14%, rgba(212,175,55,.065), transparent 60%),
    radial-gradient(60% 34% at 6% -10%,  rgba(245,181,10,.038), transparent 55%),
    radial-gradient(75% 46% at 108% 112%, rgba(0,210,106,.05),  transparent 60%),
    radial-gradient(55% 40% at -12% 116%, rgba(0,210,106,.032), transparent 55%),
    var(--bg);
}

/* ── Sidebar: люксовая подсветка ──────────────────────────── */
[data-theme="dark"] #sidebar {
  position: relative;
  background:
    radial-gradient(150% 34% at 35% -6%, rgba(245,181,10,.10), transparent 62%),
    radial-gradient(120% 26% at 0% 104%, rgba(0,210,106,.055), transparent 60%),
    linear-gradient(180deg, #14171A, #0E1113);
  border-right-color: rgba(255, 240, 205, .09);
  box-shadow: inset -1px 0 0 rgba(255, 240, 205, .04);
}
/* световой шов по правой кромке — блик дорогой панели */
[data-theme="dark"] #sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(245,181,10,.35), rgba(255,240,205,.06) 30%,
    rgba(255,240,205,.04) 70%, rgba(0,210,106,.22));
}
/* halo за логотипом */
.sidebar-brand { position: relative; }
/* строго по центру логотипа, а не сдвинут влево: свет должен обнимать
   плашку равномерно со всех сторон */
[data-theme="dark"] .sidebar-brand::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 64px; height: 64px;
  transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,181,10,.20), transparent 74%);
}
[data-theme="dark"] .sidebar-brand { border-bottom-color: rgba(255,240,205,.10); }

/* активный пункт: светящаяся золотая шина + мягкий ореол */
.nav-item { position: relative; }
[data-theme="dark"] .nav-item.active {
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(245,181,10,.16), transparent 55%),
    linear-gradient(90deg, rgba(245,181,10,.10), var(--bg-hover) 70%);
}
[data-theme="dark"] .nav-item.active::before {
  content: "";
  position: absolute;
  left: -3px; top: 18%; bottom: 18%;
  width: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, #FFD65C, #D4AF37);
  filter: blur(5px);
  opacity: .85;
}

/* ── Topbar: верхний блик стекла ──────────────────────────── */
[data-theme="dark"] #topbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 45%),
    var(--bg-panel);
}

/* ── Карточки и всплывашки: внутренний блик по верхней грани —
      главный приём «дорогих» тёмных интерфейсов ─────────────── */
[data-theme="dark"] .exc-card,
[data-theme="dark"] .auth-switch,
[data-theme="dark"] .preset-item,
[data-theme="dark"] .fav-row,
[data-theme="dark"] .toast,
[data-theme="dark"] .auth-tabs {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .exc-card:hover {
  border-color: rgba(245,181,10,.35);
  box-shadow: 0 14px 38px rgba(0,0,0,.45),
              0 0 24px rgba(245,181,10,.10),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* модалка: появление с глубины + люксовая кромка */
.modal-overlay.open .modal { animation: modalIn .38s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
[data-theme="dark"] .modal {
  box-shadow: 0 40px 100px rgba(0,0,0,.65),
              0 0 0 1px rgba(245,181,10,.08),
              0 0 46px rgba(245,181,10,.05),
              inset 0 1px 0 rgba(255,255,255,.05);
}

/* Глянцевая развёртка по .btn-primary убрана (просьба пользователя):
   пробегающая с края в край светлая полоса отвлекала на кнопке Sign In */

/* Кнопки Apply (биржи и фильтры) — нейтральные, как «Defaults»/«Clear all»
   рядом: тёмный фон, тонкая рамка, белый текст, без зелёной заливки и
   глянца (просьба пользователя). Ховер — лёгкая подсветка, без свечения */
#filter-apply-btn, #exc-apply-btn {
  background: none;
  border-color: var(--border-hi);
  color: var(--text-1);
  box-shadow: none;
  text-shadow: none;
}
#filter-apply-btn::after, #exc-apply-btn::after { display: none; }
#filter-apply-btn:hover, #exc-apply-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-3);
  transform: none;
  box-shadow: none;
}
#filter-apply-btn:active, #exc-apply-btn:active { transform: none; box-shadow: none; }

/* ── Поля ввода: изумрудный фокус вместо белого (dark) ────── */
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .pb-coin:focus {
  border-color: rgba(0,210,106,.55);
  box-shadow: 0 0 0 3px rgba(0,210,106,.13), 0 0 18px rgba(0,210,106,.10);
}

/* ── Таблица: champagne-линия под шапкой ──────────────────── */
[data-theme="dark"] .opp-table thead th {
  border-bottom: 1px solid rgba(255,240,205,.12);
}

/* ── Выделение текста и клавиатурный фокус — фирменные ────── */
::selection { background: rgba(0,210,106,.30); }
:focus-visible { outline: 2px solid rgba(245,181,10,.55); outline-offset: 2px; }

/* light-тема остаётся чистой: тяжёлые свечения только в dark */

/* ════════════════════════════════════════════════════════════
   PROFILE PAGE (/profile)
   ════════════════════════════════════════════════════════════ */
/* на весь экран: кабинету незачем ужиматься в узкую колонку */
.profile-page { padding: var(--sp-6) var(--sp-8); }
.profile-head { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.profile-title {
  font-size: 26px; font-weight: 800; letter-spacing: -.4px;
  background: linear-gradient(110deg, var(--text-1) 30%, #00D26A 50%, var(--text-1) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 7s linear 1s infinite;
}

.profile-layout { display: flex; gap: var(--sp-5); align-items: flex-start; }

/* сайдбар секций */
.profile-side {
  width: 232px; flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.profile-side-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.profile-side-nick {
  font-weight: 700; font-size: 14px; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-nav { display: flex; flex-direction: column; gap: 4px; }
.profile-nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 9px var(--sp-3);
  color: var(--text-2);
  font-size: 13.5px; font-weight: 600; text-align: left;
  transition: all var(--dur) var(--ease);
}
.profile-nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.profile-nav-item.active {
  color: #00D26A;
  border-color: rgba(0,210,106,.45);
  background: rgba(0,210,106,.08);
  box-shadow: inset 0 0 12px rgba(0,210,106,.10);
}
.profile-side-foot { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.profile-nav-item.logout { color: var(--c-neg); }
.profile-nav-item.logout:hover { background: rgba(242,87,87,.10); color: var(--c-neg); }

/* аватар — как кнопка в шапке, но крупнее */
.profile-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid #00D26A; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,210,106,.06);
  box-shadow: 0 0 14px rgba(0,210,106,.15);
}
.profile-avatar.big { width: 64px; height: 64px; border-radius: 16px; }

/* контент секций */
.profile-content { flex: 1; min-width: 0; }
.profile-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.profile-card + .profile-card { margin-top: var(--sp-4); }
.profile-card-title { font-size: 15px; font-weight: 700; margin-bottom: var(--sp-4); }
.profile-idcard { display: flex; align-items: center; gap: var(--sp-5); }
/* строка имени: карандаш проявляется при наведении на карточку */
.profile-nick-row { display: flex; align-items: center; gap: var(--sp-2); }
.nick-edit-btn {
  background: none; border: none; color: var(--text-3);
  padding: 4px; border-radius: var(--r-sm); line-height: 0;
  /* виден всегда, а не только при наведении: на телефоне наведения нет,
     и карандаш было не найти (просьба владельца) */
  opacity: .8; transition: all var(--dur) var(--ease);
}
.profile-idcard:hover .nick-edit-btn { opacity: 1; }
.nick-edit-btn:hover { color: #00D26A; background: rgba(0,210,106,.10); }
.nick-edit { display: flex; align-items: center; gap: var(--sp-2); }
.nick-edit .form-input { width: 220px; padding: 6px 10px; }
.nick-edit .btn { padding: 6px var(--sp-3); font-size: 12.5px; }
.profile-idcard-txt { min-width: 0; }
.profile-nick { font-size: 18px; font-weight: 800; color: var(--text-1); overflow-wrap: anywhere; }
.profile-email { font-size: 13px; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; }
.profile-note { font-size: 12.5px; color: var(--text-3); margin: 0 0 var(--sp-4); }
#profile-sec-security form { max-width: 380px; }

/* полоска «назад» нужна только телефону (см. @768) */
.profile-back { display: none; }

/* гость по прямой ссылке /profile */
.profile-guest {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); padding: var(--sp-8) 0;
}
.profile-guest.hidden { display: none; }
.profile-guest-text { color: var(--text-2); font-size: 14px; margin: 0; }

@media (max-width: 720px) {
  .profile-layout { flex-direction: column; }
  .profile-side { width: 100%; }
  /* Два экрана: сначала список секций, тап открывает секцию во весь
     экран с полоской «назад» (класс sec-open ставит bindProfilePage) */
  .profile-layout:not(.sec-open) .profile-content { display: none; }
  .profile-layout.sec-open .profile-side { display: none; }
  .profile-nav-item[data-sec] { min-height: 46px; font-size: 14.5px; }
  .profile-nav-item[data-sec]::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-top: 2px solid currentColor;
    transform: rotate(45deg); opacity: .55;
  }
  .profile-back {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; min-height: 46px; margin-bottom: var(--sp-3);
    padding: 8px var(--sp-3);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text-1);
    font: inherit; font-size: 15px; font-weight: 700; text-align: left;
    cursor: pointer;
  }
  .profile-back-arr { color: #00D26A; flex-shrink: 0; }
  .profile-back-ico { display: inline-flex; color: #00D26A; }
  .profile-back-ico svg { width: 18px; height: 18px; }
  .profile-back-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ══ Большой сенсорный планшет (iPad Pro 12.9/13 в альбомной, шире 1200px) ══
   Тот же WebKit-баг высоты под zoom 1.08, что у планшетов до 1200px (см.
   блок ниже): страница уезжала вверх под шапку, снизу оставалась чёрная
   полоса (баг 13.09.2026). Здесь только снятие зума и высота окна —
   раскладка остаётся десктопной */
@media (hover: none) and (pointer: coarse) and (min-width: 1201px) {
  body, #footer, #page-charts, .modal-overlay { zoom: 1; }
  html, body { height: 100vh; height: 100dvh; }
  body:has(#page-charts.active) #content { overflow-y: hidden; overscroll-behavior: none; }
}

/* ══ Планшет с сенсорным экраном (iPad и подобные, 769…1200px) ══
   Только pointer: coarse — суженное окно браузера на мониторе сюда не
   попадает, ПК-версия не меняется. */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1200px) {
  /* zoom 1.08 задуман под монитор; Safari на iPad считает проценты
     высоты внутри zoom неверно — страница графика получалась выше окна,
     под графиком оставалась пустая полоса, а сам он уезжал под шапку и
     листался вместе со страницей. На телефоне зум уже снят тем же
     способом (см. блок ≤768px) */
  body, #footer, #page-charts, .modal-overlay { zoom: 1; }
  html, body { height: 100vh; height: 100dvh; }
  /* страница графика целиком в окне: прокрутки быть не должно — она
     мешала тянуть панели по высоте */
  body:has(#page-charts.active) #content { overflow-y: hidden; overscroll-behavior: none; }
  /* разделители панелей и сетки тянут пальцем: без touch-action браузер
     вместо перетаскивания начинал прокрутку страницы */
  .panel-resizer, .grid-split { touch-action: none; }
  /* Стек панелей пальцем не листается: все жесты на графике (пинч, шкала
     цены, протяжка по времени) забирает сам график, а браузер не должен
     перехватывать их как прокрутку контейнера. Высоты под окно подгоняет
     fitHeights, так что листать там и нечего */
  .chart-main { touch-action: none; overscroll-behavior: none; }

  /* Шапка: конструктор занимал строку целиком, а язык/тема/вход уезжали
     третьим рядом. Конструктор ужимается по ширине и переносит вторую
     ногу вниз сам, а язык/тема/вход встают справа на ту же высоту —
     два ряда вместо трёх */
  #topbar .topbar-spacer { display: none; }
  #topbar .pair-builder { flex: 1 1 0; min-width: 0; }
  #topbar .topbar-cluster { flex: 0 0 auto; margin-left: auto; align-self: center; }
  /* поле тикера: ровно под короткий плейсхолдер «Тикер…» (ключ меняет
     setupTabletBits, app.js) — длинное поле выталкивало «Скрытые» за край */
  .ticker-search { width: 118px; flex: 0 0 118px; }
  /* Сканер и вотчлист: тулбар ОДНОЙ строкой. Кнопки ширину держат, а ряд
     листается вбок пальцем; язык/тема/вход не в ряду, а рядом с ним —
     всегда видны в правом углу, сколько бы кнопок ни было слева */
  #topbar #toolbar, #topbar .favs-toolbar {
    flex: 1 1 0; min-width: 0; width: auto;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #topbar #toolbar::-webkit-scrollbar, #topbar .favs-toolbar::-webkit-scrollbar { display: none; }
  #topbar #toolbar > *, #topbar .favs-toolbar > * { flex-shrink: 0; }
  /* Конструктор связки — так же одной строкой с прокруткой вбок; ноги,
     пропорция, «Create» и сетка ширину держат, язык/тема/вход справа.
     Выпадающие списки конструктора прокручиваемый ряд обрезал бы —
     открытый список выносится в fixed скриптом (bindPbFloat, app.js) */
  #topbar .pair-builder {
    flex-wrap: nowrap; row-gap: 0; align-items: center;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* только вбок: overflow-x: auto сам по себе включает и вертикальную
       прокрутку, а закрытое меню бирж (absolute под кнопкой) раздувает
       область — вертикальный свайп утаскивал весь ряд под шапку.
       Страховка от программной прокрутки (фокус поля) — в bindPbFloat */
    overflow-y: hidden; touch-action: pan-x; overscroll-behavior-y: none;
  }
  #topbar .pair-builder::-webkit-scrollbar { display: none; }
  #topbar .pair-builder > *, #topbar .pb-col > *, #topbar .pb-row > * { flex-shrink: 0; }
  #topbar .pb-col { flex: 0 0 auto; flex-wrap: nowrap; }
  #topbar .pb-row { flex-wrap: nowrap; }
  #topbar .pb-grid-ctl { margin-left: var(--sp-2); margin-bottom: 0; }
  /* ── Ручка «+ Создать» и сетка в первой строке шапки (placePbFold) ──
     Конструктор уходит второй строкой во всю ширину и по умолчанию
     свёрнут, как на телефоне: график начинается сразу под шапкой. Сетка
     стоит справа перед языком/темой всегда на экране, а не в конце
     прокручиваемого ряда, где при пине её было не найти */
  #topbar .pb-fold {
    display: flex; flex: 0 0 auto; order: 1;
    flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 4px var(--sp-4);
    background: none;
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    color: var(--text-2);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
  }
  #topbar .pb-fold-txt { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
  #topbar .pb-fold-plus { color: #00D26A; font-weight: 700; }
  #topbar .pb-fold-caret {
    display: block; width: 18px; height: 18px; flex-shrink: 0;
    color: var(--text-3);
    transition: transform .2s var(--ease);
  }
  #topbar .pb-fold.open .pb-fold-caret { transform: rotate(180deg); }
  #topbar .pb-fold.off, #topbar > .pb-grid-ctl.off { display: none !important; }
  #topbar > .pb-grid-ctl, #topbar #hold-grid-ctl {
    order: 2; flex: 0 0 auto; margin-left: auto; margin-right: 0; margin-bottom: 0;
    padding-left: 0; border-left: 0;
  }
  #topbar .topbar-cluster { order: 3; }
  #topbar.tb-grid .topbar-cluster { margin-left: var(--sp-3); }
  #topbar .pair-builder.pb-tablet { order: 10; flex: 1 0 100%; width: 100%; min-width: 0; }
  #topbar .pair-builder.pb-tablet.pb-folded,
  #topbar .pair-builder.pb-folded { display: none !important; }   /* и до JS: класс стоит в разметке */
  /* рамка биржи короче: логотип + имя, длинное имя fitType ужмёт до
     логотипа с типом рынка; ряд и так листается вбок */
  #topbar .pb-dd { flex: 0 0 168px; min-width: 0; }
  /* поле тикера в одной рамке: без кольца фокуса поверх границы */
  #topbar .pb-coin:focus { box-shadow: none; }
  /* коэффициент ряд ужимать не смеет */
  #topbar .pb-coef, #topbar .pb-coef > * { flex-shrink: 0; }
}

/* ══ Телефон: выезжающее меню разделов и компактная шапка графика ══
   Всё ниже действует ТОЛЬКО при ширине ≤768px. Кнопка меню и подложка
   создаются скриптом только на телефоне (setupMobileNav, app.js); на
   мониторе этих элементов нет вовсе, а правила не срабатывают. */
.m-menu-btn, .m-nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* Верхняя строка: логотип · ☰ · … · язык · тема · вход.
     Лента разделов раньше занимала всю строку, а язык/тема/вход уезжали
     на отдельный ряд ниже — два ряда шапки на экране в 390px */
  #sidebar {
    overflow: visible;             /* выпадашка языка не должна обрезаться */
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3) 0 0;
    scrollbar-width: none;
  }
  .m-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    background: none; border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--text-1); cursor: pointer;
  }
  .m-menu-btn svg { width: 20px; height: 20px; }
  /* блок язык/тема/вход переезжает сюда из шапки (JS) — прижат вправо */
  #sidebar .topbar-cluster { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
  #topbar .topbar-spacer { display: none; }
  #topbar { row-gap: 0; }

  /* Разделы: выдвижная панель слева поверх страницы */
  .sidebar-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 950;
    width: min(78vw, 320px);
    flex-direction: column; align-items: stretch;
    padding: var(--sp-4) var(--sp-2) var(--sp-5);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .45);
    transform: translateX(-104%);
    transition: transform .22s var(--ease);
    overflow-y: auto;
  }
  .sidebar-nav.open { transform: none; }
  .sidebar-nav .nav-item {
    flex-shrink: 0;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding: 12px var(--sp-3);
    font-size: 14px;
    min-height: 46px;
  }
  .sidebar-nav .nav-item svg { display: inline; }
  .sidebar-nav .nav-item.active { border-left-color: var(--gold); border-bottom-color: transparent; }
  .m-nav-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 940;
    background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease);
  }
  .m-nav-backdrop.open { opacity: 1; pointer-events: auto; }

  /* ── «Резинка» iOS ──
     Таблицу можно было оттянуть пальцем за края по обеим осям (пустота
     слева и над шапкой), а страница ловила диагональный жест как своё
     перетаскивание. overscroll-behavior: none снимает и перетягивание
     за край, и передачу жеста родителю; «contain», что стоял раньше,
     запрещал только передачу, а резинку оставлял */
  html, body, #content, #toolbar, .table-wrap, .favs-toolbar { overscroll-behavior: none; }
  html, body { overflow-x: hidden; }
  .table-wrap { overscroll-behavior: none; }

  /* ── Страница графика ──
     Переключатель сетки 1/2/4 на телефоне бессмыслен (плитки с ладонь) —
     сетка всегда одиночная (см. charts.js), кнопок нет */
  .pb-grid-ctl, #hold-grid-ctl { display: none !important; }
  /* Шапка плитки: ряд 1 — ноги и IN/OUT, ряд 2 — ТФ и действия.
     Распорка растянута на всю ширину и работает как перенос строки */
  .chart-tile-header { padding: 6px var(--sp-2); gap: 5px; row-gap: 6px; }
  /* ноги и IN/OUT должны уместиться в один ряд на 375px: пилюли у́же,
     стрелка «↗» у пилюли спрятана (ссылка на биржу остаётся по тапу) */
  .chart-tile-header .pair-pill { padding: 4px 7px; font-size: 11.5px; gap: 4px; }
  /* Ноги и IN/OUT — всегда ОДНОЙ строкой: пилюли делят ширину и режутся
     многоточием (basis 0 — перенос им не нужен), IN/OUT не переносится */
  .chart-tile-header .pair-pill { flex: 1 1 0; min-width: 0; max-width: max-content; overflow: hidden; }
  .chart-tile-header .tile-inout { flex: 0 0 auto; white-space: nowrap; margin-left: var(--sp-2); }
  .chart-tile-header .pair-pill .pill-arr { display: none; }
  .chart-tile-header .tile-inout { font-size: 11px; gap: 4px; }
  /* ── Список панелей (кнопка «панели» в шапке плитки) ──
     Кнопки переносились как попало: «Состав индекса» сиротой под ЦЕНОЙ,
     «Выплаты» под ФАНДИНГОМ. Каждая группа — блок: подпись отдельной
     строкой, кнопки ровной сеткой в две колонки на всю ширину */
  .pn-dd-menu .pane-toolbar { min-width: 0; gap: 10px; align-items: stretch; }
  .pn-dd-menu .ptb-grp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .pn-dd-menu .ptb-group { grid-column: 1 / -1; padding: 0 2px 1px; }
  .pn-dd-menu .ptb-btn { justify-content: flex-start; min-height: 38px; padding: 6px 9px; min-width: 0; }
  .pn-dd-menu .ptb-btn > span[data-i18n] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn-dd-menu .ptb-btn .pane-help { margin-left: auto; flex-shrink: 0; }
  /* ── Панель ног по кнопке в шапке плитки ──
     Боковой панели на телефоне нет, а информация по ногам нужна: кнопка
     раскрывает её НАД графиком — лонг слева, шорт справа, ниже
     капитализация, индексы и резервы. Панель прокручивается, графику
     остаётся остальная высота */
  .chart-tile .btn-legs { display: inline-flex; gap: 4px; padding: 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
  .chart-tile .btn-legs .btn-legs-txt { line-height: 1; }
  .chart-tile.legs-open .chart-side {
    /* flex, а не grid: у grid-контейнера с прокруткой iOS Safari
       дорисовывал пустой хвост под содержимым */
    display: flex !important; flex-direction: row; flex-wrap: wrap; align-content: flex-start;
    gap: 6px;
    width: 100% !important; height: auto !important; min-height: 0; max-height: 46vh;
    overflow-y: auto !important;
    /* iOS: «резинка» панели утягивала за собой всю страницу — панель
       поднималась до пустого места, а лента под ней уезжала. Прокрутка
       панели заканчивается на её содержимом и не передаётся дальше */
    overscroll-behavior: contain; -webkit-overflow-scrolling: auto;
    flex: 0 0 auto; padding: 6px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .chart-tile.legs-open .chart-side > *:not(.hidden):not(.side-bottom) { display: block !important; flex: 1 1 100%; min-width: 0; margin: 0; }
  .chart-tile.legs-open .chart-side > .leg-card.leg-card-long,
  .chart-tile.legs-open .chart-side > .leg-card.leg-card-short { flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); }
  /* «липкий» низ панели (sticky bottom) на iOS резервировал место в
     прокрутке даже скрытым — снимаем и позицию, и margin-top: auto */
  .chart-tile.legs-open .chart-side .side-bottom { display: none !important; position: static !important; margin: 0 !important; }
  .chart-tile .side-resizer { display: none !important; }
  /* с открытой панелью спреду хватает и 120px: иначе минимумы панелей
     на пару пикселей превышали высоту плитки, и .chart-main получал
     микропрокрутку, за которую цеплялся палец */
  .chart-tile.legs-open .pw-spread { min-height: 120px; }
  .chart-tile.legs-open .chart-side .leg-card { padding: 6px 8px; margin: 0; }
  .chart-tile.legs-open .chart-side .leg-card-head { font-size: 12px; gap: 4px; margin-bottom: 3px; }
  .chart-tile.legs-open .chart-side .leg-row2 { font-size: 10.5px; padding: 1px 0; gap: 4px; flex-wrap: wrap; }
  .chart-tile.legs-open .chart-side .leg-row2 b { font-size: 10.5px; }
  /* «Интервал / След. фандинг» в узкой карточке переносился на две строки:
     на телефоне подпись короткая — «Фандинг» (просьба владельца) */
  .chart-tile.legs-open .chart-side .lbl-full { display: none; }
  .chart-tile.legs-open .chart-side .lbl-short { display: inline; }
  /* Индексы: вместо двух шевронов одна кнопка справа от обеих строк,
     состав индексов раскрывается в ДВЕ колонки (лонг слева, шорт справа),
     как карточки бирж выше; колонку «тикер» в узких таблицах прячем */
  .chart-tile.legs-open .chart-side > .side-idx:not(.hidden):not(.side-bottom) {
    flex: 1 1 100%;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px; align-items: center;
  }
  .chart-tile.legs-open .side-idx .idx-row { grid-column: 1; }
  .chart-tile.legs-open .side-idx .idx-row .idx-pop-btn { display: none !important; }
  .chart-tile.legs-open .side-idx .idx-pop-both { grid-column: 2; grid-row: 1 / 3; }
  .chart-tile.legs-open .side-idx .idx-pop-both:not(.hidden) { display: inline-flex !important; }
  .chart-tile.legs-open .side-idx .idx-pop { grid-column: 1 / -1; }
  .chart-tile.legs-open .idx-pop-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: start; }
  .chart-tile.legs-open .idxc-block { min-width: 0; }
  .chart-tile.legs-open .idxc-block + .idxc-block { margin-top: 0; padding-top: 0; border-top: 0; }
  .chart-tile.legs-open .idxc-s, .chart-tile.legs-open .idxc-th > span:nth-child(2) { display: none; }
  .chart-tile.legs-open .idxc-e { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .chart-tile-header .chart-tile-spacer { flex: 1 0 100%; height: 0; }
  /* восемь пилюль ТФ не влезают — тот же выбор списком, как в сетке 2×2 */
  .chart-tile-header .tf-pill { display: none !important; }
  .chart-tile-header .tf-dd { display: block !important; }
  /* сворачивание шапки/ряда панелей и полноэкранный режим — кнопки под
     мышь и большую сетку; на телефоне только место занимают */
  .chart-tile-header .btn-hdr-fold,
  .chart-tile-header .btn-panes-fold,
  .chart-tile-header .btn-max { display: none !important; }
  .chart-tile-header .tile-btn { min-width: 32px; height: 32px; }
  .chart-tile-actions { margin-left: auto; gap: 4px; }
  /* ряд групп панелей — одной строкой с прокруткой вбок, без переносов */
  .pane-toolbar.pt-main {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 4px var(--sp-2); gap: 6px;
  }
  .pane-toolbar.pt-main::-webkit-scrollbar { display: none; }
  .pane-toolbar.pt-main .ptb-dd-btn,
  .pane-toolbar.pt-main .lay-btn { padding: 5px 8px; font-size: 11px; white-space: nowrap; }
  .lay-btn-lbl { display: none; }      /* у раскладок остаётся значок */
  /* футер на странице графика отдаём под сам график */
  body:has(#page-charts.active) #footer { display: none; }
}

/* Телефон: инлайн-форма смены имени в личном кабинете не влезала в
   экран (поле 220px + две кнопки) и растягивала карточку за край.
   Поле на всю ширину, кнопки под ним делят строку пополам */
@media (max-width: 768px) {
  .profile-idcard { gap: var(--sp-3); min-width: 0; }
  .profile-idcard-txt { flex: 1 1 0; min-width: 0; }
  .nick-edit { flex-wrap: wrap; width: 100%; min-width: 0; }
  .nick-edit .form-input { flex: 1 1 100%; width: 100%; min-width: 0; }
  .nick-edit .btn { flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; }
}

/* Телефон: щит под шапкой на время открытой клавиатуры поиска (см. bindToolbar) */
.kb-shield { position: fixed; inset: 0; z-index: 85; background: transparent; touch-action: none; }

/* Превью карточки Share для телефона без Web Share API: картинка во весь
   экран, долгое нажатие даёт «Сохранить в Фото» (iOS) / «Скачать» (Android).
   touch-callout и user-select здесь ОБЯЗАНЫ быть включены, иначе iOS не
   покажет меню на долгое нажатие */
.share-img-overlay { padding: 12px; background: rgba(4,8,6,.94); backdrop-filter: none; z-index: 1001; }
/* и на телефоне превью по центру экрана, а не «шторкой» снизу поверх
   кнопок Share-модалки (общее правило .modal-overlay { align-items: flex-end }) */
.modal-overlay.share-img-overlay { align-items: center; justify-content: center; }
.share-img-box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.share-img { max-width: min(96vw, 560px); max-height: 74vh; width: auto; height: auto; border-radius: 14px;
  border: 1px solid var(--border-hi); box-shadow: 0 12px 40px rgba(0,0,0,.6);
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; pointer-events: auto; }
.share-img-hint { color: var(--text-2); font-size: 13.5px; text-align: center; max-width: 320px; line-height: 1.4; }
.share-img-close { min-width: 140px; }