/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── SNDR FX Lite — кастомная мобильная версия ─────────────
   Отдельный mobile.html: табы снизу, большой список, график на весь экран,
   тулбар-инструменты и настройки формаций. Десктоп не трогаем. */

.lite {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-primary);
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  /* Шрифтовая пара Lite: Golos Text (Paratype, родная кириллица,
     геометричный гротеск под язык пилюли-меню) + Unbounded
     только для акцентов (лого, монета на графике). Цифры — моно. */
  --font: 'Golos Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', 'Golos Text', sans-serif;
  font-family: var(--font);
}

/* ── шапка ── */
.lite-header {
  padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lite-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-right: auto;
}
.lite-logo span { color: var(--accent); }
.lite-logo em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: 2px;
}
.lite-hbtns { display: flex; align-items: center; gap: 8px; }
/* Цветной кружок маркера — как чипы на десктопе: пустой контур —
   нет маркера, залитый цветом — монета в категории этого цвета. */
.lite-mdot {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.8px solid var(--text-muted);
  background: transparent;
  display: inline-block;
  /* счётчик монет цвета (ставит избранное, только при 2+): */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.lite-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.12s var(--ease), background 0.15s, border-color 0.15s;
}
.lite-ico:active { transform: scale(0.9); }
.lite-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lite-ico svg .half { fill: currentColor; stroke: none; opacity: 0.55; }
.lite-f.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lite-f.pro-lock { opacity: 0.55; }
.lite-avatar {
  background-size: cover;
  background-position: center;
  font-size: 13px;
}

/* ── выбор биржи: иконка-глобус в шапке + выпадающее меню ──
   Глобус — тот же глиф, что у ПК-кнопки (js/venuapicker.js): «биржа» в этом
   продукте читается по нему. Надписей у иконки нет (как и на ПК): выбор
   виден точкой бренда площадки и подписью списка («OKX · 132 пары»). */
.lite-ven { position: relative; }
.lite-ven.on { border-color: var(--accent); color: var(--accent); }
.lite-ven-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
  display: none;
}
/* Панель: position:fixed, координаты ставит JS по кнопке (шапка живёт в
   центрированном .lite шириной до 640px — фиксированные right/top соврали
   бы на планшете). JS клампит left в экран и задаёт max-height: на узких
   телефонах панель не уезжает за левый край, на низких — скроллится. */
.lite-ven-pop {
  position: fixed;
  z-index: 360;
  padding: 8px;
  background: var(--popup-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: liteVenIn 0.14s var(--ease, ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lite-ven-pop.hidden { display: none; }
@keyframes liteVenIn { from { opacity: 0; transform: translateY(-6px); } }
.lite-ven-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.lite-ven-head small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
}
.lite-ven-list { display: flex; flex-direction: column; }
.lite-ven-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 9px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.lite-ven-row:active { background: var(--menu-hover); }
.lite-ven-row.on { color: var(--text-primary); }
.lite-ven-logo { flex: none; display: flex; align-items: center; }
.lite-ven-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  opacity: 0.55;
  /* светлые/прозрачные PNG (binance — жёлтый глиф, kucoin/bitget — светлая
     плашка) читаются только на почти-чёрной подложке: та же логика, что
     в css/venuapicker.css — иначе на светлых темах строки «плывут» */
  background: #14161a;
  border: 1px solid var(--border);
  box-sizing: content-box;
}
.lite-ven-row.on .lite-ven-img { opacity: 1; }
.lite-ven-pill {
  flex: none;
  width: 20px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 3px 0;
  border: 1px solid;
  border-radius: 6px;
  opacity: 0.6;
}
.lite-ven-row.on .lite-ven-pill { opacity: 1; }
.lite-ven-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
/* сегменты рынка: OKX [FT][SP] — выбор всегда ровно один */
.lite-ven-segs { display: inline-flex; gap: 3px; flex: none; }
.lite-ven-seg {
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 7px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.lite-ven-seg.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.lite-ven-info {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.lite-ven-info.dead { color: var(--negative); }
.lite-ven-hint {
  margin-top: 6px;
  padding: 6px 6px 2px;
  border-top: 1px solid var(--border);
  font-size: 9.5px;
  color: var(--text-muted);
}

/* ТФ-лента: живёт только в окне графика, кнопки делят ширину поровну —
   все 6 всегда видны строго по центру, скролла нет. */
.lite-tf {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px 12px;
}
.lite-tf .tf-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.12s var(--ease), background 0.15s, color 0.15s, border-color 0.15s;
}
.lite-tf .tf-btn:active { transform: scale(0.94); }
.lite-tf .tf-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px var(--accent-soft-2);
}

/* ── страницы ── */
.lite-main { flex: 1; min-height: 0; position: relative; overflow: hidden; }
/* Скрим под меню как в Telegram: контент растворяется, уходя за пилюлю.
   Лежит поверх списков, но под меню (z 55 < 60), клики пропускает. */
.lite-main::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 132px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--bg) 82%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent) 0%, var(--bg) 82%);
  pointer-events: none;
  z-index: 55;
}
body.lite-fs .lite-main::after { display: none; }
.lite-page {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
}
.lite-page.is-on { display: flex; animation: litePageIn 0.18s var(--ease); }
@keyframes litePageIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* поиск + сортировка */
.lite-tools { display: flex; gap: 8px; padding: 10px 12px; }
.lite-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 12px;
  min-height: 44px;
  transition: border-color 0.15s;
}
.lite-search:focus-within { border-color: var(--accent); }
.lite-search svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 2; flex: none; }
.lite-search input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  min-height: 44px;
}
.lite-sort {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  transition: transform 0.12s var(--ease);
}
.lite-sort:active { transform: scale(0.96); }
.lite-count {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
/* счётчик «N пар» в Монетах убран — место отдаём списку */
#liteCount { display: none; }

/* список монет — крупные строки под палец */
.lite-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 10px 12px calc(80px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
/* Монеты: список начинается вплотную от зоны поиска — без собственного
   верхнего отступа (иначе 10+10 дают двойную дыру). Зазор до первой строки
   = нижний паддинг поиска (10), симметрично верхнему (10). */
#page-coins .lite-list { padding-top: 0; }
.lite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px 14px;
  margin-bottom: 8px;
  min-height: 64px;
  color: var(--text-primary);
  /* долгое нажатие — действие, выделение текста и коллаут не нужны */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: border-color 0.2s var(--ease), transform 0.12s var(--ease), background 0.15s;
}
.lite-row:active { transform: scale(0.99); }
.lite-star-btn {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease);
}
.lite-star-btn:active { transform: scale(0.88); }
.lite-rinfo { flex: 1; min-width: 0; }
.lite-rsym { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
/* чип формаций в строке: только если мастер вкл и данные загружены */
.lite-fmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 7px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.lite-fmark:active { transform: scale(0.92); }
.lite-rvol { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.lite-rnum { text-align: right; flex: none; }
.lite-rprice { font-size: 14px; font-weight: 600; font-family: var(--font-mono); }
.lite-rchg { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.lite-rchg.positive { color: var(--positive); }
.lite-rchg.negative { color: var(--negative); }
.lite-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 14px; }

/* ── график ── */
.lite-chead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
/* Ряд монеты живёт ПОД графиком, над инструментами: верхний зазор 10
   до графика, нижний 0 (ещё 10 даёт верхний паддинг инструментов) —
   симметрично 10/10. В полноэкранном режиме правило ниже (padding:0). */
#page-chart .lite-chead { padding: 10px 12px 0; }
.lite-prev {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 22px;
  transition: transform 0.12s var(--ease), background 0.15s;
}
.lite-prev:active { transform: scale(0.94); }
/* Под графиком — строгий центр: стрелки жмутся к названию, вся группа
   ‹ Название › стоит по центру (cinfo не тянется на всю ширину). */
#page-chart .lite-chead { justify-content: center; }
#page-chart .lite-cinfo { flex: 0 1 auto; }
/* Стрелки — голые ghost-шевроны без подложек (tap-зона 44px сохраняется
   невидимой). Правило только для ряда под графиком: кнопка фулскрина
   в уголке графика свою подложку сохраняет. */
#page-chart .lite-chead .lite-prev {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-secondary);
}
.lite-cinfo { min-width: 0; text-align: center; }
.lite-csym { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.03em; }
.lite-csub { display: flex; gap: 8px; justify-content: center; font-family: var(--font-mono); font-size: 13px; }
.lite-csub .positive { color: var(--positive); }
.lite-csub .negative { color: var(--negative); }
.lite-star {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease), border-color 0.15s;
}
.lite-star:active { transform: scale(0.94); }
.lite-star.on { border-color: var(--border-light); }
/* в шапке графика теперь живёт кружок маркера вместо звезды */
.lite-star .lite-mdot { width: 20px; height: 20px; }
.lite-chart-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 0 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  touch-action: none;
}
.lite-chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
/* Уголок графика: маркер цвета — ghost-иконка в левом верхнем углу
   поверх графика, в том же стиле, что стрелки и инструменты: без подложек
   и без тени (tap-зона 44px сохраняется невидимой). Кнопка фулскрина
   убрана: вход/выход — двойной тап. */
.lite-chart-corner {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 5;
  display: flex;
  align-items: center;
}
.lite-chart-corner .lite-star {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-secondary);
}
/* В полноэкранном режиме уголок растворяется (маркер скрыт правилом ниже),
   контейнеру позиционирование не нужно */
body.lite-fs .lite-chart-corner { position: static; }
.lite-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  text-align: center;
  padding: 0 20px;
  animation: liteEmptyPulse 1.8s ease-in-out infinite;
}
@keyframes liteEmptyPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.lite-chart-empty small { font-size: 11px; font-family: var(--font-mono); }
/* Одноразовая подсказка про двойной тап: крошечная пилюля по центру
   графика — мягко прилетает, через ~2.5с сама растворяется, на экране
   появляется всего несколько раз за жизнь устройства. Кликов не ловит.
   Стиль — как у нав-пилюли: тема-поверхность с лёгкой прозрачностью
   и блёром, тонкий бордюр, никакого чёрного пятна поверх графика. */
.lite-dbl-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  z-index: 8;
  pointer-events: none;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.lite-dbl-hint.is-on { opacity: 0.95; transform: translate(-50%, -50%); }
.lite-retry {
  pointer-events: auto;
  margin-top: 12px;
  min-height: 46px;
  padding: 0 28px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.12s var(--ease);
}
.lite-retry:active { transform: scale(0.96); }
/* тулбар рисования — 6 ghost-иконок без подложек делят ширину поровну.
   Tap-зона 44px сохраняется невидимой, иконка 24px. Зазоры симметричны:
   сверху до графика 8+10=18 (паддинг + поля иконки), снизу до меню
   0+10+8=18 (паддинг + поля иконки + запас страницы минус пилюля).
   Активный инструмент — акцентный цвет вместо заливки. */
.lite-draw {
  display: flex;
  gap: 8px;
  justify-content: center;
  /* края 1-в-1 с нижней пилюлей-меню (32px): одна колонка-сетка,
     воздух дают сами иконки, центрированные в 44px тап-зонах */
  padding: 8px 32px 0;
}
.lite-draw button {
  flex: 1 1 0;
  min-width: 0;
  /* 90px: на любой ширине контейнера (.lite до 640px) шесть кнопок
     заполняют ряд от края до края — ряд всегда 1-в-1 с пилюлей меню */
  max-width: 90px;
  min-height: 44px;
  border-radius: 14px;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease), color 0.15s;
}
.lite-draw button:active { transform: scale(0.94); }
.lite-draw button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.lite-draw button.on { background: none; border: none; color: var(--accent); }
.lite-hint { text-align: center; font-size: 10px; color: var(--text-muted); padding: 2px 0 8px; }

/* ── формации ── */
.lite-fm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 12px 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.lite-fm-title { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.lite-fm-title span { font-size: 12px; color: var(--accent); font-weight: 600; }
.lite-fm-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lite-switch {
  flex: none;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--text-muted);
  font-size: 24px;
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.12s;
}
.lite-switch:active { transform: scale(0.92); }
.lite-switch.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* круглый импульс при включении: forwards держит конечный кадр
   (невидимый), чтобы залипший класс не светился в режиме «выкл» */
.lite-switch.pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: litePulse 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes litePulse {
  from { transform: scale(0.72); opacity: 1; }
  to { transform: scale(1.55); opacity: 0; }
}
.lite-fm-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 10px 12px calc(80px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.25s;
}
.lite-fm-list.dim { opacity: 0.4; }
.lite-fm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  margin-bottom: 8px;
  height: 56px;
  min-height: 0;
  color: var(--text-primary);
  text-align: left;
  transition: border-color 0.2s var(--ease), transform 0.12s var(--ease), background 0.15s;
}
.lite-fm-row:active { transform: scale(0.99); }
.lite-fm-row.on { border-color: var(--accent-soft-2); }
.lite-fm-row .sw { flex: none; width: 26px; height: 14px; border-radius: 7px; border: 1px solid var(--border); }
.lite-fm-row .tx { flex: 1; min-width: 0; }
.lite-fm-row .tx b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lite-fm-row .st { flex: none; width: 46px; height: 30px; border-radius: 99px; border: 1px solid var(--border); position: relative; background: var(--surface-2, transparent); }
.lite-fm-row .st::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left 0.15s, background 0.15s;
}
.lite-fm-row.on .st { border-color: var(--accent); }
.lite-fm-row.on .st::after { left: 19px; background: var(--accent); }

/* ── нижние табы: узкая сильно скруглённая пилюля как в Telegram ── */
.lite-nav {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--nav-bg, var(--surface));
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
}
.lite-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: none;
  border: none;
  border-radius: 22px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  min-height: 44px;
  justify-content: center;
  position: relative;
  transition: color 0.15s, transform 0.12s var(--ease);
}
.lite-nav button:active { transform: scale(0.95); }
.lite-nav button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lite-nav .nav-f {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1.7px solid currentColor;
  border-radius: 6px;
}
.lite-nav button.is-on { color: var(--accent); font-weight: 700; background: var(--accent-soft, transparent); }
.lite-nav button b {
  position: absolute;
  top: 2px;
  right: calc(50% - 24px);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  display: none;
}
.lite-nav button b.is-on { display: block; }

/* тост */
.lite-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1014;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.lite-toast.is-on { opacity: 1; transform: translateX(-50%); }

/* попапы поверх lite (и поверх полноэкранного графика z 1005–1007):
   paywall из FS-тулбара иначе открывается вслепую под графиком */
.theme-popup { z-index: 1010; }
.profile-popup { z-index: 1010; }
.pro-overlay { z-index: 1011; }
.auth-overlay { z-index: 1012; }

/* стена входа: продукт заблюрен и некликабелен до авторизации */
body.app-locked .lite {
  filter: blur(10px) brightness(0.55);
  pointer-events: none;
  user-select: none;
}

/* ── язычок тем полностью скрыт: виджет тем открывается кнопкой
   в шапке (#liteThemeBtn), сам элемент оставляем в DOM для слушателей ── */
.lite-theme-tail { display: none; }
.lite-theme-tail .tail-tongue {
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: var(--text-muted);
  opacity: 0.55;
  margin-bottom: 5px;
}
.lite-theme-tail .tail-row { display: flex; align-items: center; gap: 7px; }
.lite-theme-tail svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* ── парящие ленты выбора (темы и цвета): блюр на весь экран,
   без подложек — элементы парят над интерфейсом ── */
.lite-theme-overlay,
.lite-pal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1013;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.lite-theme-overlay.hidden,
.lite-pal-overlay.hidden { display: none; }
.lite-vloop {
  --is: 68px;
  --pad: 166px;
  position: relative;
  height: min(400px, 56vh);
  height: min(400px, 56dvh);
  width: 100%;
  overflow: hidden;
}
.lite-vloop-list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  padding: var(--pad) 0;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.lite-vloop-list::-webkit-scrollbar { display: none; }
.lite-vloop-ring {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--text-primary);
  background: none;
  pointer-events: none;
}
.lite-vloop-mask { display: none; }
/* лента тем — круги как в ПК-свотче (.theme-dot): фон темы + акцентное
   ядро в центре, без названий.
   Кольцо выше — общее нейтральное для обеих лент, акцента нет. */
#liteThemeLoop { --is: 76px; }
.lite-vloop-row {
  display: block;
  width: 100%;
  height: var(--is);
  line-height: var(--is);
  text-align: center;
  white-space: nowrap;
  padding: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: none;
  border: none;
  font-family: inherit;
  transition: transform 0.15s var(--ease);
  transform: scale(0.68);
  opacity: 0.7;
}
.lite-vloop-row.is-on { transform: scale(1); opacity: 1; }
/* Темы и ТФ формаций: кликабелен ТОЛЬКО круг (.lite-vloop-cc / .lite-vloop-tf).
   Сама строка-кнопка клики пропускает — всё пустое место по бокам
   отдано скроллу ленты и закрытию оверлея (см. overlay-click в mobile-lite.js).
   Палитру маркеров (.lite-vloop-dots) НЕ трогаем — там как было. */
#liteThemeLoop .lite-vloop-row,
#liteFmTfLoop .lite-vloop-row { pointer-events: none; }
#liteThemeLoop .lite-vloop-row .lite-vloop-cc,
#liteFmTfLoop .lite-vloop-row .lite-vloop-tf { pointer-events: auto; cursor: pointer; }
/* Круги ТФ — строго по центру строки: flex вместо line-height-центровки
   (у inline-block с vertical-align:middle остаётся сдвиг на 1–3px от шрифтового
   страта — круг стоял несимметрично внутри кольца). */
#liteFmTfLoop .lite-vloop-row {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.lite-vloop-cc { position: relative; display: inline-block; vertical-align: middle; line-height: normal; }
.lite-vloop-cc > i {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
  /* тени тут нет специально: старый WebView мажет её тёмным пятном поверх круга */
}
.lite-vloop-lock {
  position: absolute;
  right: -8px;
  bottom: 2px;
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 0 4px;
  line-height: 1.6;
}
/* кружки цветов в ленте: та же блочная центровка, что у тем */
.lite-vloop-dots { --is: 76px; --pad: 162px; }
.lite-vloop-dot {
  display: block;
  width: 100%;
  height: var(--is);
  line-height: var(--is);
  text-align: center;
  padding: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: none;
  border: none;
  transition: transform 0.15s var(--ease);
  transform: scale(0.68);
  opacity: 0.7;
}
.lite-vloop-dot i {
  display: inline-block;
  vertical-align: middle;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.lite-vloop-dot.is-on { transform: scale(1); opacity: 1; }
/* круги-ТФ в попапе формаций: тот же размер, внутри моно-подпись */
.lite-vloop-tf {
  display: inline-block;
  vertical-align: middle;
  width: 62px;
  height: 62px;
  line-height: 62px;
  border-radius: 50%;
  border: 1.5px solid var(--border-light);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.lite-vloop-row.is-on .lite-vloop-tf { border-color: var(--text-primary);   color: var(--text-primary);
}
/* активный инструмент — акцент (специфичность выше базовой .on) */
body.lite-fs .lite-draw button.on { color: var(--accent); }
.lite-vloop-row.is-cur .lite-vloop-tf { border-color: var(--accent); color: var(--accent); }
.lite-pal-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.lite-pal-name small { color: var(--text-primary); font-weight: 600; }
.lite-vloop-hint { font-size: 11px; color: var(--text-muted); }

/* ── график во весь экран: как фокус-режим на ПК ──
   График забирает всё место; монета и ТФ — голым текстом поверх
   графика без подложек; вход/выход — двойной тап (кнопок больше нет). */
/* Птичка-стрелка тулбара: в поясе ПОД ТФ-лентой, слева, на одной высоте
   с названием/ценой монеты; смотрит вправо — ряд инструментов раскрывается
   в том же поясе по центру, на оси названия монеты. */
.lite-fs-tools {
  display: none;
  position: fixed;
  left: 8px;
  top: calc(44px + env(safe-area-inset-top, 0px));
  z-index: 1008;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
}
/* аккуратная птичка: заметный, но ненавязчивый флоат, шеврон повёрнут вправо */
.lite-fs-tools svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  animation: liteChevFloatR 2.6s ease-in-out infinite;
}
@keyframes liteChevFloatR {
  0%, 100% { transform: rotate(90deg) translateY(2px); opacity: 0.45; }
  50% { transform: rotate(90deg) translateY(-2px); opacity: 0.9; }
}
/* инструменты открыты — птичка смотрит влево (на себя) и замирает */
.lite-fs-tools.is-on svg { animation: none; transform: rotate(-90deg); opacity: 0.9; }
body.lite-fs { overflow: hidden; }
body.lite-fs .lite-header,
body.lite-fs .lite-nav,
body.lite-fs .lite-hint { display: none; }
body.lite-fs #page-chart {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: var(--bg);
  padding: 0;
  margin: 0;
}
/* сам холст — во весь экран, без карточки: нет бордера, радиуса и боковых маржинов */
body.lite-fs .lite-chart-wrap {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg);
}
/* монета под ТФ-лентой, по центру, в одну строку с обрезкой: за рамки не выходит */
body.lite-fs #page-chart .lite-chead {
  position: absolute;
  top: calc(46px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 1006;
  padding: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: liteFsIn 0.25s var(--ease);
}
@keyframes liteFsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.lite-fs .lite-chead > * { pointer-events: auto; }
body.lite-fs #litePrev,
body.lite-fs #liteNext,
body.lite-fs #liteStar { display: none; }
body.lite-fs #page-chart .lite-cinfo {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: none;
  padding: 0;
  overflow: hidden;
  transition: opacity 0.2s var(--ease);
}
/* инструменты раскрыты (ряд стоит на оси названия) — название гаснем */
body.lite-fs.lite-drawopen #page-chart .lite-cinfo { opacity: 0; }
body.lite-fs .lite-csym {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.lite-fs .lite-csub {
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ТФ — четко вверху СТРОГО по центру экрана (симметрично всегда),
   голые кнопки без подложки; тулбар их не трогает вовсе */
body.lite-fs .lite-tf {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 1006;
  padding: 0;
  pointer-events: none;
  animation: liteFsIn 0.25s var(--ease);
}
body.lite-fs .lite-tf .tf-btn {
  pointer-events: auto;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  min-height: 34px;
}
body.lite-fs .lite-tf .tf-btn.active {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--accent);
}
/* контент уходит под парящий нав — низ графика тоже с запасом
   (в полном экране нав скрыт, запас не нужен) */
body:not(.lite-fs) #page-chart {
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* тулбар — в том же поясе под ТФ, по ЦЕНТРУ экрана (ось названия монеты):
   ряд вытягивается на всю свою длину, голые иконки, зазор 2px */
body.lite-fs .lite-fs-tools { display: inline-flex; align-items: center; justify-content: center; }
body.lite-fs .lite-draw {
  position: fixed;
  left: 50%;
  top: calc(44px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 1008;
  flex-direction: row;
  gap: 2px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: none;
  max-width: calc(100vw - 24px);
}
body.lite-fs .lite-draw.open { display: flex; overflow-x: auto; scrollbar-width: none; }
body.lite-fs .lite-draw.open::-webkit-scrollbar { display: none; }
/* раскрытие не «щёлкает» всем рядом сразу: иконки вылетают одна за другой
   слева направо, как бы раскатываясь вправо от птички */
@keyframes liteToolIn {
  from { opacity: 0; transform: translateX(-16px) scale(0.85); }
  to { opacity: 1; transform: none; }
}
body.lite-fs .lite-draw.open button { animation: liteToolIn 0.2s var(--ease) backwards; }
body.lite-fs .lite-draw.open button:nth-child(2) { animation-delay: 32ms; }
body.lite-fs .lite-draw.open button:nth-child(3) { animation-delay: 64ms; }
body.lite-fs .lite-draw.open button:nth-child(4) { animation-delay: 96ms; }
body.lite-fs .lite-draw.open button:nth-child(5) { animation-delay: 128ms; }
body.lite-fs .lite-draw.open button:nth-child(6) { animation-delay: 160ms; }
body.lite-fs .lite-draw button {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  flex: none;
  /* цвет как у остальных верхних иконок — первичный текст,
     не приглушённый secondary */
  color: var(--text-primary);
}
/* настоящий Fullscreen API: только секция графика, без отступов */
#page-chart:fullscreen,
#page-chart:-webkit-full-screen {
  background: var(--bg);
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#page-chart:fullscreen .lite-chart-wrap,
#page-chart:-webkit-full-screen .lite-chart-wrap {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* ── компактный ряд FAQ + Полная версия ── */
.lite-form-links {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(80px + env(safe-area-inset-bottom, 0px));
}
.lite-faq-btn {
  flex: none;
  min-width: 76px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.lite-full {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* ── FAQ-шторка ── */
.lite-faq-overlay {
  position: fixed;
  inset: 0;
  z-index: 1013;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lite-faq-overlay.hidden { display: none; }
.lite-faq-box {
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  max-height: 82dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  position: relative;
  will-change: transform;
  transition: transform 0.2s var(--ease);
}
.lite-faq-grip {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -16px;
  touch-action: none;
  cursor: grab;
}
.lite-faq-grip::after {
  content: '';
  width: 44px;
  height: 5px;
  border-radius: 99px;
  background: var(--text-muted);
  opacity: 0.5;
}
.lite-faq-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.lite-faq-row { display: flex; gap: 8px; margin-bottom: 6px; }
.lite-faq-row .sw {
  flex: none;
  width: 22px;
  height: 12px;
  border-radius: 6px;
  margin-top: 2px;
}
/* маркеры-фигуры в FAQ: треугольник пробоя и ромб ретеста —
   канонические --fm-c-* (canvas красит их цветом своей формации) */
.lite-faq-row .sw.tri-up {
  width: 0;
  height: 0;
  background: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid var(--fm-c-long);
  border-radius: 0;
  margin: 2px 5px 0;
}
.lite-faq-row .sw.dia {
  width: 10px;
  height: 10px;
  background: none;
  border: 2px solid var(--fm-c-retest);
  border-radius: 0;
  transform: rotate(45deg);
  margin: 4px 6px 0;
}
.lite-faq-row .tx b { display: block; font-size: 12px; }
.lite-faq-row .tx small { color: var(--text-muted); font-size: 10px; }
.lite-faq-note {
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* ── (парные правила лент — выше, в блоке «парящие ленты») ── */

/* ── избранное: папки монет одного цвета ──
   Ряды при раскрытии выезжают по очереди; закрытие — тап по строке-папке
   или свайп вверх (птичка-кнопка убрана как лишняя). */
.lite-fav-group { position: relative; }
.lite-fav-group .lite-row.lite-fav-in {
  animation: liteFavRowIn 0.24s var(--ease) both;
}
@keyframes liteFavRowIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── строка-папка: кружок цвета со счётчиком слева, имя строго по центру ── */
.lite-folder { position: relative; justify-content: flex-start; min-height: 56px; }
/* маркер монеты, выпавшей из TOP_N: приглушённая строка, тап — снять маркер */
.lite-ghost { opacity: 0.55; }
.lite-folder .lite-mdot { width: 26px; height: 26px; line-height: 22px; font-size: 12px; }
.lite-fname {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 100px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* ── модалка переименования папки: то же парение, что у лент выбора ── */
.lite-fname-overlay {
  position: fixed;
  inset: 0;
  z-index: 1013;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lite-fname-overlay.hidden { display: none; }
.lite-fname-box {
  width: min(340px, 88vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lite-fname-title { font-size: 15px; font-weight: 700; }
.lite-fname-title small { color: var(--text-muted); font-size: 12px; font-weight: 600; margin-left: 4px; }
.lite-fname-input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.lite-fname-input:focus { border-color: var(--accent); }
.lite-fname-btns { display: flex; gap: 8px; }
.lite-fname-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  transition: transform 0.12s var(--ease);
}
.lite-fname-btn:active { transform: scale(0.96); }
.lite-fname-btn.is-ok { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ═══ Pro-гейтинг выбора биржи (25.09): Binance FT free, остальное PRO ═══ */
/* замок — единый с меню (sm-item-lock): SVG 12×12, без текстовой пилюли */
.lite-ven-row.lock { opacity: 0.55; }
.lite-ven-row.lock .lite-ven-name { color: var(--text-muted); }
.lite-ven-lock {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.85;
}
.lite-ven-lock svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lite-ven-seg.lock { opacity: 0.5; }