/* Hallmark · genre: modern-minimal (soft) · macrostructure: Workbench (app shell) · design-system: design/STUDY.md · designed-as-app
 * studied: yes · DNA-source: дизайн-система SalesAI · theme: тёплая светлая (акцент бренда — токены раздела 1)
 * paper #F7F2EE · surface-accent #EADBC8 (беж) · ink-accent #6B1F2E (бургунди) · font: Manrope 400/500/600/700, локально
 * tone: utilitarian-soft · nav: N5-подобная капсула «таблеток» по центру · footer: none · только светлая тема
 * motion: цвет на hover 120 ms · нажатие translateY(1px) · модалка 220 ms · функциональные индикаторы
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4
 *
 * Бариа · Блогеры — дизайн-система (перенесена из SalesAI). Без внешних шрифтов и CDN: Manrope лежит в static/fonts.
 * Цвета и размеры — только через токены раздела 1. Нужен новый цвет — добавьте токен, не пишите значение в компоненте.
 * Грамматика форм: круглое — интерактивное или статус (кнопки, вкладки, чипы, бейджи), прямоугольное — данные
 * (таблица, поля, источники, рубрики). Беж — поверхность и состояние, бургунди — действие и текст.
 */

/* ============================================================
   0. Шрифт: Manrope (OFL). Кириллица, латиница и latin-ext (знак ₽) —
      отдельными файлами, браузер грузит только нужные сабсеты.
   ============================================================ */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/manrope-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/manrope-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/manrope-latin-400.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; }

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/manrope-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/manrope-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/manrope-latin-500.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; }

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/manrope-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/manrope-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/manrope-latin-600.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; }

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/manrope-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/manrope-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/manrope-latin-700.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; }

/* ============================================================
   1. Токены (design/STUDY.md, раздел 2.1). Только светлая тема.
   ============================================================ */

:root {
  color-scheme: light;

  /* Поверхности */
  --color-bg:          #F7F2EE;        /* фон страницы и шапки */
  --color-surface:     #FFFFFF;        /* карточки, таблица, поля, модалка */
  --color-surface-2:   #FBF8F6;        /* наведение на строку, tfoot */
  --color-surface-3:   #F3ECE8;        /* нейтральные бейджи, hover у ghost, отключённые поля */
  --color-field:       #FFFFFF;
  --color-track:       #F0E6E2;        /* дорожка прогресса и кольца */

  /* Линии */
  --color-rule:        #EADDE0;        /* волосяные линии */
  --color-rule-soft:   #F2E9EB;        /* разделители строк таблицы */
  --color-rule-2:      #DCC9CE;        /* шапка таблицы, обводка чипов, нейтральных кнопок, источников */
  --color-rule-dashed: #B9A5AA;        /* пунктир «неизвестно, не отсев» */
  --color-control:     #968086;        /* рамка полей и чекбоксов: 3.67:1 к белому */
  --color-edge:        rgb(42 20 24 / 0.06);  /* призрачная граница залитых бейджей */

  /* Текст */
  --color-ink:         #2A1418;        /* 17.3:1 на белом */
  --color-ink-2:       #4E3A3F;        /* 10.5:1 */
  --color-muted:       #735B60;        /* подписи, мета, плейсхолдеры: ≥ 4.5:1 на всех поверхностях */
  --color-faint:       #8A7378;        /* ТОЛЬКО иконки и декоративные знаки (4.37:1 на белом) */

  /* Бургунди — тёмный акцент: действие и текст */
  --color-primary:        #6B1F2E;
  --color-primary-hover:  #8A3445;
  --color-primary-active: #561825;
  --color-primary-ink:    #FFFFFF;
  --color-primary-border: #A85466;     /* обводка вторичной кнопки: 5.09:1 */
  --color-accent:         #6B1F2E;     /* ссылки, активные иконки, стрелки сортировки */
  --color-accent-strong:  #561825;
  --color-focus:          #A85466;     /* кольцо фокуса: ≥ 3.75:1 на всех фонах, включая беж */

  /* Беж — светлый акцент: поверхность и состояние */
  --color-beige:          #EADBC8;     /* акцентная карточка, активная таблетка, аватар */
  --color-beige-hover:    #E3D0B9;
  --color-beige-2:        #F4EBDF;     /* под-плитки на беже, дорожка сегментов */
  --color-beige-deep:     #C9A67C;     /* заливка прогресса и одиночного кольца */
  --color-on-beige:       #6B1F2E;     /* текст и цифры на беже: 8.31:1 */
  --color-on-beige-muted: #6F575C;     /* подписи на беже: 4.84:1 */

  /* Мягкий акцент */
  --color-accent-soft:    #F3E7EA;     /* выбранная строка, выбранный чип, bulkbar, flash--info */
  --color-accent-soft-2:  #EFDFE3;     /* наведение на выбранную строку */

  /* Шкала диаграмм (по убыванию доли) */
  --color-scale-1: #6B1F2E;
  --color-scale-2: #A85466;
  --color-scale-3: #C47D8C;
  --color-scale-4: #DCAAB4;            /* только с подписью значения (2.0:1 к белому) */
  --color-scale-other: #DCC9CE;        /* «Прочее», пятая доля и дальше */

  /* Смысл: плюс / минус / внимание */
  --color-success:       #2F7D4F;      /* иконки, точки, заливки; текст — только на белом и фоне */
  --color-success-text:  #2A6B44;      /* текст на тонированных подложках */
  --color-success-soft:  #E4EFE6;
  --color-danger:        #B4232C;
  --color-danger-text:   #9E1F27;
  --color-danger-soft:   #FBE7E5;
  --color-danger-border: #E3B5B5;
  --color-danger-fill:   #B4232C;
  --color-danger-hover:  #961C24;
  --color-danger-ink:    #FFFFFF;
  --color-warning:       #8A5A00;
  --color-warning-soft:  #F8EBD3;
  --color-info:          var(--color-primary);
  --color-info-soft:     var(--color-accent-soft);

  /* Статусы воронки: new → selected → in_mailing → replied → interested / refused / stop */
  --st-new-fg:        #5C4A4E;  --st-new-bg:        #EFE8E6;  --st-new-border:        transparent;
  --st-selected-fg:   #6B4A1E;  --st-selected-bg:   #F0E2CC;  --st-selected-border:   transparent;
  --st-mailing-fg:    #6B1F2E;  --st-mailing-bg:    #FFFFFF;  --st-mailing-border:    #C47D8C;
  --st-replied-fg:    #6E2C63;  --st-replied-bg:    #F2E5EF;  --st-replied-border:    transparent;
  --st-interested-fg: #2A6B44;  --st-interested-bg: #E4EFE6;  --st-interested-border: transparent;
  --st-refused-fg:    #9E1F27;  --st-refused-bg:    #FBE7E5;  --st-refused-border:    transparent;
  --st-stop-fg:       #FFFFFF;  --st-stop-bg:       #2A1418;  --st-stop-border:       transparent;

  /* Источники: квадратная метка 8 px внутри бейджа */
  --src-yandex: #C8452D;
  --src-2gis:   #4A8A3C;
  --src-own:    #6B1F2E;

  /* Тени: почти плоско. Призрачное кольцо держит край белой карточки на тёплом фоне */
  --shadow-1:     0 0 0 1px rgb(42 20 24 / 0.04), 0 1px 2px rgb(42 20 24 / 0.05);
  --shadow-thumb: 0 0 0 1px rgb(42 20 24 / 0.05), 0 1px 3px rgb(42 20 24 / 0.12);
  --shadow-pop:   0 0 0 1px rgb(42 20 24 / 0.05), 0 24px 48px -16px rgb(42 20 24 / 0.28);
  --shadow-edge:  rgb(42 20 24 / 0.10);  /* тень у края прокручиваемой таблицы: справа есть ещё колонки */
  --color-backdrop: rgb(42 20 24 / 0.36);
  --color-mask:   #000;                  /* только альфа для mask-image (затухание края капсулы навигации) */

  /* Шрифт */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Кегли */
  --text-xs:    0.75rem;    /* 12 — бейджи, мета, шапка таблицы */
  --text-sm:    0.8125rem;  /* 13 — подписи, лейблы, плотная таблица, чипы, вкладки */
  --text-base:  0.875rem;   /* 14 — интерфейс, ячейки, кнопки */
  --text-md:    1rem;       /* 16 — заголовок карточки */
  --text-lg:    1.125rem;   /* 18 — заголовок секции и модалки, значение под-плитки */
  --text-xl:    1.5rem;     /* 24 — h1 страницы; число в кольце */
  --text-2xl:   2rem;       /* 32 — цифра KPI */
  --text-3xl:   2.75rem;    /* 44 — главная цифра экрана (одна) */
  --text-input: var(--text-md);

  --lh-num:    1.08;
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.45;

  --track-num:     -0.03em;  /* KPI 32 */
  --track-num-xl:  -0.035em; /* главная цифра 44 */
  --track-title:   -0.015em; /* h1, h2 */
  --track-caption: 0.01em;   /* шапка таблицы, бейджи */
  --track-brand:   0.12em;   /* разрядка названия в логотипе */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Отступы: шаг 4 */
  --space-3xs: 0.125rem;    /*  2 */
  --space-2xs: 0.25rem;     /*  4 */
  --space-xs:  0.5rem;      /*  8 */
  --space-sm:  0.75rem;     /* 12 */
  --space-md:  1rem;        /* 16 */
  --space-ml:  1.25rem;     /* 20 */
  --space-lg:  1.5rem;      /* 24 */
  --space-xl:  2rem;        /* 32 */
  --space-2xl: 4rem;        /* 64 */
  --pad-card:  var(--space-ml);   /* внутренний отступ карточки = радиус */
  --gap-grid:  var(--space-md);   /* зазор между карточками */

  /* Радиусы */
  --radius-xs:    6px;      /* источник, рубрика, phone__kind */
  --radius-sm:    10px;     /* мелкие плитки, пункты меню */
  --radius-md:    12px;     /* поля, select, textarea, notice */
  --radius-inner: 16px;     /* под-плитка в акцентной карточке, flash, плитка суммы */
  --radius-lg:    20px;     /* карточки, таблица, фильтры, KPI */
  --radius-xl:    24px;     /* модальное окно */
  --radius-pill:  999px;    /* кнопки, вкладки, чипы, статусы, бейджи изменения */

  /* Контролы */
  --control-h:    2.75rem;  /* 44 на тач-экранах */
  --control-h-sm: 2.25rem;  /* 36 */
  --control-px:   1rem;     /* 16: у таблетки боковое поле шире */
  --control-px-sm: 0.75rem; /* 12: боковое поле --sm */
  --col-check-w:  calc(var(--pad-card) + 1.5rem);  /* отступ карточки + 16 чекбокс + 8 */

  /* Прогресс: одна полоса на всё приложение — 6 px, заливка беж-deep; смысловые цвета только у success / danger.
     Единственное исключение — полоса внутри беж-карточки: беж на беже не виден (1.6:1), там заливка бургунди */
  --progress-h:              0.375rem;  /* 6 */
  --progress-color-on-beige: var(--color-on-beige);

  /* Пагинация под таблицей: высота ссылки; --table-tail — всё, что идёт после .table-wrap до низа страницы
     (зазор + пагинация + нижнее поле .page). Из него считается max-height таблицы, чтобы её липкая шапка
     не уезжала под шапку сайта, когда страница докручена до пагинации */
  --pager-h:    2rem;       /* 32 */
  --table-tail: calc(var(--space-sm) + var(--pager-h) + var(--space-2xl));

  /* Каркас */
  --page-max:  100rem;
  --gutter:    1rem;
  --topbar-h:  7rem;        /* на телефоне две строки: 56 + 48 и 8 воздуха под капсулой */

  /* Движение */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Слои */
  --z-raised: 10; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
}

@media (pointer: fine) {
  :root {
    --control-h:    2.25rem;  /* 36 */
    --control-h-sm: 1.875rem; /* 30 */
    --text-input:   var(--text-base);
  }
}
@media (pointer: coarse) {
  :root { --pager-h: var(--control-h); }                     /* ссылки пагинации 44 на тач-экране */
}
@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; --topbar-h: 4rem; }              /* 64 */
}
@media (min-width: 48rem) and (max-height: 50rem) {
  :root { --topbar-h: 3.5rem; }                              /* ноутбук 1366×768: 56 */
}
@media (min-width: 80rem) {
  :root { --gutter: 2rem; --pad-card: var(--space-lg); --gap-grid: 1.25rem; }
}
@media (max-width: 29.99rem) {
  :root { --text-2xl: 1.75rem; --text-3xl: 2.25rem; }        /* 28 / 36 на телефоне */
}

/* ============================================================
   2. Основа
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

/* Якоря не уезжают под липкую шапку */
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--space-md)); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--track-title); }
h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
h4 { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
/* Визуальный уровень заголовка отдельно от семантики */
.h1 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--track-title); line-height: var(--lh-tight); color: var(--color-ink); }
.h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--color-ink); }

p { margin: 0; }
p + p { margin-top: var(--space-xs); }

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
@media (hover: hover) {
  a:hover { color: var(--color-accent-strong); }
}

small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
strong, b { font-weight: var(--weight-semibold); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-lg) 0; }

/* Иконки — тонкая линия. CSS перебивает атрибут stroke-width из icon() */
svg.icon { flex: none; display: inline-block; vertical-align: -0.2em; stroke-width: 1.5; }

::selection { background: var(--color-accent-soft-2); color: var(--color-ink); }

/* Фокус: мгновенно, без анимации, 2 px, контраст ≥ 3:1 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Утилиты */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.muted   { color: var(--color-muted); }
.ink-2   { color: var(--color-ink-2); }
.nowrap  { white-space: nowrap; }
.num, .tabular { font-variant-numeric: tabular-nums lining-nums; }
.text-success { color: var(--color-success-text); }
.text-danger  { color: var(--color-danger-text); }
.text-warning { color: var(--color-warning); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stack    { display: flex; flex-direction: column; gap: var(--gap-grid); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }
.cluster  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.cluster-tight { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.push-end { margin-inline-start: auto; }
.grow { flex: 1 1 auto; min-width: 0; }

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; box-shadow: var(--shadow-pop); }

/* ============================================================
   3. Каркас: шапка, страница, сетки
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-bg);
  transition: box-shadow var(--dur-micro) var(--ease-out);
}
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--color-rule); }

/* Телефон: две строки — бренд и действия, затем капсула навигации */
.topbar__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-xs);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand user" "nav nav";
  align-items: center;
  column-gap: var(--space-md);
}

/* Логотип: «Бариа · Блогеры», без значка */
.brand {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: var(--color-ink);
  font-size: 0.9375rem;      /* 15 */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand__name { font-weight: var(--weight-bold); letter-spacing: 0.02em; }
.brand__dot { margin-inline: 0.375rem; color: var(--color-faint); }
.brand__sub { color: var(--color-muted); font-weight: var(--weight-medium); }
@media (hover: hover) {
  a.brand:hover { color: var(--color-ink); }
  a.brand:hover .brand__sub { color: var(--color-ink-2); }
}
.topbar .brand {
  grid-area: brand;
  justify-self: start;
  align-items: center;
  height: 3.5rem;
  overflow: hidden;
}

/* Навигация: белая капсула с пунктами-таблетками.
   На телефоне прокручивается список внутри капсулы (не сама капсула: маска затухания срезала бы её тень).
   app.js ставит активный пункт по центру и is-clipped-start / -end — край, за которым есть пункты, затухает */
.mainnav {
  grid-area: nav;
  min-width: 0;
  padding: var(--space-2xs);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}
.mainnav ul {
  display: flex;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-pill);
  overflow-x: auto;
  scrollbar-width: none;
}
.mainnav ul::-webkit-scrollbar { display: none; }
@media (max-width: 47.99rem) {
  .mainnav ul.is-clipped-end {
    -webkit-mask-image: linear-gradient(to left, transparent, var(--color-mask) 2.5rem);
    mask-image: linear-gradient(to left, transparent, var(--color-mask) 2.5rem);
  }
  .mainnav ul.is-clipped-start {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-mask) 2.5rem);
    mask-image: linear-gradient(to right, transparent, var(--color-mask) 2.5rem);
  }
  .mainnav ul.is-clipped-start.is-clipped-end {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-mask) 2.5rem, var(--color-mask) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, var(--color-mask) 2.5rem, var(--color-mask) calc(100% - 2.5rem), transparent);
  }
}
.mainnav__link {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;            /* 40 на телефоне */
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.mainnav__link .icon { display: none; }
.mainnav__link:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .mainnav__link:hover { background: var(--color-surface-3); color: var(--color-ink); }
  .mainnav__link.is-active:hover { background: var(--color-beige-hover); color: var(--color-on-beige); }
}
.mainnav__link.is-active {
  background: var(--color-beige);
  color: var(--color-on-beige);
  font-weight: var(--weight-semibold);
}

/* Справа: круг поиска и аватар-инициалы */
.topbar__user {
  grid-area: user;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-on-beige);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  flex: none;
}

/* Всплывающее меню на <details>: работает без JS; app.js закрывает по клику снаружи и Esc */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu__toggle { transition: background-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) {
  .usermenu__toggle:hover { background: var(--color-beige-hover); }
}
.usermenu[open] > .usermenu__toggle { background: var(--color-beige-hover); }
.usermenu__pop {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  z-index: var(--z-modal);
  width: 13.75rem;           /* 220 */
  padding: var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.usermenu__who {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule-soft);
  min-width: 0;
}
.usermenu__login {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usermenu__role { color: var(--color-muted); font-size: var(--text-xs); }
.usermenu form { margin: 0; }
.usermenu .btn.usermenu__item {
  justify-content: flex-start;
  height: 2.25rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-sm);
}

@media (min-width: 48rem) {
  .topbar__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand nav user";
    height: var(--topbar-h);
    padding-bottom: 0;
    column-gap: var(--space-md);
  }
  .topbar .brand { height: auto; }
  .mainnav { justify-self: center; }
  .mainnav ul { overflow: visible; }
  .mainnav__link { height: 2.25rem; padding-inline: var(--space-sm); }
}
/* 768–1024: если не помещается, у бренда прячется «· Блогеры» */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .topbar .brand__dot,
  .topbar .brand__sub { display: none; }
}
@media (min-width: 64rem) {
  .mainnav__link { padding-inline: var(--space-md); }
}

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
}
.page--narrow { max-width: 52rem; }   /* по центру: вход, страница ошибки */
/* Узкая колонка у левого края, как у остальных экранов (импорт): при переходе по разделам контент не прыгает */
.page--column > * { max-width: 52rem; }
.page--bare { max-width: none; padding: 0; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}
/* Заголовок занимает остаток строки и переносит описание, а не выталкивает действия вниз. На телефоне действия
   всегда под заголовком: тогда первая ghost-кнопка выравнивается краем текста по тексту над ней, а не своим полем */
.page-head__main { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.page-head__meta { color: var(--color-muted); font-size: var(--text-sm); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
@media (max-width: 35.99rem) {
  .page-head__main { flex-basis: 100%; }
  .page-head__actions > .btn--ghost:first-child { margin-inline-start: calc(-1 * var(--control-px) - 1px); }
  .page-head__actions > .btn--ghost.btn--sm:first-child { margin-inline-start: calc(-1 * var(--control-px-sm) - 1px); }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.breadcrumbs a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-2xs); color: var(--color-faint); }
@media (hover: hover) {
  .breadcrumbs a:hover { color: var(--color-ink); text-decoration: underline; }
}

.section { margin-top: var(--space-xl); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
}
/* Пояснение секции — строкой под заголовком, а не прижатым к правому краю в 800 px от него */
.section__note { flex: 1 1 100%; color: var(--color-muted); font-size: var(--text-sm); }

/* Карточка салона: основная колонка + боковая */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: start;
}
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
}

/* Обзорные экраны: bento на 12 колонок. Акцентная карточка span-5 + KPI span-7 (2 × 2), ниже span-6/span-12.
   На < 1024 px всё в одну колонку, акцентная карточка первой. */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: stretch;
}
.bento > * { min-width: 0; }
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento > .span-4  { grid-column: span 4; }
  .bento > .span-5  { grid-column: span 5; }
  .bento > .span-6  { grid-column: span 6; }
  .bento > .span-7  { grid-column: span 7; }
  .bento > .span-8  { grid-column: span 8; }
  .bento > .span-12 { grid-column: 1 / -1; }
}
.bento + .bento { margin-top: var(--gap-grid); }

/* ============================================================
   4. Карточки: панель, акцентная карточка, под-плитки
   ============================================================ */

.panel {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  min-height: 3.5rem;
  padding: var(--space-md) var(--pad-card) 0;
}
.panel__title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.panel__heading { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; flex: 1 1 auto; }
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
/* Иконка-маркер в заголовке: только на обзорных экранах, не у каждой панели */
.panel__icon,
.kpi__icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-ink-2);
  flex: none;
}
.panel__icon .icon,
.kpi__icon .icon { width: 1rem; height: 1rem; }
.panel__body { padding: var(--space-md) var(--pad-card) var(--pad-card); }
.panel__body--flush { padding: var(--space-md) 0 0; }
.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--pad-card);
  border-top: 1px solid var(--color-rule-soft);
  background: transparent;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Таблица внутри панели — без своего контейнера (нет card-in-card); разделитель — линия шапки таблицы */
.panel > .table-wrap,
.panel__body--flush > .table-wrap { border-radius: 0; box-shadow: none; }
.panel__head + .table-wrap { margin-top: var(--space-xs); }
.panel > .table-wrap:last-child,
.panel__body--flush:last-child > .table-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.panel > .table-wrap:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panel > .table-wrap:only-child { border-radius: var(--radius-lg); }
.panel .empty { box-shadow: none; background: transparent; }

/* Акцентная карточка: одна на экран, только для главной цифры. Беж, без тени и фигур. */
.panel--accent {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-beige);
  color: var(--color-on-beige);
  box-shadow: none;
}
.panel--accent .panel__head { min-height: 0; padding: 0; }
.panel--accent .panel__title { color: var(--color-on-beige); }
.panel--accent .panel__body { padding: 0; }
.panel--accent .panel__icon { border-color: var(--color-beige-hover); color: var(--color-on-beige); }
.accent__figure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.accent__value {
  color: var(--color-on-beige);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: var(--track-num-xl);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.accent__caption { color: var(--color-on-beige-muted); font-size: var(--text-sm); }
.accent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: auto; }

.subtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-sm);
}
.subtile {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-inner);
  background: var(--color-beige-2);
}
.subtile__label { color: var(--color-on-beige-muted); font-size: var(--text-xs); }
.subtile__value {
  color: var(--color-on-beige);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* Список «ключ — значение» */
.dl {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  margin: 0;
}
.dl dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: 1px; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 29.99rem) {
  .dl { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xs); }
  .dl dd + dt { margin-top: var(--space-xs); }
}

/* ============================================================
   5. Кнопки — таблетки. Пара на блок действий: одна --primary и одна --secondary,
      остальные нейтральные или --ghost.
   ============================================================ */

.btn {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-surface-2);
  --btn-bg-active: var(--color-surface-3);
  --btn-fg: var(--color-ink);
  --btn-fg-hover: var(--btn-fg);
  --btn-border: var(--color-rule-2);
  --btn-border-hover: var(--color-control);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: var(--control-h);
  padding-inline: var(--control-px);
  margin: 0;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn .icon { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    color: var(--btn-fg-hover);
  }
}
.btn:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--btn-bg-active);
  transform: translateY(1px);
}
.btn:disabled:not(.is-loading),
.btn[aria-disabled="true"]:not(.is-loading) {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--btn-bg-disabled, var(--btn-bg));
  border-color: var(--btn-border-disabled, var(--btn-border));
  color: var(--btn-fg-disabled, var(--btn-fg));
  opacity: var(--btn-opacity-disabled, 0.5);
}

/* Иконка-кнопка — круг. На белой карточке нейтральная круглая кнопка прозрачна с волосяной обводкой
   (:where не повышает специфичность — варианты ниже её перебивают). */
.btn--icon { width: var(--control-h); padding-inline: 0; border-radius: 50%; }
.btn--icon .icon { width: 1.125rem; height: 1.125rem; }
:where(.panel, .kpi, .table-wrap) .btn--icon {
  --btn-bg: transparent;
  --btn-border: var(--color-rule);
  --btn-border-hover: var(--color-rule);
  --btn-bg-hover: var(--color-surface-3);
}

.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-bg-active: var(--color-primary-active);
  --btn-fg: var(--color-primary-ink);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-bg-disabled: var(--color-surface-3);
  --btn-fg-disabled: var(--color-faint);
  --btn-border-disabled: transparent;
  --btn-opacity-disabled: 1;
}
.btn--secondary {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-accent-soft);
  --btn-bg-active: var(--color-accent-soft-2);
  --btn-fg: var(--color-primary);
  --btn-border: var(--color-primary-border);
  --btn-border-hover: var(--color-primary);
  --btn-border-disabled: var(--color-rule);
  --btn-fg-disabled: var(--color-faint);
  --btn-opacity-disabled: 1;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-fg: var(--color-ink-2);
  --btn-fg-hover: var(--color-ink);
  --btn-bg-hover: var(--color-surface-3);
  --btn-bg-active: var(--color-rule);
  --btn-fg-disabled: var(--color-faint);
  --btn-opacity-disabled: 1;
}
.btn--danger {
  --btn-bg: var(--color-danger-fill);
  --btn-bg-hover: var(--color-danger-hover);
  --btn-bg-active: var(--color-danger-hover);
  --btn-fg: var(--color-danger-ink);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-bg-disabled: var(--color-surface-3);
  --btn-fg-disabled: var(--color-faint);
  --btn-border-disabled: transparent;
  --btn-opacity-disabled: 1;
}
.btn--danger-outline {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-danger-text);
  --btn-border: var(--color-danger-border);
  --btn-border-hover: var(--color-danger-border);
  --btn-bg-hover: var(--color-danger-soft);
  --btn-bg-active: var(--color-danger-soft);
}
/* Белый круг на фоне страницы (поиск в шапке) */
.btn--round {
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-bg-hover: var(--color-surface-3);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}
.btn--sm {
  height: var(--control-h-sm);
  padding-inline: var(--control-px-sm);
  font-size: var(--text-sm);
  gap: var(--space-2xs);
}
.btn--sm .icon { width: 0.875rem; height: 0.875rem; }
.btn--icon.btn--sm { width: var(--control-h-sm); padding-inline: 0; }
.btn--icon.btn--sm .icon { width: 1rem; height: 1rem; }
.btn--block { width: 100%; }

/* Круг «перейти» (↗): только в акцентной карточке, один на экран */
.btn--go {
  --btn-bg: var(--color-beige);
  --btn-bg-hover: var(--color-beige-hover);
  --btn-bg-active: var(--color-beige-hover);
  --btn-fg: var(--color-on-beige);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  width: 3.5rem;
  height: 3.5rem;
  padding-inline: 0;
  border-radius: 50%;
  flex: none;
}
.btn--go .icon { width: 1.375rem; height: 1.375rem; }
.panel--accent .btn--go,
.kpi--accent .btn--go {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-beige-2);
  --btn-bg-active: var(--color-beige-2);
}

/* Быстрое «да / нет» в строке */
.btn--confirm,
.btn--reject {
  width: 1.875rem;
  height: 1.875rem;
  padding-inline: 0;
  border-radius: 50%;
}
.btn--confirm .icon,
.btn--reject .icon { width: 0.875rem; height: 0.875rem; }
.btn--confirm {
  --btn-bg: var(--color-success);
  --btn-bg-hover: var(--color-success-text);
  --btn-bg-active: var(--color-success-text);
  --btn-fg: var(--color-primary-ink);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}
.btn--reject {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-ink-2);
  --btn-fg-hover: var(--color-ink);
  --btn-border: var(--color-rule-2);
  --btn-border-hover: var(--color-rule-2);
  --btn-bg-hover: var(--color-surface-3);
}
@media (pointer: coarse) {
  .btn--confirm, .btn--reject { width: var(--control-h-sm); height: var(--control-h-sm); }
}

/* Загрузка: подпись прячется, на её месте спиннер — ширина не прыгает */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
/* Итог действия (копирование, повтор): у любой кнопки — белая таблетка со смысловой обводкой */
.btn.is-success,
.btn.is-error {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-surface-2);
  --btn-bg-active: var(--color-surface-3);
}
.btn--ghost.is-success,
.btn--ghost.is-error { --btn-bg: transparent; }
.btn.is-success {
  --btn-fg: var(--color-success-text);
  --btn-fg-hover: var(--color-success-text);
  --btn-border: var(--color-success);
  --btn-border-hover: var(--color-success);
}
.btn.is-error {
  --btn-fg: var(--color-danger-text);
  --btn-fg-hover: var(--color-danger-text);
  --btn-border: var(--color-danger);
  --btn-border-hover: var(--color-danger);
}

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

/* ============================================================
   6. Формы
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.field__label,
.field > label:first-child {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.field__req { color: var(--color-danger); margin-inline-start: 2px; }
.field__hint { color: var(--color-muted); font-size: var(--text-xs); min-height: 1lh; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  color: var(--color-danger-text);
  font-size: var(--text-xs);
  min-height: 1lh;
}
.field__error .icon { width: 0.875rem; height: 0.875rem; margin-top: 1px; }

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  margin: 0;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-md);
  outline: none;
  background-color: var(--color-field);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-input);
  line-height: var(--lh-snug);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-muted); opacity: 1; }
@media (hover: hover) {
  .input:hover:not(:disabled):not(:focus),
  .select:hover:not(:disabled):not(:focus),
  .textarea:hover:not(:disabled):not(:focus) { border-color: var(--color-muted); }
}
/* Фокус: двойная граница (бургунди 11:1 + мягкое кольцо), мгновенно */
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-accent-soft);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger), 0 0 0 4px var(--color-danger-soft);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  cursor: not-allowed;
  background-color: var(--color-surface-3);
  border-color: var(--color-rule);
  color: var(--color-faint);
}
.input--sm, .select--sm { height: var(--control-h-sm); font-size: var(--text-sm); }
.input--num { font-variant-numeric: tabular-nums lining-nums; max-width: 9rem; }

.textarea {
  height: auto;
  min-height: 6rem;
  padding-block: 0.625rem;
  line-height: var(--lh-normal);
  resize: vertical;
}

/* Select: своя стрелка градиентами (без data: URI — их режет CSP) */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.select[multiple] { height: auto; padding-block: var(--space-2xs); background-image: none; padding-inline-end: var(--space-sm); }

/* Поле поиска: таблетка с иконкой */
.input-icon { position: relative; display: block; min-width: 0; }
.input-icon > .icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
.input-icon > .input { padding-inline-start: 2.375rem; border-radius: var(--radius-pill); }
.input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex: none;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { cursor: not-allowed; }

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: 1.5rem;
  color: var(--color-ink);
  cursor: pointer;
}
.check input { margin-top: 0.15rem; }
.check__hint { display: block; color: var(--color-muted); font-size: var(--text-xs); }

/* Чип-переключатель (независимый флаг): обводка + галочка у отмеченного.
   <label class="chip"><input type="checkbox">{{ icon('check') }} Есть мобильный</label> */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-field);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip .icon { display: none; width: 0.875rem; height: 0.875rem; }
@media (hover: hover) {
  .chip:hover { background: var(--color-surface-2); }
  .chip:has(input:checked):hover { background: var(--color-accent-soft-2); }
}
.chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:has(input:checked) {
  border-color: var(--color-scale-3);
  background: var(--color-accent-soft);
  color: var(--color-on-beige);
}
.chip:has(input:checked) .icon { display: inline-block; }
.chip:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Сегментированный фильтр (взаимоисключающие варианты): беж-дорожка, белый бегунок.
   <fieldset class="seg"><legend class="sr-only">…</legend><label class="seg__item"><input type="radio">…</label></fieldset> */
.seg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  max-width: 100%;
  min-width: 0;
  height: 2.25rem;
  margin: 0;
  padding: 0.1875rem;        /* 3: бегунок 30 в дорожке 36 */
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-beige-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.seg__item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.seg__count { color: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums lining-nums; opacity: 0.85; }
@media (hover: hover) {
  .seg__item:not(:has(input:checked)):hover { color: var(--color-ink); }
}
.seg__item:has(input:checked) {
  background: var(--color-surface);
  box-shadow: var(--shadow-thumb);
  color: var(--color-on-beige);
  font-weight: var(--weight-semibold);
}
.seg__item:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.seg__item:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md) var(--space-lg);
}
.form-grid .field--wide { grid-column: 1 / -1; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-lg);
}
.form-actions__note { color: var(--color-muted); font-size: var(--text-sm); }
fieldset.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.fieldset > legend {
  padding: 0;
  margin-bottom: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Загрузка файла: <label class="filepick"><input type="file"> …</label> */
.filepick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  padding: var(--space-md) var(--pad-card);
  border: 1px dashed var(--color-control);
  border-radius: var(--radius-lg);
  background: var(--color-field);
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .filepick:hover { background: var(--color-surface-2); border-color: var(--color-muted); }
}
.filepick > .icon { grid-row: span 2; color: var(--color-muted); }
.filepick:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filepick input[type="file"] { font: inherit; font-size: var(--text-sm); color: var(--color-muted); max-width: 100%; }
.filepick input[type="file"]::file-selector-button {
  height: var(--control-h-sm);
  margin-inline-end: var(--space-sm);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* ============================================================
   7. Вкладки (без дорожки): активная — беж
   <nav class="tabs" aria-label="…"><a class="tabs__link" aria-current="page">…</a></nav>
   ============================================================ */

.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  max-width: 100%;
}
.tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tabs__link .icon { width: 0.875rem; height: 0.875rem; }
.tabs__count { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums lining-nums; }
@media (hover: hover) {
  .tabs__link:hover { background: var(--color-surface-3); color: var(--color-ink); }
  .tabs__link[aria-current="page"]:hover,
  .tabs__link.is-active:hover { background: var(--color-beige-hover); color: var(--color-on-beige); }
}
.tabs__link[aria-current="page"],
.tabs__link.is-active {
  background: var(--color-beige);
  color: var(--color-on-beige);
  font-weight: var(--weight-semibold);
}
.tabs__link[aria-current="page"] .tabs__count,
.tabs__link.is-active .tabs__count { color: var(--color-on-beige-muted); }

@media (pointer: coarse) {
  .chip, .tabs__link { min-height: var(--control-h); }
  .seg { height: var(--control-h); }
}

/* ============================================================
   8. Панель фильтров и массовые действия
   ============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--pad-card);
  margin-bottom: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.filters .field { flex: 1 1 calc(50% - var(--space-md)); }
.filters .field--search { flex-basis: 100%; }
.filters .field__label { font-size: var(--text-xs); color: var(--color-muted); }
.filters__toggles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.filters__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-height: var(--control-h);
  margin-inline-start: auto;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.filters__found b { color: var(--color-ink); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
/* «Сбросить» — ghost-таблетка */
.filters__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: var(--control-h-sm);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .filters__reset:hover { background: var(--color-surface-3); color: var(--color-ink); }
}
/* Телефон: снаружи поиск и «Фильтры · 3», остальное — в <details class="filters__more" data-open-wide>
   (app.js раскрывает его на ≥ 768 px) */
.filters__more { flex: 0 1 auto; min-width: 0; }
.filters__more[open] { flex: 1 1 100%; }
.filters__more > summary { list-style: none; }
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__more-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-sm);
}
.filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-beige);
  color: var(--color-on-beige);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
@media (min-width: 48rem) {
  .filters .field { flex: 1 1 9rem; max-width: 14rem; }
  .filters .field--search { flex: 2 1 16rem; max-width: 22rem; }
  /* На широком экране поля из <details> встают в общий ряд фильтров */
  .filters__more,
  .filters__more-body { display: contents; }
  .filters__more > summary { display: none; }
}
@media (min-width: 48rem) {
  /* Отдельным правилом: браузер без ::details-content отбросит только его (поля останутся блоком в ряду) */
  .filters__more::details-content { display: contents; }
}
@media (min-width: 64rem) {
  .filters--compact .field__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  min-height: 2.75rem;
  padding: 0.375rem var(--space-xs) 0.375rem var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.bulkbar__total { color: var(--color-muted); }
.bulkbar__total b,
.bulkbar__selected b { color: var(--color-ink); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }
.bulkbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.bulkbar__end { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-inline-start: auto; }
.bulkbar .select { width: auto; min-width: 9rem; }
.has-selection .bulkbar,
.bulkbar.is-active { background: var(--color-accent-soft); }
.has-selection .bulkbar__selected b,
.bulkbar.is-active .bulkbar__selected b { color: var(--color-on-beige); }
@media (min-width: 48rem) {
  .bulkbar { border-radius: var(--radius-pill); }
}

/* ============================================================
   9. Таблица
   ============================================================ */

/* Контейнер — белая карточка без рамки, скроллится сам в обе стороны; шапка липнет к его верху.
   Высота ограничена экраном, чтобы sticky-шапка работала: экран − шапка сайта − зазор − всё, что ниже таблицы
   (--table-tail: пагинация и нижнее поле страницы). Тогда и у страницы, докрученной до конца, шапка таблицы
   стоит под шапкой сайта, а не под ней. Для коротких таблиц — .table-wrap--auto */
.table-wrap {
  position: relative;
  max-width: 100%;
  max-height: max(20rem, calc(100dvh - var(--topbar-h) - var(--space-sm) - var(--table-tail)));
  overflow: auto;
  overscroll-behavior-x: contain;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.table-wrap--auto { max-height: none; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums lining-nums;
}
.table caption { caption-side: top; padding: var(--space-sm) var(--pad-card); text-align: left; color: var(--color-muted); font-size: var(--text-sm); }
.table th,
.table td {
  padding: 0.625rem var(--space-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule-soft);
  background-clip: padding-box;
}
/* Край текста совпадает с отступом карточек над таблицей */
.table tr > :first-child { padding-inline-start: var(--pad-card); }
.table tr > :last-child { padding-inline-end: var(--pad-card); }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 2.5rem;
  padding-block: 0;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caption);
  white-space: nowrap;
  vertical-align: middle;
  border-bottom-color: var(--color-rule-2);
}
.table tbody td { background: var(--color-surface); color: var(--color-ink); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tfoot td,
.table tfoot th {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-rule-2);
  border-bottom: 0;
  font-weight: var(--weight-semibold);
}
@media (hover: hover) {
  .table tbody tr:hover > td { background: var(--color-surface-2); }
}
.table tbody tr.is-selected > td,
.table tbody tr:has(input[data-row-check]:checked) > td { background: var(--color-accent-soft); }
@media (hover: hover) {
  .table tbody tr.is-selected:hover > td,
  .table tbody tr:has(input[data-row-check]:checked):hover > td { background: var(--color-accent-soft-2); }
}

/* Плотный режим — по умолчанию для «Базы»: 13 px, строка ≈ 34 */
.table--dense { font-size: var(--text-sm); }
.table--dense td { padding-block: 0.375rem; }
.table--dense .table__link { font-size: var(--text-sm); }

.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.table .center { text-align: center; }
.table .nowrap { white-space: nowrap; }
.table .col-check {
  width: var(--col-check-w);
  min-width: var(--col-check-w);
  max-width: var(--col-check-w);
  padding-inline: var(--pad-card) 0;
}
.table td.col-check input { margin-top: 0.15rem; }
.table--dense td.col-check input { margin-top: 0.05rem; }
.table .col-main { min-width: 13rem; max-width: 22rem; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }

.table__link {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .table__link:hover { color: var(--color-accent); text-decoration: underline; }
}
.table__sub { display: block; color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }
.table__empty { padding: 0 !important; }
.table__empty .empty { box-shadow: none; border-radius: 0; background: transparent; }

/* Сортировка: <th aria-sort="ascending"><a class="th-sort" href="…">Рейтинг</a></th> */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: inherit;
  text-decoration: none;
}
.th-sort::after { content: "↕"; color: var(--color-faint); font-size: 0.9em; }
@media (hover: hover) {
  .th-sort:hover { color: var(--color-ink); }
}
[aria-sort] .th-sort { color: var(--color-ink); }
[aria-sort="ascending"] .th-sort::after { content: "↑"; color: var(--color-accent); }
[aria-sort="descending"] .th-sort::after { content: "↓"; color: var(--color-accent); }

/* Закрепить чекбокс и название при горизонтальном скролле: .table--pin.
   Фон закреплённых ячеек меняется вместе со строкой (td наследуют правила выше). */
.table--pin .col-check {
  position: sticky;
  left: 0;
  z-index: 1;
}
.table--pin .col-main {
  position: sticky;
  left: var(--col-check-w);
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--color-rule);
}
.table--pin thead .col-check,
.table--pin thead .col-main { z-index: 3; }
@media (max-width: 47.99rem) {
  .table--pin .col-main { min-width: 10rem; max-width: 12rem; }
}

/* Контакты в ячейке */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.phone {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.phone a, .email a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .phone a:hover, .email a:hover { color: var(--color-accent); text-decoration: underline; }
}
.phone__kind {
  padding-inline: 0.3125rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.phone.is-mobile { color: var(--color-ink); }
.phone.is-mobile .phone__kind {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}
.phone:not(.is-mobile) { color: var(--color-ink-2); }
.email { overflow-wrap: anywhere; }
/* В таблице почта не рвётся посимвольно: одна строка, длинная — с многоточием (полностью — в title) */
.table .email { white-space: nowrap; overflow-wrap: normal; }
.table .email a {
  display: inline-block;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.yesno { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.yesno--yes { color: var(--color-success); }
.yesno--no  { color: var(--color-faint); }

/* ============================================================
   10. Бейджи и изменение
   ============================================================ */

.badge {
  --badge-bg: var(--color-surface-3);
  --badge-fg: var(--color-ink-2);
  --badge-border: transparent;
  --badge-edge: var(--color-edge);
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.375rem;
  padding: 0 var(--space-xs) 0 0.4375rem;
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  box-shadow: inset 0 0 0 1px var(--badge-edge);
  color: var(--badge-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-caption);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}
.badge .icon { width: 0.75rem; height: 0.75rem; vertical-align: 0; stroke-width: 2; }
.badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge__meta {
  position: relative;
  margin-inline-start: var(--space-3xs);
  padding-inline-start: 0.375rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.badge__meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  bottom: 0.125rem;
  border-left: 1px solid currentColor;
  opacity: 0.3;
}
a.badge:focus-visible { outline-offset: 1px; }

/* Статусы воронки: тон + форма (заливка / обводка / сплошной) + текст метки */
.badge--status-new        { --badge-bg: var(--st-new-bg);        --badge-fg: var(--st-new-fg);        --badge-border: var(--st-new-border); }
.badge--status-selected   { --badge-bg: var(--st-selected-bg);   --badge-fg: var(--st-selected-fg);   --badge-border: var(--st-selected-border); }
.badge--status-in_mailing { --badge-bg: var(--st-mailing-bg);    --badge-fg: var(--st-mailing-fg);    --badge-border: var(--st-mailing-border); --badge-edge: transparent; }
.badge--status-replied    { --badge-bg: var(--st-replied-bg);    --badge-fg: var(--st-replied-fg);    --badge-border: var(--st-replied-border); }
.badge--status-interested { --badge-bg: var(--st-interested-bg); --badge-fg: var(--st-interested-fg); --badge-border: var(--st-interested-border); }
.badge--status-refused    { --badge-bg: var(--st-refused-bg);    --badge-fg: var(--st-refused-fg);    --badge-border: var(--st-refused-border); }
.badge--status-stop       { --badge-bg: var(--st-stop-bg);       --badge-fg: var(--st-stop-fg);       --badge-border: var(--st-stop-border); --badge-edge: transparent; }

/* Источники: прямоугольник с квадратной меткой — не путаются со статусами */
.badge--src {
  --badge-bg: transparent;
  --badge-fg: var(--color-ink-2);
  --badge-border: var(--color-rule-2);
  --badge-edge: transparent;
  border-radius: var(--radius-xs);
  padding-inline: 0.4375rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}
.badge--src::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--src-color, var(--color-faint));
  flex: none;
}
.badge--src-yandex { --src-color: var(--src-yandex); }
.badge--src-2gis   { --src-color: var(--src-2gis); }
.badge--src-own    { --src-color: var(--src-own); }
.badge--src .icon { color: var(--color-faint); }
@media (hover: hover) {
  a.badge--src:hover { --badge-bg: var(--color-surface-2); --badge-fg: var(--color-ink); }
}

/* Отбор по чеку: заливка — определено; пунктир — неизвестно, это не отсев */
.badge--check-passed  { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); }
.badge--check-failed  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--color-danger-text); }
.badge--check-unknown {
  --badge-bg: transparent;
  --badge-fg: var(--color-muted);
  --badge-border: var(--color-rule-dashed);
  --badge-edge: transparent;
  border-style: dashed;
}

/* Профиль: волосы / отсев (сплошная обводка без заливки) / не ясно (пунктир) */
.badge--hair-hair     { --badge-bg: var(--color-surface-3); --badge-fg: var(--color-ink); }
.badge--hair-not_hair { --badge-bg: transparent; --badge-fg: var(--color-muted); --badge-border: var(--color-rule-2); --badge-edge: transparent; }
.badge--hair-unknown  {
  --badge-bg: transparent;
  --badge-fg: var(--color-muted);
  --badge-border: var(--color-rule-dashed);
  --badge-edge: transparent;
  border-style: dashed;
}

/* Бариа: статусы воронки блогеров (этап 1 и этап 2) — на токенах статусов SalesAI */
.badge--status-candidate { --badge-bg: var(--st-selected-bg);   --badge-fg: var(--st-selected-fg);   --badge-border: var(--st-selected-border); }
.badge--status-rejected  { --badge-bg: transparent; --badge-fg: var(--color-muted); --badge-border: var(--color-rule-2); --badge-edge: transparent; }
.badge--status-approved  { --badge-bg: var(--st-interested-bg); --badge-fg: var(--st-interested-fg); --badge-border: var(--st-interested-border); }
.badge--status-declined  { --badge-bg: var(--st-refused-bg);    --badge-fg: var(--st-refused-fg);    --badge-border: var(--st-refused-border); }
.badge--status-queued    { --badge-bg: var(--st-new-bg);        --badge-fg: var(--st-new-fg);        --badge-border: var(--st-new-border); }
.badge--status-messaged  { --badge-bg: var(--st-mailing-bg);    --badge-fg: var(--st-mailing-fg);    --badge-border: var(--st-mailing-border); --badge-edge: transparent; }
.badge--status-agreed    { --badge-bg: var(--st-interested-bg); --badge-fg: var(--st-interested-fg); --badge-border: var(--st-interested-border); }
.badge--status-published { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); }

/* Правило и вердикт ИИ: заливка — определено; пунктир — неизвестно / «возможно», это не отсев */
.badge--rule-passed, .badge--verdict-fit { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); }
.badge--rule-failed, .badge--verdict-no  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--color-danger-text); }
.badge--rule-unknown, .badge--verdict-maybe, .badge--verdict-none {
  --badge-bg: transparent;
  --badge-fg: var(--color-muted);
  --badge-border: var(--color-rule-dashed);
  --badge-edge: transparent;
  border-style: dashed;
}

/* Откуда найден блогер: прямоугольник с квадратной меткой (как источники SalesAI) */
.badge--via-hashtag   { --src-color: var(--src-own); }
.badge--via-commenter { --src-color: var(--src-2gis); }
.badge--via-mention   { --src-color: var(--src-yandex); }
.badge--via-manual    { --src-color: var(--color-faint); }
.badge--via-reference { --src-color: var(--color-ink); }

/* Запуски и сборы */
.badge--run-neutral { --badge-bg: var(--color-surface-3);   --badge-fg: var(--color-ink-2); }
.badge--run-running { --badge-bg: var(--color-accent-soft);  --badge-fg: var(--color-primary); }
.badge--run-success { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); }
.badge--run-danger  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--color-danger-text); }
.badge--run-warning { --badge-bg: var(--color-warning-soft); --badge-fg: var(--color-warning); }
.badge .spinner { width: 0.625rem; height: 0.625rem; border-width: 1.5px; }

/* Роль пользователя и прочие нейтральные метки — прямоугольник */
.badge--role { --badge-bg: var(--color-surface-3); --badge-fg: var(--color-ink-2); --badge-edge: transparent; border-radius: var(--radius-xs); padding-inline: 0.4375rem; }

/* Мелкие теги: рубрики — прямоугольники */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.tag {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-xs);
  background: var(--color-surface-3);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: nowrap;
}

/* Бейдж изменения: цвет — по смыслу («Отказов +5» — минус), стрелка — по знаку.
   <span class="delta delta--plus">{{ icon("trend-up", 12) }}+12 %</span> */
.delta {
  --delta-bg: var(--color-surface-3);
  --delta-fg: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 1.375rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--delta-bg);
  color: var(--delta-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: middle;
}
.delta .icon { width: 0.75rem; height: 0.75rem; stroke-width: 2; }
.delta--plus  { --delta-bg: var(--color-success-soft); --delta-fg: var(--color-success-text); }
.delta--minus { --delta-bg: var(--color-danger-soft);  --delta-fg: var(--color-danger-text); }
.delta--warn  { --delta-bg: var(--color-warning-soft); --delta-fg: var(--color-warning); }
.delta--flat  { --delta-bg: var(--color-surface-3);    --delta-fg: var(--color-muted); }
/* На беже — белая таблетка */
:where(.panel--accent, .kpi--accent) .delta { --delta-bg: var(--color-surface); }
:where(.panel--accent, .kpi--accent) .delta--plus  { --delta-fg: var(--color-success); }
:where(.panel--accent, .kpi--accent) .delta--minus { --delta-fg: var(--color-danger); }
/* Текстовый вариант: без подложки, окрашено только число, дальше пояснение */
.delta--text { height: auto; padding: 0; background: none; }
.delta--text .icon { display: none; }
.delta__note { color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
:where(.panel--accent, .kpi--accent) .delta__note { color: var(--color-on-beige-muted); }

/* ============================================================
   11. KPI, кольцо, прогресс, живое обновление
   ============================================================ */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--gap-grid);
  margin-bottom: var(--space-lg);
}
.kpis--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento .kpis { margin-bottom: 0; height: 100%; }
@media (max-width: 29.99rem) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 7rem;
  padding: var(--space-md) var(--pad-card);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
}
.kpi__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}
.kpi__value {
  margin-top: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.kpi__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-xs);
}
.kpi__meta { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }
.kpi > .kpi__meta { margin-top: var(--space-xs); }
/* Цифра всегда чернильная; смысл — точкой перед подписью */
.kpi--success .kpi__label::before,
.kpi--danger .kpi__label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--kpi-dot);
  flex: none;
}
.kpi--success { --kpi-dot: var(--color-success); }
.kpi--danger  { --kpi-dot: var(--color-danger); }
/* Беж-плитка: взаимоисключается с .panel--accent на одном экране */
.kpi--accent { background: var(--color-beige); box-shadow: none; }
.kpi--accent .kpi__value { color: var(--color-on-beige); }
.kpi--accent .kpi__label,
.kpi--accent .kpi__meta { color: var(--color-on-beige-muted); }
.kpi--accent .kpi__icon { border-color: var(--color-beige-hover); color: var(--color-on-beige); }

/* Кольцевая диаграмма: inline SVG, значения — атрибутами pathLength / stroke-dasharray / stroke-dashoffset.
   Значение всегда дублируется текстом (центр, легенда). Без анимации отрисовки. */
.ring-block {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  min-width: 0;
}
.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0;
  flex: none;
}
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track,
.ring__seg { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring__track { stroke: var(--color-track); }
.ring__seg { stroke: var(--color-beige-deep); }
.ring__seg--1 { stroke: var(--color-scale-1); }
.ring__seg--2 { stroke: var(--color-scale-2); }
.ring__seg--3 { stroke: var(--color-scale-3); }
.ring__seg--4 { stroke: var(--color-scale-4); }
.ring__seg--other { stroke: var(--color-scale-other); }
.ring__seg--success { stroke: var(--color-success); }
.ring__seg--danger { stroke: var(--color-danger); }
.ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-md);
  text-align: center;
}
.ring__value {
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.ring__label { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }
.ring--sm { width: 4rem; height: 4rem; }
.ring--sm .ring__track,
.ring--sm .ring__seg { stroke-width: 11.25; }     /* 6 px при 64 px */
.ring--sm .ring__center { padding: var(--space-2xs); }
.ring--sm .ring__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0; }
.ring--sm .ring__label { display: none; }
:where(.panel--accent, .kpi--accent) .ring__track { stroke: var(--color-beige-2); }
:where(.panel--accent, .kpi--accent) .ring__value { color: var(--color-on-beige); }
:where(.panel--accent, .kpi--accent) .ring__label { color: var(--color-on-beige-muted); }

/* Легенда — обязательна для 2+ долей */
.legend {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: 0.375rem;
  border-bottom: 1px solid var(--color-rule-soft);
}
.legend__item:last-child { border-bottom: 0; }
.legend__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--legend-color, var(--color-beige-deep)); }
.legend__label { flex: 1 1 auto; min-width: 0; color: var(--color-ink-2); overflow-wrap: anywhere; }
.legend__value { color: var(--color-ink); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.legend__share { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; min-width: 2.75rem; text-align: right; }
.legend__item--1 { --legend-color: var(--color-scale-1); }
.legend__item--2 { --legend-color: var(--color-scale-2); }
.legend__item--3 { --legend-color: var(--color-scale-3); }
.legend__item--4 { --legend-color: var(--color-scale-4); }
.legend__item--other { --legend-color: var(--color-scale-other); }

/* Тонкий прогресс 6 px: значение текстом обязательно всегда */
.progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--progress-h);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  color: var(--color-beige-deep);
  overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--color-track); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value { background: var(--progress-color, var(--color-beige-deep)); border-radius: var(--radius-pill); }
.progress::-moz-progress-bar { background: var(--progress-color, var(--color-beige-deep)); border-radius: var(--radius-pill); }
.progress--success { --progress-color: var(--color-success); }
.progress--danger  { --progress-color: var(--color-danger); }
.progress:indeterminate {
  background-image: linear-gradient(90deg, transparent 0 35%, var(--color-beige-deep) 35% 65%, transparent 65% 100%);
  background-size: 250% 100%;
  animation: progress-slide 1.4s var(--ease-in-out) infinite;
}
.progress:indeterminate::-webkit-progress-bar { background: transparent; }
.progress:indeterminate::-moz-progress-bar { background: transparent; }

.progress-block { display: grid; gap: var(--space-xs); min-width: 0; }
.progress-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.progress-block__value { color: var(--color-ink); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums lining-nums; }

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: live-pulse 2s var(--ease-in-out) infinite;
}
.live--done .live__dot { background: var(--color-success); animation: none; }

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: spin 700ms linear infinite;
  flex: none;
}

/* Скелетон для загрузки фрагментов */
.skeleton {
  display: block;
  height: 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  animation: live-pulse 1.6s var(--ease-in-out) infinite;
}
.skeleton--line { width: min(20rem, 100%); }

/* ============================================================
   12. Сообщения, пустые состояния, пагинация
   ============================================================ */

.flashes { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
/* Белая карточка без цветных рамок и полос; тип — тонированным кругом с иконкой */
.flash {
  --flash-fg: var(--color-info);
  --flash-bg: var(--color-info-soft);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.625rem 0.625rem 0.625rem var(--space-sm);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  color: var(--color-ink);
}
.flash__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--flash-bg);
  color: var(--flash-fg);
  flex: none;
}
.flash__icon .icon { width: 1rem; height: 1rem; }
.flash__text { flex: 1; min-width: 0; padding-block: 0.25rem; overflow-wrap: anywhere; }
.flash__close { margin-inline-start: auto; margin-block: -0.0625rem; }
.flash--success { --flash-fg: var(--color-success); --flash-bg: var(--color-success-soft); }
.flash--error   { --flash-fg: var(--color-danger);  --flash-bg: var(--color-danger-soft); }
.flash--warning { --flash-fg: var(--color-warning); --flash-bg: var(--color-warning-soft); }
.flash--info    { --flash-fg: var(--color-info);    --flash-bg: var(--color-info-soft); }

/* Встроенная плашка без закрытия (внутри форм, панелей) */
.notice {
  display: flex;
  gap: var(--space-xs);
  padding: 0.625rem var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.notice .icon { margin-top: 0.125rem; color: var(--color-muted); }
.notice--info { background: var(--color-accent-soft); }
.notice--info .icon { color: var(--color-primary); }
.notice--warning { background: var(--color-warning-soft); }
.notice--warning .icon { color: var(--color-warning); }
.notice--danger { background: var(--color-danger-soft); }
.notice--danger .icon { color: var(--color-danger); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: 3rem var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.empty--bare { background: transparent; box-shadow: none; border-radius: 0; }
.empty__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2xs);
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-on-beige);
}
.empty__icon .icon { width: 1.375rem; height: 1.375rem; }
.empty__title { color: var(--color-ink); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.empty__text { color: var(--color-muted); max-width: 44ch; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xs); }
.empty p + p { margin-top: 0; }
@media (max-width: 29.99rem) {
  .empty { padding: var(--space-xl) var(--space-md); }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.pagination__info { font-variant-numeric: tabular-nums lining-nums; }
.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--pager-h);
  height: var(--pager-h);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.pagination__link .icon { width: 0.875rem; height: 0.875rem; }
@media (hover: hover) {
  a.pagination__link:hover { background: var(--color-surface-3); color: var(--color-ink); }
}
.pagination__link.is-current {
  background: var(--color-beige);
  color: var(--color-on-beige);
  font-weight: var(--weight-semibold);
}
.pagination__link[aria-disabled="true"] { color: var(--color-faint); cursor: default; }
.pagination__gap { padding-inline: var(--space-2xs); color: var(--color-faint); }
@media (max-width: 47.99rem) {
  .pagination__far { display: none; }
  .pagination__step span { display: none; }
}

/* ============================================================
   13. Модальное окно (native <dialog>) и плитка суммы
   ============================================================ */

.modal {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-pop);
  overflow: auto;
}
.modal::backdrop { background: var(--color-backdrop); }
.modal[open] { animation: modal-in var(--dur-short) var(--ease-out); }
.modal[open]::backdrop { animation: fade-in var(--dur-short) var(--ease-out); }
.modal__form { margin: 0; }
.modal__body { display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.modal__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.modal__text { color: var(--color-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.modal__text:empty { display: none; }
/* Плитка суммы: заполняет app.js из data-confirm-amount / -amount-meta / -amount-label */
.modal__amount {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-ml);
  border-radius: var(--radius-inner);
  background: var(--color-beige);
  color: var(--color-on-beige);
}
.modal__amount-label { color: var(--color-on-beige-muted); font-size: var(--text-sm); }
.modal__amount-value {
  color: var(--color-on-beige);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.modal__amount-meta { color: var(--color-on-beige-muted); font-size: var(--text-xs); }
.modal__amount-meta:empty { display: none; }
.modal__actions {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: 0 var(--space-lg) var(--space-lg);
}
@media (max-width: 29.99rem) {
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; }
}

/* ============================================================
   14. Карточка салона: прайс, история, сырой JSON, шаги
   ============================================================ */

.price-list { margin: 0; padding: 0; list-style: none; }
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.5rem var(--space-xs);
  margin-inline: calc(var(--space-xs) * -1);
  border-bottom: 1px solid var(--color-rule-soft);
}
.price-list li:last-child { border-bottom: 0; }
.price-list__title { min-width: 0; overflow-wrap: anywhere; }
.price-list__cat { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.price-list__price { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.price-list li.is-coloring { background: var(--color-accent-soft); border-radius: var(--radius-sm); border-bottom-color: transparent; }
.price-list li.is-coloring + li { border-top: 0; }
.price-list li.is-min .price-list__price { font-weight: var(--weight-semibold); color: var(--color-primary); }
.price-list__tag { margin-inline-start: var(--space-2xs); color: var(--color-primary); font-size: var(--text-xs); white-space: nowrap; }

.timeline { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: var(--space-sm);
}
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(0.375rem - 0.5px);
  top: 1.1rem;
  bottom: calc(var(--space-md) * -1 + 0.3rem);
  width: 1px;
  background: var(--color-rule);
}
.timeline__dot {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.35rem;
  border: 2px solid var(--color-rule-2);
  border-radius: 50%;
  background: var(--color-surface);
}
.timeline__item:first-child .timeline__dot { border-color: var(--color-primary); }
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.timeline__head > .icon { color: var(--color-faint); }
.timeline__meta { color: var(--color-muted); font-size: var(--text-xs); }
.timeline__comment { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }

.raw {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}
.raw > summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-h-sm);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}
.raw > summary::-webkit-details-marker { display: none; }
.raw > summary .icon { transition: transform var(--dur-micro) var(--ease-out); }
.raw[open] > summary .icon { transform: rotate(90deg); }
.raw > summary .muted { margin-inline-start: auto; font-size: var(--text-xs); }
.code {
  margin: 0;
  padding: var(--space-sm);
  max-height: 26rem;
  overflow: auto;
  border-top: 1px solid var(--color-rule);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  white-space: pre;
  tab-size: 2;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.panel > .code { border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-top: var(--space-sm); }

/* Пошаговый индикатор (импорт: файл → колонки → итог) */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  counter-reset: step;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.steps li { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); counter-increment: step; white-space: nowrap; }
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-rule-2);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Пройденный шаг: галочка нарисована рамкой — без символов вне шрифта */
.steps li.is-done::before { content: ""; border-color: transparent; background: var(--color-success-soft); }
.steps li.is-done::after {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 50%;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--color-success-text);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-62%) rotate(45deg);
}
.steps li[aria-current="step"] { color: var(--color-ink); font-weight: var(--weight-semibold); }
.steps li[aria-current="step"]::before { border-color: transparent; background: var(--color-primary); color: var(--color-primary-ink); }

/* ============================================================
   15. Вход и страница ошибки
   ============================================================ */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--space-xl);
  max-width: 60rem;
  min-height: 100dvh;
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}
.auth__intro { display: grid; gap: var(--space-md); max-width: 30rem; align-content: start; }
.auth__brand { justify-self: start; margin-bottom: var(--space-xs); }
.auth__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}
.auth__text { color: var(--color-ink-2); font-size: var(--text-md); max-width: 46ch; }
.auth__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 46ch;
}
.auth__note-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-on-beige);
  flex: none;
}
.auth__note-icon .icon { width: 1rem; height: 1rem; }
.auth__note > span:last-child { padding-top: 0.4rem; }
.auth__form {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 24rem;
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}
.auth__form h2 { font-size: var(--text-lg); }
.auth__form .field__hint { min-height: 0; }
.auth__form .flashes { margin-bottom: 0; }
@media (min-width: 48rem) {
  .auth { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
  .auth__form { justify-self: end; padding: var(--space-xl); }
}

.error-page {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: 38rem;
  margin: var(--space-lg) auto 0;
  padding: var(--space-xl) var(--pad-card) var(--pad-card);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.error-page__code {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}
.error-page__text { color: var(--color-ink-2); max-width: 52ch; }
.error-page .btn-row { margin-top: var(--space-xs); }

/* ============================================================
   16. Styleguide (_styleguide.html) — только для образца
   ============================================================ */

.sg-toc { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.sg-label { min-width: 8rem; color: var(--color-muted); font-size: var(--text-xs); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--gap-grid); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-xs); }
.sg-swatch { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-1); font-size: var(--text-xs); }
.sg-swatch__chip { height: 2.5rem; border-bottom: 1px solid var(--color-rule-soft); }
.sg-swatch__name { padding: var(--space-2xs) var(--space-xs); color: var(--color-ink-2); font-family: var(--font-mono); }
.sg-c-bg          { background: var(--color-bg); }
.sg-c-surface     { background: var(--color-surface); }
.sg-c-surface-2   { background: var(--color-surface-2); }
.sg-c-surface-3   { background: var(--color-surface-3); }
.sg-c-track       { background: var(--color-track); }
.sg-c-rule        { background: var(--color-rule); }
.sg-c-rule-2      { background: var(--color-rule-2); }
.sg-c-control     { background: var(--color-control); }
.sg-c-ink         { background: var(--color-ink); }
.sg-c-ink-2       { background: var(--color-ink-2); }
.sg-c-muted       { background: var(--color-muted); }
.sg-c-faint       { background: var(--color-faint); }
.sg-c-primary     { background: var(--color-primary); }
.sg-c-primary-hover { background: var(--color-primary-hover); }
.sg-c-focus       { background: var(--color-focus); }
.sg-c-beige       { background: var(--color-beige); }
.sg-c-beige-2     { background: var(--color-beige-2); }
.sg-c-beige-deep  { background: var(--color-beige-deep); }
.sg-c-accent-soft { background: var(--color-accent-soft); }
.sg-c-scale-1     { background: var(--color-scale-1); }
.sg-c-scale-2     { background: var(--color-scale-2); }
.sg-c-scale-3     { background: var(--color-scale-3); }
.sg-c-scale-4     { background: var(--color-scale-4); }
.sg-c-success     { background: var(--color-success); }
.sg-c-danger      { background: var(--color-danger); }
.sg-c-warning     { background: var(--color-warning); }
.sg-type { display: grid; gap: var(--space-sm); }
.sg-type__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.sg-type__meta { min-width: 9rem; color: var(--color-muted); font-size: var(--text-xs); font-family: var(--font-mono); }
.sg-num-xl { font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: var(--lh-num); letter-spacing: var(--track-num-xl); font-variant-numeric: tabular-nums lining-nums; }
.sg-num-lg { font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--lh-num); letter-spacing: var(--track-num); font-variant-numeric: tabular-nums lining-nums; }
.sg-tnum { display: grid; justify-items: end; font-variant-numeric: tabular-nums lining-nums; }
/* Принудительные состояния для витрины 8 состояний кнопок (не использовать на экранах) */
.btn.is-hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); color: var(--btn-fg-hover); }
.btn.is-focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn.is-active { background: var(--btn-bg-active); transform: translateY(1px); }
.sg-input-focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-accent-soft); }

/* ============================================================
   17. Анимации и reduced motion
   ============================================================ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes live-pulse { 50% { opacity: 0.35; } }
@keyframes progress-slide { from { background-position: 100% 0; } to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .modal[open], .modal[open]::backdrop { animation: fade-in 150ms linear; }
  .live__dot, .skeleton { animation: none; }
  .progress:indeterminate { animation-duration: 3s; }
  .btn:active, .btn.is-active { transform: none; }
}

@media print {
  .topbar, .filters, .bulkbar, .pagination, .btn, .modal { display: none !important; }
  .table-wrap { max-height: none; overflow: visible; box-shadow: none; }
  .panel, .kpi, .empty { box-shadow: none; border: 1px solid var(--color-rule); }
  body { background: none; }
}

/* ============================================================
   экран base — «База», карточка салона, настройки (правило, пользователи, исключения).
   Только раскладка и мелкие компоненты этих экранов; цвета и размеры — токенами из раздела 1.
   ============================================================ */

/* KPI с долей от найденных: тонкая полоса под цифрой, значение дублирует подпись «N % от найденных» */
.kpi__bar { margin-top: var(--space-sm); }
.kpi__bar + .kpi__foot { margin-top: var(--space-xs); }

/* Плотная таблица базы: строка ≥ 15 на 1366 × 768 — межстрочный интервал плотнее, подписи прижаты */
.table--dense td { line-height: var(--lh-snug); }

/* Таблица «Базы» (.table--base): каждая ячейка — одна строка. Адрес — подписью после названия
   (не влез — многоточие, полностью в title), у телефонов и почт — первый контакт и «ещё N», источники — в ряд.
   Длинное название — не больше двух строк (полностью в title), адрес тогда прячется: название важнее.
   Порядок: Название → Статус (главное рабочее поле, видно без прокрутки) → Город → контакты → бейджи отбора. */
.table--base .col-main { width: 15rem; min-width: 15rem; }
.table--base th,
.table--base td { padding-inline: var(--space-xs); }   /* крайние колонки сохраняют отступ карточки (правило выше сильнее) */
/* Колонки с бейджами и числами — по содержимому: место достаётся названию и контактам */
.table .col-fit { width: 1%; white-space: nowrap; }
.table__main { display: flex; align-items: baseline; gap: 0.375rem; min-width: 0; }
.table__main > .table__link { min-width: 0; }
.table--base .table__link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.table__main > .table__sub {
  flex: 1 1 0;
  width: 0;          /* не распирает колонку: без этого ширина адреса в одну строку входила в минимум колонки */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table--base .cluster-tight { flex-wrap: nowrap; }
.table--base .email a { max-width: 9rem; }
/* Источник в плотной таблице — без стрелки «внешняя ссылка»: на 50 строках это шум и 16 px на бейдж;
   ссылка остаётся (title «Открыть в источнике», наведение), стрелка — в карточке салона */
.table--base .badge--src .icon { display: none; }
/* Город: своей колонкой на телефоне (подстроки там нет) и от 100rem; между ними — в начале подстроки адреса */
@media (min-width: 48rem) and (max-width: 99.99rem) {
  .table--base .col-city { display: none; }
}
@media (min-width: 100rem) {
  .table__city { display: none; }
}
@media (max-width: 47.99rem) {
  /* 11.5rem: на 375 рядом с закреплёнными чекбоксом и названием целиком виден статус («В рассылке» — самый длинный) */
  .table--base .col-main { width: 11.5rem; min-width: 11.5rem; }
  .table--base .table__sub { display: none; }   /* на узкой колонке от адреса оставалась одна буква */
}

/* Тень у правого края таблицы, пока справа есть скрытые колонки (is-clipped-end — app.js по data-scroll-edges).
   Накладкой поверх ячеек: у них свой непрозрачный фон, тень фона контейнера под ними не видна */
.table-frame { position: relative; }
.table-frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 1.5rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(to left, var(--shadow-edge), transparent);
  pointer-events: none;
  opacity: 0;
}
.table-frame:has(> .table-wrap.is-clipped-end)::after { opacity: 1; }

/* Массовые действия на телефоне: «Выбрано N» и круг CSV — первой строкой, select и «Сменить статус» — второй,
   на всю ширину. Подпись CSV остаётся для скринридера */
@media (max-width: 47.99rem) {
  .bulkbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "selected end" "actions actions";
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  }
  .bulkbar__selected { grid-area: selected; }
  .bulkbar__end { grid-area: end; margin: 0; }
  .bulkbar__actions { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .bulkbar .select { width: 100%; min-width: 0; }
  .bulkbar__export { width: var(--control-h-sm); padding-inline: 0; border-radius: 50%; }
  .bulkbar__export > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.table__more {
  margin-inline-start: 0.375rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
/* «Сначала новые», «Окрашивание дороже» — длиннее прочих значений фильтров */
@media (min-width: 48rem) {
  .filters .field--sort { flex-basis: 11rem; }
}

/* Карточка салона */
.panel__count {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Прайс: легенда подсветки и метка минимальной позиции — белая таблетка на тонированной строке */
.price-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.price-legend__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-soft-2);
  flex: none;
}
.price-list li.is-coloring + li.is-coloring { margin-top: var(--space-3xs); }
.price-list li.is-coloring { padding-inline: var(--space-sm); margin-inline: calc(var(--space-sm) * -1); }
.price-list__tag {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  margin-inline-start: var(--space-xs);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-on-beige);
  font-weight: var(--weight-semibold);
  line-height: 1;
  vertical-align: 0.0625rem;
}
.price-list li.is-min .price-list__price { color: var(--color-on-beige); }

/* Источники: записи разделены волосяной линией, как строки списка */
.source-list { display: grid; margin: 0; padding: 0; list-style: none; }
.source-list__item { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding-block: var(--space-md); }
.source-list__item:first-child { padding-top: 0; }
.source-list__item:last-child { padding-bottom: 0; }
.source-list__item + .source-list__item { border-top: 1px solid var(--color-rule-soft); }

/* Узкий экран (одна колонка): форма «Статус» — сразу после «Контактов», а не после прайса и сырых JSON.
   Колонки .split растворяются, порядок задаёт order; DOM и порядок на десктопе прежние */
@media (max-width: 63.99rem) {
  .card-split > .stack { display: contents; }
  .card-split > .stack > .card-contacts,
  .card-split > .stack > .card-status { order: -1; }
}

/* Удаление по требованию: сдержанный danger — красный только заголовок и кнопка с обводкой */
.panel--danger .panel__title { color: var(--color-danger-text); }

/* Настройки: проверка правила — короткая таблица; секция вместе с заголовком не растягивается на всю ширину */
.rule-preview { max-width: 46rem; }

/* Пользователи: инициалы в бежевом круге (как аватар в шапке), доступ — таблеткой-статусом */
.user-cell { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; white-space: nowrap; }
.user-cell__text { min-width: 0; }
.avatar--sm { width: 2rem; height: 2rem; font-size: var(--text-xs); }
.avatar--off { background: var(--color-surface-3); color: var(--color-muted); }
.badge--access-on  { --badge-bg: var(--color-success-soft); --badge-fg: var(--color-success-text); }
.badge--access-off { --badge-bg: transparent; --badge-fg: var(--color-muted); --badge-border: var(--color-rule-2); --badge-edge: transparent; }
.table--users td { vertical-align: middle; }
.table--users .input--sm { width: 13rem; }
/* Телефон: строка — карточкой. Логин, роль и доступ сверху; последний вход, новый пароль и «Отключить» — ниже,
   на всю ширину, без горизонтальной прокрутки */
@media (max-width: 47.99rem) {
  .table--users thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--users,
  .table--users tbody { display: block; }
  .table--users tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "who who who" "role access ." "last last last" "pw pw pw" "act act act";
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--pad-card);
    border-bottom: 1px solid var(--color-rule-soft);
  }
  .table--users tbody tr:last-child { border-bottom: 0; }
  .table.table--users td { display: block; padding: 0; border: 0; background: transparent; text-align: left; width: auto; }
  .table--users .users__who { grid-area: who; }
  .table--users .users__role { grid-area: role; }
  .table--users .users__access { grid-area: access; }
  .table--users .users__last { grid-area: last; color: var(--color-muted); font-size: var(--text-sm); }
  .table--users .users__last::before { content: attr(data-label) ": "; }
  .table--users .users__pw { grid-area: pw; }
  .table--users .users__pw .cluster-tight { flex-wrap: nowrap; }
  .table--users .users__pw .input--sm { flex: 1 1 auto; width: auto; min-width: 0; }
  .table--users .col-actions { grid-area: act; }
  .table--users .col-actions:not(:has(form)) { display: none; }
}

/* Настройки: вкладки справа от заголовка на всех трёх страницах — длинное пояснение переносится,
   а не сталкивает вкладки вниз. На узком телефоне без иконок: три вкладки в два ряда, а не столбиком */
.page-head:has(> .tabs) .page-head__main { flex: 1 1 22rem; }
.page-head > .tabs { flex: none; }
@media (max-width: 47.99rem) {
  .page-head > .tabs { flex: 1 1 100%; }
}
@media (max-width: 29.99rem) {
  .page-head > .tabs .icon { display: none; }
}

/* Ровно четыре KPI («База», «Правило отбора»): 2 × 2 до 1024 px (без «сироты» во втором ряду), с 1024 px — в один ряд */
@media (min-width: 30rem) and (max-width: 63.99rem) {
  .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   экран collect — «Новый сбор», «Сборы», «Ход сбора», импорт (файл → колонки → итог).
   Только раскладка и мелкие компоненты этих экранов; цвета и размеры — токенами из раздела 1.
   ============================================================ */
/* экран collect */

/* Плашка над карточками (нет ключа Apify, оценка изменилась) */
.collect-notice { margin-bottom: var(--gap-grid); }

/* «Новый сбор»: форма — две карточки в .bento. Справа «Источники и лимит», «Оценить» — в подвале, прижатом к низу */
.collect-form__side { display: flex; flex-direction: column; }
.collect-form__side > .panel__foot { margin-top: auto; }

/* Источники — чипы (независимые флаги, можно оба), как у запросов; под ними — подсказки */
.collect-sources__hints {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
}
.collect-sources__hints b { color: var(--color-ink-2); font-weight: var(--weight-semibold); }

/* Оценка: итог на беже (span-5) + разбивка по запускам (span-7). Итог не тянется на высоту длинной разбивки
   и на широком экране остаётся на виду, пока её прокручивают */
.collect-estimate { align-items: start; }
@media (min-width: 64rem) {
  .collect-estimate > .collect-total { position: sticky; top: calc(var(--topbar-h) + var(--space-md)); }
}
.collect-total .form-actions__note { flex: 1 1 100%; color: var(--color-on-beige-muted); }
/* Пояснение менеджеру вместо платной кнопки: плоская под-плитка на беже с замком */
.collect-lock { background: var(--color-beige-2); color: var(--color-on-beige); }
.collect-lock .icon { color: var(--color-on-beige); }
.collect-notes { display: grid; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.collect-notes p + p { margin-top: 0; }

/* «Запуски» оценки на телефоне — списком: слева бейдж источника, город и под ним запросы; справа сумма и
   «карточек до N» (подпись — из data-label). Пять колонок с деньгами в 343 px не помещались */
@media (max-width: 47.99rem) {
  .collect-runs thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .collect-runs,
  .collect-runs tbody,
  .collect-runs tfoot { display: block; }
  .collect-runs tr {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;   /* под самый широкий бейдж («Яндекс»): города в одну линию */
    grid-template-areas: "src city usd" "src q items";
    align-items: baseline;
    gap: var(--space-3xs) var(--space-sm);
    padding: var(--space-sm) var(--pad-card);
    border-bottom: 1px solid var(--color-rule-soft);
  }
  .collect-runs tfoot tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label usd" "label items";
    border-bottom: 0;
    border-top: 1px solid var(--color-rule-2);
    background: var(--color-surface-2);
    font-weight: var(--weight-semibold);
  }
  .table.collect-runs td { display: block; padding: 0; border: 0; background: transparent; }
  .collect-runs tbody td:nth-child(1) { grid-area: src; align-self: start; }
  .collect-runs tbody td:nth-child(2) { grid-area: city; font-weight: var(--weight-semibold); }
  .collect-runs tbody td:nth-child(3) { grid-area: q; color: var(--color-muted); font-size: var(--text-xs); }
  .collect-runs tbody td:nth-child(4),
  .collect-runs tfoot td:nth-child(2) { grid-area: items; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
  .collect-runs tbody td:nth-child(5),
  .collect-runs tfoot td:nth-child(3) { grid-area: usd; font-weight: var(--weight-semibold); }
  .collect-runs tfoot td:nth-child(1) { grid-area: label; }
  .collect-runs td[data-label]::before { content: attr(data-label) " "; }
}

/* Прогресс внизу бежевой карточки («Ход сбора», «Итог импорта»): дорожка светлее карточки, заливка бургунди
   (--progress-color-on-beige) — бежевая заливка на беже не видна (1.6:1). Единственное исключение из «одна полоса
   на приложение»; цвет по завершении не меняется — «готово» пишет текст. Значение — в шапке прогресса, как везде */
.collect-progress { display: grid; gap: var(--space-xs); margin-top: auto; --progress-color: var(--progress-color-on-beige); }
.collect-progress .progress { background: var(--color-beige-2); }
.collect-progress .progress::-webkit-progress-bar { background: var(--color-beige-2); }
.collect-progress .progress-block__head,
.collect-progress .live { color: var(--color-on-beige-muted); }
.collect-progress .progress-block__value { color: var(--color-on-beige); }

/* Плиток 2 × 2 бывает три (нет исключённых по требованию): последняя — на всю ширину, без дыры в сетке */
.collect-kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Импорт: зона загрузки. Поле файла растянуто на всю зону — клик и перетаскивание работают без JS.
   Иконка и подсказка лежат поверх верхней части поля (pointer-events: none), кнопка и имя файла — под ними */
.filepick.import-drop {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.import-drop__input {
  display: block;
  width: 100%;
  min-height: 9rem;
  padding: calc(var(--pad-card) + 3.5rem + var(--space-sm)) var(--pad-card) var(--pad-card);
  border: 1px dashed var(--color-control);
  border-radius: var(--radius-lg);
  background: var(--color-field);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .filepick.import-drop:hover { background: transparent; }
  .import-drop__input:hover { background: var(--color-surface-2); border-color: var(--color-muted); }
}
.import-drop__input:valid { border-style: solid; border-color: var(--color-success); }
.import-drop__input[aria-invalid="true"] { border-color: var(--color-danger); }
.import-drop__face {
  position: absolute;
  top: var(--pad-card);
  left: var(--pad-card);
  right: var(--pad-card);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  pointer-events: none;
}
.import-drop__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-on-beige);
  flex: none;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.import-drop:has(.import-drop__input:valid) .import-drop__icon { background: var(--color-success-soft); color: var(--color-success); }
.import-drop__text { display: grid; gap: var(--space-3xs); min-width: 0; padding-top: 0.25rem; }
.import-drop__title { color: var(--color-ink); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.import-drop__hint { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }
.import-drop__title--tap { display: none; }
/* Телефон: кнопка выбора файла отдельной строкой, иначе имя файла обрезается до «Фай…бран» */
@media (max-width: 29.99rem) {
  .import-drop__input::file-selector-button { display: block; margin-bottom: var(--space-xs); }
}
@media (pointer: coarse) {
  .import-drop__title--drag { display: none; }
  .import-drop__title--tap { display: inline; }
}

/* Таблица импортов помещается и в узкую страницу загрузки: название файла уже, дата — в две строки */
.import-table .col-main { min-width: 10rem; }

/* ============================================================
   экран overview — «Обзор» (templates/overview.html, GET /)
   Hallmark · genre: modern-minimal (soft) · macrostructure: Bento Grid (зигзаг 5/7 · 7/5 · 5/7, одна беж-карточка)
   · design-system: design/STUDY.md · designed-as-app · studied: yes · pre-emit critique: P5 H4 E4 S5 R4 V4
   Сетка — .bento и .span-N системы. Свои детали: метрика внутри карточки (.ov-stat), полосы воронки по статусам
   (.ov-funnel), полосы качества, место «скоро» под траты ИИ (.ov-slot) и список последних сборов (.ov-run).
   Иконка-маркер — только у беж-карточки.
   Только токены раздела 1; без style="" — всё через классы.
   ============================================================ */
/* экран overview */

/* Беж-карточка тянется на высоту ряда — под-плитки прижаты к низу */
.overview .panel--accent .subtiles { margin-top: auto; }
/* Телефон: иконки-маркеры в шапках карточек декоративны — убираем, чтобы заголовок и действие стояли в одну строку */
@media (max-width: 29.99rem) {
  .overview .panel__icon { display: none; }
}

/* Метрика внутри белой карточки: подпись 13, цифра 32/500 (вторая в карточке — 24), строка изменения, мета 12 */
.ov-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); min-width: 0; }
.ov-stat__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--lh-snug); }
.ov-stat__value {
  margin-top: var(--space-2xs);
  color: var(--color-ink);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.ov-stat--sm .ov-stat__value { font-size: var(--text-xl); letter-spacing: var(--track-title); }
.ov-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-2xs); }
.ov-stat__meta { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* «База»: метрика и источники рядом, когда хватает ширины */
.ov-base {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  align-items: start;
  gap: var(--space-lg) var(--space-xl);
}
.ov-subhead { margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.ov-sources .legend__item { min-height: 2.25rem; }
.ov-note { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* «Воронка»: семь статусов в порядке воронки. Статус — своим бейджем (постоянный цвет и форма, как в «Базе»),
   полоса — доля от всех без отсева, одна заливка на все строки (цвет не кодирует ранг). Бейдж — ссылка в «Базу».
   Колонки фиксированной ширины — полосы и числа стоят ровно друг под другом. На телефоне полоса — второй строкой */
.ov-funnel {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-funnel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 3.25rem;
  grid-template-areas: "status value share" "bar bar bar";
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
}
.ov-funnel__status { grid-area: status; justify-self: start; border-radius: var(--radius-pill); text-decoration: none; }
.ov-funnel__bar { grid-area: bar; }
.ov-funnel__value,
.ov-funnel__share { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ov-funnel__value { grid-area: value; color: var(--color-ink); font-weight: var(--weight-semibold); }
.ov-funnel__share { grid-area: share; color: var(--color-muted); font-size: var(--text-xs); }
.ov-funnel__row[data-empty] .ov-funnel__value { color: var(--color-muted); font-weight: var(--weight-regular); }
@media (hover: hover) {
  .ov-funnel__status:hover .badge { text-decoration: underline; text-underline-offset: 2px; }
}
@media (min-width: 30rem) {
  .ov-funnel__row {
    grid-template-columns: 7.5rem minmax(0, 1fr) 3rem 3.25rem;
    grid-template-areas: "status bar value share";
  }
}

/* «Качество контактов»: полосы 6 px, как везде; значение текстом над каждой */
.ov-quality__bars { display: grid; gap: var(--space-md); margin-top: var(--space-md); }

/* «Траты»: две цифры и место под ИИ, прижатое к низу карточки */
.ov-spend { display: flex; flex-direction: column; }
.ov-spend__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-lg); }
.ov-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-md) var(--space-lg);
}
/* Зарезервированное место: пунктир = «пока нет данных» (тот же язык, что у «неизвестно» в бейджах) */
.ov-slot {
  display: grid;
  gap: var(--space-2xs);
  margin-top: auto;
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-rule-dashed);
  border-radius: var(--radius-inner);
}
.ov-slot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ov-slot__text { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* «Последние сборы»: строки как в списке референса — две строки слева, числа справа, волосяные разделители
   с отступом от краёв карточки. Вся строка кликабельна (растянутая ссылка), фокус — кольцом по строке. */
.ov-runs { margin: 0; padding: var(--space-xs) var(--space-xs) var(--space-sm); list-style: none; }
.ov-run {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main nums" "status nums";
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-sm) calc(var(--pad-card) - var(--space-xs));
  border-radius: var(--radius-md);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.ov-run + .ov-run::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--pad-card) - var(--space-xs));
  right: calc(var(--pad-card) - var(--space-xs));
  border-top: 1px solid var(--color-rule-soft);
}
.ov-run__main { grid-area: main; display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.ov-run__link { color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.ov-run__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ov-run__link:focus-visible { outline: none; }
.ov-run__link:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ov-run__sub { color: var(--color-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-run__status { grid-area: status; justify-self: start; min-width: 0; }
.ov-run__nums {
  grid-area: nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.ov-run__new { color: var(--color-ink); font-weight: var(--weight-semibold); }
.ov-run__usd { color: var(--color-muted); font-size: var(--text-xs); }
@media (hover: hover) {
  .ov-run:hover { background: var(--color-surface-2); }
  .ov-run:hover::before,
  .ov-run:hover + .ov-run::before { border-top-color: transparent; }
  .ov-run:hover .ov-run__link { color: var(--color-accent); }
}
@media (min-width: 40rem) {
  .ov-run { grid-template-columns: minmax(0, 1fr) 7.5rem 6.5rem; grid-template-areas: "main status nums"; }
}

/* ============================================================
   ai — интерфейс ИИ: карточка салона (ИИ-профиль, первое сообщение), колонка и фильтры «Базы», прогоны,
   траты ИИ в «Обзоре», «Настройки → Бренд». Только токены раздела 1; без style="" — всё через классы.
   ============================================================ */
/* ai */

/* ИИ-оценка 1–10 в плотной таблице: таблетка 22 px по ширине числа — колонка не шире «Рейтинга».
   ≥ 8 — заливка «плюс», 5–7 — нейтральная, ≤ 4 — обводка без заливки (язык «отсева») */
.ai-score {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.3125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: middle;
}
.ai-score--hi { background: var(--color-success-soft); color: var(--color-success-text); }
.ai-score--lo { background: transparent; border-color: var(--color-rule-2); color: var(--color-muted); }
.ai-dispute { display: inline-flex; margin-inline-start: var(--space-3xs); color: var(--color-warning); vertical-align: middle; }
.ai-dispute .icon { width: 0.875rem; height: 0.875rem; }
.table .col-ai { padding-inline: var(--space-2xs); }

/* Массовые действия: «Разобрать ИИ» — рядом со «Сменить статус»; на телефоне — своей строкой на всю ширину */
@media (max-width: 47.99rem) {
  .bulkbar__actions > .bulkbar__ai { grid-column: 1 / -1; }
}

/* Карточка салона: оценка в шапке — ссылка на блок «ИИ-профиль» */
.ai-head-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
@media (hover: hover) {
  .ai-head-link:hover { color: var(--color-ink); }
}
/* Узкий экран: «ИИ-профиль» — сразу за «Контактами» и «Статусом» (как card-status, DOM прежний) */
@media (max-width: 63.99rem) {
  .card-split > .stack > .card-ai { order: -1; }
}
.card-ai,
.card-draft { min-width: 0; }

/* «ИИ-профиль»: крупная оценка 32/500 чернилами (не беж: в карточке салона бежевой карточки нет), рядом сегмент */
.ai-profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.ai-profile__fit { display: inline-flex; align-items: baseline; gap: var(--space-2xs); margin: 0; }
.ai-profile__score {
  color: var(--color-ink);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--lh-num);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums;
}
.ai-profile__max { color: var(--color-muted); font-size: var(--text-sm); }
.ai-profile__reason { color: var(--color-ink-2); overflow-wrap: anywhere; }
.ai-profile__meta { margin-top: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-soft); font-size: var(--text-sm); }
.ai-profile__meta code { font-size: var(--text-xs); overflow-wrap: anywhere; }

/* Red flags: без тревожной заливки — заголовок с иконкой цвета «внимание» и короткий список */
.ai-flags { display: grid; gap: var(--space-2xs); }
.ai-flags__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ai-flags__list { margin: 0; padding-inline-start: 1.125rem; color: var(--color-ink-2); font-size: var(--text-sm); }
.ai-flags__list li + li { margin-top: var(--space-3xs); }

/* «Первое сообщение»: текст уже с подстановкой — как будет в письме (переносы строк сохраняются) */
.ai-draft { display: grid; gap: var(--space-md); }
.ai-draft__part { display: grid; gap: var(--space-2xs); min-width: 0; }
.ai-draft__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 2rem; }
.ai-draft__label { color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--track-caption); }
.ai-draft__subject { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.ai-draft__text {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 1px var(--color-rule-soft);
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* «Править текст» — раскрывашка системы (.raw); форма шаблона внутри, под линией */
.ai-draft__edit { margin-top: var(--space-2xs); }
.ai-draft__form { padding: var(--space-sm) var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule-soft); }
.ai-draft__area { min-height: 14rem; }
.card-draft .panel__foot .select { width: auto; max-width: 14rem; }

/* «Разбор ИИ: оценка» — как оценка сбора: итог на беже (span-5) не тянется за длинной панелью справа */
.ai-notice { margin-bottom: var(--gap-grid); }
.ai-estimate { align-items: start; }
@media (min-width: 64rem) {
  .ai-estimate > .ai-total { position: sticky; top: calc(var(--topbar-h) + var(--space-md)); }
}
.ai-total .form-actions__note { flex: 1 1 100%; color: var(--color-on-beige-muted); }
/* Пояснение вместо платной кнопки — плоская под-плитка на беже */
.ai-lock { background: var(--color-beige-2); color: var(--color-on-beige); }
.ai-lock .icon { color: var(--color-on-beige); }
.ai-notes { display: grid; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.ai-notes p + p { margin-top: 0; }

/* «Ход прогона»: прогресс на беже — заливка бургунди, дорожка светлее карточки (как «Ход сбора») */
.ai-progress { display: grid; gap: var(--space-xs); margin-top: auto; --progress-color: var(--progress-color-on-beige); }
.ai-progress .progress { background: var(--color-beige-2); }
.ai-progress .progress::-webkit-progress-bar { background: var(--color-beige-2); }
.ai-progress .progress-block__head { color: var(--color-on-beige-muted); }
.ai-progress .progress-block__value { color: var(--color-on-beige); }

/* «Обзор → Траты»: ИИ — второй блок цифр под Apify, отделён волосяной линией */
.ov-ai { display: grid; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-rule-soft); }
.ov-ai__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ov-ai__head .ov-subhead { margin-bottom: 0; }

/* «Настройки → Бренд»: длинный текст профиля — высокое поле, строки читаемой длины */
.ai-brand__text { min-height: 28rem; max-width: 60rem; line-height: var(--lh-normal); }

/* ============================================================
   Бариа · Блогеры — общие мелочи каркаса [scaffold]: ник со ссылкой на Instagram.
   Экраны [ui] добавляют свои разделы ниже. Только токены раздела 1; без style="".
   ============================================================ */
.ig-handle { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.ig-handle a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: none; overflow-wrap: anywhere; }
.ig-handle a .icon { color: var(--color-faint); }
@media (hover: hover) { .ig-handle a:hover { text-decoration: underline; } }