/*
  Главная 24repost.ru в оформлении «Поток» (TZ-60): слой поверх landing.css. Подключается
  только новой главной (site/landing-potok/index.html), прежняя его не видит. Шрифт —
  Golos Text с сайта; синий бренда #2f6feb, светлый фарфор и свет по проводам — как в
  кабинете (концепт «Поток», одобрен владельцем 01.11.2026). Живость — по образцу главной
  Школьного помощника (владелец 01.11.2026): объёмная сцена, история при прокрутке, блоки,
  которые можно трогать, магнитные кнопки, свет под курсором.

  Разделы из прежней главной (подключение, тарифы, оплата, вопросы, подвал) перенесены
  дословно — здесь им только новые цвета и скругления.

  Шкала: шрифт 12 · 14 · 16 · 18 · 22 · 28 · 44 · 80; отступы кратны 4;
  скругления 10 (мелкое) · 14 (вложенное) · 22 (карточка) · 28 (крупная); кнопки — таблетки.
*/

body.potok {
  --ink: #0e1726;
  --ink-2: #344155;
  --muted: #4a5568;
  --faint: #6b7789;
  --bg: #f2f5fa;
  --panel: #f6f8fc;
  --line: #e0e6ef;
  --line-soft: #eaeef5;
  --accent: #2f6feb;
  --accent-2: #1d55d4;
  --accent-soft: #e9f0ff;
  --current: #38cdf3;
  --ok: #157347;
  --bad: #b3261e;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 28px;
  --shadow: 0 1px 2px rgba(14, 23, 38, 0.04), 0 14px 30px -16px rgba(22, 46, 96, 0.2);
  --shadow-lift: 0 2px 4px rgba(14, 23, 38, 0.05), 0 30px 60px -28px rgba(22, 46, 96, 0.34);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  background: var(--bg);
  overflow-x: clip;
}
/* Свет на фоне — два мягких пятна, как в кабинете */
body.potok::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 84% -6%, rgba(56, 205, 243, 0.13), transparent 62%),
    radial-gradient(900px 560px at 14% -12%, rgba(47, 111, 235, 0.1), transparent 60%);
}
.potok h1, .potok h2 { letter-spacing: -0.03em; }
.potok h3 { font-weight: 600; letter-spacing: -0.01em; }
.potok main section[id] { scroll-margin-top: 96px; }

/* ── Кнопки: таблетки, упругое нажатие; MAX — в цветах самого MAX ── */
.potok .lp-btn, .potok .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}
.potok .lp-btn svg, .potok .btn svg { width: 20px; height: 20px; flex: none; }
.potok .lp-btn:active, .potok .btn:active { transform: scale(0.97); }
.potok .lp-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 12px 28px -12px rgba(47, 111, 235, 0.75); }
.potok .lp-btn-primary:hover { background: var(--accent-2); }
.potok .lp-btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.potok .lp-btn-max, .potok .btn.max {
  background: linear-gradient(120deg, #2b7bff 0%, #5a54ff 55%, #8a3ff2 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 30px -14px rgba(106, 76, 255, 0.9);
}
.potok .lp-btn-max:hover, .potok .btn.max:hover { filter: saturate(1.12) brightness(1.04); }
.potok .lp-btn-tg, .potok .btn.tg { border-color: #cfe7f6; background: #fff; color: #0b6fa3; box-shadow: 0 1px 1px rgba(14, 23, 38, 0.04), 0 2px 6px -2px rgba(14, 23, 38, 0.07); }
.potok .lp-btn-tg:hover, .potok .btn.tg:hover { border-color: #a9d6f1; background: #f1f9ff; }
.potok [data-magnet] { will-change: transform; }

/* ── Шапка: стеклянная таблетка над страницей ── */
.potok .lp-header { position: sticky; top: 12px; z-index: 40; padding: 0 16px; }
.potok .lp-header-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(14, 23, 38, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(22, 46, 96, 0.35);
  transition: background 220ms var(--ease), box-shadow 220ms var(--ease);
}
.potok.scrolled .lp-header-pill { background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px -18px rgba(22, 46, 96, 0.45); }
.potok .lp-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.potok .lp-mark { position: relative; display: block; width: 30px; height: 30px; flex: none; }
.potok .lp-mark > svg { position: absolute; inset: 0; width: 30px; height: 30px; transition: opacity 0.5s; }
.potok .lp-mark > canvas { position: absolute; left: -13px; top: -13px; width: 56px; height: 56px; }
.potok .lp-mark.live > svg { opacity: 0; }
.potok .lp-nav { display: flex; gap: 2px; }
.potok .lp-nav a, .potok .lp-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease); }
.potok .lp-nav a:hover, .potok .lp-login:hover { background: rgba(14, 23, 38, 0.05); color: var(--ink); }
.potok .lp-login { color: var(--accent-2); font-weight: 600; }

/* ── Первый экран: сцена, заголовок по центру, действие ── */
.potok .lp-hero { display: flex; flex-direction: column; align-items: center; padding: 8px 24px 96px; text-align: center; }
.potok .lp-stage { position: relative; width: min(1040px, 100%); height: clamp(300px, 46vh, 440px); }
.potok .lp-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.potok .lp-stage-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.6s; }
.potok .lp-stage-mark svg { display: block; width: 168px; height: 168px; filter: drop-shadow(0 30px 40px rgba(30, 60, 140, 0.25)); }
.potok .lp-stage.live .lp-stage-mark { opacity: 0; }
.potok .lp-stage-label { position: absolute; left: var(--lx, 0); top: var(--ly, 0); z-index: 1; padding: 6px 12px; border-radius: 999px; background: rgba(14, 23, 38, 0.86); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -140%); transition: opacity 0.2s var(--ease); }
.potok .lp-stage-label.show { opacity: 1; }
.potok .lp-hero h1 { display: grid; gap: 14px; margin: 0; }
.potok .lp-title { margin: 0 auto; font-size: clamp(44px, 6.4vw, 84px); font-weight: 700; line-height: 0.98; text-wrap: balance; }
.potok .lp-kicker { color: var(--ink-2); font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.potok .lp-lead { max-width: 40rem; margin: 18px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.potok .lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.potok .lp-note { max-width: 36rem; margin: 16px auto 0; color: var(--faint); font-size: 14px; line-height: 1.5; }
/* Сборка первого экрана — одна, при загрузке, без скрипта: заголовок, строка и кнопки
   поднимаются по очереди. Скрипт страницы подключён модулем и работает после разбора
   страницы — прячь он заголовок сам, тот мигнул бы. */
.potok .lp-hero h1, .potok .lp-lead, .potok .lp-cta, .potok .lp-note { animation: lp-rise 800ms var(--ease) both; }
.potok .lp-lead { animation-delay: 90ms; }
.potok .lp-cta { animation-delay: 180ms; }
.potok .lp-note { animation-delay: 260ms; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } }
.potok .lp-stage.lp-off > canvas, .potok .lp-final-mark.lp-off > canvas { display: none; }

/* ── История одного сообщения: раздел закреплён, прокрутка ведёт сцену ── */
.potok .lp-flow { position: relative; height: 320vh; padding: 0; }
.potok .lp-flow-sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 56px; max-width: 1120px; height: 100vh; margin: 0 auto; padding: 0 24px; }
.potok .lp-flow h2 { margin: 0 0 28px; font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; line-height: 1.04; }
.potok .lp-steps { position: relative; display: grid; gap: 22px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.potok .lp-steps::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.potok .lp-steps::after { content: ""; position: absolute; left: 7px; top: 6px; width: 2px; height: calc((100% - 12px) * var(--sp, 0)); border-radius: 2px; background: linear-gradient(var(--accent), var(--current)); }
.potok .lp-steps li { position: relative; display: grid; gap: 4px; opacity: 0.42; transition: opacity 300ms var(--ease); }
.potok .lp-steps li::before { content: ""; position: absolute; left: -26px; top: 5px; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); transition: border-color 300ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease); }
.potok .lp-steps li.on { opacity: 1; }
.potok .lp-steps li.on::before, .potok .lp-steps li.past::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(47, 111, 235, 0.14); }
.potok .lp-steps b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.potok .lp-steps span { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Сцена: чаты — карточками по местам, провода — рисунком под ними. Места карточек и концы
   проводов заданы в долях сцены одними числами: источник — левые 38 %, приёмники — правые 38 %
   на высотах 22 и 78 %; на телефоне — источник сверху, приёмники внизу. */
.potok .lp-scene { position: relative; width: 100%; aspect-ratio: 1.08; }
.potok .lp-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.potok .lp-wires-column { display: none; }
.potok .lp-wire { fill: none; stroke: #c3d2ea; stroke-width: 0.5; stroke-linecap: round; }
.potok .lp-light { fill: none; stroke: var(--current); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 18 100; stroke-dashoffset: 18; opacity: 0; filter: drop-shadow(0 0 1.6px rgba(56, 205, 243, 0.95)); }
.potok .lp-chat { position: absolute; display: grid; gap: 10px; width: 38%; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-lift); }
.potok .lp-src { left: 0; top: 50%; transform: translateY(-50%); }
.potok .lp-dst { right: 0; transform: translateY(-50%); box-shadow: var(--shadow); transition: box-shadow 300ms var(--ease); }
.potok .lp-dst.got { box-shadow: 0 0 0 2px rgba(56, 205, 243, 0.45), var(--shadow-lift); }
.potok .lp-to-tg { top: 22%; }
.potok .lp-to-vk { top: 78%; }
.potok .lp-chat header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.potok .lp-glyph { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s); color: #fff; }
.potok .lp-glyph svg { width: 20px; height: 20px; }
.potok .lp-glyph.p-max { background: linear-gradient(135deg, #2b7bff, #5a54ff 55%, #8a3ff2); }
.potok .lp-glyph.p-tg { background: #2aabee; }
.potok .lp-glyph.p-vk { background: #0077ff; }
.potok .lp-chat-name { display: grid; min-width: 0; line-height: 1.25; text-align: left; }
.potok .lp-chat-name b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.potok .lp-chat-name small { color: var(--faint); font-size: 12px; }
.potok .lp-msg { min-height: 3.6em; margin: 0; padding: 10px 12px; border-radius: var(--r-m) var(--r-m) var(--r-m) 4px; background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.4; text-align: left; transition: opacity 360ms var(--ease), transform 360ms var(--ease), background 360ms var(--ease); }
.potok .lp-msg small { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.potok .lp-dst .lp-msg small { color: var(--ok); }
.potok .lp-msg.hidden { opacity: 0; transform: translateY(8px); }
/* Приёмник до прихода копии — пунктирное место под неё, а не пустая коробка */
.potok .lp-dst.waiting .lp-msg { display: none; }
.potok .lp-dst.waiting::after { content: "ждёт копию"; display: grid; place-items: center; min-height: 64px; border: 1px dashed #d2dbe8; border-radius: var(--r-m) var(--r-m) var(--r-m) 4px; color: var(--faint); font-size: 13px; }
.potok .lp-dst .lp-msg { animation: lp-rise 420ms var(--ease) both; }
.potok .lp-msg.flash { background: #e8f7fd; }
.potok .lp-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--accent); animation: lp-caret 900ms steps(1) infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }

/* ── Заголовки разделов ── */
.potok .lp-h2 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; line-height: 1.05; text-align: center; text-wrap: balance; }
.potok .lp-sub { max-width: 40rem; margin: 14px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; text-align: center; }

/* Искры — короткий отклик на действие в блоке (скрипт кладёт их и сам убирает) */
.potok .lp-spark { position: fixed; z-index: 60; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: var(--c, var(--current)); animation: lp-spark 700ms var(--ease) forwards; }
@keyframes lp-spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

/* Появление при прокрутке: прячется только то, что при загрузке ниже края экрана */
.potok .reveal { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.potok .reveal.pre { opacity: 0; transform: translateY(24px); }
.potok .reveal.in { opacity: 1; transform: none; }

/* ── Завершение ── */
.potok .lp-final { display: flex; flex-direction: column; align-items: center; padding: 72px 24px 112px; text-align: center; }
.potok .lp-final-mark { position: relative; width: 220px; height: 220px; margin-bottom: 16px; }
.potok .lp-final-mark > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.potok .lp-final-mark .lp-stage-mark svg { width: 110px; height: 110px; }
.potok .lp-final-mark.live .lp-stage-mark { opacity: 0; }

/* ── Перенесённые разделы: новые цвета и скругления ── */
.potok main section.connect, .potok main section.pricing, .potok main section.payment, .potok main section.faq { padding: 80px 0; }
.potok section h2.h { font-size: clamp(28px, 3vw, 40px); font-weight: 700; }
.potok .connect { background: transparent; }
.potok .card, .potok .feature, .potok .plan, .potok .botcard { border-color: var(--line-soft); border-radius: var(--r-l); box-shadow: var(--shadow); }
.potok .step .n { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.potok .lp-vk-note { margin-top: 24px; color: var(--muted); font-size: 14px; }
.potok .botcard .bc-btn { border-radius: var(--r-s); }
.potok .q { padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: var(--r-l); background: #fff; }
.potok .site-footer { background: #fff; border-top-color: var(--line-soft); }

/* Предпросмотр (выключатель «Поток» — «только администраторам»): плашка над первым экраном */
.potok .lp-preview { max-width: 1072px; margin: 16px auto 0; padding: 12px 16px; border-radius: var(--r-m); background: #fff6e5; color: #7a4b00; font-size: 15px; }

@media (max-width: 1100px) {
  .potok .lp-nav a[href="/news/"], .potok .lp-nav a[href="/wiki/"] { display: none; }
}
@media (max-width: 900px) {
  .potok .lp-nav { display: none; }
  /* История не закреплена: шаги над сценой, сцена проигрывается сама, когда видна */
  .potok .lp-flow { height: auto; padding: 72px 0; }
  .potok .lp-flow-sticky { position: static; grid-template-columns: minmax(0, 1fr); gap: 28px; height: auto; }
  /* Сцена — сразу под заголовком раздела, шаги — под ней: история видна, пока читаешь */
  .potok .lp-flow-text { display: contents; }
  .potok .lp-flow h2 { order: 0; margin: 0; }
  .potok .lp-flow .lp-scene { order: 1; }
  .potok .lp-steps { order: 2; }
}
@media (max-width: 640px) {
  .potok .lp-header { top: 8px; padding: 0 10px; }
  .potok .lp-header-pill { margin-top: 8px; padding: 6px 6px 6px 12px; }
  .potok .lp-long { display: none; }
  .potok .lp-login { padding: 0 10px; }
  .potok .lp-hero { padding: 0 16px 64px; }
  .potok .lp-stage { height: 280px; }
  .potok .lp-title { font-size: 40px; }
  .potok .lp-lead { font-size: 16px; }
  .potok .lp-cta { display: grid; width: 100%; }
  .potok .lp-cta .lp-btn { width: 100%; }
  .potok .lp-flow-sticky { padding: 0 16px; }
  .potok .lp-preview { margin: 12px 16px 0; }
  /* Сцена сверху вниз: источник над приёмниками, провода из его нижнего края */
  .potok .lp-scene { aspect-ratio: 0.86; }
  .potok .lp-wires-row { display: none; }
  .potok .lp-wires-column { display: block; }
  .potok .lp-chat { gap: 8px; padding: 12px; }
  .potok .lp-src { top: auto; bottom: 60%; left: 12%; width: 76%; transform: none; }
  .potok .lp-dst { top: 62%; width: 48%; transform: none; }
  .potok .lp-to-tg { left: 0; right: auto; }
  .potok .lp-to-vk { right: 0; }
  .potok .lp-msg { min-height: 0; font-size: 13px; }
  .potok .lp-glyph { width: 30px; height: 30px; }
  .potok .lp-glyph svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .potok *, .potok *::before, .potok *::after { transition-duration: 1ms !important; animation: none !important; }
  .potok .reveal.pre { opacity: 1; transform: none; }
  .potok .lp-light { display: none; }
}

/* ════ Вторая волна (владелец 01.11.2026: «нужна красивая главная, в которой красиво показаны
   прелести, особенно статистика по чатам и маршрутам»; «распиши чат-ботов с конструктором и
   ИИ-агентом, копирование истории канала при переезде, ИИ-агента для настройки и помощи») ════ */

.potok .lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.potok .lp-left { margin-left: 0; text-align: left; }

/* ── Окно кабинета: «Обзор» живьём ── */
/* Наклонённое окно в перспективе шире своей колонки: на телефоне до прокрутки край выходил за экран
   и страница сдвигалась вбок — лишнее срезается по ширине раздела, тень сверху и снизу остаётся. */
.potok .lp-window-zone { padding: 40px 0 88px; overflow-x: clip; }
.potok .lp-window-stage { margin-top: 44px; padding: 0 24px; perspective: 1800px; }
.potok .lp-window {
  --tilt: 0;
  --rx: 0deg;
  --ry: 0deg;
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(14, 23, 38, 0.08);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 6px rgba(14, 23, 38, 0.05), 0 60px 120px -40px rgba(22, 46, 96, 0.45);
  transform: rotateX(calc(var(--tilt) * 16deg + var(--rx))) rotateY(var(--ry)) scale(calc(1 - var(--tilt) * 0.05));
  transform-origin: 50% 0;
  transition: transform 120ms linear;
}
.potok .lp-window-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.85); }
.potok .lp-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dfe5ee; }
.potok .lp-window-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: var(--panel); color: var(--faint); font-size: 12px; }
.potok .lp-window-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 560px; }
.potok .lp-wside { display: grid; align-content: start; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--line-soft); background: rgba(246, 248, 252, 0.7); }
.potok .lp-wside p { margin: 0; }
.potok .lp-wside-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font-size: 14px; font-weight: 700; }
.potok .lp-wside-brand svg { width: 24px; height: 24px; }
.potok .lp-wside-item { padding: 7px 10px; border-radius: 10px; color: var(--ink-2); font-size: 13px; }
.potok .lp-wside-item.on { background: #fff; color: var(--accent-2); font-weight: 600; box-shadow: 0 1px 1px rgba(14, 23, 38, 0.04), 0 2px 6px -2px rgba(14, 23, 38, 0.07); }
.potok .lp-wside-group { padding: 12px 10px 4px; color: #98a3b5; font-size: 11px; font-weight: 600; }
.potok .lp-wmain { display: grid; align-content: start; gap: 16px; padding: 22px 26px 26px; text-align: left; }
.potok .lp-wmain p { margin: 0; }
.potok .lp-wdate { color: var(--faint); font-size: 13px; }
.potok .lp-wstatus { display: flex; align-items: center; gap: 14px; margin-top: -6px; }
.potok .lp-wok { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1d8a52; color: #fff; box-shadow: 0 8px 18px -8px rgba(29, 138, 82, 0.8); }
.potok .lp-wok svg { width: 22px; height: 22px; }
.potok .lp-wstatus b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.potok .lp-wstatus div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.potok .lp-wmetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow); }
.potok .lp-wmetric { display: grid; align-content: start; gap: 6px; padding: 16px 18px; }
.potok .lp-wmetric + .lp-wmetric { border-left: 1px solid var(--line-soft); }
.potok .lp-wm-cap { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.potok .lp-wm-num { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.potok .lp-wm-num small { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.potok .lp-wm-sub { color: var(--ink-2); font-size: 13px; }
.potok .lp-wm-note { color: var(--faint); font-size: 12px; }
.potok .lp-wm-note.warn { color: #a35600; }
.potok .lp-wm-note.ok { color: var(--ok); font-weight: 600; }
.potok .lp-wseg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.potok .lp-wseg i { height: 7px; border-radius: 4px; background: #1d8a52; }
.potok .lp-wseg i.off { border: 1px solid #c5ceda; background: transparent; }
.potok .lp-wbar { display: flex; gap: 3px; height: 7px; margin-top: 4px; }
.potok .lp-wbar .ok { flex: 46; border-radius: 4px; background: #1d8a52; }
.potok .lp-wbar .skip { flex: 3; border-radius: 4px; background: #e8962f; }
.potok .lp-wplat { display: flex; gap: 3px; height: 7px; margin-top: 4px; }
.potok .lp-wplat i { border-radius: 4px; }
.potok .lp-wplat .tg, .potok .lp-wlegend .tg { flex: 2474; background: #2aabee; }
.potok .lp-wplat .max, .potok .lp-wlegend .max { flex: 1617; background: #7b4dff; }
.potok .lp-wplat .vk, .potok .lp-wlegend .vk { flex: 1272; background: #0077ff; }
.potok .lp-wlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: 12px; }
.potok .lp-wlegend span { display: inline-flex; align-items: center; gap: 5px; }
.potok .lp-wlegend i { width: 8px; height: 8px; border-radius: 2px; }
.potok .lp-wroutes { padding: 16px 18px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow); }
.potok .lp-wroutes-head { display: grid; grid-template-columns: minmax(0, 1fr) 22% minmax(0, 1fr) 70px; align-items: end; gap: 0 10px; margin-bottom: 8px; color: var(--faint); font-size: 12px; font-weight: 600; }
.potok .lp-wroutes-head b { grid-column: 1 / -1; margin-bottom: 6px; color: var(--ink); font-size: 15px; }
.potok .lp-wroutes-head b i { padding: 1px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-style: normal; }
.potok .lp-wroutes-head span:nth-child(3) { grid-column: 3; }
.potok .lp-wroutes-head span:last-child { text-align: right; }
.potok .lp-wgrid { display: grid; grid-template-columns: minmax(0, 1fr) 22% minmax(0, 1fr) 70px; align-items: center; gap: 10px; }
.potok .lp-span2 { grid-row: span 2; }
.potok .lp-wnode { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(14, 23, 38, 0.04), 0 2px 6px -2px rgba(14, 23, 38, 0.07); }
.potok .lp-wnode.off { opacity: 0.5; }
.potok .lp-wnode .lp-glyph { width: 30px; height: 30px; border-radius: 9px; }
.potok .lp-wnode .lp-glyph svg { width: 17px; height: 17px; }
.potok .lp-wnode-name { display: grid; min-width: 0; line-height: 1.25; text-align: left; }
.potok .lp-wnode-name b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.potok .lp-wnode-name small { overflow: hidden; color: var(--faint); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.potok .lp-wwire { position: relative; align-self: stretch; min-height: 40px; }
.potok .lp-wwire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.potok .lp-wline { fill: none; stroke: #9fc2f6; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.potok .lp-wline.off { stroke: #c9d1dd; stroke-dasharray: 3 4; }
/* Путь света: сам не рисуется, по нему едет точка; координаты рисунка 0–100 — проценты коробки провода */
.potok .lp-wlight { fill: none; stroke: none; }
.potok .lp-wdot { position: absolute; z-index: 1; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--current); box-shadow: 0 0 0 3px rgba(56, 205, 243, 0.22), 0 0 14px 3px rgba(56, 205, 243, 0.75); pointer-events: none; }
.potok .lp-wcount { display: grid; justify-items: end; line-height: 1.1; }
.potok .lp-wcount b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 300ms var(--ease), transform 300ms var(--spring); }
.potok .lp-wcount b.bump { color: var(--accent); transform: scale(1.18); }
.potok .lp-wcount small { color: var(--faint); font-size: 11.5px; }
.potok .lp-wcount.off { color: var(--faint); font-size: 12px; font-weight: 600; }
.potok .lp-window-caption { max-width: 40rem; margin: 20px auto 0; padding: 0 24px; color: var(--faint); font-size: 14px; text-align: center; }

/* ── Статистика: вкладки, график подписчиков, карточки чатов, копии и доставка ── */
.potok .lp-stats { padding: 96px 0; }
.potok .lp-tabs { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 28px auto 0; padding: 4px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.potok .lp-tabs button { min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); }
.potok .lp-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px rgba(47, 111, 235, 0.9); }
.potok .lp-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.potok .lp-stats-panel { margin-top: 28px; }
.potok .lp-stats-panel:not([hidden]) { animation: lp-rise 500ms var(--ease) both; }
.potok .lp-stats-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.potok #lp-panel-routes .lp-stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.potok .lp-scard { position: relative; display: grid; align-content: start; gap: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); }
.potok .lp-scard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0), rgba(56, 205, 243, 0.1), transparent 60%); transition: opacity 300ms var(--ease); }
.potok .lp-scard:hover::before { opacity: 1; }
.potok .lp-scard header, .potok .lp-chatcard header { display: flex; align-items: center; gap: 10px; }
.potok .lp-scard header b { font-size: 16px; }
.potok .lp-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.potok .lp-big b { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.potok .lp-big span { color: var(--muted); }
.potok .lp-big em, .potok .lp-chatnum em { font-size: 14px; font-style: normal; font-weight: 600; }
.potok em.up { color: var(--ok); }
.potok em.down { color: var(--bad); }
.potok .lp-chart { position: relative; height: 220px; margin: 0 -6px; cursor: crosshair; touch-action: pan-y; }
.potok .lp-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.potok .lp-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.potok.js .lp-chartcard .lp-chart svg { clip-path: inset(-6px 100% -6px -6px); transition: clip-path 1600ms var(--ease); }
.potok.js .lp-chartcard .lp-area { opacity: 0; transition: opacity 900ms var(--ease) 700ms; }
.potok.js .lp-chartcard.in .lp-chart svg { clip-path: inset(-6px); }
.potok.js .lp-chartcard.in .lp-area { opacity: 1; }
.potok .lp-chart-guide { position: absolute; top: 0; bottom: 0; left: var(--gx, 99%); width: 1px; background: rgba(47, 111, 235, 0.28); opacity: 0; transition: opacity 200ms var(--ease); }
.potok .lp-chart-dot { position: absolute; left: var(--gx, 99%); top: var(--gy, 9%); width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.2); transform: translate(-50%, -50%); }
.potok .lp-chart-tip { position: absolute; left: var(--gx, 99%); top: var(--gy, 9%); padding: 5px 10px; border-radius: 999px; background: rgba(14, 23, 38, 0.88); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transform: translate(-100%, -150%); pointer-events: none; }
.potok .lp-chart.hover .lp-chart-guide { opacity: 1; }
.potok .lp-chart.left .lp-chart-tip { transform: translate(0, -150%); }
.potok .lp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.potok .lp-tiles li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); background: var(--panel); }
.potok .lp-tiles b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.potok .lp-tiles span { color: var(--muted); font-size: 13px; }
.potok .lp-chatlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.potok .lp-chatcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.potok .lp-chatcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.potok .lp-chatnum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 0; }
.potok .lp-chatnum b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.potok .lp-chatnum span { color: var(--muted); font-size: 13px; }
.potok .lp-trend { flex: 1 1 34px; width: 100%; min-height: 34px; overflow: visible; }
.potok .lp-trend path { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.potok.js .lp-trend { clip-path: inset(-4px 100% -4px -4px); transition: clip-path 1200ms var(--ease) 200ms; }
.potok .lp-trend.down path { stroke: var(--bad); }
.potok.js .lp-stats-panel.in .lp-trend { clip-path: inset(-4px); }
.potok .lp-chatnote { margin: 0; color: var(--faint); font-size: 12.5px; }
/* Карточка чата нажимается целиком: кнопка лежит поверх, график чата встаёт в большую карточку */
.potok .lp-chatcard { position: relative; }
.potok .lp-chatcard-pick { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.potok .lp-chatcard-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.potok .lp-chatcard:active { transform: translateY(-1px) scale(0.99); }
.potok .lp-chartcard { scroll-margin-top: 96px; }
.potok.js .lp-chartcard.in.redraw .lp-chart svg { clip-path: inset(-6px 100% -6px -6px); transition: none; }
.potok.js .lp-chartcard.in.redraw .lp-area { opacity: 0; transition: none; }
.potok .lp-chartcard.swapped header, .potok .lp-chartcard.swapped .lp-big, .potok .lp-chartcard.swapped .lp-tiles { animation: lp-rise 450ms var(--ease) both; }
.potok .lp-chatcard.swapped > :not(.lp-chatcard-pick) { animation: lp-rise 400ms var(--ease) both; }
.potok.js .lp-stats-panel.in .lp-trend.fresh { clip-path: inset(-4px 100% -4px -4px); transition: none; }
.potok .lp-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.potok .lp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.potok .lp-bars span { overflow: hidden; color: var(--ink-2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.potok .lp-bars b { font-size: 15px; font-variant-numeric: tabular-nums; }
.potok .lp-bars i { grid-column: 1 / -1; grid-row: 2; width: var(--w); height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--current)); transition: width 1100ms var(--ease); }
.potok.js .lp-bars i { width: 0; }
.potok.js .lp-stats-panel.in .lp-bars i { width: var(--w); }
.potok .lp-bars li:nth-child(2) i { transition-delay: 90ms; }
.potok .lp-bars li:nth-child(3) i { transition-delay: 180ms; }
.potok .lp-bars li:nth-child(4) i { transition-delay: 270ms; }
.potok .lp-bars li.off b, .potok .lp-bars li.off span { color: var(--faint); }
.potok .lp-dfeed { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.potok .lp-dfeed li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--panel); font-size: 13.5px; }
.potok .lp-dfeed li.new { animation: lp-feedin 600ms var(--spring) both; }
@keyframes lp-feedin { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.potok .lp-dfeed time { color: var(--faint); font-variant-numeric: tabular-nums; }
.potok .lp-dfeed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.potok .lp-dfeed em { grid-column: 2; font-style: normal; font-weight: 600; }
.potok .lp-dfeed em.ok { color: var(--ok); }
.potok .lp-dfeed em.skip { color: #a35600; }
.potok .lp-dfeed em.bad { color: var(--bad); }
.potok .lp-botmsg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #f3d4cf; border-radius: var(--r-m) var(--r-m) var(--r-m) 4px; background: #fff7f6; }
.potok .lp-botmsg p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.potok .lp-botmsg b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 13px; }

/* ── Разделы «текст + живая картинка»: ИИ-помощник, чат-боты, переезд канала ── */
.potok .lp-agent, .potok .lp-bots, .potok .lp-move { padding: 88px 0; }
.potok .lp-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 56px; }
.potok .lp-split-text { display: grid; gap: 4px; }
.potok .lp-points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.potok .lp-points li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.potok .lp-points li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 3px var(--accent); }
.potok .lp-split-text .lp-btn { margin-top: 18px; }
.potok .lp-agent-chat { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lift); }
.potok .lp-agent-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.potok .lp-agent-head b { font-size: 15px; }
.potok .lp-agent-head small { color: var(--faint); font-size: 12.5px; }
.potok .lp-agent-ava svg { display: block; width: 30px; height: 30px; }
.potok .lp-bubble { max-width: 88%; margin: 0; padding: 12px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.potok .lp-bubble.me { justify-self: end; border-bottom-right-radius: 6px; background: var(--accent); color: #fff; }
.potok .lp-bubble.bot { justify-self: start; border-bottom-left-radius: 6px; background: var(--panel); color: var(--ink); }
.potok .lp-bubble.bot.ok { background: #e9f6ef; color: #0f5132; }
.potok .lp-bubble p { margin: 0; }
.potok .lp-bubble ol { margin: 8px 0; padding-left: 20px; }
.potok .lp-bubble ol li { margin: 3px 0; }
.potok .lp-bubble .lp-agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.potok .lp-agent-actions button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.potok .lp-agent-actions button[disabled] { background: #9fb7e8; cursor: default; }
.potok .lp-agent-actions button.off { background: #fff; color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--line); }
.potok .lp-agent-actions button.off:hover { background: var(--panel); }
.potok .lp-agent-actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.potok .lp-agent-chat.js .lp-bubble.wait { opacity: 0; transform: translateY(8px); }
.potok .lp-agent-chat.js .lp-bubble.gone { display: none; }

/* Чат-боты: текст над снимком настоящего конструктора. Снимок шире колонки текста — на компьютере
   так читаются подписи карточек; на телефоне — снимок конструктора с телефона, узкой картинкой. */
.potok .lp-bots-text { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 24px 56px; }
.potok .lp-bots-text .lp-points { margin: 0; }
.potok .lp-shot { --shot-w: min(1360px, 100vw - 48px); width: var(--shot-w); margin: 44px 0 0 calc((100% - var(--shot-w)) / 2); }
.potok .lp-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: #f4f7fb; box-shadow: var(--shadow-lift); }
.potok .lp-shot figcaption { max-width: 44rem; margin: 16px auto 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; text-align: center; }

.potok .lp-move-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: start; gap: 12px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lift); }
.potok .lp-move-col { display: grid; gap: 10px; }
.potok .lp-move-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.potok .lp-move-mid { display: grid; place-items: center; height: 100%; color: var(--current); pointer-events: none; }
.potok .lp-move-mid svg { width: 28px; height: 28px; }
.potok .lp-move-list { display: grid; align-content: start; gap: 7px; min-height: 290px; margin: 0; padding: 0; list-style: none; }
.potok .lp-move-list li { display: grid; gap: 2px; padding: 9px 11px; border-radius: 12px; background: var(--panel); font-size: 13px; line-height: 1.35; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.potok .lp-move-list time, .potok .lp-move-ghost time { color: var(--faint); font-size: 11.5px; }
/* Пост старого канала — строка с отметкой, как «Выборочно» в кабинете */
.potok .lp-move-list:not(.dst) li { padding: 0; }
.potok .lp-move-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 11px; border-radius: 12px; cursor: pointer; }
.potok .lp-move-pick > span { display: grid; gap: 2px; }
.potok .lp-move-pick input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.potok .lp-move-list li:has(input:checked) { background: #e6efff; box-shadow: inset 0 0 0 1px rgba(47, 111, 235, 0.28); }
.potok .lp-move-list li.departing { background: #d6e5ff; }
.potok .lp-move-list li.tick input { animation: lp-tick 360ms var(--ease); }
@keyframes lp-tick { 50% { transform: scale(1.35); } }
.potok .lp-move-actions { margin: 4px 0 0; }
.potok .lp-move-actions .lp-btn { width: 100%; }
.potok .lp-move-actions .lp-btn[disabled] { opacity: 0.5; box-shadow: none; cursor: default; }
.potok .lp-move-actions .lp-btn.press { transform: scale(0.96); }
.potok .lp-move-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.4; }
/* Копия в новом канале встаёт ровно туда, куда долетела: без своего проявления */
.potok .lp-move-list.dst li { background: #eef7ff; transition: none; }
.potok .lp-move-list.dst li.wait { opacity: 0; }
/* Свои display у строк и полосы иначе перебили бы атрибут hidden */
.potok .lp-move-list li[hidden], .potok .lp-move-progress[hidden] { display: none; }
.potok .lp-move-ghost { position: absolute; z-index: 5; display: grid; gap: 2px; margin: 0; padding: 9px 11px; border-radius: 12px; background: #eef7ff; box-shadow: 0 16px 34px -14px rgba(47, 111, 235, 0.6); font-size: 13px; line-height: 1.35; pointer-events: none; }
.potok .lp-move-progress { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.potok .lp-move-progress i { height: 8px; overflow: hidden; border-radius: 999px; background: var(--panel); }
.potok .lp-move-progress b { display: block; width: var(--p, 0%); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--current)); transition: width 500ms var(--ease); }

@media (max-width: 1100px) {
  .potok .lp-window-body { grid-template-columns: minmax(0, 1fr); }
  .potok .lp-wside { display: none; }
}
@media (max-width: 900px) {
  .potok .lp-split, .potok .lp-stats-grid, .potok #lp-panel-routes .lp-stats-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .potok .lp-bots-text { grid-template-columns: minmax(0, 1fr); }
  .potok .lp-wmetrics { grid-template-columns: minmax(0, 1fr); }
  .potok .lp-wmetric + .lp-wmetric { border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .potok .lp-window-stage { margin-top: 28px; padding: 0 12px; }
  .potok .lp-window-bar span { display: none; }
  .potok .lp-wmain { padding: 16px 14px 18px; }
  .potok .lp-wstatus b { font-size: 21px; }
  /* Маршруты в окне на телефоне: «откуда» и «куда» карточками, провода — не рисуются */
  .potok .lp-wroutes-head { display: none; }
  .potok .lp-wgrid { grid-template-columns: minmax(0, 1fr) 54px; gap: 6px 10px; }
  .potok .lp-span2 { grid-row: auto; }
  .potok .lp-wwire { display: none; }
  .potok .lp-wnode { grid-column: 1; }
  /* Провода не рисуются — приёмник отходит от своего источника уголком */
  .potok .lp-wnode.to { position: relative; margin-left: 20px; }
  .potok .lp-wnode.to::before { content: ""; position: absolute; left: -14px; top: -8px; width: 9px; height: calc(50% + 8px); border: solid #9fc2f6; border-width: 0 0 2px 2px; border-bottom-left-radius: 7px; }
  .potok .lp-wcount { grid-column: 2; }
  .potok .lp-chatlist { grid-template-columns: minmax(0, 1fr); }
  .potok .lp-trend { flex-basis: 40px; }
  .potok .lp-shot { width: auto; margin: 32px 0 0; }
  .potok .lp-shot img { width: min(300px, 100%); margin: 0 auto; border-radius: 30px; }
  .potok .lp-move-stage { grid-template-columns: minmax(0, 1fr); }
  /* Поворачивается только стрелка: повёрнутый целиком ряд накрывал бы кнопку переноса */
  .potok .lp-move-mid { height: auto; }
  .potok .lp-move-mid svg { transform: rotate(90deg); }
  .potok .lp-move-list { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .potok .lp-window { transform: none; }
  .potok.js .lp-chartcard .lp-chart svg, .potok.js .lp-trend { clip-path: none; transition: none; }
  .potok.js .lp-chartcard .lp-area { opacity: 1; transition: none; }
  .potok.js .lp-bars i { width: var(--w); transition: none; }
  .potok .lp-agent-chat.js .lp-bubble.wait { transform: none; }
}