/* =====================================================================
   Salistica Design System
   ===================================================================== 

   Источник правды для нового UI. Уходим от theme/styles/core.css на этот
   файл по мере касания экранов.

   - Токены из docs/design/design-rules.md
   - Компоненты из docs/design/ui-kit.html
   - Специализированные блоки из standalone-HTML (Подписка и биллинг и т.п.)

   ВАЖНО: app-shell классы (.app/.topbar/.sidebar/.nav__*) живут только в
   референсных standalone-HTML. В нашем приложении используем СВОЙ layout
   (page_head.php / templates/layout.php) — эти классы здесь не нужны.
   ===================================================================== */

/* =====================================================================
   ТОКЕНЫ (полная копия из UI Kit / Settings / ClientFlow)
   ===================================================================== */
:root {
  --bg-app:#f6f7f9; --bg-card:#fff; --border:#e9ecf1; --border-strong:#e2e8f0;
  --divider:#f1f3f7; --hover:#f8fafc;
  --text:#0f172a; --text-muted:#64748b; --text-light:#94a3b8; --text-faint:#cbd5e1;
  --accent:#ea580c; --accent-hover:#c2410c; --accent-soft:#fff5ee; --accent-line:#fed7aa;
  --info:#2563eb; --info-soft:#eff6ff; --info-line:#dbeafe;
  --success:#16a34a; --success-soft:#ecfdf5; --success-line:#bbf7d0;
  --warning:#d97706; --warning-soft:#fffbeb; --warning-line:#fde68a;
  --danger:#dc2626; --danger-soft:#fef2f2; --danger-line:#fecaca;
  --tip:#7c3aed; --tip-soft:#faf5ff; --tip-line:#e9d5ff;
  --series-1:#ea580c; --series-2:#0f172a; --series-3:#2563eb; --series-4:#16a34a;
  --series-5:#9333ea; --series-6:#db2777; --series-7:#0891b2; --series-8:#ca8a04;
  --radius-lg:16px; --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --side:232px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
  --shadow-lg:0 18px 40px rgba(15,23,42,.18);
  /* фокус — для тостов и confirm-диалогов системы уведомлений */
  --focus-ring:0 0 0 3px rgba(15,23,42,.08);
  --focus-ring-accent:0 0 0 3px rgba(234,88,12,.18);
  --focus-ring-danger:0 0 0 3px rgba(220,38,38,.22);
  /* motion */
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:.12s; --dur-base:.18s;
}
/* =====================================================================
   ВСЕ НИЖЕ — ВНУТРИ :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) (CSS nesting).
   ===================================================================== */
/* Стили дизайн-системы НЕ глобальные. Все правила scoped через корневой
   :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) класс (CSS nesting, поддерживается Chrome 112+ / Safari 16.5+ /
   Firefox 117+). Это безопасно даже если в проекте уже есть классы
   с теми же именами (.btn, .field, .badge, .banner) — наши стили
   применяются ТОЛЬКО к разметке с обёрткой <div class="billing-page">.
   ===================================================================== */
/* Базовые элементы внутри scope (по UI Kit) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) *{box-sizing:border-box}

/* Сбрасываем uppercase/letter-spacing от core.css (.btn, .badge и т.п.).
   В дизайне Salistica капс не используется — если где-то нужен, добавляем
   точечно с правилом ниже. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer),
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) *{ text-transform: none; letter-spacing: normal; }

/* =====================================================================
   КОМПОНЕНТЫ ИЗ UI KIT
   ===================================================================== */

/* Dashboard: приглашение подключить первый филиал — UI Kit §3. */
#setupState .page-state {
  max-width: 560px; margin: 0 auto; padding: 48px 24px;
  display: grid; place-items: center; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--text); font-family: var(--font);
}
#setupState .page-state__art {
  width: 88px; height: 88px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: var(--radius-lg);
  background: var(--accent-soft); color: var(--accent);
}
#setupState .page-state__title {
  margin: 0 0 8px; font: 600 22px/1.3 var(--font);
  color: var(--text); text-transform: none; letter-spacing: normal;
}
#setupState .page-state__desc {
  max-width: 460px; margin: 0 0 24px;
  font: 400 14px/1.6 var(--font); color: var(--text-muted);
}
#setupState .page-state__actions {
  display: inline-flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
#setupState .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg-card);
  font: 600 14px/1.5 var(--font); text-decoration: none;
  text-transform: none; letter-spacing: normal; box-shadow: none;
  transition: background .12s, border-color .12s;
}
#setupState .btn--primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
#setupState .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Buttons */
/* Reports: общий баннер подключения филиала — UI Kit §16. */
.reports-page .banner[data-no-branch] {
  position: relative; z-index: 10; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border: 1px solid var(--accent-line);
  border-radius: var(--radius); background: var(--accent-soft); color: var(--text);
}
.reports-page .banner[data-no-branch="catalog"] { width: calc(100% - 64px); max-width: 1320px; margin: 24px 32px 16px; }
.reports-page .banner[data-no-branch="preview"] { width: 100%; margin-bottom: 16px; }
.reports-page [data-no-branch] .banner__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--accent); background: var(--bg-card);
}
.reports-page [data-no-branch] .banner__body { flex: 1; min-width: 0; }
.reports-page [data-no-branch] .banner__title { margin: 0; font: 600 14px/1.5 var(--font); color: var(--text); }
.reports-page [data-no-branch] .banner__desc { margin: 4px 0 0; font: 400 13px/1.5 var(--font); color: var(--text-muted); }
.reports-page [data-no-branch] .banner__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.reports-page [data-no-branch] .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text); font: 600 13px/1.5 var(--font);
  text-transform: none; letter-spacing: normal; text-decoration: none; box-shadow: none;
}
.reports-page [data-no-branch] .btn:hover { background: var(--hover); }
.reports-page [data-no-branch] .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.reports-page [data-no-branch] .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.reports-page [data-no-branch] .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) {
  .reports-page .banner[data-no-branch] { flex-wrap: wrap; align-items: flex-start; }
  .reports-page [data-no-branch] .banner__actions { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .reports-page .banner[data-no-branch="catalog"] { width: calc(100% - 32px); margin: 16px; }
  .reports-page [data-no-branch] .banner__actions .btn { flex: 1 1 auto; }
}

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding: 0 14px;
  border-radius: 8px; border:1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text);
  font:600 13px var(--font); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn:hover{ background: var(--hover); border-color: var(--text-faint); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--primary{ background: var(--accent); color:#fff; border-color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--primary:hover{ background: #c2410c; border-color: #c2410c; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--ghost{ background: transparent; border-color: transparent; color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--ghost:hover{ background: var(--hover); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--danger-ghost{ background: transparent; border-color: transparent; color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--danger-ghost:hover{ background: var(--danger-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--sm{ height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--lg{ height: 44px; padding: 0 20px; font-size: 14.5px; border-radius: 9px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--icon{ width: 36px; padding: 0; justify-content: center; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--icon.btn--sm{ width: 30px; }

/* Badges */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge{
  display:inline-flex; align-items:center; gap:5px;
  height: 22px; padding: 0 8px;
  border:1px solid var(--border); background: var(--bg-app);
  color: var(--text-muted); border-radius:999px;
  font:600 11.5px var(--font); white-space: nowrap; font-feature-settings: 'tnum' 1;
  text-transform: none; letter-spacing: 0;
}
/* `display:inline-flex` перебивает атрибут hidden, и скрытая метка остаётся
   на экране пустой пилюлей. Ловушка известная — в этом продукте она уже
   ловилась на модалках и на плашке участия в воронках. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge[hidden]{ display:none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge__dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--success{ background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--info{ background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--warning{ background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--danger{ background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--accent{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--tip{ background: var(--tip-soft); color: var(--tip); border-color: var(--tip-line); }
/* Приглушённая метка: то, что объясняет тишину, но не является ни успехом,
   ни ошибкой. Использовалась в разметке воронок до того, как появилась. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .badge--muted{ background: var(--bg-app); color: var(--text-muted); border-color: var(--border); }

/* Card */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .card{
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .card__title{
  font:600 11.5px var(--font); color: var(--text-muted);

  margin: 0 0 14px;
}

/* Definition list */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .dlist{
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; align-items: baseline;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .dlist dt{
  font: 500 12.5px var(--font); color: var(--text-light);
  padding: 8px 0; border-top: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .dlist dd{
  font: 500 13px var(--font); color: var(--text);
  margin: 0; padding: 8px 0;
  border-top: 1px solid var(--divider);
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .dlist > dt:first-of-type,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .dlist > dd:first-of-type{ border-top: 0; }

/* Field */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .field{
  width: 100%; height: 38px; padding: 0 12px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); color: var(--text);
  font: 500 13.5px var(--font);
  transition: border-color .12s, box-shadow .12s;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .field::placeholder{ color: var(--text-light); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .field:focus{ outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(15,23,42,.08); }

/* Select — перенос из ui-kit §7. Без него нативный список рисуется системной
   стрелкой и системным шрифтом и выбивается из полей ввода рядом. Стрелка
   идёт фоном: у select нет ::after, а mask перекрыл бы белую подложку.
   Цвет в data-URI зашит числом вынужденно — var() внутри URI не работает;
   #64748b это --text-muted, менять их надо парой. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) select.field{
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Toggle */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .toggle{
  display:inline-flex; align-items:center;
  width: 36px; height: 20px;
  background: var(--text-faint); border-radius: 99px;
  cursor: pointer; transition: background .14s;
  position: relative; flex:0 0 auto; border: 0; padding: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .toggle__dot{
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform .18s cubic-bezier(.4,.2,.2,1);
  box-shadow: 0 1px 2px rgba(15,23,42,.16);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .toggle.is-on{ background: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .toggle.is-on .toggle__dot{ transform: translateX(16px); }

/* Checkbox */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-row{ display:inline-flex; align-items:center; gap: 10px; cursor: pointer; font:500 13.5px var(--font); user-select: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-row input{ position: absolute; opacity: 0; pointer-events: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-box{
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  background: #fff; display: grid; place-items: center;
  flex: 0 0 auto;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-row input:checked ~ .checkbox-box{ background: var(--text); border-color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-box svg{ width: 11px; height: 11px; color: #fff; opacity: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .checkbox-row input:checked ~ .checkbox-box svg{ opacity: 1; }

/* Banner — заметная плашка состояния подписки (danger / accent).
   Источник: docs-макет «Плашки - все статусы.html». Один компонент с двумя
   модификаторами: --danger (приостановка/закрытие доступа), --accent (позитивный
   активный пробный период). Контейнер .banner в разметке используется только на
   странице биллинга. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner{
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 20px 22px 20px 24px;
  border: 1px solid; border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden;
  margin-bottom: 22px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__icon{
  width: 48px; height: 48px; border-radius: 50%;
  color: #fff; display: grid; place-items: center; flex: 0 0 auto;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__body{ flex: 1; min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__title{
  font: 700 17px var(--font); letter-spacing: -.01em; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__desc{
  font: 400 13.5px var(--font); color: var(--text-muted); line-height: 1.5;
  margin: 5px 0 0; max-width: 64ch;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__desc em{
  font-style: normal; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__meta{
  display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__cta{
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto;
}

/* Чипы внутри плашки. Scoped под .banner, чтобы не пересекаться со standalone
   .salary-page .chip (другой компонент с тем же именем). */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner .chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  font: 500 12px var(--font); color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner .chip em{
  font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner .chip svg{ color: var(--text-light); }

/* — danger (приостановка / закрытие доступа) — */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--danger::before{ background: var(--danger); }

/* — accent (позитивный: активный пробный период) — */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--accent::before{ background: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--danger{ background: var(--danger-soft); border-color: var(--danger-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--danger .banner__icon{ background: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--danger .chip{ border-color: var(--danger-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--danger .chip svg{ color: var(--danger); }

/* — accent (позитивный: активный пробный период) — */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--accent{ background: var(--accent-soft); border-color: var(--accent-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--accent .banner__icon{ background: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--accent .chip{ border-color: var(--accent-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner--accent .chip svg{ color: var(--accent); }

/* Адаптив: на узких экранах CTA переносится на отдельную строку во всю ширину,
   иконка и текст остаются в строке сверху. */
@media (max-width: 600px){
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner{ flex-wrap: wrap; gap: 14px; }
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__cta{ flex-basis: 100%; align-items: stretch; }
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .banner__cta .btn{ width: 100%; }
}

/* =====================================================================
   BILLING — главная структура
   ===================================================================== */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .billing-grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px){
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .billing-grid{ grid-template-columns: 1fr; }
}

/* KPI status strip */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__item{
  padding: 16px 20px;
  border-right: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__item:last-child{ border-right: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__label{
  font: 600 10.5px var(--font); color: var(--text-muted);

  margin: 0 0 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__value{
  font: 700 18px var(--font); color: var(--text);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
  display: flex; align-items: baseline; gap: 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__value small{
  font: 500 12.5px var(--font); color: var(--text-muted);
  letter-spacing: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .status-strip__hint{ font: 500 11.5px var(--font); color: var(--text-light); margin-top: 4px; font-feature-settings: 'tnum' 1; }

/* Modules — сгруппированные с подсказками */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .modules-section{ margin-bottom: 28px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .modules-section__head{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .modules-section__head h2{
  margin: 0; font: 600 17px var(--font); letter-spacing: -0.005em;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .modules-section__count{
  font: 500 12.5px var(--font); color: var(--text-light);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .modules-section__filter{ margin-left: auto; }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .svc-category{
  font: 600 11px var(--font); color: var(--text-light);

  margin: 18px 4px 8px;
  display: flex; align-items: center; gap: 8px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .svc-category:first-child{ margin-top: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .svc-category .count{
  font: 600 11px var(--font);
  background: var(--bg-app); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px;
  min-width: 18px; text-align: center;
}

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 760px){ :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-grid{ grid-template-columns: 1fr; } }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 4px 12px;
  transition: border-color .14s, box-shadow .14s;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card:hover{ border-color: var(--text-faint); box-shadow: var(--shadow-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card.is-on{ border-color: var(--success-line); background: linear-gradient(180deg, var(--success-soft) 0%, var(--bg-card) 28%); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card.is-included{ background: var(--accent-soft); border-color: var(--accent-line); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card.is-required{ background: var(--bg-card); border-color: var(--border); }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__name{
  font: 600 14px var(--font); color: var(--text);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__toggle{ grid-row: 1; grid-column: 2; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__desc{
  grid-row: 2; grid-column: 1 / -1;
  font: 400 12.5px var(--font); color: var(--text-muted);
  line-height: 1.5; margin: 4px 0 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__foot{
/* Подсказка «оплачен до …» у выключенного модуля: деньги за него не сгорели. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__note{
  grid-column: 1 / -1;
  font: 400 12px var(--font); color: var(--text-muted);
  line-height: 1.5; margin: 6px 0 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__note em{
  font-style: normal; color: var(--text);
}
  grid-row: 3; grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__price{
  font: 700 14px var(--font); color: var(--text);
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__price small{ font: 500 12px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__price--free{ color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__link{
  font: 600 12.5px var(--font); color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__link:hover{ text-decoration: underline; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .mod-card__lock{
  color: var(--text-light); font: 500 12px var(--font);
  display: inline-flex; align-items: center; gap: 5px;
}

/* SIDE — sticky summary */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary{
  position: sticky; top: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; gap: 10px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__head-title{
  font: 600 14px var(--font); color: var(--text);
  margin: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__head .badge{ margin-left: auto; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__body{ padding: 18px 20px; }

/* Period radio (vertical) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__item{
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .14s, background .14s;
  position: relative;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__item:hover{ border-color: var(--text-faint); background: var(--hover); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__item.is-on{
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__radio{
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  display: grid; place-items: center;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__item.is-on .period-radio__radio{
  border-color: var(--accent);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__item.is-on .period-radio__radio::after{
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__main{ min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__name{
  font: 600 13.5px var(--font); color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__sub{
  font: 500 11.5px var(--font); color: var(--text-muted);
  margin-top: 1px; font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__price{
  text-align: right;
  font: 700 14px var(--font); color: var(--text);
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__save{
  font: 600 11px var(--font); color: var(--success);
  margin-top: 2px; font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .period-radio__badge{
  position: absolute; top: -8px; right: 12px;
  height: 18px; padding: 0 8px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font: 700 10px var(--font);

  display: inline-flex; align-items: center;
}

/* Promo */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-block__head{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-block__title{
  font: 600 12.5px var(--font); color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-block__hint{
  font: 500 11.5px var(--font); color: var(--text-light);
  margin-left: auto;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-wrap{
  display: flex; gap: 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-wrap .field{ height: 36px; font-size: 12.5px; }

/* applied promo chips */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-applied{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip{
  display: grid;
  grid-template-columns: 24px 1fr auto;
  /* Flex, а не grid с колонкой 24px: у чипа активного промокода иконки нет,
     и текст попадал в узкую первую колонку — «−10 % · осталось 3 месяца»
     сыпалось по одному слову в столбик. */
  display: flex;
  gap: 8px; align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--success-line);
  background: var(--success-soft);
  border-radius: var(--radius-xs);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--info    { border-color: var(--info-line);    background: var(--info-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--accent  { border-color: var(--accent-line);  background: var(--accent-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__icon{
  flex: 0 0 24px;
  width: 24px; height: 24px; border-radius: 6px;
  background: #fff; color: var(--success);
  display: grid; place-items: center;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--info .promo-chip__icon  { color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--accent .promo-chip__icon{ color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__main{ min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__code{
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__main{ min-width: 0; flex: 1 1 auto; }
  font: 700 12px ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text);

  display: inline-flex; align-items: center; gap: 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__bonus{
  font: 500 11.5px var(--font); color: var(--text-muted);
  margin-top: 2px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__bonus b{ color: var(--success); font-weight: 600; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--info .promo-chip__bonus b   { color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip--accent .promo-chip__bonus b { color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__close{
  width: 22px; height: 22px; border-radius: 50%;
  background: 0; border: 0; cursor: pointer;
  color: var(--text-light);
  display: grid; place-items: center;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-chip__close:hover{ background: rgba(15,23,42,.08); color: var(--danger); }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .promo-status{
  font: 500 11.5px var(--font); color: var(--text-light);
  margin-top: 8px; line-height: 1.5;
}

/* Total */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__total{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 8px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__row{
  display: flex; align-items: center; justify-content: space-between;
  font: 500 13px var(--font); color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
/* [hidden] (специфичность 0,0,1) перебивается .summary__row{display:flex} выше —
   строка «N модулей» скрывается атрибутом, когда модулей нет. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__row[hidden]{ display: none !important; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__row b{ color: var(--text); font-weight: 600; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__row--discount{ color: var(--success); font-weight: 600; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__grand{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__grand-label{
  font: 600 13px var(--font); color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__grand-value{
  font: 700 28px var(--font); letter-spacing: -0.02em;
  color: var(--text); font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__grand-value small{
  font: 500 13px var(--font); color: var(--text-muted);
  letter-spacing: 0; margin-left: 4px;
}

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__foot{
  border-top: 1px solid var(--divider);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: #fbfbfd;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__pay{ width: 100%; justify-content: center; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__auto{
  display: flex; align-items: flex-start; gap: 10px;
  font: 500 12.5px var(--font); color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__auto b{ display: block; font-weight: 600; color: var(--text); }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__cancel{
  background: 0; border: 0; padding: 6px 0;
  color: var(--text-light); font: 500 12.5px var(--font);
  text-align: center; cursor: pointer;
  transition: color .12s;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .summary__cancel:hover{ color: var(--danger); }

/* Payment method (compact card) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row__icon{
  width: 40px; height: 28px;
  background: linear-gradient(135deg, #fbbf24, #ea580c);
  border-radius: 5px;
  display: grid; place-items: center;
  color: #fff;
  font: 800 9px var(--font);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row__main{ min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row__num{ font: 600 14px var(--font); font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row__meta{ font: 500 12px var(--font); color: var(--text-muted); margin-top: 2px; font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row__actions{ display: flex; gap: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .pm-row--empty{
  border-style: dashed; border-color: var(--border-strong);
  background: var(--hover);
  justify-content: center; text-align: center;
  display: flex;
  font: 500 13px var(--font); color: var(--text-muted);
  padding: 18px;
}

/* Table */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl-card{
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl-card__bar{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl-card__count{ font: 500 12.5px var(--font); color: var(--text-muted); }

/* Таблица, которая на телефоне превращается в вертикальные строки-карточки.
   data-label дублирует заголовок колонки и сохраняет смысл без горизонтального
   скролла; включается явно модификатором только там, где он нужен. */
@media (max-width: 600px) {
  :is(.master-page, .masters-page) .tbl--mobile-cards{ display:block; min-width:0 !important; }
  :is(.master-page, .masters-page) .tbl--mobile-cards thead{ display:none; }
  :is(.master-page, .masters-page) .tbl--mobile-cards tbody,
  :is(.master-page, .masters-page) .tbl--mobile-cards tr,
  :is(.master-page, .masters-page) .tbl--mobile-cards td{ display:block; width:100%; }
  :is(.master-page, .masters-page) .tbl--mobile-cards tr{ padding:10px 14px; border-bottom:1px solid var(--divider); }
  :is(.master-page, .masters-page) .tbl--mobile-cards tr:last-child{ border-bottom:0; }
  :is(.master-page, .masters-page) .tbl--mobile-cards td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:6px 0; border:0; text-align:right;
  }
  :is(.master-page, .masters-page) .tbl--mobile-cards td::before{
    content:attr(data-label); color:var(--text-muted); font-weight:500; text-align:left;
  }
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl{
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 500 13px var(--font);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl thead th{
  text-align: left;
  font: 600 11px var(--font); color: var(--text-muted);

  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff; white-space: nowrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tbody td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle; color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tbody tr:last-child td{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tbody tr:hover td{ background: var(--hover); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl td.num{ text-align: right; font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl td.actions{ width: 1%; white-space: nowrap; text-align: right; }
/* Заголовки числовых колонок и колонок действий — выравниваем как их ячейки
   (td.num/td.actions = right), иначе шапка слева, а контент справа. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl thead th.num{ text-align: right; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl thead th.actions{ text-align: right; }
/* Строка «Итого» — нижний регистр таблицы. Выделена фоном и верхней границей,
   не реагирует на hover. Выравнивание чисел наследуется от .tbl td.num. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tfoot td{
  padding: 12px 16px;
  border-top: 2px solid var(--border-strong);
  background: var(--bg-app);
  font-weight: 600; color: var(--text);
  white-space: nowrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tfoot tr:hover td{ background: var(--bg-app); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tfoot .tbl-total__sub{ font-weight: 400; color: var(--text-muted); }

/* Отчёт ЗП — широкая «воронка» расчёта: горизонтальный скролл, content-based
   раскладка и закреплённая первая колонка «Сотрудник» при прокрутке. */
.salary-page .sal-funnel-scroll{ overflow-x: auto; }
.salary-page .tbl--funnel{ width: max-content; min-width: 100%; }
.salary-page .tbl--funnel th,
.salary-page .tbl--funnel td{ white-space: nowrap; }
.salary-page .tbl--funnel thead th:first-child,
.salary-page .tbl--funnel tbody td:first-child,
.salary-page .tbl--funnel tfoot td:first-child{
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-card);
  box-shadow: 2px 0 4px rgba(0,0,0,.06);
}
.salary-page .tbl--funnel thead th:first-child{ z-index: 3; }
.salary-page .tbl--funnel tfoot td:first-child{ background: var(--bg-app); }
.salary-page .tbl--funnel tbody tr:hover td:first-child{ background: var(--hover); }

/* Section header inside main col */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .section-h2{
  margin: 28px 0 14px;
  display: flex; align-items: baseline; gap: 10px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .section-h2 h2{
  margin: 0; font: 600 17px var(--font); letter-spacing: -0.005em;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .section-h2__hint{ font: 500 12.5px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .section-h2__action{ margin-left: auto; }

/* Tabs */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs{
  display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid var(--border);
  gap: 24px;
  margin-bottom: 18px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs__item{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0 12px;
  font: 600 13.5px var(--font); color: var(--text-muted);
  border: 0; border-bottom: 2px solid transparent;
  background: 0; cursor: pointer;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs__item:hover{ color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs__item.is-active{ color: var(--text); border-bottom-color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs__item .count{
  font: 600 11px var(--font);
  background: var(--bg-app); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px;
  min-width: 18px; text-align: center;
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tabs__item.is-active .count{ background: var(--accent-soft); color: var(--accent); }

/* Tab panels */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tab-panel{ display: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tab-panel.is-active{ display: block; }

/* History KPI row */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__item{
  padding: 14px 18px;
  border-right: 1px solid var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__item:last-child{ border-right: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__label{
  font: 600 10.5px var(--font); color: var(--text-muted);

  margin: 0 0 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__value{
  font: 700 18px var(--font); color: var(--text);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__value small{ font: 500 12px var(--font); color: var(--text-muted); margin-left: 3px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__delta{
  font: 600 11px var(--font); margin-top: 4px;
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__delta--ok{ color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__delta--warn{ color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .history-kpis__delta--mute{ color: var(--text-light); font-weight: 500; }

/* Filter row above table */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chips{
  display: inline-flex; background: var(--bg-app);
  padding: 3px; border-radius: 9px; gap: 2px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chip{
  height: 30px; padding: 0 12px; border-radius: 6px;
  font: 600 12.5px var(--font); color: var(--text-muted);
  background: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chip:hover{ color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chip.is-on{ background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chip .c{
  font: 600 11px var(--font);
  background: var(--bg-card); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .filter-row__chip.is-on .c{ background: var(--bg-app); color: var(--text); }

/* Docs list */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row{
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row:hover{ border-color: var(--text-faint); box-shadow: var(--shadow-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__icon{
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--danger-soft); color: var(--danger);
  display: grid; place-items: center;
  font: 700 11px var(--font);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__icon--xls{ background: var(--success-soft); color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__icon--zip{ background: var(--info-soft); color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__icon--xml{ background: var(--warning-soft); color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__main{ min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__name{ font: 600 13.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__meta{ font: 500 12px var(--font); color: var(--text-light); margin-top: 2px; font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__date{
  font: 500 12.5px var(--font); color: var(--text-muted);
  white-space: nowrap; font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-row__size{
  font: 500 12px var(--font); color: var(--text-light);
  white-space: nowrap; font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-section-title{
  font: 600 11px var(--font); color: var(--text-light);

  margin: 22px 4px 10px;
  display: flex; align-items: center; gap: 8px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-section-title:first-child{ margin-top: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .doc-section-title .count{
  font: 600 11px var(--font);
  background: var(--bg-app); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px;
  min-width: 18px; text-align: center;
}


/* =====================================================================
   ДОПОЛНИТЕЛЬНЫЕ КОМПОНЕНТЫ ДИЗАЙН-СИСТЕМЫ (KPI / callout / page-state /
   form-row / text-helpers / field-modifiers / tbl-group)
   Добавлены 2026-05-21 при переделке /salary под дизайн-систему.
   ===================================================================== */

/* KPI cards (§9) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi__label{ font: 600 11px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi__value{ font: 700 24px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }
@media (max-width: 1100px) { :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi-grid{ grid-template-columns: 1fr; } :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .kpi__value{ font-size: 22px; } }

/* Callout (§1) — точная копия из docs/design/ui-kit.html */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout{
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 14px; align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tip-line);
  background: var(--tip-soft);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--info     { border-color: var(--info-line);    background: var(--info-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--success  { border-color: var(--success-line); background: var(--success-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--warning  { border-color: var(--warning-line); background: var(--warning-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--danger   { border-color: var(--danger-line);  background: var(--danger-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--accent   { border-color: var(--accent-line);  background: var(--accent-soft); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout__icon{
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(124, 58, 237, .12); color: var(--tip);
  flex-shrink: 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--info    .callout__icon { background: rgba(37, 99, 235, .12); color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--success .callout__icon { background: rgba(22, 163, 74, .14); color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--warning .callout__icon { background: rgba(217, 119, 6, .14); color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--danger  .callout__icon { background: rgba(220, 38, 38, .14); color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--accent  .callout__icon { background: rgba(234, 88, 12, .14); color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout__body{ font: 400 13px/1.55 var(--font); color: var(--text); margin: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout__body b,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout__body strong{ font-weight: 600; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout__body em{ font-style: normal; background: var(--bg-card); padding: 1px 6px; border-radius: var(--radius-xs); border: 1px solid var(--border); font-feature-settings: 'tnum' 1; font-weight: 600; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .pf-report, .opz-report) .callout--inline{ border: 0; background: transparent; padding: 4px 0 14px; border-bottom: 1px dashed var(--border); border-radius: 0; grid-template-columns: 1fr; }

.pf-report > .callout { margin-bottom: 12px; }
.pf-report .callout__body em { white-space: nowrap; }
/* HTML-атрибут [hidden] на .callout — специфичность 0,0,1 — перебивается
   правилом .callout{display:grid} выше. Поэтому пустые callout'ы в скрытом
   состоянии (например error-плашка в форме до отправки) рисовались красным
   прямоугольником. Explicit override спасает. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .callout[hidden]{ display: none !important; }
@media (max-width: 600px) {
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .callout{ grid-template-columns: 28px minmax(0, 1fr); }
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .callout > .btn{ grid-column: 2; justify-self: start; }
}

/* Page-state (§6.3) — .cf-app добавлен для ClientFlow (раздел «Отчёт смены», B1);
   .master-page/.masters-page — карточка мастера и список сотрудников (/masters). */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state{ padding: 48px 24px; text-align: center; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font: 500 13.5px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state--error  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state--warning{ background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state--success{ background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
/* Заголовок и описание — перенос из ui-kit §3; отступы desc адаптированы:
   в ките ниже идут .page-state__actions, здесь desc обычно последний элемент. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state__title{ font: 600 18px var(--font); color: var(--text); margin: 0; letter-spacing: -0.005em; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .funnels-page, .client-lists-page) .page-state__desc { font: 400 13.5px var(--font); color: var(--text-muted); max-width: 460px; line-height: 1.55; margin: 6px auto 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state{ padding: 48px 24px; text-align: center; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font: 500 13.5px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state--error  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state--warning{ background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state--success{ background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
/* Заголовок и описание — перенос из ui-kit §3; отступы desc адаптированы:
   в ките ниже идут .page-state__actions, здесь desc обычно последний элемент. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state__title{ font: 600 18px var(--font); color: var(--text); margin: 0; letter-spacing: -0.005em; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state__desc { font: 400 13.5px var(--font); color: var(--text-muted); max-width: 460px; line-height: 1.55; margin: 6px auto 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .cf-app, .master-page, .masters-page, .reports-v2) .page-state__actions{ display:inline-flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* Form-row (§7) — копия из ui-kit */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row{
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--divider);
  align-items: flex-start;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row:first-child{ border-top: 0; padding-top: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row__label{ padding-top: 8px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row__label-title{ font: 600 13.5px var(--font); color: var(--text); margin: 0 0 2px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row__label-hint { font: 400 12.5px var(--font); color: var(--text-light); margin: 0; }
@media (max-width: 600px) {
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row{ grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .form-row__label{ padding-top: 0; }
}

/* Text helpers */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-muted   { color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-light   { color: var(--text-light); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-faint   { color: var(--text-faint); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-accent  { color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-success { color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-warning { color: var(--warning); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .text-danger  { color: var(--danger); }

/* Field modifiers */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .field--sm  { height: 30px; padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
/* Компактный select: `.field--sm` идёт ниже и сбрасывает padding целиком,
   поэтому место под стрелку возвращаем здесь — иначе она ложится на текст. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) select.field--sm{ padding-right: 28px; background-position: right 8px center; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .field--num { text-align: right; font-feature-settings: 'tnum' 1; }

/* Table group-row */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl__group{ background: var(--bg-app); font: 600 11px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px; }

/* Salary-локальные утилиты */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-card-title{ font: 600 14px var(--font); color: var(--text); margin: 0 0 10px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-card-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-margin-top{ margin-top: 14px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-stack{ display: flex; flex-direction: column; gap: 10px; }
/* Подкарточка (блок базы / KPI в конструкторе admin-правила) + строка инлайн-полей */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-subcard{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; background: var(--bg-app); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-inline-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-inline-row > .field{ flex: 1; min-width: 120px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-inline-row > .field--sm{ flex: 0 1 120px; min-width: 90px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .met-col{ flex: 1; }
/* T13: шапка-подписи колонок над .sal-inline-row (KPI: лесенка/доплата/условие).
   Колонки выровнены по той же flex-сетке, что .field--sm (flex 0 1 120px). */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cap-row{ display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cap-row > .sal-cap{ flex: 0 1 120px; min-width: 90px; font: 600 11px/1.3 var(--font); color: var(--text-light); }
/* Атрибут [hidden] перебивается .sal-inline-row{display:flex}/.sal-cap-row{display:flex}
   (как у .callout выше) — явный override, иначе свёрнутые ряды overage/условия видны. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-inline-row[hidden],
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cap-row[hidden]{ display: none !important; }

/* ============ T16: раздел «Сотрудники» (#staff) — таблица/карточки/чипы/опции ============ */
/* Поиск (UI-кит §17). Был заведён под зарплату, с 28.08.2026 общий: тот же
   компонент понадобился каталогу заготовок, где заготовок стало шестьдесят.
   Расширение скоупа аддитивно — размеченного `.search__input` больше нигде
   нет, а ClientFlow использует голый `input.search` под своим `.cf-app`. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search{ position: relative; width: 280px; max-width: 100%; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__icon{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__input{ width: 100%; height: 38px; padding: 0 34px; border: 1px solid var(--border-strong); background: var(--bg-card);
  border-radius: var(--radius-sm); font: 500 13.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__input::placeholder{ color: var(--text-light); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__input:focus{ outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234,88,12,.14); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__clear{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0;
  background: transparent; border-radius: var(--radius-xs); display: none; place-items: center; color: var(--text-light); cursor: pointer; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__clear.is-on{ display: grid; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer, .settings-v2) .search__clear:hover{ background: var(--hover); color: var(--text-muted); }

/* Таблица-карта + ячейки сотрудника */
.salary-page .tbl-card{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.salary-page .emp{ display: flex; align-items: center; gap: 11px; min-width: 170px; }
.salary-page .avatar{ width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font: 600 12px var(--font); color: #fff; }
.salary-page .avatar--c0{ background: var(--accent); }
.salary-page .avatar--c1{ background: var(--info); }
.salary-page .avatar--c2{ background: var(--success); }
.salary-page .avatar--c3{ background: var(--warning); }
.salary-page .avatar--c4{ background: var(--tip); }
.salary-page .avatar--c5{ background: var(--danger); }
.salary-page .emp__name{ font: 600 14px var(--font); }
.salary-page .emp__role{ font: 400 12px var(--font); color: var(--text-light); margin-top: 1px; }

.salary-page .cell{ min-width: 180px; }
.salary-page .cell__none{ font: 500 13px var(--font); color: var(--text-light); }
.salary-page .cell__link{ display: inline-flex; align-items: center; gap: 5px; border: 0; background: 0; padding: 0; margin-top: 9px; cursor: pointer;
  font: 600 12.5px var(--font); color: var(--accent); }
.salary-page .cell__link:hover{ text-decoration: underline; }
.salary-page .rule-name{ font: 600 13.5px var(--font); }
.salary-page .rule-since{ font: 400 12px var(--font); color: var(--text-light); margin-top: 3px; }

/* ============ Чипы-фильтры (UI-кит §2) ============ */
/* Тумблер «показывать этот срез», разметка скопирована из кита.
   Скоуп — только страница воронок: ниже под тем же именем `.chip` живёт
   ДРУГОЙ компонент зарплатной страницы (бейдж плана или налога с крестиком).
   Свести их в один нельзя — у них разная семантика: здесь кнопка с
   состоянием, там ярлык. Развести по скоупам дешевле, чем переименовывать
   работающий экран. */
.funnels-page .chip-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.funnels-page .chip-row__head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.funnels-page .chip-row__sub{ font: 500 12.5px var(--font); color: var(--text-light); }
.funnels-page .chip-row__actions{ margin-left: auto; display: inline-flex; gap: 14px; }
.funnels-page .chip-row__action{ background: none; border: 0; padding: 0; font: 500 12.5px var(--font);
  color: var(--text-muted); cursor: pointer; border-bottom: 1px dashed transparent;
  transition: color .12s, border-color .12s; }
.funnels-page .chip-row__action:hover{ color: var(--text); border-bottom-color: var(--text-faint); }

.funnels-page .chip{ --chip-color: var(--accent); display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--border-strong); background: var(--bg-card);
  border-radius: 999px; font: 500 13px var(--font); color: var(--text-muted); cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
  user-select: none; white-space: nowrap; }
.funnels-page .chip:hover{ border-color: var(--text-faint); background: var(--hover); color: var(--text); }
.funnels-page .chip__name{ font-weight: 600; color: inherit; }
.funnels-page .chip__meta{ color: var(--text-light); font-weight: 500; font-feature-settings: 'tnum' 1; }
.funnels-page .chip:hover .chip__meta{ color: var(--text-muted); }
.funnels-page .chip.is-on{ background: var(--bg-card); border-color: var(--chip-color); color: var(--text);
  box-shadow: 0 0 0 1px var(--chip-color) inset; }
.funnels-page .chip.is-on .chip__meta{ color: var(--text-muted); }
.funnels-page .chip:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Чипы (планы/налоги) */
.salary-page .chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.salary-page .chip{ display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 600 12px var(--font); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.salary-page .chip--tax{ background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.salary-page .chip--muted{ background: var(--bg-app); color: var(--text-muted); border-color: var(--border-strong); }
.salary-page .chip__x{ width: 16px; height: 16px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center;
  color: currentColor; opacity: .65; cursor: pointer; margin-right: -4px; }
.salary-page .chip__x:hover{ opacity: 1; background: rgba(15,23,42,.1); }

/* Выбираемые строки (radio/checkbox) в модалках */
.salary-page .opt-list{ display: flex; flex-direction: column; gap: 8px; }
.salary-page .opt{ display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.salary-page .opt:hover{ border-color: var(--text-faint); background: var(--hover); }
.salary-page .opt.is-on{ border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.salary-page .opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
.salary-page .opt__mark{ width: 20px; height: 20px; border: 1.5px solid var(--border-strong); flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #fff; }
.salary-page .opt__mark--radio{ border-radius: 50%; }
.salary-page .opt__mark--check{ border-radius: var(--radius-xs); }
.salary-page .opt.is-on .opt__mark{ background: var(--accent); border-color: var(--accent); }
.salary-page .opt__mark svg{ opacity: 0; }
.salary-page .opt.is-on .opt__mark svg{ opacity: 1; }
.salary-page .opt__body{ min-width: 0; flex: 1 1 auto; }
.salary-page .opt__name{ display: block; font: 600 13.5px var(--font); }
.salary-page .opt__desc{ display: block; font: 400 12px var(--font); color: var(--text-muted); margin-top: 2px; }

/* Тумблер «не применять налоги» */
.salary-page .tax-off{ display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); margin-bottom: 14px; cursor: pointer; }
.salary-page .tax-off.is-on{ border-style: solid; border-color: var(--warning-line); background: var(--warning-soft); }
.salary-page .tax-off input{ position: absolute; opacity: 0; width: 0; height: 0; }
.salary-page .switch{ width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; flex: 0 0 auto; transition: background .15s; }
.salary-page .switch::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.salary-page .tax-off.is-on .switch{ background: var(--warning); }
.salary-page .tax-off.is-on .switch::after{ transform: translateX(16px); }
.salary-page .tax-off__t{ display: block; font: 600 13px var(--font); }
.salary-page .tax-off__d{ display: block; font: 400 12px var(--font); color: var(--text-muted); margin-top: 1px; }
.salary-page .sub-label{ font: 600 11px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 9px; }
.salary-page .modal-empty{ font: 500 12.5px var(--font); color: var(--text-light); text-align: center; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }

/* Мобильные карточки сотрудников */
.salary-page .emp-cards{ display: none; flex-direction: column; gap: 12px; }
.salary-page .ecard{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 6px; }
.salary-page .ecard__head{ display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.salary-page .ecard__sect{ padding: 13px 0; border-bottom: 1px solid var(--divider); }
.salary-page .ecard__sect:last-child{ border-bottom: 0; }
.salary-page .ecard__label{ font: 600 10.5px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }
.salary-page .ecard__row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.salary-page .ecard__row .cell__link{ margin-top: 0; }
.salary-page .foot-card{ display: none; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; font: 600 13px var(--font); margin-top: 12px; }

@media (max-width: 860px){
  .salary-page .search{ width: 100%; }
  .salary-page .tbl-card{ display: none; }
  .salary-page .emp-cards{ display: flex; }
  .salary-page .foot-card{ display: flex; }
}

/* Тосты */
.salary-page .toasts, .toasts{ position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast{ display: flex; gap: 10px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--success);
  border-radius: var(--radius-sm); padding: 11px 14px; box-shadow: var(--shadow-md); font: 600 13px var(--font); color: var(--text); }
.toast--danger{ border-left-color: var(--danger); }
.toast--info{ border-left-color: var(--info); }
.salary-page .ab-modal__foot .sal-foot-left{ margin-right: auto; }

/* ============ T17: каркас конструктора правила ЗП (#rules) ============ */
.salary-page .seg{ display: inline-flex; background: var(--bg-app); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.salary-page .seg__btn{ border: 0; background: 0; padding: 9px 18px; font: 600 13px var(--font); color: var(--text-light); border-radius: var(--radius-xs); white-space: nowrap; cursor: pointer; }
.salary-page .seg__btn:hover{ color: var(--text); }
.salary-page .seg__btn.is-on{ background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-sm); }
.salary-page .seg--full{ display: flex; width: 100%; }
.salary-page .seg--full .seg__btn{ flex: 1 1 0; padding: 9px 12px; }

.salary-page .typecard{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
  display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: center; }
.salary-page .typecard__label{ font: 600 13.5px var(--font); }
.salary-page .typecard__hint{ font: 400 12.5px var(--font); color: var(--text-light); margin-top: 4px; line-height: 1.5; }

.salary-page .block{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.salary-page .block__head{ display: flex; align-items: center; gap: 14px; padding: 17px 20px; }
.salary-page .block.is-toggle .block__head{ cursor: pointer; }
.salary-page .block__head-main{ min-width: 0; flex: 1 1 auto; }
.salary-page .block__title{ font: 600 15px var(--font); }
.salary-page .block__hint{ font: 400 12.5px var(--font); color: var(--text-muted); margin-top: 3px; line-height: 1.5; max-width: 760px; }
.salary-page .block__body{ padding: 4px 20px 18px; border-top: 1px solid var(--divider); }
.salary-page .block.is-off .block__body{ display: none; }
.salary-page .block.is-off .block__title{ color: var(--text-muted); }
.salary-page .block__foot{ display: flex; justify-content: flex-end; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--divider); }

.salary-page .frow{ display: grid; grid-template-columns: 230px 1fr; gap: 20px; padding: 15px 0; border-top: 1px solid var(--divider); align-items: start; }
.salary-page .frow:first-child{ border-top: 0; }
.salary-page .frow__label{ padding-top: 9px; }
.salary-page .frow__name{ font: 600 13px var(--font); }
.salary-page .frow__hint{ font: 400 12px var(--font); color: var(--text-light); margin-top: 4px; line-height: 1.5; }
.salary-page .frow__control{ min-width: 0; }

.salary-page .input-suffix{ position: relative; }
.salary-page .input-suffix .field{ padding-right: 42px; }
.salary-page .input-suffix__u{ position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font: 600 13px var(--font); color: var(--text-light); pointer-events: none; }

.salary-page .check{ display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
.salary-page .check input{ position: absolute; opacity: 0; width: 0; height: 0; }
.salary-page .check__box{ width: 19px; height: 19px; border: 1.5px solid var(--border-strong); border-radius: 5px; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; color: #fff; background: #fff; }
.salary-page .check input:checked + .check__box{ background: var(--accent); border-color: var(--accent); }
.salary-page .check__box svg{ opacity: 0; }
.salary-page .check input:checked + .check__box svg{ opacity: 1; }
.salary-page .check__t{ font: 500 13.5px var(--font); color: var(--text); line-height: 1.4; padding-top: 1px; }

.salary-page .item{ border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 14px; margin-top: 12px; background: var(--bg-card); }
.salary-page .item__bar{ display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.salary-page .item__bar .field{ flex: 1 1 auto; }
.salary-page .item__bar-sel{ flex: 0 0 auto; width: 230px; max-width: 46%; }

.salary-page .ladder__grid{ display: flex; flex-direction: column; gap: 8px; }
.salary-page .ladder__row{ display: grid; grid-template-columns: 1fr 1fr 1.2fr 30px; gap: 10px; align-items: end; }
/* Лесенка KPI администратора: пятая колонка — галочка «План» (ступень выполнения плана). */
.salary-page .ladder__row--plan{ grid-template-columns: 1fr 1fr 1.2fr 56px 30px; }
.salary-page .ladder__cell--plan .check{ height: 42px; display: inline-flex; align-items: center; }
.salary-page .mini-label{ font: 600 10.5px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; display: block; }
.salary-page .ladder__row:not(:first-child) .mini-label{ display: none; }
.salary-page .ladder__add{ margin-top: 10px; }
.salary-page .ladder__del{ width: 30px; height: 42px; border: 0; background: transparent; border-radius: var(--radius-xs); display: grid; place-items: center; color: var(--text-light); cursor: pointer; align-self: end; }
.salary-page .ladder__del:hover{ background: var(--danger-soft); color: var(--danger); }

.salary-page .cond-grid{ display: grid; grid-template-columns: 1fr 90px 1fr; gap: 10px; margin-top: 10px; }
.salary-page .subfields{ margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.salary-page .link-add{ display: inline-flex; align-items: center; gap: 6px; border: 0; background: 0; padding: 0; font: 600 12.5px var(--font); color: var(--accent); cursor: pointer; }
.salary-page .link-add:hover{ text-decoration: underline; }
.salary-page .link-del{ border: 0; background: 0; padding: 0; font: 600 12.5px var(--font); color: var(--danger); cursor: pointer; flex: 0 0 auto; }
.salary-page .link-del:hover{ text-decoration: underline; }

/* §34 Multi-select — чипы выбранных значений (порт из ui-kit). */
.multiselect{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 6px 8px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.multiselect__chip{ display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px 0 10px; background: var(--bg-app); border-radius: 999px; font: 600 12px var(--font); color: var(--text); }
.multiselect__chip-close{ width: 16px; height: 16px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--text-muted); display: grid; place-items: center; }
.multiselect__chip-close:hover{ background: var(--border-strong); color: var(--danger); }
.multiselect__ph{ font: 500 13px var(--font); color: var(--text-light); padding: 2px 4px; }

/* Планы мастеров в настройках филиала — детальные цели. */
.settings-v2 .s2-plan-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.settings-v2 .s2-plan-toolbar__label{font:600 13px var(--font);color:var(--text-muted);}
.settings-v2 .s2-plan-hint{font-size:12px;}
.settings-v2 .s2-plan-copy{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.settings-v2 .s2-plan-copy[hidden]{display:none;}
.settings-v2 .s2-plan-loading{padding:16px 0;}
.settings-v2 .s2-plan-table-wrap{width:100%;overflow-x:auto;}
.settings-v2 .s2-plan-col-source{width:80px;}
.settings-v2 .s2-plan-empty{text-align:center;padding:32px;}
.settings-v2 .s2-plan-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:8px;}
.settings-v2 .s2-plan-value{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.settings-v2 .s2-plan-value .s2-field{width:130px;text-align:right;}
.settings-v2 .s2-plan-value > span{color:var(--text-light);font-size:13px;}
.settings-v2 .s2-plan-detail-row[hidden],
.settings-v2 [hidden]{display:none!important;}
.settings-v2 .s2-plan-detail-row > td{padding:0;background:var(--bg-app);}
.settings-v2 .s2-plan-detail{padding:16px 18px;text-align:left;}
.settings-v2 .s2-plan-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.settings-v2 .s2-plan-detail__head b{font:600 13.5px var(--font);color:var(--text);}
.settings-v2 .s2-plan-detail__head p{margin:3px 0 0;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.settings-v2 .s2-plan-detail__list{display:flex;flex-direction:column;gap:8px;}
.settings-v2 .s2-plan-detail__item{display:grid;grid-template-columns:minmax(0,1fr) 150px 38px;gap:10px;align-items:end;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.settings-v2 .s2-plan-detail__item b,.settings-v2 .s2-plan-detail__item span{display:block;}
.settings-v2 .s2-plan-detail__item b{font:600 13px var(--font);color:var(--text);}
.settings-v2 .s2-plan-detail__item > div span{margin-top:3px;font:500 11.5px var(--font);color:var(--text-light);}
.settings-v2 .s2-plan-detail__label{display:block;margin-bottom:5px;font:600 11px var(--font);color:var(--text-light);}
.settings-v2 .s2-plan-detail__empty{margin:0;padding:12px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);font:400 12.5px/1.5 var(--font);color:var(--text-muted);background:var(--bg-card);}
.settings-v2 .s2-branch__action-form{margin:0;}
.settings-v2 .s2-plan-detail__add{display:grid;grid-template-columns:minmax(220px,1fr) 150px auto;gap:10px;align-items:end;margin-top:12px;}
.settings-v2 .s2-plan-detail__add .s2-field{width:100%;}
.settings-v2 .s2-plan-detail__message{min-height:18px;margin:6px 0 0;font:500 12px var(--font);color:var(--danger);}
@media(max-width:700px){
  .settings-v2 .s2-plan-detail__add{grid-template-columns:1fr;}
  .settings-v2 .s2-plan-detail__item{grid-template-columns:1fr 38px;}
  .settings-v2 .s2-plan-detail__item > label{grid-column:1;}
  .settings-v2 .s2-plan-detail__item > button{grid-column:2;grid-row:1;}
}

/* KPI-конструктор (раздел «KPI-планы»): раскладки метрики и фильтров. */
.salary-page .kpi-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.salary-page .kpi-filter{ display: grid; grid-template-columns: 170px 1fr 30px; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--divider); }
.salary-page .kpi-filter:first-child{ border-top: 0; }
.salary-page .kpi-filter__name{ font: 600 13px var(--font); color: var(--text); padding-top: 8px; }
.salary-page .kpi-filter > .ladder__del{ align-self: start; height: 38px; }
.salary-page .kpi-ms{ display: flex; flex-direction: column; gap: 6px; }
.salary-page .kpi-ms__add{ max-width: 280px; }
.salary-page .kpi-single{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
/* Лесенка KPI без колонки «до»: показатель-от + выплата + удалить. */
.salary-page #pkSteps.ladder__grid .ladder__row{ grid-template-columns: 1fr 1.2fr 30px; }

/* Поп-ап «Как это работает» — своя обёртка (не .modal из core.css). */
.kpi-help{ position: fixed; inset: 0; z-index: 60; display: none; }
.kpi-help.is-open{ display: block; }
.kpi-help__bd{ position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.kpi-help__panel{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 660px; max-width: 94vw; max-height: 88vh; overflow-y: auto; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px 26px; }
.kpi-help__close{ position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.kpi-help__close:hover{ background: var(--hover); color: var(--text); }
.kpi-help h3{ font: 600 18px var(--font); margin: 0 0 6px; }
.kpi-help h4{ font: 600 13.5px var(--font); margin: 18px 0 6px; }
.kpi-help p{ font: 400 13px var(--font); color: var(--text-muted); line-height: 1.55; margin: 0 0 8px; }
.kpi-help ol{ margin: 0 0 8px; padding-left: 18px; }
.kpi-help li{ font: 400 13px var(--font); color: var(--text); line-height: 1.6; margin-bottom: 4px; }
.kpi-help em{ font-style: normal; font-weight: 600; color: var(--text); }
.kpi-help table{ width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.kpi-help th, .kpi-help td{ text-align: left; font: 500 12.5px var(--font); padding: 6px 8px; border-bottom: 1px solid var(--divider); }
.kpi-help th{ color: var(--text-light); text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; }
.salary-page .kpi-add{ display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.salary-page .kpi-add .field{ max-width: 280px; }

.salary-page .actionbar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px);
  border-top: 1px solid var(--border); padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); }
.salary-page .actionbar__inner{ max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.salary-page .actionbar__hint{ margin-right: auto; font: 500 12.5px var(--font); color: var(--text-light); }

@media (max-width: 760px){
  .salary-page .typecard{ grid-template-columns: 1fr; gap: 12px; }
  .salary-page .seg{ width: 100%; } .salary-page .seg__btn{ flex: 1 1 0; }
  .salary-page .frow{ grid-template-columns: 1fr; gap: 9px; padding: 14px 0; }
  .salary-page .frow__label{ padding-top: 0; }
  .salary-page .item__bar{ flex-direction: column; align-items: stretch; gap: 10px; }
  .salary-page .item__bar-sel{ width: 100%; max-width: none; }
  .salary-page .ladder__row{ grid-template-columns: 1fr 1fr; gap: 9px 10px; position: relative; padding: 12px; border: 1px solid var(--divider); border-radius: var(--radius-sm); }
  .salary-page .ladder__row .mini-label{ display: block !important; }
  .salary-page .ladder__cell:nth-child(3){ grid-column: 1 / -1; }
  .salary-page .ladder__del{ position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
  .salary-page .cond-grid{ grid-template-columns: 1fr; }
  .salary-page .kpi-3{ grid-template-columns: 1fr; }
  .salary-page .kpi-single{ grid-template-columns: 1fr; }
  .salary-page #pkSteps.ladder__grid .ladder__row{ grid-template-columns: 1fr 1fr; }
  .salary-page .kpi-filter{ grid-template-columns: 1fr 30px; }
  .salary-page .kpi-filter__name{ grid-column: 1 / -1; padding-top: 0; }
  .salary-page .actionbar{ padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .salary-page .actionbar__hint{ display: none; }
  .salary-page .actionbar__inner .btn{ flex: 1 1 auto; height: 46px; }
}

/* ─── T18: мастер-конструктор — ступени и переопределения ─── */
.salary-page .tier{ margin-bottom: 12px; }
.salary-page .tier__head{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap; }
.salary-page .tier__head.is-open{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 0; }
.salary-page .tier__no{ font: 700 13.5px var(--font); color: var(--text); }
.salary-page .tier__range{ display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.salary-page .tier__cap{ font: 500 12px var(--font); color: var(--text-muted); }
.salary-page .tier__range .field{ height: 36px; padding: 6px 10px; }
.salary-page .tier__rate{ font: 500 12px var(--font); color: var(--text-light); }
.salary-page .tier__rate strong{ color: var(--text); font-weight: 700; }
.salary-page .tier__actions{ margin-left: auto; display: flex; gap: 6px; }
.salary-page .tier__body{ padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); display: flex; flex-direction: column; gap: 14px; }
.salary-page .tier__hint-last{ padding: 7px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font: 500 11.5px var(--font); color: var(--accent); }
.salary-page .tsec{ display: flex; flex-direction: column; gap: 8px; }
.salary-page .tsec__title{ font: 600 12.5px var(--font); color: var(--text); }
.salary-page .tsec__note{ font: 400 11.5px var(--font); color: var(--text-muted); margin: 0; line-height: 1.5; }
.salary-page .tgrid-2{ display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.salary-page .tgrid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; align-items: end; }
.salary-page .tgrid-4 .frow__name{ display: block; margin-bottom: 4px; }
.salary-page .tcell--wide{ grid-column: span 2; }
.salary-page .ded-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.salary-page .ovr-row{ display: grid; grid-template-columns: 1fr 110px 120px 30px; gap: 8px; align-items: center; }
.salary-page .ovr-row + .ovr-row{ margin-top: 6px; }
.salary-page .ovr-empty{ font: 400 12.5px var(--font); color: var(--text-muted); }
@media (max-width: 760px){
  .salary-page .tier__actions{ margin-left: 0; }
  .salary-page .tgrid-2{ grid-template-columns: 1fr; }
  .salary-page .tgrid-4{ grid-template-columns: 1fr 1fr; }
  .salary-page .tcell--wide{ grid-column: 1 / -1; }
  .salary-page .ded-grid{ grid-template-columns: 1fr; }
  .salary-page .ovr-row{ grid-template-columns: 1fr 1fr 30px; }
  .salary-page .ovr-row > :first-child{ grid-column: 1 / -1; }
}


/* Карточка в списке (правило/план) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card__main{ flex: 1; min-width: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card__title{ font: 600 14px var(--font); color: var(--text); margin: 0 0 2px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card__meta{ font: 400 12.5px/1.5 var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card__flags{ font: 400 11.5px var(--font); color: var(--text-light); margin-top: 4px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card__actions{ display: flex; gap: 6px; flex-shrink: 0; }

/* Поле rate (тип + значение) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rate{ display: grid; grid-template-columns: 120px 1fr; gap: 10px; }

/* .sal-step-card удалён — была выдумка. Используй обычную .card. */

/* Перебиваем легаси-hover из core.css (.card:hover transform+shadow).
   В новой дизайн-системе у блочных карточек ховера нет. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .card:hover{ box-shadow: none; transform: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-list-card:hover{ box-shadow: none; transform: none; }

/* Salary — строка налога (тип + название + % + удалить) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-tax-row{ display: grid; grid-template-columns: 1fr 1.5fr 110px 32px; gap: 6px; align-items: center; }
@media (max-width: 600px){ :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-tax-row{ grid-template-columns: 1fr 100px 32px; } :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-tax-row > input[data-taxf="name"], :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-tax-row > input[data-tx-name]{ grid-column: 1 / -1; } }

/* Salary — два равных поля с подписями (Гарант: день/месяц и т.п.) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-twin{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-twin__cell{ display: flex; flex-direction: column; gap: 4px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-twin__cap{ font: 500 12px var(--font); color: var(--text-muted); }

/* Salary — поле с % суффиксом */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-pct{ position: relative; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-pct > .field{ padding-right: 26px; width: 100%; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-pct__suffix{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font: 500 12.5px var(--font); pointer-events: none; }

/* Salary — строка условия в редакторе бонус-плана (метрика + сравнение + порог + удалить) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cond-row{ display: grid; grid-template-columns: 1fr 80px 140px 32px; gap: 6px; align-items: center; }
@media (max-width: 600px){
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cond-row{ grid-template-columns: 1fr 80px 32px; }
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-cond-row > input[type="number"]{ grid-column: 1 / -1; }
}

/* Salary — чекбокс в form-row */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-check{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 500 13.5px var(--font); color: var(--text); padding-top: 8px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-check input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--accent); }

/* Salary — чип бонус-плана в строке мастера */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-plan-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; font: 500 12px var(--font); color: var(--accent); margin: 2px 4px 2px 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-plan-chip__del{ background: transparent; border: 0; cursor: pointer; color: var(--accent); font-size: 14px; line-height: 1; padding: 0 2px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-plan-chip__del:hover{ color: var(--danger); }

/* Salary — мелкие inline-утилиты (заменили rotted style="..."). */
/* Loader в карточках пресетов «Загружаем…» */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-loader{ font: 400 13px var(--font); color: var(--text-muted); padding: 8px 0; }
/* Подпись под именем автора корректировки (дата создания) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-meta{ font: 400 11px var(--font); color: var(--text-muted); }
/* Inline-input для аванса в таблице мастеров */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-input-amount{ width: 110px; text-align: right; }
/* Callout с отступом снизу (вверху блока списка налогов) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .callout--mb{ margin-bottom: 14px; }
/* Серая строка таблицы (неактивный пресет/налог) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .tbl tr.sal-row-inactive > td{ opacity: .55; }

/* Salary — ячейка «Налоги» в таблице мастеров */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-cell__label{ font: 500 12.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-cell__label--muted{ color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-cell__hint{ font: 400 12px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-cell__link{ font: 500 12px var(--font); color: var(--accent); text-decoration: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-cell__link:hover{ text-decoration: underline; }

/* Salary — модалка выбора налогов мастера */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-picker{ display: flex; flex-direction: column; gap: 8px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-picker__item{ display: flex; align-items: center; gap: 8px; font: 500 13px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-picker__item--off{ opacity: .55; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-taxes-picker__hint{ font: 400 12px var(--font); color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   Salary — НАЧИСЛЕНИЯ (accruals dashboard)
   ────────────────────────────────────────────────────────────────────────── */

/* Период-фильтр в шапке: preset select + два input type=date */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-filters{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-filters .field{ height: 34px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-filters__dates{ display: flex; align-items: center; gap: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-filters__sep{ color: var(--text-muted); font: 400 12px var(--font); }

/* «Назад к списку» хлебная крошка над детальным видом */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-back{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font: 500 13px var(--font); color: var(--accent); background: transparent; border: 0; cursor: pointer; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-back:hover{ text-decoration: underline; }

/* Detail-карточки — секции расчёта (4 штуки по ТЗ: ЗП / план / налоги / корр.) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-section{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-section__head{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; gap: 10px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-section__title{ font: 600 14px var(--font); color: var(--text); margin: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-section__sub{ font: 400 12px var(--font); color: var(--text-muted); margin: 2px 0 0; }

/* Главная разбивка ЗП — таблица «строка = слагаемое формулы» */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown{ display: flex; flex-direction: column; gap: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row{ display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--divider); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row:last-child{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--total{ border-top: 2px solid var(--text); padding-top: 12px; margin-top: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--total .sal-acc-breakdown__label,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--total .sal-acc-breakdown__value{ font: 700 15px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--positive .sal-acc-breakdown__value{ color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--negative .sal-acc-breakdown__value{ color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--muted .sal-acc-breakdown__label,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__row--muted .sal-acc-breakdown__value{ color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__label{ font: 500 13px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__hint{ display: block; font: 400 11.5px var(--font); color: var(--text-muted); margin-top: 2px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__value{ font: 600 14px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; white-space: nowrap; }

/* Раскрываемая строка брейкдауна — <details>/<summary>. Сама details
   — блок-контейнер, summary становится грид-строкой как обычная row. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row{
  display: block; padding: 0; border-bottom: 1px dashed var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row:last-child{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row > summary{
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: baseline; padding: 9px 0; cursor: pointer;
  list-style: none;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row > summary::-webkit-details-marker{ display: none; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row > summary::marker{ content: ''; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row > summary:hover .sal-acc-breakdown__label{ color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row > summary .sal-acc-breakdown__label::before{
  content: ''; display: inline-block; width: 0; height: 0;
  border-left: 4px solid var(--text-muted);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  margin-right: 8px; vertical-align: 1px;
  transition: transform .15s ease;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) details.sal-acc-breakdown__row[open] > summary .sal-acc-breakdown__label::before{
  transform: rotate(90deg);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__detail{
  padding: 4px 0 12px 16px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__detail-empty{
  font: 400 12px var(--font); color: var(--text-muted); padding: 8px 0;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-breakdown__detail-note{
  font: 400 12.5px var(--font); color: var(--text); padding: 8px 0;
}

/* Карточка детализации одного бонус-плана (внутри спойлера «Бонус-планы») */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail-list{ display: flex; flex-direction: column; gap: 10px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail{
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; background: var(--bg-card);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--divider);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__name{
  font: 600 13px var(--font); color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__sum{
  font: 600 13.5px var(--font); font-feature-settings: 'tnum' 1;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__section{
  display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 4px 0;
  font: 400 12.5px var(--font);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__label{
  color: var(--text-muted); font-weight: 500;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-detail__body{
  color: var(--text);
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-cond{
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0;
  flex-wrap: wrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-cond__ok{ color: var(--success); font-weight: 700; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-cond__bad{ color: var(--danger); font-weight: 700; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-cond__actual{
  color: var(--text-muted); font-size: 11.5px; margin-left: 6px;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-cond__sep{
  display: inline-block; padding: 0 8px; color: var(--text-muted); font-weight: 500;
  text-transform: lowercase;
}

/* Список корректировок в детальном виде */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-list{ display: flex; flex-direction: column; gap: 8px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item{ display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item__amount{ font: 600 14px var(--font); font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item__amount--bonus{ color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item__amount--penalty{ color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item__reason{ font: 500 13px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-item__meta{ font: 400 11.5px var(--font); color: var(--text-muted); margin-top: 2px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-adj-empty{ font: 400 13px var(--font); color: var(--text-muted); padding: 14px 0; text-align: center; }

/* Кнопки-действия группой в шапке секции */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-section__actions{ display: flex; gap: 6px; flex-wrap: wrap; }

/* Налоги — компактный список применённых */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-list{ display: flex; flex-direction: column; gap: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item{ display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--divider); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item:last-child{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item__name{ font: 500 13px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item__type{ font: 400 11.5px var(--font); color: var(--text-muted); margin-left: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item__pct{ font: 500 12.5px var(--font); color: var(--text-muted); margin-right: 8px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-tax-item__sum{ font: 600 13px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }

/* Plan log — записи бонус-планов */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-list{ display: flex; flex-direction: column; gap: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-plan-item{ display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Кликабельная строка таблицы в режиме все-мастера */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-row{ cursor: pointer; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-row:hover > td{ background: var(--bg-app); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-row__hint{ font: 400 11.5px var(--font); color: var(--text-muted); display: block; margin-top: 2px; }

/* Дневная детализация — единая плотная таблица с group-rows на каждый день.
   Один thead на всё (sticky), компактные ячейки, day-row выделена фоном. */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table{ width: 100%; border-collapse: collapse; font: 400 12.5px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table th,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table td{ padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--divider); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table thead th{ font: 500 11px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-card); position: sticky; top: 0; z-index: 2; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table tbody tr:last-child td{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .num{ text-align: right; font-feature-settings: 'tnum' 1; white-space: nowrap; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .kind{ display: inline-block; padding: 1px 6px; border-radius: 4px; font: 600 10px var(--font); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; vertical-align: 1px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .kind--svc{ background: var(--accent-soft); color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .kind--good{ background: var(--info-soft); color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .salary-cell{ font-weight: 600; }

/* Group-row для дня — выделяется фоном, занимает всю ширину */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__table .sal-acc-day__group td{
  background: var(--bg-app); padding: 8px 12px; border-top: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__title{ font: 600 12.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__meta{ font: 400 11.5px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-acc-day__total{ margin-left: auto; font: 600 12.5px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }

/* ─────────────────────────────────────────────────────────────────────────
   Salary — ВЗАИМОРАСЧЁТЫ (settlements ledger)
   ────────────────────────────────────────────────────────────────────────── */

/* Баланс мастера: положительный = должны, отрицательный = переплата, ноль = ок */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-balance{ font: 600 13.5px var(--font); font-feature-settings: 'tnum' 1; white-space: nowrap; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-balance--owe{ color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-balance--over{ color: var(--danger); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-balance--ok{ color: var(--success); }

/* Тип выплаты — chip */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-kind{ display: inline-block; padding: 1px 8px; border-radius: 10px; font: 600 10.5px var(--font); text-transform: uppercase; letter-spacing: 0.04em; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-kind--advance{ background: var(--accent-soft); color: var(--accent); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-kind--salary{ background: var(--success-soft); color: var(--success); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-kind--bonus{ background: var(--info-soft); color: var(--info); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-kind--other{ background: var(--bg-app); color: var(--text-muted); border: 1px solid var(--border); }

/* Раскрытая под-таблица выплат внутри строки мастера */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts{ display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__row{ display: grid; grid-template-columns: 110px 90px 1fr 130px auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__date{ font: 500 12.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__amount{ font: 600 13px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__comment{ font: 400 12.5px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__meta{ font: 400 11.5px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__empty{ padding: 10px 12px; color: var(--text-muted); font: 400 12.5px var(--font); }

@media (max-width: 700px){
  :is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-payouts__row{ grid-template-columns: 1fr 1fr; }
}

/* Кнопки быстрых сумм в модалке выплаты */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-quick{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-quick__btn{ padding: 4px 10px; background: var(--bg-app); border: 1px solid var(--border); border-radius: 999px; font: 500 12px var(--font); color: var(--text); cursor: pointer; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-set-quick__btn:hover{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────
   Salary — ОТЧЁТ (свод по филиалу + расчётные листки)
   ────────────────────────────────────────────────────────────────────────── */

/* Tabs: По филиалу / Расчётные листки */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .rpt-tabs{ display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .rpt-tabs__btn{ padding: 6px 14px; background: transparent; border: 0; border-radius: 6px; font: 500 13px var(--font); color: var(--text-muted); cursor: pointer; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .rpt-tabs__btn.is-active{ background: var(--bg-card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* Контейнер всех листков */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listki{ display: flex; flex-direction: column; gap: 16px; }

/* Один расчётный листок */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; page-break-inside: avoid; break-inside: avoid; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--text); margin-bottom: 16px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__title{ font: 700 18px var(--font); color: var(--text); margin: 0 0 4px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__sub{ font: 400 12.5px var(--font); color: var(--text-muted); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__summary{ text-align: right; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__big{ font: 700 22px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__sublabel{ font: 400 12px var(--font); color: var(--text-muted); margin-top: 2px; }

:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__section{ margin-bottom: 16px; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__sectionhead{ display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--divider); margin-bottom: 8px; font: 600 14px var(--font); color: var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__sectiontotal{ font: 600 14px var(--font); font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__sectionmeta{ font: 400 12px var(--font); color: var(--text-muted); margin: 4px 0 8px; }

/* Внутренняя таблица оборота в листке */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table{ width: 100%; border-collapse: collapse; margin: 6px 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table th,
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table td{ padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--divider); font: 400 12.5px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table th{ font: 500 11px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-app); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table .num{ text-align: right; font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-table tr:last-child td{ border-bottom: 0; }

/* Простой list-item внутри секции (для Гарант/Оклад, бонус-планов, корректировок) */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-line{ display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--divider); font: 400 13px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-line:last-child{ border-bottom: 0; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-line > span:last-child{ font-feature-settings: 'tnum' 1; white-space: nowrap; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-extras{ margin-top: 8px; }

/* Итоги внизу листка */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__totals{ margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--text); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__totalrow{ display: flex; justify-content: space-between; padding: 4px 0; font: 500 13.5px var(--font); }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__totalrow > span:last-child{ font-feature-settings: 'tnum' 1; }
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .sal-rpt-listok__totalrow--final{ font-size: 15px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--divider); }

/* Print-friendly: убираем sidebar/header/buttons, чтобы шёл только контент листков */
@media print {
  .salary-page .sal-side,
  .salary-page .sal-head__actions,
  .salary-page .rpt-tabs,
  .salary-page .sal-side__group,
  .salary-page .callout--warning{
    display: none !important;
  }
  .salary-page .sal-rpt-listok{ box-shadow: none; border: 1px solid #ddd; margin-bottom: 12px; page-break-after: auto; }
  .salary-page .sal-main{ padding: 0; }
  .salary-page .kpi-grid{ display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Reports — транспонированная таблица (мастера — колонки, метрики — строки)
   ────────────────────────────────────────────────────────────────────────── */
.report-viewer .data-table.data-table--transposed { table-layout: auto; }
.report-viewer .data-table.data-table--transposed th,
.report-viewer .data-table.data-table--transposed td { white-space: nowrap; overflow: visible; text-overflow: unset; width: auto; }
.report-viewer .data-table.data-table--transposed th:first-child {
    position: sticky; left: 0; z-index: 3;
    background: #f8f9fa;
    width: 220px; min-width: 220px; max-width: 220px;
    white-space: normal; word-break: break-word;
    overflow: visible; text-overflow: unset;
}
.report-viewer .data-table.data-table--transposed td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    /* Фиксированная ширина обязательна: свёрнутые строки (display:none) не
       участвуют в auto-layout, и колонка схлопывалась до min-width — длинные
       названия услуг переносились по 5–8 строк, раздувая всю таблицу. */
    width: 220px; min-width: 220px; max-width: 220px;
    white-space: normal; word-break: break-word;
    overflow: visible; text-overflow: unset;
}
.report-viewer .data-table.data-table--transposed tr:hover td:first-child { background: #fafbfc; }
.report-viewer .data-table.data-table--transposed .table-subheader-row td {
    background: #f8fafc;
    font-size: 0.6875rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding-top: 0.875rem; border-top: 1px solid #e5e7eb;
}
.report-viewer .data-table.data-table--transposed .table-subheader-row:hover td,
.report-viewer .data-table.data-table--transposed .table-subheader-row td:first-child,
.report-viewer .data-table.data-table--transposed .table-subheader-row:hover td:first-child { background: #f8fafc; }

/* Цветовая индикация коэффициента (milena_upsell) */
.report-viewer .ratio-high { color: #166534; font-weight: 700; }
.report-viewer .ratio-mid  { color: #16a34a; }
.report-viewer .ratio-low  { color: #94a3b8; }

/* Итоговая строка «Средний чек» (milena_upsell) — зелёная подсветка */
.report-viewer .data-table.data-table--transposed tr.row-total td,
.report-viewer .data-table.data-table--transposed tr.row-total td:first-child,
.report-viewer .data-table.data-table--transposed tr.row-total:hover td,
.report-viewer .data-table.data-table--transposed tr.row-total:hover td:first-child {
    background: var(--success-soft);
    color: var(--success);
    font-weight: 700;
}

/* Подстрока декомпозиции чека (milena_upsell) */
.report-viewer .data-table.data-table--transposed .table-sub-row td { color: var(--text-muted); font-size: 0.8125rem; }
.report-viewer .data-table.data-table--transposed .table-sub-row td:first-child { padding-left: 1.5rem !important; }
.report-viewer .data-table.data-table--transposed .table-sub-row:hover td { background: var(--bg-hover, #f8fafc); }
.report-viewer .data-table.data-table--transposed .table-sub-row:hover td:first-child { background: var(--bg-hover, #f8fafc); }
/* Строка услуги в разбивке — глубже смещена, чтобы отделяться от подзаголовка раздела */
.report-viewer .data-table.data-table--transposed .table-sub-row--svc td:first-child { padding-left: 2.25rem !important; }

/* Подсветка доли допродаж (milena_upsell): 0% — не оказана, до 20% — средняя
   по рынку, выше — сильная. */
.report-viewer .pct-flag {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.report-viewer .pct-flag--zero { background: var(--danger-soft);  color: var(--danger); }
.report-viewer .pct-flag--mid  { background: var(--warning-soft); color: var(--warning); }
.report-viewer .pct-flag--high { background: var(--success-soft); color: var(--success); }

/* ── Раскрывающиеся блоки + древовидные линии (milena_upsell) ───────────────
   Родители («Стоимость стрижки», «Ср. чек (осн. услуги)», «Ср. чек (доп. и
   прем. услуги)») сворачивают детей стрелкой; вложенность показана
   направляющими линиями, как в факторном анализе. */
.report-viewer .data-table.data-table--transposed tr.mu-parent td { font-weight: 600; }
.report-viewer .data-table.data-table--transposed tr.mu-parent td:first-child { background: #fff; }
.report-viewer .data-table.data-table--transposed td.mu-name { position: relative; }
.report-viewer .mu-tgl {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: var(--radius-xs); color: var(--text-muted);
    flex-shrink: 0; transition: transform .15s, color .12s;
}
.report-viewer .mu-tgl:hover { color: var(--text); }
.report-viewer .mu-tgl.is-open { transform: rotate(90deg); }
.report-viewer .mu-tgl-sp { display: inline-block; width: 18px; }
.report-viewer .data-table.data-table--transposed tr.mu-hidden,
.report-viewer .data-table.data-table--transposed tr.mu-hidden:hover { display: none; }
.report-viewer .mu-guide { position: absolute; top: 0; bottom: 0; left: 20px; width: 18px; pointer-events: none; }
.report-viewer .mu-guide--tee::before,
.report-viewer .mu-guide--corner::before {
    content: ''; position: absolute; left: 8px; top: 0;
    border-left: 1px solid #cbd5e1;
}
.report-viewer .mu-guide--tee::before { bottom: 0; }
.report-viewer .mu-guide--corner::before { height: 50%; }
.report-viewer .mu-guide--tee::after,
.report-viewer .mu-guide--corner::after {
    content: ''; position: absolute; left: 8px; top: 50%; width: 9px;
    border-top: 1px solid #cbd5e1;
}
.report-viewer .data-table.data-table--transposed tr.mu-l1 td:first-child { padding-left: 2.75rem !important; }
/* ЗП-строки: жирные, серый фон (ТЗ клиента) */
.report-viewer .data-table.data-table--transposed tr.mu-salary td,
.report-viewer .data-table.data-table--transposed tr.mu-salary td:first-child,
.report-viewer .data-table.data-table--transposed tr.mu-salary:hover td,
.report-viewer .data-table.data-table--transposed tr.mu-salary:hover td:first-child {
    background: #f1f5f9;
    font-weight: 600;
}
/* % от стоимости стрижки ниже 120% — красный (ТЗ клиента) */
.report-viewer .ratio-red { color: var(--danger); font-weight: 600; }

/* Рейтинг мастеров (masters_rating): 16 колонок. Включаем горизонтальный
   скролл — content-based раскладка вместо глобального table-layout:fixed/100%,
   чтобы таблица выходила за контейнер и срабатывал .table-scroll. Первую
   колонку (имя мастера) закрепляем при прокрутке. */
.report-viewer .data-table--mr {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}
.report-viewer .data-table--mr th,
.report-viewer .data-table--mr td { white-space: nowrap; }

/* sticky-колонка «Мастер» */
.report-viewer .data-table--mr th:first-child,
.report-viewer .data-table--mr td:first-child {
    width: auto;
    min-width: 160px;
    position: sticky;
    left: 0;
    z-index: 2 !important;
    white-space: nowrap;
    background: var(--bg-card, #fff);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}
.report-viewer .data-table--mr thead th:first-child { z-index: 3; }

/* =====================================================================
   Modal backdrop + container (.ab-modal-back / .ab-modal) — общий паттерн.
   Используется в модалках /abonements и в редакторе корректировок /salary.
   Селекторы без descendant под page-scope — модалка может рендериться
   в любом месте DOM. ===================================================== */
.ab-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1000; display:none; align-items:center; justify-content:center; padding: 16px; }
.ab-modal-back.is-open { display: flex; }
.ab-modal { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 540px; max-width: 100%; max-height: 90vh; display:flex; flex-direction:column; overflow:hidden; font: 400 13.5px var(--font); color: var(--text); }
.ab-modal__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding: 16px 20px; border-bottom: 1px solid var(--divider); }
.ab-modal__title { font: 600 15px var(--font); color: var(--text); margin: 0 0 2px; }
.ab-modal__sub { font: 400 12.5px var(--font); color: var(--text-muted); margin: 0; }
.ab-modal__close { background: transparent; border: 0; cursor:pointer; color: var(--text-muted); padding: 4px; border-radius: var(--radius-xs); }
.ab-modal__close:hover { color: var(--text); background: var(--hover); }
.ab-modal__foot { display:flex; gap:8px; justify-content:flex-end; padding: 12px 20px; border-top: 1px solid var(--divider); background: var(--hover); }
.ab-modal .ab-form { display:flex; flex-direction:column; gap: 14px; padding: 18px 20px; overflow-y:auto; }
.ab-modal .ab-form__row { display:flex; flex-direction:column; gap: 6px; }
.ab-modal .ab-form__row--inline { flex-direction: row; align-items:center; gap:8px; }
.ab-modal .ab-form__label { font: 600 11px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.ab-modal .ab-form__hint { font: 400 12px var(--font); color: var(--text-muted); }
.ab-modal .ab-form__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Атрибут [hidden] (специфичность 0,0,1) перебивается правилами выше:
   .ab-modal .ab-form, .ab-modal .fq и .ab-modal .btn задают display, и
   спрятанный шаг окна остаётся на экране. Так и вышло с окном входа в
   Telegram: код и поле облачного пароля показывались одновременно, а окно
   выглядело так, будто пароль спрашивают до сканирования. */
.ab-modal .ab-form[hidden],
.ab-modal .fq[hidden],
.ab-modal .btn[hidden] { display: none !important; }

/* Large button modifier */
:is(.billing-page, .salary-page, .abonements-page, .expert-page, .payaccounts-page, .master-page, .masters-page, .funnels-page, .client-lists-page, .modal-layer) .btn--lg{ height: 44px; padding: 0 20px; font-size: 14px; border-radius: 9px; }

/* =====================================================================
   DASHBOARD — состояние первой синхронизации (skeleton-гейт).
   Перенесено из docs-референса «Дашборд · первая синхронизация».
   Scope #syncingState — стили не утекают на остальной дашборд.
   ===================================================================== */
#syncingState .dsync-banner{
  background: linear-gradient(135deg, var(--info-soft) 0%, var(--info-soft) 100%);
  border: 1px solid var(--info-line);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: grid; grid-template-columns: 44px 1fr;
  gap: 16px; align-items: center;
  margin-bottom: 22px;
}
#syncingState .dsync-banner__icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--info); color: var(--bg-card);
  display: grid; place-items: center;
  position: relative;
}
#syncingState .dsync-banner__icon::after{
  content: ''; position: absolute; inset: -4px;
  border: 2px solid var(--info);
  border-top-color: transparent;
  border-radius: 50%;
  animation: dsync-spin 1.1s linear infinite;
  opacity: .6;
}
@keyframes dsync-spin{ to{ transform: rotate(360deg); } }
#syncingState .dsync-banner__title{ font: 700 15px var(--font); color: var(--text); margin: 0 0 4px; }
#syncingState .dsync-banner__desc{ font: 500 13px var(--font); color: var(--text-muted); margin: 0; line-height: 1.5; }
#syncingState .dsync-banner__desc b{ color: var(--info); font-weight: 700; }
#syncingState .dsync-banner__bar{
  margin-top: 10px;
  height: 4px; border-radius: var(--radius-xs);
  background: var(--info-line);
  overflow: hidden;
}
#syncingState .dsync-banner__bar > i{
  display: block; height: 100%; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--info), var(--info));
  width: 0;
  animation: dsync-bar 14s ease-out forwards;
}
@keyframes dsync-bar{
  0%{ width: 4%; } 20%{ width: 22%; } 50%{ width: 48%; }
  80%{ width: 72%; } 100%{ width: 88%; }
}

/* Skeleton shimmer */
@keyframes dsync-shimmer{
  0%{ background-position: -240px 0; }
  100%{ background-position: calc(240px + 100%) 0; }
}
@keyframes dsync-shimmer-v{
  0%{ background-position: 0 -240px; }
  100%{ background-position: 0 calc(240px + 100%); }
}
#syncingState .dsync-skel{
  display: block;
  background: #eef1f5;
  background-image: linear-gradient(90deg, #eef1f5 0%, #f7f9fc 40%, #eef1f5 80%);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: dsync-shimmer 1.5s linear infinite;
}
#syncingState .dsync-skel--text { height: 10px; border-radius: 4px; }
#syncingState .dsync-skel--label{ height: 11px; border-radius: 4px; }
#syncingState .dsync-skel--title{ height: 28px; border-radius: 6px; }
#syncingState .dsync-skel--row  { height: 14px; border-radius: 4px; }

/* Ширины skeleton-полос — модификаторы (вместо inline style=width) */
#syncingState .dsync-w-20{ width: 20%; }
#syncingState .dsync-w-22{ width: 22%; }
#syncingState .dsync-w-25{ width: 25%; }
#syncingState .dsync-w-28{ width: 28%; }
#syncingState .dsync-w-30{ width: 30%; }
#syncingState .dsync-w-32{ width: 32%; }
#syncingState .dsync-w-35{ width: 35%; }
#syncingState .dsync-w-38{ width: 38%; }
#syncingState .dsync-w-40{ width: 40%; }
#syncingState .dsync-w-50{ width: 50%; }
#syncingState .dsync-w-55{ width: 55%; }
#syncingState .dsync-w-58{ width: 58%; }
#syncingState .dsync-w-60{ width: 60%; }
#syncingState .dsync-w-65{ width: 65%; }

/* KPI grid 3×2 */
#syncingState .dsync-kpi-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 18px;
}
@media (max-width: 980px){ #syncingState .dsync-kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ #syncingState .dsync-kpi-grid{ grid-template-columns: 1fr; } }

#syncingState .dsync-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative;
}
#syncingState .dsync-card__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#syncingState .dsync-card__value{ margin-bottom: 8px; }
#syncingState .dsync-card__sub  { margin-bottom: 18px; }
#syncingState .dsync-card__divider{ height: 1px; background: var(--divider); margin: 0 -24px 14px; }
#syncingState .dsync-card__row  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#syncingState .dsync-card__row:last-child{ margin-bottom: 0; }
#syncingState .dsync-card__hint{ position: absolute; top: 22px; right: 22px; font: 600 10.5px var(--font); color: var(--text-light); letter-spacing: .06em; text-transform: uppercase; }

/* Chart skeleton */
#syncingState .dsync-chart{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-top: 18px; }
#syncingState .dsync-chart__head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
#syncingState .dsync-chart__head-left{ display: flex; align-items: center; gap: 18px; }
#syncingState .dsync-chart__body{ height: 230px; position: relative; }
#syncingState .dsync-chart__line{ position: absolute; left: 0; right: 0; height: 1px; background: var(--divider); }
#syncingState .dsync-chart__line:nth-child(1){ top: 0; }
#syncingState .dsync-chart__line:nth-child(2){ top: 25%; }
#syncingState .dsync-chart__line:nth-child(3){ top: 50%; }
#syncingState .dsync-chart__line:nth-child(4){ top: 75%; }
#syncingState .dsync-chart__line:nth-child(5){ bottom: 0; }
#syncingState .dsync-chart__bars{ position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 18px; padding-bottom: 4px; }
#syncingState .dsync-chart__bar{
  flex: 1;
  background: #eef1f5;
  background-image: linear-gradient(180deg, #eef1f5 0%, #f7f9fc 40%, #eef1f5 80%);
  background-size: 100% 240px;
  background-repeat: no-repeat;
  border-radius: 6px 6px 2px 2px;
  animation: dsync-shimmer-v 1.6s linear infinite;
}
#syncingState .dsync-chart__bar--38{ height: 38%; }
#syncingState .dsync-chart__bar--22{ height: 22%; }
#syncingState .dsync-chart__bar--54{ height: 54%; }
#syncingState .dsync-chart__bar--76{ height: 76%; }
#syncingState .dsync-chart__bar--92{ height: 92%; }
#syncingState .dsync-chart__bar--64{ height: 64%; }
#syncingState .dsync-chart__bar--44{ height: 44%; }
#syncingState .dsync-chart__bar--28{ height: 28%; }

/* AI tip — нижняя плашка «что мы загружаем» */
#syncingState .dsync-tip{
  margin-top: 22px;
  background: var(--info-soft);
  border: 1px solid var(--info-line);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
}
#syncingState .dsync-tip__icon{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--info); color: #fff;
  display: grid; place-items: center;
}
#syncingState .dsync-tip__title{ font: 700 13px var(--font); color: var(--info); margin: 1px 0 4px; }
#syncingState .dsync-tip__body { font: 400 13px var(--font); color: var(--text); line-height: 1.5; margin: 0; }
#syncingState .dsync-tip__body b{ font-weight: 600; }

/* ── Toolbar export buttons (Excel/PDF) ──────────────────────────────────────
   Перенос из локального <style> reports.php — общий компонент кнопок выгрузки.
   Используется на отчётах филиала и на дашборде сети. Hex сохранены как в
   оригинале (пиксель-идентичность); токенизировать при следующем касании. */
.vtool-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 36px; padding: 0 10px; border-radius: 8px;
    border: 1px solid #e9ecf1; background: #fff;
    font-size: 13px; font-weight: 500; color: #64748b;
    cursor: pointer; transition: all .12s; white-space: nowrap;
    text-decoration: none; line-height: 1.2;
}
.vtool-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.vtool-btn:hover { border-color: #d1d5db; color: #0f172a; background: #fafbfc; }
.vtool-btn__label { font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.vtool-btn--export-xls:hover { color: #117a4a; border-color: #b6e1cb; background: #f0fdf6; }
.vtool-btn--export-pdf:hover { color: #b91c1c; border-color: #fbcaca; background: #fef5f5; }

/* =====================================================================
   §5 · SKELETONS — перенос из docs/design/ui-kit.html §5 (design-rules §5/§6.5).
   Каноничный shimmer + .skel / .skel-grid / .skel-chart / .skel-list-row.
   ===================================================================== */
/* Имя keyframes уникальное (skel-shimmer): в legacy core.css уже есть два разных
   @keyframes shimmer — коллизия зависела бы от порядка загрузки. */
@keyframes skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skel {
  display: block;
  background: #eef1f5;
  background-image: linear-gradient(90deg, #eef1f5 0%, #f6f8fb 40%, #eef1f5 80%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: skel-shimmer 1.4s linear infinite;
}
.skel--text  { height: 11px; border-radius: 4px; }
.skel--title { height: 18px; border-radius: 5px; }
.skel--circle{ border-radius: 50%; }
.skel--block { height: 100%; border-radius: var(--radius-sm); }
.skel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.skel-card .skel + .skel { margin-top: 10px; }
.skel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) { .skel-grid { grid-template-columns: repeat(2, 1fr); } }
.skel-list-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.skel-list-row:last-child { border-bottom: 0; }
.skel-list-row__main { flex: 1; min-width: 0; }
.skel-chart { height: 160px; position: relative; padding: 14px 0 0; }
.skel-chart__bars { display: flex; align-items: end; gap: 10px; height: 100%; }
.skel-chart__bars > .skel { width: 100%; height: 100%; border-radius: 6px 6px 2px 2px; }

/* Загрузка виджета дашборда: DS-skeleton (.dash-widget__skel) поверх контента.
   Контент остаётся в потоке (visibility:hidden), чтобы Chart.js корректно
   измерял размеры canvas при рендере; skeleton — каноничный .skel из ui-kit. */
.dash-widget.is-loading { position: relative; }
.dash-widget.is-loading > :not(.dash-widget__skel) { visibility: hidden; }
.dash-widget__skel { position: absolute; inset: 0; display: flex; }
.dash-widget__skel > * { flex: 1; min-width: 0; }   /* одиночная .skel-card / .skel-grid заполняет виджет */

/* Кнопка кита (§ «Кнопки») внутри виджета дашборда — пустое состояние с призывом
   к действию («Заполнить планы», «Перейти в настройки»). Дашборд не входит в
   page-скоупы .btn выше, а core.css оставляет .btn без фона и капсом. */
.dash-widget .btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text);
  font: 600 13px var(--font); text-transform: none; letter-spacing: normal; text-decoration: none;
  box-shadow: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.dash-widget .btn:hover { background: var(--hover); border-color: var(--text-faint); }
.dash-widget .btn--primary { background: var(--accent); color: var(--bg-card); border-color: var(--accent); }
.dash-widget .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-card); }
/* Пустое состояние виджета с призывом к действию («Выполнение плана»,
   «Загрузка по дням»): текст по центру и кит-кнопка под ним. */
.dash-widget__empty { text-align: center; padding: 12px 0 4px; }
.dash-widget__empty p { max-width: 560px; margin: 0 auto 14px; color: var(--text-muted); font: 400 13.5px/1.55 var(--font); }
.dash-widget__empty p:last-child { margin-bottom: 0; }
/* Блок под графиком (рекомендация, подсказка) с отступом от графика. */
.dash-widget__note { margin-top: 12px; }
.dash-widget__skel .skel-chart { height: 100%; }    /* бары графика заполняют карточку */

/* Сворачиваемая карточка-виджет: .card как <details>, summary — заголовок-кнопка
   (нативный disclosure, паттерн <details>/<summary> как в брейкдаунах; chevron-
   треугольник поворачивается при [open]). display:block обязателен — .dash-widget
   > .card имеет display:flex, а flex на <details> ломает нативный collapse. */
.dash-widget > details.card--fold { display: block; }
details.card--fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details.card--fold > summary::-webkit-details-marker { display: none; }
details.card--fold > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--text-muted);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s ease;
}
details.card--fold[open] > summary::after { transform: rotate(90deg); }
.dash-widget > details.card--fold:not([open]) > summary { margin-bottom: 0; }
.card-title__count { font-weight: 500; font-size: 12px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* =====================================================================
   СИСТЕМА УВЕДОМЛЕНИЙ — тосты, confirm-диалоги, page-баннеры
   Глобальные (не scoped): префикс .sl-* уникален, с core.css не конфликтует.
   Движок — theme/js/notifications.js (window.Notify). Все значения — токены :root.
   ===================================================================== */

/* --- 1. ТОСТЫ (транзиентный слой) --- */
.sl-toast-layer{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px;
  width:380px; max-width:calc(100vw - 24px);
  z-index:9000; pointer-events:none;
}
@media (max-width:600px){
  .sl-toast-layer{
    top:auto; bottom:calc(16px + env(safe-area-inset-bottom));
    left:12px; right:12px; transform:none; width:auto;
    flex-direction:column-reverse;
  }
}
.sl-toast{
  position:relative; display:flex; gap:11px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:13px 15px 14px 17px; overflow:hidden; pointer-events:auto;
  animation:sl-toast-in .22s var(--ease);
}
@media (max-width:600px){ .sl-toast{ touch-action:none; } }
.sl-toast.is-leaving{
  opacity:0; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
@media (max-width:600px){ .sl-toast.is-leaving{ transform:translateY(16px); } }
.sl-toast__strip{ position:absolute; left:0; top:0; bottom:0; width:3px; }
.sl-toast__icon{
  width:22px; height:22px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.sl-toast__icon svg{ width:13px; height:13px; }
.sl-toast__main{ flex:1; min-width:0; }
.sl-toast__head{ display:flex; align-items:center; gap:7px; }
.sl-toast__title{ font:600 13px/1.4 var(--font); color:var(--text); }
.sl-toast__count{
  font:600 11px var(--font); color:var(--text-light);
  background:var(--hover); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:0 5px; font-variant-numeric:tabular-nums;
}
.sl-toast__desc{ font:400 12.5px/1.5 var(--font); color:var(--text-muted); margin-top:2px; }
.sl-toast__action{
  margin-top:7px; font:600 12.5px var(--font); color:var(--accent);
  background:none; border:0; padding:0; cursor:pointer;
}
.sl-toast__action:hover{ text-decoration:underline; }
.sl-toast__close{
  flex-shrink:0; border:0; background:transparent; color:var(--text-light);
  padding:3px; border-radius:var(--radius-xs); cursor:pointer; display:flex;
}
.sl-toast__close:hover{ background:var(--hover); color:var(--text); }
.sl-toast__bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  opacity:.5; transform-origin:left;
  animation:sl-toast-bar linear forwards;
}
.sl-toast.is-paused .sl-toast__bar{ animation-play-state:paused; }
.sl-toast--success .sl-toast__strip,
.sl-toast--success .sl-toast__icon,
.sl-toast--success .sl-toast__bar{ background:var(--success); }
.sl-toast--danger  .sl-toast__strip,
.sl-toast--danger  .sl-toast__icon,
.sl-toast--danger  .sl-toast__bar{ background:var(--danger); }
.sl-toast--warning .sl-toast__strip,
.sl-toast--warning .sl-toast__icon,
.sl-toast--warning .sl-toast__bar{ background:var(--warning); }
.sl-toast--info    .sl-toast__strip,
.sl-toast--info    .sl-toast__icon,
.sl-toast--info    .sl-toast__bar{ background:var(--info); }
@keyframes sl-toast-in{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} }
@media (max-width:600px){ .sl-toast{ animation-name:sl-toast-in-up; } }
@keyframes sl-toast-in-up{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
@keyframes sl-toast-bar{ from{transform:scaleX(1);} to{transform:scaleX(0);} }

/* --- 2. CONFIRM-ДИАЛОГ (модальное подтверждение) --- */
.sl-overlay{
  /* z-index выше любых страничных модалок (напр. .s2-modal-overlay 9999
     в client-flow): confirm всегда открывается поверх открытой модалки. */
  position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:10000;
  display:flex; animation:sl-fade var(--dur-base) var(--ease);
}
.sl-dialog{
  margin:auto; width:440px; max-width:calc(100vw - 32px);
  background:var(--bg-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:sl-pop var(--dur-base) var(--ease);
}
.sl-dialog__top{ padding:22px 22px 6px; }
.sl-dialog__row{ display:flex; align-items:flex-start; gap:14px; }
.sl-dialog__col{ flex:1; min-width:0; padding-top:1px; }
.sl-dialog__icon{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.sl-dialog--danger .sl-dialog__icon{ background:var(--danger-soft); color:var(--danger); }
.sl-dialog__step{
  font:600 11px var(--font); letter-spacing:.05em; text-transform:uppercase;
  color:var(--danger); margin-bottom:6px;
}
.sl-dialog__title{ font:600 17px var(--font); letter-spacing:-.01em; color:var(--text); margin-bottom:7px; }
.sl-dialog__body{ font:400 13.5px/1.6 var(--font); color:var(--text-muted); }
.sl-dialog__input{
  margin-top:14px; width:100%; min-height:78px; resize:vertical;
  padding:10px 12px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); font:400 13.5px/1.5 var(--font);
  color:var(--text); background:var(--bg-card); outline:none;
}
.sl-dialog__input:focus{ border-color:var(--text-faint); box-shadow:var(--focus-ring); }
.sl-dialog__foot{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px;
  padding:16px 22px; border-top:1px solid var(--divider); background:var(--hover);
}
.sl-btn{
  height:36px; padding:0 16px; border-radius:var(--radius-sm);
  border:1px solid transparent; font:600 13px var(--font); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.sl-btn:active{ transform:translateY(.5px); }
.sl-btn--ghost{ background:transparent; color:var(--text-muted); padding:0 14px; }
.sl-btn--ghost:hover{ background:var(--hover); color:var(--text); }
.sl-btn--ghost:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.sl-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.sl-btn--primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.sl-btn--primary:focus-visible{ outline:none; box-shadow:var(--focus-ring-accent); }
.sl-btn--danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.sl-btn--danger:hover{ filter:brightness(.92); }
.sl-btn--danger:focus-visible{ outline:none; box-shadow:var(--focus-ring-danger); }
@media (max-width:600px){
  .sl-overlay{ align-items:flex-end; }
  .sl-dialog{
    width:100%; max-width:100%;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    animation:sl-sheet-up var(--dur-base) var(--ease);
  }
  .sl-dialog__foot{ flex-direction:column-reverse; }
  .sl-btn{ width:100%; height:46px; }
}
@keyframes sl-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes sl-pop{ from{opacity:0; transform:translateY(8px) scale(.99);} to{opacity:1; transform:none;} }
@keyframes sl-sheet-up{ from{transform:translateY(100%);} to{transform:translateY(0);} }

/* --- 3. PAGE-БАННЕРЫ (постоянное состояние страницы, НЕ тосты) --- */
.sl-banner{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 18px; border-radius:var(--radius);
  border:1px solid var(--info-line); background:var(--info-soft);
}
.sl-banner__icon{ flex-shrink:0; color:var(--info); display:flex; }
.sl-banner__main{ flex:1; min-width:0; }
.sl-banner__title{ font:600 13.5px var(--font); color:var(--text); }
.sl-banner__desc{ font:400 12.5px var(--font); color:var(--text-muted); margin-top:2px; }
.sl-banner--success{ background:var(--success-soft); border-color:var(--success-line); }
.sl-banner--success .sl-banner__icon{ color:var(--success); }
.sl-banner--warning{ background:var(--warning-soft); border-color:var(--warning-line); }
.sl-banner--warning .sl-banner__icon{ color:var(--warning); }
.sl-banner--danger{ background:var(--danger-soft); border-color:var(--danger-line); }
.sl-banner--danger .sl-banner__icon{ color:var(--danger); }
/* нижний отступ, когда баннер стоит перед контентом в обычном потоке */
.sl-banner--block, .sl-callout--block{ margin-bottom:16px; }
@media (max-width:600px){ .sl-banner{ flex-direction:column; align-items:flex-start; } }
.sl-callout{
  display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius);
  border:1px solid var(--tip-line); background:var(--tip-soft);
}
.sl-callout__icon{ flex-shrink:0; color:var(--tip); margin-top:1px; }
.sl-callout__title{ font:600 13px var(--font); color:var(--text); margin-bottom:3px; }
.sl-callout__body{ font:400 13px/1.55 var(--font); color:var(--text); }
.sl-callout--info{ background:var(--info-soft); border-color:var(--info-line); }
.sl-callout--info .sl-callout__icon{ color:var(--info); }
.sl-callout__body em{
  font-style:normal; font-weight:600; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-xs);
  padding:1px 6px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .sl-toast,.sl-overlay,.sl-dialog,.sl-toast__bar{ animation-duration:.001ms !important; }
}

/* =====================================================================
   РАСПИСАНИЕ (.schedule-page) — шахматка «время × мастера» (ClientFlow)
   =====================================================================
   Порт design_handoff_schedule/css/schedule.css. Классы с префиксом sch-
   и скоупом .schedule-page: имена оригинала (.col, .avatar, .seg, .legend)
   конфликтуют с core.css / clientflow.css.

   Геометрия событий — данные, поэтому передаётся ТОЛЬКО через CSS-переменные
   (контракт хендоффа):
     --masters     число колонок-мастеров (шаблон грида)
     --sch-grid-h  высота тела дня, px (часы окна × --sch-hour-h)
     --evt-top     смещение карточки от начала окна, px
     --evt-h       высота карточки, px
     --evt-l/--evt-r  сдвиги слева/справа в % (полосы при наложении записей)
     --top         позиция метки часа в гаттере, px
     --now-top     позиция линии «сейчас», px
     --load        ширина полоски загрузки, %
     --heat        доля занятости часа 0–100% (плотность дня)
     --tint        тонировка ячейки недели 0–100% от акцента
   ===================================================================== */

.schedule-page {
  --sch-hour-h: 74px; --sch-gutter-w: 58px; --sch-col-min: 190px;
  /* как в хендоффе (schedule.css) и по design-rules §2 — правильные глифы «1»/«6» */
  font-feature-settings: 'cv11' 1, 'ss01' 1;
}

/* ---- шапка страницы ---- */
.schedule-page .sch-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.schedule-page .sch-head h1{ font:700 24px/1.05 var(--font); letter-spacing:-.02em; margin:0; color:var(--text); }
.schedule-page .sch-head__sub{ font:500 13px var(--font); color:var(--text-muted); margin:6px 0 0; }

/* ---- тулбар ---- */
.schedule-page .sch-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.schedule-page .sch-toolbar__spacer{ flex:1; min-width:8px; }

.schedule-page .sch-seg{
  display:inline-flex; gap:2px; padding:2px;
  background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}
.schedule-page .sch-seg__btn{
  border:0; background:transparent; cursor:pointer;
  font:600 12.5px var(--font); color:var(--text-muted);
  padding:6px 15px; border-radius:var(--radius-xs);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.schedule-page .sch-seg__btn:hover{ background:var(--hover); color:var(--text); }
.schedule-page .sch-seg__btn.is-active{ background:var(--accent-soft); color:var(--accent); }
.schedule-page .sch-seg__icon{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0; }

.schedule-page .sch-sel, .schedule-page .sch-in{
  height:34px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--bg-card); color:var(--text); font:600 12.5px var(--font);
}
.schedule-page .sch-sel{
  padding:0 30px 0 11px; cursor:pointer; appearance:none; max-width:200px;
  /* стрелка-шеврон: data-URI не поддерживает var(), %2364748b = --text-muted (как в хендоффе) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.schedule-page .sch-in{ padding:0 11px; font-weight:500; font-size:13px; width:210px; }
.schedule-page .sch-sel:focus, .schedule-page .sch-in:focus{ outline:none; box-shadow:var(--focus-ring); border-color:var(--text-light); }

/* ---- карточка сетки ---- */
.schedule-page .sch-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

.schedule-page .sch-bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--divider);
}
.schedule-page .sch-legend{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.schedule-page .sch-legend__item{ display:inline-flex; align-items:center; gap:6px; font:600 11.5px var(--font); color:var(--text-muted); }
.schedule-page .sch-legend__dot{ width:10px; height:10px; border-radius:3px; border:1.5px solid; }
.schedule-page .sch-legend__dot--came     { background:var(--success-soft); border-color:var(--success); }
.schedule-page .sch-legend__dot--confirmed{ background:var(--info-soft);    border-color:var(--info); }
.schedule-page .sch-legend__dot--pending  { background:var(--warning-soft); border-color:var(--warning); }
.schedule-page .sch-legend__dot--noshow   { background:var(--danger-soft);  border-color:var(--danger); }

.schedule-page .sch-density{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.schedule-page .sch-density__label{ font:600 11px var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }
.schedule-page .sch-density__track{ display:flex; gap:2px; width:220px; }
.schedule-page .sch-density__cell{ flex:1; height:20px; border-radius:4px; background:color-mix(in srgb, var(--accent) var(--heat, 0%), var(--bg-card)); }

/* горизонтальный скролл; по вертикали день целиком (скроллится страница) */
.schedule-page .sch-scroll{ overflow-x:auto; overflow-y:visible; }
.schedule-page .sch-inner{ min-width:960px; }

/* три выровненные грид-строки с одним шаблоном колонок */
.schedule-page .sch-row{
  display:grid;
  grid-template-columns:var(--sch-gutter-w) repeat(var(--masters, 1), minmax(var(--sch-col-min), 1fr));
}
.schedule-page .sch-row--head{ position:sticky; top:60px; z-index:6; background:var(--bg-card); border-bottom:1px solid var(--border); }
.schedule-page .sch-row--body{ position:relative; }
.schedule-page .sch-row--footer{ position:sticky; bottom:0; background:var(--bg-card); border-top:1px solid var(--border); }

/* ---- шапка колонки мастера ---- */
.schedule-page .sch-colhead{ padding:10px 12px; border-right:1px solid var(--border); min-width:0; }
.schedule-page .sch-colhead__row{ display:flex; align-items:center; gap:9px; }
.schedule-page .sch-colhead__id{ min-width:0; flex:1; }
.schedule-page .sch-colhead__name{ font:600 13px var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schedule-page .sch-colhead__role{ font:500 11px var(--font); color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:14px; }
.schedule-page .sch-colhead__pct{ font:600 12px var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }

.schedule-page .sch-load{ height:5px; border-radius:999px; background:var(--divider); overflow:hidden; margin-top:8px; }
.schedule-page .sch-load__bar{ height:100%; width:var(--load, 0%); border-radius:999px; background:var(--text-light); }
.schedule-page .sch-load__bar.is-high{ background:var(--accent); }

/* ---- аватар (инициалы на мягкой подложке) ---- */
.schedule-page .sch-ava{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  font:600 11.5px var(--font); text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
}
.schedule-page .sch-ava--info   { color:var(--info);    background:var(--info-soft); }
.schedule-page .sch-ava--success{ color:var(--success); background:var(--success-soft); }
.schedule-page .sch-ava--warning{ color:var(--warning); background:var(--warning-soft); }
.schedule-page .sch-ava--neutral{ color:var(--text-muted); background:var(--hover); }

/* ---- временная шкала ---- */
.schedule-page .sch-gutter{ position:relative; height:var(--sch-grid-h); border-right:1px solid var(--border); }
.schedule-page .sch-gutter__label{
  position:absolute; top:var(--top); right:8px; font:600 10.5px var(--font);
  color:var(--text-light); font-variant-numeric:tabular-nums;
}

/* ---- колонка мастера ---- */
.schedule-page .sch-col{
  position:relative; height:var(--sch-grid-h); border-right:1px solid var(--border);
  background-image:repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--sch-hour-h) - 1px),
    var(--divider) calc(var(--sch-hour-h) - 1px), var(--divider) var(--sch-hour-h));
}

/* ---- карточка записи ---- */
.schedule-page .sch-evt{
  position:absolute;
  left:calc(4px + var(--evt-l, 0%)); right:calc(4px + var(--evt-r, 0%));
  top:var(--evt-top); height:var(--evt-h);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-card); padding:4px 8px; overflow:hidden;
  cursor:pointer; user-select:none;
  transition:box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.schedule-page .sch-evt:hover{ box-shadow:var(--shadow-md); z-index:20; }
.schedule-page .sch-evt.is-dimmed{ opacity:.24; }

/* тон статуса: мягкая заливка + 1px рамка (без левой полосы) */
.schedule-page .sch-evt--came     { background:var(--success-soft); border-color:var(--success-line); }
.schedule-page .sch-evt--confirmed{ background:var(--info-soft);    border-color:var(--info-line); }
.schedule-page .sch-evt--pending  { background:var(--warning-soft); border-color:var(--warning-line); }
.schedule-page .sch-evt--noshow   { background:var(--danger-soft);  border-color:var(--danger-line); }

.schedule-page .sch-evt__top{ display:flex; align-items:center; gap:4px; line-height:1; }
.schedule-page .sch-evt__time{ font:600 10.5px var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.schedule-page .sch-evt__icons{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; color:var(--success); }
.schedule-page .sch-evt__service{ font:600 12px var(--font); color:var(--text); line-height:1.22; margin-top:2px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.schedule-page .sch-evt__meta{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.schedule-page .sch-evt__client{ font:600 11.5px var(--font); color:var(--text); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schedule-page .sch-evt__price{ font:700 11px var(--font); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.schedule-page .sch-evt__new{ background:var(--accent); color:#fff; font:700 8.5px var(--font);
  text-transform:uppercase; letter-spacing:.03em; padding:2px 5px; border-radius:5px; flex-shrink:0; }

/* ---- свободное окно (проявляется на hover, информационно) ---- */
.schedule-page .sch-free{
  position:absolute; left:4px; right:4px; top:var(--evt-top); height:var(--evt-h);
  display:flex; align-items:flex-start; justify-content:flex-start; gap:5px;
  padding:4px 7px; border:1px dashed transparent; border-radius:var(--radius-sm);
  font:500 11px var(--font); color:transparent; background:transparent;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.schedule-page .sch-free > svg{ stroke:currentColor; }
.schedule-page .sch-free:hover{ color:var(--text-muted); background:var(--hover); border-color:var(--border-strong); }

/* ---- линия «сейчас» ---- */
.schedule-page .sch-now{
  position:absolute; left:var(--sch-gutter-w); right:0; top:var(--now-top);
  height:2px; background:var(--accent); z-index:8; pointer-events:none;
}
.schedule-page .sch-now::before{
  content:''; position:absolute; left:-4px; top:-4px;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
}

/* ---- итоги колонок ---- */
.schedule-page .sch-total--label{
  border-right:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end;
  padding:0 8px; font:600 10.5px var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);
}
.schedule-page .sch-total{ border-right:1px solid var(--border); padding:9px 12px; display:flex; align-items:baseline; gap:8px; min-width:0; }
.schedule-page .sch-total__rev{ font:700 13px var(--font); color:var(--text); font-variant-numeric:tabular-nums; }
.schedule-page .sch-total__count{ font:500 11px var(--font); color:var(--text-light); white-space:nowrap; }

/* =====================================================================
   НЕДЕЛЯ — компактная сетка «мастера × дни»
   ===================================================================== */
.schedule-page .sch-wk-head, .schedule-page .sch-wk-row{
  display:grid; grid-template-columns:160px repeat(7, 1fr);
}
.schedule-page .sch-wk-head{ border-bottom:1px solid var(--border); position:sticky; top:60px; background:var(--bg-card); z-index:4; }
.schedule-page .sch-wk-row{ border-bottom:1px solid var(--divider); }
.schedule-page .sch-wk-row:last-child{ border-bottom:0; }
.schedule-page .sch-wk-corner{ padding:12px 14px; font:600 11px var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); border-right:1px solid var(--border); }
.schedule-page .sch-wk-day{ padding:10px 12px; text-align:center; border-right:1px solid var(--divider); }
.schedule-page .sch-wk-day__wd{ font:600 11px var(--font); text-transform:uppercase; letter-spacing:.04em; color:var(--text-light); }
.schedule-page .sch-wk-day__date{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; margin-top:3px; border-radius:999px;
  font:700 13px var(--font); color:var(--text); background:transparent;
}
.schedule-page .sch-wk-day__date.is-today{ color:#fff; background:var(--accent); }
.schedule-page .sch-wk-master{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-right:1px solid var(--border); min-width:0; }
.schedule-page .sch-wk-master__id{ min-width:0; }
.schedule-page .sch-wk-master__name{ font:600 12.5px var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schedule-page .sch-wk-master__total{ font:500 10.5px var(--font); color:var(--text-light); }
.schedule-page .sch-wk-cell{
  padding:10px 12px; border-right:1px solid var(--divider); min-height:74px;
  cursor:pointer; background:color-mix(in srgb, var(--accent) var(--tint, 0%), var(--bg-card));
  transition:outline-color var(--dur-fast) var(--ease); outline:2px solid transparent; outline-offset:-2px;
}
.schedule-page .sch-wk-cell:hover{ outline-color:var(--accent-line); }
.schedule-page .sch-wk-cell.is-empty{ display:flex; align-items:center; justify-content:center; cursor:default; font:500 11px var(--font); color:var(--text-faint); }
.schedule-page .sch-wk-cell__count{ display:flex; align-items:baseline; gap:5px; font:700 16px var(--font); color:var(--text); font-variant-numeric:tabular-nums; }
.schedule-page .sch-wk-cell__count small{ font:500 10px var(--font); color:var(--text-light); }
.schedule-page .sch-wk-cell__rev{ font:600 11px var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* мини-полоска загрузки (неделя/месяц) */
.schedule-page .sch-mini-load{ height:4px; border-radius:999px; background:var(--divider); overflow:hidden; margin:6px 0 5px; }
.schedule-page .sch-mini-load__bar{ height:100%; width:var(--load, 0%); border-radius:999px; background:var(--warning); }
.schedule-page .sch-mini-load__bar.is-mid { background:var(--accent); }
.schedule-page .sch-mini-load__bar.is-high{ background:var(--success); }

.schedule-page .sch-hint{ font:500 12px var(--font); color:var(--text-light); margin:12px 2px 0; }

/* =====================================================================
   МЕСЯЦ — календарь 7 × N
   ===================================================================== */
.schedule-page .sch-mn-head{ display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid var(--border); }
.schedule-page .sch-mn-head__cell{ padding:9px 12px; text-align:center; font:600 11px var(--font); text-transform:uppercase; letter-spacing:.04em; color:var(--text-light); border-right:1px solid var(--divider); }
.schedule-page .sch-mn-grid{ display:grid; grid-template-columns:repeat(7, 1fr); }
.schedule-page .sch-mn-cell{
  display:flex; flex-direction:column; min-height:92px; padding:8px 10px;
  border-right:1px solid var(--divider); border-bottom:1px solid var(--divider);
  cursor:pointer; background:var(--bg-card);
}
.schedule-page .sch-mn-cell:hover{ background:var(--hover); }
.schedule-page .sch-mn-cell.is-out{ cursor:default; background:var(--hover); }
.schedule-page .sch-mn-cell__top{ display:flex; align-items:center; justify-content:space-between; }
.schedule-page .sch-mn-cell__date{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px;
  font:600 12px var(--font); color:var(--text); background:transparent;
}
.schedule-page .sch-mn-cell.is-out .sch-mn-cell__date{ color:var(--text-faint); }
.schedule-page .sch-mn-cell__date.is-today{ color:#fff; background:var(--accent); }
.schedule-page .sch-mn-cell__cnt{ font:600 10px var(--font); color:var(--text-light); font-variant-numeric:tabular-nums; }
.schedule-page .sch-mn-cell__data{ margin-top:auto; }
.schedule-page .sch-mn-cell__rev{ font:600 11px var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* =====================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤860px): чипы мастеров + одна колонка
   ===================================================================== */
.schedule-page .sch-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; margin-bottom:4px; -webkit-overflow-scrolling:touch; }
.schedule-page .sch-chips[hidden]{ display:none; }
.schedule-page .sch-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 6px;
  border-radius:999px; border:1px solid var(--border-strong);
  background:var(--bg-card); color:var(--text);
  font:600 12.5px var(--font); cursor:pointer; flex-shrink:0; min-height:36px;
}
.schedule-page .sch-chip.is-on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.schedule-page .sch-chip .sch-ava{ width:24px; height:24px; font-size:10px; }

/* шапка одиночной колонки на мобиле */
.schedule-page .sch-mrow{ padding:12px 16px; border-bottom:1px solid var(--divider); }
.schedule-page .sch-mrow__name{ font:600 14px var(--font); color:var(--text); }
.schedule-page .sch-mrow__meta{ font:500 11.5px var(--font); color:var(--text-light); margin-top:2px; }

@media (max-width: 860px){
  .schedule-page .sch-head h1{ font-size:22px; }
  .schedule-page .sch-inner{ min-width:0; }
  .schedule-page .sch-row{ grid-template-columns:var(--sch-gutter-w) 1fr; }
  .schedule-page .sch-in{ width:100%; }
  .schedule-page .sch-sel{ max-width:46vw; }
  .schedule-page .sch-density{ display:none; }
  .schedule-page .sch-wk-head, .schedule-page .sch-wk-row{ grid-template-columns:120px repeat(7, minmax(84px, 1fr)); }
  .schedule-page .sch-wk-scroll{ overflow-x:auto; }
  .schedule-page .sch-wk-inner{ min-width:760px; }
  .schedule-page .sch-mn-cell{ min-height:72px; padding:6px 6px; }
  /* touch-targets ≥36px (design-rules §10.3): на десктопе тулбар компактный,
     на тач-устройстве добиваем высоту интерактивных элементов. */
  .schedule-page .sch-seg__btn{ min-height:36px; }
  .schedule-page .sch-seg__icon{ width:36px; height:36px; }
  .schedule-page .sch-sel, .schedule-page .sch-in{ height:38px; }
}

@media (prefers-reduced-motion: reduce){
  .schedule-page *{ transition-duration:.001ms !important; }
}

/* =====================================================================
   ВОРОНКИ (.funnels-page) — конструктор аудитории
   Компонент theme/js/funnels/audience-builder.js. Встраивается на странице
   аудиторий, в панель триггера конструктора и в шаг «Кому» Мастера, поэтому
   стили живут здесь, а не в <style> страницы.

   .seg / .tbl--compact / .empty-inline перенесены из docs/design/ui-kit.html
   (§11, §10, §23) 1:1 и заскоплены под .funnels-page: в общем :is()-блоке
   их пока нет, а расширять его на восемь живых страниц ради одного экрана
   рискованнее, чем перенести компонент рядом с местом использования.
   ===================================================================== */
.funnels-page .seg{ display:inline-flex; background:var(--bg-app); padding:3px; border-radius:9px; gap:2px; }
.funnels-page .seg__btn{ height:30px; padding:0 14px; border-radius:var(--radius-xs); font:600 12.5px var(--font); white-space:nowrap;
  color:var(--text-light); background:0; border:0; cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.funnels-page .seg__btn:hover{ color:var(--text); }
.funnels-page .seg__btn.is-on{ background:var(--bg-card); color:var(--text); box-shadow:var(--shadow-sm); }
.funnels-page .seg--sm .seg__btn{ height:26px; padding:0 11px; font-size:12px; }

.funnels-page .tbl--compact tbody td{ padding:9px 14px; }
.funnels-page .tbl--compact thead th{ padding:8px 14px; }

.funnels-page .empty-inline{ text-align:center; padding:28px 20px; color:var(--text-muted); }
.funnels-page .empty-inline__title{ font:600 14px var(--font); color:var(--text); margin:0 0 4px; }
.funnels-page .empty-inline__desc{ font:400 12.5px var(--font); color:var(--text-muted); margin:0 auto; max-width:320px; line-height:1.5; }

/* ── Каркас компонента ────────────────────────────────────────────── */
.funnels-page .aud{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.funnels-page .aud__tabs{ padding:14px 16px; border-bottom:1px solid var(--divider); }
.funnels-page .aud__body{ padding:16px; }
.funnels-page .aud__footer{ border-top:1px solid var(--divider); background:var(--hover); }
.funnels-page .aud__loading{ padding:28px 16px; text-align:center; font:500 13px var(--font); color:var(--text-muted); }
.funnels-page .aud__hint{ font:400 12.5px var(--font); color:var(--text-muted); line-height:1.5; margin:10px 0 0; }
.funnels-page .aud__count{ display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px;
  border-radius:999px; background:var(--bg-card); color:var(--text-muted); font:600 11px var(--font); }
.funnels-page .aud__msg:not(:empty){ padding:0 16px 14px; }

/* ── Карточки готовых аудиторий ───────────────────────────────────── */
.funnels-page .aud-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.funnels-page .aud-card{ display:flex; flex-direction:column; gap:5px; text-align:left; padding:13px 14px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.funnels-page .aud-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.funnels-page .aud-card.is-on{ border-color:var(--accent); box-shadow:var(--focus-ring-accent); }
.funnels-page .aud-card__name{ font:600 13.5px var(--font); color:var(--text); }
.funnels-page .aud-card__desc{ font:400 12px var(--font); color:var(--text-muted); line-height:1.5; }

/* ── Сохранённые аудитории ────────────────────────────────────────── */
.funnels-page .aud-list{ display:flex; flex-direction:column; gap:8px; }
.funnels-page .aud-list__item{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:11px 14px; cursor:pointer; text-align:left; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .aud-list__item:hover{ border-color:var(--border-strong); }
.funnels-page .aud-list__item.is-on{ border-color:var(--accent); box-shadow:var(--focus-ring-accent); }
.funnels-page .aud-list__name{ font:600 13.5px var(--font); color:var(--text); }
.funnels-page .aud-list__meta{ font:500 12px var(--font); color:var(--text-muted); white-space:nowrap; }

/* ── Свой фильтр ──────────────────────────────────────────────────── */
.funnels-page .aud-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.funnels-page .aud-group__label{ font:500 13px var(--font); color:var(--text-muted); }
.funnels-page .aud-conds{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.funnels-page .aud-cond{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Условие по полю, для которого у филиала нет данных. Не прячем и не
   запрещаем: условие собрано, оно рабочее, просто сейчас даёт ноль — и
   владелец должен понимать почему, а не гадать над пустым счётчиком. */
.funnels-page .aud-cond--gap{ opacity:.75; }
.funnels-page .aud__hint--gap{ flex-basis:100%; margin:2px 0 0; color:var(--warning); }
.funnels-page .aud-cond > .field{ flex:0 1 210px; min-width:130px; }
.funnels-page .aud-cond__op{ flex:0 1 160px; }
.funnels-page .aud-cond__input{ position:relative; display:inline-flex; align-items:center; flex:0 1 150px; }
.funnels-page .aud-cond__input .field{ width:100%; }
.funnels-page .aud-cond__unit{ position:absolute; right:10px; font:500 12px var(--font); color:var(--text-light); pointer-events:none; }
.funnels-page .aud-cond__pair{ display:inline-flex; align-items:center; gap:6px; }
.funnels-page .aud-cond__dash{ color:var(--text-light); }
.funnels-page .aud-cond__novalue{ font:400 12.5px var(--font); color:var(--text-light); }
.funnels-page .aud-cond__chips{ display:inline-flex; gap:6px; flex-wrap:wrap; }
/* «Не меньше N раз» — второе значение условия (28.09.2026). */
.funnels-page .aud-cond__times{ display:inline-flex; align-items:center; gap:6px; font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .aud-cond__times .field{ width:64px; }
.funnels-page .aud-cond__del{ width:28px; height:28px; border:0; background:0; cursor:pointer; border-radius:var(--radius-xs);
  color:var(--text-light); font-size:18px; line-height:1; }
.funnels-page .aud-cond__del:hover{ background:var(--danger-soft); color:var(--danger); }
.funnels-page .aud-chip{ height:28px; padding:0 11px; border-radius:999px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border-strong); font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .aud-chip.is-on{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }

/* Группа условий внутри корня: «(визитов ≥ 3 или потратил > 15 000 ₽)». Своя
   подложка и рамка — чтобы было видно, какие строки относятся к группе и к
   какой из них её переключатель «всё / хотя бы одно». */
.funnels-page .aud-sub{ display:flex; flex-direction:column; gap:8px; padding:10px 12px;
  background:var(--hover); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .aud-sub__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.funnels-page .aud-sub__del{ margin-left:auto; }
.funnels-page .aud-sub .aud-conds{ margin-bottom:0; }
.funnels-page .aud-sub__add{ align-self:flex-start; }
/* Слово-связка между строками: логику видно, не возвращаясь глазами к
   переключателю над списком. */
.funnels-page .aud-join{ font:600 11.5px var(--font); color:var(--text-light); padding-left:2px; }
.funnels-page .aud-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── Счётчик и примеры ────────────────────────────────────────────── */
.funnels-page .aud-bar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; }
.funnels-page .aud-bar__left{ display:flex; flex-direction:column; gap:2px; }
.funnels-page .aud-bar__right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.funnels-page .aud-count{ font:600 13.5px var(--font); color:var(--text); }
.funnels-page .aud-count em{ font-style:normal; font-feature-settings:'tnum' 1; }
.funnels-page .aud-count--idle,
.funnels-page .aud-count--wait{ font-weight:500; color:var(--text-muted); }
.funnels-page .aud-count--bad{ color:var(--danger); }
.funnels-page .aud-count__note{ font:500 12px var(--font); color:var(--text-muted); }
.funnels-page .aud-count__note em{ font-style:normal; font-feature-settings:'tnum' 1; }
.funnels-page .aud-save__name{ width:220px; }

/* Пояснение к выбранному полю условия: «Просрочка интервала (1 = пора)»
   без него не значит ничего, и владелец пропускает поле, которое как раз
   ему и нужно. */
.funnels-page .aud-cond__about{ flex-basis:100%; margin:2px 0 0;
  font:400 11.5px/1.45 var(--font); color:var(--text-light); }

/* Условие человеческой фразой над счётчиком: собранный отбор нужно уметь
   прочитать обратно, а не только увидеть, скольким он попал. */
.funnels-page .aud-summary{ font:500 12.5px/1.45 var(--font); color:var(--text); }

/* Выбор, с чего начать новую аудиторию: готовый отбор или пустой лист. */
.funnels-page .aud-start{ padding:16px; }
.funnels-page .aud-start__foot{ display:flex; gap:10px; margin-top:14px; }

/* Удаление строки списка — иконкой: действие редкое и необратимое, кнопке
   со словом рядом с «Изменить» оно давало бы одинаковый вес. */
.funnels-page .aud-row__del{ width:30px; height:30px; flex:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:0; border:0; border-radius:var(--radius-xs); color:var(--text-light); }
.funnels-page .aud-row__del:hover{ background:var(--danger-soft); color:var(--danger); }
.funnels-page .aud-row__del[disabled]{ opacity:.5; cursor:default; }

/* Форма аудитории (mode: 'editor'): название первым полем. Отдельно от
   футера намеренно — футер перерисовывается на каждый пересчёт
   численности, и поле внутри него теряло бы фокус на середине слова. */
.funnels-page .aud__head{ padding:16px 16px 0; }
.funnels-page .aud__name{ display:flex; flex-direction:column; gap:6px; max-width:420px; }
.funnels-page .aud__name-label{ font:500 12.5px var(--font); color:var(--text-muted); }
/* Галочка «Показывать в меню ClientFlow» под названием — только в ClientFlow. */
.funnels-page .aud__menu{ margin-top:12px; }
/* ClientFlow 2.0 (layout: 'cf2'): название и «в меню» — одной строкой под счётчиком, как в прототипе. */
.funnels-page .aud__tail{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:14px 16px 16px; border-top:1px solid var(--divider); }
.funnels-page .aud__tail .aud__name{ flex:1 1 260px; max-width:none; }
.funnels-page .aud__tail .aud__menu{ margin:0 0 10px; }
.funnels-page .aud-sample{ padding:0 16px 14px; }
.funnels-page .aud-sample .tbl{ width:100%; }

/* Узкая врезка (панель триггера в конструкторе): те же классы, одна колонка. */
.funnels-page .aud--compact .aud-cards{ grid-template-columns:1fr; }
.funnels-page .aud--compact .aud-cond > .field,
.funnels-page .aud--compact .aud-cond__op,
.funnels-page .aud--compact .aud-cond__input{ flex:1 1 100%; }
.funnels-page .aud--compact .aud-sub{ padding:8px; }

@media (max-width: 900px){
  .funnels-page .aud-cards{ grid-template-columns:1fr; }
  .funnels-page .aud-cond > .field,
  .funnels-page .aud-cond__op,
  .funnels-page .aud-cond__input{ flex:1 1 100%; }
  .funnels-page .aud-save__name{ width:100%; }
}

/* =====================================================================
   ВОРОНКИ — конструктор графа (.funnels-page .fx)
   Холст на SVG + абсолютные блоки. Движок разметки — theme/js/funnels/
   graph-editor.js; здесь только внешний вид и состояния.

   Геометрия блока (ширина 232, шаг выходов 22 px) согласована с JS: он
   считает по ней точки связей. Меняя одно, править оба места.
   ===================================================================== */
.funnels-page .fx{ display:flex; flex-direction:column; height:calc(100vh - 150px); min-height:520px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

.funnels-page .fx__bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--divider); }
.funnels-page .fx__name{ width:280px; font-weight:600; }
.funnels-page .fx__bar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
/* Обёртка кнопок статуса (запуск, пауза, возобновление): их набор меняется
   по статусу воронки, а в ряду шапки кнопки должны стоять как свои. */
.funnels-page .fx__launch{ display:contents; }
.funnels-page .fx__status{ font:500 12.5px var(--font); color:var(--text-muted); white-space:nowrap; }
.funnels-page .fx__status--saving{ color:var(--info); }
.funnels-page .fx__status--pending{ color:var(--warning); }
.funnels-page .fx__status--error{ color:var(--danger); }

.funnels-page .fx__body{ display:flex; flex:1; min-height:0; }
.funnels-page .fx__palette{ width:216px; flex:0 0 216px; padding:16px 14px;
  border-right:1px solid var(--border); overflow-y:auto; background:var(--bg-card); }
.funnels-page .fx__palette-title{ font:600 11px var(--font); color:var(--text-light);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:11px; }
.funnels-page .fx__palette-list{ display:flex; flex-direction:column; gap:7px; }
/* Подсказка пунктиром — она про действие, а не про содержимое, и рамка
   отделяет её от карточек, которые можно перетаскивать. */
.funnels-page .fx__palette-note{ font:400 11.5px/1.5 var(--font); color:var(--text-light);
  margin-top:14px; padding:11px 12px; border:1px dashed var(--border-strong);
  border-radius:var(--radius); }

/* Карточка блока в палитре — как в макете конструктора: значок в цветном
   квадрате, название и одна строка про то, что блок делает. Цвет держит
   значок, а не полоса у края: полоса в 3 пикселя не отличала «сообщение»
   от «развилки» на скорости, с которой этот список читают. */
.funnels-page .fx-chip{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 11px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.funnels-page .fx-chip:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.funnels-page .fx-chip__ico{ width:28px; height:28px; flex:none; border-radius:var(--radius-xs);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--hover); color:var(--text-muted); }
.funnels-page .fx-chip__body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.funnels-page .fx-chip__name{ display:block; font:600 13px var(--font); color:var(--text); }
/* Подпись — не больше двух строк: у наших блоков описания длиннее, чем в
   макете, и «Условия по данным клиента; первое совпавшее выигрывает» на
   четыре строки превращало список блоков в стену текста. Полный текст
   остаётся в подсказке при наведении. */
.funnels-page .fx-chip__hint{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font:400 11px/1.4 var(--font); color:var(--text-light); }
.funnels-page .fx-chip--accent .fx-chip__ico{ background:var(--accent-soft); color:var(--accent); }
.funnels-page .fx-chip--info .fx-chip__ico{ background:var(--info-soft); color:var(--info); }
.funnels-page .fx-chip--tip .fx-chip__ico{ background:var(--tip-soft); color:var(--tip); }
.funnels-page .fx-chip--warning .fx-chip__ico{ background:var(--warning-soft); color:var(--warning); }

/* ── Холст ─────────────────────────────────────────────────────────── */
.funnels-page .fx__canvas{ position:relative; flex:1; min-width:0; overflow:hidden; cursor:grab;
  background-color:var(--bg-app);
  background-image:radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size:24px 24px; }
.funnels-page .fx__canvas:active{ cursor:grabbing; }
.funnels-page .fx__svg,
.funnels-page .fx__nodes{ position:absolute; inset:0; transform-origin:0 0; }
.funnels-page .fx__svg{ overflow:visible; pointer-events:none; width:100%; height:100%; }
.funnels-page .fx__svg path{ pointer-events:stroke; }

.funnels-page .fx-edge{ fill:none; stroke:var(--text-light); stroke-width:2; cursor:pointer; }
.funnels-page .fx-edge:hover{ stroke:var(--text-muted); }
.funnels-page .fx-edge.is-selected{ stroke:var(--accent); stroke-width:2.5; }
.funnels-page .fx-edge.is-bad{ stroke:var(--danger); }
.funnels-page .fx-edge--draft{ stroke:var(--accent); stroke-dasharray:5 4; }

.funnels-page .fx-node{ position:absolute; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:10px 12px 12px; cursor:move; user-select:none; }
.funnels-page .fx-node:hover{ border-color:var(--border-strong); }
.funnels-page .fx-node.is-selected{ border-color:var(--accent); box-shadow:var(--focus-ring-accent); }
.funnels-page .fx-node.is-bad{ border-color:var(--danger-line); background:var(--danger-soft); }
.funnels-page .fx-node.is-warn{ border-color:var(--warning-line); background:var(--warning-soft); }
.funnels-page .fx-node__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.funnels-page .fx-node__type{ font:600 11px var(--font); color:var(--text-light); }
.funnels-page .fx-node__flag{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:var(--danger); color:#fff; font:700 11px var(--font); }
/* Заголовок ровно в две строки: высота блока до первого выхода
   фиксирована (PORT_TOP в graph-editor.js), и «плавающий» заголовок сдвигал
   бы выходы относительно связей. */
.funnels-page .fx-node__title{ font:500 12.5px var(--font); color:var(--text); line-height:1.35; margin-top:3px;
  height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.funnels-page .fx-node__ports{ position:static; }
/* Выход позиционируется относительно самого блока: обёртка не должна
   добавлять своё смещение, иначе кружок и конец связи разъезжаются —
   JS считает координату от верха блока. */
.funnels-page .fx-node__port{ position:absolute; right:-10px; display:flex; align-items:center; gap:6px; height:12px; }
.funnels-page .fx-node__port-label{ font:500 11px var(--font); color:var(--text-muted); white-space:nowrap;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.funnels-page .fx-node__dot{ width:12px; height:12px; padding:0; border-radius:50%; cursor:crosshair;
  background:var(--bg-card); border:2px solid var(--text-light); }
.funnels-page .fx-node__dot:hover{ border-color:var(--accent); background:var(--accent-soft); }
.funnels-page .fx-node__in{ position:absolute; left:-6px; top:calc(50% - 5px); width:10px; height:10px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--border-strong); }

.funnels-page .fx__zoom{ position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:6px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:4px 8px; box-shadow:var(--shadow-sm);
  font:500 12px var(--font); color:var(--text-muted); }

/* Подсказка на холсте. Живёт, пока воронка пустая: собравший её и так
   знает, как тянуть блоки. Сверху, а не снизу: внизу уже зум и миникарта,
   и на узком холсте подсказка налезала на них. */
.funnels-page .fx__tip{ position:absolute; left:14px; top:14px; max-width:calc(100% - 28px);
  padding:7px 11px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:999px; box-shadow:var(--shadow-sm);
  font:400 11.5px var(--font); color:var(--text-muted); pointer-events:none; }
.funnels-page .fx__tip[hidden]{ display:none; }

/* Миникарта: вся схема в масштабе окна плюс рамка видимой части. */
.funnels-page .fx__map{ position:absolute; right:14px; bottom:52px; width:150px; height:100px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); overflow:hidden; pointer-events:none; }
.funnels-page .fx__map[hidden]{ display:none; }
.funnels-page .fx__map-svg{ width:100%; height:100%; display:block; }
.funnels-page .fx-map__edge{ stroke:var(--border-strong); stroke-width:3; }
.funnels-page .fx-map__node{ fill:var(--text-faint); }
.funnels-page .fx-map__node.is-selected{ fill:var(--accent); }
.funnels-page .fx-map__view{ fill:none; stroke:var(--accent); stroke-width:4; }

/* Подпись на связи: «молчит», «ответил», «записался». */
.funnels-page .fx-edge__label{ position:absolute; padding:2px 7px; pointer-events:none;
  background:var(--bg-card); border:1px solid var(--border); border-radius:999px;
  font:500 11px var(--font); color:var(--text-muted); white-space:nowrap; }

/* Крестик удаления — только у выбранного блока. */
.funnels-page .fx-node__x{ margin-left:auto; width:18px; height:18px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:var(--radius-xs);
  font:400 15px/1 var(--font); color:var(--text-light); }
.funnels-page .fx-node__x:hover{ background:var(--danger-soft); color:var(--danger); }

/* Значок канала (theme/js/funnels/channel-icons.js). Монохромный: цвет
   наследуется от строки, в которой стоит, — фирменные цвета мессенджеров
   спорят с акцентом продукта и тянут внимание туда, где важно состояние
   канала, а не логотип. */
.funnels-page .ch-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; border-radius:var(--radius-xs);
  background:var(--hover); color:var(--text-muted); }
.funnels-page .ch-ico--whatsapp,
.funnels-page .ch-ico--max{ color:var(--success); background:var(--success-soft); }
.funnels-page .ch-ico--telegram,
.funnels-page .ch-ico--vk{ color:var(--info); background:var(--info-soft); }
.funnels-page .ch-ico--sms,
.funnels-page .ch-ico--call{ color:var(--text-muted); background:var(--hover); }
/* В плотных списках — значок без подложки и меньше. */
.funnels-page .ch-ico--bare{ width:auto; height:auto; background:none; }

/* Режим воронки в шапке — сегментный переключатель (`.seg`), как в макете
   конструктора: оба положения видно одновременно, текущее читается без
   наведения. Одна кнопка с состоянием на ней читалась как надпись. */
.funnels-page .fx__mode{ display:flex; align-items:center; }

/* ── Панель свойств ────────────────────────────────────────────────── */
/* Панель свойств блока — как в макете конструктора: шапка «свойства блока»
   с названием шага и строкой о том, что он делает, ниже поля с обычными
   подписями. Прежняя панель начиналась сразу с полей в верхнем регистре, и
   по ней нельзя было понять, что именно настраиваешь. */
.funnels-page .fx__panel{ width:372px; flex:0 0 372px; padding:0;
  border-left:1px solid var(--border); background:var(--bg-card); overflow-y:auto; }
.funnels-page .fx__panel-head{ padding:16px 18px; border-bottom:1px solid var(--divider); }
.funnels-page .fx__panel-kicker{ font:600 11px var(--font); color:var(--text-light);
  text-transform:uppercase; letter-spacing:.06em; }
.funnels-page .fx__panel-who{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.funnels-page .fx__panel-name{ flex:1; min-width:0; font:700 15px var(--font); color:var(--text); }
.funnels-page .fx__panel-del{ width:28px; height:28px; flex:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:0; border:0; border-radius:var(--radius-xs); color:var(--text-light); }
.funnels-page .fx__panel-del:hover{ background:var(--danger-soft); color:var(--danger); }
.funnels-page .fx__panel-sub{ font:400 11.5px/1.45 var(--font); color:var(--text-light); margin:7px 0 0; }
.funnels-page .fx__panel-empty{ font:500 13px var(--font); color:var(--text-light); margin-top:6px; }
.funnels-page .fx__panel-body{ padding:18px; }

.funnels-page .fx-field{ margin-bottom:18px; }
.funnels-page .fx-field:last-child{ margin-bottom:0; }
.funnels-page .fx-field__label{ display:block; font:600 12.5px var(--font); color:var(--text);
  margin-bottom:8px; }
.funnels-page .fx-field__hint{ font:400 11.5px var(--font); color:var(--text-light); line-height:1.45; margin:5px 0 0; }
.funnels-page .fx-textarea{ width:100%; height:auto; padding:9px 11px; font:400 13px var(--font); line-height:1.5; resize:vertical; }
.funnels-page .fx-toggle{ display:inline-flex; align-items:center; gap:8px; font:500 13px var(--font); color:var(--text); cursor:pointer; }

.funnels-page .fx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.funnels-page .fx-pick{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border-strong); border-radius:999px; font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .fx-pick.is-on{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
/* Канал без подключения: выбрать можно, но видно, что он не отправит.
   Пунктир, а не серый текст — серый читается как «недоступно», а канал
   доступен, просто у филиала его пока нет. */
.funnels-page .fx-pick--off{ border-style:dashed; color:var(--text-light); }
.funnels-page .fx-pick--off.is-on{ background:var(--warning-soft); border-color:var(--warning-line); color:var(--warning); }
.funnels-page .fx-field__hint--warn{ color:var(--warning); }
.funnels-page .fx-pick__num{ font-feature-settings:'tnum' 1; font-weight:700; }

.funnels-page .fx-duration{ display:flex; align-items:center; gap:6px; }
.funnels-page .fx-duration .field{ width:64px; }
.funnels-page .fx-duration span{ font:500 12px var(--font); color:var(--text-muted); }
/* Час ожидания: поле времени шире числового, иначе браузер режет «:00». */
.funnels-page .fx-time{ width:110px; }

.funnels-page .fx-rows{ display:flex; flex-direction:column; gap:8px; }
.funnels-page .fx-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Синонимы ответа — во всю ширину под подписью и ссылкой: втроём в строку
   они сжимаются так, что не видно ни одного placeholder'а. */
.funnels-page .fx-row .field{ flex:1; min-width:0; }
.funnels-page .fx-row .fx-row__answers{ flex:1 1 100%; }
.funnels-page .fx-row--case{ flex-wrap:wrap; }
.funnels-page .fx-row__del{ width:26px; height:26px; flex:0 0 26px; border:0; background:0; cursor:pointer;
  border-radius:var(--radius-xs); color:var(--text-light); font-size:17px; line-height:1; }
.funnels-page .fx-row__del:hover{ background:var(--danger-soft); color:var(--danger); }

/* ── Разбор ошибок ─────────────────────────────────────────────────── */
/* Стоит под шапкой конструктора, поэтому линия снизу, а не сверху: она
   отделяет разбор от холста. Пустым блок места не занимает — у собранной
   без ошибок воронки полоса «всё верно» и так одна строка. */
.funnels-page .fx__issues{ border-bottom:1px solid var(--divider); padding:10px 14px;
  max-height:132px; overflow-y:auto; flex:none;
  display:flex; flex-direction:column; gap:6px; background:var(--hover); }
.funnels-page .fx__issues:empty{ display:none; }
.funnels-page .fx__issues-ok{ font:500 12.5px var(--font); color:var(--success); }
.funnels-page .fx-issue{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:7px 10px; cursor:pointer; border-radius:var(--radius-xs); border:1px solid transparent;
  font:500 12.5px var(--font); background:var(--bg-card); }
.funnels-page .fx-issue--error{ color:var(--danger); border-color:var(--danger-line); }
.funnels-page .fx-issue--warning{ color:var(--warning); border-color:var(--warning-line); }
/* «Показать» — единственный способ найти блок, о котором ошибка. На демо
   10 августа её не заметили: серая, мелкая, у правого края, а глаз в этот
   момент на тексте ошибки слева. Делаем ссылкой, а не подписью. */
.funnels-page .fx-issue__go{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  font:600 11.5px var(--font); color:var(--info);
  background:var(--info-soft); border:1px solid var(--info-line); }
.funnels-page .fx-issue:hover .fx-issue__go{ background:var(--info); border-color:var(--info); color:#fff; }
/* Блок, которому не хватает модуля: кнопка неактивна, вместо подсказки —
   причина. Ставить его на холст бессмысленно — воронка соберётся, но шаг
   работать не будет. */
.funnels-page .fx-chip--off{ opacity:.75; cursor:default; }
.funnels-page .fx-chip--off .fx-chip__hint{ color:var(--warning); }

.funnels-page .fx-issue{ transition: border-color var(--dur-fast), background var(--dur-fast); }
.funnels-page .fx-issue:hover{ background:var(--bg-app); }

@media (max-width: 1100px){
  .funnels-page .fx__palette{ display:none; }
  .funnels-page .fx__panel{ width:300px; flex-basis:300px; }
}

/* =====================================================================
   ВОРОНКИ — Мастер рассылки (.funnels-page .fw)
   Основной путь: один вопрос на шаг, никакого холста. Компоненты те же,
   что у конструктора (.fx-chips/.fx-pick/.fx-textarea/.seg) — Мастер и
   конструктор обязаны выглядеть одним продуктом.
   ===================================================================== */
.funnels-page .fw{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

.funnels-page .fw__steps{ display:flex; gap:4px; padding:14px 16px; border-bottom:1px solid var(--divider); background:var(--hover); }
.funnels-page .fw-step{ display:flex; align-items:center; gap:9px; flex:1; padding:8px 10px; cursor:pointer; text-align:left;
  background:0; border:0; border-radius:var(--radius-sm); }
.funnels-page .fw-step:hover{ background:var(--bg-card); }
.funnels-page .fw-step__num{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border-strong); font:700 12.5px var(--font); color:var(--text-light); }
.funnels-page .fw-step__title{ display:block; font:600 13px var(--font); color:var(--text-muted); }
.funnels-page .fw-step__hint{ display:block; font:400 11.5px var(--font); color:var(--text-light); }
.funnels-page .fw-step.is-active .fw-step__num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.funnels-page .fw-step.is-active .fw-step__title{ color:var(--text); }
.funnels-page .fw-step.is-done .fw-step__num{ background:var(--success-soft); border-color:var(--success-line); color:var(--success); }

.funnels-page .fw__body{ padding:20px 22px; }
.funnels-page .fw__h{ font:700 18px var(--font); color:var(--text); margin:0 0 4px; }
.funnels-page .fw__sub{ font:400 12.5px var(--font); color:var(--text-muted); line-height:1.5; margin:0 0 16px; }
.funnels-page .fw__loading{ padding:24px 0; text-align:center; font:500 13px var(--font); color:var(--text-muted); }

.funnels-page .fw-field{ margin-bottom:16px; }
.funnels-page .fw-field__label{ display:block; font:600 12px var(--font); color:var(--text-muted); margin-bottom:6px; }
.funnels-page .fw-field__hint{ font:400 11.5px var(--font); color:var(--text-light); line-height:1.5; margin:6px 0 0; }
.funnels-page .fw-field__hint em{ font-style:normal; font-feature-settings:'tnum' 1; color:var(--text-muted); }
.funnels-page .fw-toggle{ display:inline-flex; align-items:center; gap:8px; font:500 13px var(--font); color:var(--text); cursor:pointer; }
.funnels-page .fw-followup{ display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-left:14px; border-left:2px solid var(--divider); }
.funnels-page .fw-followup .field--num{ width:90px; }
/* Числа в мастере задач: норма, срок, откладывания — узким полем, как у
   дожима; растянутое на всю ширину число с правым краем читалось как пустое. */
.funnels-page .fw-field > .field--num{ display:block; width:120px; }
.funnels-page .fw-field > .fw-toggle + .field--num{ margin-top:8px; }

.funnels-page .fw-summary{ border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:14px; }
.funnels-page .fw-summary__row{ display:flex; justify-content:space-between; gap:16px; padding:11px 14px; font:500 13px var(--font); color:var(--text-muted); }
.funnels-page .fw-summary__row + .fw-summary__row{ border-top:1px solid var(--divider); }
.funnels-page .fw-summary__row b{ color:var(--text); text-align:right; }
.funnels-page .fw-forecast em{ font-style:normal; font-feature-settings:'tnum' 1; }

.funnels-page .fw__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-top:1px solid var(--divider); background:var(--hover); }
.funnels-page .fw__foot-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.funnels-page .fw__msg:not(:empty){ padding:0 16px 14px; }
.funnels-page .fw__done-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; }

/* Шаг «Повод» (wizard-trigger.js) — варианты с пояснением. Не .seg: их семь
   и у каждого подпись, в сегментный переключатель они не помещаются даже на
   широком экране. Первый вариант — «по условию», прежний путь Мастера, — на
   всю ширину; шесть событий записи идут парами. */
.funnels-page .fw-choices{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
.funnels-page .fw-choice{ display:flex; flex-direction:column; gap:3px; padding:11px 13px; text-align:left; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .fw-choice:first-child{ grid-column:1 / -1; }
.funnels-page .fw-choice:hover{ border-color:var(--border-strong); }
.funnels-page .fw-choice:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
.funnels-page .fw-choice.is-on{ background:var(--accent-soft); border-color:var(--accent-line); }
.funnels-page .fw-choice__title{ font:600 13px var(--font); color:var(--text); }
.funnels-page .fw-choice.is-on .fw-choice__title{ color:var(--accent); }
.funnels-page .fw-choice__hint{ font:400 11.5px var(--font); color:var(--text-muted); line-height:1.45; }
.funnels-page .fw-field > .seg + .field--num{ margin-top:8px; }

@media (max-width: 760px){
  .funnels-page .fw-step__hint{ display:none; }
  .funnels-page .fw__foot{ flex-wrap:wrap; }
  /* Кнопка «Далее» — первой и во всю ширину, «открыть в конструкторе» — под
     ней с переносом. В строку они не помещались: ссылка на конструктор не
     переносится и занимает 338 px, а «Далее» уезжала за край Мастера и
     обрезалась — на телефоне Мастер было не пройти (замер 24.09.2026). */
  .funnels-page .fw__foot-right{ width:100%; flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .funnels-page .fw__foot-right .btn{ justify-content:center; height:auto; min-height:36px; padding-top:8px; padding-bottom:8px;
    white-space:normal; text-align:center; }
  .funnels-page .fw-choices{ grid-template-columns:1fr; }
  /* «Только тем, кто подходит под условие» и «Через несколько часов» в одну
     строку на телефоне не встают — кнопки переносятся, страница не едет вбок. */
  .funnels-page .fw .seg{ display:flex; flex-wrap:wrap; }
  .funnels-page .fw .seg__btn{ flex:1 1 auto; height:auto; min-height:30px; padding:6px 12px; white-space:normal; }
}

/* Пять шагов с подписями на 375 px не помещаются: у остальных шагов — только
   номер, подпись — у текущего. */
@media (max-width: 560px){
  .funnels-page .fw__steps{ padding:10px 12px; }
  .funnels-page .fw-step{ flex:0 0 auto; padding:6px; }
  .funnels-page .fw-step.is-active{ flex:1 1 auto; }
  .funnels-page .fw-step:not(.is-active) .fw-step__body{ display:none; }
}

/* =====================================================================
   ВОРОНКИ (.funnels-page) — экран эффективности

   §52 Funnel и §18 Progress перенесены из docs/design/ui-kit.html 1:1 и
   заскоплены под .funnels-page — по той же причине, что и .seg/.tbl--compact
   выше: в общем :is()-блоке их нет, а расширять его на восемь живых страниц
   ради одного экрана рискованнее, чем перенести компонент рядом с местом
   использования.
   ===================================================================== */
/* Селектор с двумя классами страницы намеренно: в ClientFlow есть свой
   `.funnel` — доска колонок, — и её правило `display:grid` подключается
   позже нашего. С равной специфичностью выигрывало оно, и этапы воронки
   вставали в один ряд поверх друг друга. */
.funnels-page.cf-app .funnel,
.funnels-page .funnel{ display:flex; flex-direction:column; gap:4px;
  grid-template-columns:none; overflow-x:visible; }
.funnels-page.cf-app .funnel__step,
.funnels-page .funnel__step{ display:grid; grid-template-columns:200px minmax(0, 1fr) 100px;
  align-items:center; gap:16px; padding:12px 0; }
.funnels-page .funnel__label{ font:600 13.5px var(--font); color:var(--text); }
.funnels-page .funnel__label .meta{ display:block; font:500 11.5px var(--font);
  color:var(--text-muted); margin-top:2px; font-feature-settings:'tnum' 1; }
.funnels-page .funnel__bar-wrap{ position:relative; height:44px; background:var(--bg-app);
  border-radius:var(--radius-xs); overflow:hidden; }
.funnels-page .funnel__bar{ position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg, var(--accent), #f97316); border-radius:var(--radius-xs);
  display:flex; align-items:center; padding:0 14px;
  font:700 14px var(--font); color:#fff; font-feature-settings:'tnum' 1; }
.funnels-page .funnel__bar--info{ background:linear-gradient(90deg, var(--info), #3b82f6); }
.funnels-page .funnel__bar--success{ background:linear-gradient(90deg, var(--success), #22c55e); }
.funnels-page .funnel__bar--danger{ background:linear-gradient(90deg, var(--danger), #ef4444); }
.funnels-page .funnel__bar--mute{ background:linear-gradient(90deg, var(--text-light), var(--text-muted)); }
.funnels-page .funnel__bar--tip{ background:linear-gradient(90deg, var(--tip), var(--info)); }

/* =====================================================================
   A/B-тест в разборе: расщепление на две колонки

   После блока теста это уже две воронки, и показывать их одним столбцом
   значит терять ровно то, ради чего тест ставили. Общий хвост после
   слияния веток снова рисуется одной колонкой — там опять вся аудитория.
   ===================================================================== */
.funnels-page .funnel__split{ display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:8px 0 12px 216px; }
.funnels-page .funnel__branch{ min-width:0; padding:10px 12px;
  background:var(--bg-app); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .funnel__branch-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font:700 12.5px var(--font); color:var(--text); margin-bottom:2px; }
.funnels-page .funnel__branch-head span{ font:500 11.5px var(--font); color:var(--text-muted);
  font-feature-settings:'tnum' 1; }
/* Внутри колонки строка складывается в два ряда: подпись с долей сверху,
   полоса под ними во всю ширину. Трёхколоночная раскладка разбора в
   половине экрана оставляет полосе меньше места, чем занимает её число. */
.funnels-page .funnel__branch .funnel__step{ grid-template-columns:minmax(0, 1fr) auto;
  gap:4px 8px; padding:8px 0; }
.funnels-page .funnel__branch .funnel__label{ grid-column:1; grid-row:1;
  font:600 12.5px var(--font); }
.funnels-page .funnel__branch .funnel__conv{ grid-column:2; grid-row:1; font:700 12.5px var(--font); }
.funnels-page .funnel__branch .funnel__conv .meta{ display:none; }
.funnels-page .funnel__branch .funnel__bar-wrap{ grid-column:1 / -1; grid-row:2; height:30px; }
.funnels-page .funnel__branch .funnel__bar{ font:700 12.5px var(--font); padding:0 10px; }
.funnels-page .funnel__branch .funnel__fate,
.funnels-page .funnel__branch .funnel__drop,
.funnels-page .funnel__branch .fa-reasons{ margin-left:0; padding-left:0; }

@media(max-width:1100px){
  /* Две колонки по трети экрана не оставляют места ни одной: ветки встают
     друг под друга, порядок и подписи сохраняются. */
  .funnels-page .funnel__split{ grid-template-columns:1fr; margin-left:0; }
}
.funnels-page .funnel__conv{ text-align:right; font:700 14px var(--font); color:var(--text);
  font-feature-settings:'tnum' 1; }
.funnels-page .funnel__conv .meta{ display:block; font:500 11.5px var(--font);
  color:var(--text-muted); margin-top:2px; font-weight:500; }
.funnels-page .funnel__drop{ font:500 11.5px var(--font); color:var(--danger);
  margin-left:216px; padding-left:6px; margin-top:-2px; margin-bottom:-4px; }
/* Судьба сообщений блока — под его полосой, тем же отступом, что и причины
   неотправки: обе строки объясняют цифру над собой, а не соседнюю. */
/* Общая на всю воронку строка «не отправлено» стоит под всеми блоками, а
   не под первым касанием: внутри колонки варианта A/B она врала прямо —
   «не отправлено 6» под веткой из четырёх человек читается как её потеря. */
.funnels-page .funnel__drop--total{ margin-left:0; padding-left:0; margin-top:8px; }
.funnels-page .fa-reasons--total{ margin-left:0; }
.funnels-page .funnel__fate{ font:500 11.5px var(--font); color:var(--text-muted);
  margin:-4px 0 6px 216px; padding-left:6px; font-feature-settings:'tnum' 1; }
/* Исход задачи — то, ради чего строку и читают: постановка ничего не
   говорит о результате. Название исхода выделено, цифры при нём — нет. */
.funnels-page .funnel__fate b{ font-weight:700; color:var(--text); }
/* Блок, до которого никто не дошёл: он в списке ради ответа «докуда
   доходят» и спорить за внимание с работающими шагами не должен. */
.funnels-page .funnel__step--idle .funnel__label,
.funnels-page .funnel__step--idle .funnel__conv{ color:var(--text-light); }
.funnels-page .funnel__step--idle .funnel__bar{ background:var(--border-strong); }
/* Итог воронки: записались и дошли относятся ко всей воронке сразу, и
   строкой наравне с блоками читались бы как ещё два блока холста. */
.funnels-page .funnel__total{ display:flex; flex-wrap:wrap; gap:6px 20px;
  margin-top:10px; padding-top:12px; border-top:1px solid var(--divider);
  font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .funnel__total b{ font-weight:700; color:var(--text);
  font-feature-settings:'tnum' 1; }

/* Раскладка «не отправлено»: причины прячутся под строку этапа и по цвету
   сразу читаются как «догонит» / «не уйдёт» / «так и задумано». */
.funnels-page .fa-reasons{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px 216px; }
.funnels-page .fa-reason{ display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg-card); font:500 11.5px var(--font); color:var(--text-muted); }
.funnels-page .fa-reason b{ font-weight:700; color:var(--text); font-feature-settings:'tnum' 1; }
.funnels-page .fa-reason--deliberate{ border-color:var(--info-line); background:var(--info-soft); color:var(--info); }
.funnels-page .fa-reason--deferred{ border-color:var(--warning-line); background:var(--warning-soft); color:var(--warning); }
.funnels-page .fa-reason--skipped{ border-color:var(--border-strong); }
.funnels-page .fa-reason--error{ border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger); }

/* Карточка денег воронки: та же сетка, что у чека — подписи слева,
   суммы справа, итог выделен. */
.funnels-page .fa-money{ display:flex; flex-direction:column; gap:0; }
.funnels-page .fa-money__row{ display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:10px 0; border-top:1px solid var(--divider);
  font:500 13.5px var(--font); color:var(--text-muted); }
.funnels-page .fa-money__row:first-child{ border-top:0; }
.funnels-page .fa-money__row b{ font:600 14px var(--font); color:var(--text);
  font-feature-settings:'tnum' 1; white-space:nowrap; }
.funnels-page .fa-money__row--total{ border-top:1px solid var(--border-strong); }
.funnels-page .fa-money__row--total span{ font-weight:600; color:var(--text); }
.funnels-page .fa-money__row--total b{ font-size:19px; }
.funnels-page .fa-money__row--minus b{ color:var(--danger); }
.funnels-page .fa-neg{ color:var(--danger); }

/* =====================================================================
   Содержимое модалок, живущих на body (.ab-modal).

   Паттерн .ab-modal-back намеренно без page-scope — модалка вешается на
   body. А вот про её НАЧИНКУ про это забыли: .btn и .checkbox-row лежат
   внутри общего :is(...)-скоупа, до body не доезжают, и на демо 10 августа
   в окне дисклеймера получилось следующее: нативный input виден, .checkbox-box
   — пустой span, а <svg> без width/height развернулся в дефолтные 300×150
   и закрыл собой текст согласия. Кнопки при этом остались без стилей.

   Дублировать правила приходится: расскоупить исходные нельзя — глобальный
   .btn столкнётся с legacy-кнопками из core.css на всех остальных экранах.
   ===================================================================== */
.ab-modal .fd-text { font: 400 13.5px/1.6 var(--font); color: var(--text); margin: 0; }

.ab-modal .btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding: 0 14px;
  border-radius: var(--radius-sm); border:1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text);
  font:600 13px var(--font); cursor: pointer; text-transform: none; letter-spacing: normal;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.ab-modal .btn:hover{ background: var(--hover); border-color: var(--text-faint); }
.ab-modal .btn:disabled{ opacity: .5; cursor: default; }
.ab-modal .btn--primary{ background: var(--accent); color:#fff; border-color: var(--accent); }
.ab-modal .btn--primary:hover:not(:disabled){ background: var(--accent-hover); border-color: var(--accent-hover); }
.ab-modal .btn--ghost{ background: transparent; border-color: transparent; color: var(--text-muted); }
.ab-modal .btn--ghost:hover{ background: var(--hover); color: var(--text); }
.ab-modal .btn--sm{ height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius-xs); gap: 6px; }

/* Поля ввода. Та же история, что с .btn: исходный .field лежит в
   :is(...)-скоупе и до body не доезжает, поэтому в окне облачного пароля и в
   окне проверки канала показывался нативный input браузера — чужой шрифт,
   чужая рамка, чужая высота. Значения продублированы с .field один в один:
   разъехавшись, они дадут поле, которое похоже на остальные ровно до тех
   пор, пока их не поставят рядом. */
.ab-modal .field{
  width: 100%; height: 38px; padding: 0 12px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); color: var(--text);
  font: 500 13.5px var(--font);
  transition: border-color .12s, box-shadow .12s;
}
.ab-modal .field::placeholder{ color: var(--text-light); }
.ab-modal .field:focus{ outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.ab-modal .field:disabled{ background: var(--hover); color: var(--text-muted); }
/* Многострочное поле высоту не наследует: у textarea она задаётся строками. */
.ab-modal .fx-textarea{ height: auto; padding: 9px 11px; font: 400 13px var(--font); line-height: 1.5; resize: vertical; }

/* Плашка состояния внутри окна: результат проверки канала, отказ по паролю.
   Исходный .callout тоже в :is(...)-скоупе, и без дубля в окне оставался
   голый текст с иконкой без фона. */
.ab-modal .callout{
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 14px; align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tip-line);
  background: var(--tip-soft);
}
.ab-modal .callout--info    { border-color: var(--info-line);    background: var(--info-soft); }
.ab-modal .callout--success { border-color: var(--success-line); background: var(--success-soft); }
.ab-modal .callout--warning { border-color: var(--warning-line); background: var(--warning-soft); }
.ab-modal .callout--danger  { border-color: var(--danger-line);  background: var(--danger-soft); }
.ab-modal .callout__icon{
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(124, 58, 237, .12); color: var(--tip);
  flex-shrink: 0;
}
.ab-modal .callout--info    .callout__icon{ background: rgba(37, 99, 235, .12); color: var(--info); }
.ab-modal .callout--success .callout__icon{ background: rgba(22, 163, 74, .14); color: var(--success); }
.ab-modal .callout--warning .callout__icon{ background: rgba(217, 119, 6, .14); color: var(--warning); }
.ab-modal .callout--danger  .callout__icon{ background: rgba(220, 38, 38, .14); color: var(--danger); }
.ab-modal .callout__body{ font: 400 13px/1.55 var(--font); color: var(--text); margin: 0; }

.ab-modal .checkbox-row{
  display:inline-flex; align-items:center; gap: 10px; cursor: pointer;
  font:500 13.5px var(--font); color: var(--text); user-select: none;
  text-transform: none; letter-spacing: normal;
}
.ab-modal .checkbox-row input{ position: absolute; opacity: 0; pointer-events: none; }
.ab-modal .checkbox-box{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--bg-card);
}
.ab-modal .checkbox-row input:checked ~ .checkbox-box{ background: var(--text); border-color: var(--text); }
/* Размер картинке нужен свой: <svg> без width/height — заменяемый элемент,
   и по умолчанию он занимает 300×150, а не размер родителя. */
.ab-modal .checkbox-box svg{ width: 11px; height: 11px; color: #fff; opacity: 0; }
.ab-modal .checkbox-row input:checked ~ .checkbox-box svg{ opacity: 1; }

/* Окно входа по QR (экран «Каналы»). Живёт на body, поэтому вне page-scope —
   ровно по той же причине, что и остальная начинка .ab-modal выше. */
.ab-modal .fq { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
.ab-modal .fq__code {
  width: 264px; height: 264px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff;
}
/* Картинку задаём размером явно: код приходит как <img> с data-URI, и без
   размеров он на миг разворачивается во всю ширину окна. */
.ab-modal .fq__code img { width: 248px; height: 248px; display: block; }
.ab-modal .fq__wait { font: 400 12.5px var(--font); color: var(--text-muted); }
.ab-modal .fq__steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
  font: 400 13px/1.5 var(--font); color: var(--text); }
.ab-modal .fq__note { font: 400 12.5px/1.5 var(--font); color: var(--text-muted); margin: 0; text-align: center; }

/* Панель свойств сообщения: вкладки, переменные, картинка, превью
   (theme/js/funnels/message-panel.js). */
.funnels-page .fx-msg { display: flex; flex-direction: column; gap: 8px; }
.funnels-page .fx-tabs { display: flex; gap: 4px; }
.funnels-page .fx-tab { height: 28px; padding: 0 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  font: 600 12.5px var(--font); color: var(--text-muted); }
.funnels-page .fx-tab:hover { background: var(--hover); color: var(--text); }
.funnels-page .fx-tab.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
/* Вкладка платной функции: приглушена, но открывается — иначе рассказу о
   том, что даёт модуль, негде появиться. */
.funnels-page .fx-tab--locked { color: var(--text-light); }
.funnels-page .fx-tab--locked.is-on { background: var(--hover); border-color: var(--border); color: var(--text-muted); }

.funnels-page .fx-vars { display: flex; flex-wrap: wrap; gap: 5px; }
/* Редактор текста (text-editor.js, 28.09.2026): инструменты, теги по
   группам, смайлы, «Большой редактор». В узкой панели конструктора теги —
   свёрнутыми группами под полем, в Мастере и большом редакторе — колонкой
   слева от текста. */
.funnels-page .fx-tools { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.funnels-page .fx-tools__right { margin-left: auto; }
.funnels-page .fx-tags { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.funnels-page .fx-tags__group { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.funnels-page .fx-tags__title { cursor: pointer; padding: 7px 10px; font: 600 12px var(--font); color: var(--text-muted); list-style: none; }
.funnels-page .fx-tags__title::-webkit-details-marker { display: none; }
.funnels-page .fx-tags__title::before { content: '›'; display: inline-block; width: 12px; transition: transform .15s; }
.funnels-page .fx-tags__group[open] > .fx-tags__title { color: var(--text); }
.funnels-page .fx-tags__group[open] > .fx-tags__title::before { transform: rotate(90deg); }
.funnels-page .fx-tags__list { display: flex; flex-direction: column; padding: 0 4px 6px; }
.funnels-page .fx-tag { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; padding: 5px 6px; border: 0; border-radius: var(--radius-xs); background: transparent; cursor: pointer;
  font: 500 12.5px var(--font); color: var(--text); }
.funnels-page .fx-tag:hover,
.funnels-page .fx-tag:focus-visible { background: var(--hover); outline: none; }
.funnels-page .fx-tag__code { font: 400 11px var(--font); color: var(--text-light); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 55%; }
.funnels-page .fx-emoji { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  padding: 6px; max-height: 240px; overflow: auto; }
.funnels-page .fx-emoji[hidden] { display: none; }
.funnels-page .fx-emoji__title { padding: 6px 6px 2px; font: 600 11px var(--font); color: var(--text-light); }
.funnels-page .fx-emoji__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.funnels-page .fx-emoji__item { height: 34px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent;
  cursor: pointer; font-size: 20px; line-height: 1; }
.funnels-page .fx-emoji__item:hover,
.funnels-page .fx-emoji__item:focus-visible { background: var(--hover); outline: none; }
.funnels-page .fx-compose { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.funnels-page .fx-compose__tags { max-height: 560px; overflow: auto; }
.funnels-page .fx-compose__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.funnels-page .ab-modal-back.is-open > .ab-modal.fx-bigedit { width: 1000px; max-width: 96vw; }
.funnels-page .fx-bigedit .fx-compose { padding: 16px 20px; overflow: auto; min-height: 0; }
.funnels-page .fx-chip__hint--text { -webkit-line-clamp: 3; white-space: pre-line; }
@media (max-width: 760px) {
  .funnels-page .fx-compose { grid-template-columns: 1fr; }
  .funnels-page .fx-compose__tags { max-height: none; order: 2; }
}
.funnels-page .fx-var { height: 26px; padding: 0 9px; cursor: pointer;
  background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-xs);
  font: 500 12px var(--font); color: var(--text-muted); }
.funnels-page .fx-var:hover { border-color: var(--border-strong); color: var(--text); }

/* Подсказка под полем текста: синтаксис подписанной ссылки. Не callout —
   она сопровождает поле, а не предупреждает о чём-то. */
.funnels-page .fx-hint { margin: 0; font: 400 12px/1.5 var(--font); color: var(--text-muted); }
.funnels-page .fx-hint code { font: 500 11.5px var(--font-mono, monospace); color: var(--text);
  background: var(--hover); border-radius: var(--radius-xs); padding: 1px 5px; }

.funnels-page .fx-msg__pane { display: flex; flex-direction: column; gap: 6px; }
.funnels-page .fx-msg__pane[hidden] { display: none; }
.funnels-page .fx-msg__wait { font: 400 12.5px var(--font); color: var(--text-muted); margin: 0; }

.funnels-page .fx-media { display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-app); }
.funnels-page .fx-media--empty { flex-direction: column; align-items: flex-start; gap: 2px;
  border-style: dashed; cursor: pointer; }
.funnels-page .fx-media--empty:hover { border-color: var(--border-strong); }
/* Размер миниатюре нужен свой: без него картинка растягивает панель. */
.funnels-page .fx-media__thumb { width: 44px; height: 44px; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--radius-xs); }
.funnels-page .fx-media__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnels-page .fx-media__name { font: 500 12.5px var(--font); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnels-page .fx-media__size { font: 400 11.5px var(--font); color: var(--text-light); }
.funnels-page .fx-media__pick { font: 600 12.5px var(--font); color: var(--accent); }
.funnels-page .fx-media__note { font: 400 11.5px var(--font); color: var(--text-light); }
/* PDF вместо миниатюры — значок файла того же размера, как у строки файла
   в UI-ките (§39 .upload-file__thumb). Имя — ссылкой: PDF открывается в
   новой вкладке. */
.funnels-page .fx-media__icon { width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); }
.funnels-page .fx-media__name--link { color: var(--accent); text-decoration: none; }
.funnels-page .fx-media__name--link:hover { text-decoration: underline; }

/* Превью «как увидит клиент». Пузырь намеренно похож на мессенджер: это
   единственное место, где владелец видит не поля, а сообщение. */
.funnels-page .fx-prev { display: flex; flex-direction: column; gap: 8px; }
.funnels-page .fx-prev__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.funnels-page .fx-prev__salon { font: 600 12.5px var(--font); color: var(--text); }
.funnels-page .fx-prev__now { font: 400 11.5px var(--font); color: var(--text-light); }
.funnels-page .fx-prev__bubble { display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; background: var(--bg-app);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.funnels-page .fx-prev__img { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-xs); }
/* PDF в пузыре — карточкой файла, как его покажет мессенджер. */
.funnels-page .fx-prev__file { display: flex; align-items: center; gap: 10px; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: inherit; text-decoration: none; }
.funnels-page .fx-prev__file:hover { border-color: var(--border-strong); }
.funnels-page .fx-prev__file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnels-page .fx-prev__file-name { font: 500 12.5px var(--font); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnels-page .fx-prev__file-meta { font: 400 11.5px var(--font); color: var(--text-light); }
.funnels-page .fx-prev__text { font: 400 13px/1.5 var(--font); color: var(--text); overflow-wrap: anywhere; }
.funnels-page .fx-prev__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.funnels-page .fx-prev__act { padding: 5px 10px; border-radius: var(--radius-xs);
  background: var(--bg-card); border: 1px solid var(--border-strong);
  font: 500 12px var(--font); color: var(--text); }
/* Канал без кнопок: вариант ответа придёт ссылкой, и выглядеть он должен
   ссылкой, иначе превью обещает то, чего клиент не увидит. */
.funnels-page .fx-prev__act--link { background: transparent; border-color: transparent;
  color: var(--accent); text-decoration: underline; padding: 0; }
.funnels-page .fx-prev__meta { font: 400 11px var(--font); color: var(--text-light);
  font-feature-settings: 'tnum' 1; }
.funnels-page .fx-prev__notes { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px;
  font: 400 12px/1.45 var(--font); color: var(--warning); }
/* Отправка на тестовый номер — под превью: сначала владелец смотрит, как
   сообщение выглядит, потом проверяет, доходит ли оно вообще. */
.funnels-page .fx-prev__test{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.funnels-page .fx-prev__test-msg{ font:500 12px/1.4 var(--font); color:var(--text-muted); }
.funnels-page .fx-prev__test-msg--ok{ color:var(--success); }
.funnels-page .fx-prev__test-msg--bad{ color:var(--danger); }

/* Подсказка текста от модели (theme/js/funnels/ai-text.js) — в панели
   свойств конструктора и на шаге «Что отправляем» Мастера. */
.funnels-page .fx-ai { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.funnels-page .fx-ai__list { display: flex; flex-direction: column; gap: 6px; }
.funnels-page .fx-ai__list:empty { display: none; }
.funnels-page .fx-ai--locked .btn[disabled] { opacity: .55; cursor: default; }
.funnels-page .fx-ai__offer { margin: 0; font: 400 12.5px/1.5 var(--font); color: var(--text-muted); }
.funnels-page .fx-ai__offer a { color: var(--accent); }
.funnels-page .fx-ai__item { text-align: left; padding: 9px 11px; cursor: pointer;
  background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-xs);
  font: 400 12.5px/1.5 var(--font); color: var(--text); }
.funnels-page .fx-ai__item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.funnels-page .fx-ai__err { font: 500 12px var(--font); color: var(--danger); margin: 0; }

/* =====================================================================
   ОБУЧАЮЩИЙ ТУР (.tour) — затемнение с вырезом и коачмарк

   §45 Coachmark перенесён из docs/design/ui-kit.html. Селекторы БЕЗ
   page-scope — по той же причине, что и у .ab-modal-back выше: тур вешается
   на body и живёт вне контейнера страницы. Радиус кнопки и оранжевый ховер
   из кита заменены токенами (7px не входит в шкалу 6/8/12/16).

   Геометрия — данные, поэтому передаётся ТОЛЬКО через CSS-переменные (тот же
   контракт, что у расписания):
     --tour-t / --tour-l / --tour-w / --tour-h  прямоугольник подсвеченной зоны
     --coach-x / --coach-y                      положение плашки
     --coach-arrow                              смещение стрелки внутри плашки

   Слой 9400: выше всего на странице, но ниже .sl-overlay (9500) — сообщение
   о сбое обязано перекрыть тур, а не наоборот.
   ===================================================================== */
.tour { position: fixed; inset: 0; z-index: 9400; }
.tour, .tour * { box-sizing: border-box; }

/* Затемнение делает сам вырез: огромный spread закрывает экран во все
   стороны, а скруглённая «дырка» получается бесплатно из border-radius.
   pointer-events снят с выреза, но не с .tour — клики ловит слой целиком,
   чтобы во время тура нельзя было случайно нажать «Запустить». */
.tour__hole {
  position: fixed; pointer-events: none;
  top: var(--tour-t, 50%); left: var(--tour-l, 50%);
  width: var(--tour-w, 0px); height: var(--tour-h, 0px);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 100vmax rgba(15,23,42,.55);
}

/* Пульсация — отдельный элемент с той же геометрией. Анимировать элемент с
   вырезом нельзя: браузер перерисовывал бы весь экран каждый кадр. */
.tour__ring {
  position: fixed; pointer-events: none;
  top: var(--tour-t, 50%); left: var(--tour-l, 50%);
  width: var(--tour-w, 0px); height: var(--tour-h, 0px);
  border-radius: var(--radius-sm);
  animation: tour-pulse 2.2s var(--ease) infinite;
}
.tour--noring .tour__ring { display: none; }
@keyframes tour-pulse {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(234,88,12,.40); }
  70%  { box-shadow: 0 0 0 2px var(--accent), 0 0 0 14px rgba(234,88,12,0); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(234,88,12,0); }
}

/* §45 COACHMARK — из ui-kit.html */
.coach {
  position: relative;
  background: var(--text); color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  max-width: 300px;
  box-shadow: var(--shadow-lg);
  font: 500 13px var(--font);
  line-height: 1.55;
}
.coach__title { font: 700 14px var(--font); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.coach__step {
  display: inline-block; font: 600 10.5px var(--font); color: var(--accent);
  background: rgba(234,88,12,.12); padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em;
}
.coach__body { color: rgba(255,255,255,.85); margin: 0 0 12px; }
.coach__body em {
  font-style: normal; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.coach__foot { display: flex; align-items: center; gap: 8px; }
.coach__counter { font: 600 12px var(--font); color: rgba(255,255,255,.5); font-feature-settings: 'tnum' 1; }
.coach__btn {
  margin-left: auto; height: 28px; padding: 0 12px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-xs);
  font: 700 12.5px var(--font); cursor: pointer;
}
.coach__btn:hover { background: var(--accent-hover); }
.coach__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.coach__btn--ghost { background: transparent; color: rgba(255,255,255,.7); font-weight: 600; }
.coach__btn--ghost:hover { color: #fff; background: rgba(255,255,255,.08); }
.coach__arrow { position: absolute; width: 14px; height: 14px; background: var(--text); transform: rotate(45deg); }
.coach__arrow--top    { top: -7px;    left: 50%; margin-left: -7px; }
.coach__arrow--bottom { bottom: -7px; left: 50%; margin-left: -7px; }
.coach__arrow--left   { left: -7px;   top: 50%; margin-top: -7px; }
.coach__arrow--right  { right: -7px;  top: 50%; margin-top: -7px; }

/* Плашка тура прибита к экрану, а не к потоку страницы. Стрелка в ките
   жёстко центрирована; у живого тура плашка упирается в край экрана, и
   центрированная стрелка начинает показывать мимо цели — поэтому смещение
   едет переменной, а дефолт 50% сохраняет поведение кита. */
.tour .coach { position: fixed; left: var(--coach-x, 50%); top: var(--coach-y, 50%); }
.tour .coach__arrow--top,
.tour .coach__arrow--bottom { left: var(--coach-arrow, 50%); }
.tour .coach__arrow--left,
.tour .coach__arrow--right  { top: var(--coach-arrow, 50%); }
.tour--nopoint .coach__arrow { display: none; }

/* На узком экране плашка перестаёт быть поповером и становится нижней
   панелью (design-rules §10.5). Вырез и кольцо остаются: человек видит, о
   чём речь, даже когда текст внизу. */
@media (max-width: 600px) {
  .tour .coach { left: 12px; right: 12px; top: auto; bottom: 12px; max-width: none; }
  .tour .coach__arrow { display: none; }
  .tour .coach__btn { height: 40px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__ring { animation-duration: .001ms !important; }
}

/* =====================================================================
   ВОРОНКИ (.funnels-page) — раскладка со сайдбаром оболочки

   Собственного сайдбара у модуля больше нет: с 12 августа он рисуется тем же
   компонентом, что в ClientFlow и настройках (.sidebar / .nav-item из
   clientflow.css) — «мне не хватает дизайна здесь, и левое тоже надо
   приводить в порядок». Здесь остаются только стыки: ширина контента и
   поведение на узком экране.
   ===================================================================== */
/* width:100% обязателен. У страниц модуля `margin: 0 auto` для центровки
   контента, а авто-поля по горизонтали ОТКЛЮЧАЮТ растяжение грид-элемента:
   вместо колонки он занимает ширину содержимого и центрируется в ней. На
   конструкторе это срезало холст почти вдвое — палитра и панель свойств
   остались, а места под граф не осталось. */
.funnels-page .app > main{ width:100%; min-width:0; }

/* На узком экране колонка не помещается (design-rules §10: не делать
   sidebar 232px на viewport <600px). Сайдбар уезжает под контент строкой,
   как в остальной оболочке. */
@media (max-width: 900px){
  .funnels-page .app{ grid-template-columns:1fr; }
  .funnels-page .sidebar{ position:static; height:auto; border-right:0;
    border-bottom:1px solid var(--border); }
}

/* =====================================================================
   REPORT PREVIEW — витрина закрытого модульного отчёта
   ===================================================================== */
#rv2LegacyContainer.is-report-preview #filterBar,
#rv2LegacyContainer.is-report-preview #comparePanel,
#rv2LegacyContainer.is-report-preview .viewer-header{ display:none !important; }

.report-preview,
.report-preview *{ box-sizing:border-box; }
.report-preview{
  display:flex; flex-direction:column; gap:18px;
  color:var(--text); font-family:var(--font);
  font-feature-settings:'cv11' 1,'ss01' 1;
}
.report-preview__hero{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center;
  padding:28px 30px; border:1px solid var(--accent-line); border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--bg-card) 0%,var(--accent-soft) 100%);
}
.report-preview__hero::after{
  content:''; position:absolute; width:240px; height:240px; right:-95px; top:-120px;
  border-radius:50%; border:46px solid var(--accent-line); opacity:.28; pointer-events:none;
}
.report-preview__eyebrow{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:10px;
  color:var(--accent-hover); font:700 11px/1 var(--font);
  letter-spacing:.07em; text-transform:uppercase;
}
.report-preview__eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
  outline:4px solid var(--accent-soft);
}
.report-preview__hero h2{ margin:0; max-width:720px; font:700 24px/1.25 var(--font); letter-spacing:-.02em; }
.report-preview__hero p{ margin:9px 0 0; max-width:760px; color:var(--text-muted); font:400 14px/1.55 var(--font); }
.report-preview__actions{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:220px; }
.report-preview__cta{
  display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:0 20px;
  border-radius:var(--radius-sm); border:1px solid var(--accent); background:var(--accent); color:var(--bg-card);
  font:700 13px var(--font); text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.report-preview__cta:hover{ color:var(--bg-card); background:var(--accent-hover); border-color:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.report-preview__price{ text-align:center; color:var(--text-muted); font:400 11.5px var(--font); }
.report-preview__back{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:0;
  border:0; background:transparent; color:var(--text-muted); font:600 12.5px var(--font); cursor:pointer;
}
.report-preview__back:hover{ color:var(--text); }
.report-preview__real-report{
  position:relative; min-height:240px; padding:20px;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card);
  overflow:hidden; pointer-events:none;
}

/* ── Отчёт «Эффективность ресурсов» · UI Kit §1/6/8/9/10/18 ────── */
.reports-page .room-report,
.reports-page .room-report *{box-sizing:border-box;text-transform:none;letter-spacing:normal;}
.reports-page .room-report{
  display:flex;flex-direction:column;gap:18px;color:var(--text);font-family:var(--font);
  font-feature-settings:'cv11' 1,'ss01' 1;
}

.reports-page .room-report .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.reports-page .room-report .kpi{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:14px;text-align:left;cursor:default;
  box-shadow:none;transform:none;transition:none;
}
.reports-page .room-report .kpi:hover{border-color:var(--border);box-shadow:none;transform:none;}
.reports-page .room-report .kpi__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.reports-page .room-report .kpi__title{font:600 12.5px/1.35 var(--font);color:var(--text-muted);}
.reports-page .room-report .kpi__icon{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:0 0 auto;
  background:var(--bg-app);color:var(--text-muted);
}
.reports-page .room-report .kpi__icon svg,
.reports-page .room-report .callout__icon svg{width:16px;height:16px;}
.reports-page .room-report .kpi__icon--accent{background:var(--accent-soft);color:var(--accent);}
.reports-page .room-report .kpi__icon--success{background:var(--success-soft);color:var(--success);}
.reports-page .room-report .kpi__icon--warning{background:var(--warning-soft);color:var(--warning);}
.reports-page .room-report .kpi__icon--danger{background:var(--danger-soft);color:var(--danger);}
.reports-page .room-report .kpi__icon--info{background:var(--info-soft);color:var(--info);}
.reports-page .room-report .kpi__value{
  font:600 28px/1 var(--font);letter-spacing:-.02em;color:var(--text);font-feature-settings:'tnum' 1;white-space:nowrap;
}
.reports-page .room-report .kpi__foot{font:500 12px/1.45 var(--font);color:var(--text-muted);}

.reports-page .room-report .callout{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px 16px;border:1px solid var(--info-line);border-radius:var(--radius-sm);background:var(--info-soft);
}
.reports-page .room-report .callout__icon{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--info);background:var(--bg-card);
}
.reports-page :is(.room-report, .opz-report) .callout__title{margin:1px 0 4px;font:600 13.5px var(--font);color:var(--text);}
.reports-page .room-report .callout__body{margin:0;font:400 13px/1.55 var(--font);color:var(--text);}
.reports-page .room-report .callout__body em{font-style:normal;font-weight:600;}

.reports-page :is(.room-report, .opz-report) .page-state{
  padding:48px 24px;text-align:center;background:var(--bg-card);border:1px dashed var(--border);
  border-radius:var(--radius);color:var(--text-muted);font:500 13.5px var(--font);
}
.reports-page :is(.room-report, .opz-report) .page-state__title{margin:0;font:600 18px var(--font);color:var(--text);}
.reports-page :is(.room-report, .opz-report) .page-state__desc{max-width:460px;margin:6px auto 0;font:400 13.5px/1.55 var(--font);color:var(--text-muted);}
.reports-page :is(.room-report, .opz-report) .page-state__actions{display:flex;justify-content:center;margin-top:18px;}
.reports-page .room-report .btn{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text);font:600 13px var(--font);text-decoration:none;
}
.reports-page .room-report .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--bg-card);}
.reports-page .room-report .btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

.reports-page .room-report .card,
.reports-page .room-report .tbl-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;transform:none;transition:none;
}
.reports-page .room-report .card:hover,
.reports-page .room-report .tbl-card:hover{border-color:var(--border);box-shadow:none;transform:none;}
.reports-page .room-report .card{padding:20px 22px;}
.reports-page .room-report .tbl-card{overflow:hidden;}
.reports-page .room-report .tbl-card__bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--divider);
}
.reports-page .room-report .tbl-card__count{flex:0 0 auto;padding-top:2px;font:500 12.5px var(--font);color:var(--text-muted);}
.reports-page .room-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.reports-page .room-section-title{margin:0;font:600 14px/1.4 var(--font);color:var(--text);}
.reports-page .room-section-desc{margin:3px 0 0;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.reports-page .room-chart-card{padding-bottom:16px;}
.reports-page .room-chart{position:relative;height:320px;margin-top:18px;}

.reports-page .room-table-wrap{overflow-x:auto;}
.reports-page .room-report .tbl{width:100%;border-collapse:separate;border-spacing:0;font:500 13px var(--font);}
.reports-page .room-report .tbl thead th{
  padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg-card);font:600 11px/1.35 var(--font);
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap;
}
.reports-page .room-report .tbl thead th.num{text-align:right;}
.reports-page .room-report .tbl tbody td{padding:9px 14px;border-bottom:1px solid var(--divider);vertical-align:middle;color:var(--text);}
.reports-page .room-report .tbl tbody tr:last-child td{border-bottom:0;}
.reports-page .room-report .tbl tbody tr:hover td{background:var(--hover);}
.reports-page .room-report .tbl td.num{text-align:right;font-feature-settings:'tnum' 1;white-space:nowrap;}
.reports-page .room-detail__resource{font-weight:600;}
.reports-page .room-detail__load{min-width:148px;}

.reports-page :is(.room-report, .opz-report) .badge{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--border);
  background:var(--bg-app);color:var(--text-muted);border-radius:999px;font:600 11.5px var(--font);white-space:nowrap;
}
.reports-page :is(.room-report, .opz-report) .badge--success{background:var(--success-soft);color:var(--success);border-color:var(--success-line);}
.reports-page :is(.room-report, .opz-report) .badge--info{background:var(--info-soft);color:var(--info);border-color:var(--info-line);}
.reports-page :is(.room-report, .opz-report) .badge--warning{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line);}
.reports-page :is(.room-report, .opz-report) .badge--danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line);}
.reports-page :is(.room-report, .opz-report) progress.progress{
  display:block;width:100%;height:4px;margin-top:6px;border:0;border-radius:999px;overflow:hidden;appearance:none;background:var(--bg-app);
}
.reports-page :is(.room-report, .opz-report) progress.progress::-webkit-progress-bar{background:var(--bg-app);border-radius:999px;}
.reports-page :is(.room-report, .opz-report) progress.progress::-webkit-progress-value{background:var(--accent);border-radius:999px;}
.reports-page :is(.room-report, .opz-report) progress.progress::-moz-progress-bar{background:var(--accent);border-radius:999px;}
.reports-page :is(.room-report, .opz-report) progress.progress--success::-webkit-progress-value{background:var(--success);}
.reports-page :is(.room-report, .opz-report) progress.progress--success::-moz-progress-bar{background:var(--success);}
.reports-page :is(.room-report, .opz-report) progress.progress--info::-webkit-progress-value{background:var(--info);}
.reports-page :is(.room-report, .opz-report) progress.progress--info::-moz-progress-bar{background:var(--info);}
.reports-page :is(.room-report, .opz-report) progress.progress--warning::-webkit-progress-value{background:var(--warning);}
.reports-page :is(.room-report, .opz-report) progress.progress--warning::-moz-progress-bar{background:var(--warning);}
.reports-page :is(.room-report, .opz-report) progress.progress--danger::-webkit-progress-value{background:var(--danger);}
.reports-page :is(.room-report, .opz-report) progress.progress--danger::-moz-progress-bar{background:var(--danger);}

@media (max-width:1100px){
  .reports-page .room-report .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:600px){
  .reports-page .room-report{gap:14px;}
  .reports-page .room-report .kpi-grid{grid-template-columns:1fr;gap:10px;}
  .reports-page .room-report .kpi{padding:16px;gap:12px;}
  .reports-page .room-report .kpi__value{font-size:24px;}
  .reports-page .room-report .card{padding:16px;}
  .reports-page .room-report .tbl-card__bar{flex-direction:column;gap:6px;}
  .reports-page .room-report .tbl-card__count{padding-top:0;}
  .reports-page .room-chart{height:260px;margin-top:14px;}
  .reports-page .room-table-wrap{overflow:visible;}
  .reports-page .room-report .tbl,.reports-page .room-report .tbl tbody{display:block;}
  .reports-page .room-report .tbl thead{display:none;}
  .reports-page .room-report .tbl tbody tr{display:block;padding:12px 14px;border-bottom:1px solid var(--divider);}
  .reports-page .room-report .tbl tbody tr:last-child{border-bottom:0;}
  .reports-page .room-report .tbl tbody td,
  .reports-page .room-report .tbl tbody td.num{
    display:grid;grid-template-columns:minmax(112px,1fr) minmax(0,1fr);gap:12px;align-items:center;
    width:100%;padding:7px 0;border:0;text-align:right;white-space:normal;background:transparent;
  }
  .reports-page .room-report .tbl tbody tr:hover td{background:transparent;}
  .reports-page .room-report .tbl tbody td::before{
    content:attr(data-label);font:500 12px/1.35 var(--font);color:var(--text-muted);text-align:left;
  }
  .reports-page .room-report .tbl tbody td.room-detail__resource{display:block;padding:0 0 9px;text-align:left;font-size:14px;}
  .reports-page .room-report .tbl tbody td.room-detail__resource::before{display:none;}
  .reports-page .room-detail__load{min-width:0;}
  .reports-page .room-detail__load progress.progress{grid-column:2;}
}

/* ── Отчёт «ОПЗ — предварительная запись» · UI Kit §1/3/8/18 ─────
   KPI и таблицы — общие для отчётов (.do-kpi-row, .data-table): к ним цепляется сравнение периодов. */
.reports-page .opz-report > .callout{margin-bottom:1.5rem;}
.reports-page .opz-report .callout__icon svg{width:14px;height:14px;}
.reports-page .opz-report .callout__body + .callout__body{margin-top:4px;}
.reports-page .opz-section-desc{margin:-4px 0 12px;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.reports-page .opz-role{font:400 12.5px var(--font);color:var(--text-light);}
/* Цвет — на span: ячейку красит #reportContent .data-table tbody td из reports.php. */
.reports-page .opz-num--success{color:var(--success);}
.reports-page .opz-num--danger{color:var(--danger);}
.reports-page .opz-num--muted{color:var(--text-light);}
.reports-page .opz-rate{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.reports-page .opz-rate progress.progress{width:60px;margin-top:0;}
.reports-page .opz-report progress.progress--muted::-webkit-progress-value{background:var(--text-faint);}
.reports-page .opz-report progress.progress--muted::-moz-progress-bar{background:var(--text-faint);}

/* =====================================================================
   ADMIN USERS · редактирование контактов
   Форма и Modal перенесены из UI Kit §7/§13 и заскоуплены,
   чтобы legacy-классы остальной админки не изменились.
   ===================================================================== */
.admin-users-page,
.admin-users-page * { box-sizing: border-box; }

.admin-users-page .admin-contact-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.admin-users-page .admin-contact-edit {
  height: 36px;
  padding-inline: 0;
}

.admin-users-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font: 600 13px var(--font);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.admin-users-page .btn:hover {
  background: var(--hover);
  border-color: var(--text-faint);
}

.admin-users-page .btn:focus-visible,
.admin-users-page .field:focus-visible,
.admin-users-page .modal__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-users-page .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-card);
}

.admin-users-page .btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.admin-users-page .btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.admin-users-page .btn--ghost:hover {
  background: var(--hover);
  border-color: transparent;
  color: var(--text);
}

.admin-users-page .field {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text);
  font: 500 13.5px var(--font);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.admin-users-page .field:hover { border-color: var(--text-faint); }
.admin-users-page .field:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.admin-users-page .field::placeholder { color: var(--text-light); }

.admin-users-page .field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font: 600 12.5px var(--font);
}

.admin-users-page .field-hint {
  margin: 6px 0 0;
  color: var(--text-light);
  font: 400 12px/1.45 var(--font);
}

.admin-users-page .field-hint em {
  color: var(--text-muted);
  font-style: normal;
  font-feature-settings: 'tnum' 1;
}

.admin-users-page .field-error {
  color: var(--danger);
  font: 500 12px var(--font);
}

:is(.admin-users-page, .modal-layer) .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}

:is(.admin-users-page, .modal-layer) .modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

:is(.admin-users-page, .modal-layer) .modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 110;
  display: flex;
  flex-direction: column;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 8px)) scale(.98);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease);
}

:is(.admin-users-page, .modal-layer) .modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

:is(.admin-users-page, .modal-layer) .modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--divider);
}

:is(.admin-users-page, .modal-layer) .modal__title {
  margin: 0 0 2px;
  color: var(--text);
  font: 600 16px var(--font);
  letter-spacing: -.005em;
}

:is(.admin-users-page, .modal-layer) .modal__sub {
  margin: 0;
  color: var(--text-muted);
  font: 400 13px/1.5 var(--font);
}

:is(.admin-users-page, .modal-layer) .modal__close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
}

:is(.admin-users-page, .modal-layer) .modal__close:hover { background: var(--hover); color: var(--text); }

.admin-users-page .admin-contact-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

:is(.admin-users-page, .modal-layer) .modal__body {
  padding: 18px 22px;
  overflow-y: auto;
  color: var(--text);
  font: 400 13.5px/1.55 var(--font);
}

:is(.admin-users-page, .modal-layer) .modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg-app);
}

.admin-users-page .admin-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-users-page .admin-contact-form-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-xs);
  background: var(--danger-soft);
}

.admin-users-page .admin-contact-access-note {
  margin: 18px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--info-line);
  border-radius: var(--radius-xs);
  background: var(--info-soft);
  color: var(--text-muted);
  font: 400 12.5px/1.5 var(--font);
}

/* §13 Modal на body (.modal-layer) — окна, которые открываются поверх
   любой страницы: согласие перед подключением модуля и т. п. Разметка
   дословно из ui-kit §13, обёрнута в .modal-layer, чтобы на неё распространялись
   токены и компоненты дизайн-системы (.btn, .checkbox-row, .callout).
   core.css держит два глобальных .modal: поздний { display:none; position:fixed;
   width:100%; height:100%; overflow-y:auto } и .modal-backdrop { display:none }.
   Всё, что они задают, а §13 не перекрывает, возвращаем здесь.
   Слой выше окна оформления маркетплейса и кнопки AI-помощника (9000) и тура
   (9400): согласие спрашивают, пока окно оформления ещё открыто. Ниже
   уведомлений (9999), чтобы ответ после согласия был виден. */
.modal-layer .modal-backdrop { display: block; z-index: 9500; backdrop-filter: none; }
.modal-layer .modal { z-index: 9510; height: auto; overflow: hidden; }
.modal-layer .modal__body { min-height: 0; }
.modal-layer .modal__body > * + * { margin-top: 14px; }
.modal-layer .modal__body p { margin: 0; }

@media (max-width: 600px) {
  .admin-users-page .admin-contact-edit { min-height: 44px; }

  :is(.admin-users-page, .modal-layer) .modal {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - env(safe-area-inset-top));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(16px);
  }

  :is(.admin-users-page, .modal-layer) .modal.is-open { transform: translateY(0); }
  :is(.admin-users-page, .modal-layer) .modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  :is(.admin-users-page, .modal-layer) .modal__foot .btn { min-height: 44px; flex: 1; }
}
.report-preview__real-report::after{
  content:'Значения скрыты'; position:absolute; right:16px; top:16px; z-index:5;
  padding:5px 9px; border:1px solid var(--info-line); border-radius:999px;
  background:var(--info-soft); color:var(--info); font:700 10px var(--font);
  letter-spacing:.04em; text-transform:uppercase;
}
/* Значения маскируются поверх синтетических demo-данных. Заголовки, названия
   блоков и геометрия графиков остаются видны — пользователь смотрит реальный
   отчёт, а не универсальную картинку-заглушку. */
.report-preview__real-report :is(
  .metric-value,
  .kit-card-value,
  .segment-value,
  .do-kpi__value,
  .do-kpi__sub,
  [class$="__value"],
  [class$="-value"],
  td.num,
  tbody td,
  em
){ filter:blur(5px); opacity:.72; user-select:none; }
.report-preview__real-report canvas{ filter:blur(1.5px); opacity:.82; }
.report-preview__real-report svg text{ filter:blur(3px); opacity:.72; }
.report-preview__footer{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--hover);
}
.report-preview__footer strong{ display:block; font:600 14px var(--font); }
.report-preview__footer span{ display:block; margin-top:4px; color:var(--text-muted); font:400 12px var(--font); }
@media(max-width:900px){
  .report-preview__hero{ grid-template-columns:1fr; }
  .report-preview__actions{ align-items:flex-start; min-width:0; }
  .report-preview__price{ text-align:left; }
}
@media(max-width:560px){
  .report-preview__hero{ padding:22px 18px; }
  .report-preview__hero h2{ font-size:21px; }
  .report-preview__real-report{ padding:12px; }
  .report-preview__footer{ align-items:flex-start; flex-direction:column; }
}

/* =====================================================================
   ПУЛЬС — базовая раскладка экрана модуля (.fn-main, .fn-head, .fn-crumbs)

   До этого раскладка жила в <style> каждой страницы, и новая страница
   открывалась без отступов вовсе — заголовок прижимался к краю окна.
   Здесь общий случай; страницам, которым нужна своя ширина (конструктор
   шире, мастер уже), достаточно переопределить max-width у себя — их
   собственные правила идут после этого файла и перебивают его.
   ===================================================================== */

.funnels-page .fn-main{ padding:28px 32px 80px; max-width:1400px; margin:0 auto; }
.funnels-page .fn-head{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.funnels-page .fn-head h1{ font:700 24px var(--font); letter-spacing:-.01em; margin:0 0 4px; color:var(--text); }
.funnels-page .fn-head__sub{ color:var(--text-muted); font:500 13.5px var(--font);
  margin:0; max-width:760px; line-height:1.55; }
.funnels-page .fn-crumbs{ display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .fn-crumbs a{ color:var(--text-muted); text-decoration:none; }
.funnels-page .fn-crumbs a:hover{ color:var(--text); }

/* Секции, списки и карточки заготовок. Раньше жили в <style> страницы
   /pulse, и вторая страница модуля (аудитории) с теми же секциями получила
   бы либо копию этих правил, либо голый список без карточек. */
.funnels-page .fn-section{ margin-bottom:24px; }
.funnels-page .fn-section__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
/* Заголовок не сжимается: длинное описание рядом ломало «Шаблоны воронок»
   на две строки и заголовок читался как два. */
.funnels-page .fn-section__head h2{ font:700 17px var(--font); color:var(--text); margin:0; flex:none; }
.funnels-page .fn-section__head p{ font:400 12.5px var(--font); color:var(--text-muted); margin:0; }
.funnels-page .fn-section__cta{ margin-left:auto; }
/* Крестик секции, которую разрешено убрать с глаз. Кнопка, а не ссылка:
   она ничего не открывает, а прячет — и должна читаться так же, как
   закрытие любого другого блока в продукте. */
.funnels-page .fn-section__close{ margin-left:auto; width:28px; height:28px; flex:none;
  display:grid; place-items:center; border:0; background:0; cursor:pointer;
  border-radius:var(--radius-xs); color:var(--text-light); }
.funnels-page .fn-section__close:hover{ background:var(--hover); color:var(--text); }

/* Предупреждение над содержимым экрана. У `.callout` своего внешнего
   отступа нет — и плашка прилипала к блоку под собой, читаясь как его
   шапка. Отдельный класс, а не отступ у самого callout: внутри карточек и
   форм он стоит вплотную намеренно. */
.funnels-page .fn-alert{ margin-bottom:16px; }

/* Плитки сводки. min-width:0 обязателен: у грид-элемента минимальная
   ширина равна ширине содержимого, и подпись «нужен месяц работы с
   контрольной группой» выталкивала четвёртую плитку на новую строку. */
.funnels-page .kpi{ min-width:0; }
.funnels-page .kpi__note{ overflow-wrap:anywhere; }
/* Выбор периода не растягивается на всё свободное место — иначе заголовок
   секции сжимается в столбик из трёх слов. */
.funnels-page .fn-period{ width:150px; flex:none; }
.funnels-page .fn-section__head p{ flex:1 1 auto; min-width:0; }

/* Пустой первый экран. Не «нет данных», а приглашение: карточка во всю
   ширину, иконка, две двери — из шаблона за минуту или с нуля. */
.funnels-page .fn-empty{ padding:64px 24px; text-align:center;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.funnels-page .fn-empty__icon{ display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin-bottom:16px; border-radius:var(--radius-lg);
  background:var(--accent-soft); color:var(--accent); }
.funnels-page .fn-empty__title{ font:600 17px var(--font); color:var(--text); margin:0; }
.funnels-page .fn-empty__desc{ font:400 13px/1.55 var(--font); color:var(--text-muted);
  margin:8px auto 18px; max-width:380px; }
.funnels-page .fn-empty__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Панель над таблицей воронок: поиск, статус, тип, счётчик. */
.funnels-page .fn-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.funnels-page .fn-toolbar .search{ width:260px; }
.funnels-page .fn-toolbar__count{ margin-left:auto; font:500 12.5px var(--font); color:var(--text-muted); }

/* Таблица воронок. Название и аудитория живут в одной ячейке двумя
   строками: колонка под аудиторию отняла бы место у цифр, ради которых
   таблицу и открывают. */
.funnels-page .fn-tbl__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.funnels-page .fn-tbl__name{ font:600 13.5px var(--font); color:var(--text); text-decoration:none; }
.funnels-page .fn-tbl__name:hover{ color:var(--accent); }
.funnels-page .fn-tbl__sub{ font:400 12px var(--font); color:var(--text-light); margin-top:3px; }
.funnels-page .fn-tbl__key{ font-weight:700; color:var(--text); }
.funnels-page .fn-tbl__ago{ font-weight:500; color:var(--text-muted); white-space:nowrap; }
/* Прочерк вместо нуля там, где меры нет: у воронки со списком смены нет
   отправок, и ноль читался бы как поломка, а не как «здесь меряют другое». */
.funnels-page .fn-tbl__dash{ color:var(--text-faint); }
/* Колонка «Работа»: что модуль делает с воронкой прямо сейчас. Отдельно от
   статуса намеренно — статус означает «владелец разрешил слать», а не «идёт
   набор»: воронка со статусом «работает» может стоять вне рабочих дат или
   ждать обзора аудитории, и в списке это выглядело одинаково. Цветом
   помечаем только поломку: если красным светится половина таблицы, красное
   перестают замечать. */
.funnels-page .fn-tbl__state{ font:600 12.5px var(--font); color:var(--text); white-space:nowrap; }
.funnels-page .fn-tbl__state--danger{ color:var(--danger); }
.funnels-page .fn-tbl__state--warning{ color:var(--warning); }
.funnels-page .fn-tbl__state--muted{ color:var(--text-light); }
/* Подпись под состоянием — короткая фраза в одну строку; полностью
   объяснение живёт в подсказке по наведению. */
.funnels-page .fn-tbl__state + .fn-tbl__sub{ white-space:nowrap; }
/* Прогон стоит под состоянием, а не в колонке действий: кнопка отвечает на
   тот же вопрос, что и текст над ней. Отрицательный отступ слева гасит
   собственный padding кнопки — иначе её надпись не встаёт по одной линии с
   текстом состояния над ней. */
.funnels-page .fn-tbl__run{ margin: 4px 0 0 -10px; }
.funnels-page .kpi__note{ font:500 12px var(--font); color:var(--text-muted); margin-top:3px; }
.funnels-page .kpi__value--accent{ color:var(--accent); }

.funnels-page .fn-list{ display:flex; flex-direction:column; gap:8px; }
.funnels-page .fn-row{ display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .fn-row:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.funnels-page .fn-row__name{ font:600 13.5px var(--font); color:var(--text); text-decoration:none; }
.funnels-page .fn-row__name:hover{ color:var(--accent); }
/* Имя-кнопка: там, где строка открывает не страницу, а форму на месте. */
.funnels-page .fn-row__name--btn{ padding:0; border:0; background:0; cursor:pointer;
  font:600 13.5px var(--font); text-align:left; }
.funnels-page .fn-row__meta{ margin-left:auto; font:500 12px var(--font); color:var(--text-muted); }
/* Компактная строка своей воронки: имя может быть длинным, а справа стоят
   метка состояния и кнопка — им нужно место больше, чем хвосту названия. */
.funnels-page .fn-row__name{ max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.funnels-page .fn-list__tabs{ margin-bottom:10px; }

.funnels-page .fn-tpl-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.funnels-page .fn-tpl{ display:flex; flex-direction:column; gap:8px; padding:16px 18px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.funnels-page .fn-tpl__head{ display:flex; align-items:center; gap:8px; }
.funnels-page .fn-tpl__name{ font:600 14px var(--font); color:var(--text); }
.funnels-page .fn-tpl__desc{ font:400 12.5px/1.5 var(--font); color:var(--text-muted); margin:0; flex:1; }
.funnels-page .fn-tpl__foot{ display:flex; align-items:center; gap:10px; }
.funnels-page .fn-tpl__steps{ font:500 12px var(--font); color:var(--text-muted); margin-left:auto; }
.funnels-page .fn-tpl--locked{ opacity:.72; }
.funnels-page .fn-tpl__note{ font:400 12px/1.45 var(--font); color:var(--text-muted); margin:0;
  padding:8px 10px; background:var(--hover); border-radius:var(--radius-sm); }
.funnels-page .fn-tpl__note b{ font-weight:600; color:var(--text); }
/* Пустое состояние внутри сетки: без этого «ничего не нашлось» встаёт
   в одну колонку из двух и читается как карточка. */
.funnels-page .fn-tpl-grid > .page-state{ grid-column:1 / -1; }

/* Карточка находки Автопилота (.fn-find*).

   Отличается от карточки заготовки (.fn-tpl) не оформлением ради оформления,
   а весом: там витрина «что бывает», здесь — деньги филиала и решение,
   которое принимают один раз. Поэтому одна колонка, крупная сумма в
   заголовке и объяснение под ним: карточку читают целиком, а не сравнивают
   взглядом с соседней. */
.funnels-page .fn-find-list{ display:flex; flex-direction:column; gap:12px; }
/* Подсказка «как пользоваться» стоит над списком находок и без отступа
   слипается с первой карточкой в один блок — читается как её шапка, а не
   как отдельное объяснение. */
.funnels-page .callout + .fn-find-list{ margin-top:14px; }
.funnels-page .fn-find{ display:flex; flex-direction:column; gap:10px; padding:20px 22px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.funnels-page .fn-find__kicker{ font:600 11.5px var(--font); text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); }
.funnels-page .fn-find__title{ font:600 16px/1.4 var(--font); color:var(--text); margin:0; }
.funnels-page .fn-find__why{ font:400 13px/1.55 var(--font); color:var(--text-muted); margin:0; }
.funnels-page .fn-find__note{ font:400 12px/1.45 var(--font); color:var(--text-muted); margin:0;
  padding:8px 10px; background:var(--hover); border-radius:var(--radius-sm); }
/* Числа внутри фразы — как в callout: плашка и моноширинные цифры. Находка
   читается как предложение, а не как таблица, и суммы в ней должны быть
   заметны без того, чтобы выделять всю строку. */
.funnels-page .fn-find__title em,
.funnels-page .fn-find__why em,
.funnels-page .fn-find__note em{ font-style:normal; background:var(--bg-card);
  padding:1px 6px; border-radius:var(--radius-xs); border:1px solid var(--border);
  font-feature-settings:'tnum' 1; font-weight:600; color:var(--text); }
.funnels-page .fn-find__foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.funnels-page .fn-find__reach{ font:500 12.5px var(--font); color:var(--text-muted); margin-left:auto; }

@media(max-width:700px){
  .funnels-page .fn-find__reach{ margin-left:0; width:100%; }
}

.funnels-page .fn-filter{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.funnels-page .fn-filter__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.funnels-page .fn-filter__count{ font:500 12.5px var(--font); color:var(--text-muted); margin-left:auto; }
.funnels-page .fn-filter .search{ width:320px; }
.funnels-page .fn-filter .field{ width:200px; }

@media(max-width:900px){
  .funnels-page .fn-tpl-grid{ grid-template-columns:1fr; }
  .funnels-page .fn-filter .search,
  .funnels-page .fn-filter .field{ width:100%; }
  .funnels-page .fn-filter__count{ margin-left:0; }
}

/* =====================================================================
   ПУЛЬС — параметры воронки (.fp-*)

   Раньше жили в <style> страницы /pulse-params. Перенесены сюда при
   правке подсказок атрибуции: карточка выбора с описанием и подсказкой
   нужна не одной странице — тот же вид у выбора категории.
   ===================================================================== */

.funnels-page .fp-main{ padding:24px 32px 80px; max-width:900px; margin:0 auto; }
.funnels-page .fp-crumbs{ display:flex; align-items:center; gap:8px; margin-bottom:14px;
  font:500 12.5px var(--font); color:var(--text-muted); }
.funnels-page .fp-crumbs a{ color:var(--text-muted); text-decoration:none; }
.funnels-page .fp-crumbs a:hover{ color:var(--text); }
.funnels-page .fp-head{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.funnels-page .fp-head h1{ font:700 24px var(--font); letter-spacing:-.01em; margin:0 0 4px; color:var(--text); }
.funnels-page .fp-head__sub{ color:var(--text-muted); font:500 13.5px var(--font);
  margin:0; max-width:620px; line-height:1.55; }
.funnels-page .fp-head__actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.funnels-page .fp-card{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:16px; }
.funnels-page .fp-card__head{ margin-bottom:14px; }
.funnels-page .fp-card__head h2{ font:700 16px var(--font); color:var(--text); margin:0 0 4px; }
.funnels-page .fp-card__head p{ font:400 12.5px/1.5 var(--font); color:var(--text-muted); margin:0; }
/* Карточки выбора: одна строка на десктопе, колонка на узком экране. */
.funnels-page .fp-choice{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.funnels-page .fp-choice--two{ grid-template-columns:repeat(2, 1fr); }
.funnels-page .fp-opt{ text-align:left; padding:14px 16px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.funnels-page .fp-opt:hover{ border-color:var(--border-strong); }
.funnels-page .fp-opt.is-on{ border-color:var(--accent-line); background:var(--accent-soft); }
.funnels-page .fp-opt__name{ display:block; font:600 13.5px var(--font); color:var(--text); margin-bottom:3px; }
.funnels-page .fp-opt.is-on .fp-opt__name{ color:var(--accent); }
.funnels-page .fp-opt__desc{ display:block; font:400 12px/1.45 var(--font); color:var(--text-muted); }
/* Строка «когда выбирать»: отделена от описания линией, потому что
   отвечает на другой вопрос — не «что это», а «мой ли это случай». */
.funnels-page .fp-opt__hint{ display:block; margin-top:8px; padding-top:8px;
  border-top:1px solid var(--divider); font:500 12px/1.45 var(--font); color:var(--text); }
.funnels-page .fp-opt__hint em{ font-style:normal; font-feature-settings:'tnum' 1; }
.funnels-page .fp-slider{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.funnels-page .fp-slider input{ flex:1; accent-color:var(--accent); }
.funnels-page .fp-slider__val{ font:700 18px var(--font); color:var(--text);
  min-width:62px; font-feature-settings:'tnum' 1; }
.funnels-page .fp-slider__max{ font:500 12px var(--font); color:var(--text-light); white-space:nowrap; }
/* display:flex перебивает атрибут hidden — он ставит display:none только
   через таблицу стилей браузера, а авторское правило сильнее. Без [hidden]
   строка «дней» показывалась при персональном окне, где числа нет вовсе. */
.funnels-page .fp-days{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.funnels-page .fp-days[hidden]{ display:none; }
.funnels-page .fp-days .field{ flex:0 0 auto; }
.funnels-page .fp-days input{ width:90px; }
.funnels-page .fp-days span{ font:500 12.5px var(--font); color:var(--text-muted); }

/* Интервал рабочих дат. Две даты и кнопка снятия ограничения в одну строку:
   на узком экране переносятся целыми полями, а не отрываются от подписей. */
.funnels-page .fp-window{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.funnels-page .fp-window__field{ display:flex; flex-direction:column; gap:5px; }
.funnels-page .fp-window__label{ font:600 11.5px var(--font); color:var(--text-muted); }
.funnels-page .fp-window .field{ width:170px; }
.funnels-page .fp-foot{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.funnels-page .fp-foot__msg{ font:500 12.5px var(--font); color:var(--text-muted); }

@media(max-width:760px){
  .funnels-page .fp-main{ padding:20px 16px 60px; }
  .funnels-page .fp-choice,
  .funnels-page .fp-choice--two{ grid-template-columns:1fr; }
}


/* =====================================================================
   ПУЛЬС — каналы и очередь (.fc-*)

   Перенесено из <style> страницы /pulse-channels при правке подвала
   карточки подключения: правила про строку канала нужны и разделу
   «Подключённые каналы», и «Подключить новый», и это одна и та же строка.
   ===================================================================== */
/* Раскладка страницы — только токены дизайн-системы, без хардкода. */
.funnels-page .fc-main { padding: 28px 32px 80px; max-width: 1100px; margin: 0 auto; }
.funnels-page .fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.funnels-page .fc-head h1 { font: 700 24px var(--font); letter-spacing: -0.01em; margin: 0 0 4px; color: var(--text); }
.funnels-page .fc-head__actions { display: flex; align-items: center; gap: 8px; }
.funnels-page .fc-head__sub { color: var(--text-muted); font: 500 13.5px var(--font); margin: 0; max-width: 640px; line-height: 1.55; }
.funnels-page .fc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.funnels-page .fc-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.funnels-page .fc-card__head h2 { font: 700 16px var(--font); color: var(--text); margin: 0; }
.funnels-page .fc-card__head p { font: 400 12.5px var(--font); color: var(--text-muted); margin: 0; }
.funnels-page .fc-list { display: flex; flex-direction: column; gap: 0; }
.funnels-page .fc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--divider); }
.funnels-page .fc-row:first-child { border-top: 0; }
.funnels-page .fc-row__name { font: 600 14px var(--font); color: var(--text); min-width: 110px; }
/* Порядок каналов: строку тащат за всю ширину, ручка — подсказка, что можно.
   Линия сверху или снизу показывает, куда встанет строка. */
.funnels-page .fc-row--order { cursor: grab; padding: 10px 0; }
.funnels-page .fc-row--order.is-dragging { opacity: .45; }
.funnels-page .fc-row--order.is-over-top { box-shadow: inset 0 2px 0 var(--accent); }
.funnels-page .fc-row--order.is-over-bottom { box-shadow: inset 0 -2px 0 var(--accent); }
.funnels-page .fc-order__grip { color: var(--text-light); display: inline-flex; }
.funnels-page .fc-order__pos { font: 600 12.5px var(--font); color: var(--text-muted); min-width: 14px; font-feature-settings: 'tnum' 1; }
/* Чем подключён канал: у Telegram режима два, и без этой подписи строки
   различались бы только идентификатором. Вес обычный — это уточнение к
   названию, а не второе название. */
.funnels-page .fc-row__mode { font: 400 13px var(--font); color: var(--text-light); }
.funnels-page .fc-row__meta { font: 500 12.5px var(--font); color: var(--text-muted); margin: 0; }
.funnels-page .fc-row__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* Строка канала — три яруса, а не поток с переносом: состояние, подробности,
   настройки. Иначе порядок блоков зависел от длины названия, и у соседних
   каналов настройки оказывались по разные стороны строки. */
.funnels-page .fc-row--channel { flex-direction: column; align-items: stretch; gap: 10px; }
.funnels-page .fc-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Колонка названия одной ширины у всех строк — тогда состояние, роль и
   кнопки читаются сверху вниз столбцами, а не лесенкой. */
.funnels-page .fc-row--channel .fc-row__name { flex: 0 0 210px; }
/* display обязателен: полоса — это span внутри строки, а к строчным
   элементам ширина и высота не применяются вовсе. Без него полоса
   отрисовывается пустой рамкой, и расход лимита не виден. */
.funnels-page .fc-bar { display: inline-block; width: 160px; height: 6px; border-radius: 999px;
  background: var(--bg-app); overflow: hidden; vertical-align: middle; }
.funnels-page .fc-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.funnels-page .fc-bar__fill--full { background: var(--danger); }
.funnels-page .fc-num { font: 600 13px var(--font); color: var(--text); font-feature-settings: 'tnum' 1; }
.funnels-page .fc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.funnels-page .fc-row__hint { flex-basis: 100%; font: 400 12px/1.5 var(--font); color: var(--text-light); margin: 0; }
.funnels-page .fc-row__hint--blocked { color: var(--warning); }
.funnels-page .fc-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.funnels-page .fc-field { display: flex; flex-direction: column; gap: 4px; }
.funnels-page .fc-field label { font: 600 11px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.funnels-page .fc-field input { width: 130px; }
.funnels-page .fc-field__hint { font: 400 11.5px var(--font); color: var(--text-light); margin: 0; }
/* Секрет режима — токен бота. Поле широкое: строка от BotFather длиннее
   сотни знаков, и в поле на 130 пикселей владелец не увидит, что вставил. */
.funnels-page .fc-secret { flex-basis: 100%; display: none; flex-direction: column; gap: 8px;
  margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--bg-app); }
.funnels-page .fc-secret.is-open { display: flex; }
.funnels-page .fc-secret__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.funnels-page .fc-secret__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; }
.funnels-page .fc-secret__field label { font: 600 11px var(--font); color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.05em; }
.funnels-page .fc-secret__field input { width: 100%; }
/* Баг core.css: поздний .modal { display:none; position:fixed } перебивает
   паттерн .ab-modal-back. Без этого правила окно с кодом либо не видно, либо
   растянуто во весь экран (см. CLAUDE.md, «Известные баги»). */
.ab-modal-back.is-open > .ab-modal {
  display: flex; position: relative; top: auto; left: auto;
  width: 420px; max-width: 94vw; max-height: 90vh; height: auto;
}
@media (max-width: 760px) {
  .funnels-page .fc-main { padding: 20px 16px 60px; }
  .funnels-page .fc-row__right { margin-left: 0; width: 100%; }
  /* На телефоне колонка в 210 пикселей съедает пол-экрана: название встаёт
     отдельной строкой, состояние и кнопки — под ним. */
  .funnels-page .fc-row--channel .fc-row__name { flex: 1 1 100%; }
}

/* Предупреждения над карточками. Пустой блок отступа не даёт: без
   :not(:empty) страница без единого предупреждения начиналась бы с дыры,
   а с предупреждением плашка прилипала к карточке «Сейчас» и читалась как
   её часть. */
.funnels-page .fc-alerts:not(:empty){ margin-bottom:16px; }

/* Подвал карточки подключения — второе действие, которое относится к
   режиму целиком, а не к строке состояния. «Добавить ещё номер» стояло
   пятой кнопкой в ряду действий и терялось между «Отключить» и «Сменить
   бота»; половина ширины и знак «плюс» делают его находимым, не делая
   главным: запасной номер заводят редко. */
.funnels-page .fc-row__foot{ flex-basis:100%; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--divider); display:flex; justify-content:center; }
.funnels-page .fc-row__add{ width:50%; justify-content:center; }

@media (max-width: 760px){
  .funnels-page .fc-row__add{ width:100%; }
}

/* =====================================================================
   ПУЛЬС — экран диалогов (.pdx*)

   Раскладка мессенджера: слева список разговоров, справа переписка. До
   этого список и переписка были двумя страницами, и ответить трём
   клиентам подряд означало трижды вернуться назад.
   ===================================================================== */

/* Экран занимает окно целиком: список прокручивается внутри себя, а поле
   ответа обязано оставаться на виду. Вычитаем всё, что стоит выше: верхнюю
   панель, отступы .fn-main и шапку страницы. */
.funnels-page .pdx{ display:grid; grid-template-columns:340px minmax(0, 1fr) 300px; gap:16px;
  height:calc(100vh - var(--topbar-h, 56px) - 190px); min-height:460px; }
.funnels-page .fn-main--wide{ max-width:1600px; }

/* min-width:0 обязателен обеим колонкам: у грид-ячейки минимальная ширина
   равна ширине содержимого, и переписка с длинным составом полей ввода
   растягивала правую колонку за край окна — кнопка «Отправить» уезжала под
   плавающего помощника, а вся страница получала горизонтальную прокрутку. */
.funnels-page .pdx__list{ display:flex; flex-direction:column; min-height:0; min-width:0;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.funnels-page .pdx__filters{ display:flex; flex-direction:column; gap:10px;
  padding:12px; border-bottom:1px solid var(--divider); }
.funnels-page .pdx__filters .search{ width:100%; }
.funnels-page .pdx__filters .chip-row:empty{ display:none; }
.funnels-page .pdx__tabs{ align-self:flex-start; }
.funnels-page .pdx__filters .chip-row[hidden]{ display:none; }
.funnels-page .pdx__rows{ flex:1; overflow-y:auto; }

/* Строка разговора: кружок с инициалами, имя со временем, номер и начало
   последней реплики. Порядок тот же, что в любом мессенджере, — читать
   такой список человек уже умеет. */
.funnels-page .pdx-row{ display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:11px 12px; cursor:pointer; text-align:left;
  background:0; border:0; border-bottom:1px solid var(--divider); }
.funnels-page .pdx-row:hover{ background:var(--hover); }
.funnels-page .pdx-row.is-on{ background:var(--accent-soft); }
.funnels-page .pdx-row__avatar{ position:relative; width:36px; height:36px; flex:none; border-radius:999px;
  display:grid; place-items:center; background:var(--info-soft); color:var(--info);
  font:600 12.5px var(--font); }
.funnels-page .pdx-row.is-on .pdx-row__avatar{ background:var(--bg-card); color:var(--accent); }
/* Значок канала сидит на кружке с инициалами: строка отвечает «кто и чем
   писал» одним взглядом, а освободившаяся колонка справа уходит под метки. */
.funnels-page .pdx-row__ch{ position:absolute; right:-4px; bottom:-4px; }
.funnels-page .pdx-row__ch .ch-ico{ width:18px; height:18px; border-radius:50%;
  border:2px solid var(--bg-card); }
.funnels-page .pdx-row.is-on .pdx-row__ch .ch-ico{ border-color:var(--accent-soft); }
.funnels-page .pdx-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.funnels-page .pdx-row__top{ display:flex; align-items:baseline; gap:8px; }
.funnels-page .pdx-row__name{ font:600 13.5px var(--font); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funnels-page .pdx-row__at{ margin-left:auto; font:500 11.5px var(--font); color:var(--text-light); white-space:nowrap; }
.funnels-page .pdx-row__phone{ font:400 11.5px var(--font); color:var(--text-light); }
.funnels-page .pdx-row__last{ font:400 12.5px var(--font); color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funnels-page .pdx-row__you{ color:var(--text-light); }
.funnels-page .pdx-row__line{ display:flex; align-items:center; gap:8px; min-width:0; }
.funnels-page .pdx-row__line .pdx-row__last{ flex:1; min-width:0; }
/* Сколько раз человек написал подряд, не получив ответа. Не «непрочитанные»:
   отметок о прочтении в схеме нет, и число, которое гаснет от взгляда,
   отвечало бы не на тот вопрос. Единицу не рисуем — одно сообщение и так
   видно по строке. */
.funnels-page .pdx-row__count{ flex:none; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--accent); color:#fff; font:700 11px var(--font); }
.funnels-page .pdx-row__tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
/* Закрытый разговор из списка не исчезает — он просто перестаёт звать. */
.funnels-page .pdx-row--closed .pdx-row__name,
.funnels-page .pdx-row--closed .pdx-row__last{ color:var(--text-light); }

/* Метка строки: короче бейджа и без рамки — их в строке бывает три подряд,
   и полноценные бейджи занимали бы больше места, чем сама реплика. */
.funnels-page .pdx-tag{ display:inline-flex; align-items:center; height:18px; padding:0 6px;
  border-radius:var(--radius-xs, 6px); font:600 10.5px var(--font); white-space:nowrap; }
.funnels-page .pdx-tag--wait{ background:var(--warning-soft); color:var(--warning); }
.funnels-page .pdx-tag--fail{ background:var(--danger-soft); color:var(--danger); }
.funnels-page .pdx-tag--mute{ background:var(--hover); color:var(--text-muted); }
.funnels-page .pdx-tag--vip{ background:var(--accent-soft); color:var(--accent); }

.funnels-page .pdx__thread{ min-height:0; min-width:0; display:flex; flex-direction:column; }
/* Компонент переписки монтируется в саму колонку и вешает `.pd` на неё же,
   а не на потомка. Поэтому селектор без пробела: с пробелом правило не
   срабатывало вовсе, и высоту задавала `.pd` — окно минус фиксированные
   210 пикселей. Колонка получалась на два десятка пикселей короче списка
   слева, и низ экрана выглядел кривым. */
.funnels-page .pdx__thread.pd{ height:100%; min-height:0; }
/* Пока разговор не выбран, место занимает приглашение — во всю высоту
   колонки. Иначе правая часть экрана оказывалась вдвое ниже списка слева,
   и раскладка читалась как незагрузившаяся. */
.funnels-page .pdx__thread > .page-state{ flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; }

/* =====================================================================
   Кто перед вами — третья колонка

   Отвечает на вопрос, который администратор задаёт себе, читая входящее:
   этот человек ходит к нам десять лет или пришёл один раз по акции, есть
   ли у него запись, к кому он ходит. Раньше ответ жил в карточке клиента —
   то есть за уходом с экрана и потерей открытого разговора.
   ===================================================================== */
.funnels-page .pdx__panel{ display:flex; flex-direction:column; gap:12px;
  min-height:0; min-width:0; overflow-y:auto; }
.funnels-page .pdx-card{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; }
.funnels-page .pdx-card[hidden]{ display:none; }
.funnels-page .pdx-card__title{ font:600 13px var(--font); color:var(--text); margin:0 0 8px; }
.funnels-page .pdx-card__who{ display:flex; align-items:center; gap:11px; }
.funnels-page .pdx-card__avatar{ width:40px; height:40px; flex:none; border-radius:999px;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
  font:600 13px var(--font); }
.funnels-page .pdx-card__who-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.funnels-page .pdx-card__name{ font:700 14px var(--font); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funnels-page .pdx-card__sub{ font:400 11.5px var(--font); color:var(--text-light); }
.funnels-page .pdx-card__tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.funnels-page .pdx-card__foot{ margin-top:12px; }
.funnels-page .pdx-card__foot .btn{ width:100%; justify-content:center; }

/* Числа парами: колонка узкая, и одно число в строку растянуло бы карточку
   на пол-экрана. */
.funnels-page .pdx-facts{ display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--divider); }
.funnels-page .pdx-fact{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.funnels-page .pdx-fact__label{ font:600 10.5px var(--font); color:var(--text-light);
  text-transform:uppercase; letter-spacing:.05em; }
.funnels-page .pdx-fact__value{ font:600 12.5px var(--font); color:var(--text); }

.funnels-page .pdx-line{ display:flex; align-items:center; gap:8px;
  padding:7px 0; border-top:1px solid var(--divider); }
.funnels-page .pdx-card .pdx-line:first-of-type{ border-top:0; padding-top:0; }
.funnels-page .pdx-line__name{ flex:1; min-width:0; font:600 12.5px var(--font); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; }
.funnels-page .pdx-line__note{ font:500 11px var(--font); color:var(--text-muted); white-space:nowrap; }
.funnels-page .pdx-line--task.is-done .pdx-line__name{ color:var(--text-light); text-decoration:line-through; }

@media(max-width:1280px){
  /* Панель уходит первой: без неё экран остаётся рабочим, а её данные
     открываются кнопкой «Открыть карточку» в шапке разговора. */
  .funnels-page .pdx{ grid-template-columns:340px minmax(0, 1fr); }
  .funnels-page .pdx__panel{ display:none; }
}

@media(max-width:1000px){
  /* На узком экране список и переписка встают друг под друга: две колонки
     по 170 пикселей не годятся ни для того, ни для другого. */
  .funnels-page .pdx{ grid-template-columns:1fr; height:auto; }
  .funnels-page .pdx__list{ max-height:340px; }
  .funnels-page .pdx__thread.pd{ height:calc(100vh - var(--topbar-h, 56px) - 240px); }
}

/* ClientFlow · шаблоны и ручные задачи администратора.
   Паттерны: плоский список, form controls и selectable chips из UI-kit §7/§34. */
.cf-admin-tasks{ margin-bottom:18px; }
.cf-admin-tasks--home{ margin-top:24px; }
.cf-admin-tasks__title{ display:flex; align-items:center; gap:8px; }
.cf-admin-tasks__icon{ color:var(--text-light); }
.cf-admin-tasks__head-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; flex-wrap:wrap; }
.cf-admin-tasks__filter{ width:auto; max-width:200px; min-width:0; height:32px; font-size:13px; }
.cf-admin-task{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--divider); }
.cf-admin-task:first-child{ border-top:0; }
.cf-admin-task--done .cf-admin-task__title{ color:var(--text-light); }
.cf-admin-task__body{ flex:1; min-width:0; }
.cf-admin-task__title{ display:flex; align-items:center; gap:8px; margin:0 0 3px; color:var(--text); font:600 13.5px var(--font); }
.cf-admin-task__dot{ display:inline-block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--success); }
.cf-admin-task__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--text-light); font:400 12px var(--font); }
.cf-admin-task__meta .badge{ display:inline-block; padding:1px 7px; border-radius:var(--radius-xs); background:var(--accent-soft); color:var(--accent); font:600 11px var(--font); }
.cf-admin-task__meta .badge--info{ background:var(--info-soft); color:var(--info); }
.cf-admin-task__meta .badge--neutral{ background:var(--hover); color:var(--text-light); }
.cf-admin-task__meta .badge--success{ background:var(--success-soft); color:var(--success); }
.cf-admin-task__meta .badge--warning{ background:var(--warning-soft); color:var(--warning); }
.cf-admin-task__desc{ margin-top:4px; color:var(--text-light); font:400 12.5px var(--font); }
.cf-admin-task__note{ margin-top:6px; padding-left:12px; border-left:2px solid var(--divider); color:var(--text-light); font:400 12.5px var(--font); }
.cf-admin-task__note--remark{ color:var(--danger); border-left-color:var(--danger); }
.cf-admin-task__actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.cf-admin-task--template{ padding-inline:12px; border-radius:var(--radius-xs); background:var(--hover); }
.cf-admin-task--paused{ opacity:.72; }
.cf-admin-task__section-label{ margin:14px 0 6px; color:var(--text-muted); font:600 11px var(--font); letter-spacing:.06em; text-transform:uppercase; }
.cf-task-checkbox{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; color:var(--text); font:500 13.5px var(--font); }
.cf-task-checkbox input{ width:18px; height:18px; accent-color:var(--text); cursor:pointer; }
.cf-task-schedule{ display:flex; flex-direction:column; gap:14px; }
.cf-task-schedule__type{ display:block; }
.cf-task-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cf-task-weekdays{ display:flex; flex-wrap:wrap; gap:6px; }
.cf-task-weekday{ position:relative; }
.cf-task-weekday input{ position:absolute; opacity:0; pointer-events:none; }
.cf-task-weekday span{ display:grid; place-items:center; min-width:38px; min-height:34px; padding:0 8px; border:1px solid var(--border-strong); border-radius:var(--radius-xs); background:var(--bg-card); color:var(--text-light); font:600 12px var(--font); cursor:pointer; }
.cf-task-weekday input:focus-visible + span{ box-shadow:0 0 0 3px rgba(15,23,42,.08); }
.cf-task-weekday input:checked + span{ background:var(--text); border-color:var(--text); color:var(--bg-card); }
.cf-task-field-hint{ margin-top:6px; color:var(--text-light); font:400 12px/1.45 var(--font); }
.cf-task-template-summary{ padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--hover); color:var(--text-muted); font:400 12.5px/1.5 var(--font); }
.cf-task-assignee-picker{ max-height:180px; overflow-y:auto; padding:2px; }
.cf-task-complete-title{ color:var(--text); font-size:14px; font-weight:600; }
.cf-task-history-modal{ width:640px; }
.cf-task-modal__foot{ display:grid; grid-template-columns:1fr auto auto; }
.cf-task-delete{ justify-self:start; }
/* HTML-атрибут [hidden] (UA-правило без !important) перебивается
   .cf-task-schedule{display:flex} и .s2-btn{display:inline-flex}: в форме
   разовой задачи показывались блок «Регулярность» и кнопка «Удалить». */
.cf-task-schedule[hidden], .cf-task-delete[hidden]{ display:none !important; }
.cf-task-modal__foot .s2-btn:last-child{ justify-self:end; }
.cf-remark-toggle{ display:flex; align-items:center; gap:8px; margin-top:4px; cursor:pointer; color:var(--text); font:500 13px var(--font); }
.cf-remark-toggle input{ width:16px; height:16px; cursor:pointer; }
.cf-remark-toggle em{ font-style:normal; font-weight:600; }

@media(max-width:600px){
  .cf-task-form-grid{ grid-template-columns:1fr; }
  .cf-admin-tasks__head-actions{ width:100%; justify-content:flex-start; }
  .cf-admin-tasks__filter{ max-width:none; flex:1 1 100%; }
  .cf-admin-tasks__head-actions .s2-btn{ min-height:44px; }
  .cf-admin-task{ align-items:flex-start; flex-direction:column; }
  .cf-admin-task__actions{ width:100%; }
  .cf-admin-task__actions .s2-btn{ min-height:44px; }
  .cf-task-weekday span{ min-height:44px; }
}

/* Факторный анализ выручки · таблица и связанные компоненты отчёта.
   Перенесено из inline-стилей рендерера по контракту дизайн-системы. */
.fx-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.fx-seg{display:inline-flex;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:2px;}
.fx-seg__btn{border:0;background:transparent;cursor:pointer;font:600 12.5px var(--font);color:var(--text-muted);padding:6px 14px;border-radius:var(--radius-xs);}
.fx-seg__btn:hover{color:var(--text);}
.fx-seg__btn.is-on{background:var(--bg-card);color:var(--text);box-shadow:var(--shadow-sm);}
.fx-seg__label{font:600 12px var(--font);color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;}
.fx-bar__hint{font:500 12px var(--font);color:var(--text-light);}
.fx-month{border:1px solid var(--border);background:var(--bg-card);color:var(--text);border-radius:var(--radius-sm);padding:6px 10px;font:500 12.5px var(--font);}
.fx-kpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.fx-kpi{flex:1;min-width:190px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:14px 16px;}
.fx-kpi__k{font:600 11px var(--font);color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.fx-kpi__v{font:600 20px var(--font);color:var(--text);font-variant-numeric:tabular-nums;}
.fx-kpi__v.is-pos{color:var(--success);}
.fx-kpi__v.is-neg{color:var(--danger);}
.fx-kpi__s{font:500 12px var(--font);color:var(--text-muted);margin-top:4px;}
.fx-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.fx-tbl-actions{display:flex;justify-content:flex-end;margin-bottom:8px;}
.fx-staff-toggle{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:1px solid var(--tip-line);border-radius:var(--radius-sm);background:var(--tip-soft);font:600 11px var(--font);color:var(--tip);cursor:pointer;white-space:nowrap;}
.fx-staff-toggle:hover{border-color:var(--tip);background:var(--bg-card);}
.fx-tbl{--fx-label-col:210px;--fx-data-col:96px;--fx-impact-col:128px;border-collapse:collapse;table-layout:fixed;width:100%;font:500 13px var(--font);}
/* Без мастеров таблица заполняет карточку. В раскрытом режиме её ширина
   снова складывается из фиксированных колонок и появляется горизонтальный скролл. */
.fx-tbl--staff-open{width:1px;}
/* Числовые и персональные колонки остаются компактными; колонка влияния
   шире под полный заголовок. Первая колонка липнет к левому краю. */
.fx-tbl .fx-col-label{width:var(--fx-label-col);}
.fx-tbl .fx-col-data{width:var(--fx-data-col);}
.fx-tbl .fx-col-impact{width:var(--fx-impact-col);}
.fx-tbl th,.fx-tbl td{box-sizing:border-box;width:var(--fx-data-col);min-width:var(--fx-data-col);max-width:var(--fx-data-col);padding:10px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--divider);}
.fx-tbl th{font:600 11.5px var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;background:var(--bg-app);white-space:normal;vertical-align:bottom;}
.fx-tbl th.fx-impact,.fx-tbl td.fx-impact{width:var(--fx-impact-col);min-width:var(--fx-impact-col);max-width:var(--fx-impact-col);}
.fx-tbl th.fx-l,.fx-tbl td.fx-l{width:var(--fx-label-col);min-width:var(--fx-label-col);max-width:var(--fx-label-col);text-align:left;position:sticky;left:0;z-index:2;background:var(--bg-card);box-shadow:1px 0 0 var(--divider);}
.fx-tbl thead th.fx-l{background:var(--bg-app);z-index:3;}
/* При раскрытии мастеров на широком экране фиксируем весь сводный блок:
   показатель + факт + сравнение + % + дельта + влияние. На планшете
   остаётся только первая липкая колонка, чтобы мастерам хватало места. */
@media (min-width:1101px){
.fx-tbl--staff-open th:nth-child(n+2):nth-child(-n+6),.fx-tbl--staff-open td:nth-child(n+2):nth-child(-n+6){position:sticky;z-index:2;background:var(--bg-card);}
.fx-tbl--staff-open thead th:nth-child(n+2):nth-child(-n+6){z-index:3;background:var(--bg-app);}
.fx-tbl--staff-open th:nth-child(2),.fx-tbl--staff-open td:nth-child(2){left:var(--fx-label-col);}
.fx-tbl--staff-open th:nth-child(3),.fx-tbl--staff-open td:nth-child(3){left:calc(var(--fx-label-col) + var(--fx-data-col));}
.fx-tbl--staff-open th:nth-child(4),.fx-tbl--staff-open td:nth-child(4){left:calc(var(--fx-label-col) + var(--fx-data-col) + var(--fx-data-col));}
.fx-tbl--staff-open th:nth-child(5),.fx-tbl--staff-open td:nth-child(5){left:calc(var(--fx-label-col) + var(--fx-data-col) + var(--fx-data-col) + var(--fx-data-col));}
.fx-tbl--staff-open th:nth-child(6),.fx-tbl--staff-open td:nth-child(6){left:calc(var(--fx-label-col) + var(--fx-data-col) + var(--fx-data-col) + var(--fx-data-col) + var(--fx-data-col));box-shadow:1px 0 0 var(--border);}
}
.fx-tbl tr.fx-total td.fx-l,.fx-tbl tr.fx-node td.fx-l{background:var(--bg-app);}
.fx-tbl tr:hover td.fx-l{background:var(--hover);}
/* Колонки мастеров (раскрытие «влияния на выручку» вправо): узкие, только
   имя, без верхнего регистра — иначе длинные ФИО слипаются в кашу. */
.fx-tbl th.fx-staff{font:600 11.5px var(--font);color:var(--text);text-transform:none;letter-spacing:0;overflow-wrap:break-word;}
.fx-tbl td.fx-staff-val{padding-left:8px;padding-right:8px;}
.fx-tbl td.fx-staff-link{cursor:pointer;}
.fx-tbl td.fx-staff-link:hover{text-decoration:underline;}
.fx-tbl td{font-variant-numeric:tabular-nums;}
.fx-tbl tr.fx-total td{font-weight:700;color:var(--text);background:var(--bg-app);border-bottom:2px solid var(--border);}
.fx-tbl tr.fx-node td{background:var(--bg-app);}
.fx-tbl tr:hover td{background:var(--hover);}
.fx-name{display:inline-flex;align-items:center;gap:8px;}
.fx-l1{padding-left:22px;}
.fx-l2{padding-left:40px;}
.fx-l3{padding-left:58px;}
.fx-l4{padding-left:76px;}
/* Древовидные линии вложенности (как в файловых менеджерах): вертикали
   продолжения уровня + «тройник»/«уголок» к самой строке.
   Контейнер — липкая первая колонка (position:sticky выше — она же
   containing block для абсолютных направляющих). */
.fx-guide{position:absolute;top:0;bottom:0;width:18px;pointer-events:none;}
.fx-g1{left:0;}
.fx-g2{left:18px;}
.fx-g3{left:36px;}
.fx-g4{left:54px;}
.fx-guide--v::before,.fx-guide--tee::before{content:'';position:absolute;left:8px;top:0;bottom:0;border-left:1px solid var(--text-faint);}
.fx-guide--corner::before{content:'';position:absolute;left:8px;top:0;height:50%;border-left:1px solid var(--text-faint);}
.fx-guide--tee::after,.fx-guide--corner::after{content:'';position:absolute;left:8px;top:50%;width:9px;border-top:1px solid var(--text-faint);}
/* Тоггл раскрытия — тот же паттерн, что в milena_pl: шеврон поворачивается
   на 90° при раскрытии, узлы по умолчанию свёрнуты, раскрытие послойно. */
.fx-tgl{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-xs);color:var(--text-muted);flex:none;transition:transform .15s,color .12s;}
.fx-tgl:hover{color:var(--text);}
.fx-tgl.is-open{transform:rotate(90deg);}
.fx-tgl-sp{display:inline-block;width:18px;flex:none;}
.fx-tbl tr.fx-hidden{display:none;}
.fx-kpi-name{font-weight:600;}
.fx-tag{font:600 10px var(--font);text-transform:uppercase;letter-spacing:.04em;color:var(--tip);background:var(--tip-soft);border:1px solid var(--tip-line);border-radius:var(--radius-xs);padding:1px 6px;}
.fx-pos{color:var(--success);font-weight:600;}
.fx-neg{color:var(--danger);font-weight:600;}
.fx-zero{color:var(--text-faint);}
/* Редактируемая ячейка «стоимость стрижки» периода сравнения (факт и факт):
   цена задаётся вручную, потому что истории цен в YClients нет. */
.fx-tbl td.fx-edit{cursor:text;}
.fx-tbl td.fx-edit:hover{color:var(--tip);}
.fx-tbl td.fx-edit.is-manual{color:var(--tip);font-weight:600;}
.fx-tbl td.fx-edit .fx-edit__pen{font-size:10px;margin-left:5px;color:var(--text-faint);}
.fx-tbl td.fx-edit:hover .fx-edit__pen{color:var(--tip);}
.fx-tbl td.fx-edit input{width:96px;text-align:right;font:500 13px var(--font);color:var(--text);font-variant-numeric:tabular-nums;padding:4px 8px;border:1px solid var(--tip);border-radius:var(--radius-xs);background:var(--bg-card);outline:none;}
.fx-chart{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:16px 18px;}
.fx-chart__title{font:600 13px var(--font);color:var(--text);margin-bottom:12px;}
.fx-chart__box{position:relative;height:420px;}
.fx-note{border:1px solid var(--tip-line);background:var(--tip-soft);border-radius:var(--radius);padding:14px 16px;margin-top:16px;font:400 13px/1.55 var(--font);color:var(--text);}
.fx-note b{font-weight:600;}
.fx-note em{font-style:normal;font-weight:600;color:var(--tip);}
.fx-warn{border:1px solid var(--warning-line);background:var(--warning-soft);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px;font:500 12.5px/1.5 var(--font);color:var(--text);}
.fx-warn a{color:var(--tip);font-weight:600;}
/* Горизонтальный блок «Дополнительная информация» под таблицей */
.fx-side{display:flex;flex-wrap:wrap;gap:12px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:14px 18px;margin-top:16px;}
.fx-side__title{font:600 13px var(--font);color:var(--text);width:100%;margin-bottom:2px;}
.fx-side-item{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:220px;padding:6px 0;}
.fx-side-item__icon{flex:none;width:16px;height:16px;color:var(--text-light);margin-top:2px;}
.fx-side-item__body{flex:1;min-width:0;}
.fx-side-item__top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.fx-side-item__name{font:500 12.5px var(--font);color:var(--text-muted);}
.fx-side-item__val{font:600 15px var(--font);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.fx-side-item__delta{font:500 12px var(--font);margin-top:2px;}

/* Распределение клиентской базы · отчёт и анализ по мастерам.
   Перенесено из inline-стилей рендерера по контракту дизайн-системы. */
.mcb-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.mcb-seg{display:inline-flex;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:2px;}
.mcb-seg__btn{border:0;background:transparent;cursor:pointer;font:600 12.5px var(--font);color:var(--text-muted);padding:6px 14px;border-radius:var(--radius-xs);}
.mcb-seg__btn:hover{color:var(--text);}
.mcb-seg__btn.is-on{background:var(--bg-card);color:var(--text);box-shadow:var(--shadow-sm);}
.mcb-seg__label{font:600 12px var(--font);color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;}

/* Обучающий блок «7 стадий» — три колонки уровней */
.mcb-intro{border:1px solid var(--tip-line);background:var(--tip-soft);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;}
.mcb-intro__lead{display:flex;gap:10px;font:500 13px/1.55 var(--font);color:var(--text);margin-bottom:14px;}
.mcb-intro__lead svg{flex:none;color:var(--tip);margin-top:2px;}
.mcb-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:12px;}
@media (max-width:900px){.mcb-tiers{grid-template-columns:1fr;}}
.mcb-tier{border-radius:var(--radius-sm);padding:10px 14px;font:400 12.5px/1.6 var(--font);color:var(--text);}
.mcb-tier--start{background:var(--info-soft);border:1px solid var(--info-line);}
.mcb-tier--mid{background:var(--warning-soft);border:1px solid var(--warning-line);}
.mcb-tier--high{background:var(--success-soft);border:1px solid var(--success-line);}
.mcb-tier__h{display:flex;align-items:center;gap:8px;font:600 12.5px var(--font);margin-bottom:4px;}
.mcb-tier__dot{width:9px;height:9px;border-radius:50%;flex:none;}
.mcb-tier--start .mcb-tier__dot{background:var(--info);}
.mcb-tier--mid .mcb-tier__dot{background:var(--warning);}
.mcb-tier--high .mcb-tier__dot{background:var(--success);}
.mcb-tier ul{margin:0;padding-left:26px;}
.mcb-tier li{margin:1px 0;color:var(--text-muted);}
.mcb-tier li b{color:var(--text);font-weight:600;}
.mcb-intro__tail{font:400 12.5px/1.55 var(--font);color:var(--text-muted);margin:0;}

/* Шапка-KPI */
.mcb-head{border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;display:grid;grid-template-columns:repeat(3,minmax(90px,auto)) minmax(200px,1fr) minmax(170px,1fr);gap:20px;}
@media (max-width:1100px){.mcb-head{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.mcb-head{grid-template-columns:1fr;}}
.mcb-head__label{display:flex;align-items:center;gap:6px;font:600 11px var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.mcb-head__value{font:600 24px/1.15 var(--font);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mcb-head__sub{font:400 11.5px var(--font);color:var(--text-faint);margin-top:3px;}
.mcb-head__trow{display:flex;align-items:baseline;gap:8px;padding:2px 0;}
.mcb-head__tdot{width:9px;height:9px;border-radius:50%;flex:none;align-self:center;}
.mcb-tone--start{background:var(--info);}
.mcb-tone--mid{background:var(--warning);}
.mcb-tone--high{background:var(--success);}
.mcb-tone--text{background:var(--text);}
.mcb-head__tpct{font:600 13px var(--font);color:var(--text);min-width:34px;font-variant-numeric:tabular-nums;}
.mcb-head__tname{font:500 12px var(--font);color:var(--text-muted);}
.mcb-head__trev{font:500 12px var(--font);color:var(--text);margin-left:auto;font-variant-numeric:tabular-nums;}
.mcb-head__row{display:flex;justify-content:space-between;gap:10px;font:500 12.5px var(--font);color:var(--text-muted);padding:2px 0;}
.mcb-head__row b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}

/* Карта зрелости */
.mcb-map{border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius);padding:18px 20px;margin-bottom:20px;}
.mcb-map__title{font:600 13px var(--font);color:var(--text);margin-bottom:14px;}
.mcb-map__legend{display:flex;gap:16px;font:500 11.5px var(--font);color:var(--text-muted);margin-bottom:10px;}
.mcb-map__legend span{display:inline-flex;align-items:center;gap:6px;}
.mcb-map__grid{display:grid;grid-template-columns:minmax(120px,170px) 1fr 56px 84px minmax(120px,150px);gap:8px 14px;align-items:center;}
.mcb-map__glabel{font:500 12.5px var(--font);color:var(--text-muted);white-space:nowrap;}
.mcb-map__track{position:relative;height:24px;background:var(--bg-app);border-radius:var(--radius-xs);overflow:hidden;}
.mcb-map__progress{display:block;width:100%;height:100%;border:0;border-radius:var(--radius-xs);overflow:hidden;background:transparent;appearance:none;}
.mcb-map__progress::-webkit-progress-bar{background:transparent;}
.mcb-map__progress::-webkit-progress-value{background:var(--mcb-series);border-radius:var(--radius-xs);}
.mcb-map__progress::-moz-progress-bar{background:var(--mcb-series);border-radius:var(--radius-xs);}
.mcb-map__val{position:absolute;left:8px;top:50%;transform:translateY(-50%);padding:1px 5px;border-radius:var(--radius-xs);background:var(--bg-card);font:600 11.5px var(--font);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--shadow-sm);}
.mcb-map__pct{font:600 12.5px var(--font);color:var(--text);font-variant-numeric:tabular-nums;}
.mcb-map__cl{display:flex;align-items:center;gap:7px;font:600 12.5px var(--font);color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.mcb-map__cdot{width:9px;height:9px;border-radius:50%;flex:none;}
.mcb-map__cl .mcb-map__cdot{background:var(--mcb-series);}
/* Класс серии задаёт только переменную. Фон самого <progress> должен оставаться
   прозрачным, иначе незаполненная часть визуально превращается в 100%. */
.mcb-series-1{--mcb-series:var(--series-1);}
.mcb-series-2{--mcb-series:var(--series-2);}
.mcb-series-3{--mcb-series:var(--series-3);}
.mcb-series-4{--mcb-series:var(--series-4);}
.mcb-series-5{--mcb-series:var(--series-5);}
.mcb-series-6{--mcb-series:var(--series-6);}
.mcb-series-7{--mcb-series:var(--series-7);}
.mcb-map__cap{font:600 11px var(--font);color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
/* Скобка уровня справа: цветная рамка + подпись и доля выручки.
   grid-column задан явно: элементы с явной строкой auto-placement ставит
   раньше остальных, без колонки скобка уезжает в первую колонку. */
.mcb-map__bracket{grid-column:5;border:1px dashed;border-radius:var(--radius-sm);padding:8px 12px;font:600 12px/1.4 var(--font);align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.mcb-map__bracket--start{grid-row:1 / 2;border-color:var(--info-line);color:var(--info);}
.mcb-map__bracket--mid{grid-row:2 / 5;border-color:var(--warning-line);color:var(--warning);}
.mcb-map__bracket--high{grid-row:5 / 8;border-color:var(--success-line);color:var(--success);}

/* Анализ по мастерам: вкладки */
.mcb-tabs{display:inline-flex;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:2px;margin-bottom:14px;}
.mcb-tabs__btn{border:0;background:transparent;cursor:pointer;font:600 12.5px var(--font);color:var(--text-muted);padding:6px 16px;border-radius:var(--radius-xs);}
.mcb-tabs__btn:hover{color:var(--text);}
.mcb-tabs__btn.is-on{background:var(--bg-card);color:var(--text);box-shadow:var(--shadow-sm);}
.mcb-analysis{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;}
@media (max-width:1100px){.mcb-analysis{grid-template-columns:1fr;}}

/* Таблица мастеров с уровнями в шапке */
.mcb-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.mcb-tbl{border-collapse:collapse;width:100%;min-width:960px;font:500 12.5px var(--font);}
.mcb-tbl th,.mcb-tbl td{padding:8px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--divider);}
.mcb-tbl th{font:600 11px var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;}
.mcb-tbl th.mcb-l,.mcb-tbl td.mcb-l{text-align:left;}
.mcb-tbl .mcb-num{font-variant-numeric:tabular-nums;}
.mcb-tbl thead .mcb-tier-h{text-align:center;border-bottom:1px solid var(--divider);height:28px;}
.mcb-tbl thead .mcb-tier-h--start{background:var(--info-soft);color:var(--info);}
.mcb-tbl thead .mcb-tier-h--mid{background:var(--warning-soft);color:var(--warning);}
.mcb-tbl thead .mcb-tier-h--high{background:var(--success-soft);color:var(--success);}
.mcb-tbl thead .mcb-gh{background:var(--bg-app);height:42px;}
/* Строки таблицы и строки стек-баров — единый ритм 36px, чтобы мастер и его
   бар в панели «Структура по мастерам» были на одной горизонтали. */
.mcb-tbl tbody tr{height:36px;}
.mcb-tbl td.mcb-v{font-variant-numeric:tabular-nums;}
.mcb-tbl td.mcb-v .mcb-pct{color:var(--text-faint);font-size:11px;margin-left:6px;}
.mcb-tbl td.is-max{background:var(--success-soft);}
.mcb-tbl td.is-max .mcb-pct{color:var(--success);}
.mcb-tbl tr.mcb-total td{font-weight:700;color:var(--text);background:var(--bg-app);border-top:2px solid var(--border);}
.mcb-tbl tr:hover td{background:var(--hover);}
.mcb-tbl tr:hover td.is-max{background:var(--success-soft);}
.mcb-zero{color:var(--text-faint);}

/* Структура по мастерам — стек-бары 100%. Ритм выравнен с таблицей:
   border(1) + padding(16) + шапка панели(56) = шапка таблицы (~73px),
   строки баров = строкам таблицы (36px) — мастер и его бар на одной линии. */
.mcb-side{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:16px 18px;}
.mcb-side__head{height:56px;box-sizing:border-box;}
.mcb-side__title{font:600 12.5px var(--font);color:var(--text);margin-bottom:4px;}
.mcb-side__legend{display:flex;flex-wrap:wrap;gap:12px;font:500 11px var(--font);color:var(--text-muted);}
.mcb-side__legend span{display:inline-flex;align-items:center;gap:5px;}
.mcb-side__dot{width:8px;height:8px;border-radius:2px;flex:none;}
.mcb-sbar{display:grid;grid-template-columns:minmax(90px,130px) 1fr;gap:10px;align-items:center;height:36px;box-sizing:border-box;}
.mcb-sbar__name{font:500 12px var(--font);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mcb-sbar__track{height:20px;border-radius:var(--radius-xs);overflow:hidden;background:var(--bg-app);}
.mcb-sbar__svg{display:block;width:100%;height:20px;}
.mcb-sbar__seg--start{fill:var(--info);}
.mcb-sbar__seg--mid{fill:var(--warning);}
.mcb-sbar__seg--high{fill:var(--success);}
.mcb-sbar__empty{display:block;width:100%;height:100%;background:var(--bg-app);}

.mcb-note{border:1px solid var(--tip-line);background:var(--tip-soft);border-radius:var(--radius);padding:16px 20px;margin:20px 0;font:400 13px/1.6 var(--font);color:var(--text);}
.mcb-note b{font-weight:600;}
.mcb-note ul{margin:6px 0 10px;padding-left:20px;}
.mcb-note li{margin:2px 0;}
.mcb-note__h{margin:8px 0 2px;}

.mcb-tech{margin-top:8px;}
.mcb-tech summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font:600 12px var(--font);color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-app);}
.mcb-tech summary::-webkit-details-marker{display:none;}
.mcb-tech summary:hover{color:var(--text-muted);}
.mcb-tech[open] summary{margin-bottom:12px;}
.mcb-tech .mcb-tbl-wrap{background:var(--bg-app);border-color:var(--border);}
.mcb-tech .mcb-tbl{color:var(--text-muted);font-size:12px;min-width:900px;}
.mcb-tech .mcb-tbl th{background:var(--bg-app);color:var(--text-faint);}
.mcb-tech__hint{font:400 12px var(--font);color:var(--text-faint);margin:0 0 12px;}
.mcb-tech__bar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 12px;}
.mcb-tech__bar .mcb-tech__hint{margin:0;}

/* ── Отчёты от Милены · Возвращаемость ─────────────────────────────── */
.report-reading-guide{margin-bottom:24px;}
.mret-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.mret-period{display:flex;flex-direction:column;gap:6px;}
.mret-period__label{font:600 11px var(--font);color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;}
.mret-month{height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text);padding:0 10px;font:500 13px var(--font);}
.mret-month:focus{outline:2px solid var(--accent-line);outline-offset:1px;}
.mret-bar__meta{display:flex;align-items:center;justify-content:flex-end;gap:10px 16px;flex-wrap:wrap;font:500 12.5px var(--font);color:var(--text-muted);}
.mret-bar__meta b{font-weight:600;color:var(--text);}
.mret-settings{color:var(--accent);font-weight:600;text-decoration:none;}
.mret-settings:hover{text-decoration:underline;}
.mret-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.mret-kpi{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:18px 20px;}
.mret-kpi__label{font:600 12px var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.mret-kpi__rate{margin-top:8px;font:700 30px/1.1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;}
.mret-kpi__facts{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:10px;font:500 12.5px var(--font);color:var(--text-muted);}
.mret-kpi__facts b{font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;}
.mret-kpi__text{margin:9px 0 0;font:400 12px/1.5 var(--font);color:var(--text-light);}
.mret-access{margin-bottom:16px;border:1px solid var(--warning-line);border-radius:var(--radius);background:var(--warning-soft);padding:12px 14px;font:500 12.5px/1.5 var(--font);color:var(--text);}
.mret-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.mret-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font:500 12.5px var(--font);color:var(--text);}
.mret-table th,.mret-table td{min-width:82px;padding:10px 11px;border-bottom:1px solid var(--divider);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mret-table thead th{background:var(--bg-app);font:600 10.5px/1.35 var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.035em;}
.mret-table .mret-master{min-width:246px;text-align:center;color:var(--text);text-transform:none;font-size:11.5px;letter-spacing:0;white-space:normal;border-bottom:1px solid var(--border);}
.mret-table .mret-label{position:sticky;left:0;z-index:2;min-width:220px;max-width:220px;text-align:left;background:var(--bg-card);box-shadow:1px 0 0 var(--divider);white-space:normal;}
.mret-table thead .mret-label{z-index:4;background:var(--bg-app);}
.mret-table .mret-total-col{border-left:2px solid var(--border);}
.mret-table tr:last-child td{border-bottom:0;}
.mret-table tbody tr:hover td{background:var(--hover);}
.mret-table tbody tr:hover .mret-label{background:var(--hover);}
.mret-table .mret-section-row td{background:var(--bg-app);font-weight:650;}
.mret-table .mret-section-row .mret-label{background:var(--bg-app);}
.mret-table .mret-detail-row .mret-label{padding-left:40px;color:var(--text-muted);font-weight:500;}
.mret-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-height:24px;cursor:pointer;color:var(--text);}
.mret-toggle svg{width:16px;height:16px;flex:none;color:var(--text-muted);transition:transform .15s ease;}
.mret-toggle[aria-expanded="true"] svg{transform:rotate(90deg);}
.mret-toggle:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:var(--radius-xs);}
.mret-rate{font-weight:700;color:var(--text);}
.mret-dash{color:var(--text-faint);}
.mret-table tr[hidden]{display:none;}
.mret-note-row td{padding:12px 14px;background:var(--info-soft);}
.mret-note-row:hover td{background:var(--info-soft);}
.mret-note{display:flex;align-items:flex-start;gap:9px;max-width:960px;margin:0 auto;color:var(--text);}
.mret-note svg{width:17px;height:17px;flex:none;color:var(--info);margin-top:1px;}
.mret-note p{margin:0;font:400 12.5px/1.55 var(--font);white-space:normal;}
.mret-mobile{display:none;}
.mret-definitions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;}
.mret-definitions article{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:14px 15px;}
.mret-definitions svg{width:18px;height:18px;flex:none;color:var(--text-light);}
.mret-definitions h3{margin:0;font:600 12.5px var(--font);color:var(--text);}
.mret-definitions p{margin:4px 0 0;font:400 12px/1.5 var(--font);color:var(--text-muted);}
@media (max-width:800px){
  .mret-summary{grid-template-columns:1fr;}
  .mret-desktop{display:none;}
  .mret-mobile{display:flex;flex-direction:column;gap:12px;}
  .mret-mobile-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);overflow:hidden;}
  .mret-mobile-card h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--divider);font:600 14px var(--font);color:var(--text);}
  .mret-mobile-section{border-bottom:1px solid var(--divider);}
  .mret-mobile-section:last-child{border-bottom:0;}
  .mret-mobile-section summary{display:grid;grid-template-columns:1fr minmax(210px,auto);align-items:center;gap:10px;min-height:52px;padding:10px 16px;cursor:pointer;list-style:none;font:600 12.5px var(--font);color:var(--text);}
  .mret-mobile-section summary::-webkit-details-marker{display:none;}
  .mret-mobile-section summary::before{content:'›';grid-column:1;grid-row:1;margin-right:7px;color:var(--text-muted);font-size:18px;transition:transform .15s ease;}
  .mret-mobile-section summary>span{grid-column:1;grid-row:1;padding-left:18px;}
  .mret-mobile-section[open] summary::before{transform:rotate(90deg);}
  .mret-mobile-metric{display:grid;grid-template-columns:repeat(2,minmax(56px,1fr)) minmax(52px,auto);align-items:center;gap:8px;text-align:right;}
  .mret-mobile-metric span{display:flex;flex-direction:column;}
  .mret-mobile-metric b,.mret-mobile-metric strong{font:650 13px var(--font);color:var(--text);font-variant-numeric:tabular-nums;}
  .mret-mobile-metric small{font:400 9.5px var(--font);color:var(--text-light);}
  .mret-mobile-detail{padding:11px 16px;border-top:1px solid var(--divider);}
  .mret-mobile-detail>span{display:block;margin-bottom:8px;font:500 12px var(--font);color:var(--text-muted);}
  .mret-mobile-note{margin:0;padding:11px 16px;background:var(--info-soft);font:400 11.5px/1.5 var(--font);color:var(--text-muted);}
  .mret-definitions{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .mret-bar{align-items:stretch;}
  .mret-period,.mret-month{width:100%;}
  .mret-bar__meta{justify-content:flex-start;}
  .mret-kpi{padding:16px;}
  .mret-kpi__rate{font-size:26px;}
  .mret-mobile-section summary{grid-template-columns:1fr;gap:9px;}
  .mret-mobile-section summary .mret-mobile-metric{grid-column:1;padding-left:18px;width:100%;}
}

/* ── Настройки услуг · автоматически синхронизированный тайминг ───── */
.settings-v2 .svc-timing{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.settings-v2 .svc-timing__input{width:88px;font-variant-numeric:tabular-nums;}
.settings-v2 .svc-timing__source,.settings-v2 .svc-timing-summary{font:500 11px/1.35 var(--font);color:var(--text-muted);font-variant-numeric:tabular-nums;}

/* ── Отчёт «Выполнение плана» ─────────────────────────────────────── */
/* ── Отчёт «Выполнение плана» · UI Kit §1/6/7/8/9/10/18 ────── */
.reports-page .plan-report,
.reports-page .plan-report *{box-sizing:border-box;text-transform:none;letter-spacing:normal;}
.reports-page .plan-report{
  display:flex;flex-direction:column;gap:18px;color:var(--text);font-family:var(--font);
  font-feature-settings:'cv11' 1,'ss01' 1;
}

/* Callout §1 */
.reports-page .plan-report .callout{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px 16px;border:1px solid var(--tip-line);border-radius:var(--radius-sm);background:var(--tip-soft);
}
.reports-page .plan-report .callout--warning{border-color:var(--warning-line);background:var(--warning-soft);}
.reports-page .plan-report .callout--danger{border-color:var(--danger-line);background:var(--danger-soft);}
.reports-page .plan-report .callout__icon{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--tip);background:var(--bg-card);
}
.reports-page .plan-report .callout--warning .callout__icon{color:var(--warning);}
.reports-page .plan-report .callout--danger .callout__icon{color:var(--danger);}
.reports-page .plan-report .callout__title{margin:1px 0 4px;font:600 13.5px var(--font);letter-spacing:-.005em;color:var(--text);}
.reports-page .plan-report .callout--warning .callout__title{color:var(--warning);}
.reports-page .plan-report .callout--danger .callout__title{color:var(--danger);}
.reports-page .plan-report .callout__body{margin:0;font:400 13px/1.55 var(--font);color:var(--text);}

/* KPI §9 */
.reports-page .plan-report .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.reports-page .plan-report .kpi{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:14px;text-align:left;cursor:default;
  box-shadow:none;transform:none;transition:none;
}
.reports-page .plan-report .kpi:hover{border-color:var(--border);box-shadow:none;transform:none;}
.reports-page .plan-report .kpi__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.reports-page .plan-report .kpi__title{font:600 12.5px/1.35 var(--font);color:var(--text-muted);}
.reports-page .plan-report .kpi__icon{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:0 0 auto;
  background:var(--bg-app);color:var(--text-muted);
}
.reports-page .plan-report .kpi__icon--accent{background:var(--accent-soft);color:var(--accent);}
.reports-page .plan-report .kpi__icon--success{background:var(--success-soft);color:var(--success);}
.reports-page .plan-report .kpi__icon--warning{background:var(--warning-soft);color:var(--warning);}
.reports-page .plan-report .kpi__icon--danger{background:var(--danger-soft);color:var(--danger);}
.reports-page .plan-report .kpi__icon--info{background:var(--info-soft);color:var(--info);}
.reports-page .plan-report .kpi__value{
  font:600 28px/1 var(--font);letter-spacing:-.02em;color:var(--text);font-feature-settings:'tnum' 1;white-space:nowrap;
}
.reports-page .plan-report .kpi__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 12px/1.45 var(--font);color:var(--text-muted);
}

/* Card, headings and chart */
.reports-page .plan-report .card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;
  box-shadow:none;transform:none;transition:none;
}
.reports-page .plan-report .card:hover{border-color:var(--border);box-shadow:none;transform:none;}
.reports-page .plan-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.reports-page .plan-section-title{margin:0;font:600 14px/1.4 var(--font);letter-spacing:-.005em;color:var(--text);}
.reports-page .plan-section-desc{margin:3px 0 0;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.reports-page .plan-progress-card{display:flex;flex-direction:column;gap:16px;}
.reports-page .plan-chart-card{padding-bottom:16px;}
.reports-page .plan-chart{position:relative;height:auto;margin-top:18px;overflow-x:auto;overflow-y:hidden;}
.reports-page .plan-chart__canvas{position:relative;height:320px;min-width:100%;}
.reports-page .plan-chart--wide .plan-chart__canvas{min-width:1100px;}
.reports-page .plan-chart--xwide .plan-chart__canvas{min-width:1800px;}
.reports-page .plan-chart-legend{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0;}

/* Badges §8 */
.reports-page .plan-report .badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--border);
  background:var(--bg-app);color:var(--text-muted);border-radius:999px;font:600 11.5px var(--font);
  letter-spacing:.01em;white-space:nowrap;font-feature-settings:'tnum' 1;
}
.reports-page .plan-report .badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.reports-page .plan-report .badge--success{background:var(--success-soft);color:var(--success);border-color:var(--success-line);}
.reports-page .plan-report .badge--info{background:var(--info-soft);color:var(--info);border-color:var(--info-line);}
.reports-page .plan-report .badge--warning{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line);}
.reports-page .plan-report .badge--danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line);}
.reports-page .plan-report .badge--accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}

/* Native progress, styled as UI Kit §18 without inline width */
.reports-page .plan-report progress.progress{
  display:block;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;appearance:none;background:var(--bg-app);
}
.reports-page .plan-report progress.progress--lg{height:12px;}
.reports-page .plan-report progress.progress::-webkit-progress-bar{background:var(--bg-app);border-radius:999px;}
.reports-page .plan-report progress.progress::-webkit-progress-value{background:var(--accent);border-radius:999px;}
.reports-page .plan-report progress.progress::-moz-progress-bar{background:var(--accent);border-radius:999px;}
.reports-page .plan-report progress.progress--success::-webkit-progress-value{background:var(--success);}
.reports-page .plan-report progress.progress--success::-moz-progress-bar{background:var(--success);}
.reports-page .plan-report progress.progress--info::-webkit-progress-value{background:var(--info);}
.reports-page .plan-report progress.progress--info::-moz-progress-bar{background:var(--info);}
.reports-page .plan-report progress.progress--warning::-webkit-progress-value{background:var(--warning);}
.reports-page .plan-report progress.progress--warning::-moz-progress-bar{background:var(--warning);}
.reports-page .plan-report progress.progress--danger::-webkit-progress-value{background:var(--danger);}
.reports-page .plan-report progress.progress--danger::-moz-progress-bar{background:var(--danger);}

/* Tables §10 */
.reports-page .plan-report .tbl-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  box-shadow:none;transform:none;transition:none;
}
.reports-page .plan-report .tbl-card:hover{border-color:var(--border);box-shadow:none;transform:none;}
.reports-page .plan-report .tbl-card__bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--divider);
}
.reports-page .plan-report .tbl-card__count{flex:0 0 auto;padding-top:2px;font:500 12.5px var(--font);color:var(--text-muted);}
.reports-page .plan-table-wrap{overflow-x:auto;}
.reports-page .plan-report .tbl{width:100%;border-collapse:separate;border-spacing:0;font:500 13px var(--font);}
.reports-page .plan-report .tbl thead th{
  padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg-card);font:600 11px/1.35 var(--font);
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap;
}
.reports-page .plan-report .tbl thead th.num{text-align:right;}
.reports-page .plan-report .tbl tbody td{padding:9px 14px;border-bottom:1px solid var(--divider);vertical-align:middle;color:var(--text);}
.reports-page .plan-report .tbl tbody tr:last-child td{border-bottom:0;}
.reports-page .plan-report .tbl tbody tr:hover td{background:var(--hover);}
.reports-page .plan-report .tbl td.num{text-align:right;font-feature-settings:'tnum' 1;white-space:nowrap;}
.reports-page .plan-report .tbl td.actions{width:1%;text-align:right;white-space:nowrap;}
.reports-page .plan-detail__staff,.reports-page .plan-editor-table__staff{font-weight:600;}
.reports-page .plan-detail__fact,.reports-page .plan-detail__total{font-weight:600;}
.reports-page .plan-report .muted{color:var(--text-muted);}

/* Fields and buttons §6–7 */
.reports-page .plan-report .field{
  width:100%;height:38px;padding:0 12px;background:var(--bg-card);border:1px solid var(--border-strong);
  border-radius:var(--radius-xs);color:var(--text);font:500 13.5px var(--font);transition:border-color .12s,box-shadow .12s;
}
.reports-page .plan-report .field:hover{border-color:var(--text-faint);}
.reports-page .plan-report .field:focus{outline:0;border-color:var(--text);box-shadow:var(--focus-ring);}
.reports-page .plan-report .field::placeholder{color:var(--text-light);}
.reports-page .plan-report select.field{
  appearance:none;padding-right:32px;background-color:var(--bg-card);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
}
.reports-page .plan-report .field--narrow{max-width:320px;}
.reports-page .plan-report .field--xs{max-width:120px;}
.reports-page .plan-report .field-label{display:block;margin-bottom:6px;font:600 12.5px var(--font);color:var(--text);}
.reports-page .plan-report .field-hint{margin:6px 0 0;font:400 12px/1.45 var(--font);color:var(--text-light);}
.reports-page .plan-report .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text);
  font:600 13px var(--font);text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.reports-page .plan-report .btn:hover{background:var(--hover);border-color:var(--text-faint);}
.reports-page .plan-report .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--bg-card);}
.reports-page .plan-report .btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.reports-page .plan-report .btn--link{height:auto;padding:0;border:0;background:transparent;color:var(--accent);}
.reports-page .plan-report .btn--link:hover{background:transparent;border-color:transparent;text-decoration:underline;}
.reports-page .plan-report .btn:disabled{opacity:.45;cursor:not-allowed;}
.reports-page .plan-report .btn--loading{position:relative;color:transparent;pointer-events:none;}
.reports-page .plan-report .btn--loading::after{
  content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--text);border-top-color:transparent;animation:plan-btn-spin .8s linear infinite;
}
.reports-page .plan-report .plan-save-row.is-saved{color:var(--success);border-color:var(--success-line);background:var(--success-soft);}
.reports-page .plan-report .plan-save-row.is-error{color:var(--danger);border-color:var(--danger-line);background:var(--danger-soft);}
@keyframes plan-btn-spin{to{transform:rotate(360deg);}}

/* Plan editor */
.reports-page .plan-editor{margin-top:2px;}
.reports-page .plan-editor__bar{align-items:center;}
.reports-page .plan-editor__filters{padding:14px 16px;border-bottom:1px solid var(--divider);}
.reports-page .plan-editor__month{display:block;max-width:320px;}
.reports-page .plan-editor__body{min-height:72px;}
.reports-page .plan-editor-state{padding:24px 16px;text-align:center;font:500 13px var(--font);color:var(--text-muted);}
.reports-page .plan-editor-error{margin:16px;}
.reports-page .plan-field{margin-left:auto;text-align:right;font-feature-settings:'tnum' 1;}
.reports-page .plan-editor__footer{display:flex;justify-content:flex-end;padding:14px 16px;border-top:1px solid var(--divider);}
.reports-page .plan-editor-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.reports-page .plan-detail-targets{margin-top:2px;}
.reports-page .plan-detail-editor-row[hidden]{display:none;}
.reports-page .plan-detail-editor-row > td{padding:0;border-bottom:1px solid var(--divider);background:var(--bg-app);}
.reports-page .plan-detail-editor{padding:16px 18px;}
.reports-page .plan-detail-editor__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.reports-page .plan-detail-editor__head b{font:600 13.5px var(--font);color:var(--text);}
.reports-page .plan-detail-editor__head p{margin:3px 0 0;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.reports-page .plan-detail-editor__list{display:flex;flex-direction:column;gap:8px;}
.reports-page .plan-detail-editor__item{display:grid;grid-template-columns:minmax(0,1fr) 150px 34px;gap:10px;align-items:end;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.reports-page .plan-detail-editor__item b{display:block;font:600 13px var(--font);color:var(--text);}
.reports-page .plan-detail-editor__type{display:block;margin-top:3px;font:500 11.5px var(--font);color:var(--text-light);}
.reports-page .plan-detail-editor__amount .field{width:100%;}
.reports-page .plan-detail-editor__empty{margin:0;padding:12px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);font:400 12.5px/1.5 var(--font);color:var(--text-muted);background:var(--bg-card);}
.reports-page .plan-detail-editor__add{display:grid;grid-template-columns:minmax(220px,1fr) 150px auto;gap:10px;align-items:end;margin-top:12px;}
.reports-page .plan-detail-editor__add .field{width:100%;}
.reports-page .plan-detail-editor__add .btn{min-height:38px;}

@media (max-width:1100px){
  .reports-page .plan-report .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:600px){
  .reports-page .plan-report{gap:14px;}
  .reports-page .plan-report .kpi-grid{grid-template-columns:1fr;gap:10px;}
  .reports-page .plan-report .kpi{padding:16px;gap:12px;}
  .reports-page .plan-report .kpi__value{font-size:24px;}
  .reports-page .plan-report .card{padding:16px;}
  .reports-page .plan-section-head{flex-direction:column;gap:10px;}
  .reports-page .plan-chart-legend{justify-content:flex-start;}
  .reports-page .plan-chart{height:auto;margin-top:14px;}
  .reports-page .plan-chart__canvas{height:280px;}
  .reports-page .plan-report .tbl-card__bar{flex-direction:column;gap:6px;}
  .reports-page .plan-report .tbl-card__count{padding-top:0;}
  .reports-page .plan-editor__bar{align-items:flex-start;}
  .reports-page .plan-editor__filters{padding:14px;}
  .reports-page .plan-editor__month{max-width:none;}
  .reports-page .plan-detail-editor__add{grid-template-columns:1fr;}
  .reports-page .plan-detail-editor__item{grid-template-columns:minmax(0,1fr) 130px 34px;}
  .reports-page .plan-report .field--narrow{max-width:none;}
  .reports-page .plan-table-wrap{overflow:visible;}
  .reports-page .plan-report .tbl,.reports-page .plan-report .tbl tbody{display:block;}
  .reports-page .plan-report .tbl thead{display:none;}
  .reports-page .plan-report .tbl tbody tr{display:block;padding:12px 14px;border-bottom:1px solid var(--divider);}
  .reports-page .plan-report .tbl tbody tr:last-child{border-bottom:0;}
  .reports-page .plan-report .tbl tbody tr.plan-detail-editor-row{padding:0;background:var(--bg-app);}
  .reports-page .plan-report .tbl tbody tr.plan-detail-editor-row > td{display:block;width:100%;padding:0;text-align:left;}
  .reports-page .plan-report .tbl tbody tr.plan-detail-editor-row > td::before{display:none;}
  .reports-page .plan-report .tbl tbody td,
  .reports-page .plan-report .tbl tbody td.num,
  .reports-page .plan-report .tbl tbody td.actions{
    display:grid;grid-template-columns:minmax(112px,1fr) minmax(0,1fr);gap:12px;align-items:center;
    width:100%;padding:7px 0;border:0;text-align:right;white-space:normal;background:transparent;
  }
  .reports-page .plan-report .tbl tbody tr:hover td{background:transparent;}
  .reports-page .plan-report .tbl tbody td::before{
    content:attr(data-label);font:500 12px/1.35 var(--font);color:var(--text-muted);text-align:left;
  }
  .reports-page .plan-report .tbl tbody td.plan-detail__staff,
  .reports-page .plan-report .tbl tbody td.plan-editor-table__staff{display:block;padding:0 0 9px;text-align:left;font-size:14px;}
  .reports-page .plan-report .tbl tbody td.plan-detail__staff::before,
  .reports-page .plan-report .tbl tbody td.plan-editor-table__staff::before{display:none;}
  .reports-page .plan-field{width:100%;max-width:none;margin-left:0;}
  .reports-page .plan-report .tbl tbody td.actions .btn{min-height:44px;width:100%;}
  .reports-page .plan-editor__footer{padding:14px;}
  .reports-page .plan-editor__footer .btn{width:100%;min-height:44px;}
  .reports-page .plan-editor-actions{justify-content:flex-start;}
  .reports-page .plan-detail-editor{padding:14px;}
  .reports-page .plan-detail-editor__item{grid-template-columns:1fr 34px;}
  .reports-page .plan-detail-editor__amount{grid-column:1;}
.reports-page .plan-detail-editor__item > .btn{grid-column:2;grid-row:1;}
}

/* =====================================================================
   SETTINGS · ВЫБОР ТЕХКАРТЫ
   Полноэкранный поиск вместо нативного select: список может содержать
   сотни позиций из YClients.
   ===================================================================== */
.settings-v2 .svc-cost-wrap{display:flex;flex-direction:column;gap:6px;min-width:220px;}
.settings-v2 .svc-prime-cost-input{width:96px;}
.settings-v2 .svc-complex-cost{color:var(--text-muted);}
.settings-v2 .svc-complex-cost__suffix{font-size:11px;}
.settings-v2 .svc-tech-card-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:220px;min-height:46px;padding:8px 10px;
  color:var(--text);background:var(--bg-card);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font:500 12.5px/1.3 var(--font);text-align:left;
  cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.settings-v2 .svc-tech-card-trigger:hover{background:var(--hover);border-color:var(--text-faint);}
.settings-v2 .svc-tech-card-trigger:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--text-light);}
.settings-v2 .svc-tech-card-trigger:disabled{cursor:not-allowed;opacity:.55;background:var(--bg-app);}
.settings-v2 .svc-tech-card-trigger__copy{min-width:0;display:block;}
.settings-v2 .svc-tech-card-trigger__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.settings-v2 .svc-tech-card-trigger__meta{display:block;margin-top:2px;color:var(--text-muted);font:400 11px/1.3 var(--font);}
.settings-v2 .svc-tech-card-trigger__chevron{flex:0 0 auto;color:var(--text-light);}

.settings-v2 .svc-tech-card-picker-backdrop{
  position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;
  padding:24px;background:color-mix(in srgb,var(--text) 42%,transparent);
}
.settings-v2 .svc-tech-card-picker-backdrop.is-open{display:flex;}
.settings-v2 .svc-tech-card-picker{
  display:flex;flex-direction:column;width:min(680px,100%);max-height:min(720px,calc(100vh - 48px));
  overflow:hidden;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);font-family:var(--font);
}
.settings-v2 .svc-tech-card-picker__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 22px 16px;border-bottom:1px solid var(--divider);
}
.settings-v2 .svc-tech-card-picker__title{margin:0;color:var(--text);font:700 18px/1.3 var(--font);}
.settings-v2 .svc-tech-card-picker__sub{margin:4px 0 0;color:var(--text-muted);font:400 13px/1.45 var(--font);}
.settings-v2 .svc-tech-card-picker__close{
  display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;padding:0;
  color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
}
.settings-v2 .svc-tech-card-picker__close:hover{color:var(--text);background:var(--hover);}
.settings-v2 .svc-tech-card-picker__close:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.settings-v2 .svc-tech-card-picker__body{display:flex;min-height:0;flex:1;flex-direction:column;padding:18px 22px;}
.settings-v2 .svc-tech-card-picker__search{position:relative;display:block;}
.settings-v2 .svc-tech-card-picker__search > svg{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--text-light);pointer-events:none;}
.settings-v2 .svc-tech-card-picker__input{
  width:100%;height:40px;padding:0 12px 0 38px;color:var(--text);background:var(--bg-card);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:400 13px var(--font);
}
.settings-v2 .svc-tech-card-picker__input::placeholder{color:var(--text-light);}
.settings-v2 .svc-tech-card-picker__input:focus{outline:none;border-color:var(--text-light);box-shadow:var(--focus-ring);}
.settings-v2 .svc-tech-card-picker__summary{min-height:18px;margin:9px 0;color:var(--text-muted);font:400 12px/1.5 var(--font);}
.settings-v2 .svc-tech-card-picker__list{
  min-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);
}
.settings-v2 .svc-tech-card-picker__item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 14px;
  color:var(--text);background:var(--bg-card);border:0;border-bottom:1px solid var(--divider);
  font-family:var(--font);text-align:left;cursor:pointer;
}
.settings-v2 .svc-tech-card-picker__item:last-child{border-bottom:0;}
.settings-v2 .svc-tech-card-picker__item:hover{background:var(--hover);}
.settings-v2 .svc-tech-card-picker__item:focus-visible{position:relative;z-index:1;outline:none;box-shadow:inset var(--focus-ring);}
.settings-v2 .svc-tech-card-picker__item.is-selected{background:var(--accent-soft);}
.settings-v2 .svc-tech-card-picker__item-copy{min-width:0;}
.settings-v2 .svc-tech-card-picker__item-title{display:block;color:var(--text);font:600 13px/1.4 var(--font);overflow-wrap:anywhere;}
.settings-v2 .svc-tech-card-picker__item-sub{display:block;margin-top:3px;color:var(--text-muted);font:400 11.5px/1.35 var(--font);}
.settings-v2 .svc-tech-card-picker__item-cost{flex:0 0 auto;color:var(--text);font:600 13px/1.3 var(--font);white-space:nowrap;}
.settings-v2 .svc-tech-card-picker__item.is-selected .svc-tech-card-picker__item-cost{color:var(--accent-hover);}
.settings-v2 .svc-tech-card-picker__empty{padding:36px 20px;color:var(--text-muted);font:400 13px/1.5 var(--font);text-align:center;}
.settings-v2 .svc-tech-card-picker__foot{display:flex;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--divider);}

@media (max-width:600px){
  .settings-v2 .svc-cost-wrap{min-width:190px;}
  .settings-v2 .svc-tech-card-trigger{width:190px;}
  .settings-v2 .svc-tech-card-picker-backdrop{align-items:flex-end;padding:0;}
  .settings-v2 .svc-tech-card-picker{width:100%;max-height:88vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
  .settings-v2 .svc-tech-card-picker__head{padding:18px 16px 14px;}
  .settings-v2 .svc-tech-card-picker__body{padding:16px;}
  .settings-v2 .svc-tech-card-picker__foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
  .settings-v2 .svc-tech-card-picker__foot .s2-btn{width:100%;min-height:44px;justify-content:center;}
}

/* AI module landing preview. Components from UI Kit: buttons, badges,
   KPI and callout. Layout and mascot motion are isolated to this page. */
.ai-landing {
  --landing-width: 1184px;
  --landing-space: 24px;
  --landing-title: clamp(44px, 4.8vw, 68px);
  --landing-heading: clamp(30px, 3.2vw, 44px);
  margin: 0; background: var(--bg-card); color: var(--text);
  font: 400 15px/1.65 var(--font); font-feature-settings: 'cv11' 1, 'ss01' 1;
}
.ai-landing *, .ai-landing *::before, .ai-landing *::after { box-sizing: border-box; }
.ai-landing [hidden] { display: none !important; }
.ai-landing a { color: inherit; text-decoration: none; }
.ai-landing button { font: inherit; }
.ai-landing a:focus-visible, .ai-landing button:focus-visible, .ai-landing summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.ai-landing h1, .ai-landing h2, .ai-landing h3, .ai-landing h4, .ai-landing p { margin: 0; }
.ai-landing h2 { font-size: var(--landing-heading); letter-spacing: -.045em; line-height: 1.17; font-weight: 650; }
.ai-landing h3 { font-size: 22px; line-height: 1.35; letter-spacing: -.025em; font-weight: 650; }
.ai-landing h4 { font-size: 14px; font-weight: 650; }
.ai-landing__container { width: min(var(--landing-width), calc(100% - var(--landing-space) * 2)); margin-inline: auto; }
.ai-landing__skip { position: absolute; left: 16px; top: -100px; padding: 12px; background: var(--bg-card); z-index: 20; }
.ai-landing__skip:focus { top: 8px; }
.ai-landing__header { border-bottom: 1px solid var(--border); background: var(--bg-card); }
.ai-landing__nav { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ai-landing__brand { display: inline-flex; align-items: center; font-size: 28px; letter-spacing: -.06em; font-weight: 750; line-height: 1; }
.ai-landing__brand-mark { display: grid; place-items: center; width: 32px; height: 32px; margin-right: 9px; border-radius: var(--radius-sm); background: var(--accent); color: var(--bg-card); font-size: 30px; }
.ai-landing__brand-dot { color: var(--accent); }
.ai-landing__nav nav { display: flex; gap: 28px; font-size: 13px; color: var(--text-muted); }
.ai-landing__nav nav a { padding-block: 12px; }
.ai-landing__nav nav a:hover, .ai-landing__note a:hover, .ai-landing__footer a:hover { color: var(--accent); }
.ai-landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 17px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); font: 600 13px/1.4 var(--font); cursor: pointer; transition: background var(--dur-base), transform var(--dur-base); }
.ai-landing .btn:hover { background: var(--hover); }
.ai-landing .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.ai-landing .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.ai-landing .btn--lg { min-height: 52px; padding: 14px 20px; font-size: 14px; }
.ai-landing .btn span { font-size: 18px; }
.ai-landing__hero { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 44px; padding-block: 72px 64px; }
.ai-landing__eyebrow { color: var(--accent); font-weight: 600; font-size: 12px; letter-spacing: .035em; margin-bottom: 22px !important; display: flex; align-items: center; gap: 8px; }
.ai-landing__signal { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-xs); background: var(--accent); flex-shrink: 0; }
.ai-landing h1 { font-size: var(--landing-title); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; }
.ai-landing h1 span { color: var(--accent); }
.ai-landing__lede { font-size: 16px; line-height: 1.8; color: var(--text-muted); max-width: 510px; margin-top: 26px !important; }
.ai-landing__actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.ai-landing__note { color: var(--text-muted); font-size: 12px; margin-top: 16px !important; }
.ai-landing__scene { min-height: 510px; position: relative; display: grid; align-items: center; background: radial-gradient(ellipse at 50% 45%, var(--accent-line), var(--accent-soft) 65%); border-radius: var(--radius-lg); isolation: isolate; }
.ai-landing__scene-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-line) 1px, transparent 1px), linear-gradient(90deg, var(--accent-line) 1px, transparent 1px); background-size: 40px 40px; opacity: .35; mask-image: linear-gradient(transparent, var(--text), transparent); z-index: -1; }
.ai-landing__scene-caption { position: absolute; top: 22px; left: 22px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.ai-landing__mascot { width: 360px; max-width: 82%; margin: 55px auto 50px; transform: rotate(-5deg); }
.ai-landing__mascot img, .ai-landing__mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ai-landing__question { position: absolute; right: -14px; top: 62px; padding: 14px 18px; background: var(--text); color: var(--bg-card); border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); z-index: 2; transform: rotate(3deg); display: flex; gap: 24px; }
.ai-landing__question span { color: var(--accent-line); }
.ai-landing__insight { position: absolute; bottom: 33px; left: -24px; right: 30px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-md); transform: rotate(-2deg); }
.ai-landing__insight-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.ai-landing__small-label { display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.ai-landing__insight strong { display: block; font-size: 14px; font-weight: 650; }
.ai-landing__insight p { color: var(--text-muted); font-size: 12px; }
.ai-landing__motion { position: absolute; bottom: 0; right: 12px; min-height: 32px; background: transparent; border: 0; color: var(--text-muted); font-size: 10px !important; cursor: pointer; }
.ai-landing__context { border-block: 1px solid var(--border); }
.ai-landing__context-inner { min-height: 82px; display: flex; gap: 30px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.ai-landing__context strong { font-size: 20px; color: var(--text); font-weight: 750; letter-spacing: -.04em; }
.ai-landing__section { padding-block: 88px; scroll-margin-top: 24px; }
.ai-landing__section-head { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 38px; }
.ai-landing__section-head > p { color: var(--text-muted); font-size: 14px; }
.ai-landing__demo { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ai-landing__demo-sidebar { padding: 28px 22px; background: var(--bg-app); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 22px; }
.ai-landing__questions { display: grid; gap: 10px; }
.ai-landing__question-btn { width: 100%; padding: 16px 12px; display: grid; grid-template-columns: 20px 1fr 12px; text-align: left; gap: 8px; align-items: center; border: 1px solid transparent; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px !important; font-weight: 500 !important; }
.ai-landing__question-btn > span { font-size: 11px; }
.ai-landing__question-btn:hover { border-color: var(--border-strong); color: var(--text); }
.ai-landing__question-btn.is-active { background: var(--bg-card); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ai-landing__question-btn.is-active > span { color: var(--accent); }
.ai-landing__demo-note { margin-top: auto; }
.ai-landing__demo-note p { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.7; }
.ai-landing .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-xs); font: 500 10px/1.5 var(--font); border: 1px solid var(--border); }
.ai-landing .badge--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.ai-landing .badge--tip { color: var(--tip); background: var(--tip-soft); border-color: var(--tip-line); }
.ai-landing__analysis { padding: 28px 30px; min-height: 510px; }
.ai-landing__analysis-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; color: var(--text-muted); margin-bottom: 24px; }
.ai-landing__analysis-top > span:first-child { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ai-landing__analysis h3 { font-size: 20px; max-width: 540px; }
.ai-landing__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 24px; border-bottom: 1px solid var(--border); padding-bottom: 24px; gap: 18px; }
.ai-landing .kpi__label, .ai-landing .kpi__delta { display: block; color: var(--text-muted); font-size: 11px; }
.ai-landing .kpi__value { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.045em; margin-block: 5px; white-space: nowrap; }
.ai-landing__finding { display: flex; gap: 12px; margin-block: 20px; }
.ai-landing__step-no { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 11px; font-weight: 600; }
.ai-landing__finding p { font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.ai-landing .callout { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--tip-line); border-radius: var(--radius-sm); background: var(--tip-soft); }
.ai-landing .callout__title { font-size: 12px; font-weight: 600; color: var(--tip); margin-bottom: 5px; }
.ai-landing .callout__body { font-size: 13px; color: var(--text); }
.site-v3 .ai-landing .callout { margin: 0; }
.site-v3 .ai-landing .callout .callout__title { font: 600 12px/1.5 var(--font) !important; color: var(--tip) !important; margin-bottom: 5px !important; }
.site-v3 .ai-landing .callout .callout__body { font: 400 13px/1.65 var(--font) !important; color: var(--text) !important; margin: 0 !important; }
.ai-landing__source { margin-top: 16px; font-size: 12px; color: var(--text-muted); }
.ai-landing__source summary { cursor: pointer; padding-block: 8px; }
.ai-landing__source p { margin-top: 8px; }
.ai-landing__footnote { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 18px !important; }
.ai-landing__band { background: var(--accent-soft); border-block: 1px solid var(--accent-line); }
.ai-landing__benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; }
.ai-landing__benefits article { border-top: 1px solid var(--accent-line); padding-top: 22px; }
.ai-landing__index { font-size: 11px; color: var(--accent); font-weight: 600; }
.ai-landing__benefits h3 { margin-top: 20px; }
.ai-landing__benefits p { color: var(--text-muted); font-size: 14px; margin-top: 14px; }
.ai-landing__platform { display: grid; grid-template-columns: 1fr 1.3fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ai-landing__platform-intro { padding: 40px; background: var(--text); color: var(--bg-card); display: flex; align-items: flex-start; flex-direction: column; }
.ai-landing__brand--light { color: var(--accent-line); font-size: 32px; }
.ai-landing__platform-intro h3 { font-size: 28px; margin-top: 46px; }
.ai-landing__platform-intro p { color: var(--text-faint); font-size: 14px; margin-block: 20px 32px; }
.ai-landing__platform-steps { padding: 20px 34px; }
.ai-landing__platform-steps article { display: flex; gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--border); }
.ai-landing__platform-steps article:last-child { border: 0; }
.ai-landing__platform-steps h3 { font-size: 16px; }
.ai-landing__platform-steps p { color: var(--text-muted); font-size: 13px; margin-top: 6px; }
.ai-landing__start { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; border-top: 1px solid var(--border); }
.ai-landing__start .btn { margin-top: 26px; }
.ai-landing__setup { list-style: none; margin: 0; padding: 0; }
.ai-landing__setup li { display: flex; gap: 18px; padding-block: 23px; border-bottom: 1px solid var(--border); }
.ai-landing__setup li:first-child { padding-top: 0; }
.ai-landing__setup h3 { font-size: 18px; }
.ai-landing__setup p { font-size: 14px; color: var(--text-muted); margin-top: 9px; }
.ai-landing__faq { display: grid; grid-template-columns: .8fr 1.3fr; gap: 80px; border-top: 1px solid var(--border); }
.ai-landing__faq details { border-bottom: 1px solid var(--border); }
.ai-landing__faq summary { cursor: pointer; padding: 21px 28px 21px 0; font-size: 15px; font-weight: 500; position: relative; list-style: none; }
.ai-landing__faq summary::-webkit-details-marker { display: none; }
.ai-landing__faq summary::after { content: '+'; position: absolute; right: 0; top: 18px; color: var(--text-muted); font-size: 21px; }
.ai-landing__faq details[open] summary::after { content: '−'; }
.ai-landing__faq details p { font-size: 14px; color: var(--text-muted); padding-bottom: 22px; }
.ai-landing__faq details a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ai-landing__final { padding-block: 76px; background: var(--bg-app); text-align: center; border-top: 1px solid var(--border); }
.ai-landing__final .ai-landing__eyebrow { justify-content: center; }
.ai-landing__final .btn { margin-top: 28px; }
.ai-landing__final-demo { display: block; font-size: 13px; color: var(--text-muted) !important; margin-top: 18px; }
.ai-landing__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 30px; font-size: 11px; color: var(--text-muted); }
.ai-landing__footer .ai-landing__brand { color: var(--text); font-size: 24px; }
/* Finite motion; controls and reduced-motion also disable interaction motion. */
.ai-landing__mascot svg #eye-left-white, .ai-landing__mascot svg #eye-left-pupil,
.ai-landing__mascot svg #eye-right-white, .ai-landing__mascot svg #eye-right-pupil { transform-box: fill-box; transform-origin: center; animation: ai-mascot-blink 4s 1; }
.ai-landing__mascot svg #tentacle-1 { transform-box: fill-box; transform-origin: 90% 15%; animation: ai-mascot-wave 4s 1; }
.ai-landing.is-motion-paused .ai-landing__mascot svg * { animation: none !important; }
@keyframes ai-mascot-blink { 0%, 37%, 43%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.08); } }
@keyframes ai-mascot-wave { 0%, 100% { transform: rotate(0); } 30%, 65% { transform: rotate(5deg); } 45%, 80% { transform: rotate(-3deg); } }
@media (max-width: 1100px) {
  .ai-landing__hero { gap: 28px; }
  .ai-landing__actions { flex-direction: column; align-items: flex-start; }
  .ai-landing__scene { min-height: 490px; }
  .ai-landing__demo { grid-template-columns: 270px minmax(0, 1fr); }
  .ai-landing__analysis { padding: 24px; }
  .ai-landing .kpi__value { font-size: 21px; }
  .ai-landing__context-inner { gap: 20px; font-size: 11px; }
}
@media (max-width: 860px) {
  .ai-landing__nav nav { display: none; }
  .ai-landing__hero { grid-template-columns: 1fr; padding-top: 44px; }
  .ai-landing__hero-copy { max-width: 640px; }
  .ai-landing__actions { flex-direction: row; }
  .ai-landing__scene { min-height: 460px; max-width: 600px; width: 100%; margin-top: 20px; justify-self: center; }
  .ai-landing__mascot { width: 330px; }
  .ai-landing__question { right: 16px; }
  .ai-landing__insight { left: 16px; }
  .ai-landing__context-inner { flex-wrap: wrap; justify-content: center; padding-block: 22px; gap: 14px 24px; }
  .ai-landing__section-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .ai-landing__section-head > p br { display: none; }
  .ai-landing__demo { grid-template-columns: 1fr; }
  .ai-landing__demo-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .ai-landing__questions { grid-template-columns: repeat(3, 1fr); }
  .ai-landing__question-btn { grid-template-columns: 1fr; }
  .ai-landing__question-btn > span { display: none; }
  .ai-landing__demo-note p { margin-top: 8px; }
  .ai-landing__benefits { gap: 24px; }
  .ai-landing__platform { grid-template-columns: 1fr; }
  .ai-landing__platform-intro h3 { margin-top: 30px; }
  .ai-landing__start, .ai-landing__faq { gap: 40px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ai-landing { --landing-space: 20px; }
  .ai-landing__nav { min-height: 72px; gap: 10px; }
  .ai-landing__nav .btn { font-size: 11px; padding: 10px; }
  .ai-landing__brand { font-size: 24px; }
  .ai-landing__brand-mark { width: 28px; height: 28px; font-size: 25px; margin-right: 6px; }
  .ai-landing__hero { padding-block: 38px; }
  .ai-landing__lede { font-size: 15px; }
  .ai-landing__actions { display: grid; grid-template-columns: 1fr; }
  .ai-landing__actions .btn { width: 100%; }
  .ai-landing__note { font-size: 12px; }
  .ai-landing__scene { min-height: 395px; }
  .ai-landing__mascot { width: 270px; margin-block: 65px 55px; }
  .ai-landing__question { top: 50px; font-size: 11px; right: 8px; gap: 12px; padding: 12px; }
  .ai-landing__insight { left: 8px; right: 8px; bottom: 40px; padding: 12px; gap: 9px; }
  .ai-landing__insight strong { font-size: 12px; }
  .ai-landing__insight p { font-size: 11px; }
  .ai-landing__motion { min-height: 44px; bottom: -4px; }
  .ai-landing__context-inner > span:first-child { width: 100%; text-align: center; }
  .ai-landing__context-inner > span:last-child { display: none; }
  .ai-landing__section { padding-block: 54px; }
  .ai-landing__section-head { margin-bottom: 28px; }
  .ai-landing__demo-sidebar { padding: 20px 16px; gap: 16px; }
  .ai-landing__questions { grid-template-columns: 1fr; gap: 8px; }
  .ai-landing__question-btn { grid-template-columns: 20px 1fr 12px; padding: 13px 12px; font-size: 13px !important; min-height: 48px; }
  .ai-landing__question-btn > span { display: inline; }
  .ai-landing__analysis { padding: 22px 16px; min-height: 0; }
  .ai-landing__analysis-top { flex-wrap: wrap; }
  .ai-landing__metrics { grid-template-columns: 1fr; gap: 14px; padding-bottom: 20px; }
  .ai-landing .kpi { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; }
  .ai-landing .kpi__value { grid-column: 2; grid-row: 1 / 3; font-size: 22px; }
  .ai-landing .kpi__label, .ai-landing .kpi__delta { font-size: 12px; }
  .ai-landing__finding p, .ai-landing .callout__body { font-size: 14px; }
  .ai-landing__benefits { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
  .ai-landing__benefits h3 br { display: none; }
  .ai-landing__benefits h3 { margin-top: 12px; }
  .ai-landing__platform-intro { padding: 28px 24px; }
  .ai-landing__platform-steps { padding: 8px 20px; }
  .ai-landing__start, .ai-landing__faq { grid-template-columns: 1fr; }
  .ai-landing__start .btn { width: 100%; }
  .ai-landing__faq { gap: 22px; }
  .ai-landing__final { padding-block: 54px; }
  .ai-landing__final h2 { font-size: 29px; }
  .ai-landing__footer { gap: 16px 22px; }
  .ai-landing__footer > span:first-of-type { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-landing *, .ai-landing *::before, .ai-landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ai-landing__motion { display: none; }
}

/* Expressive narrative: the mascot is the interactive entry into analysis. */
.ai-landing--expressive { --landing-heading: clamp(36px, 4.4vw, 62px); }
.ai-landing--expressive .ai-landing__header { background: var(--text); color: var(--bg-card); border-color: color-mix(in srgb, var(--bg-card) 15%, transparent); }
.ai-landing--expressive .ai-landing__nav { min-height: 76px; }
.ai-landing--expressive .ai-landing__nav nav { color: var(--text-faint); }
.ai-landing--expressive .ai-landing__brand-mark { background: var(--accent); }
.ai-landing__theatre { overflow: hidden; background: var(--text); color: var(--bg-card); padding-block: 36px 30px; }
.ai-landing__opening { text-align: center; position: relative; z-index: 2; }
.ai-landing__opening .ai-landing__eyebrow { justify-content: center; color: var(--accent-line); margin-bottom: 20px !important; font-size: 11px; }
.ai-landing__opening h1 { font-size: clamp(58px, 6.7vw, 96px); font-weight: 600; letter-spacing: -.065em; line-height: .98; }
.ai-landing__opening h1 span { color: var(--accent); }
.ai-landing__opening > p:last-child { font-size: 14px; line-height: 1.7; color: var(--text-faint); margin-top: 22px; }
.ai-landing__playground { position: relative; display: grid; grid-template-columns: 1fr 1.45fr 1fr; align-items: center; min-height: 410px; margin-top: 10px; isolation: isolate; }
.ai-landing__playground::before { content: ''; position: absolute; inset: -25% 10%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); pointer-events: none; z-index: -2; }
.ai-landing__backtype { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: max-content; white-space: nowrap; font-size: clamp(120px, 14vw, 205px); font-weight: 750; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bg-card) 12%, transparent); z-index: -1; letter-spacing: -.055em; user-select: none; }
.ai-landing__stage-label { font-size: 11px; color: var(--text-light); margin-bottom: 20px !important; padding-left: 8px; }
.ai-landing__orbit-questions { position: relative; z-index: 3; margin-top: -22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ai-landing__orbit-question { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--bg-card) 25%, transparent); border-radius: var(--radius-sm); background: var(--text); color: var(--bg-card); font-size: 13px !important; font-weight: 500 !important; cursor: pointer; transform: rotate(-5deg); transition: transform .3s var(--ease), background .3s, color .3s; box-shadow: var(--shadow-md); }
.ai-landing__orbit-question:nth-of-type(2) { transform: translateX(18px) rotate(3deg); }
.ai-landing__orbit-question:nth-of-type(3) { transform: translateX(-5px) rotate(-3deg); }
.ai-landing__orbit-question > span:first-child { font-size: 10px; color: var(--text-light); }
.ai-landing__orbit-question > span:last-child { font-size: 18px; }
.ai-landing__orbit-question:hover { transform: translateX(8px) rotate(0); border-color: var(--accent); }
.ai-landing__orbit-question.is-active { background: var(--accent); color: var(--bg-card); border-color: var(--accent); transform: translateX(6px) rotate(-2deg); }
.ai-landing__orbit-question.is-active > span:first-child { color: var(--accent-line); }
.ai-landing__playground .ai-landing__mascot { width: 470px; max-width: 120%; margin: -5px -10% 0; transform: rotate(-6deg); position: relative; z-index: 2; transition: transform .65s var(--ease); }
.ai-landing__stage-answer { background: var(--bg-card); color: var(--text); padding: 22px 24px 20px; border-radius: var(--radius); transform: rotate(4deg); z-index: 3; position: relative; box-shadow: var(--shadow-lg); margin: -5px 0 0 -4px; transition: transform .5s var(--ease); }
.ai-landing__answer-head { display: flex; gap: 7px; align-items: center; color: var(--text-muted); font-size: 10px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.ai-landing__answer-head > span:last-child { margin-left: auto; font-size: 18px; }
.ai-landing__stage-metric { font-size: 54px; line-height: 1.15; letter-spacing: -.07em; font-weight: 650; color: var(--accent); margin-top: 18px !important; }
.ai-landing__stage-answer h2 { font-size: 25px; line-height: 1.12; letter-spacing: -.04em; margin-top: 10px; white-space: pre-line; }
.ai-landing__stage-answer > p:not(.ai-landing__stage-metric) { font-size: 12px; line-height: 1.65; color: var(--text-muted); margin-top: 14px; }
.ai-landing__answer-link { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 18px; font-size: 12px; font-weight: 600; min-height: 44px; }
.ai-landing__answer-link:hover { color: var(--accent); }
.ai-landing__stage-disclaimer { display: block; font-size: 10px; color: var(--text-muted); margin-top: 5px; }
.ai-landing__playground .ai-landing__motion { color: var(--text-light); bottom: 0; right: auto; left: 50%; transform: translateX(-50%); z-index: 4; }
.ai-landing__stage-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--bg-card) 18%, transparent); }
.ai-landing__stage-bottom strong { display: block; font-size: 14px; font-weight: 500; }
.ai-landing__stage-bottom div > span { display: block; color: var(--text-light); font-size: 12px; margin-top: 4px; }
.ai-landing__ticker { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 20px 24px; background: var(--accent); color: var(--bg-card); overflow: hidden; font-size: clamp(14px, 2vw, 24px); letter-spacing: -.025em; font-weight: 500; }
.ai-landing__ticker > span[aria-hidden] { font-size: 32px; line-height: 1; }
.ai-landing__ticker strong { font-weight: 500; }
.ai-landing__text-accent { color: var(--accent); }
.ai-landing--expressive .ai-landing__section { padding-block: 104px; }
.ai-landing--expressive .ai-landing__section-head { margin-bottom: 46px; }
.ai-landing--expressive .ai-landing__section-head > p { max-width: 350px; }
.ai-landing--expressive .ai-landing__demo { border-radius: var(--radius-sm); }
.ai-landing--expressive .ai-landing__demo-sidebar { background: var(--text); color: var(--bg-card); }
.ai-landing--expressive .ai-landing__demo-sidebar .ai-landing__small-label { color: var(--text-light); }
.ai-landing--expressive .ai-landing__question-btn { color: var(--text-faint); }
.ai-landing--expressive .ai-landing__question-btn.is-active { color: var(--text); }
.ai-landing--expressive .ai-landing__question-btn:not(.is-active):hover { border-color: var(--text-muted); color: var(--bg-card); }
.ai-landing--expressive .ai-landing__demo-note p { color: var(--text-light); }
.ai-landing__manifesto { background: var(--accent); color: var(--bg-card); padding-block: 80px; overflow: hidden; }
.ai-landing__manifesto .ai-landing__eyebrow { color: var(--accent-line); }
.ai-landing__manifesto h2 { font-size: clamp(42px, 6.5vw, 92px); line-height: 1.04; font-weight: 600; letter-spacing: -.06em; }
.ai-landing__manifesto h2 span { color: var(--text); position: relative; }
.ai-landing__manifesto h2 span::after { content: ''; position: absolute; bottom: -4px; height: 3px; background: var(--text); left: 0; right: 0; transform: rotate(-2deg); }
.ai-landing__manifesto-bottom { display: grid; grid-template-columns: 100px 1fr 1fr; align-items: center; gap: 32px; margin-top: 42px; }
.ai-landing__manifesto-star { display: block; font-size: 120px; line-height: .7; align-self: center; color: var(--text); font-weight: 500; }
.ai-landing__manifesto-bottom p:first-of-type { font-size: 28px; line-height: 1.3; letter-spacing: -.03em; font-weight: 500; }
.ai-landing__manifesto-bottom p:last-child { font-size: 14px; line-height: 1.7; max-width: 370px; }
.ai-landing--expressive .ai-landing__platform { border: 0; border-radius: 0; grid-template-columns: .9fr 1.3fr; gap: 50px; }
.ai-landing--expressive .ai-landing__platform-intro { border-radius: var(--radius-sm); transform: rotate(-2deg); margin: 10px; padding: 38px; background: var(--accent-soft); color: var(--text); }
.ai-landing--expressive .ai-landing__brand--light { color: var(--accent); }
.ai-landing--expressive .ai-landing__platform-intro p { color: var(--text-muted); }
.ai-landing--expressive .ai-landing__platform-steps { padding: 0; }
.ai-landing--expressive .ai-landing__platform-steps .ai-landing__step-no { background: transparent; color: var(--accent); font-size: 32px; width: 40px; height: auto; border: 0; font-weight: 500; place-items: start; line-height: 1.1; }
.ai-landing--expressive .ai-landing__platform-steps article { padding-block: 26px; }
.ai-landing--expressive .ai-landing__platform-steps h3 { font-size: 20px; }
.ai-landing--expressive .ai-landing__final { background: var(--text); color: var(--bg-card); padding-block: 90px; }
.ai-landing--expressive .ai-landing__final h2 { font-size: clamp(42px, 6vw, 84px); line-height: 1.06; }
.ai-landing--expressive .ai-landing__final h2 span { color: var(--accent); }
.ai-landing--expressive .ai-landing__final-demo { color: var(--text-faint) !important; }
.ai-landing--expressive .ai-landing__mascot svg #eye-left-pupil,
.ai-landing--expressive .ai-landing__mascot svg #eye-right-pupil { transition: translate .4s var(--ease); }
.ai-landing--expressive[data-active-scenario="retention"] .ai-landing__playground .ai-landing__mascot { transform: rotate(4deg) translateY(-8px); }
.ai-landing--expressive[data-active-scenario="retention"] .ai-landing__stage-answer { transform: rotate(-3deg); }
.ai-landing--expressive[data-active-scenario="retention"] .ai-landing__mascot svg #eye-left-pupil,
.ai-landing--expressive[data-active-scenario="retention"] .ai-landing__mascot svg #eye-right-pupil { translate: -8px 0; }
.ai-landing--expressive[data-active-scenario="load"] .ai-landing__playground .ai-landing__mascot { transform: rotate(-2deg) translateY(5px); }
.ai-landing--expressive[data-active-scenario="load"] .ai-landing__stage-answer { transform: rotate(1deg); }
.ai-landing--expressive[data-active-scenario="load"] .ai-landing__mascot svg #eye-left-pupil,
.ai-landing--expressive[data-active-scenario="load"] .ai-landing__mascot svg #eye-right-pupil { translate: 6px 4px; }
.ai-landing--expressive.is-motion-paused .ai-landing__playground *,
.ai-landing--expressive.is-motion-paused .ai-landing__playground *::before { transition: none !important; animation: none !important; }
@media (max-width: 1100px) {
  .ai-landing__playground { grid-template-columns: 1fr 1.1fr 1fr; min-height: 390px; }
  .ai-landing__orbit-question { padding: 13px; gap: 8px; font-size: 12px !important; }
  .ai-landing__stage-answer { padding: 20px; }
  .ai-landing__playground .ai-landing__mascot { width: 390px; max-width: 130%; margin-inline: -15%; }
  .ai-landing__stage-metric { font-size: 46px; }
  .ai-landing__stage-answer h2 { font-size: 22px; }
}
@media (max-width: 860px) {
  .ai-landing__playground { grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 10px; }
  .ai-landing__orbit-questions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
  .ai-landing__stage-label { width: 100%; text-align: center; margin-bottom: 2px !important; }
  .ai-landing__orbit-question:nth-of-type(n) { transform: none; min-height: 48px; }
  .ai-landing__orbit-question > span:first-child { display: none; }
  .ai-landing__playground .ai-landing__mascot { width: 380px; max-width: 115%; margin: 0 -5%; }
  .ai-landing__stage-answer { margin: 15px 10px 30px 0; }
  .ai-landing__playground .ai-landing__motion { left: 23%; bottom: 15px; }
  .ai-landing__backtype { top: 150px; }
  .ai-landing__stage-bottom { margin-top: 15px; }
  .ai-landing__stage-bottom > div { max-width: 350px; }
  .ai-landing__ticker { gap: 18px; }
  .ai-landing__manifesto-bottom { grid-template-columns: 70px 1fr; gap: 24px; }
  .ai-landing__manifesto-bottom p:last-child { grid-column: 2; max-width: 520px; }
  .ai-landing--expressive .ai-landing__platform { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .ai-landing--expressive .ai-landing__nav { min-height: 68px; }
  .ai-landing__theatre { padding-top: 32px; }
  .ai-landing__opening h1 { font-size: clamp(43px, 11.4vw, 66px); }
  .ai-landing__opening > p:last-child { font-size: 14px; max-width: 350px; margin-inline: auto; }
  .ai-landing__opening > p:last-child br { display: none; }
  .ai-landing__opening .ai-landing__eyebrow { font-size: 10px; }
  .ai-landing__playground { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
  .ai-landing__orbit-questions { width: 100%; gap: 8px; }
  .ai-landing__stage-label { margin-bottom: 8px !important; }
  .ai-landing__orbit-question { font-size: 11px !important; min-height: 44px !important; padding: 10px 12px; gap: 8px; }
  .ai-landing__orbit-question > span:last-child { font-size: 14px; }
  .ai-landing__playground .ai-landing__mascot { max-width: 100%; width: 300px; margin: 8px auto -36px; }
  .ai-landing__stage-answer { width: calc(100% - 14px); margin: 0 7px 38px; padding: 20px; transform: rotate(2deg); }
  .ai-landing__stage-answer h2 { font-size: 26px; }
  .ai-landing__stage-metric { font-size: 46px; }
  .ai-landing__stage-answer > p:not(.ai-landing__stage-metric) { font-size: 14px; }
  .ai-landing__answer-head { font-size: 11px; }
  .ai-landing__stage-disclaimer { font-size: 11px; }
  .ai-landing__playground .ai-landing__motion { left: 50%; bottom: -3px; }
  .ai-landing__backtype { font-size: 96px; top: 195px; }
  .ai-landing__stage-bottom { flex-direction: column; text-align: center; gap: 18px; }
  .ai-landing__stage-bottom .btn { width: 100%; }
  .ai-landing__stage-bottom div > span { font-size: 12px; }
  .ai-landing__ticker { gap: 12px; padding: 18px 16px; font-size: 14px; }
  .ai-landing__ticker > span:last-of-type, .ai-landing__ticker > span:nth-last-of-type(2) { display: none; }
  .ai-landing__ticker > span[aria-hidden] { font-size: 20px; }
  .ai-landing--expressive .ai-landing__section { padding-block: 58px; }
  .ai-landing--expressive .ai-landing__section-head { margin-bottom: 28px; }
  .ai-landing__manifesto { padding-block: 50px; }
  .ai-landing__manifesto h2 { font-size: clamp(34px, 8.8vw, 50px); }
  .ai-landing__manifesto-bottom { grid-template-columns: 42px 1fr; gap: 18px; margin-top: 34px; }
  .ai-landing__manifesto-star { font-size: 80px; }
  .ai-landing__manifesto-bottom p:first-of-type { font-size: 21px; }
  .ai-landing__manifesto-bottom p:last-child { grid-column: 1 / -1; font-size: 14px; }
  .ai-landing--expressive .ai-landing__platform-intro { margin: 6px; padding: 28px; }
  .ai-landing--expressive .ai-landing__platform-steps h3 { font-size: 18px; }
  .ai-landing--expressive .ai-landing__final { padding-block: 60px; }
  .ai-landing--expressive .ai-landing__final h2 { font-size: clamp(36px, 10vw, 58px); }
}

/* Публичное превью Пульса: отдельная композиция, общая палитра и chrome сайта. */
.pulse-landing { --pulse-grid:color-mix(in srgb,var(--text) 7%,transparent); font-family:var(--font); color:var(--text); background:var(--bg-card); overflow:clip; }
.pulse-landing *, .pulse-landing *::before, .pulse-landing *::after { box-sizing:border-box; }
.pulse-landing h1,.pulse-landing h2,.pulse-landing h3,.pulse-landing p { margin:0; }
.pulse-landing h1,.pulse-landing h2 { font-weight:750; letter-spacing:-.065em; line-height:1.04; }
.pulse-landing h1 { font-size:clamp(42px,5.6vw,84px); }
.pulse-landing h2 { font-size:clamp(36px,4.5vw,66px); }
.pulse-landing h3 { font-size:22px; line-height:1.22; letter-spacing:-.035em; }
.pulse-landing p { font-size:16px; line-height:1.65; }
.pulse-landing em { font-style:normal; color:var(--accent); }
.pulse-landing button { font-family:inherit; cursor:pointer; }
.pulse-landing :is(a,button,summary):focus-visible { outline:3px solid var(--info); outline-offset:5px; }
.pulse-wrap { width:min(1240px,calc(100% - 80px)); margin-inline:auto; }
.pulse-eyebrow,.pulse-label { font-size:12px; font-weight:650; letter-spacing:.06em; }
.pulse-eyebrow { margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.pulse-dot { width:8px; height:8px; border-radius:var(--radius-xs); background:var(--accent); box-shadow:0 0 0 5px var(--accent-line); }
.pulse-hero { padding:64px 0 0; background:linear-gradient(180deg,var(--accent-soft),var(--bg-card)); }
.pulse-hero__heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.pulse-wordmark { width:250px; flex-shrink:0; font-size:88px; font-weight:800; letter-spacing:-.09em; color:var(--accent); transform:rotate(-8deg); line-height:1; }
.pulse-wordmark svg { width:100%; height:64px; overflow:visible; }
.pulse-wordmark path { stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:360; animation:pulse-trace 4s ease-in-out infinite; }
.pulse-hero__intro { display:flex; justify-content:space-between; gap:48px; align-items:center; padding-block:32px 48px; }
.pulse-hero__intro p { max-width:640px; color:var(--text-muted); font-size:18px; }
.pulse-actions { display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex-shrink:0; }
.pulse-landing .ds-btn { gap:20px; border-radius:var(--radius-sm); }
.pulse-text-link { color:inherit; font-size:14px; font-weight:650; text-underline-offset:5px; }
.pulse-play { border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:var(--shadow-lg); scroll-margin-top:100px; }
.pulse-play__top { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid var(--border); gap:16px; }
.pulse-motion { background:none; border:0; color:var(--text-muted); font-size:12px; padding:8px; }
.pulse-scenarios { display:flex; gap:8px; padding:24px 28px; flex-wrap:wrap; }
.pulse-scenarios button,.pulse-outcomes button { border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 16px; background:var(--bg-card); font-size:13px; font-weight:600; color:var(--text); }
.pulse-scenarios button[aria-pressed=true] { background:var(--text); border-color:var(--text); color:var(--bg-card); }
.pulse-machine { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:0 28px 24px; }
.pulse-flow { border-radius:var(--radius); background-image:radial-gradient(var(--pulse-grid) 1px,transparent 1px); background-size:16px 16px; padding:22px 44px; display:flex; flex-direction:column; justify-content:center; }
.pulse-node { padding:14px 18px; background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius-sm); position:relative; box-shadow:var(--shadow-sm); }
.pulse-node--message { border-color:var(--accent); }
.pulse-node--result { background:var(--accent-soft); border-color:var(--accent-line); }
.pulse-node__index { display:block; color:var(--text-muted); font-size:10px; margin-bottom:7px; font-weight:650; }
.pulse-node h3 { font-size:16px; letter-spacing:-.015em; }
.pulse-node p { font-size:12px; color:var(--text-muted); margin-top:4px; }
.pulse-connector { height:28px; width:2px; background:var(--accent-line); margin-inline:auto; position:relative; overflow:hidden; }
.pulse-connector span { position:absolute; top:-9px; height:9px; width:2px; background:var(--accent); animation:pulse-travel 2.5s linear infinite; }
.pulse-conversation { background:var(--text); color:var(--bg-card); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:22px; }
.pulse-conversation__header { display:flex; gap:12px; align-items:center; }
.pulse-avatar { background:var(--accent); width:40px; height:40px; border-radius:var(--radius); display:grid; place-items:center; font-weight:700; }
.pulse-conversation__header strong { font-size:14px; display:block; }
.pulse-conversation__header div span { display:block; color:var(--text-faint); font-size:11px; margin-top:4px; }
.pulse-chat-mark { margin-left:auto; font-size:24px; color:var(--accent); }
.pulse-bubble { padding:18px; background:color-mix(in srgb,var(--bg-card) 9%,transparent); border-radius:var(--radius); font-size:15px; line-height:1.65; min-height:144px; }
.pulse-reply { align-self:flex-end; background:var(--accent); border-radius:var(--radius); padding:14px 18px; font-size:13px; max-width:90%; }
.pulse-outcomes { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.pulse-outcomes>span { width:100%; font-size:11px; color:var(--text-faint); }
.pulse-outcomes button { background:transparent; color:var(--bg-card); border-color:var(--text-muted); padding:9px 12px; font-size:11px; }
.pulse-outcomes button[aria-pressed=true] { background:var(--bg-card); color:var(--text); border-color:var(--bg-card); }
.pulse-landing[data-outcome=stop] .pulse-node--result { background:var(--bg-app); border-color:var(--border-strong); }
.pulse-demo-note { color:var(--text-muted); font-size:11px!important; line-height:1.6!important; }
.pulse-play>.pulse-demo-note { padding:0 28px 22px; }
.pulse-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pulse-story { padding-block:120px; }
.pulse-story h2 span,.pulse-platform h2 span { color:var(--text-muted); }
.pulse-story__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; max-width:940px; margin-top:36px; }
.pulse-story__grid p { color:var(--text-muted); }
.pulse-capabilities { background:var(--bg-app); padding-block:90px; }
.pulse-section-top { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; }
.pulse-section-top>p { color:var(--text-muted); }
.pulse-feature-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap:16px; }
.pulse-feature { padding:32px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); }
.pulse-feature .pulse-label { color:var(--text-muted); }
.pulse-feature h3 { font-size:26px; margin-top:24px; }
.pulse-feature>p { font-size:14px; margin-top:24px; color:var(--text-muted); }
.pulse-feature--wide { background:var(--text); color:var(--bg-card); border-color:var(--text); }
.pulse-feature--wide .pulse-label,.pulse-feature--wide>p { color:var(--text-faint); }
.pulse-rule { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:24px; }
.pulse-rule span { border:1px solid var(--text-muted); border-radius:var(--radius-xs); padding:8px 12px; font-size:12px; }
.pulse-rule b { font-size:10px; color:var(--accent-line); margin-left:12px; }
.pulse-mini-flow { margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pulse-mini-flow span { min-width:0; width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-xs); padding:10px; text-align:center; font-size:12px; }
.pulse-mini-flow i { font-style:normal; color:var(--accent); font-size:13px; }
.pulse-task { display:flex; flex-direction:column; gap:16px; margin-top:30px; border-left:3px solid var(--accent); padding:14px; background:var(--accent-soft); border-radius:var(--radius-xs); }
.pulse-task span { font-size:11px; color:var(--text-muted); }
.pulse-task strong { font-size:15px; }
.pulse-respect { padding-block:110px; display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.pulse-respect__items article { display:flex; gap:24px; border-bottom:1px solid var(--border); padding:24px 0; }
.pulse-respect__items article:first-child { padding-top:0; }
.pulse-respect__items article>span { color:var(--accent); font-size:12px; }
.pulse-respect__items h3 { font-size:20px; }
.pulse-respect__items p { color:var(--text-muted); font-size:14px; margin-top:10px; }
.pulse-impact { background:var(--text); color:var(--bg-card); padding-block:90px; }
.pulse-impact__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.pulse-impact .pulse-eyebrow { color:var(--text-faint); }
.pulse-impact h2 { font-size:clamp(42px,5.5vw,80px); }
.pulse-impact__grid>div>p { margin-top:28px; color:var(--text-faint); max-width:420px; }
.pulse-experiment { border:1px solid var(--text-muted); padding:32px; border-radius:var(--radius); }
.pulse-experiment__row { display:flex; gap:18px; align-items:center; padding-block:28px; border-bottom:1px solid var(--text-muted); }
.pulse-experiment__symbol { color:var(--accent); font-size:30px; }
.pulse-experiment__row h3 { font-size:16px; letter-spacing:0; }
.pulse-experiment__row p { font-size:11px; color:var(--text-faint); margin-top:6px; }
.pulse-experiment__row>span:last-child { margin-left:auto; color:var(--text-faint); font-size:11px; }
.pulse-equation { margin-block:28px; font-size:16px; line-height:1.7; }
.pulse-equation>span { color:var(--text-faint); font-size:13px; }
.pulse-equation strong { display:block; margin-top:18px; color:var(--accent-line); font-size:21px; line-height:1.3; }
.pulse-experiment .pulse-demo-note { color:var(--text-faint); }
.pulse-platform { padding-block:110px; }
.pulse-platform__intro { max-width:720px; margin-top:28px!important; color:var(--text-muted); }
.pulse-platform__chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:16px; align-items:center; margin-block:44px 32px; }
.pulse-platform__chain article { padding:24px; border:1px solid var(--border-strong); border-radius:var(--radius); min-height:180px; }
.pulse-platform__chain article>span { color:var(--text-muted); font-size:11px; }
.pulse-platform__chain h3 { margin-top:22px; }
.pulse-platform__chain p { font-size:12px; margin-top:12px; }
.pulse-platform__chain>b { color:var(--accent); font-weight:400; }
.pulse-platform__chain .pulse-platform__active { background:var(--accent); border-color:var(--accent); color:var(--bg-card); transform:rotate(-3deg); }
.pulse-platform__active>span { color:var(--bg-card)!important; }
.pulse-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; padding-block:0 110px; }
.pulse-faq details { border-bottom:1px solid var(--border-strong); padding-block:22px; }
.pulse-faq details:first-child { padding-top:0; }
.pulse-faq summary { cursor:pointer; font-size:17px; font-weight:600; line-height:1.5; }
.pulse-faq details p { font-size:14px; color:var(--text-muted); margin-top:16px; }
.pulse-faq a { color:var(--accent); }
.pulse-contact { background:var(--accent-soft); padding-block:80px; scroll-margin-top:80px; }
.pulse-contact h2 { font-size:clamp(46px,7vw,98px); }
.pulse-contact__bottom { display:flex; justify-content:space-between; align-items:center; gap:56px; margin-top:36px; }
.pulse-contact__bottom p { color:var(--text-muted); max-width:560px; }
.pulse-contact__hint { font-size:11px; color:var(--text-muted); }
.pulse-paused * { animation-play-state:paused!important; }
@keyframes pulse-trace { 0%,15% { stroke-dashoffset:360; } 70%,100% { stroke-dashoffset:0; } }
@keyframes pulse-travel { to { transform:translateY(40px); } }
@media (prefers-reduced-motion:reduce) { .pulse-landing * { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }
@media (max-width:1100px) {
 .pulse-wordmark { width:180px; font-size:65px; }
 .pulse-hero__intro { gap:24px; } .pulse-hero__intro p { font-size:16px; }
 .pulse-feature { padding:24px; } .pulse-flow { padding:20px; }
 .pulse-impact__grid { gap:40px; } .pulse-platform__chain { gap:8px; } .pulse-platform__chain article { padding:18px; }
}
@media (max-width:800px) {
 .pulse-wrap { width:calc(100% - 40px); } .pulse-hero { padding-top:40px; }
 .pulse-hero__heading { align-items:flex-start; } .pulse-wordmark { width:110px; font-size:40px; margin-top:16px; }
 .pulse-wordmark svg { height:30px; }
 .pulse-hero__intro,.pulse-section-top,.pulse-contact__bottom { align-items:flex-start; flex-direction:column; gap:24px; }
 .pulse-machine,.pulse-respect,.pulse-impact__grid,.pulse-faq { grid-template-columns:1fr; gap:36px; }
 .pulse-machine { gap:16px; padding:0 16px 16px; } .pulse-flow { padding:20px; }
 .pulse-play__top { padding:14px 16px; } .pulse-play__top .pulse-label { font-size:10px; max-width:180px; }
 .pulse-motion { font-size:10px; } .pulse-scenarios { padding:16px; gap:6px; }
 .pulse-scenarios button { font-size:11px; padding:10px; } .pulse-play>.pulse-demo-note { padding:0 16px 16px; }
 .pulse-feature-grid { grid-template-columns:minmax(0,1fr); } .pulse-feature { padding:28px; }
 .pulse-feature h3 br { display:none; } .pulse-rule { flex-direction:row; flex-wrap:wrap; align-items:center; }
 .pulse-rule b { margin:0; } .pulse-mini-flow { flex-direction:row; } .pulse-mini-flow i { transform:rotate(-90deg); }
 .pulse-story,.pulse-respect,.pulse-platform { padding-block:70px; } .pulse-capabilities,.pulse-impact { padding-block:64px; }
 .pulse-story__grid { gap:24px; } .pulse-faq { padding-bottom:70px; }
 .pulse-platform__chain { grid-template-columns:1fr auto 1fr; gap:16px; }
 .pulse-platform__chain>b:nth-of-type(2) { display:none; }
 .pulse-platform__chain article { min-height:170px; }
 .pulse-contact { padding-block:60px; }
}
@media (max-width:480px) {
 .pulse-hero__heading { position:relative; } .pulse-wordmark { display:none; }
 .pulse-landing h1 { font-size:43px; } .pulse-landing h2 { font-size:38px; }
 .pulse-story__grid { grid-template-columns:1fr; } .pulse-conversation { padding:20px; }
 .pulse-bubble { min-height:170px; font-size:14px; } .pulse-experiment { padding:22px; }
 .pulse-experiment__row { gap:12px; } .pulse-experiment__row h3 { font-size:14px; }
 .pulse-contact h2 { font-size:51px; } .pulse-landing .ds-btn { white-space:normal; height:auto; min-height:48px; text-align:center; }
}

/* Маскот Пульса связывает аудиторию, сообщение и работу команды. */
.pulse-mascot-scene { position:relative; flex:0 0 310px; height:280px; isolation:isolate; }
.pulse-mascot { position:absolute; inset:-30px -15px 0; transition:transform .45s var(--ease); }
.pulse-mascot img { width:100%; height:100%; object-fit:contain; animation:pulse-mascot-float 5s ease-in-out infinite; }
.pulse-mascot-scene::before { content:""; position:absolute; inset:60px 28px 36px; border:1px dashed var(--accent-line); border-radius:var(--radius-lg); transform:rotate(-12deg); z-index:-1; }
.pulse-mascot-chip { position:absolute; z-index:1; background:var(--bg-card); color:var(--text); border:1px solid var(--accent-line); box-shadow:var(--shadow-sm); border-radius:var(--radius-sm); font-size:11px; font-weight:600; padding:9px 12px; }
.pulse-mascot-chip--audience { left:-12px; top:125px; transform:rotate(-9deg); }
.pulse-mascot-chip--message { right:-12px; top:90px; transform:rotate(8deg); }
.pulse-mascot-chip--task { right:0; bottom:37px; transform:rotate(-5deg); }
.pulse-mascot-caption { position:absolute; bottom:-8px; left:0; width:100%; text-align:center; font-size:12px!important; font-weight:650; color:var(--accent); }
.pulse-landing[data-outcome=silent] .pulse-mascot { transform:rotate(-8deg) translateY(6px); }
.pulse-landing[data-outcome=stop] .pulse-mascot { transform:rotate(7deg) translateX(-5px); }
.pulse-landing[data-scenario=birthday][data-outcome=reply] .pulse-mascot { transform:rotate(-5deg) translateY(-10px); }
.pulse-paused .pulse-mascot { transition:none; }
@keyframes pulse-mascot-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-9px) rotate(2deg); } }
@media(max-width:1100px) { .pulse-mascot-scene { flex-basis:240px; height:240px; } .pulse-mascot-chip--audience { left:-6px; } .pulse-mascot-chip--message { right:-6px; } }
@media(max-width:800px) { .pulse-hero__heading { flex-direction:column; gap:20px; } .pulse-mascot-scene { flex-basis:auto; width:280px; height:240px; align-self:center; } .pulse-mascot { inset:-35px -15px 0; } .pulse-hero__intro { padding-top:32px; } }

/* Пульс: масштабная сцена с персонажем и визуальным прохождением сценария. */
.pulse-stage { position:relative; isolation:isolate; overflow:hidden; background:var(--text); color:var(--bg-card); min-height:830px; }
.pulse-stage__backword { position:absolute; z-index:-1; bottom:-.2em; left:-.025em; font-size:clamp(200px,29vw,470px); line-height:1; font-weight:800; letter-spacing:-.09em; color:color-mix(in srgb,var(--accent) 20%,transparent); pointer-events:none; }
.pulse-stage__grid { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 75% 35%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 52%),linear-gradient(90deg,var(--pulse-grid) 1px,transparent 1px); background-size:auto,80px 80px; }
.pulse-stage__wires { position:absolute; inset:0; width:100%; height:100%; z-index:-1; stroke:var(--accent); stroke-width:1; opacity:.25; }
.pulse-stage__content { position:relative; padding-top:72px; }
.pulse-stage__copy { position:relative; z-index:3; width:57%; pointer-events:none; }
.pulse-stage__copy a { pointer-events:auto; }
.pulse-stage .pulse-eyebrow { font-size:11px; color:var(--text-faint); margin-bottom:42px; }
.pulse-stage h1 { font-size:clamp(68px,7.9vw,116px); line-height:.98; letter-spacing:-.075em; }
.pulse-stage h1 em { color:var(--accent); }
.pulse-stage__copy>p { max-width:440px; font-size:17px; color:var(--text-faint); margin-top:30px; }
.pulse-stage .pulse-actions { margin-top:32px; }
.pulse-stage__note { color:var(--text-faint); font-size:11px; }
.pulse-stage__actor { position:absolute; right:-30px; top:4px; width:760px; height:720px; }
.pulse-stage__actor .pulse-mascot { inset:-10px -10px 0; filter:drop-shadow(0 35px 35px color-mix(in srgb,var(--text) 70%,transparent)); }
.pulse-stage__actor .pulse-mascot img { animation:pulse-mascot-float 6s ease-in-out infinite; }
.pulse-signal { position:absolute; z-index:2; padding:17px 20px; background:color-mix(in srgb,var(--text) 88%,transparent); border:1px solid color-mix(in srgb,var(--accent) 55%,var(--text)); border-radius:var(--radius); box-shadow:var(--shadow-lg); backdrop-filter:blur(16px); transition:background .4s,border-color .4s,transform .4s; }
.pulse-signal>span { color:var(--accent-line); font-size:10px; letter-spacing:.06em; }
.pulse-signal strong { display:block; font-size:17px; margin-block:8px; letter-spacing:-.025em; }
.pulse-signal small { font-size:11px; color:var(--text-faint); }
.pulse-signal--one { top:155px; right:4px; transform:rotate(7deg); }
.pulse-signal--two { top:430px; left:135px; transform:rotate(-7deg); }
.pulse-signal--three { top:535px; right:0; transform:rotate(5deg); }
.pulse-stage__actor .pulse-mascot-caption { bottom:20px; color:var(--accent-line); }
.pulse-stage__bottom { position:relative; z-index:4; display:flex; align-items:center; gap:24px; margin-top:115px; padding-bottom:45px; }
.pulse-launch { border:1px solid var(--accent); border-radius:var(--radius-sm); padding:16px 20px; background:var(--accent); color:var(--bg-card); font-size:14px; font-weight:650; }
.pulse-launch span { margin-right:15px; font-size:24px; }
.pulse-stage__bottom p { font-size:12px; color:var(--text-faint); }
.pulse-stage__bottom p span { font-size:10px; color:var(--text-light); }
.pulse-stage__bottom>a { margin-left:auto; }
.pulse-energized .pulse-stage__wires { opacity:.8; stroke-width:2; stroke-dasharray:18 45; animation:pulse-network 2s linear 3; }
.pulse-energized .pulse-signal--one { animation:pulse-signal-light 3s ease both; }
.pulse-energized .pulse-signal--two { animation:pulse-signal-light 3s .7s ease both; }
.pulse-energized .pulse-signal--three { animation:pulse-signal-light 3s 1.4s ease both; }
.pulse-demo-heading { margin-bottom:40px!important; }
.pulse-hero { padding-block:72px 20px; }
.pulse-story { padding-block:110px; }
@keyframes pulse-network { to { stroke-dashoffset:-126; } }
@keyframes pulse-signal-light { 25%,70% { background:var(--accent); border-color:var(--accent-line); transform:rotate(0) scale(1.06); } }
@media(min-width:1550px) { .pulse-stage__actor { right:-30px; } }
@media(max-width:1100px) { .pulse-stage { min-height:780px; } .pulse-stage__actor { width:620px; height:650px; right:-110px; top:55px; } .pulse-stage__copy { width:59%; } .pulse-stage__copy>p { max-width:340px; } .pulse-signal--one { right:50px; top:120px; } .pulse-signal--two { left:130px; top:395px; } .pulse-signal--three { right:75px; top:505px; } .pulse-signal strong { font-size:14px; } .pulse-stage__bottom { margin-top:145px; } }
@media(max-width:800px) { .pulse-stage { min-height:0; } .pulse-stage__content { padding-top:44px; } .pulse-stage__copy { width:100%; } .pulse-stage h1 { font-size:clamp(62px,11vw,88px); max-width:600px; } .pulse-stage .pulse-eyebrow { margin-bottom:28px; } .pulse-stage__copy>p { max-width:500px; } .pulse-stage__actor { position:relative; width:calc(100% + 60px); height:550px; top:auto; right:auto; margin:-5px -30px 0; } .pulse-stage__actor .pulse-mascot { inset:-15px 0; } .pulse-signal--one { top:100px; right:10px; } .pulse-signal--two { top:330px; left:10px; } .pulse-signal--three { top:420px; right:15px; } .pulse-stage__actor .pulse-mascot-caption { bottom:-5px; } .pulse-stage__bottom { flex-wrap:wrap; margin-top:32px; gap:18px; } .pulse-stage__bottom>a { margin-left:0; } .pulse-stage__backword { font-size:37vw; bottom:170px; } }
@media(max-width:480px) { .pulse-stage h1 { font-size:64px; } .pulse-stage__actor { height:440px; } .pulse-stage__actor .pulse-mascot { inset:-10px -30px; } .pulse-signal { padding:11px 13px; } .pulse-signal strong { font-size:13px; } .pulse-signal small { font-size:9px; } .pulse-signal--one { top:65px; right:18px; } .pulse-signal--two { top:260px; left:16px; } .pulse-signal--three { top:350px; right:20px; } .pulse-stage__bottom p { font-size:11px; } }

.pulse-stage .pulse-motion { color:var(--text-faint); }

/* Сцена в потоке: её высота определяется обеими колонками, без отрицательных выносов. */
.pulse-stage { min-height:0; }
.pulse-stage__content { width:min(1600px,calc(100% - 96px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:24px 40px; align-items:center; padding-block:56px 40px; }
.pulse-stage__copy { width:auto; min-width:0; pointer-events:auto; }
.pulse-stage h1 { font-size:clamp(64px,6.4vw,112px); }
.pulse-stage__actor { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:1; margin:0; min-width:0; }
.pulse-stage__actor .pulse-mascot { inset:2% 0 7%; }
.pulse-stage__actor .pulse-mascot-caption { bottom:0; }
.pulse-signal { max-width:47%; }
.pulse-signal--one { top:13%; right:0; }
.pulse-signal--two { top:58%; left:0; }
.pulse-signal--three { top:75%; right:0; }
.pulse-stage__bottom { grid-column:1 / -1; margin-top:12px; padding:24px 0 0; border-top:1px solid color-mix(in srgb,var(--bg-card) 12%,transparent); flex-wrap:wrap; }
.pulse-stage__bottom .pulse-launch { flex-shrink:0; }
.pulse-stage__backword { left:50%; transform:translateX(-50%); bottom:-.12em; font-size:clamp(200px,28vw,470px); white-space:nowrap; }
.pulse-stage__wires { opacity:.13; }
.pulse-energized .pulse-stage__wires { opacity:.35; }
@media (min-width:1600px) { .pulse-stage__content { padding-top:64px; } .pulse-stage__copy>p { max-width:510px; font-size:19px; } }
@media (max-width:1100px) { .pulse-stage__content { width:calc(100% - 64px); gap:28px; } .pulse-stage h1 { font-size:clamp(54px,6.5vw,76px); } .pulse-stage .pulse-eyebrow { margin-bottom:26px; } .pulse-stage__copy>p { font-size:15px; } .pulse-signal { padding:12px; } .pulse-signal strong { font-size:13px; } .pulse-signal small { font-size:10px; } .pulse-stage__bottom>a { margin-left:0; } }
@media (max-width:800px) { .pulse-stage__content { width:calc(100% - 40px); grid-template-columns:minmax(0,1fr); padding-top:40px; gap:30px; } .pulse-stage__copy { width:100%; } .pulse-stage h1 { font-size:clamp(58px,11vw,88px); } .pulse-stage__actor { width:min(100%,600px); height:auto; margin-inline:auto; aspect-ratio:1; } .pulse-stage__bottom { margin-top:0; } .pulse-stage__actor .pulse-mascot { inset:0 0 6%; } }
@media (max-width:480px) { .pulse-stage__content { gap:24px; } .pulse-stage h1 { font-size:clamp(48px,15vw,64px); } .pulse-stage__actor { aspect-ratio:.88; } .pulse-stage__actor .pulse-mascot { inset:0 -2% 8%; } .pulse-signal { max-width:52%; padding:10px; } .pulse-signal strong { font-size:11px; } .pulse-signal small { font-size:9px; } .pulse-signal>span { font-size:9px; } .pulse-signal--one { top:10%; right:0; } .pulse-signal--two { top:54%; left:0; } .pulse-signal--three { top:75%; right:0; } }

@media (min-width:921px) and (max-width:1200px) { .pulse-preview-body .nav__links,.pulse-preview-body .nav__cta { display:none; } .pulse-preview-body .nav__burger { display:flex; } }

/* Заголовок нового позиционирования помещается целиком в колонку. */
.pulse-stage h1 { font-size:clamp(40px,5vw,84px); letter-spacing:-.065em; }
@media(max-width:800px) { .pulse-stage h1 { font-size:clamp(36px,8.8vw,66px); } }


/* Connection and onboarding: scoped components from the UI kit. */
:is(.onboarding-page,.connection-result-page) { background:var(--bg-app); color:var(--text); font-family:var(--font); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; font-feature-settings:'cv11' 1,'ss01' 1; }
:is(.onboarding-page,.connection-result-page) *, .connect-page--yclients * { box-sizing:border-box; }
.onboarding-page .onboarding-wizard, .connection-result-page .connection-card { width:100%; max-width:600px; padding:32px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:none; }
.onboarding-brand,.connection-result-page .connection-brand { display:block; margin:0 0 24px; text-align:center; color:var(--accent); font:700 24px var(--font); }
.onboarding-page .onboarding-step-title { color:var(--text); font:600 22px var(--font); margin-bottom:8px; }
.onboarding-page .onboarding-step-desc { color:var(--text-muted); line-height:1.55; }
.onboarding-page .onboarding-progress__step { flex:1; border-radius:var(--radius-xs); background:var(--border); }
.onboarding-page .onboarding-progress__step--active { background:var(--accent); }
.onboarding-page .onboarding-progress__step--done { background:var(--success); }
.onboarding-page .onboarding-connect__icon { color:var(--accent); }
.onboarding-page .onboarding-icon--success { color:var(--success); }
.onboarding-page .onboarding-business-card.is-selected { border-color:var(--accent); box-shadow:var(--focus-ring-accent); }
.onboarding-page .field { display:block; width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font:400 14px var(--font); }
.onboarding-page .field:focus { outline:2px solid var(--accent); outline-offset:2px; }
.onboarding-page input[type=checkbox], .onboarding-page input[type=radio] { accent-color:var(--accent); }
.onboarding-page .onboarding-business-card input[type=radio] { display:inline-block !important; }
.onboarding-page .progress { display:block; appearance:none; width:100%; height:8px; margin-bottom:24px; border:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--border); }
.onboarding-page .progress::-webkit-progress-bar { background:var(--border); }
.onboarding-page .progress::-webkit-progress-value { background:var(--accent); transition:width .5s; }
.onboarding-page .progress::-moz-progress-bar { background:var(--accent); }
.onboarding-page .onboarding-module { border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--bg-card); gap:16px; }
.onboarding-page .onboarding-module--selected { border-color:var(--accent); background:var(--accent-soft); }
.onboarding-page .onboarding-module--base { border-color:var(--border); background:var(--hover); }
.onboarding-page .onboarding-module__name,.onboarding-page .onboarding-module__price { color:var(--text); }
.onboarding-page .onboarding-module__desc { color:var(--text-muted); }
.onboarding-page .onboarding-module__badge { border-radius:var(--radius-xs); }
.onboarding-page .onboarding-module__badge--included,.onboarding-page .onboarding-module__badge--trial { background:var(--success-soft); color:var(--success); }
.onboarding-page .onboarding-total { background:var(--hover); border-radius:var(--radius); color:var(--text-muted); }
.onboarding-page .onboarding-total strong { color:var(--text); }
.onboarding-page .tbl { border-collapse:collapse; }
.onboarding-page .tbl th,.onboarding-page .tbl td { padding:10px 8px; border-bottom:1px solid var(--border); }
.onboarding-page .tbl th { color:var(--text-muted); font-weight:600; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:10px 16px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:600 14px var(--font); text-transform:none; letter-spacing:normal; text-decoration:none; cursor:pointer; box-shadow:none; transition:background .15s; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn--primary { background:var(--accent); border-color:var(--accent); color:var(--bg-card); }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn--primary:hover { background:var(--accent-hover); transform:none; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn--secondary { background:var(--bg-card); color:var(--text); }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .btn:disabled { opacity:.5; cursor:not-allowed; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .page-state { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; display:grid; place-items:center; text-align:center; }
:is(.connection-result-page,.connect-page--yclients) .page-state { border:0; padding:0; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .page-state__art { width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:var(--radius-lg); background:var(--success-soft); color:var(--success); font-size:32px; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .page-state__title { font:600 22px var(--font); color:var(--text); margin:0 0 8px; }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .page-state__desc { font:400 14px/1.55 var(--font); color:var(--text-muted); margin:0 0 24px; }
.connection-result-page .connection-actions { display:grid; gap:12px; width:100%; }
.connection-result-page .connection-branches { display:grid; gap:8px; margin:20px 0; text-align:left; width:100%; }
.connection-result-page .connection-branch { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.connection-result-page .connection-branch__name { font:600 14px var(--font); overflow-wrap:anywhere; }
.connection-result-page .connection-branch__meta { font:400 12px var(--font); color:var(--text-muted); margin-top:4px; }
:is(.onboarding-page,.connection-result-page) .badge { font:500 12px var(--font); padding:4px 8px; border-radius:var(--radius-xs); text-transform:none; letter-spacing:normal; background:var(--hover); color:var(--text-muted); white-space:nowrap; }
:is(.onboarding-page,.connection-result-page) .badge--success { background:var(--success-soft); color:var(--success); }
:is(.onboarding-page,.connection-result-page) .badge--warning { background:var(--warning-soft); color:var(--warning); }
:is(.onboarding-page,.connection-result-page) .badge--danger { background:var(--danger-soft); color:var(--danger); }
:is(.onboarding-page,.connection-result-page) .badge--info { background:var(--info-soft); color:var(--info); }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .callout { padding:12px 16px; border:1px solid var(--info-line); border-radius:var(--radius-sm); background:var(--info-soft); color:var(--info); margin-bottom:16px; font:400 14px/1.5 var(--font); }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .callout--danger { background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }
:is(.onboarding-page,.connection-result-page,.connect-page--yclients) .callout--success { background:var(--success-soft); color:var(--success); border-color:var(--success-line); }
@media(max-width:600px) { .onboarding-page .onboarding-wizard,.connection-result-page .connection-card { padding:24px 16px; } .onboarding-page .onboarding-module { align-items:flex-start; flex-direction:column; } .onboarding-page .onboarding-stats { flex-wrap:wrap; } }

.onboarding-page .onboarding-label-spaced{font-weight:600;margin-bottom:8px;margin-top:16px;}
.onboarding-page .onboarding-submit-spaced{margin-top:24px;}
.onboarding-page .onboarding-label-section{font-weight:600;margin-bottom:8px;margin-top:20px;}
.onboarding-page .onboarding-business-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.onboarding-page .onboarding-business-card{cursor:pointer;text-align:center;padding:16px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-card);}
.onboarding-page .onboarding-hidden{display:none !important;}
.onboarding-page .onboarding-card-title{font-size:14px;}
.onboarding-page .onboarding-label{font-weight:600;margin-bottom:8px;}
.onboarding-page .onboarding-group{margin-bottom:20px;}
.onboarding-page .onboarding-radio{display:block;padding:6px 0;cursor:pointer;}
.onboarding-page .onboarding-group-last{margin-bottom:24px;}
.onboarding-page .onboarding-skip{font-size:12px;color:var(--text-light);background:transparent;border:1px solid var(--border-strong);}
.onboarding-page .onboarding-sync{width:100%;max-width:420px;margin:24px auto;}
.onboarding-page .onboarding-entities{display:flex;flex-direction:column;gap:12px;}
.onboarding-page .onboarding-entity{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--hover);border-radius:8px;}
.onboarding-page .onboarding-entity-label{font-weight:500;font-size:14px;}
.onboarding-page .onboarding-message{text-align:center;font-size:13px;color:var(--text-muted);margin-top:16px;}
.onboarding-page .onboarding-skip-hidden{display:none !important;}
.onboarding-page .onboarding-table-wrap{max-width:600px;margin:20px auto;overflow-x:auto;}
.onboarding-page .onboarding-table{width:100%;font-size:13px;}
.onboarding-page .onboarding-text-left{text-align:left;}
.onboarding-page .onboarding-type-column{text-align:center;width:130px;}
.onboarding-page .onboarding-period-column{text-align:center;width:100px;}
.onboarding-page .onboarding-text-center{text-align:center;}
.onboarding-page .onboarding-service-type{font-size:12px;padding:4px 8px;width:auto;}
.onboarding-page .onboarding-service-period{font-size:12px;padding:4px 8px;width:80px;text-align:center;}
.onboarding-page .onboarding-empty{text-align:center;padding:24px 0;color:var(--text-muted);font-size:14px;}
.onboarding-page .onboarding-payment-note{text-align:center;font-size:13px;color:var(--text-muted);margin-top:8px}
.onboarding-page .onboarding-stats{display:flex;gap:16px;justify-content:center;margin:20px 0;}
.onboarding-page .onboarding-stat-value{font-size:24px;font-weight:700;color:var(--accent);}
.onboarding-page .onboarding-stat-label{font-size:12px;color:var(--text-muted);}

/* Existing YCLIENTS form and salon selector migrated into the design system. */
/* ============================================================================
   Salistica — дизайн формы авторизации YClients (Шаг 1).
   Накладывается ПОВЕРХ core.css, всё скоупится под .connect-page--yclients,
   новые компоненты — с префиксом .yca-, чтобы не конфликтовать с core.css и
   не затрагивать шаги «Выбор салонов»/«Успех». Никаких inline-стилей в разметке.
   Токены — значения дизайн-системы, заданы на уровне страницы.
   ============================================================================ */
.connect-page--yclients {

  /* перекрываем золотой градиент core.css на чистый светлый фон с лёгким washem */
  background:
    radial-gradient(620px 420px at 50% -8%, rgba(234, 88, 12, .07), transparent 70%),
    radial-gradient(520px 360px at 50% 108%, rgba(15, 23, 42, .04), transparent 70%),
    var(--bg-app);
  font-family: var(--font);
  color: var(--text);
}

/* ── Карточка ─────────────────────────────────────────────────────────────── */
.connect-page--yclients .connect-card {
  max-width: 436px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 34px 28px;
}

/* ── Бренд ────────────────────────────────────────────────────────────────── */
.connect-page--yclients .yca-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
}
.connect-page--yclients .yca-brand__mark {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg-card);
  display: grid;
  place-items: center;
  font: 700 21px var(--font);
  letter-spacing: -.02em;
  box-shadow: 0 6px 16px rgba(234, 88, 12, .28);
}
.connect-page--yclients .yca-brand__name {
  font: 700 21px var(--font);
  letter-spacing: -.02em;
  color: var(--text);
}

/* ── Заголовок шага ───────────────────────────────────────────────────────── */
.connect-page--yclients .yca-head { margin-bottom: 20px; }
.connect-page--yclients .yca-title {
  margin: 0 0 6px;
  font: 600 19px var(--font);
  letter-spacing: -.01em;
  color: var(--text);
}
.connect-page--yclients .yca-desc {
  margin: 0;
  font: 500 13px var(--font);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Плашка «Рекомендуем» ─────────────────────────────────────────────────── */
.connect-page--yclients .yca-reco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 11px var(--font);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.connect-page--yclients .yca-reco svg { flex: 0 0 auto; }

/* ── Форма ────────────────────────────────────────────────────────────────── */
.connect-page--yclients .yca-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-page--yclients .yca-group { display: block; }
.connect-page--yclients .yca-label {
  display: block;
  font: 600 11px var(--font);
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
}
.connect-page--yclients .yca-label--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.connect-page--yclients .yca-field-wrap { position: relative; }
.connect-page--yclients .yca-field {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font: 500 14px var(--font);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.connect-page--yclients .yca-field::placeholder { color: var(--text-light); }
.connect-page--yclients .yca-field:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .14);
}
.connect-page--yclients .yca-field--toggle { padding-right: 46px; }

/* ── Глаз показать/скрыть пароль ──────────────────────────────────────────── */
.connect-page--yclients .yca-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  color: var(--text-light);
  cursor: pointer;
}
.connect-page--yclients .yca-eye:hover { background: var(--hover); color: var(--text-muted); }
.connect-page--yclients .is-hidden { display: none; }

/* ── Кнопки ───────────────────────────────────────────────────────────────── */
.connect-page--yclients .yca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font: 600 14px var(--font);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.connect-page--yclients .yca-btn:hover { background: var(--hover); border-color: var(--text-faint); }
.connect-page--yclients .yca-btn:disabled { opacity: .6; cursor: not-allowed; }
.connect-page--yclients .yca-btn--primary {
  background: var(--accent);
  color: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(234, 88, 12, .22);
}
.connect-page--yclients .yca-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.connect-page--yclients .yca-btn svg { flex: 0 0 auto; }
/* спиннер из core.css золотой — на оранжевой кнопке делаем белым */
.connect-page--yclients .yca-btn--primary .connect-spinner {
  border-color: rgba(255, 255, 255, .5);
  border-top-color: var(--bg-card);
}

/* ── Разделитель «или» ────────────────────────────────────────────────────── */
.connect-page--yclients .yca-hr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-light);
}
.connect-page--yclients .yca-hr::before,
.connect-page--yclients .yca-hr::after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1 1 auto;
}
.connect-page--yclients .yca-hr span { font: 500 12px var(--font); }

/* ── Альтернативный способ (YClients OAuth) ───────────────────────────────── */
.connect-page--yclients .yca-alt__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--font);
  color: var(--text);
  margin-bottom: 5px;
}
.connect-page--yclients .yca-alt__desc {
  font: 400 12.5px var(--font);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 13px;
}
.connect-page--yclients .yca-ycmark {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  background: var(--info-soft);
  color: var(--info);
  display: grid;
  place-items: center;
  font: 700 10px var(--font);
  flex: 0 0 auto;
}

/* ── Ссылка «назад» ───────────────────────────────────────────────────────── */
.connect-page--yclients .yca-back {
  margin-top: 18px;
  text-align: center;
}
.connect-page--yclients .yca-back a {
  font: 500 13px var(--font);
  color: var(--text-muted);
  text-decoration: none;
}
.connect-page--yclients .yca-back a:hover { color: var(--text); text-decoration: underline; }

/* ── Состояние загрузки (вариант с готовым user_token) ────────────────────── */
.connect-page--yclients .yca-loading {
  text-align: center;
  padding: 24px 0;
}
.connect-page--yclients .yca-spinner-lg {
  width: 32px;
  height: 32px;
  display: inline-block;
}

/* ── Утилита скрытия (JS подменяет style.display при показе/фильтре) ───────── */
.connect-page--yclients .yca-hidden { display: none; }

/* ============================================================================
   ШАГ 2 — выбор салонов
   ============================================================================ */
.connect-page--yclients .yca-pick__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.connect-page--yclients .yca-count { font: 500 12.5px var(--font); color: var(--text-muted); }
.connect-page--yclients .yca-count b { color: var(--text); font-weight: 600; font-feature-settings: 'tnum' 1; }
.connect-page--yclients .yca-btn--sm { width: auto; height: 32px; padding: 0 12px; font-size: 12.5px; box-shadow: none; }

/* поиск */
.connect-page--yclients .yca-search { position: relative; margin-bottom: 14px; }
.connect-page--yclients .yca-search__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
  display: grid;
}
.connect-page--yclients .yca-search__input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font: 500 14px var(--font);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.connect-page--yclients .yca-search__input::placeholder { color: var(--text-light); }
.connect-page--yclients .yca-search__input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .14);
}

/* список салонов */
.connect-page--yclients .yca-salons {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.connect-page--yclients .yca-salon {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.connect-page--yclients .yca-salon:hover { border-color: var(--text-faint); background: var(--hover); }
.connect-page--yclients .yca-salon.is-checked {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.connect-page--yclients .yca-salon input { position: absolute; opacity: 0; width: 0; height: 0; }
.connect-page--yclients .yca-checkbox {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  flex: 0 0 auto;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: var(--bg-card);
  background: var(--bg-card);
  transition: background .12s, border-color .12s;
}
.connect-page--yclients .yca-salon.is-checked .yca-checkbox { background: var(--accent); border-color: var(--accent); }
.connect-page--yclients .yca-checkbox svg { opacity: 0; transition: opacity .12s; }
.connect-page--yclients .yca-salon.is-checked .yca-checkbox svg { opacity: 1; }
.connect-page--yclients .yca-salon--connected { opacity: .6; cursor: default; }
.connect-page--yclients .yca-salon--connected:hover { border-color: var(--border); background: var(--bg-card); }

.connect-page--yclients .yca-salon__body { min-width: 0; flex: 1 1 auto; }
.connect-page--yclients .yca-salon__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.connect-page--yclients .yca-salon__name { font: 600 14px var(--font); letter-spacing: -.005em; line-height: 1.35; color: var(--text); }
.connect-page--yclients .yca-salon__meta { margin-top: 3px; font: 500 12px var(--font); color: var(--text-light); font-feature-settings: 'tnum' 1; }
.connect-page--yclients .yca-badge-conn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  background: var(--success-soft);
  color: var(--success);
  font: 600 11px var(--font);
  white-space: nowrap;
}
.connect-page--yclients .yca-badge-conn__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* салон подключён, но YCLIENTS отозвал доступ — выбирается для переподключения */
.connect-page--yclients .yca-badge-conn--warning { background: var(--warning-soft); color: var(--warning); }

/* пусто (нет результатов поиска) */
.connect-page--yclients .yca-empty { text-align: center; padding: 30px 16px; }
.connect-page--yclients .yca-empty__t { font: 600 14px var(--font); margin: 0 0 4px; color: var(--text); }
.connect-page--yclients .yca-empty__d { font: 400 12.5px var(--font); color: var(--text-muted); margin: 0; }

/* футер шага 2 */
.connect-page--yclients .yca-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.connect-page--yclients .yca-foot .yca-btn--primary { height: 48px; font-size: 14.5px; }
.connect-page--yclients .yca-foot .yca-btn--primary:disabled {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--text-light);
  box-shadow: none;
  cursor: not-allowed;
}
.connect-page--yclients .yca-backbtn {
  align-self: center;
  border: 0;
  background: 0;
  font: 600 13px var(--font);
  color: var(--text-muted);
  padding: 4px 8px;
  cursor: pointer;
}
.connect-page--yclients .yca-backbtn:hover { color: var(--text); }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .connect-page--yclients .connect-card {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 28px 20px;
  }
  .connect-page--yclients .yca-field { height: 48px; }
  .connect-page--yclients .yca-btn { height: 48px; }
}

.connect-page--yclients .yca-hidden { display:none !important; }
.connect-page--yclients { background:var(--bg-app); }
.connect-page--yclients .yca-brand__mark { box-shadow:none; }
.connect-page--yclients .connect-card { box-shadow:none; }
.connection-result-page .btn { margin-top:12px; }
.connection-spinner { width:32px; height:32px; border:3px solid var(--info-line); border-top-color:var(--info); border-radius:50%; animation:dsync-spin .8s linear infinite; margin:0 auto 16px; }

.onboarding-page .onboarding-wizard.page-state { display:block; }
.onboarding-page #syncSkipForm { margin-top:16px; }
.connection-result-page .page-state > form { width:100%; }

.onboarding-page .page-state > form { width:100%; }

.onboarding-page .onboarding-progress { width:100%; min-width:0; }
.onboarding-page .onboarding-progress__step { width:auto; min-width:0; }

/* Admin partner statistics: UI kit components inside the existing admin shell. */
.expert-admin { color:var(--text); font-family:var(--font); min-width:0; }
.expert-admin .kpi-grid { margin:20px 0; }
.expert-admin .kpi { min-width:0; }
.expert-admin .kpi__value { font-size:24px; overflow-wrap:anywhere; }
.expert-admin .kpi__title { margin-bottom:12px; }
.expert-admin .btn--sm,.expert-admin .badge { border-radius:var(--radius-xs); }
.expert-admin .tabs { overflow-x:auto; }
.expert-admin .tabs__item { flex-shrink:0; text-decoration:none; }
.expert-admin .tbl-card { margin-bottom:20px; }
.expert-admin .tbl-card__bar h2,.expert-admin__details h2 { font:600 16px var(--font); margin:0; }
.expert-admin__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:20px 0 12px; }
.expert-admin__heading h1 { font:600 26px/1.3 var(--font); margin:0 0 8px; }
.expert-admin__muted { color:var(--text-muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.expert-admin__name { font-weight:600; }
.expert-admin__small { font-size:13px; }
.expert-admin__code { display:block; font-size:12px; }
.expert-admin__founding { margin-left:4px; }
.expert-admin__details { padding:20px; }
.expert-admin__details .dlist { margin-top:16px; }
.expert-admin__table-wrap { overflow-x:auto; width:100%; }
.expert-admin__table-wrap .tbl { min-width:600px; }
.expert-admin__negative { color:var(--danger); }
.expert-admin__note { padding:0 16px; color:var(--text-muted); font:400 13px/1.5 var(--font); }
.expert-admin__pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px; }
.expert-admin__list { padding:20px; }
.expert-admin__filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.expert-admin__search { max-width:320px; }
.expert-admin__status-filter { width:auto; }
.expert-admin .admin-stat-icon { display:none; }
.expert-admin .tbl td .btn { margin:3px 0; white-space:nowrap; }
@media(max-width:600px) {
  .expert-admin__list,.expert-admin__details { padding:16px; }
  .expert-admin__filters .field { width:100%; max-width:none; }
  .expert-admin__heading h1 { font-size:22px; }
}

.expert-admin__actions { display:flex; gap:8px; flex-wrap:wrap; }

.expert-admin .tabs { overflow-y:hidden; }
.expert-admin .btn { text-decoration:none; }

/* =====================================================================
   Настройки → группа «Филиал» в сайдбаре (/settings)
   Карточка выбранного филиала, комбобокс выбора (UI Kit §33) и строка
   контекста в шапке панелей «Услуги», «Мастера», «Планы мастеров»,
   «Ресурсы». Карточка собрана из .sidebar__avatar / .sidebar__user-* футера
   сайдбара; новые только обёртка, строка действий и комбобокс.
   ===================================================================== */
.settings-v2 .sidebar__scope{
  display:flex;flex-direction:column;gap:8px;margin:0;padding:10px;
  background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
}
.settings-v2 .sidebar__scope-row{display:flex;align-items:center;gap:10px;min-width:0;}
.settings-v2 .sidebar__scope-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.settings-v2 .sidebar__scope-actions .s2-badge{white-space:nowrap;}
.settings-v2 .sidebar__scope-select{display:none;}
/* Пункты разделов внутри карточки: разделитель сверху, лёгкий выход к краям обводки */
.settings-v2 .sidebar__scope-nav{margin:2px -6px -6px;padding-top:8px;border-top:1px solid var(--border);}

/* Комбобокс (UI Kit §33), только внутри настроек */
.settings-v2 .combo{position:relative;display:inline-block;width:100%;max-width:360px;}
.settings-v2 .combo[hidden]{display:none;}
.settings-v2 .combo__input{
  width:100%;height:38px;padding:0 34px 0 12px;
  background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-xs);
  font:500 13.5px var(--font);color:var(--text);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.settings-v2 .combo__input::placeholder{color:var(--text-light);}
.settings-v2 .combo__input:focus{outline:none;border-color:var(--text);box-shadow:var(--focus-ring);}
.settings-v2 .combo__chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-light);pointer-events:none;}
.settings-v2 .combo__menu{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);max-height:280px;overflow-y:auto;padding:4px;
}
.settings-v2 .combo__item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;border-radius:var(--radius-xs);background:none;text-align:left;
  font:500 13px var(--font);color:var(--text);cursor:pointer;
}
.settings-v2 .combo__item > div{min-width:0;}
.settings-v2 .combo__item:hover,.settings-v2 .combo__item.is-focused{background:var(--hover);}
.settings-v2 .combo__item:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.settings-v2 .combo__item .meta{margin-left:auto;color:var(--text-light);font:500 11.5px var(--font);white-space:nowrap;}
.settings-v2 .combo__item-sub{color:var(--text-light);font:500 11.5px var(--font);}
.settings-v2 .combo__item mark{background:var(--warning-soft);color:var(--text);padding:0;font-weight:700;}
.settings-v2 .combo__empty{padding:18px;text-align:center;font:500 12.5px var(--font);color:var(--text-light);}
.settings-v2 .sidebar__scope .combo{max-width:none;}

/* Строка контекста под заголовком панели */
.settings-v2 .s2-page-head__scope{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:12px;
  font:500 13px/1.4 var(--font);color:var(--text-light);
}
.settings-v2 .s2-page-head__scope .s2-branch__avatar{width:26px;height:26px;font-size:12px;border-radius:var(--radius-xs);}
.settings-v2 .s2-page-head__scope b{color:var(--text);font-weight:600;}
.settings-v2 .s2-page-head__scope-note{color:var(--text-muted);}

/* Мобильная лента сайдбара (порог как в clientflow.css): карточка в строку,
   вместо комбобокса — нативный select, имя филиала показывает он же. */
@media (max-width:920px){
  .settings-v2 .sidebar__scope{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;margin:0;padding:4px 8px;}
  .settings-v2 .sidebar__scope .sidebar__user{display:none;}
  .settings-v2 .sidebar__scope [data-scope-switch],.settings-v2 .sidebar__scope .combo{display:none;}
  .settings-v2 .sidebar__scope-select{display:block;width:auto;max-width:200px;height:32px;padding:0 8px;}
  .settings-v2 .sidebar__scope-nav{margin:0;padding:0 0 0 8px;border-top:0;border-left:1px solid var(--border);}
}

/* =====================================================================
   Настройки услуг · шаг «Глубокая аналитика» (UI Kit §6/§7/§8/§10)
   Фильтры-пилюли, таблица с раскрывающимися строками (тайминги мастеров,
   состав комплекса), чекбокс «Активна». Только токены, без inline-стилей.
   ===================================================================== */
.settings-v2 .svc-hint{margin:0 0 16px;font:400 13px/1.55 var(--font);}
.settings-v2 .svc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;}
.settings-v2 .svc-filters[hidden]{display:none;}
.settings-v2 .svc-filters__label{font:500 13px var(--font);}
.settings-v2 .svc-filters .s2-btn.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.settings-v2 .svc-table-wrap{width:100%;overflow-x:auto;}
.settings-v2 .svc-table-wrap[hidden]{display:none;}
.settings-v2 .svc-table{width:100%;}
.settings-v2 .svc-table th:first-child{min-width:260px;}
.settings-v2 .svc-col--type{min-width:160px;}
.settings-v2 .svc-col--timing{min-width:110px;}
.settings-v2 .svc-col--cost{min-width:120px;}
.settings-v2 .svc-col--period{min-width:130px;}
.settings-v2 .svc-col--active{min-width:80px;text-align:center;}
.settings-v2 .svc-empty{padding:32px 0;text-align:center;}
.settings-v2 .svc-empty[hidden]{display:none;}
.settings-v2 .svc-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;}
/* Шаги 1–2 настроек услуг: лоадер, тулбар, панель выбора для объединения,
   блок «Возможные дубликаты», ячейки таблиц. Показ/скрытие — атрибутом hidden. */
.settings-v2 .svc-loading{padding:24px 0;text-align:center;}
.settings-v2 .svc-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.settings-v2 .svc-merge-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;margin-bottom:8px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);font:400 13px var(--font);color:var(--text);}
.settings-v2 .svc-merge-bar[hidden]{display:none;}
.settings-v2 .svc-table--merge th:first-child{min-width:0;}
.settings-v2 .svc-col--pick{width:40px;text-align:center;}
.settings-v2 .svc-pick{display:inline-flex;vertical-align:middle;}
.settings-v2 .svc-col--select{min-width:210px;}
.settings-v2 .s2-tbl td.svc-cell--alias{padding-left:32px;}
.settings-v2 .svc-type-select{min-width:190px;}
.settings-v2 .svc-dup{padding:12px 14px;margin-bottom:16px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius);}
.settings-v2 .svc-dup[hidden]{display:none;}
.settings-v2 .svc-dup__title{margin:0 0 4px;font:600 13.5px/1.4 var(--font);color:var(--text);}
.settings-v2 .svc-dup__hint{margin:0 0 10px;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.settings-v2 .svc-dup__group{padding:10px 12px;margin-bottom:8px;background:var(--bg-card);border:1px solid var(--accent-line);border-radius:var(--radius-sm);}
.settings-v2 .svc-dup__group:last-child{margin-bottom:0;}
.settings-v2 .svc-dup__group-title{margin:0 0 6px;font:600 13px/1.4 var(--font);color:var(--text);}
.settings-v2 .svc-dup__list{margin:0 0 8px 16px;padding:0;font:400 12.5px/1.5 var(--font);color:var(--text-muted);}
.settings-v2 .svc-dup__meta{color:var(--text-light);}
.settings-v2 .s2-tbl td.svc-cell--nested{padding-left:32px;}
.settings-v2 .svc-row-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:4px;padding:0;
  border:0;border-radius:var(--radius-xs);background:none;color:var(--text-light);cursor:pointer;vertical-align:middle;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.settings-v2 .svc-row-toggle:hover{background:var(--hover);color:var(--text);}
.settings-v2 .svc-row-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.settings-v2 .svc-row-toggle__chevron{width:12px;height:12px;transition:transform var(--dur-base) var(--ease);}
.settings-v2 .svc-row-toggle.is-open .svc-row-toggle__chevron{transform:rotate(90deg);}
.settings-v2 .s2-tbl td.svc-expand{padding:0;background:var(--bg-app);}
.settings-v2 .svc-expand__content{padding:12px 32px;}
.settings-v2 .svc-expand__title{margin-bottom:8px;font:600 13px var(--font);color:var(--text);}
.settings-v2 .svc-expand__item{padding:3px 0;font:400 13px var(--font);color:var(--text);}
.settings-v2 .svc-expand__meta{font:400 12px var(--font);color:var(--text-muted);}
.settings-v2 .svc-expand__actions{display:flex;align-items:center;gap:8px;margin-top:8px;}
.settings-v2 .svc-staff-tbl{width:auto;border-collapse:collapse;}
.settings-v2 .svc-staff-tbl td{padding:4px 8px;font:400 13px var(--font);color:var(--text);}
.settings-v2 .svc-staff-tbl__hint,.settings-v2 .svc-staff-tbl td.svc-staff-tbl__hint{font:400 12px var(--font);color:var(--text-light);}
.settings-v2 .svc-staff-dur.is-override{border-color:var(--warning);}
.settings-v2 .svc-active{position:relative;gap:0;vertical-align:middle;}
@media (prefers-reduced-motion:reduce){
  .settings-v2 .svc-row-toggle,.settings-v2 .svc-row-toggle__chevron{transition:none;}
}

/* ── Настройки услуг · шаг «Комплексы»: карточка комплекса со списком кандидатов ── */
.settings-v2 .svc-cx{margin-bottom:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);}
.settings-v2 .svc-cx__title{margin-bottom:8px;font:600 13.5px var(--font);color:var(--text);}
.settings-v2 .svc-cx__body{display:flex;flex-wrap:wrap;gap:20px;}
.settings-v2 .svc-cx__list{flex:1;min-width:200px;max-height:200px;overflow-y:auto;}
.settings-v2 .svc-cx__item.s2-checkbox{display:flex;gap:8px;padding:3px 0;font:400 13px var(--font);}
.settings-v2 .svc-cx__label{min-width:0;}
.settings-v2 .svc-cx__totals{font:400 12.5px var(--font);color:var(--text-muted);white-space:nowrap;}
.settings-v2 .svc-cx__totals div + div{margin-top:4px;}

/* Лендинг вебинара: три блока, общие токены и публичный шаблон. */
.webinar-landing { font-family:var(--font); color:var(--text); background:var(--bg-card); overflow:clip; }
.webinar-landing * { box-sizing:border-box; }
.webinar-landing :is(h1,h2,h3,p) { margin:0; }
.webinar-wrap { width:min(1500px,calc(100% - 96px)); margin-inline:auto; }
.webinar-landing :is(h1,h2) { font-weight:750; letter-spacing:-.06em; line-height:1.06; }
.webinar-landing h1 { font-size:clamp(48px,5.4vw,84px); }
.webinar-landing h2 { font-size:clamp(36px,4.5vw,66px); }
.webinar-landing em { color:var(--accent); font-style:normal; }
.webinar-kicker { font-size:12px; font-weight:600; margin-bottom:28px!important; }
.webinar-lead { font-size:18px; line-height:1.7; max-width:650px; margin-block:28px 32px!important; color:var(--text-muted); }
.webinar-hero { background:var(--text); color:var(--bg-card); }
.webinar-hero__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:28px 40px; padding-block:64px 28px; }
.webinar-hero h2 { font-size:clamp(25px,2.5vw,38px); margin-top:20px; color:var(--text-faint); }
.webinar-hero .webinar-lead { color:var(--text-faint); }
.webinar-hero .webinar-lead strong { color:var(--bg-card); }
.webinar-scene { position:relative; aspect-ratio:1; min-width:0; isolation:isolate; }
.webinar-mascot { width:100%; height:100%; object-fit:contain; animation:webinar-float 6s ease-in-out infinite; }
.webinar-orbit { position:absolute; inset:12%; z-index:-1; background:radial-gradient(ellipse,var(--accent),transparent 68%); opacity:.4; transform:scale(1.4); }
.webinar-tag { position:absolute; padding:16px 20px; border:1px solid var(--accent-line); border-radius:var(--radius); background:var(--bg-card); color:var(--text); box-shadow:var(--shadow-lg); }
.webinar-tag span { font-size:11px; color:var(--text-muted); }
.webinar-tag strong { display:block; margin-top:8px; font-size:16px; }
.webinar-tag--clients { top:20%; right:0; transform:rotate(6deg); }
.webinar-tag--money { bottom:24%; left:0; transform:rotate(-7deg); }
.webinar-gift { position:absolute; bottom:0; right:0; display:flex; align-items:center; gap:14px; padding:14px 24px; border-radius:var(--radius); background:var(--accent); transform:rotate(5deg); }
.webinar-gift strong { font-size:78px; line-height:1; letter-spacing:-.06em; }
.webinar-gift span { font-size:18px; font-weight:650; }
.webinar-hero__bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:20px; align-items:center; border-top:1px solid var(--text-muted); padding-top:22px; color:var(--text-faint); font-size:12px; }
.webinar-motion { background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:10px; }
.webinar-landing .webinar-cta { white-space:normal; text-align:center; border-radius:var(--radius-sm); min-height:52px; height:auto; text-decoration:none; padding:16px 22px; }
.webinar-features { padding-block:100px; }
.webinar-features__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:44px; }
.webinar-card { border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:var(--bg-app); }
.webinar-card>span { font-size:11px; color:var(--text-muted); }
.webinar-card__art { font-size:70px; letter-spacing:-.08em; color:var(--accent); height:130px; display:flex; align-items:center; }
.webinar-card h3 { font-size:25px; margin-bottom:14px; letter-spacing:-.04em; }
.webinar-card p { font-size:15px; line-height:1.65; }
.webinar-card--accent { background:var(--accent); color:var(--bg-card); }
.webinar-card--accent :is(.webinar-card__art,span) { color:var(--bg-card); }
.webinar-sync { margin-top:24px!important; padding:18px 24px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius-sm); font-size:14px; }
.webinar-final { background:var(--accent-soft); padding-block:90px; }
.webinar-final__grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:72px; align-items:center; }
.webinar-final__note { font-size:12px; line-height:1.6; color:var(--text-muted); max-width:490px; margin-top:18px!important; }
.webinar-ticket { padding:40px; background:var(--text); color:var(--bg-card); border-radius:var(--radius-lg); transform:rotate(5deg); text-align:center; }
.webinar-ticket>span { font-size:14px; }
.webinar-ticket strong { display:block; font-size:clamp(110px,14vw,200px); line-height:1.2; letter-spacing:-.09em; color:var(--accent); }
.webinar-ticket>div { margin-top:32px; padding-top:20px; border-top:1px dashed var(--text-muted); font-size:11px; }
.webinar-paused * { animation-play-state:paused!important; }
.webinar-preview-body .stickycta { display:none!important; }
.webinar-landing :is(a,button):focus-visible { outline:3px solid var(--info); outline-offset:4px; }
@keyframes webinar-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
@media(prefers-reduced-motion:reduce) { .webinar-landing * { animation:none!important; transition:none!important; } }
@media(max-width:1200px) { .webinar-preview-body .nav__links,.webinar-preview-body .nav__cta { display:none; } .webinar-preview-body .nav__burger { display:flex; } .webinar-features__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .webinar-wrap { width:calc(100% - 40px); } .webinar-hero__grid,.webinar-final__grid { grid-template-columns:minmax(0,1fr); gap:32px; } .webinar-hero__grid { padding-top:40px; } .webinar-scene { width:min(100%,520px); margin-inline:auto; } .webinar-features,.webinar-final { padding-block:64px; } .webinar-ticket { width:min(90%,420px); margin-inline:auto; } .webinar-lead { font-size:16px; } }
@media(max-width:480px) { .webinar-landing h1 { font-size:clamp(38px,10.5vw,50px); } .webinar-landing h2 { font-size:34px; } .webinar-hero h2 { font-size:25px; } .webinar-tag { padding:10px; } .webinar-tag strong { font-size:12px; } .webinar-gift { padding:10px 18px; } .webinar-gift strong { font-size:56px; } .webinar-gift span { font-size:14px; } .webinar-features__grid { grid-template-columns:1fr; } .webinar-card__art { height:95px; } .webinar-hero__bottom { align-items:flex-start; flex-direction:column; } }

/* ============================================================================
   Salistica — «Стартовый рабочий стол» (home dashboard).
   Перенос компонентов из макета Claude Design. Все правила scoped под .dh,
   чтобы не конфликтовать с одноимёнными классами в core.css (.tile/.seg/.page-head).
   Цвета и радиусы — только через токены дизайн-системы (design-system.css :root).
   ============================================================================ */

/* width:100% обязателен: body — flex-column, и без явной ширины .dh с margin:0 auto
   сжимается до max-content контента (на верхнем уровне шире из-за секции «Отчёты»,
   во вложенности уже) — отсюда «гуляющая» ширина карточек. Фиксируем по вьюпорту. */
.dh { width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 24px 96px; min-width: 0; }

/* Встроенный режим: секция сверху классического /dashboard. Лежит внутри
   .container--wide (как и виджеты дашборда), поэтому ширину НЕ держит сама —
   снимаем max-width/центрирование/боковые паддинги, ширина наследуется от
   контейнера дашборда → совпадает с ним край-в-край по построению, без хардкода.
   Подложка отделяет «Модуль планирования» от остального дашборда: тон --info-soft —
   цвет плана в таблице Никольского; плитки и карточки внутри остаются белыми. */
.dh.dh--embedded { max-width: none; width: 100%; margin: 0 0 24px; padding: 20px 24px 8px; background: var(--info-soft); border: 1px solid var(--info-line); border-radius: var(--radius-lg); }
@media (max-width: 600px) { .dh.dh--embedded { padding: 16px 12px 4px; border-radius: var(--radius); } }

/* ── Хлебные крошки ─────────────────────────────────────────────────────── */
.dh .dh-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; min-height: 20px; }
.dh .dh-crumbs__link { border: 0; background: 0; padding: 0; font: 500 12.5px var(--font); color: var(--text-muted); cursor: pointer; }
.dh .dh-crumbs__link:hover { color: var(--accent); text-decoration: underline; }
.dh .dh-crumbs__sep { color: var(--text-faint); font: 500 12.5px var(--font); }
.dh .dh-crumbs__current { font: 600 12.5px var(--font); color: var(--text); }

/* ── Заголовок страницы + период ────────────────────────────────────────── */
.dh .dh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dh .dh-head__l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dh .dh-back { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-muted); flex: 0 0 auto; }
.dh .dh-back:hover { border-color: var(--text-faint); color: var(--text); }
.dh .dh-head h1 { margin: 0; font: 600 22px var(--font); letter-spacing: -0.01em; }
.dh .dh-head__sub { margin-top: 3px; font: 500 13px var(--font); color: var(--text-muted); }

/* ── Сетка плиток ───────────────────────────────────────────────────────── */
.dh .dh-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.dh .dh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh .dh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dh .dh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dh .dh-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px;
  text-align: left; font-family: inherit; color: var(--text);
  transition: border-color .14s, box-shadow .14s, transform .14s; cursor: default;
}
.dh .dh-tile--drill { cursor: pointer; }
.dh .dh-tile--leaf { cursor: pointer; }
/* Кликабельные плитки (KPI-drill и отчёты) — акцент на ховере, без постоянной заливки. */
.dh .dh-tile--drill:hover,
.dh .dh-tile--leaf:hover { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.dh .dh-tile--drill:hover .dh-tile__name,
.dh .dh-tile--leaf:hover .dh-tile__name { color: var(--accent); }
.dh .dh-tile--drill:hover { transform: translateY(-2px); }

.dh .dh-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* резерв под две строки названия — карточки одной высоты независимо от длины заголовка */
.dh .dh-tile__name { font: 600 14.5px var(--font); letter-spacing: -0.005em; line-height: 1.3; min-height: 2.6em; }
.dh .dh-tile__chev { color: var(--text-faint); flex: 0 0 auto; margin-top: 1px; transition: color .14s, transform .14s; }
.dh .dh-tile--drill:hover .dh-tile__chev { color: var(--accent); transform: translateX(2px); }

.dh .dh-tile__value { font: 600 26px var(--font); letter-spacing: -0.02em; font-feature-settings: 'tnum' 1; line-height: 1; }
.dh .dh-tile__note { font: 500 11.5px var(--font); color: var(--text-light); }

/* акцентная (сводная) плитка */
.dh .dh-tile--summary { background: var(--accent-soft); border-color: var(--accent-line); }
.dh .dh-tile--summary .dh-tile__name { color: var(--accent); }

/* план/факт прогресс */
.dh .dh-tile__plan { display: flex; flex-direction: column; gap: 6px; }
.dh .dh-tile__plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dh .dh-tile__plan-lbl { font: 500 11.5px var(--font); color: var(--text-muted); }
.dh .dh-tile__plan-pct { font: 600 13px var(--font); font-feature-settings: 'tnum' 1; }
.dh .dh-tile__bar { height: 4px; border-radius: var(--radius-xs); background: var(--bg-app); position: relative; overflow: hidden; }
.dh .dh-tile__bar::-webkit-progress-value { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-xs); background: var(--accent); }
.dh .dh-tile__bar--success::-webkit-progress-value { background: var(--success); }
.dh .dh-tile__bar--warning::-webkit-progress-value { background: var(--warning); }
.dh .dh-tile__bar--danger::-webkit-progress-value { background: var(--danger); }

/* нарастающим итогом */
.dh .dh-tile__cum { font: 500 11.5px var(--font); color: var(--text-light); }
.dh .dh-tile__cum b { font-weight: 600; font-feature-settings: 'tnum' 1; }

/* дельты */
.dh .dh-tile__deltas { display: flex; gap: 18px; padding-top: 12px; border-top: 1px solid var(--divider); }
.dh .dh-tile__delta { display: flex; flex-direction: column; gap: 2px; }
.dh .dh-tile__delta-lbl { font: 500 10.5px var(--font); color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }
.dh .dh-tile__delta b { font: 600 14px var(--font); font-feature-settings: 'tnum' 1; }

/* тона */
.dh .tone-pos, .dh .tone-success { color: var(--success); }
.dh .tone-neg, .dh .tone-danger { color: var(--danger); }
.dh .tone-warning { color: var(--warning); }
.dh .tone-neu, .dh .tone-muted { color: var(--text-light); }

/* ── Секция «Отчёты» ────────────────────────────────────────────────────── */
.dh .dh-reports { margin-top: 34px; }
.dh .dh-reports__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.dh .dh-reports__title { font: 600 17px var(--font); letter-spacing: -0.005em; }
.dh .dh-reports__hint { font: 500 12.5px var(--font); color: var(--text-light); }
.dh .dh-report-tile__desc { font: 500 12.5px var(--font); color: var(--text-muted); line-height: 1.45; }

/* ── Состояния ──────────────────────────────────────────────────────────── */
.dh .dh-state { padding: 48px 0; text-align: center; color: var(--text-muted); font: 500 14px var(--font); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dh .dh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh .dh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dh { padding: 18px 14px 56px; }
  .dh .dh-head h1 { font-size: 20px; }
  .dh .dh-head { align-items: flex-start; gap: 12px; }
  .dh .dh-grid--2, .dh .dh-grid--3, .dh .dh-grid--4 { grid-template-columns: 1fr; }
  .dh .dh-tile__value { font-size: 24px; }
}

.dh [hidden] { display: none !important; }
.dh .page-state { grid-column: 1 / -1; }
.dh .page-state { padding: 48px 24px; display: grid; justify-items: center; gap: 16px; text-align: center; }
.dh .page-state__text { font: 500 14px/1.6 var(--font); color: var(--text-muted); }
.dh .dh-tile__bar { width: 100%; border: 0; appearance: none; }
.dh .dh-tile__bar::-webkit-progress-bar { background: var(--bg-app); }
.dh .dh-tile__bar::-webkit-progress-value { position: static; }
.dh .dh-tile__bar::-moz-progress-bar { background: var(--accent); }
.dh .dh-tile__bar--success::-moz-progress-bar { background: var(--success); }
.dh .dh-tile__bar--warning::-moz-progress-bar { background: var(--warning); }
.dh .dh-tile__bar--danger::-moz-progress-bar { background: var(--danger); }
.dh .dh-filters { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; margin-left: auto; min-width: 0; }
.dh .dh-filter-actions { display: flex; gap: 8px; }
.dh .dh-staff { position: relative; }
.dh .dh-staff summary { list-style: none; cursor: pointer; }
.dh .dh-staff summary::-webkit-details-marker { display: none; }
.dh .dropdown__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 280px; max-width: 90vw; max-height: 360px; overflow: auto; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.dh .checkbox-row { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; font: 500 13px var(--font); }
.dh .checkbox-row input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.dh .dropdown__sep { height: 1px; background: var(--divider); margin: 4px 0; }
.dh .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px;
  padding: 8px 14px; font: 600 13px var(--font); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; }
.dh .btn--secondary { background: var(--bg-card); color: var(--text); }
.dh .btn, .dh .dh-tile { text-transform: none; letter-spacing: normal; }
.dh .dh-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Shared dashboard date picker, using the design-system palette in Nikolsky's toolbar. */
.dh .dr { position: static; max-width: 100%; }
.dh .dr__trigger { min-height: 38px; max-width: 100%; height: auto; flex-wrap: wrap; row-gap: 2px;
  background: var(--bg-card); border-color: var(--border-strong); border-radius: var(--radius-xs); color: var(--text); font-family: var(--font); }
.dh .dr__trigger:hover { border-color: var(--text-light); }
.dh .dr__trigger:disabled { color: var(--text-muted); cursor: wait; }
.dh .dr__trigger.is-open, .dh .dr__trigger:focus { border-color: var(--text); box-shadow: var(--shadow-sm); }
.dh .dr__sep { color: var(--text-light); }
.dh .dr__popover { right: 0; left: auto; border-color: var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.dh .dr__presets { background: var(--bg-app); border-color: var(--divider); }
.dh .dr__preset { font-family: var(--font); color: var(--text-muted); border-radius: var(--radius-xs); }
.dh .dr__preset:hover { background: var(--hover); color: var(--text); }
.dh .dr__preset.is-active { background: var(--text); color: var(--bg-card); }
.dh .dr__month + .dr__month { border-color: var(--divider); }
.dh .dr__nav-title, .dh .dr__day, .dh .dr__summary strong { color: var(--text); font-family: var(--font); }
.dh .dr__nav-btn { border-color: var(--border); border-radius: var(--radius-xs); color: var(--text-muted); background: var(--bg-card); }
.dh .dr__nav-btn:hover { color: var(--text); background: var(--hover); border-color: var(--border-strong); }
.dh .dr__dow, .dh .dr__day.is-other-month { font-family: var(--font); color: var(--text-light); }
.dh .dr__day { border-radius: var(--radius-xs); }
.dh .dr__day:hover { background: var(--hover); }
.dh .dr__day.is-in-range { background: var(--accent-soft); }
.dh .dr__day.is-range-start, .dh .dr__day.is-range-end { background: var(--accent); color: var(--bg-card); }
.dh .dr__footer { flex-wrap: wrap; background: var(--bg-app); border-color: var(--divider); }
.dh .dr__summary { color: var(--text-muted); font-family: var(--font); }
.dh .dr__btn-secondary, .dh .dr__btn-primary { font-family: var(--font); border-radius: var(--radius-sm); }
.dh .dr__btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.dh .dr__btn-secondary:hover { background: var(--hover); border-color: var(--border-strong); }
.dh .dr__btn-primary { background: var(--text); border-color: var(--text); color: var(--bg-card); }
.dh .dr__btn-primary:hover { background: var(--text-muted); }
/* Nikolsky monthly view: UI kit §10 table, sticky period column from Master Compare. */
.dh .dh-monthly { margin-top: 28px; min-width: 0; }
.dh .dh-monthly .dh-reports__head { flex-wrap: wrap; }
.dh .dh-monthly .dh-reports__title { margin: 0; }
.dh .dh-monthly__hint { font: 400 12px/1.6 var(--font); color: var(--text-muted); margin: 12px 0; }
.dh .tbl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dh .tbl-card__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.dh .tbl-card > .dh-monthly__hint { padding: 0 16px; }
.dh .dh-monthly__chart-card { padding: 16px; margin-bottom: 20px; }
.dh .dh-monthly__chart { position: relative; height: 320px; }
.dh .tbl-wrap { overflow: auto; max-height: 560px; }
.dh .tbl-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dh .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 13px var(--font); }
.dh .tbl th, .dh .tbl td { padding: 12px 16px; border-bottom: 1px solid var(--divider); white-space: nowrap; background: var(--bg-card); }
.dh .tbl thead th { position: sticky; top: 0; z-index: 3; height: 40px; padding: 10px 16px; font: 600 11px var(--font); color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: center; }
.dh .tbl thead tr:nth-child(2) th { top: 40px; }
.dh .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.dh .tbl .col-period { position: sticky; left: 0; text-align: left; border-right: 1px solid var(--divider); }
.dh .tbl thead .col-period { z-index: 4; }
.dh .tbl tbody .col-period { z-index: 2; font-weight: 500; }
.dh .tbl tbody tr:last-child > * { border-bottom: 0; }
.dh .tbl tbody tr:hover > * { background: var(--hover); }
.dh .tbl tbody tr.is-current > * { background: var(--accent-soft); font-weight: 600; }
.dh .tbl tbody tr.is-current .col-period { color: var(--accent); }
.dh .dh-monthly__current { display: block; margin-top: 4px; font: 500 11px var(--font); }
@media (max-width: 600px) {
  .dh .dh-monthly__chart-card { padding: 8px; }
  .dh .dh-monthly__chart { height: 260px; }
  .dh .tbl th, .dh .tbl td { padding-left: 10px; padding-right: 10px; }
  .dh .tbl .col-period { max-width: 128px; white-space: normal; }
}
@media (max-width: 600px) {
  .dh .dr__popover { max-width: calc(100vw - 32px); }
  .dh .dh-filters { width: 100%; align-items: stretch; }
  .dh .dr__footer { flex-wrap: wrap; }
  .dh .dr__summary { flex-basis: 100%; }
  .dh .dh-filter-actions { margin-left: auto; }
}

/* Поиск услуг: общий компонент UI-кита, отдельная форма от смены пароля. */
.settings-v2 .svc-search { margin: 0 0 0 auto; }
.settings-v2 .svc-search .search__input { padding-left: 12px; }
.settings-v2 .svc-search .search__input::-webkit-search-cancel-button { display: none; }
.settings-v2 .svc-search .search__clear { display: grid; }

/* Настройки таблицы Никольского: перенесены из JS-рендера. */
/* Модал настроек — фуллскрин */
.pf-modal-backdrop { position:fixed; inset:0; background:var(--bg-app); z-index:1000; display:flex; align-items:stretch; justify-content:stretch; }
.pf-modal { box-sizing:border-box; font:400 13px/1.5 var(--font); color:var(--text); background:var(--bg-card); width:100vw; max-width:100vw; height:100vh; max-height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.pf-modal-head { padding:20px 24px 16px; border-bottom:1px solid var(--divider); display:flex; align-items:center; gap:12px; flex:none; }
.pf-modal-title { font:700 16px/1 var(--font); color:var(--text); flex:1; }
.pf-modal-close { width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-card); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-muted); }
.pf-modal-body { min-width:0; padding:20px 24px; overflow:auto; flex:1; }
.pf-modal-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--divider); }
.pf-modal-tab { padding:8px 16px; font:500 13px var(--font); cursor:pointer; border:none; background:none; color:var(--text-muted); position:relative; }
.pf-modal-tab--active { color:var(--text); font-weight:600; }
.pf-modal-tab--active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); }
.pf-modal-section { display:none; }
.pf-modal-section--active { display:block; }
.pf-form-row { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.pf-form-label { font:500 13px var(--font); color:var(--text-muted); min-width:120px; }
.pf-form-input { flex:1; height:36px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:13px var(--font); }
.pf-form-input:focus { outline:none; border-color:var(--text); }
.pf-save-btn { height:36px; padding:0 18px; background:var(--accent); color:var(--bg-card); border:1px solid var(--accent); border-radius:var(--radius-sm); font:600 13px var(--font); cursor:pointer; transition:background .12s,border-color .12s; }
.pf-save-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.pf-save-btn:disabled, .pf-ghost-btn:disabled { opacity:.5; cursor:default; }
.pf-ghost-btn { height:36px; padding:0 16px; background:var(--bg-card); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:500 13px var(--font); cursor:pointer; transition:border-color .12s; }
.pf-ghost-btn:hover { border-color:var(--text-light); }
.pf-prefill-block .pf-ghost-btn + .pf-ghost-btn { margin-left:8px; }
.pf-period { font:500 12px var(--font); color:var(--text-muted); }
.pf-prefill-block { margin:0 0 16px; padding:14px 16px; background:var(--bg-app); border-radius:var(--radius); }
.pf-prefill-block--hero { text-align:center; padding:24px 16px; }
.pf-prefill-title { font:600 13px var(--font); color:var(--text); margin-bottom:6px; }
.pf-prefill-text { font:400 13px/1.5 var(--font); color:var(--text-muted); margin:0 0 12px; }
.pf-prefill-note { font:400 12px var(--font); color:var(--text-light); margin:8px 0 0; }
.pf-modal-sep { border:none; border-top:1px solid var(--divider); margin:20px 0; }
.pf-price-table { width:100%; border-collapse:collapse; font:13px var(--font); }
.pf-price-table th { padding:8px 10px; text-align:left; font-weight:600; font-size:12px; background:var(--hover); border-bottom:1px solid var(--border-strong); }
.pf-price-table td { padding:6px 10px; border-bottom:1px solid var(--divider); }
.pf-price-input { width:90px; height:30px; padding:0 8px; border:1px solid var(--border-strong); border-radius:var(--radius-xs); font:13px var(--font); text-align:right; }
.pf-price-input:focus { outline:none; border-color:var(--text); }
.pf-price-note { font-size:13px; color:var(--text-muted); margin:0 0 12px; }
.pf-price-master { font-weight:500; }
.pf-svc-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 10px; background:var(--divider); border-radius:var(--radius-sm); font:12px var(--font); color:var(--text); }
.pf-svc-tag-kind { padding:1px 6px; border-radius:var(--radius-xs); background:var(--accent-soft); color:var(--accent); font:600 10px var(--font); text-transform:uppercase; letter-spacing:.03em; }
.pf-svc-tag-rm { border:none; background:none; cursor:pointer; font-size:14px; color:var(--text-light); padding:0; line-height:1; display:flex; align-items:center; }
.pf-svc-tag-rm:hover { color:var(--text); }

/* Продукты — плоский список */
.pf-groups-sec { margin-bottom:16px; padding:14px 16px; background:var(--bg-app); border-radius:var(--radius); }
.pf-groups-sec-title { font:600 12px var(--font); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.pf-group-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; }
.pf-group-item-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.pf-group-new { margin-top:8px; }
.pf-group-form { box-sizing:border-box; min-width:0; margin-top:10px; padding:12px; background:var(--divider); border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:8px; width:100%; }
.pf-gcheck-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:8px 16px; max-height:220px; overflow-y:auto; padding:4px 0; }
.pf-gcheck { display:inline-flex; align-items:center; gap:6px; font:400 12px var(--font); color:var(--text); cursor:pointer; }
.pf-gbadge { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:var(--radius-xs); background:var(--accent-soft); color:var(--accent); font:600 10px var(--font); text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }
.pf-group-form-wrap.hidden { display:none; }
.pf-prod-list { margin-bottom:16px; }
.pf-prod-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; }
.pf-prod-item--off { opacity:.55; }
.pf-prod-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.pf-prod-svcs { color:var(--text-muted); }
.pf-prod-nosvc { color:var(--text-light); }

/* Иконочные кнопки (btn--icon btn--sm btn--ghost из UI-кита) */
.pf-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; transition:background .12s,color .12s,border-color .12s; flex:none; }
.pf-icon-btn:hover { background:var(--hover); color:var(--text); }
.pf-icon-btn--danger:hover { background:var(--danger-soft); color:var(--danger); }
.pf-icon-btn--accent { color:var(--accent); }
.pf-icon-btn--accent:hover { background:var(--accent-soft); color:var(--accent); }

/* Кнопки UI-кита: primary (accent) и нейтральная secondary */
.pf-btn-confirm { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent); color:var(--bg-card); font:600 13px var(--font); cursor:pointer; transition:background .12s,border-color .12s; }
.pf-btn-confirm:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.pf-btn-confirm:disabled { opacity:.45; cursor:not-allowed; }
.pf-btn-cancel { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font:600 13px var(--font); cursor:pointer; transition:background .12s,border-color .12s; }
.pf-btn-cancel:hover { background:var(--hover); border-color:var(--text-faint); }

/* Затемнённый блок редактирования/добавления */
.pf-edit-box { background:var(--divider); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-top:8px; }
.pf-prod-item.pf-edit-box { display:block; }
.pf-edit-fields { display:flex; flex-direction:column; gap:6px; }
.pf-form-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.pf-edit-box .pf-form-input, .pf-svc-search { flex:none; width:100%; box-sizing:border-box; }

/* Новый продукт */
.pf-new-group { margin-top:8px; padding:14px 16px; background:var(--bg-app); border-radius:var(--radius); }
.pf-new-group-kicker { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.pf-add-prod-form-new .pf-form-input { width:100%; box-sizing:border-box; }

/* Пикер сервисов */
.pf-svc-picker { margin-top:6px; }
.pf-svc-picker-lbl { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.pf-svc-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:20px; margin-bottom:6px; }
.pf-svc-search-wrap { position:relative; }
.pf-svc-search { padding-right:30px; }
.pf-svc-caret { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; color:var(--text-light); pointer-events:none; }
.pf-svc-drop { display:none; position:absolute; z-index:200; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); max-height:280px; overflow-y:auto; margin-top:2px; }
.pf-svc-drop-cat { padding:4px 10px 2px; font-size:11px; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pf-svc-drop-cat--kind { padding-top:8px; color:var(--accent); border-top:1px solid var(--divider); }
.pf-svc-drop-cat--kind:first-child { border-top:none; padding-top:2px; }
.pf-svc-drop-item { padding:6px 10px; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:8px; }
.pf-svc-drop-item:hover { background:var(--hover); }
.pf-svc-drop-item.is-selected { background:var(--accent-soft); }
.pf-svc-drop-check { flex:none; width:14px; height:14px; display:flex; color:var(--accent); opacity:0; }
.pf-svc-drop-item.is-selected .pf-svc-drop-check { opacity:1; }
.pf-svc-drop-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-svc-drop-price { flex:none; color:var(--text-light); }
.pf-svc-drop-empty { padding:10px; font-size:12px; color:var(--text-light); text-align:center; }

/* UI Kit §6–7: buttons, fields and checkboxes in the detached settings dialog. */
.pf-modal .btn { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text); font:600 13px var(--font); cursor:pointer; flex:none; text-transform:none; letter-spacing:normal; }
.pf-modal .btn:hover { background:var(--hover); border-color:var(--text-faint); }
.pf-modal .btn--primary { background:var(--accent); border-color:var(--accent); color:var(--bg-card); }
.pf-modal .btn--primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.pf-modal .btn--ghost { background:transparent; border-color:transparent; color:var(--text-muted); }
.pf-modal .btn--icon { width:36px; padding:0; justify-content:center; }
.pf-modal .btn--sm { height:30px; font-size:12.5px; }
.pf-modal .btn--icon.btn--sm { width:30px; }
.pf-modal .btn:disabled { opacity:.5; cursor:default; }
.pf-modal .btn:focus-visible, .pf-modal .checkbox-row input:focus-visible ~ .checkbox-box { outline:2px solid var(--info); outline-offset:2px; }
.pf-modal .field { width:100%; min-width:0; box-sizing:border-box; flex:none; height:38px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font:400 13px var(--font); }
.pf-modal .field:focus { outline:none; border-color:var(--text); }
.pf-modal .field-label { display:block; font:600 13px var(--font); color:var(--text); }
.pf-group-form { max-width:1120px; }
.pf-group-fields { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.pf-group-fields .field-label { margin-bottom:8px; }
.pf-service-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.pf-service-filters { display:flex; flex-wrap:wrap; gap:6px; }
.pf-service-filters .btn[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.pf-group-form .search { display:flex; align-items:center; flex:1 1 240px; max-width:360px; min-width:0; height:38px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); }
.pf-group-form .search__input { width:100%; min-width:0; height:100%; padding:0 12px; border:0; outline:none; background:transparent; color:var(--text); font:400 13px var(--font); }
.pf-group-form .search:focus-within { border-color:var(--text); }
.pf-group-form .search__clear { flex:none; width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--text-muted); font:400 18px var(--font); cursor:pointer; }
.pf-service-table-wrap { max-height:480px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); }
.pf-group-form .tbl { width:100%; border-collapse:collapse; table-layout:fixed; font:400 13px/1.5 var(--font); }
.pf-group-form .tbl th { position:sticky; top:0; padding:10px 12px; text-align:left; background:var(--bg-app); color:var(--text-muted); font-weight:500; z-index:1; }
.pf-group-form .tbl td { padding:12px; vertical-align:top; border-top:1px solid var(--border); color:var(--text); overflow-wrap:anywhere; }
.pf-group-form .tbl th:first-child { width:55%; }
.pf-group-form .tbl tbody tr:hover { background:var(--hover); }
.pf-group-form .tbl .field-hint { margin-top:4px; }
.pf-group-form .pager { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.pf-group-form .empty-inline { padding:24px; text-align:center; font:400 13px var(--font); color:var(--text-muted); }
.pf-group-form .hidden { display:none; }
.pf-group-form .pf-form-actions { flex-wrap:wrap; align-items:center; }
.pf-group-form [data-group-count] { margin-right:auto; }
.pf-group-form[aria-busy] .pf-service-toolbar, .pf-group-form[aria-busy] .pf-service-table-wrap, .pf-group-form[aria-busy] .pager { pointer-events:none; opacity:.6; }
.pf-group-form .checkbox-row:has(input:disabled) { cursor:default; opacity:.6; }
.pf-column-settings > summary { cursor:pointer; padding:12px 0; color:var(--text-muted); font:500 13px var(--font); }
.pf-column-settings > .field-hint { margin-bottom:12px; }
@media (max-width:600px) {
  .pf-group-fields { grid-template-columns:1fr; gap:12px; }
  .pf-service-filters { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .pf-modal .pf-service-filters .btn, .pf-modal .pager .btn { width:auto; }
  .pf-group-form .search { max-width:none; flex-basis:100%; }
  .pf-group-form .tbl thead { display:none; }
  .pf-group-form .tbl tr { display:block; padding:12px; border-bottom:1px solid var(--border); }
  .pf-group-form .tbl td { display:block; border:0; padding:2px 0; }
  .pf-group-form .tbl td:not(:first-child) { color:var(--text-muted); font-size:12px; }
}
.pf-modal .field-hint { margin:0; font:400 12px/1.5 var(--font); color:var(--text-muted); }
.pf-modal .checkbox-row { position:relative; display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font:500 13px/1.5 var(--font); user-select:none; min-width:0; overflow-wrap:anywhere; }
.pf-modal .checkbox-row input { position:absolute; opacity:0; pointer-events:none; }
.pf-modal .checkbox-box { width:18px; height:18px; box-sizing:border-box; border:1.5px solid var(--border-strong); border-radius:var(--radius-xs); background:var(--bg-card); display:grid; place-items:center; flex:none; }
.pf-modal .checkbox-box svg { width:11px; height:11px; color:var(--bg-card); opacity:0; }
.pf-modal .checkbox-row input:checked ~ .checkbox-box { background:var(--text); border-color:var(--text); }
.pf-modal .checkbox-row input:checked ~ .checkbox-box svg { opacity:1; }
.pf-modal [hidden] { display:none !important; }
.pf-modal .pf-group-form[aria-busy] .field, .pf-modal .pf-group-form[aria-busy] .pf-gcheck-list { pointer-events:none; }
@media (max-width:600px) {
  .pf-modal-head, .pf-modal-body { padding:16px; }
  .pf-groups-sec { padding:12px; }
  .pf-group-item { flex-wrap:wrap; }
  .pf-group-item-info { flex-basis:100%; }
  .pf-modal-tabs { overflow-x:auto; }
  .pf-modal-tab { white-space:nowrap; }
}

/* Таблица Никольского: группа услуг — одна колонка, по клику раскрывает свои продукты. */
.pf-group-toggle { display:inline-flex; align-items:center; gap:6px; max-width:280px; white-space:normal; text-align:left; padding:2px 4px; border:0; border-radius:var(--radius-xs); background:none; color:var(--accent); font:700 12px/1.4 var(--font); cursor:pointer; transition:background .12s; }
.pf-group-toggle:hover { background:var(--accent-line); }
.pf-group-toggle:focus-visible { outline:0; box-shadow:var(--focus-ring-accent); }
.pf-group-toggle__chev { display:inline-block; color:var(--accent); transition:transform .14s; }
.pf-group-toggle[aria-expanded="true"] .pf-group-toggle__chev { transform:rotate(90deg); }
.pf-group-toggle__count { padding:0 6px; border-radius:var(--radius-xs); background:var(--bg-card); color:var(--text-muted); font-weight:600; }
.pf-table th.pf-prod-header--group { border-left:2px solid var(--accent-line); }
/* !important — как у .pf-prod-header в рендере таблицы: иначе фон заголовка не перекрыть. */
.pf-table th.pf-prod-header--child { background:var(--bg-card)!important; color:var(--text-muted); font-weight:500; }
.pf-table td.pf-group-cell { font-weight:600; }

/* >>> ClientFlow 2.0 (cf2) — генерируется из прототипа, правки через cf2-extra >>> */
/* ═══════════════════════════════════════════════════════════════════════════
   ClientFlow 2.0 — приложение /client-flow-2 (корень .cf2)
   Перенесено из прототипа (docs/tz/clientflow-2-integration-plan.md, Ф4).
   Все правила изолированы под .cf2: core.css и общие классы (.btn, .tag, .modal)
   сюда не протекают, а стили приложения не трогают другие страницы.
   Цвета — только токены дизайн-системы: имена прототипа ниже — алиасы.
   ═══════════════════════════════════════════════════════════════════════════ */
.cf2 {
  --seg: var(--divider);
  --text-2: var(--text); --text-3: var(--text-muted);
  --muted: var(--text-muted); --light: var(--text-light);
  --accent-dark: var(--accent-hover);
  --info-dark: var(--info); --success-dark: var(--success); --warning-dark: var(--warning);
  --danger-dark: var(--danger); --tip-dark: var(--tip); --vip: var(--warning);
  --r-lg: var(--radius-lg); --r: var(--radius); --r-sm: var(--radius-sm); --r-xs: var(--radius-xs);
  --cf2-top: 60px;
  color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45;
}
@media (max-width: 760px) { .cf2 { --cf2-top: 52px; } }
/* Продукт Salistica светлый: прототип повторяет его палитру, без тёмной темы. */
.cf2 * { box-sizing: border-box; }
.cf2 { background: var(--bg-app); color-scheme: light; }
.cf2 :where(input, select, textarea) { background-color: var(--bg-card); color: var(--text); color-scheme: light; }
.cf2 :where(option, optgroup) { background-color: var(--bg-card); color: var(--text); }
.cf2 { color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.cf2 button, .cf2 input, .cf2 select, .cf2 textarea { font: inherit; color: inherit; }
.cf2 button { cursor: pointer; }
.cf2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf2 .num { font-variant-numeric: tabular-nums; }
/* Каркас */
.cf2 .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: calc(100vh - var(--cf2-top)); }
.cf2 .search { display: flex; align-items: center; gap: 8px; width: 280px; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--hover); color: var(--muted); }
.cf2 .search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 13px; }
.cf2 .iconbtn { width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); color: var(--muted); display: grid; place-items: center; }
.cf2 .side { background: var(--bg-card); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: var(--cf2-top); height: calc(100vh - var(--cf2-top)); overflow-y: auto; }
.cf2 .shiftcard { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--hover); }
.cf2 .shiftcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cf2 .shiftcard__st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.cf2 .shiftcard__st--on { color: var(--success-dark); }
.cf2 .shiftcard__st--off { color: var(--muted); }
.cf2 .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.cf2 .dot--on { background: var(--success); }
.cf2 .dot--off { background: var(--light); }
.cf2 .shiftcard__name { font-size: 14px; font-weight: 600; }
.cf2 .shiftcard__note { font-size: 12px; color: var(--muted); }
.cf2 .bar { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.cf2 .bar > i { display: block; height: 100%; background: var(--success); border-radius: 4px; }
.cf2 .bar--acc > i { background: var(--accent); }
.cf2 .bar--info > i { background: var(--info); }
.cf2 .reps { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.cf2 .rep { display: flex; align-items: center; gap: 8px; padding: 3px 0; border: 0; background: none; text-align: left; color: var(--text-3); }
.cf2 .rep--done { color: var(--success-dark); font-weight: 500; }
.cf2 .rep:hover { color: var(--accent); }
.cf2 .rep--done:hover { color: var(--success-dark); text-decoration: underline; }
.cf2 .create { display: flex; flex-direction: column; gap: 6px; }
.cf2 .navg { display: flex; flex-direction: column; gap: 1px; }
.cf2 .navt { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 6px; }
.cf2 .navi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); border: 0; background: none; color: var(--text); font-size: 13.5px; font-weight: 500; text-align: left; width: 100%; }
.cf2 .navi:hover { background: var(--hover); }
.cf2 .navi svg { color: var(--muted); flex: none; }
.cf2 .navi.is-on { background: var(--text); color: var(--bg-card); }
.cf2 .navi.is-on svg { color: var(--bg-card); }
.cf2 .navi--sub { padding: 6px 10px 6px 36px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.cf2 .navi span:first-of-type { flex: 1; }
.cf2 .cnt { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-xs); background: var(--bg-app); color: var(--muted); }
.cf2 .navi.is-on .cnt { background: rgba(255,255,255,.18); color: var(--bg-card); }
.cf2 .cnt--warn { background: var(--warning-soft); color: var(--warning-dark); }
.cf2 .cnt--bad { background: var(--danger-soft); color: var(--danger); }
.cf2 .side__foot { margin-top: auto; }
.cf2 .body { display: grid; grid-template-columns: minmax(0, 1fr) 408px; min-width: 0; }
.cf2 .body--wide { grid-template-columns: minmax(0, 1fr); }
.cf2 .main { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cf2 .panel { background: var(--bg-card); border-left: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--cf2-top); height: calc(100vh - var(--cf2-top)); overflow-y: auto; }
/* Кнопки и мелочи */
.cf2 .btn { text-transform: none; letter-spacing: normal; transition: background .12s, border-color .12s, color .12s; width: auto; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.cf2 .btn:hover { background: var(--hover); }
.cf2 .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--bg-card); font-weight: 600; }
.cf2 .btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.cf2 .btn--soft { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); font-weight: 600; }
.cf2 .btn--soft:hover { background: var(--accent-line); }
.cf2 .btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.cf2 .btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }
.cf2 .btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.cf2 .btn--ghost:hover { background: var(--hover); color: var(--text); }
.cf2 .btn--block { width: 100%; }
.cf2 .btn--link { border: 0; background: none; padding: 0; height: auto; color: var(--accent); font-weight: 500; font-size: 12.5px; align-self: flex-start; }
.cf2 .btn--link:hover { text-decoration: underline; }
.cf2 .kbd { font-size: 10.5px; font-weight: 600; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: var(--r-xs); color: var(--muted); line-height: 1.3; }
.cf2 .btn--primary .kbd { border-color: rgba(255,255,255,.55); color: var(--bg-card); }
.cf2 .icons { display: flex; align-items: center; gap: 4px; }
.cf2 .ib { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-3); display: grid; place-items: center; padding: 0; flex: none; }
.cf2 .ib:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); }
.cf2 .ib--plain { border-color: transparent; background: transparent; color: var(--muted); }
.cf2 .ib--plain:hover { border-color: transparent; background: var(--divider); color: var(--text); }
.cf2 .tag { display: inline-block; gap: normal; border: 0; background: transparent; color: inherit; transition: none; align-items: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-xs); white-space: nowrap; }
.cf2 .tag--tip { background: var(--tip-soft); color: var(--tip-dark); }
.cf2 .tag--warn { background: var(--warning-soft); color: var(--warning-dark); }
.cf2 .tag--bad { background: var(--danger-soft); color: var(--danger-dark); }
.cf2 .tag--info { background: var(--info-soft); color: var(--info-dark); }
.cf2 .tag--ok { background: var(--success-soft); color: var(--success-dark); }
.cf2 .tag--vip { background: var(--warning-soft); color: var(--vip); }
.cf2 .tag--plain { background: var(--divider); color: var(--text-3); }
.cf2 .tag--acc { background: var(--accent-soft); color: var(--accent-dark); }
.cf2 .plabel { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cf2 .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
/* Шапка страницы */
.cf2 .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cf2 .head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cf2 .head__date { font-size: 13.5px; color: var(--muted); }
.cf2 .head__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf2 .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--seg); border-radius: var(--r-sm); }
.cf2 .seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-xs); background: transparent; font-size: 13px; font-weight: 500; color: var(--text-3); }
.cf2 .seg button.is-on { background: var(--bg-card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.cf2 .seg button span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.cf2 .chipbtn { height: 30px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.cf2 .chipbtn:hover { border-color: var(--light); }
.cf2 .chipbtn span.n { color: var(--muted); }
.cf2 .chipbtn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.cf2 .chipbtn.is-on span.n { color: var(--accent-dark); }
.cf2 .chipbtn--bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-dark); font-weight: 600; }
.cf2 .chipbtn--bad.is-on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-dark); box-shadow: 0 0 0 2px var(--danger-line); }
.cf2 .pr { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.cf2 .pr--1 { background: var(--danger); }
.cf2 .pr--2 { background: var(--warning); }
.cf2 .pr--3 { background: var(--light); }
.cf2 .pr--ok { background: var(--success); }
.cf2 .pr--info { background: var(--info); }
.cf2 .pr--fin { background: var(--light); }
.cf2 .auds { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf2 .auds__l { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cf2 .auds .btn--link { align-self: center; margin-left: 4px; }
.cf2 .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cf2 .tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cf2 .tile__l { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cf2 .tile__v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cf2 .tile__v b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cf2 .tile__v span { font-size: 13px; color: var(--muted); }
.cf2 .banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--warning-soft); border: 1px solid var(--warning-line); font-size: 13.5px; color: var(--text); }
.cf2 .banner span { flex: 1; }
/* Список дня */
.cf2 .list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cf2 .lh { display: flex; justify-content: space-between; padding: 9px 16px; background: var(--hover); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cf2 .list > .lh:first-child { border-top: 0; }
.cf2 .lh--btn { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }
.cf2 .lh--btn span:last-child { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--accent); }
.cf2 .row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--divider); cursor: pointer; position: relative; }
.cf2 .lh + .row, .cf2 .lh + .trow, .cf2 .lh + .crow { border-top: 0; }
/* Раскрытый заголовок-кнопка без нижней границы («Сообщения · ждут ответа»): первой строке своя линия. */
.cf2 .lh--btn[aria-expanded="true"] + .row { border-top: 1px solid var(--border); }
.cf2 .row:hover { background: var(--hover); }
.cf2 .row.is-sel { background: var(--accent-soft); }
.cf2 .row__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cf2 .row__l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf2 .row__name { font-size: 14px; font-weight: 600; }
.cf2 .row__why { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf2 .trow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--divider); cursor: pointer; position: relative; }
.cf2 .trow:hover { background: var(--hover); }
.cf2 .trow.is-sel { background: var(--accent-soft); }
.cf2 .trow--static { cursor: default; }
.cf2 .trow--static:hover { background: none; }
.cf2 .trow__t { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf2 .crow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.cf2 .crow__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cf2 .crow__t { font-size: 14px; font-weight: 500; }
.cf2 .crow__m { font-size: 12.5px; color: var(--muted); }
.cf2 .chk { width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: var(--r-xs); background: var(--bg-card); display: grid; place-items: center; flex: none; padding: 0; color: var(--bg-card); }
.cf2 .chk:hover { border-color: var(--success); }
.cf2 .menu { position: absolute; right: 16px; top: 46px; z-index: 5; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; }
.cf2 .menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-xs); font-size: 13px; }
.cf2 .menu button:hover { background: var(--hover); }
.cf2 .menu button.danger { color: var(--danger-dark); }
.cf2 .morebtn { border: 0; border-top: 1px solid var(--divider); background: var(--bg-card); padding: 10px 16px; text-align: left; font-size: 13px; font-weight: 500; color: var(--accent); width: 100%; }
.cf2 .donerow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-3); }
.cf2 .donerow b { font-weight: 500; color: var(--text); }
.cf2 .empty-inline { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
/* Панель задачи */
.cf2 .ph { display: flex; gap: 12px; align-items: flex-start; }
.cf2 .ph__main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cf2 .ph__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cf2 .ph__phone { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cf2 .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cf2 .goal { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13.5px; }
.cf2 .goal b { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark); }
.cf2 .goal__src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: 6px; border-top: 1px dashed var(--accent-line); margin-top: 4px; }
.cf2 .dl { margin: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.cf2 .dl dt { color: var(--muted); }
.cf2 .dl dd { margin: 0; font-weight: 500; }
.cf2 .slots { display: flex; gap: 6px; flex-wrap: wrap; }
.cf2 .hints { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.cf2 .ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cf2 .ctile { height: 58px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-3); padding: 0; }
.cf2 .ctile:hover { border-color: var(--light); }
.cf2 .ctile.is-on { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.cf2 .ctile--wa svg { color: var(--success); }
.cf2 .ctile--tg svg { color: var(--info); }
.cf2 .ctile--max svg { color: var(--tip); }
.cf2 .ctile--call svg { color: var(--accent); }
.cf2 .compose-box { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--hover); }
.cf2 .compose-box textarea { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 9px 12px; background: var(--bg-card); font-size: 13.5px; line-height: 1.5; }
.cf2 .compose-box select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; background: var(--bg-card); font-size: 13px; }
.cf2 .seg--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf2 .sendrow { display: flex; gap: 8px; align-items: center; }
.cf2 .sendrow .btn--primary { flex: 1; min-width: 0; }
.cf2 .ib--lg { width: 36px; height: 36px; }
.cf2 .match { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-dark); }
.cf2 .match .pr { background: var(--success); }
.cf2 .wl-note { font-size: 12.5px; color: var(--muted); }
.cf2 .callnum { font-size: 20px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cf2 .outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cf2 .out { height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.cf2 .out:hover { border-color: var(--light); }
.cf2 .out--wide { grid-column: 1 / -1; }
.cf2 .out--bad { color: var(--danger-dark); }
.cf2 .out.is-on { border: 2px solid var(--success); background: var(--success-soft); color: var(--success-dark); font-weight: 600; padding: 0 11px; }
.cf2 .out.is-on.out--bad { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-dark); }
.cf2 .out.is-on.out--warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-dark); }
.cf2 .presets { display: flex; gap: 6px; flex-wrap: wrap; }
.cf2 .field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.cf2 .field input, .cf2 .field select, .cf2 .field textarea { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 9px 12px; font-size: 13.5px; color: var(--text); background: var(--bg-card); font-weight: 400; }
.cf2 .field input, .cf2 .field select { height: 40px; padding-block: 0; }
.cf2 .field textarea { resize: vertical; min-height: 64px; }
.cf2 .field small { font-weight: 400; color: var(--muted); font-size: 12px; }
.cf2 .check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.cf2 .check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.cf2 .finish { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cf2 .src { font-size: 12px; color: var(--muted); line-height: 1.45; }
.cf2 .panel-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--muted); padding: 40px 12px; }
.cf2 .panel-empty b { color: var(--text); font-size: 16px; }
/* Переписка */
.cf2 .thread { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-app); border-radius: var(--r-sm); }
.cf2 .bub { max-width: 85%; padding: 9px 12px; border-radius: var(--r); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.cf2 .bub small { font-size: 11px; color: var(--muted); }
.cf2 .bub--out { background: var(--bg-card); border: 1px solid var(--border); align-self: flex-end; }
.cf2 .bub--in { background: var(--success-soft); border: 1px solid var(--success-line); align-self: flex-start; }
.cf2 .bub__tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cf2 .compose { display: flex; gap: 8px; }
.cf2 .compose input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 12px; font-size: 13px; }
.cf2 .opts { display: flex; flex-direction: column; gap: 6px; }
/* Умное расписание */
.cf2 .sched-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cf2 .datenav { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px; }
.cf2 .datenav b { font-size: 13.5px; padding: 0 10px; font-weight: 600; }
.cf2 .datenav .ib { border: 0; width: 28px; height: 28px; }
.cf2 .sfilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf2 .sfilters select { height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; background: var(--bg-card); font-size: 12.5px; }
.cf2 .grid-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cf2 .grid-scroll { overflow-x: auto; }
.cf2 .ghead { display: grid; grid-template-columns: 52px repeat(4, minmax(150px, 1fr)); border-bottom: 1px solid var(--border); min-width: 660px; }
.cf2 .ghead > div { padding: 10px 12px; border-left: 1px solid var(--divider); display: flex; flex-direction: column; gap: 6px; }
.cf2 .ghead > div:first-child { border-left: 0; }
.cf2 .ghead b { font-size: 13.5px; }
.cf2 .ghead small { font-size: 11.5px; color: var(--muted); }
.cf2 .gload { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf2 .gload .bar { flex: 1; }
.cf2 .gbody { display: grid; grid-template-columns: 52px repeat(4, minmax(150px, 1fr)); position: relative; min-width: 660px; padding-block: 10px; }
.cf2 .gtimes { position: relative; }
.cf2 .gtimes span { position: absolute; left: 0; right: 8px; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; transform: translateY(-7px); }
.cf2 .gcol { position: relative; border-left: 1px solid var(--divider); }
.cf2 .gline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--divider); }
.cf2 .now { position: absolute; left: 52px; right: 0; border-top: 2px solid var(--accent); z-index: 3; pointer-events: none; }
.cf2 .now span { position: absolute; left: -50px; top: -10px; background: var(--accent); color: var(--bg-card); font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-xs); font-variant-numeric: tabular-nums; }
.cf2 .appt { position: absolute; left: 4px; right: 4px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-card); padding: 5px 8px; text-align: left; display: flex; flex-direction: column; gap: 1px; overflow: hidden; font-size: 12px; line-height: 1.3; }
.cf2 .appt b { font-size: 12.5px; }
.cf2 .appt__t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf2 .appt__s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf2 .appt__hint { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--bg-card); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
/* Цвет записи (30.09, как в журнале YClients): зелёная — запись в силе, красная — отмена или не пришёл.
   Статус — значком .appt__st (часы / галочка / две галочки), онлайн-запись — синяя рамка .is-online. */
.cf2 .appt--finished, .cf2 .appt--in, .cf2 .appt--confirmed, .cf2 .appt--waiting { background: var(--success-soft); border-color: var(--success-line); }
.cf2 .appt--noshow { background: var(--danger-soft); border-color: var(--danger-line); }
.cf2 .appt.is-online { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.cf2 .appt.is-sel { box-shadow: 0 0 0 2px var(--accent); z-index: 2; }
.cf2 .appt.is-online.is-sel { box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px var(--info); }
.cf2 .appt__st { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 4px; color: var(--success); }
.cf2 .appt--noshow .appt__st { color: var(--danger); }
/* Перерыв мастера из графика YClients — штриховка в колонке, записи поверх */
.cf2 .gcol .gbreak { position: absolute; left: 4px; right: 4px; top: var(--y, 0px); height: var(--h, 20px); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: repeating-linear-gradient(135deg, var(--divider) 0 6px, var(--hover) 6px 12px); color: var(--muted); font-size: 11px; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cf2 .gbreak-key { display: inline-block; width: 14px; height: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-xs); background: repeating-linear-gradient(135deg, var(--divider) 0 3px, var(--hover) 3px 6px); }
.cf2 .sw { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--border); border-radius: var(--r-xs); }
.cf2 .sw--bad { background: var(--danger-soft); border-color: var(--danger-line); }
.cf2 .sw--online { background: var(--success-soft); border: 1.5px solid var(--info); }
/* «В кассе / на сумму записей» — над занятостью мастера и итогом дня над записями */
.cf2 .gmoney { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf2 .sched-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.cf2 .sched-sum b { font-size: 14px; color: var(--text); font-weight: 600; }
.cf2 .appt.is-dim { opacity: .3; }
.cf2 .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--border); align-items: center; }
.cf2 .legend span { display: inline-flex; align-items: center; gap: 6px; }
.cf2 .legend .f { margin-left: auto; }
.cf2 .todo { display: flex; flex-direction: column; gap: 4px; }
.cf2 .todo__i { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); text-align: left; font-size: 13px; width: 100%; }
.cf2 .todo__i:hover { border-color: var(--light); }
.cf2 .todo__i.is-done { background: var(--success-soft); border-color: var(--success-line); color: var(--success-dark); }
.cf2 .todo__i.is-done .chk { background: var(--success); border-color: var(--success); }
.cf2 .todo__i small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cf2 .todo__sub { padding: 4px 10px 8px 42px; display: flex; flex-direction: column; gap: 6px; }
/* Мои KPI */
.cf2 .kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cf2 .khero { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cf2 .khero__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cf2 .khero__sum { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cf2 .khero__sub { font-size: 13px; color: var(--muted); }
.cf2 .khero__fc { text-align: right; font-size: 13px; color: var(--text-2); }
.cf2 .khero__fc b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.cf2 .stack { display: flex; height: 10px; border-radius: var(--r-xs); overflow: hidden; background: var(--divider); gap: 2px; }
.cf2 .stack i { display: block; height: 100%; }
.cf2 .leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.cf2 .leg span { display: inline-flex; gap: 6px; align-items: center; }
.cf2 .leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cf2 .leg b { font-variant-numeric: tabular-nums; }
.cf2 .opps { display: flex; flex-direction: column; gap: 6px; }
.cf2 .opp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; }
.cf2 .opp b { color: var(--success-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf2 .kcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cf2 .kcard__h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cf2 .kcard__h h3 { margin: 0; font-size: 15px; }
.cf2 .kcard__v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf2 .kcard__v b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf2 .kcard__v span { font-size: 13px; color: var(--muted); }
.cf2 .kcard__pay { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf2 .kcard__pay--zero { color: var(--muted); text-decoration: line-through; }
.cf2 .tier { position: relative; height: 40px; margin: 0 8px; }
.cf2 .tier__track { position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--divider); }
.cf2 .tier__fill { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--accent); }
.cf2 .tier__mark { position: absolute; top: 4px; width: 2px; height: 14px; background: var(--border-strong); }
.cf2 .tier__mark--on { background: var(--accent); }
.cf2 .tier__lbl { position: absolute; top: 22px; font-size: 10.5px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf2 .gate { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; }
.cf2 .gate--ok { background: var(--success-soft); color: var(--success-dark); }
.cf2 .gate--no { background: var(--danger-soft); color: var(--danger-dark); }
.cf2 .ktbl-wrap { overflow-x: auto; }
.cf2 .ktbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.cf2 .ktbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--hover); white-space: nowrap; }
.cf2 .ktbl td { padding: 10px; border-top: 1px solid var(--divider); vertical-align: top; }
.cf2 .ktbl td.n, .cf2 .ktbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf2 .ktbl tfoot td { font-weight: 700; border-top: 1px solid var(--border); background: var(--hover); }
.cf2 .ktbl .neg { color: var(--danger-dark); }
.cf2 .ktbl .pos { color: var(--success-dark); }
.cf2 .ktbl small { display: block; color: var(--muted); font-size: 12px; }
.cf2 .rule-text { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.cf2 .rule-text h4 { margin: 0 0 4px; font-size: 14px; }
.cf2 .rule-text p { margin: 0; color: var(--text-2); }
.cf2 .rule-text ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
/* Аудитории и списки */
.cf2 .ed { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; }
.cf2 .ed__sec { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--divider); }
.cf2 .ed__sec:first-child { border-top: 0; }
.cf2 .ed__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cf2 .ed__h h3 { margin: 0; font-size: 16px; }
.cf2 .ed__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cf2 .ed__row > input[type=text] { flex: 1; min-width: 220px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 12px; font-size: 14px; }
.cf2 .ed__name { flex: 1; min-width: 260px; }
.cf2 .ed__row--end { align-items: flex-end; }
.cf2 .ed__row--end > .check { height: 40px; }
.cf2 .tpl-chip small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.cf2 .thumb--ph { display: grid; place-items: center; background: var(--hover); color: var(--light); }
.cf2 .kv small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.cf2 .kv .neg { color: var(--danger-dark); }
.cf2 .kv .pos { color: var(--success-dark); }
.cf2 .kv b.neg, .cf2 .kv b.pos, .cf2 .kv--num b { white-space: nowrap; }
.cf2 .sh-date { white-space: nowrap; }
.cf2 .sh-note { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.cf2 .sh-note span { font-size: 12px; color: var(--muted); }
.cf2 .sh-note p { margin: 0; color: var(--text-2); }
.cf2 .sh-log { display: flex; flex-direction: column; font-size: 12.5px; }
.cf2 .sh-log > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--divider); }
.cf2 .sh-log > div:first-child { border-top: 0; padding-top: 0; }
.cf2 .sh-log span { color: var(--text-2); }
.cf2 .sh-log small { color: var(--muted); }
.cf2 .sh-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.cf2 .sh-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cf2 .kv .sh-tags { justify-content: flex-end; }
.cf2 .ktbl tr.cm-day td { background: var(--hover); font-size: 12px; font-weight: 700; color: var(--text-3); padding: 6px 10px; }
.cf2 .cm-det { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cf2 .cm-det > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf2 .cm-det p { margin: 0; }
.cf2 .ktbl small.cm-ph { white-space: nowrap; }
.cf2 .funnel { display: flex; flex-direction: column; gap: 8px; }
.cf2 .funnel__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: 13px; }
.cf2 .funnel__bar { height: 22px; border-radius: var(--r-xs); background: var(--divider); overflow: hidden; }
.cf2 .funnel__bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-xs); }
.cf2 .funnel__row b { font-variant-numeric: tabular-nums; }
.cf2 .funnel__row small { color: var(--muted); font-size: 12px; }
.cf2 .delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf2 .delta--up { color: var(--success-dark); }
.cf2 .delta--down { color: var(--danger-dark); }
.cf2 .delta--flat { color: var(--muted); }
.cf2 .dchart { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 8px; border-bottom: 1px solid var(--border); }
.cf2 .dchart__c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.cf2 .dchart__t { width: 100%; max-width: 26px; background: var(--border); border-radius: var(--r-xs) var(--r-xs) 0 0; position: relative; }
.cf2 .dchart__d { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.cf2 .dchart__b { font-size: 10.5px; font-weight: 700; color: var(--success-dark); margin-bottom: 2px; }
.cf2 .dchart__c.is-today .dchart__t { outline: 2px solid var(--accent-line); }
.cf2 .dlabels { display: flex; gap: 4px; }
.cf2 .dlabels span { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; color: var(--muted); }
.cf2 .seg--wrap { flex-wrap: wrap; align-self: flex-start; }
.cf2 .set-list { display: flex; flex-direction: column; gap: 6px; }
.cf2 .set-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.cf2 .set-item input[type=text] { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 13.5px; min-width: 0; }
.cf2 .set-std { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
/* Колонка крестика — ширина .ib: у строки «Записать на следующий визит» крестика нет, с auto её колонки съезжали. */
.cf2 .set-std input, .cf2 .set-std select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 13px; min-width: 0; }
.cf2 .chipx { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 12.5px; }
.cf2 .chipx .ib { width: 24px; height: 24px; }
.cf2 .wdays { display: flex; gap: 4px; flex-wrap: wrap; }
.cf2 .wdays button { width: 36px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); font-size: 12.5px; font-weight: 500; }
.cf2 .wdays button.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.cf2 .tplrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--divider); }
.cf2 .tplrow:first-of-type { border-top: 0; }
.cf2 .tplrow p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.cf2 .tokens { display: flex; gap: 6px; flex-wrap: wrap; }
.cf2 .grid2--end { align-items: end; }
.cf2 .vh { display: flex; flex-direction: column; gap: 8px; }
.cf2 .vh__i { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cf2 .vh__i b { font-weight: 600; }
.cf2 .vh__c { padding: 6px 10px; border-radius: var(--r-xs); background: var(--warning-soft); border: 1px solid var(--warning-line); color: var(--text-2); font-size: 12.5px; }
.cf2 .vh__c small { display: block; color: var(--warning-dark); font-size: 11px; font-weight: 600; }
.cf2 .dg-time { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.cf2 .dg-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--bg-card); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.cf2 .yc-cats { display: flex; flex-direction: column; gap: 6px; }
.cf2 .yc-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.cf2 .yc-cat .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.cf2 .sfilters input.ch-search[type=search] { flex: 1 1 180px; min-width: 0; }
.cf2 .ch-pick { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.cf2 .ch-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.cf2 .ch-add input, .cf2 .ch-add select { height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 13.5px; background: var(--bg-card); min-width: 0; }
.cf2 .ch-items { display: flex; flex-direction: column; gap: 2px; }
.cf2 .ch-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text); }
.cf2 .ch-item input { width: 16px; height: 16px; margin: 0; accent-color: var(--success); flex: none; }
.cf2 .ch-item span { flex: 1; min-width: 0; }
.cf2 .ch-item.is-done span { color: var(--muted); text-decoration: line-through; }
.cf2 .ch-take { flex: none; }
.cf2 .row .chk { margin-right: 2px; }
.cf2 .order-note { padding: 8px 12px; border-radius: var(--r-sm); background: var(--hover); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.cf2 .pick { position: relative; display: flex; flex-direction: column; }
.cf2 .pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.cf2 .pick__opt { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-xs); text-align: left; font-size: 13.5px; color: var(--text); }
.cf2 .pick__opt:hover, .cf2 .pick__opt:focus-visible { background: var(--hover); }
.cf2 .pick__opt small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cf2 .pick__none { padding: 10px; font-size: 12.5px; color: var(--muted); }
.cf2 .li-addrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.cf2 .li-addrow input { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 13.5px; min-width: 0; }
.cf2 .cm-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.cf2 .sfilters input[type=search] { height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 12.5px; min-width: 200px; }
/* Период «Статистики» и «Коммуникаций» — общий датапикер дашборда (.dr, dashboard-filter.css):
   по высоте как списки фильтров; попап не шире экрана, не влез справа — прижат к правому краю кнопки (is-right) */
.cf2 .sfilters .dr__trigger { height: 30px; }
.cf2 .dr__popover { max-width: calc(100vw - 24px); }
.cf2 .dr__popover.is-right { left: auto; right: 0; }
/* .cf2 button { font: inherit; color: inherit } перебивает кнопки датапикера — шрифт и цвет как на дашборде */
.cf2 .dr__trigger { font: 500 12.5px var(--font); color: var(--fb-text); }
.cf2 .dr__preset, .cf2 .dr__day, .cf2 .dr__btn-secondary, .cf2 .dr__btn-primary { font: 500 12.5px var(--font); }
.cf2 .dr__preset, .cf2 .dr__nav-btn { color: var(--fb-muted); }
.cf2 .dr__preset:hover, .cf2 .dr__day, .cf2 .dr__btn-secondary { color: var(--fb-text); }
.cf2 .dr__day.is-other-month, .cf2 .dr__day[disabled] { color: var(--fb-light); }
.cf2 .dr__day.is-today { font-weight: 700; }
.cf2 .dr__preset.is-active, .cf2 .dr__day.is-range-start, .cf2 .dr__day.is-range-end, .cf2 .dr__btn-primary { color: var(--bg-card); }
.cf2 .cond { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.cf2 .cond select, .cf2 .cond input { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 13px; min-width: 0; width: 100%; }
.cf2 .cond__val { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.cf2 .cond__val input { flex: 1; }
.cf2 .cond__hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: -2px; }
.cf2 .join { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cf2 .grp { border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--hover); }
.cf2 .ed__count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf2 .ed__count b { font-size: 24px; font-variant-numeric: tabular-nums; }
.cf2 .ed__sum { font-size: 12.5px; color: var(--muted); }
.cf2 .ed__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cf2 .ed__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cf2 .bulk { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--text); color: var(--bg-card); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); z-index: 4; }
.cf2 .bulk b { margin-right: 6px; }
.cf2 .bulk .btn { background: transparent; color: var(--bg-card); border-color: rgba(255,255,255,.3); height: 30px; font-size: 12.5px; }
.cf2 .bulk .btn:hover { background: rgba(255,255,255,.1); }
.cf2 .bulk .btn:disabled { opacity: .45; cursor: default; background: transparent; }
.cf2 .lists-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.cf2 .li-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: var(--r-sm); text-align: left; font-size: 13.5px; }
.cf2 .li-item:hover { background: var(--hover); }
.cf2 .li-item.is-on { background: var(--accent-soft); font-weight: 600; }
.cf2 .li-item span.f { flex: 1; min-width: 0; }
.cf2 .pager { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--divider); font-size: 12.5px; color: var(--muted); }
.cf2 .note-in { height: 30px; border: 1px solid transparent; border-radius: var(--r-xs); padding: 0 8px; width: 100%; min-width: 120px; font-size: 12.5px; background: transparent; }
.cf2 .note-in:hover, .cf2 .note-in:focus { border-color: var(--border-strong); background: var(--bg-card); }
.cf2 .ktbl td input[type=checkbox], .cf2 .ktbl th input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
/* Абонементы */
.cf2 .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf2 .attn { display: flex; flex-direction: column; gap: 6px; }
.cf2 .attn__i { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; }
.cf2 .attn__i b { font-size: 18px; font-variant-numeric: tabular-nums; text-align: center; }
.cf2 .attn__i small { display: block; color: var(--muted); font-size: 12px; }
.cf2 .bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 8px; }
.cf2 .bars i { flex: 1; background: var(--divider); border-radius: 3px 3px 0 0; min-height: 3px; }
.cf2 .bars i.on { background: var(--accent); }
.cf2 .prog { display: flex; align-items: center; gap: 8px; min-width: 120px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cf2 .prog .bar { flex: 1; }
.cf2 .abrow { cursor: pointer; }
.cf2 .abrow:hover td { background: var(--hover); }
.cf2 .abrow.is-open td { background: var(--accent-soft); }
.cf2 .abdet td { background: var(--hover); }
.cf2 .link-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-card); }
.cf2 .link-card__st { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.cf2 .link-card__st--ok { background: var(--success-soft); color: var(--success-dark); }
.cf2 .link-card__st--warn { background: var(--warning-soft); color: var(--warning-dark); }
.cf2 .link-card__st--info { background: var(--info-soft); color: var(--info-dark); }
.cf2 .link-card h4 { margin: 0 0 4px; font-size: 14px; }
.cf2 .link-card p { margin: 0; font-size: 13px; color: var(--text-2); }
.cf2 .link-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.cf2 .steps { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.cf2 .steps span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-xs); background: var(--divider); color: var(--text-3); }
.cf2 .steps span.run { background: var(--warning-soft); color: var(--warning-dark); }
.cf2 .steps span.done { background: var(--success-soft); color: var(--success-dark); }
/* Отчёты */
.cf2 .rp { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cf2 .rp__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cf2 .rp__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--cf2-top) + 20px); }
.cf2 .rcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cf2 .rcard__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cf2 .rcard__h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.cf2 .rcard__h p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.cf2 .auto { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-xs); background: var(--info-soft); color: var(--info-dark); white-space: nowrap; }
.cf2 .auto--hand { background: var(--accent-soft); color: var(--accent-dark); }
.cf2 .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf2 .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cf2 .readonly { min-height: 40px; border-radius: var(--r-sm); background: var(--hover); border: 1px dashed var(--border-strong); display: flex; align-items: center; padding: 0 12px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.cf2 .kv { display: flex; flex-direction: column; }
.cf2 .kv > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); font-size: 13.5px; }
.cf2 .kv > div:first-child { border-top: 0; }
.cf2 .kv span { color: var(--text-2); }
.cf2 .kv b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.cf2 .kv .tot { font-weight: 700; color: var(--text); }
.cf2 .kv input { width: 140px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; }
.cf2 .diff { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cf2 .diff--ok { color: var(--success-dark); }
.cf2 .diff--bad { color: var(--danger-dark); }
.cf2 .stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cf2 .stat3 > div { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cf2 .stat3 b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cf2 .stat3 span { font-size: 12px; color: var(--muted); }
.cf2 .clist { display: flex; flex-direction: column; gap: 6px; }
.cf2 .citem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; flex-wrap: wrap; }
.cf2 .citem label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; min-width: 200px; }
.cf2 .citem input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--success); margin: 0; }
.cf2 .photo-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); font-size: 12px; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.cf2 .photo-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.cf2 .thumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf2 .thumb { width: 44px; height: 44px; border-radius: var(--r-xs); object-fit: cover; border: 1px solid var(--border); }
.cf2 .exp { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto auto; gap: 8px; align-items: center; }
.cf2 .exp select, .cf2 .exp input { height: 34px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 10px; background: var(--bg-card); font-size: 13px; }
.cf2 .exp input { text-align: right; }
.cf2 .side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cf2 .side-card h4 { margin: 0; font-size: 14px; }
/* Старт и конец смены */
.cf2 .hero { padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cf2 .hero__l { padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--border); }
.cf2 .hero__r { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; background: var(--hover); }
.cf2 .hero h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.cf2 .hero p { margin: 0; font-size: 14px; color: var(--text-3); max-width: 460px; }
.cf2 .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cf2 .okline { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--success-soft); border: 1px solid var(--success-line); font-size: 13.5px; color: var(--text); }
.cf2 .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cf2 .mini div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.cf2 .mini b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf2 .mini span { font-size: 12.5px; color: var(--muted); }
.cf2 .ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: 13.5px; }
.cf2 .ul li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cf2 .ul li:last-child { border-bottom: 0; }
.cf2 .ul li span.f { flex: 1; }
.cf2 .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.cf2 .card span.f { flex: 1; color: var(--text-2); }
.cf2 .page-state { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cf2 .page-state h2 { margin: 0; font-size: 20px; }
.cf2 .page-state p { margin: 0; color: var(--muted); max-width: 480px; }
/* Модалки и уведомления */
.cf2 .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.cf2 .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: auto; z-index: auto; opacity: 1; transform: none; transition: none; width: 560px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.cf2 .modal--wide { width: 760px; }
.cf2 .modal__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.cf2 .modal__h h3 { margin: 0; font-size: 18px; font-weight: 700; }
.cf2 .modal__h p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cf2 .modal__b { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.cf2 .modal__f { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--divider); }
.cf2 .radiolist { display: flex; flex-direction: column; gap: 6px; }
.cf2 .radiolist label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; }
.cf2 .radiolist label.is-on { border-color: var(--accent); background: var(--accent-soft); }
.cf2 .radiolist input { accent-color: var(--accent); margin: 0; }
.cf2 .radiolist small { color: var(--muted); margin-left: auto; font-size: 12px; }
.cf2 .calc { padding: 12px 14px; border-radius: var(--r-sm); background: var(--hover); border: 1px solid var(--border); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.cf2 .calc div { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); }
.cf2 .calc b { color: var(--text); font-variant-numeric: tabular-nums; }
.cf2 .calc .big { font-size: 15px; color: var(--text); }
.cf2 .toasts { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.cf2 .toast { background: var(--text); color: var(--bg-card); padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; box-shadow: var(--shadow-lg); max-width: 400px; }
/* Мобильная версия: элементы, которых нет на широком экране */
.cf2 .h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cf2 .tabbar, .cf2 .scrim, .cf2 .side__m, .cf2 .sheet-bar, .cf2 .sc-view, .cf2 .agenda, .cf2 .qa-m { display: none; }
.cf2 .search--pager { width: 320px; }
.cf2 .search--grow { flex: 1; min-width: 240px; }
.cf2 .field--inline { flex-direction: row; align-items: center; gap: 8px; }
.cf2 .field.field--inline input { height: 32px; }
.cf2 .acts { display: flex; flex-direction: column; gap: 8px; }
.cf2 .act { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-card); text-align: left; width: 100%; }
.cf2 .act:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.cf2 .act > svg { flex: none; margin-top: 3px; color: var(--accent); }
.cf2 .act span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf2 .act b { font-size: 14.5px; }
.cf2 .act small { font-size: 12.5px; color: var(--muted); }
.cf2 .agenda { flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cf2 .ag { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 60px; padding: 10px 12px; border: 0; border-top: 1px solid var(--divider); background: none; text-align: left; width: 100%; box-shadow: inset 3px 0 0 var(--light); }
.cf2 .ag:first-child { border-top: 0; }
.cf2 .ag.is-sel { background: var(--accent-soft); }
.cf2 .ag--waiting, .cf2 .ag--confirmed, .cf2 .ag--in, .cf2 .ag--finished { box-shadow: inset 3px 0 0 var(--success); }
.cf2 .ag--noshow { box-shadow: inset 3px 0 0 var(--danger); }
.cf2 .ag.is-online { box-shadow: inset 3px 0 0 var(--success), inset 0 0 0 1px var(--info); }
.cf2 .ag--noshow.is-online { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px var(--info); }
.cf2 .ag__r .appt__st { margin-right: 0; }
.cf2 .ag-break { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--divider); background: repeating-linear-gradient(135deg, var(--hover) 0 6px, var(--bg-card) 6px 12px); color: var(--muted); }
.cf2 .ag-break .ag__m b { font-size: 13px; color: var(--text-3); }
.cf2 .ag__t { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf2 .ag__t small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cf2 .ag__m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf2 .ag__m b { font-size: 14px; }
.cf2 .ag__m small { font-size: 12px; color: var(--muted); }
.cf2 .ag__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cf2 .ag__r .appt__hint { position: static; }
.cf2 .ag-now { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.cf2 .ag-now::after { content: ''; flex: 1; border-top: 2px solid var(--accent); }
.cf2 .tab { text-transform: none; letter-spacing: normal; transition: color .12s; white-space: normal; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.cf2 .tab svg { width: 20px; height: 20px; }
.cf2 .tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf2 .tab.is-on { color: var(--accent); }
.cf2 .tab__n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--bg-card); font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.cf2 .tab__n--warn { background: var(--warning); }
@media (max-width: 1600px) {
  .cf2 .search { display: none; }
  .cf2 .search.search--in { display: flex; }
}
@media (max-width: 1180px) {
  .cf2 .side__m.side__m--foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; border-top: 1px solid var(--divider); }
  .cf2 .body { grid-template-columns: minmax(0, 1fr); }
  .cf2 .body > .panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; height: auto; z-index: 40; border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; --pp-t: 20px; --pp-x: 20px; --pp-b: calc(20px + env(safe-area-inset-bottom, 0px)); padding: var(--pp-t) var(--pp-x) var(--pp-b); }
  .cf2 .app.is-sheet .body > .panel { display: flex; }
  .cf2 .app.is-sheet .scrim { display: block; }
  .cf2 .scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 38; background: rgba(15,23,42,.45); }
  .cf2 .app.is-sheet .sheet-bar { display: flex; align-items: center; gap: 8px; position: -webkit-sticky; position: sticky; top: calc(-1 * var(--pp-t)); z-index: 4; margin: calc(-1 * var(--pp-t)) calc(-1 * var(--pp-x)) 0; padding: 6px 12px 6px 6px; min-height: 52px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
  .cf2 .sheet-bar b { font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cf2 .sheet-bar .btn { flex: none; }
  .cf2 .app.is-sheet .panel .finish { position: -webkit-sticky; position: sticky; bottom: calc(-1 * var(--pp-b)); z-index: 3; margin: 0 calc(-1 * var(--pp-x)); padding: 10px var(--pp-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border-top: 1px solid var(--border); }
  .cf2 .app.is-sheet .panel--chat .compose { position: -webkit-sticky; position: sticky; bottom: calc(-1 * var(--pp-b)); z-index: 3; margin: 0 calc(-1 * var(--pp-x)); padding: 10px var(--pp-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border-top: 1px solid var(--border); }
  html.cf2-has-sheet, html.cf2-has-sheet body { overflow: hidden; }
  .cf2 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf2 .rp { grid-template-columns: minmax(0, 1fr); }
  .cf2 .rp__side { position: static; }
}
@media (max-width: 820px) {
  .cf2 .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: 300px; max-width: 86vw; height: auto; border-right: 1px solid var(--border); padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow-lg); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .cf2 .app.is-drawer .side { transform: none; visibility: visible; }
  .cf2 .app.is-drawer .scrim { display: block; z-index: 44; }
  html.cf2-has-drawer, html.cf2-has-drawer body { overflow: hidden; }
  .cf2 .side__m { display: flex; align-items: center; gap: 8px; }
  .cf2 .side__foot { margin-top: 0; }
  .cf2 .navi { padding: 10px; }
  .cf2 .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(15,23,42,.05); }
  .cf2 .main { padding: 16px; }
  .cf2 .panel { padding: 16px; }
  .cf2 .body > .panel { width: 520px; --pp-t: 16px; --pp-x: 16px; --pp-b: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .kbd { display: none; }
  .cf2 .toasts { left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .cf2 .toast { max-width: 480px; width: 100%; }
  .cf2 .bulk { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .cf2 input, .cf2 select, .cf2 textarea { font-size: 16px !important; }
  .cf2 .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cf2 .seg::-webkit-scrollbar { display: none; }
  .cf2 .seg button { flex: none; }
  .cf2 .seg--wrap { overflow: visible; }
  .cf2 .auds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; -webkit-overflow-scrolling: touch; }
  .cf2 .auds::-webkit-scrollbar { display: none; }
  .cf2 .auds > * { flex: none; }
  .cf2 .head__right { width: 100%; }
  .cf2 .h1--dup { display: none; }
  .cf2 .banner { flex-wrap: wrap; }
  .cf2 .banner span { flex: 1 1 220px; }
  .cf2 .hero { grid-template-columns: minmax(0, 1fr); }
  .cf2 .hero__l { border-right: 0; border-bottom: 1px solid var(--border); padding: 20px; }
  .cf2 .hero__r { padding: 20px; }
  .cf2 .row { flex-wrap: wrap; }
  .cf2 .row__why { white-space: normal; }
  .cf2 .grid2, .cf2 .grid3, .cf2 .stat3, .cf2 .kgrid, .cf2 .ed__grid, .cf2 .lists-grid, .cf2 .tiles--3 { grid-template-columns: minmax(0, 1fr); }
  .cf2 .cond { grid-template-columns: minmax(0, 1fr); }
  .cf2 .exp { grid-template-columns: minmax(0, 1fr) 100px; }
  .cf2 .cm-det { grid-template-columns: minmax(0, 1fr); }
  .cf2 .funnel__row { grid-template-columns: minmax(0, 1fr) 110px; }
  .cf2 .funnel__row .funnel__bar { grid-column: 1 / -1; grid-row: 2; }
  .cf2 .set-std { grid-template-columns: minmax(0, 1fr); }
  .cf2 .li-addrow { grid-template-columns: minmax(0, 1fr); }
  .cf2 .ch-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .cf2 .ch-add input[type=text] { grid-column: 1 / -1; }
  .cf2 .sfilters input[type=search] { min-width: 0; flex: 1; }
}
/* Сенсорные экраны: цели нажатия не меньше 36–44 px */
@media (pointer: coarse) {
  .cf2 .btn { height: 40px; }
  .cf2 .btn--sm { height: 36px; }
  .cf2 .btn--lg { height: 48px; }
  .cf2 .ib, .cf2 .datenav .ib { width: 36px; height: 36px; }
  .cf2 .chipbtn { height: 36px; }
  .cf2 .seg button { height: 36px; }
  .cf2 .sfilters select, .cf2 .sfilters input[type=search], .cf2 .compose input { height: 40px; }
  .cf2 .sfilters .dr__trigger { height: 40px; }
  .cf2 .kbd { display: none; }
  .cf2 .chk { width: 26px; height: 26px; }
  .cf2 .check { min-height: 36px; }
  .cf2 .check input, .cf2 .ktbl td input[type=checkbox], .cf2 .ktbl th input[type=checkbox], .cf2 .citem input[type=checkbox] { width: 20px; height: 20px; }
  .cf2 .out { height: 44px; }
  .cf2 .menu button, .cf2 .pick__opt { padding: 12px; }
  .cf2 .wdays button { width: 40px; height: 40px; }
  .cf2 .field input, .cf2 .field select { height: 44px; }
}
/* Телефоны */
@media (max-width: 600px) {
  .cf2 .main { padding: 12px 12px 24px; gap: 12px; }
  .cf2 .panel { padding: 16px 14px; }
  .cf2 .body > .panel { width: 100%; border-left: 0; box-shadow: none; --pp-t: calc(16px + env(safe-area-inset-top, 0px)); --pp-x: 14px; }
  .cf2 .auds { margin: 0 -12px; padding: 0 12px 2px; }
  .cf2 .head { gap: 10px; }
  .cf2 .head h1, .cf2 .h1 { font-size: 22px; }
  .cf2 .head__date { font-size: 12.5px; }
  .cf2 .tiles { gap: 8px; }
  .cf2 .tile { padding: 8px 10px; gap: 4px; }
  .cf2 .tile__l { font-size: 11.5px; }
  .cf2 .tile__v b { font-size: 19px; }
  .cf2 .tiles { gap: 6px; }
  .cf2 .tile .bar { height: 3px; }
  .cf2 .row, .cf2 .crow { padding: 12px; }
  .cf2 .trow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .cf2 .lh { padding: 8px 12px; }
  .cf2 .lh > span:first-child { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .cf2 .row .ib--qa, .cf2 .trow .ib--qa { display: none; }
  .cf2 .qa-m { display: block; }
  .cf2 .row .icons { align-self: flex-start; }
  .cf2 .row { flex-wrap: nowrap; }
  .cf2 .donerow { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 12px; }
  .cf2 .donerow .tag { grid-column: 2; justify-self: start; white-space: normal; }
  .cf2 .ph { flex-wrap: wrap; }
  .cf2 .ph__main { flex: 1 1 100%; }
  .cf2 .ph__phone { white-space: nowrap; }
  .cf2 .btn { white-space: normal; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: center; }
  .cf2 .btn--sm { min-height: 32px; }
  .cf2 .btn--link { min-height: 0; padding: 0; text-align: left; }
  .cf2 .kcard, .cf2 .rcard, .cf2 .khero { padding: 14px; }
  .cf2 .ed__sec { padding: 14px; }
  .cf2 .khero__sum { font-size: 28px; }
  .cf2 .khero__fc { text-align: left; }
  .cf2 .ed__row > input[type=text], .cf2 .ed__name { min-width: 0; }
  .cf2 .ed__name { flex-basis: 100%; }
  .cf2 .search--pager { width: 100%; }
  .cf2 .search--grow { min-width: 0; flex-basis: 100%; }
  .cf2 .field--inline { flex: 1 1 100%; min-width: 0; }
  .cf2 .kcard__h, .cf2 .rcard__h { flex-wrap: wrap; }
  .cf2 .kcard__h > .ed__row, .cf2 .rcard__h > .ed__row { min-width: 0; }
  .cf2 .field.field--inline input { flex: 1; min-width: 0; height: 40px; }
  .cf2 .pager { flex-wrap: wrap; }
  .cf2 .hero__l, .cf2 .hero__r { padding: 16px; }
  .cf2 .hero h2 { font-size: 20px; }
  .cf2 .mini { gap: 8px; }
  .cf2 .mini div { padding: 10px; }
  .cf2 .mini b { font-size: 20px; }
  .cf2 .page-state { padding: 32px 16px; }
  .cf2 .attn__i { grid-template-columns: 36px minmax(0, 1fr); }
  .cf2 .attn__i > :nth-child(n+3) { grid-column: 2; justify-self: start; }
  .cf2 .link-card { grid-template-columns: 28px minmax(0, 1fr); }
  .cf2 .link-card > :nth-child(n+3) { grid-column: 2; }
  .cf2 .opp { grid-template-columns: minmax(0, 1fr) auto; }
  .cf2 .opp > :nth-child(n+3) { grid-column: 1 / -1; justify-self: start; }
  .cf2 .tplrow { grid-template-columns: minmax(0, 1fr); }
  .cf2 .set-item { grid-template-columns: minmax(0, 1fr) auto; }
  .cf2 .set-item > :nth-child(n+3) { grid-column: 1 / -1; justify-self: start; }
  .cf2 .kv > div { flex-wrap: wrap; }
  .cf2 .kv input { width: 120px; }
  .cf2 .exp { grid-template-columns: minmax(0, 1fr) 96px; }
  .cf2 .legend { gap: 8px 12px; }
  .cf2 .legend .f { margin-left: 0; }
  /* Расписание: список записей вместо сетки */
  .cf2 .sc-view { display: inline-flex; }
  .cf2 .sc-period { display: none; }
  .cf2 .sfilters--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; -webkit-overflow-scrolling: touch; }
  .cf2 .sfilters--scroll::-webkit-scrollbar { display: none; }
  .cf2 .sfilters--scroll > * { flex: none; }
  .cf2 .sched--list .grid-card { display: none; }
  .cf2 .sched--list .agenda { display: flex; }
  .cf2 .ghead, .cf2 .gbody { grid-template-columns: 44px repeat(4, minmax(128px, 1fr)); min-width: 556px; }
  .cf2 .ghead > div:first-child, .cf2 .gtimes { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background: var(--bg-card); }
  .cf2 .now { left: 44px; }
  .cf2 .now span { left: -42px; }
  /* Модалки — лист снизу */
  .cf2 .overlay { padding: 0; align-items: end; place-items: end stretch; }
  .cf2 .modal { width: 100%; max-height: calc(100% - 16px - env(safe-area-inset-top, 0px)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .cf2 .modal__h { position: -webkit-sticky; position: sticky; top: 0; z-index: 3; padding: 14px 14px 10px 16px; background: var(--bg-card); border-bottom: 1px solid var(--divider); }
  .cf2 .modal__h h3 { font-size: 17px; }
  .cf2 .modal__b { padding: 14px 16px; }
  .cf2 .modal__f { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); }
  .cf2 .modal__f .btn { flex: 1 1 auto; }
  /* Таблицы — карточки */
  .cf2 .ktbl-wrap { overflow: visible; }
  .cf2 .ktbl { display: block; min-width: 0; font-size: 13.5px; }
  .cf2 .ktbl thead { display: block; }
  .cf2 .ktbl thead tr { display: flex; padding: 0; border: 0; border-radius: 0; background: none; }
  .cf2 .ktbl thead th { display: none; }
  .cf2 .ktbl thead th.th-chk { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; border: 0; background: none; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); white-space: normal; width: auto; }
  .cf2 .ktbl thead th.th-chk::after { content: 'Выбрать всех на странице'; }
  .cf2 .ktbl tbody, .cf2 .ktbl tfoot { display: block; }
  .cf2 .ktbl tr { display: block; position: relative; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); }
  .cf2 .ktbl tr + tr, .cf2 .ktbl tfoot tr { margin-top: 8px; }
  .cf2 .ktbl tfoot tr { background: var(--hover); }
  .cf2 .ktbl td, .cf2 .ktbl tfoot td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 4px 0; border: 0; background: none; text-align: right; white-space: normal; }
  .cf2 .ktbl td::before { content: attr(data-l); text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); }
  .cf2 .ktbl td[data-l=""] { grid-template-columns: minmax(0, 1fr); }
  .cf2 .ktbl td[data-l=""]::before, .cf2 .ktbl td.td-h::before, .cf2 .ktbl td.td-full::before { display: none; }
  .cf2 .ktbl td.td-h { grid-template-columns: minmax(0, 1fr); padding-top: 0; text-align: left; font-size: 14px; font-weight: 600; }
  .cf2 .ktbl tr.has-chk td.td-h { padding-right: 34px; }
  .cf2 .ktbl td.td-chk { position: absolute; top: 8px; right: 10px; display: block; padding: 0; width: auto; }
  .cf2 .ktbl td.td-full { display: block; padding: 0; text-align: left; }
  .cf2 .ktbl td.td-empty { display: none; }
  .cf2 .ktbl td.n { white-space: normal; }
  .cf2 .ktbl .td-v { min-width: 0; overflow-wrap: anywhere; }
  .cf2 .tag { white-space: normal; overflow-wrap: anywhere; }
  .cf2 .ktbl td[data-l] .td-v > .ed__row, .cf2 .ktbl td[data-l] .td-v > .sh-tags, .cf2 .ktbl td[data-l] .td-v > .prog { justify-content: flex-end; }
  .cf2 .ktbl td[data-l=""] .td-v > .ed__row, .cf2 .ktbl td[data-l=""] .td-v > .sh-tags { justify-content: flex-start; }
  .cf2 .ktbl tr.cm-day { padding: 8px 0 0; border: 0; background: none; }
  .cf2 .ktbl tr.cm-day td { padding: 0; background: none; }
  .cf2 .ktbl tr.abdet, .cf2 .ktbl tr.cm-open-det { margin-top: -4px; border-top-left-radius: 0; border-top-right-radius: 0; background: var(--hover); }
  .cf2 .note-in { min-width: 0; border-color: var(--border-strong); background: var(--bg-card); text-align: left; }
  .cf2 .dchart { gap: 2px; }
  .cf2 .dlabels { gap: 2px; }
  .cf2 .dlabels span { font-size: 9.5px; }
}
/* Маленькие и старые телефоны: 320–400 px */
@media (max-width: 400px) {
  .cf2 .main { padding: 10px 10px 20px; }
  .cf2 .auds, .cf2 .sfilters--scroll { margin: 0 -10px; padding: 0 10px 2px; }
  .cf2 .panel { padding: 14px 12px; }
  .cf2 .body > .panel { --pp-t: calc(14px + env(safe-area-inset-top, 0px)); --pp-x: 12px; --pp-b: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .head h1, .cf2 .h1 { font-size: 20px; }
  .cf2 .seg button { padding: 0 9px; font-size: 12.5px; }
  .cf2 .tile { padding: 9px 10px; }
  .cf2 .tile__v b { font-size: 18px; }
  .cf2 .tile__v span { font-size: 12px; }
  .cf2 .row, .cf2 .crow { padding: 11px 10px; gap: 8px; }
  .cf2 .trow { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 11px 10px; }
  .cf2 .lh { padding: 8px 10px; }
  .cf2 .dl { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; }
  .cf2 .ctiles { gap: 4px; }
  .cf2 .ctile { font-size: 11px; }
  .cf2 .outs { gap: 4px; }
  .cf2 .out { padding: 0 8px; font-size: 12.5px; }
  .cf2 .out.is-on { padding: 0 7px; }
  .cf2 .kcard, .cf2 .rcard, .cf2 .khero, .cf2 .ed__sec { padding: 12px; }
  .cf2 .ktbl tr { padding: 10px; }
  .cf2 .ktbl td, .cf2 .ktbl tfoot td { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 8px; }
  .cf2 .modal__b { padding: 12px; }
  .cf2 .modal__h { padding-left: 12px; }
  .cf2 .modal__f { padding-left: 12px; padding-right: 12px; }
  .cf2 .mini { grid-template-columns: minmax(0, 1fr); }
  .cf2 .stat3 b, .cf2 .mini b { font-size: 18px; }
  .cf2 .ag { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .cf2 .wdays button { width: 34px; }
}
@media (max-width: 340px) {
  .cf2 .tab { font-size: 9.5px; }
  .cf2 .tab svg { width: 18px; height: 18px; }
  .cf2 .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cf2 .tile__l { font-size: 11px; }
}
/* Телефон боком и низкие экраны: меньше места под полосы */
@media (max-width: 820px) and (max-height: 440px) {
  .cf2 .tabbar { height: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .tab { flex-direction: row; gap: 4px; font-size: 11px; }
  .cf2 .tab svg { width: 18px; height: 18px; flex: none; }
  .cf2 .tab__n { position: static; }
  .cf2 .app { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .toasts { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .bulk { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .cf2 .app.is-sheet .sheet-bar { min-height: 44px; }
  .cf2 .app.is-sheet .panel .finish { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cf2 * { transition: none !important; animation: none !important; }
}
/* ClientFlow 2.0 — то, чего не было в прототипе: каркас под продуктовым топбаром,
   ширина полос прогресса классами (без style в разметке), скелеты загрузки. */
.cf2 { display: block; }
/* Плавающая кнопка AI-помощника перекрывает панель задачи и нижние вкладки — на рабочем экране её нет */
body.page-cf2 .ai-chat-fab { display: none; }
/* Общий подвал сайта (navbar.php вставляет его на каждую страницу) — в рабочем экране ClientFlow не нужен (30.09) */
body.page-cf2 .app-footer { display: none; }
/* Карточка клиента (_client_drawer.php, стили карточки — .cf-app): комментарий записи в истории визитов (30.09) */
.cf-app .history__note { margin-top: 2px; font: 400 12px var(--font); color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }
/* Таблицы аудиторий: колонка чекбокса по ширине чекбокса — имя клиента рядом с ним в любой таблице */
.cf2 .ktbl .ktbl__pick { width: 1%; padding-right: 0; }
/* Сортируемые колонки — как .tbl в ui-kit (.is-sortable / .is-sorted / .sort); кнопка — для клавиатуры */
.cf2 .ktbl th.is-sortable button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.cf2 .ktbl th.is-sortable:hover, .cf2 .ktbl th.is-sorted { color: var(--text); }
.cf2 .ktbl th .sort { display: inline-flex; color: var(--muted); }
.cf2 .ktbl th.is-sorted .sort { color: var(--accent); }
/* «Показывать по 25 / 50 / 100 / 200» в подвале таблицы */
.cf2 .pager__per { display: inline-flex; align-items: center; gap: 6px; }
.cf2 .pager__per select { height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 8px; background: var(--bg-card); font-size: 12.5px; color: var(--text); }
.cf2 .tab::after { content: none; }
.cf2 .side__branch { font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cf2 .bar > i { width: 0; }
.cf2 .bar > i.w-5 { width: 5%; } .cf2 .bar > i.w-10 { width: 10%; } .cf2 .bar > i.w-15 { width: 15%; } .cf2 .bar > i.w-20 { width: 20%; }
.cf2 .bar > i.w-25 { width: 25%; } .cf2 .bar > i.w-30 { width: 30%; } .cf2 .bar > i.w-35 { width: 35%; } .cf2 .bar > i.w-40 { width: 40%; }
.cf2 .bar > i.w-45 { width: 45%; } .cf2 .bar > i.w-50 { width: 50%; } .cf2 .bar > i.w-55 { width: 55%; } .cf2 .bar > i.w-60 { width: 60%; }
.cf2 .bar > i.w-65 { width: 65%; } .cf2 .bar > i.w-70 { width: 70%; } .cf2 .bar > i.w-75 { width: 75%; } .cf2 .bar > i.w-80 { width: 80%; }
.cf2 .bar > i.w-85 { width: 85%; } .cf2 .bar > i.w-90 { width: 90%; } .cf2 .bar > i.w-95 { width: 95%; } .cf2 .bar > i.w-100 { width: 100%; }
.cf2 .btn--danger { background: var(--danger); border-color: var(--danger); color: var(--bg-card); }
.cf2 .btn--danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(.95); }
.cf2 .btn[disabled], .cf2 .btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.cf2 a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.cf2 a.navi, .cf2 a.tab, .cf2 a.rep { text-decoration: none; }
.cf2 .row--skel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: default; }
.cf2 .row--skel:hover { background: none; }
.cf2 .skel { background: var(--divider); border-radius: var(--radius-xs); animation: cf2-shimmer 1.2s ease-in-out infinite; }
.cf2 .skel--text { height: 11px; width: 60%; }
.cf2 .skel--short { width: 35%; }
.cf2 .skel--block { height: 72px; width: 100%; }
@keyframes cf2-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cf2 .page-state__actions { display: flex; gap: 8px; justify-content: center; }
.cf2 .page-state--error h3 { margin: 0; font-size: 18px; }
/* Атрибут hidden (специфичность 0,0,1) перебивается display у .field и других — прячем явно */
.cf2 [hidden] { display: none !important; }
/* Фото в отчёте смены и в деле: миниатюра-ссылка на оригинал, кнопка «убрать» в углу */
.cf2 a.thumb { display: inline-block; overflow: hidden; flex: 0 0 auto; }
.cf2 a.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf2 .thumbx { position: relative; display: inline-flex; }
.cf2 .thumbx__del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-xs); background: var(--bg-card); color: var(--text-3); cursor: pointer; }
.cf2 .thumbx__del:hover { color: var(--danger-dark); border-color: var(--danger); }
.cf2 .thumbx__del svg { width: 10px; height: 10px; }
/* Расход из кассы: статья текстом, если справочник статей пуст, и комментарий второй строкой */
.cf2 .exp input.exp__txt { text-align: left; }
.cf2 .exp .exp__note { grid-column: 1 / -1; }
/* core.css .card даёт тень и подъём при наведении — у карточек-строк ClientFlow 2.0 их нет */
.cf2 .card, .cf2 .card:hover { box-shadow: none; transform: none; }
@media (max-width: 1180px) {
  .cf2 .body > .panel { top: 0; height: auto; }
}
@media (max-width: 820px) {
  .cf2 .side { top: 0; height: auto; }
}
/* <<< ClientFlow 2.0 (cf2) <<< */

/* ClientFlow 2.0 · «Мои KPI»: шкала ступеней и состав начисления. Позиции и ширины — классами с шагом 1 %, без inline-стилей. */
.cf2 .wx-0 { width: 0%; } .cf2 .wx-1 { width: 1%; } .cf2 .wx-2 { width: 2%; } .cf2 .wx-3 { width: 3%; } .cf2 .wx-4 { width: 4%; } .cf2 .wx-5 { width: 5%; } .cf2 .wx-6 { width: 6%; } .cf2 .wx-7 { width: 7%; } .cf2 .wx-8 { width: 8%; } .cf2 .wx-9 { width: 9%; }
.cf2 .wx-10 { width: 10%; } .cf2 .wx-11 { width: 11%; } .cf2 .wx-12 { width: 12%; } .cf2 .wx-13 { width: 13%; } .cf2 .wx-14 { width: 14%; } .cf2 .wx-15 { width: 15%; } .cf2 .wx-16 { width: 16%; } .cf2 .wx-17 { width: 17%; } .cf2 .wx-18 { width: 18%; } .cf2 .wx-19 { width: 19%; }
.cf2 .wx-20 { width: 20%; } .cf2 .wx-21 { width: 21%; } .cf2 .wx-22 { width: 22%; } .cf2 .wx-23 { width: 23%; } .cf2 .wx-24 { width: 24%; } .cf2 .wx-25 { width: 25%; } .cf2 .wx-26 { width: 26%; } .cf2 .wx-27 { width: 27%; } .cf2 .wx-28 { width: 28%; } .cf2 .wx-29 { width: 29%; }
.cf2 .wx-30 { width: 30%; } .cf2 .wx-31 { width: 31%; } .cf2 .wx-32 { width: 32%; } .cf2 .wx-33 { width: 33%; } .cf2 .wx-34 { width: 34%; } .cf2 .wx-35 { width: 35%; } .cf2 .wx-36 { width: 36%; } .cf2 .wx-37 { width: 37%; } .cf2 .wx-38 { width: 38%; } .cf2 .wx-39 { width: 39%; }
.cf2 .wx-40 { width: 40%; } .cf2 .wx-41 { width: 41%; } .cf2 .wx-42 { width: 42%; } .cf2 .wx-43 { width: 43%; } .cf2 .wx-44 { width: 44%; } .cf2 .wx-45 { width: 45%; } .cf2 .wx-46 { width: 46%; } .cf2 .wx-47 { width: 47%; } .cf2 .wx-48 { width: 48%; } .cf2 .wx-49 { width: 49%; }
.cf2 .wx-50 { width: 50%; } .cf2 .wx-51 { width: 51%; } .cf2 .wx-52 { width: 52%; } .cf2 .wx-53 { width: 53%; } .cf2 .wx-54 { width: 54%; } .cf2 .wx-55 { width: 55%; } .cf2 .wx-56 { width: 56%; } .cf2 .wx-57 { width: 57%; } .cf2 .wx-58 { width: 58%; } .cf2 .wx-59 { width: 59%; }
.cf2 .wx-60 { width: 60%; } .cf2 .wx-61 { width: 61%; } .cf2 .wx-62 { width: 62%; } .cf2 .wx-63 { width: 63%; } .cf2 .wx-64 { width: 64%; } .cf2 .wx-65 { width: 65%; } .cf2 .wx-66 { width: 66%; } .cf2 .wx-67 { width: 67%; } .cf2 .wx-68 { width: 68%; } .cf2 .wx-69 { width: 69%; }
.cf2 .wx-70 { width: 70%; } .cf2 .wx-71 { width: 71%; } .cf2 .wx-72 { width: 72%; } .cf2 .wx-73 { width: 73%; } .cf2 .wx-74 { width: 74%; } .cf2 .wx-75 { width: 75%; } .cf2 .wx-76 { width: 76%; } .cf2 .wx-77 { width: 77%; } .cf2 .wx-78 { width: 78%; } .cf2 .wx-79 { width: 79%; }
.cf2 .wx-80 { width: 80%; } .cf2 .wx-81 { width: 81%; } .cf2 .wx-82 { width: 82%; } .cf2 .wx-83 { width: 83%; } .cf2 .wx-84 { width: 84%; } .cf2 .wx-85 { width: 85%; } .cf2 .wx-86 { width: 86%; } .cf2 .wx-87 { width: 87%; } .cf2 .wx-88 { width: 88%; } .cf2 .wx-89 { width: 89%; }
.cf2 .wx-90 { width: 90%; } .cf2 .wx-91 { width: 91%; } .cf2 .wx-92 { width: 92%; } .cf2 .wx-93 { width: 93%; } .cf2 .wx-94 { width: 94%; } .cf2 .wx-95 { width: 95%; } .cf2 .wx-96 { width: 96%; } .cf2 .wx-97 { width: 97%; } .cf2 .wx-98 { width: 98%; } .cf2 .wx-99 { width: 99%; }
.cf2 .wx-100 { width: 100%; }
.cf2 .px-0 { left: 0%; } .cf2 .px-1 { left: 1%; } .cf2 .px-2 { left: 2%; } .cf2 .px-3 { left: 3%; } .cf2 .px-4 { left: 4%; } .cf2 .px-5 { left: 5%; } .cf2 .px-6 { left: 6%; } .cf2 .px-7 { left: 7%; } .cf2 .px-8 { left: 8%; } .cf2 .px-9 { left: 9%; }
.cf2 .px-10 { left: 10%; } .cf2 .px-11 { left: 11%; } .cf2 .px-12 { left: 12%; } .cf2 .px-13 { left: 13%; } .cf2 .px-14 { left: 14%; } .cf2 .px-15 { left: 15%; } .cf2 .px-16 { left: 16%; } .cf2 .px-17 { left: 17%; } .cf2 .px-18 { left: 18%; } .cf2 .px-19 { left: 19%; }
.cf2 .px-20 { left: 20%; } .cf2 .px-21 { left: 21%; } .cf2 .px-22 { left: 22%; } .cf2 .px-23 { left: 23%; } .cf2 .px-24 { left: 24%; } .cf2 .px-25 { left: 25%; } .cf2 .px-26 { left: 26%; } .cf2 .px-27 { left: 27%; } .cf2 .px-28 { left: 28%; } .cf2 .px-29 { left: 29%; }
.cf2 .px-30 { left: 30%; } .cf2 .px-31 { left: 31%; } .cf2 .px-32 { left: 32%; } .cf2 .px-33 { left: 33%; } .cf2 .px-34 { left: 34%; } .cf2 .px-35 { left: 35%; } .cf2 .px-36 { left: 36%; } .cf2 .px-37 { left: 37%; } .cf2 .px-38 { left: 38%; } .cf2 .px-39 { left: 39%; }
.cf2 .px-40 { left: 40%; } .cf2 .px-41 { left: 41%; } .cf2 .px-42 { left: 42%; } .cf2 .px-43 { left: 43%; } .cf2 .px-44 { left: 44%; } .cf2 .px-45 { left: 45%; } .cf2 .px-46 { left: 46%; } .cf2 .px-47 { left: 47%; } .cf2 .px-48 { left: 48%; } .cf2 .px-49 { left: 49%; }
.cf2 .px-50 { left: 50%; } .cf2 .px-51 { left: 51%; } .cf2 .px-52 { left: 52%; } .cf2 .px-53 { left: 53%; } .cf2 .px-54 { left: 54%; } .cf2 .px-55 { left: 55%; } .cf2 .px-56 { left: 56%; } .cf2 .px-57 { left: 57%; } .cf2 .px-58 { left: 58%; } .cf2 .px-59 { left: 59%; }
.cf2 .px-60 { left: 60%; } .cf2 .px-61 { left: 61%; } .cf2 .px-62 { left: 62%; } .cf2 .px-63 { left: 63%; } .cf2 .px-64 { left: 64%; } .cf2 .px-65 { left: 65%; } .cf2 .px-66 { left: 66%; } .cf2 .px-67 { left: 67%; } .cf2 .px-68 { left: 68%; } .cf2 .px-69 { left: 69%; }
.cf2 .px-70 { left: 70%; } .cf2 .px-71 { left: 71%; } .cf2 .px-72 { left: 72%; } .cf2 .px-73 { left: 73%; } .cf2 .px-74 { left: 74%; } .cf2 .px-75 { left: 75%; } .cf2 .px-76 { left: 76%; } .cf2 .px-77 { left: 77%; } .cf2 .px-78 { left: 78%; } .cf2 .px-79 { left: 79%; }
.cf2 .px-80 { left: 80%; } .cf2 .px-81 { left: 81%; } .cf2 .px-82 { left: 82%; } .cf2 .px-83 { left: 83%; } .cf2 .px-84 { left: 84%; } .cf2 .px-85 { left: 85%; } .cf2 .px-86 { left: 86%; } .cf2 .px-87 { left: 87%; } .cf2 .px-88 { left: 88%; } .cf2 .px-89 { left: 89%; }
.cf2 .px-90 { left: 90%; } .cf2 .px-91 { left: 91%; } .cf2 .px-92 { left: 92%; } .cf2 .px-93 { left: 93%; } .cf2 .px-94 { left: 94%; } .cf2 .px-95 { left: 95%; } .cf2 .px-96 { left: 96%; } .cf2 .px-97 { left: 97%; } .cf2 .px-98 { left: 98%; } .cf2 .px-99 { left: 99%; }
.cf2 .px-100 { left: 100%; }
.cf2 .tier__lbl--start { transform: none; }
.cf2 .tier__lbl--end { transform: translateX(-100%); }
.cf2 .tier__lbl--low { top: 34px; }
.cf2 .tier:has(.tier__lbl--low) { height: 52px; }
.cf2 .stack i.sg-base, .cf2 .leg i.sg-base { background: var(--text-3); }
.cf2 .stack i.sg-rev, .cf2 .leg i.sg-rev { background: var(--success); }
.cf2 .stack i.sg-zone, .cf2 .leg i.sg-zone { background: var(--info); }
.cf2 .stack i.sg-kpi, .cf2 .leg i.sg-kpi { background: var(--accent); }
.cf2 .stack i.sg-pulse, .cf2 .leg i.sg-pulse { background: var(--tip); }
.cf2 .stack i.sg-gar, .cf2 .leg i.sg-gar { background: var(--muted); }
.cf2 .stack i.sg-adj, .cf2 .leg i.sg-adj { background: var(--warning); }
.cf2 .stack i.sg-master, .cf2 .leg i.sg-master { background: var(--info-line); }
.cf2 .leg i.sg-fine { background: var(--danger); }
.cf2 .leg b.neg { color: var(--danger-dark); }
/* ClientFlow 2.0 · «Аудитории»: конструктор — общий компонент .funnels-page. У него .field — само поле
   ввода, а у ClientFlow 2.0 .field — подпись с полем (серый мелкий текст, flex). Возвращаем полям
   конструктора их вид, иначе введённый текст серый. */
.cf2 .funnels-page .field { display: inline-block; gap: 0; color: var(--text); font-size: 13.5px; font-weight: 500; }
.cf2 .funnels-page .field--sm { font-size: 12.5px; }

/* >>> cf2 page: day */
/* Филиал в шапке шторки телефона — кнопка выбора филиала, как .branch в прототипе. */
.cf2 .side__m .branch { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
.cf2 .side__m .branch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf2 .side__m .branch > svg { flex: none; }
/* <<< cf2 page: day */

/* >>> cf2 page: waitlist */
/* Фильтр мастера в шапке: длинные ФИО не должны выталкивать его под вкладки. */
.cf2 .head .sfilters select { max-width: 200px; }
/* <<< cf2 page: waitlist */

/* >>> cf2 page: kpi-comms-stats */
/* «Статистика» · «По дням»: высота столбика — поставлено (140px у самого большого дня), оранжевая часть — доля сделанного. Классы вместо style. */
.cf2 .dchart__t.hy-0 { height: 0px; } .cf2 .dchart__t.hy-1 { height: 1.4px; } .cf2 .dchart__t.hy-2 { height: 2.8px; } .cf2 .dchart__t.hy-3 { height: 4.2px; } .cf2 .dchart__t.hy-4 { height: 5.6px; } .cf2 .dchart__t.hy-5 { height: 7px; } .cf2 .dchart__t.hy-6 { height: 8.4px; } .cf2 .dchart__t.hy-7 { height: 9.8px; } .cf2 .dchart__t.hy-8 { height: 11.2px; } .cf2 .dchart__t.hy-9 { height: 12.6px; }
.cf2 .dchart__t.hy-10 { height: 14px; } .cf2 .dchart__t.hy-11 { height: 15.4px; } .cf2 .dchart__t.hy-12 { height: 16.8px; } .cf2 .dchart__t.hy-13 { height: 18.2px; } .cf2 .dchart__t.hy-14 { height: 19.6px; } .cf2 .dchart__t.hy-15 { height: 21px; } .cf2 .dchart__t.hy-16 { height: 22.4px; } .cf2 .dchart__t.hy-17 { height: 23.8px; } .cf2 .dchart__t.hy-18 { height: 25.2px; } .cf2 .dchart__t.hy-19 { height: 26.6px; }
.cf2 .dchart__t.hy-20 { height: 28px; } .cf2 .dchart__t.hy-21 { height: 29.4px; } .cf2 .dchart__t.hy-22 { height: 30.8px; } .cf2 .dchart__t.hy-23 { height: 32.2px; } .cf2 .dchart__t.hy-24 { height: 33.6px; } .cf2 .dchart__t.hy-25 { height: 35px; } .cf2 .dchart__t.hy-26 { height: 36.4px; } .cf2 .dchart__t.hy-27 { height: 37.8px; } .cf2 .dchart__t.hy-28 { height: 39.2px; } .cf2 .dchart__t.hy-29 { height: 40.6px; }
.cf2 .dchart__t.hy-30 { height: 42px; } .cf2 .dchart__t.hy-31 { height: 43.4px; } .cf2 .dchart__t.hy-32 { height: 44.8px; } .cf2 .dchart__t.hy-33 { height: 46.2px; } .cf2 .dchart__t.hy-34 { height: 47.6px; } .cf2 .dchart__t.hy-35 { height: 49px; } .cf2 .dchart__t.hy-36 { height: 50.4px; } .cf2 .dchart__t.hy-37 { height: 51.8px; } .cf2 .dchart__t.hy-38 { height: 53.2px; } .cf2 .dchart__t.hy-39 { height: 54.6px; }
.cf2 .dchart__t.hy-40 { height: 56px; } .cf2 .dchart__t.hy-41 { height: 57.4px; } .cf2 .dchart__t.hy-42 { height: 58.8px; } .cf2 .dchart__t.hy-43 { height: 60.2px; } .cf2 .dchart__t.hy-44 { height: 61.6px; } .cf2 .dchart__t.hy-45 { height: 63px; } .cf2 .dchart__t.hy-46 { height: 64.4px; } .cf2 .dchart__t.hy-47 { height: 65.8px; } .cf2 .dchart__t.hy-48 { height: 67.2px; } .cf2 .dchart__t.hy-49 { height: 68.6px; }
.cf2 .dchart__t.hy-50 { height: 70px; } .cf2 .dchart__t.hy-51 { height: 71.4px; } .cf2 .dchart__t.hy-52 { height: 72.8px; } .cf2 .dchart__t.hy-53 { height: 74.2px; } .cf2 .dchart__t.hy-54 { height: 75.6px; } .cf2 .dchart__t.hy-55 { height: 77px; } .cf2 .dchart__t.hy-56 { height: 78.4px; } .cf2 .dchart__t.hy-57 { height: 79.8px; } .cf2 .dchart__t.hy-58 { height: 81.2px; } .cf2 .dchart__t.hy-59 { height: 82.6px; }
.cf2 .dchart__t.hy-60 { height: 84px; } .cf2 .dchart__t.hy-61 { height: 85.4px; } .cf2 .dchart__t.hy-62 { height: 86.8px; } .cf2 .dchart__t.hy-63 { height: 88.2px; } .cf2 .dchart__t.hy-64 { height: 89.6px; } .cf2 .dchart__t.hy-65 { height: 91px; } .cf2 .dchart__t.hy-66 { height: 92.4px; } .cf2 .dchart__t.hy-67 { height: 93.8px; } .cf2 .dchart__t.hy-68 { height: 95.2px; } .cf2 .dchart__t.hy-69 { height: 96.6px; }
.cf2 .dchart__t.hy-70 { height: 98px; } .cf2 .dchart__t.hy-71 { height: 99.4px; } .cf2 .dchart__t.hy-72 { height: 100.8px; } .cf2 .dchart__t.hy-73 { height: 102.2px; } .cf2 .dchart__t.hy-74 { height: 103.6px; } .cf2 .dchart__t.hy-75 { height: 105px; } .cf2 .dchart__t.hy-76 { height: 106.4px; } .cf2 .dchart__t.hy-77 { height: 107.8px; } .cf2 .dchart__t.hy-78 { height: 109.2px; } .cf2 .dchart__t.hy-79 { height: 110.6px; }
.cf2 .dchart__t.hy-80 { height: 112px; } .cf2 .dchart__t.hy-81 { height: 113.4px; } .cf2 .dchart__t.hy-82 { height: 114.8px; } .cf2 .dchart__t.hy-83 { height: 116.2px; } .cf2 .dchart__t.hy-84 { height: 117.6px; } .cf2 .dchart__t.hy-85 { height: 119px; } .cf2 .dchart__t.hy-86 { height: 120.4px; } .cf2 .dchart__t.hy-87 { height: 121.8px; } .cf2 .dchart__t.hy-88 { height: 123.2px; } .cf2 .dchart__t.hy-89 { height: 124.6px; }
.cf2 .dchart__t.hy-90 { height: 126px; } .cf2 .dchart__t.hy-91 { height: 127.4px; } .cf2 .dchart__t.hy-92 { height: 128.8px; } .cf2 .dchart__t.hy-93 { height: 130.2px; } .cf2 .dchart__t.hy-94 { height: 131.6px; } .cf2 .dchart__t.hy-95 { height: 133px; } .cf2 .dchart__t.hy-96 { height: 134.4px; } .cf2 .dchart__t.hy-97 { height: 135.8px; } .cf2 .dchart__t.hy-98 { height: 137.2px; } .cf2 .dchart__t.hy-99 { height: 138.6px; }
.cf2 .dchart__t.hy-100 { height: 140px; }
.cf2 .dchart__d.hy-0 { height: 0%; } .cf2 .dchart__d.hy-1 { height: 1%; } .cf2 .dchart__d.hy-2 { height: 2%; } .cf2 .dchart__d.hy-3 { height: 3%; } .cf2 .dchart__d.hy-4 { height: 4%; } .cf2 .dchart__d.hy-5 { height: 5%; } .cf2 .dchart__d.hy-6 { height: 6%; } .cf2 .dchart__d.hy-7 { height: 7%; } .cf2 .dchart__d.hy-8 { height: 8%; } .cf2 .dchart__d.hy-9 { height: 9%; }
.cf2 .dchart__d.hy-10 { height: 10%; } .cf2 .dchart__d.hy-11 { height: 11%; } .cf2 .dchart__d.hy-12 { height: 12%; } .cf2 .dchart__d.hy-13 { height: 13%; } .cf2 .dchart__d.hy-14 { height: 14%; } .cf2 .dchart__d.hy-15 { height: 15%; } .cf2 .dchart__d.hy-16 { height: 16%; } .cf2 .dchart__d.hy-17 { height: 17%; } .cf2 .dchart__d.hy-18 { height: 18%; } .cf2 .dchart__d.hy-19 { height: 19%; }
.cf2 .dchart__d.hy-20 { height: 20%; } .cf2 .dchart__d.hy-21 { height: 21%; } .cf2 .dchart__d.hy-22 { height: 22%; } .cf2 .dchart__d.hy-23 { height: 23%; } .cf2 .dchart__d.hy-24 { height: 24%; } .cf2 .dchart__d.hy-25 { height: 25%; } .cf2 .dchart__d.hy-26 { height: 26%; } .cf2 .dchart__d.hy-27 { height: 27%; } .cf2 .dchart__d.hy-28 { height: 28%; } .cf2 .dchart__d.hy-29 { height: 29%; }
.cf2 .dchart__d.hy-30 { height: 30%; } .cf2 .dchart__d.hy-31 { height: 31%; } .cf2 .dchart__d.hy-32 { height: 32%; } .cf2 .dchart__d.hy-33 { height: 33%; } .cf2 .dchart__d.hy-34 { height: 34%; } .cf2 .dchart__d.hy-35 { height: 35%; } .cf2 .dchart__d.hy-36 { height: 36%; } .cf2 .dchart__d.hy-37 { height: 37%; } .cf2 .dchart__d.hy-38 { height: 38%; } .cf2 .dchart__d.hy-39 { height: 39%; }
.cf2 .dchart__d.hy-40 { height: 40%; } .cf2 .dchart__d.hy-41 { height: 41%; } .cf2 .dchart__d.hy-42 { height: 42%; } .cf2 .dchart__d.hy-43 { height: 43%; } .cf2 .dchart__d.hy-44 { height: 44%; } .cf2 .dchart__d.hy-45 { height: 45%; } .cf2 .dchart__d.hy-46 { height: 46%; } .cf2 .dchart__d.hy-47 { height: 47%; } .cf2 .dchart__d.hy-48 { height: 48%; } .cf2 .dchart__d.hy-49 { height: 49%; }
.cf2 .dchart__d.hy-50 { height: 50%; } .cf2 .dchart__d.hy-51 { height: 51%; } .cf2 .dchart__d.hy-52 { height: 52%; } .cf2 .dchart__d.hy-53 { height: 53%; } .cf2 .dchart__d.hy-54 { height: 54%; } .cf2 .dchart__d.hy-55 { height: 55%; } .cf2 .dchart__d.hy-56 { height: 56%; } .cf2 .dchart__d.hy-57 { height: 57%; } .cf2 .dchart__d.hy-58 { height: 58%; } .cf2 .dchart__d.hy-59 { height: 59%; }
.cf2 .dchart__d.hy-60 { height: 60%; } .cf2 .dchart__d.hy-61 { height: 61%; } .cf2 .dchart__d.hy-62 { height: 62%; } .cf2 .dchart__d.hy-63 { height: 63%; } .cf2 .dchart__d.hy-64 { height: 64%; } .cf2 .dchart__d.hy-65 { height: 65%; } .cf2 .dchart__d.hy-66 { height: 66%; } .cf2 .dchart__d.hy-67 { height: 67%; } .cf2 .dchart__d.hy-68 { height: 68%; } .cf2 .dchart__d.hy-69 { height: 69%; }
.cf2 .dchart__d.hy-70 { height: 70%; } .cf2 .dchart__d.hy-71 { height: 71%; } .cf2 .dchart__d.hy-72 { height: 72%; } .cf2 .dchart__d.hy-73 { height: 73%; } .cf2 .dchart__d.hy-74 { height: 74%; } .cf2 .dchart__d.hy-75 { height: 75%; } .cf2 .dchart__d.hy-76 { height: 76%; } .cf2 .dchart__d.hy-77 { height: 77%; } .cf2 .dchart__d.hy-78 { height: 78%; } .cf2 .dchart__d.hy-79 { height: 79%; }
.cf2 .dchart__d.hy-80 { height: 80%; } .cf2 .dchart__d.hy-81 { height: 81%; } .cf2 .dchart__d.hy-82 { height: 82%; } .cf2 .dchart__d.hy-83 { height: 83%; } .cf2 .dchart__d.hy-84 { height: 84%; } .cf2 .dchart__d.hy-85 { height: 85%; } .cf2 .dchart__d.hy-86 { height: 86%; } .cf2 .dchart__d.hy-87 { height: 87%; } .cf2 .dchart__d.hy-88 { height: 88%; } .cf2 .dchart__d.hy-89 { height: 89%; }
.cf2 .dchart__d.hy-90 { height: 90%; } .cf2 .dchart__d.hy-91 { height: 91%; } .cf2 .dchart__d.hy-92 { height: 92%; } .cf2 .dchart__d.hy-93 { height: 93%; } .cf2 .dchart__d.hy-94 { height: 94%; } .cf2 .dchart__d.hy-95 { height: 95%; } .cf2 .dchart__d.hy-96 { height: 96%; } .cf2 .dchart__d.hy-97 { height: 97%; } .cf2 .dchart__d.hy-98 { height: 98%; } .cf2 .dchart__d.hy-99 { height: 99%; }
.cf2 .dchart__d.hy-100 { height: 100%; }
.cf2 .legend .dot--border { background: var(--border); }
.cf2 .legend .dot--accent { background: var(--accent); }
/* <<< cf2 page: kpi-comms-stats */

/* >>> cf2 page: audiences-settings */
/* Конструктор аудитории над списком: шапка .ed__sec как в прототипе, ниже — общий
   FunnelsAudience без своей рамки (рамка уже у .ed). */
.cf2 .ed__sec--flush { padding: 0; }
.cf2 .ed .funnels-page .aud { border: 0; border-radius: 0; }
/* <<< cf2 page: audiences-settings */

/* >>> cf2 page: shifts-reports */
/* <<< cf2 page: shifts-reports */

/* >>> cf2 page: smart-dialogs */
/* «Умное расписание»: число колонок-мастеров, высота дня и позиции блоков — CSS-переменными
   из smart.js (onRender), без inline-стилей в разметке. */
.cf2 .grid-scroll { --cols: 4; --gh: 768px; }
.cf2 .ghead, .cf2 .gbody { grid-template-columns: 52px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(60px + var(--cols) * 150px); }
.cf2 .gtimes, .cf2 .gcol { height: var(--gh); }
.cf2 .gtimes span, .cf2 .gline, .cf2 .now, .cf2 .gcol .appt { top: var(--y, 0px); }
.cf2 .gcol .appt { height: var(--h, 40px); }
.cf2 .ghead > div { min-width: 0; }
.cf2 .ghead b, .cf2 .ghead small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf2 .legend .appt__hint { position: static; }
.cf2 div.todo__i, .cf2 div.todo__i:hover { border-color: var(--border); cursor: default; }
.cf2 div.todo__i.is-done { border-color: var(--success-line); }
.cf2 .todo__i small { white-space: normal; text-align: right; }
@media (max-width: 600px) {
  .cf2 .ghead, .cf2 .gbody { grid-template-columns: 44px repeat(var(--cols), minmax(128px, 1fr)); min-width: calc(44px + var(--cols) * 128px); }
}
/* «Диалоги»: переносы строк сообщения и вложение ссылкой в пузыре */
.cf2 .bub { white-space: pre-wrap; overflow-wrap: anywhere; }
.cf2 .bub a { color: var(--accent-dark); text-decoration: underline; }
.cf2 .compose input:disabled { background: var(--hover); }
/* <<< cf2 page: smart-dialogs */

/* >>> cf2 page: standards */
/* «Настройки → Смена и стандарты»: строка «Записать на следующий визит» — её закрывает система,
   поля только для показа. */
.cf2 .set-std input:disabled, .cf2 .set-std select:disabled { background: var(--hover); color: var(--muted); }
/* <<< cf2 page: standards */

/* >>> cf2 page: lists-abon */
/* «Списки» и «Абонементы»: то, что в прототипе было inline-стилями. */
.cf2 .search.search--full { width: 100%; }
.cf2 .ed__row--between { justify-content: space-between; }
.cf2 .ed__row--right { justify-content: flex-end; }
.cf2 .modal__f .btn--push { margin-right: auto; }
.cf2 .ktbl tr.is-arch td { opacity: .55; }
/* Столбики «Продажи по дням»: высота — шкалой классов с шагом 5%. */
.cf2 .bars i.hy-0 { height: 0%; } .cf2 .bars i.hy-5 { height: 5%; } .cf2 .bars i.hy-10 { height: 10%; } .cf2 .bars i.hy-15 { height: 15%; } .cf2 .bars i.hy-20 { height: 20%; } .cf2 .bars i.hy-25 { height: 25%; } .cf2 .bars i.hy-30 { height: 30%; }
.cf2 .bars i.hy-35 { height: 35%; } .cf2 .bars i.hy-40 { height: 40%; } .cf2 .bars i.hy-45 { height: 45%; } .cf2 .bars i.hy-50 { height: 50%; } .cf2 .bars i.hy-55 { height: 55%; } .cf2 .bars i.hy-60 { height: 60%; } .cf2 .bars i.hy-65 { height: 65%; }
.cf2 .bars i.hy-70 { height: 70%; } .cf2 .bars i.hy-75 { height: 75%; } .cf2 .bars i.hy-80 { height: 80%; } .cf2 .bars i.hy-85 { height: 85%; } .cf2 .bars i.hy-90 { height: 90%; } .cf2 .bars i.hy-95 { height: 95%; } .cf2 .bars i.hy-100 { height: 100%; }
@media (max-width: 820px) {
  .cf2 .modal__f .btn--push { margin-right: 0; }
}
/* <<< cf2 page: lists-abon */

/* Careers: CMS hub, role detail and application. Public DS composites. */
.careers { --career-display: clamp(2.5rem,5.5vw,4.75rem); --career-heading: clamp(1.75rem,3vw,2.65rem); --career-body: 1.075rem; --career-scene: 30rem; }
.careers .sec { padding: var(--space-14) var(--space-8); }
.careers h1 { font-size: var(--career-display); line-height: 1.04; letter-spacing: var(--ls-tight); margin: var(--space-7) 0; font-weight: var(--fw-bold); }
.careers h2 { font-size: var(--career-heading); line-height: 1.15; letter-spacing: var(--ls-tight); margin: 0 0 var(--space-8); }
.careers p { line-height: 1.65; }
.careers__kicker { font: var(--type-kicker); letter-spacing: var(--ls-kicker-wide); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
.careers__lead { font-size: var(--career-body); color: var(--text-muted); max-width: 42em; margin: 0 0 var(--space-10); }
.careers__hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-10); }
.careers__intro { position: relative; z-index: 1; }
.careers__caption { color: var(--text-muted); font: var(--type-hint); margin-top: var(--space-7); }
.careers__scene { position: relative; min-width: 0; display: grid; place-items: center; isolation: isolate; }
.careers__scene img { width: 100%; max-width: var(--career-scene); height: auto; animation: career-arrive .8s var(--ease) both; }
.careers__orbit { position: absolute; inset: 14% 0 4%; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); transform: rotate(-8deg); z-index: -1; }
.careers__scene-label { padding: var(--space-5) var(--space-7); background: var(--text); color: var(--bg-card); border-radius: var(--radius); font: var(--type-hint); transform: rotate(-3deg); }
.careers__product { border-top: 1px solid var(--border); }
.careers__principles { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-8); margin-top: var(--space-12); }
.careers__principles > div { border-top: 1px solid var(--accent-line); padding-top: var(--space-8); }
.careers__number { color: var(--accent); font: var(--type-h2); }
.careers__principles p { font-size: var(--career-body); }
.careers__section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.careers__count { color: var(--accent); font-size: var(--career-display); font-weight: var(--fw-bold); }
.careers .jobs { max-width: none; }
.careers .job { text-decoration: none; padding: var(--space-10); gap: var(--space-8); }
.careers .job__main h3 { font-size: var(--career-body); }
.careers .job__main > p:not(.careers__kicker) { color: var(--text-muted); margin: var(--space-3) 0; max-width: 46em; }
.careers .job__tag { border-radius: var(--radius-xs); padding: var(--space-1) var(--space-3); font: var(--type-hint); }
.careers .job:focus-visible,.careers a:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-1); }
.careers__closing { background: var(--accent-soft); border-radius: var(--radius-lg); margin-bottom: var(--space-14); }
.careers__back { display: inline-block; color: var(--text-muted); margin-bottom: var(--space-10); text-decoration: none; }
.careers__role-hero { max-width: var(--mw); }
.careers--detail h1 { max-width: 15em; }
.careers__role-hero .job__tags { margin-bottom: var(--space-8); }
.careers__detail-grid { display: grid; grid-template-columns: 1fr 19rem; align-items: start; gap: var(--space-14); border-top: 1px solid var(--border); }
.careers__description section + section { margin-top: var(--space-12); }
.careers__description h2 { font-size: var(--career-heading); }
.careers__description ul { padding-left: var(--space-7); margin: 0; }
.careers__description li { font-size: var(--career-body); line-height: 1.7; padding-left: var(--space-2); margin-bottom: var(--space-3); }
.careers__description li::marker { color: var(--accent); }
.careers__aside { position: sticky; top: calc(var(--topbar-h) + var(--space-10)); padding: var(--space-8); background: var(--accent-soft); border-radius: var(--radius-lg); }
.careers__aside img { width: 100%; max-width: 12rem; height: auto; display: block; margin: 0 auto var(--space-8); }
.careers__aside h2 { font-size: var(--career-body); }
.careers__aside p { color: var(--text-muted); }
.careers__application { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--topbar-h) + var(--space-8)); }
.careers__application .contact__card { min-width: 0; }
.careers__application textarea { width: 100%; resize: vertical; }
.careers__openings { scroll-margin-top: var(--topbar-h); }
@keyframes career-arrive { from { opacity: 0; transform: translateY(var(--space-8)) rotate(3deg); } to { opacity: 1; transform: none; } }
@media (max-width:920px) { .careers__hero { gap: var(--space-8); } .careers__detail-grid { grid-template-columns: 1fr; } .careers__aside { position: static; } }
@media (max-width:760px) { .careers__hero,.careers__application { grid-template-columns: 1fr; } .careers__scene { max-width: 23rem; margin: auto; } .careers__principles { grid-template-columns: 1fr; gap: var(--space-5); } .careers .job { grid-template-columns: 1fr; } .careers .job__ic { display: none; } }
@media (max-width:560px) { .careers .sec { padding: var(--space-10) var(--space-7); } .careers .job { padding: var(--space-7); } .careers__closing { border-radius: 0; } .careers__section-head { align-items: start; } }
@media (prefers-reduced-motion:reduce) { .careers__scene img { animation: none; } }