/* Единый визуальный дом админки Midas.
   ================================================================

   Женя, 16.08.2026: «у нас есть дизайн-система, где-то заголовки написаны ровно,
   где-то съехали, обрезались... приведи всё к одному формату... чтобы никуда
   ничего не заезжало, всё по линеечке было выровнено... сделай полный причёс».

   До этой правки одинаковых на вид блоков в админке не было вовсе: цвета,
   размеры и отступы каждая страница объявляла заново. Ревизия 16.08.2026
   насчитала 13 независимых наборов переменных (--midas-, --mds-, --cm-, --tv-,
   --vd-, --sd-, --sv-, --pf-, --seo-, --op-, --mm-, безымянный в задачах и
   островок на странице входа), 163 разных цвета, 34 размера шрифта, 13 весов,
   17 радиусов и 77 значений padding. Шесть страниц контент-заводов вообще были
   написаны под СВЕТЛУЮ тему с полупрозрачными белыми карточками - на тёмном
   фоне админки они и выглядели чужими.

   Теперь правда одна и живёт здесь. Файл подключается через UNFOLD["STYLES"],
   то есть на КАЖДОЙ странице админки: и на наших бордах, и на реестрах моделей,
   куда наш шаблон не заходит. Правило: страница не объявляет своих цветов,
   размеров и отступов - она берёт классы .mds-* отсюда. Нужен новый компонент -
   он добавляется сюда, а не в <style> шаблона.

   Порядок разделов:
     1. Шрифт          6. Карточки и секции
     2. Токены         7. Шкалы и графики
     3. Оболочка       8. Таблицы
     4. Шапка          9. Списки и служебные блоки
     5. Управление    10. Реестры Unfold
                      11. Адаптив
*/

/* ============================================================
   1. ШРИФТ

   Бренд-бук (knowledge/midas-brand.md) держит Golos Text, а тема Unfold
   подставляла свой Inter, и админка выглядела чужой рядом с сайтом и бордами.
   Файлы уже лежат в репозитории - подключаем их на всю админку.
   Начертания ровно два: 500 обычный, 600 акцентный. Поэтому и весов в системе
   два: третий браузер дорисовывал бы синтетически, и текст «плыл» бы.
   ============================================================ */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../brand/fonts/GolosText-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../brand/fonts/GolosText-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../brand/fonts/GolosText-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../brand/fonts/GolosText-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* ============================================================
   2. ТОКЕНЫ - единственный источник значений

   Три фона, одна линия (плюс мягкая для строк таблицы), три ступени текста,
   пять акцентов, три радиуса, шесть кеглей, три отступа. Всё остальное -
   производные через color-mix, чтобы подложки состояний не заводили новых
   оттенков.
   ============================================================ */

:root {
  /* Поверхности */
  --m-bg: #171513;          /* полотно страницы */
  --m-surface: #211e1b;     /* карточка */
  --m-surface-2: #292520;   /* верх градиента карточки */
  --m-sunk: #181614;        /* утопленное: поля, шапка таблицы, трек шкалы */
  --m-hover: #24201c;       /* подсветка строки под курсором */

  /* Линии */
  --m-line: #3d3731;        /* все рамки */
  --m-line-soft: #342f2b;   /* разделители строк внутри таблицы */

  /* Текст */
  --m-text: #f5efe6;
  --m-text-2: #d7cec4;      /* ячейки таблиц, вторичные строки */
  --m-muted: #a49b91;       /* подписи, единицы, служебное */

  /* Акценты */
  --m-gold: #d8aa50;        /* фирменный акцент: выбранное, деньги, план */
  --m-gold-ink: #f3cc78;    /* текст на золотой подложке */
  --m-gold-line: #806329;
  --m-gold-bg: #352917;
  --m-orange: #d97757;      /* совпадает с primary темы Unfold */
  --m-green: #67ad83;
  --m-red: #d56a62;
  --m-blue: #6d9fd7;        /* только графики */
  --m-violet: #9d82d4;      /* только графики */

  /* Геометрия */
  --m-r-sm: 8px;            /* кнопки, поля, чипы, треки */
  --m-r-md: 12px;           /* карточки, таблицы, блоки */
  --m-r-lg: 16px;           /* оболочка страницы */
  --m-sp-1: 8px;
  --m-sp-2: 12px;
  --m-sp-3: 20px;

  /* Типографика: шесть ступеней и два веса */
  --m-fs-1: 10px;           /* капс-подписи, сноски */
  --m-fs-2: 12px;           /* базовый текст плотных блоков и таблиц */
  --m-fs-3: 14px;           /* обычный текст, названия строк */
  --m-fs-4: 16px;           /* заголовок секции */
  --m-fs-5: 22px;           /* крупная цифра */
  --m-fs-6: 28px;           /* заголовок страницы */
  --m-fw: 500;
  --m-fw-bold: 600;
  --m-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Шрифт на всю админку, включая реестры и формы темы. */
body,
body .font-sans,
body input,
body select,
body textarea,
body button {
  font-family: var(--m-font);
}

/* ============================================================
   3. ОБОЛОЧКА СТРАНИЦЫ

   Одна тёмная панель на весь экран борда. Внутри неё живут карточки - и это
   единственные два уровня глубины, которые разрешены. Третьего («рамка внутри
   рамки», на которую жаловался Женя) в системе нет: см. раздел 6.
   ============================================================ */

#content {
  max-width: none;
  width: 100%;
}

/* Полотно борда стоит на том же рубеже, что и полоса заголовка реестра. Тема
   отбивает контент своим px-4, и из-за него заголовок «Партнёры» уезжал на
   16px правее заголовка «Клиенты», а полотно - на 16px от края. Женя 16.08.2026:
   «сделать заголовок у всех в одном формате на всех вкладках без всяких
   отступов». Отступ до текста задаёт само полотно, и он равен отступу полосы. */
#main div.px-4:has(> #content > .mds-office) {
  padding-left: 0;
  padding-right: 0;
}

.mds-office {
  background: var(--m-bg);
  color: var(--m-text);
  /* Верхний отступ ровно такой же, как у полосы заголовка на реестрах темы
     (12px сверху, 20px слева): заголовок страницы обязан стоять на одном месте
     на всех вкладках, а не на 15px ниже там, где борд. Радиуса у полотна нет -
     оно занимает всю область контента, скруглять его не от чего. */
  padding: var(--m-sp-2) var(--m-sp-3) var(--m-sp-3);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Полотно дотягивается до низа окна: без этого короткая страница обрывалась
     тёмным прямоугольником посреди светлого фона темы. */
  min-height: 100vh;
  font-size: var(--m-fs-3);
  font-weight: var(--m-fw);
  /* Прокрутка живёт внутри таблиц (.mds-table-wrap), а не у всей страницы:
     overflow:hidden на оболочке резал бы всплывающие подсказки графиков. */
  overflow-x: clip;
}
.mds-office *,
.mds-office *::before,
.mds-office *::after { box-sizing: border-box; }
.mds-office a { color: inherit; text-decoration: none; }
.mds-office :focus-visible { outline: 2px solid var(--m-gold-ink); outline-offset: 2px; }
/* Один зазор между любыми двумя блоками полотна. Раньше отбивку носили только
   некоторые блоки, и соседние карточки склеивались в одно тёмное пятно - именно
   на это Женя показал стрелкой на скрине Техподдержки. Блоки со своей отбивкой
   (.mds-section) объявлены ниже и перебивают это правило. */
.mds-office > * + * { margin-top: var(--m-sp-2); }

/* Ряд одинаковых блоков: одна сетка на всю админку. Ширина ячейки задаётся
   минимумом, поэтому ряд сам ломается на узком экране без media-правил. */
.mds-grid { display: grid; gap: var(--m-sp-1); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mds-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mds-grid.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Обзор читается как единая двухколоночная таблица: у панелей ровно одна
   ширина, а четыре вертикальных ряда (заголовок, график, шкалы, детализация)
   в поддерживающих subgrid браузерах имеют общие границы. */
.mds-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-sp-2); align-items: start; }

/* ============================================================
   4. ШАПКА СТРАНИЦЫ
   ============================================================ */

.mds-head { display: flex; gap: var(--m-sp-2); justify-content: space-between; align-items: flex-start; margin-bottom: var(--m-sp-2); }
.mds-head h1 {
  margin: 0;
  color: var(--m-text);
  font-size: var(--m-fs-6);
  font-weight: var(--m-fw-bold);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.mds-head p { margin: 6px 0 0; color: var(--m-muted); font-size: var(--m-fs-2); max-width: 760px; }

/* Надпись-рубрика над заголовком секции (пришла с заводских страниц). */
.mds-eyebrow { margin: 0 0 4px; color: var(--m-gold); font-size: var(--m-fs-1); font-weight: var(--m-fw-bold); letter-spacing: .1em; text-transform: uppercase; }

/* Плашка состояния источника: показывается, когда с данными что-то не так. */
.mds-source { flex: 0 1 340px; min-width: 240px; border: 1px solid var(--m-line); background: var(--m-surface); border-radius: var(--m-r-md); padding: 10px var(--m-sp-2); }
.mds-source strong { display: flex; align-items: center; gap: var(--m-sp-1); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
.mds-source strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-muted); flex: none; }
.mds-source[data-state="fresh"] strong::before { background: var(--m-green); }
.mds-source[data-state="partial"] strong::before,
.mds-source[data-state="stale"] strong::before { background: var(--m-gold); }
.mds-source[data-state="error"] strong::before { background: var(--m-red); }
.mds-source span { display: block; margin-top: 4px; color: var(--m-muted); font-size: var(--m-fs-1); overflow-wrap: anywhere; }

/* ============================================================
   5. УПРАВЛЕНИЕ: период, фильтры, кнопки, вкладки

   Один рисунок выбранного состояния на всю админку - золотой чип. Раньше их
   было четыре: чипы, таб-пилюли с заливкой, ссылки-стрелки и родные фильтры.
   ============================================================ */

.mds-controls { display: grid; gap: var(--m-sp-1); border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--m-surface); padding: var(--m-sp-2); margin-bottom: var(--m-sp-2); }
.mds-control-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--m-sp-1); min-width: 0; }
.mds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--m-sp-2); }
/* Подпись перед набором кнопок: по чему именно фильтр. Без неё кнопка «август»
   на рефералах читалась как «заработано за август» (Женя 16.08.2026). */
.mds-bar-label { color: var(--m-muted); font-size: var(--m-fs-1); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.mds-presets { display: flex; flex-wrap: wrap; gap: 5px; }

.mds-chip,
.mds-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-sm);
  background: var(--m-sunk);
  color: var(--m-muted) !important;
  font: inherit;
  font-size: var(--m-fs-1);
  font-weight: var(--m-fw-bold);
  letter-spacing: .02em;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.mds-chip.active,
.mds-chip[aria-current] { border-color: var(--m-gold-line); background: var(--m-gold-bg); color: var(--m-gold-ink) !important; }
.mds-chip:hover,
.mds-button:hover { border-color: var(--m-muted); }
/* Период, которого источник ещё не считает: место в ряду занято, но кнопка
   приглушена и не кликается - видно, что данных нет, а не что их нет вовсе. */
.mds-chip.off { opacity: .38; cursor: default; }
.mds-chip.off:hover { border-color: var(--m-line); }
.mds-button { border-color: var(--m-gold-line); background: var(--m-gold-bg); color: var(--m-gold-ink) !important; }
.mds-button.ghost { border-color: var(--m-line); background: var(--m-sunk); color: var(--m-muted) !important; }
.mds-button.danger { border-color: color-mix(in srgb, var(--m-red) 55%, var(--m-line)); background: color-mix(in srgb, var(--m-red) 14%, var(--m-bg)); color: #efb4af !important; }
.mds-button.send { border-color: color-mix(in srgb, var(--m-green) 55%, var(--m-line)); background: color-mix(in srgb, var(--m-green) 14%, var(--m-bg)); color: #a9dcb6 !important; }
.mds-button[disabled] { opacity: .45; cursor: not-allowed; }

/* Значок биржи внутри чипа: биржа узнаётся по своему цвету, а не по тексту. */
.mds-chip i.mds-mark { width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--m-fw-bold); font-style: normal; line-height: 1; flex: none; }
.mds-chip .mds-mark.bingx { background: #2354e6; color: #fff; }
.mds-chip .mds-mark.bybit { background: #f7a600; color: #12100e; }
.mds-chip .mds-mark.all { background: #4a453e; color: var(--m-text); }

/* Тот же значок вне чипа - площадка узнаётся по своему цвету: строка поста и
   карточка канала подписаны TG или VK, а не словом «канал» (правка Жени
   19.08.2026). */
i.mds-mark { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; font-size: 9px; font-weight: var(--m-fw-bold); font-style: normal; line-height: 1; flex: none; vertical-align: -2px; }
.mds-mark.tg { background: #2aabee; color: #08222e; }
.mds-mark.vk { background: #0077ff; color: #fff; }

/* Сам пост под заголовком: заголовок кликается, текст разворачивается на месте.
   Отдельного окна нет намеренно - строка таблицы не должна прыгать. */
.mds-post > summary { cursor: pointer; color: var(--m-text); font-weight: var(--m-fw-bold); list-style: none; }
.mds-post > summary::-webkit-details-marker { display: none; }
.mds-post > summary::after { content: "›"; margin-left: 6px; color: var(--m-muted); }
.mds-post[open] > summary::after { content: "⌄"; }
.mds-post > summary:hover { color: var(--m-gold-ink); }
.mds-post p { max-width: 62ch; margin-top: 6px; color: var(--m-muted); font-size: var(--m-fs-2); line-height: 1.45; white-space: pre-line; }

/* Поле ввода с подписью. Списки не растягиваются во всю строку (правка Жени
   14.08.2026) - им хватает своей ширины. */
.mds-field { display: grid; gap: 4px; min-width: 120px; }
.mds-field span,
.mds-field label { color: var(--m-muted); font-size: var(--m-fs-1); text-transform: uppercase; letter-spacing: .05em; }
.mds-field input,
.mds-field select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-sm);
  background: var(--m-sunk);
  color: var(--m-text);
  font: inherit;
  font-size: var(--m-fs-2);
  padding: 6px 9px;
}
.mds-field.grow { flex: 0 1 190px; max-width: 220px; }
/* Поле прямо в ячейке таблицы: без своей минимальной ширины, иначе колонка
   распирает таблицу шире экрана. */
.mds-field.inline { min-width: 0; width: 100%; }
.mds-field.inline input { padding: 5px 7px; font-size: var(--m-fs-1); }
.mds-field.wide { flex: 1 1 240px; }

/* Ссылка внутри контента: единственный «кликабельный» цвет системы. */
.mds-office .mds-link { color: var(--m-gold-ink); font-weight: var(--m-fw-bold); }
.mds-office .mds-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Якорные переходы по разделам длинной страницы (заводы). */
.mds-anchors { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--m-sp-2); }

/* Переключатель месяца: стрелка - значение - стрелка. */
.mds-month { display: flex; align-items: center; gap: 6px; }
.mds-month a,
.mds-month span { border: 1px solid var(--m-line); border-radius: var(--m-r-sm); padding: 6px 10px; font-size: var(--m-fs-2); }
.mds-month span { min-width: 130px; text-align: center; color: var(--m-text); background: var(--m-sunk); }
.mds-month a.disabled { opacity: .3; pointer-events: none; }

/* ============================================================
   6. КАРТОЧКИ, ПЛАШКИ И СЕКЦИИ

   Правило глубины: фон и рамку носит ТОЛЬКО .mds-card (и .mds-kpi как её вид).
   Всё, что кладётся внутрь карточки, рамку теряет - иначе получается «коробка
   в коробке», на которую Женя показал на скрине дашборда.
   ============================================================ */

.mds-card {
  background: linear-gradient(145deg, var(--m-surface-2), var(--m-surface));
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  padding: var(--m-sp-2) var(--m-sp-2) 14px;
  min-width: 0;
}
.mds-card h2 { margin: 0; color: var(--m-text); font-size: var(--m-fs-4); font-weight: var(--m-fw-bold); line-height: 1.25; }
.mds-card h2 + .sub { margin-top: 3px; }
.mds-card .sub { margin: 0 0 var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-card h2:only-child,
.mds-card h2 + * { margin-top: var(--m-sp-1); }
.mds-column { display: flex; flex-direction: column; }
/* Равная ширина колонок даёт SVG одинаковый естественный масштаб без
   искажения viewBox. Шкалы завернуты в общий семантический ряд: именно он
   отделяет график от таблицы и даёт обеим колонкам одинаковую точку начала
   детализации. */
.mds-overview-chart { min-width: 0; }
.mds-overview-chart .mds-chart { display: block; }
.mds-overview-summary { min-height: 0; }
@supports (grid-template-rows: subgrid) {
  .mds-overview-grid { grid-template-rows: auto auto auto auto; }
  .mds-overview-grid > .mds-column { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
}
/* Карточка с подтверждённой поломкой: кромка слева, а не красный фон целиком -
   иначе экран операций при трёх авариях становится нечитаемым. */
.mds-card.blocking, .mds-card.bad, .mds-card.error { border-left: 3px solid color-mix(in srgb, var(--m-red) 70%, var(--m-line)); }
.mds-card.warn { border-left: 3px solid var(--m-gold-line); }
.mds-demo-receipts[data-state="critical"] { border-left: 3px solid color-mix(in srgb, var(--m-red) 70%, var(--m-line)); }
.mds-demo-receipts[data-state="attention"] { border-left: 3px solid var(--m-gold-line); }
.mds-demo-receipts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--m-sp-2); }
.mds-demo-receipts-head p,
.mds-demo-receipts-monitor { margin: 5px 0 0; color: var(--m-muted); font-size: var(--m-fs-2); line-height: 1.4; }
.mds-demo-receipts-head strong { color: var(--m-text); font-size: var(--m-fs-5); font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums; }
.mds-demo-receipts[data-state="critical"] .mds-demo-receipts-monitor { color: #efaca6; }
.mds-demo-receipts[data-state="attention"] .mds-demo-receipts-monitor { color: var(--m-gold-ink); }

/* Плашка цифры. Ряды плашек - .mds-grid; отдельная сетка на шесть колонок
   нужна только дашборду. */
.mds-grid-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--m-sp-1); margin-bottom: var(--m-sp-2); }
.mds-grid-kpi.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Ряд из одной-трёх плашек: тянуть их на всю ширину нельзя (цифра теряется
   посреди пустого поля), поэтому они встают слева нормальной шириной. */
.mds-grid-kpi.few { grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: start; }
.mds-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--m-sp-1); margin-bottom: var(--m-sp-2); }

.mds-kpi,
.mds-strip > div {
  background: linear-gradient(145deg, var(--m-surface-2), var(--m-surface));
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  padding: var(--m-sp-2);
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.mds-kpi small,
.mds-strip small { display: block; color: var(--m-muted); font-size: var(--m-fs-1); text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }
.mds-kpi strong,
.mds-strip b {
  display: block;
  margin-top: auto;
  padding-top: var(--m-sp-2);
  color: var(--m-text);
  /* Кегль сжимается вместе с колонкой: при ширине окна около 1300px на плашку
     остаётся ~115px, а «1 234 567 ₽» занимает ~130px - фиксированный размер
     молча срезал хвост суммы. */
  font-size: clamp(16px, 1.35vw, var(--m-fs-5));
  font-weight: var(--m-fw-bold);
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mds-kpi span { display: block; margin-top: 5px; color: var(--m-muted); font-size: var(--m-fs-1); line-height: 1.35; }
.mds-kpi-alt { display: block; margin-top: 4px; color: var(--m-muted); font-size: var(--m-fs-2); font-style: normal; font-weight: var(--m-fw-bold); }
.mds-kpi[data-state="not_connected"] strong { color: var(--m-muted); }
/* Главная плашка ряда - золотая. Подсветка нарисована фоном, а не отдельным
   блоком в углу: блок торчал за край и добавлял карточке своей прокрутки. */
.mds-kpi.primary,
.mds-strip > div.accent {
  border-color: var(--m-gold-line);
  background: radial-gradient(circle 40px at calc(100% - 14px) 12px, rgba(216, 170, 80, .12) 0 100%, rgba(216, 170, 80, 0) 100%),
              linear-gradient(145deg, var(--m-gold-bg), var(--m-surface));
}
.mds-kpi.primary strong,
.mds-strip > div.accent b { color: var(--m-gold-ink); }
.mds-kpi.primary .mds-kpi-alt { color: color-mix(in srgb, var(--m-gold-ink) 70%, var(--m-muted)); }
/* Цветные плашки разреза «кто держит»: цвет несёт смысл, форма не меняется. */
.mds-kpi.codex { border-color: color-mix(in srgb, var(--m-blue) 45%, var(--m-line)); }
.mds-kpi.codex strong { color: #8fbbe6; }
.mds-kpi.claude { border-color: color-mix(in srgb, var(--m-green) 45%, var(--m-line)); }
.mds-kpi.claude strong { color: #8ccfa5; }
/* Состояние плашки. Имена green/red/blue пришли из старой вёрстки заводов и
   операций - оставлены синонимами, чтобы шаблоны не переписывать под новые. */
.mds-kpi.ok, .mds-kpi.green { border-color: color-mix(in srgb, var(--m-green) 45%, var(--m-line)); }
.mds-kpi.ok strong, .mds-kpi.green strong { color: #8ccfa5; }
.mds-kpi.warn { border-color: var(--m-gold-line); }
.mds-kpi.warn strong { color: var(--m-gold-ink); }
.mds-kpi.bad, .mds-kpi.red { border-color: color-mix(in srgb, var(--m-red) 45%, var(--m-line)); }
.mds-kpi.bad strong, .mds-kpi.red strong { color: #efaca6; }
.mds-kpi.blue { border-color: color-mix(in srgb, var(--m-blue) 45%, var(--m-line)); }
.mds-kpi.blue strong { color: #8fbbe6; }
/* Плашка со словом вместо числа («НЕ ПОДКЛЮЧЕНО», «OFFLINE»): крупный кегль и
   запрет переноса тут срезали бы хвост слова, поэтому у неё свой размер. */
.mds-kpi.text strong {
  font-size: var(--m-fs-3);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Внутри карточки лишних рамок нет: ни у таблиц, ни у блоков, ни у заглушек. */
/* Внутри карточки подложка и рамка уже есть: второй слой дал бы «коробку в коробке». */
.mds-card .mds-table-wrap { border: 0; border-radius: 0; background: none; }
.mds-card .mds-empty { border: 0; padding: var(--m-sp-3) var(--m-sp-2); }

/* Разделённая часть карточки: только линия сверху, без своей коробки. */
.mds-detail { border-top: 1px solid var(--m-line); margin-top: 14px; padding-top: var(--m-sp-2); }
.mds-detail h3,
.mds-subhead { margin: 0 0 var(--m-sp-1); color: var(--m-muted); font-size: var(--m-fs-1); font-weight: var(--m-fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.mds-detail .mds-table-wrap + h3 { margin-top: var(--m-sp-2); }

/* Три цифры в ряд под воронкой: разделитель сверху вместо трёх коробок. */
.mds-retention { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--m-sp-1) var(--m-sp-2); border-top: 1px solid var(--m-line); margin-top: 14px; padding-top: var(--m-sp-2); }
.mds-retention div { min-width: 0; }
.mds-retention small { display: block; color: var(--m-muted); font-size: var(--m-fs-1); text-transform: uppercase; letter-spacing: .05em; }
.mds-retention b { display: block; margin-top: 3px; color: var(--m-text); font-size: var(--m-fs-4); font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums; }
.mds-retention i { color: var(--m-muted); font-style: normal; }

/* ============================================================
   7. ШКАЛЫ, СПИСКИ-СТРОКИ И ГРАФИКИ
   ============================================================ */

.mds-funnel { display: flex; flex-direction: column; gap: 7px; }
.mds-stage {
  display: grid;
  /* Третья колонка ограничена сверху: с «auto» она тянулась по самой длинной
     подписи («% к сравнению») и сжимала шкалу почти до нуля. */
  grid-template-columns: minmax(120px, 1.05fr) minmax(0, 2fr) minmax(78px, 132px);
  align-items: center;
  gap: var(--m-sp-2);
  border: 1px solid transparent;
  border-radius: var(--m-r-sm);
  padding: 5px 7px;
}
.mds-stage:hover,
.mds-stage:focus-visible,
.mds-stage.active { background: var(--m-hover); border-color: var(--m-line); outline: none; }
.mds-stage[data-state="not_connected"] { opacity: .58; }
.mds-stage-title { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); line-height: 1.25; }
.mds-stage-title small { display: block; margin-top: 2px; color: var(--m-muted); font-size: var(--m-fs-1); font-weight: var(--m-fw); }
.mds-stage-result { color: var(--m-text); font-size: var(--m-fs-4); font-weight: var(--m-fw-bold); text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mds-stage-result small,
.mds-stage-delta { display: block; margin-top: 2px; color: var(--m-muted); font-size: var(--m-fs-1); font-weight: var(--m-fw); }
.mds-stage-result .mds-stage-conversion { display: block; margin-top: 2px; color: var(--m-text-2); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }

/* Полоса-шкала. Одна высота и один радиус на всю админку: раньше их было три
   (22px квадратная на задачах, 26px круглая на дашборде, 8px на заводах). */
.mds-track { --mds-starts: var(--m-gold); --mds-demo: var(--m-blue); --mds-subscribed: #b57cdd; --mds-paid: var(--m-green); position: relative; display: flex; height: 22px; border: 1px solid var(--m-line); border-radius: var(--m-r-sm); background: var(--m-sunk); overflow: hidden; }
/* flex: 0 0 auto - чтобы сегменты составной полосы не ужимались друг под друга:
   иначе ширина перестаёт соответствовать числу рядом. */
.mds-track i { position: relative; display: block; flex: 0 0 auto; width: var(--fill, 0%); max-width: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--m-gold)) 55%, #000), var(--tone, var(--m-gold))); }
.mds-track.money { --tone: var(--m-green); }
/* Ступень «наша работа» (сколько постов выпустили) не меряется одной шкалой
   с людьми: полоса нейтральная, во всю ширину, как шапка воронки. */
.mds-track.work i { background: linear-gradient(90deg, #3b3630, var(--m-muted)); }
/* Сегментная шкала: доли одной строки разными цветами. */
.mds-track i.seg-owner { background: linear-gradient(90deg, color-mix(in srgb, var(--m-gold) 55%, #000), var(--m-gold)); }
.mds-track i.seg-codex { background: linear-gradient(90deg, color-mix(in srgb, var(--m-blue) 55%, #000), var(--m-blue)); }
.mds-track i.seg-claude { background: linear-gradient(90deg, color-mix(in srgb, var(--m-green) 55%, #000), var(--m-green)); }
.mds-track i.seg-unknown { background: linear-gradient(90deg, #3b3630, var(--m-muted)); }
/* Риска лучшего месяца и подпись доли. */
.mds-track u { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--m-blue); }
/* Подпись доли лежит поверх заливки, поэтому носит свою подложку: при шкале
   под 100% светлый текст на золотом иначе не читался. */
.mds-track b { position: absolute; right: 5px; top: 3px; padding: 0 5px; border-radius: 4px; background: rgba(12, 11, 10, .55); color: var(--m-text); font-size: var(--m-fs-1); font-weight: var(--m-fw-bold); line-height: 14px; font-variant-numeric: tabular-nums; }

/* Строка «подпись - значение» без своей коробки: разделитель вместо рамки. */
/* Очередь по зонам: собственная сетка, а не общая шкала воронки.

   Правка Жени 16.08.2026: «шкала как-то сдвинута направо, так что там даже
   текст не умещается, и в итоге шкала на разных расстояниях по высоте... сделай
   её в рамочку, и справа чтобы был текст с подсказками в одну строку, чтобы
   расстояния по высоте были равные». У воронки колонка подписи резиновая, а
   колонка итога узкая: на широком экране шкала уезжала вправо, а расклад по
   держателям («на мне 5 · Codex 52 · руководитель 9») вставал в три строки и
   ломал ритм. Здесь колонки жёсткие, расклад - одна строка, высота строк одна. */
.mds-zones { display: flex; flex-direction: column; }
.mds-zone-row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(120px, 1fr) 46px minmax(0, 250px);
  align-items: center;
  gap: var(--m-sp-2);
  border-bottom: 1px solid var(--m-line-soft);
  padding: 5px 0;
  min-height: 36px;
}
.mds-zone-row:last-child { border-bottom: 0; }
.mds-zone-name { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mds-zone-total { color: var(--m-text); font-size: var(--m-fs-4); font-weight: var(--m-fw-bold); text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mds-zone-split { color: var(--m-muted); font-size: var(--m-fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Цвет ключа в подписи совпадает с цветом его куска шкалы: строка читается без
   легенды под таблицей. */
.mds-zone-split b { font-weight: var(--m-fw-bold); }
.mds-zone-split b.h-owner { color: var(--m-gold-ink); }
.mds-zone-split b.h-codex { color: #8fbbe6; }
.mds-zone-split b.h-claude { color: #8ccfa5; }
.mds-zone-split b.h-unknown { color: var(--m-text-2); }

.mds-breakdown { display: flex; flex-direction: column; }
.mds-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--m-sp-1); border-bottom: 1px solid var(--m-line-soft); padding: 7px 0; font-size: var(--m-fs-2); color: var(--m-muted); }
.mds-breakdown-row:last-child { border-bottom: 0; }
.mds-breakdown-row b { color: var(--m-text); font-size: var(--m-fs-3); font-weight: var(--m-fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Пары «название - значение» (карточка клиента, платежа). */
.mds-dl { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(0, 1fr); gap: 6px var(--m-sp-2); margin: var(--m-sp-2) 0 0; font-size: var(--m-fs-2); }
.mds-dl dt { color: var(--m-muted); }
.mds-dl dd { min-width: 0; margin: 0; color: var(--m-text); overflow-wrap: anywhere; }

/* Лента событий. */
.mds-timeline { margin: var(--m-sp-2) 0 0; padding: 0; list-style: none; }
.mds-timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--m-sp-1); padding: 8px 0; border-bottom: 1px solid var(--m-line-soft); font-size: var(--m-fs-2); }
.mds-timeline li:last-child { border-bottom: 0; }

/* График: линии, сетка, подсказка по колонке. */
.mds-chart { width: 100%; min-height: 210px; margin-top: 4px; overflow: visible; }
.mds-chart-grid line { stroke: var(--m-line); stroke-width: 1; }
.mds-chart polyline { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.mds-chart .starts { stroke: var(--mds-starts, var(--m-gold)); }
.mds-chart .demo { stroke: var(--mds-demo, var(--m-blue)); }
.mds-chart .subscribed { stroke: var(--mds-subscribed, #b57cdd); }
.mds-chart .paid { stroke: var(--mds-paid, var(--m-green)); }
.mds-funnel-line { opacity: .3; }
.mds-funnel-line.active { opacity: 1; stroke-width: 4; }
.mds-chart-tick,
.mds-chart-day { fill: var(--m-muted); font-size: var(--m-fs-1); }
.mds-source-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mds-source-line.dim { opacity: .28; }
.mds-col .hit { fill: transparent; }
.mds-col .guide { stroke: var(--m-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mds-col .dot { stroke: var(--m-bg); stroke-width: 2; }
.mds-col .dot.starts { fill: var(--m-gold); }
.mds-col .dot.demo { fill: var(--m-blue); }
.mds-col .dot.subscribed { fill: #b57cdd; }
.mds-col .dot.paid { fill: var(--m-green); }
.mds-col .guide,
.mds-col .dot,
.mds-col .tip { opacity: 0; pointer-events: none; }
.mds-col:hover .guide,
.mds-col:hover .dot,
.mds-col:hover .tip,
.mds-col:focus-within .guide,
.mds-col:focus-within .dot,
.mds-col:focus-within .tip { opacity: 1; }
.mds-col .tip rect { fill: #0f0e0d; stroke: var(--m-line); }
.mds-col .tip text { fill: var(--m-text); font-size: var(--m-fs-2); }
.mds-legend { display: flex; flex-wrap: wrap; gap: 4px var(--m-sp-2); margin: 0 0 6px; color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-legend i { display: inline-block; width: 18px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; background: var(--tone, var(--m-muted)); }
.mds-legend i.selected { background: var(--m-gold); }
.mds-legend i.demo { background: var(--m-blue); }
.mds-legend span.dim { opacity: .45; }

/* ============================================================
   8. ТАБЛИЦЫ - один вид на всю админку

   Числа вправо, первая колонка влево, строки плотные: «чтобы я на одном экране
   видел максимум строк» (Женя 15.08.2026). Рамку носит обёртка - и только
   когда таблица стоит на полотне, а не внутри карточки.
   ============================================================ */

.mds-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  /* Реестр на полотне - такая же панель, как «Клиенты» и «Оплаты» у темы:
     подложка светлее фона страницы, шапка колонок темнее подложки. Без этого
     таблицы Партнёров и Рефералов сливались с полотном, и шапка колонок не
     читалась как шапка (правка Жени 16.08.2026: «таблицу в формате как у
     клиентов и оплат, и по цвету, и по визуалу»). */
  background: var(--m-surface);
}
.mds-table { width: 100%; border-collapse: collapse; font-size: var(--m-fs-2); }
.mds-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--m-muted);
  font-weight: var(--m-fw);
  text-align: right;
  padding: 6px 9px;
  border-bottom: 1px solid var(--m-line);
  background: var(--m-sunk);
  white-space: nowrap;
}
.mds-table td { color: var(--m-text-2); text-align: right; padding: 5px 9px; border-bottom: 1px solid var(--m-line-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Все строки одной высоты, как в реестрах темы. У Партнёров ряд с кнопкой
   «Выплатить» был на 14px выше соседнего с прочерком, и таблица шла лесенкой
   (Женя 16.08.2026: «таблицу в формате как у клиентов и оплат»). Кнопка внутри
   строки ужимается до высоты строки, а не распирает её. */
.mds-table tbody tr { height: 34px; }
.mds-table tbody .mds-button { padding: 1px 9px; min-height: 22px; }
/* Дата - одно целое: «14.08.2026 21:35» рвалась по пробелу на две строки. */
.mds-table td.date, .mds-table td.nowrap { white-space: nowrap; }
.mds-table tr:last-child td { border-bottom: 0; }
.mds-table th:first-child,
.mds-table td:first-child { text-align: left; }
.mds-table td:first-child { font-variant-numeric: normal; overflow-wrap: anywhere; }
.mds-table tbody tr:hover td { background: var(--m-hover); }
.mds-table tr.active td { background: var(--m-hover); color: var(--m-text); }
.mds-table tr.dead td { opacity: .55; }
/* Строка-ошибка: не только точка в одной ячейке, но и вся строка. */
.mds-table tr.row-error td { background: color-mix(in srgb, var(--m-red) 9%, transparent); }
.mds-table tr.row-error:hover td { background: color-mix(in srgb, var(--m-red) 15%, transparent); }
/* Таблица со словами вместо чисел (операции, состояния): цифровое выравнивание
   вправо разносит текст по краям и читается как две разные колонки. */
.mds-table.text td, .mds-table.text th { text-align: left; font-variant-numeric: normal; }
/* Таблица постов: слова слева, цифры результата справа. Колонка «О чём пост»
   держит ширину, чтобы раскрытый текст поста не ломал соседние колонки, а
   название канала не рвалось на две строки. */
.mds-table.posts td, .mds-table.posts th { text-align: left; font-variant-numeric: normal; }
.mds-table.posts td.num, .mds-table.posts th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mds-table.posts td.post, .mds-table.posts th.post { min-width: 280px; }
.mds-table.posts td.chan { white-space: nowrap; }
/* Матрица «куда ушёл материал» (правка Жени 20.08.2026): в клетке ровно один
   значок - зелёная галочка ссылкой на сам пост или красный крестик с причиной
   в подсказке. Слов в клетке нет. */
.mds-table.posts td.mark, .mds-table.posts th.mark { text-align: center; white-space: nowrap; }
.mds-go { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; line-height: 1; text-decoration: none; }
.mds-table a.mds-go { color: var(--m-green); background: color-mix(in srgb, var(--m-green) 14%, transparent); }
.mds-table a.mds-go:hover { background: color-mix(in srgb, var(--m-green) 26%, transparent); text-decoration: none; }
.mds-go.bad { color: var(--m-red); background: color-mix(in srgb, var(--m-red) 12%, transparent); cursor: help; }
.mds-go.wait { color: var(--m-gold-ink); background: color-mix(in srgb, var(--m-gold-ink) 12%, transparent); cursor: help; }
/* «Туда не отправляли» - значок присутствует, но не спорит за внимание. */
.mds-go.off { color: var(--m-muted); background: transparent; opacity: .45; cursor: help; }
/* Форма-кнопка прямо в ячейке (например «Выплатить») не должна добавлять строке
   высоты своими полями. */
.mds-table form { display: inline-flex; margin: 0; }
.mds-table a { color: var(--m-gold-ink); }
.mds-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mds-table th a.mds-sort { color: var(--m-muted) !important; white-space: nowrap; font-weight: var(--m-fw); }
.mds-table th a.mds-sort:hover { color: var(--m-text) !important; }
.mds-table th a.mds-sort.active { color: var(--m-gold-ink) !important; }
/* Плотный вариант для таблиц внутри карточки. */
.mds-table.compact { font-size: var(--m-fs-1); }
.mds-table.compact th,
.mds-table.compact td { padding: 4px 6px; white-space: nowrap; }
/* loose - плотная таблица БЕЗ прокрутки (таблица дней на дашборде, правка Жени
   15.08.2026). Раз рамки с прокруткой нет, запрет переноса срезал бы правые
   колонки: здесь текст переносится, а не уезжает за край. */
.mds-table.compact.loose th,
.mds-table.compact.loose td:not(.date) { white-space: normal; overflow-wrap: anywhere; }

/* Техподдержка: текущая очередь реакции отделена от периодных KPI. */
.mds-support-diagnostic { margin: calc(-1 * var(--m-sp-1)) 0 var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-support-diagnostic b { color: var(--m-text); font-variant-numeric: tabular-nums; }
.mds-support-pending { margin-top: var(--m-sp-2); }
.mds-support-accounts { margin-top: var(--m-sp-2); }
.mds-support-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--m-gold) 18%, var(--m-sunk)); color: var(--m-gold-ink); font-size: 9px; font-style: normal; font-weight: var(--m-fw-bold); }
.mds-support-count { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 9px; padding: 0 5px; background: color-mix(in srgb, var(--m-red) 22%, var(--m-sunk)); color: #efaca6; font-size: 10px; font-variant-numeric: tabular-nums; }
.mds-support-note { margin: 0 0 var(--m-sp-1); color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-support-table { min-width: 1120px; }
.mds-support-table td:nth-child(2), .mds-support-table th:nth-child(2) { min-width: 170px; text-align: left; }
.mds-support-table td:nth-child(3), .mds-support-table th:nth-child(3) { min-width: 260px; max-width: 390px; text-align: left; }
.mds-draft-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }

/* Статья и весь контур её посевов в одной строке. Название остаётся рядом со
   знаком: один голый крест без подписи нельзя быстро сопоставить с площадкой. */
.mds-articles-table { min-width: 1180px; }
.mds-articles-table th:nth-child(2), .mds-articles-table td:nth-child(2) { min-width: 210px; text-align: left; }
.mds-articles-table th:nth-child(4), .mds-articles-table td:nth-child(4) { min-width: 560px; text-align: left; }
.mds-seeding-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mds-seeding-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: var(--m-sunk);
  color: var(--m-text-2) !important;
  padding: 2px 7px;
  font-size: var(--m-fs-1);
  font-weight: var(--m-fw-bold);
  line-height: 1.35;
  white-space: nowrap;
  cursor: help;
}
.mds-seeding-state.published { border-color: color-mix(in srgb, var(--m-green) 55%, var(--m-line)); color: #9bd0ad !important; cursor: pointer; }
.mds-seeding-state.uncertain { border-color: var(--m-gold-line); color: var(--m-gold-ink) !important; }
.mds-seeding-state.missing { border-color: color-mix(in srgb, var(--m-red) 50%, var(--m-line)); color: #efb4af !important; }
.mds-seeding-state:hover, .mds-seeding-state:focus-visible { background: var(--m-hover); outline: 2px solid transparent; text-decoration: none !important; }
.mds-seeding-legend { display: flex; flex-wrap: wrap; gap: 6px var(--m-sp-2); margin: var(--m-sp-1) 0; color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-seeding-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mds-seeding-legend i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-weight: var(--m-fw-bold); }
.mds-seeding-legend i.published { background: color-mix(in srgb, var(--m-green) 18%, transparent); color: #9bd0ad; }
.mds-seeding-legend i.uncertain { background: color-mix(in srgb, var(--m-gold) 18%, transparent); color: var(--m-gold-ink); }
.mds-seeding-legend i.missing { background: color-mix(in srgb, var(--m-red) 18%, transparent); color: #efb4af; }
.mds-metric-note { margin: var(--m-sp-1) 0 var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-1); line-height: 1.45; }

/* Метка состояния в ячейке. */
.mds-badge { display: inline-block; max-width: 100%; padding: 2px 7px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-sunk); color: var(--m-muted); font-size: var(--m-fs-1); overflow-wrap: anywhere; }
/* Состояния приходят из разных снимков своими словами (yes/no, blocking,
   attention, manual). Смысл у них один из трёх, поэтому они собраны
   синонимами в те же три группы, а не заведены отдельными видами. */
.mds-badge.fresh, .mds-badge.active, .mds-badge.success, .mds-badge.confirmed, .mds-badge.ok, .mds-badge.yes, .mds-badge.up, .mds-badge.on { color: #9bd0ad; border-color: color-mix(in srgb, var(--m-green) 50%, var(--m-line)); }
.mds-badge.stale, .mds-badge.unknown, .mds-badge.partial, .mds-badge.warn, .mds-badge.attention, .mds-badge.manual, .mds-badge.off { color: var(--m-gold-ink); border-color: var(--m-gold-line); }
.mds-badge.error, .mds-badge.expired, .mds-badge.rejected, .mds-badge.bad, .mds-badge.blocking, .mds-badge.no, .mds-badge.down, .mds-badge.dead { color: #efaca6; border-color: color-mix(in srgb, var(--m-red) 50%, var(--m-line)); }

/* Пагинация под таблицей. */
.mds-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--m-sp-1); margin-top: var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-2); }
.mds-pagination a { border: 1px solid var(--m-line); border-radius: var(--m-r-sm); padding: 7px 11px; }

/* ============================================================
   9. СЛУЖЕБНЫЕ БЛОКИ
   ============================================================ */

.mds-alert { border: 1px solid var(--m-gold-line); background: color-mix(in srgb, var(--m-gold) 12%, var(--m-bg)); color: #e8d4a1; border-radius: var(--m-r-sm); padding: 9px var(--m-sp-2); margin-bottom: var(--m-sp-2); font-size: var(--m-fs-2); }
/* Django кладёт в класс свой тег сообщения (success / warning / info / error),
   поэтому теги перечислены рядом со своими видами: иначе зелёное «Отмечена
   выплата» приходило золотым. */
.mds-alert.error, .mds-alert.danger { border-color: color-mix(in srgb, var(--m-red) 50%, var(--m-line)); background: color-mix(in srgb, var(--m-red) 12%, var(--m-bg)); color: #efb4af; }
.mds-alert.ok, .mds-alert.success { border-color: color-mix(in srgb, var(--m-green) 50%, var(--m-line)); background: color-mix(in srgb, var(--m-green) 12%, var(--m-bg)); color: #b6e0c0; }
.mds-alert.info, .mds-alert.debug { border-color: var(--m-line); background: var(--m-surface); color: var(--m-text-2); }
/* Сообщение с крестиком: текст слева, кнопка справа и мельче обычной - она
   служебная и не должна спорить с действиями страницы. */
.mds-alert:has(> button) { display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-2); padding-right: 7px; }
.mds-alert > button.mds-button { flex: none; padding: 2px 9px; font-size: var(--m-fs-3); line-height: 1.2; }
.mds-empty { color: var(--m-muted); border: 1px dashed var(--m-line); border-radius: var(--m-r-md); padding: var(--m-sp-3); text-align: center; font-size: var(--m-fs-2); }
.mds-note { color: var(--m-muted); font-size: var(--m-fs-1); line-height: 1.45; margin-top: var(--m-sp-1); }
.mds-definition { border-left: 3px solid var(--m-line); color: var(--m-muted); font-size: var(--m-fs-1); margin-top: var(--m-sp-2); padding-left: 9px; overflow-wrap: anywhere; }
.mds-maturity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--m-gold-line); border-radius: var(--m-r-sm); background: color-mix(in srgb, var(--m-gold) 12%, var(--m-bg)); color: #e8d4a1; font-size: var(--m-fs-1); margin: var(--m-sp-1) 0; padding: 7px 10px; }
.mds-list-facts { display: flex; flex-wrap: wrap; gap: 4px var(--m-sp-2); margin: 0 0 var(--m-sp-1); color: var(--m-muted); font-size: var(--m-fs-1); line-height: 1.45; }
.mds-list-facts b { color: var(--m-text); font-weight: var(--m-fw-bold); }
.mds-action { display: inline-block; border: 1px solid var(--m-gold-line); border-radius: var(--m-r-sm); background: var(--m-gold-bg); color: var(--m-gold-ink) !important; padding: 8px var(--m-sp-2); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
.mds-sensitive { letter-spacing: .12em; color: var(--m-gold); }
.mds-meta { color: var(--m-muted); font-size: var(--m-fs-1); line-height: 1.4; }

/* Строка состояния сервиса: точка, название, факт. */
.mds-status-card { display: flex; justify-content: space-between; align-items: center; gap: var(--m-sp-3); }
/* Мониторинг раздела - ровный список: название, пояснение, факт. Колонки общие
   для всех строк, высота строки одна, разделители те же, что в таблицах. */
.mds-status-list { display: flex; flex-direction: column; }
.mds-status-list .mds-status-card {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--m-sp-2);
  border-bottom: 1px solid var(--m-line-soft);
  padding: 7px 0;
  min-height: 34px;
}
.mds-status-list .mds-status-card:last-child { border-bottom: 0; }
.mds-status-list .mds-state { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
/* Средняя колонка объясняет, ЧТО это за сервис (правка Жени 19.08.2026), поэтому
   текст переносится целиком: обрезать объяснение многоточием бессмысленно. */
.mds-status-list .mds-meta { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.mds-status-list b { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); text-align: right; }
.mds-status-list b small { display: block; margin-top: 2px; color: var(--m-muted); font-size: var(--m-fs-1); font-weight: var(--m-fw); }
/* Блок доступности всегда во всю ширину полотна, даже если страница разложена
   в колонки: это общий статус раздела, а не карточка одной из колонок. */
[data-section-monitor] { grid-column: 1 / -1; }
.mds-monitor-groups { display: grid; gap: var(--m-sp-3); }
.mds-monitor-group { min-width: 0; }
.mds-monitor-group h3 { margin: 0 0 4px; color: var(--m-gold-ink); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
.mds-monitor-group + .mds-monitor-group { border-top: 1px solid var(--m-line); padding-top: var(--m-sp-2); }
.mds-status-card .state,
.mds-state { display: inline-flex; align-items: center; gap: 6px; color: var(--m-muted); font-size: var(--m-fs-2); }
.mds-status-card .state::before,
.mds-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-muted); flex: none; }
/* Слова состояний тоже приходят из разных снимков (up/down/off у мониторинга,
   ok/error у операций) - собраны синонимами в три цвета. Неизвестное остаётся
   серым намеренно: «не знаем» не должно выглядеть как «всё хорошо». */
.mds-status-card .state.fresh::before, .mds-state.ok::before, .mds-state.fresh::before, .mds-state.up::before { background: var(--m-green); }
.mds-status-card .state.stale::before, .mds-state.warn::before, .mds-state.attention::before, .mds-state.stale::before, .mds-state.off::before { background: var(--m-gold); }
.mds-status-card .state.error::before, .mds-state.bad::before, .mds-state.error::before, .mds-state.down::before { background: var(--m-red); }

/* Карточка источника с цветной кромкой слева. */
.mds-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--m-sp-1); margin-bottom: var(--m-sp-2); }
.mds-source-card { border: 1px solid var(--m-line); border-left: 3px solid var(--m-muted); border-radius: var(--m-r-md); padding: 10px var(--m-sp-2); background: var(--m-surface); min-width: 0; }
.mds-source-card[data-state="fresh"] { border-left-color: var(--m-green); }
.mds-source-card[data-state="stale"] { border-left-color: var(--m-gold); }
.mds-source-card[data-state="error"] { border-left-color: var(--m-red); }
.mds-source-card strong { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
.mds-source-card span { display: block; margin-top: 4px; color: var(--m-muted); font-size: var(--m-fs-1); overflow-wrap: anywhere; }

/* Плитка с парами значений (валюты, метрики канала). */
.mds-currency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--m-sp-1); margin: var(--m-sp-1) 0; }
.mds-currency { border: 1px solid var(--m-line); border-radius: var(--m-r-md); padding: 10px var(--m-sp-2); background: var(--m-surface); min-width: 0; }
.mds-currency b { color: var(--m-text); font-size: var(--m-fs-2); font-weight: var(--m-fw-bold); }
.mds-currency dl { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--m-sp-1); margin: 6px 0 0; font-size: var(--m-fs-1); }
.mds-currency dt { color: var(--m-muted); }
.mds-currency dd { margin: 0; color: var(--m-text); overflow-wrap: anywhere; }

/* Рубильник контура (заводы): подпись слева, состояние справа. */
.mds-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.mds-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-sunk); color: var(--m-muted); font-size: var(--m-fs-1); padding: 5px 10px; }
.mds-toggle[data-on="true"] { border-color: color-mix(in srgb, var(--m-green) 50%, var(--m-line)); color: #9bd0ad; }
/* Рубильник, которым сейчас нельзя щёлкнуть (воркер не отвечает), обязан
   выглядеть неактивным - иначе кнопка обманывает. */
.mds-toggle[disabled], .mds-toggle.disabled { opacity: .45; cursor: not-allowed; }

/* Секция страницы: заголовок и содержимое, без своей рамки. */
.mds-section { margin-top: var(--m-sp-3); }
.mds-section > h2 { margin: 0 0 var(--m-sp-1); color: var(--m-text); font-size: var(--m-fs-4); font-weight: var(--m-fw-bold); }
.mds-section > .sub { margin: 0 0 var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-1); }

/* ------------------------------------------------------------
   Витрина зон: индикатор у названия раздела и карточка расклада.

   Женя 16.08.2026: «хочу на каждой вкладке рядом с названием статус... пришёл
   к руководителю, он мне весь расклад дал». Карточка всплывает поверх страницы
   и места не занимает.

   Женя 18.08.2026: «сделай пошире и чтобы она нажатием включалась и тем же
   нажатием выключалась». Точка стала кнопкой, открытие держит класс is-open от
   клика, а не :hover - карточка больше не выскакивает под случайным курсором и
   закрывается тем же нажатием. Ширина поднята с 420 до 680 px: расклад зоны с
   блоками «ждут решения» и «сделано» в узкую колонку не помещался.
   ------------------------------------------------------------ */

.mds-zone { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.mds-zone-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--m-line);
  background: var(--m-sunk);
  color: var(--m-muted);
  font-size: 10px;
  font-weight: var(--m-fw-bold);
  line-height: 1;
  cursor: inherit;
}
/* Кнопка - только обёртка вокруг точки: своей рамки и фона у неё нет. */
.mds-zone-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Цвет - не единственный признак: внутри точки стоит знак, и у неё есть
   словесная подпись для чтения с экрана. */
.mds-zone-dot.green { border-color: color-mix(in srgb, var(--m-green) 60%, var(--m-line)); background: color-mix(in srgb, var(--m-green) 20%, var(--m-bg)); color: #a9dcb6; }
.mds-zone-dot.yellow { border-color: var(--m-gold-line); background: var(--m-gold-bg); color: var(--m-gold-ink); }
.mds-zone-dot.red { border-color: color-mix(in srgb, var(--m-red) 60%, var(--m-line)); background: color-mix(in srgb, var(--m-red) 20%, var(--m-bg)); color: #efb4af; }
.mds-zone-toggle:focus-visible .mds-zone-dot { outline: 2px solid var(--m-gold-ink); outline-offset: 2px; }

.mds-zone-card {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  width: min(680px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  background: var(--m-surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  padding: var(--m-sp-2);
  text-align: left;
  white-space: normal;
  cursor: default;
}
.mds-zone.is-open > .mds-zone-card { display: block; }
/* У правого края экрана карточка раскрывается влево, иначе уезжает за границу. */
.mds-zone.right > .mds-zone-card { left: auto; right: 0; }

.mds-zone-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--m-sp-1); margin-bottom: 6px; }
.mds-zone-head b { color: var(--m-text); font-size: var(--m-fs-3); font-weight: var(--m-fw-bold); }
.mds-zone-head span { color: var(--m-muted); font-size: var(--m-fs-1); }
.mds-zone-headline { margin: 0 0 var(--m-sp-1); color: var(--m-text-2); font-size: var(--m-fs-2); line-height: 1.5; }
.mds-zone-block { border-top: 1px solid var(--m-line-soft); padding-top: var(--m-sp-1); margin-top: var(--m-sp-1); }
.mds-zone-block > h4 { margin: 0 0 4px; color: var(--m-muted); font-size: var(--m-fs-1); font-weight: var(--m-fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.mds-zone-block p { margin: 0 0 3px; color: var(--m-text-2); font-size: var(--m-fs-2); line-height: 1.45; }
.mds-zone-block p span { color: var(--m-muted); }
.mds-zone-block ul { margin: 0; padding-left: 16px; color: var(--m-text-2); font-size: var(--m-fs-2); line-height: 1.45; }
.mds-zone-block ul li + li { margin-top: 3px; }
.mds-zone-block.wait { border-top-color: var(--m-gold-line); }
.mds-zone-block.wait > h4 { color: var(--m-gold-ink); }
.mds-zone-block.wait li.overdue { color: #efc98f; }
.mds-zone-foot { margin-top: var(--m-sp-1); color: var(--m-muted); font-size: var(--m-fs-1); overflow-wrap: anywhere; }

/* Та же карточка, но развёрнутая на странице «Зоны»: без всплывания. */
.mds-zone-open { position: static; display: block; width: auto; max-height: none; box-shadow: none; background: none; border: 0; padding: 0; }

/* Значок рядом с логином (правка Жени 16.08.2026): «если есть логин, добавь
   рядом значочек, чтобы в один клик написать человеку». Сам логин остаётся
   текстом - кликается только значок. Живёт и в реестрах Unfold, поэтому
   объявлен вне .mds-office. */
.mds-login { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mds-login-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid transparent; flex: none; line-height: 0; text-decoration: none; }
.mds-login-ico.tg { color: #4aa3df; background: rgba(74, 163, 223, .12); }
.mds-login-ico.tv { color: #64b5a0; background: rgba(100, 181, 160, .12); }
.mds-login-ico:hover { border-color: currentColor; }
.mds-login-ico:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ============================================================
   10. СТРАНИЦЫ ТЕМЫ UNFOLD (реестры «Клиенты», «Оплаты» и формы)

   Наш шаблон туда не заходит, вид задаёт тема. Приводим её таблицу к тому же
   рисунку, что и .mds-table: та же шапка, те же разделители, то же правое
   выравнивание чисел. Селектор по id перебивает утилитарные классы темы.
   ============================================================ */

#result_list {
  border-collapse: collapse;
  font-size: var(--m-fs-2);
}
#result_list th,
#result_list td {
  padding: 5px 9px !important;
  line-height: 1.35;
  border-bottom: 1px solid var(--m-line-soft) !important;
}
#result_list thead th,
#result_list thead th a {
  color: var(--m-muted) !important;
  font-weight: var(--m-fw) !important;
  white-space: nowrap;
}
#result_list thead th {
  background: var(--m-sunk) !important;
  border-bottom: 1px solid var(--m-line) !important;
}
#result_list tbody td { color: var(--m-text-2) !important; font-variant-numeric: tabular-nums; }
#result_list tbody tr:hover td { background: var(--m-hover) !important; }

/* Колонки-галочки и короткие статусы ужимаются до содержимого и стоят по центру:
   на «Канал» и «VIP» уходила ширина целого слова, а внутри одна галочка. */
#result_list td.field-client_channel,
#result_list td.field-client_vip,
#result_list td.field-channel_subscription_display,
#result_list td.field-vip_subscription_display,
#result_list td.field-demo_access_display,
#result_list th.column-client_channel,
#result_list th.column-client_vip,
#result_list th.column-channel_subscription_display,
#result_list th.column-vip_subscription_display,
#result_list th.column-demo_access_display {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

/* Даты и числа не рвутся по пробелу: «14.08.2026 21:35» занимала две строки. */
#result_list td[class*="_display"],
#result_list td.field-id,
#result_list td.field-tg_id,
#result_list td.field-successful_payments_count,
#result_list td.field-days_until_first_purchase {
  white-space: nowrap;
}

/* Рабочие реестры Натальи на телефоне остаются таблицами, как на компьютере.
   Unfold до desktop-breakpoint превращает каждую строку в высокую карточку и
   прячет заголовки; при сотнях клиентов это делает список непригодным. Здесь
   возвращаем только Клиентам и Платежам табличные display-режимы, оставляя
   широкое полотно в штатном горизонтально прокручиваемом контейнере темы. */
@media (max-width: 1023px) {
  body.change-list.app-clients.model-client #result_list,
  body.change-list.app-payments.model-payment #result_list {
    display: table !important;
    width: max-content;
    min-width: 100%;
  }
  body.change-list.app-clients.model-client #result_list thead,
  body.change-list.app-payments.model-payment #result_list thead {
    display: table-header-group !important;
  }
  body.change-list.app-clients.model-client #result_list thead th,
  body.change-list.app-payments.model-payment #result_list thead th {
    display: table-cell !important;
  }
  body.change-list.app-clients.model-client #result_list tbody,
  body.change-list.app-payments.model-payment #result_list tbody {
    display: table-row-group !important;
  }
  body.change-list.app-clients.model-client #result_list tr.data-row,
  body.change-list.app-payments.model-payment #result_list tr.data-row {
    display: table-row !important;
    border: 0 !important;
  }
  body.change-list.app-clients.model-client #result_list tbody :is(th, td),
  body.change-list.app-payments.model-payment #result_list tbody :is(th, td) {
    display: table-cell !important;
    min-height: 0 !important;
    white-space: nowrap;
  }
  body.change-list.app-clients.model-client #result_list tbody :is(th, td)::before,
  body.change-list.app-payments.model-payment #result_list tbody :is(th, td)::before {
    content: none !important;
    display: none !important;
  }
  body.change-list.app-clients.model-client [data-simplebar]:has(#result_list),
  body.change-list.app-clients.model-client [data-simplebar]:has(#result_list) .simplebar-content-wrapper,
  body.change-list.app-payments.model-payment [data-simplebar]:has(#result_list),
  body.change-list.app-payments.model-payment [data-simplebar]:has(#result_list) .simplebar-content-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
}

/* Верхняя полоса с названием раздела прошла три круга: её убрали («занимает
   просто место»), вернули («и заголовок давай везде вернём»), а 16.08.2026 Женя
   перечеркнул её на скрине - «убери весь мусор». Поэтому от полосы остаётся
   ровно то, без чего админкой нельзя пользоваться:
   - кнопка открытия левого меню на телефоне (иначе на узком экране нет
     навигации вовсе);
   - название раздела на страницах реестров, у которых своего заголовка в
     контенте нет. Оно поднято до размера наших h1.
   На наших бордах, где заголовок уже есть в контенте, дубль скрыт. */
#main > div:has(#header-inner) {
  background: none;
  border: 0;
  margin-bottom: 0;
  /* Свои поля полосы обнуляем: горизонтальный отступ заголовка задаём ниже - он
     обязан совпадать с отступом заголовка внутри полотна борда. */
  padding-left: 0;
  padding-right: 0;
}
#main > div:has(#header-inner) > div {
  height: auto;
  padding: var(--m-sp-2) var(--m-sp-3) 0;
}
#header-inner h1 {
  font-size: var(--m-fs-6);
  font-weight: var(--m-fw-bold);
  line-height: 1.1;
  letter-spacing: -.01em;
}
/* Заголовок реестра стоит вплотную к левому краю, как на бордах: и кнопка меню,
   и разделитель темы рядом с ним - служебные. Кнопка нужна только там, где
   левое меню уезжает в накладку (ниже 1280px), а разделитель без кнопки
   осиротел и висел вертикальной чёрточкой перед словом «Клиенты» - именно на
   неё Женя показал стрелкой 16.08.2026 («какая-то вертикальная линия, отступы
   слишком близко»). */
#header-inner span.w-px { display: none; }
body:has(.mds-office) #header-inner h1 { display: none; }

/* Порог ровно 1280px, и это не круглое число «на глаз»: именно на нём тема
   Unfold переводит левое меню из накладки в поток страницы (xl:relative плюс
   проверка innerWidth<=1280 в её app.js). При прежних 1024px в диапазоне
   1024-1279px пропадала и кнопка открытия меню, и вся полоса с ней - на
   планшете в альбоме админка оставалась вообще без навигации. */
@media (min-width: 1280px) {
  #header-inner [x-on\:click="sidebarToggle()"],
  #header-inner span:has(> [x-on\:click="sidebarToggle()"]) { display: none; }
  body:has(.mds-office) #main > div:has(#header-inner) { display: none; }
}

/* ============================================================
   11. АДАПТИВ - одна лестница на всю админку

   Было двенадцать разных порогов вразнобой (430, 650, 760, 780, 820, 900, 950,
   1050, 1100, 1200, 1250, 1280): соседние страницы перестраивались в разных
   местах, а вставные блоки не перестраивались вовсе - отсюда «на мобилке где-то
   поехало». Теперь ступеней четыре и они общие:

     1280 - десктоп: ниже него левое меню темы ложится накладкой поверх
            страницы, поэтому две колонки борда встают друг под друга;
     1024 - планшет в альбоме: ряды цифр по три;
      768 - планшет в портрете и крупный телефон: цифры по две, широкие
            таблицы разворачиваются карточками, шапка в столбик;
      480 - телефон: всё в одну колонку.

   Сетки на auto-fit/minmax ломаются сами и в этих правилах не нуждаются.
   ============================================================ */

@media (max-width: 1280px) {
  .mds-overview-grid { grid-template-columns: 1fr; }
  .mds-grid-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .mds-office { padding: var(--m-sp-2); }
  .mds-grid-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mds-grid-kpi.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mds-head { flex-direction: column; }
  .mds-source { flex: 1 1 auto; width: 100%; min-width: 0; }
  .mds-timeline li { grid-template-columns: 1fr; }
  .mds-dl { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mds-grid-kpi,
  .mds-grid-kpi.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mds-retention { grid-template-columns: 1fr 1fr; }
  /* Стрелки между цифрами показывают переход «месяц - месяц»; в две колонки
     они теряют смысл и висят в пустой ячейке. */
  .mds-retention i { display: none; }
  .mds-retention .last { grid-column: 1 / -1; }
  /* Кнопка и набор чипов занимают свою строку целиком: раньше кнопка
     «Применить» тянулась на высоту всей строки и наезжала на соседнее поле
     (правка Жени 15.08.2026 «некоторые поля находят друг на друга»). */
  .mds-control-row > .mds-button,
  .mds-control-row > .mds-presets { flex: 1 1 100%; }
  .mds-control-row > .mds-button { min-height: 36px; justify-content: center; }
  /* На пальце кнопка в таблице снова полноразмерная: ужимали её ради ровного
     ритма строк на десктопе, а не ради экономии места на телефоне. */
  .mds-table tbody .mds-button { padding: 5px 10px; min-height: 32px; }
  .mds-field { flex: 1 1 135px; }
  .mds-field.grow { flex: 1 1 100%; max-width: none; }
  .mds-stage { grid-template-columns: 1fr auto; gap: 5px var(--m-sp-1); }
  .mds-stage .mds-track { grid-column: 1 / -1; order: 3; }
  /* Мониторинг и зоны на телефоне: подпись и расклад уходят под строку,
     а не жмутся в свою колонку. */
  .mds-status-list .mds-status-card { grid-template-columns: minmax(0, 1fr) auto; }
  .mds-status-list .mds-meta { grid-column: 1 / -1; }
  .mds-zone-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px var(--m-sp-1); }
  .mds-zone-name { order: 1; }
  .mds-zone-total { order: 2; }
  .mds-zone-row .mds-track { order: 3; grid-column: 1 / -1; }
  .mds-zone-split { order: 4; grid-column: 1 / -1; white-space: normal; }
  .mds-pagination { flex-direction: column; align-items: stretch; text-align: center; }

  /* Карточный режим широких таблиц. Ставится классом .cards тем таблицам, у
     которых в разметке есть data-label у ячеек: на телефоне строка становится
     карточкой «подпись - значение», и горизонтальная прокрутка не нужна.
     Числовым реестрам (партнёры, рефералы) карточки не ставим - там колонок
     много, и прокрутка внутри таблицы читается лучше простыни. */
  .mds-table.cards { min-width: 0; }
  .mds-table.cards thead { display: none; }
  /* Карточка растёт по содержимому: фиксированная высота строки - правило
     только для табличного режима. */
  .mds-table.cards tbody tr { display: block; height: auto; border: 1px solid var(--m-line); border-radius: var(--m-r-sm); padding: 4px 8px; margin-bottom: 6px; }
  .mds-table.cards tbody td { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: var(--m-sp-1); text-align: left; padding: 4px 0; border-bottom: 1px solid var(--m-line-soft); }
  .mds-table.cards tbody tr td:last-child { border-bottom: 0; }
  .mds-table.cards tbody td::before { content: attr(data-label); color: var(--m-muted); font-size: var(--m-fs-1); }
  .mds-table.cards tbody td[data-label=""]::before,
  .mds-table.cards tbody td:not([data-label])::before { content: none; }
}

@media (max-width: 480px) {
  .mds-office { padding: 10px; }
  .mds-grid-kpi,
  .mds-grid-kpi.four { grid-template-columns: 1fr; }
  .mds-head h1 { font-size: var(--m-fs-5); }
  .mds-retention { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mds-office * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}