/* ============================================================================
   Final Cut — своя оболочка поверх Directus (рабочее название владельца).

   🔑 С 25.10.2026 — дизайн-система FINALCUT: светлая тема по образцу monobank,
   тёмное только левое меню, кнопки-таблетки (решения владельца 16:37, 16:41, 17:01).
   Артефакт: https://claude.ai/artifact/AB29W4jryVz8Hhqk2PT9nP, исходник —
   deploy/crm/design-system/ (tokens.json, components/bundle.css). Значения ниже
   совпадают с ним: меняем там и здесь вместе. Прежний тёмный вид (помаранч) —
   before/style-2026-10-25-before-finalcut-ds.css.
   ============================================================================ */

/* Шрифт monobank — Geologica, файлами у нас (vendor/fonts, SIL OFL 1.1): внешних запросов нет. */
@font-face { font-family: 'Geologica'; src: url('vendor/fonts/Geologica-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('vendor/fonts/Geologica-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('vendor/fonts/Geologica-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('vendor/fonts/Geologica-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ------------------------------------------------------------------------
     ШКАЛА. Значения берутся ТОЛЬКО отсюда — «на глаз» больше не ставим.
     Отступы и размеры свои: у нас плотный интерфейс (таблица на 18 колонок),
     шкала Open Props для него слишком крупная. Тени и плавности — из Open
     Props, они выверены (`vendor/open-props.min.css`, MIT).
     ------------------------------------------------------------------------ */

  /* отступы: 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  /* 🔑 07.09.2026, правило владельца: «где мы делаем выравнивание по левой
     стороне, отступ от края всегда одинаковый — слева, сверху и снизу.
     Давай пятьдесят попробуем». Одна рамка вокруг содержимого ящика:
     от края до первого текста, до кнопок и до низа — одно число. */
  --edge: 30px;   /* 🔑 решение владельца 08.09.2026: «отлично, 30 в самый раз». Примерка глазами: 50 → 45 → 40 → 35 → 30 */
  /* 🔑 высота кнопки одна на всю систему (владелец 07.09.2026: «все кнопки
     одного размера», затем «кнопки не шире, а выше»). Поля ввода остаются
     на --h-md 36: это разные вещи, кнопку надо попасть пальцем. */
  --h-btn: 44px;

  /* размеры текста: подпись · мелкий · обычный · крупный · заголовок */
  --ft-1: 11px;
  --ft-2: 12px;
  --ft-3: 13px;
  --ft-4: 14px;
  --ft-5: 16px;
  --ft-6: 18px;

  /* скругления: мелочь · поле и пункт · панель · таблетка (система FINALCUT, 25.10.2026)
     🔑 25.10.2026 17:51, владелец: «привести скругление до того варианта, который у нас идет.
     Везде по скруглению» — поля, списки, меню, таблица, плитки, панели и окна — 8, как кнопки
     (было 12 и 20: поле рядом с кнопкой выглядело овальным, угол таблицы — «явно больше»).
     Роли остаются разными токенами — значение у них сейчас одно. */
  --rd-1: 6px;
  --rd-2: 8px;
  --rd-3: 8px;
  --rd-4: 999px;
  /* 🔑 скругление кнопки — роль, а не значение: владелец 25.10.2026 17:20 — «прямоугольники
     с небольшим закруглением краёв», выбрал 8 из 8 · 12 · 16. Все кнопки, кнопки-значки,
     переключатель вида, поле поиска. Плашки, фильтры-чипы и тумблеры остаются таблетками. */
  --rd-btn: 8px;

  /* высота элементов управления: мелкий · обычный · крупный */
  --h-sm: 28px;
  --h-md: 36px;
  --h-lg: 44px;
  /* строка таблицы — не ниже 46 (дизайн-система; владелец 30.10.2026: «Давай 46»): была без значения — 44–45 по содержимому */
  --h-row: 46px;
  /* колонка канбана воронки (блок «Воронка продаж», 30.10.2026) — наименьшая ширина: колонки делят ширину экрана
     поровну, не уже этого числа и не шире полутора; пять этапов помещаются на 1458 и при раскрытом меню (критик, В2) */
  --pl-col: 224px;
  /* точка статуса задачи на плитке и в списке — 8: в 6 жёлтая и зелёная не различались (критик, В15) */
  --pl-dot: 8px;
  /* колонка картки угоди и стрічки — не уже этого, как ни тяни границу (владелец 30.10.2026: «промежутки можно двигать») */
  --pl-pane: 360px;
  /* 07.09.2026, владелец: «все квадратики фото, в каком бы месте ни находились,
     чтобы всегда были одного размера… именно формы добавления фотографий —
     публикация в телеграме, дополнительная информация». Одно число на все
     квадраты в карточке: главное фото, палитры Telegram, миниатюры галереи
     и плитка добавления. Миниатюра в таблице (44) и предпросмотр по наведению
     (160) сюда не входят — это не формы ввода. */
  --ph-box: 148px;
  /* 🔑 карточка (Drawer, FieldRow; 28.10.2026 — окно позиции переписано по системе): ширина ящика, колонка подписи,
     высота значения в строке, наименьший список и ступени ширины значения по длине данных (замер каталога 05.09.2026) */
  --drawer-w: 900px;
  --label-w: 188px;
  --h-field: 32px;
  --fld-pick: 88px;
  --fld-num: 64px;
  --fld-s: 150px;
  --fld-m: 210px;
  --fld-l: 300px;
  --fld-xl: 420px;
  --fld-area: 560px;

  /* 🔑 Палитра FINALCUT — по образцу monobank (25.10.2026). Подписи ролей —
     в tokens.json дизайн-системы; контраст текста не ниже 4.5:1 на своих фонах. */
  --bg: #f6f6fc;
  --panel: #ffffff;
  --panel-2: #efeff7;
  --panel-3: #e6e6f0;
  --line: #0000001a;
  --line-2: #0000002e;
  --fg: #000000;
  --fg-dim: #00000099;
  --fg-dim-2: #0000008c;
  --accent: #4e3bec;
  --accent-hover: #3d2bd1;
  --accent-soft: #dee2ff;
  --accent-text: #3f2fd0;
  --on-accent: #ffffff;
  --mark-from: #6256ca;
  --mark-to: #4f75ff;
  --menu-bg: #000000;
  --menu-fg: #ffffff99;
  --menu-fg-strong: #ffffff;
  --menu-hover: #ffffff1f;
  --menu-line: #ffffff1f;
  --menu-active-bg: #ffffff;
  --menu-active-fg: #000000;
  --btn-primary: #000000;
  --btn-primary-hover: #2c2c31;
  --on-primary: #ffffff;
  --ok: #16723f;
  --ok-bg: #e4f6ec;
  --err: #fa5255;
  --err-text: #c8323a;
  --err-bg: #ffecec;
  --warn-text: #935300;
  --warn-bg: #fff3e0;
  --price-in: #16723f;
  --price-out: #b0175a;
  --overlay: #0000004d;
  --overlay-strong: #00000073;
  --scroll-thumb: #0000002e;
  --scroll-track: #0000000d;
  --focus: var(--accent);
  --shadow-card: 0 2px 12px #1f21370a;
  --shadow-pop: 0 10px 30px #25263524;
  --shadow-drawer: -12px 0 40px #0000001f;
  --shadow-dialog: 0 24px 60px #00000029;
  --ring: 0 0 0 3px #4e3bec29;
  --knob: 0 1px 3px #00000040;
  --shadow: var(--shadow-pop);
  --r: var(--rd-3);
  --r-sm: var(--rd-2);
  --side-w: 224px;
  --side-w-min: 68px;
  --mo-fast: .15s;   /* цвет, фон, рамка */
  --mo-panel: .25s;  /* меню, ящик */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
}

/* 05.09.2026: здесь был мост наших цветов в токены Web Awesome. Библиотека
   убрана по решению владельца («вы постоянно будете мешать друг другу»),
   мост стал не нужен. Прежняя версия файла — style-2026-09-05-before-drop-wa.css */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 Geologica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  :root { --mo-fast: 0s; --mo-panel: 0s; }
}
[hidden] { display: none !important; }
.muted { color: var(--fg-dim); }
.small { font-size: 12px; }
h1, h2 { margin: 0; }

/* --- кнопки --- */
/* Кнопка. 05.09.2026: высота задавалась отступами и выходила 39 px при шкале
   36 — замер на боевой. Теперь высота из шкалы, как у полей. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-btn); box-sizing: border-box;
  /* 🔑 25.10.2026, владелец: белые кнопки — бледная обводка `line` (10 %), как в его образце (21:15 — шестерёнка,
     21:24 — «у всех белых кнопок»). Заметная `line-2` (18 %) — только у поля: «в поле логично, что она есть». */
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  padding: 0 var(--sp-6);
  border-radius: var(--rd-btn);   /* 25.10.2026 17:20: прямоугольник 8 px вместо таблетки — слово владельца */
  cursor: pointer;
  font: inherit; font-size: var(--ft-3); font-weight: 600;
  white-space: nowrap;
  transition: background var(--mo-fast), border-color var(--mo-fast), color var(--mo-fast);
}
/* наведение — сдвиг тона, без подъёма */
.btn:hover { background: var(--panel-2); }
/* 🔑 главное действие — чёрное, одно на экран; акцент — для выбранного, не для кнопки */
.btn.primary { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn.ghost:hover { color: var(--fg); background: var(--panel-2); }
.btn.danger { color: var(--err-text); }
.btn.danger:hover { background: var(--err-bg); border-color: var(--err); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 🔑 07.09.2026, правило владельца: «все кнопки в интерфейсе одного размера».
   Отдельной «маленькой» кнопки в системе нет — у .small остались только
   более узкие поля и мелкий шрифт, высота общая (--h-md 36). */
.btn.small { height: var(--h-btn); padding: 0 var(--sp-5); font-size: var(--ft-2); }
.btn.big { height: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--ft-5); }
.btn.full { width: 100%; }
/* 🔑 07.09.2026: кнопка-иконка КВАДРАТНАЯ — ширина и высота из одной
   переменной. Владелец увидел: «задумывалась квадратная, теперь стала
   прямоугольная» — высота поднялась до 44, а ширина осталась 36. */
.btn.icon { width: var(--h-btn); padding: 0; font-size: var(--ft-4); }
.btn:disabled { opacity: .45; cursor: default; }
.pager[hidden] { display: none; }

/* Общее поле ввода: высота из шкалы. 05.09.2026 замер на боевой показал
   в одной полосе три высоты — поиск 39, плашка фильтра 34, кнопка 36. */
input, select, textarea {
  background: var(--panel); border: 1px solid var(--line-2); color: var(--fg);
  height: var(--h-md); box-sizing: border-box;
  padding: 0 var(--sp-4); border-radius: var(--r-sm); font: inherit; font-size: var(--ft-3); width: 100%;
}
textarea { height: auto; padding: var(--sp-3) var(--sp-4); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select { cursor: pointer; }
.err { color: var(--err-text); font-size: var(--ft-3); min-height: 18px; }

/* --- вход --- */
.login { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--sp-6); }
.login-box {
  width: 360px; background: var(--panel); border: none;
  border-radius: var(--rd-3); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.login-brand { display: flex; align-items: center; gap: var(--sp-4); font-size: 20px; font-weight: 700; }
.login-box label { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--ft-2); color: var(--fg-dim); }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--rd-2);
  /* 25.10.2026: знак на главном градиенте monobank — единственный градиент системы */
  background: linear-gradient(140deg, var(--mark-from), var(--mark-to));
  color: var(--on-accent); font-weight: 700; font-size: var(--ft-2); letter-spacing: .5px;
}

/* --- каркас --- */
.shell { display: flex; height: 100%; }

.side {
  width: var(--side-w); flex: none;
  /* 25.10.2026: тёмное только меню — чёрный monobank */
  background: var(--menu-bg); color: var(--menu-fg);
  display: flex; flex-direction: column;
  transition: width var(--mo-panel) var(--ease-out);
}
.side-top {
  padding: var(--sp-5) var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.side-toggle {
  flex: none; width: var(--h-btn); height: var(--h-btn); border-radius: var(--rd-btn);   /* 07.09.2026: одна высота на все кнопки, было 30 */
  border: none; background: transparent; color: var(--menu-fg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--mo-fast), color var(--mo-fast);
}
.side-toggle:hover { background: var(--menu-hover); color: var(--menu-fg-strong); }

/* Свёрнутое меню: только значки. Ширина, подписи, отступы — одним классом. */
.side-collapsed .side { width: var(--side-w-min); }
.side-collapsed .brand-text,
.side-collapsed .nav-text,
.side-collapsed .soon-dot,
.side-collapsed .nav-group,
.side-collapsed .user-text { display: none; }
/* 🛑 Кнопка выхода не прячется, а сжимается до значка (08.09.2026, владелец:
   «в маленьком формате должна меняться на иконку выхода, а не на текст,
   который туда даже не влазит»). Раньше в свёрнутом меню выйти было нечем,
   а при узком окне подпись обрезалась. */
.side-collapsed .exit-text { display: none; }
.side-collapsed #btn-exit { width: 44px; padding: 0; justify-content: center; }
/* 🔑 25.10.2026, владелец: «при наведении мышкой на логотип… иконки вместо логотипа, которая бы
   показывала открыть-закрыть меню». В свёрнутом меню знак FC стоит в гнезде 44×44; при наведении
   или фокусе его целиком заменяет кнопка «Розгорнути Меню» (тот же значок панели) — как у Scarb и Kommo. */
.side-collapsed .side-top { position: relative; justify-content: center; padding: var(--sp-5) var(--sp-3); }
.side-collapsed .brand { width: var(--h-btn); height: var(--h-btn); justify-content: center; cursor: pointer; transition: opacity var(--mo-fast); }
.side-collapsed .brand .mark { margin: 0; }
.side-collapsed .side-toggle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--menu-hover); color: var(--menu-fg-strong);
  opacity: 0; pointer-events: none;
}
.side-collapsed .side-top:hover .side-toggle,
.side-collapsed .side-toggle:focus-visible { opacity: 1; pointer-events: auto; }
.side-collapsed .side-top:hover .brand { opacity: 0; }
.side-collapsed .nav { padding: var(--sp-3); align-items: center; }
.side-collapsed .nav-item { justify-content: center; padding: var(--sp-3); width: 44px; }
.side-collapsed .nav-item.active::before { left: 0; }
/* 25.10.2026: в свёрнутом меню подпунктов не видно — раздел, где открыт подпункт,
   получает ту же белую плашку, что выбранный пункт (has-active ставит openSection) */
.side-collapsed .nav-item.has-active { background: var(--menu-active-bg); color: var(--menu-active-fg); }
/* В свёрнутом меню дети и стрелки не нужны — остаются одни значки.
   🛑 Не писать svg:last-child: он ловит и саму иконку внутри .ni — 05.09.2026
   в свёрнутом меню пропали все значки. И детей прятать с учётом .open,
   иначе правило раскрытия оказывается сильнее. */
.side-collapsed .nav-block.open > .nav-kids,
.side-collapsed .nav-item .nav-arrow { display: none; }
/* 28.10.2026: внизу два пункта — «Списки» и «Налаштування»; столбиком, как в развёрнутом меню
   (в строку значок «Списків» уезжал за левый край, проверка на телефоне) */
.side-collapsed .nav-foot { padding: var(--sp-3); display: flex; flex-direction: column; align-items: center; }
.side-collapsed .side-foot { align-items: center; padding: var(--sp-4) var(--sp-3); }
.side-collapsed .user { justify-content: center; }
.brand { display: flex; align-items: center; gap: var(--sp-4); font-weight: 700; font-size: var(--ft-5); color: var(--menu-fg-strong); }
/* Меню-дерево длиннее экрана, когда раскрыто несколько разделов (05.09.2026:
   417 px места при 839 содержимого — четыре раздела за краем). Прокрутка
   есть, но её надо ПОКАЗАТЬ: тонкая полоса и затухание у нижнего края —
   тот же приём, что у панели колонок (база дизайна, ошибка 18). */
.nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--sp-2) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1);
  scrollbar-width: thin; scrollbar-color: var(--menu-line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: var(--menu-line); border-radius: 3px; }
.nav::-webkit-scrollbar-thumb:hover { background: var(--menu-fg); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--rd-2); cursor: pointer;
  color: var(--menu-fg); border: none; background: none; font: inherit; font-size: var(--ft-3); font-weight: 500;
  text-align: left; width: 100%; min-height: 40px;
  position: relative; transition: background var(--mo-fast), color var(--mo-fast);
}
.nav-item:hover { background: var(--menu-hover); color: var(--menu-fg-strong); }
/* 25.10.2026: выбранный пункт — белая плашка на чёрном меню, как у monobank (полоска слева убрана) */
.nav-item.active { background: var(--menu-active-bg); color: var(--menu-active-fg); font-weight: 600; }
.nav-item:focus-visible, .nav-kid:focus-visible { outline: 2px solid var(--menu-fg-strong); outline-offset: 2px; }
/* значок без подложки — сам по себе, цветом пункта */
.nav-item .ni {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Название тянется, «скоро» прижато вправо — тогда иконки всех пунктов
   стоят на одной вертикали. Раньше активный пункт (без «скоро») уезжал
   в середину: замер показал иконку на 53 px против 12 у остальных. */
.nav-item .soon-dot { flex: none; font-size: var(--ft-1); color: var(--menu-fg); }
.nav-group { padding: var(--sp-5) var(--sp-4) var(--sp-2); font-size: var(--ft-1); text-transform: uppercase; letter-spacing: .6px; color: var(--menu-fg); }

/* --- дерево разделов (05.09.2026) ----------------------------------------
   Образец владельца — левое меню Kommo: главный раздел раскрывается,
   внутри свои пункты. Настройки системы стоят внизу отдельно. */
.nav-block { display: block; }
.nav-item .nav-arrow { margin-left: auto; flex: none; color: inherit; transition: transform var(--mo-fast) ease; }
.nav-block.open > .nav-item .nav-arrow { transform: rotate(90deg); }
.nav-kids { display: none; padding: 2px 0 var(--sp-2); }
.nav-block.open > .nav-kids { display: block; }
.nav-kid {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  background: none; border: none; cursor: pointer; font: inherit; font-size: var(--ft-3);
  color: var(--menu-fg); padding: var(--sp-2) var(--sp-1) var(--sp-2) 36px;   /* 48 обрезало «Відправлення», 40 с полосой прокрутки — «Заявки з вітрини» */
  border-radius: var(--rd-2); text-align: left; min-height: 34px;
  transition: background var(--mo-fast), color var(--mo-fast);
}
.nav-kid:hover { color: var(--menu-fg-strong); background: var(--menu-hover); }
.nav-kid.active { color: var(--menu-active-fg); background: var(--menu-active-bg); font-weight: 600; }
.nav-kid .nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-foot { flex: none; padding: var(--sp-3) var(--sp-3) var(--sp-2); border-top: 1px solid var(--menu-line); }

/* Панелька раздела у свёрнутого меню (28.10.2026, владелец: «навести мышкой на меню и увидеть, что там за ним
   скрывается… попапчик, который чуть-чуть сбоку»). Тёмная, как само меню: продолжение меню, а не окно поверх
   страницы; пункты — как пункты раскрытого меню. Место задаёт app.js (navFly): сбоку от меню, на высоте значка. */
.nav-fly {
  position: fixed; z-index: 80; min-width: 200px; max-width: 280px;
  padding: var(--sp-2); border-radius: var(--rd-3);
  background: var(--menu-bg); color: var(--menu-fg);
  border: 1px solid var(--menu-line); box-shadow: var(--shadow-pop);
}
/* заголовок — раздел (владелец 28.10.2026: «выделить… что это вот категория»): значок, жирный текст, черта под ним.
   Всё — по левому краю значка, без отступа у пунктов; текст заголовка — ступенью меньше, 14 вместо 16, значок — 18
   (владелец, 28.10.2026, снимок с чертой по левому краю: «выравнивание всего по левому краю, размер иконки сохрани,
   а размер заголовка чуть совсем меньше») */
.nav-fly-title {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); font-size: var(--ft-4); font-weight: 700; color: var(--menu-fg-strong);
}
.nav-fly-title svg { flex: none; }
.nav-fly:has(.nav-fly-kid) .nav-fly-title { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--menu-line); }
.nav-fly-note { padding: 0 var(--sp-4) var(--sp-3); font-size: var(--ft-1); }
.nav-fly-kid {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--h-md);
  padding: var(--sp-2) var(--sp-4);
  border: none; border-radius: var(--rd-2); background: none;
  font: inherit; font-size: var(--ft-3); color: var(--menu-fg); text-align: left; cursor: pointer;
  transition: background var(--mo-fast), color var(--mo-fast);
}
.nav-fly-kid:hover { color: var(--menu-fg-strong); background: var(--menu-hover); }
.nav-fly-kid.active { color: var(--menu-active-fg); background: var(--menu-active-bg); font-weight: 600; }
.nav-fly-kid:focus-visible { outline: 2px solid var(--menu-fg-strong); outline-offset: -2px; }
.nav-fly-kid .soon-dot { flex: none; font-size: var(--ft-1); color: inherit; opacity: .8; }

/* Воронки в «Продажі» (блок «Воронка продаж», 30.10.2026; владелец: «в меню добавление и настройка воронок»):
   под пунктом «Воронки» — сами воронки деревом с линией, как перечень «Списків»; у воронки при наведении —
   шестерёнка «Налаштувати Воронку», внизу — «Додати Воронку». Так же — в панельке свёрнутого меню. */
.nav-pipes { margin: 0 0 var(--sp-1) calc(var(--sp-8) + var(--sp-1)); padding-left: var(--sp-1); border-left: 1px solid var(--menu-line); }
.nav-fly .nav-pipes { margin-left: var(--sp-4); }
.nav-pipe { position: relative; }
.nav-pipes .nav-kid, .nav-pipes .nav-fly-kid { padding-left: var(--sp-3); }
.nav-pipes .nav-pipe-b { padding-right: var(--sp-8); }
.nav-pipe-set {
  position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%);
  width: var(--h-sm); height: var(--h-sm); display: none; align-items: center; justify-content: center;
  border: none; border-radius: var(--rd-1); background: none; color: var(--menu-fg); cursor: pointer;
}
.nav-pipe:hover .nav-pipe-set, .nav-pipe-set:focus-visible { display: inline-flex; }
.nav-pipe-set:hover { color: var(--menu-fg-strong); background: var(--menu-hover); }
.nav-pipe-set:focus-visible { outline: 2px solid var(--menu-fg-strong); outline-offset: -2px; }
/* на белой плашке открытой воронки — тёмная шестерёнка */
.nav-pipe:has(.active) .nav-pipe-set { color: var(--menu-active-fg); }
.nav-pipe:has(.active) .nav-pipe-set:hover { background: var(--panel-2); }
.nav-pipe-add svg { flex: none; }
/* «Чати» (30.10.2026): счётчик розмов с непрочитанным — тот же `.chip-n`, справа в пункте; в свёрнутом — на значке */
.nav-item .nav-n { position: static; transform: none; margin-left: auto; }   /* `.chip-n` сам по себе — в поле поиска, абсолютом */
.side-collapsed .nav-item .nav-n { position: absolute; top: var(--sp-1); right: var(--sp-1); margin: 0; }

.side-foot { border-top: 1px solid var(--menu-line); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
/* кнопка выхода на чёрном меню — прозрачная, с тонкой рамкой */
.side .btn { background: transparent; border-color: var(--menu-line); color: var(--menu-fg); }
.side .btn:hover { background: var(--menu-hover); color: var(--menu-fg-strong); }
.side .btn:focus-visible { outline-color: var(--menu-fg-strong); }
/* «Кто вошёл» — кнопка: открывает налаштування акаунта (28.10.2026, владелец: «он не кликабельный»).
   Поля по бокам съедены отрицательным отступом — буква в круге стоит там же, где стояла. */
.user {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
  margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2);
  border: none; border-radius: var(--rd-2); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--mo-fast);
}
.user:hover, .user.active { background: var(--menu-hover); }
.user:focus-visible { outline: 2px solid var(--menu-fg-strong); outline-offset: 2px; }
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; font-size: var(--ft-2); font-weight: 700; color: var(--accent-text);
}
.avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.side .avatar { background: var(--menu-hover); color: var(--menu-fg-strong); }
.user-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-name { display: block; font-size: var(--ft-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--menu-fg-strong); }
/* роль — цветом меню: была `muted` (чёрный 60 %) на чёрном — не видна, а место занимала, и имя уезжало вверх */
.user-role { display: block; font-size: var(--ft-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--menu-fg); }

/* --- правая часть --- */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.top {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-7);
  background: var(--bg);   /* 25.10.2026: шапка лежит на фоне — без стекла и линии */
}
.crumbs { min-width: 150px; }
.crumbs h1 { font-size: var(--ft-6); font-weight: 700; letter-spacing: -.2px; }
.crumbs .muted { font-size: var(--ft-1); text-transform: uppercase; letter-spacing: .7px; }
.search-wrap { flex: 1 1 auto; max-width: 560px; position: relative; }
/* 🔑 25.10.2026, владелец: элементы шапки «по высоте все… одного размера» — поиск 44, как кнопки рядом
   (было 36 — общая высота поля `h-md`). Правило системы: одна полоса — одна высота. */
.search-wrap input { padding-right: 64px; border-radius: var(--rd-btn); height: var(--h-btn); }
/* Системный крестик у input[type=search] рисует браузер: он серо-чёрный
   и на тёмном фоне выглядит грязным пятном. Убираем и ставим свой. */
.search-wrap input::-webkit-search-cancel-button,
.search-wrap input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  color: var(--fg-dim-2); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 0;
}
.search-x:hover { color: var(--fg); background: var(--panel-2); }
.search-wrap .chip-n { right: var(--sp-4); }   /* 08.09.2026: счётчик у самого края */
.search-wrap:has(#btn-clear-q:not([hidden])) .chip-n { right: 38px; }   /* крестик очистки есть — счётчик уступает место */
.search-wrap .search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-dim-2); pointer-events: none; }
.search-wrap input { padding-left: 38px; }
.top-right { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; position: relative; }
/* 25.10.2026, владелец: «На телефоне не помещается шапка». На узком экране шапка
   в две строки: сверху вид, колонки и «Додати Позицію» — она забирает остаток строки;
   под ними поиск на всю ширину («фильтр должен быть ниже кнопок» — владелец, 18:00).
   Замер на 402: места 138, текст 111 — отступы кнопки 12 вместо 20; телефон ещё
   уже — кнопка уходит своей строкой, не за край. */
@media (max-width: 620px) {
  .top { flex-wrap: wrap; gap: var(--sp-3); }
  .search-wrap { flex: 1 1 100%; max-width: none; order: 2; }
  .top-right { flex: 1 1 100%; margin-left: 0; gap: var(--sp-3); flex-wrap: wrap; order: 1; }
  #btn-new { flex: 1 1 auto; padding-inline: var(--sp-4); }
  #btn-new .btn-more { display: none; }   /* 18:20, владелец: на телефоне одно слово «Додати» */
}

/* --- панель фильтров (05.09.2026) ---------------------------------------
   Заменила полосу чипов: их стало двенадцать, в строку они не помещались.
   Устроена так же, как панель настройки колонок — одно окно под кнопкой. */
.chip-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--sp-2);
  border-radius: var(--rd-4); background: var(--accent); color: var(--on-accent);
  font-size: var(--ft-1); font-weight: 700;
}
#btn-filters.on { border-color: var(--accent); color: var(--accent-text); }

/* окно под полем поиска: пусто — фильтры и наборы, есть текст — найденное */
.searchpanel {
  position: fixed; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3);
  box-shadow: var(--shadow-pop); padding: var(--sp-5) var(--sp-6) var(--sp-5);   /* владелец 05.09: отступы от края были слишком малы */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 120px);
}
/* 08.09.2026: две колонки — параметры слева, сохранённые наборы справа
   (образец владельца: слева свойства сделок, справа теги) */
.searchpanel-cols { display: flex; gap: var(--sp-6); min-height: 0; flex: 1 1 auto; padding-top: var(--sp-5); }
.searchpanel-side {
  flex: none; width: 300px; border-left: 1px solid var(--line);   /* 08.09.2026: линия между колонками заметная */
  padding-left: var(--sp-9); box-sizing: border-box; overflow-y: auto;   /* 40: ручке перетаскивания нужно поле, иначе липнет к линии */
}
.presets-none { padding: var(--sp-2) 0; }

/* Полоса прокрутки видна сразу — как в панели колонок.
   🛑 Не задавать scrollbar-width/color: стандартное свойство перебивает
   ::-webkit-scrollbar, и полоса остаётся плавающей (проверено замером). */
.searchpanel-list {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: scroll;
  display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-3);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}
.searchpanel-list::-webkit-scrollbar { width: 8px; -webkit-appearance: none; }
.searchpanel-list::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 4px; }
.searchpanel-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.searchpanel-list::-webkit-scrollbar-thumb:hover { background: var(--fg-dim-2); }
.searchpanel-foot { flex: none; padding-top: var(--sp-4); margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.searchpanel-note { padding: var(--sp-3) var(--sp-2); }
.frow { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: var(--sp-3); }
.frow-cap { font-size: var(--ft-3); color: var(--fg-dim); padding-left: var(--sp-2); }
/* 08.09.2026: шапка панели фильтров несёт оба заголовка и отделена линией
   во всю ширину — по снимку владельца. Правая часть шириной с колонку
   наборов, чтобы «Збережені Набори» стояли ровно над ней. */
.searchpanel .colspanel-head { margin-bottom: 0; padding-bottom: var(--sp-4); border-bottom: none; }   /* 08.09.2026: горизонтальная линия убрана по слову владельца — лишняя */
.searchpanel .head-left { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-width: 0; }
.searchpanel .head-right { flex: none; width: 300px; padding-left: var(--sp-9); box-sizing: border-box; }
/* 08.09.2026: третья колонка под крестик сброса одного фильтра */
.searchpanel .frow { grid-template-columns: 148px minmax(0, 300px) 26px; }
/* 08.09.2026: отметка выбранного значения при выборе нескольких */
.sug-box {
  flex: none; width: 16px; height: 16px; margin-right: var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--rd-1);
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent);
}
.sug-box.on { background: var(--accent); border-color: var(--accent); }
/* 08.09.2026: несколько выбранных значений — строками одно под другим */
/* 🛑 08.09.2026: модификатор назывался .rows — и подпись поля ловила стиль
   ТАБЛИЦЫ (.rows: стекло, размытие фона, внутренняя тень). Владелец видел
   это как «серое кривое под текстом». Имя модификатора должно быть своим,
   а не совпадать с самостоятельным классом системы. */
.pick-cap.multi { display: flex; flex-direction: column; gap: 2px; white-space: normal; background: none; }
.pick-row { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.frow .pick:has(.pick-cap.multi) { height: auto; min-height: var(--h-md); padding-top: var(--sp-2); padding-bottom: var(--sp-2); align-items: flex-start; }
.frow .pick:has(.pick-cap.multi) .pick-arrow { align-self: flex-start; margin-top: 2px; }
.sug-item { display: flex; align-items: center; }
.frow-clear {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--rd-1);
  color: var(--fg-dim-2); cursor: pointer; padding: 0; align-self: center;
}
.frow-clear:hover { color: var(--err-text); background: var(--err-bg); }
.frow-clear[hidden] { display: none; }
/* Окошко имени набора — своё, на странице.
   🛑 08.09.2026: в правой колонке панели (244 px) строка из поля и двух
   кнопок не помещалась — поле сжималось до трёх букв. Внутри колонки
   раскладываем в столбик: поле на всю ширину, кнопки под ним. */
.preset-ask { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.searchpanel-side .preset-ask { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.searchpanel-side .preset-ask .inp { width: 100%; height: var(--h-md); }
.searchpanel-side .preset-ask .btn { width: 100%; }
.sug-ask { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2); }
.sug-ask .inp { flex: 1 1 auto; height: var(--h-sm); }
.preset-ask .inp { flex: 1 1 auto; height: var(--h-sm); }
.frow-pick { min-width: 0; }
.linkbtn { background: none; border: none; color: var(--accent); font: inherit; font-size: var(--ft-2); font-weight: 600; cursor: pointer; padding: 0; }
.linkbtn:hover { color: var(--accent-hover); }

/* найденные позиции */
.hits { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 50vh; overflow-y: auto; }
.hit {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font: inherit;
  /* 🛑 color обязателен: у <button> он не наследуется, а по умолчанию чёрный —
     на тёмной панели название не читалось (05.09.2026) */
  color: var(--fg);
  padding: var(--sp-2); border-radius: var(--rd-2);
}
.hit:hover { background: var(--panel-2); }
.hit-ph { width: 38px; height: 38px; border-radius: var(--rd-1); overflow: hidden; background: var(--panel-2); flex: none; }
.hit-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hit-tx { min-width: 0; }
.hit-name { font-size: var(--ft-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* счётчик включённых фильтров — прямо в поле поиска */
.chip-n {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--rd-4); background: var(--accent); color: var(--on-accent);
  font-size: var(--ft-1); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* сохранённые наборы фильтров */

.presets-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
/* в правой колонке набор занимает всю ширину: имя не обрезается на середине */
.searchpanel-side .presets-row { flex-direction: column; flex-wrap: nowrap; gap: var(--sp-2); }
/* 🔑 08.09.2026, образец владельца: набор — строка на всю ширину
   с разделителем, а не таблетка. Слева ручка перетаскивания, справа
   карандаш; правка идёт на месте, там же корзина и галочка. */
.preset {
  display: flex; align-items: center; gap: var(--sp-2);
  background: none; border-radius: var(--rd-2);   /* 08.09.2026: края подсветки скруглены */
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); margin-left: calc(var(--sp-4) * -1);
  min-height: 38px; position: relative;
}
/* линия-разделитель между наборами: строка сама её не носит, иначе она
   спорит со скруглённой подсветкой (08.09.2026, замечание владельца) */
.preset + .preset { border-top: 1px solid var(--line); }
.preset:hover, .preset.edit { background: var(--panel-2); }
.preset.drag { opacity: .4; }
.preset.over { box-shadow: inset 0 2px 0 var(--accent); }
.preset-grip {
  /* 08.09.2026: ручка вынесена в поле слева от строки — иначе она сдвигает
     имена, и заголовок «Збережені Набори» перестаёт стоять над ними */
  position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-dim-2); cursor: grab; opacity: 0; transition: opacity .12s;
}
.preset:hover .preset-grip, .preset.edit .preset-grip { opacity: 1; }
.preset-name {
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: none; color: var(--fg-dim); font: inherit; font-size: var(--ft-3);
  padding: var(--sp-2) 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preset:hover .preset-name { color: var(--fg); }
/* выбранный сейчас набор виден сразу */
.preset.on .preset-name { color: var(--accent); font-weight: 600; }
.preset-act {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--rd-1); color: var(--fg-dim-2); cursor: pointer; padding: 0;
}
.preset-act:hover { color: var(--fg); background: var(--panel-2); }
.preset-act.del:hover { color: var(--err-text); background: var(--err-bg); }
.preset-act.ok { color: var(--ok); }
.preset-act.ok:hover { color: var(--ok); background: var(--ok-bg); }
/* последняя кнопка строки не липнет к краю подсветки */
.preset-act:last-child { margin-right: var(--sp-1); }
/* строка в правке: поле вместо имени */
/* 08.09.2026, владелец: «кнопку сохранить набор хочу видеть снизу» */
.searchpanel-side { display: flex; flex-direction: column; }
.searchpanel-side .presets { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.searchpanel-side .presets > .btn { margin-top: auto; width: 100%; }
.preset-input {
  flex: 1 1 auto; min-width: 0; height: var(--h-md); box-sizing: border-box;
  background: var(--panel); color: var(--fg); font: inherit; font-size: var(--ft-3);
  border: 1px solid var(--accent); border-radius: var(--rd-2); outline: none; padding: 0 var(--sp-3);   /* 25.10.2026: поле — как все поля, было 6 */
}

/* 25.10.2026: переключатель вариантов — серая таблетка, выбранное белое с тенью (система FINALCUT).
   Общая высота — h-btn (44): подложка 3 px вокруг кнопок по 38. */
/* 25.10.2026: подложка `panel-3` без рамки. С `panel-2` она сливалась с фоном, и глаз видел только белую
   кнопку 38 — владелец: «все эти элементы разного размера»; рамку (21:04) владелец не принял:
   «не нравится рамка на переключателе». Высоту 44 показывает сама подложка, как у monobank. */
.seg { display: flex; gap: 2px; padding: 3px; height: var(--h-btn); box-sizing: border-box; background: var(--panel-3); border-radius: var(--rd-btn); }
.seg-btn {
  border: none; background: none; color: var(--fg-dim); height: 100%; min-width: 38px; padding: 0 var(--sp-4);
  border-radius: var(--rd-1); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-size: var(--ft-3); font-weight: 600; transition: background var(--mo-fast), color var(--mo-fast);
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.active { background: var(--panel); color: var(--fg); box-shadow: var(--shadow-card); }
.seg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- строка фильтров --- */
/* Строка фильтров: было тесно, выпадашки упирались в края полосы */
.filterbar {
  display: flex; align-items: center; gap: var(--sp-3);
  /* 18 px сверху и снизу при чипе 34 px: полоса 72 px, чипы не липнут к краям
     (замечание владельца 05.09.2026 — «выглядит как будто они слиплись») */
  padding: 18px var(--sp-7);
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
}
.filterbar::-webkit-scrollbar { height: 6px; }
.filterbar::-webkit-scrollbar-track { background: transparent; }
.filterbar::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
.filterbar::-webkit-scrollbar-thumb:hover { background: var(--fg-dim-2); }
.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.chip-wrap { position: relative; }
/* меню фильтра — то же, что в карточке, только шире чипа */
.chip-menu { position: fixed; left: auto; right: auto; top: auto; margin: 0; max-width: 320px; width: max-content; z-index: 60; }
.filters select {
  width: auto; min-width: 138px; max-width: 210px; height: var(--h-sm);
  padding: 0 var(--sp-7) 0 var(--sp-4); font-size: var(--ft-2); border-radius: var(--rd-2);   /* 25.10.2026: как все поля, было 6 */
  background: var(--panel-2); border-color: var(--line);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%238e8e93' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.filters select.on { border-color: var(--accent); color: var(--accent-text); background-color: var(--accent-soft); }

/* --- список --- */
/* 05.09.2026, владелец: «когда я пролистываю таблицу вниз, заголовки
   пропадают, и настройки отображения тоже». Причина: прокручивалась вся
   область целиком, и липкая шапка уезжала вместе с ней (замер: ушла
   на 582 px вверх). Теперь прокручивается сам список, а счётчик, кнопка
   настроек и шапка таблицы остаются на месте. */
.content {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-7) var(--sp-6);
}
.list-head { flex: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
#list { flex: 1 1 auto; min-height: 0; }
.pager { flex: none; }

/* 🛑 grid-auto-rows: max-content обязателен. Когда список получил свою высоту
   и прокрутку (05.09.2026), строки поделили её поровну — плитки сжались
   со 323 до 108 px, фото обрезалось, подпись пропала. */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--sp-5); overflow-y: auto; align-content: start;
  grid-auto-rows: max-content;
}
.card {
  background: var(--panel); border: none; border-radius: var(--rd-3);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: box-shadow var(--mo-fast);
}
/* 25.10.2026: белая плитка без рамки на фоне; наведение — тень, без подъёма */
.card:hover { box-shadow: var(--shadow-pop); }
.card .ph { aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--panel-2); display: block; }
.card .ph.empty { display: flex; align-items: center; justify-content: center; color: var(--fg-dim-2); font-size: var(--ft-2); }
.card .body { padding: var(--sp-4) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.card .name {
  font-weight: 600; font-size: var(--ft-3);
  display: flex; align-items: baseline; gap: var(--sp-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.card .name-art { margin-left: auto; flex: none; font-weight: 400; font-size: var(--ft-1); color: var(--fg-dim-2); font-variant-numeric: tabular-nums; }
.card .line.dim { color: var(--fg-dim-2); }
.card .line { font-size: var(--ft-2); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); }
.card .price { font-size: var(--ft-3); font-weight: 600; font-variant-numeric: tabular-nums; }

.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.row {
  display: grid; grid-template-columns: 42px 74px 1fr 116px 58px 74px 74px; gap: var(--sp-4);
  align-items: center; background: var(--panel); padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--panel-2); }
.row img { width: 34px; height: 34px; border-radius: var(--rd-1); object-fit: cover; background: var(--panel-2); }
.row .c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ft-3); }
.row .c.dim { color: var(--fg-dim); }

.tag { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--rd-1); font-size: var(--ft-1); font-weight: 600; letter-spacing: .2px; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-7); font-variant-numeric: tabular-nums; }
.empty-note {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6); color: var(--fg-dim);
  border: 1px dashed var(--line-2); border-radius: var(--rd-3); background: var(--panel);
}
.empty-title { font-size: var(--ft-4); color: var(--fg); font-weight: 600; }

/* --- заглушка блока --- */
.soon { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
.soon-box { text-align: center; max-width: 420px; }
.soon-ico { font-size: 40px; margin-bottom: var(--sp-4); }
.soon-box h2 { font-size: 20px; margin-bottom: var(--sp-2); }

/* --- карточка: ящик (Drawer) ------------------------------------------------
   🔑 28.10.2026, владелец: «полностью переписать её согласно нашей дизайн-системе. Именно дизайн». Раздел
   переписан одним куском по элементам системы — Drawer, FieldRow, PhotoSlot; числа — только из шкалы `:root`.
   Образец и выбор владельца — блок CRM, research/2026-10-28-card-design-variants.html; прежняя версия —
   before/2026-10-28-card/. Почему так (слова владельца с 05.09.2026) — в заметках элементов дизайн-системы. */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer-bg { position: absolute; inset: 0; background: var(--overlay); }
.drawer-box {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 100%);
  background: var(--panel); display: flex; flex-direction: column; box-shadow: var(--shadow-drawer);
}
/* карточка-страница: от меню до правого края, меню живое и нажимается (владелец 30.10.2026: «до начала меню…
   полноценное окно… меню должно оставаться активным и кликабельным»; образец — карточка Kommo, страницей рядом
   с меню). Меню свернули — страница идёт за ним тем же движением. */
.drawer-page { left: var(--side-w); transition: left var(--mo-panel) var(--ease-out); }
.shell.side-collapsed ~ .drawer-page { left: var(--side-w-min); }
.drawer-page .drawer-bg { display: none; }
.drawer-page .drawer-box { left: 0; width: auto; box-shadow: none; }
/* 🔑 рамка `edge` со всех сторон шапки и подвала — одно число (владелец 08.09.2026); левый край общий с формой */
/* 30.10.2026: шапка разной высоты (теги, правка назви) — «Закрити» прижата к верху, а не к середине: не прыгает */
.drawer-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--edge); border-bottom: 1px solid var(--line); background: var(--panel);
}
.drawer-head { min-width: 0; }
.drawer-top h2 { font-size: var(--ft-5); margin-top: var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Шапка позиции (решение CATALOG 30.10.2026 05:32, образец `research/2026-10-30-nazva-i-tegy.html`): назва
   з полів — карандаш у заголовка при открытой «Налаштування», правка на месте тегов; теги «#назва» под заголовком --- */
.tt-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tt-head h2 { min-width: 0; }
.tt-head .cs-act { margin-top: var(--sp-1); }
/* теги: серые, как нейтральная плашка Tag (вариант 1), «+ Тег» пунктиром (вариант 2), «#» перед названием */
.tg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.tg {
  display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--sp-1) 0 var(--sp-3);
  border-radius: var(--rd-1); background: var(--panel-2); color: var(--fg-dim); font-size: var(--ft-2); font-weight: 500; white-space: nowrap;
}
.tg-mark { color: var(--fg-dim-2); }
.tg-x {
  display: inline-flex; align-items: center; justify-content: center; width: var(--sp-6); height: var(--sp-6); margin-left: var(--sp-1);
  border: 0; border-radius: var(--rd-1); background: none; color: var(--fg-dim-2); cursor: pointer; padding: 0;
}
.tg-x:hover { color: var(--fg); }
.tg-add {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-sm); padding: 0 var(--sp-3) 0 var(--sp-2);
  border: 1px dashed var(--line-2); border-radius: var(--rd-1); background: none; font: inherit; font-size: var(--ft-2); color: var(--fg-dim); cursor: pointer;
}
.tg-add:hover { border-color: var(--accent); color: var(--accent-text); }
.tg-x:focus-visible, .tg-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* правка назви — на месте тегов: поля плашками раздела (`.cs-sec`), между ними «·» — точка едет со своим полем */
.tt-edit { margin-top: var(--sp-3); }
.tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tt-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tt-dot { color: var(--fg-dim-2); font-weight: 700; }
.tt-item.drag .cs-sec { opacity: .45; }
.tt-item.drop-before .cs-sec { box-shadow: -2px 0 0 var(--accent); }
.tt-item.drop-after .cs-sec { box-shadow: 2px 0 0 var(--accent); }
.tt-edit-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.drawer-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.saved { color: var(--ok); font-size: var(--ft-2); }
/* тело прокручивается само, шапка и подвал стоят на месте */
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-8) var(--edge); }
/* кнопки — в подвале, слева, на вертикали подписей, при любой вкладке и высоте (владелец 07.09.2026);
   главная — «Зберегти» (выбор владельца 28.10.2026, как в системе: чёрная кнопка на экране одна) */
.drawer-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3);
  padding: var(--edge); border-top: 1px solid var(--line); background: var(--panel);
}
.drawer-foot:empty { display: none; }

/* вкладки — группы схемы (образец Kommo, 05.09.2026); выбранная — `fg` и черта `accent` */
/* 🔑 ряд вкладок при прокрутке стоит на месте (владелец 28.10.2026, пометкой на снимке: «это меню при скролинге
   закреплено»); плотный фон — поля уходят под него, а не просвечивают (урок №27). 01.11.2026, владелец: «при скроле
   окно прыгает» — ряд сперва ехал вверх на 20 и только потом вставал. Теперь ряд сам занимает верхнее поле тела
   (`--tabs-top`, столько же, сколько отступ тела сверху) и стоит на месте с первой точки прокрутки; поле — его фон,
   а не тень: под тенью скрытое поле оставалось нажимаемым */
.tabs {
  --tabs-top: var(--sp-8);
  display: flex; gap: var(--sp-4); align-items: center;   /* 28.10.2026: шаг 12 — с «Налаштування» шесть вкладок помещаются в 900 */
  border-bottom: 1px solid var(--line); margin: calc(-1 * var(--tabs-top)) 0 var(--sp-7); padding-top: var(--tabs-top);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: calc(-1 * var(--tabs-top)); z-index: 2;
  background: var(--panel);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; background: none; border: none; cursor: pointer; font: inherit;
  font-size: var(--ft-3); font-weight: 600; color: var(--fg-dim);
  padding: var(--sp-3) 0 var(--sp-4); position: relative; white-space: nowrap; transition: color var(--mo-fast);
}
.tab:hover, .tab.on { color: var(--fg); }
.tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- строка поля (FieldRow): подпись слева, значение справа, без рамки в покое -------------------------
   Образец владельца — карточка Kommo (05.09.2026): «там нет визуально полей для ввода, но ввести можно». */
.form { display: block; }
.tabpane { display: flex; flex-direction: column; }
.f { display: flex; flex-direction: column; gap: var(--sp-2); position: relative; }
.f .req { color: var(--err); }
/* блоки — без горизонтальных линий, между блоками `sp-6` (владелец 28.10.2026, крестиками на снимке: «линии тоже убрать,
   занимают слишком много места»; было: линия сверху, `sp-6` до неё и `sp-7` от неё — 44 точки на каждый стык) */
.blk { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.blk:first-child { margin-top: 0; }
.blk-title { font-size: var(--ft-3); font-weight: 700; color: var(--fg); padding-bottom: var(--sp-3); }
/* блок сворачивается — «дерево с линией», как разделы «Списків» (решение CRM 28.10.2026 13:33; владелец 30.10.2026:
   «У нас уже есть готовый вариант в списках»): заголовок — кнопка, стрелка перед названием (вниз — открыт, вправо —
   свёрнут), от середины стрелки вниз — линия `line-2`, поля блока — правее линии; у свёрнутого — сколько полей */
button.blk-title {
  display: flex; align-items: center; gap: var(--sp-2); align-self: flex-start;
  border: 0; background: none; padding: 0 0 var(--sp-3); font: inherit;
  font-size: var(--ft-3); font-weight: 700; color: var(--fg); text-align: left; cursor: pointer;
}
.blk-arrow { flex: none; color: var(--fg-dim-2); transform: rotate(90deg); transition: transform var(--mo-fast) ease, color var(--mo-fast); }
button.blk-title:hover .blk-arrow { color: var(--fg); }
button.blk-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--rd-1); }
button.blk-title .n { font-weight: 400; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
button.blk-title .n:empty { display: none; }
.blk.fold > :not(.blk-title) { margin-left: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid var(--line-2); }
.blk.shut .blk-arrow { transform: none; }
.blk.shut > :not(.blk-title) { display: none; }
.blk.shut > .blk-title { padding-bottom: 0; }
.blk > .f {
  display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr);
  align-items: center; gap: 0 var(--sp-3); min-height: calc(var(--h-field) + 2px);
}
/* подпись — тем же кеглем, что значение; любое значение — во второй колонке, что бы ни положил конструктор */
.blk > .f > .f-label { margin: 0; font-size: var(--ft-3); color: var(--fg-dim); }
.blk > .f > *:not(.f-label) { grid-column: 2; }
/* значение — поле `h-field` без рамки и фона в покое: рамка под мышью, `accent` — при вводе */
.blk > .f .inp { height: var(--h-field); max-width: var(--fld-xl); padding-left: var(--sp-3); background: transparent; border-color: transparent; }
/* пустое — «…» у любого поля, у списка тоже (система, FieldRow) */
.blk > .f .inp::placeholder, .blk > .f .pick-cap.dim { color: var(--fg-dim-2); letter-spacing: 1px; }
.blk > .f:hover .inp:not(.ro) { border-color: var(--line-2); background: var(--panel); }
.blk > .f .inp.ro { background: transparent; border-color: transparent; }
/* ширина значения — по длине данных (замер каталога 05.09.2026): 150 · 210 · 300, без ступени до 420 */
.blk > .f .ref-wrap { max-width: var(--fld-xl); }
.blk > .f.sz-s .inp { max-width: var(--fld-s); }
.blk > .f.sz-m .inp { max-width: var(--fld-m); }
.blk > .f.sz-l .inp, .blk > .f.sz-l .ref-wrap { max-width: var(--fld-l); }
/* число — поле `fld-num`, единица сразу за ним: «8,8 $», а не «8,8 ____ $» (05.09.2026) */
.blk > .f .inp-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.blk > .f .inp-wrap .inp { width: var(--fld-num); padding-right: var(--sp-3); }
.blk > .f .inp-suffix { position: static; transform: none; }
/* список — по ширине выбранного, стрелка сразу за ним («Гурт ⌄» на образце) */
.blk > .f .ref-wrap:has(> .pick) { width: max-content; max-width: 100%; }
.blk > .f .pick { width: auto; min-width: var(--fld-pick); max-width: var(--fld-l); padding-right: var(--sp-3); }
.blk > .f .pick .pick-arrow { margin-left: var(--sp-3); }
/* многострочное — до `fld-area`, подпись по верху */
.blk > .f .inp.area { height: auto; max-width: var(--fld-area); padding: var(--sp-2) var(--sp-3); }
.blk > .f:has(.inp.area) { align-items: start; }
.blk > .f:has(.inp.area) > .f-label { padding-top: var(--sp-3); }
.blk > .f .sw-row { height: var(--h-field); }
/* «Дія»: список и кнопка в одной полосе — высота кнопки, у списка видимая рамка (Input: поле в полосе с кнопками — `h-btn`) */
.act-row { display: flex; align-items: center; gap: var(--sp-3); }
.act-pick { flex: 0 1 var(--fld-m); min-width: 0; }
.blk > .f .act-pick .ref-wrap { display: block; width: 100%; }
.blk > .f .act-pick .pick { height: var(--h-btn); width: 100%; max-width: none; border-color: var(--line-2); background: var(--panel); }
/* ввод и открытый список — рамка `accent` (стоит последним и с `:hover` в паре — сильнее покоя, наведения и рамки
   «Дії»: мышь над строкой открытого списка красила рамку серым — найдено проверкой 28.10.2026) */
.blk > .f .inp:focus, .blk > .f .inp.open,
.blk > .f:hover .inp:focus, .blk > .f:hover .inp.open { border-color: var(--accent); background: var(--panel); }

/* фото и галерея — не в колонку значений: подпись сверху, квадраты под ней от левого края блока (07.09.2026) */
.blk > .f:has(.ph-slot), .blk > .f:has(.gal) {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-4);
}
/* родственные картинки — одной строкой под общей подписью: «Фото Палітри» 1 и 2 (`MERGED` в коде) */
.ph-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- «Налаштування» карточки: розділи → колекції → поля (28.10.2026, шаг 1, образец владельца по логике Kommo) ---
   Вкладка в конце ряда; разделы плашками (ручка — порядок, свой — крестик, «+»), коллекции со значком в кружке,
   поля рамками — подпись, что внутри, тип; правка поля на месте. 🧪 Пробный режим: в базу не пишется. */
/* «Налаштування» всегда на виду: прижата вправо и стоит на месте, когда разделов больше, чем помещается (ряд листается под ней) */
.tab-set { display: inline-flex; align-items: center; gap: var(--sp-1); position: sticky; right: 0; margin-left: auto; padding-left: var(--sp-3); background: var(--panel); }
.tab-set.on::after { left: var(--sp-3); }
.tab-set svg { color: var(--fg-dim-2); transition: color var(--mo-fast); }
.tab-set.on svg, .tab-set:hover svg { color: var(--accent); }
button.blk-title .blk-ci { display: inline-flex; color: var(--fg-dim); }
.cs-head { margin-bottom: var(--sp-5); }
.cs-title { font-size: var(--ft-4); font-weight: 700; }
.cs-lead { margin-top: var(--sp-1); font-size: var(--ft-2); color: var(--fg-dim); line-height: 1.45; max-width: var(--fld-area); }
.cs-trial { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--ft-2); color: var(--fg-dim); }
.cs-secs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.cs-sec { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-md); padding: 0 var(--sp-2) 0 var(--sp-1); border: 1px solid var(--line-2); border-radius: var(--rd-2); background: var(--panel); }
.cs-sec.on { background: var(--accent-soft); border-color: var(--accent); }
.cs-sec-t { border: 0; background: none; padding: 0 var(--sp-1); font: inherit; font-size: var(--ft-3); font-weight: 600; color: var(--fg-dim); cursor: pointer; white-space: nowrap; }
.cs-sec.on .cs-sec-t { color: var(--accent-text); }
.cs-sec-t:focus-visible, .cs-x:focus-visible, .cs-act:focus-visible, .cs-plus:focus-visible, .cs-f:focus-visible, .cs-ic:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.blk > .f .cs-sec-inp, .cs-sec-inp { height: var(--h-sm); width: var(--fld-m); padding: 0 var(--sp-2); }
.cs-grip { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--fg-dim-2); cursor: grab; align-self: stretch; padding: 0 2px; }
.cs-grip:hover { color: var(--fg); }
.drag .cs-grip { cursor: grabbing; color: var(--accent); }
.cs-lock { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim-2); }
.cs-x, .cs-act { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); border: 0; border-radius: var(--rd-1); background: none; color: var(--fg-dim-2); cursor: pointer; padding: 0; flex: none; }
.cs-x:hover, .cs-act:hover { background: var(--panel-2); color: var(--fg); }
.cs-plus { width: var(--h-md); height: var(--h-md); display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-2); border-radius: var(--rd-2); background: none; color: var(--fg-dim); cursor: pointer; padding: 0; }
.cs-plus:hover { border-color: var(--accent); color: var(--accent); }
.cs-col { margin-bottom: var(--sp-6); }
.cs-colh { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cs-ci { width: var(--h-md); height: var(--h-md); border-radius: 50%; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim); flex: none; }
.cs-colt { font-size: var(--ft-4); font-weight: 700; }
.cs-colt.dim { color: var(--fg-dim); font-weight: 600; }
.cs-fields { display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--fld-area); }
/* поле рамкой, как у Kommo: ручка или замок · подпись · что внутри · тип */
.cs-f { display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: var(--h-md); padding: 0 var(--sp-3) 0 var(--sp-1); border: 1px solid var(--line); border-radius: var(--rd-2); background: var(--panel); font-size: var(--ft-3); cursor: pointer; transition: border-color var(--mo-fast); }
.cs-f:hover { border-color: var(--line-2); }
.cs-fname, .cs-fprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-fprev { color: var(--fg-dim); }
.cs-ftype { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--ft-2); color: var(--fg-dim); white-space: nowrap; }
.cs-ftype svg { color: var(--fg-dim-2); flex: none; }
.cs-f.drag, .cs-sec.drag, .cs-col.drag { opacity: .45; }
.cs-f.drop-before, .cs-col.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.cs-f.drop-after, .cs-col.drop-after { box-shadow: 0 2px 0 var(--accent); }
.cs-sec.drop-before { box-shadow: -2px 0 0 var(--accent); }
.cs-sec.drop-after { box-shadow: 2px 0 0 var(--accent); }
.cs-add { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-md); margin-top: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-3); border: 1px dashed var(--line-2); border-radius: var(--rd-2); background: none; font: inherit; font-size: var(--ft-3); color: var(--fg-dim); cursor: pointer; }
.cs-add:hover { border-color: var(--accent); color: var(--accent-text); }
.tabpane > .cs-add { align-self: flex-start; }   /* в столбце вкладки кнопка растягивалась на всю ширину — найдено проверкой */
.cs-add-col { margin-top: 0; }
.cs-empty { font-size: var(--ft-3); color: var(--fg-dim); margin-bottom: var(--sp-4); }
/* правка на месте: рамка `accent` и кольцо, строки «подпись — поле» */
.cs-ed { border: 1px solid var(--accent); border-radius: var(--rd-2); box-shadow: var(--ring); padding: var(--sp-4); background: var(--panel); max-width: var(--fld-area); box-sizing: border-box; }
.cs-ed + .cs-add, .cs-col > .cs-ed { margin-top: var(--sp-2); }
.cs-ed-h { font-size: var(--ft-1); color: var(--fg-dim); margin-bottom: var(--sp-3); }
.cs-ed-row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-3); }
.cs-ed-l { font-size: var(--ft-3); color: var(--fg-dim); padding-top: var(--sp-3); }
.cs-ed-v { min-width: 0; }
.cs-ed-v > .sw-row { height: var(--h-md); }
.cs-vars { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.cs-var { display: grid; grid-template-columns: minmax(0, 1fr) var(--h-sm); gap: var(--sp-2); align-items: center; width: 100%; }
.cs-seg { width: max-content; height: var(--h-md); }
.cs-note { font-size: var(--ft-2); color: var(--fg-dim); line-height: 1.45; margin: 0 0 var(--sp-3); }
.cs-err { font-size: var(--ft-2); color: var(--err-text); margin-bottom: var(--sp-3); }
.cs-foot { display: flex; align-items: center; gap: var(--sp-3); }
.cs-foot .cs-arch-btn { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.cs-icons { display: grid; grid-template-columns: repeat(8, var(--h-md)); gap: var(--sp-2); }
.cs-ic { width: var(--h-md); height: var(--h-md); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--fg-dim); cursor: pointer; padding: 0; }
.cs-ic:hover { border-color: var(--line-2); color: var(--fg); }
.cs-ic.on { border-color: var(--accent); color: var(--accent); box-shadow: var(--ring); }
.cs-arch { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); max-width: var(--fld-area); }
.cs-arch-h { font-size: var(--ft-3); font-weight: 700; margin-bottom: var(--sp-2); }
.cs-arow { display: grid; grid-template-columns: var(--fld-num) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: var(--h-sm); font-size: var(--ft-3); }
.cs-akind { font-size: var(--ft-2); color: var(--fg-dim); }
.cs-aname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* своя «Галочка» — квадрат-отметка, как в меню выбора (`.sug-box`); «Перемикач» — общий Switch */
.cs-check { width: var(--sp-5); height: var(--sp-5); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--rd-1); background: var(--panel); color: var(--on-accent); cursor: pointer; padding: 0; }
.cs-check.on { background: var(--accent); border-color: var(--accent); }
.cs-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 620px) {
  .cs-f { grid-template-columns: var(--sp-5) minmax(0, 1fr) auto; }
  .cs-fprev { display: none; }
  .cs-ed-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .cs-ed-l { padding-top: 0; font-size: var(--ft-2); }
  .cs-icons { grid-template-columns: repeat(6, var(--h-md)); }
}

/* --- квадрат фото (PhotoSlot) — `ph-box` на всё: главное фото, палитры, снимок человека, галерея, «+» --- */
.ph-slot, .gal-item, .gal-add {
  position: relative; flex: none; width: var(--ph-box); height: var(--ph-box);
  border-radius: var(--rd-3); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
}
.ph-slot img, .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* пустой снимок и «+» — сами кнопки: пунктир, при наведении и по фокусу `accent` (07.09.2026) */
.ph-slot.empty, .gal-add {
  border-style: dashed; border-color: var(--line-2); color: var(--fg-dim-2);
  cursor: pointer; font: inherit; padding: 0; transition: border-color var(--mo-fast), color var(--mo-fast);
}
.ph-slot.empty:hover, .ph-slot.empty:focus-visible, .gal-add:hover, .gal-add:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
/* действия — на самом снимке, проявляются при наведении и по фокусу; кнопок под снимком нет (07.09.2026) */
.ph-acts {
  position: absolute; top: var(--sp-2); right: var(--sp-2); display: flex; gap: var(--sp-1);
  opacity: 0; transition: opacity var(--mo-fast);
}
.ph-slot:hover .ph-acts, .gal-item:hover .ph-acts, .ph-acts:focus-within { opacity: 1; }
.ph-act {
  width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--rd-1); background: var(--panel); box-shadow: var(--shadow-card);
  color: var(--fg); cursor: pointer; padding: 0;
}
.ph-act:hover { color: var(--accent); }
/* «Прибрати» при наведении — `err-text` на `err-bg` (система, PhotoSlot) */
.ph-act.del:hover { color: var(--err-text); background: var(--err-bg); }
.ph-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- «Фото і Відео» (29.10.2026, образец `research/2026-10-29-media-block.html`): клетки 2 × 3 тем же `ph-box`,
   в карточке — от левого края блока, без колонки подписи; окно — одно, шириной в три клетки: рамка загрузки сама
   становится сеткой 2 × 3 (владелец: «прямо в этом же квадратике разместить все фотографии») --- */
.mx-grid { display: grid; grid-template-columns: repeat(3, var(--ph-box)); gap: var(--sp-3); }
.blk > .f.mx-row { display: block; }
.mx-tile {
  position: relative; width: var(--ph-box); height: var(--ph-box); border-radius: var(--rd-3); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2); display: flex; align-items: center; justify-content: center;
}
.mx-tile img, .mx-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mx-tile.empty {
  border-style: dashed; border-color: var(--line-2); color: var(--fg-dim-2); cursor: pointer; font: inherit; padding: 0;
  transition: border-color var(--mo-fast), color var(--mo-fast);
}
.mx-tile.empty:hover, .mx-tile.empty:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.mx-tile:hover .ph-acts { opacity: 1; }
/* «Головне» и номер — внизу слева, на подложке панели */
.mx-main, .mx-num {
  position: absolute; left: var(--sp-2); bottom: var(--sp-2); border-radius: var(--rd-1); background: var(--panel);
  box-shadow: var(--shadow-card); font-size: var(--ft-1); font-weight: 700; color: var(--fg);
}
.mx-main { padding: 2px var(--sp-2); }
.mx-num { min-width: var(--sp-6); height: var(--sp-6); padding: 0 var(--sp-1); border-radius: var(--rd-4); display: flex; align-items: center; justify-content: center; }
/* загрузка — бегущая полоса внизу клетки: служба не сообщает, сколько уже залито */
.mx-up { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sp-1); background: var(--panel-3); overflow: hidden; }
.mx-up i { display: block; width: 40%; height: 100%; background: var(--accent); animation: mx-up 1s ease-in-out infinite; }
@keyframes mx-up { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.mx-tile.loading img, .mx-tile.loading video { opacity: .5; }
/* видео: кадр и кнопка запуска по центру клетки; плеер — своё окно шириной ящика, кадр целиком */
.mx-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--sp-9); height: var(--sp-9); padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--rd-4);
  background: var(--overlay-strong); color: var(--panel); cursor: pointer; transition: background var(--mo-fast);
}
.mx-play:hover { background: var(--accent); }
.mx-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.askbox-box.mx-video { width: var(--drawer-w); max-width: calc(100vw - var(--edge) * 2); }
.mx-video video { display: block; width: 100%; max-height: 70vh; border-radius: var(--rd-3); background: var(--menu-bg); }
.mx-video .mx-msg:empty { display: none; }

/* ширина — ровно три клетки и поля окна (520, как у окон-вопросов); `.askbox-box` ниже по файлу — селектор двойной */
.askbox-box.mx-box { width: calc(var(--ph-box) * 3 + var(--sp-3) * 2 + var(--edge) * 2); }
.mx-box .seg { margin-top: var(--sp-5); }
/* рамка, сетка и файлы CRM — одной высоты (две клетки), чтобы окно не прыгало при переключении */
.mx-area { height: calc(var(--ph-box) * 2 + var(--sp-3)); margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.mx-drop {
  flex: 1; border: 1px dashed var(--line-2); border-radius: var(--rd-3); background: var(--panel-2);
  padding: var(--sp-7) var(--sp-5); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center; color: var(--fg-dim); font-size: var(--ft-3);
  transition: border-color var(--mo-fast), background var(--mo-fast);
}
.mx-drop b { color: var(--fg); font-size: var(--ft-4); }
.mx-drop small { color: var(--fg-dim-2); font-size: var(--ft-2); }
.mx-drop .btn { margin-top: var(--sp-2); }
.mx-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.mx-q { flex: none; }
.mx-lib { flex: 1; min-height: 0; margin: 0 -2px; padding: 2px; overflow-y: auto; }
.mx-lib .mx-tile { cursor: pointer; }
.mx-lib .mx-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mx-lib .mx-tile.on { border: 2px solid var(--accent); }
.mx-lib .mx-tile.in { cursor: default; }
.mx-lib .mx-tile.in img { opacity: .4; }
.mx-lib .mx-more { margin-top: var(--sp-3); }
.mx-tick {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: var(--sp-6); height: var(--sp-6); border-radius: var(--rd-4);
  border: 1.5px solid var(--panel); background: var(--overlay-strong); color: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: var(--ft-1); font-weight: 700; line-height: 1;
}
.mx-tile.on .mx-tick { background: var(--accent); border-color: var(--accent); }
.mx-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--ft-1);
  color: var(--panel); background: linear-gradient(transparent, var(--overlay-strong));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mx-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--ft-2); font-weight: 700; color: var(--fg); }
.mx-hint { font-size: var(--ft-2); color: var(--fg-dim-2); padding: var(--sp-3) 0; }
.mx-ord .mx-tile.full { cursor: grab; touch-action: none; }
/* перенос (владелец 30.10.2026: «визуально видеть как схватил объект и как он тянется»): на месте, куда встанет
   снимок, — бледная клетка с обводкой `accent`; сам снимок едет за указателем на всплывающей тени; рука сжата */
.mx-ord .mx-tile.drag { border-color: var(--accent); }
.mx-ord .mx-tile.drag img, .mx-ord .mx-tile.drag .mx-main, .mx-ord .mx-tile.drag .mx-num { opacity: .35; }
.mx-ghost {
  position: fixed; z-index: 1; width: var(--ph-box); height: var(--ph-box); border-radius: var(--rd-3); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2); box-shadow: var(--shadow-pop); pointer-events: none;
}
.mx-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.askbox.mx-dragging, .askbox.mx-dragging * { cursor: grabbing; }
.askbox.mx-dragging .ph-acts { display: none; }
/* строка сообщения — место есть всегда, чтобы окно не подпрыгивало, когда она появляется */
.mx-msg { margin-top: var(--sp-3); min-height: var(--sp-6); font-size: var(--ft-3); color: var(--ok); }
.mx-msg.bad { color: var(--err-text); }
/* низ окна — по пометке владельца на снимке: «Скасувати» слева, чёрная кнопка справа */
.mx-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }

/* --- телефон: подпись над значением, значение во всю строку (выбор владельца 28.10.2026, вариант 2 образца) --- */
@media (max-width: 620px) {
  .blk > .f { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-2); }
  .blk > .f > *:not(.f-label) { grid-column: 1; }
  .blk > .f > .f-label { padding-top: var(--sp-2); font-size: var(--ft-2); }
  /* текст значения — на вертикали подписи: поле без рамки сдвинуто влево на свой внутренний отступ */
  .blk > .f .inp, .blk > .f .pick { margin-left: calc(-1 * var(--sp-3)); }
  .blk > .f .act-pick .pick { margin-left: 0; }
}

/* Обёртка поля со списком подсказок: список встаёт ровно под полем,
   а не под подсказкой к нему. */
.ref-wrap { position: relative; display: block; }

.sug {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: var(--sp-1);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-2);
  max-height: 260px; overflow-y: auto; padding: var(--sp-1); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
/* 28.10.2026: меню в корне страницы (туда его переносит `dropdown`) — не уже поля (это `min-width` из кода)
   и по самому длинному пункту, но не шире `fld-xl` и экрана; было ровно по кнопке — пункты ломались на две строки */
body > .sug { right: auto; width: max-content; max-width: min(var(--fld-xl), calc(100vw - 2 * var(--sp-5))); }
/* 08.09.2026: строка поиска внутри списка — когда значений больше восьми.
   Держится сверху, список под ней прокручивается. */
.sug-find {
  flex: none; position: sticky; top: 0; z-index: 1;
  height: var(--h-md); box-sizing: border-box; width: 100%;
  margin-bottom: var(--sp-1); padding: 0 var(--sp-3);
  background: var(--panel); color: var(--fg); font: inherit; font-size: var(--ft-3);
  border: 1px solid var(--line-2); border-radius: var(--rd-2); outline: none;   /* 25.10.2026: как все поля, было 6 */
}
.sug-find::placeholder { color: var(--fg-dim-2); }
.sug-find:focus { border-color: var(--accent); }
.sug-rows { display: flex; flex-direction: column; min-height: 0; }
.sug-none { padding: var(--sp-3); }
/* размер как в самом поле: замер 05.09.2026 показал 14 в меню против 13 в поле */
.sug button { display: block; width: 100%; text-align: left; background: none; border: none;
              color: var(--fg); padding: var(--sp-3) var(--sp-4); border-radius: var(--rd-1);
              cursor: pointer; font: inherit; font-size: var(--ft-3); }
.sug button:hover { background: var(--panel-2); }
.sug .add { color: var(--accent); }
/* выбранный пункт видно сразу: подсветка акцентом и точка слева */
/* 08.09.2026, владелец: «нравится, что есть галочка и цвет оранжевый,
   но подложку у выделенных я бы убрал — лишняя». Оставляем только цвет
   текста и отметку. Точка перед пунктом тоже ушла: её роль взяла галочка. */
.sug .sug-item.on { color: var(--accent); background: none; font-weight: 600; }
.sug .sug-item.on:hover { background: var(--panel-2); }
/* в одиночном списке отметки нет — там точка остаётся признаком выбора */
.sug .sug-item.on:not(:has(.sug-box))::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: var(--sp-3); vertical-align: middle;
}
.sug .clear { color: var(--fg-dim); }

.chk { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-6); }
.chk input { width: auto; }

/* Сообщение внизу справа: по центру оно накрывало форму открытой карточки
   (05.09.2026 — легло прямо на заголовок секции). */
.toast {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6);
  background: var(--btn-primary); color: var(--on-primary); border: none; border-radius: var(--rd-2);
  padding: var(--sp-4) var(--sp-6); z-index: 100; box-shadow: var(--shadow-pop);
  font-size: var(--ft-3); max-width: 380px;
}
.toast.bad { background: var(--panel); color: var(--err-text); border: 1px solid var(--err); }

@media (max-width: 900px) {
  /* 25.10.2026: меню в узком окне сворачивает не это правило, а класс `side-collapsed`
     (app.js, setSide: в узком окне по умолчанию свёрнуто, выбор помнится отдельно).
     Раньше здесь стояли свои правила ширины — без центровки низа меню и без разворота
     по знаку FC: кружок аккаунта уезжал влево, развернуть меню было нечем. */
  .row { grid-template-columns: 40px 1fr 100px; }
  .row .hide-sm { display: none; }
  .crumbs { display: none; }
}

/* ============================================================================
   Табличный вид по колонкам — по снимку владельца из админки (05.09.2026):
   каждое поле своим столбцом, ничего не слито в одну строку.
   ============================================================================ */

/* Прокрутка таблицы своя: системная полоса перекрывала пол-окна */
.rows::-webkit-scrollbar { height: 10px; }
.rows::-webkit-scrollbar-track { background: transparent; }
.rows::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: var(--rd-4);
  border: 3px solid transparent; background-clip: content-box;
}
.rows::-webkit-scrollbar-thumb:hover { background: var(--fg-dim-2); background-clip: content-box; }

.rows {
  display: block; border-radius: var(--r);
  overflow: auto;                      /* обе оси: тогда липкая шапка держится */
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
  border: 1px solid var(--line);
  background: var(--panel);   /* 25.10.2026: белая таблица на фоне, без стекла */
}

.thead, .trow {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  /* Ширина по содержимому. Раньше стояло фиксированное значение — последняя
     колонка обрывалась под скруглённым краем контейнера при прокрутке
     (замечание владельца 05.09.2026). Гибкие колонки не схлопываются:
     у них задан minmax. */
  min-width: max-content;
  padding: 0 var(--sp-4);
}
.thead {
  position: sticky; top: 0; z-index: 2;
  /* фон плотный: полупрозрачный просвечивал строками, когда таблица
     прокручивается под шапкой (05.09.2026) */
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  height: 38px;
}
.th {
  font-size: var(--ft-1); font-weight: 600; letter-spacing: .3px;
  color: var(--fg-dim); text-transform: uppercase;
  /* 28.10.2026: без `overflow: hidden` — он обрезал наружную половину ручки ширины `.th-grip`: живая мышь попадала
     в заголовок и начинала перенос колонки вместо ширины. Многоточие держит `.th-t`. */
  white-space: nowrap;
}
.trow {
  background: transparent;
  border-bottom: 1px solid var(--line);
  min-height: var(--h-row);
  cursor: pointer;
  transition: background var(--mo-fast);
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--panel-2); }
.tc {
  font-size: var(--ft-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc.dim { color: var(--fg-dim); }
.tc.center { text-align: center; }
.tc.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.tc.money.in { color: var(--price-in); }     /* цена входа — зелёная, как в админке */
.tc.money.out { color: var(--price-out); }   /* оптовая цена — розовая, как в админке */
/* Фото каталога вертикальные (4:5) — квадратная миниатюра их резала
   (замечание владельца 05.09.2026) */
.tphoto {
  /* 05.09.2026, владелец: миниатюра в таблице квадратная и чуть больше */
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--rd-1);
  background: var(--panel-2); display: block; cursor: zoom-in;
}
.tphoto.none { opacity: .4; }
/* «есть на витрине» — это утверждение, а не акцент: оранжевая галочка
   читалась как предупреждение (05.09.2026) */
.ok-check { color: var(--ok); font-weight: 700; }

.hint { font-size: var(--ft-1); color: var(--fg-dim-2); line-height: 1.35; }
/* две строки, дальше многоточие: длинная подсказка не должна поднимать ряд */
.hint.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hint.w-full { grid-column: 1 / -1; }
input.ro { background: var(--panel); color: var(--fg-dim); cursor: default; }

@media (max-width: 900px) {
  .photos { grid-template-columns: 1fr; }
}

/* ============================================================================
   Настройка таблицы: ширина колонок, состав столбцов, превью фото
   (по просьбе владельца 05.09.2026).
   ============================================================================ */

.list-head { position: relative; }
.list-tools { display: flex; gap: var(--sp-3); position: relative; }

/* ручка изменения ширины в шапке */
.th { position: relative; display: flex; align-items: center; }
.th-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ручка ширины: широкая зона захвата, видимая линия при наведении на шапку,
   курсор-стрелка. Раньше линия появлялась только при попадании точно в границу
   — попасть было трудно (замечание владельца 05.09.2026). */
.th-grip {
  position: absolute; right: -6px; top: -9px; bottom: -9px; width: 12px;
  cursor: col-resize; z-index: 3;
}
.th-grip::after {
  content: ''; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 2px;
  background: var(--line-2); border-radius: 2px;
  opacity: 0; transition: opacity .12s, background .12s;
}
.thead:hover .th-grip::after { opacity: 1; }
.th-grip:hover::after { background: var(--accent); opacity: 1; box-shadow: var(--ring); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .th-grip::after { opacity: 1; background: var(--accent); }

/* Заголовок можно схватить и перенести — прямо в таблице */
/* Намёк, что заголовок можно схватить: точки стоят всегда.
   🔑 25.10.2026, владелец: точки появлялись при наведении на шапку и сдвигали названия —
   «каждый раз, когда ты двигаешь по всему монитору мышкой… оно все прыгает». Теперь
   точки и отступ названия — постоянные, без анимации; наведение на сам заголовок
   только красит его точки акцентом. */
.th { cursor: grab; position: relative; }
.th::before {
  content: '⠿'; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  font-size: var(--ft-2); line-height: 1; color: var(--fg-dim-2);
  opacity: .55; pointer-events: none;
}
.th:hover::before { opacity: 1; color: var(--accent); }
.th .th-t { padding-left: var(--sp-4); }
.th:hover .th-t { color: var(--fg); }
.th:active { cursor: grabbing; }
.th.drag { opacity: .45; }
.th.drop-left::before, .th.drop-right::before {
  content: ''; position: absolute; top: -8px; bottom: -8px; width: 2px;
  background: var(--accent); border-radius: 2px; opacity: 1;
}
.th.drop-left::before { left: -6px; }
.th.drop-right::before { right: -6px; }

/* Разделители столбцов — их не было вовсе (замечание владельца) */
.thead .th:not(:last-child), .trow .tc:not(:last-child) {
  border-right: 1px solid var(--line);
  padding-right: var(--sp-4);
}
.thead .th, .trow .tc { padding-left: var(--sp-1); }
.thead .th:last-child, .trow .tc:last-child { padding-right: var(--sp-2); }

/* панель состава столбцов */
/* панель настройки колонок открывается под шестерёнкой в верхней полосе */
.colspanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 268px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3);
  box-shadow: var(--shadow-pop); padding: var(--sp-4);
  /* колонок много: список прокручивается, а шапка остаётся на виду */
  display: flex; flex-direction: column;
  /* 08.09.2026, владелец: «само выпадающее окно сделать меньше, полоску
     скроллинга сделать видимой сразу, чтобы было понятно, что там есть ещё
     пункты». Прежнее решение (05.09) растягивало окно почти на весь экран,
     чтобы поместилось больше строк. Теперь наоборот: окно невысокое,
     а о продолжении списка говорит сама полоса прокрутки. */
  max-height: min(52vh, 420px);
}
.colspanel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: var(--ft-3);
}
/* 05.09.2026: список 18 колонок прокручивается, но об этом ничего не говорило —
   видно было девять, и человек не знал, что есть ещё. Полоса прокрутки видна,
   снизу лёгкое затухание как признак продолжения. */
/* 08.09.2026: полоса видна СРАЗУ, до первой прокрутки. Для этого
   overflow-y: scroll (место под полосу резервируется всегда) и видимый
   жёлоб — иначе браузер рисует её поверх и только в момент прокрутки,
   и человек не знает, что список длиннее. */
.colspanel-list {
  flex: 1 1 auto; min-height: 0; overflow-y: scroll; display: flex; flex-direction: column; gap: 1px;
  /* 🛑 08.09.2026: НЕ задавать здесь scrollbar-width/scrollbar-color. Стандартное
     свойство перебивает правила ::-webkit-scrollbar, и на macOS полоса остаётся
     плавающей: место не занимает и видна только в момент прокрутки. Замер это
     показал прямо — ширина полосы 0 при содержимом 1259 и окне 333. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}
.colspanel-list::-webkit-scrollbar { width: 8px; -webkit-appearance: none; }
.colspanel-list::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 4px; }
.colspanel-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.colspanel-list::-webkit-scrollbar-thumb:hover { background: var(--fg-dim-2); }
.colrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); min-height: 34px;
  border-radius: var(--rd-1); cursor: grab; background: transparent;
}
.colrow:hover { background: var(--panel-2); }
.colrow.drag { opacity: .4; }
.colrow.over { box-shadow: inset 0 2px 0 var(--accent); }
/* Строка настроек: название слева, переключатель справа — как в образце
   владельца (экран Settings). Раньше были голые галочки браузера. */
.colrow-lab {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--ft-3); cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.colrow-lab input { position: absolute; opacity: 0; width: 0; height: 0; }
.colrow-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Переключатель в системе один. 05.09.2026 замер на боевой: здесь он был
   32×18, а в карточке 38×22 — два разных вида одного элемента. */
.colrow-sw {
  position: relative; flex: none;
  width: 38px; height: 22px; border-radius: var(--rd-4);
  background: var(--panel-3); border: 1px solid var(--line-2);
  transition: background .15s, border-color .15s;
}
.colrow-sw::after {
  content: ''; position: absolute; top: 50%; left: 2px; margin-top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); box-shadow: var(--knob);
  transition: transform .16s ease, background .15s;
}
.colrow-lab input:checked ~ .colrow-sw { background: var(--accent); border-color: var(--accent); }
.colrow-lab input:checked ~ .colrow-sw::after { transform: translateX(16px); background: var(--on-accent); }
.colrow-lab input:focus-visible ~ .colrow-sw { box-shadow: var(--ring); }

.colspanel-head { flex: none; }
.colspanel .hint {
  flex: none; margin-top: var(--sp-3); padding-top: var(--sp-3); line-height: 1.35;
  border-top: 1px solid var(--line);
}

/* превью фото по наведению */
/* Предпросмотр по наведению. 05.09.2026, владелец: «четвёртое фото вылазит
   за рамку, рамка кривая; я просил квадратные». Рамка по содержимому,
   фото квадратные 120×120, до пяти в ряд, подпись под всей полосой. */
.photo-pop {
  position: fixed; z-index: 70; width: max-content; max-width: min(880px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3);
  box-shadow: var(--shadow-pop); padding: var(--sp-3); pointer-events: none;
}
.pop-strip { display: flex; gap: var(--sp-2); }
.pop-strip img {
  width: 160px; height: 160px; object-fit: cover; object-position: center;   /* владелец 05.09: «чуть больше, детали ткани» */
  border-radius: var(--rd-2); background: var(--panel-2); flex: none;
}
.pop-cap { margin-top: var(--sp-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   Приёмы из образцов владельца (05.09.2026): плашка точкой, переключатель.
   ============================================================================ */

.tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 2px 10px 2px var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--rd-1);   /* 25.10.2026: 6 вместо таблетки — «закругление сильно большое», владелец */
  font-size: var(--ft-1); font-weight: 500; letter-spacing: .1px;
  white-space: nowrap;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* 🔑 25.10.2026: тон плашки — из палитры FINALCUT, по смыслу значения (`tagTone` в app.js), а не цвета
   из схемы Directus. Мягкий фон + тёмный текст той же пары; точка — яркий цвет пары. */
.tag.tone-ok { color: var(--ok); background: var(--ok-bg); }
.tag.tone-ok .tag-dot { background: var(--ok); }
.tag.tone-err { color: var(--err-text); background: var(--err-bg); }
.tag.tone-err .tag-dot { background: var(--err); }
.tag.tone-warn { color: var(--warn-text); background: var(--warn-bg); }
.tag.tone-neutral { color: var(--fg-dim); background: var(--panel-2); }


/* ============================================================================
   Крупные вещи, а не пиксели (05.09.2026): полоса метрик и фильтры-чипы.
   Владелец: правки были на месте, но их не видно — общий вид оставался
   прежним. Эти два блока меняют экран заметно.
   ============================================================================ */

/* --- фильтры-чипы -------------------------------------------------------
   Подпись рисуем сами, нативный список лежит поверх прозрачным: он не
   выравнивается по вертикали внутри чипа (замер 05.09.2026 — был на 2 px
   ниже и со смещением 4 px, отсюда «наложение криво»). */
.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.chip-wrap { position: relative; }
/* меню фильтра — то же, что в карточке, только шире чипа */
.chip-menu { position: fixed; left: auto; right: auto; top: auto; margin: 0; max-width: 320px; width: max-content; z-index: 60; }
.chip {
  position: relative; display: inline-flex; align-items: center;
  height: var(--h-md); padding: 0 var(--sp-8) 0 var(--sp-5);   /* было 34 — своя высота вне шкалы */
  border-radius: var(--rd-4);
  background: var(--panel); border: 1px solid var(--line-2);
  transition: border-color .15s, background .15s;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--panel-2); }
.chip.on, .chip.open { border-color: var(--accent); background: var(--accent-soft); }
.chip { font: inherit; }
.chip-cap {
  font-size: var(--ft-3); line-height: 1; color: var(--fg-dim);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.chip.on .chip-cap { color: var(--accent-text); font-weight: 600; }
.chip-arrow {
  position: absolute; right: var(--sp-5); top: 50%; margin-top: -2px;
  width: 0; height: 0; pointer-events: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--fg-dim-2);
}
.chip.on .chip-arrow { border-top-color: var(--accent-text); }
/* 05.09.2026: здесь лежал прозрачный системный список поверх чипа. Он убран
   вместе с последним системным элементом — теперь чип открывает наше меню. */
.chip:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

@media (max-width: 900px) {
}

/* ============================================================================
   ЭЛЕМЕНТЫ ФОРМЫ — СВОИ (05.09.2026)

   Решение владельца: «давай убирать библиотеку, вы постоянно будете мешать
   друг другу». Замер на боевой это подтвердил: наше поле-справочник стояло
   на 14 px ниже соседнего поля библиотеки в одном ряду (574 против 560),
   подписи 12 px против 11, а её стиль дорисовывал вторую стрелку в заголовке
   секции. Два набора элементов в одной форме не сходятся никогда.

   Теперь набор один. Все поля: высота 36, текст 13, подпись 11, скругление 12 (с 25.10.2026, было 9).
   ============================================================================ */

.f-label {
  font-size: var(--ft-1); color: var(--fg-dim); margin-bottom: var(--sp-2);
  display: block; line-height: 1.35; font-weight: 400;
}
.f-label .req { color: var(--err); }

/* одно правило на все виды полей — отсюда и одинаковый вид */
.inp {
  width: 100%; height: var(--h-md); box-sizing: border-box;
  padding: 0 var(--sp-4); font: inherit; font-size: var(--ft-3);
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--rd-2);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  display: flex; align-items: center;
}
input.inp, textarea.inp { display: block; }
.inp::placeholder { color: var(--fg-dim-2); }
.inp:hover:not(.ro) { border-color: var(--fg-dim-2); }
.inp:focus, .inp.open { border-color: var(--accent); box-shadow: var(--ring); }
.inp.ro { background: var(--panel-2); border-color: var(--line); color: var(--fg-dim); }
.inp.area { height: auto; min-height: 84px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.5; }
.inp.num { font-variant-numeric: tabular-nums; }
/* стрелки у числового поля только мешают — значения вводят с клавиатуры */
.inp.num::-webkit-outer-spin-button, .inp.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inp.num { -moz-appearance: textfield; }


/* единица измерения внутри поля: $ ₴ см г/м² м/кг */
.inp-wrap { position: relative; }
.inp-wrap .inp { padding-right: 42px; }
.inp-suffix {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-size: var(--ft-2); color: var(--fg-dim-2); pointer-events: none;
}

/* свой выпадающий список — системный не поддаётся выравниванию */
.pick { justify-content: space-between; cursor: pointer; text-align: left; }
.pick-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-cap.dim { color: var(--fg-dim-2); }
.pick-arrow {
  flex: none; width: 0; height: 0; margin-left: var(--sp-3);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--fg-dim-2);
}
.pick.open .pick-arrow { border-top-color: var(--accent); }

/* свой переключатель */
.sw-row { display: flex; align-items: center; gap: var(--sp-3); height: var(--h-md); }
.sw {
  flex: none; width: 38px; height: 22px; border-radius: var(--rd-4); position: relative;
  background: var(--panel-3); border: 1px solid var(--line-2); cursor: pointer;
  padding: 0; transition: background .15s ease, border-color .15s ease;
}
.sw-knob {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: var(--knob);
  transition: left .15s ease, background .15s ease;
}
.sw.on { background: var(--accent); border-color: var(--accent); }
.sw.on .sw-knob { left: 18px; background: var(--panel); }
.sw:focus-visible { outline: none; box-shadow: var(--ring); }
.sw-cap { font-size: var(--ft-3); cursor: pointer; }

/* --- экран «Користувачі» (08.09.2026) ------------------------------------
   Своего вида здесь почти нет: таблица, плашка и переключатель взяты те же,
   что в каталоге (паттерн 9). Добавлены только круглое фото человека
   и два состояния плашки — по правилу цвета (паттерн 13): зелёный
   утверждает, приглушённый гасит. */
.uava { border-radius: 50%; cursor: default; }
/* Кружок с буквой в строке — тот же аватар, что в меню, только крупнее.
   Размер задаёт место (ошибка №33: стиль места — у контейнера). */
#list .avatar { width: 44px; height: 44px; font-size: var(--ft-3); }
/* Кружок с буквой и фото человека в строке — 32, как аватар в меню.
   🛑 08.09.2026, владелец: «кружочки и фотографии в главной таблице прилипли
   к верхней и нижней границе» — при 44 в строке 46 оставалось по пикселю.
   Строку не трогаем: она общая с каталогом. */
#list .avatar { width: 32px; height: 32px; font-size: var(--ft-2); }
.tphoto.uava { width: 32px; height: 32px; }
.tag.u-role { color: var(--fg-dim); border-color: var(--line-2); background: var(--panel-2); }
.tag.u-on { color: var(--ok); border-color: transparent; background: var(--ok-bg); }
.tag.u-off { color: var(--fg-dim-2); border-color: var(--line-2); background: var(--panel-2); }
/* Плашка в строке блока — таблетка по содержимому. Сетка карточки кладёт
   всё во вторую колонку и растягивает: без этого «Активний» становился
   зелёной полосой во весь ящик (замер 08.09.2026: 643 px вместо 84). */
.blk > .f > .tag { justify-self: start; }

/* --- своё окно вопроса (08.09.2026) --------------------------------------
   Образец — окно «Вы не сохранили внесённые изменения» из CRM владельца.
   🛑 Не браузерный `confirm`: те запрещены (паттерн 21), а нарисованное
   нами окно — наоборот, нужно. Числа со шкалы: рамка --edge, кнопки --h-btn,
   скругление панели --rd-3. */
.askbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.askbox-bg { position: absolute; inset: 0; background: var(--overlay-strong); }
.askbox-box {
  position: relative; min-width: 380px; max-width: 520px;
  padding: var(--edge);
  background: var(--panel); border: none; border-radius: var(--rd-3);
  box-shadow: var(--shadow-dialog);
}
.askbox-title { font-size: var(--ft-5); font-weight: 700; color: var(--fg); }
.askbox-text { margin-top: var(--sp-2); color: var(--fg-dim); font-size: var(--ft-3); }
.askbox-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }

/* --- матрица прав в карточке (08.09.2026) --------------------------------
   Образец — таблица прав в карточке человека у Kommo. Строки — разделы,
   колонки — действия, в клетках наш переключатель. */
.rights { margin-top: var(--sp-6); }
.rights-row { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(4, 116px); align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.rights-head { border-bottom: 1px solid var(--line-2); padding-bottom: var(--sp-2); }
.rights-head .rights-cell { font-size: var(--ft-1); color: var(--fg-dim); letter-spacing: .3px; text-transform: uppercase; }
.rights-name { font-size: var(--ft-3); color: var(--fg); }
.rights-cell { display: flex; align-items: center; gap: var(--sp-2); }
.rights-part { font-size: var(--ft-1); color: var(--fg-dim-2); }
/* Частично включённый раздел: у части таблиц право есть, у части нет.
   Кружок стоит посередине — видно, что состояние промежуточное. */
.sw.part { background: var(--accent-soft); border-color: var(--accent); }
.sw.part .sw-knob { left: 10px; background: var(--accent); }
.rights-full { margin-top: var(--sp-6); }

/* Кнопка «Налаштування Ролей» — рядом с переключателем людей, но отдельно
   от него: роли к активным и вимкненим отношения не имеют (08.09.2026). */
.uroles.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

/* --- настройка роли прямо в таблице (08.09.2026) -------------------------
   Владелец: «если я провалился в роли, там всё и настраивал… чем меньше
   кнопок нажмём, тем проще». Строка раскрывается, под ней панель. */
.trow.open { background: var(--panel-2); }
.rolebox { padding: var(--sp-6) var(--sp-4) var(--sp-7); background: var(--panel-2); border-bottom: 1px solid var(--line); }
.rolebox-head { display: flex; align-items: center; gap: var(--sp-3); }
.rolebox-head .inp { width: 260px; height: var(--h-md); }
.rolebox .rights { margin-top: var(--sp-5); }
.rolebox-foot { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
/* строка заведения новой роли — часть той же таблицы, а не кнопка сверху */
/* 🛑 Кнопка не липнет к строке над собой (владелец 08.09.2026: «кнопка
   отвратительно прилипла к верхнему полю»): у строки свой воздух сверху
   и снизу, разделителя нет — она не запись, а действие. */
.trow.newrole {
  cursor: default; grid-template-columns: 1fr !important;
  padding: var(--sp-5) 0 var(--sp-4); border-bottom: none;
}
.trow.newrole .tc { display: flex; align-items: center; gap: var(--sp-3); }
.trow.newrole .inp { width: 260px; height: var(--h-md); }
.uroles { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Кнопка выхода: значок и подпись в ряд, значок не сжимается. */
#btn-exit { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); }
#btn-exit svg { flex: none; }

/* --- списки и поставщики (28.10.2026) ------------------------------------
   Вариант 1 образца «Списки», выбранный владельцем 27.10.2026: перечень слева,
   значения справа. Таблица — общая (`.rows`, `.thead`, `.trow`), здесь только
   своё: раскладка, перечень по разделам, число тканей, кнопки строки, правка
   на месте, окно «Новий список». Сейчас пробный режим — правки живут в памяти
   страницы (app.js, `LX`). */
.lx { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-5); }
.lx.solo { grid-template-columns: minmax(0, 1fr); }
.lx-side { overflow: auto; align-self: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
/* заголовок раздела — кнопка: сворачивает и разворачивает его списки. Вид — «дерево с линией» (выбор владельца
   28.10.2026, вариант 2 образца): стрелка перед названием, число спрятанных — справа, списки раздела —
   в ветке `.lx-kids`, линия слева идёт от стрелки вниз */
.lx-group { display: flex; align-items: center; gap: var(--sp-2); width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; font-size: var(--ft-1); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--fg-dim); padding: var(--sp-4) var(--sp-3) var(--sp-2); border-radius: var(--rd-2); }
.lx-group:hover { color: var(--fg); }
.lx-group:focus-visible, .lx-chip-group:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lx-group .n, .lx-chip-group .n { font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lx-group.has-on, .lx-chip-group.has-on { color: var(--accent-text); }
.lx-group .n { margin-left: auto; }
.lx-arrow { flex: none; order: -1; transform: rotate(90deg); transition: transform var(--mo-fast) ease; }
.lx-kids { margin-left: calc(var(--sp-3) + var(--sp-2)); padding-left: var(--sp-2); border-left: 1px solid var(--line-2); }
.lx-group.shut .lx-arrow, .lx-chip-group.shut .lx-arrow { transform: none; }
.lx-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: var(--h-md); padding: 0 var(--sp-3); border: 0; background: transparent; border-radius: var(--rd-2); font: inherit; font-size: var(--ft-3); color: var(--fg); cursor: pointer; text-align: left; }
.lx-item:hover { background: var(--panel-2); }
.lx-item.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.lx-item .n, .lx-chip .n { margin-left: auto; color: var(--fg-dim); font-variant-numeric: tabular-nums; font-size: var(--ft-2); font-weight: 400; }
.lx-item:focus-visible, .lx-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lx-none { padding: 0 var(--sp-3) var(--sp-2); color: var(--fg-dim-2); font-size: var(--ft-2); }
/* «Новий список» — под всеми разделами, цветом действия, как «Додати» в строке */
.btn.lx-new { width: 100%; justify-content: flex-start; margin-top: var(--sp-3); padding: 0 var(--sp-3); color: var(--accent-text); }
.btn.lx-new:hover { color: var(--accent-text); background: var(--accent-soft); }
.lx-chips { display: none; }
.lx-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lx-hint { flex: none; margin-bottom: var(--sp-3); color: var(--fg-dim); font-size: var(--ft-2); }
.lx-count { flex: none; margin-bottom: var(--sp-3); }
.lx-rows { flex: 1 1 auto; min-height: 0; }
.lx-empty { padding: var(--sp-7) var(--sp-5); color: var(--fg-dim); font-size: var(--ft-3); text-align: center; }

/* строка во всю ширину таблицы: таблица короткая и вбок не прокручивается */
.thead.vrow, .trow.vrow { min-width: 0; }
.trow.vrow { min-height: var(--h-lg); cursor: default; }
.th.fixed { cursor: default; }
.th.fixed::before { content: none; }
/* «Дії» — своя закреплённая колонка (владелец 28.10.2026: «визуально давай отделим её от других колонок… прилипание
   всей колонки, а не только данных… фиксированный размер колонки»). Последняя полоса сетки, свободное место
   забирает гибкая колонка (app.js, lxTemplate), вплотную к правому краю таблицы: у строк справа нет отступа.
   Отделена линией слева на всю высоту и чёрной подписью «ДІЇ» (владелец 28.10.2026: серым — «сильно», «просто
   выделить вверху чёрным»); фон — как у строки (белый, при наведении — как строка): он нужен, чтобы при прокрутке
   вбок ничего не просвечивало. Подпись и значки — по центру. */
.thead.vrow, .trow.vrow { padding-right: 0; }
.thead.vrow > .th[data-key="acts"], .trow.vrow > [data-k="acts"] {
  grid-column: -2 / -1; position: sticky; right: 0; z-index: 1;
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  padding: 0; border-left: 1px solid var(--line-2); background: var(--panel);
}
.thead.vrow > .th[data-key="acts"] { color: var(--fg); }
.trow.vrow:hover > [data-k="acts"], .trow.vrow.editing > [data-k="acts"] { background: var(--panel-2); }
.trow.vrow.flash > [data-k="acts"] { animation: vflash 2.4s var(--ease-out); }
.thead.vrow .th.fixed .th-t { padding-left: 0; }
/* последняя колонка данных — без своей черты справа: рядом линия колонки «Дії», двойная черта лишняя;
   и без ручки ширины: граница делит место между соседями, а справа поля нет (владелец 28.10.2026) */
.thead.vrow > .th:nth-last-child(2), .trow.vrow > .tc:nth-last-child(2) { border-right: 0; }
.thead.vrow > .th:nth-last-child(2) .th-grip { display: none; }
.tc.vabbr { font-weight: 600; letter-spacing: .3px; }
/* значения по типу поля: число — по правому краю, так — зелёным, колір — плашкой перед кодом */
.tc.vnum { text-align: right; font-variant-numeric: tabular-nums; }
.vyes { color: var(--ok); font-weight: 600; }
.vsw { display: inline-block; width: var(--sp-5); height: var(--sp-5); margin-right: var(--sp-2); vertical-align: -2px; border-radius: var(--rd-1); border: 1px solid var(--line-2); }
.tc .zero { color: var(--fg-dim-2); }
.trow.vrow.archived .tc:not(.vacts) { color: var(--fg-dim); }
/* только что добавленное — мягко подсвечивается и гаснет само */
.trow.vrow.flash { animation: vflash 2.4s var(--ease-out); }
@keyframes vflash { from { background: var(--accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .trow.vrow.flash, .trow.vrow.flash > [data-k="acts"] { animation: none; } }
.tag.vnew { margin-left: var(--sp-3); color: var(--warn-text); background: var(--warn-bg); }

/* число тканей — ссылка в каталог; ноль — прочерк */
.tc.vcount { text-align: right; font-variant-numeric: tabular-nums; }
.vcount .zero { color: var(--fg-dim-2); }
.vcount-btn { border: 0; background: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--rd-1); font: inherit; font-size: var(--ft-3); font-weight: 600; color: var(--accent-text); cursor: pointer; }
.vcount-btn:hover { background: var(--accent-soft); }
.vcount-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* кнопки строки: видны при наведении; на сенсорном экране — всегда */
.tc.vacts { display: flex; gap: var(--sp-1); justify-content: center; }
/* прячутся значки, а не ячейка: у колонки «Дії» свой фон — она видна всегда, значки — по наведению */
.tc.vacts > * { opacity: 0; transition: opacity var(--mo-fast); }
.trow.vrow:hover .vacts > *, .trow.vrow:focus-within .vacts > *, .tc.vacts.on > *, .trow.archived .vacts > * { opacity: 1; }
@media (hover: none) { .tc.vacts > * { opacity: 1; } }
.vbtn { width: var(--h-sm); height: var(--h-sm); flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--rd-1); background: transparent; color: var(--fg-dim); cursor: pointer; padding: 0; }
.vbtn:hover { background: var(--panel-3); color: var(--fg); }
.vbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* «Повернути» — действие строки, как значки рядом, а не общая кнопка: общая — 44, строка — тоже 44 */
.vlink { height: var(--h-sm); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border: 0; border-radius: var(--rd-1); background: transparent; font: inherit; font-size: var(--ft-2); font-weight: 600; color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.vlink:hover { background: var(--accent-soft); }
.vlink:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* правка на месте */
.trow.vrow.editing { background: var(--panel-2); }
.tc.vedit { overflow: visible; }
.tc.vedit .inp { height: var(--h-sm); }
.tc.vedit .vchk { width: auto; height: auto; padding: 0; accent-color: var(--accent); cursor: pointer; }
.tc.vedit .vcolor { width: var(--h-btn); height: var(--h-sm); padding: 2px; cursor: pointer; }
.tc.vedit .vcolor.unset { opacity: .35; }
.inp.bad { border-color: var(--err); }
.vrow-msg { padding: 0 var(--sp-4) var(--sp-3); background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--fg-dim); font-size: var(--ft-2); }
.vrow-msg.bad { color: var(--err-text); }

/* окно «Новий список» / «Поля списку» — на основе своего окна вопроса */
.askbox.top { align-items: flex-start; padding-top: 8vh; }
.askbox-box.lxbox {
  width: 560px; min-width: 0; max-width: calc(100vw - 2 * var(--sp-5));
  max-height: calc(92vh - var(--sp-5)); overflow: auto; box-sizing: border-box;
}
.lxbox-f { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.lxbox-l { font-size: var(--ft-2); font-weight: 600; color: var(--fg-dim); }
.lxbox-note { font-size: var(--ft-2); color: var(--fg-dim); }
.lxbox-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
/* строка поля: слева замок (системне) или ручка (власне), под полем — его вид и «Обов'язкове» (28.10.2026) */
.lxbox-row {
  display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) 150px var(--h-sm);
  gap: var(--sp-1) var(--sp-2); align-items: center;
}
.lxbox-lead { display: inline-flex; justify-content: center; color: var(--fg-dim-2); }
/* ручка своего поля: тянут мышью и пальцем (`touch-action: none` — палец тянет строку, а не прокручивает окно);
   зона захвата шире значка — до поля названия и на высоту строки, иначе пальцем в 16 точек не попасть */
.lxbox-row:not(.sys) .lxbox-lead { cursor: grab; touch-action: none; position: relative; align-self: stretch; align-items: center; }
.lxbox-row:not(.sys) .lxbox-lead::before { content: ''; position: absolute; inset: -4px calc(-1 * var(--sp-2)); }
.lxbox-row:not(.sys) .lxbox-lead:hover { color: var(--fg); }
.lxbox-row.drag .lxbox-lead { cursor: grabbing; color: var(--accent); }
.lxbox-meta { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--ft-2); color: var(--fg-dim); }
.tag.lxf-sys { color: var(--accent-text); background: var(--accent-soft); }
.tag.lxf-own { color: var(--fg-dim); background: var(--panel-2); }
.lxbox-req { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.lxbox-req input { width: auto; height: auto; padding: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* перетаскивание своих полей: тянутая строка бледнеет, место вставки — линия акцентом */
.lxbox-row.drag { opacity: .45; }
.lxbox-row.drop-above { box-shadow: 0 -2px 0 var(--accent); }
.lxbox-row.drop-below { box-shadow: 0 2px 0 var(--accent); }
/* «Архів полів» — свои поля, убранные из списка: имя, тип, «Повернути» */
.lxbox-arch { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.lxbox-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; min-height: var(--h-sm); font-size: var(--ft-3); color: var(--fg-dim); }
.lxbox-aname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxbox-atype { font-size: var(--ft-2); }
.lxbox .inp:disabled { background: var(--panel-2); color: var(--fg-dim); cursor: default; }
.lxbox-type { min-width: 0; }
.lxbox .inp.ro { cursor: default; }
.btn.lxbox-add { align-self: flex-start; margin-left: calc(-1 * var(--sp-3)); padding: 0 var(--sp-3); color: var(--accent-text); }
.btn.lxbox-add:hover { color: var(--accent-text); background: var(--accent-soft); }
.lxbox-err { margin-top: var(--sp-4); color: var(--err-text); font-size: var(--ft-2); }

@media (max-width: 620px) {
  .lx { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .lx-side { display: none; }
  .lx-chips { display: flex; gap: var(--sp-2); overflow-x: auto; margin-bottom: var(--sp-3); flex: none; scrollbar-width: none; }
  .lx-chips::-webkit-scrollbar { display: none; }
  .lx-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-md); padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--rd-2); background: var(--panel); font: inherit; font-size: var(--ft-3); color: var(--fg); cursor: pointer; }
  .lx-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
  .lx-chip-group { flex: none; align-self: center; display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-md); border: 0; background: transparent; cursor: pointer; font: inherit; padding: 0 var(--sp-1); font-size: var(--ft-1); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--fg-dim); }
  .lx-chip-new { color: var(--accent-text); }
  .lxbox-row { grid-template-columns: var(--sp-5) minmax(0, 1fr) 112px var(--h-sm); }
  .thead.vrow, .trow.vrow { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .thead.vrow .th:not(:last-child), .trow.vrow .tc:not(:last-child) { padding-right: var(--sp-2); }
  .tc.vacts > * { opacity: 1; }
  .thead.vrow, .trow.vrow { padding-right: 0; }   /* «Дії» вплотную к правому краю и на телефоне */
  .vlink span { display: none; }
  .vlink { width: var(--h-sm); padding: 0; justify-content: center; }
  .vcount-btn { padding: var(--sp-1); }
  /* полей больше одного — столбиком (раскладку ставит app.js, `lxStack`): первое сверху,
     остальные под ним приглушённо; у поставщика — абревіатура, под ней справжня назва */
  .trow.vrow.stack { row-gap: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .trow.vrow.stack > .vf { border-right: 0; }
  .trow.vrow.stack > .vsub { color: var(--fg-dim); }
  .trow.vrow.stack.editing > .vsub { margin-top: var(--sp-2); }
  /* шапки у этих полей на телефоне нет — «120» и «Так» без подписи не понять; текст понятен и так */
  .trow.vrow.stack > .vsub:not([data-type="text"])::before { content: attr(data-t) ': '; color: var(--fg-dim-2); }
  .trow.vrow.stack.editing > .vsub:not([data-type="text"])::before { content: attr(data-t); display: block; margin-bottom: var(--sp-1); font-size: var(--ft-1); }
  .trow.vrow.stack > .vnum { text-align: left; }
  /* пальцем колонки не переносят — место под значок переноса отдаём подписи («Тканин» не режется) */
  .thead.vrow .th::before { content: none; }
  .thead.vrow .th .th-t { padding-left: 0; }
}

/* --- налаштування акаунта (28.10.2026; карточка профиля — по образцу владельца 01.11.2026) --------------
   Экран своего акаунта — нажатием на себя внизу меню (`account.js`). Карточка профиля: слева фото в круге, справа
   строки «подпись — значение», поле видно с рамкой; карточка пароля — теми же строками, столбцы совпадают.
   Пробный режим: правки живут в памяти страницы. */
#list.acc { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.acc-card { flex: none; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-7); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.acc-title { font-size: var(--ft-5); font-weight: 700; color: var(--fg); }
.acc-note { margin-top: calc(-1 * var(--sp-3)); color: var(--fg-dim); font-size: var(--ft-2); }
.acc-body { display: flex; align-items: flex-start; gap: var(--sp-8); min-width: 0; }
/* фото — круг размером квадрата `ph-box`; вся поверхность — кнопка выбора файла, значки — те же `.ph-act`, но видны всегда */
.acc-photo { position: relative; flex: none; width: var(--ph-box); height: var(--ph-box); display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-text); cursor: pointer; }
.acc-photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acc-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.acc-letter { font-size: var(--ft-6); font-weight: 700; }
.acc-photo .ph-acts { top: auto; right: auto; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); opacity: 1; }
.acc-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-card > .acc-rows { padding-left: calc(var(--ph-box) + var(--sp-8)); }
.acc-row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; gap: 0 var(--sp-3); min-height: var(--h-md); }
.acc-tall { align-items: start; }
.acc-tall .acc-l { padding-top: var(--sp-3); }
.acc-l { font-size: var(--ft-3); color: var(--fg-dim); }
.acc-row > .inp, .acc-pick, .acc-lockwrap { max-width: var(--fld-xl); }
.acc-val { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.acc-val .linkbtn { flex: none; white-space: nowrap; }
.acc-val .acc-pick, .acc-val .acc-theme { flex: 1 1 auto; min-width: 0; }
.acc-soon { flex: none; font-size: var(--ft-1); color: var(--fg-dim-2); }
.acc-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: var(--ft-3); font-variant-numeric: tabular-nums; }
.acc-copy { flex: none; display: flex; padding: var(--sp-1); border: none; border-radius: var(--rd-1); background: none; color: var(--fg-dim); cursor: pointer; }
.acc-copy:hover { background: var(--panel-2); color: var(--fg); }
.acc-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acc-lockwrap { position: relative; flex: 1 1 auto; min-width: 0; }
.acc-lockwrap .inp { padding-right: var(--sp-8); }
.acc-lock { position: absolute; top: 50%; right: var(--sp-3); display: flex; transform: translateY(-50%); color: var(--fg-dim-2); pointer-events: none; }
.acc-lock[hidden] { display: none; }
/* тема — Segmented со значками; три равные доли на ширину поля, края совпадают с полями выше */
.acc-theme { max-width: var(--fld-xl); }
.acc-theme .seg-btn { flex: 1 1 0; min-width: 0; }
.acc-foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); padding-left: calc(var(--label-w) + var(--sp-3)); }
.acc-err { color: var(--err-text); font-size: var(--ft-2); }
/* узкое окно: фото над полями, иначе полям остаётся меньше сотни точек и подписи наезжают друг на друга */
@media (max-width: 1100px) {
  .acc-body { flex-direction: column; gap: var(--sp-5); }
  .acc-card > .acc-rows { padding-left: 0; }
}
@media (max-width: 620px) {
  .acc-card { padding: var(--sp-5); }
  .acc-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .acc-row > .inp, .acc-pick, .acc-lockwrap { max-width: none; }
  .acc-foot { padding-left: 0; }
}

/* --- воронки угод (блок «Воронка продаж», 30.10.2026; логика Kommo — разбор блока, `research/2026-10-30-kommo-voronki.md`) ---
   🧪 пробно: канбан, список, фильтр, картка угоди с лентой, «Налаштувати Воронку», «Вигляд Картки», «Автоматизація».
   Цвет этапа — данные (21 цвет палитры Kommo), он приходит в `style` из кода; всё остальное — шкала. */
.pl-pipe { max-width: var(--fld-l); gap: var(--sp-2); }
.pl-pipe-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pl-pipe svg { transform: rotate(90deg); flex: none; color: var(--fg-dim); }
.pl-q { max-width: var(--fld-xl); }
.pl-total { font-size: var(--ft-3); color: var(--fg-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-autobtn.on { border-color: var(--accent); color: var(--accent-text); }
body > .sug.pl-menu { min-width: var(--fld-m); max-height: 70vh; padding: var(--sp-1) 0; }   /* все пункты сразу — у Pick 260 и прокрутка, «За Бюджетом» уходил вниз */
.pl-menu-h { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--ft-1); font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.pl-dim { color: var(--fg-dim); }

/* канбан: колонки этапов, прокрутка в обе стороны, шапка колонки липкая */
#list.pl-board { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; gap: var(--sp-4); padding-bottom: var(--sp-5); scrollbar-width: thin; }
.pl-col { flex: 1 1 0; min-width: var(--pl-col); max-width: calc(var(--pl-col) * 1.5); display: flex; flex-direction: column; min-height: 100%; border-radius: var(--rd-3); transition: background var(--mo-fast); }
.pl-col.over { background: var(--accent-soft); }
.pl-colh { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 2px solid var(--line-2); box-shadow: 0 1px 0 var(--line-2); text-align: center; }   /* черта под цветом — светлый этап виден на фоне (В16) */
.pl-col.over .pl-colh { background: var(--accent-soft); }
.pl-colt { font-size: var(--ft-1); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-coln { margin-top: var(--sp-1); font-size: var(--ft-2); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.pl-cards { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); flex: 1 1 auto; }
.pl-quick-b {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: var(--h-btn); box-sizing: border-box;
  border: 1px dashed var(--line-2); border-radius: var(--rd-3); background: none; font: inherit; font-size: var(--ft-3); color: var(--fg-dim); cursor: pointer;
}
.pl-quick-b:hover { border-color: var(--accent); color: var(--accent-text); }
.pl-quick.on { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px dashed var(--accent); border-radius: var(--rd-3); background: var(--panel); }
.pl-quick-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
/* плитка угоди */
.pl-tile {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3);
  box-shadow: var(--shadow-card); cursor: pointer; user-select: none; touch-action: none; transition: border-color var(--mo-fast);
}
.pl-tile:hover { border-color: var(--line-2); }
.pl-tile.drag { opacity: .45; }
.pl-ghost { position: fixed; z-index: 80; pointer-events: none; box-shadow: var(--shadow-pop); border-color: var(--accent); }
body.pl-dragging, body.pl-dragging * { cursor: grabbing !important; }
.pl-ava { flex: none; width: var(--sp-8); height: var(--sp-8); border-radius: 50%; background: var(--panel-3); color: var(--fg-dim); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ft-2); font-weight: 700; }
.pl-tile-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.pl-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pl-tl { font-size: var(--ft-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tr { flex: none; font-size: var(--ft-1); color: var(--fg-dim); white-space: nowrap; }
.pl-tname { font-size: var(--ft-3); font-weight: 600; color: var(--accent-text); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-tsub { font-size: var(--ft-2); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-tfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--sp-6); }
.pl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pl-chip { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--rd-1); background: var(--panel-2); color: var(--fg-dim); font-size: var(--ft-1); font-weight: 500; white-space: nowrap; }
/* точка задачи: немає задач — `warn`, прострочена — `err`, є — `ok`; подпись — при наведении на плитку */
.pl-task-ind { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }
.pl-task-t { font-size: var(--ft-1); opacity: 0; transition: opacity var(--mo-fast); }
.pl-tile:hover .pl-task-t, .pl-look .pl-task-t, .pl-task-ind.late .pl-task-t { opacity: 1; }   /* просроченная — всегда словом (В15) */
.pl-task-ind.none { color: var(--warn-text); }
.pl-task-ind.late { color: var(--err-text); }
.pl-task-ind.ok { color: var(--ok); }
.pl-dot { flex: none; width: var(--pl-dot); height: var(--pl-dot); border-radius: 50%; background: var(--fg-dim-2); }
.pl-dot.none { background: var(--warn-text); }
.pl-dot.late { background: var(--err); }
.pl-dot.ok { background: var(--ok); }
.pl-acc { display: flex; gap: var(--sp-4); margin-top: var(--sp-1); }
/* нижняя полоса при перетаскивании: «Видалити · Не реалізовано · Успішно» */
.pl-dropbar { position: fixed; bottom: 0; z-index: 75; display: flex; height: var(--h-lg); background: var(--panel); box-shadow: var(--shadow-pop); }
.pl-zone { flex: 1 1 0; display: flex; align-items: center; justify-content: center; border-top: 2px solid var(--line-2); font-size: var(--ft-2); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--fg-dim); transition: background var(--mo-fast); }
.pl-zone.del { flex: 0 0 var(--fld-s); border-top-color: var(--err); color: var(--err-text); }
.pl-zone.won { border-top-color: var(--ok); color: var(--ok); }
.pl-zone.over { background: var(--panel-2); color: var(--fg); }
.pl-zone.del.over { background: var(--err-bg); color: var(--err-text); }
.pl-zone.won.over { background: var(--ok-bg); color: var(--ok); }

/* список угод: таблица (DataTable), галочки, полоса массовых действий */
#list.pl-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
#list.pl-list .pl-rows { flex: 1 1 auto; min-height: 0; }
/* галочка и «Назва Угоди» стоят на месте при прокрутке вбок — 13 колонок шире экрана (критик, В12) */
.pl-rows .pl-stick { position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center; background: var(--panel); }
.pl-rows .pl-stick + .pl-stick { left: calc(var(--sp-6) + var(--sp-4)); box-shadow: calc(var(--sp-4) * -1) 0 0 var(--panel); }
.pl-rows .trow:hover > .pl-stick { background: var(--panel-2); }
.pl-rows .trow:hover > .pl-stick + .pl-stick { box-shadow: calc(var(--sp-4) * -1) 0 0 var(--panel-2); }
.pl-rows .trow.on > .pl-stick { background: var(--accent-soft); }
.pl-rows .trow.on > .pl-stick + .pl-stick { box-shadow: calc(var(--sp-4) * -1) 0 0 var(--accent-soft); }
.pl-rows .thead > .pl-stick { z-index: 3; }
.pl-rows .pl-chk.pl-stick { height: auto; justify-content: center; }   /* галочка — на всю высоту строки: фон закрывает прокрученное */
.pl-chk { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-6); height: var(--sp-6); padding: 0; border: 0; background: none; cursor: pointer; }
.pl-chk .sug-box { margin: 0; }
.trow.on { background: var(--accent-soft); }
.th.pl-sortable { cursor: pointer; }
.th.pl-sortable:hover, .th.pl-sortable.on { color: var(--fg); }
.pl-tcn { display: flex; align-items: center; gap: var(--sp-2); }
.pl-tcn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--accent-text); }
/* полоса массовых действий — плавает над списком снизу: появляясь, не сдвигает строки под мышью (критик, В13) */
.pl-mass {
  position: fixed; z-index: 65; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); height: calc(var(--h-btn) + var(--sp-4));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3); box-shadow: var(--shadow-pop); white-space: nowrap;
}
.pl-mass-n { margin-right: auto; padding-left: var(--sp-2); font-size: var(--ft-3); font-weight: 600; color: var(--accent-text); }
.pl-stchips { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.pl-stchip { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--rd-1); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--ft-1); font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-pchip { display: inline-block; padding: 1px var(--sp-2); border: 1px solid var(--line-2); border-radius: var(--rd-1); font-size: var(--ft-1); color: var(--fg-dim); white-space: nowrap; }

/* «Пошук і фільтр»: слева наборы, посередине свойства, справа теги */
.pl-fp {
  position: fixed; z-index: 60; display: grid; grid-template-columns: var(--fld-m) minmax(0, var(--fld-area)) var(--fld-m);
  grid-template-rows: minmax(0, 1fr);   /* колонки — не выше панели: прокрутка внутри каждой (В1) */
  max-height: 72vh; background: var(--panel); border-radius: var(--rd-3); box-shadow: var(--shadow-pop); overflow: hidden;
}
.pl-fp-pre { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--panel-2); overflow-y: auto; }
.pl-pre { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-md); padding: 0 var(--sp-3); border: 0; border-radius: var(--rd-2); background: none; font: inherit; font-size: var(--ft-3); text-align: left; color: var(--fg); cursor: pointer; }
.pl-pre:hover { background: var(--panel-3); }
.pl-pre.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pl-fp-body { padding: var(--sp-5) var(--sp-5) 0; overflow-y: auto; }
.pl-fp-body .cs-ed-row { grid-template-columns: var(--fld-s) minmax(0, 1fr); }
.pl-fp-tags { padding: var(--sp-4); border-left: 1px solid var(--line); overflow-y: auto; }
.pl-fp-tags .pl-menu-h { padding: 0 0 var(--sp-3); }
.pl-tagf { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-sm); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--rd-1); background: var(--panel); font: inherit; font-size: var(--ft-2); color: var(--fg-dim); cursor: pointer; }
.pl-tagf.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.pl-tagf-n { color: var(--fg-dim-2); font-variant-numeric: tabular-nums; }
/* «Скинути Все» — прижат к низу панели, виден при любой длине списка полей (критик, В1) */
.pl-fp-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: var(--sp-3) 0 var(--sp-5); background: var(--panel); }
.pl-range { display: flex; align-items: center; gap: var(--sp-2); }
.pl-range .inp { width: var(--fld-s); }
.pl-stl { display: flex; flex-direction: column; gap: 2px; max-height: var(--fld-l); overflow-y: auto; }
.pl-stl-p { padding: var(--sp-2) 0 var(--sp-1); font-size: var(--ft-1); font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.pl-stl-i { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-sm); padding: 0 var(--sp-2); border: 0; border-radius: var(--rd-1); background: none; font: inherit; font-size: var(--ft-3); text-align: left; cursor: pointer; }
.pl-stl-i:hover { background: var(--panel-2); }
.pl-stl-i .sug-box { margin: 0; }
.pl-sq { flex: none; width: var(--sp-4); height: var(--sp-4); border-radius: var(--rd-1); border: 1px solid var(--line); }

/* картка угоди: ящик, слева поля, справа лента */
.pl-cleft .drawer-top { flex: none; padding-bottom: var(--sp-5); }
.pl-cleft .drawer-head { flex: 1 1 auto; }
.pl-title { cursor: text; }
.pl-title:hover { color: var(--accent-text); }
.pl-title-in { margin-top: var(--sp-1); height: var(--h-md); font-size: var(--ft-5); font-weight: 700; max-width: var(--fld-xl); }
.pl-stagebox { margin-top: var(--sp-4); max-width: var(--fld-xl); }
.pl-stage { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pl-stage svg { transform: rotate(90deg); color: var(--fg-dim); flex: none; }
.pl-stage-txt { display: flex; flex-direction: column; min-width: 0; }
.pl-stage-p { font-size: var(--ft-1); color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.pl-stage-s { font-size: var(--ft-4); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-stage-age { font-weight: 400; color: var(--fg-dim); }
.pl-stage:hover .pl-stage-s { color: var(--accent-text); }
.pl-prog { display: flex; gap: 2px; height: var(--sp-1); margin-top: var(--sp-2); }
.pl-prog i { flex: 1 1 0; border-radius: var(--rd-4); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
/* подсказка этапа — свёрнутой строкой, щелчок раскрывает (критик, В3: раскрытая занимала 47 из шапки) */
.pl-hint { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--rd-2); background: var(--panel-2); font-size: var(--ft-2); color: var(--fg-dim); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pl-hint.open { white-space: normal; }
.pl-meta { flex: none; font-size: var(--ft-2); color: var(--fg-dim); margin-right: var(--sp-2); }
.pl-smenu { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; min-width: var(--fld-l); max-height: 70vh; overflow-y: auto; padding: var(--sp-2); background: var(--panel); border-radius: var(--rd-3); box-shadow: var(--shadow-pop); }
.pl-smenu-p { min-height: var(--h-md); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--rd-2); background: var(--panel); font: inherit; font-size: var(--ft-3); color: var(--fg-dim); text-align: left; cursor: pointer; }
.pl-smenu-p:hover { color: var(--fg); border-color: var(--line-2); }
.pl-smenu-p.on { color: var(--fg); font-weight: 700; border-color: transparent; }
.pl-smenu-s { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-sm); padding: 0 var(--sp-3); border: 0; border-radius: var(--rd-1); font: inherit; font-size: var(--ft-3); color: var(--fg); text-align: left; cursor: pointer; }
.pl-smenu-s:hover { box-shadow: inset 0 0 0 2px var(--line-2); }
.pl-smenu-s.on { font-weight: 700; }
/* картка угоди — страница от меню (Drawer `.drawer-page`): слева картка — шапка, поля, подвал; справа стрічка от самого
   верха; между ними граница `.pl-split` тянется мышью, ширина картки — доля экрана `--pl-cw` (владелец 30.10.2026) */
.pl-cbody { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(var(--pl-pane), var(--pl-cw, 44%)) var(--sp-3) minmax(var(--pl-pane), 1fr); }
.pl-cleft { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
.pl-split { position: relative; cursor: col-resize; touch-action: none; background: var(--panel); }
.pl-split::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); transition: background var(--mo-fast), box-shadow var(--mo-fast); }
.pl-split:hover::after, .pl-split.on::after { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.pl-resizing, body.pl-resizing * { cursor: col-resize !important; user-select: none; }
.pl-cside { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--edge) var(--sp-8); }
.pl-cside .tabs { --tabs-top: var(--sp-5); }
.pl-cside .blk > .f { grid-template-columns: var(--fld-s) minmax(0, 1fr); }
/* настройка в узкой половине ящика: подпись уже, имя поля шире — иначе «Відповідальний» обрезался */
.pl-cside .cs-ed-row { grid-template-columns: var(--fld-pick) minmax(0, 1fr); }
.pl-cside .cs-f { grid-template-columns: var(--sp-5) minmax(0, 3fr) minmax(0, 2fr) auto; }
.pl-msg { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--rd-2); background: var(--err-bg); color: var(--err-text); font-size: var(--ft-3); }
.blk > .f.pl-bad > .f-label { color: var(--err-text); font-weight: 600; }
.blk > .f.pl-bad .inp { border-color: var(--err); background: var(--panel); }
.pl-ent { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.pl-ent-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pl-ent-n.inp { flex: 1 1 auto; height: var(--h-md); padding: 0 var(--sp-2); border-color: transparent; background: transparent; font-size: var(--ft-4); font-weight: 700; }
.pl-ent-n.inp:hover { border-color: var(--line-2); }
.pl-ent-n.inp:focus { border-color: var(--accent); background: var(--panel); }
.pl-ent .cs-add { margin-top: 0; }
.pl-stat-big { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.pl-stat-n { font-size: var(--ft-6); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pl-stat-l { font-size: var(--ft-3); color: var(--fg-dim); }
.pl-stat-v { font-size: var(--ft-3); font-variant-numeric: tabular-nums; }
.pl-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; min-height: var(--h-sm); font-size: var(--ft-3); }
.pl-cdeal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); width: 100%; margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--rd-2); background: var(--panel); font: inherit; text-align: left; cursor: pointer; }
.pl-cdeal:hover { border-color: var(--line-2); }
.pl-cdeal-t { display: flex; justify-content: space-between; gap: var(--sp-3); width: 100%; font-size: var(--ft-3); }
.pl-sysf { cursor: default; }
/* лента */
.pl-feed { min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.pl-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.pl-empty { padding: var(--sp-5) 0; text-align: center; }
.pl-day { align-self: center; margin: var(--sp-2) 0; padding: 2px var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--rd-4); font-size: var(--ft-1); color: var(--fg-dim); }
.pl-ev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--ft-2); color: var(--fg-dim); line-height: 1.45; }
.pl-ev-w { color: var(--fg-dim-2); }
.pl-evlink { margin-left: auto; max-width: var(--fld-s); font-size: var(--ft-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* одной строкой (В17) */
.pl-note, .pl-task { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3); }
.pl-note > svg, .pl-task > svg { flex: none; color: var(--fg-dim-2); margin-top: 2px; }
.pl-note-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.pl-note-h { font-size: var(--ft-1); color: var(--fg-dim); }
.pl-note-t { font-size: var(--ft-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-task-tt { font-size: var(--ft-3); }
.pl-task.done > svg { color: var(--ok); }
.pl-task.done .pl-task-tt { color: var(--fg-dim); text-decoration: line-through; }
.pl-task.open { border-color: var(--ok); cursor: pointer; }
.pl-task.open > svg { color: var(--ok); }
.pl-task.late { border-color: var(--err); }
.pl-task.late > svg, .pl-task.late .pl-note-h { color: var(--err-text); }
.pl-task-do { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.pl-task-do .inp { flex: 1 1 auto; height: var(--h-btn); }   /* одна полоса — одна высота: поле рядом с кнопкой */
.pl-task-next { margin-top: var(--sp-3); }
.pl-task-nrow { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); white-space: nowrap; }
.pl-task-nrow .ref-wrap { flex: 0 1 var(--fld-s); min-width: 0; }
.pl-pins { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-3); max-height: 40%; overflow-y: auto; }
.pl-notask { align-self: flex-start; padding: var(--sp-1) var(--sp-3); border-radius: var(--rd-1); background: var(--warn-bg); color: var(--warn-text); font-size: var(--ft-2); }
.pl-in { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--panel); border-top: 1px solid var(--line); }
.pl-in-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pl-in-h .ref-wrap .pick { height: var(--h-sm); }
.pl-in-mode { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--ft-3); }
.pl-in-mode svg { transform: rotate(90deg); flex: none; }   /* стрелка вниз — как у выбора воронки и этапа */
.pl-in-t.inp.area { min-height: var(--h-btn); }
.pl-in-row { display: flex; gap: var(--sp-2); }

/* окна: «Налаштувати Воронку», «Вигляд Картки», тригер, массовые действия */
/* окно воронки, робота, массовых действий: прокручивается середина — «Зберегти» всегда виден (критик, В27) */
.askbox-box.pl-box { width: min(var(--fld-area), 92vw); max-width: none; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.askbox-box.pl-box.wide { width: min(calc(var(--fld-area) + var(--edge) * 2), 92vw); }
.pl-box-b { margin-top: var(--sp-5); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pl-box .cs-ed-row { grid-template-columns: var(--fld-s) minmax(0, 1fr); }
.pl-box .askbox-row { align-items: center; }
.pl-pipedel { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.pl-sec-h { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--ft-2); font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.pl-sts { display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-st { display: grid; grid-template-columns: var(--sp-5) var(--sp-6) minmax(0, 1fr) var(--h-sm); gap: var(--sp-2); align-items: center; }
.pl-st.fixed { margin-bottom: var(--sp-2); }
.pl-st.drag { opacity: .45; }
.pl-st.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.pl-st.drop-after { box-shadow: 0 2px 0 var(--accent); }
.pl-sw { width: var(--sp-6); height: var(--sp-6); padding: 0; border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; }
span.pl-sw { cursor: default; }
.pl-sw.on { box-shadow: var(--ring); border-color: var(--accent); }
.pl-pal { position: fixed; z-index: 96; display: grid; grid-template-columns: repeat(7, var(--sp-6)); gap: var(--sp-2); padding: var(--sp-3); background: var(--panel); border-radius: var(--rd-3); box-shadow: var(--shadow-pop); }
.pl-look-sw { display: flex; flex-direction: column; gap: var(--sp-1); }
.pl-tile.pl-look { cursor: default; max-width: var(--fld-xl); margin-top: var(--sp-3); }
.pl-look-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pl-look-row .ref-wrap { min-width: 0; }
.pl-look-row .pick { height: var(--h-sm); max-width: var(--fld-m); }
.pl-conds { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding-top: var(--sp-2); }
.pl-cond { display: grid; grid-template-columns: var(--fld-pick) minmax(0, 1fr) var(--h-sm); gap: var(--sp-2); align-items: center; width: 100%; }
.pl-cond-l { font-size: var(--ft-2); color: var(--fg-dim); }
.pl-cond-all { padding-bottom: var(--sp-1); }
.pl-stpick { display: inline-flex; align-items: center; gap: var(--sp-2); width: auto; max-width: 100%; }

/* «Автоматизація»: этапы колонками, в клетке роботы этапа */
#list.pl-auto { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.pl-auto-note { flex: none; font-size: var(--ft-3); color: var(--fg-dim); }
.pl-auto-note b { color: var(--fg); }
.pl-agrid { display: flex; align-items: flex-start; gap: var(--sp-4); }
.pl-acol { flex: 1 1 0; min-width: var(--pl-col); max-width: calc(var(--pl-col) * 1.5); display: flex; flex-direction: column; }
.pl-ahint { margin-top: var(--sp-1); font-size: var(--ft-1); }
.pl-rob { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--rd-2); background: var(--panel); font: inherit; text-align: left; cursor: pointer; }
.pl-rob:hover { border-color: var(--line-2); border-left-color: var(--accent); }
.pl-rob.off { opacity: .45; border-left-color: var(--line-2); }
.pl-rob-w { font-size: var(--ft-1); color: var(--fg-dim); }
.pl-rob-a { font-size: var(--ft-3); font-weight: 600; }
/* источник угод в «Автоматизації» (Kommo: «Источники сделок»): плитка как у робота, под ней «Імітувати Заявку» */
.pl-src { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.pl-src .tag { margin-top: var(--sp-1); }
.pl-src-im { padding-left: var(--sp-4); font-size: var(--ft-2); }
/* розмова в стрічці угоди (Kommo: беседа — рамкой, сообщения стопкой): шапка канала, пузыри, внизу действия */
.pl-chat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--rd-3); }
.pl-chat-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--ft-2); color: var(--fg-dim); }
.pl-chat-h > svg { flex: none; color: var(--fg-dim-2); }
.pl-chat-via { min-width: 0; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bub { max-width: 80%; padding: var(--sp-2) var(--sp-3); border-radius: var(--rd-3); background: var(--panel-2); }
.pl-bub.in { align-self: flex-start; }
.pl-bub.out { align-self: flex-end; background: var(--accent-soft); }
.pl-bub.team { align-self: flex-end; background: var(--panel-3); }   /* внутрішній — серым, клиенту не уходит */
.pl-bub-t { font-size: var(--ft-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-bub-m { margin-top: var(--sp-1); font-size: var(--ft-1); color: var(--fg-dim); }
.pl-bub-st { color: var(--warn-text); }
.pl-chat-f { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--ft-2); }
.pl-unread { display: inline-flex; align-items: center; gap: 2px; margin: 0 var(--sp-1); font-size: var(--ft-1); font-weight: 700; color: var(--accent-text); }
.pl-tpl { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.pl-tpl-h { display: flex; align-items: center; gap: var(--sp-2); }
/* раздел «Чати»: слева розмови, справа угода розмови со стрічкою */
/* три колонки одной панели (Kommo «Чаты»): розмови | картка угоди | стрічка; обе границы тянутся, ширины помнятся */
#list.pl-chs {
  flex: 1 1 auto; min-height: 0; display: grid; background: var(--panel); border-radius: var(--rd-3); overflow: hidden;
  grid-template-columns: minmax(var(--pl-col), var(--pl-lw, 24%)) var(--sp-3) minmax(var(--pl-pane), var(--pl-cw, 36%)) var(--sp-3) minmax(var(--pl-pane), 1fr);
}
.pl-chl { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.pl-chempty { grid-column: 3 / -1; align-self: center; justify-self: center; }
.pl-chq { flex: none; width: 100%; }
.pl-chsets { flex: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pl-chrows { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.pl-chr { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-3); border: 0; border-radius: var(--rd-2); background: none; font: inherit; text-align: left; color: var(--fg); cursor: pointer; }
.pl-chr:hover { background: var(--panel-2); }
.pl-chr.on { background: var(--accent-soft); }
.pl-chr-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-chr-top, .pl-chr-bot { display: flex; align-items: center; gap: var(--sp-2); }
.pl-chr-n { flex: 1 1 auto; min-width: 0; font-size: var(--ft-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-chr-w { flex: none; font-size: var(--ft-1); color: var(--fg-dim-2); }
.pl-chr-via { font-size: var(--ft-1); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-chr-p { flex: 1 1 auto; min-width: 0; font-size: var(--ft-2); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-chr.new .pl-chr-p { color: var(--fg); font-weight: 600; }
.pl-chr .chip-n { position: static; transform: none; margin-left: 0; }

.pl-srccol .pl-coln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }