/**
 * SurveyAnalyzer TWA — единая дизайн-система Mini App
 * Палитра: фон #F5F5F5, карточки #FFF, акцент #2E7DB8, текст #1A1A1E
 */

/* Inter — self-hosted (variable 100-900, latin+cyrillic). Раньше грузился
   с Google Fonts CDN; теперь локально: офлайн-устойчиво (РФ/блокировки),
   без обращений к Google; файлы раздаёт nginx location /fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Бренд (совпадает с визуалом Mini App) */
  --sa-bg-page: #f5f5f5;
  --sa-bg-card: #ffffff;
  --sa-border: #e8e8e8;
  --sa-text: #1a1a1e;
  --sa-text-secondary: #6a6a6e;
  --sa-primary: #2e7db8;
  --sa-primary-hover: #2a6fa3;
  --sa-primary-muted: rgba(46, 125, 184, 0.12);
  --sa-primary-muted-strong: rgba(46, 125, 184, 0.22);
  --sa-error: #c62828;
  /* Семантические статус-цвета (T2.x): сведены из разбросанных литералов
     #2e7d32 / #dc3545 / #e65100·#ef6c00 в именованные токены. Значения = ранее
     доминировавшие литералы (без визуального сдвига; #ef6c00→#e65100 — слияние
     near-дубля тёплого предупреждения). --sa-error остаётся отдельным (красный
     текста-ошибки/валидации ≠ деструктивное действие --sa-danger). */
  --sa-success: #2e7d32;
  --sa-warning: #e65100;
  --sa-danger: #dc3545;
  --sa-radius: 10px;
  --sa-radius-sm: 8px;
  /* Ранее использовались с фолбэком, но не были объявлены — давали разнобой
     (особенно --sa-bg-soft с двумя разными фолбэками). Фиксируем один раз. */
  --sa-bg-soft: #f7f9fb;
  --sa-accent: var(--sa-primary);
  --sa-button-text: #ffffff;

  /* ── Шкала типографики (T2.3): сведённые кегли вместо ~24 разрозненных.
     Значения подобраны так, чтобы сдвиг от текущих размеров был ≤~0.5px
     в подавляющем большинстве мест (детали — в коммите). ── */
  --sa-font-2xs: 0.72rem;  /* микро: бейджи, легенды, мета-теги */
  --sa-font-xs: 0.78rem;   /* подписи, подсказки, hint'ы */
  --sa-font-sm: 0.82rem;   /* детали, вторичный текст */
  --sa-font-md: 0.85rem;   /* мелкий body (самый частый) */
  --sa-font-lg: 0.9rem;    /* контролы, лейблы форм */
  --sa-font-xl: 0.95rem;   /* акцентный body */
  --sa-font-2xl: 1rem;     /* заголовки карточек, кнопки */
  --sa-font-3xl: 1.1rem;   /* выделенные заголовки */
  --sa-font-4xl: 1.5rem;   /* заголовки страниц */

  /* Насыщенность шрифта */
  --sa-fw-regular: 400;
  --sa-fw-medium: 500;
  --sa-fw-semibold: 600;
  --sa-fw-bold: 700;

  /* ── Шкала отступов (4-кратная) ── */
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-5: 20px;
  --sa-space-6: 24px;

  /* ── T5: дополнительные токены поверхностей/тинтов — чтобы у каждого
     цвета была тёмная пара. Значения = прежние литералы (без визуального
     сдвига в светлой теме). ── */
  --sa-bg-inset: #fafbfc;        /* утопленные списки-референсы */
  --sa-bg-hover: #ebebeb;        /* нейтральный hover плашек */
  --sa-chip-bg: #e7eef5;         /* голубые чипы/плашки групп фильтра */
  --sa-chip-bg-strong: #dbe7f3;
  --sa-toggle-track: #d1d1d6;    /* трек iOS-свитча (выкл) */
  --sa-knob: #ffffff;            /* кноб свитча — белый в обеих темах */
  --sa-hover-veil: rgba(0, 0, 0, 0.05);   /* прозрачный hover поверх карточки */
  --sa-danger-veil: rgba(220, 53, 69, 0.1);
  --sa-primary-veil: rgba(46, 125, 184, 0.04);
  --sa-primary-border: rgba(46, 125, 184, 0.35);
  --sa-primary-border-strong: rgba(46, 125, 184, 0.5);
  /* Тинт-семейства нотисов/бейджей: фон + текст + рамка */
  --sa-info-bg: #e3f2fd;
  --sa-info-text: #0d47a1;
  --sa-info-border: #bbdefb;
  --sa-info-accent: #1565c0;
  --sa-ok-bg: #e8f5e9;
  --sa-ok-text: #1b5e20;
  --sa-ok-border: #c8e6c9;
  --sa-purple-bg: #f3e5f5;
  --sa-purple-text: #4a148c;
  --sa-purple-border: #ce93d8;
  --sa-purple-badge-text: #6a1b9a;
  --sa-purple-veil: rgba(74, 20, 140, 0.1);
  --sa-warn-bg: #fff3e0;
  --sa-warn-text: #bf360c;
  --sa-warn-border: #ffcc80;
  --sa-amber-bg: #fff8e1;
  --sa-amber-text: #5d4037;
  --sa-amber-text-strong: #4e342e;
  --sa-amber-border: #ffe082;
  --sa-amber-veil: rgba(93, 64, 55, 0.1);
  --sa-sand-bg: #fffdf5;
  --sa-sand-bg-hover: #fffaf0;
  --sa-sand-bg-soft: #fbf3e1;
  --sa-sand-border: #ecdcb2;
  --sa-sand-border-hover: #e0caa0;
  --sa-sand-text: #8a6d1f;
  --sa-gold-icon: #c99a2e;
  --sa-danger-soft-bg: #fde8e8;
  --sa-danger-soft-border: #e9aaaa;
  --sa-warnhl-bg: #fef3c7;
  --sa-warnhl-text: #92400e;
  --sa-warnhl-border: #f59e0b;

  color-scheme: light;

  /* Алиасы для Telegram themeParams (переопределяются из JS при необходимости) */
  --tg-theme-bg-color: var(--sa-bg-card);
  --tg-theme-text-color: var(--sa-text);
  --tg-theme-hint-color: var(--sa-text-secondary);
  --tg-theme-link-color: var(--sa-primary);
  --tg-theme-button-color: var(--sa-primary);
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: var(--sa-bg-page);
}

/* ── T5: тёмная тема. Ставится JS'ом (Telegram colorScheme / prefers-color-
   scheme) на <html data-theme="dark">. Палитра: нейтрально-тёмные поверхности
   + чуть светлее бренд-синий (контраст на тёмном). Тинты нотисов = прозрачная
   заливка оттенка + светлый текст (материал-паттерн для dark). ── */
html[data-theme="dark"] {
  color-scheme: dark;

  --sa-bg-page: #16171b;
  --sa-bg-card: #212227;
  --sa-border: #383a41;
  --sa-text: #e8e8ec;
  --sa-text-secondary: #a0a0a8;
  --sa-primary: #55a0d6;
  --sa-primary-hover: #6cb0e0;
  --sa-primary-muted: rgba(85, 160, 214, 0.16);
  --sa-primary-muted-strong: rgba(85, 160, 214, 0.30);
  --sa-error: #ef8a8a;
  --sa-success: #77c07b;
  --sa-warning: #ffa64d;
  --sa-danger: #e57373;
  --sa-bg-soft: #26272d;
  --sa-button-text: #ffffff;

  --sa-bg-inset: #1b1c20;
  --sa-bg-hover: #2e3036;
  --sa-chip-bg: #263340;
  --sa-chip-bg-strong: #2d3e4e;
  --sa-toggle-track: #4a4c54;
  --sa-hover-veil: rgba(255, 255, 255, 0.07);
  --sa-danger-veil: rgba(229, 115, 115, 0.16);
  --sa-primary-veil: rgba(85, 160, 214, 0.07);
  --sa-primary-border: rgba(85, 160, 214, 0.45);
  --sa-primary-border-strong: rgba(85, 160, 214, 0.6);

  --sa-info-bg: rgba(66, 165, 245, 0.14);
  --sa-info-text: #a6cff2;
  --sa-info-border: rgba(66, 165, 245, 0.35);
  --sa-info-accent: #7db8e8;
  --sa-ok-bg: rgba(102, 187, 106, 0.14);
  --sa-ok-text: #a5d6a7;
  --sa-ok-border: rgba(102, 187, 106, 0.35);
  --sa-purple-bg: rgba(171, 71, 188, 0.16);
  --sa-purple-text: #d9aee0;
  --sa-purple-border: rgba(171, 71, 188, 0.45);
  --sa-purple-badge-text: #d0a2d8;
  --sa-purple-veil: rgba(206, 147, 216, 0.15);
  --sa-warn-bg: rgba(255, 152, 0, 0.14);
  --sa-warn-text: #ffb280;
  --sa-warn-border: rgba(255, 152, 0, 0.4);
  --sa-amber-bg: rgba(255, 193, 7, 0.10);
  --sa-amber-text: #cdb493;
  --sa-amber-text-strong: #e0cdb0;
  --sa-amber-border: rgba(255, 224, 130, 0.3);
  --sa-amber-veil: rgba(255, 224, 130, 0.12);
  --sa-sand-bg: rgba(201, 154, 46, 0.08);
  --sa-sand-bg-hover: rgba(201, 154, 46, 0.14);
  --sa-sand-bg-soft: rgba(201, 154, 46, 0.12);
  --sa-sand-border: rgba(201, 154, 46, 0.35);
  --sa-sand-border-hover: rgba(201, 154, 46, 0.5);
  --sa-sand-text: #d4b465;
  --sa-gold-icon: #d4b465;
  --sa-danger-soft-bg: rgba(229, 115, 115, 0.14);
  --sa-danger-soft-border: rgba(229, 115, 115, 0.4);
  --sa-warnhl-bg: rgba(245, 158, 11, 0.14);
  --sa-warnhl-text: #fbbf24;
  --sa-warnhl-border: rgba(245, 158, 11, 0.55);
}

/* Hero-картинки в тёмной теме слегка гасим, чтобы не слепили. */
html[data-theme="dark"] .dash-hero,
html[data-theme="dark"] .content-hero,
html[data-theme="dark"] .header-hero {
  filter: brightness(0.82);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--sa-bg-page);
  color: var(--sa-text);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sa-space-4);
  /* ≥ высоты фикс-футера (.footer ~111px) — иначе последняя карточка (пикер
     строк «Выбрано строк N из N») уходит ПОД футер и он перекрывает её/кнопку
     «Запустить» (Сергей, скрин 2026-07-19). */
  padding-bottom: 130px;
}

.hidden {
  display: none !important;
}

#loading {
  text-align: center;
  padding: 48px 16px;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xl);
}

/* T4: спиннер на загрузке (без него экран кажется зависшим) — те же точки,
   что .mp-spinner (@keyframes mp-bounce переиспользуются). */
.ld-spinner {
  margin-bottom: 14px;
}

/* T4: ошибка — структурная карточка (иконка + текст) вместо голой строки.
   Текст ставит showError (textContent) — слова не меняются. */
#error {
  max-width: 520px;
  margin: 40px auto;
  padding: 22px 24px 24px;
  background: var(--sa-bg-card);
  border: 1px solid var(--sa-danger-soft-border);
  border-radius: 12px;
  color: var(--sa-text);
  text-align: center;
  font-size: var(--sa-font-lg);
  line-height: 1.5;
}
/* T4: кнопка «Повторить» на карточке ошибки */
.btn-retry {
  display: block;
  margin: 16px auto 0;
  padding: 9px 26px;
  border: 1px solid var(--sa-primary);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-semibold);
  cursor: pointer;
}
.btn-retry:hover {
  background: var(--sa-primary);
  color: var(--sa-button-text);
}

/* T4: справка «Настройка параметров сравнения» — под <details> «Подробнее» */
.settings-info-details summary.settings-info-more {
  cursor: pointer;
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-medium);
  list-style: none;
  padding: 2px 0;
}
.settings-info-details summary.settings-info-more::-webkit-details-marker { display: none; }
.settings-info-details summary.settings-info-more::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.85em;
  display: inline-block;
  transition: transform 0.15s ease;
}
.settings-info-details[open] summary.settings-info-more::after {
  transform: rotate(180deg);
}

#error::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  background: currentColor;
  color: var(--sa-error);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>') center / contain no-repeat;
}

/* Header */
.header {
  margin-bottom: 20px;
}

.header h1 {
  margin: 0 0 8px;
  font-size: var(--sa-font-4xl);
  font-weight: var(--sa-fw-bold);
  letter-spacing: -0.02em;
  color: var(--sa-text);
}

.meta {
  margin: 0;
  font-size: var(--sa-font-lg);
  color: var(--sa-text-secondary);
}

.reuse-banner {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--sa-font-md);
  line-height: 1.35;
  background: var(--sa-info-bg);
  color: var(--sa-info-text);
  border: 1px solid var(--sa-info-border);
}

.reuse-banner.is-forced {
  background: var(--sa-ok-bg);
  color: var(--sa-ok-text);
  border-color: var(--sa-ok-border);
}

.reuse-banner strong {
  display: block;
  margin-bottom: 2px;
  font-weight: var(--sa-fw-semibold);
}

.reuse-banner .reuse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}

.reuse-banner .reuse-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}

/* Derived dataset banner (melt-pains, future производные) */
.derived-banner {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--sa-font-md);
  line-height: 1.4;
  background: var(--sa-purple-bg);
  color: var(--sa-purple-text);
  border: 1px solid var(--sa-purple-border);
}
.derived-banner strong {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--sa-fw-semibold);
}
.derived-banner code {
  background: var(--sa-purple-veil);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--sa-font-sm);
}
.derived-banner.is-warn {
  background: var(--sa-warn-bg);
  color: var(--sa-warn-text);
  border-color: var(--sa-warn-border);
}
.derived-banner.is-demo {
  background: var(--sa-amber-bg);
  color: var(--sa-amber-text);
  border-color: var(--sa-amber-border);
}
.derived-banner.is-demo strong {
  color: var(--sa-amber-text-strong);
}
/* Ссылка на готовый отчёт демо — единственное действие, доступное в
   демо-режиме (запуск заблокирован), поэтому выделяем её как кнопку. */
.demo-report-link {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid var(--sa-amber-border);
  border-radius: 8px;
  color: var(--sa-amber-text-strong);
  font-weight: 600;
  text-decoration: none;
}
.demo-report-link:hover {
  background: var(--sa-amber-border);
}
/* Файлы примера: «На входе: массив · анкета · бриф» / «На выходе: отчёт ·
   прокодированный массив». На узком экране ссылки переносятся, подпись — нет. */
.demo-files-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.demo-files-cap {
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.85;
}
.demo-files-row .demo-report-link {
  margin-top: 0;
}

/* Demo-карточка на dashboard — отличается визуально (тонкая обводка вместо
   primary-цвета — это explore-режим, не основной CTA). */
.dash-card-demo {
  background: var(--sa-bg-card);
  border: 1px dashed var(--sa-primary);
}
.dash-card-demo:hover {
  background: var(--sa-primary-muted);
}
.dash-card-demo .dash-card-icon {
  background: var(--sa-primary-muted);
}

/* Accordion */
.accordion-section {
  margin-bottom: var(--sa-space-4);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  overflow: hidden;
  background: var(--sa-bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--sa-bg-card);
  border: none;
  color: var(--sa-text);
  font-size: var(--sa-font-2xl);
  font-weight: var(--sa-fw-semibold);
  cursor: pointer;
  text-align: left;
}

.accordion-chevron {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-lg);
  display: inline-block;
  transition: transform 0.18s ease;
}
/* Раскрытие → поворот шеврона (вместо JS-подмены глифа ▸/▾).
   Работает и для .module-settings-trigger — у него тот же .accordion-chevron. */
.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  transform: rotate(90deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.accordion-content.open {
  /* 1600px, чтобы аккордеон «Взвешивание» с RIM-targets (2+ признаков с
     развёрнутыми категориями) не обрезал хвост. Остальные аккордеоны
     значительно меньше — запас не вреден. */
  max-height: 1600px;
}

.accordion-content > div {
  padding: 0 16px 16px;
  border-top: 1px solid var(--sa-border);
}

/* About block (✦ О создателе) */
.about-block {
  padding-top: 12px;
  font-size: var(--sa-font-xl);
  line-height: 1.5;
  color: var(--sa-text);
}

.about-block p {
  margin: 0 0 10px 0;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-block a[data-link] {
  color: var(--sa-accent, #2e7db8);
  text-decoration: none;
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
}

.about-block a[data-link]:hover {
  text-decoration: underline;
}

/* Settings */
.settings-row {
  /* Единая раскладка поля: подпись сверху, контрол на всю ширину (как во
     вложенных билдерах). Раньше было label-слева + select-справа max-width:52%,
     что обрезало длинные опции и давало разнобой форм. Чисто визуально —
     логика сбора настроек не затронута. Краевые строки с инлайн-layout
     (мультивыбор волн display:block, логотип column) переопределяют это сами;
     строка цвет-пикеров #report-sig-row остаётся в ряд (правило ниже). */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sa-border);
}

.settings-label-multiline {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  padding-top: 2px;
}

.settings-label-en {
  font-weight: var(--sa-fw-regular);
  color: var(--sa-text-secondary);
  font-size: 0.88em;
}

.settings-label-sub {
  font-weight: var(--sa-fw-regular);
  color: var(--sa-text-secondary);
  font-size: 0.88em;
}

.settings-row:last-child {
  border-bottom: none;
}

/* Опция «Буквы в обе стороны» под дропдауном типа сравнения */
.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.compare-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--sa-font-lg);
  color: var(--sa-text);
}

.compare-check input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.compare-check:has(input:disabled) {
  opacity: 0.55;
}

.settings-row label {
  flex: 1;
  font-size: var(--sa-font-lg);
  color: var(--sa-text);
}

.settings-row select {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font-size: var(--sa-font-lg);
  border-radius: 8px;
  border: 1px solid var(--sa-border);
  background: var(--sa-bg-card);
  color: var(--sa-text);
}

/* Строка цвет-пикеров значимости — 2 контрола в один ряд (а не в колонку).
   ID-селектор перебивает .settings-row{flex-direction:column} по специфичности. */
#report-sig-row {
  flex-direction: row;
  align-items: center;
}

/* Modules section */
.modules-section {
  margin-bottom: var(--sa-space-6);
}

.section-title {
  /* margin-top 24px — отделяет «Базовые настройки» / «Стандартные модули» /
     «Продвинутые модули» друг от друга. Для первой section-title в #content
     это создаёт небольшой gap от #dataset-info — что нормально. */
  margin: 24px 0 12px;
  font-size: var(--sa-font-xl);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text-secondary);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Сворачиваемый заголовок группы «Продвинутые модули» — экономит место,
   разворачивается по клику. Сворачивается только контейнер, не карточки. */
.section-title-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
  /* Ярче и крупнее остальных секций (запрос Сергея 2026-06-16): основной
     цвет текста вместо приглушённого secondary + крупнее шрифт. */
  font-size: var(--sa-font-3xl);
  font-weight: var(--sa-fw-bold);
  color: var(--sa-text);
}
/* Бейдж «в разработке» в заголовке группы + подсказка под ним. Залит
   акцентом (белый текст) — заметнее, чем бледная плашка. */
.section-title-toggle .section-soon-badge {
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: var(--sa-font-xs);
  font-weight: var(--sa-fw-medium);
  white-space: nowrap;
  color: var(--sa-text-secondary);
  background: var(--sa-bg-page);
  border: 1px solid var(--sa-border);
}
.section-toggle-hint {
  margin: -4px 0 6px;
  padding: 0 2px;
  font-size: var(--sa-font-md);
  line-height: 1.35;
  color: var(--sa-text-secondary);
}
.section-title-toggle .section-chevron {
  display: inline-block;
  font-size: 0.8em;
  color: var(--sa-text-secondary);
  transition: transform 0.15s ease;
}
.section-title-toggle.is-expanded .section-chevron {
  transform: rotate(90deg);
}
.section-title-toggle .section-count {
  font-weight: var(--sa-fw-regular);
  font-size: 0.85em;
  color: var(--sa-text-secondary);
}
.module-group-collapsible.is-collapsed {
  display: none;
}

/* Module group titles */
.module-group-title {
  font-size: var(--sa-font-xl);
  font-weight: var(--sa-fw-bold);
  color: var(--sa-text);
  margin: 20px 0 10px 0;
  padding: 0 4px;
  letter-spacing: 0.01em;
}
.module-group-title:first-child {
  margin-top: 8px;
}

/* Module cards */
.module-card {
  margin-bottom: var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  /* overflow: visible — иначе absolute-positioned .dropdown-menu (внутри
     .module-settings-content) обрезается границей card'а и пользователь
     видит лишь тонкую полоску снизу вместо overlay-меню. */
  overflow: visible;
  background: var(--sa-bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
}

.module-card-disabled {
  opacity: 0.72;
}

/* Highlighted Скоро-карточка (например «Метод Колмакова») — мигающая
   лампочка + cursor:pointer на всю карту. Полностью disabled-вид
   убираем (opacity 1.0), чтобы было ясно, что карточка кликабельна. */
.module-card-highlight {
  opacity: 1;
  cursor: pointer;
  border: 1px solid var(--sa-sand-border);
  background: var(--sa-sand-bg);
  transition: background 0.2s, border-color 0.2s;
}
.module-card-highlight:hover {
  border-color: var(--sa-sand-border-hover);
  background: var(--sa-sand-bg-hover);
}
.module-card-link {
  cursor: pointer;
}
/* Подсветка иконки выделенной карточки — статичная (без мигания/свечения).
   Иконка-SVG наследует currentColor, поэтому амбер-цвет применяется к ней. */
.module-icon.module-icon-blink {
  color: var(--sa-gold-icon);
}

.module-card-main {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 12px;
}

.module-icon {
  flex-shrink: 0;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-primary);
  text-align: center;
  font-size: 1.35rem;  /* фолбэк для эмодзи, если SVG не нашёлся */
  line-height: 1.2;
}
.module-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.module-card-stub .module-name {
  flex: 1;
  min-width: 0;
}

.module-card-body {
  flex: 1;
  min-width: 0;
}

.module-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.module-name {
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-2xl);
  color: var(--sa-text);
}

.module-subtext {
  font-size: var(--sa-font-md);
  color: var(--sa-text-secondary);
  margin-top: 4px;
}

.module-subtext-crosstab-summary {
  line-height: 1.35;
}

/* Кросс-таблицы: секции Баннеры / Вложенная */
.crosstab-section {
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--sa-bg-page);
}
.crosstab-section-header {
  display: flex;
  align-items: center;
}
.crosstab-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text);
  cursor: pointer;
}
.crosstab-check {
  width: 18px;
  height: 18px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}
.crosstab-mode-panel {
  animation: fadeIn 0.15s;
}
.crosstab-mode-panel.hidden {
  display: none;
}
/* .nested-row inherits .settings-row's display:flex — force column so the
   label stacks above the select. Without this override, .settings-row's
   row-flex puts the select next to a flex:1 label, and combined with
   flex-shrink:0 the select overflows the card by the label's width. */
.settings-row.nested-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 0;
  border-bottom: none;
}
.nested-row label {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin-bottom: 0;
  flex: none;
}
select.nested-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
  padding: 8px;
  font-size: var(--sa-font-lg);
  border-radius: 8px;
  border: 1px solid var(--sa-border);
  box-sizing: border-box;
}

.module-subtext-banner {
  margin-bottom: 6px;
}

.module-desc-wrap .desc-toggle {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-semibold);
  cursor: pointer;
  text-decoration: underline;
}

.module-desc-wrap .desc-long.hidden {
  display: none;
}

.module-desc-wrap .desc-short.hidden {
  display: none;
}

.hint-recommended {
  font-size: var(--sa-font-2xs);
  color: var(--sa-text-secondary);
}

.module-badge {
  font-size: var(--sa-font-2xs);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sa-bg-page);
  color: var(--sa-text-secondary);
}

.module-badge-locked {
  background: var(--sa-sand-bg-soft);
  color: var(--sa-sand-text);
  border: 1px solid var(--sa-sand-border);
  font-weight: var(--sa-fw-semibold);
}

.module-card-locked {
  opacity: 0.65;
}

/* iOS-style toggle — акцент --sa-primary */
.toggle-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Единый свитч: модули (.toggle-slider) и трансформации (.tx-toggle-ui) —
   один визуал. Геометрия через --sw-*; .tx-toggle-ui ниже задаёт компактный
   размер той же кнопки. */
.toggle-slider,
.tx-toggle-ui {
  --sw-w: 51px;
  --sw-h: 31px;
  --sw-knob: 27px;
  --sw-gap: 2px;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--sw-w);
  height: var(--sw-h);
  background: var(--sa-toggle-track);
  border-radius: var(--sw-h);
  transition: background 0.2s;
}

.toggle-slider::after,
.tx-toggle-ui::after {
  content: "";
  position: absolute;
  top: var(--sw-gap);
  left: var(--sw-gap);
  width: var(--sw-knob);
  height: var(--sw-knob);
  background: var(--sa-knob);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

.toggle-input:checked + .toggle-slider::after,
.tx-toggle input:checked + .tx-toggle-ui::after {
  transform: translateX(calc(var(--sw-w) - var(--sw-knob) - 2 * var(--sw-gap)));
}

.toggle-input:checked + .toggle-slider,
.tx-toggle input:checked + .tx-toggle-ui {
  background: var(--sa-primary);
}

.toggle-input:disabled + .toggle-slider,
.tx-toggle input:disabled + .tx-toggle-ui {
  opacity: 0.45;
}

.toggle-disabled {
  opacity: 0.5;
}

.module-settings-trigger {
  width: auto;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-2xl);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.module-settings-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.module-settings-content.open {
  /* 1400px, чтобы многосекционные модули (open_analysis: Переменные +
     Виды + Разбивка по баннеру ≈ 990px) не лили хвост на следующую
     карточку. Фикс max-height нужен для expand-transition. */
  max-height: 1400px;
  /* visible, чтобы абсолютный .dropdown-menu не обрезался. */
  overflow: visible;
  padding: 12px 16px;
  border-top: 1px solid var(--sa-border);
}

.turf-threshold {
  border-top: 1px solid var(--sa-border);
}

.settings-label {
  margin: 0 0 8px;
  font-size: var(--sa-font-lg);
  color: var(--sa-text-secondary);
  font-weight: var(--sa-fw-medium);
}

.module-disabled-hint {
  margin-top: 6px;
  font-size: var(--sa-font-md);
  color: var(--sa-error);
}

.search-input,
.reach-threshold-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: var(--sa-font-xl);
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-text);
}

.reach-threshold-input::placeholder {
  color: var(--sa-text-secondary);
}

.search-input:focus,
.reach-threshold-input:focus {
  outline: none;
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 2px var(--sa-primary-muted);
}

.settings-hint {
  margin: 6px 0 0;
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
}

/* Dropdown checklist for banner selection */
.dropdown-select {
  position: relative;
  margin-top: 8px;
  z-index: 50;
}
/* Открытый дропдаун — ПОВЕРХ соседних. У всех .dropdown-select одинаковый
   z-index:50 (каждый = отдельный stacking context), поэтому z-index:9999 у
   .dropdown-menu действует только ВНУТРИ своего родителя: триггер соседа,
   идущий ПОЗЖЕ в DOM (напр. «Выбрано строк» под «Баннерами»), рисовался
   поверх открытого меню. Поднимаем контекст открытого родителя целиком.
   Старые WebView без :has() деградируют до прежнего поведения. */
.dropdown-select:has(> .dropdown-menu:not(.hidden)) {
  /* Открытое меню — выше соседних тоггл-баров И выше фикс-футера (z-index:55),
     чтобы у нижних карточек оно не пряталось за «Запустить». Закрытые бары
     остаются 50 (под футером — не перекрывают кнопку). */
  z-index: 60;
}
.dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: var(--sa-font-lg);
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.dropdown-toggle:hover {
  border-color: var(--sa-primary);
}
.dropdown-chevron {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-md);
  display: inline-block;
  transition: transform 0.18s ease;
}
/* Открытое меню → переворот шеврона (класс .is-open ставит JS вместо подмены глифа). */
.dropdown-toggle.is-open .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-menu {
  /* Absolute, относительно .dropdown-select (у того position: relative).
     Раньше было fixed + JS getBoundingClientRect — в Telegram WebView на iOS
     hit-area съезжала и tap по .dropdown-toggle не открывал меню. Absolute
     избавляет от зависимости от viewport/scroll/keyboard. */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 9999;
  padding: 6px 0;
}
.dropdown-search {
  width: calc(100% - 16px);
  margin: 4px 8px 6px;
  padding: 8px 10px;
  font-size: var(--sa-font-md);
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  background: var(--sa-bg-page);
  box-sizing: border-box;
}
.dropdown-search:focus {
  outline: none;
  border-color: var(--sa-primary);
}
.battery-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.battery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
  font-size: var(--sa-font-md);
}
.battery-item:hover {
  background: var(--sa-primary-muted);
}
.battery-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--sa-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.battery-item-label {
  flex: 1;
  min-width: 0;
  color: var(--sa-text);
}

.turf-pin-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--sa-border, #d1d5db);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--sa-font-md);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.turf-pin-btn:hover {
  opacity: 0.8;
}
.turf-pin-btn.turf-pin-active {
  opacity: 1;
  color: var(--sa-primary, #3b82f6);
  background: var(--sa-primary-muted, #dbeafe);
  border-color: var(--sa-primary, #3b82f6);
}

.battery-item-full {
  align-items: flex-start;
  padding: 10px 8px;
}
.battery-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.battery-item-title {
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text);
  font-size: var(--sa-font-md);
  line-height: 1.3;
}
.battery-item-preview {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  line-height: 1.35;
  word-break: break-word;
}
.battery-item-meta {
  font-size: var(--sa-font-2xs);
  color: var(--sa-text-secondary);
  margin-top: 2px;
}
.battery-item-notes {
  font-size: var(--sa-font-2xs);
  color: var(--sa-primary);
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--sa-primary-muted);
  border-radius: 4px;
  line-height: 1.35;
}
.battery-item-total {
  background: var(--sa-primary-muted);
  border-radius: 6px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: var(--sa-font-md);
}
/* ── Пикер строк, фаза 2: стрелки перестановки ↑↓ ────────────────────────────
   Кнопки в конце строки (label = flex, margin-left:auto прижимает вправо).
   При активном поиске (.rows-searching на .dropdown-menu) прячутся — двигать
   в отфильтрованном списке нельзя, соседи скрыты. */
.dropdown-item .row-move {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  flex: 0 0 auto;
}
.row-move-btn {
  border: 1px solid var(--sa-border);
  background: var(--sa-bg-card);
  border-radius: 6px;
  width: 26px;
  height: 24px;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  color: var(--sa-text-secondary);
  cursor: pointer;
}
.row-move-btn:hover {
  color: var(--sa-primary);
  border-color: var(--sa-primary);
}
.dropdown-menu.rows-searching .row-move {
  display: none;
}
.dropdown-item:hover {
  background: var(--sa-primary-muted);
}
.dropdown-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--sa-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.dropdown-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pills */
.pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--sa-font-md);
  border-radius: 8px;
  background: var(--sa-bg-page);
  color: var(--sa-text);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pill:hover {
  background: var(--sa-primary-muted);
  border-color: var(--sa-border);
}

.pill-selected {
  background: var(--sa-primary-muted-strong);
  color: var(--sa-primary);
  border-color: var(--sa-primary-border);
  font-weight: var(--sa-fw-medium);
}

/* Анализ сегментов — список (группы крупно, вопрос-источник мелким) */
.ds-segment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-seg-item {
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ds-seg-item.ds-seg-selected {
  border-color: var(--sa-primary-border-strong);
  background: var(--sa-primary-muted);
}
.ds-seg-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.ds-seg-cb {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--sa-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.ds-seg-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-seg-title {
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text);
}
.ds-seg-src {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  line-height: 1.35;
}
.ds-seg-groups {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 26px;
}
.ds-seg-item.ds-seg-selected .ds-seg-groups {
  display: flex;
}
.ds-seg-groups-label {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
}
.ds-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sa-font-xs);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--sa-border);
  color: var(--sa-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ds-group-chip.ds-group-on {
  background: var(--sa-primary-muted-strong);
  color: var(--sa-primary);
  border-color: var(--sa-primary-border);
}
.ds-group-chip input {
  width: 13px;
  height: 13px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}
.time-ms { position: relative; margin-top: 6px; }
.time-ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.time-ms-chips:not(:empty) { margin-bottom: 6px; }
.time-ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sa-primary-muted-strong); color: var(--sa-primary);
  border-radius: 8px; padding: 3px 7px 3px 11px; font-size: var(--sa-font-xs);
}
.time-ms-chip .ms-x { cursor: pointer; font-style: normal; font-size: var(--sa-font-2xl); line-height: 1; opacity: 0.6; }
.time-ms-chip .ms-x:hover { opacity: 1; }
.time-ms-search {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--sa-border); border-radius: 8px;
  font-size: var(--sa-font-md); background: var(--sa-bg-card); color: inherit;
}
.time-ms-search:focus { outline: none; border-color: var(--sa-primary); }
.time-ms-dd {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--sa-bg-card); border: 1px solid var(--sa-border); border-radius: 8px;
  max-height: 200px; overflow-y: auto; margin-top: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.time-ms-opt { padding: 8px 11px; font-size: var(--sa-font-sm); cursor: pointer; }
.time-ms-opt:hover { background: var(--sa-primary-muted); }
.time-ms-empty { padding: 8px 11px; font-size: var(--sa-font-xs); color: var(--sa-text-secondary); }
.settings-subsection {
  font-size: var(--sa-font-xs);
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text-secondary);
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--sa-border);
}
.axes-ex {
  margin: 8px 0 0 27px;
  background: var(--sa-primary-muted);
  border-radius: 8px;
  padding: 10px 12px;
}
.axes-ex-cap {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin-bottom: 7px;
}
.axes-ex table { border-collapse: collapse; width: 100%; font-size: var(--sa-font-sm); }
.axes-ex th {
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text-secondary);
  text-align: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--sa-border);
}
.axes-ex th.l, .axes-ex td.l { text-align: left; }
.axes-ex td {
  text-align: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--sa-border);
}
.axes-ex .o { color: var(--sa-text-secondary); font-size: var(--sa-font-2xs); margin-left: 3px; }
.axes-ex .up { color: var(--sa-success); font-weight: var(--sa-fw-medium); }
.axes-ex .dn { color: var(--sa-danger); font-weight: var(--sa-fw-medium); }
.axes-ex .lt { color: var(--sa-primary); font-weight: var(--sa-fw-medium); }
.axes-ex-legend {
  font-size: var(--sa-font-2xs);
  color: var(--sa-text-secondary);
  line-height: 1.55;
  margin-top: 8px;
}
.ds-group-static {
  font-size: var(--sa-font-xs);
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--sa-bg-page);
  color: var(--sa-text-secondary);
}
.ds-group-note {
  font-size: var(--sa-font-2xs);
  color: var(--sa-text-secondary);
}
.ds-filter-var {
  margin-top: 4px;
  max-width: 100%;
}
.ds-filter-values {
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}
.ds-fval-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sa-font-sm);
  color: var(--sa-text);
  cursor: pointer;
}
.ds-fval-item input {
  width: 14px;
  height: 14px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}

/* Footer */
.footer-spacer {
  height: 1px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sa-space-4);
  background: var(--sa-bg-card);
  border-top: 1px solid var(--sa-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  /* z-index МЕЖДУ закрытым тоггл-баром (.dropdown-select 50) и открытым
     дропдауном (:has(open) 60): кнопка «Запустить» поверх закрытых баров (иначе
     «Выбрано строк» рисуется над футером в части WebView — скрин Сергея), но
     открытое меню строк/баннеров (60) остаётся видимым НАД футером. */
  z-index: 55;
}

.footer #balance {
  margin: 0 0 12px;
  font-size: var(--sa-font-lg);
  color: var(--sa-text-secondary);
}

.footer-brand {
  margin: 12px 0 0;
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  text-align: center;
}

.btn-launch {
  width: 100%;
  padding: 14px 24px;
  font-size: var(--sa-font-xl);
  font-weight: var(--sa-fw-semibold);
  border: none;
  border-radius: var(--sa-radius);
  background: var(--sa-primary);
  color: var(--sa-button-text, #ffffff);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, transform 0.1s;
}

.btn-launch:hover:not(:disabled) {
  background: var(--sa-primary-hover);
}

.btn-launch:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-launch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Трансформация данных (bin/recode) ──────────────────────────────── */

/* Секция может быть высокой — позволяем развёрнутому контенту расти без обрезки.
   Scroll — внутри self-constrained child'ов (reference list, groups). */
#accordion-transform-content.open {
  max-height: none;
}

.tx-empty {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-md);
  padding: 12px 0;
  line-height: 1.4;
}

.tx-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.tx-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  background: var(--sa-bg-soft, #f7f9fb);
}

.tx-card.tx-disabled .tx-body {
  opacity: 0.5;
}

.tx-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.tx-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Компактный размер того же свитча (визуал — в общем блоке .toggle-slider) */
.tx-toggle-ui {
  --sw-w: 34px;
  --sw-h: 20px;
  --sw-knob: 16px;
}

.tx-body {
  flex: 1;
  min-width: 0;
}

.tx-title {
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-xl);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-detail {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-actions {
  display: inline-flex;
  gap: 4px;
}

.tx-actions button {
  background: transparent;
  border: none;
  color: var(--sa-text-secondary);
  cursor: pointer;
  font-size: var(--sa-font-2xl);
  padding: 4px 8px;
  border-radius: 6px;
}

.tx-actions button:hover {
  background: var(--sa-hover-veil);
  color: var(--sa-text);
}

.tx-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tx-add {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  background: var(--sa-bg-soft, #f0f4f8);
  border: 1px dashed var(--sa-border);
  border-radius: 10px;
  color: var(--sa-primary);
  font-weight: var(--sa-fw-medium);
  font-size: var(--sa-font-lg);
  cursor: pointer;
}

.tx-add:hover {
  background: var(--sa-chip-bg);
}

/* Editor panel */
.tx-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.tx-editor-head {
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-2xl);
  color: var(--sa-text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sa-border);
}

.tx-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tx-field label {
  font-size: var(--sa-font-sm);
  color: var(--sa-text-secondary);
  font-weight: var(--sa-fw-medium);
}

.tx-field input[type="text"],
.tx-field input[type="number"],
.tx-field select {
  padding: 8px 10px;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  font-size: var(--sa-font-lg);
  color: var(--sa-text);
  font-family: inherit;
}

.tx-field select {
  background-image: none;
}

.tx-field-row {
  display: flex;
  gap: 8px;
}

.tx-field-row .tx-field {
  flex: 1;
  min-width: 0;
}

/* Bin intervals table */
.tx-bin-list,
.tx-grp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.tx-bin-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tx-bin-from,
.tx-bin-to {
  width: 72px;
  flex-shrink: 0;
}

.tx-bin-dash {
  color: var(--sa-text-secondary);
  flex-shrink: 0;
}

.tx-bin-label {
  flex: 1;
  min-width: 0;
}

.tx-bin-del,
.tx-grp-del {
  background: transparent;
  border: none;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-3xl);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.tx-bin-del:hover,
.tx-grp-del:hover {
  background: var(--sa-danger-veil);
  color: var(--sa-danger);
}

.tx-bin-add,
.tx-grp-add {
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--sa-border);
  border-radius: 8px;
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  cursor: pointer;
  align-self: flex-start;
}

/* Recode: groups */
.tx-grp-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tx-grp-label {
  flex: 1;
  min-width: 120px;
}

.tx-grp-vals {
  flex: 1;
  min-width: 100px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--sa-font-md) !important;
}

/* Source value reference list */
.tx-src-ref {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-inset);
  padding: 6px 8px;
  font-size: var(--sa-font-sm);
}

.tx-src-ref-head {
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xs);
  padding: 2px 0 6px;
}

.tx-src-ref-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.tx-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--sa-primary);
  min-width: 28px;
}

.tx-src-ref-empty {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
  font-style: italic;
  padding: 4px 0;
}

/* Other toggle */
.tx-field-other {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tx-other-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sa-font-md);
  color: var(--sa-text);
  cursor: pointer;
  flex: 1;
  min-width: 200px;
}

.tx-field-other input[type="text"] {
  flex: 1;
  min-width: 140px;
}

/* «Что внутри переменной» — значения источника (T0+T2) */
.tx-vi {
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-inset);
  padding: 8px 10px;
  margin: 0 0 12px;
  font-size: var(--sa-font-sm);
}
.tx-vi-head {
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xs);
  padding: 0 0 6px;
}
.tx-vi-body {
  max-height: 200px;
  overflow-y: auto;
}
.tx-vi-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.tx-vi-lbl {
  flex: 1;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-vi-n {
  color: var(--sa-text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--sa-font-xs);
  white-space: nowrap;
}
.tx-vi-range {
  color: var(--sa-text);
  padding: 2px 0;
}
.tx-vi-stats {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xs);
  padding: 6px 0 0;
}
.tx-vi-empty {
  color: var(--sa-text-secondary);
  font-style: italic;
}
/* мини-гистограмма */
.tx-hist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 48px;
  margin: 6px 0 2px;
}
.tx-hist-bar {
  flex: 1;
  min-width: 3px;
  background: var(--sa-primary);
  opacity: 0.65;
  border-radius: 2px 2px 0 0;
}
.tx-hist-axis {
  display: flex;
  justify-content: space-between;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xs);
  font-variant-numeric: tabular-nums;
}
/* блок «что внутри» в условии фильтра — отступ между условиями */
.filter-cond-wrap {
  margin-bottom: 10px;
}
.filter-cond-wrap .tx-vi {
  margin-top: 6px;
}
/* живой счётчик попаданий в интервал bin */
.tx-bin-count,
.tx-bin-remaining {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-bin-count {
  min-width: 56px;
  text-align: right;
}

/* Editor footer */
.tx-editor-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.tx-cancel,
.tx-save {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
  border: 1px solid transparent;
}

.tx-cancel {
  background: transparent;
  border-color: var(--sa-border);
  color: var(--sa-text-secondary);
}

.tx-save {
  background: var(--sa-primary);
  color: var(--sa-button-text);
}

.tx-save:hover {
  background: var(--sa-primary-hover);
}

.tx-save:disabled {
  background: var(--sa-border);
  color: var(--sa-text-secondary);
  cursor: not-allowed;
}

/* Hint-блок над формой Count: что вообще делает модуль */
.tx-count-hint {
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--sa-primary-muted);
  border-left: 3px solid var(--sa-primary);
  border-radius: 6px;
  color: var(--sa-text);
  font-size: var(--sa-font-md);
  line-height: 1.45;
}

/* Превью результата (создаваемая переменная + диапазон) */
.tx-count-preview {
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: var(--sa-bg-page);
  border: 1px dashed var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
  color: var(--sa-text-secondary);
}
.tx-count-preview code {
  background: var(--sa-primary-muted);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  color: var(--sa-text);
  font-size: var(--sa-font-md);
}
.tx-count-preview b {
  color: var(--sa-text);
  font-weight: var(--sa-fw-semibold);
}

/* ── std_residuals pairs UI ─────────────────────────────────────────── */

.sr-pairs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}

.sr-pair-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--sa-bg-soft, #f7f9fb);
  border: 1px solid var(--sa-border);
  border-radius: 8px;
}

.sr-pair-row-label,
.sr-pair-col-label {
  flex: 1 1 40%;
  min-width: 0;
  font-size: var(--sa-font-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-pair-x {
  flex: 0 0 auto;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-2xl);
}

.sr-pair-sig {
  flex: 0 0 auto;
  font-size: var(--sa-font-2xs);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-primary, #3b82f6);
  background: var(--sa-primary-muted, #dbeafe);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Generic 💡 info-hint block — used in std_residuals (and reusable elsewhere) */
.settings-info-block {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--sa-primary-muted, #eff6ff);
  border-left: 3px solid var(--sa-primary, #3b82f6);
  border-radius: 6px;
  font-size: var(--sa-font-sm);
  line-height: 1.45;
}
.settings-info-title {
  font-weight: var(--sa-fw-semibold);
  margin-bottom: 6px;
  color: var(--sa-text, #1f2937);
}
.settings-info-body p {
  margin: 4px 0;
  color: var(--sa-text-secondary, #4b5563);
}
.settings-info-body ul {
  margin: 4px 0 4px 18px;
  padding: 0;
  color: var(--sa-text-secondary, #4b5563);
}
.settings-info-body li {
  margin: 2px 0;
}
.settings-info-warn {
  margin-top: 6px !important;
  color: var(--sa-warnhl-text) !important;
  background: var(--sa-warnhl-bg);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid var(--sa-warnhl-border);
}

.sr-pair-del {
  background: transparent;
  border: none;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-3xl);
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
}

.sr-pair-del:hover {
  background: var(--sa-danger-veil);
  color: var(--sa-danger);
}

.sr-pair-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--sa-border);
  border-radius: 10px;
  background: var(--sa-bg-inset);
}

.sr-pair-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sr-pair-field {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-pair-field label {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  font-weight: var(--sa-fw-medium);
}

.sr-pair-select,
.sr-sig-select {
  padding: 7px 10px;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  font-size: var(--sa-font-md);
  font-family: inherit;
  color: var(--sa-text);
  width: 100%;
}

.sr-pair-add-btn {
  padding: 8px 14px;
  background: var(--sa-primary);
  color: var(--sa-button-text);
  border: none;
  border-radius: 8px;
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
  align-self: flex-start;
}

.sr-pair-add-btn:hover {
  background: var(--sa-primary-hover);
}

.sr-sig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sa-border);
}

.sr-sig-label {
  font-size: var(--sa-font-md);
  color: var(--sa-text);
  font-weight: var(--sa-fw-medium);
}

.sr-sig-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 110px;
}

/* RIM raking targets (weighting accordion) */
.rim-block {
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--sa-bg-page);
  margin-top: 8px;
}
.rim-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rim-var-select,
.rim-joint-var-select,
.rim-kind-select {
  flex: 1 1 auto;
  padding: 6px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  background: var(--sa-bg-card);
  font-size: var(--sa-font-lg);
}
.rim-kind-select {
  flex: 0 0 auto;
  min-width: 130px;
  font-weight: var(--sa-fw-medium);
}
.rim-row-vars {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rim-row-vars > * {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
}
.rim-joint-vars > .rim-joint-var-select {
  flex: 1 1 calc(33% - 4px);
  min-width: 0;
}
.rim-joint-add-slot {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px dashed var(--sa-primary, #3b82f6);
  background: transparent;
  color: var(--sa-primary, #3b82f6);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--sa-font-md);
  white-space: nowrap;
}
.rim-joint-add-slot:hover {
  background: var(--sa-primary-muted, #eff6ff);
}
.rim-remove-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--sa-border);
  background: var(--sa-bg-card);
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-2xl);
  line-height: 1;
  cursor: pointer;
}
.rim-remove-btn:hover {
  background: var(--sa-danger-soft-bg);
  color: var(--sa-error);
  border-color: var(--sa-danger-soft-border);
}
.rim-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.rim-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sa-font-md);
}
.rim-cat-label {
  flex: 1 1 auto;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rim-cat-input {
  flex: 0 0 64px;
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--sa-border);
  border-radius: 4px;
  font-size: var(--sa-font-md);
  text-align: right;
}
.rim-cat-suffix {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-md);
}
.rim-sum {
  margin-top: 6px;
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-medium);
}
.rim-sum-ok {
  color: var(--sa-success);
}
.rim-sum-warn {
  color: var(--sa-warning);
}

/* ─── Melt-pains modal (Pain-блок → длинная таблица) ──────────────────── */

.mp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mp-modal.hidden {
  display: none !important;
}
.mp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.mp-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--sa-bg-card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
@media (min-width: 600px) {
  .mp-modal {
    align-items: center;
  }
  .mp-modal-card {
    border-radius: 16px;
    max-height: 85vh;
  }
}
.mp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sa-border);
  flex-shrink: 0;
}
.mp-modal-head h2 {
  margin: 0;
  font-size: var(--sa-font-2xl);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text);
}
.mp-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-4xl);
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.mp-close:hover {
  background: var(--sa-hover-veil);
  color: var(--sa-text);
}
.mp-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.mp-modal-foot {
  border-top: 1px solid var(--sa-border);
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mp-btn {
  padding: 10px 18px;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-text);
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
}
.mp-btn:hover {
  background: var(--sa-bg-page);
}
.mp-btn-primary {
  background: var(--sa-primary);
  color: var(--sa-button-text);
  border-color: var(--sa-primary);
}
.mp-btn-primary:hover {
  background: var(--sa-primary-hover);
  border-color: var(--sa-primary-hover);
}
.mp-btn:disabled,
.mp-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Описание + примеры */
.mp-intro {
  background: var(--sa-primary-muted);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: var(--sa-font-md);
  line-height: 1.45;
  color: var(--sa-text);
}
.mp-intro b {
  color: var(--sa-info-accent);
}
.mp-intro ul {
  margin: 6px 0 0 0;
  padding-left: 20px;
}

.mp-stage {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
}
.mp-stage span {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--sa-bg-page);
}
.mp-stage span.active {
  background: var(--sa-primary);
  color: var(--sa-button-text);
}

/* Блок (Платежи / Накопления) */
.mp-block {
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.mp-block-head {
  padding: 10px 14px;
  background: var(--sa-bg-page);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-xl);
}
.mp-block-name {
  flex: 1 1 auto;
}
.mp-block-stat {
  font-weight: var(--sa-fw-regular);
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
}
.mp-block-themes {
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sa-font-md);
  padding: 4px 0;
  border-bottom: 1px solid var(--sa-border);
}
.mp-theme-row:last-child {
  border-bottom: none;
}
.mp-theme-row input[type="checkbox"] {
  flex-shrink: 0;
}
.mp-theme-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sa-text);
}
.mp-theme-pill {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--sa-primary-muted);
  color: var(--sa-info-accent);
  font-size: var(--sa-font-2xs);
  font-weight: var(--sa-fw-medium);
}
.mp-theme-warn {
  background: var(--sa-warn-bg);
  color: var(--sa-warning);
}

.mp-summary {
  padding: 14px;
  background: var(--sa-bg-page);
  border-radius: 10px;
  margin-top: 6px;
  font-size: var(--sa-font-md);
  line-height: 1.5;
}
.mp-summary b {
  color: var(--sa-text);
}
.mp-tip {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--sa-amber-bg);
  border: 1px solid var(--sa-amber-border);
  border-radius: 10px;
  font-size: var(--sa-font-md);
  line-height: 1.5;
  color: var(--sa-amber-text);
}
.mp-tip b {
  color: var(--sa-amber-text-strong);
}
.mp-tip code {
  background: var(--sa-amber-veil);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--sa-font-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.mp-error {
  padding: 12px;
  background: var(--sa-danger-soft-bg);
  color: var(--sa-error);
  border-radius: 8px;
  font-size: var(--sa-font-md);
  margin-bottom: 12px;
}

.mp-spinner {
  text-align: center;
  padding: 32px;
  color: var(--sa-text-secondary);
}
.mp-spinner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: var(--sa-primary);
  border-radius: 50%;
  animation: mp-bounce 1.2s infinite ease-in-out;
}
.mp-spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}
.mp-spinner-dot:nth-child(3) {
  animation-delay: -0.32s;
}
@keyframes mp-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.mp-success {
  text-align: center;
  padding: 16px 12px;
}
.mp-success-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.mp-success h3 {
  margin: 0 0 8px;
  font-size: var(--sa-font-3xl);
  color: var(--sa-success);
}

/* Распознать кнопку melt-pains в общем списке + */
.tx-add[data-type="melt-pains"] {
  flex-basis: 100%;
}

/* Customize column names */
.mp-customize {
  margin-top: 14px;
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  overflow: hidden;
}
.mp-customize-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--sa-bg-page);
  border: none;
  cursor: pointer;
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-medium);
  color: var(--sa-text);
}
.mp-customize-toggle:hover {
  background: var(--sa-bg-hover);
}
.mp-customize-chevron {
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-md);
  display: inline-block;
  transition: transform 0.18s ease;
}
.mp-customize-toggle[aria-expanded="true"] .mp-customize-chevron {
  transform: rotate(90deg);
}
.mp-customize-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sa-bg-card);
}
.mp-customize-hint {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mp-customize-hint code {
  background: var(--sa-bg-page);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: var(--sa-font-xs);
}
.mp-cn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sa-font-md);
}
.mp-cn-row label {
  flex: 0 0 110px;
  color: var(--sa-text-secondary);
}
.mp-cn-input {
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.mp-customize-reset {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: var(--sa-font-xs);
  background: transparent;
  border: 1px dashed var(--sa-border);
  border-radius: 6px;
  color: var(--sa-text-secondary);
  cursor: pointer;
}
.mp-customize-reset:hover {
  background: var(--sa-bg-page);
  color: var(--sa-text);
}

/* Найденные шкалы внутри блока */
.mp-series-section {
  padding: 8px 14px 6px;
  background: var(--sa-primary-veil);
  border-bottom: 1px solid var(--sa-border);
}
.mp-series-head {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mp-series-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--sa-font-md);
}
.mp-series-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  background: var(--sa-primary);
  color: var(--sa-button-text);
  font-size: var(--sa-font-2xs);
  font-weight: var(--sa-fw-semibold);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.mp-series-label {
  flex: 1 1 auto;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-series-input {
  flex: 0 0 110px;
  padding: 4px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 5px;
  font-size: var(--sa-font-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ─── Фильтр выборки (Select Cases / dedup / random sample) ─────────────── */

.filter-header {
  padding-top: 14px;
  margin-bottom: 18px;
}
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sa-font-lg);
  cursor: pointer;
  user-select: none;
}
.filter-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}
.filter-hint {
  margin-top: 6px;
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  line-height: 1.4;
}
.filter-hint-sm {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin-top: 4px;
}
.filter-hint-sm code {
  background: var(--sa-bg-page);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: var(--sa-font-xs);
}
.filter-section {
  margin-top: 16px;
  padding: 14px 14px;
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  background: var(--sa-bg-card);
}
.filter-section.filter-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.filter-section-title {
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-semibold);
  margin-bottom: 8px;
  color: var(--sa-text);
}
.filter-subtoggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sa-font-md);
  cursor: pointer;
  user-select: none;
}
.filter-subtoggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--sa-primary);
  cursor: pointer;
}
.filter-subbody {
  margin-top: 8px;
  padding-left: 24px;
}
.filter-label {
  display: block;
  font-size: var(--sa-font-sm);
  color: var(--sa-text-secondary);
  margin-bottom: 4px;
}
.filter-cond-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.filter-cond-row select,
.filter-cond-row input {
  flex: 1 1 100px;
  min-width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
  background: var(--sa-bg-card);
}
.filter-cond-row select.filter-cond-var {
  flex: 2 1 140px;
}
.filter-cond-row select.filter-cond-op {
  flex: 1 1 110px;
}
.filter-cond-del {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sa-border);
  background: var(--sa-bg-card);
  border-radius: 6px;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-3xl);
  cursor: pointer;
}
.filter-cond-del:hover {
  background: var(--sa-danger-soft-bg);
  color: var(--sa-error);
  border-color: var(--sa-danger-soft-border);
}
.filter-add-cond {
  width: 100%;
  padding: 8px;
  background: var(--sa-bg-page);
  border: 1px dashed var(--sa-border);
  border-radius: 8px;
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  cursor: pointer;
  margin-top: 4px;
}
.filter-add-cond:hover {
  background: var(--sa-chip-bg);
}
/* ── Группы условий (двухуровневый фильтр «(A И B) ИЛИ C»). Читаемость
   «что с чем» (фидбэк Сергея 2026-07-01): именованные «Группа N» с плашкой-
   заголовком (граница блока видна сразу), скоуп-подпись у переключателя
   И/ИЛИ («Внутри группы N: …» — не спутать с логикой МЕЖДУ группами), и
   боковая НЕИНТЕРАКТИВНАЯ плашка «ЛЮБАЯ ИЗ ГРУПП» вместо строчного
   разделителя «ИЛИ» (визуально не похожа на переключатель/выбор). ────────── */
.filter-groups-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.filter-groups-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.filter-groups-badge {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-groups-badge span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--sa-font-xs);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-primary);
  background: var(--sa-chip-bg);
  border-radius: 8px;
  padding: 10px 4px;
  letter-spacing: 0.02em;
  text-align: center;
}
.filter-group {
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  background: var(--sa-bg-page);
  overflow: hidden;
}
.filter-group-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  background: var(--sa-chip-bg);
}
.filter-group-title {
  font-size: var(--sa-font-sm);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-primary);
}
.filter-group-body {
  padding: 12px 12px 10px;
}
.filter-group-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sa-font-sm);
  color: var(--sa-text-secondary);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.filter-conj-select {
  font-size: var(--sa-font-sm);
  color: var(--sa-text);
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--sa-bg-card);
  cursor: pointer;
}
.filter-group-del {
  border: none;
  background: none;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
  padding: 2px 4px;
  cursor: pointer;
}
.filter-group-del:hover {
  color: var(--sa-error);
}
.filter-add-group {
  width: 100%;
  padding: 8px;
  background: var(--sa-chip-bg);
  border: 1px solid var(--sa-primary);
  border-radius: 8px;
  color: var(--sa-primary);
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-semibold);
  cursor: pointer;
  margin-top: 8px;
}
.filter-add-group:hover {
  background: var(--sa-chip-bg-strong);
}
.filter-summary {
  margin-top: 12px;
  font-size: var(--sa-font-sm);
  color: var(--sa-text-secondary);
  line-height: 1.6;
}
.filter-summary:empty {
  display: none;
}
.filter-summary-expr {
  color: var(--sa-text);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.filter-row input[type="number"] {
  flex: 0 0 100px;
  padding: 6px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
}
.filter-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sa-font-md);
  cursor: pointer;
  user-select: none;
}
.filter-radio input {
  width: 14px;
  height: 14px;
  accent-color: var(--sa-primary);
}
.filter-subbody select[multiple] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
  background: var(--sa-bg-card);
}

/* ─── Count Values editor (4-я кнопка трансформаций) ────────────────────── */

.tx-count-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  padding: 4px 8px;
  margin-top: 4px;
  background: var(--sa-bg-card);
}
.tx-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--sa-font-md);
  cursor: pointer;
}
.tx-count-row:hover {
  background: var(--sa-bg-page);
  border-radius: 4px;
}
.tx-count-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--sa-primary);
}
.tx-count-filter {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  font-size: var(--sa-font-md);
  margin-bottom: 4px;
}

.tx-count-section-title {
  font-size: var(--sa-font-2xs);
  font-weight: var(--sa-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sa-text-secondary);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--sa-border);
  margin-bottom: 4px;
}
.tx-count-section-title:not(:first-child) {
  margin-top: 8px;
}
.tx-count-row.tx-count-mr {
  padding: 6px 0;
}
.tx-count-row.tx-count-mr b {
  color: var(--sa-text);
}
/* «Что в наборе» — раскрывашка с колонками MR-набора и охватом каждой */
.tx-mri {
  margin: 0 0 4px 28px;
  font-size: var(--sa-font-xs);
}
.tx-mri-sum {
  cursor: pointer;
  color: var(--sa-text-secondary);
  padding: 2px 0;
  user-select: none;
}
.tx-mri-sum:hover {
  color: var(--sa-text);
}
.tx-mri-body {
  max-height: 220px;
  overflow-y: auto;
  border-left: 2px solid var(--sa-border);
  padding: 2px 0 2px 10px;
  margin: 2px 0 4px;
}
.tx-mri-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.tx-mri-lbl {
  flex: 1;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-mri-pct {
  color: var(--sa-text);
  font-weight: var(--sa-fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-mri-n {
  color: var(--sa-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

/* ─── Dashboard (главная страница TWA) ─────────────────────────────────── */

#dashboard {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 80px;
}
.dash-header {
  text-align: center;
  padding: 16px 8px 16px;
}
.dash-hero {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  margin: 0 auto 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Hero-картинка наверху #content (project-mode), над инфо о датасете */
.content-hero {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  margin: 0 auto 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Compact info-line под welcome.jpg: «📊 1500 строк · 485 переменных» */
.dataset-info {
  text-align: center;
  font-size: var(--sa-font-lg);
  color: var(--sa-text-secondary);
  margin: 0 0 8px;
}

/* Аккордеон «О создателе» в header — отступ от subtitle/title */
.header-about {
  margin-top: 12px;
}
.dash-logo {
  font-size: 56px;
  margin-bottom: 8px;
}
.dash-header h1 {
  margin: 0 0 6px;
  font-size: var(--sa-font-4xl);
  font-weight: var(--sa-fw-bold);
  color: var(--sa-text);
  letter-spacing: -0.3px;
}
.dash-subtitle {
  margin: 0;
  font-size: var(--sa-font-md);
  color: var(--sa-text-secondary);
  line-height: 1.45;
}
.dash-balance {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--sa-primary-muted);
  border-radius: 10px;
  font-size: var(--sa-font-md);
  color: var(--sa-text);
  text-align: center;
}
.dash-balance b {
  color: var(--sa-primary);
  font-weight: var(--sa-fw-semibold);
}
.dash-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.dash-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--sa-bg-card);
  border: 1px solid var(--sa-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  font-family: inherit;
}
.dash-card:hover, .dash-card:focus {
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.dash-card:active {
  transform: scale(0.98);
}
.dash-card-primary {
  background: var(--sa-primary);
  color: var(--sa-button-text);
  border-color: var(--sa-primary);
}
.dash-card-primary .dash-card-desc {
  color: rgba(255, 255, 255, 0.85);
}
.dash-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}
.dash-card:not(.dash-card-primary) .dash-card-icon {
  background: var(--sa-primary-muted);
}
.dash-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.dash-card-title {
  font-size: var(--sa-font-2xl);
  font-weight: var(--sa-fw-semibold);
  margin-bottom: 2px;
  color: inherit;
}
.dash-card-desc {
  font-size: var(--sa-font-sm);
  color: var(--sa-text-secondary);
  line-height: 1.3;
}
.dash-section {
  margin-top: 8px;
}
.dash-section-title {
  font-size: var(--sa-font-md);
  font-weight: var(--sa-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sa-text-secondary);
  margin: 0 0 10px;
  padding-left: 4px;
}
.dash-project {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sa-bg-card);
  border: 1px solid var(--sa-border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.06s ease;
}
.dash-project:hover {
  background: var(--sa-bg-page);
}
/* Вход в демо-проект — пунктир, чтобы не путался с реальными проектами юзера */
.dash-project--demo {
  border-style: dashed;
  background: transparent;
}
.dash-project:active {
  transform: scale(0.99);
}
.dash-project-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--sa-primary-muted);
  border-radius: 8px;
}
.dash-project-body {
  flex: 1 1 auto;
  min-width: 0;
}
.dash-project-name {
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.dash-project-meta {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
}
.dash-project-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--sa-purple-bg);
  color: var(--sa-purple-badge-text);
  font-size: var(--sa-font-2xs);
  border-radius: 8px;
  font-weight: var(--sa-fw-medium);
}
.dash-project-chevron {
  flex: 0 0 auto;
  color: var(--sa-text-secondary);
  font-size: 1.4rem;
  line-height: 1;
}

/* Empty state (новый юзер, 0 проектов) */
.dash-empty .dash-section-title {
  display: none;
}
.dash-empty-state {
  text-align: center;
  padding: 28px 16px;
  background: var(--sa-bg-card);
  border: 1px dashed var(--sa-border);
  border-radius: 14px;
}
.dash-empty-icon {
  font-size: 42px;
  margin-bottom: 10px;
}
.dash-empty-title {
  font-size: var(--sa-font-2xl);
  font-weight: var(--sa-fw-semibold);
  margin-bottom: 8px;
  color: var(--sa-text);
}
.dash-empty-desc {
  font-size: var(--sa-font-md);
  color: var(--sa-text-secondary);
  line-height: 1.5;
}
.dash-empty-desc b {
  color: var(--sa-primary);
}

/* ─── Единый header для dashboard и project mode ───────────────────────── */

#app-header {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 8px 12px;
  text-align: center;
}
.header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-sm);
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
  margin-bottom: 12px;
  font-family: inherit;
}
.header-back:hover {
  background: var(--sa-bg-page);
  color: var(--sa-text);
}
.header-back-arrow {
  font-size: var(--sa-font-2xl);
  line-height: 1;
}
.header-hero {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  margin: 0 auto 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.header-title-row {
  display: flex;
  justify-content: center;
}
#header-title {
  margin: 0 0 6px;
  font-size: var(--sa-font-4xl);
  font-weight: var(--sa-fw-bold);
  color: var(--sa-text);
  letter-spacing: -0.3px;
}
.header-subtitle {
  margin: 0 0 8px;
  font-size: var(--sa-font-md);
  color: var(--sa-text-secondary);
  line-height: 1.45;
}

/* В project mode meta-summary вместо subtitle */
#meta-summary.meta {
  margin: 0 0 8px;
  font-size: var(--sa-font-lg);
  color: var(--sa-text-secondary);
}

/* ─── Onboarding-карточка в dashboard (для новичков) ──────────────────── */

.dash-onboarding {
  background: var(--sa-bg-card);
  border: 1px solid var(--sa-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.dash-onboarding-title {
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-xl);
  margin-bottom: 10px;
  color: var(--sa-text);
}
.dash-onboarding-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-onboarding-step {
  font-size: var(--sa-font-md);
  line-height: 1.5;
  color: var(--sa-text);
  padding-left: 4px;
}
.dash-onboarding-step b {
  color: var(--sa-primary);
}

/* ─── Модал «Новый проект — что будет дальше» ─────────────────────────── */

.np-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.np-modal.hidden {
  display: none !important;
}
.np-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.np-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--sa-bg-card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
@media (min-width: 600px) {
  .np-modal {
    align-items: center;
  }
  .np-modal-card {
    border-radius: 16px;
    max-height: 85vh;
  }
}
.np-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--sa-border);
  flex-shrink: 0;
}
.np-modal-head h2 {
  margin: 0;
  font-size: var(--sa-font-2xl);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-text);
}
.np-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--sa-text-secondary);
  font-size: var(--sa-font-4xl);
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.np-close:hover {
  background: var(--sa-hover-veil);
  color: var(--sa-text);
}
.np-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 20px 18px;
  -webkit-overflow-scrolling: touch;
}
.np-intro {
  margin: 0 0 14px;
  font-size: var(--sa-font-lg);
  line-height: 1.5;
  color: var(--sa-text);
  background: var(--sa-primary-muted);
  padding: 12px 14px;
  border-radius: 10px;
}
.np-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--sa-bg-page);
  border-radius: 10px;
}
.np-step-final {
  background: var(--sa-ok-bg);
}
.np-step-final .np-step-num {
  background: var(--sa-success);
}
.np-step-num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sa-primary);
  color: var(--sa-button-text);
  font-weight: var(--sa-fw-bold);
  font-size: var(--sa-font-xl);
  border-radius: 50%;
}
.np-step-body {
  flex: 1 1 auto;
  min-width: 0;
}
.np-step-title {
  font-weight: var(--sa-fw-semibold);
  font-size: var(--sa-font-lg);
  margin-bottom: 2px;
  color: var(--sa-text);
}
.np-step-desc {
  font-size: var(--sa-font-sm);
  line-height: 1.4;
  color: var(--sa-text-secondary);
}
.np-step-desc code {
  background: var(--sa-bg-card);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--sa-font-xs);
}
.np-modal-foot {
  border-top: 1px solid var(--sa-border);
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.np-btn {
  padding: 10px 16px;
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  background: var(--sa-bg-card);
  color: var(--sa-text);
  font-size: var(--sa-font-lg);
  font-weight: var(--sa-fw-medium);
  cursor: pointer;
  font-family: inherit;
}
.np-btn:hover {
  background: var(--sa-bg-page);
}
.np-btn-primary {
  background: var(--sa-primary);
  color: var(--sa-button-text);
  border-color: var(--sa-primary);
}
.np-btn-primary:hover {
  background: var(--sa-primary-hover);
  border-color: var(--sa-primary-hover);
}

/* ── Трансформация: op=in пикер значений + варнинг кода + ген.интервалов ── */
.tx-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-height: 200px;
  overflow-y: auto;
}
.tx-pick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sa-font-sm);
  color: var(--sa-text);
  cursor: pointer;
}
.tx-pick-item input { accent-color: var(--sa-primary); cursor: pointer; flex-shrink: 0; }
.tx-warn {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: var(--sa-font-xs);
  line-height: 1.4;
  color: var(--sa-sand-text);
  background: var(--sa-sand-bg-soft);
  border: 1px solid var(--sa-sand-border);
  border-radius: 6px;
}
.tx-bin-gen {
  background: var(--sa-bg-page);
  border: 1px solid var(--sa-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.tx-bin-gen-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: var(--sa-font-md);
}
.tx-bin-gen-mode { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tx-bin-gen-row input[type="number"] { width: 64px; }

/* ── Сегментный редактор: превью зон + примечание ── */
.tx-seg-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}
.tx-seg-chip {
  font-size: var(--sa-font-xs);
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--sa-primary-muted);
  color: var(--sa-primary);
  border: 1px solid var(--sa-border);
}
.tx-seg-note {
  font-size: var(--sa-font-xs);
  color: var(--sa-text-secondary);
  margin: 2px 0 8px;
}
.tx-seg-allvars {
  background: none;
  border: none;
  padding: 4px 0 0;
  font-size: var(--sa-font-xs);
  color: var(--sa-primary);
  cursor: pointer;
  text-align: left;
}
.tx-seg-allvars:hover { text-decoration: underline; }