/* ═══ motion.css ═══ */
/* ============================================================================
   MOTION — единый канон анимаций приложения.
   Документация и правила применения: MOTION.md (корень репозитория).

   Это ЕДИНСТВЕННЫЙ источник длительностей и кривых для новых анимаций.
   Сырые числа (120ms, ease, cubic-bezier(...)) в новых правилах запрещены —
   только var(--motion-*). Легаси-переходы мигрируют сюда по мере касания.
   ============================================================================ */

:root {
  /* ── Кривые ────────────────────────────────────────────────────────────
     standard — Material 3 / Gmail: быстрый старт, мягкое торможение.
     Подходит для 95% случаев (смена состояния, движение на месте). */
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  /* enter — появление нового элемента (тултип, дропдаун, панель). */
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  /* exit — исчезновение: разгоняется и уходит, не задерживая интерфейс. */
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  /* icon — наведение на иконки-кнопки таблиц: значки панели над таблицей
     (обновить, фильтр, «ещё», действия над выделением), шестерёнка «Настроить
     колонки», связка «чекбокс + каретка». Разгон и торможение поровну, без
     долгого хвоста --motion-ease: под курсором у иконки меняется только
     подложка, и хвост на ней читается как залипание. */
  --motion-ease-icon: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Длительности ──────────────────────────────────────────────────────
     Шкала из четырёх ступеней. Выбор по типу изменения, не «на глаз». */
  --motion-fast: 100ms;   /* микро-отклик: hover, active, цвет иконки/текста */
  --motion-state: 150ms;  /* смена состояния: выделение строки, фон, рамка */
  --motion-draw: 200ms;   /* прорисовка/появление: галочка, дропдаун, тултип */
  --motion-panel: 300ms;  /* крупные поверхности: модалки, боковые панели */

  /* ── Ожидание (исключение из шкалы, MOTION.md §3.7) ────────────────────
     Шкала выше описывает отклик на действие — он обязан уложиться в 300ms.
     Неопределённое ожидание живёт по другим правилам: это не отклик, а
     признак жизни, и цикл короче секунды читается как тревога. Отсюда три
     числа и только для indeterminate-индикаторов (скелетон загрузки):
     hold — тишина перед появлением самой заглушки, pulse — период мигания,
     wait — тишина перед его началом. */
  --motion-pulse: 1200ms;
  --motion-wait: 700ms;
  --motion-hold: 200ms;
}

/* Пользователь просил ОС убрать анимации — уважаем. Длительность 0.01ms
   (а не 0): transitionend продолжает приходить, JS-логика не ломается. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-state: 0.01ms;
    --motion-draw: 0.01ms;
    --motion-panel: 0.01ms;
  }
  /* --motion-pulse / --motion-wait намеренно НЕ глушим: 0.01ms превратил бы
     бесконечное мигание скелетона в стробоскоп. Циклические индикаторы
     выключаются целиком (animation: none) там, где объявлены.
     --motion-hold тоже остаётся: это не анимация, а тишина перед показом
     заглушки. Обнулить её значит вернуть мелькание серых полос на быстром
     ответе — ровно то, от чего просивший убрать анимации страдает первым. */
}

/* ═══ tokens.css ═══ */
/* ═══ css/tokens.css — словарь дизайна ═══════════════════════════════════════
   Общие значения интерфейса — здесь: шрифт, цвета, радиусы, отступы, кегли,
   тени, слои. Новое правило берёт var(--…); литерал цвета или отступа в новом
   правиле запрещён (CLAUDE.md, правило 2). У двух канонов свои файлы: токены
   анимаций — motion.css (docs/MOTION.md), кольцо фокуса — keyboard.css.

   Подключение — сразу после motion.css, раньше всех стилей: словарь читается
   первым, а переопределения ниже по каскаду — экран на своём корне, ночь на
   body.theme-dark — перебивают его.

   Ночь — не здесь: theme_dark.css переопределяет токены на html.theme-dark и
   body.theme-dark. Этот файл — светлая тема и то, что от темы не зависит.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Действующие токены ──────────────────────────────────────────────────
   Перенесены из :root в style.css и ui_tweaks.css (шаг 0.4 разбора
   фронтенда, 14.09.2026) с тем значением, которое действовало, — последним в
   каскаде. Правила программы уже стоят на них. */
:root {
  /* Шрифт всего приложения. Один источник правды: все модули и страницы
     берут отсюда, литеральных стеков в CSS нет — менять шрифт только здесь.
     Тот же стек, что у таблиц аккаунтов, прокси, баз и задач. Подключение —
     <link> на fonts.googleapis.com в index.html. */
  --app-font: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;

  /* Палитра, радиусы и тень первой редакции (docs/DESIGN.md, §1) */
  --bg-app:        #f4f6fb;
  --bg-card:       #ffffff;
  --bg-sidebar:    #1d2433;
  --bg-sidebar-2:  #232b3d;
  --bg-hover:      #f1f4fa;
  --bg-row-hover:  #f8fafd;
  --border:        #e3e8f0;
  --border-strong: #d3dae6;
  --text:          #1f2740;
  --text-mute:     #6b7494;
  --text-light:    #94a0b8;
  --primary:       #2563eb;
  --primary-soft:  #e9efff;
  --green:         #2bbf7a;
  --red:           #e25555;
  --red-bg:        #fde2e2;
  --blue:          #5a8bff;
  --gray-bg:       #eef0f5;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 3px rgba(20,30,60,0.06);

  /* Статусы аккаунтов — мягкая заливка */
  --status-active-bg: rgba(37, 196, 94, 0.08);
  --status-active-color: #15803d;

  --status-spamblock-perm-bg: rgba(234, 88, 12, 0.08);
  --status-spamblock-perm-color: #c2410c;

  --status-spamblock-temp-bg: rgba(243, 160, 10, 0.08);
  --status-spamblock-temp-color: #b45309;

  --status-frozen-bg: rgba(29, 78, 216, 0.08);
  --status-frozen-color: #1d4ed8;

  --status-dead-bg: rgba(180, 37, 37, 0.08);
  --status-dead-color: #b42525;

  --status-skip-bg: rgba(100, 116, 139, 0.08);
  --status-skip-color: #64748b;

  /* Полосы прокрутки. Действуют значения из ui_tweaks.css: style.css
     объявлял те же токены раньше, и его значения перебивались. */
  --scrollbar-size: 12px;
  --scrollbar-thumb-inset: 3px;
  --scrollbar-thumb: rgba(95, 95, 95, 0.72);
  --scrollbar-thumb-hover: rgba(118, 118, 118, 0.88);
  --scrollbar-thumb-active: rgba(145, 145, 145, 0.96);

  /* Сайдбар и верхняя панель (--tp-*). Сайдбар белый — «палитра Telegram»,
     она перебивала ранний сине-серый градиент редизайна v3. */
  --tp-side-bg:           #ffffff;
  --tp-side-bg-solid:     #ffffff;
  --tp-side-bg-soft:      #ecf0f8;
  --tp-side-bg-hover:     rgba(0, 0, 0, 0.05);
  --tp-side-bg-active:    rgba(0, 0, 0, 0.07);
  --tp-side-text:         #5a6877;
  --tp-side-text-strong:  #1c2230;
  --tp-side-muted:        #919dab;
  --tp-side-divider:      #e7eaef;
  --tp-side-scroll-track: #eef0f3;
  --tp-side-scroll-thumb: #c4cbd3;
  --tp-side-scroll-thumb-hover: #a6afb9;
  --tp-accent:            #2563eb;
  --tp-accent-hover:      #3a6cf0;
  --tp-accent-soft:       rgba(37, 99, 235, 0.14);
  --tp-accent-border:     rgba(37, 99, 235, 0.26);
  --tp-success:           #2bbf7a;
  --tp-danger:            #e25555;
  --tp-slate:             #6b7494;
  /* единый нейтральный цвет иконок (v13.5) */
  --tp-icon-neutral: #444746;
  /* Высота верхней панели: была 44px, потом 52px; действует 64px — Gmail-проход v2 */
  --tp-global-topbar-height: 64px;

  /* Заглушка загрузки списочных таблиц — канон «LOADING SKELETON» в ui_tweaks.css */
  --app-skel-tint: rgba(31, 39, 64, 0.09);
  --app-skel-row-h: 44px;

  /* Отступы модальных окон — канон «СТАНДАРТ ОТСТУПОВ МОДАЛЬНЫХ ОКОН» в ui_tweaks.css */
  --modal-pad-t: 24px;
  --modal-pad-r: 25px;
  --modal-pad-b: 24px;
  --modal-pad-l: 24px;
  /* зазор шапка↔контент и контент↔подвал */
  --modal-gap: 16px;

  /* Чип группы в окне «Фильтры» списочных таблиц — components/filter-chip.css.
     Высота закреплена: число выбранных значений не растягивает чип и окно. */
  --filter-chip-h: 27px;

  /* Главная кнопка-пилюля канона addw. Одна на обе темы: ночь её НЕ
     перекрашивает (theme_dark.css, «Главную кнопку ночь НЕ перекрашивает») —
     белое на синем читается одинаково на светлом и на тёмном фоне. Поэтому в
     theme_dark.css у этих токенов ночного значения нет намеренно. */
  --addw-primary-fill: #0b57d0;
  --addw-primary-fill-hover: #0a4bb5;
  --addw-primary-ink: #ffffff;

  /* Акцент и смысловые пары окон справки и личного кабинета: пилюля
     выбранного пункта меню, подсказки, шаги и статусы статей. Те же
     значения стоят на id старых окон справки (ui_tweaks.css, блок
     «Помощь»); окну кабинета их там не дописать — файл заморожен. Ночь
     переопределяет набор в theme_dark.css. */
  --help-accent: #0b57d0;
  --help-accent-weak: rgba(11, 87, 208, .10);
  --help-accent-soft: rgba(11, 87, 208, .055);
  --help-warn: #b5791f;
  --help-warn-weak: rgba(224, 162, 59, .14);
  --help-ok: #1f9d63;
  --help-ok-weak: rgba(31, 157, 99, .12);

  /* Раскрывающиеся окна вне списочных таблиц — канон «КАНОН РАСКРЫВАЮЩИХСЯ
     ОКОН» в ui_tweaks.css; ночь переопределяет те же токены на body.theme-dark. */
  --pop-bg: #ffffff;
  --pop-border-color: #dadce0;
  --pop-radius: 8px;
  --pop-shadow: 0 8px 24px rgba(60, 64, 67, 0.18);
  /* Отступ оболочки: 6px у окон-списков, 12px у окон с полями и кнопками
     (фильтры, «Диапазон», «Показывать по»), где строкам нужен воздух. */
  --pop-pad: 6px;
  --pop-pad-form: 12px;
  --pop-gap: 4px;
  --pop-text: #1f1f1f;
  --pop-muted: #5f6368;
  --pop-sep: #dadce0;
  --pop-font-size: 13px;
  /* Строка меню. --pop-item-pad собран из осей, чтобы правила могли брать
     только горизонтальную половину (иконка слева, каретка справа). */
  --pop-item-h: 32px;
  --pop-item-pad-y: 6px;
  --pop-item-pad-x: 8px;
  --pop-item-pad: var(--pop-item-pad-y) var(--pop-item-pad-x);
  --pop-item-radius: 6px;
  --pop-item-hover: #f1f3f4;
  --pop-item-sel-bg: #d3e3fd;
  --pop-item-sel-fg: #0b57d0;
  /* Значки на правом краю поля со списком: стрелка «здесь есть список» и
     крестик «снять всё». Размер один на все такие поля — и на те, где стрелку
     рисует фон селекта (окна прокси), и на те, где она кнопка (теги). */
  --field-chevron-size: 14px;
  --field-clear-size: 16px;
  /* Кнопка-значок на правом краю поля: не сам рисунок, а коробка, в которой
     он стоит и по которой попадают пальцем. Одна на все такие поля — окно
     прокси, теги, облачный пароль. */
  --field-act-size: 28px;
}


/* ── 2. Целевая шкала ───────────────────────────────────────────────────────
   Словарь, на который правила переходят при разборе своего экрана. Пока не
   применяется. Литерал меняется на токен только там, где значение совпадает
   точно — и днём, и ночью (ночь литерала — то, что выпускает для него
   генератор theme_dark_map.css). Сведение близких значений — 12.5px в 12 или
   13px, два синих в один — видимое изменение: отдельно и с согласием. */

/* Палитра --g-*: светлые пары ночной палитры Google Material 3 из
   theme_dark.css. Ночь объявлена там на html.theme-dark и body.theme-dark и
   перебивает эти значения весом селектора. Пары из шапки theme_dark.css:
   #ffffff — surface-2, #f8f9fa — surface, #f1f3f4 — surface-4, #e8eaed —
   surface-5, #dadce0 — line, #d3e3fd — sel, #0b57d0 — primary, #1f1f1f — ink,
   #444746 — ink-mute; остальное — светлые роли Material 3. */
:root {
  /* Поверхности — ступенями по высоте над страницей */
  --g-surface:        #f8f9fa;  /* сама страница */
  --g-surface-1:      #f8f9fa;  /* утопленное: полосы, дорожки, футеры */
  --g-surface-2:      #ffffff;  /* карточка, таблица, модалка */
  --g-surface-3:      #ffffff;  /* поднятое: окна, тулбары, поля ввода */
  --g-surface-4:      #f1f3f4;  /* наведение */
  --g-surface-5:      #e8eaed;  /* нажатие и «включено» */

  /* Линии */
  --g-line:           #dadce0;  /* обычная граница */
  --g-line-soft:      #e8eaed;  /* разделитель внутри одной поверхности */
  --g-line-strong:    #747775;  /* контур, который обязан быть виден */

  /* Текст */
  --g-ink:            #1f1f1f;
  --g-ink-mute:       #444746;
  --g-ink-faint:      #80868b;
  --g-ink-disabled:   #9aa0a6;

  /* Акцент */
  --g-primary:        #0b57d0;
  --g-primary-strong: #0842a0;
  --g-primary-ink:    #ffffff;  /* текст НА заливке акцентом */
  --g-primary-fill:   #0b57d0;  /* заливка главной кнопки */
  --g-tint:           rgba(11, 87, 208, 0.08);
  --g-tint-strong:    rgba(11, 87, 208, 0.12);

  /* Выбор — залитая пилюля выбранного пункта */
  --g-sel:            #d3e3fd;
  --g-sel-hover:      #c2d9fb;
  --g-sel-ink:        #0b57d0;

  /* Смысловые заливки и текст */
  --g-ok-bg:          #e6f4ea;
  --g-ok-ink:         #188038;
  --g-warn-bg:        #fef7e0;
  --g-warn-ink:       #b06000;
  --g-danger-bg:      #fce8e6;
  --g-danger-ink:     #b3261e;
  --g-info-bg:        #e8f0fe;
  --g-info-ink:       #0b57d0;

  /* Тени — та же геометрия, что у ночных; тема меняет только цвет */
  --g-shadow-1:       0 1px 2px rgba(60, 64, 67, 0.15);
  --g-shadow-2:       0 4px 12px rgba(60, 64, 67, 0.15);
  --g-shadow-3:       0 8px 24px rgba(60, 64, 67, 0.18);

  /* Иконка-кнопка в круге (как стрелки пагинации таблиц): заливка на
     наведении, плотнее — на нажатии, и тонкое кольцо нажатия. Значения —
     те же, что у пагинации (--px-gmail-hover, --app-table-check-ring-*),
     но доступны на любом экране, а не только в таблицах. */
  --g-icon-btn-hover: rgba(68, 71, 70, 0.08);
  --g-icon-btn-press: rgba(0, 0, 0, 0.12);
  --g-icon-btn-ring:  #bdc1c7;
}

/* Радиусы, отступы, кегли — по пикселям: имя называет значение. Шаги — самые
   частые значения старых файлов (css_audit.py literals, 14.09.2026);
   промежуточные — 3, 5, 7, 9px, 12.5px, 23px — сводятся к шагам при разборе
   экрана, видимым изменением. */
:root {
  --radius-2:     2px;
  --radius-4:     4px;
  --radius-6:     6px;
  --radius-8:     8px;
  --radius-10:    10px;
  --radius-12:    12px;
  --radius-14:    14px;
  --radius-16:    16px;
  --radius-20:    20px;
  --radius-28:    28px;
  --radius-pill:  999px;
  --radius-round: 50%;

  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
}

/* Цвета Telegram — для предпросмотра окна сообщения
   (components/message-preview.css, 08.10.2026): фон чата, пузыри, ссылки. */
:root {
  --tg-chat-bg:     #dfe7ec;
  --tg-bubble-in:   #ffffff;
  --tg-bubble-out:  #effdde;
  --tg-ink:         #000000;
  --tg-link:        #168acd;
  --tg-meta:        #8c99a5;
  --tg-meta-out:    #5fb35b;
  --tg-quote-bar:   #3390ec;
  --tg-quote-bg:    rgba(51, 144, 236, 0.08);
  --tg-code-bg:     rgba(0, 0, 0, 0.06);
  --tg-code-ink:    #c1477c;
  --tg-spoiler:     #b8c2cc;
  --tg-note-bg:     rgba(0, 0, 0, 0.18);   /* подпись «Примерно так…» на фоне чата */
  --tg-play-bg:     rgba(0, 0, 0, 0.45);   /* кружок ▶ поверх видео */
}

/* Слои. Значения — те, на которых слои стоят сейчас. Соседние числа внутри
   слоя (620, 640, 710, 720, 760 у окон поверх модалки) — порядок между
   своими; при переводе на токен они станут calc(var(--z-…) + N). */
:root {
  --z-raise:      1;     /* поднять над соседом внутри компонента */
  --z-sticky:     45;    /* липкая полоса над таблицей (.am-gmail-bar) */
  --z-dropdown:   50;    /* выпадающее на странице (.dropdown) */
  --z-overlay:    100;   /* затемнение страницы (.app-overlay) */
  --z-sidebar:    300;   /* .sidebar */
  --z-topbar:     420;   /* .tp-topbar */
  --z-topbar-pop: 430;   /* меню и поиск верхней панели */
  --z-modal:      500;   /* .modal и тосты */
  --z-modal-pop:  700;   /* окна поверх модалки: фильтры, меню, выбор */
  --z-notify:     1200;  /* окно уведомлений */
  --z-dock:       1300;  /* док задач (.tm-dock) */
  --z-gate:       9000;  /* экран входа (.auth-gate) */
}

/* ═══ style.css ═══ */
/* Telegram Black - UI styles. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--app-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Горизонтальный обрез — только `clip`, не `hidden`. `hidden` рядом с
   `overflow-y: visible` по спецификации превращает вертикаль в `auto`, и BODY
   становится скроллпортом, который никогда не прокручивается (крутится
   documentElement). Тогда `position: sticky` внутри BODY отсчитывается от
   этого мёртвого скроллпорта и не работает — так отваливались липкие полосы
   запуска модулей (.inv-cta / .prs-cta). `clip` обрезает так же, но
   скроллпорт не создаёт, поэтому sticky считается от вьюпорта. */
/* Высота — на экран за вычетом верхней панели. Панель fixed, а .app отодвинут
   от неё верхним отступом (--tp-global-topbar-height), и этот отступ
   схлопывается наружу: BODY начинается не с нуля, а на высоте панели. С
   min-height: 100vh страница из-за этого была ровно на эту высоту длиннее
   экрана и прокручивалась вхолостую даже там, где всё помещалось, — а липкая
   рамка запуска на этих холостых пикселях отрывалась от нижнего края.
   Запасное значение — 0px: отступ у .app задан в ui_tweaks.css там же, где
   и переменная, и без того файла вычитать нечего. */
body {
  overflow-y: visible;
  overflow-x: clip;
  scrollbar-gutter: stable;
  min-height: calc(100vh - var(--tp-global-topbar-height, 0px));
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.modal-open {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Та же ловушка, что и у обычного BODY: с `hidden` при открытой модалке
   вертикаль снова стала бы `auto` и липкие полосы отвалились бы. */
body.modal-open {
  overflow-y: visible;
  overflow-x: clip;
  overscroll-behavior: contain;
}

/* Minimal viewport scrollbar for Chromium and Firefox. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: var(--scrollbar-thumb-inset) solid transparent;
  border-radius: 999px;
  min-height: 44px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Базовый layout: сайдбар + контент ─────────────────────── */
.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  color: #c5cbe0;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px 12px;
}

.nav-section {
  display: flex;
  flex-direction: column;
}

.nav-section__title {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6e7894;
  padding: 10px 12px 6px;
  font-weight: 600;
}

.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.status--alive {
  background: var(--status-skip-bg);
  color: var(--status-skip-color);
}
.status--active {
  background: var(--status-active-bg);
  color: var(--status-active-color);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: #c5cbe0;
  text-align: left;
  font-size: 13.5px;
  transition: background 0.15s;
  cursor: pointer;
}
.nav-item:hover:not([disabled]) { background: var(--bg-sidebar-2); color: #fff; }
.nav-item.is-active { background: var(--bg-sidebar-2); color: #fff; }
.nav-item[disabled] { opacity: 0.45; cursor: not-allowed; }
.nav-item__icon { width: 18px; text-align: center; }

/* Раскрывающаяся группа в сайдбаре */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-item--group .nav-item__chevron {
  margin-left: auto;
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.nav-item--group .nav-item__chevron svg { width: 14px; height: 14px; }
/* Каретка не переворачивается: два знака лежат друг на друге и сменяют друг
   друга. Поворот на 180° читался как самостоятельное движение в строке —
   глаз следил за вращением вместо того, чтобы прочесть направление. */
.nav-item--group .nav-item__chevron-glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--motion-state) var(--motion-ease);
}
.nav-item--group .nav-item__chevron-glyph--up { opacity: 0; }
.nav-group.is-open > .nav-item--group .nav-item__chevron-glyph--down { opacity: 0; }
.nav-group.is-open > .nav-item--group .nav-item__chevron-glyph--up { opacity: 1; }
.nav-group__items {
  display: grid;
  grid-template-rows: 1fr;
  margin: 2px 0 4px 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.07);
  transition: grid-template-rows .22s ease, opacity .18s ease;
  will-change: grid-template-rows;
}
.nav-group__items > * {
  min-height: 0;
}
.nav-group__items-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.nav-group:not(.is-open) > .nav-group__items {
  grid-template-rows: 0fr;
  opacity: 0;
  border-left-color: transparent;
  pointer-events: none;
}
.nav-item--sub {
  font-size: 12.8px;
  padding: 7px 10px;
  color: #aab1c8;
}
.nav-item--sub .nav-item__icon { width: 16px; }
.nav-item--sub .nav-item__icon svg { width: 14px; height: 14px; }
/* Когда у родителя is-active, не подсвечиваем сам header — подсвечен подпункт */
.nav-group.is-open > .nav-item--group { color: #c5cbe0; background: transparent; }
.nav-group.is-open > .nav-item--group:hover { background: var(--bg-sidebar-2); color: #fff; }

.badge {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
}
.badge--ok { background: rgba(43,191,122,0.15); color: #6dd9a3; }
.version { font-size: 10.5px; color: #5b6580; text-align: center; }

/* ?? Main ?????????????????????????????????????????? */
.main {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}
.main[hidden] { display: none; }

/* ?? Stats ????????????????????????????????????????? */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: left;
  transition: border-color 0.15s, transform 0.05s;
  box-shadow: var(--shadow);
}
.stat:hover { border-color: var(--border-strong); }
.stat.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

/* ?? Toolbar ??????????????????????????????????????? */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
}
.icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid; place-items: center;
  color: var(--text-mute);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover:not([disabled]) { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.icon-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

[data-close],
[data-back] { cursor: pointer; }
.counter { color: var(--text-mute); font-size: 13px; }

/* ?? Filters ??????????????????????????????????????? */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.chip {
  padding: 7px 14px;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--bg-hover); }
.chip.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.search {
  position: relative;
  display: flex;
  align-items: center;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  width: 280px;
}
.search:focus-within { border-color: var(--primary); }
.search input { border: 0; flex: 1; background: transparent; font-size: 13px; }

/* ?? Dropdown ????????????????????????????????????? */
.dropdown {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20,30,60,0.12);
  padding: 10px;
  z-index: 50;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: 360px;
  box-sizing: border-box;
  /* Флекс-колонка, чтобы кнопки «Сброс / Применить» всегда были видны
     внизу, а сам список скроллился внутри. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dropdown[hidden] { display: none !important; }
.dropdown:not([hidden]) { display: flex; }
.dropdown__list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
.dropdown__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.dropdown__item > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dropdown__label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown__country-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .12);
  flex: 0 0 auto;
}
.dropdown__item:hover { background: var(--bg-hover); }
.dropdown__item.is-checked { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.dropdown__count { color: var(--text-light); font-size: 12px; }
/* ?? Table ????????????????????????????????????????? */
.table-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
  padding: 0;
}
.table-wrap {
  overflow: auto;
  flex: 1;
  padding-inline: 12px;
  box-sizing: border-box;
}
/* Оболочка таблицы аккаунтов (база/шапка/ячейки/hover/selected) — из
   канонического контракта .app-table (ui_tweaks.css). */
.acc-table thead th[data-col="actions"],
.acc-table tbody td.col-actions-cell {
  display: none;
}
.acc-table tbody tr[data-name] { cursor: pointer; }
.acc-table tbody tr[data-name] td { user-select: none; }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b6c5ff, #7da6ff);
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  margin-right: 10px;
  vertical-align: middle;
}
.phone-cell { display: flex; align-items: center; }
.geo { display: inline-flex; align-items: center; gap: 8px; }
/* Флаги в таблице и в geo-dropdown используют один и тот же стиль. */
.geo .fi,
.dropdown__item .fi {
  width: 1.4em; height: 1em;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0,0,0,0.2);
  background-size: cover;
  background-position: center;
  display: inline-block;
}
/* Отступ/выравнивание флага только в dropdown (в таблице их даёт .geo gap). */
.dropdown__item .fi { margin-right: 8px; vertical-align: middle; }
.geo__code { color: var(--text, #1f2740) !important; font-size: 13px; letter-spacing: 0.5px; font-weight: 400; }

.status--spamblock_perm{
  background: var(--status-spamblock-perm-bg);
  color: var(--status-spamblock-perm-color);
}
.status--spamblock_temp{
  background: var(--status-spamblock-temp-bg);
  color: var(--status-spamblock-temp-color);
}
.status--skipped       {
  background: var(--status-skip-bg);
  color: var(--status-skip-color);
}
.status--skip          {
  background: var(--status-skip-bg);
  color: var(--status-skip-color);
}
.status--frozen        {
  background: var(--status-frozen-bg);
  color: var(--status-frozen-color);
}
.status--banned        {
  background: var(--status-dead-bg);
  color: var(--status-dead-color);
}
.status--dead          {
  background: var(--status-dead-bg);
  color: var(--status-dead-color);
}

.misc__ico.is-on { background: var(--primary-soft); color: var(--primary); }

.empty td {
  text-align: center;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 48px 24px;
  gap: 12px;
}
.empty-state__title {
  font-size: 14px;
  color: var(--text-mute);
  text-align: center;
}
.empty-state__add:hover { background: var(--primary-soft); }

/* ?? Table footer / pagination ????????????????????? */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #fafbfd;
}
.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: 13px;
}
.page-size select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.pagination { display: flex; gap: 4px; }
.pagination button {
  width: 30px; height: 28px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 12px;
}
.pagination button:hover:not([disabled]) { background: var(--bg-hover); }
.pagination button.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination button[disabled] { opacity: 0.4; cursor: not-allowed; }

.sort { color: var(--text-light); font-size: 11px; }

/* ?? Selection bar ????????????????????????????????? */.sel-bar[hidden],
.modal[hidden],
.task-bar[hidden],
.app-overlay[hidden],
.actions-list[hidden] { display: none !important; }
.sel-bar {
  position: fixed;
  --sel-bar-inline-gap: 18px;
  left: var(--sel-bar-inline-gap); right: var(--sel-bar-inline-gap); bottom: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(20,30,60,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  z-index: 30;
  animation: sel-bar-in 0.16s ease-out;
}
@keyframes sel-bar-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sel-bar__left { display: flex; align-items: center; gap: 10px; }
.sel-bar__right { display: flex; align-items: center; gap: 8px; }
.sel-bar__count { color: var(--text-mute); font-size: 13px; }

.icon-btn--ghost {
  background: transparent;
  border-color: transparent;
}
.icon-btn--ghost:hover { background: var(--bg-hover); }

.quick-act {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.quick-act:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.primary-btn {
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.primary-btn:hover { background: #3a6ce8; }
#inv-base-apply { cursor: pointer; }

/* ?? Modal ????????????????????????????????????????? */
/* Длительности и кривые — по MOTION.md §3.5 (модалка = «крупная
   поверхность»: --motion-panel + ease-enter/ease-exit). До миграции здесь
   стояли 0.8s и cubic-bezier(0.16, 1, 0.3, 1): кривая почти expo-out, 86%
   хода за первые 200ms, а оставшиеся 14% ползли ещё 600ms. Поскольку
   `modal-in` масштабирует карточку ВМЕСТЕ с содержимым, этот хвост читался
   как самостоятельное сползание текста вниз — тем сильнее, чем выше окно
   (у окна запуска — 76px хода у нижнего края).
   С 25.09.2026 длительности входа и выхода — в components/modal-motion.css
   (150ms / 100ms, одни на все окна); кривые остаются здесь. */
.modal {
  --modal-enter-ease: var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1));
  --modal-exit-ease: var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1));
  position: fixed; inset: 0;
  z-index: 500;
  display: grid; place-items: center;
}
.modal[hidden] { display: none; }
.modal.modal--static-backdrop .modal__backdrop,
.modal.modal--static-backdrop .addw__overlay {
  animation: none;
  opacity: 1;
}
.modal.modal--static-backdrop .modal__panel,
.modal.modal--static-backdrop .addw {
  animation: none;
  opacity: 1;
  transform: none;
}
.modal.modal--closing {
  pointer-events: none;
}
.modal.modal--closing .modal__backdrop,
.modal.modal--closing .addw__overlay {
  animation: modal-backdrop-out var(--modal-exit-duration) var(--modal-exit-ease) forwards;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 30, 60, 0.32);
  animation: modal-backdrop-in var(--modal-enter-duration) var(--modal-enter-ease) both;
}
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(20,30,60,0.2);
  padding: 14px;
  min-width: 300px;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;
}

/* ── Вход карточки: одно правило на ВСЕ окна ───────────────────────────
   Карточек в приложении две породы: `.modal__panel` и `.addw` (окна на
   каноне addw — «Добавить аккаунты», привязка прокси, вход по телефону,
   «Изменить профиль», окна модерации). Правило намеренно на классах, а не
   на списке id: пока вход был расписан по id в ui_tweaks.css, семь окон
   `.addw-modal` ни в один список не входили и открывались вообще без
   анимации — белая карточка выскакивала сразу на полной непрозрачности,
   пока затемнение позади ещё только набиралось.
   Масштаб идёт от центра, длительность и кривая — общие с затемнением.
   fill-mode backwards (не both): при forwards-заливке анимация оставляет
   на панели вычисленный transform: matrix(1,0,0,1,0,0) — даже «единичная»
   матрица делает панель containing block для position:fixed, и окна
   тулбара (#inv-pick-check-menu-pop / #inv-pick-range-pop /
   #inv-pick-dropdown) уезжают от своих иконок: координаты им считает
   positionToolbarPopover() от viewport, а браузер откладывает их от
   панели. С backwards после анимации возвращается собственный
   transform: none — containing block исчезает. */
.modal__panel,
.addw-modal .addw {
  transform-origin: center center;
  animation: modal-in var(--modal-enter-duration) var(--modal-enter-ease) backwards;
}
@keyframes modal-in {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ── Содержимое проявляется, а не едет вместе с карточкой ──────────────
   `modal-in` — масштаб от центра, и он применяется к панели ЦЕЛИКОМ. На
   старте (0.88) вся внутренность сжата к центру: блок, стоящий в X px от
   верхнего края карточки, стоит там на 0.12·X px выше своего места и по
   ходу анимации уезжает вниз. Глаз держится за края белой карточки, а не
   за центр экрана, поэтому это читается не как рост окна, а как «текст
   съехал вниз после открытия».
   Материал решает это так: контейнер растёт — содержимое проявляется.
   ЗАДЕРЖКИ У ПРОЯВЛЕНИЯ БЫТЬ НЕ ДОЛЖНО. Сначала здесь стояла задержка
   0.4·длительности, и это читалось как «окно открылось с задержкой, сперва
   белым экраном»: кривая входа ease-enter почти вся отрабатывает в начале
   (t³ по x), к 0.4 хода карточка уже 83% непрозрачности — то есть 120ms
   (у #add-modal 160ms) на экране стоит практически готовая ПУСТАЯ белая
   карточка. Поэтому проявление идёт с нулевой задержкой: содержимое
   набирает непрозрачность за 0.5 длительности, оставаясь заметно бледнее
   карточки на самом крупном участке хода, а к своей полной непрозрачности
   масштаб уже 0.987 — у блока в 76px от края остаётся 1px.
   Только opacity: transform здесь запрещён — он сделал бы блок containing
   block для position:fixed и увёл бы всплывающие окна тулбара от их
   иконок (см. комментарий к .modal__panel выше).
   Класс `modal--entering` вешает openModal() и снимает по окончании входа:
   так проявление отрабатывает РОВНО на открытии и не цепляет блоки,
   которые JS перерисовывает позже в уже открытом окне.
   Обе породы карточек — как у самого входа выше. */
.modal--entering .modal__panel > *,
.modal--entering .addw > * {
  animation: modal-fade-in
             calc(var(--modal-enter-duration) * 0.5)
             var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes modal-out {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.88); opacity: 0; }
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal {
    --modal-enter-ease: linear;
    --modal-exit-ease: linear;
  }
  .modal__backdrop { animation-name: modal-fade-in; }
  .modal__panel,
  .addw-modal .addw { animation-name: modal-fade-in; }
  /* Масштаба нет — сползать нечему, проявление содержимого не нужно. */
  .modal--entering .modal__panel > *,
  .modal--entering .addw > * { animation: none; }
  .modal.modal--closing .modal__backdrop,
  .modal.modal--closing .addw__overlay { animation-name: modal-fade-out; }
}
.modal__panel--sm { min-width: 320px; }

/* ── Универсальный confirm / prompt диалог ─── */
.dlg-panel {
  width: 400px;
  max-width: 94vw;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dlg-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.dlg-message {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-mute, #6b7280);
  line-height: 1.55;
  white-space: pre-wrap;
}
.dlg-input {
  display: none;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}
.dlg-input.is-visible { display: block; }
.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.dlg-actions .btn--primary { min-width: 80px; }


.actions-list {
  list-style: none;
  padding: 6px 0 4px;
  margin: 0;
}
.actions-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
}
.actions-list li:hover { background: var(--bg-hover); }
.actions-list .ico { width: 18px; text-align: center; color: var(--text-mute); }

.hint {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gray-bg);
  color: var(--text-mute);
  font-size: 10px;
  margin-left: 4px;
  cursor: help;
  user-select: none;
}

/* ?? Form rows / toggle ???????????????????????????? */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.form-row label {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
}
.form-row input[type="number"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
  background: #fff;
}
.form-row input[type="number"]:focus { border-color: var(--primary); }

.toggle { position: relative; width: 36px; height: 20px; }
.toggle input { display: none; }

/* ── Toasts (Gmail-style snackbar, bottom-left) ─────────────── */
.toasts {
  position: fixed;
  left: 24px; bottom: 24px;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--app-font) !important;
  font-weight: 400;
  line-height: 20px;
  color: #e8eaed;
  background: #323232 !important;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.20),
              0 6px 10px 0 rgba(0,0,0,0.14),
              0 1px 18px 0 rgba(0,0,0,0.12);
  border: none;
  animation: toast-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
  user-select: none;
  min-width: 288px;
  max-width: 480px;
  min-height: 48px;
}
/* Тосты, у которых клик по телу открывает задачу — показываем pointer. */
.toast--clickable { cursor: pointer; }
.toast__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 14px 0;
}
.toast__action {
  flex: none;
  appearance: none;
  border: none;
  background: transparent;
  color: #8ab4f8;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  height: 32px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.toast__action:hover  { background: rgba(138,180,248,0.12); }
.toast__action:active { background: rgba(138,180,248,0.22); }
.toast__close {
  flex: none;
  appearance: none;
  border: none;
  background: transparent;
  color: #bdc1c6;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.toast__close:hover  { background: rgba(255,255,255,0.12); color: #e8eaed; }
.toast__close:active { background: rgba(255,255,255,0.20); }
.toast__close svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes toast-in {
  from { transform: translateY(24px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
  .toasts {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .toast {
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 32px);
  }
}

/* ?? Task running bar (bottom centered) + UI block ?? */
.app-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 28, 50, 0.18);
  z-index: 100;
  cursor: not-allowed;
}
body.is-busy .sel-bar { display: none !important; }

@keyframes task-bar-in {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}


/* Конвертер живёт по канону страницы запуска (.srch-page, ui_tweaks.css):
   своей вёрстки — сегментов, пунктирной коробки, списка аккаунтов — у него
   больше нет. Осталось только скрытие вида. */
#view-tdata[hidden] { display: none !important; }

/* ?? Modal title ???????????????????????????????????? */
.modal__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text);
}

/* ?? Disable text selection while drag-selecting rows ? */
/* user-select наследуется, поэтому на <body> он стоил пересчёта стиля всему
   документу (~9 мс на 16k узлов при каждом старте и конце протяжки). Держим
   запрет на самих таблицах — протягивают всегда внутри них. */
body.is-drag-selecting .acc-table,
body.is-drag-selecting .app-table { user-select: none; }
body.is-drag-selecting .acc-table tbody tr[data-name] { cursor: pointer; }

/* ?? Per-account task status pill ????????????????????? */
.am-task-link {
  cursor: pointer;
}
@keyframes tp-breathe {
  0%, 100% {
    opacity: 0.96;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.12);
    filter: saturate(1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.04);
    filter: saturate(1.06);
  }
}

/* ?? Sidebar: Task Manager item ??????????????????????? */
.nav-item__badge {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-item__badge[hidden] { display: none; }

/* ?? Tasks view ???????????????????????????????????? */
.view-task-detail {
  /* Контейнер не должен резать содержимое — позволяем скроллу страницы
     докрутить до самого низа карточки, если внутренние колонки выросли. */
  min-height: 0;
}
.tasks-card { padding: 0; overflow: hidden; }
.tasks-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.tasks-counter { color: var(--text-mute); font-size: 13px; }
.tasks-filter { display: flex; gap: 6px; margin-left: auto; }
.tasks-filter .chip { padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tasks-filter .chip.is-active { background: var(--bg-hover); border-color: var(--border-strong); }

.task-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 500;
}
.task-status--running   { background: #e6f0ff; color: #1d4ed8; }
.task-status--paused    { background: #fef3c7; color: #b45309; }
.task-status--warning   { background: #fef3c7; color: #b45309; }
.task-status--done      { background: #e6f7ec; color: #137a3c; }
.task-status--cancelled { background: #fff4e0; color: #9a5b00; }
.task-status--interrupted { background: #eef1f6; color: #556; }
.task-status--error     { background: #fde7e7; color: #b42525; }

.task-progress-bar {
  position: relative;
  width: 140px;
  height: 8px;
  background: var(--bg-app);
  border-radius: 4px;
  overflow: hidden;
}
.task-progress-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--primary);
  transition: width .25s;
}

/* Карточка задачи живёт на рельсах списочной таблицы, а не на своих полях:
   сверху идёт строка опознания канона .am-table-head (она сама держит 16px
   слева и 12px справа), поэтому по горизонтали карточка полей не имеет.
   Справа остаётся --task-detail-gutter — ровно та полоса, которую у списков
   съедает прокрутка таблицы. Без неё содержимое задачи (рамки лога и
   результатов) упиралось бы в самый край окна, а у таблиц такого нет. */
.task-detail-card {
  --task-detail-gutter: 10px;
  padding: 0 var(--task-detail-gutter) 18px 0;
  display: flex;
  flex-direction: column;
  /* Внешней обводки у карточки задачи нет — рамки остаются только
     у внутренних блоков (лог, таблица результатов). */
  border: none;
  box-shadow: none;
  /* Без жёсткого max-height + overflow:hidden — иначе нижняя часть
     (колонки результатов/лога) обрезается и до неё нельзя долистать. */
}
/* Тело задачи — те же рельсы, что у строки опознания над ним: 16px слева,
   12px справа (плюс жёлоб карточки — итого столько же, сколько у таблиц). */
.task-detail__body {
  min-width: 0;
  padding: 0 12px 0 16px;
}
.task-detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.task-detail__meta dt { color: var(--text-mute); font-size: 12px; margin-bottom: 2px; }
.task-detail__meta dd { margin: 0; font-size: 13px; font-weight: 500; }
.task-detail__results {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: auto;
  max-height: min(44vh, 420px);
  min-height: 220px;
  padding-bottom: 8px;
  margin-top: 12px;
}
.task-detail__results table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; margin-bottom: 6px; }
.task-detail__results th { background: var(--bg-app); padding: 8px 10px; text-align: left; color: var(--text-mute); font-weight: 500; border-bottom: 1px solid var(--border); }
.task-detail__results td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.task-detail__results tr:last-child td { border-bottom: none; }
.task-detail__results th,
.task-detail__results td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Числовая колонка результата (у парсера — «Найдено»): цифры справа и одной
   ширины, чтобы столбец читался столбцом, а не лесенкой. */
.task-detail__result-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.task-row__error { color: #b42525; }

/* ───── Хлебные крошки: путь над заголовком детального экрана ─────
   Один контракт на все экраны «список → запись»: база в «Базах данных»,
   задача в диспетчере. Первая крошка — ссылка на список (она же возврат),
   последняя — где мы находимся.

   Путь у вложенного экрана выглядит ровно как у корневого — крошками с рельса
   16px. Возврат (.crumbs__back) стоит НЕ в пути, а строкой ниже, перед
   названием (см. .am-table-head__titlerow в ui_tweaks.css): 31 июля 2026 —
   «стрелку назад перед путем нужно убрать, мы ставим ее перед заголовком». */
.crumbs {
  display: flex; align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 12px; line-height: 16px;
  color: var(--text-mute);
}
/* Стрелка «назад» — глиф 18px в круглой подложке 24px, вровень с названием
   18px/24px. Подложка свисает по 3px в каждую сторону, поэтому отрицательное
   поле слева ставит на рельс 16px САМ ГЛИФ, а не бокс кнопки. */
.crumbs__back {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-left: -3px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.crumbs__back svg { width: 18px; height: 18px; }
.crumbs__back:hover { background: var(--bg-hover); color: var(--text); }
.crumbs__back:focus-visible {
  outline: 2px solid rgba(11, 87, 208, 0.35);
  outline-offset: 1px;
}
.crumbs__link {
  flex: 0 1 auto;
  /* Пилюля ховера свисает влево на свои 6px — текст крошки остаётся на
     общем рельсе с заголовком под ней. */
  margin-left: -6px;
  padding: 2px 6px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.crumbs__link:hover { background: var(--bg-hover); color: var(--text); }
.crumbs__link:focus-visible {
  outline: 2px solid rgba(11, 87, 208, 0.35);
  outline-offset: 1px;
}
/* Стрелки в пути больше нет, поэтому первая крошка везде свисает влево на свои
   6px и стоит на общем рельсе 16px — и на корневом экране, и на вложенном. */
.crumbs__sep {
  flex: none;
  display: inline-flex; align-items: center;
  /* Тон разделителя берём от самих крошек, а не отдельной переменной: в тёмной
     теме путь целиком меняет цвет, и шеврон не должен от него отставать. */
  color: inherit; opacity: .55;
}
.crumbs__sep svg { width: 14px; height: 14px; }
.crumbs__here {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Своей шапки у задачи больше нет: .task-detail__header / __head-main /
   __crumbs / __title размечали путь и название по-своему (16px отступ карточки,
   название 18px/600), и на переходе «список задач → задача» строка вставала не
   туда, где стоит в базе. Теперь здесь канон .am-table-head — тот же блок, что
   у аккаунтов, прокси, баз и источников. Классы не воскрешать: новая шапка с
   таким именем молча получила бы старую геометрию.
   Остаются только действия справа — они живут внутри строки опознания. */
.task-detail__actions { display: flex; gap: 10px; align-items: center; }
.task-detail__error {
  margin: 12px 0; padding: 10px 12px; border-radius: 8px;
  background: #fde7e7; color: #b42525; font-size: 13px;
  border: 1px solid #f5c6c6;
}
.task-detail__warning {
  margin: 12px 0; padding: 10px 12px; border-radius: 8px;
  background: #fef3c7; color: #92400e; font-size: 13px;
  border: 1px solid #f6d98b;
}
.task-detail__h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.task-detail__empty { text-align: center; color: var(--text-mute); padding: 18px; }

.task-events-wrap {
  max-height: min(44vh, 420px);
  min-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-app);
  scrollbar-gutter: stable;
}

@media (min-height: 760px) {
  .task-detail__results,
  .task-events-wrap {
    max-height: min(46vh, 440px);
  }
}
.task-events {
  list-style: none; margin: 0; padding: 0;
}
.task-events__item {
  display: grid; grid-template-columns: 70px 1fr; gap: 10px;
  padding: 7px 12px; font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  user-select: text; cursor: text;
}
.task-events__item:last-child { border-bottom: none; }
.task-events__item--info      { border-left-color: #b1bccc; }
.task-events__item--ok        { border-left-color: #137a3c; }
.task-events__item--warn      { border-left-color: #c98717; }
.task-events__item--error     { border-left-color: #b42525; background: rgba(180,37,37,0.05); }
.task-events__time { color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.task-events__msg  { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.task-events__empty { padding: 18px; text-align: center; color: var(--text-mute); list-style: none; }

/* ── Вкладки деталей задачи: Результаты / Лог ─────────────────────── */
.task-detail__tabs { margin-top: 18px; }
.task-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.task-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.task-tab:hover { color: var(--text); background: var(--bg-app); }
.task-tab.is-active { color: var(--text); border-bottom-color: var(--primary); }
.task-tab__n {
  min-width: 20px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-app);
  color: var(--text-mute);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.task-tab.is-active .task-tab__n {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}
.task-tab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}
.task-tab__dot[hidden] { display: none; }
.task-tab-panel[hidden] { display: none; }
.task-tab-panel[data-task-panel="log"] { position: relative; }

/* Плавающая кнопка «↓ Новые записи» — когда лог прокручен вверх */
.task-events__jump {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.task-events__jump:hover { filter: brightness(1.05); }
.task-events__jump svg { width: 14px; height: 14px; }
.task-events__jump[hidden] { display: none; }

/* ?? Role modal ???????????????????????????????????? */
.modal__panel--role {
  width: 392px;
  max-width: min(94vw, 392px);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.role-modal__head {
  height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.role-modal__head [data-back] {
  grid-column: 1;
  grid-row: 1;
}
.role-modal__head [data-close] {
  grid-column: 3;
  grid-row: 1;
}
.modal--no-back .role-modal__head {
  grid-template-columns: minmax(0, 1fr) 42px;
}
.modal--no-back .role-modal__head [data-back] {
  display: none !important;
}
.modal--no-back .role-modal__title {
  grid-column: 1;
  padding-left: 4px;
}
.modal--no-back .role-modal__head [data-close] {
  grid-column: 2;
}
.role-modal__title {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
  text-align: left;
}
.role-modal__body {
  padding: 16px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.role-modal__footer {
  border-top: 1px solid #e5e7eb;
  justify-content: space-between;
}
.edit-profile__photo-replace {
  margin: 2px 0 0;
}
.role-combo {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
}
.role-combo input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
}
.role-combo input:focus {
  border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.42);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--am-accent-rgb, 37, 99, 235), 0.08);
}
.role-combo__chev {
  width: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 12px;
  transition: background .12s;
}
.role-combo__chev:hover { background: var(--border); }
.role-combo__chev-icon {
  display: inline-block;
  transition: transform .16s ease;
}
.role-combo__chev.is-open .role-combo__chev-icon {
  transform: rotate(180deg);
}

.role-list {
  list-style: none;
  margin: 0 0 12px;
  padding: var(--pop-pad, 6px);
  /* до 8 строк канона (32px) + хедеры групп */
  max-height: calc(var(--pop-item-h, 32px) * 8 + 24px);
  overflow-y: auto;
  border: 1px solid var(--pop-border-color, #dadce0);
  border-radius: var(--pop-radius, 8px);
  background: var(--pop-bg, #ffffff);
}
.role-list[hidden] { display: none; }
.role-list li {
  padding: var(--pop-item-pad, 6px 8px);
  border-radius: var(--pop-item-radius, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--pop-font-size, 13px);
  color: var(--pop-text, #1f1f1f);
  min-height: var(--pop-item-h, 32px);
  box-sizing: border-box;
}
.role-list li:hover { background: var(--pop-item-hover, #f1f3f4); }
.role-list li.is-active {
  background: var(--pop-item-sel-bg, #d3e3fd);
  color: var(--pop-item-sel-fg, #0b57d0);
}
.role-list li .count { color: var(--pop-muted, #5f6368); font-size: 12px; margin-left: 12px; }
.role-list__empty {
  padding: 14px;
  color: var(--pop-muted, #5f6368);
  font-size: var(--pop-font-size, 13px);
  text-align: center;
  list-style: none;
}

/* Системные/пользовательские группы в дропдауне «Переместить в папку» */
.role-list__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

/* Строка списка в окне «Роли»: отметка слева, название тянется, счётчик и
   крестик прижаты вправо. Ролей у аккаунта несколько, поэтому строка —
   переключатель, а не выбор одного значения: галочка означает «есть у всех
   выделенных», черта — «есть у части». Крестик (удалить роль из
   справочника) появляется под курсором — действие редкое и другое по
   последствиям, держать его на виду в каждой строке незачем. */
#role-dropdown .role-list__item {
  justify-content: flex-start;
  padding-right: 8px;
}
.role-list__mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pop-item-sel-fg, #0b57d0);
}
.role-list__mark svg { width: 16px; height: 16px; display: block; }
.role-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#role-dropdown .role-list__item .count { margin-left: auto; }
.role-list__del {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pop-muted, #5f6368);
  transition: color var(--motion-state, 150ms) var(--motion-ease-icon, ease);
}
.role-list__item:hover .role-list__del,
.role-list__item:focus-within .role-list__del { display: inline-flex; }
.role-list__del:hover { background: transparent; color: #d93025; }
.role-list__del svg { width: 16px; height: 16px; display: block; }

.modal__panel--edit-profile {
  width: 392px;
  max-width: min(94vw, 392px);
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.edit-profile__head,
.edit-profile-form__head {
  height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.edit-profile__nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b8f97;
  cursor: pointer;
  font: inherit;
}
.edit-profile__nav:first-child { justify-self: start; }
.edit-profile__nav:last-child { justify-self: end; }
.edit-profile__nav:hover {
  background: #f3f4f6;
  color: #374151;
}
.edit-profile__title,
.edit-profile-form__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
}
.edit-profile__sub {
  margin: 10px 16px 0;
  font-size: 12.5px;
}
.edit-profile__picker {
  max-height: min(72vh, 560px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 0 18px;
  background: #fff;
}
.edit-profile__card {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s;
}
.edit-profile__card:hover {
  background: #f5f8fb;
}
.edit-profile__card:active { background: #eef5fb; }
.edit-profile__ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute, #8b94a7);
  flex-shrink: 0;
}
.edit-profile__label {
  font-size: 14px;
  line-height: 1.3;
}
.modal__panel--privacy-list {
  width: 392px;
  max-width: min(94vw, 392px);
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.privacy-list__head {
  height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.privacy-list__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
}
.privacy-list__body {
  max-height: min(72vh, 520px);
  overflow-y: auto;
  padding: 16px 0 18px;
  background: #fff;
}
.privacy-list__items {
  display: flex;
  flex-direction: column;
}
.privacy-list__items--security {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.privacy-list__row {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 8px 22px;
  border: 0;
  background: transparent;
  color: #111827;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.privacy-list__row--security {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
}
.privacy-list__row:hover {
  background: #f5f8fb;
}
.privacy-list__row:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.7);
  outline-offset: -2px;
}
.privacy-list__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
}
.privacy-list__ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f6670;
}
.privacy-list__ico svg {
  width: 18px;
  height: 18px;
}
.privacy-list__value {
  color: #2563eb;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.privacy-list__value[hidden] {
  display: none !important;
}
.modal__panel--privacy-form {
  width: 392px;
  max-width: calc(100vw - 28px);
  max-height: min(92vh, 640px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  color: #2b2b2b;
  border: 0;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.privacy-form__head {
  flex: 0 0 auto;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.privacy-form__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2b2b;
  grid-column: 2;
}
.privacy-form__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  padding: 18px 24px 22px;
}
.privacy-form__section {
  padding: 0;
  margin: 0;
  border-bottom: 0;
}
.privacy-form__section + .privacy-form__section {
  margin-top: 18px;
}
.privacy-form__section-title {
  margin: 0 0 14px;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}
.privacy-form__choices {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.privacy-form__radio {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 8px;
  margin: 0;
  border-radius: 8px;
  color: #2b2b2b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  background: transparent;
  transition: background 0.12s ease;
}
.privacy-form__radio:hover {
  background: #f7f7f7;
}
.privacy-form__radio input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #b5bcc4;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: none;
}
.privacy-form__radio input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: #2563eb;
}
.privacy-form__radio input:checked {
  border-color: #2563eb;
}
.privacy-form__radio input:checked::before {
  transform: scale(1);
}
.privacy-form__note {
  margin: 14px 0 0;
  padding: 0;
  color: #8b8f97;
  font-size: 13px;
  line-height: 1.45;
  background: transparent;
  border: 0;
}
.privacy-form__footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--border, #e3e8f0);
}
/* Legacy .privacy-form__action buttons — deprecated, patched by ui_tweaks.css
   for modals not yet migrated to .btn--ghost / .btn--primary. */
.privacy-form__action {
  min-width: 92px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #0088cc;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.privacy-form__action:hover {
  background: #edf7fd;
  box-shadow: 0 0 0 1px #b9e2fb inset;
}
.privacy-form__action:focus-visible {
  outline: 2px solid rgba(48, 169, 236, 0.35);
  outline-offset: 1px;
}
.privacy-form__action--primary {
  min-width: 106px;
  background: transparent;
  box-shadow: none;
}
.privacy-form__action--primary:hover {
  background: #edf7fd;
  box-shadow: 0 0 0 1px #9fd9fa inset;
}
.tg-security-modal {
  width: 392px;
  max-width: min(94vw, 392px);
  max-height: min(88vh, 680px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.tg-security-head {
  flex: 0 0 auto;
  height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.tg-security-head__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
}
.tg-security-body,
.tg-password-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}
.tg-security-text {
  margin: 0;
  padding: 14px 22px 6px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.42;
  text-align: left;
}
.tg-security-list {
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px;
}
.tg-security-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 22px;
  border: 0;
  background: transparent;
  color: #111827;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.tg-security-row:hover {
  background: #f5f8fb;
}
.tg-security-row__ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b94a7;
}
.tg-security-row__ico svg {
  width: 18px;
  height: 18px;
}
.tg-security-row__label {
  font-size: 14px;
  line-height: 1.3;
}
.tg-security-row--danger {
  color: #ef4444;
}
.tg-security-row--danger .tg-security-row__ico {
  color: #ef4444;
}
.tg-security-note {
  padding: 12px 22px;
  color: #8b94a7;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  line-height: 1.38;
}
.tg-security-footer {
  background: #fff;
  border-top-color: #e5e7eb;
}
.tg-security-footer .privacy-form__action {
  color: var(--text);
}
.tg-security-footer .privacy-form__action:hover {
  background: var(--bg-hover);
}
/* Telegram-light styling for «Изменить профиль» sub-forms.
   Labels — cyan small caps, inputs — borderless with blue underline,
   helper text muted gray, footer — text-style cyan buttons. */
.edit-profile-form__footer {
  border-top: 1px solid #e5e7eb;
}
.edit-profile-form__footer .privacy-form__action {
  color: var(--text);
}
.edit-profile-form__footer .privacy-form__action:hover {
  background: var(--bg-hover);
}
.edit-profile__forms {
  padding: 12px 16px 4px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.edit-profile__form { display: flex; flex-direction: column; gap: 10px; }
.edit-profile__form[hidden] { display: none; }
.edit-profile__form [hidden] { display: none !important; }
.edit-profile__form .form-row { display: flex; flex-direction: column; gap: 4px; }
.edit-profile__form .form-row > label {
  font-size: 12.5px;
  color: var(--text-mute);
}
.edit-profile__form input[type="text"],
.edit-profile__form input[type="number"],
.edit-profile__form input[type="file"],
.edit-profile__form select,
.edit-profile__form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.edit-profile__form textarea { resize: vertical; min-height: 60px; }
.edit-profile__form input:focus,
.edit-profile__form select:focus,
.edit-profile__form textarea:focus {
  border-color: var(--accent, #2563eb);
}
.edit-profile__bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.edit-profile__bulk-toggle input { margin: 0; }
.edit-profile__choice-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.edit-profile__choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}
.edit-profile__choice input[type="radio"],
.edit-profile__choice input[type="checkbox"] {
  accent-color: var(--accent, #2563eb);
}
.edit-profile__choice-row--source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edit-profile__choice--tile {
  align-items: flex-start;
  gap: 9px;
  min-height: 68px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.edit-profile__choice--tile:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong, var(--border));
}
.edit-profile__choice--tile.is-checked {
  border-color: var(--accent, #2563eb);
  background: rgba(47, 109, 251, 0.08);
  box-shadow: inset 0 0 0 1px rgba(47, 109, 251, 0.12);
}
.edit-profile__choice--tile input {
  flex: 0 0 auto;
  margin: 2px 0 0;
}
.edit-profile__choice-row--source .edit-profile__choice--tile {
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
}
.edit-profile__choice-row--source .edit-profile__choice--tile input {
  margin: 0;
}
.edit-profile__choice-row--source .edit-profile__choice-title {
  font-size: 12px;
  font-weight: 500;
}
.edit-profile__choice-title {
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
}
.edit-profile__upload-row { gap: 6px; }
.edit-profile__file-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(47, 109, 251, 0.36);
  border-radius: 8px;
  background: rgba(47, 109, 251, 0.06);
}
.edit-profile__file-input[hidden] { display: none; }
.edit-profile__file-btn {
  min-height: 36px;
  gap: 7px;
  white-space: nowrap;
}
.edit-profile__file-btn svg {
  width: 16px;
  height: 16px;
}
.edit-profile__file-status {
  min-width: 0;
  color: var(--text-mute);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-profile__file-preview {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.edit-profile__preview-item {
  position: relative;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.edit-profile__preview-item img,
.edit-profile__preview-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.edit-profile__preview-more,
.edit-profile__preview-file {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
}
.edit-profile__note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(47, 109, 251, 0.22);
  border-radius: 8px;
  background: rgba(47, 109, 251, 0.06);
}
.edit-profile__note-ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--accent, #2563eb);
  background: rgba(47, 109, 251, 0.10);
}
.edit-profile__note-ico svg {
  width: 18px;
  height: 18px;
}
.edit-profile__note-title {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.edit-profile__note-text {
  display: block;
  margin-top: 3px;
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .edit-profile__file-picker {
    grid-template-columns: 1fr;
  }
  .edit-profile__file-preview { grid-template-columns: repeat(4, 42px); }
  .edit-profile__preview-item { width: 42px; height: 42px; }
  .edit-profile__file-btn { justify-content: center; }
}
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: 1px solid #ef4444;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.05); }


/* ?? Responsive ???????????????????????????????????? */

/* Hamburger button — скрыт по умолчанию на широких экранах */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 400;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-sidebar);
  border: 1px solid rgba(255,255,255,0.08);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: background .15s;
}
.hamburger:hover { background: var(--bg-sidebar-2); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #c5cbe0;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop для мобильного сайдбара */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,14,30,0.55);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
body.sidebar-open .sidebar-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sidebar-backdrop { background: rgba(10,14,30,0.72); }
}

/* ─── 1100px: адаптируем контент при сжатии, сайдбар остаётся с текстом ── */
@media (max-width: 1100px) {
  .main { padding: 18px 16px; }
}

/* ─── 900px: сайдбар → hamburger ─────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    z-index: 300;
    box-shadow: none;
    padding: 18px 14px;
    overflow-y: auto;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.35);
  }

  /* Явные display-значения вместо revert для стабильности в браузерах */
  .sidebar__title,
  .nav-section__title,
  .nav-item__label,
  .badge,
  .version { display: block; }
  .sidebar__collapse { display: none; }
  .nav-item { justify-content: flex-start; padding: 9px 10px; }
  .nav-item--group .nav-item__chevron { display: inline-flex; }
  .nav-group__items {
    margin: 2px 0 4px 14px; padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.07);
  }
  .nav-item--sub { padding: 7px 10px; justify-content: flex-start; }
  .sidebar__brand { justify-content: flex-start; }

  .hamburger { display: flex; }

  /* Основной контент.
     Обрез по горизонтали — `clip`, а не `hidden`: `hidden` сделал бы .main
     скроллпортом (вертикаль вычислилась бы в `auto`), который никогда не
     прокручивается, и липкая полоса запуска внутри .main перестала бы
     липнуть. Подробнее — у BODY в начале файла. */
  .main {
    grid-column: 1;
    padding: 62px 14px 20px;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }


  /* Stat-плитки: 2 в ряд */

  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Тулбар: переходит в столбец */
    max-width: 156px;
    padding-left: 14px;
    padding-right: 14px;

  .search { width: 100%; }

  /* Таблицы со скроллом */
  .table-wrap,
  .am-table-wrap,
  .ub-table-wrap,
  .proxy-table-wrap,
  .inv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card, .view-am .table-card { overflow: visible; }

  /* Sel-bar */
  .sel-bar { --sel-bar-inline-gap: 8px; left: var(--sel-bar-inline-gap); right: var(--sel-bar-inline-gap); bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .sel-bar__right { flex-wrap: wrap; gap: 6px; }

}

/* ─── 480px: маленький телефон ─────────────────────────── */
@media (max-width: 480px) {
  .main { padding: 58px 10px 16px; }


  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px 14px; }

  .modal__panel { width: calc(100vw - 20px) !important; max-width: 100% !important; }

  .btn--primary, .btn--ghost { padding: 8px 14px; font-size: 12.5px; }
}

/* ?? Inviter view ???????????????????????????????????? */
.view-inviter { gap: 14px; display: flex; flex-direction: column; }
.btn--primary {
  background: var(--accent, #2563eb); color: #fff; border: none;
  padding: 9px 18px; border-radius: 6px; font-weight: 600; cursor: pointer;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.btn--primary svg,
.btn--ghost  svg {
  width: 16px; height: 16px; flex: none;
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); padding: 9px 18px;
  border-radius: 6px; cursor: pointer;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.btn--ghost:hover { background: var(--bg-hover); }
.modal button:focus-visible,
.modal .btn:focus-visible,
.modal .primary-btn:focus-visible,
.modal .btn--ghost:focus-visible,
.modal .btn--primary:focus-visible,
.modal .icon-btn:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible {
  outline: none;
  border-color: rgba(var(--inv-accent-rgb, 37, 99, 235), 0.42);
  box-shadow: 0 0 0 2px rgba(var(--inv-accent-rgb, 37, 99, 235), 0.08);
}


.inv-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.inv-field--row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.inv-field--row .inv-field__label {
  min-width: 0;
}
.inv-field__label {
  font-size: 12px; color: var(--text-mute); display: inline-flex; gap: 6px;
  align-items: center;
}
.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-app); border: 1px solid var(--border);
  color: var(--text-mute); font-size: 10px; cursor: help;
}
.view-inviter .inv-field__label { flex-wrap: wrap; }
.view-inviter .inv-source__title,
.view-inviter .inv-field__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Подсказка «?» — одна на всю программу.

   Раньше кружок и тултип раздавались тремя адресами: .view-inviter,
   #view-parser, #view-cloner — плюс отдельная копия правил под .cln-adv-grid
   и .cln-tab. Модуль, не попавший в этот список, получал голый знак вопроса
   14px без подсказки: разметка у всех одинаковая (<span class="inv-help"
   data-tooltip="…">?</span>), а стиля не было. Так молчали все «?» на
   карточках чекера номеров, поиска, подписок, накрутки, рассылок,
   автоответчика, заполнения профилей, создания чатов, снятия ограничений и
   конвертера — работали только те, что стоят внутри «Дополнительных настроек»
   (.cln-adv-grid попадал под своё правило).

   Поэтому адреса больше нет: правило знает сам класс. Новый модуль получает
   рабочую подсказку по одному факту наличия .inv-help в разметке. */
.inv-help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: 0 0 17px;
  border-radius: 50%;
  border: 1px solid var(--border-strong, #d3dae6);
  background: var(--bg-app, #f4f6fb);
  color: var(--text-mute);
  font-size: 11px; font-weight: 700; line-height: 1;
  cursor: help; user-select: none;
  text-transform: none; letter-spacing: 0;
}
.inv-help:hover,
.inv-help:focus-visible {
  background: var(--bg-hover, #f1f4fa);
  border-color: var(--text-light, #94a0b8);
  color: var(--text);
  outline: none;
}
/* Пузырь центрован по кружку, но в границы содержимого его загоняет JS:
   ширина зависит от текста, а левая граница — от того, раскрыт сайдбар
   или свёрнут, поэтому в CSS этих координат нет. JS кладёт поправку в
   --tip-dx на самом кружке (alignHelpTooltip в app.js), а сдвиг по центру
   и прижатие к краю остаются здесь одним translateX. */
.inv-help[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(calc(-50% + var(--tip-dx, 0px)));
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px; border-radius: 8px;
  background: #4F5355; color: #fff;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,0.48);
  font-size: 12px; line-height: 1.35; font-weight: 500;
  /* pre-line, а не normal: длинная подсказка делится на абзацы переносами
     прямо в data-tooltip (&#10;). Для однострочных подсказок это тот же
     normal — pre-line отличается только тем, что не съедает переносы. */
  text-align: left; white-space: pre-line;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 40;
}
.inv-help[data-tooltip]::before {
  content: "";
  position: absolute; left: 50%; bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #4F5355;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 41;
}
/* У верхней границы пузырь переворачивается под кружок: над ним лежит
   верхняя панель с поиском (fixed, z-index 420 против 40 у пузыря), и
   заехавшая под неё подсказка пропадала целиком. Сторону выбирает JS
   (alignHelpTooltip → helpTooltipVBounds), CSS по-прежнему без координат. */
.inv-help--below[data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.inv-help--below[data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: #4F5355;
}
.inv-help[data-tooltip]:hover::after,
.inv-help[data-tooltip]:focus-visible::after,
.inv-help[data-tooltip]:hover::before,
.inv-help[data-tooltip]:focus-visible::before {
  opacity: 1;
}

.inv-input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text); font-size: 13px;
  width: 320px; outline: none;
}
.inv-input:focus { border-color: var(--accent, #2563eb); }
.inv-input--sm { width: 96px; }

/* Switch (toggle) */
.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border-strong); border-radius: 18px;
  transition: .15s;
}
.switch__slider::before {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
  transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.switch input:checked + .switch__slider { background: var(--accent, #2563eb); }
.switch input:checked + .switch__slider::before { transform: translateX(14px); }

.inv-field--row .switch { margin-top: 2px; }

/* List editor modal */
.modal__panel--list { width: 640px; max-width: 94vw; padding: 0; }
.modal__panel--list .modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal__panel--list .modal__title { margin: 0; font-size: 16px; }
.modal__panel--list .modal__body { padding: 14px 18px; }
.modal__panel--list .modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.modal__hint { color: var(--text-mute); font-size: 12px; margin: 0 0 8px; }
.inv-textarea {
  width: 100%; min-height: 280px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-app); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; outline: none;
}
.inv-textarea:focus { border-color: var(--accent, #2563eb); background: var(--bg-card); }
.inv-list-meta {
  display: flex; justify-content: space-between;
  margin-top: 6px; color: var(--text-mute); font-size: 12px;
}

/* Account picker modal (пїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅ.пїЅ.) */
.modal__panel--picker {
  width: 1080px; max-width: 98vw; padding: 0;
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.modal__panel--picker .modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal__panel--picker .modal__title { margin: 0; font-size: 16px; }
.modal__panel--picker .modal__body {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1; min-height: 0;
  overflow: auto;
}
.picker-gmail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  min-height: 48px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card, #fff);
}
.picker-gmail-bar__actions {
  display: flex;
  align-items: center;
  gap: 0px;
  min-width: 0;
  flex: 1;
}
.picker-gmail-bar__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute, #5f6368);
  cursor: pointer;
  /* Такт наведения на иконки таблиц — MOTION.md §2.1, --motion-ease-icon.
     transform и opacity перечислены рядом с фоном намеренно: сдвиг и
     проявление кнопки обязаны идти тем же тактом, что и подложка под
     курсором, иначе одна кнопка живёт на двух разных скоростях. */
  transition-property: transform, opacity, background-color, color;
  transition-duration: var(--motion-state, 150ms);
  transition-timing-function: var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1));
}
.picker-gmail-bar__action svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.picker-gmail-bar__action:hover {
  background: rgba(60, 64, 67, 0.08);
  color: var(--text);
}
.picker-gmail-bar__action.is-active,
.picker-gmail-bar__action.is-open {
  color: var(--am-accent, #2563eb);
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.1);
}
.picker-gmail-bar__action.is-loading svg {
  animation: picker-refresh-spin 0.8s linear infinite;
}
@keyframes picker-refresh-spin {
  to { transform: rotate(360deg); }
}
.picker-gmail-bar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  background: var(--am-accent, #2563eb);
  border: 0;
  color: #fff;
  box-shadow: 0 0 0 2px var(--card, #fff);
}
.picker-gmail-bar__badge[hidden] { display: none; }
.picker-counter { color: var(--text-mute); font-size: 12.5px; white-space: nowrap; }
.picker-empty {
  padding: 24px; text-align: center; color: var(--text-mute); font-size: 13px;
}
.picker-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 168px;
  flex: none;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1;
}
.picker-pagination__info {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.picker-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 52px;
  width: 52px;
}
.picker-pagination__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
}
.picker-pagination__btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* Заливку наведения держит кольцо (::before), кнопке остаётся только цвет
   шеврона: круг кольца крупнее самой стрелки, и второй фон под ним читался бы
   вторым кругом. */
.picker-pagination__btn:hover:not([disabled]) {
  color: var(--text);
}
.picker-pagination__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.picker-pagination__btn:focus-visible {
  outline: none;
}

/* Кольцо стрелок — тот же круг, что кольцо чекбокса в таблицах (ui_tweaks.css,
   «общий модуль колонок»): заливка меняет плотность, активация добавляет
   единственную в конструкции внешнюю линию 1px.

     • покой — кольца нет;
     • наведение — заливка бара, та же, что под остальными иконками тулбара;
     • нажатие (:focus/:active) — заливка и линия активного чекбокса
       (--app-table-check-ring-bg-active и --app-table-check-ring-stroke);
     • страница перелистнулась — стрелка теряет фокус (initPaginationRing в
       app.js), кольцо и заливка уходят, стрелка снова обычная;
     • заблокированная стрелка (край списка) кольца не показывает.

   Кольцо живёт на ::before, а не на фоне кнопки: background и box-shadow самой
   стрелки в каждом модуле объявлены своим `!important`, и ни заливка, ни линия
   там бы не удержались. Размер и форму кольцо берёт у стрелки (inset 0 +
   border-radius: inherit) — своего размера у него нет; габарит стрелки под
   кольцо задан в ui_tweaks.css. */
.picker-pagination__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.picker-pagination__btn:hover:not([disabled])::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08));
}
/* Строго после наведения: вес правил разный не настолько, чтобы полагаться на
   него, а порядок здесь читается сразу — нажатая стрелка перекрывает ховер. */
.picker-pagination__btn:is(:focus, :active):not([disabled])::before {
  background: var(--app-table-check-ring-bg-active, rgba(0, 0, 0, 0.12));
  box-shadow: inset 0 0 0 1px var(--app-table-check-ring-stroke, #bdc1c7);
}
.modal__panel--picker .modal__foot.inv-run-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--border); gap: 12px;
}
.inv-run-foot__left { display: flex; align-items: center; gap: 12px; }
.inv-run-foot__right { display: flex; gap: 8px; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }

/* ????????????????????????????????????????????????????????????
   пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ
   ???????????????????????????????????????????????????????????? */

.view-parser {
  /* Brand green (#2563eb) — matches «Инвайтинг»/«Аккаунты». Scoped to parser:
     cloner/profile-filler/checker reuse .prs-* classes and stay blue. */
  --inv-accent: #2563eb;
  --inv-accent-rgb: 37, 99, 235;
  --accent: var(--inv-accent);
  --prs-focus-ring: 0 0 0 3px rgba(var(--inv-accent-rgb), 0.18);
  padding-bottom: 110px;            /* запас под sticky-CTA */
}








/* Все карточки одной структуры: label → основной контрол → (опц. доп. поле) → hint снизу.
   Hint прижимается к низу через margin-top:auto, поэтому карточки выглядят
   единообразно и одинаковой высоты. */
.prs-card__hint {
  font-size: 11.5px; color: var(--text-mute); line-height: 1.45;
}

/* ?? Segmented control ?????????????????????????????????? */
.prs-segmented {
  display: flex; gap: 0;
  background: var(--bg-app, #f4f6fa);
  border-radius: 10px; padding: 3px;
}
.prs-segmented button {
  flex: 1; padding: 8px 10px;
  background: transparent; border: none;
  font-size: 12.5px; color: var(--text-mute);
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.prs-segmented button:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--inv-accent-rgb), 0.16);
}
.prs-segmented button.is-active {
  background: var(--card, #fff);
  color: var(--accent, #5b8def);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ?? Stepper ???????????????????????????????????????????? */
.prs-stepper {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-app, #f4f6fa); border-radius: 10px; padding: 3px;
}
.prs-stepper button {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--card, #fff); border: none;
  font-size: 16px; font-weight: 600; color: var(--accent, #5b8def);
  cursor: pointer; transition: background 0.12s;
}
.prs-stepper button:hover {
  background: rgba(91,141,239,0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--inv-accent-rgb), 0.16);
}
.prs-stepper input {
  flex: 1; min-width: 0; padding: 6px;
  background: transparent; border: none;
  text-align: center; font-size: 15px; font-weight: 600; color: var(--text);
  -moz-appearance: textfield;
}
.prs-stepper input::-webkit-outer-spin-button,
.prs-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ?? пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ (details) ????????????????????????? */
.prs-advanced {
  border-radius: 14px; background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  margin-bottom: 22px;
}
.prs-advanced summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text);
  list-style: none;
}
.prs-advanced summary::-webkit-details-marker { display: none; }
.prs-advanced__chev { transition: transform 0.2s; opacity: 0.5; }
.prs-advanced[open] .prs-advanced__chev { transform: rotate(180deg); }

/* ── Sticky CTA (унифицирован с .inv-cta) ────────────────────────── */
.prs-cta {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 20px;
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  margin-top: 8px;
}
.prs-cta__text { min-width: 0; }
.prs-cta__title { font-size: 14px; font-weight: 600; }
.prs-cta__sub {
  font-size: 12px; color: var(--text-mute); margin-top: 2px;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prs-cta__actions { display: flex; gap: 10px; }
.prs-cta__start {
  padding: 12px 24px; font-size: 14px; font-weight: 600;
  background: linear-gradient(120deg, #6c5ce7, #5b8def);
  border: none; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(91, 141, 239, 0.6);
}
.prs-cta__start:hover:not([disabled]) {
  box-shadow: 0 12px 24px -10px rgba(91, 141, 239, 0.7);
}
.prs-cta__start[disabled] {
  opacity: 0.5; cursor: not-allowed;
  background: var(--bg-app, #f4f6fa); color: var(--text-mute);
  box-shadow: none;
}
/* Parser CTA → brand green (matches «Запустить задачу») */
.view-parser .prs-cta__start {
  background: #3b82f6;
  box-shadow: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.view-parser .prs-cta__start:hover:not([disabled]) {
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.view-parser .prs-cta__start[disabled] {
  background: var(--bg-app, #f4f6fa); color: var(--text-mute);
  box-shadow: none;
}

/* ???????????????????????????????????????????????????????????????? */
/* ???  пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ: пїЅпїЅпїЅпїЅпїЅ wizard-UI                              ??? */
/* ???????????????????????????????????????????????????????????????? */
.view-inviter {
  --inv-grad-1: #1e293b;
  --inv-grad-2: #334155;
  --inv-grad-3: #475569;
  --inv-accent: #334155;
  --inv-accent-rgb: 51, 65, 85;
  display: flex; flex-direction: column;
  gap: 18px; padding-bottom: 96px;
}

/* ── Broadcaster (DM Spammer) wizard scope ───────────────── */
.view-bc {
  --inv-grad-1: #0f172a;
  --inv-grad-2: #15233c;
  --inv-grad-3: #1e3a8a;
  --inv-accent: #2563eb;
  --inv-accent-rgb: 37, 99, 235;
  display: flex; flex-direction: column;
  gap: 18px; padding-bottom: 96px;
}
.view-bc .btn--primary:not(.prs-cta__start),
.view-bc .bc-btn--message,
.view-bc .bc-btn--links,
.view-bc .bc-btn--media {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px -6px rgba(37, 99, 235,0.42);
  cursor: pointer;
}
.view-bc .btn--primary:not(.prs-cta__start):hover,
.view-bc .bc-btn--message:hover,
.view-bc .bc-btn--links:hover,
.view-bc .bc-btn--media:hover {
  filter: none;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235,0.5);
}
.view-bc .btn--primary:hover {
  filter: none;
}



/* ?? пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ ??????????????? */
.view-bc #bc-message-effect.inv-input--sm {
  width: 160px;
  min-width: 160px;
}



/* ?? Inviter base picker modal ???????????????????????? */
.inv-base-modal__panel {
  display: flex; flex-direction: column;
  max-height: 86vh; overflow: hidden;
}
.inv-base-modal__body {
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.inv-base-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--bg-app, #f4f6fa);
  border: 1px solid var(--border, #e6e9ef);
}
.inv-base-search:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}
.inv-base-search__ico { font-size: 13px; color: var(--text-mute); }
.inv-base-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--text);
}
.modal .inv-base-search input:focus,
.modal .inv-base-search input:focus-visible {
  outline: none;
  box-shadow: none;
}
.inv-base-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 0;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  padding-top: 2px;
}
.inv-base-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  cursor: pointer; transition: all 0.15s;
}
.inv-base-row:hover {
  border-color: var(--border-strong, #d3dae6);
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.inv-base-row:focus-visible {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.10);
}
.inv-base-row.is-active,
.inv-base-row.is-picked {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.inv-base-row__cb {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--inv-accent, #2563eb);
}
.inv-base-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--border, #e6e9ef);
}
.inv-base-foot__count { font-size: 12.5px; color: var(--text-mute); }
.inv-base-foot__actions { display: inline-flex; gap: 8px; }

/* ?? пїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅ пїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ ??? */
.inv-source__bases {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 6px;
}
.inv-source__bases[hidden] { display: none; }
.inv-base-row__main { min-width: 0; }
.inv-base-row__name {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-base-row__sub {
  margin-top: 2px; font-size: 11.5px; color: var(--text-mute);
}
.inv-base-row__count {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.inv-base-empty {
  margin-top: 16px; padding: 24px; text-align: center;
  color: var(--text-mute); font-size: 13px;
  border: 1px dashed var(--border, #e6e9ef); border-radius: 12px;
}

/* ?? Segmented control (пїЅпїЅпїЅпїЅпїЅпїЅпїЅ) ???????????????????????? */
.inv-segmented {
  display: flex; gap: 0;
  background: var(--bg-app, #f4f6fa);
  border-radius: 12px; padding: 4px;
}
.inv-segmented button {
  flex: 1; padding: 10px 12px;
  background: transparent; border: none;
  font-size: 13px; color: var(--text-mute);
  border-radius: 10px; cursor: pointer;
  transition: all 0.15s;
}
.inv-segmented button:hover { color: var(--text); }
.inv-segmented button.is-active {
  background: var(--card, #fff);
  color: var(--text);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.18);
}

/* ?? пїЅпїЅпїЅпїЅпїЅпїЅпїЅ (пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ) ??????????????????? */
.inv-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.inv-presets button {
  padding: 6px 12px; border-radius: 999px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  font-size: 12px; color: var(--text-mute);
  cursor: pointer; transition: all 0.15s;
}
.inv-presets button:hover {
  border-color: var(--border-strong, #d3dae6);
  color: var(--text);
}
.inv-presets button.is-active {
  background: var(--bg-hover, #f1f4fa);
  border-color: var(--border-strong, #d3dae6);
  color: var(--text); font-weight: 600;
}


.view-inviter .inv-source__alt:focus-visible,
.view-inviter .inv-source__add-btn:focus-visible,
.view-inviter .inv-segmented button:focus-visible,
.view-inviter .inv-presets button:focus-visible,
.view-inviter .inv-target-input:focus-visible,
.view-inviter .prs-accounts-btn:focus-visible,
.view-inviter #inv-target-input:focus-visible,
.view-inviter #inv-accounts:focus-visible,
.view-inviter #inv-schedule:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--inv-accent-rgb), 0.18);
}
.view-inviter .switch input:focus-visible + .switch__slider {
  box-shadow: 0 0 0 3px rgba(var(--inv-accent-rgb), 0.18);
}

/* ???????????????????????????????????????????????????????????????? */
/* ???  пїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ                                     ??? */
/* ???????????????????????????????????????????????????????????????? */
.view-userbase {
  --ub-grad-1: #3b82f6;
  --ub-grad-2: #2563eb;
  --ub-grad-3: #1d4ed8;
  --ub-accent: #2563eb;
  --ub-accent-rgb: 37, 99, 235;
  display: flex; flex-direction: column;
  gap: 18px; padding-bottom: 24px;
}
.ub-search {
  position: relative; flex: 1; min-width: 220px;
}
.ub-search input {
  width: 100%; padding: 9px 12px 9px 36px;
  border: 1px solid var(--border, #e6e9ef); border-radius: 10px;
  background: var(--bg-app, #f7f8fb); color: var(--text);
  font-size: 13px;
}
.ub-search input:focus {
  outline: none; border-color: var(--ub-accent);
  background: var(--card, #fff);
}

/* ?? пїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ ????????????????????????????????????? */
.ub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ub-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  border-top: 4px solid var(--ub-card-color, var(--ub-accent));
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.ub-card:hover {
  /* Без translateY — в связке с .view-userbase .ub-card */
  box-shadow: 0 12px 26px -16px rgba(0,0,0,0.22);
  border-color: var(--ub-card-color, var(--ub-accent));
}
.ub-card__title {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ub-card__actions {
  display: flex; gap: 4px; margin-top: auto;
  padding-top: 8px; border-top: 1px dashed var(--border, #e6e9ef);
  opacity: 0.6; transition: opacity 0.15s;
}
.ub-card:hover .ub-card__actions { opacity: 1; }
.ub-card__action {
  flex: 1; padding: 6px 4px; border: none; background: transparent;
  font-size: 12px; color: var(--text-mute); cursor: pointer;
  border-radius: 6px; transition: all 0.12s;
}
.ub-card__action:hover {
  background: rgba(var(--ub-accent-rgb), 0.1);
  color: var(--ub-accent);
}

/* ????????????????????????????????????????????????????????????
   пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ (.view-am)
   ???????????????????????????????????????????????????????????? */
.view-am {
  --am-accent:        #2563eb;
  --am-accent-rgb:    37, 99, 235;
  --am-accent-active: #7478ff;
  --am-accent-2:      #0ea5e9;
  --am-accent-2-rgb:  14,165,233;
  --am-soft:          rgba(37, 99, 235,0.10);
  padding-bottom: 100px;
}



/* ?? Toolbar ??????????????????????????????????????????? */
.view-am .toolbar {
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.view-am .toolbar .icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text); cursor: pointer;
  font-size: 16px;
  transition: all 0.15s;
}
.view-am .toolbar .icon-btn:hover {
  background: var(--am-soft);
  color: var(--am-accent);
  border-color: rgba(var(--am-accent-rgb), 0.22);
}
.view-am .counter {
  font-size: 12.5px; color: var(--text-mute);
}

/* ?? Filters ??????????????????????????????????????????? */
.view-am .filters {
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.view-am .filters .chip {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f7f8fb);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.view-am .filters .chip:hover {
  border-color: rgba(var(--am-accent-rgb), 0.45);
  background: var(--am-soft);
  color: var(--am-accent);
}
.view-am .filters .chip.is-active {
  background: var(--am-soft);
  color: var(--am-accent);
  border-color: var(--am-accent);
}
.view-am .search {
  border-radius: 11px;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f7f8fb);
  padding: 8px 12px;
  min-width: 240px;
  transition: all 0.15s;
}
.view-am .search:focus-within {
  border-color: var(--am-accent);
  background: var(--card, #fff);
  box-shadow: 0 0 0 2px rgba(var(--am-accent-rgb), 0.08);
}

/* ?? Table card ???????????????????????????????????????? */
.view-am #am-open-help svg,
.view-proxy #px-open-help svg {
  width: 23px;
  height: 23px;
}
.view-am .am-search-row__add svg,
.view-proxy .am-search-row__add svg,
.view-proxy #px-add-many svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 2.4;
}
.view-am .am-table-card,
.view-proxy .am-table-card {
  border-radius: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  overflow: visible;
}
.view-am .am-table-shell,
.view-proxy .am-table-shell,
.view-tasks .am-table-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  --am-table-tool-row-h: 48px;
}
.view-proxy .am-table-shell .picker-gmail-bar,
.view-proxy .am-table-shell .am-gmail-bar {
  width: 100%;
  box-sizing: border-box;
}
.view-proxy .am-table-shell .am-table-foot {
  width: 100%;
  box-sizing: border-box;
}
.view-am .am-gmail-bar,
.view-proxy .am-gmail-bar {
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border, #e6e9ef);
  min-height: var(--am-table-tool-row-h);
  padding: 0px 12px;
  box-sizing: border-box;
  overflow: visible;
}
.view-am .acc-table thead th.col-check,
.view-am .acc-table tbody td.col-check,
.view-am .acc-table thead th[data-col="select"],
.view-am .acc-table tbody td[data-col="select"] {
  width: 38px;
  padding-left: 16px;
  padding-right: 4px;
  text-align: center;
}
.view-am .acc-table thead th.col-num,
.view-am .acc-table tbody td.col-num,
.view-am .acc-table thead th[data-col="num"],
.view-am .acc-table tbody td[data-col="num"] {
  width: 36px;
  padding-left: 4px;
  padding-right: 8px;
  text-align: center;
  color: var(--text);
}
.view-am .acc-table tbody td[data-col="select"],
.view-am .acc-table tbody td[data-col="num"],
.view-am .acc-table tbody td[data-col="phone"] {
  border-left: none;
}
.view-am .acc-table thead th[data-col]:not([data-col="select"]):not([data-col="num"]) {
  border-left: none;
}
.view-am .acc-table tbody td[data-col] {
  border-left: none;
}
.view-am .am-gmail-bar .picker-counter,
.view-proxy .am-gmail-bar .picker-counter,
.view-tasks .am-gmail-bar .picker-counter {
  margin-left: 10px;
  padding-left: 12px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-mute);
  background: transparent;
  border-left: 1px solid var(--border, #e6e9ef);
  border-radius: 0;
  white-space: nowrap;
}
.view-am .am-table-scroll,
.view-proxy .am-table-scroll,
.view-tasks .am-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}
.view-am .am-table-foot,
.view-proxy .am-table-foot,
.view-tasks .am-table-foot {
  border-top: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f7f8fb);
  padding: 14px 18px;
  display: flex;
  align-items: center;
}
.view-am .am-table-foot .page-size {
  margin: 0;
}
.view-am .table-card {
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  overflow: hidden;
}
/* Шапка/ячейки/состояния строк .acc-table — канонический контракт .app-table. */
.view-am .acc-table thead th[data-col="actions"] {
  padding-left: 12px;
  padding-right: 12px;
}
.view-am .table-footer {
  border-top: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f7f8fb);
  padding: 10px 14px;
}
.view-am .am-table-foot.table-footer {
  justify-content: flex-start;
}
.view-am .pagination .page-btn,
.view-am .pagination button {
  border-radius: 8px;
  transition: all 0.15s;
}
.view-am .pagination .page-btn:hover,
.view-am .pagination button:hover {
  background: var(--am-soft);
  color: var(--am-accent);
}
.view-am .pagination .is-active,
.view-am .pagination .page-btn.is-active {
  background: var(--am-accent) !important;
  color: #fff !important;
}

/* ?? Selection bar (sticky bottom) ????????????????????? */
.sel-bar {
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff;
  box-shadow: 0 -12px 30px -18px rgba(37, 99, 235,0.7);
  border: 0;
}
.sel-bar__count { color: #fff; font-weight: 600; }
.sel-bar .icon-btn {
  background: rgba(255,255,255,0.16);
  color: #fff; border: 0;
}
.sel-bar .icon-btn:hover { background: rgba(255,255,255,0.28); }
.sel-bar .quick-act {
  background: rgba(255,255,255,0.14);
  color: #fff; border: 0; border-radius: 10px;
  width: 36px; height: 36px;
  cursor: pointer;
  transition: all 0.15s;
}
.sel-bar .quick-act:hover {
  background: #fff; color: #4f46e5;
  transform: translateY(-2px);
}
.sel-bar .primary-btn {
  background: #fff; color: #4f46e5; border-radius: 11px;
  padding: 9px 16px; font-weight: 600;
  border: 0; cursor: pointer;
  transition: all 0.15s;
}
.sel-bar .primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4);
}

/* ????????????????????????????????????????????????????????????
   Account picker modal пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅ AM
   ???????????????????????????????????????????????????????????? */
/* Account picker modal — визуальный язык addw (белая карточка, шапка без
   заливки; типографика и кнопки доводятся в ui_tweaks.css). */
#inv-run-modal .modal__panel--picker {
  --am-accent: var(--text, #1a1d23);
  --am-accent-rgb: 26, 29, 35;
  --am-soft: rgba(37, 99, 235, 0.07);
}

.modal__panel--picker {
  border-radius: 28px;
  overflow: hidden;
  --picker-cols: 36px 42px minmax(210px, 1.35fr) 70px minmax(140px, .9fr) 110px minmax(140px, .85fr) minmax(150px, 1fr);
  --am-accent: #2563eb;
  --am-accent-rgb: 37, 99, 235;
  --am-soft: rgba(37, 99, 235,0.10);
}
.modal__panel--picker .modal__head {
  padding: 18px 24px 10px;
  background: transparent;
  border-bottom: 0;
}
.modal__panel--picker .modal__title { font-weight: 500; font-size: 23px; }
.modal__panel--picker .modal__body { padding: 20px 24px; gap: 18px; overflow: hidden; }
.picker-gmail-bar .picker-counter {
  margin-left: 10px;
  padding-left: 12px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-mute);
  background: transparent;
  border-left: 1px solid var(--border, #e6e9ef);
  border-radius: 0;
  white-space: nowrap;
}
.modal__panel--picker .picker-gmail-bar__action {
  border: 0;
  background: transparent;
  border-radius: 50%;
}
.modal__panel--picker .picker-gmail-bar__action:hover {
  border: 0;
  background: rgba(60, 64, 67, 0.08);
}
.modal__panel--picker .picker-gmail-bar__action.is-active,
.modal__panel--picker .picker-gmail-bar__action.is-open {
  border: 0;
  background: rgba(var(--am-accent-rgb), 0.1);
}
.modal__panel--picker .picker-gmail-bar {
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border, #e6e9ef);
}
.modal__panel--picker .inv-run-foot {
  padding: 16px 24px;
}
.picker-counter {
  font-weight: 600; color: var(--am-accent);
  background: var(--am-soft); padding: 5px 10px; border-radius: 999px;
}
.modal__panel--picker .modal__foot.inv-run-foot {
  background: var(--bg-app, #f7f8fb);
  border-top: 1px solid var(--border, #e6e9ef);
  padding: 14px 24px;
}
.modal__panel--picker .btn--primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: 0; color: #fff;
  padding: 10px 20px; border-radius: 6px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 8px 20px -12px rgba(37, 99, 235,0.7);
}
.modal__panel--picker .btn--primary:hover {
  box-shadow: 0 12px 26px -12px rgba(37, 99, 235,0.85);
}
.modal__panel--picker .btn--primary[disabled] {
  background: #cbd5e1; box-shadow: none; cursor: not-allowed;
  transform: none;
}
.modal__panel--picker .btn--ghost {
  background: transparent; border: 1px solid var(--border, #e6e9ef);
  color: var(--text); border-radius: 6px; padding: 10px 16px;
  cursor: pointer; transition: all 0.15s;
}
.modal__panel--picker .btn--ghost:hover {
  background: var(--bg-app, #f7f8fb);
  border-color: var(--text-mute);
}
.modal__panel--picker .inv-input--sm {
  min-height: 38px;
  box-sizing: border-box;
  border-radius: 9px; padding: 8px 12px;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--card, #fff);
  width: 88px;
  text-align: center;
}
.modal__panel--picker .inv-input--sm:focus {
  border-color: var(--am-accent);
  box-shadow: 0 0 0 2px rgba(var(--am-accent-rgb), 0.08);
}

/* ── Picker: строка отбора окна запуска (чипы-фильтры) ──
   Канон Gmail: отбор стоит в самом окне между заголовком и панелью, а не
   прячется за воронкой. Ни поиска, ни вкладок-категорий рядом нет — весь
   отбор идёт одним рядом чипов. */
.picker-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  flex-wrap: wrap;
}
.picker-filter-row__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

/* ── Picker: фильтры окна запуска (поповер + колонки) ── */
.picker-filter-wrap { position: relative; }
.picker-range-wrap { position: relative; display: inline-flex; align-items: center; }
.am-bar__range-pop,
.picker-range-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 248px;
  padding: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 12px;
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.18);
}
.am-bar__range-pop[hidden],
.picker-range-pop[hidden] { display: none; }
.picker-range-pop__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute, #64748b);
}
.picker-range-pop__body { padding: 0; }
.picker-range-pop__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}
.picker-range-pop__footer .btn--sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.view-am .am-gmail-bar .am-bar__range-pop,
.view-am .am-gmail-bar .picker-range-pop,
.view-proxy .am-gmail-bar .am-bar__range-pop,
.view-proxy .am-gmail-bar .picker-range-pop {
  left: 0;
  right: auto;
  z-index: 620;
}
.picker-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f7f8fb);
  color: var(--text); font-size: 13px; line-height: 1;
  transition: all 0.15s;
}
.picker-chip:hover { border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.4); color: var(--am-accent, #2563eb); }
.picker-chip.is-active {
  border-color: var(--am-accent, #2563eb); color: var(--am-accent, #2563eb);
  background: var(--am-soft, rgba(37, 99, 235, 0.10));
}
.picker-chip__caret { font-size: 9px; opacity: 0.7; }
.picker-chip__count {
  display: inline-grid; place-items: center;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  background: var(--am-accent); color: #fff;
}
.picker-chip--clear {
  background: transparent; border-color: transparent;
  color: var(--text-mute); margin-left: auto;
}
.picker-chip--clear:hover { color: #ef4444; background: transparent; }

/* Окно фильтров аккаунтов: чипы групп (как в окне запуска задачи),
   значения группы — в fixed-дропдауне, который не двигается при выборе. */
.am-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 620;
  width: 300px;
  max-width: min(94vw, 320px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.45);
  color: #111827;
}
.am-filter-pop[hidden] { display: none; }
.am-filter-pop__chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* Высокий z-index — дропдаун должен быть поверх модалки запуска. */
.dropdown--picker { z-index: 640; }

/* Подвал окна: размер страницы + кнопки */
.picker-pagesize {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-mute); white-space: nowrap;
}
.picker-pagesize select {
  padding: 6px 9px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--card, #fff); color: var(--text); cursor: pointer; outline: none;
}
.picker-pagesize select:focus { border-color: var(--am-accent); }

/* ????????????????????????????????????????????????????????????
   AM v2: bigger stats + unified action bar
   ???????????????????????????????????????????????????????????? */








/* Выпадающий список значений (роль/гео/...) поверх popover «Фильтры» (z-index 620). */

/* ?? Empty state ???????????????????????????????????????? */
.ub-empty {
  text-align: center; padding: 48px 24px;
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px dashed var(--border, #e6e9ef);
}
.ub-empty h3 { margin: 8px 0 4px; font-size: 18px; }
.ub-empty p { margin: 0 auto 18px; color: var(--text-mute); max-width: 40ch; font-size: 13px; }

/* ?? пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅ ????????????????????????????????????? */
.ub-color {
  width: 18px; height: 18px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform 0.12s;
}
.ub-color:hover { transform: scale(1.15); }
.ub-color.is-active { border-color: var(--text); }
.ub-color[data-color="teal"]   { background: #2563eb; }
.ub-color[data-color="blue"]   { background: #3b82f6; }
.ub-color[data-color="violet"] { background: #8b5cf6; }
.ub-color[data-color="pink"]   { background: #ec4899; }
.ub-color[data-color="orange"] { background: #f97316; }
.ub-color[data-color="amber"]  { background: #f59e0b; }
.ub-color[data-color="green"]  { background: #22c55e; }
.ub-color[data-color="slate"]  { background: #64748b; }




/* ?? Import sessions list ??????????????????????????????? */
.ub-sessions { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.ub-session {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-app, #f7f8fb);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.ub-session:hover {
  background: var(--card, #fff);
  border-color: var(--ub-accent);
}
.ub-session__name { font-weight: 500; font-size: 13.5px; }
.ub-session__count {
  font-weight: 700; color: var(--ub-accent);
  font-size: 16px;
}
.ub-session__count small { font-size: 11px; color: var(--text-mute); font-weight: 500; }
.ub-session__date { font-size: 11.5px; color: var(--text-mute); }

.btn--sm { padding: 6px 12px; font-size: 12px; }

/* ============================================================
   Task Manager пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ
   ============================================================ */

/* Карточный вид, hero, stat-плитки и пилюли типов удалены — задачи живут в
   таблице по каноническому контракту .app-table (оболочка как в аккаунтах).
   Ниже остаются только кнопки действий строки (.tm-card__act); пустые
   состояния — общий .empty-state. */
/* Кнопка-иконка задачи — круглая подложка 32px без внешней обводки: тот же
   язык, что у иконок gmail-бара и шестерёнки таблиц. Рамка вокруг каждой
   кнопки рисовала в строке сетку из квадратов; при наведении остаётся одна
   заливка, она же и показывает, что курсор попал в кнопку. */
.tm-card__act {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #444746;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s ease, color .12s ease;
}
.tm-card__act svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
/* Все глифы кнопки нарисованы в одной сетке 24 (таблица TASK_ACT_SVG в
   app.js): 1.8 в сетке 24 даёт те самые 1.5px в готовом размере 20px. Второй
   сетки — 20, от расписания — больше нет, поэтому нет и второго правила. */
.tm-card__act svg { stroke-width: 1.8; }
.tm-card__act:hover { background: rgba(68, 71, 70, .08); }
.tm-card__act--danger:hover {
  background: rgba(239, 68, 68, .1);
  color: #b42525;
}
.tm-card__act--pause:hover {
  background: rgba(37, 99, 235, .1);
  color: #1d4ed8;
}
/* «Продолжить» у остановленной задачи зовёт к нажатию — синим цветом самой
   иконки: контура, которым он выделялся раньше, у кнопок больше нет. */
.tm-card__act--continue {
  color: #0b57d0;
}
.tm-card__act--continue:hover {
  background: rgba(11, 87, 208, .1);
}

/* ============================================================
   Quick-action: пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ
   ============================================================ */


/* ============================================================
   Theme toggle (пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ)
   ============================================================ */
.theme-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  color: #cfd5e6;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .1);
}

/* ============================================================
   Dark Theme пїЅ VS Code Dark Modern 2026
   ============================================================ */
body.theme-dark {
  /* Base palette */
  --bg-app:        #1f1f1f;   /* Editor background */
  --bg-card:       #181818;   /* Panels / cards */
  --bg-sidebar:    #181818;   /* Activity bar */
  --bg-sidebar-2:  #2a2d2e;   /* Selected nav item */
  --bg-hover:      #2a2a2a;
  --bg-row-hover:  #232323;
  --border:        #2b2b2b;
  --border-strong: #3c3c3c;
  --text:          #cccccc;
  --text-mute:     #9d9d9d;
  --text-light:    #6b6b6b;
  --primary:       #0078d4;   /* VS Code accent blue */
  --primary-soft:  rgba(0, 120, 212, .18);
  --green:         #4ec9b0;
  --green-bg:      rgba(78, 201, 176, .15);
  --orange:        #d19a66;
  --orange-bg:     rgba(209, 154, 102, .15);
  --red:           #f48771;
  --red-bg:        rgba(244, 135, 113, .14);
  --blue:          #569cd6;
  --blue-bg:       rgba(86, 156, 214, .15);
  --gray-bg:       #2a2a2a;
  --shadow:        0 2px 12px rgba(0, 0, 0, .4);

  /* Account Status colors - Dark theme soft filled style */
  --status-active-bg: rgba(37, 196, 94, 0.12);
  --status-active-color: #25c45e;

  --status-spamblock-perm-bg: rgba(249, 115, 22, 0.12);
  --status-spamblock-perm-color: #f97316;

  --status-spamblock-temp-bg: rgba(243, 160, 10, 0.12);
  --status-spamblock-temp-color: #f3a00a;

  --status-frozen-bg: rgba(79, 193, 255, 0.12);
  --status-frozen-color: #4fc1ff;

  --status-dead-bg: rgba(244, 135, 113, 0.12);
  --status-dead-color: #f48771;

  --status-skip-bg: rgba(148, 163, 184, 0.12);
  --status-skip-color: #94a3b8;
}
body.theme-dark {
  background: var(--bg-app);
  color: var(--text);
}
body.theme-dark .sidebar { color: #cccccc; border-right: 1px solid #2b2b2b; }
body.theme-dark .nav-item { color: #cccccc; }
body.theme-dark .nav-item:hover:not([disabled]),
body.theme-dark .nav-item.is-active { background: var(--bg-sidebar-2); color: #ffffff; }
body.theme-dark .badge--ok { background: rgba(78, 201, 176, .18); color: #4ec9b0; }
body.theme-dark .version { color: #6b6b6b; }

/* пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅ */
body.theme-dark .stat,
body.theme-dark .am-stat,
body.theme-dark .card,
body.theme-dark .modal__panel,
body.theme-dark .am-bar {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
/* Кнопка-иконка задачи и в тёмной теме без карточной подложки и рамки —
   только тон глифа и заливка при наведении (канон шестерёнки таблиц). */
body.theme-dark .tm-card__act {
  background: transparent;
  border: 0;
  color: #c7cad1;
}
body.theme-dark .tm-card__act:hover {
  background: rgba(232, 234, 237, .10);
}


/* пїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅ */
body.theme-dark input,
body.theme-dark .search input,
body.theme-dark select,
body.theme-dark textarea {
  background: #2a2a2a;
  color: var(--text);
  border-color: var(--border);
}
body.theme-dark input::placeholder { color: var(--text-light); }
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus { border-color: var(--primary); }

/* пїЅпїЅпїЅпїЅпїЅпїЅ */
body.theme-dark .primary-btn { background: var(--primary); color: #fff; }
body.theme-dark .primary-btn:hover { background: #1f8af0; }
body.theme-dark .btn-ghost,
body.theme-dark .icon-btn,
body.theme-dark .quick-act {
  background: #2a2a2a; border: 1px solid var(--border); color: var(--text);
}
body.theme-dark .btn-ghost:hover,
body.theme-dark .icon-btn:hover,
body.theme-dark .quick-act:hover { background: #333; border-color: var(--border-strong); }


/* Selection bar */
body.theme-dark .sel-bar {
  background: #252526;
  border-color: var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
}

/* пїЅпїЅпїЅпїЅпїЅпїЅпїЅ */
body.theme-dark .modal__backdrop { background: rgba(20, 30, 60, 0.32); }
body.theme-dark .modal__panel { box-shadow: 0 16px 48px rgba(0, 0, 0, .6); }
body.theme-dark .actions-list li:hover,
body.theme-dark .role-list li:hover { background: var(--bg-hover); }

/* пїЅпїЅпїЅпїЅпїЅпїЅ-пїЅпїЅпїЅпїЅпїЅпїЅ пїЅ пїЅпїЅпїЅпїЅпїЅ */
body.theme-dark .task-status--running   { background: rgba(0, 120, 212, .18);   color: #4fc1ff; }
body.theme-dark .task-status--paused    { background: rgba(245, 158, 11, .18);  color: #fbbf24; }
body.theme-dark .task-status--warning   { background: rgba(245, 158, 11, .18);  color: #fbbf24; }
body.theme-dark .task-status--done      { background: rgba(78, 201, 176, .15);  color: #4ec9b0; }
body.theme-dark .task-status--cancelled { background: rgba(209, 154, 102, .18); color: #d7ba7d; }
body.theme-dark .task-status--interrupted { background: rgba(160, 174, 192, .16); color: #a0aec0; }
body.theme-dark .task-status--error     { background: rgba(244, 135, 113, .15); color: #f48771; }
body.theme-dark .task-detail__warning {
  background: rgba(245, 158, 11, .14);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .28);
}


/* Theme toggle пїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅ sidebar пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ */
body.theme-dark .theme-toggle { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); }

/* ???????????????????????????????????????????????????????????????? */
/* ???  Scheduled tasks (пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ)                           ??? */
/* ???????????????????????????????????????????????????????????????? */
/* Секция встроена в оболочку таблицы (.am-table-shell) — без собственной
   рамки/фона: карточку рисует сама оболочка, как у таблицы задач. */
.tm-scheduled {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tm-scheduled__head { margin-bottom: 12px; }
.tm-scheduled__title {
  margin: 0 0 4px;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.tm-scheduled__title-ico {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(37, 99, 235, .12);
  color: var(--primary, #2563eb);
}
.tm-scheduled__title-ico svg { width: 15px; height: 15px; }
.tm-scheduled__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px;
  background: rgba(37, 99, 235, .14);
  color: var(--primary, #2563eb);
  font-size: 11.5px; font-weight: 700;
}
.tm-scheduled__hint { margin: 0; font-size: 12px; color: var(--text-mute); }
/* Пустое состояние расписаний — общий .empty-state, как на вкладках таблицы
   (цвета повторяют контракт table.app-table .empty-state__* из ui_tweaks). */
.tm-scheduled .empty-state__art { color: var(--text-light, #94a3b8); }
.tm-scheduled .empty-state__text {
  color: var(--text-mute, #64748b);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}
.tm-sched-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* Schedule modal — оболочка и содержимое живут в каноне окон-форм
   (ui_tweaks.css, блок «ОКНО ПЛАНИРОВЩИКА»). Здесь правил нет намеренно:
   старое поколение (r10, заголовок 18/700, разделители секций, синие кнопки
   38px/r6) перебивало канон и делало окно чужим. */

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* в•ђв•ђв•ђ  Sidebar redesign (Floppydata-style)                     в•ђв•ђв•ђ */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sidebar {
  font-family: var(--app-font);
  background: var(--bg-sidebar);
  padding: 14px 10px 12px;
  gap: 10px;
  --sidebar-scrollbar-size: 8px;
  --sidebar-scrollbar-thumb-inset: 3px;
  --sidebar-scrollbar-thumb: rgba(154, 165, 191, 0.66);
  --sidebar-scrollbar-thumb-hover: rgba(184, 194, 219, 0.82);
  --sidebar-scrollbar-thumb-active: rgba(214, 223, 242, 0.94);
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
}
.sidebar__brand {
  padding: 4px 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.sidebar__collapse {
  position: absolute;
  right: 4px; top: 6px;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6e7894;
  transition: background .12s, color .12s;
}
.sidebar__collapse:hover { background: rgba(255,255,255,.05); color: #fff; }

.sidebar__nav {
  gap: 14px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
  scrollbar-gutter: stable;
}

/* Minimal dark scrollbar for desktop and mobile sidebar containers. */
.sidebar::-webkit-scrollbar,
.sidebar__nav::-webkit-scrollbar {
  width: var(--sidebar-scrollbar-size);
}

.sidebar::-webkit-scrollbar-track,
.sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--sidebar-scrollbar-thumb);
  background-clip: padding-box;
  border: var(--sidebar-scrollbar-thumb-inset) solid transparent;
  border-radius: 999px;
  min-height: 36px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: var(--sidebar-scrollbar-thumb-hover);
}

.sidebar::-webkit-scrollbar-thumb:active,
.sidebar__nav::-webkit-scrollbar-thumb:active {
  background: var(--sidebar-scrollbar-thumb-active);
}

.sidebar::-webkit-scrollbar-corner,
.sidebar__nav::-webkit-scrollbar-corner {
  background: transparent;
}
.nav-section { gap: 1px; }
.nav-section__title {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #6e7894;
  padding: 10px 12px 6px;
  font-weight: 600;
}

.nav-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #c5cbe0;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-item:hover:not([disabled]) { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.is-active { background: rgba(37, 99, 235, .14); color: #fff; }
.nav-item.is-active::before {
  content: ""; position: absolute;
  left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: #2563eb; border-radius: 0 3px 3px 0;
}
.nav-item[disabled] { opacity: .42; cursor: not-allowed; }

.nav-item__icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: #cfd5e6;
  text-align: center;
  font-size: 13px;
}
.nav-item__icon svg { width: 16px; height: 16px; display: block; }
.nav-item:hover .nav-item__icon,
.nav-item.is-active .nav-item__icon { background: rgba(255,255,255,.08); color: #fff; }
.nav-item__icon[data-tone="primary"]  { color: #7ea6ff; background: rgba(37, 99, 235, .14); }
.nav-item__icon[data-tone="indigo"]   { color: #b6a3ff; background: rgba(135, 110, 255, .14); }
.nav-item__icon[data-tone="violet"]   { color: #d4a3ff; background: rgba(180, 120, 255, .14); }
.nav-item__icon[data-tone="teal"]     { color: #6fe0d6; background: rgba(37, 99, 235, .14); }
.nav-item__icon[data-tone="emerald"]  { color: #6fd29a; background: rgba(43, 191, 122, .14); }
.nav-item__icon[data-tone="amber"]    { color: #ffc77a; background: rgba(245, 158, 11, .14); }
.nav-item__icon[data-tone="rose"]     { color: #ff9aa6; background: rgba(244, 96, 114, .14); }
.nav-item__icon[data-tone="cyan"]     { color: #7adff5; background: rgba(56, 189, 248, .14); }
.nav-item__icon[data-tone="slate"]    { color: #a3aac0; background: rgba(148, 163, 184, .14); }

.nav-item__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* в•ђв•ђв•ђ  Proxy view                                              в•ђв•ђв•ђ */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* Proxy module palette — slate gradient + site primary accent, matching
   the inviter/userbase v2 visual language. */
.view-proxy {
  /* Inviter hero gradient (identical to .view-inviter) */
  --inv-grad-1: #1e293b;  /* slate-800 */
  --inv-grad-2: #334155;  /* slate-700 */
  --inv-grad-3: #475569;  /* slate-600 */
  --inv-accent: #2563eb;  /* inviter blue */
  --inv-accent-rgb: 37, 99, 235;
  /* Recolor the shared .am-bar toolbar / filter chips to the inviter blue */
  --am-accent: #2563eb;
  --am-accent-rgb: 37, 99, 235;
  --am-accent-active: #1d4ed8;
  --am-soft: rgba(37, 99, 235, 0.10);
  /* Green primary (site modal standard) */
  --px-green: #3b82f6;
  --px-green-hover: #2563eb;
  /* Recolor every var(--primary) reference inside the proxy view to the
     inviter blue in one place (table, toolbar, pagination, chips, status). */
  --primary: #2563eb;
  --primary-soft: #e8effc;
  /* Legacy aliases kept for any remaining px-* references */
  --px-grad-1: #1e293b;
  --px-grad-2: #334155;
  --px-grad-3: #475569;
  --px-accent: #2563eb;
  --px-accent-rgb: 37, 99, 235;
}







/* Пустое состояние прокси рендерится внутрь tbody общим appTableEmptyState. */

/* Pool detail */



.px-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
/* display: flex выше перебивает браузерное [hidden] { display: none }, поэтому
   спрятанное из JS поле оставалось на экране: так «Название базы» висело в окне
   «Добавить пользователей», хотя база уже открыта и имя у неё есть. */
.px-field[hidden] { display: none; }
.px-field span { color: var(--text-mute); }
.px-field input,
.px-field select,
.px-field textarea {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-app); color: var(--text);
  font-size: 13px; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.px-field input:focus,
.px-field select:focus,
.px-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.px-field textarea { resize: vertical; min-height: 64px; font-family: ui-monospace, Menlo, Consolas, monospace; }






/* Add proxies modal */

.btn--danger {
  background: transparent;
  color: #b42525;
  border: 0;
  box-shadow: none;
}
.btn--danger:hover { background: rgba(239, 68, 68, .08); }


/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* в•ђв•ђв•ђ  Task Manager: плитки и пилюли типов удалены (таблица .app-table) в•ђв•ђв•ђ */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* ═══  Proxy v2 (без пулов): плоский список + статус         ═══ */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.px-table--flat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.px-flat__head, .px-flat__row {
  display: grid;
  grid-template-columns: 32px 70px 60px minmax(140px, 1.4fr) 80px minmax(140px, 1.4fr) minmax(140px, 1.4fr) 110px minmax(120px, 1fr) 130px 90px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13px;
}
.px-flat__row.is-sel-row { background: rgba(37, 99, 235, 0.10); }
.px-flat__row.is-sel-row:hover { background: rgba(37, 99, 235, 0.16); }
.px-flat__check-cell {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.px-flat__check-cell input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; margin: 0;
  accent-color: var(--primary, #2563eb);
  vertical-align: middle;
}
/* Звёздочка здесь была лишней: user-select наследуется, поэтому запрет на
   самой таблице и так доходит до всех ячеек. Универсальный селектор под
   классом <body> заставлял пересчитывать стиль каждому элементу таблицы. */
body.is-drag-selecting .px-table--flat {
  user-select: none !important;
}

/* Selection bar */
.px-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
}
.px-select-bar[hidden] { display: none; }
.px-select-bar .btn { padding: 6px 12px; font-size: 12.5px; }
.px-flat__head {
  background: var(--bg-row-hover);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-mute);
  font-weight: 600;
}
.px-flat__row {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  transition: none;
  cursor: pointer;
}
body.is-drag-selecting .px-flat__row,
body.is-proxy-bulk-selecting .px-flat__row {
  transition: none !important;
}
.px-flat__row:hover { background: var(--bg-row-hover); }

.px-flat__country {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 600;
}
.px-flat__country .fi { width: 18px; height: 13px; border-radius: 2px; }

.px-flat__check, .px-flat__copy {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all .12s;
}
.px-flat__check:hover, .px-flat__copy:hover {
  background: var(--bg-row-hover);
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}

/* Кнопки-иконки в строке прокси: одинаковые с боковым меню по тону */
.px-flat__actions { display: inline-flex; gap: 6px; align-items: center; }

.px-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  background: rgba(148, 163, 184, .18);
  color: #475569;
}
.px-status--checking { background: rgba(37, 99, 235, .14);  color: #2563eb; }
.px-status--ok       { background: rgba(43, 191, 122, .14);  color: #047857; }
.px-status--error    { background: rgba(244, 96, 114, .14);  color: #b42525; }
.px-status--unknown  { background: rgba(148, 163, 184, .18); color: #64748b; }
.px-status__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.px-status--checking .px-status__dot { animation: px-pulse 1s ease-in-out infinite; }
@keyframes px-pulse { 50% { opacity: .35; } }



/* Add proxies modal v2 — dropzone */
.px-dropzone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  background: var(--bg-app);
  font-size: 12.5px;
  color: var(--text-mute);
  cursor: pointer;
  transition: all .12s;
}
.px-dropzone:hover, .px-dropzone.is-drag {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(37, 99, 235, .04);
}
.px-dropzone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.px-dropzone__ico { font-size: 18px; margin-right: 6px; }

/* ============================================================
   Настройки (#view-settings)
   ------------------------------------------------------------
   Раскладка раздела уехала в ui_tweaks.css, блок .stgp-page: экран
   переведён на канон модулей (белые карточки r16, Google Sans, акцент
   #0b57d0, пилюли 40px/r20, поля r8/40px). Здесь стояли .set-hero,
   .set-tab, .set-card и своя палитра --set-accent: hero-градиент и
   карточки с тенью остались от старого языка интерфейса и держали
   раздел единственным непохожим экраном программы.
   ============================================================ */

/* ============================================================
   Account manager: proxy cell + open button + username
   ============================================================ */
/* Ячейка «Прокси» — ряд «значок связи + сам прокси + карандаш»; весь её вид
   описан в ui_tweaks.css (блок «Ячейка „Прокси“»), здесь остаётся только
   базовая раскладка. Плашки, точки-индикатора и мигающей точки больше нет:
   состояние несёт тон значка связи, а ход проверки — кольцо на его месте. */
.am-proxy {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap; overflow: hidden;
  vertical-align: middle;
}
.am-proxy__line {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-proxy--off { color: var(--text-mute, #64748b); }

.am-username {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #4338ca;
  background: rgba(37, 99, 235, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}

@keyframes am-open-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Proxy: username column already present, polish
   ============================================================ */

/* ============================================================
   Userbase: source label icons + visible action buttons
   ============================================================ */

/* Make the action footer always visible, not just on hover */
.ub-card__actions { opacity: 1; }
.ub-card__action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  font-weight: 500;
  color: var(--text);
}
.ub-card__action-ico {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.ub-card__action--primary {
  background: var(--ub-card-color, var(--ub-accent, #2563eb));
  color: #fff;
  font-weight: 600;
}
.ub-card__action--primary:hover {
  filter: brightness(1.08);
  background: var(--ub-card-color, var(--ub-accent, #2563eb));
  color: #fff;
}

/* ============================================================
   Add proxies modal — Nimbus standard (DESIGN.md §7)
   White form panel, 18px title, SVG close in 38px circle,
   blue input focus ring, green primary footer.
   ============================================================ */
/* ── Proxy add + Userbase create: shared form modal layout ── */
.newbase-modal .modal__panel--form {
  width: 560px;
  max-width: calc(100vw - 28px);
  max-height: 86vh;
  overflow: hidden;
}
.newbase-modal .modal__head {
  min-height: 64px;
  padding: 10px 16px 10px 24px;
  border-bottom: 1px solid var(--border);
}
.newbase-modal .modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}
.newbase-modal .edit-profile__nav {
  width: 38px; height: 38px;
  border-radius: 50%;
  color: #8b8f97;
  transition: background .12s, color .12s;
}
.newbase-modal .edit-profile__nav:hover {
  background: #f3f4f6;
  color: #374151;
}
.newbase-modal .modal__body {
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.newbase-modal .modal__foot {
  padding: 12px 18px;
  gap: 8px;
}

/* Field stacks. :not([hidden]) обязателен: display у правила с id весит больше
   общего .px-field[hidden], и спрятанное из JS поле («Название базы» в режиме
   «дописать в открытую базу») оставалось бы на экране. */
.newbase-modal .px-field:not([hidden]),
#am-proxy-modal .px-field:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.newbase-modal .px-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.newbase-modal .px-field__hint {
  margin-top: -4px;
  font-size: 12px;
  color: var(--text-light);
}
.newbase-modal .px-field__meta {
  font-size: 12px;
  color: var(--text-mute);
}
.newbase-modal .px-field__meta b { color: var(--text); font-weight: 600; }

/* Окно «Прокси аккаунта» стоит в этих списках наравне с «Добавить прокси»:
   поля у них одни и те же (px-input, px-select), и без него у селекта не
   было бы даже своей стрелки — системную мы гасим. */
.newbase-modal .px-textarea,
.newbase-modal .px-select,
.newbase-modal .px-input,
#am-proxy-modal .px-textarea,
#am-proxy-modal .px-select,
#am-proxy-modal .px-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
}
.newbase-modal .px-select,
#am-proxy-modal .px-select {
  height: 38px;
  padding: 0 38px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23889099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.newbase-modal .px-input,
#am-proxy-modal .px-input {
  height: 38px;
  padding: 0 12px;
}
.newbase-modal .px-textarea {
  min-height: 150px;
  padding: 10px 12px;
  resize: vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
.newbase-modal .px-textarea:focus,
.newbase-modal .px-select:focus,
.newbase-modal .px-input:focus,
#am-proxy-modal .px-textarea:focus,
#am-proxy-modal .px-select:focus,
#am-proxy-modal .px-input:focus {
  outline: none;
  border-color: #78b7ff;
  box-shadow: 0 0 0 3px rgba(77, 157, 255, .22);
}

/* Drop zone */
.newbase-modal .px-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg-app);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}
.newbase-modal .px-dropzone:hover,
.newbase-modal .px-dropzone.is-drag {
  border-color: #2563eb;
  background: rgba(37, 99, 235, .06);
}
.newbase-modal .px-dropzone__ico {
  grid-column: 1;
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(37, 99, 235, .1);
  color: #2563eb;
}
.newbase-modal .px-dropzone__ico svg { width: 20px; height: 20px; display: block; }
.newbase-modal .px-dropzone__txt {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 12.5px;
  color: var(--text-mute);
  text-align: center;
}
.newbase-modal .px-dropzone__txt b { color: var(--text); font-weight: 600; font-size: 13px; }
.newbase-modal .px-dropzone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}


/* Footer — green confirm (DESIGN.md §7.8) */
.newbase-modal .modal__foot .btn--primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}
.newbase-modal .modal__foot .btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  filter: none;
}

/* ============================================================
   AM: clickable username & proxy buttons, avatar img
   ============================================================ */
button.am-username,
button.am-phone,
button.am-proxy {
  font-family: inherit;
  cursor: pointer;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}
button.am-username {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #4338ca;
  background: rgba(37, 99, 235, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  transition: all .12s;
}

/* Канон чипа роли переехал целиком в css/components/role-tag.css (17.09.2026):
   чип носит общий узел двух мест — колонки «Роли» и окна «Роли аккаунта», — а
   вместе с переездом снята палитра из пяти тонов. Правило `.role-tag--more`
   уехало туда же и стоит там сразу под базовым: вес у них равный, и серым
   счётчик спрятанных держит только порядок в файле. */
button.am-username:hover {
  background: rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}
button.am-phone {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  padding: 0;
}
button.am-phone:hover {
  color: var(--primary);
}
button.am-proxy:hover {
  filter: brightness(0.97);
}
button.am-proxy {
  cursor: pointer;
}
.avatar.avatar--img {
  padding: 0;
  overflow: hidden;
  object-fit: cover;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   Userbase: unified action buttons (no per-card color override)
   ============================================================ */
.ub-card__actions {
  opacity: 1;
  gap: 6px;
}
.ub-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border, #e6e9ef);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
}
.ub-card__action:hover {
  background: var(--bg-hover, #f4f6fb);
  border-color: var(--text-mute, #94a3b8);
  color: var(--text);
}
.ub-card__action-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ub-card__action--primary {
  background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px -2px rgba(37, 99, 235, 0.45);
}
.ub-card__action--primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
  filter: brightness(1.05);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   Userbase v3 — uniform muted cards + thematic toolbar icons
   Карточки в одной (teal) гамме — как hero модуля «База».
   ============================================================ */

/* Cards: единый стиль, без светофора сверху. Цвет из hero (teal). */
.view-userbase .ub-card {
  border: 1px solid var(--border, #e6e9ef) !important;
  border-top: 1px solid var(--border, #e6e9ef) !important;
  background: var(--card, #fff);
  transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.view-userbase .ub-card:hover {
  /* Без translateY — предотвращаем визуальный сдвиг соседних карточек. */
  border-color: rgba(var(--ub-accent-rgb), 0.45) !important;
  box-shadow: 0 10px 26px -18px rgba(var(--ub-accent-rgb), 0.45);
}


/* Primary action — мягкий teal под hero */
.view-userbase .ub-card__action--primary {
  background: rgba(var(--ub-accent-rgb), 0.10) !important;
  color: var(--ub-accent) !important;
  border: 1px solid rgba(var(--ub-accent-rgb), 0.30) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.view-userbase .ub-card__action--primary:hover {
  background: rgba(var(--ub-accent-rgb), 0.18) !important;
  border-color: rgba(var(--ub-accent-rgb), 0.50) !important;
  filter: none !important;
  transform: none !important;
}


/* Тёмная тема */
body.theme-dark .view-userbase .ub-card,
[data-theme="dark"] .view-userbase .ub-card {
  background: var(--card);
  border-color: rgba(255,255,255,.08) !important;
}
body.theme-dark .view-userbase .ub-card__action,
[data-theme="dark"] .view-userbase .ub-card__action {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  color: var(--text);
}
body.theme-dark .view-userbase .ub-card__action--primary,
[data-theme="dark"] .view-userbase .ub-card__action--primary {
  background: rgba(var(--ub-accent-rgb), 0.18) !important;
  color: #93c5fd !important;
  border-color: rgba(var(--ub-accent-rgb), 0.45) !important;
}

/* ============================================================
   Account Manager v3 — SVG-иконки в стиле сайдбара
   ============================================================ */




.sel-bar .quick-act { display: inline-flex; align-items: center; justify-content: center; }
.sel-bar .quick-act svg { width: 18px; height: 18px; display: block; }


/* В таблице аккаунтов таск-пиллы нейтральны (единственный цвет — статус).
   Активность задачи показываем «дыханием», без цветной заливки. */
@keyframes tp-breathe-neutral {
  0%, 100% { opacity: 0.92; box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.14); }
  50%      { opacity: 1;    box-shadow: 0 0 0 6px rgba(100, 116, 139, 0.05); }
}

/* ======================================================
   Inviter / Parser SVG icons + Inviter chat input pills
   ====================================================== */

.view-inviter .inv-seg__ico svg,
.view-inviter .inv-hero__reports svg,
.view-inviter .inv-source__alt svg,
.view-inviter .prs-advanced summary svg,
.view-inviter .inv-run-settings__head svg,
.view-parser  .prs-run-settings__head svg,
.view-parser  .prs-hero__reports svg,
.view-parser  .prs-advanced summary svg,
.view-parser  .prs-cta__icon svg { width: 16px; height: 16px; vertical-align: middle; }

/* Chat list: input + pills replacing inv-source__list button */
.inv-chat-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 44px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 226px;
  padding: 6px;
  overflow-y: auto;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 10px;
  box-shadow: 0 14px 32px -20px rgba(20, 30, 60, 0.40);
}
.inv-chat-suggestions[hidden] { display: none !important; }
.inv-chat-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.inv-chat-suggestion:hover,
.inv-chat-suggestion.is-active {
  background: rgba(var(--inv-accent-rgb), 0.10);
}
.inv-chat-suggestion__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.inv-chat-suggestion__admin {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
  color: #4f46e5;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
}
.inv-chat-suggestion__remove {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s;
}
.inv-chat-suggestion__remove .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}
.inv-chat-suggestion__remove:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
}

/* ─── Клонер чатов ──────────────────────────────────────────── */
.view-cloner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 28px 110px;
  /* Синхронизировано с Inviter (slate hero + blue accent) */
  --inv-grad-1: #1e293b;
  --inv-grad-2: #334155;
  --inv-grad-3: #475569;
  --inv-accent: #2563eb;
  --inv-accent-rgb: 37, 99, 235;
  --accent: var(--inv-accent);
  --cln-accent: var(--inv-accent);
  --cln-accent-rgb: var(--inv-accent-rgb);
}

/* Фиксируем размеры всех декоративных SVG в модуле, иначе браузер
   рисует их 300×150 (дефолт replaced-элемента без width/height). */
.view-cloner .prs-hero__reports svg,
.view-cloner .prs-advanced summary svg,
.view-cloner .cln-list-btn svg { width: 16px; height: 16px; vertical-align: middle; }

/* ── Карточки «Источники / Цель» (по аналогии с инвайтером) ── */
/* Чекер номеров своих правил раскладки больше не держит: экран переехал на
   общий канон страницы запуска (.srch-page в ui_tweaks.css) — там и колонка
   с шагом 16px, и поверхности секций, и полоса запуска. */

/* Окон «Чаты-источники» и «Конечный чат» у клонера больше нет: оба чата
   набирают полем прямо в карточке страницы запуска. Класс списка чатов
   остался — на нём держится окно «Список чатов» инвайтера. */



/* ── Поиск: смета прогона ──
   Число запросов известно до старта, и пользователь должен видеть его там же,
   где крутит настройки: блок живёт прямо под сеткой параметров. */

/* ── Инвайтер: вёрстка в стиле «Рассылка по ЛС» ──
   Контент = cln-io/cln-tabs (пилл-вкладки), настройки = prs-advanced/cln-advanced
   с cln-adv-grid (столбик, подпись сверху). Акцент-blue задаём явно. */
#view-inviter,
#view-admin-inviter { --cln-accent: #2563eb; --cln-accent-rgb: 37, 99, 235; }
#view-inviter .prs-advanced summary > span:first-child,
#view-admin-inviter .prs-advanced summary > span:first-child {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
/* Подписи настроек не выделяются и не фокусируют инпут при клике по пустому месту */
#view-inviter .inv-field__label,
#view-admin-inviter .inv-field__label { user-select: none; }
/* Тултипы «?» прижимаем к левому краю иконки, чтобы они не уезжали под сайдбар.
   translateX оставляем: в нём приезжает поправка --tip-dx, а с transform: none
   прижатие к границам содержимого здесь молчало. */
#view-inviter .cln-adv-grid .inv-help[data-tooltip]::after,
#view-admin-inviter .cln-adv-grid .inv-help[data-tooltip]::after { left: 0; right: auto; transform: translateX(var(--tip-dx, 0px)); }
#view-inviter .cln-adv-grid .inv-help[data-tooltip]::before,
#view-admin-inviter .cln-adv-grid .inv-help[data-tooltip]::before { left: 8px; right: auto; transform: none; }
/* Ширину одиночного поля-лимита (.inv-limit-single) правило под двумя id
   задать не могло: канон страницы запуска перебивает её через !important
   для всех .cln-range .inv-input--sm — там же и живёт единственная цифра. */
/* Скругления кнопки выбора аккаунтов здесь больше нет ни у одного модуля:
   она живёт в карточке-вводе и подчиняется канону страницы запуска —
   пилюля 40px/r20. Селектор с двумя id перебивал канон даже через
   !important, отчего кнопки инвайтера и инвайтера админами оставались
   прямоугольными, когда у парсера и поиска уже были пилюли. */
#view-inviter .inv-plan-summary,
#view-admin-inviter .inv-plan-summary {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--cln-accent-rgb), 0.18);
  background: rgba(var(--cln-accent-rgb), 0.07);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.inv-target-field {
  flex: 1 1 360px;
  min-width: 260px;
  max-width: 400px;
  gap: 7px;
}
.inv-target-input-wrap {
  position: relative;
  width: 320px;
}
.inv-target-input-wrap .inv-chat-suggestions {
  right: 0;
  max-height: 260px;
}
.inv-target-input {
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  padding-left: 42px;
  padding-right: 42px;
}
.inv-target-input-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute, #6b7494);
  pointer-events: none;
  transition: color 0.16s;
}
.inv-target-input-icon svg {
  width: 17px;
  height: 17px;
}
.inv-target-input-wrap:focus-within .inv-target-input-icon {
  color: var(--cln-accent, #2563eb);
}
/* Поле ручного ввода на странице запуска одно на оба модуля и на все свои
   вопросы (целевая группа, главный админ), поэтому вес пишем на его класс,
   а не на адреса конкретных полей: набранный ответ 500, подсказка 400. */
#view-inviter .inv-target-input,
#view-admin-inviter .inv-target-input {
  font-weight: 500;
}
#view-inviter .inv-target-input::placeholder,
#view-admin-inviter .inv-target-input::placeholder {
  font-weight: 400;
}
#view-inviter .inv-target-input:focus::placeholder,
#view-admin-inviter .inv-target-input:focus::placeholder {
  color: transparent;
  opacity: 0;
}
#view-inviter .inv-target-input:focus,
#view-inviter .inv-target-input:focus-visible,
#view-admin-inviter .inv-target-input:focus,
#view-admin-inviter .inv-target-input:focus-visible {
  border-color: var(--inv-accent);
  box-shadow: 0 0 0 3px rgba(var(--inv-accent-rgb), 0.16);
  outline: none;
}
#view-inviter .inv-target-input-wrap .inv-target-help,
#view-admin-inviter .inv-target-input-wrap .inv-target-help {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
  border: 1px solid var(--border-strong, #d3dae6);
  padding: 0;
}
#view-inviter .inv-target-input-wrap .inv-target-help[data-tooltip]::after,
#view-admin-inviter .inv-target-input-wrap .inv-target-help[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: none;
  max-width: min(320px, calc(100vw - 32px));
}
#view-inviter .inv-target-input-wrap .inv-target-help[data-tooltip]::before,
#view-admin-inviter .inv-target-input-wrap .inv-target-help[data-tooltip]::before {
  left: auto;
  right: 8px;
  transform: none;
}
.inv-target-field.is-on .inv-target-input {
  border-color: var(--cln-accent, #2563eb);
  background: var(--card, #fff);
}
@media (max-width: 640px) {
  .inv-target-field { width: 100%; max-width: none; }
}

/* ── Рассылка: пилл «Получатели» с меню (из базы / вручную) ── */
.bc-recipients { position: relative; display: inline-flex; }
.bc-recipients__menu {
  position: absolute; top: calc(100% + var(--pop-gap, 4px)); left: 0; z-index: 40;
  box-sizing: border-box;
  min-width: max(270px, 100%); padding: var(--pop-pad, 6px);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--pop-bg, #ffffff);
  border: 1px solid var(--pop-border-color, #dadce0);
  border-radius: var(--pop-radius, 8px);
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18));
}
/* [hidden] должен реально скрывать меню: правило display:flex выше
   перебивает UA-стиль [hidden]{display:none}. */
.bc-recipients__menu[hidden] { display: none; }
.bc-recipients__item {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; box-sizing: border-box;
  min-height: var(--pop-item-h, 32px);
  padding: var(--pop-item-pad, 6px 8px);
  border: none; border-radius: var(--pop-item-radius, 6px); background: transparent;
  text-align: left; cursor: pointer; color: var(--pop-text, #1f1f1f);
  font-size: var(--pop-font-size, 13px);
  transition: background 0.14s ease;
}
.bc-recipients__item:hover { background: var(--pop-item-hover, #f1f3f4); }
.bc-recipients__item svg {
  width: 18px; height: 18px; margin-top: 1px;
  color: var(--cln-accent, #2563eb); flex: none;
}
.bc-recipients__item-text { display: flex; flex-direction: column; gap: 2px; }
.bc-recipients__item-text b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.bc-recipients__item-text small { font-size: 11.5px; color: var(--text-mute); line-height: 1.3; }
@media (max-width: 640px) {
  .bc-recipients { display: flex; }
  .bc-recipients__menu { left: 0; right: 0; min-width: 0; }
}


/* Строки ввода с «+» и пилл чатов у клонера нет: источник и цель — по одной
   ссылке в поле карточки, добавлять и убирать из списка нечего. */

/* ── Диапазоны задержек ── */
.cln-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.cln-range__sep { color: var(--text-mute); font-weight: 600; padding: 0 2px; }
.cln-range__suffix { color: var(--text-mute); font-size: 12px; padding-left: 4px; }
.cln-range .inv-input--sm { width: 62px; }

/* ── Доп. опции (details/summary) ── */
.cln-advanced { background: var(--card-bg, #fff); border: 1px solid var(--border, #e6e9ef); border-radius: 14px; padding: 4px 16px; margin-bottom: 0; }
[data-theme="dark"] .cln-advanced { background: var(--card-bg, #1a1d24); }
.cln-advanced > summary { padding: 14px 4px; }
.cln-advanced > summary:hover .prs-advanced__chev { opacity: 0.9; }

/* Все настройки клонера — ровно в столбик, одинаковые отступы */
.cln-adv-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 4px 14px;
}
.cln-adv-grid .inv-field,
.cln-adv-grid .inv-field--row {
  gap: 10px;
  max-width: none;
  width: 100%;
}
.cln-adv-grid .inv-field[hidden] { display: none; }
.cln-adv-grid .prs-segmented { max-width: 320px; }
.cln-adv-grid .prs-stepper { width: 150px; }
/* Иконку «?» в строке настройки прижимаем к подписи */
.cln-adv-grid .inv-help { margin-left: 2px; }
.cln-adv-grid .inv-field__label { min-height: 18px; }

.cln-list-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #e6e9ef);
  background: var(--bg-app, #f4f6fa);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.cln-list-btn:hover {
  border-color: var(--cln-accent);
  background: rgba(var(--cln-accent-rgb), 0.10);
  color: var(--cln-accent);
}
.cln-list-btn b {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--cln-accent-rgb), 0.18);
  color: var(--cln-accent);
  font-size: 11px;
  font-weight: 700;
}

/* CTA accent (кнопка «Запустить задачу») */
.view-cloner .prs-cta__start {
  background: var(--cln-accent);
  border-color: var(--cln-accent);
}
.view-cloner .prs-cta__start:hover:not(:disabled) {
  background: #6d28d9;
  border-color: #6d28d9;
}

/* ============================================================
   Dark theme refinement v2 (Apple-like depth and contrast)
   ============================================================ */
body.theme-dark {
  --bg-app:        #0f1115;
  --bg-card:       #171b22;
  --card:          #171b22;
  --bg-sidebar:    #12161d;
  --bg-sidebar-2:  #1c2430;
  --bg-hover:      #232c3a;
  --bg-row-hover:  #1d2531;
  --border:        #2c3545;
  --border-strong: #3d4b61;
  --text:          #e8edf6;
  --text-mute:     #a7b1c4;
  --text-light:    #7f8ba1;
  --primary:       #7db3ff;
  --primary-soft:  rgba(125, 179, 255, 0.22);
  --shadow:        0 20px 40px rgba(0, 0, 0, 0.38);
}

body.theme-dark .sidebar {
  background: linear-gradient(180deg, #10141b 0%, #121720 100%);
  border-right-color: #253042;
}
body.theme-dark .nav-item {
  color: #c7d0df;
  border: 1px solid transparent;
}
body.theme-dark .nav-item:hover:not([disabled]),
body.theme-dark .nav-item.is-active {
  background: linear-gradient(180deg, #1c2532, #1a2230);
  border: 1px solid rgba(125, 179, 255, 0.22);
  color: #eff4ff;
}

body.theme-dark .card,
body.theme-dark .stat,
body.theme-dark .am-stat,
body.theme-dark .px-card,
body.theme-dark .am-bar,
body.theme-dark .modal__panel,
body.theme-dark .prs-source,
body.theme-dark .inv-source,
body.theme-dark .prs-card,
body.theme-dark .prs-pills-grid,
body.theme-dark .prs-advanced,
body.theme-dark .inv-section,
body.theme-dark .sel-bar,
body.theme-dark .prs-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) , var(--bg-card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Карточка задачи без внешней обводки — и в тёмной теме тоже. */
body.theme-dark .task-detail-card {
  border: none;
  box-shadow: none;
}

/* Синий акцент «Продолжить» — после общих правил .tm-card__act тёмной темы:
   иначе они возвращали кнопке нейтральный цвет глифа. */
body.theme-dark .tm-card__act--continue {
  color: #8ab4f8;
}
body.theme-dark .tm-card__act--continue:hover {
  background: rgba(138, 180, 248, .14);
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .search input,
body.theme-dark .inv-input,
body.theme-dark .inv-source__input {
  background: #121721;
  color: var(--text);
  border-color: var(--border);
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark .inv-input:focus,
body.theme-dark .inv-source__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(125, 179, 255, 0.18);
}

body.theme-dark .inv-chat-suggestions {
  background: #121721;
  border-color: var(--border);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.65);
}
body.theme-dark .inv-chat-suggestion:hover,
body.theme-dark .inv-chat-suggestion.is-active {
  background: rgba(125, 179, 255, 0.12);
}
body.theme-dark .inv-chat-suggestion__admin {
  background: rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
}
body.theme-dark .inv-chat-suggestion__remove:hover {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

body.theme-dark .btn-ghost,
body.theme-dark .icon-btn,
body.theme-dark .quick-act,
body.theme-dark .inv-source__add-btn,
body.theme-dark .cln-list-btn {
  background: #171e29;
  border-color: var(--border);
  color: var(--text);
}
body.theme-dark .btn-ghost:hover,
body.theme-dark .icon-btn:hover,
body.theme-dark .quick-act:hover,
body.theme-dark .inv-source__add-btn:hover,
body.theme-dark .cln-list-btn:hover {
  background: #202a38;
  border-color: var(--border-strong);
}

body.theme-dark .switch__slider {
  background: #293244;
}
body.theme-dark .switch__slider::before {
  background: #f4f7ff;
}
body.theme-dark .switch input:checked + .switch__slider {
  background: var(--primary);
}

body.theme-dark .prs-segmented,
body.theme-dark .inv-segmented,
body.theme-dark .prs-stepper,
body.theme-dark .prs-days-custom,
body.theme-dark .inv-base-search {
  background: #121722;
  border-color: var(--border);
}
body.theme-dark .prs-segmented button,
body.theme-dark .inv-segmented button {
  color: var(--text-mute);
}
body.theme-dark .prs-segmented button.is-active,
body.theme-dark .inv-segmented button.is-active {
  background: #1d2634;
  color: #edf3ff;
}



body.theme-dark .prs-cta__start,
body.theme-dark .view-cloner .prs-cta__start {
  background: linear-gradient(120deg, #4f83ff, #66a9ff);
  border-color: #4f83ff;
  box-shadow: 0 12px 24px -12px rgba(79, 131, 255, 0.65);
}
body.theme-dark .prs-cta__start:hover:not([disabled]),
body.theme-dark .view-cloner .prs-cta__start:hover:not([disabled]) {
  background: linear-gradient(120deg, #5a8eff, #73b2ff);
  border-color: #5a8eff;
}

/* ── Sortable accounts table headers ─────────────────────────── */
.acc-table thead th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
.acc-table thead th[data-sort-key]:hover { color: var(--text); }
.acc-table thead th .sort {
  font-size: 10px;
  opacity: 0.55;
  margin-left: 2px;
  display: inline-block;
  transition: opacity .15s, transform .15s;
}
.acc-table thead th.is-sorted .sort { opacity: 1; color: #2563eb; }
.acc-table thead th.is-sorted-asc  .sort::before { content: "▲"; }
.acc-table thead th.is-sorted-desc .sort::before { content: "▼"; }
.acc-table thead th.is-sorted .sort { font-size: 9px; }
.acc-table thead th.is-sorted .sort::after { content: ""; }
/* hide the default ↕ glyph when active */
.acc-table thead th.is-sorted-asc .sort,
.acc-table thead th.is-sorted-desc .sort { color: #2563eb; }
.acc-table thead th.is-sorted-asc  .sort { font-size: 0; }
.acc-table thead th.is-sorted-desc .sort { font-size: 0; }
.acc-table thead th.is-sorted-asc  .sort::before,
.acc-table thead th.is-sorted-desc .sort::before { font-size: 10px; }

/* ── Bind-proxy modal ───────────────────────────────────────── */
.modal__panel--bind-proxy {
  width: min(640px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border-radius: 10px;
  background: #ffffff; color: #2b2b2b;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}
/* Header chrome shared with «Изменить профиль»/«Конфиденциальность»/«Добавить»:
   grid-row с круглой кнопкой закрытия и 18px заголовком. */
.modal__panel--bind-proxy .modal__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 12px 8px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}
.modal__panel--bind-proxy .modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2b2b;
  text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal__panel--bind-proxy .edit-profile__nav { justify-self: end; }
.bind-proxy__body { padding: 16px 24px 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.bind-proxy__hint { color: var(--text-mute); margin: 0 0 12px; font-size: 13px; }
.bind-proxy__list {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; max-height: 50vh;
  padding: 4px 2px;
}
.bind-proxy__row {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 1.4fr);
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-row-hover);
}
.bind-proxy__name { font-weight: 600; font-size: 13px; }
.bind-proxy__sub  { color: var(--text-mute); font-size: 11.5px; }
.bind-proxy__select { width: 100%; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12.5px; }
.bind-proxy__count { font-size: 12.5px; color: var(--text-mute); flex: 1; }


/* ── Error pill in check task results ───────────────────────── */
.tf-err {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
}
.tf-err--proxy   { background: rgba(245, 158, 11, .14); color: #b45309; }
.tf-err--account { background: rgba(239, 68, 68, .12);  color: #b91c1c; }
body.theme-dark .tf-err--proxy   { color: #fbbf24; background: rgba(251, 191, 36, .14); }
body.theme-dark .tf-err--account { color: #fca5a5; background: rgba(239, 68, 68, .18); }

/* ── Modal restyle: «Действия», «База», «Импорт парсинга» ─── */

/* — общий ребранд иконок в .actions-list (SVG в стиле сайдбара) — */
.actions-list .ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  flex: none;
}
.actions-list .ico svg { width: 18px; height: 18px; display: block; }
.actions-list li {
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  transition: background .12s ease, color .12s ease;
}
.actions-list li:hover { background: var(--bg-hover); }
.actions-list li:hover .ico,
.actions-list li.is-active .ico { color: var(--accent, #2563eb); }
.actions-list__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* — голова actions-modal — */
.modal__panel--actions {
  width: 392px;
  max-width: min(94vw, 392px);
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.actions-modal__head {
  height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.actions-modal__head--root {
  grid-template-columns: minmax(0, 1fr) 42px;
  padding-left: 22px;
}
.actions-modal__nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b8f97;
  cursor: pointer;
  font: inherit;
}
.actions-modal__nav:first-child { justify-self: start; }
.actions-modal__nav:last-child { justify-self: end; }
.actions-modal__nav:hover {
  background: #f3f4f6;
  color: #374151;
}
.actions-modal__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
}

.modal__panel--actions .actions-list {
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 16px 0 18px;
}
.actions-list--telegram li {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  border-radius: 0;
  color: #111827;
}
.actions-list--telegram li:hover { background: #f5f8fb; }
.actions-list--telegram .ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b94a7;
}
.actions-list--telegram .actions-list__label {
  font-size: 14px;
  line-height: 1.3;
}

/* — поиск в base-modal: SVG-иконка вместо emoji — */
.inv-base-search__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text-mute);
  flex: none;
}
.inv-base-search__ico svg { display: block; }

/* — карточка сессии в импорт-модалке (SVG-папка слева) — */
.ub-session {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.ub-session__ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, .10);
  color: var(--ub-accent, #2563eb);
  flex: none;
}
.ub-session__ico svg { width: 16px; height: 16px; display: block; }
.ub-session:hover .ub-session__ico {
  background: rgba(37, 99, 235, .16);
}
.ub-session__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ub-session__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Modal restyle: form-panel ("Новая база" / "Импорт парсинга") ── */
.modal__panel--form {
  width: 520px;
  max-width: 94vw;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.modal__panel--form .modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal__panel--form .modal__title {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 16px; font-weight: 600;
  min-width: 0;
}
.modal__panel--form .modal__body {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal__panel--form .modal__body .inv-field { max-width: none; }
.modal__panel--form .modal__body .inv-textarea { min-height: 200px; }
.modal__panel--form .modal__hint { margin: 0; }
.modal__panel--form .modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}


/* Крестик закрытия — единый стиль */
.modal__panel--form .modal__head .icon-btn,
.modal__panel--list .modal__head .icon-btn {
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-mute);
}
.modal__panel--form .modal__head .icon-btn svg,
.modal__panel--list .modal__head .icon-btn svg { display: block; }

/* picker-empty: иконка-чип + заголовок + подпись */
.picker-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  color: var(--text-mute); font-size: 13px;
}
.picker-empty h4 {
  margin: 4px 0 0;
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
}
.picker-empty p { margin: 0; max-width: 36ch; line-height: 1.45; }
.picker-empty__art {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, .10);
  color: var(--accent, #2563eb);
}
.picker-empty__art svg { width: 26px; height: 26px; display: block; }
.picker-empty__art--err { background: rgba(239, 68, 68, .12); color: #b91c1c; }
@keyframes picker-empty-spin { to { transform: rotate(360deg); } }
.picker-empty__art--spin svg { animation: picker-empty-spin 1.4s linear infinite; transform-origin: 50% 50%; }/* ── Empty state «База пользователей» (вкладка) — SVG-арт ─── */
.ub-empty {
  padding: 60px 24px;
  text-align: center;
}

/* ── Пустое состояние внутри модалки выбора базы — SVG-арт ─ */
.inv-base-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 28px 18px;
  text-align: center;
  color: var(--text-mute);
}
.inv-base-empty__art {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, .10);
  color: var(--inv-accent, #2563eb);
}
.inv-base-empty__art svg { width: 28px; height: 28px; display: block; }
.inv-base-empty h4 {
  margin: 4px 0 0;
  font-size: 14px; font-weight: 600;
  color: var(--text);
}
.inv-base-empty p {
  margin: 0; max-width: 36ch;
  font-size: 12.5px; line-height: 1.45;
}
/* Атрибут [hidden] должен реально скрывать блок: правила выше задают
   display:flex, что перебивает UA-стиль [hidden]{display:none}. */
.inv-base-empty[hidden] { display: none !important; }

/* При открытой модалке блокируем скролл страницы;
  скролл внутри .modal__body остаётся доступным.
  Обрез по горизонтали — `clip`, а не `hidden`: см. комментарий у BODY в
  начале файла (иначе BODY становится мёртвым скроллпортом и ломает sticky). */
body.modal-open {
  overflow-y: visible;
  overflow-x: clip;
}





/* ── Окно вложений (#media-modal): подсказка и сетка плиток ─────
   Окно одно на все модули с сообщением, поэтому и класс общий. Раньше
   плитки звались .bc-media__*, хотя тем же кодом рисовалась и рассылка по
   группам. Оболочка окна (тулбар, сетка, пустое состояние) до сих пор носит
   префикс .pf-media__ — она общая с материалами «Заполнения аккаунтов». */
.media-pick__hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-mute);
}
.media-pick__hint:empty { display: none; }
.media-pick__hint b { font-weight: 600; color: var(--text, #1f2430); }
.media-pick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  min-height: 60px;
}
.media-pick__tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 10px;
  background: var(--bg-app, #f7f8fb);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s;
}
.media-pick__tile:hover { border-color: var(--inv-accent, #2563eb); }
.media-pick__tile img,
.media-pick__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-pick__tile-ico {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--inv-accent, #2563eb);
}
.media-pick__tile-ico svg { width: 28px; height: 28px; }
.media-pick__tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: #fff; font-size: 10.5px;
  padding: 14px 6px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-pick__tile-size {
  position: absolute;
  left: 6px;
  bottom: 24px;
  z-index: 1;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,.45);
  padding: 2px 6px;
  border-radius: 4px;
}
.media-pick__tile-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.media-pick__tile-del svg { width: 10px; height: 10px; }
.media-pick__tile:hover .media-pick__tile-del { opacity: 1; }
.media-pick__tile-del:hover { background: #ef4444; }
.media-pick__tile.is-checked {
  outline: 2px solid var(--inv-accent, #2563eb);
  outline-offset: -2px;
}

/* Окно «Добавление аккаунтов» вынесено в изолированный namespace
   #add-modal .addw* (см. конец ui_tweaks.css). Старые правила
   .modal__panel--add удалены — они больше ни к чему не относятся. */

/* ════════════════════════════════════════════════════════════════
   ПРЕСЕТ модального окна — `.modal__panel--std`
   Канонический стиль всех окон приложения (по образцу «Добавить
   аккаунты»). Новые/редактируемые окна вешают этот класс на
   .modal__panel и используют разметку head / body / foot.
   Кнопки — существующие .btn--ghost (отмена) и .btn--primary (CTA).
   ──────────────────────────────────────────────────────────────── */
.modal__panel--std {
  width: min(460px, 96vw);
  padding: 0;
  display: flex; flex-direction: column;
  max-height: 86vh;
}
.modal__panel--std .modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  flex: none;
}
.modal__panel--std .modal__title {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 16px; font-weight: 600; color: var(--text);
  min-width: 0;
}
.modal__panel--std .modal__head .icon-btn {
  width: 30px; height: 30px;
  padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-mute);
}
.modal__panel--std .modal__head .icon-btn:hover { background: var(--bg-hover); }
.modal__panel--std .modal__head .icon-btn svg { display: block; }
.modal__panel--std .modal__body {
  padding: 16px 18px;
  overflow: auto;
  flex: 1 1 auto;
}
.modal__panel--std .modal__hint { color: var(--text-mute); font-size: 12px; margin: 0 0 10px; }
.modal__panel--std .modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  flex: none;
}

/* ── «Добавить пароль» — Nimbus modal ───────────────────────── */
.modal__panel--password {
  width: 440px;
  max-width: calc(100vw - 28px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}
.modal__panel--password .modal__head {
  flex: 0 0 auto;
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 14px;
  border-bottom: 1px solid #e5e5e5;
  background: #ffffff;
}
.modal__panel--password .edit-profile__nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #8b8f97;
  transition: background .12s, color .12s;
}
.modal__panel--password .edit-profile__nav:hover {
  background: #f3f4f6;
  color: #374151;
}
.modal__panel--password .edit-profile__nav:first-child {
  justify-self: start;
}
.modal__panel--password .edit-profile__nav:last-child {
  justify-self: end;
}
.modal__panel--password .modal__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2b2b;
  text-align: center;
}
.modal__panel--password .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px 22px;
  background: #ffffff;
}
.modal__panel--password .modal__body .inv-field {
  max-width: none;
  gap: 6px;
}
.modal__panel--password .modal__body .inv-field__label {
  font-size: 14px;
  font-weight: 400;
  color: #2b2b2b;
}
.modal__panel--password .modal__body .inv-input {
  height: 38px;
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #ffffff;
  color: #2b2b2b;
}
.modal__panel--password .modal__body .inv-input:focus {
  border-color: #d9d9d9;
  box-shadow: none;
  outline: 0;
}
.modal__panel--password .modal__body .inv-input::placeholder {
  color: #9ca3af;
}
.modal__panel--password .modal__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #8b94a7;
}
.modal__panel--password .modal__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}
.modal__panel--password .modal__foot .btn--primary {
	  background: #3b82f6;
	  border-color: #3b82f6;
	  color: #fff;
	}
	.modal__panel--password .modal__foot .btn--primary:hover {
	  background: #2563eb;
	  border-color: #2563eb;
	}
/* ── Userbase create/import: межстрочный интервал у подсказки ──────── */
.ub-empty p,
.newbase-modal .modal__hint,
#ub-import-modal .modal__hint {
  line-height: 1.55;
}

/* ── Pick-bind modal: выбор прокси/аккаунта.
   Каркас окна (карточка, шапка, подвал) живёт в addw-блоке ui_tweaks.css —
   разметка окна переведена на `.addw` (см. #pick-bind-modal). Здесь остались
   только внутренние элементы списка: поиск, фильтры, строки. ── */
.pick-bind__search {
  position: relative;
  display: flex; align-items: center;
}
.pick-bind__search-ico {
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--text-mute); pointer-events: none;
}
.pick-bind__search input {
  width: 100%;
  padding: 9px 10px 9px 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-app);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pick-bind__search input:focus {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.pick-bind__filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.pick-bind__filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-mute);
}
.pick-bind__filter select {
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236b7591' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .12s;
}
.pick-bind__filter select:hover { border-color: var(--border-strong, var(--border)); }
.pick-bind__filter select:focus { border-color: var(--primary, #2563eb); outline: none; }
.pick-bind__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-mute);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s, color .12s;
}
.pick-bind__chip:hover { border-color: var(--primary, #2563eb); color: var(--text); }
.pick-bind__chip.is-active {
  background: var(--primary-soft, rgba(37, 99, 235,.10));
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}
.pick-bind__chip input { display: none; }
.pick-bind__count {
  margin-left: auto;
  font-size: 12px; color: var(--text-light, var(--text-mute));
}
.pick-bind__list {
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin: 0 -4px 0 0;
}
.pick-bind__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .04s;
  text-align: left;
  font: inherit; color: inherit;
  width: 100%;
}
.pick-bind__row:hover:not([disabled]) {
  border-color: var(--primary, #2563eb);
  background: var(--bg-row-hover, var(--bg-hover));
}
.pick-bind__row:active:not([disabled]) { transform: translateY(1px); }
.pick-bind__row[disabled] { opacity: .55; cursor: not-allowed; }
.pick-bind__row.is-current {
  border-color: var(--ub-accent, #2563eb);
  background: rgba(37, 99, 235, .08);
}
.pick-bind__row-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(37, 99, 235, .10);
  color: var(--primary, #2563eb);
  flex: none;
}
.pick-bind__row-ico svg { width: 16px; height: 16px; }
.pick-bind__row-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.pick-bind__row-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-bind__row-sub {
  font-size: 12px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-bind__row-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gray-bg, rgba(0, 0, 0, .04));
  color: var(--text-mute);
  white-space: nowrap;
  font-weight: 500;
}
.pick-bind__row-tag--ok { background: var(--green-bg, rgba(34, 197, 94, .12)); color: var(--green, #22c55e); }
.pick-bind__row-tag--bound { background: var(--primary-soft, rgba(37, 99, 235, .14)); color: var(--primary, #2563eb); }
.pick-bind__row-tag--warn { background: var(--orange-bg, rgba(238, 122, 58, .12)); color: var(--orange, #ee7a3a); }

/* ── Строка выбора прокси: подпись и значки ────────────────────────────
   Общий элемент двух окон — раскрытого списка поля в «Привязать прокси к
   аккаунтам» и строк окна «Выбрать прокси», поэтому правило написано на
   класс, а не на адрес окна.

   Значки лежат ПОВЕРХ строки, а не в её потоке: строка выбора — это
   кнопка, а кнопку в кнопку не вкладывают, и клик по значку не должен
   выбирать прокси. Место под них строка держит всегда (padding-right):
   иначе подпись прыгала бы при каждом наведении. */
.pxpick-row { position: relative; display: block; }
/* Значки не лежат в разметке строки, а рождаются под курсором
   (ensureProxyPickActions): списки прокси здесь в сотни строк. Отсюда и
   проявление кадром анимации, а не переходом — переходить не от чего. */
.pxpick-act {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 2px;
  animation: pxpick-act-in var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) both;
}
@keyframes pxpick-act-in { from { opacity: 0; } to { opacity: 1; } }
.pxpick-act__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pxpick-act__btn .material-symbols-outlined { font-size: 17px; line-height: 1; }
.pxpick-act__btn:hover { background: var(--bg-hover); color: var(--text); }
/* Ход проверки — кольцо на месте значка (.am-proxy__spin, тот же узел, что в
   колонке «Прокси» аккаунтов): значок проверки прокси в программе один, и
   ждёт он везде одинаково. Своего правила кольцу здесь не пишем — оно живёт
   на классе (канон «общий элемент — на класс»). Счётчиков строка не
   показывает, и сказать «идёт» больше нечем. */
.pxpick-act.is-busy .pxpick-act__btn--check { cursor: default; }
.pxpick-act.is-ok    .pxpick-act__btn--check { color: var(--green, #2bbf7a); }
.pxpick-act.is-error .pxpick-act__btn--check { color: var(--red, #e25555); }
/* Флаг страны стоит вплотную к её коду — они читаются одной меткой. */
.pxpick-code { font-weight: 600; }
.pick-bind__row-sub .fi,
.pick-select__label .fi { margin-right: 5px; }
/* Метка состояния стоит в конце строки, а значки ложатся ПОВЕРХ неё.
   Место под значки держит сама метка: пока они на строке, метка гаснет —
   ширина колонки остаётся её, и подпись не прыгает. Запаса справа строка
   больше не держит: он и уводил метку от края.

   Гасит метку не :hover, а присутствие значков — набор, держащий итог
   проверки, остаётся на строке и после того, как курсор ушёл. Погасшая
   метка не ловит курсор: иначе из-под значков вылезала бы её подсказка
   («Привязан к …»). */
.pxpick-row .pick-bind__row-tag {
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pxpick-row:has(.pxpick-act) .pick-bind__row-tag {
  opacity: 0;
  pointer-events: none;
}
/* Та же метка у строки РАСКРЫТОГО СПИСКА. Отдельным узлом её туда не
   положить: подпись строки списка — одна лента с многоточием, и метка
   внутри неё обрезалась бы вместе с логином и паролем. Поэтому слово едет
   на самой строке (data-pxpick-tag), а рисует его ::after — по тем же
   правилам, что и метку-элемент: место под значки, гаснет при их появлении. */
.pxpick-row[data-pxpick-tag]::after {
  content: attr(data-pxpick-tag);
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-bg, rgba(0, 0, 0, .04));
  color: var(--text-mute);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pxpick-row[data-pxpick-tag="Текущий"]::after {
  background: var(--primary-soft, rgba(37, 99, 235, .14));
  color: var(--primary, #2563eb);
}
.pxpick-row[data-pxpick-tag="занят"]::after {
  background: var(--orange-bg, rgba(238, 122, 58, .12));
  color: var(--orange, #ee7a3a);
}
.pxpick-row[data-pxpick-tag]:has(.pxpick-act)::after { opacity: 0; }
.pxpick-row:hover > .pick-bind__row:not([disabled]):not(.is-current) {
  border-color: var(--primary, #2563eb);
  background: var(--bg-row-hover, var(--bg-hover));
}
.pick-bind__spacer { flex: 1; }
.pick-bind__empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.5;
}

/* Тёмная тема — точечные коррекции pick-bind */
[data-theme="dark"] .pick-bind__row,
body.theme-dark .pick-bind__row {
  background: var(--bg-card);
}
[data-theme="dark"] .pick-bind__search input,
body.theme-dark .pick-bind__search input {
  background: var(--bg-app);
}
[data-theme="dark"] .pick-bind__row-tag,
body.theme-dark .pick-bind__row-tag {
  background: rgba(255, 255, 255, .06);
}



/* Блок «Чекер» (.view-chk, .chk-block, .chk-section, .chk-hint) убран:
   его единственный житель — «Снятие ограничений» — переехал на канон
   страницы запуска (.srch-page, см. ui_tweaks.css). */
.btn--sm {
  padding: 6px 12px;
  font-size: 12.5px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn--sm svg { width: 14px; height: 14px; }
/* Окна «Результаты проверки» (.modal__panel--check-results, .chr-*) больше
   нет: результат прогона смотрят в диспетчере задач по карточке задачи. */

/* ─── Окна материала шаблона ──────────────────────────────────
   Оболочка у обоих общая (addw, см. ui_tweaks.css) — здесь остаётся
   геометрия панели и сетка плиток медиа. */
/* Панель прокручивает содержимое внутри себя: списков в шаблоне бывает
   два, и окно не должно вырастать выше экрана. Отступы, шрифты и цвета
   держит общая оболочка окон страницы запуска (ui_tweaks.css). */
.modal__panel--pf-mat {
  display: flex; flex-direction: column; max-height: 86vh;
}
.modal__panel--pf-mat .modal__body {
  overflow: auto; flex: 1; min-height: 0;
}
.pf-mat__list textarea { width: 100%; }

/* ─── Native <select class="inv-input"> custom arrow (отступ от края) ─ */
select.inv-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236b7591' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 10px;
}


/* ─── pf-media (avatars/stories) modal ───────────────────── */
.modal__panel--pf-media {
  display: flex; flex-direction: column; max-height: 86vh;
}
.modal__panel--pf-media .modal__body {
  overflow: auto; flex: 1; min-height: 0;
}

.pf-media__toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pf-media__toolbar-spacer { flex: 1 1 auto; }
.pf-media__icon-btn {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-app); color: var(--text);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pf-media__icon-btn:hover { background: var(--surface-hover, rgba(255,255,255,.06)); }
.pf-media__icon-btn svg { width: 16px; height: 16px; }
.pf-media__icon-btn--danger {
  color: #f43f5e;
  border: 0;
  box-shadow: none;
}
.pf-media__icon-btn--danger:hover {
  background: rgba(244,63,94,.12);
  border: 0;
  box-shadow: none;
}
.pf-media__icon-btn-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #f43f5e; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px;
  text-align: center;
}
.pf-media__count { font-size: 12px; color: var(--text-mute); }
.pf-media__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  min-height: 80px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .pf-media__grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .pf-media__grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }
}
.pf-media__empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center; color: var(--text-mute);
  border: 1px dashed var(--border); border-radius: 10px;
  font-size: 13px;
}
.pf-media__tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-app);
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.pf-media__tile img,
.pf-media__tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pf-media__tile-audio {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, #2563eb);
}
.pf-media__tile-audio svg { width: 34%; height: 34%; }
.pf-media__tile-vid {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
}
.pf-media__tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: #fff; font-size: 10.5px;
  padding: 14px 6px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-media__tile-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  cursor: pointer; font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .12s, background .12s;
  box-shadow: none;
}
.pf-media__tile:hover .pf-media__tile-del { opacity: 1; }
.pf-media__tile-del:hover { background: #ef4444; }

/* Подвал с настройками прогона («убирать использованное», уникализация)
   из окна убран: это настройки задачи, и они стоят на экране запуска,
   в дополнительных настройках, — рядом с потоками и паузами. */

.pf-media__tile.is-checked {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}
.pf-media__tile-check {
  position: absolute; top: 6px; left: 6px;
  width: 20px; height: 20px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: rgba(0,0,0,.45);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s;
}
.pf-media__tile:hover .pf-media__tile-check,
.pf-media__tile.is-checked .pf-media__tile-check { opacity: 1; }
.pf-media__tile.is-checked .pf-media__tile-check {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
}
.pf-media__tile-check::after {
  content: ""; display: none;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pf-media__tile.is-checked .pf-media__tile-check::after { display: block; }

/* === UI patches: tasks date filter, delete btn, pf-media, pick-bind, proxy compact === */

/* ╭──────────────────────────────────────────────────────────╮ */
/* │  Sidebar v2 — light, denser, footer user card            │ */
/* ╰──────────────────────────────────────────────────────────╯ */
.sidebar.sidebar--v2 {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 12px 8px 8px;
  gap: 6px;
}
.sidebar.sidebar--v2 .sidebar__brand {
  padding: 6px 8px 12px;
  border-bottom-color: var(--border);
}
.sidebar.sidebar--v2 .sidebar__nav { gap: 16px; padding: 6px 4px 12px; }

.sidebar.sidebar--v2 .nav-section__title {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--text-light);
  font-weight: 700;
  padding: 12px 12px 8px;
  text-transform: uppercase;
}

.sidebar.sidebar--v2 .nav-item {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
}
.sidebar.sidebar--v2 .nav-item:hover:not([disabled]) {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.sidebar.sidebar--v2 .nav-item.is-active::before { display: none; }

.sidebar.sidebar--v2 .nav-item__icon {
  width: 22px; height: 22px;
  background: transparent;
  color: var(--text-mute);
  border-radius: 6px;
}
.sidebar.sidebar--v2 .nav-item__icon svg { width: 18px; height: 18px; }
.sidebar.sidebar--v2 .nav-item:hover .nav-item__icon {
  background: transparent;
  color: var(--text);
}
.sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  background: transparent;
  color: var(--primary);
}
/* Soften the colored tones in v2 sidebar to fit the design */
.sidebar.sidebar--v2 .nav-item__icon[data-tone] { background: transparent; }

.sidebar.sidebar--v2 .nav-item__badge {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1.2;
  min-width: 18px;
  text-align: center;
}

.sidebar.sidebar--v2 .nav-item--sub {
  color: var(--text-mute);
  font-size: 12.5px;
}
.sidebar.sidebar--v2 .nav-group__items {
  border-left-color: var(--border);
}



/* ╭──────────────────────────────────────────────────────────╮ */
/* │  Userbase v2 — list + detail screens (site palette)      │ */
/* ╰──────────────────────────────────────────────────────────╯ */
.view-userbase--v2 {
  --ub-grad-1: #1e293b;
  --ub-grad-2: #334155;
  --ub-grad-3: #475569;
  --ub-accent: var(--primary);
  --ub-accent-rgb: 37, 99, 235;
  /* Акцент чипов фильтра (#ub2-filter-chips) — как у .view-am / #am-filter-chips. */
  --am-accent: #2563eb;
  --am-accent-rgb: 37, 99, 235;
  --am-soft: rgba(37, 99, 235, 0.10);
  background: var(--bg-app);
  color: var(--text);
  padding: 22px 28px 96px;
  gap: 18px;
}
.view-userbase--v2 .ub-legacy-stubs { display: none !important; }

.ub2 { width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ub2[hidden] { display: none; }


/* ───── Toolbar ───── */
.ub2-search { position: relative; flex: 1 1 320px; max-width: 420px; }
.ub2-search input {
  width: 100%;
  padding: 9px 12px 9px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.ub2-search input:focus {
  border-color: #78b7ff;
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(77, 157, 255, 0.35);
  outline: none;
}


/* ───── Card / table ───── */
.ub2-name { font-weight: 600; color: var(--text); }
.ub2-source-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-app);
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.ub2-source-tag::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* Per-source color badges — distinguish bases at a glance */
.ub2-source-tag--parser    { background: #e9efff; border-color: #cdd9ff; color: #2f5fd0; }
.ub2-source-tag--manual    { background: #eef1f6; border-color: #dde2ec; color: #56627a; }
.ub2-source-tag--import    { background: #f1ecfe; border-color: #ddd1fa; color: #6d44c9; }
.ub2-source-tag--duplicate { background: #fef3df; border-color: #f7e0b0; color: #a96a12; }
.ub2-source-tag--checker   { background: #e4f8ee; border-color: #c3ecd6; color: #1c8a55; }
.ub2-count {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--text);
}
.ub2-mute { color: var(--text-mute); text-align: center; }

/* ───── Pagination ───── */
.ub2-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-app);
  border-top: 1px solid var(--border);
  gap: 12px;
}

/* ───── Страница базы (экран вместо модалки) ─────
   Раскладка повторяет детализацию задачи в диспетчере: шапка с путём,
   сетка сводки, вкладки и таблица с собственной прокруткой. */
.ub2--detail { position: relative; }
.ubd {
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: none;
}
.ubd.is-loading { opacity: .6; pointer-events: none; }

/* Строки опознания у экрана базы своей больше нет: путь и название размечены
   каноном .am-table-head (ui_tweaks.css) — тем же, что у аккаунтов, прокси и
   списков. Прежние .ubd__head / __head-main / __crumbs / __kind остались от
   модалки, ничего не размечали и были ловушкой: новая шапка с таким классом
   молча получила бы геометрию модалки вместо канона таблиц. */
/* Название и его инлайн-правка: пунктирный язык переименования держит общий
   блок «USERBASE MODULE - inline database name editing» в ui_tweaks.css —
   тот же, что у списка баз. Здесь только типографика и раскладка. */
.ubd__title-wrap { min-width: 0; }
.ubd__title {
  margin: 0;
  font-size: 23px; font-weight: 500; line-height: 32px;
  color: var(--text);
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ubd__name {
  display: none;
  max-width: 100%;
  color: var(--text);
  font: inherit;
  font-size: 18px; font-weight: 600;
}
.ubd__title-wrap.is-editing-name .ubd__name { display: block; }


/* Сводка (.ubd__meta), панель инструментов (.ubd__toolbar) и вкладки
   «Записи»/«Редактор» упразднены: база открывается сразу полноэкранной
   таблицей, вся работа с записями идёт в её gmail-баре, а сводка по базе
   переехала в «Подробные сведения» служебного футера.

   Оболочку таблицы (#ubd-records-table) — рельс первой колонки, чекбокс,
   Оболочку таблицы (#pbd-records-table) — рельс первой колонки, чекбокс,
   ховер строки, футер — раздают общие контракты .app-table / TABLE SKELETON
   / LEAD RAIL в ui_tweaks.css. Здесь остаются части ячеек. */
/* Вес записи — 400: колонка держит идентификатор, а не имя строки
   (см. исключение для #ubd-records-table в каноне типографики строк). */
.ubd-rec { font-weight: 400; }
.ubd-rec__num { color: var(--text-light); font-variant-numeric: tabular-nums; }
.ubd-mute { color: var(--text-mute); }

/* Тип и статус записи — обычный текст ячейки, как «Статус» в аккаунтах и
   «Источник» в списке баз: цветных пилюль эти таблицы не носят. Пустое
   значение («Свободен», «—») уходит в приглушённый тон. */
.ubd-kind { color: var(--text); }
.ubd-status { color: var(--text); }
.ubd-status--none { color: var(--text-light); }

/* Кнопок в строке нет: удаление и копирование — чекбоксы строк + кнопки
   gmail-бара (канон). Пагинация живёт в баре (.picker-pagination), размер
   страницы — в футере (.picker-pagesize). */

/* Редактор-вкладка упразднена: буфер записей (#ub-detail-textarea) и
   заметка живут скрытыми служебными полями — правит их таблица, а на диск
   пишет «Сохранить». Своей вёрстки им больше не нужно. */

/* Название базы в строке списка — кнопка «открыть базу»: ни рамки, ни
   подчёркивания. Переименование живёт в шапке открытой базы
   (registerDetailNameRename), в таблице редактора нет. */
.ub2-name-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 0;
  cursor: pointer;
  text-decoration: none;
}
.ub2-name-edit:hover { border-bottom-color: transparent; text-decoration: none; }

@media (max-width: 720px) {
  .view-userbase--v2 { padding: 16px 14px 80px; }
  .ubd { padding: 14px; }
}

/* ═══ Proxy Stitch reference UI (Telegram Black) ═══ */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

body.is-proxy-screen {
  --proxy-bg: #f8f9fa;
  --proxy-surface: #ffffff;
  --proxy-surface-low: #f3f4f5;
  --proxy-surface-line: #e7e8e9;
  --proxy-outline: #c7c4d7;
  --proxy-text: #191c1d;
  --proxy-muted: #464554;
  --proxy-subtle: #767586;
  --proxy-primary: #2563eb;
  --proxy-primary-strong: #4f46e5;
  --proxy-ok: #10b981;
  --proxy-error: #ef4444;
  background: var(--proxy-bg);
}

/* Proxy-scoped sidebar overrides removed — sidebar shares the same look across all modules. */

body.is-proxy-screen .view-proxy {
  background: var(--proxy-bg);
  color: var(--proxy-text);
  padding: 32px;
  gap: 16px;
}


body.is-proxy-screen .px-chip__flag,
body.is-proxy-screen .px-flat__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .12);
  flex-shrink: 0;
}


body.is-proxy-screen .px-table--flat {
  margin-top: 2px;
  background: var(--proxy-surface);
  border: 1px solid var(--proxy-surface-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
  overflow: hidden;
}
body.is-proxy-screen .px-flat__scroll {
  overflow-x: auto;
}
/* Оболочка таблицы (база, шапка, ячейки, hover/selected) — из канонического
   контракта .app-table (ui_tweaks.css); ниже только геометрия колонок. */
body.is-proxy-screen .px-flat__table .px-flat__head,
body.is-proxy-screen .px-flat__table .px-flat__row {
  display: table-row;
  padding: 0;
}
body.is-proxy-screen .px-flat__row { cursor: pointer; transition: none; }
body.is-proxy-screen .px-flat__table th:nth-child(1),
body.is-proxy-screen .px-flat__table td:nth-child(1) {
  width: 36px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
body.is-proxy-screen .px-flat__table th:nth-child(2),
body.is-proxy-screen .px-flat__table td:nth-child(2) { width: 92px; }
body.is-proxy-screen .px-flat__table th:nth-child(4),
body.is-proxy-screen .px-flat__table td:nth-child(4) { width: 90px; overflow: visible; text-overflow: clip; }
body.is-proxy-screen .px-flat__table th:nth-child(5),
body.is-proxy-screen .px-flat__table td:nth-child(5) { width: 122px; }
body.is-proxy-screen .px-flat__table th:nth-child(6),
body.is-proxy-screen .px-flat__table td:nth-child(6) { width: 112px; }
body.is-proxy-screen .px-flat__table th:nth-child(7),
body.is-proxy-screen .px-flat__table td:nth-child(7) { width: 102px; }
body.is-proxy-screen .px-flat__table th:nth-child(8),
body.is-proxy-screen .px-flat__table td:nth-child(8) { width: 188px; text-align: right; }
body.is-proxy-screen .px-flat__check-cell {
  display: table-cell;
  padding-left: 15px;
  padding-right: 15px;
}
/* Чекбоксы строк — общий Material-блок v14.6 в ui_tweaks.css. */
body.is-proxy-screen .px-flat__country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Размер текста ячейки — как в аккаунтах (13px, контракт .app-table). */
  font-family: var(--app-font);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
body.is-proxy-screen .px-flat__flag-placeholder {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background: #e1e3e4;
  display: inline-block;
  flex-shrink: 0;
}
body.is-proxy-screen .px-flat__cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 260px;
}
body.is-proxy-screen .px-flat__cell > :first-child,
body.is-proxy-screen .px-flat__copyable {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-proxy-screen .px-flat__table td:nth-child(4) .px-flat__cell > span:first-child {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}
body.is-proxy-screen .px-flat__password { color: var(--proxy-muted); }
body.is-proxy-screen .px-inline-copy {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--proxy-subtle);
  background: transparent;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s, color .12s, background .12s;
  flex: 0 0 22px;
}
body.is-proxy-screen .px-flat__row:hover .px-inline-copy,
body.is-proxy-screen .px-inline-copy:focus-visible { opacity: 1; }
body.is-proxy-screen .px-inline-copy:hover {
  color: var(--proxy-primary);
  background: rgba(37, 99, 235, .10);
}
body.is-proxy-screen .px-inline-copy .material-symbols-outlined { font-size: 16px; }
body.is-proxy-screen .px-flat__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}
body.is-proxy-screen .px-flat__health {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: auto;
  min-width: 0;
  max-width: 100px;
  text-align: left;
  font-family: var(--app-font);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-proxy-screen .px-flat__health--ok { color: var(--proxy-ok); }
body.is-proxy-screen .px-flat__health--ok span:first-child { font-weight: 600; }
body.is-proxy-screen .px-flat__health--error {
  color: var(--proxy-error);
  max-width: 150px;
}
body.is-proxy-screen .px-flat__health--error span:last-child {
  min-width: 0;
  max-width: 102px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-proxy-screen .px-flat__link-action,
body.is-proxy-screen .px-flat__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--proxy-primary);
  font-family: var(--app-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
body.is-proxy-screen .px-flat__link-action:hover,
body.is-proxy-screen .px-flat__copy:hover { text-decoration: underline; }
body.is-proxy-screen .px-flat__link-action .material-symbols-outlined,
body.is-proxy-screen .px-flat__copy svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
body.is-proxy-screen .px-flat__copy svg { display: block; }

body.is-proxy-screen .px-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--proxy-surface-line);
  background: var(--proxy-surface);
}
body.is-proxy-screen .px-pagination[hidden] { display: none; }

@media (max-width: 900px) {
  body.is-proxy-screen .app { grid-template-columns: 1fr; }
  body.is-proxy-screen .view-proxy { padding: 58px 16px 20px; }
  body.is-proxy-screen .px-pagination { align-items: flex-start; flex-direction: column; }
}

/* -- Append: sidebar collapse + prs-step block redesign ----- */

/* ── Sidebar collapse (desktop) ─────────────────────────────── */
body.sidebar-collapsed .app {
  grid-template-columns: 64px minmax(0, 1fr);
}
body.sidebar-collapsed .sidebar {
  padding: 14px 6px 12px;
}
body.sidebar-collapsed .sidebar__title,
body.sidebar-collapsed .nav-section__title,
body.sidebar-collapsed .nav-item__label,
body.sidebar-collapsed .nav-item__badge,
body.sidebar-collapsed .nav-item__chevron,
body.sidebar-collapsed .sidebar__user-info,
body.sidebar-collapsed .sidebar__user-actions,
body.sidebar-collapsed .sidebar__version {
  display: none !important;
}
body.sidebar-collapsed .sidebar__brand {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 12px;
}
body.sidebar-collapsed .sidebar__collapse {
  position: static;
  margin: 6px auto 0;
  transform: none;
}
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 8px;
  gap: 0;
}
body.sidebar-collapsed .nav-item--sub { padding-left: 8px; }
body.sidebar-collapsed .nav-item__icon { margin: 0; }

.sidebar-collapsed-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #4F5355;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity .08s ease, transform .08s ease;
}
.sidebar-collapsed-tooltip.is-visible {
  opacity: 1;
  transform: translateX(0);
}
body.theme-dark .sidebar-collapsed-tooltip {
  background: #4F5355;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}


/* Account table: compact proxy + misc icon column */
.view-am .table-wrap,
.view-proxy .table-wrap {
  padding-inline: 0;
}

.view-am .acc-table {
  min-width: max-content;
}

.view-am .acc-table thead th:nth-child(11),
.view-am .acc-table tbody td:nth-child(11) {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}

.view-am .acc-table thead th:nth-child(12),
.view-am .acc-table tbody td.col-actions-cell {
  width: 126px;
  min-width: 126px;
  max-width: 126px;
  text-align: center;
}

.view-am .acc-table thead th:nth-child(12) {
  text-align: center;
}

.view-am .am-proxy {
  justify-content: center;
  min-width: 70px;
  max-width: 84px;
  padding: 3px 7px;
  text-overflow: clip;
}

/* ── Колонка «Аккаунт»: аватар + имя + @username + глифы ──────── */
.col-account-cell { vertical-align: middle; }
.am-acct {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.am-acct .avatar { margin-right: 0; flex-shrink: 0; }
.am-acct__avatar { position: relative; flex-shrink: 0; display: inline-flex; line-height: 0; }
/* Индикатор активности: бейдж в углу аватара — есть только когда аккаунт занят. */
.am-activity {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--card, #fff);
  border-radius: 50%;
  background: #94a3b8;
  box-sizing: border-box;
  cursor: default;
}
button.am-activity { cursor: pointer; }
/* «Выполняется» — синий диспетчера задач (--primary / .task-status--running).
   Зелёный в приложении уже занят под «готово/ок», на активной задаче он бы врал. */
.am-activity--running {
  background: linear-gradient(135deg, #4f8dfb 0%, #1d4ed8 100%);
}
/* «В очереди» — насыщенный янтарь: на 8px заливки бледный #f59e0b терялся. */
.am-activity--queued {
  background: linear-gradient(135deg, #ffb020 0%, #f97316 100%);
}
body.theme-dark .am-activity { border-color: var(--card, #161b27); }
body.theme-dark .am-activity--running {
  background: linear-gradient(135deg, #7db3ff 0%, #2563eb 100%);
}
body.theme-dark .am-activity--queued {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}
.am-acct__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.am-acct__top { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.am-acct__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* Монохромные глифы Premium / 2FA рядом с именем */
.am-flags { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.am-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--border, #cbd5e1);
  line-height: 0;
}
.am-flag svg { width: 14px; height: 14px; display: block; }
.am-flag.is-on { color: var(--text-mute, #6b7494); }

/* Зоны действий в строке аккаунта нет: команды строки открывает правая
   кнопка (#am-actions-menu). Иконки-оверлея .am-actions и её кнопок
   .am-action / .am-misc__icon в разметке больше не бывает. */

/* ════════════════════════════════════════════════════════════════════
   Парсер: финальная унификация под модуль «Инвайтинг» (бренд-зелёный).
   Все правила ниже scoped к .view-parser — клонер/профиль-филлер/чекер
   используют те же .prs-* классы и сохраняют свой синий акцент.
   Перебиваем хардкод-синий rgba(91,141,239,…), который не ходит за --accent.
   ════════════════════════════════════════════════════════════════════ */





/* Сегментед-контрол активная вкладка */
.view-parser .prs-segmented button.is-active { color: var(--accent); }

/* Степпер: кнопки и ховер */
.view-parser .prs-stepper button { color: var(--accent); }
.view-parser .prs-stepper button:hover { background: rgba(var(--inv-accent-rgb), 0.12); }

/* Тёмная тема: зелёный CTA вместо синего градиента */
body.theme-dark .view-parser .prs-cta__start {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.55);
}
body.theme-dark .view-parser .prs-cta__start:hover:not([disabled]) {
  background: #3b82f6;
  border-color: #3b82f6;
}

/* ── 1300px компактный режим: ничего не «едет» по горизонтали ──────────
   Источники держим в 3 колонки с minmax(0,…), чтобы длинный контент
   не распирал грид; карточки и заголовки получают min-width:0 и перенос. */
.view-parser .prs-segmented { min-width: 0; }
/* Кнопки сегментед-контрола могут переноситься (например «@username + ID»),
   но не выходить за карточку: nowrap здесь как раз и вызвал бы overflow. */
.view-parser .prs-segmented button {
  min-width: 0;
  padding-inline: 8px;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* 3 источника / 3 карточки сбора держим в 3 колонки вплоть до мобильного
   слома — 2 колонки дали бы неровный «2 + 1» с дырой. На узких — в столбик.
   (Своё media-правило нужно: базовый .view-parser-селектор специфичнее
   старого @media .prs-sources и иначе не дал бы свернуться на мобиле.) */

/* Пилл источника: кнопка-список + переключатель в одной капсуле */
/* «Источники» — выбор базы источников. Оформлен как пилюля
   источника рядом, но стоит строкой выше и занимает её целиком: это не один
   из режимов, а то, к чему режимы применяются. */


/* ─────────────────────────────────────────────────────────────────────────
   Контекстное меню действий с аккаунтами (выпадающее «…», как в Gmail).
   Заменяет центральную модалку «Действия». Пункты сгруппированы линиями,
   а «Добавить роль / Изменить профиль / Конфиденциальность» раскрываются
   боковыми подменю (flyouts).
   ───────────────────────────────────────────────────────────────────────── */
/* ─── Контекстное меню действий — Gmail-style (по menu_markup_specification.md) ─── */
.am-actions-menu {
  position: fixed;
  z-index: 700;
  min-width: 240px;
  max-width: 400px;
  padding: 6px 0;
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
  color: rgb(32, 33, 36);
  font-size: 14px;
  line-height: 20px;
}
.am-actions-menu[hidden] { display: none !important; }
#am-sel-actions.is-open {
  background-color: #E3E3E3 !important;
  color: #202124 !important;
}
.am-actions-menu__list { list-style: none; margin: 0; padding: 0; }

.am-actions-menu__item,
.am-actions-fly__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 48px;
  cursor: pointer;
  color: rgb(32, 33, 36);
  user-select: none;
}
.am-actions-menu__item:hover,
.am-actions-menu__item:focus,
.am-actions-menu__item.is-active,
.am-actions-fly__item:hover,
.am-actions-fly__item:focus,
.am-actions-fly__item.is-active {
  background: #EEEEEE;
  outline: none;
}
.am-actions-menu__ico,
.am-actions-fly__ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #444746;
}
.am-actions-menu__ico svg,
.am-actions-fly__ico svg { width: 18px; height: 18px; display: block; }
.am-actions-menu__label,
.am-actions-fly__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Каретка-указатель подменю — чистый CSS-треугольник, как в спецификации */
.am-actions-menu__chev {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #7F7F7F;
  transition: border-color .15s;
}
.am-actions-menu__chev svg { display: none; }
.am-actions-menu__item--parent:hover .am-actions-menu__chev,
.am-actions-menu__item--parent.is-active .am-actions-menu__chev,
.am-actions-fly__item--parent:hover .am-actions-menu__chev,
.am-actions-fly__item--parent.is-active .am-actions-menu__chev {
  border-left-color: #000;
}

.am-actions-menu__sep,
.am-actions-fly__sep {
  height: 1px;
  margin: 6px 0;
  border: 0;
  background: #e5e7eb;
}

/* ── Боковые подменю (flyouts) ── */
.am-actions-fly {
  position: absolute;
  top: 0;
  min-width: 240px;
  max-width: 400px;
  padding: 6px 0;
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
  color: rgb(32, 33, 36);
  font-size: 14px;
  line-height: 20px;
}
.am-actions-fly[hidden] { display: none !important; }
.am-actions-fly.is-right { left: calc(100% + 2px); }
.am-actions-fly.is-left  { right: calc(100% + 2px); }
.am-actions-fly__list {
  list-style: none; margin: 0; padding: 0;
  max-height: min(500px, calc(100dvh - 28px));
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.am-actions-fly__list--role { max-height: 250px; }
/* Кастомный скроллбар списков подменю */
.am-actions-fly__list::-webkit-scrollbar { width: 8px; }
.am-actions-fly__list::-webkit-scrollbar-track { background: transparent; }
.am-actions-fly__list::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 0; }
.am-actions-fly__list:hover::-webkit-scrollbar-track { background: #f1f1f1; }
.am-actions-fly__list::-webkit-scrollbar-thumb:hover { background-color: #7f7f7f; }

/* Строка роли. Счётчик и крестик показываются только под курсором, поэтому
   лежат отдельным слоем поверх строки, а не в её потоке: ширину окна браузер
   считает по содержимому, и появись они в строке — окно раздвигалось бы прямо
   под курсором. Место им отдаёт сама подпись: под курсором она укорачивается
   многоточием («Автоответчик отве…»). Потолок подписи задан в процентах
   намеренно — при расчёте ширины по содержимому такой потолок не участвует,
   поэтому наведение окно не двигает. */
/* Слева у строки роли — место под отметку: галочка (роль есть у всех
   выделенных) или черта (есть у части). Пустая отметка место всё равно
   держит, иначе названия ролей прыгали бы влево-вправо от того, у кого что
   стоит. */
.am-actions-fly__item--role { padding-left: 44px; padding-right: 16px; }
.am-actions-fly__item--role:hover .am-actions-fly__label { max-width: calc(100% - 64px); }
.am-actions-fly__mark {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0b57d0;
}
.am-actions-fly__mark svg { width: 18px; height: 18px; display: block; }
.am-actions-fly__count {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9ca3af;
  display: none;
}
.am-actions-fly__item--role:hover .am-actions-fly__count { display: inline-block; }
.am-actions-fly__del {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border: 0; background: transparent;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  color: #5f6368;
  transition: color .15s;
}
.am-actions-fly__item--role:hover .am-actions-fly__del { display: flex; }
.am-actions-fly__del:hover { background: transparent; color: #d93025; }
.am-actions-fly__del svg { width: 16px; height: 16px; display: block; }

/* Поиск роли — подчёркивание в стиле Google */
.am-actions-fly__search {
  position: relative;
  display: flex; align-items: center;
  margin: 4px 16px 12px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #e0e0e0;
  border-radius: 0;
  background: transparent;
  transition: border-color .15s;
}
.am-actions-fly__search:focus-within {
  border-color: #e0e0e0;
  border-bottom-color: #1a73e8;
  box-shadow: none;
}
.am-actions-fly__search-ico {
  position: absolute; right: 8px;
  display: inline-flex; color: #5f6368;
}
.am-actions-fly__search-ico svg { width: 16px; height: 16px; display: block; }
.am-actions-fly__search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 4px 32px 4px 0;
  font: inherit; color: rgb(32, 33, 36);
}
.am-actions-fly__empty {
  padding: 10px 16px; color: #9ca3af; font-size: 14px;
}
.am-actions-fly__foot {
  position: relative;
  display: flex; align-items: center; width: 100%;
  padding: 9px 48px; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: #202124; text-align: left;
}
.am-actions-fly__foot:hover { background: #EEEEEE; }
.am-actions-fly__sep[hidden],
.am-actions-fly__foot[hidden] { display: none !important; }

/* ── Тёмная тема — адаптируем под палитру приложения ── */
body.theme-dark .am-actions-menu,
body.theme-dark .am-actions-fly {
  background: var(--bg-card, #181818);
  color: var(--text, #cccccc);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
}
body.theme-dark .am-actions-menu__item,
body.theme-dark .am-actions-fly__item { color: var(--text, #cccccc); }
body.theme-dark .am-actions-menu__item:hover,
body.theme-dark .am-actions-menu__item.is-active,
body.theme-dark .am-actions-fly__item:hover,
body.theme-dark .am-actions-fly__item.is-active { background: var(--bg-hover, #2a2a2a); }
body.theme-dark .am-actions-menu__ico,
body.theme-dark .am-actions-fly__ico,
body.theme-dark .am-actions-fly__search-ico,
body.theme-dark .am-actions-fly__del { color: var(--text-mute, #9d9d9d); }
body.theme-dark .am-actions-menu__sep,
body.theme-dark .am-actions-fly__sep { background: var(--border, #2b2b2b); }
body.theme-dark .am-actions-menu__chev { border-left-color: var(--text-mute, #9d9d9d); }
body.theme-dark .am-actions-menu__item--parent:hover .am-actions-menu__chev,
body.theme-dark .am-actions-menu__item--parent.is-active .am-actions-menu__chev,
body.theme-dark .am-actions-fly__item--parent:hover .am-actions-menu__chev,
body.theme-dark .am-actions-fly__item--parent.is-active .am-actions-menu__chev { border-left-color: var(--text, #ffffff); }
/* Отметка роли ночью — тот же синий, каким ночь красит выбранное в списках
   (--g-sel-ink): она говорит «отмечено», а не «внимание». */
body.theme-dark .am-actions-fly__mark { color: var(--g-sel-ink, #a8c7fa); }
body.theme-dark .am-actions-fly__search { border-bottom-color: var(--border, #2b2b2b); }
body.theme-dark .am-actions-fly__search:focus-within { border-bottom-color: var(--primary, #0078d4); }
body.theme-dark .am-actions-fly__search input { color: var(--text, #cccccc); }
body.theme-dark .am-actions-fly__del:hover { color: #f48771; }
body.theme-dark .am-actions-fly__foot { color: var(--text, #cccccc); }
body.theme-dark .am-actions-fly__foot:hover { background: var(--bg-hover, #2a2a2a); }
body.theme-dark .am-actions-fly__list::-webkit-scrollbar-thumb { background-color: #4a4a4a; }
body.theme-dark .am-actions-fly__list:hover::-webkit-scrollbar-track { background: #2a2a2a; }

/* ═══ ui_tweaks.css ═══ */
/* ============================================================
   UI tweaks (added):
   - Tasks dispatcher: date-range filter + delete button on cards
   - pf-media modal: bigger select-all, removed deselect/badge
   - pick-bind modal: account avatar/role rows, proxy flag
   - Proxy view: compact mini interface
   ============================================================ */

/* в”Ђв”Ђ Tasks: date-range filter в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Дата-фильтр переехал в поповер «Фильтры» (#tm-kind-pop): отдельной кнопки
   .tm-datefilter и standalone-окна .tm-datepop больше нет. Поля ниже
   (.tm-datepop__*) переиспользуются внутри общего окна фильтров. */
.tm-datepop__field { display: flex; flex-direction: column; gap: 6px; }
.tm-datepop__lbl {
  font-size: 12px; font-weight: 500;
  color: var(--text-mute, #6b7494);
}
.tm-datepop__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text, #1f2740);
  transition: border-color .12s, box-shadow .12s;
}
.tm-datepop__input:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.tm-datepop__input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.tm-datepop__foot { display: flex; justify-content: flex-end; }
.tm-datepop__clear {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-mute, #6b7494);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tm-datepop__clear[hidden] { display: none; }
.tm-datepop__clear:hover {
  background: rgba(226, 85, 85, .08);
  color: var(--red, #e25555);
  border-color: rgba(226, 85, 85, .35);
}

/* в”Ђв”Ђ pf-media modal: bigger Select-all toggle в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pf-media__select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pf-media__select-all svg { width: 14px; height: 14px; }
.pf-media__select-all.is-active {
  background: var(--accent-soft, rgba(47,109,251,.12));
  color: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
}
.pf-media__select-all-label { line-height: 1; }

/* Hide the (now unused) badge wrapper if some legacy markup left */
.pf-media__icon-btn-badge { display: none !important; }

/* в”Ђв”Ђ pick-bind modal: account row with avatar + role в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Account rows use the same grid layout as proxy rows, but with wider first col for avatar */
.pick-bind__row--account {
  grid-template-columns: 32px 1fr auto;
  align-items: center;
}
.pick-bind__row-ava {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-row-hover, #eef);
  color: var(--text, #444);
  overflow: hidden;
  object-fit: cover;
}
img.pick-bind__row-ava { object-fit: cover; }
.pick-bind__row .fi {
  vertical-align: middle;
  width: 16px;
  height: 12px;
}

/* в”Ђв”Ђ Proxy view: keep flag visible in flat list (no size overrides) в”Ђв”Ђ */
.px-flat__country .fi { width: 18px; height: 13px; vertical-align: middle; margin-right: 4px; }

/* ============================================================
   Phase 2 unifications
   ============================================================ */

/* в”Ђв”Ђ Sidebar: full module names (no truncation, slightly wider) в”Ђв”Ђ */
.app-grid,
.layout,
body > .layout,
body > .app-grid {
  /* Keep grid; we override sidebar inline width below if defined as grid-template-columns */
}
/* Widen sidebar from 240в†’260 to fit Russian labels in full */
/* Применяем только на широких экранах (>900px), чтобы не конфликтовать с hamburger-режимом */
@media (min-width: 901px) {
  .app { grid-template-columns: clamp(220px, 22vw, 260px) minmax(0, 1fr); }
  .sidebar { min-width: 0; max-width: none; }
}
.nav-item__label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-item { min-width: 0; }

/* Re-apply compact proxy mini-interface (overrides above unification) */
/* (compact proxy reverted — keep proxy hero with the unified metrics) */


/* в”Ђв”Ђ Unified main view paddings в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.main {
  padding: 20px 28px 96px !important;
  gap: 20px;
}
.view-pf,
.view-cloner,
.view-parser,
.view-am,
.view-inviter,
.view-userbase,
.view-proxy,
.view-tasks {
  padding: 22px 28px 96px;
  gap: 18px;
}

/* в”Ђв”Ђ Restrictions: better paddings в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Отступы .view-chk убраны вместе с самой вёрсткой: «Снятие ограничений»
   переехало на канон страницы запуска (.srch-page, ниже по файлу), и его
   ритм задаёт общий блок карточек. */

/* в”Ђв”Ђ Suppress flicker on first view switch в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* в”Ђв”Ђ pf-media modal toolbar: align all controls on one row в”Ђв”Ђв”Ђ */
.pf-media__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-media__toolbar > .pf-media__upload,
.pf-media__toolbar .pf-media__select-all,
.pf-media__toolbar .pf-media__icon-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.pf-media__toolbar > .pf-media__upload {
  font-weight: 600;
  padding: 0 14px;
  gap: 8px;
}
.pf-media__toolbar > .pf-media__upload svg {
  width: 14px; height: 14px;
}
.pf-media__select-all { height: 34px !important; padding: 0 14px; font-weight: 600; }
.pf-media__count {
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  display: inline-flex;
  align-items: center;
  height: 34px;
}
.pf-media__icon-btn {
  width: 34px;
  padding: 0;
  justify-content: center;
}

/* в”Ђв”Ђ ChatGPT-like sidebar and rounded scrollbars в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin-block: 3px;
}

::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-track-piece {
  background: transparent;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: var(--scrollbar-thumb-inset) solid transparent;
  border-radius: 999px;
  min-height: 42px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

@media (min-width: 901px) {
  .app { grid-template-columns: 260px minmax(0, 1fr); }
}

/* в”Ђв”Ђ Sidebar: light theme matching general app style в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.sidebar {
  --sidebar-scrollbar-size: 10px;
  --sidebar-scrollbar-thumb-inset: 3px;
  --sidebar-scrollbar-thumb: rgba(113, 122, 145, 0.45);
  --sidebar-scrollbar-thumb-hover: rgba(86, 95, 118, 0.65);
  --sidebar-scrollbar-thumb-active: rgba(65, 74, 97, 0.82);
  background: var(--bg-card) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--text);
  gap: 8px;
  padding: 12px 10px 10px;
  scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
}

.sidebar__brand {
  min-height: 44px;
  gap: 10px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar__collapse {
  right: 4px;
  top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--text-mute);
  background: transparent;
}

.sidebar__collapse:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.sidebar__nav {
  gap: 7px;
  padding: 6px 4px 10px 0;
  scrollbar-gutter: stable;
  scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
}

.sidebar::-webkit-scrollbar,
.sidebar__nav::-webkit-scrollbar {
  width: var(--sidebar-scrollbar-size);
  height: var(--sidebar-scrollbar-size);
}

.sidebar::-webkit-scrollbar-track,
.sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin-block: 5px;
}

.sidebar::-webkit-scrollbar-track-piece,
.sidebar__nav::-webkit-scrollbar-track-piece {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar__nav::-webkit-scrollbar-thumb {
  background-color: var(--sidebar-scrollbar-thumb);
  background-clip: padding-box;
  border: var(--sidebar-scrollbar-thumb-inset) solid transparent;
  border-radius: 999px;
  min-height: 42px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar__nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--sidebar-scrollbar-thumb-hover);
}

.sidebar::-webkit-scrollbar-thumb:active,
.sidebar__nav::-webkit-scrollbar-thumb:active {
  background-color: var(--sidebar-scrollbar-thumb-active);
}

.nav-section { gap: 2px; }

.nav-section__title {
  padding: 12px 10px 5px;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav-item {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px !important;
  height: 50px !important;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  transform: none !important;
  transition: background-color .12s ease, color .12s ease;
}

.nav-item:hover:not([disabled]),
.nav-group.is-open > .nav-item--group:hover {
  background: var(--bg-hover) !important;
  color: var(--text);
  transform: none !important;
}

.nav-item.is-active {
  background: var(--primary-soft) !important;
  color: var(--primary);
  transform: none !important;
}

.nav-item__label {
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nav-item__icon,
.nav-item__icon[data-tone],
.nav-item:hover .nav-item__icon {
  width: 18px;
  height: 18px;
  background: transparent !important;
  border-radius: 0;
  color: var(--text-mute) !important;
  transform: none !important;
}

.nav-item.is-active .nav-item__icon {
  color: var(--primary) !important;
}

.nav-item__icon svg {
  width: 18px;
  height: 18px;
}

.nav-item__chevron {
  color: var(--text-light);
  opacity: 1;
}

.nav-group { gap: 2px; }

.nav-group__items {
  margin: 2px 0 4px 14px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.nav-item--sub {
  color: var(--text-mute);
  font-size: 13px;
  min-height: 32px;
}

.nav-item--sub:hover:not([disabled]) {
  color: var(--text);
}

.nav-item__badge {
  background: var(--primary);
  color: #fff;
}

.theme-toggle {
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.theme-toggle:hover,
body.theme-dark .theme-toggle:hover {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--text);
}

.badge,
.version {
  color: var(--text-mute);
}

.badge {
  align-self: flex-start;
  background: transparent;
  padding: 4px 8px;
}

/* Dark theme: keep sidebar matching dark cards */
body.theme-dark .sidebar {
  background: var(--bg-card) !important;
  border-right-color: var(--border) !important;
  color: var(--text);
}

body.theme-dark .nav-item {
  color: var(--text);
}

body.theme-dark .nav-item:hover:not([disabled]) {
  background: var(--bg-hover) !important;
  color: var(--text);
}

body.theme-dark .nav-item.is-active {
  background: var(--primary-soft) !important;
  color: var(--primary);
}

/* в”Ђв”Ђ Userbase module: ChatGPT-like dark workspace в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase.view-userbase {
  --ub-page-bg: #000;
  --ub-panel: #171717;
  --ub-panel-hover: #1f1f1f;
  --ub-control: #212121;
  --ub-control-hover: #2f2f2f;
  --ub-border: #2f2f2f;
  --ub-border-strong: #424242;
  --ub-text: #f4f4f4;
  --ub-muted: #b4b4b4;
  --ub-subtle: #8e8e8e;
  --ub-accent: #1d4ed8;
  --ub-accent-rgb: 16, 163, 127;
  min-height: 100vh;
  padding: 28px 32px 96px !important;
  gap: 18px;
  background: var(--ub-page-bg);
  color: var(--ub-text);
}

#view-userbase.view-userbase > * {
  width: min(1180px, 100%);
  margin-inline: auto;
}

#view-userbase .ub-search { min-width: 240px; }

#view-userbase .ub-search input,
#view-userbase .ub-detail__search,
#view-userbase .ub-detail__note,
#view-userbase .inv-input,
#view-userbase .inv-textarea,
#ub-detail-modal .ub-detail__search,
#ub-detail-modal .ub-detail__note,
#ub-detail-modal .ub-detail__textarea,
.newbase-modal .inv-input,
.newbase-modal .inv-textarea {
  background: var(--ub-control, #212121);
  border-color: var(--ub-border, #2f2f2f);
  color: var(--ub-text, #f4f4f4);
  border-radius: 8px;
  box-shadow: none;
}

#view-userbase .ub-search input {
  height: 40px;
  padding-left: 38px;
}

#view-userbase .ub-search input::placeholder,
#view-userbase .ub-detail__search::placeholder,
#view-userbase .ub-detail__note::placeholder,
#view-userbase .inv-input::placeholder,
#view-userbase .inv-textarea::placeholder,
#ub-detail-modal .ub-detail__search::placeholder,
#ub-detail-modal .ub-detail__note::placeholder,
#ub-detail-modal .ub-detail__textarea::placeholder,
.newbase-modal .inv-input::placeholder,
.newbase-modal .inv-textarea::placeholder {
  color: var(--ub-subtle, #8e8e8e);
}

#view-userbase .ub-search input:focus,
#view-userbase .ub-detail__search:focus,
#view-userbase .ub-detail__note:focus,
#view-userbase .inv-input:focus,
#view-userbase .inv-textarea:focus,
#ub-detail-modal .ub-detail__search:focus,
#ub-detail-modal .ub-detail__note:focus,
#ub-detail-modal .ub-detail__textarea:focus,
.newbase-modal .inv-input:focus,
.newbase-modal .inv-textarea:focus {
  background: var(--ub-control, #212121);
  border-color: #565656;
  outline: none;
}

#view-userbase .btn,
#ub-detail-modal .btn,
.newbase-modal .btn,
#ub-import-modal .btn {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
}

#view-userbase .btn--ghost,
#ub-detail-modal .btn--ghost,
.newbase-modal .btn--ghost,
#ub-import-modal .btn--ghost {
  background: var(--ub-control, #212121);
  border-color: var(--ub-border, #2f2f2f);
  color: var(--ub-text, #f4f4f4);
}

#view-userbase .btn--ghost:hover,
#ub-detail-modal .btn--ghost:hover,
.newbase-modal .btn--ghost:hover,
#ub-import-modal .btn--ghost:hover {
  background: var(--ub-control-hover, #2f2f2f);
  border-color: var(--ub-border-strong, #424242);
  color: #fff;
}

#view-userbase .btn--primary,
#ub-detail-modal .btn--primary,
.newbase-modal .btn--primary,
#ub-import-modal .btn--primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}

#view-userbase .btn--primary:hover,
#ub-detail-modal .btn--primary:hover,
.newbase-modal .btn--primary:hover,
#ub-import-modal .btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  filter: none;
}

#view-userbase .ub-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

#view-userbase .ub-card {
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: var(--ub-panel) !important;
  border: 1px solid var(--ub-border) !important;
  border-left: 3px solid var(--ub-card-color, var(--ub-accent)) !important;
  color: var(--ub-text);
  box-shadow: none !important;
  transition: background-color .12s ease, border-color .12s ease;
}

#view-userbase .ub-card:hover {
  background: var(--ub-panel-hover) !important;
  border-color: var(--ub-border-strong) !important;
  border-left-color: var(--ub-card-color, var(--ub-accent)) !important;
  box-shadow: none !important;
}

#view-userbase .ub-card__title {
  color: var(--ub-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
}

#view-userbase .ub-card__actions {
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ub-border);
  opacity: 1;
}

#view-userbase .ub-card__action {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--ub-border) !important;
  background: var(--ub-control) !important;
  color: var(--ub-text) !important;
  font-size: 12px;
  font-weight: 600;
}

#view-userbase .ub-card__action:hover {
  background: var(--ub-control-hover) !important;
  border-color: var(--ub-border-strong) !important;
  color: #fff !important;
}

#view-userbase .ub-card__action--primary {
  background: var(--ub-accent) !important;
  border-color: var(--ub-accent) !important;
  color: #fff !important;
}

#view-userbase .ub-card__action--primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

#view-userbase .ub-empty {
  padding: 58px 24px;
  border-radius: 8px;
  background: var(--ub-panel);
  border: 1px dashed var(--ub-border-strong);
  color: var(--ub-text);
}

#view-userbase .ub-empty h3 {
  color: var(--ub-text);
  font-size: 18px;
  letter-spacing: 0;
}

#view-userbase .ub-empty p {
  color: var(--ub-muted);
}

#ub-detail-modal,
.newbase-modal,
#ub-import-modal {
  --ub-page-bg: var(--bg-app, #f4f6fb);
  --ub-panel: var(--bg-card, #ffffff);
  --ub-panel-hover: var(--bg-hover, #f1f4fa);
  --ub-control: var(--bg-app, #f4f6fb);
  --ub-control-hover: var(--bg-hover, #f1f4fa);
  --ub-border: var(--border, #e3e8f0);
  --ub-border-strong: var(--border-strong, #d3dae6);
  --ub-text: var(--text, #1f2740);
  --ub-muted: var(--text-mute, #6b7494);
  --ub-subtle: var(--text-light, #94a0b8);
  --ub-accent: #3b82f6;
  --ub-accent-rgb: 101, 195, 103;
}

#ub-detail-modal .modal__backdrop,
.newbase-modal .modal__backdrop,
#ub-import-modal .modal__backdrop {
  background: rgba(20, 30, 60, 0.32);
}

#ub-detail-modal .modal__panel,
.newbase-modal .modal__panel,
#ub-import-modal .modal__panel {
  background: #ffffff;
  border: 0;
  border-radius: 10px;
  color: #2b2b2b;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

#ub-detail-modal .modal__head,
.newbase-modal .modal__head,
#ub-import-modal .modal__head,
#ub-detail-modal .modal__foot,
.newbase-modal .modal__foot,
#ub-import-modal .modal__foot {
  border-color: var(--ub-border);
}

#ub-detail-modal .modal__body,
.newbase-modal .modal__body,
#ub-import-modal .modal__body {
  background: var(--ub-panel);
}

#ub-detail-modal .modal__title,
.newbase-modal .modal__title,
#ub-import-modal .modal__title,
#ub-detail-modal .ub-detail__name {
  color: var(--ub-text);
  letter-spacing: 0;
}

#ub-detail-modal .ub-detail__meta,
#ub-detail-modal .ub-detail__counter,
.newbase-modal .modal__hint,
#ub-import-modal .modal__hint,
.newbase-modal .inv-field__label {
  color: var(--ub-muted);
}

#ub-detail-modal .icon-btn,
.newbase-modal .icon-btn,
#ub-import-modal .icon-btn {
  background: transparent;
  border-color: transparent;
  color: var(--ub-muted);
}

#ub-detail-modal .icon-btn:hover,
.newbase-modal .icon-btn:hover,
#ub-import-modal .icon-btn:hover {
  background: var(--ub-control);
  color: #fff;
}

#ub-import-modal .ub-sessions {
  gap: 8px;
}

#ub-import-modal .ub-session {
  background: var(--ub-control);
  border-color: var(--ub-border);
  border-radius: 8px;
  color: var(--ub-text);
}

#ub-import-modal .ub-session:hover {
  background: var(--ub-control-hover);
  border-color: var(--ub-border-strong);
}

#ub-import-modal .ub-session__name {
  color: var(--ub-text);
}

#ub-import-modal .ub-session__count {
  color: #fff;
}

#ub-import-modal .ub-session__count small,
#ub-import-modal .ub-session__date {
  color: var(--ub-muted);
}

@media (max-width: 900px) {
  #view-userbase.view-userbase {
    padding: 58px 14px 84px !important;
  }

  #view-userbase .ub-search {
    min-width: 0;
  }

  #view-userbase .ub-grid {
    grid-template-columns: 1fr;
  }
}

/* в”Ђв”Ђ Userbase: OpenAI Developers reference pass в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase.view-userbase {
  --ub-page-bg: #000;
  --ub-panel: #1b1b1b;
  --ub-panel-2: #202020;
  --ub-control: #242424;
  --ub-border: #303030;
  --ub-border-strong: #474747;
  --ub-text: #f4f4f4;
  --ub-muted: #c2c2c2;
  --ub-subtle: #8f8f8f;
  --ub-accent: #ffffff;
  --ub-accent-rgb: 255, 255, 255;
  padding: 28px 40px 110px !important;
  background: #000;
}

#view-userbase.view-userbase > * {
  width: min(1120px, 100%);
}

#view-userbase .ub-search { grid-area: search; }

#view-userbase .ub-search input {
  height: 48px;
  border-radius: 999px;
  background: #222;
  border-color: #3a3a3a;
  padding-left: 44px;
  font-size: 14px;
}

#view-userbase .ub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

#view-userbase .ub-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  color: var(--ub-text);
  cursor: pointer;
}

#view-userbase .ub-card:hover {
  background: transparent !important;
  border: 0 !important;
}

#view-userbase .ub-card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#view-userbase .ub-card__title {
  color: #fff;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
}

#view-userbase .ub-card__desc {
  min-height: 40px;
  margin: 0;
  color: #b8b8b8;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-userbase .ub-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  border: 0;
}

#view-userbase .ub-card__action {
  min-height: 34px;
  border-radius: 999px;
  background: #222 !important;
  border-color: #363636 !important;
  color: #f1f1f1 !important;
  padding: 0 12px;
}

#view-userbase .ub-card__action:hover {
  background: #2e2e2e !important;
  border-color: #4b4b4b !important;
}

#view-userbase .ub-card__action--primary {
  background: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
  color: #0b0b0b !important;
}

#view-userbase .ub-card__action--primary:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

#view-userbase .ub-empty {
  background: #1b1b1b;
  border-color: #343434;
}

@media (max-width: 1120px) {
  #view-userbase .ub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #view-userbase.view-userbase {
    padding: 58px 18px 90px !important;
  }

}

@media (max-width: 680px) {
  #view-userbase .ub-grid {
    grid-template-columns: 1fr;
  }

}

/* в”Ђв”Ђ Userbase: compact full-screen pass в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase.view-userbase {
  padding: 20px 24px 96px !important;
  gap: 14px;
  align-items: stretch;
}

#view-userbase.view-userbase > * {
  width: 100%;
  max-width: none;
}

#view-userbase .ub-search input {
  height: 38px;
  padding-left: 40px;
  border-radius: 999px;
  font-size: 13px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#view-userbase .ub-search input:hover,
#view-userbase .ub-search input:focus {
  background: #262626;
  border-color: #525252;
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

#view-userbase .ub-chip,
#view-userbase .ub-toolbar__actions .btn,
#view-userbase .ub-card__action,
#ub-detail-modal .btn,
#ub-detail-modal .icon-btn,
#ub-detail-modal .ub-outcomes__pill {
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

#view-userbase .ub-grid {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  grid-auto-rows: 226px;
  gap: 12px;
  align-items: stretch;
}

#view-userbase .ub-card {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #252525 !important;
  border-radius: 10px;
  background: #101010 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#view-userbase .ub-card:hover {
  background: #151515 !important;
  border-color: #484848 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}

#view-userbase .ub-card__content {
  min-height: 0;
  gap: 6px;
}

#view-userbase .ub-card__title {
  min-height: 18px;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

#view-userbase .ub-card__desc {
  display: none;
}

#view-userbase .ub-card__actions {
  gap: 5px;
  margin-top: auto;
}

#view-userbase .ub-card__action {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 11.5px;
}

#view-userbase .ub-card__action-ico {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  #view-userbase .ub-chip:hover,
  #view-userbase .ub-toolbar__actions .btn:hover,
  #view-userbase .ub-card__action:hover,
  #ub-detail-modal .btn:hover,
  #ub-detail-modal .icon-btn:hover,
  #ub-detail-modal .ub-outcomes__pill:hover {
    transform: translateY(-1px);
  }

  #view-userbase .ub-card:hover {
    transform: translateY(-3px);
  }

}

@media (max-width: 900px) {
  #view-userbase.view-userbase {
    padding: 58px 16px 90px !important;
  }

}

@media (max-width: 560px) {

  #view-userbase .ub-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 222px;
  }
}

/* в”Ђв”Ђ Userbase: minimal reference cards в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase .ub-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 136px;
  gap: 14px;
}

#view-userbase .ub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 18px 22px 15px;
  overflow: hidden;
  border: 1px solid #252525 !important;
  border-radius: 8px;
  background: #171717 !important;
  color: #f4f4f4;
  box-shadow: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-userbase .ub-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .18s ease;
}

#view-userbase .ub-card:hover {
  background: #1d1d1d !important;
  border-color: #3b3b3b !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
}

#view-userbase .ub-card:hover::before {
  opacity: 1;
}

#view-userbase .ub-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}

#view-userbase .ub-card__title {
  min-height: 0;
  color: #e8e8e8;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

#view-userbase .ub-card__sub,
#view-userbase .ub-card__desc,
#view-userbase .ub-card__rows,
#view-userbase .ub-card__visual {
  display: none !important;
}

#view-userbase .ub-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}

#view-userbase .ub-card:hover .ub-card__actions,
#view-userbase .ub-card:focus-within .ub-card__actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#view-userbase .ub-card__action {
  flex: 0 0 auto;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #d8d8d8 !important;
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: none !important;
}

#view-userbase .ub-card__action:hover {
  background: transparent !important;
  color: #fff !important;
}

#view-userbase .ub-card__action--primary {
  color: #f2f2f2 !important;
}

#view-userbase .ub-card__action-ico {
  width: 14px;
  height: 14px;
  transition: transform .16s ease;
}

#view-userbase .ub-card__action:hover .ub-card__action-ico {
  transform: translateX(2px);
}

@media (hover: hover) {
  #view-userbase .ub-card:hover {
    transform: translateY(-2px);
  }
}

@media (hover: none) {
  #view-userbase .ub-card__actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

/* Proxy filters mirror the Accounts toolbar control and popover. */
html body .view-proxy .px-gmail-bar #px-filter-wrap,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}

html body .view-proxy .px-gmail-bar #px-filter-toggle,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .view-proxy .px-gmail-bar #px-filter-toggle:hover,
html body .view-proxy .px-gmail-bar #px-filter-toggle.is-open,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle:hover,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle.is-open {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body .view-proxy .px-gmail-bar #px-filter-toggle svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #444746 !important;
  stroke-width: 1.5px !important;
}

html body .view-proxy .px-gmail-bar #px-filter-toggle svg path,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle svg path {
  fill: none !important;
  stroke: inherit !important;
  stroke-width: inherit !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .view-proxy .px-gmail-bar #px-filter-toggle.is-active svg,
html body .view-proxy .px-gmail-bar #px-filter-toggle.is-on svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle.is-active svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-filter-toggle.is-on svg {
  stroke: var(--am-accent, #2563eb) !important;
}

#px-filter-pop {
  font-family: var(--app-font) !important;
}

html body.theme-dark #px-filter-pop {
  color: var(--text, #cccccc) !important;
}

@media (max-width: 560px) {
  #view-userbase .ub-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 132px;
  }

  #view-userbase .ub-card {
    padding-inline: 18px;
  }
}

/* в”Ђв”Ђ Userbase: dark database-card reference в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase .ub-grid {
  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  grid-auto-rows: 258px;
  gap: 16px;
}

#view-userbase .ub-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #292929 !important;
  border-radius: 8px;
  background: #141414 !important;
  color: #f4f4f4;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#view-userbase .ub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.075), transparent 0 34%);
  opacity: 0;
  transition: opacity .18s ease;
}

#view-userbase .ub-card:hover {
  background: #191919 !important;
  border-color: #404040 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.3);
}

#view-userbase .ub-card:hover::before {
  opacity: 1;
}

#view-userbase .ub-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

#view-userbase .ub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid color-mix(in srgb, var(--ub-card-color, #1d4ed8) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 16%, #171717);
  color: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 76%, #fff);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#view-userbase .ub-card__icon svg {
  width: 21px;
  height: 21px;
}

#view-userbase .ub-card__quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: .78;
  transition: opacity .16s ease;
}

#view-userbase .ub-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #8f99aa;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

#view-userbase .ub-card__icon-btn svg {
  width: 16px;
  height: 16px;
}

#view-userbase .ub-card__icon-btn:hover {
  background: #222;
  border-color: #353535;
  color: #fff;
}

#view-userbase .ub-card__icon-btn--danger:hover {
  color: #ff9b9b;
}

#view-userbase .ub-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}

#view-userbase .ub-card__title {
  min-height: 38px;
  color: #f3f3f3;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-userbase .ub-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 25px;
  margin-top: 9px;
  overflow: hidden;
}

#view-userbase .ub-card__tags span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #303030;
  border-radius: 6px;
  background: #1d1d1d;
  color: #bfc6d4;
  font-size: 11px;
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-userbase .ub-card__tags span:first-child {
  border-color: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 28%, #303030);
  background: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 12%, #1d1d1d);
  color: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 65%, #fff);
}

#view-userbase .ub-card__desc {
  display: -webkit-box !important;
  min-height: 38px;
  margin: 12px 0 0;
  color: #9ba3b2;
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-userbase .ub-card__meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  min-height: 24px;
  color: #7f8796;
  font-size: 10.5px;
  white-space: nowrap;
}

#view-userbase .ub-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid #252525;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

#view-userbase .ub-card__mini-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #9aa3b4;
  font-size: 11px;
  font-weight: 600;
}

#view-userbase .ub-card__mini-stats span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-userbase .ub-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 30px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #303744 !important;
  border-radius: 7px;
  background: #171b22 !important;
  color: #e9edf5 !important;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

#view-userbase .ub-card__action:hover {
  background: #202631 !important;
  border-color: #4b5567 !important;
  color: #fff !important;
}

#view-userbase .ub-card__action-ico {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  #view-userbase .ub-card:hover {
    transform: translateY(-3px);
  }

  #view-userbase .ub-card:hover .ub-card__icon {
    transform: scale(1.04);
    border-color: color-mix(in srgb, var(--ub-card-color, #1d4ed8) 46%, #444);
  }

  #view-userbase .ub-card:hover .ub-card__quick {
    opacity: 1;
  }

  #view-userbase .ub-card__icon-btn:hover,
  #view-userbase .ub-card__action:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 720px) {
  #view-userbase .ub-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (max-width: 560px) {
  #view-userbase .ub-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }
}

/* в”Ђв”Ђ Userbase: fit and motion fixes в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

#view-userbase .ub-toolbar__actions .btn:hover,
#view-userbase .ub-card__icon-btn:hover,
#view-userbase .ub-card__action:hover {
  transform: none !important;
}

#view-userbase .ub-card {
  grid-template-rows: auto minmax(0, 1fr);
  transform: none !important;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

#view-userbase .ub-card:hover {
  transform: none !important;
  background: #191919 !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

#view-userbase .ub-card:hover .ub-card__icon,
#view-userbase .ub-card__action:hover .ub-card__action-ico,
#view-userbase .ub-card__icon-btn:hover,
#view-userbase .ub-card__action:hover {
  transform: none !important;
}

#view-userbase .ub-card__top {
  margin-bottom: 12px;
}

#view-userbase .ub-card__title {
  min-height: 36px;
}

#view-userbase .ub-card__tags {
  margin-top: 8px;
}

#view-userbase .ub-card__desc {
  min-height: 36px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
}

#view-userbase .ub-card__meta-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  min-height: 34px;
  padding-top: 12px;
  border-top: 1px solid #252525;
}

#view-userbase .ub-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  pointer-events: auto;
  transform: none !important;
}

#view-userbase .ub-card__mini-stats {
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
  font-size: 10.5px;
}

#view-userbase .ub-card__mini-stats span {
  max-width: 58px;
}

#view-userbase .ub-card__action {
  height: 29px;
  min-height: 29px;
  padding: 0 11px;
  border-color: #303744 !important;
  background: #171b22 !important;
}

#view-userbase .ub-card__action:hover {
  background: #202631 !important;
  border-color: #4b5567 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .08) !important;
}

#view-userbase .ub-card__updated {
  max-width: 76px;
  overflow: hidden;
  color: #7f8796;
  font-size: 10.5px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  #view-userbase .ub-card:hover,
  #view-userbase .ub-chip:hover,
  #view-userbase .ub-toolbar__actions .btn:hover,
  #view-userbase .ub-card__icon-btn:hover,
  #view-userbase .ub-card__action:hover,
  #view-userbase .ub-card:hover .ub-card__icon {
    transform: none !important;
  }
}

/* в”Ђв”Ђ Sidebar polish (light theme) and userbase header/modal fixes в”Ђв”Ђв”Ђ */
.sidebar__brand {
  min-height: 48px;
}

#view-userbase .ub-chip,
#view-userbase .ub-toolbar__actions .btn,
#view-userbase .ub-card__icon-btn,
#view-userbase .ub-card__action,
#ub-detail-modal .btn,
#ub-detail-modal .icon-btn,
#ub-detail-modal .ub-outcomes__pill {
  transform: none !important;
  transition: background-color .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease, opacity .24s ease !important;
}

#view-userbase .ub-chip:hover,
#view-userbase .ub-toolbar__actions .btn:hover,
#view-userbase .ub-card__icon-btn:hover,
#view-userbase .ub-card__action:hover,
#ub-detail-modal .btn:hover,
#ub-detail-modal .icon-btn:hover,
#ub-detail-modal .ub-outcomes__pill:hover {
  transform: none !important;
}

#view-userbase .ub-card,
#view-userbase .ub-card:hover,
#view-userbase .ub-card:hover .ub-card__icon,
#view-userbase .ub-card__action:hover .ub-card__action-ico {
  transform: none !important;
}

#view-userbase .ub-card:hover {
  background: #181818 !important;
  border-color: #353535 !important;
  box-shadow: none !important;
}

#view-userbase .ub-card:hover::before {
  opacity: 0 !important;
}

#view-userbase .ub-card__meta-line {
  grid-template-columns: auto minmax(0, 1fr);
}

#view-userbase .ub-card__updated {
  max-width: 72px;
  text-align: left;
}

#view-userbase .ub-card__actions {
  justify-content: flex-end;
}

/* в”Ђв”Ђ Userbase: disable card hover growth completely в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase .ub-card,
#view-userbase .ub-card:hover,
#view-userbase .ub-card:focus-within {
  transform: none !important;
  background: #141414 !important;
  border-color: #292929 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

#view-userbase .ub-card::before,
#view-userbase .ub-card:hover::before,
#view-userbase .ub-card:focus-within::before {
  opacity: 0 !important;
}

#view-userbase .ub-card:hover .ub-card__icon,
#view-userbase .ub-card:focus-within .ub-card__icon,
#view-userbase .ub-card:hover .ub-card__quick,
#view-userbase .ub-card:focus-within .ub-card__quick {
  transform: none !important;
  opacity: .78 !important;
  border-color: inherit;
}

/* в”Ђв”Ђ Userbase: card hover kill switch в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#view-userbase .ub-card {
  cursor: pointer;
}

#view-userbase .ub-card,
#view-userbase .ub-card::before,
#view-userbase .ub-card .ub-card__icon,
#view-userbase .ub-card .ub-card__quick,
#view-userbase .ub-card .ub-card__actions,
#view-userbase .ub-card .ub-card__action-ico {
  transition: none !important;
}

#view-userbase .ub-card:hover,
#view-userbase .ub-card:focus-within,
#view-userbase .ub-card:hover::before,
#view-userbase .ub-card:focus-within::before,
#view-userbase .ub-card:hover .ub-card__icon,
#view-userbase .ub-card:focus-within .ub-card__icon,
#view-userbase .ub-card:hover .ub-card__quick,
#view-userbase .ub-card:focus-within .ub-card__quick,
#view-userbase .ub-card:hover .ub-card__actions,
#view-userbase .ub-card:focus-within .ub-card__actions,
#view-userbase .ub-card:hover .ub-card__action-ico,
#view-userbase .ub-card:focus-within .ub-card__action-ico {
  transform: none !important;
}

#view-userbase .ub-card:hover,
#view-userbase .ub-card:focus-within {
  background: #141414 !important;
  border-color: #292929 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

#view-userbase .ub-card:hover::before,
#view-userbase .ub-card:focus-within::before {
  opacity: 0 !important;
}

#view-userbase .ub-card:hover .ub-card__quick,
#view-userbase .ub-card:focus-within .ub-card__quick {
  opacity: .78 !important;
}

/* в”Ђв”Ђ Userbase v2: minimal hooks (full styling lives in style.css) в”Ђв”Ђ */
#view-userbase.view-userbase.view-userbase--v2 {
  /* Reset legacy .view-userbase black-theme bleed-through */
  background: var(--bg-app) !important;
  color: var(--text) !important;
  align-items: stretch;
  /* Match paddings used by .view-accounts/.view-tasks/.view-proxy
     to avoid horizontal "jump" when switching modules. */
  padding: 20px 28px 96px !important;
}

#view-userbase.view-userbase.view-userbase--v2 > .ub2 {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

#view-userbase.view-userbase.view-userbase--v2 #ub2-tbody tr[data-id] {
  cursor: pointer;
}

#view-userbase.view-userbase.view-userbase--v2 #ub2-tbody tr[data-id]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .45);
  outline-offset: -2px;
}



/* в”Ђв”Ђ Userbase create modal backdrop tint в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Тинт подложки держится и ночью — ночь этот фон сильнее НЕ затемняет,
   у обоих окон заведения базы он один, как у addw. Вес нужен именно такой:
   пока правило стояло на id, оно било ночное `html body.theme-dark
   .modal__backdrop` (0,2,2) весом самого id; на классе семьи (0,2,0) оно
   этот спор проиграло, и ночью подложка уезжала в общий rgba(0,0,0,.62).
   Пара html body / html body.theme-dark возвращает перевес классом. */
html body .newbase-modal .modal__backdrop,
html body.theme-dark .newbase-modal .modal__backdrop {
  background: rgba(20, 30, 60, 0.32) !important;
  backdrop-filter: none !important;
}

/* в”Ђв”Ђ Final sidebar/userbase hover stability overrides в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.sidebar.sidebar--v2 .nav-item,
body.theme-dark .sidebar.sidebar--v2 .nav-item {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 8px !important;
  font-weight: 400 !important;
  transform: none !important;
  transition: background-color .12s ease, color .12s ease !important;
}

.sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
.sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  padding: 8px !important;
  transform: none !important;
}

.sidebar.sidebar--v2 .nav-item__icon,
.sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
.sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
}

/* в”Ђв”Ђ Userbase import modal reference layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ub-import-modal .modal__backdrop {
  background: rgba(156, 163, 175, .5) !important;
  backdrop-filter: blur(4px) !important;
}

#ub-import-modal .ub-import-modal {
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: min(600px, calc(100vw - 32px)) !important;
  max-height: min(870px, calc(100vh - 32px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  color: #111827 !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, .24) !important;
}

#ub-import-modal .ub-import-modal .modal__head {
  flex: 0 0 auto !important;
  min-height: 82px !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

#ub-import-modal .ub-import-modal__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#ub-import-modal .ub-import-modal__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #4f46e5;
}

#ub-import-modal .ub-import-modal__icon svg {
  width: 22px;
  height: 22px;
}

#ub-import-modal .ub-import-modal .modal__title {
  margin: 0 !important;
  color: #0f0f10 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

#ub-import-modal .ub-import-modal .icon-btn {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #9ca3af !important;
  cursor: pointer !important;
}

#ub-import-modal .ub-import-modal .icon-btn:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

#ub-import-modal .ub-import-modal .icon-btn svg {
  width: 20px !important;
  height: 20px !important;
}

#ub-import-modal .ub-import-modal .modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
}

#ub-import-modal .ub-import-modal .modal__hint {
  margin: 0 0 24px !important;
  max-width: none !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

#ub-import-modal .ub-import-modal__sessions {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 8px 0 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .18) transparent;
}

#ub-import-modal .ub-import-modal__sessions::-webkit-scrollbar {
  width: 8px;
}

#ub-import-modal .ub-import-modal__sessions::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .02);
  border-radius: 4px;
}

#ub-import-modal .ub-import-modal__sessions::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .1);
  border-radius: 4px;
}

#ub-import-modal .ub-import-modal__sessions::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .2);
}

#ub-import-modal .ub-session {
  min-height: 74px !important;
  padding: 16px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: #0f0f10 !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

#ub-import-modal .ub-session:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  transform: none !important;
  box-shadow: none !important;
}

#ub-import-modal .ub-session__info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

#ub-import-modal .ub-session__ico {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #1d4ed8 !important;
}

#ub-import-modal .ub-session__ico--indigo {
  color: #4f46e5 !important;
}

#ub-import-modal .ub-session__ico svg {
  width: 20px !important;
  height: 20px !important;
}

#ub-import-modal .ub-session__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#ub-import-modal .ub-session__name {
  color: #0f0f10 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ub-import-modal .ub-session__date {
  color: #4b5563 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
}

#ub-import-modal .ub-session__count {
  flex: 0 0 auto;
  color: #0f0f10 !important;
  text-align: right;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}

#ub-import-modal .ub-session__count small {
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

#ub-import-modal .picker-empty {
  min-height: 220px !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  color: #4b5563 !important;
}

@media (max-width: 640px) {
  #ub-import-modal .ub-import-modal .modal__title {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  #ub-import-modal .ub-session {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #ub-import-modal .ub-session__count {
    width: 100%;
    text-align: left;
  }
}

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ *
 *  Airgram redesign (v3): dark slate sidebar + indigo accent UI
 *  Replaces the previous light sidebar pass; matches the proxy mockup.
 * в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* ---------- Sidebar shell ---------- */
.sidebar,
.sidebar.sidebar--v2,
body.theme-dark .sidebar,
body.theme-dark .sidebar.sidebar--v2 {
  background: var(--tp-side-bg-solid) !important;
  background-image: var(--tp-side-bg) !important;
  border-right: 1px solid var(--tp-side-divider) !important;
  color: var(--tp-side-text) !important;
  box-shadow: none !important;
  /* Prevent layout shifts: stable width + scrollbar gutter */
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  flex: 0 0 256px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Hide native scrollbar — overlay scrollbar is drawn on top via JS */
  scrollbar-width: none !important;
  position: relative !important;
}
.sidebar.sidebar--v2::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* Stabilize the app grid so the sidebar never resizes between renders */
@media (min-width: 901px) {
  .app { grid-template-columns: 256px minmax(0, 1fr) !important; }
}

.sidebar__brand,
.sidebar.sidebar--v2 .sidebar__brand {
  border-bottom: 1px solid var(--tp-side-divider) !important;
  background: transparent !important;
  color: var(--tp-side-text-strong) !important;
}


.sidebar__collapse,
.sidebar.sidebar--v2 .sidebar__collapse {
  background: transparent !important;
  border: 0 !important;
  color: var(--tp-side-text) !important;
}
.sidebar__collapse:hover,
.sidebar.sidebar--v2 .sidebar__collapse:hover {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text-strong) !important;
}

/* ---------- Sections + nav items ---------- */
.nav-section,
.sidebar.sidebar--v2 .nav-section { background: transparent !important; }

.nav-section__title,
.sidebar.sidebar--v2 .nav-section__title {
  color: var(--tp-side-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 8px !important;
}

.nav-item,
.sidebar.sidebar--v2 .nav-item,
body.theme-dark .nav-item {
  background: transparent !important;
  color: var(--tp-side-text) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.nav-item:hover:not([disabled]),
.sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .nav-item:hover:not([disabled]) {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text-strong) !important;
  border-color: transparent !important;
}

.nav-item.is-active,
.sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .nav-item.is-active {
  background: var(--tp-accent-soft) !important;
  color: var(--tp-accent) !important;
  border-color: var(--tp-accent-border) !important;
  font-weight: 600 !important;
}

.nav-item__icon,
.sidebar.sidebar--v2 .nav-item__icon {
  background: transparent !important;
  color: var(--tp-side-text) !important;
}
.nav-item:hover .nav-item__icon,
.sidebar.sidebar--v2 .nav-item:hover .nav-item__icon { color: var(--tp-accent) !important; }
.nav-item.is-active .nav-item__icon,
.sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon { color: var(--tp-accent) !important; }

.nav-item__chevron,
.sidebar.sidebar--v2 .nav-item__chevron { color: var(--tp-side-text) !important; opacity: 0.65 !important; }

.nav-item--sub,
.sidebar.sidebar--v2 .nav-item--sub { color: var(--tp-side-text) !important; }
.nav-group__items,
.sidebar.sidebar--v2 .nav-group__items {
  border-left-color: var(--tp-side-divider) !important;
}

.nav-item__badge,
.sidebar.sidebar--v2 .nav-item__badge {
  background: var(--tp-accent) !important;
  color: #fff !important;
  border: 0 !important;
}


.theme-toggle,
.theme-toggle--mini,
.theme-toggle--icon,
.sidebar.sidebar--v2 .theme-toggle,
.sidebar.sidebar--v2 .theme-toggle--mini,
.sidebar.sidebar--v2 .theme-toggle--icon {
  color: var(--tp-side-text) !important;
  background: transparent !important;
}
.theme-toggle:hover,
.theme-toggle--mini:hover,
.theme-toggle--icon:hover {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text-strong) !important;
}

/* Icon-only theme toggle в”Ђ matches sidebar icon buttons (collapse/logout) */

.sidebar .badge,
.sidebar .version,
.sidebar.sidebar--v2 .badge,
.sidebar.sidebar--v2 .version { color: var(--tp-side-muted) !important; }

/* Sidebar scrollbar tones for light surface */
.sidebar,
.sidebar.sidebar--v2 {
  --sidebar-scrollbar-thumb:        rgba(31, 39, 64, 0.18) !important;
  --sidebar-scrollbar-thumb-hover:  rgba(31, 39, 64, 0.30) !important;
  --sidebar-scrollbar-thumb-active: rgba(31, 39, 64, 0.45) !important;
}


/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ *
 *  Proxy module: full-width flat table + inline copy actions
 * в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Container should span the full module width */
.view-proxy .px-table--flat {
  display: block;
  width: 100%;
  position: relative;
  overflow: visible;
}
.view-proxy .px-table--flat:not(.am-table-card) {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.view-proxy .px-flat__scroll {
  width: 100%;
  overflow-x: auto;
}
.view-proxy .am-table-card.px-table--flat .px-flat__scroll {
  border-radius: 0;
}

/* Оболочка таблицы (шрифт, шапка, ячейки, hover/selected) приезжает из
   канонического контракта .app-table в конце файла; здесь остаются только
   отмена легаси-grid, геометрия колонок и сущностные ячейки. */
.view-proxy .px-flat__head,
.view-proxy .px-flat__row {
  display: table-row !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}

.view-proxy .px-flat__row { cursor: pointer; }

/* Column widths (table-layout: fixed): 8 equal columns sharing the full width.
   Compact cells (checkbox/port/accounts/actions) align their content centrally. */
.view-proxy .px-flat__table th,
.view-proxy .px-flat__table td { width: 12.5%; }
.view-proxy .px-flat__table th:nth-child(1),
.view-proxy .px-flat__table td:nth-child(1) { text-align: center; padding-left: 12px; padding-right: 4px; }
.view-proxy .px-flat__table th:nth-child(2),
.view-proxy .px-flat__table td:nth-child(2) { text-align: left; }
.view-proxy .px-flat__table th:nth-child(4),
.view-proxy .px-flat__table td:nth-child(4) { text-align: left; }
.view-proxy .px-flat__table th:nth-child(7),
.view-proxy .px-flat__table td:nth-child(7) { text-align: center; }
.view-proxy .px-flat__table th:nth-child(8),
.view-proxy .px-flat__table td:nth-child(8) { text-align: right; padding-right: 16px; }

/* Чекбоксы строк рисует общий блок v14.6 (Material, --tp-checkbox-*). */
.view-proxy .px-flat__check-cell { vertical-align: middle; }

/* Country cell stays as in base, but ensure flag size */
.view-proxy .px-flat__country {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--app-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.view-proxy .px-flat__country .fi { width: 20px; height: 14px; border-radius: 2px; }

/* Copyable cells: text + inline copy icon (revealed on row hover) */
.view-proxy .px-flat__cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding-right: 24px;
  box-sizing: border-box;
}
.view-proxy .px-flat__cell > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.view-proxy .px-flat__password { color: var(--text-mute); }

/* Inline copy icon — absolutely positioned so it doesn't grow the cell */
.view-proxy .px-inline-copy {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0; padding: 0;
  background: transparent;
  color: var(--text-mute);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.view-proxy .px-inline-copy svg { width: 14px; height: 14px; display: block; flex-shrink: 0; }
.view-proxy .px-flat__row:hover .px-inline-copy,
.view-proxy .px-inline-copy:focus-visible {
  opacity: 1;
}
.view-proxy .px-inline-copy:hover {
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.10);
}


/* Actions cell: Check proxy + Copy as icon+label link-style buttons */
.view-proxy .px-flat__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}
.view-proxy .px-flat__link-action,
.view-proxy .px-flat__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--primary, #2563eb);
  font-family: var(--app-font);
  font-size: 12.5px;
  line-height: 16px;
  font-weight: 500;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.view-proxy .px-flat__link-action svg,
.view-proxy .px-flat__copy svg {
  width: 16px; height: 16px;
  display: block;
  flex-shrink: 0;
}
.view-proxy .px-flat__link-action:hover,
.view-proxy .px-flat__copy:hover { text-decoration: none; }
.view-proxy .px-flat__link-action:hover > span:not(.material-symbols-outlined),
.view-proxy .px-flat__copy:hover > span:not(.material-symbols-outlined) { text-decoration: none; }
.view-proxy .px-flat__link-action .material-symbols-outlined,
.view-proxy .px-flat__copy .material-symbols-outlined { text-decoration: none !important; }

/* Health states inside actions cell */
.view-proxy .px-flat__health {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--app-font);
  font-size: 12px;
  line-height: 15px;
  min-width: 100px;
}
.view-proxy .px-flat__health--ok { color: #10b981; }
.view-proxy .px-flat__health--ok span:first-child { font-weight: 600; }
.view-proxy .px-flat__health--error { color: #ef4444; max-width: 200px; }
.view-proxy .px-flat__health--error span:last-child {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Тёмная тема шапки/строк/чекбоксов — из канонического контракта .app-table. */

/* Stable actions cell — health/check state shouldn't shift columns */
.view-proxy .px-flat__actions {
  width: 100%;
  min-height: 24px;
}
.view-proxy .px-flat__health {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Floating selection toolbar pinned to top-right OUTSIDE the table corner */
.view-proxy .px-select-bar {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(20, 30, 60, 0.18);
  z-index: 5;
  transition: opacity .12s ease, transform .12s ease;
}
.view-proxy .px-select-bar.is-empty {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}
body.theme-dark .view-proxy .px-select-bar { box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5); }

/* Pagination — re-scoped from legacy body.is-proxy-screen */
.view-proxy .px-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-wrap: wrap;
}
.view-proxy .px-pagination[hidden] { display: none; }

/* -- Userbase v2: "пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ" column refined ------------------- */
.view-userbase--v2 .ub2-count__num {
  display: inline-block;
  min-width: 38px;
  margin-right: 8px;
  background: transparent;
  color: var(--text, #1f2430);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* -- Userbase: Import modal — sessions list -- */
#ub-import-modal {
  --ub-accent: #3b82f6;
  --ub-accent-hover: #2563eb;
}
#ub-import-modal .modal__backdrop {
  background: rgba(20, 30, 60, 0.32);
}
#ub-import-modal .modal__panel {
  width: 560px;
  max-width: calc(100vw - 28px);
  max-height: 86vh;
  overflow: hidden;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #2b2b2b !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}
#ub-import-modal .modal__head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 10px 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}
#ub-import-modal .modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2b2b !important;
  letter-spacing: 0;
}
#ub-import-modal .modal__head .edit-profile__nav {
  width: 38px; height: 38px;
}
#ub-import-modal .modal__body {
  padding: 18px 24px 22px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  display: flex; flex-direction: column; gap: 16px;
}
#ub-import-modal .modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: #ffffff;
  border-top: 1px solid var(--border);
}
#ub-import-modal .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#ub-import-modal .btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
#ub-import-modal .btn--ghost:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
#ub-import-modal .btn--primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}
#ub-import-modal .btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  filter: none;
}
#ub-import-modal .ub-sessions {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
  padding-right: 2px;
}
#ub-import-modal .ub-session {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border, #e3e8f0) !important;
  border-radius: 10px !important;
  color: var(--text, #1f2740) !important;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
#ub-import-modal .ub-session:hover {
  background: var(--bg-hover, #eef2f9) !important;
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 1px 4px rgba(20, 30, 60, .06) !important;
}
#ub-import-modal .ub-session__name {
  color: var(--text, #1f2740) !important;
  font-weight: 600;
  font-size: 13.5px;
}
#ub-import-modal .ub-session__count {
  color: var(--primary, #2563eb) !important;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#ub-import-modal .ub-session__count small,
#ub-import-modal .ub-session__date {
  color: var(--text-mute, #6b7494) !important;
  font-weight: 500;
  font-size: 11.5px;
}


/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
 *  Автоответчик: заметные кнопки "Редактировать" вместо blend-in
 * в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Автоответчик: своих правил у экрана нет.
   Модуль живёт по канону страницы запуска (.srch-page) — общий блок стоит
   ниже по файлу. Прежние правила красили кнопки «Редактировать» у карточек
   -шагов; ни карточек, ни кнопок больше нет. */

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
 *  Модалка редактора автоответчика (шаблоны / стоп-слова)
 * в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Окно редактора автоответчика открывается с карточки-ввода, поэтому живёт
   по канону окон страницы запуска (см. :is(…#ar-editor) ниже по файлу):
   белая карточка r28, заголовок 23px/500, поле r8 и пилюли 40px/r20.
   Своя геометрия окна снесена — она спорила с каноном. */




/* ------------------------------------------------------------
   Proxy view пїЅ final unification with accounts/tasks modules
   (overrides earlier body.is-proxy-screen blocks).
   ------------------------------------------------------------ */

/* пїЅ Table stability: fixed columns, no jumping when status changes пїЅ */
body.is-proxy-screen .px-flat__scroll { overflow-x: auto; }
body.is-proxy-screen .view-proxy .px-flat__table,
body.is-proxy-screen .px-flat__table {
  width: 100%;
  min-width: var(--px-table-min-width, 1080px);
  table-layout: fixed;
}

body.is-proxy-screen .px-flat__table th,
body.is-proxy-screen .px-flat__table td {
  padding: 12px 14px;
  vertical-align: middle;
}
body.is-proxy-screen .px-flat__table th {
  font-family: var(--app-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute, #6b7494);
  background: var(--bg-app, #f4f6fb);
  border-bottom: 1px solid var(--border, #e6e9ef);
}
body.is-proxy-screen .px-flat__table tbody td {
  font-family: var(--app-font);
  font-size: 13px;
  color: var(--text, #1f2740);
  border-bottom: 1px solid var(--border, #e6e9ef);
}

/* Column widths (10 columns: check, country, type, host, port, user, pass, status, accounts, actions) */
body.is-proxy-screen .px-flat__table th:nth-child(1),
body.is-proxy-screen .px-flat__table td:nth-child(1) { width: 40px;  text-align: center; padding: 12px 6px; }
body.is-proxy-screen .px-flat__table th:nth-child(2),
body.is-proxy-screen .px-flat__table td:nth-child(2) { width: 108px; }
body.is-proxy-screen .px-flat__table th:nth-child(3),
body.is-proxy-screen .px-flat__table td:nth-child(3) { width: 84px; }
body.is-proxy-screen .px-flat__table th:nth-child(4),
body.is-proxy-screen .px-flat__table td:nth-child(4) { width: auto; }
body.is-proxy-screen .px-flat__table th:nth-child(5),
body.is-proxy-screen .px-flat__table td:nth-child(5) { width: 76px; }
body.is-proxy-screen .px-flat__table th:nth-child(6),
body.is-proxy-screen .px-flat__table td:nth-child(6) { width: 150px; }
body.is-proxy-screen .px-flat__table th:nth-child(7),
body.is-proxy-screen .px-flat__table td:nth-child(7) { width: 150px; }
body.is-proxy-screen .px-flat__table th:nth-child(8),
body.is-proxy-screen .px-flat__table td:nth-child(8) { width: 118px; text-align: center; }
body.is-proxy-screen .px-flat__table th:nth-child(9),
body.is-proxy-screen .px-flat__table td:nth-child(9) { width: 96px;  text-align: center; }
body.is-proxy-screen .px-flat__table th:nth-child(10),
body.is-proxy-screen .px-flat__table td:nth-child(10) { width: 166px; text-align: right; }

body.is-proxy-screen .px-flat__cell,
body.is-proxy-screen .px-flat__copyable,
body.is-proxy-screen .px-flat__country {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-proxy-screen .px-flat__cell > :first-child,
body.is-proxy-screen .px-flat__copyable > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* пїЅ Status dot + stable actions cell пїЅ */
body.is-proxy-screen .px-flat__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  white-space: nowrap;
}
@keyframes pxStatusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

body.is-proxy-screen .px-flat__link-action,
body.is-proxy-screen .px-flat__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--primary, #2563eb);
  font-family: var(--app-font);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
body.is-proxy-screen .px-flat__link-action[disabled] {
  opacity: .65;
  cursor: default;
}
body.is-proxy-screen .px-flat__link-action:hover:not([disabled]),
body.is-proxy-screen .px-flat__copy:hover { background: rgba(37, 99, 235,.10); text-decoration: none; }
body.is-proxy-screen .px-flat__link-action .material-symbols-outlined,
body.is-proxy-screen .px-flat__copy .material-symbols-outlined { font-size: 18px; }

/* Hide the legacy health span entirely (status moves to the dot) */
body.is-proxy-screen .px-flat__health { display: none !important; }

/* пїЅ Country flag + label inline пїЅ */
body.is-proxy-screen .px-flat__country { gap: 8px; font-weight: 500; }
body.is-proxy-screen .px-flat__country .fi { width: 20px; height: 14px; border-radius: 2px; }

/* пїЅ Inline copy buttons: keep neutral footprint so column width is stable пїЅ */
body.is-proxy-screen .px-inline-copy { flex: 0 0 18px; }

/* ==========================================================================
   Unified design baseline (May 2026)
   - Standard hero CTA size + weight (taken from Userbase v2)
   - Proxy stats / search / chips match Task Manager + site design
   - Proxy bulk icons appear only on selection; small count label above table
   - Material Symbols icon-only buttons render glyph (not text)
   ========================================================================== */



/* ---- Proxy search / chips: site design baseline ----------- */

body.is-proxy-screen .px-chip__flag,
body.is-proxy-screen .px-flat__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
}

/* ---- Bulk action bar: small count + icons only on selection */
body.is-proxy-screen .px-select-bar {
  margin: 0 0 8px;
  min-height: 28px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
}


/* ---- Material Symbols glyph buttons must render glyph ----- */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ==========================================================================
   Proxy module — visual fixes (May 2026 follow-up)
   - Selection bar is a static row above the table, count always visible
   - Bulk icons only appear when something is selected (override floating panel)
   - Material Symbols sized to match SVG chip icons (globe no longer huge)
   - Table column widths fit the card, host truncates with ellipsis
   - Status-dot dropped (rendered nothing from JS too)
   - Table cells use JetBrains Mono — the proxy/host/port "data" font
   ========================================================================== */

/* Selection bar: static block above table, never overlaps */
.view-proxy .px-select-bar,
body.is-proxy-screen .px-select-bar {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 4px 4px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 28px;
}
.view-proxy .px-select-bar.is-empty,
body.is-proxy-screen .px-select-bar.is-empty {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}






/* Table: fit the card, host truncates, smaller fixed columns,
   monospace data font for proxy-like feel */
body.is-proxy-screen .px-flat__scroll,
.view-proxy .px-flat__scroll { overflow-x: auto; }
body.is-proxy-screen .px-flat__table,
body.is-proxy-screen .view-proxy .px-flat__table,
.view-proxy .px-flat__table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
body.is-proxy-screen .px-flat__table tbody td,
/* Шрифты ячеек и шапки — канонический контракт .app-table (Google Sans). */

/* Column widths — fit ~960px without scroll. 8 columns:
   1 check | 2 country | 3 host | 4 port | 5 user | 6 pass | 7 accounts | 8 actions */
body.is-proxy-screen .px-flat__table th:nth-child(1),
body.is-proxy-screen .px-flat__table td:nth-child(1) { width: 36px; padding: 12px 4px; text-align: center; }
body.is-proxy-screen .px-flat__table th:nth-child(2),
body.is-proxy-screen .px-flat__table td:nth-child(2) { width: 86px; }
body.is-proxy-screen .px-flat__table th:nth-child(3),
body.is-proxy-screen .px-flat__table td:nth-child(3) { width: auto; min-width: 0; }
body.is-proxy-screen .px-flat__table th:nth-child(4),
body.is-proxy-screen .px-flat__table td:nth-child(4) { width: 64px; }
body.is-proxy-screen .px-flat__table th:nth-child(5),
body.is-proxy-screen .px-flat__table td:nth-child(5) { width: 120px; }
body.is-proxy-screen .px-flat__table th:nth-child(6),
body.is-proxy-screen .px-flat__table td:nth-child(6) { width: 120px; }
body.is-proxy-screen .px-flat__table th:nth-child(7),
body.is-proxy-screen .px-flat__table td:nth-child(7) { width: 84px; text-align: center; }
body.is-proxy-screen .px-flat__table th:nth-child(8),
body.is-proxy-screen .px-flat__table td:nth-child(8) { width: 200px; text-align: right; padding-right: 12px; }

body.is-proxy-screen .px-flat__cell,
body.is-proxy-screen .px-flat__copyable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
body.is-proxy-screen .px-flat__cell > span:first-child,
body.is-proxy-screen .px-flat__copyable > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
body.is-proxy-screen .px-inline-copy { flex: 0 0 auto; }
body.is-proxy-screen .px-inline-copy .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Health action button glyph sizing */
body.is-proxy-screen .px-flat__link-action .material-symbols-outlined,
body.is-proxy-screen .px-flat__copy .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

/* end of file marker check */

/* ============================================================
   2026-05-18 — UI tweaks bundle
   - Proxy: split selection bar (count left always, icons right
     only when selection is non-empty); tighter table columns
   - Tasks: bigger delete icon; smaller refresh icon
   ============================================================ */

/* в”Ђв”Ђ Proxy: split selection bar (count + actions) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Override the legacy absolute-positioned bar so it lives above
   the table in normal flow: count on the left, action icons on
   the right (visible only when a selection exists). */
.view-proxy .px-select-bar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 6px;
  margin: 0 0 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  min-height: 32px;
}
.view-proxy .px-select-bar.is-empty {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* в”Ђв”Ђ Proxy table: tighter columns so it fits on screen в”Ђв”Ђв”Ђв”Ђв”Ђ */
.view-proxy .px-flat__table { table-layout: auto; }
.view-proxy .px-flat__table th:nth-child(4),
.view-proxy .px-flat__table td:nth-child(4) {
  width: 26%;
  max-width: none;
}
.view-proxy .px-flat__table th:nth-child(6),
.view-proxy .px-flat__table td:nth-child(6),
.view-proxy .px-flat__table th:nth-child(7),
.view-proxy .px-flat__table td:nth-child(7) {
  width: 18%;
  max-width: none;
}
/* Host: hard cap so very long hostnames are truncated, not stretched */
.view-proxy .px-flat__table td:nth-child(4) .px-flat__cell,
.view-proxy .px-flat__table td:nth-child(7) .px-flat__cell,
.view-proxy .px-flat__table td:nth-child(6) .px-flat__cell {
  max-width: 100%;
  overflow: hidden;
}
.view-proxy .px-flat__scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Proxy table final reset
   Single source of truth for the current 6-column table. This block must stay
   at the end of ui_tweaks.css so older grid/table experiments above cannot win.
   Отдельной колонки-чекбокса больше нет: чекбокс строки встроен в ячейку Country
   (как в аккаунтах), поэтому Country — первая колонка. Колонки Actions тоже нет:
   действия строки живут оверлеем в ячейке пароля и всплывают при наведении
   (см. блок «Proxy row actions overlay» в самом конце файла).
   -------------------------------------------------------------------------- */
body.is-proxy-screen .view-proxy {
  /* Гибкие колонки как в аккаунтах: чекбокс фиксирован, остальные тянутся
     долями ширины таблицы (сумма = 100%). Таблица занимает ровно свой вьюпорт
     (width:100%), поэтому содержимое не уезжает за экран, а host больше не
     раздувается — он равен user/pass. Каждая доля правится тут по отдельности. */
  --px-table-min-width: 720px;
  /* Гибкие доли ширины: сумма = 100%, таблица тянется на всю ширину контейнера
     (width:100%) и не уезжает за экран. Чекбокс строки встроен в ячейку Country
     (как в аккаунтах), отдельной колонки под него нет — поэтому Country первая
     и чуть шире (держит чекбокс + флаг + код). Каждую колонку правим её долей. */
  --px-col-country: 22%;
  --px-col-type: 12%;
  --px-col-host: 20%;
  --px-col-port: 11%;
  --px-col-user: 18%;
  --px-col-pass: 17%;
}

body.is-proxy-screen .view-proxy .px-table--flat {
  /* Flex-колонка, как карточка аккаунтов: таблица владеет первым вьюпортом,
     вертикально скроллится .am-table-shell внутри (см. блок «PROXY =
     ACCOUNTS» ниже). */
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  background: var(--card, #fff) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.is-proxy-screen .view-proxy .px-flat__scroll {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: var(--card, #fff) !important;
  -webkit-overflow-scrolling: touch;
}

body.is-proxy-screen .view-proxy .px-flat__table {
  width: 100% !important;
  min-width: max(100%, var(--px-table-min-width, 1100px)) !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  text-align: left !important;
}


/* Шрифт таблицы (Google Sans) — канонический контракт .app-table; локальный
   Inter-override снят, иконочные шрифты контракт исключает сам. */
body.is-proxy-screen .view-proxy .px-flat__table .material-symbols-outlined { font-style: normal !important; }

/* Type column: plain text, no pill */
body.is-proxy-screen .view-proxy .px-flat__type {
  display: inline-block;
  color: var(--text, #1f2740);
  font-family: var(--app-font);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
}

/* Статус прокси — скруглённый прямоугольник с внешней обводкой и без заливки
   (форма с референса, не пилюля): внутри только подпись. Тонов у состояния
   два, и оба живут переменными: `--px-status-line` — рамка (тон референса) и
   `--px-status-ink` — подпись (на пару ступеней темнее, иначе 12px читаются
   бледно).

   Размер — ровно как у статуса аккаунта (блок «Статусы аккаунтов»): та же
   рамка 1px, те же отступы 1px/10px и та же строка 20px, никакой своей
   ширины. Собственный пол в 104px статус прокси делал заметно крупнее
   соседнего — один элемент в двух таблицах не бывает разного размера. */
body.is-proxy-screen .view-proxy .px-flat__status {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding: 1px 10px;
  border-radius: 6px;
  font-family: var(--app-font);
  font-size: var(--app-table-meta-size, 12px);
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--px-status-line, #b3bac8);
  color: var(--px-status-ink, #5b6478);
}
/* Лоадер проверки — в начале строки, перед номером, и только там: пилюля
   статуса держит прошлый итог и меняется, когда приедет новый. Место у
   лоадера постоянное — первая колонка закреплена за чекбоксом и номером,
   и порядок колонок её не двигает.

   Скорость .8s linear — та же, что у круга проверки в строке выбора прокси
   (.pxpick-act) и у остальных ожиданий приложения; шкала MOTION §2.2 здесь
   не при чём — это не отклик на действие, а indeterminate-ожидание (§3.7).
   Тон приглушённый: лоадер говорит «идёт», а не спорит со статусом. */
body.is-proxy-screen .view-proxy .px-flat__row-spin { display: none; }
body.is-proxy-screen .view-proxy .px-flat__row.is-checking .px-flat__row-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor;
  color: var(--text-mute, #6b7494);
  animation: px-row-spin .8s linear infinite;
}
@keyframes px-row-spin { to { transform: rotate(360deg); } }
/* Просили убрать анимации — выключаем цикл целиком, а не ускоряем: бесконечный
   цикл на 0.01ms дал бы стробоскоп (MOTION.md §3.7, §4). Кольцо остаётся —
   разомкнутый круг и без вращения отличает строку под проверкой. */
@media (prefers-reduced-motion: reduce) {
  body.is-proxy-screen .view-proxy .px-flat__row.is-checking .px-flat__row-spin {
    animation: none !important;
  }
}
/* Палитра состояний — по два тона на состояние: рамка живая, как на
   референсе, подпись темнее. Одним тоном на оба не выходит: живой зелёный
   держит вид рамки, но подпись 12px им читается бледной, а канонический
   тёмный #137a3c в рамке выглядит серо-зелёным. Тона подписи — те же, что у
   пилюли статуса в аккаунтах, так что зелёный и красный по-прежнему значат
   одно и то же в любой таблице. */
body.is-proxy-screen .view-proxy .px-flat__status--ok {
  --px-status-line: #4caf50;
  --px-status-ink: #1a7f37;
}
body.is-proxy-screen .view-proxy .px-flat__status--error {
  --px-status-line: #e05252;
  --px-status-ink: #b42525;
}
body.is-proxy-screen .view-proxy .px-flat__status--untested {
  --px-status-line: #b3bac8;
  --px-status-ink: #5b6478;
}

/* Ховер-переход и фон шапки/строк — канонический контракт .app-table
   (конец файла); здесь остаётся только отмена легаси-grid. */
body.is-proxy-screen .view-proxy .px-flat__head,
body.is-proxy-screen .view-proxy .px-flat__row {
  display: table-row !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

body.is-proxy-screen .view-proxy .px-flat__table th,
body.is-proxy-screen .view-proxy .px-flat__table td {
  box-sizing: border-box;
  vertical-align: middle !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Шапка (белый фон, линия сверху и снизу, 44px, uppercase, глифы сортировки,
   Google Sans) — канонический контракт .app-table в конце файла. Локальная
   липкость снята: вертикально скроллится .am-table-shell, закреплён только
   тулбар — как в аккаунтах. */

/* Ячейки (12px 16px, 13px, разделители), hover и выделение строк — канонический
   контракт .app-table + Gmail-паритет строк (блок «PROXY = ACCOUNTS» ниже). */

/* Country — первая колонка со встроенным чекбоксом (как в аккаунтах); левый
   инсет 16px даёт канонический контракт .app-table td:first-child. */
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(1),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(1) { width: var(--px-col-country); overflow: visible !important; text-overflow: clip !important; }
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(2),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(2) { width: var(--px-col-type); text-align: left !important; }
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(3),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(3) { width: var(--px-col-host); text-align: left !important; }
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(4),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(4) { width: var(--px-col-port); overflow: visible !important; text-overflow: clip !important; }
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(5),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(5) { width: var(--px-col-user); }
body.is-proxy-screen .view-proxy .px-flat__table th:nth-child(6),
body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(6) { width: var(--px-col-pass); }

/* Чекбокс строки встроен в ячейку Country (как колонка «Аккаунты» сворачивает
   чекбокс в себя). Раскладка инлайновая — td остаётся table-cell, табличная
   геометрия не ломается. Левый инсет 16px даёт .app-table td:first-child. */
body.is-proxy-screen .view-proxy .px-flat__check-cell {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
body.is-proxy-screen .view-proxy .px-flat__country-cell .px-flat__country {
  vertical-align: middle !important;
}
/* Первый столбец Country встаёт на ту же линию 15.5px, что и мастер-чекбокс
   тулбара и первый таб (блок «Lead column alignment»), — чтобы встроенный
   чекбокс строки совпадал с мастер-чекбоксом, как в аккаунтах. */
html body.is-proxy-screen .view-proxy .px-flat__table th:first-child,
html body.is-proxy-screen .view-proxy .px-flat__table td:first-child {
  padding-left: var(--px-check-align, 15.5px) !important;
}

/* Ход проверки прокси в баре не пишется словами: пока идёт проверка, значок
   кнопки крутится, а сколько пройдено — видно по кольцам в самих строках
   таблицы. Итог приезжает уведомлением (showProxyCheckSummary).

   Значок и есть кольцо из двух стрелок (autorenew), и неподвижное кольцо на
   запертой кнопке читается как «замерло». Круг общий — picker-refresh-spin,
   тот же, что у «Обновить список» в этом же баре, и скорость общая —
   .8s linear: ожидание в программе крутится одинаково (MOTION.md §3.7 —
   это не отклик на действие, а indeterminate-ожидание, шкала §2.2 здесь не
   при чём). Кнопка при этом по-прежнему гаснет и блокируется. */
html body.is-proxy-screen .view-proxy #px-sel-check.is-checking,
html body.is-proxy-screen .view-proxy #px-check-all.is-checking {
  opacity: .75 !important;
}
html body.is-proxy-screen .view-proxy #px-sel-check.is-checking svg,
html body.is-proxy-screen .view-proxy #px-check-all.is-checking svg {
  animation: picker-refresh-spin .8s linear infinite !important;
}
/* Просили убрать анимации — выключаем цикл целиком, а не ускоряем: бесконечный
   цикл на 0.01ms дал бы стробоскоп (MOTION.md §3.7, §4). Ход проверки при
   этом не теряется — его ведут кольца в строках таблицы, а итог приезжает
   уведомлением. */
@media (prefers-reduced-motion: reduce) {
  html body.is-proxy-screen .view-proxy #px-sel-check.is-checking svg,
  html body.is-proxy-screen .view-proxy #px-check-all.is-checking svg {
    animation: none !important;
  }
}

body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: initial !important;
  border-radius: initial !important;
  background: initial !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: static !important;
  vertical-align: middle !important;
}

body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover {
  border-color: initial !important;
}

body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate {
  background: initial !important;
  border-color: initial !important;
}

body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked::after {
  content: none !important;
  display: none !important;
}

body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate::after {
  content: none !important;
  display: none !important;
}

body.is-proxy-screen .view-proxy .px-flat__country,
body.is-proxy-screen .view-proxy .px-flat__cell,
body.is-proxy-screen .view-proxy .px-flat__copyable {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.is-proxy-screen .view-proxy .px-flat__country {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--text, #1f2740) !important;
  font-family: var(--app-font) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 18px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.is-proxy-screen .view-proxy .px-flat__flag,
body.is-proxy-screen .view-proxy .px-flat__flag-placeholder {
  width: 20px !important;
  height: 14px !important;
  border-radius: 2px !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
}

body.is-proxy-screen .view-proxy .px-flat__flag-placeholder {
  display: inline-block !important;
  background: var(--bg-row-hover, #edf0f6) !important;
}

body.is-proxy-screen .view-proxy .px-flat__cell {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  max-width: 100% !important;
  padding-right: 0 !important;
}

body.is-proxy-screen .view-proxy .px-flat__cell > span:first-child,
body.is-proxy-screen .view-proxy .px-flat__copyable > span:first-child {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.is-proxy-screen .view-proxy .px-flat__table td:nth-child(5) .px-flat__cell > span:first-child {
  flex: 0 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


body.is-proxy-screen .view-proxy .px-inline-copy {
  position: static !important;
  transform: none !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-mute, #6b7494) !important;
  cursor: pointer !important;
  opacity: 0 !important;
}

body.is-proxy-screen .view-proxy .px-flat__row:hover .px-inline-copy,
body.is-proxy-screen .view-proxy .px-inline-copy:focus-visible { opacity: 1 !important; }

body.is-proxy-screen .view-proxy .px-inline-copy:hover {
  background: rgba(37, 99, 235, .10) !important;
  color: var(--primary, #2563eb) !important;
}

body.is-proxy-screen .view-proxy .px-inline-copy .material-symbols-outlined {
  font-size: 15px !important;
  line-height: 1 !important;
}


body.is-proxy-screen .view-proxy .px-flat__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 22px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.is-proxy-screen .view-proxy .px-flat__health,
body.is-proxy-screen .view-proxy .px-flat__link-action,
body.is-proxy-screen .view-proxy .px-flat__copy {
  border: 0 !important;
  background: transparent !important;
  color: var(--primary, #2563eb) !important;
  font-family: var(--app-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

body.is-proxy-screen .view-proxy .px-flat__link-action,
body.is-proxy-screen .view-proxy .px-flat__copy,
body.is-proxy-screen .view-proxy .px-flat__health-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body.is-proxy-screen .view-proxy .px-flat__link-action,
body.is-proxy-screen .view-proxy .px-flat__health {
  max-width: calc(100% - 42px) !important;
}

body.is-proxy-screen .view-proxy .px-flat__copy {
  flex: 0 0 auto !important;
}

body.is-proxy-screen .view-proxy .px-flat__health {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

body.is-proxy-screen .view-proxy .px-flat__health-main > span:not(.material-symbols-outlined),
body.is-proxy-screen .view-proxy .px-flat__link-action > span:not(.material-symbols-outlined) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.is-proxy-screen .view-proxy .px-flat__health--ok { color: #10b981 !important; }
body.is-proxy-screen .view-proxy .px-flat__health--error { color: #ef4444 !important; }
body.is-proxy-screen .view-proxy .px-flat__health:hover,
body.is-proxy-screen .view-proxy .px-flat__link-action:hover,
body.is-proxy-screen .view-proxy .px-flat__copy:hover { text-decoration: none !important; }
body.is-proxy-screen .view-proxy .px-flat__health:hover .px-flat__health-main > span:not(.material-symbols-outlined),
body.is-proxy-screen .view-proxy .px-flat__link-action:hover > span:not(.material-symbols-outlined),
body.is-proxy-screen .view-proxy .px-flat__copy:hover > span:not(.material-symbols-outlined) {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
body.is-proxy-screen .view-proxy .px-flat__health .material-symbols-outlined,
body.is-proxy-screen .view-proxy .px-flat__link-action .material-symbols-outlined,
body.is-proxy-screen .view-proxy .px-flat__copy .material-symbols-outlined {
  text-decoration: none !important;
}

body.is-proxy-screen .view-proxy .px-flat__link-action[disabled] {
  opacity: .7 !important;
  cursor: default !important;
  text-decoration: none !important;
}

body.is-proxy-screen .view-proxy .px-flat__health .material-symbols-outlined,
body.is-proxy-screen .view-proxy .px-flat__link-action .material-symbols-outlined,
body.is-proxy-screen .view-proxy .px-flat__copy .material-symbols-outlined {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

body.theme-dark.is-proxy-screen .view-proxy .px-table--flat,
body.theme-dark.is-proxy-screen .view-proxy .px-flat__table th {
  background: var(--bg-card) !important;
}
body.theme-dark.is-proxy-screen .view-proxy .px-flat__table td {
  background: transparent !important;
}

body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr:hover {
  background: rgba(255, 255, 255, .04) !important;
}
body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr:hover td {
  background: transparent !important;
}

@media (max-width: 900px) {
  body.is-proxy-screen .view-proxy { --px-table-min-width: 720px; }
  body.is-proxy-screen .view-proxy .px-flat__table th,
  body.is-proxy-screen .view-proxy .px-flat__table td { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ------------------------------------------------------------------------- *
 *  Sidebar пїЅ Telegram Desktop look
 *  Flat single-list with thin dividers between groups,
 *  monochrome line icons, larger row height.
 * ------------------------------------------------------------------------- */

/* Hide section headings entirely */
.sidebar.sidebar--v2 .nav-section__title { display: none !important; }

/* Sections become flat list with hairline divider between groups */
.sidebar.sidebar--v2 .nav-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider, rgba(31,39,64,0.10)) !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top-color: rgba(255,255,255,0.07) !important;
}

/* Telegram-style row: full-width highlight with fixed metrics. */
.sidebar.sidebar--v2 .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 22px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  background: transparent !important;
  color: var(--tp-side-text-strong, #1f2740) !important;
  transform: none !important;
  transition: background-color .12s ease !important;
}
.sidebar.sidebar--v2 .nav-item[disabled] { opacity: 0.45 !important; }

/* Monochrome Telegram-style line icons; no colored tiles. */
.sidebar.sidebar--v2 .nav-item__icon,
.sidebar.sidebar--v2 .nav-item__icon[data-tone] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: currentColor !important;
  opacity: 0.78 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .12s ease, color .12s ease !important;
}
.sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.6 !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Label */
.sidebar.sidebar--v2 .nav-item__label {
  flex: 1 1 auto !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hover / active: only the row background changes. */
.sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
.sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: var(--tp-side-bg-hover, rgba(31,39,64,0.06)) !important;
  color: var(--tp-side-text-strong, #1f2740) !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  transform: none !important;
}
.sidebar.sidebar--v2 .nav-item:hover:not([disabled]) .nav-item__icon {
  opacity: 1 !important;
}
.sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--tp-accent-soft, rgba(51,144,236,0.12)) !important;
  color: var(--tp-accent, #3390ec) !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  transform: none !important;
}
.sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  color: var(--tp-accent, #3390ec) !important;
  opacity: 1 !important;
}

/* Badge stays compact on the right */
.sidebar.sidebar--v2 .nav-item__badge {
  margin-left: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tighten nav container so groups sit flush like Telegram.
   The sidebar itself owns the scrollbar, so disable the inner one.
   Use flex: 0 0 auto so nav takes its content height and items don't
   visually overflow into the footer area. */
.sidebar.sidebar--v2 .sidebar__nav {
  padding: 0 0 8px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
  gap: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
/* Final Telegram hover lock: full-width rows, no metric changes on hover. */
body .sidebar.sidebar--v2 .sidebar__nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
body .sidebar.sidebar--v2 .nav-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}
body .sidebar.sidebar--v2 .nav-item,
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
body .sidebar.sidebar--v2 .nav-item.is-active {
  width: 100% !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  transform: none !important;
  transition: background-color .12s ease !important;
}
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: var(--tp-side-bg-hover, rgba(31,39,64,0.06)) !important;
  color: var(--tp-side-text-strong, #1f2740) !important;
}
body .sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--tp-accent-soft, rgba(51,144,236,0.12)) !important;
  color: var(--tp-accent, #3390ec) !important;
}

/* Telegram-style thin icons: uniform 22px box, 20px glyph, 1.5px stroke, no tinted background. */
body .sidebar.sidebar--v2 .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item__icon[data-tone] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: currentColor !important;
  opacity: 0.72 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .12s ease, color .12s ease !important;
}
body .sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  stroke: currentColor !important;
  display: block !important;
}
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]) .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  opacity: 1 !important;
}
/* Slightly tighter row gap between icon and label, like Telegram */
body .sidebar.sidebar--v2 .nav-item {
  gap: 16px !important;
}


/* =========================================================================
   Sidebar — Dark theme tokens (Telegram Dark)
   Override --tp-side-* and --tp-accent* tokens so the sidebar truly switches
   to a dark palette instead of inheriting the light slate-blue gradient.
   ========================================================================= */
body.theme-dark {
  --tp-side-bg:           linear-gradient(180deg, #17212b 0%, #17212b 100%);
  --tp-side-bg-solid:     #17212b;
  --tp-side-bg-soft:      #1c2733;
  --tp-side-bg-hover:     rgba(255, 255, 255, 0.06);
  --tp-side-text:         #c9d1d9;
  --tp-side-text-strong:  #ffffff;
  --tp-side-muted:        #7a8895;
  --tp-side-divider:      #0f1923;
  --tp-accent:            #5ca6ff;
  --tp-accent-hover:      #7ab8ff;
  --tp-accent-soft:       rgba(92, 166, 255, 0.16);
  --tp-accent-border:     rgba(92, 166, 255, 0.30);
}

/* Make sure the sidebar shell, brand, footer, and items pick up the new tokens
   in dark mode (the original rules already use the same vars, but some have
   theme-dark-prefixed overrides higher up; this block ensures the tokens win). */
body.theme-dark .sidebar,
body.theme-dark .sidebar.sidebar--v2 {
  background: var(--tp-side-bg-solid) !important;
  background-image: var(--tp-side-bg) !important;
  border-right: 1px solid var(--tp-side-divider) !important;
  color: var(--tp-side-text) !important;
  box-shadow: none !important;
}
body.theme-dark .sidebar.sidebar--v2 .sidebar__brand,
body.theme-dark .sidebar.sidebar--v2 .sidebar__title {
  color: var(--tp-side-text-strong) !important;
  border-bottom-color: var(--tp-side-divider) !important;
}
body.theme-dark .sidebar.sidebar--v2 .sidebar__user-mail,
body.theme-dark .sidebar.sidebar--v2 .version { color: var(--tp-side-muted) !important; }

/* Nav items in dark mode (override the body.theme-dark rules above) */
body.theme-dark .sidebar.sidebar--v2 .nav-item,
body.theme-dark .nav-item {
  background: transparent !important;
  color: var(--tp-side-text) !important;
  border: 0 !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
body.theme-dark .nav-item:hover:not([disabled]) {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text-strong) !important;
  border: 0 !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .nav-item.is-active {
  background: var(--tp-accent-soft) !important;
  color: var(--tp-accent) !important;
  border: 0 !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg {
  color: var(--tp-side-text) !important;
  stroke: currentColor !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg {
  color: var(--tp-side-text-strong) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  color: var(--tp-accent) !important;
}

/* Disabled items (e.g. Updates) muted in dark mode */
body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled] {
  color: var(--tp-side-muted) !important;
  opacity: 0.55 !important;
}

/* Dividers between sections — full-width inside negative-margin nav */
body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider) !important;
}

/* Custom overlay scrollbar (sync'd by JS in index.html).
   Track + thumb sit on top of the sidebar content so nav items keep their
   full 256px width and hover highlights/dividers reach the edge. */
.sidebar.sidebar--v2 .sb-scroll {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 2px;
  width: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 220ms ease, background-color 150ms ease;
  pointer-events: none;
  z-index: 10;
}
.sidebar.sidebar--v2.sb-has-scroll .sb-scroll { opacity: 1; }
.sidebar.sidebar--v2 .sb-scroll__thumb {
  position: absolute;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
  transition: background-color 150ms ease, width 150ms ease, left 150ms ease;
  pointer-events: auto;
  cursor: pointer;
}
.sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
.sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: rgba(0, 0, 0, 0.42);
}
body.theme-dark .sidebar.sidebar--v2 .sb-scroll { background: rgba(255, 255, 255, 0.06); }
body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb { background: rgba(255, 255, 255, 0.22); }
body.theme-dark .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: rgba(255, 255, 255, 0.38);
}

/* Custom scrollbar so the gutter doesn't look like a white slab in dark mode */
.sidebar.sidebar--v2 { scrollbar-width: none; }

/* Brand/footer separators in light mode — keep them aligned to the sidebar edges */
.sidebar.sidebar--v2 .sidebar__brand {
  border-color: var(--tp-side-divider) !important;
}

/* =========================================================================
   Sidebar v4 пїЅ Telegram Desktop exact: burger + search top, gray-only hover,
   night-mode as nav row with toggle, Telegram Boost footer.
   ========================================================================= */

/* --- Hide old chrome that we removed from HTML --- */
body .sidebar.sidebar--v2 .sidebar__brand,
body .sidebar.sidebar--v2 .sidebar__user,
body .sidebar.sidebar--v2 .sidebar__user-logout,
body .sidebar.sidebar--v2 .theme-toggle--icon { display: none !important; }

/* --- Top bar: burger + search --- */
body .sidebar.sidebar--v2 .sidebar__topbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 8px 8px 4px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}


/* --- Nav items: lighter Telegram font, smaller rows, gray-only hover/active --- */
body .sidebar.sidebar--v2 .sidebar__nav { gap: 0 !important; padding: 4px 0 6px !important; margin: 0 !important; }
body .sidebar.sidebar--v2 .nav-section { gap: 0 !important; padding: 0 !important; }
body .sidebar.sidebar--v2 .nav-section + .nav-section { border-top: 1px solid var(--tp-side-divider, #e1e5ee) !important; padding-top: 4px !important; margin-top: 4px !important; }

body .sidebar.sidebar--v2 .nav-item,
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
body .sidebar.sidebar--v2 .nav-item.is-active {
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--tp-side-text-strong, #232b3e) !important;
  background: transparent !important;
  transform: none !important;
  transition: background-color .12s ease !important;
}

/* Hover & active: ONLY background overlay, never recolor icon/text */
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: var(--tp-side-bg-hover, rgba(0,0,0,0.05)) !important;
  color: var(--tp-side-text-strong, #232b3e) !important;
}
body .sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--tp-side-bg-hover, rgba(0,0,0,0.05)) !important;
  color: var(--tp-side-text-strong, #232b3e) !important;
}

/* Icons: dark mono color always; opacity slightly down at rest, full on hover/active */
body .sidebar.sidebar--v2 .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item__icon[data-tone],
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tp-side-text, #5a6478) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
}
body .sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Disabled item пїЅ no hover effect at all, no flicker, no pointer churn */
body .sidebar.sidebar--v2 .nav-item[disabled],
body .sidebar.sidebar--v2 .nav-item[disabled]:hover {
  background: transparent !important;
  color: var(--tp-side-muted, #a0a8bd) !important;
  cursor: default !important;
  opacity: 0.55 !important;
  transition: none !important;
}
body .sidebar.sidebar--v2 .nav-item[disabled] * { pointer-events: none !important; }
body .sidebar.sidebar--v2 .nav-item[disabled] .nav-item__icon { color: var(--tp-side-muted, #a0a8bd) !important; }

/* Task badge: visible ONLY when not [hidden] пїЅ JS toggles `hidden` attr */
body .sidebar.sidebar--v2 .nav-item__badge[hidden] { display: none !important; }
body .sidebar.sidebar--v2 .nav-item__badge {
  margin-left: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: var(--tp-accent, #3390ec) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* --- Night-mode toggle row (nav-item--toggle) --- */
body .sidebar.sidebar--v2 .nav-item--toggle .nav-item__label { flex: 1 1 auto !important; }
body .sidebar.sidebar--v2 .nav-item__switch {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  position: relative !important;
  display: inline-block !important;
  width: 34px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--tp-side-divider, #cdd3e1) !important;
  transition: background-color .15s ease !important;
}
body .sidebar.sidebar--v2 .nav-item__switch-knob {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
  transition: transform .15s ease !important;
}
body.theme-dark .sidebar.sidebar--v2 #theme-toggle .nav-item__switch {
  background: var(--tp-accent, #5ca6ff) !important;
}
/* Включённое положение бегунка задаёт ТОЛЬКО `left` — он же и анимируется
   (см. блок «Toggle switch» ниже, дорожка 32px, бегунок 14px, left: 16px).
   Здесь раньше стоял ещё и `transform: translateX(16px)`: он остался от
   прошлого поколения переключателя с дорожкой 34px и сдвигом трансформом.
   Правила разные по свойству, поэтому не спорили, а СКЛАДЫВАЛИСЬ — 16px
   от `left` плюс 16px от трансформа, и в ночи бегунок уезжал на 32px,
   то есть целиком за пределы дорожки. Одно положение — одно свойство. */


/* --- Dark theme variants for top bar / search / app info / dividers --- */
body.theme-dark .sidebar.sidebar--v2 .nav-item,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active { color: var(--tp-side-text-strong) !important; }
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active { background: var(--tp-side-bg-hover) !important; }
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon { color: var(--tp-side-text) !important; }
body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled],
body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled] .nav-item__icon { color: var(--tp-side-muted) !important; }
body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section { border-top-color: var(--tp-side-divider) !important; }
body.theme-dark .sidebar.sidebar--v2 .nav-item__switch { background: rgba(255,255,255,0.16) !important; }

/* --- Scrollbar: always visible when overflow, no fade-in flicker --- */
.sidebar.sidebar--v2 .sb-scroll { transition: background-color 150ms ease !important; opacity: 1 !important; }
.sidebar.sidebar--v2:not(.sb-has-scroll) .sb-scroll { opacity: 0 !important; pointer-events: none !important; }

/* v4 patch: full-width nav + hide leftover collapse button */
body .sidebar.sidebar--v2 .sidebar__nav { margin: 4px -8px 6px !important; }
body .sidebar.sidebar--v2 .sidebar__collapse,
body .sidebar.sidebar--v2 #sidebar-collapse { display: none !important; }
/* Ensure topbar has no negative margin so burger+search sit nicely inside sidebar padding */
body .sidebar.sidebar--v2 .sidebar__topbar { margin: 0 -4px 0 0 !important; }

/* v4 fix: hover/active use literal light-gray (Telegram-style), not the blue-tinted token */
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
body .sidebar.sidebar--v2 .nav-item.is-active {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ====================================================================
   Sidebar v5 пїЅ fixed shell, independent nav scroll, identical L/D padding
   ==================================================================== */

/* Make the sidebar a fixed-height flex column. Outer sidebar never scrolls;
   only the .sidebar__nav slot scrolls. Topbar + footer stay fixed. */
body .sidebar.sidebar--v2 {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 8px 8px !important;
  gap: 0 !important;
}
body.theme-dark .sidebar.sidebar--v2 {
  padding: 12px 8px 8px !important;
}
body .sidebar.sidebar--v2 .sidebar__topbar { flex: 0 0 auto !important; }
body .sidebar.sidebar--v2 .sidebar__nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  scrollbar-width: none !important;
}
body .sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar { width: 0 !important; height: 0 !important; }


/* Overlay scrollbar lives INSIDE .sidebar__nav now; keep it pinned to the
   visible viewport via JS setting track.style.top each frame. */
body .sidebar.sidebar--v2 .sidebar__nav .sb-scroll {
  position: absolute !important;
  right: 2px !important;
  width: 4px !important;
  height: calc(100% - 8px) !important;
  top: 4px !important;
  bottom: auto !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  transition: opacity 120ms ease, background-color 150ms ease !important;
}
/* Show only when nav content actually overflows */
body .sidebar.sidebar--v2:not(.sb-has-scroll) .sidebar__nav .sb-scroll {
  opacity: 0 !important;
}
body .sidebar.sidebar--v2.sb-has-scroll .sidebar__nav .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Burger collapse пїЅ hide sidebar, expand main column */
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app { grid-template-columns: 0 minmax(0, 1fr) !important; }
}

/* ====================================================================
   Sidebar v5 пїЅ fixed shell, independent nav scroll, identical L/D padding
   ==================================================================== */

/* Make the sidebar a fixed-height flex column. Outer sidebar never scrolls;
   only the .sidebar__nav slot scrolls. Topbar + footer stay fixed. */
body .sidebar.sidebar--v2 {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 8px 8px !important;
  gap: 0 !important;
}
body.theme-dark .sidebar.sidebar--v2 {
  padding: 12px 8px 8px !important;
}
body .sidebar.sidebar--v2 .sidebar__topbar { flex: 0 0 auto !important; }
body .sidebar.sidebar--v2 .sidebar__nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  scrollbar-width: none !important;
}
body .sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar { width: 0 !important; height: 0 !important; }


/* Overlay scrollbar lives INSIDE .sidebar__nav now; keep it pinned to the
   visible viewport via JS setting track.style.top each frame. */
body .sidebar.sidebar--v2 .sidebar__nav .sb-scroll {
  position: absolute !important;
  right: 2px !important;
  width: 4px !important;
  height: calc(100% - 8px) !important;
  top: 4px !important;
  bottom: auto !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  transition: opacity 120ms ease, background-color 150ms ease !important;
}
/* Show only when nav content actually overflows */
body .sidebar.sidebar--v2:not(.sb-has-scroll) .sidebar__nav .sb-scroll {
  opacity: 0 !important;
}
body .sidebar.sidebar--v2.sb-has-scroll .sidebar__nav .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Burger collapse пїЅ hide sidebar, expand main column */
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app { grid-template-columns: 0 minmax(0, 1fr) !important; }
}

/* v5 patch: keep burger reachable while sidebar is collapsed */
body.sidebar-collapsed .sidebar.sidebar--v2 { visibility: visible !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__menu-btn { visibility: visible !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search { display: none !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 12px 6px 8px !important;
  border-right-width: 1px !important;
  overflow: visible !important;
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app { grid-template-columns: 56px minmax(0, 1fr) !important; }
}

/* v5 patch: keep burger reachable while sidebar is collapsed */
body.sidebar-collapsed .sidebar.sidebar--v2 { visibility: visible !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__menu-btn { visibility: visible !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search { display: none !important; }
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 12px 6px 8px !important;
  border-right-width: 1px !important;
  overflow: visible !important;
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app { grid-template-columns: 56px minmax(0, 1fr) !important; }
}

/* ====================================================================
   Sidebar v6 — icons = text color, full-height static scrollbar,
   left-aligned search, Telegram-style footer, smooth collapse,
   light/dark parity (identical sizes, no jitter).
   ==================================================================== */

/* --- Icons inherit text color (no accent on hover/active) --- */
body .sidebar.sidebar--v2 .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item__icon svg,
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.7 !important;
}

/* --- nav-item parity: identical box in light + dark, no border swap --- */
body .sidebar.sidebar--v2 .nav-item,
body.theme-dark .sidebar.sidebar--v2 .nav-item,
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  line-height: 20px !important;
  font-size: 14px !important;
}

/* Active state: same gray as hover, same text color, NO accent — no jitter */
body .sidebar.sidebar--v2 .nav-item.is-active {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--tp-side-text-strong) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--tp-side-text-strong) !important;
}
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]) {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--tp-side-text-strong) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--tp-side-text-strong) !important;
}

/* --- Sidebar shell: identical padding + smooth width animation --- */
body .sidebar.sidebar--v2,
body.theme-dark .sidebar.sidebar--v2 {
  padding: 12px 8px 8px !important;
  transition: width 220ms ease, min-width 220ms ease, max-width 220ms ease,
              padding 220ms ease, border-right-width 220ms ease !important;
}
@media (min-width: 901px) {
  .app { transition: grid-template-columns 220ms ease !important; }
}

/* --- nav: no bottom divider/border, just end of block --- */
body .sidebar.sidebar--v2 .sidebar__nav,
body.theme-dark .sidebar.sidebar--v2 .sidebar__nav {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin: 4px 0 6px !important;
  padding: 0 !important;
  /* Native smooth wheel-scroll */
  scroll-behavior: auto !important;
  overscroll-behavior: contain !important;
}
body .sidebar.sidebar--v2 .nav-section + .nav-section,
body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 0 !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}


/* --- Overlay scrollbar: full sidebar height, static, always visible when overflow --- */
body .sidebar.sidebar--v2 .sb-scroll,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  right: 2px !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 2px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 20 !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}
body .sidebar.sidebar--v2.sb-has-scroll .sb-scroll,
body.theme-dark .sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body .sidebar.sidebar--v2 .sb-scroll__thumb {
  width: 4px !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  transition: background-color 150ms ease !important;
}
body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  background: rgba(255, 255, 255, 0.22) !important;
}
body .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
body .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: rgba(0, 0, 0, 0.38) !important;
}
body.theme-dark .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: rgba(255, 255, 255, 0.38) !important;
}

/* The scrollbar attached INSIDE nav (older path) — hide so we don't render two */
body .sidebar.sidebar--v2 .sidebar__nav > .sb-scroll { display: none !important; }

/* --- Collapsed state: smooth slide-out (sidebar shrinks from 275 to 56) --- */
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 12px 6px 8px !important;
  overflow: hidden !important;
  visibility: visible !important;
  border-right-width: 1px !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__menu-btn {
  visibility: visible !important;
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app { grid-template-columns: 56px minmax(0, 1fr) !important; }
}



/* ====================================================================
   Sidebar v7 — collapsed-by-default + overlay-expand (Telegram style)
   - Layout reserves only 56px for the sidebar column
   - Expanded sidebar grows to 256px and OVERLAYS the content (no shift)
   - Collapsed: burger + icons only, identical look in light and dark
   - Lighter burger icon (Telegram-style muted tint)
   - Search caret/placeholder pinned to the very start of the field
   ==================================================================== */

/* Layout grid: always 56px for the sidebar column on desktop */
@media (min-width: 901px) {
  body .app,
  body.theme-dark .app,
  body.sidebar-collapsed .app,
  body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    transition: none !important;
  }
}

/* Sidebar shell: fixed overlay (never pushes content) */
body .sidebar.sidebar--v2,
body.theme-dark .sidebar.sidebar--v2 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 56px !important;
  z-index: 80 !important;
  overflow: hidden !important;
  padding: 12px 6px 8px !important;
  border-right: 1px solid var(--tp-side-divider, rgba(0,0,0,0.08)) !important;
  transition: width 220ms ease, padding 220ms ease, box-shadow 220ms ease !important;
}
body.theme-dark .sidebar.sidebar--v2 {
  border-right-color: rgba(255,255,255,0.06) !important;
}

/* Collapsed (DEFAULT): hide labels/footer/search, center icons */
body .sidebar.sidebar--v2 .nav-item__label,
body.theme-dark .sidebar.sidebar--v2 .nav-item__label {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
  white-space: nowrap !important;
}

/* Icon-only items when collapsed */
body .sidebar.sidebar--v2 .nav-item,
body.theme-dark .sidebar.sidebar--v2 .nav-item {
  justify-content: center !important;
  padding: 8px !important;
  width: 40px !important;
  margin: 2px auto !important;
  overflow: hidden !important;
  transition: width 200ms ease, padding 200ms ease, margin 200ms ease !important;
}
body .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  display: flex !important;
  justify-content: center !important;
  padding: 0 0 8px 0 !important;
  transition: justify-content 200ms ease, padding 200ms ease !important;
}

/* Expanded state — toggled by removing .sidebar-collapsed from <body> */
body:not(.sidebar-collapsed) .sidebar.sidebar--v2,
body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  width: 256px !important;
  padding: 12px 8px 8px !important;
}
body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item,
body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item {
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  width: auto !important;
  margin: 0 !important;
}
body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__search {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__topbar {
  justify-content: flex-start !important;
  padding: 0 6px 8px 6px !important;
}

/* Hide the old mobile-only "display:none" overrides from v5 — we use opacity only */
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  display: flex !important;
}




/* v7.1 пїЅ keep nav visible when collapsed (override older v6 rule that hides whole nav) */
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* v7.1 пїЅ keep nav visible when collapsed */
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav, body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav { opacity: 1 !important; pointer-events: auto !important; }


/* ====================================================================
   Sidebar v8 — Telegram-Desktop final look
   ------------------------------------------------------------------
   * Expanded width 256px (stable; scrollbar overlays, no shift)
   * Full-row hover/active highlight (no padding change, no jitter)
   * Icons inherit text color always; NO accent on hover/active
   * Telegram-style font: 14px / weight 500 / letter-spacing 0
   * Section dividers full-width (extend to sidebar edges)
   * Footer "Telegram Boost / Версия X – О программе"
   * Telegram dark palette (#17212b bg, #aab4be text, #ffffff strong,
     #2b3340 hover, #8b9398 muted)
   * Static overlay scrollbar (track always visible, thumb proportional)
   * Section labels (.nav-section__title) fully removed
   ==================================================================== */

/* ---- Telegram palette tokens (override last) ---- */
body.theme-dark {
  --tp-side-text:         #aab4be;
  --tp-side-text-strong:  #ffffff;
  --tp-side-muted:        #7a8895;
  --tp-side-bg:           #17212b;
  --tp-side-bg-solid:     #17212b;
  --tp-side-bg-hover:     #2b3340;
  --tp-side-bg-active:    #2b3543;
  --tp-side-divider:      #222d3a;
  --tp-side-scroll-track: #1f2a36;
  --tp-side-scroll-thumb: #3a4757;
  --tp-side-scroll-thumb-hover: #4f5e72;
}

/* ---- Sidebar shell ---- */
body .sidebar.sidebar--v2,
body.theme-dark .sidebar.sidebar--v2 {
  background: var(--tp-side-bg-solid) !important;
  color: var(--tp-side-text) !important;
  border-right: 1px solid var(--tp-side-divider) !important;
  padding: 0 !important;                /* no shell padding; sections handle their own */
  width: 56px !important;
  font-family: var(--app-font) !important;
  transition: width 220ms ease, box-shadow 220ms ease !important;
}
body:not(.sidebar-collapsed) .sidebar.sidebar--v2,
body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  width: 256px !important;
  padding: 0 !important;
}

/* ---- Top bar (burger + search) ---- */
body .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  height: 56px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--tp-side-divider) !important;
  background: transparent !important;
}

/* ---- Nav container ---- */
body .sidebar.sidebar--v2 .sidebar__nav,
body.theme-dark .sidebar.sidebar--v2 .sidebar__nav {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;        /* hide native scrollbar; overlay is custom */
  overscroll-behavior: contain !important;
}
body .sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* ---- Section labels: hidden (Telegram has no headings) ---- */
body .sidebar.sidebar--v2 .nav-section__title,
body.theme-dark .sidebar.sidebar--v2 .nav-section__title {
  display: none !important;
}

/* ---- Sections + full-width dividers ---- */
body .sidebar.sidebar--v2 .nav-section,
body.theme-dark .sidebar.sidebar--v2 .nav-section {
  padding: 4px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}
body .sidebar.sidebar--v2 .nav-section + .nav-section,
body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider) !important;
  margin-top: 0 !important;
  padding-top: 4px !important;
}

/* ---- Nav items: full-row, no jitter ---- */
body .sidebar.sidebar--v2 .nav-item,
body.theme-dark .sidebar.sidebar--v2 .nav-item,
body .sidebar.sidebar--v2 .nav-item:hover,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover,
body .sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active,
body .sidebar.sidebar--v2 .nav-item:focus-visible,
body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 0 !important;                  /* same border-box always в†’ no jitter */
  border-radius: 0 !important;           /* full-width row, no inset */
  background: transparent !important;
  color: var(--tp-side-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
  outline: 0 !important;
  transition: background-color 120ms ease !important;
}

/* Hover / active: full-row light-gray overlay, NO color change */
body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text) !important;
}
body .sidebar.sidebar--v2 .nav-item.is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--tp-side-bg-active) !important;
  color: var(--tp-side-text) !important;
}
body .sidebar.sidebar--v2 .nav-item[disabled],
body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled] {
  cursor: default !important;
  color: var(--tp-side-muted) !important;
  opacity: 0.75 !important;
}
body .sidebar.sidebar--v2 .nav-item[disabled]:hover,
body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled]:hover {
  background: transparent !important;
}

/* ---- Icons: inherit, no color change on hover/active ---- */
body .sidebar.sidebar--v2 .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .sidebar.sidebar--v2 .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg,
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.6 !important;
  color: inherit !important;
}

/* ---- Label ---- */
body .sidebar.sidebar--v2 .nav-item__label,
body.theme-dark .sidebar.sidebar--v2 .nav-item__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  color: inherit !important;
}

/* ---- Toggle switch on "Ночной режим" ---- */
body .sidebar.sidebar--v2 .nav-item__switch,
body.theme-dark .sidebar.sidebar--v2 .nav-item__switch {
  width: 32px !important;
  height: 18px !important;
  border-radius: 10px !important;
  background: var(--tp-side-divider) !important;
  flex: 0 0 32px !important;
  position: relative !important;
  transition: background-color 160ms ease !important;
}
body .sidebar.sidebar--v2 .nav-item__switch-knob,
body.theme-dark .sidebar.sidebar--v2 .nav-item__switch-knob {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  transition: left 160ms ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item--toggle .nav-item__switch {
  background: #4a8cff !important;
}
body.theme-dark .sidebar.sidebar--v2 .nav-item--toggle .nav-item__switch-knob {
  left: 16px !important;
}

/* ---- Badge: hidden by default; only style when visible ---- */
body .sidebar.sidebar--v2 .nav-item__badge,
body.theme-dark .sidebar.sidebar--v2 .nav-item__badge {
  background: #4a8cff !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .sidebar.sidebar--v2 .nav-item__badge[hidden],
body.theme-dark .sidebar.sidebar--v2 .nav-item__badge[hidden] {
  display: none !important;
}


/* ---- Layout: keep 56px reserved column; expanded sidebar overlays ---- */
@media (min-width: 901px) {
  body .app,
  body.theme-dark .app,
  body.sidebar-collapsed .app,
  body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    transition: none !important;
  }
}

/* ---- Collapsed: icons-only (centered) ---- */
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item {
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  display: none !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  justify-content: center !important;
  border-bottom: 0 !important;
}

/* ---- Overlay scrollbar (always-visible track + proportional thumb) ---- */
body .sidebar.sidebar--v2 .sb-scroll,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  position: absolute !important;
  top: 56px !important;                  /* below topbar */
  bottom: 56px !important;               /* above footer */
  right: 0 !important;
  width: 4px !important;
  height: auto !important;
  background: var(--tp-side-scroll-track) !important;  /* always-visible track */
  border-radius: 0 !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
body .sidebar.sidebar--v2.sb-has-scroll .sb-scroll,
body.theme-dark .sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 1 !important;
}
body .sidebar.sidebar--v2 .sb-scroll__thumb,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  width: 4px !important;
  border-radius: 0 !important;
  background: var(--tp-side-scroll-thumb) !important;
  transition: background-color 140ms ease !important;
}
body .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
body .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: var(--tp-side-scroll-thumb-hover) !important;
}
/* Hide any older scrollbar attached inside nav */
body .sidebar.sidebar--v2 .sidebar__nav > .sb-scroll {
  display: none !important;
}

/* ---- Hidden burger collapse button (we use sidebar__menu-btn now) ---- */
body .sidebar.sidebar--v2 #sidebar-collapse {
  display: none !important;
}


/* v8.1 пїЅ beat older :hover/:not([disabled]) rules: force full-row + 42px height */
body .sidebar.sidebar--v2 .nav-item:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
body .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
body .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 14px !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]) {
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}

/* ============================================================
   v9 — Telegram Desktop fidelity polish
   - Slimmer non-bold font, sharper rendering
   - Hover changes only background (no size/weight/padding shift)
   - Burger aligned with item icons in both states
   - Search field Telegram look
   - Footer scrolls with content, no top divider, version clickable
   - Round scrollbar thumb (Telegram style)
   - Smooth slide-in/out via width transition
   ============================================================ */

/* Font family — Telegram uses native system fonts, NOT Inter.
   Inter @ weight 500 reads as bold on Windows. Use system stack at 400. */
.sidebar.sidebar--v2,
.sidebar.sidebar--v2 * {
  font-family: var(--app-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.sidebar.sidebar--v2 {
  transition: width 280ms cubic-bezier(.2,0,0,1) !important;
}

/* ---- Topbar: burger aligned with nav-item icons ---- */
.sidebar.sidebar--v2 .sidebar__topbar {
  height: 52px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  border-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: var(--tp-side-bg) !important;
}

/* Collapsed: burger sits at same x as item icons (centered in 56px) */
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}


/* ---- Sidebar becomes single scroll container; nav flows naturally ---- */
.sidebar.sidebar--v2 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.sidebar.sidebar--v2 .sidebar__nav {
  padding: 6px 0 0 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  scrollbar-width: none !important;
}
.sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ---- Nav items: 400 weight, no transform on hover ---- */
body .sidebar.sidebar--v2 .nav-item,
body .sidebar.sidebar--v2 .nav-item:not([disabled]),
body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
body .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
body .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]),
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active {
  min-height: 42px !important;
  padding: 0 16px !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 20px !important;
  text-transform: none !important;
  transform: none !important;
  transition: background-color 140ms ease !important;
}
body .sidebar.sidebar--v2 .nav-item__label,
body .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 20px !important;
  color: inherit !important;
  transform: none !important;
}

/* Icons same on every state */
.sidebar.sidebar--v2 .nav-item__icon,
.sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
.sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  color: inherit !important;
  transform: none !important;
}
.sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
}

/* Collapsed: items centered, no label/switch/badge */
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]) {
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}


/* ---- Round Telegram-style scrollbar ---- */
.sidebar.sidebar--v2 .sb-scroll {
  position: absolute !important;
  top: 52px !important;
  bottom: 4px !important;
  right: 2px !important;
  width: 6px !important;
  background: transparent !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
  z-index: 3 !important;
}
.sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sidebar.sidebar--v2 .sb-scroll__thumb {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  border-radius: 999px !important;
  background: var(--tp-side-scroll-thumb) !important;
  transition: background-color 140ms ease !important;
  cursor: pointer !important;
}
.sidebar.sidebar--v2 .sb-scroll__thumb:hover,
.sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: var(--tp-side-scroll-thumb-hover) !important;
}

/* ---- Smooth opacity transitions on labels during slide ---- */
.sidebar.sidebar--v2 .nav-item__label,
.sidebar.sidebar--v2 .nav-item__badge,
.sidebar.sidebar--v2 .nav-item__switch,
.sidebar.sidebar--v2 .sidebar__search {
  transition: opacity 200ms cubic-bezier(.2,0,0,1) !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Section dividers full-width hairlines */
.sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider) !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

/* Make sure nav-item background uses the right tokens */
body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover {
  background-color: var(--tp-side-bg-hover) !important;
  color: var(--tp-side-text) !important;
}
body .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active {
  background-color: var(--tp-side-bg-active) !important;
  color: var(--tp-side-text) !important;
}


/* v9.1 пїЅ beat older specificity for burger padding & footer divider */
body .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 16px !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 !important;
}
/* v9.1 пїЅ beat older specificity for burger padding & footer divider */
body .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 16px !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 !important;
}
/* ============================================================
   v10 — Sidebar reflow + slide-from-right animation
   - Main content reflows when sidebar expands/collapses (no overlay)
   - Icons stay still; labels/search/footer slide in from the right
   ============================================================ */

/* Grid layout reacts to sidebar state — content area shrinks/expands */
body .app {
  grid-template-columns: 256px minmax(0, 1fr) !important;
  transition: grid-template-columns 280ms cubic-bezier(.2,0,0,1) !important;
}
body.sidebar-collapsed .app {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

/* Sidebar width tracks the grid column. Keep `position: fixed` so internal scroll
   doesn't drag the whole document. Hide horizontal overflow so the slide-in
   translateX offset doesn't show outside the sidebar shell. */
body .sidebar.sidebar--v2 {
  width: 256px !important;
  overflow-x: hidden !important;
  transition: width 280ms cubic-bezier(.2,0,0,1) !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
}

/* Slide-in animation: icons are static, labels/search/badge/switch/footer
   slide in from the right edge as the sidebar expands. */
.sidebar.sidebar--v2 .nav-item__label,
.sidebar.sidebar--v2 .nav-item__badge,
.sidebar.sidebar--v2 .nav-item__switch,
.sidebar.sidebar--v2 .sidebar__search {
  transform: translateX(0) !important;
  opacity: 1 !important;
  transition: transform 280ms cubic-bezier(.2,0,0,1),
              opacity 220ms cubic-bezier(.2,0,0,1) !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  transform: translateX(60px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ============================================================
   v11 — Topbar parity with Telegram, collapsed = 3 + Settings,
   stable sidebar layout, disabled item no jitter,
   full underline on version link.
   ============================================================ */

/* -- Topbar: equal left/right gutters, smaller burger, slimmer search -- */
body .sidebar.sidebar--v2 .sidebar__topbar,
body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  height: 56px !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

/* -- Collapsed: show only top-3 + Settings, Settings pinned to bottom -- */
body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section {
  display: contents !important;
}
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Hide all items in collapsed mode … */
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item {
  display: none !important;
}
/* … then re-show the top-3 most active + Settings */
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="account_manager"],
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="inviter"],
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="parser"],
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"] {
  display: flex !important;
}
/* Push Settings to the bottom */
body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"] {
  margin-top: auto !important;
}
/* Kill the collapsed scrollbar */
body.sidebar-collapsed .sidebar.sidebar--v2 .sb-scroll {
  display: none !important;
}

/* -- Sidebar itself should not jitter: no internal layout changes, only width -- */
.sidebar.sidebar--v2 {
  will-change: width !important;
  transition: width 280ms cubic-bezier(.2,0,0,1) !important;
}

/* -- Disabled item: same metrics as enabled, no hover shift -- */
body .sidebar.sidebar--v2 .nav-item[disabled],
body .sidebar.sidebar--v2 .nav-item[disabled]:hover,
body .sidebar.sidebar--v2 .nav-item[disabled]:focus-visible {
  min-height: 42px !important;
  padding: 0 16px !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  background: transparent !important;
  cursor: default !important;
  opacity: .55 !important;
  transform: none !important;
  pointer-events: none !important;
}

/* -- Sharper text rendering on items -- */
.sidebar.sidebar--v2,
.sidebar.sidebar--v2 .nav-item__label,
.sidebar.sidebar--v2 .sidebar__app-meta {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}



/* v11.1 пїЅ kill all older topbar padding rules with extreme specificity */
html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__topbar {
  height: 56px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
}

/* ============================================================
   v12 - sidebar lock: stable collapse and full-height scrollbar
   ============================================================ */
@media (min-width: 901px) {
  html body .app,
  html body.theme-dark .app {
    grid-template-columns: 256px minmax(0, 1fr) !important;
    transition: grid-template-columns 280ms cubic-bezier(.2,0,0,1) !important;
  }

  html body.sidebar-collapsed .app,
  html body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
}

html body .sidebar.sidebar--v2,
html body.theme-dark .sidebar.sidebar--v2 {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  flex: 0 0 256px !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  transition: width 280ms cubic-bezier(.2,0,0,1),
              min-width 280ms cubic-bezier(.2,0,0,1),
              max-width 280ms cubic-bezier(.2,0,0,1),
              box-shadow 180ms ease !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex-basis: 56px !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  box-shadow: none !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 56px !important;
  height: 56px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  overflow: hidden !important;
}

html body .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__nav,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

html body .sidebar.sidebar--v2 .nav-section,
html body.theme-dark .sidebar.sidebar--v2 .nav-section,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-section {
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

html body .sidebar.sidebar--v2 .nav-section + .nav-section,
html body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section + .nav-section,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider) !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

html body .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item,
html body .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item[disabled],
html body.theme-dark .sidebar.sidebar--v2 .nav-item[disabled],
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[disabled],
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[disabled] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  gap: 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"],
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"] {
  margin-top: 0 !important;
}

html body .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label {
  display: inline-block !important;
  transform: none !important;
  transition: opacity 160ms ease !important;
}

html body .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge {
  display: inline-flex !important;
  transform: none !important;
  transition: opacity 160ms ease !important;
}

html body .sidebar.sidebar--v2 .nav-item__badge[hidden],
html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge[hidden] {
  display: none !important;
}

html body .sidebar.sidebar--v2 .nav-item__switch,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__switch {
  display: inline-block !important;
  transform: none !important;
  transition: opacity 160ms ease, background-color 160ms ease !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__switch,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__switch,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__search,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__search {
  opacity: 1 !important;
  transform: none !important;
}

html body .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  right: 2px !important;
  width: 6px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 50 !important;
  transition: opacity 160ms ease !important;
}

html body .sidebar.sidebar--v2.sb-has-scroll .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sb-scroll {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2 .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 6px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: var(--tp-side-scroll-thumb) !important;
  transition: background-color 140ms ease !important;
  cursor: pointer !important;
}

html body .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
html body .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: var(--tp-side-scroll-thumb-hover) !important;
}

/* v13.1 - true final lock for requested content spacing/search geometry */
html body .main,
html body.theme-dark .main {
  padding: 40px 28px 96px !important;
  gap: 20px !important;
}

html body main.main.view-accounts.view-am,
html body.theme-dark main.main.view-accounts.view-am {
  overflow-x: hidden !important;
}

html body .view-userbase--v2,
html body.theme-dark .view-userbase--v2 {
  padding: 20px 28px 96px !important;
}

html body .ub2.ub2--list,
html body.theme-dark .ub2.ub2--list {
  padding-top: 0 !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-results,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-results {
  top: 48px !important;
  left: 52px !important;
  right: 8px !important;
  max-height: min(420px, calc(100vh - 72px)) !important;
}

/* v12.2 - Telegram 4px scrollbar, limited to the menu list area */
html body .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  top: 60px !important;
  bottom: 4px !important;
  right: 2px !important;
  width: 4px !important;
  border-radius: 999px !important;
}

html body .sidebar.sidebar--v2 .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  width: 4px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
}

/* v13 - requested compact content top and universal sidebar search */
html body .main,
html body.theme-dark .main {
  padding: 20px 28px 96px !important;
  gap: 20px !important;
}

html body .view-userbase--v2,
html body.theme-dark .view-userbase--v2 {
  padding: 20px 28px 96px !important;
}

html body .ub2.ub2--list,
html body.theme-dark .ub2.ub2--list {
  padding-top: 12px !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-results,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-results {
  position: absolute !important;
  top: 48px !important;
  left: 52px !important;
  right: 8px !important;
  max-height: min(420px, calc(100vh - 72px)) !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border: 1px solid var(--tp-side-divider) !important;
  border-radius: 12px !important;
  background: var(--tp-side-bg-solid) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important;
  z-index: 90 !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar-search-results,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar-search-results,
html body .sidebar.sidebar--v2 .sidebar-search-results[hidden] {
  display: none !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-align: left !important;
  color: var(--tp-side-text) !important;
  background: transparent !important;
  cursor: pointer !important;
  border: 0 !important;
  font: inherit !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result:hover,
html body .sidebar.sidebar--v2 .sidebar-search-result.is-active,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result:hover,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result.is-active {
  background: var(--tp-side-bg-hover) !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__dot,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-top: 7px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px var(--tp-side-bg-solid) !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__body,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__head,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__title,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tp-side-text-strong) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__kind,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__kind {
  flex: 0 0 auto !important;
  color: var(--tp-side-muted) !important;
  background: var(--tp-side-bg-hover) !important;
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 500 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result.is-active .sidebar-search-result__kind,
html body .sidebar.sidebar--v2 .sidebar-search-result:hover .sidebar-search-result__kind,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result.is-active .sidebar-search-result__kind,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result:hover .sidebar-search-result__kind {
  background: var(--tp-side-bg-solid) !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result__detail,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result__detail {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--tp-side-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  word-break: break-word !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-result mark,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-result mark {
  background: rgba(59, 130, 246, 0.18) !important;
  color: inherit !important;
  padding: 0 1px !important;
  border-radius: 3px !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-empty,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-empty {
  padding: 12px 10px !important;
  color: var(--tp-side-muted) !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* v11.2 - requested exact Telegram menu text/icon metrics */
html body .sidebar.sidebar--v2 .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #000 !important;
}

html body .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon,
html body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  color: #000 !important;
}

html body .sidebar.sidebar--v2 .nav-item__icon svg,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg,
html body .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  stroke-width: 1.75px !important;
}

/* v11.3 - requested sidebar hover, burger, search and nav spacing */
html body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover {
  background-color: #f1f1f1 !important;
}

html body .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__nav {
  padding-top: 0 !important;
}

html body .sidebar.sidebar--v2 .nav-section,
html body.theme-dark .sidebar.sidebar--v2 .nav-section {
  margin-top: 0 !important;
}

/* v11.4 - visual hover layer immune to background shorthand resets */
html body .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item {
  position: relative !important;
  isolation: isolate !important;
}

html body .sidebar.sidebar--v2 .nav-item::before,
html body.theme-dark .sidebar.sidebar--v2 .nav-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-color: transparent !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2 .nav-item > *,
html body.theme-dark .sidebar.sidebar--v2 .nav-item > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover::before,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover::before {
  background-color: #f1f1f1 !important;
}

/* v11.1 пїЅ kill all older topbar padding rules with extreme specificity */
html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__topbar {
  height: 56px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  gap: 8px !important;
  border-bottom: 0 !important;
}
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
}

/* v12.1 - final sidebar lock */
@media (min-width: 901px) {
  html body .app,
  html body.theme-dark .app {
    grid-template-columns: 256px minmax(0, 1fr) !important;
    transition: grid-template-columns 280ms cubic-bezier(.2,0,0,1) !important;
  }

  html body.sidebar-collapsed .app,
  html body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
}

html body .sidebar.sidebar--v2,
html body.theme-dark .sidebar.sidebar--v2 {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  flex: 0 0 256px !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  transition: width 280ms cubic-bezier(.2,0,0,1), min-width 280ms cubic-bezier(.2,0,0,1), max-width 280ms cubic-bezier(.2,0,0,1), box-shadow 180ms ease !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex-basis: 56px !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  box-shadow: none !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 56px !important;
  height: 56px !important;
  width: 100% !important;
  padding: 0 12px !important;
  margin: 0 !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html body .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__nav,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-section {
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-section + .nav-section,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-section + .nav-section {
  border-top: 1px solid var(--tp-side-divider) !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[disabled],
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[disabled] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  gap: 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"],
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item[data-module="settings"] {
  margin-top: 0 !important;
}

html body .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label { display: inline-block !important; }
html body .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge { display: inline-flex !important; }
html body .sidebar.sidebar--v2 .nav-item__badge[hidden],
html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge[hidden] { display: none !important; }
html body .sidebar.sidebar--v2 .nav-item__switch,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__switch { display: inline-block !important; }
html body .sidebar.sidebar--v2 .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item__badge,
html body .sidebar.sidebar--v2 .nav-item__switch,
html body .sidebar.sidebar--v2 .sidebar__search {
  transform: none !important;
  transition: opacity 160ms ease !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  display: block !important;
  position: absolute !important;
  top: 60px !important;
  bottom: 4px !important;
  right: 2px !important;
  width: 4px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 50 !important;
  transition: opacity 160ms ease !important;
}

html body .sidebar.sidebar--v2.sb-has-scroll .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sb-scroll {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2 .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 4px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: var(--tp-side-scroll-thumb) !important;
  transition: background-color 140ms ease !important;
  cursor: pointer !important;
}

html body .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
html body .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll:hover .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging .sb-scroll__thumb {
  background: var(--tp-side-scroll-thumb-hover) !important;
}

/* v13.2 - true final lock for requested content spacing/search geometry */
html body .main,
html body.theme-dark .main {
  padding: 0px 0px 96px !important;
  gap: 20px !important;
}

html body .view-userbase--v2,
html body.theme-dark .view-userbase--v2 {
  padding: 20px 28px 96px !important;
}

html body .ub2.ub2--list,
html body.theme-dark .ub2.ub2--list {
  padding-top: 12px !important;
}

html body .sidebar.sidebar--v2 .sidebar-search-results,
html body.theme-dark .sidebar.sidebar--v2 .sidebar-search-results {
  top: 48px !important;
  left: 52px !important;
  right: 8px !important;
  max-height: min(420px, calc(100vh - 72px)) !important;
}

/* v14 - account manager: hover highlight only, no transforms/scale jumps */
html body .view-am .am-username,
html body button.am-username,
html body.theme-dark .view-am .am-username,
html body.theme-dark button.am-username {
  transition: background-color 0.12s ease, color 0.12s ease !important;
}
html body .view-am .am-username:hover,
html body button.am-username:hover,
html body.theme-dark .view-am .am-username:hover,
html body.theme-dark button.am-username:hover {
  transform: none !important;
  background: rgba(37, 99, 235, 0.18) !important;
  color: #4338ca !important;
}
html body.theme-dark .view-am .am-username:hover,
html body.theme-dark button.am-username:hover {
  background: rgba(129, 140, 248, 0.22) !important;
  color: #c7d2fe !important;
}


html body .view-am .toolbar .icon-btn:hover,
html body.theme-dark .view-am .toolbar .icon-btn:hover {
  transform: none !important;
}
html body .view-am button.am-phone:hover,
html body.theme-dark .view-am button.am-phone:hover {
  transform: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--primary, #2563eb) !important;
  text-decoration: none !important;
}
/* Кнопки в ячейке «Прокси» — значок связи и карандаш (весь их вид описан
   в блоке «Ячейка „Прокси“»); здесь только снимаем общий ховер строки. */
html body .view-am .am-proxy__check:hover,
html body .view-am .am-proxy__edit:hover,
html body.theme-dark .view-am .am-proxy__check:hover,
html body.theme-dark .view-am .am-proxy__edit:hover {
  transform: none !important;
  filter: none !important;
}

/* v15 - account manager: sidebar-aware selection bar and light rescan icon */
@media (min-width: 901px) {
  html body {
    --tp-selbar-gap: 18px;
    --tp-selbar-sidebar-width: 256px;
  }
  html body.sidebar-collapsed {
    --tp-selbar-sidebar-width: 56px;
  }
  html body .sel-bar {
    left: calc(var(--tp-selbar-sidebar-width) + var(--tp-selbar-gap)) !important;
    right: var(--tp-selbar-gap) !important;
    max-width: calc(100vw - var(--tp-selbar-sidebar-width) - (var(--tp-selbar-gap) * 2)) !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }
}
@media (max-width: 900px) {
  html body .sel-bar {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

html body .sel-bar,
html body.theme-dark .sel-bar {
  background: var(--card, #fff) !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--text, #1a2233) !important;
}

html body .sel-bar__left,
html body .sel-bar__right {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
html body .sel-bar__right {
  justify-content: flex-end !important;
}
html body .sel-bar__count,
html body.theme-dark .sel-bar__count {
  white-space: normal !important;
  color: var(--text, #1a2233) !important;
  font-weight: 600 !important;
}

html body .sel-bar .icon-btn,
html body .sel-bar .quick-act,
html body.theme-dark .sel-bar .icon-btn,
html body.theme-dark .sel-bar .quick-act {
  --sel-icon: var(--text-mute, #6b7494);
  --sel-surface: transparent;
  --sel-surface-hover: var(--bg-app, #f4f6fb);
  --sel-border: var(--border, #e3e8f0);
  --sel-border-hover: #2563eb;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  color: var(--text-mute, #6b7494) !important;
  background: var(--sel-surface) !important;
  border: 1px solid var(--sel-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

html body .sel-bar .icon-btn svg,
html body .sel-bar .quick-act svg,
html body .sel-bar .primary-btn svg,
html body.theme-dark .sel-bar .icon-btn svg,
html body.theme-dark .sel-bar .quick-act svg,
html body.theme-dark .sel-bar .primary-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2 !important;
  flex: 0 0 auto !important;
}

html body .sel-bar .icon-btn svg,
html body .sel-bar .quick-act svg,
html body.theme-dark .sel-bar .icon-btn svg,
html body.theme-dark .sel-bar .quick-act svg {
  color: var(--sel-icon) !important;
  filter: none !important;
}

html body .sel-bar .icon-btn:hover,
html body .sel-bar .quick-act:hover,
html body.theme-dark .sel-bar .icon-btn:hover,
html body.theme-dark .sel-bar .quick-act:hover {
  --sel-icon: #2563eb;
  color: #2563eb !important;
  background: var(--sel-surface-hover) !important;
  border-color: var(--sel-border-hover) !important;
  transform: none !important;
}

html body .sel-bar .primary-btn,
html body.theme-dark .sel-bar .primary-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  color: #ffffff !important;
  background: #3b82f6 !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .sel-bar .primary-btn svg,
html body.theme-dark .sel-bar .primary-btn svg {
  color: #ffffff !important;
  filter: none !important;
}

html body .sel-bar .primary-btn:hover,
html body.theme-dark .sel-bar .primary-btn:hover {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
  transform: none !important;
}

html body .sel-bar .quick-act,
html body.theme-dark .sel-bar .quick-act {
  --sel-icon: var(--text-mute, #6b7494);
  --sel-surface: transparent;
  --sel-surface-hover: var(--bg-app, #f4f6fb);
  --sel-border: var(--border, #e3e8f0);
  --sel-border-hover: #2563eb;
  box-shadow: none !important;
}

html body .sel-bar .quick-act[data-act="change_role"],
html body.theme-dark .sel-bar .quick-act[data-act="change_role"] {
  --sel-icon: var(--text-mute, #6b7494);
}

html body .sel-bar .quick-act:hover,
html body.theme-dark .sel-bar .quick-act:hover {
  box-shadow: none !important;
}

html body .sel-bar .primary-btn,
html body.theme-dark .sel-bar .primary-btn {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: none !important;
}

html body .sel-bar .primary-btn:hover,
html body.theme-dark .sel-bar .primary-btn:hover {
  background: #2563eb !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

html body .sel-bar #open-actions,
html body.theme-dark .sel-bar #open-actions {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.22) !important;
}

html body .sel-bar #open-actions:hover,
html body.theme-dark .sel-bar #open-actions:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.26) !important;
}




/* v16 - unified module rhythm and sidebar label baseline */
html body .view-pf,
html body .view-cloner,
html body .view-parser,
html body .view-am,
html body .view-inviter,
html body .view-userbase,
html body .view-proxy,
html body .view-tasks,
html body.theme-dark .view-pf,
html body.theme-dark .view-cloner,
html body.theme-dark .view-parser,
html body.theme-dark .view-am,
html body.theme-dark .view-inviter,
html body.theme-dark .view-userbase,
html body.theme-dark .view-proxy,
html body.theme-dark .view-tasks,
html body .ub2,
html body.theme-dark .ub2 {
  gap: 18px !important;
}

html body .ub2.ub2--list,
html body.theme-dark .ub2.ub2--list {
  padding-top: 0 !important;
}

html body .view-proxy .px-select-bar,
html body .view-proxy .px-select-bar.is-empty,
html body.theme-dark .view-proxy .px-select-bar,
html body.theme-dark .view-proxy .px-select-bar.is-empty {
  margin: 0 !important;
}

html body .sidebar.sidebar--v2 .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  display: block !important;
  align-self: center !important;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  transform: none !important;
}

/* v18 - module hero auto height and Userbase top rhythm */
html body .ub2.ub2--list,
html body.theme-dark .ub2.ub2--list {
  padding-top: 0 !important;
}

/* Создание чатов/каналов (#view-chat-creator) живёт по общему канону
   страницы запуска (.srch-page ниже в этом файле) — тот же, что у парсера,
   инвайта и клонера. Своих правил раскладки у модуля больше нет: аккордеоны,
   пилл-вкладки и hero сняты вместе со старой разметкой. Осталась одна
   переменная акцента — её читают подсказки «?» из style.css. */
.view-cc { --cln-accent: #2563eb; --cln-accent-rgb: 37, 99, 235; }

/* Подсказки «?» в модуле прижимаем к левому краю иконки, чтобы тултип
   разворачивался вправо и не уезжал под развёрнутый сайдбар. */
.view-cc .cln-adv-grid .inv-help[data-tooltip]::after {
  left: 0; right: auto; transform: translateX(var(--tip-dx, 0px));
}
.view-cc .cln-adv-grid .inv-help[data-tooltip]::before {
  left: 8px; transform: translateX(-50%);
}

/* ─── Заполнение аккаунтов (#view-profile-filler) ────────────────────
   Экран переехал на общий канон страницы запуска (.srch-page): свои
   аккордеоны, сетка карточек-шаблонов и подсказки-подзаголовки ушли вместе
   со старой вёрсткой. Осталась подсказка «?» — её тултип прижат влево,
   чтобы не уезжать под развёрнутый сайдбар. */
.view-pf .cln-adv-grid .inv-help[data-tooltip]::after {
  left: 0; right: auto; transform: translateX(var(--tip-dx, 0px));
}
.view-pf .cln-adv-grid .inv-help[data-tooltip]::before {
  left: 8px; transform: translateX(-50%);
}
/* Окно материалов живёт по канону оболочки страницы запуска (id добавлен в
   :is() ниже по файлу): белая карточка r28, заголовок 23px/500, поле r8 и
   пилюли 40px/r20. Своего у окна остаётся только содержимое. */
.cc-material-remove-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #e6e8ee;
}
.cc-material-remove-row__label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #444746;
}
.cc-material-remove-row__switch {
  flex: none;
}
.cc-muted {
  font-size: 12px; color: var(--text-mute);
}
.cc-post-media-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Свой «?» у вложений к постам был третьим видом значка в программе: кружок
   18px вместо канонных 17px, подсказка вбок вместо пузыря над значком и без
   прижатия к границам содержимого. Значок переведён на общий .inv-help
   (style.css), правила остались бы мёртвыми — поэтому их здесь больше нет. */

/* Права админов и участников раздаются чипами канона (.srch-type), а не
   сеткой переключателей: чипы переносятся сами, и своей сетки колонок им
   не нужно — см. .srch-types в каноне страницы запуска. */

/* Tablet/mobile shell: keep the content full-width once the sidebar becomes off-canvas. */
@media (max-width: 900px) {
  html body .app,
  html body.theme-dark .app,
  html body.sidebar-collapsed .app,
  html body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    transition: none !important;
  }

  html body .sidebar.sidebar--v2,
  html body.theme-dark .sidebar.sidebar--v2,
  html body.sidebar-collapsed .sidebar.sidebar--v2,
  html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(256px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: min(256px, calc(100vw - 48px)) !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .3s ease !important;
    will-change: transform !important;
    z-index: 300 !important;
    visibility: visible !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html body.sidebar-open .sidebar.sidebar--v2,
  html body.theme-dark.sidebar-open .sidebar.sidebar--v2 {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(15, 23, 42, .28) !important;
  }

  html body .sidebar.sidebar--v2 .sidebar__topbar,
  html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
  html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }

  html body .sidebar.sidebar--v2 .nav-item,
  html body.theme-dark .sidebar.sidebar--v2 .nav-item,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item,
  html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .nav-item {
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }

  html body .sidebar.sidebar--v2 .nav-item__label,
  html body .sidebar.sidebar--v2 .nav-item__badge,
  html body .sidebar.sidebar--v2 .nav-item__switch,
  html body .sidebar.sidebar--v2 .sidebar__search,
  html body.theme-dark .sidebar.sidebar--v2 .nav-item__label,
  html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge,
  html body.theme-dark .sidebar.sidebar--v2 .nav-item__switch,
  html body.theme-dark .sidebar.sidebar--v2 .sidebar__search,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__label,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__badge,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .nav-item__switch,
  html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__search {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body .hamburger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 310 !important;
  }

  /* Обрез по горизонтали — `clip`, а не `hidden`: `hidden` сделал бы .main
     скроллпортом (вертикаль вычислилась бы в `auto`), который никогда не
     прокручивается, и липкая полоса запуска (.inv-cta / .prs-cta) внутри
     .main перестала бы липнуть. Подробнее — у BODY в style.css. */
  html body .main,
  html body.theme-dark .main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 62px 16px 24px !important;
    overflow-x: clip !important;
  }
}

@media (max-width: 480px) {
  html body .main,
  html body.theme-dark .main {
    padding: 58px 10px 18px !important;
  }
}

/* Userbase detail modal: compact site-style list editor */


/* Account manager: colored module hero */

html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  position: relative !important;
  border-bottom: 0 !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar::after,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--border, #e5e7eb) !important;
  pointer-events: none !important;
}

html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar::after,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar::after {
  left: 0 !important;
}

html body .view-am .am-hero__btn--buy,
html body.theme-dark .view-am .am-hero__btn--buy,
html body .view-am #am-buy-accounts,
html body.theme-dark .view-am #am-buy-accounts {
  border: 1px solid rgba(147, 197, 253, 0.28) !important;
  background: linear-gradient(180deg, #1a3560 0%, #0f2344 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 18px rgba(7, 16, 38, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body .view-am .am-hero__btn--buy:hover,
html body.theme-dark .view-am .am-hero__btn--buy:hover,
html body .view-am #am-buy-accounts:hover,
html body.theme-dark .view-am #am-buy-accounts:hover {
  border-color: rgba(191, 219, 254, 0.45) !important;
  background: linear-gradient(180deg, #234878 0%, #163058 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 22px rgba(7, 16, 38, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html body .view-am .am-hero__btn--buy svg,
html body.theme-dark .view-am .am-hero__btn--buy svg,
html body .view-am #am-buy-accounts svg,
html body.theme-dark .view-am #am-buy-accounts svg {
  color: #dbeafe !important;
}

html body .view-am #am-open-help svg,
html body.theme-dark .view-am #am-open-help svg {
  width: 23px !important;
  height: 23px !important;
}

html body .view-am #am-add-accounts,
html body.theme-dark .view-am #am-add-accounts,
html body .view-am .am-search-row__add,
html body.theme-dark .view-am .am-search-row__add {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 10px !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
}
html body .view-am #am-add-accounts:hover,
html body.theme-dark .view-am #am-add-accounts:hover,
html body .view-am .am-search-row__add:hover,
html body.theme-dark .view-am .am-search-row__add:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}
html body .view-am #am-add-accounts svg,
html body.theme-dark .view-am #am-add-accounts svg,
html body .view-am .am-search-row__add svg,
html body.theme-dark .view-am .am-search-row__add svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.4 !important;
  color: #ffffff !important;
  background: transparent !important;
  border-radius: 0 !important;
}
html body .view-am .am-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action {
  border: 0 !important;
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
html body .view-am .am-gmail-bar .picker-gmail-bar__action:hover,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action:hover {
  background: rgba(60, 64, 67, 0.08) !important;
}
html body .view-am .am-gmail-bar .picker-gmail-bar__action.is-active,
html body .view-am .am-gmail-bar .picker-gmail-bar__action.is-on,
html body .view-am .am-gmail-bar .picker-gmail-bar__action.is-open,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action.is-active,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action.is-on,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action.is-open {
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.1) !important;
  color: var(--am-accent, #2563eb) !important;
}

/* Унификация иконок в .picker-gmail-bar__actions шапки аккаунтов: размер
   20px, жирность обводки 1.5px, цвет #444746. Inline-атрибуты у svg
   различаются (stroke-width 1.5/1.6/1.7, разные fill), поэтому приводим их
   к общему виду. */
html body .view-am .am-gmail-bar .picker-gmail-bar__action svg,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action svg {
  width: 20px !important;
  height: 20px !important;
}
/* Единая жирность обводки для контурных иконок (не трогаем точки/заливки). */
html body .view-am .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body .view-am .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]),
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]) {
  stroke-width: 1.5px !important;
}
/* Единый цвет иконок — кроме активных/включённых кнопок, где остаётся акцент. */
html body .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg,
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg {
  color: #444746 !important;
}
html body .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"],
html body .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"] *:not([stroke="none"]),
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"],
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"] *:not([stroke="none"]) {
  stroke: #444746 !important;
}
html body .view-am .am-filter-wrap,
html body.theme-dark .view-am .am-filter-wrap,
html body .view-am .am-range-wrap,
html body.theme-dark .view-am .am-range-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .view-am .am-filter-count,
html body .view-am .am-gmail-bar #am-filter-count,
html body.theme-dark .view-am .am-filter-count,
html body.theme-dark .view-am .am-gmail-bar #am-filter-count {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  background: var(--am-accent, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--card, #fff) !important;
}

/* Шрифт выпадающих окон панели аккаунтов (Ещё / действия).
   Задаём на контейнерах — внутренние элементы (__item / __label) своего
   font-family не объявляют, поэтому наследуют его отсюда. */
#am-more-pop,
#am-filter-pop,
.am-actions-menu {
  font-family: var(--app-font) !important;
  font-size: 14px !important;
}

html body .dropdown__list {
  padding: 0 !important;
  margin: 0 !important;
}

html body .dropdown__item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  color: rgb(32, 33, 36) !important;
  user-select: none !important;
  border-radius: 0 !important;
}

html body.theme-dark .dropdown__item {
  color: var(--text, #cccccc) !important;
}

html body .dropdown__item:hover,
html body .dropdown__item.is-active,
html body .dropdown__item.is-checked {
  background: #EEEEEE !important;
  outline: none !important;
  color: rgb(32, 33, 36) !important;
}

html body.theme-dark .dropdown__item:hover,
html body.theme-dark .dropdown__item.is-active,
html body.theme-dark .dropdown__item.is-checked {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text, #cccccc) !important;
}

html body .dropdown__count {
  margin-left: auto !important;
  color: #9ca3af !important;
  font-size: 12px !important;
}

/* Строка поиска над списком значений (группы из FILTER_SEARCH_GROUPS —
   «Гео» и «Роль»). Общий элемент, поэтому правило висит на классе, а не на
   адресе окна: одинаково выглядит и в «Аккаунтах», и в окне запуска. Вид —
   тот же, что у поиска в подменю «Присвоить роль»: подчёркивание в стиле
   Google и лупа справа. Боковые поля — 16px, ровно как горизонтальный отступ
   строки значения (.dropdown__item), поэтому начало ввода и подчёркивание
   стоят на линии подписей значений, а правый конец подчёркивания — на линии
   счётчиков. */
html body .dropdown__search {
  position: relative !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 4px 16px 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid #e0e0e0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: border-color var(--motion-state, 150ms) var(--motion-ease, ease) !important;
}

html body .dropdown__search:focus-within {
  border-bottom-color: #1a73e8 !important;
  box-shadow: none !important;
}

html body .dropdown__search-ico {
  position: absolute !important;
  right: 16px !important;
  display: inline-flex !important;
  color: #5f6368 !important;
}

html body .dropdown__search-ico svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

html body .dropdown__search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 32px 4px 0 !important;
  font: inherit !important;
  color: rgb(32, 33, 36) !important;
}

/* «Нет данных» / «Нет совпадений» — на месте списка значений и по той же
   линии, что подписи строк. */
html body .dropdown__empty {
  padding: 10px 16px !important;
  color: #9ca3af !important;
  font-size: 13px !important;
}

html body.theme-dark .dropdown__search {
  border-bottom-color: var(--border, #2b2b2b) !important;
}

html body.theme-dark .dropdown__search:focus-within {
  border-bottom-color: var(--primary, #0078d4) !important;
}

html body.theme-dark .dropdown__search-ico {
  color: var(--text-mute, #9d9d9d) !important;
}

html body.theme-dark .dropdown__search-input {
  color: var(--text, #cccccc) !important;
}

html body .view-am .am-table-card,
html body.theme-dark .view-am .am-table-card {
  overflow: visible !important;
}

@keyframes am-rescan-spin {
  to {
    transform: rotate(360deg);
  }
}

html body .view-am .table-card,
html body.theme-dark .view-am .table-card {
  min-height: 520px !important;
  margin-top: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--border, #e7ebf2) !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}

html body .modal__panel--actions,
html body.theme-dark .modal__panel--actions {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

html body .modal__panel--privacy-list,
html body.theme-dark .modal__panel--privacy-list {
  width: 440px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(92vh, 580px) !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text, #111827) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

html body #role-modal .modal__panel--role,
html body.theme-dark #role-modal .modal__panel--role {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

/* Unified width across the whole "Действия" flow (root menu + all sub-steps). */
html body .modal__panel--privacy-form,
html body.theme-dark .modal__panel--privacy-form,
html body .modal__panel--folder,
html body.theme-dark .modal__panel--folder,
html body #security-confirm-modal .tg-security-modal,
html body.theme-dark #security-confirm-modal .tg-security-modal,
html body .modal .tg-security-modal,
html body.theme-dark .modal .tg-security-modal {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
}

html body {
  --modal-close-size: 38px;
  --modal-close-icon-size: 18px;
  --modal-close-radius: 50%;
  --modal-close-color: #8b8f97;
  --modal-close-hover-bg: #f3f4f6;
  --modal-close-hover-color: #374151;
}

html body .modal .edit-profile__nav,
html body .modal .actions-modal__nav,
html body .modal .modal__head > .icon-btn[data-close],
html body .modal .privacy-list__nav,
html body .modal .privacy-form__nav,
html body .modal .tg-security-head__btn,
html body.theme-dark .modal .edit-profile__nav,
html body.theme-dark .modal .actions-modal__nav,
html body.theme-dark .modal .modal__head > .icon-btn[data-close],
html body.theme-dark .modal .privacy-list__nav,
html body.theme-dark .modal .privacy-form__nav,
html body.theme-dark .modal .tg-security-head__btn {
  width: var(--modal-close-size) !important;
  height: var(--modal-close-size) !important;
  min-width: var(--modal-close-size) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: var(--modal-close-radius) !important;
  background: transparent !important;
  color: var(--modal-close-color) !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

html body .modal .edit-profile__nav:hover,
html body .modal .actions-modal__nav:hover,
html body .modal .modal__head > .icon-btn[data-close]:hover,
html body .modal .privacy-list__nav:hover,
html body .modal .privacy-form__nav:hover,
html body .modal .tg-security-head__btn:hover,
html body.theme-dark .modal .edit-profile__nav:hover,
html body.theme-dark .modal .actions-modal__nav:hover,
html body.theme-dark .modal .modal__head > .icon-btn[data-close]:hover,
html body.theme-dark .modal .privacy-list__nav:hover,
html body.theme-dark .modal .privacy-form__nav:hover,
html body.theme-dark .modal .tg-security-head__btn:hover {
  border-radius: var(--modal-close-radius) !important;
  background: var(--modal-close-hover-bg) !important;
  color: var(--modal-close-hover-color) !important;
}

html body .modal .edit-profile__nav svg,
html body .modal .actions-modal__nav svg,
html body .modal .modal__head > .icon-btn[data-close] svg,
html body .modal .privacy-list__nav svg,
html body .modal .privacy-form__nav svg,
html body .modal .tg-security-head__btn svg,
html body.theme-dark .modal .edit-profile__nav svg,
html body.theme-dark .modal .actions-modal__nav svg,
html body.theme-dark .modal .modal__head > .icon-btn[data-close] svg,
html body.theme-dark .modal .privacy-list__nav svg,
html body.theme-dark .modal .privacy-form__nav svg,
html body.theme-dark .modal .tg-security-head__btn svg {
  width: var(--modal-close-icon-size) !important;
  height: var(--modal-close-icon-size) !important;
  stroke-width: 1.7 !important;
}

html body .modal__panel--edit-profile,
html body.theme-dark .modal__panel--edit-profile {
  width: 440px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

html body .edit-profile__head,
html body.theme-dark .edit-profile__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px 8px 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

html body .edit-profile__title,
html body.theme-dark .edit-profile__title {
  margin: 0 !important;
  color: #2b2b2b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body .modal__panel--edit-profile .edit-profile__sub,
html body.theme-dark .modal__panel--edit-profile .edit-profile__sub {
  margin: 0 !important;
  padding: 8px 12px 0 !important;
  color: #8f8f8f !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html body .edit-profile__picker,
html body.theme-dark .edit-profile__picker {
  max-height: min(72vh, 520px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 12px !important;
  background: #ffffff !important;
}

html body .edit-profile__card,
html body.theme-dark .edit-profile__card {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body .edit-profile__card:hover,
html body.theme-dark .edit-profile__card:hover {
  background: #f7f7f7 !important;
  border-bottom-color: transparent !important;
}

html body .edit-profile__card:last-child,
html body.theme-dark .edit-profile__card:last-child {
  border-bottom: 0 !important;
}

html body .edit-profile__ico,
html body.theme-dark .edit-profile__ico {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8f8f8f !important;
}

html body .edit-profile__ico svg,
html body.theme-dark .edit-profile__ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

html body .edit-profile__label,
html body.theme-dark .edit-profile__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

html body .edit-profile__choice-row,
html body.theme-dark .edit-profile__choice-row {
  gap: 0 !important;
}

html body .edit-profile__choice--tile,
html body.theme-dark .edit-profile__choice--tile {
  min-height: 32px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
  background: #f7f7f7 !important;
  color: #2b2b2b !important;
}

html body .edit-profile__choice--tile.is-checked,
html body.theme-dark .edit-profile__choice--tile.is-checked {
  background: #dddddd !important;
  border-color: #d0d0d0 !important;
  box-shadow: none !important;
}

html body .edit-profile__file-btn,
html body.theme-dark .edit-profile__file-btn {
  min-height: 38px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #f7f7f7 !important;
  color: #2b2b2b !important;
}

html body .edit-profile__file-status,
html body .edit-profile__note-text,
html body.theme-dark .edit-profile__file-status,
html body.theme-dark .edit-profile__note-text {
  color: #8f8f8f !important;
}

html body .edit-profile__note,
html body.theme-dark .edit-profile__note {
  border: 1px solid #eeeeee !important;
  border-radius: 6px !important;
  background: #fafafa !important;
}

html body .edit-profile__note-ico,
html body.theme-dark .edit-profile__note-ico {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.10) !important;
}

/* Bulk textarea row for multi-account name / username input */
html body #edit-profile-form-modal .edit-profile__bulk-row,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-row {
  border-top: 1px dashed #dadce0 !important;
  padding-top: 16px !important;
  margin-top: 2px !important;
}
html body #edit-profile-form-modal .edit-profile__bulk-row textarea,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-row textarea {
  min-height: auto !important;
  padding: 9px 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}
html body .edit-profile__bulk-hint,
html body.theme-dark .edit-profile__bulk-hint {
  color: #8f8f8f !important;
  font-weight: 400 !important;
}

/* Source switch ("Файл / Эмодзи") rendered as a flat segmented control,
   matching the reference tab bars (Local / Redirect / …). No radio bullets. */
html body .edit-profile__choice-row--source,
html body.theme-dark .edit-profile__choice-row--source {
  gap: 0 !important;
  flex-wrap: nowrap !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #f1f1f1 !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice--tile,
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice--tile + .edit-profile__choice--tile,
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile + .edit-profile__choice--tile {
  border-left: 1px solid #d9d9d9 !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice--tile:hover,
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile:hover {
  background: #ececec !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked,
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked {
  background: #dcdcdc !important;
  box-shadow: none !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice--tile input[type="radio"],
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .edit-profile__choice-row--source .edit-profile__choice-title,
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2b2b2b !important;
}

/* Inline option labels read as calm dark form labels, not muted accents. */
html body .edit-profile__photo-replace .inv-field__label,
html body.theme-dark .edit-profile__photo-replace .inv-field__label {
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body #role-modal .role-modal__head,
html body.theme-dark #role-modal .role-modal__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px 8px 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

html body #role-modal.modal--no-back .role-modal__head,
html body.theme-dark #role-modal.modal--no-back .role-modal__head {
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 10px !important;
  padding: 8px 22px 8px 22px !important;
}

html body #role-modal .role-modal__title,
html body.theme-dark #role-modal .role-modal__title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #2b2b2b !important;
}

html body #role-modal .role-modal__body,
html body.theme-dark #role-modal .role-modal__body {
  padding: 16px 18px 18px !important;
  display: grid !important;
  gap: 8px !important;
  background: #ffffff !important;
}

html body #role-modal .role-modal__field-label,
html body.theme-dark #role-modal .role-modal__field-label {
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body #role-modal .role-combo,
html body.theme-dark #role-modal .role-combo {
  margin: 0 !important;
  gap: 8px !important;
}

html body #role-modal .role-combo input,
html body.theme-dark #role-modal .role-combo input {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body #role-modal .role-combo input:focus,
html body.theme-dark #role-modal .role-combo input:focus {
  border-color: #d9d9d9 !important;
  box-shadow: none !important;
}

html body #role-modal .role-combo__chev,
html body.theme-dark #role-modal .role-combo__chev {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #8f8f8f !important;
}

/* Список ролей раскрывается из поля ввода — оболочка общая, из канона окон. */
html body #role-modal .role-list,
html body.theme-dark #role-modal .role-list {
  margin: var(--pop-gap, 4px) 0 0 !important;
  border: 1px solid var(--pop-border-color, #dadce0) !important;
  border-radius: var(--pop-radius, 8px) !important;
  background: var(--pop-bg, #ffffff) !important;
}

html body #role-modal .role-modal__footer,
html body.theme-dark #role-modal .role-modal__footer {
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
  background: #ffffff !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* Role modal footer: green .btn--primary confirm */
html body #role-modal .role-modal__footer .btn--primary,
html body.theme-dark #role-modal .role-modal__footer .btn--primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
html body #role-modal .role-modal__footer .btn--primary:hover,
html body.theme-dark #role-modal .role-modal__footer .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* Role modal footer: ghost cancel (Удалить роль) red tint */
html body #role-modal .role-modal__footer #role-delete.btn--ghost,
html body.theme-dark #role-modal .role-modal__footer #role-delete.btn--ghost {
  color: var(--red, #e25555) !important;
  border-color: var(--border, #e3e8f0) !important;
  background: transparent !important;
}
html body #role-modal .role-modal__footer #role-delete.btn--ghost:hover,
html body.theme-dark #role-modal .role-modal__footer #role-delete.btn--ghost:hover {
  background: rgba(226, 85, 85, 0.08) !important;
  border-color: rgba(226, 85, 85, 0.35) !important;
}

html body .modal .privacy-form__footer .privacy-form__action,
html body.theme-dark .modal .privacy-form__footer .privacy-form__action {
  min-width: 74px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  background: #f7f7f7 !important;
  color: #212121 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html body .modal .privacy-form__footer .privacy-form__action--primary,
html body.theme-dark .modal .privacy-form__footer .privacy-form__action--primary {
  border-color: #3b82f6 !important;
  background: #3b82f6 !important;
  color: #fafafa !important;
  font-weight: 500 !important;
}

html body .modal .privacy-form__footer .privacy-form__action:hover,
html body.theme-dark .modal .privacy-form__footer .privacy-form__action:hover {
  background: #ececec !important;
  box-shadow: none !important;
}

html body .modal .privacy-form__footer .privacy-form__action--primary:hover,
html body.theme-dark .modal .privacy-form__footer .privacy-form__action--primary:hover {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #fafafa !important;
}

html body .privacy-list__head,
html body.theme-dark .privacy-list__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px 8px 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

html body .privacy-list__title,
html body.theme-dark .privacy-list__title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #2b2b2b !important;
}

html body .privacy-list__body,
html body.theme-dark .privacy-list__body {
  max-height: min(72vh, 520px) !important;
  overflow-y: auto !important;
  padding: 6px 10px 12px !important;
  background: #ffffff !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.35) transparent !important;
}

html body .privacy-list__items,
html body.theme-dark .privacy-list__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

html body .privacy-list__items--security,
html body.theme-dark .privacy-list__items--security {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

html body .privacy-list__items--security .privacy-list__row,
html body.theme-dark .privacy-list__items--security .privacy-list__row {
  padding-left: 12px !important;
}

html body .privacy-list__row,
html body.theme-dark .privacy-list__row {
  width: 100% !important;
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body .privacy-list__row--security,
html body.theme-dark .privacy-list__row--security {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body .privacy-list__row:hover,
html body.theme-dark .privacy-list__row:hover {
  background: var(--bg-hover, #f5f8fb) !important;
}

html body .privacy-list__label,
html body.theme-dark .privacy-list__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--text, #111827) !important;
}

html body .privacy-list__ico,
html body.theme-dark .privacy-list__ico {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-mute, #5f6670) !important;
}

html body .privacy-list__ico svg,
html body.theme-dark .privacy-list__ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

html body .privacy-list__value,
html body.theme-dark .privacy-list__value {
  color: #2563eb !important;
  display: none !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}

html body .modal__panel--privacy-form,
html body .modal .tg-security-modal,
html body.theme-dark .modal__panel--privacy-form,
html body.theme-dark .modal .tg-security-modal {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(92vh, 640px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

/* Privacy-list panel — compact, matches Actions modal (§7.9, 392px) */
html body .modal__panel--privacy-list,
html body.theme-dark .modal__panel--privacy-list {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(92vh, 640px) !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

html body .privacy-form__head,
html body .modal .tg-security-head,
html body.theme-dark .privacy-form__head,
html body.theme-dark .modal .tg-security-head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 20px 10px 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

/* Privacy-list header — compact, matches Actions modal (56px) */
html body .privacy-list__head,
html body.theme-dark .privacy-list__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px 8px 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

html body .modal .tg-security-head,
html body.theme-dark .modal .tg-security-head {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
}

html body .privacy-form__head,
html body.theme-dark .privacy-form__head {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  padding: 10px 20px 10px 14px !important;
}

html body .privacy-list__title,
html body .privacy-form__title,
html body .modal .tg-security-head__title,
html body.theme-dark .privacy-list__title,
html body.theme-dark .privacy-form__title,
html body.theme-dark .modal .tg-security-head__title {
  margin: 0 !important;
  color: #2b2b2b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body .privacy-list__body,
html body.theme-dark .privacy-list__body {
  max-height: min(72vh, 520px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 12px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.35) transparent !important;
}

html body .privacy-list__row,
html body.theme-dark .privacy-list__row {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body .privacy-list__row:not(.privacy-list__row--security),
html body.theme-dark .privacy-list__row:not(.privacy-list__row--security) {
  grid-template-columns: 26px minmax(0, 1fr) !important;
}

html body .privacy-list__row:hover,
html body.theme-dark .privacy-list__row:hover {
  background: #f7f7f7 !important;
}

html body .privacy-list__ico,
html body.theme-dark .privacy-list__ico {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8f8f8f !important;
}

html body .privacy-list__ico svg,
html body.theme-dark .privacy-list__ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

/* Privacy-list label — compact, matches Actions modal 14px */
html body .privacy-list__label,
html body .privacy-list__value,
html body.theme-dark .privacy-list__label,
html body.theme-dark .privacy-list__value {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body .modal .tg-security-row__label,
html body.theme-dark .modal .tg-security-row__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body .privacy-list__label,
html body .modal .tg-security-row__label,
html body.theme-dark .privacy-list__label,
html body.theme-dark .modal .tg-security-row__label {
  color: #2b2b2b !important;
}

html body .privacy-list__value,
html body.theme-dark .privacy-list__value {
  color: #2563eb !important;
  display: none !important;
}

html body #edit-profile-modal .edit-profile__head,
html body #role-modal .role-modal__head,
html body.theme-dark #edit-profile-modal .edit-profile__head,
html body.theme-dark #role-modal .role-modal__head {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  padding: 8px 14px 8px 14px !important;
}

html body #edit-privacy-modal .privacy-list__head,
html body.theme-dark #edit-privacy-modal .privacy-list__head {
  display: block !important;
  grid-template-columns: none !important;
  padding: 10px 24px 8px !important;
}

html body #edit-profile-modal .edit-profile__head > [data-back],
html body #role-modal .role-modal__head > [data-back],
html body.theme-dark #edit-profile-modal .edit-profile__head > [data-back],
html body.theme-dark #role-modal .role-modal__head > [data-back] {
  display: inline-flex !important;
}

html body #edit-profile-modal .edit-profile__title,
html body #role-modal .role-modal__title,
html body.theme-dark #edit-profile-modal .edit-profile__title,
html body.theme-dark #role-modal .role-modal__title {
  grid-column: 2 !important;
}

html body #edit-privacy-modal .privacy-list__title,
html body.theme-dark #edit-privacy-modal .privacy-list__title {
  grid-column: auto !important;
}

html body #twofa-modal .tg-security-head,
html body #cloud-password-change-modal .modal__head,
html body #security-confirm-modal .tg-security-head,
html body #auto-delete-modal .auto-delete-modal__head,
html body.theme-dark #twofa-modal .tg-security-head,
html body.theme-dark #cloud-password-change-modal .modal__head,
html body.theme-dark #security-confirm-modal .tg-security-head,
html body.theme-dark #auto-delete-modal .auto-delete-modal__head {
  display: block !important;
  grid-template-columns: none !important;
  padding: 10px 24px 8px !important;
}

html body .privacy-form__body,
html body .modal .tg-security-body,
html body.theme-dark .privacy-form__body,
html body.theme-dark .modal .tg-security-body {
  max-height: min(70vh, 560px) !important;
  overflow-y: auto !important;
  padding: 18px 24px 28px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.35) transparent !important;
}

html body .modal .tg-security-body,
html body.theme-dark .modal .tg-security-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html body #security-confirm-modal .tg-security-confirm-body,
html body.theme-dark #security-confirm-modal .tg-security-confirm-body {
  min-height: 96px !important;
  max-height: none !important;
  overflow-y: visible !important;
  padding: 18px 24px 22px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Confirm message text — Nimbus standard (DESIGN.md §7.11) */
html body #security-confirm-modal .tg-security-confirm-msg,
html body.theme-dark #security-confirm-modal .tg-security-confirm-msg {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-mute, #6b7494) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  text-align: left !important;
}

/* Security confirm footer — matches Nimbus modal__foot (DESIGN.md §7.8) */
html body #security-confirm-modal .security-confirm__foot,
html body.theme-dark #security-confirm-modal .security-confirm__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
  background: #ffffff !important;
}

/* Green confirm button inside security-confirm footer */
html body #security-confirm-modal .security-confirm__foot .btn--primary,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--primary {
  border: 1px solid #3b82f6 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body #security-confirm-modal .security-confirm__foot .btn--primary:hover,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* ── «Автоудаление сообщений» (Nimbus redesign, DESIGN.md §7) ── */

/* Panel — actions-flow compact spec (392px / 8px radius) */
html body #auto-delete-modal .modal__panel--auto-delete,
html body.theme-dark #auto-delete-modal .modal__panel--auto-delete {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(92vh, 640px) !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

/* Header — 56px, title + close (no back button for this modal) */
html body #auto-delete-modal .auto-delete-modal__head,
html body.theme-dark #auto-delete-modal .auto-delete-modal__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px 8px 22px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

/* Title — 18px / 700 / #2b2b2b, no icon */
html body #auto-delete-modal .auto-delete-modal__title,
html body.theme-dark #auto-delete-modal .auto-delete-modal__title {
  margin: 0 !important;
  color: #2b2b2b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Body — scrollable radio list + note */
html body #auto-delete-modal .auto-delete-modal__body,
html body.theme-dark #auto-delete-modal .auto-delete-modal__body {
  max-height: min(70vh, 520px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 12px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.35) transparent !important;
}

/* ── Radio rows — flat picker rows (DESIGN.md §7.6) ── */
html body #auto-delete-modal .auto-delete-radio,
html body.theme-dark #auto-delete-modal .auto-delete-radio {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* Row hover — fills the whole row */
html body #auto-delete-modal .auto-delete-radio:hover,
html body.theme-dark #auto-delete-modal .auto-delete-radio:hover {
  background: #f7f7f7 !important;
}

/* Radio label */
html body #auto-delete-modal .auto-delete-radio__label,
html body.theme-dark #auto-delete-modal .auto-delete-radio__label {
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Custom radio input (green #2563eb accent) ── */
html body #auto-delete-modal .auto-delete-radio input[type="radio"],
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #b5bcc4 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
  flex: none !important;
}

html body #auto-delete-modal .auto-delete-radio input[type="radio"]::before,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  transition: transform 0.14s ease !important;
  background: #2563eb !important;
}

html body #auto-delete-modal .auto-delete-radio input[type="radio"]:checked,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]:checked {
  border-color: #2563eb !important;
}

html body #auto-delete-modal .auto-delete-radio input[type="radio"]:checked::before,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

/* ── Note — muted helper text ── */
html body #auto-delete-modal .auto-delete-modal__note,
html body.theme-dark #auto-delete-modal .auto-delete-modal__note {
  margin: 12px 0 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f8f8f !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* ── Footer — unified .btn footer (DESIGN.md §7.8) ── */
html body #auto-delete-modal .auto-delete-modal__foot,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
  background: #ffffff !important;
}

/* Green primary confirm button */
html body #auto-delete-modal .auto-delete-modal__foot .btn--primary,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--primary {
  border: 1px solid #3b82f6 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

html body #auto-delete-modal .auto-delete-modal__foot .btn--primary:hover,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

html body .privacy-form__choices,
html body .modal .tg-security-list,
html body.theme-dark .privacy-form__choices,
html body.theme-dark .modal .tg-security-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

html body .privacy-form__choices + .privacy-form__note,
html body.theme-dark .privacy-form__choices + .privacy-form__note {
  margin-top: 14px !important;
}

html body .privacy-form__radio,
html body .modal .tg-security-row,
html body.theme-dark .privacy-form__radio,
html body.theme-dark .modal .tg-security-row {
  min-height: 40px !important;
  display: grid !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

html body .modal .tg-security-row {
  grid-template-columns: 26px minmax(0, 1fr) auto !important;
}

html body .privacy-form__radio:hover,
html body .modal .tg-security-row:hover,
html body.theme-dark .privacy-form__radio:hover,
html body.theme-dark .modal .tg-security-row:hover {
  background: #f7f7f7 !important;
}

html body .modal .tg-security-row__ico,
html body.theme-dark .modal .tg-security-row__ico {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8f8f8f !important;
}

html body .modal .tg-security-row__ico svg,
html body.theme-dark .modal .tg-security-row__ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

html body .modal .tg-security-text,
html body .modal .tg-security-note,
html body.theme-dark .modal .tg-security-text,
html body.theme-dark .modal .tg-security-note {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f8f8f !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Privacy-form note — clean helper text (DESIGN.md §7.7) */
html body .privacy-form__note,
html body.theme-dark .privacy-form__note {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8b8f97 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Green primary confirm button in privacy form footer (DESIGN.md §7.8) */
html body .privacy-form__footer .btn--primary,
html body.theme-dark .privacy-form__footer .btn--primary {
  border: 1px solid #3b82f6 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body .privacy-form__footer .btn--primary:hover,
html body.theme-dark .privacy-form__footer .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

html body .privacy-form__footer,
html body .modal .tg-security-footer,
html body.theme-dark .privacy-form__footer,
html body.theme-dark .modal .tg-security-footer {
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  font-size: 14px !important;
}

html body .actions-modal__head,
html body.theme-dark .actions-modal__head {
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px 8px 22px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

html body .actions-modal__title,
html body.theme-dark .actions-modal__title {
  margin: 0 !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #2b2b2b !important;
}

html body .modal__panel--actions .actions-list--telegram,
html body.theme-dark .modal__panel--actions .actions-list--telegram {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-height: min(72vh, 520px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 15px 10px 25px !important;
  background: #ffffff !important;
}

html body .modal__panel--actions .actions-list--telegram li,
html body.theme-dark .modal__panel--actions .actions-list--telegram li {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html body .modal__panel--actions .actions-list--telegram li:hover,
html body.theme-dark .modal__panel--actions .actions-list--telegram li:hover {
  background: #f7f7f7 !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
}

html body .modal__panel--actions .actions-list--telegram li:last-child,
html body.theme-dark .modal__panel--actions .actions-list--telegram li:last-child {
  border-bottom: 0 !important;
}

html body .modal__panel--actions .actions-list--telegram .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram .ico {
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #8f8f8f !important;
}

html body .modal__panel--actions .actions-list--telegram .ico svg,
html body.theme-dark .modal__panel--actions .actions-list--telegram .ico svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke-width: 1.7 !important;
}

html body .modal__panel--actions .actions-list--telegram li[data-act="check"] .ico,
html body .modal__panel--actions .actions-list--telegram li[data-act="check_spamblock"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="check"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="check_spamblock"] .ico {
  color: #8f8f8f !important;
  background: transparent !important;
}

html body .modal__panel--actions .actions-list--telegram li[data-act="change_role"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="change_role"] .ico {
  color: #8f8f8f !important;
  background: transparent !important;
}

html body .modal__panel--actions .actions-list--telegram li[data-act="open_web"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="open_web"] .ico {
  color: #8f8f8f !important;
  background: transparent !important;
}

html body .modal__panel--actions .actions-list--telegram li[data-act="edit_profile"] .ico,
html body .modal__panel--actions .actions-list--telegram li[data-act="edit_privacy"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="edit_profile"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="edit_privacy"] .ico {
  color: #8f8f8f !important;
  background: transparent !important;
}

html body .modal__panel--actions .actions-list--telegram .actions-list__label,
html body.theme-dark .modal__panel--actions .actions-list--telegram .actions-list__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #2b2b2b !important;
}

html body .modal__panel--actions .actions-list--telegram .hint,
html body.theme-dark .modal__panel--actions .actions-list--telegram .hint {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.3px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--text-mute, #8b94a7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

html body .modal__panel--actions .actions-list--telegram li,
html body .modal__panel--edit-profile .edit-profile__card,
html body .modal__panel--privacy-list .privacy-list__row,
html body .modal .tg-security-row,
html body .modal__panel--folder .role-list li,
html body #role-modal .role-list li,
html body.theme-dark .modal__panel--actions .actions-list--telegram li,
html body.theme-dark .modal__panel--edit-profile .edit-profile__card,
html body.theme-dark .modal__panel--privacy-list .privacy-list__row,
html body.theme-dark .modal .tg-security-row,
html body.theme-dark .modal__panel--folder .role-list li,
html body.theme-dark #role-modal .role-list li {
  border-bottom: 0 !important;
}

html body .range-modal__body,
html body.theme-dark .range-modal__body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 18px !important;
}

html body .range-modal__field,
html body.theme-dark .range-modal__field {
  display: grid !important;
  gap: 7px !important;
  color: var(--text-mute, #64748b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .range-modal__input,
html body.theme-dark .range-modal__input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border, #e1e7ef) !important;
  border-radius: 8px !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text, #111827) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .range-modal__input:focus,
html body.theme-dark .range-modal__input:focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}

html body .picker-range-pop .picker-range-pop__body.range-modal__body,
html body.theme-dark .picker-range-pop .picker-range-pop__body.range-modal__body {
  padding: 0 !important;
  gap: 14px !important;
}

html body .picker-range-pop .picker-range-pop__footer.range-modal__footer,
html body.theme-dark .picker-range-pop .picker-range-pop__footer.range-modal__footer {
  padding: 0 !important;
  border-top: 0 !important;
}

/* Компактный диапазон-поповер «Выбрать аккаунты/базы/прокси».
   Меньше большой range-модалки: узкое окно, поля «От/До» — только нижняя
   линия (Telegram-инпут), без рамок и фона; ниже кнопки, плотнее отступы. */
html body .picker-range-pop,
html body.theme-dark .picker-range-pop {
  gap: 10px !important;
  min-width: 188px !important;
  max-width: 188px !important;
  padding: 10px !important;
}
html body .picker-range-pop .picker-range-pop__title,
html body.theme-dark .picker-range-pop .picker-range-pop__title {
  font-size: 11px !important;
  margin-bottom: 1px !important;
}
html body .picker-range-pop .range-modal__field,
html body.theme-dark .picker-range-pop .range-modal__field {
  gap: 2px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
/* Поле «От/До» — только нижняя линия (как Telegram-инпут «Имя/Фамилия»). */
html body .picker-range-pop .range-modal__input,
html body.theme-dark .picker-range-pop .range-modal__input {
  height: 26px !important;
  padding: 0 1px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border, #cbd5e1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #111827) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease !important;
}
html body .picker-range-pop .range-modal__input:focus,
html body.theme-dark .picker-range-pop .range-modal__input:focus {
  border-bottom: 2px solid var(--primary, #2563eb) !important;
  box-shadow: none !important;
}
html body .picker-range-pop .range-modal__input::-webkit-outer-spin-button,
html body .picker-range-pop .range-modal__input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
html body .picker-range-pop .picker-range-pop__footer .btn--sm,
html body.theme-dark .picker-range-pop .picker-range-pop__footer .btn--sm {
  min-height: 28px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}

html body .range-modal__footer,
html body.theme-dark .range-modal__footer {
  padding: 12px 18px !important;
  gap: 8px !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  justify-content: flex-end !important;
}

/* Range popovers + inviter modal reuse unified .btn geometry.
   #px-range-pop намеренно НЕ здесь: окно «Диапазон» прокси наследует канон
   аккаунтов (#am-range-pop) из финального блока .am-gmail-bar .am-check-menu. */
html body #am-range-pop .picker-range-pop__footer .btn--primary,
html body #inv-pick-range-modal .range-modal__footer .btn--primary {
  background: #3b82f6 !important;
  border: 1px solid #3b82f6 !important;
  color: #fff !important;
}
html body #am-range-pop .picker-range-pop__footer .btn--primary:hover,
html body #inv-pick-range-modal .range-modal__footer .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* ── Inviter modals: green confirm + ghost cancel footer (DESIGN.md §7.8) ─── */
/* Окна планировщика здесь больше нет: оно переехало в поколение окон-форм
   (блок «ОКНО ПЛАНИРОВЩИКА» в конце файла), и синяя кнопка 38px/r6 осталась
   бы мёртвым правилом, спорящим с пилюлей канона. */
html body #inv-list-modal .modal__foot .btn--primary,
html body #inv-base-modal .modal__foot .btn--primary {
  background: #3b82f6 !important;
  border: 1px solid #3b82f6 !important;
  color: #fff !important;
}
html body #inv-list-modal .modal__foot .btn--primary:hover,
html body #inv-base-modal .modal__foot .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* в”Ђв”Ђ Proxy "form" modals (Add / Bind): white panel in both themes + readable
      content, per design-modal.md. Pick-bind stays theme-adaptive. в”Ђв”Ђ */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel {
  background: #ffffff !important;
  color: #2b2b2b !important;
  border: 0 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__head {
  background: #ffffff !important;
  border-bottom-color: #e5e5e5 !important;
}
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__title {
  color: #2b2b2b !important;
}

/* Bind-proxy body on white */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__row {
  background: #f7f7f7 !important;
  border-color: #e5e5e5 !important;
}
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__name {
  color: #2b2b2b !important;
}
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__sub,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__hint,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__count {
  color: #6b6b6b !important;
}
html body.theme-dark #bind-proxy-modal .bind-proxy__select {
  background: #ffffff !important;
  color: #2b2b2b !important;
  border-color: #d9d9d9 !important;
}

/* ── "Переместить в папку": give the same header/title/body as "Добавить роль"
      (it shares .role-modal__* but is a different #id, so the #role-modal rules
      above did not reach it). Title 18px, aligned list. в”Ђв”Ђ */

/* в”Ђв”Ђ No-back state (modal opened from quick actions): hide the back arrow and
      keep the title flush-left for both "Добавить роль" and "Переместить в папку".
      The generic .edit-profile__nav rule forces display:inline-flex, so the back
      button needs an explicit, higher-specificity override here. в”Ђв”Ђ */
html body #role-modal.modal--no-back .role-modal__head,
html body #folder-modal.modal--no-back .role-modal__head,
html body.theme-dark #role-modal.modal--no-back .role-modal__head,
html body.theme-dark #folder-modal.modal--no-back .role-modal__head {
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  padding: 10px 20px 10px 24px !important;
}

html body #role-modal.modal--no-back .role-modal__head [data-back],
html body #folder-modal.modal--no-back .role-modal__head [data-back],
html body.theme-dark #role-modal.modal--no-back .role-modal__head [data-back],
html body.theme-dark #folder-modal.modal--no-back .role-modal__head [data-back] {
  display: none !important;
}

html body #role-modal.modal--no-back .role-modal__title,
html body #folder-modal.modal--no-back .role-modal__title,
html body.theme-dark #role-modal.modal--no-back .role-modal__title,
html body.theme-dark #folder-modal.modal--no-back .role-modal__title {
  grid-column: 1 !important;
  justify-self: start !important;
  padding-left: 0 !important;
}

html body #role-modal.modal--no-back .role-modal__head [data-close],
html body #folder-modal.modal--no-back .role-modal__head [data-close],
html body.theme-dark #role-modal.modal--no-back .role-modal__head [data-close],
html body.theme-dark #folder-modal.modal--no-back .role-modal__head [data-close] {
  grid-column: 2 !important;
}

html body .view-am .table-wrap,
html body.theme-dark .view-am .table-wrap,
html body .view-proxy .table-wrap,
html body.theme-dark .view-proxy .table-wrap,
html body .view-tasks .table-wrap,
html body.theme-dark .view-tasks .table-wrap {
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Sticky search row + table header while scrolling the module */
html body .view-am,
html body.theme-dark .view-am,
html body .view-proxy,
html body.theme-dark .view-proxy {
  --am-sticky-search-offset: 52px;
}

/* Оболочка .acc-table (база/Google Sans/шапка) — канонический контракт
   .app-table в конце файла; здесь остаются геометрия колонок и вкладки. */
html body .view-am .px-tabs.px-tabs--row,
html body .view-am .px-tabs.px-tabs--row *,
html body.theme-dark .view-am .px-tabs.px-tabs--row,
html body.theme-dark .view-am .px-tabs.px-tabs--row * {
  font-family: var(--app-font) !important;
}

html body .view-am .acc-table thead th:nth-child(1),
html body .view-am .acc-table tbody td:nth-child(1),
html body.theme-dark .view-am .acc-table thead th:nth-child(1),
html body.theme-dark .view-am .acc-table tbody td:nth-child(1) {
  width: 3.2% !important;
}

html body .view-am .acc-table thead th:nth-child(2),
html body .view-am .acc-table tbody td:nth-child(2),
html body.theme-dark .view-am .acc-table thead th:nth-child(2),
html body.theme-dark .view-am .acc-table tbody td:nth-child(2) {
  width: 3.8% !important;
}

/* 8 колонок: select, #, аккаунт, гео, статус, прокси, роль, actions (схлопнута). */
html body .view-am .acc-table thead th:nth-child(3),
html body .view-am .acc-table tbody td:nth-child(3),
html body.theme-dark .view-am .acc-table thead th:nth-child(3),
html body.theme-dark .view-am .acc-table tbody td:nth-child(3) {
  width: 22% !important;
}

/* Колонки после «Аккаунта» (гео, статус, прокси, роль) поровну делят свободное
   пространство, чтобы таблица растягивалась на всю ширину, а не копила пустоту
   в последней колонке. Первые три (выбор, #, аккаунт) остаются компактными. */
html body .view-am .acc-table thead th:nth-child(4),
html body .view-am .acc-table tbody td:nth-child(4),
html body.theme-dark .view-am .acc-table thead th:nth-child(4),
html body.theme-dark .view-am .acc-table tbody td:nth-child(4) {
  width: auto !important;
}

html body .view-am .acc-table thead th:nth-child(5),
html body .view-am .acc-table tbody td:nth-child(5),
html body.theme-dark .view-am .acc-table thead th:nth-child(5),
html body.theme-dark .view-am .acc-table tbody td:nth-child(5) {
  width: auto !important;
}

html body .view-am .acc-table thead th:nth-child(6),
html body .view-am .acc-table tbody td:nth-child(6),
html body.theme-dark .view-am .acc-table thead th:nth-child(6),
html body.theme-dark .view-am .acc-table tbody td:nth-child(6) {
  width: auto !important;
}

html body .view-am .acc-table thead th:nth-child(7),
html body .view-am .acc-table tbody td:nth-child(7),
html body.theme-dark .view-am .acc-table thead th:nth-child(7),
html body.theme-dark .view-am .acc-table tbody td:nth-child(7) {
  width: auto !important;
  padding-right: 16px !important;
}

/* Сортировка и базовые ячейки — канонический контракт .app-table. */

/* Edge gutter: у первой колонки аккаунтов правый отступ уже, чем в общем
   контракте (чекбокс+номер+карточка в одной ячейке). */
html body .view-am .acc-table thead th:first-child,
html body .view-am .acc-table tbody td:first-child,
html body.theme-dark .view-am .acc-table thead th:first-child,
html body.theme-dark .view-am .acc-table tbody td:first-child {
  padding-right: 12px !important;
}

html body .view-am .am-gmail-bar,
html body.theme-dark .view-am .am-gmail-bar {
  background: var(--card, #fff) !important;
  border-bottom: 1px solid var(--border, #e7ebf2) !important;
  min-height: 48px !important;
  padding: 0px 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Панель действий (gmail-bar) — единственный sticky-элемент в скролл-контейнере
   .am-table-shell; вкладки и шапка таблицы уходят вверх вместе со строками. */
html body .view-am .am-table-shell > .am-gmail-bar,
html body.theme-dark .view-am .am-table-shell > .am-gmail-bar {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .view-am .am-table-shell > .picker-gmail-bar.am-gmail-bar.is-scroll-raised,
html body.theme-dark .view-am .am-table-shell > .picker-gmail-bar.am-gmail-bar.is-scroll-raised {
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1) !important;
}

html body .view-am .acc-table tbody td[data-col="select"],
html body .view-am .acc-table tbody td[data-col="num"],
html body .view-am .acc-table tbody td[data-col="phone"],
html body.theme-dark .view-am .acc-table tbody td[data-col="select"],
html body.theme-dark .view-am .acc-table tbody td[data-col="num"],
html body.theme-dark .view-am .acc-table tbody td[data-col="phone"] {
  border-left: none !important;
}

html body .view-am .acc-table thead th[data-col]:not([data-col="select"]):not([data-col="num"]),
html body.theme-dark .view-am .acc-table thead th[data-col]:not([data-col="select"]):not([data-col="num"]) {
  border-left: none !important;
}

html body .view-am .acc-table tbody td[data-col],
html body.theme-dark .view-am .acc-table tbody td[data-col] {
  border-left: none !important;
}

html body .view-am .acc-table thead th[data-col="phone"],
html body.theme-dark .view-am .acc-table thead th[data-col="phone"] {
  padding-left: 16px !important;
}

html body .view-am .acc-table tbody td[data-col="phone"],
html body.theme-dark .view-am .acc-table tbody td[data-col="phone"] {
  padding-left: 16px !important;
}

html body .view-am .acc-table thead th:last-child,
html body .view-am .acc-table tbody td:last-child,
html body.theme-dark .view-am .acc-table thead th:last-child,
html body.theme-dark .view-am .acc-table tbody td:last-child {
  padding-right: 20px !important;
}

html body .view-am .acc-table .phone-cell,
html body.theme-dark .view-am .acc-table .phone-cell {
  display: table-cell !important;
  min-width: 0 !important;
}

html body .view-am .acc-table .am-name,
html body .view-am .acc-table .am-username,
html body.theme-dark .view-am .acc-table .am-name,
html body.theme-dark .view-am .acc-table .am-username {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

html body .view-am .acc-table .am-acct,
html body.theme-dark .view-am .acc-table .am-acct {
  min-width: 0 !important;
}

html body .view-am .acc-table .am-acct__body,
html body.theme-dark .view-am .acc-table .am-acct__body {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

html body .view-am .acc-table .am-acct__top,
html body.theme-dark .view-am .acc-table .am-acct__top {
  gap: 4px !important;
  justify-content: flex-start !important;
}

html body .view-am .acc-table .am-flags,
html body.theme-dark .view-am .acc-table .am-flags {
  gap: 0 !important;
}

/* Колонка «Логин» — обычная ячейка таблицы, как «Телефон»: текст в шрифте
   приложения, без чипа-подложки от легаси .am-username. Клик копирует логин,
   поэтому кнопка не должна отличаться от текста ничем, кроме цвета на ховере. */
html body .view-am .acc-table .username-cell .am-username,
html body.theme-dark .view-am .acc-table .username-cell .am-username {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #1f2937) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

html body .view-am .acc-table .username-cell button.am-username:hover,
html body.theme-dark .view-am .acc-table .username-cell button.am-username:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tp-accent, #2563eb) !important;
  transform: none !important;
}

/* Номер занимает всю ячейку: резерв справа (был calc(100% - 48px) под иконки
   действий) держал номер обрезанным даже на широком окне — иконки из этой
   ячейки давно ушли, а 48px продолжали съедать место, и «+12015588144»
   превращалось в «+12015588…». Многоточие остаётся страховкой на случай
   вручную сжатой колонки. */
html body .view-am .acc-table .am-phone,
html body.theme-dark .view-am .acc-table .am-phone {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Роль в таблице — чип с обводкой, ровно той же геометрии, что пилюля
   статуса (r6, 1px+20px строка+1px = 24px, вес 400): один и тот же по
   смыслу элемент — короткая метка в ячейке — не бывает в двух таблицах
   разной формы. Кегль на пункт мельче мета-размера: роль — ярлык при
   аккаунте, а не состояние строки, и уступает статусу не только цветом.
   Задан через тот же токен (`calc(… - 1px)`), поэтому связь с мета-кеглем
   таблицы не рвётся: сменят его — уедет и роль. Высота от этого не
   меняется — её держит строка 20px.

   Тон у каждой роли СВОЙ и красит чип целиком — и подпись (`--role-ink`), и
   обводку (`--role-line`). Цвет тут различает ярлыки между собой, поэтому
   заливки чипу по-прежнему не дают: пятном в строке говорит статус, роль
   остаётся контуром. Обе краски считаются из одного оттенка в каноне класса
   (`.role-tag` в style.css), сюда доезжают только токены — здесь колонка
   правит геометрию, а не цвет. Прежней точки с оттенком роли всё так же
   нет: ролей у аккаунта несколько, и строка из разноцветных точек перед
   названиями читалась бы гирляндой. */
html body .view-am .acc-table .role-tag,
html body.theme-dark .view-am .acc-table .role-tag {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  padding: 1px 10px !important;
  border: 1px solid var(--role-line) !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--app-font) !important;
  font-weight: 400 !important;
  color: var(--role-ink) !important;
  line-height: 20px !important;
}

/* «+N» — тот же чип, но своей ширины не отдаёт: сжимать надо названия ролей,
   а не счётчик спрятанных. */
html body .view-am .acc-table .role-tag--more,
html body.theme-dark .view-am .acc-table .role-tag--more {
  flex: 0 0 auto !important;
  font-variant-numeric: tabular-nums !important;
}

html body .view-am .acc-table td[data-col="task"],
html body.theme-dark .view-am .acc-table td[data-col="task"] {
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Ячейка «Прокси»: значок связи + сам прокси + карандаш. Ряд, а не строка
   текста: значкам нужна своя ширина, а адресу — весь остаток с многоточием
   (полная строка остаётся в подсказке). */
html body .view-am .acc-table .am-proxy,
html body.theme-dark .view-am .acc-table .am-proxy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-family: var(--app-font) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: var(--text, #1f2740) !important;
  vertical-align: middle !important;
}
html body .view-am .acc-table .am-proxy__line,
html body.theme-dark .view-am .acc-table .am-proxy__line {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .view-am .acc-table .am-proxy--off,
html body.theme-dark .view-am .acc-table .am-proxy--off {
  color: var(--text-mute, #8b95b1) !important;
}

/* Значок связи и карандаш — одинаковые кнопки-иконки, как значки строки в
   остальных таблицах: 20px, без фона в покое, подложка и акцент по наведению.
   Цвет значка связи несёт последний итог проверки (правила ниже), карандаш
   всегда нейтральный: он не про состояние, а про действие. */
html body .view-am .acc-table .am-proxy__check,
html body .view-am .acc-table .am-proxy__edit,
html body.theme-dark .view-am .acc-table .am-proxy__check,
html body.theme-dark .view-am .acc-table .am-proxy__edit,
/* Ту же ячейку рисует окно запуска задачи — оно вне .view-am, поэтому у
   правила есть и слабый близнец на классе (канон «общий элемент — на класс»). */
html body .am-proxy__check,
html body .am-proxy__edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text-mute, #6b7494) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* Значки мельче подписи: они признак и действие, а не содержимое ячейки —
   на 16px стрелки спорили с адресом за внимание. */
html body .view-am .acc-table .am-proxy__check .material-symbols-outlined,
html body .view-am .acc-table .am-proxy__edit .material-symbols-outlined,
html body .am-proxy__check .material-symbols-outlined,
html body .am-proxy__edit .material-symbols-outlined {
  font-size: 14px !important;
  line-height: 1 !important;
}
/* В окне запуска задачи строка только для чтения: значок связи там —
   не кнопка, а признак состояния. */
html body .am-proxy__check--static {
  cursor: default !important;
}
html body .view-am .acc-table .am-proxy__check:hover,
html body .view-am .acc-table .am-proxy__edit:hover,
html body .view-am .acc-table .am-proxy__check:focus-visible,
html body .view-am .acc-table .am-proxy__edit:focus-visible {
  background: var(--bg-hover, #f1f4fa) !important;
  color: var(--tp-accent, #2563eb) !important;
}
html body .view-am .acc-table .am-proxy__check:disabled {
  cursor: default !important;
  background: transparent !important;
}
/* Карандаш проявляется по наведению на СВОЮ ЯЧЕЙКУ — правило уехало в
   css/screens/accounts.css вместе с карандашом роли: там оно написано один
   раз на оба, а здесь селектор было не сменить (файл заморожен). */

/* Итог последней проверки — тон значка связи. Он же достаётся кольцу под
   проверкой (`currentColor`): красное кольцо на перепроверке недоступного
   прокси — это ответ, который ещё не опровергнут. */
html body .view-am .acc-table .am-proxy--ok .am-proxy__check,
html body .am-proxy--ok .am-proxy__check {
  color: #1a7f37 !important;
}
html body .view-am .acc-table .am-proxy--error .am-proxy__check,
html body .am-proxy--error .am-proxy__check {
  color: #b42525 !important;
}
/* Кольцо проверки — на месте значка. Скорость .8s linear — общая для всех
   ожиданий приложения (MOTION §3.7: это не отклик на действие). */
html body .view-am .acc-table .am-proxy__spin,
html body .am-proxy__spin {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid color-mix(in srgb, currentColor 26%, transparent) !important;
  border-top-color: currentColor !important;
  animation: am-proxy-spin .8s linear infinite !important;
}
@keyframes am-proxy-spin { to { transform: rotate(360deg); } }
/* Просили убрать анимации — выключаем цикл целиком, а не ускоряем: на 0.01ms
   бесконечный цикл стал бы стробоскопом (MOTION.md §3.7, §4). */
@media (prefers-reduced-motion: reduce) {
  html body .view-am .acc-table .am-proxy__spin,
  html body .am-proxy__spin { animation: none !important; }
}

/* Ноль подчёркиваний: кликабельность показывает цвет на ховере, а не линия
   под текстом — в списке на полсотни строк подчёркивания превращают колонку
   в сплошное поле ссылок. Кликают теперь значки, а не вся ячейка. */
html body .view-am .acc-table .am-proxy__check:hover,
html body.theme-dark .view-am .acc-table .am-proxy__check:hover,
html body .view-am .acc-table .am-proxy__edit:hover,
html body.theme-dark .view-am .acc-table .am-proxy__edit:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}


html body .view-am .acc-table thead th[data-col],
html body .view-am .acc-table tbody td[data-col],
html body.theme-dark .view-am .acc-table thead th[data-col],
html body.theme-dark .view-am .acc-table tbody td[data-col] {
  display: table-cell !important;
}

html body .view-am .acc-table [data-col="select"],
html body.theme-dark .view-am .acc-table [data-col="select"] {
  width: var(--acc-check-col-width, 38px) !important;
  min-width: var(--acc-check-col-width, 38px) !important;
  max-width: var(--acc-check-col-width, 38px) !important;
  padding-left: 16px !important;
  padding-right: 4px !important;
  text-align: center !important;
}

html body .view-am .acc-table [data-col="num"],
html body.theme-dark .view-am .acc-table [data-col="num"] {
  width: 36px !important;
  padding-left: 4px !important;
  padding-right: 8px !important;
  text-align: center !important;
  color: var(--text, #1f2937) !important;
}

html body .view-am .acc-table [data-col="phone"],
html body.theme-dark .view-am .acc-table [data-col="phone"] {
  width: 14% !important;
}

html body .view-am .acc-table [data-col="account"],
html body.theme-dark .view-am .acc-table [data-col="account"] {
  width: 22% !important;
  white-space: nowrap !important;
}

html body .view-am .acc-table [data-col="geo"],
html body.theme-dark .view-am .acc-table [data-col="geo"] {
  width: auto !important;
}

html body .view-am .acc-table [data-col="status"],
html body.theme-dark .view-am .acc-table [data-col="status"] {
  width: auto !important;
}

/* Тон ячейки статуса — общий текстовый, но ВНУТРЬ пилюли он не заходит: там
   свой тон состояния (--status-ink), и подпись с кольцом берут его. Раньше
   исключения хватало одного (.status): подпись была текстовым узлом самой
   пилюли. Теперь она в своём span — и без этих исключений красилась чёрным. */
html body .view-am .acc-table td[data-col="status"],
html body .view-am .acc-table td[data-col="status"] *:not(.status):not(.status__label):not(.status__spin),
html body.theme-dark .view-am .acc-table td[data-col="status"],
html body.theme-dark .view-am .acc-table td[data-col="status"] *:not(.status):not(.status__label):not(.status__spin) {
  color: var(--text, #1f2740) !important;
}

/* Статус: бейдж всегда в одну строку. При нехватке ширины текст обрезается
   многоточием, но НИКОГДА не переносится на новую строку. */
html body .view-am .acc-table td[data-col="status"],
html body.theme-dark .view-am .acc-table td[data-col="status"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .view-am .acc-table td[data-col="status"] .status,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* ── Статусы аккаунтов: цветная пилюля диспетчера ────────────────────────────
   Статус читается так же, как в диспетчере задач: та же геометрия пилюли
   (высота 24px, кегль --app-table-meta-size, вес 400), но БЕЗ заливки:
   скруглённый прямоугольник с внешней обводкой — тот же вид, что у статуса
   прокси. Тонов два, и оба живут переменными: `--status-line` — рамка (тон
   живой, как на референсе), `--status-ink` — подпись (темнее, иначе 12px
   читаются бледно). Собственная точка-индикатор не нужна: состояние несёт
   тон рамки и подписи.

   Правила намеренно НЕ привязаны к .view-am: ту же строку со статусом рисует
   окно запуска задачи, и вид у неё обязан быть тот же.

   Раскладка статусов на палитру:
     без ограничений / живой → зелёный
     заморожен               → синий
     временный спамблок      → янтарный
     вечный спамблок         → оранжевый
     забанен / мёртв         → красный
     пропуск / не проверен   → серый */
html body td[data-col="status"] .status,
html body.theme-dark td[data-col="status"] .status,
html body .view-am .acc-table td[data-col="status"] .status,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status {
  position: relative !important;
  /* inline-block, а не flex: подпись длиннее колонки обязана уходить в
     многоточие («Вечный спамблок» шире своей колонки на узком окне), а во
     flex-контейнере text-overflow до текста не достаёт. */
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  /* 1 + 20 + 1 + рамка 2×1 = 24px — та же высота, что у статуса прокси. */
  padding: 1px 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--status-line, #b3bac8) !important;
  color: var(--status-ink, #5b6478) !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
html body td[data-col="status"] .status::before {
  display: none !important;
}

html body td[data-col="status"] .status--active,
html body td[data-col="status"] .status--alive {
  --status-line: #4caf50; --status-ink: #1a7f37;
}
html body td[data-col="status"] .status--frozen {
  --status-line: #7ba7f0; --status-ink: #1d4ed8;
}
html body td[data-col="status"] .status--spamblock_temp {
  --status-line: #f0b429; --status-ink: #b45309;
}
html body td[data-col="status"] .status--spamblock_perm {
  --status-line: #e2953f; --status-ink: #9a5b00;
}
html body td[data-col="status"] .status--banned,
html body td[data-col="status"] .status--dead {
  --status-line: #e05252; --status-ink: #b42525;
}
html body td[data-col="status"] .status--skip,
html body td[data-col="status"] .status--skipped,
html body td[data-col="status"] .status--unknown {
  --status-line: #b3bac8; --status-ink: #5b6478;
}

/* ── Идёт проверка аккаунта: кольцо внутри пилюли статуса ────────────────────
   Ход проверки ведёт САМ статус: на месте подписи внутри пилюли крутится
   кольцо, а придёт итог — вернётся слово. Проверяют аккаунт — и на живость
   («Проверить аккаунт»), и на ограничения («Проверить ограничения»), — и
   отвечает на это та самая клетка, в которой ждут ответ. Лоадера перед
   номером строки больше нет: у номера своя работа, и спорить за место в
   начале строки ему не с чем.

   Подпись под кольцом не вынимается из разметки, а прячется видимостью:
   пилюля держит СВОЮ ширину, и левый край колонки не прыгает — проверка идёт
   в 30 потоков, строки заканчивают вразнобой. Класс ставит
   accountStatusCellHtml в app.js; правило намеренно не привязано к .view-am —
   ту же строку рисует окно запуска задачи.

   Скорость .8s linear — та же, что у лоадера прокси и у остальных ожиданий
   приложения; шкала MOTION §2.2 здесь не при чём — это не отклик на действие,
   а indeterminate-ожидание (§3.7). Тон у кольца общий с рамкой и подписью
   (`currentColor`): пилюля не меняет цвет от того, что её перепроверяют. */
html body td[data-col="status"] .status.is-checking .status__label,
html body.theme-dark td[data-col="status"] .status.is-checking .status__label {
  visibility: hidden;
}
html body td[data-col="status"] .status.is-checking .status__spin,
html body.theme-dark td[data-col="status"] .status.is-checking .status__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  /* Тон берём переменной, а не `currentColor`: цвет детей ячейки статуса
     перебит общим правилом колонки (color: var(--text) !important), и кольцо
     на нём выходило серо-синим вместо тона пилюли. */
  border: 2px solid color-mix(in srgb, var(--status-ink, currentColor) 26%, transparent);
  border-top-color: var(--status-ink, currentColor);
  animation: am-status-spin .8s linear infinite;
}

@keyframes am-status-spin { to { transform: rotate(360deg); } }

/* Просили убрать анимации — выключаем цикл целиком, а не ускоряем: бесконечный
   цикл на 0.01ms дал бы стробоскоп (MOTION.md §3.7, §4). Кольцо остаётся —
   разомкнутый круг и без вращения отличает строку под проверкой. */
@media (prefers-reduced-motion: reduce) {
  html body td[data-col="status"] .status.is-checking .status__spin,
  html body.theme-dark td[data-col="status"] .status.is-checking .status__spin {
    animation: none !important;
  }
}


html body .view-am .acc-table [data-col="proxy"],
html body.theme-dark .view-am .acc-table [data-col="proxy"] {
  width: auto !important;
}

html body .view-am .acc-table [data-col="role"],
html body.theme-dark .view-am .acc-table [data-col="role"] {
  width: auto !important;
}

html body .view-am .acc-table [data-col="task"],
html body.theme-dark .view-am .acc-table [data-col="task"] {
  width: 132px !important;
}

html body .view-am .acc-table [data-col="age"],
html body.theme-dark .view-am .acc-table [data-col="age"] {
  width: 96px !important;
}

html body .view-am .acc-table [data-col="role"],
html body .view-am .acc-table [data-col="proxy"],
html body.theme-dark .view-am .acc-table [data-col="role"],
html body.theme-dark .view-am .acc-table [data-col="proxy"] {
  font-family: var(--app-font) !important;
}

/* ── Ширины колонок таблицы аккаунтов ─────────────────────────────────────────
   У каждой колонки своя переменная ширины --acc-<key>-w, поэтому размер любой
   колонки правится отдельно. Значения задаёт applyAccountColumnWidths() в app.js
   (из ACCOUNT_COL_PCT), проценты в var(...) ниже — фолбэк. Только проценты:
   фикс-раскладка Blink неверно распределяет `auto`/`calc()` и оставляет пустую
   «фантомную» колонку справа; сумма ширин всех колонок должна быть ≈100%.
   id #view-accounts держит эти правила выше старых пер-колоночных
   (nth-child / [data-col]) в обоих режимах — обычном и авто-компактном. */
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="account"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="account"] { width: var(--acc-account-w, 25.1206%) !important; }
/* У каждой колонки своя переменная ширины --acc-<key>-w, поэтому размер любой
   колонки правится отдельно (значения задаёт ACCOUNT_COL_PCT в app.js, здесь —
   фолбэк). Каждая колонка вынесена в отдельное [data-col]-правило, чтобы
   перебивать старые пер-колоночные (nth-child) правила и держать сумму ширин
   ровно 100% — иначе справа остаётся «фантомный» зазор и линии thead не доходят
   до правого края таблицы. */
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="geo"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="geo"] { width: var(--acc-geo-w, 8.2940%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="phone"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="phone"] { width: var(--acc-phone-w, 11.8110%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="username"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="username"] { width: var(--acc-username-w, 11.0236%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="proxy"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="proxy"] { width: var(--acc-proxy-w, 19.0000%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="role"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="role"] { width: var(--acc-role-w, 13.4475%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="status"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="status"] { width: var(--acc-status-w, 11.3033%) !important; }
/* Опциональные колонки (включаются через «Настроить колонки»). Фолбэки —
   веса из ACCOUNT_COL_PCT; фактические проценты всегда нормализует
   applyAccountColumnWidths() под текущий набор видимых колонок. */
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="age"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="age"] { width: var(--acc-age-w, 7.0866%) !important; }
html body :is(#view-accounts, .am-embed).view-am .acc-table th[data-col="twofa"],
html body :is(#view-accounts, .am-embed).view-am .acc-table td[data-col="twofa"] { width: var(--acc-twofa-w, 5.5118%) !important; }

/* ── Настройка колонок: шестерёнка в шапке таблицы ────────────────────────────
   Кнопка живёт в последнем th, но позиционируется абсолютно к .am-table-scroll
   (position:relative по контракту оболочки): th статичен, и в узкой последней
   колонке кнопка не переносится на новую строку — высота шапки остаётся
   контрактные 44px. Попап #am-cols-pop — floating .dropdown (fixed),
   позиционируется из JS.

   Задняя подложка (круг под иконкой) — это САМА кнопка: её бокс равен диаметру
   --app-table-gear-ring, поэтому подложка и зона наведения всегда одно и то же
   пятно (тот же приём, что у кольца чекбокса: хит-зона = видимый круг).
   Координаты считаются от ЦЕНТРА — середина шапки (--app-table-head-h) по
   вертикали и --app-table-gear-inset от правого края по горизонтали, — так что
   диаметр меняется одним токеном, а иконка не сдвигается ни на пиксель.

   Правила общие для всех списочных таблиц (аккаунты, прокси, базы, диспетчер):
   новой таблице ничего дописывать не нужно — она получает ту же шестерёнку,
   как только её вид попадает в :is()-список. ── */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn {
  position: absolute;
  top: calc(var(--app-table-head-h, 44px) / 2 - var(--app-table-gear-ring, 32px) / 2);
  right: calc(var(--app-table-gear-inset, 24px) - var(--app-table-gear-ring, 32px) / 2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-table-gear-ring, 32px);
  height: var(--app-table-gear-ring, 32px);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* Подложка обычно прозрачная. Её включает только широкая таблица: там
     кнопка едет по шапке и обязана закрыть собой то, что под ней (см. блок
     «ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА СПИСОЧНЫХ ТАБЛИЦ» в конце файла). */
  background: var(--app-table-gear-bg, transparent);
  color: var(--app-table-gear-color, #5f6368);
  cursor: pointer;
  /* Такт наведения — общий для иконок таблиц (MOTION.md §2.1,
     --motion-ease-icon): шестерёнка стоит в одном ряду со значками панели
     над таблицей и обязана отзываться так же. */
  transition-property: transform, opacity, background-color, color;
  transition-duration: var(--motion-state, 150ms);
  transition-timing-function: var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1));
}
/* Наведение и раскрытый попап — одна и та же подложка: раскрытый список это
   продолжение наведения, а не второе состояние со своей плотностью. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn:hover,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn.is-open,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn:hover,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn.is-open {
  background: var(--app-table-gear-ring-bg, rgba(60, 64, 67, .08));
}
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn svg,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-cols-btn svg {
  width: var(--app-table-gear-icon, 16px);
  height: var(--app-table-gear-icon, 16px);
}

/* Попап «Колонки таблицы» */
/* База .dropdown жёстко задаёт белый фон (style.css) и не имеет тёмного
   варианта — у нашего попапа тёмная тема есть; общий компонент не трогаем,
   чтобы не задеть остальные floating-дропдауны. */
html body.theme-dark .dropdown.am-cols-pop {
  background: var(--bg-card, #171b22);
  border-color: var(--border-strong, #2a3140);
}
html body .am-cols-pop .am-cols-pop__title,
html body.theme-dark .am-cols-pop .am-cols-pop__title {
  padding: 2px 6px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: #70757a;
}
html body.theme-dark .am-cols-pop .am-cols-pop__title {
  color: #9aa0a6;
}
html body .am-cols-pop .am-cols-pop__list,
html body.theme-dark .am-cols-pop .am-cols-pop__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
html body .am-cols-pop .am-cols-pop__item,
html body.theme-dark .am-cols-pop .am-cols-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text, #1f2740);
  cursor: pointer;
}
html body .am-cols-pop .am-cols-pop__item:hover {
  background: rgba(60, 64, 67, .06);
}
html body.theme-dark .am-cols-pop .am-cols-pop__item:hover {
  background: rgba(232, 234, 237, .06);
}
html body .am-cols-pop .am-cols-pop__item input[type="checkbox"],
html body.theme-dark .am-cols-pop .am-cols-pop__item input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}
html body .am-cols-pop .am-cols-pop__item.is-locked,
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-locked {
  color: #70757a;
  cursor: default;
}
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-locked {
  color: #9aa0a6;
}
html body .am-cols-pop .am-cols-pop__label,
html body.theme-dark .am-cols-pop .am-cols-pop__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .am-cols-pop .am-cols-pop__lock,
html body.theme-dark .am-cols-pop .am-cols-pop__lock {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: .8;
}
html body .am-cols-pop .am-cols-pop__foot,
html body.theme-dark .am-cols-pop .am-cols-pop__foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #e3e6ec);
}
html body .am-cols-pop .am-cols-pop__reset,
html body.theme-dark .am-cols-pop .am-cols-pop__reset {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  color: #1a73e8;
  cursor: pointer;
  text-align: center;
}
html body.theme-dark .am-cols-pop .am-cols-pop__reset {
  color: #8ab4f8;
}
html body .am-cols-pop .am-cols-pop__reset:hover {
  background: rgba(26, 115, 232, .08);
}
html body.theme-dark .am-cols-pop .am-cols-pop__reset:hover {
  background: rgba(138, 180, 248, .12);
}

/* Колонка «Аккаунт» вмещает чекбокс выбора, порядковый номер и саму карточку
   аккаунта в один ряд (бывшие колонки «выбор» и «#» свёрнуты сюда). */
html body .view-am .acc-table td.col-account-cell,
html body.theme-dark .view-am .acc-table td.col-account-cell {
  overflow: hidden !important;
  vertical-align: middle !important;
}
html body .view-am .acc-table .am-acct-cell,
html body.theme-dark .view-am .acc-table .am-acct-cell {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  line-height: 1 !important;
  min-width: 0 !important;
}
/* Имя аккаунта — единственный элемент карточки, который сам себе режет текст
   (overflow: hidden ради многоточия). С унаследованным от .am-acct-cell
   line-height: 1 высота строчного бокса равна кеглю (13px), а базовая линия
   встаёт на 11px — выносные элементы («g», «j», «у», «р») уходят на 14px и
   срезаются на 1px. Возвращаем имени обычный интерлиньяж ячейки: высота строки
   вырастает до 18px, но ряд не двигается — его держит аватар (28px). */
html body .view-am .acc-table .am-acct__name,
html body.theme-dark .view-am .acc-table .am-acct__name {
  line-height: 1.4 !important;
}
html body .view-am .acc-table .am-acct-cell__check,
html body.theme-dark .view-am .acc-table .am-acct-cell__check {
  align-self: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body .view-am .acc-table .am-acct-cell__num,
html body.theme-dark .view-am .acc-table .am-acct-cell__num {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: 2ch !important;
  height: var(--tp-checkbox-size, 21px) !important;
  color: var(--text-mute, #64748b) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: right !important;
}
html body .view-am .acc-table .am-acct-cell > .am-acct,
html body.theme-dark .view-am .acc-table .am-acct-cell > .am-acct {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Роль — последняя колонка: чипы ролей и ничего поверх них. Иконок действий
   в строке нет (их место — контекстное меню #am-actions-menu), поэтому нет
   и резерва под них: ячейка занята чипами на всю ширину. */
html body .view-am .acc-table .am-role-cell,
html body.theme-dark .view-am .acc-table .am-role-cell {
  position: relative !important;
  overflow: hidden !important;
  padding-right: 16px !important;
}

/* Ролей в ячейке несколько — они идут рядом чипами, поэтому содержимое
   ячейки стало рядом (flex), а не строкой текста. Перенос запрещён: строка
   таблицы одной высоты, а хвост, который не влез, свёрнут в «+N» ещё в
   разметке (ROLE_CHIPS_VISIBLE в app.js). */
html body .view-am .acc-table .am-role-cell__content,
html body.theme-dark .view-am .acc-table .am-role-cell__content {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  padding-right: 0 !important;
}

html body .view-am .acc-table tbody tr[data-name],
html body.theme-dark .view-am .acc-table tbody tr[data-name] {
  position: relative !important;
}

/* Ховер и выделение строки ячейку роли не трогают вовсе: под чипами ничего
   не всплывает, прятать от иконок нечего. Маска-градиент (и её резерв
   --am-actions-reserve) сняты вместе с самими иконками. */


/* Selection action icons in the toolbar (shown only while rows are selected).
   The delete icon turns red on hover. */
html body .view-am .am-gmail-bar .am-sel-action,
html body .view-am .am-gmail-bar .am-sel-only {
  display: none !important;
}
html body .view-am .am-gmail-bar.has-selection .am-base-action {
  display: none !important;
}
html body .view-am .am-gmail-bar.has-selection .am-sel-action {
  display: inline-flex !important;
}
html body .view-am .am-gmail-bar .am-sel-action--danger:hover {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #dc2626 !important;
}
html body .view-am .am-gmail-bar .am-sel-action--danger:hover svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

html body .view-am .table-footer,
html body.theme-dark .view-am .table-footer {
  min-height: 58px !important;
  padding: 10px 16px !important;
  background: var(--bg-card, #fff) !important;
  border-top: 1px solid var(--border, #e7ebf2) !important;
}

html body .view-am .page-size select,
html body.theme-dark .view-am .page-size select,
html body .view-am .pagination button,
html body.theme-dark .view-am .pagination button {
  border-radius: 7px !important;
  border-color: var(--border, #e1e7ef) !important;
}

html body .view-am .pagination button.is-active,
html body.theme-dark .view-am .pagination button.is-active {
  background: var(--primary, #2563eb) !important;
  border-color: var(--primary, #2563eb) !important;
  color: #fff !important;
}

/* Global top navigation */

html body .tp-topbar,
html body.theme-dark .tp-topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 420 !important;
  height: var(--tp-global-topbar-height) !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 420px) minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px !important;
  background: #222326 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #d7dbe3 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12) !important;
}

html body .tp-topbar__left,
html body.theme-dark .tp-topbar__left,
html body .tp-topbar__actions,
html body.theme-dark .tp-topbar__actions {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body .tp-topbar__left,
html body.theme-dark .tp-topbar__left {
  justify-content: flex-start !important;
}

html body .tp-topbar__actions,
html body.theme-dark .tp-topbar__actions {
  justify-content: flex-end !important;
  gap: 10px !important;
}

html body .tp-topbar__menu,
html body.theme-dark .tp-topbar__menu,
html body .tp-topbar__icon,
html body.theme-dark .tp-topbar__icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #b8bdc7 !important;
  cursor: pointer !important;
  transition: background-color 0.14s ease, color 0.14s ease !important;
}

html body .tp-topbar__menu:hover,
html body.theme-dark .tp-topbar__menu:hover,
html body .tp-topbar__icon:hover,
html body.theme-dark .tp-topbar__icon:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html body:not(.theme-dark) .tp-topbar__icon.is-open,
html body:not(.theme-dark) .tp-topbar__icon.is-active,
html body:not(.theme-dark) .tp-topbar__icon[aria-expanded="true"] {
  background: rgba(60, 64, 67, 0.12) !important;
  color: #202124 !important;
}

html body.theme-dark .tp-topbar__icon.is-open,
html body.theme-dark .tp-topbar__icon.is-active,
html body.theme-dark .tp-topbar__icon[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

html body .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__menu svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke-width: 1.9 !important;
}
html body .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__icon svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke-width: 1.5 !important;
}

/* AIRGRAM wordmark — clean geometric font (bundled locally, no CDN dependency) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/Montserrat-latin.woff2") format("woff2");
}

html body .tp-topbar__brand,
html body.theme-dark .tp-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  max-width: 200px !important;
  color: #f6f1e3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
}

/* AIRGRAM logo image */

html body .tp-topbar__brand-text,
html body.theme-dark .tp-topbar__brand-text {
  display: inline-block !important;
  font-family: "Montserrat", var(--app-font) !important;
  text-transform: none !important;
  color: #f6f1e3 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

html body .tp-topbar__search,
html body.theme-dark .tp-topbar__search {
  position: relative !important;
  width: 100% !important;
  height: 30px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #aeb4bf !important;
}

html body .tp-topbar__search:focus-within,
html body.theme-dark .tp-topbar__search:focus-within {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* «Мёртвая» зона у нижней кромки поля поиска: перехватывает клики по нижнему
   краю, чтобы случайные мисс-клики не открывали выпадающий поиск. */
html body .tp-topbar__search-deadzone,
html body.theme-dark .tp-topbar__search-deadzone {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 14px !important;
  z-index: 4 !important;
  cursor: default !important;
}

html body .tp-topbar__search svg,
html body.theme-dark .tp-topbar__search svg {
  width: 18px !important;
  height: 18px !important;
}

html body .tp-topbar__search > svg,
html body.theme-dark .tp-topbar__search > svg {
  width: 22px !important;
  height: 22px !important;
  flex: none !important;
  stroke-width: 2.1 !important;
}

html body .tp-topbar__search input,
html body.theme-dark .tp-topbar__search input {
  min-width: 0 !important;
  width: 100% !important;
  height: 28px !important;
  color: #eef2f7 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body .tp-topbar__search input::placeholder,
html body.theme-dark .tp-topbar__search input::placeholder {
  color: #b6bcc7 !important;
}

html body .tp-topbar__icon--notify,
html body.theme-dark .tp-topbar__icon--notify {
  position: relative !important;
  cursor: pointer !important;
}

html body:not(.theme-dark) .tp-topbar__icon--notify:hover:not(.is-open):not(.is-active):not([aria-expanded="true"]) {
  background: rgba(60, 64, 67, 0.08) !important;
  color: #202124 !important;
  cursor: pointer !important;
}

html body.theme-dark .tp-topbar__icon--notify:hover:not(.is-open):not(.is-active):not([aria-expanded="true"]) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* Активное состояние (открыто окно уведомлений) — акцентный фон обводки и положение поверх catcher */
html body .tp-topbar__icon--notify.is-open,
html body .tp-topbar__icon--notify.is-active,
html body .tp-topbar__icon--notify[aria-expanded="true"],
html body.theme-dark .tp-topbar__icon--notify.is-open,
html body.theme-dark .tp-topbar__icon--notify.is-active,
html body.theme-dark .tp-topbar__icon--notify[aria-expanded="true"] {
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.1) !important;
  z-index: 1201 !important;
  cursor: pointer !important;
}

html body .tp-topbar__icon--notify.is-open:hover,
html body .tp-topbar__icon--notify.is-active:hover,
html body .tp-topbar__icon--notify[aria-expanded="true"]:hover,
html body.theme-dark .tp-topbar__icon--notify.is-open:hover,
html body.theme-dark .tp-topbar__icon--notify.is-active:hover,
html body.theme-dark .tp-topbar__icon--notify[aria-expanded="true"]:hover {
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.16) !important;
  z-index: 1201 !important;
  cursor: pointer !important;
}

html body .tp-topbar__dot,
html body.theme-dark .tp-topbar__dot {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #d93025 !important;
  border: 1.5px solid #222326 !important;
  box-sizing: content-box !important;
  box-shadow: none !important;
}

html body:not(.theme-dark) .tp-topbar__dot {
  border-color: var(--bg-app, #f7f8fb) !important;
}

/* ── Help dropdown (anchored to the topbar Помощь icon) ─────────── */


html body .app,
html body.theme-dark .app {
  margin-top: var(--tp-global-topbar-height) !important;
  min-height: calc(100vh - var(--tp-global-topbar-height)) !important;
}

html body .hamburger,
html body.theme-dark .hamburger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2,
html body.theme-dark .sidebar.sidebar--v2 {
  top: var(--tp-global-topbar-height) !important;
  height: calc(100vh - var(--tp-global-topbar-height)) !important;
  max-height: calc(100vh - var(--tp-global-topbar-height)) !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar {
  display: none !important;
}

html body .tp-topbar__search .sidebar-search-results,
html body.theme-dark .tp-topbar__search .sidebar-search-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 430 !important;
  max-height: min(420px, calc(100vh - 76px)) !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border: 1px solid var(--border, #e3e8f0) !important;
  border-radius: 8px !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22) !important;
}

@media (max-width: 900px) {
  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    grid-template-columns: minmax(150px, auto) minmax(120px, 1fr) auto !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  html body .tp-topbar__brand-text,
  html body.theme-dark .tp-topbar__brand-text {
    font-size: 18px !important;
    max-width: 150px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .tp-topbar__brand,
  html body.theme-dark .tp-topbar__brand,
  html body .tp-topbar__brand-logo,
  html body.theme-dark .tp-topbar__brand-logo {
    width: 150px !important;
    max-width: 150px !important;
    max-height: 30px !important;
  }

  html body .sidebar.sidebar--v2,
  html body.theme-dark .sidebar.sidebar--v2,
  html body.sidebar-collapsed .sidebar.sidebar--v2,
  html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 {
    inset: var(--tp-global-topbar-height) auto 0 0 !important;
    height: calc(100vh - var(--tp-global-topbar-height)) !important;
    height: calc(100dvh - var(--tp-global-topbar-height)) !important;
  }
}

@media (max-width: 640px) {
  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  }

  html body .tp-topbar__brand-text,
  html body.theme-dark .tp-topbar__brand-text {
    max-width: 112px !important;
    font-size: 16px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .tp-topbar__brand,
  html body.theme-dark .tp-topbar__brand,
  html body .tp-topbar__brand-logo,
  html body.theme-dark .tp-topbar__brand-logo {
    width: 112px !important;
    max-width: 112px !important;
    max-height: 24px !important;
  }

  html body .tp-topbar__actions,
  html body.theme-dark .tp-topbar__actions {
    gap: 4px !important;
  }
}

html body .tp-topbar__brand-text,
html body.theme-dark .tp-topbar__brand-text {
  display: inline-block !important;
  font-family: "Montserrat", var(--app-font) !important;
  text-transform: uppercase !important;
  color: #f6f1e3 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  letter-spacing: 1.5px !important;
  max-width: 160px !important;
}

html body .sidebar.sidebar--v2 .sidebar__menu-btn,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__menu-btn,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__menu-btn,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__menu-btn,
html body .hamburger,
html body.theme-dark .hamburger,
html body.sidebar-open .hamburger,
html body.theme-dark.sidebar-open .hamburger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  padding-left: 13px !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

html body .sidebar.sidebar--v2 .sidebar__topbar::after,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__topbar::after,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar::after,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__topbar::after {
  content: none !important;
  display: none !important;
}

html body .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__nav,
html body.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 .sidebar__nav {
  padding-top: 8px !important;
}

html body .sidebar.sidebar--v2,
html body.theme-dark .sidebar.sidebar--v2,
html body.sidebar-collapsed .sidebar.sidebar--v2,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2,
html body.sidebar-open .sidebar.sidebar--v2,
html body.theme-dark.sidebar-open .sidebar.sidebar--v2 {
  border-right: 1px solid #e0e0e0 !important;
  box-shadow: none !important;
}

html body .sidebar.sidebar--v2 .nav-item,
html body .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active {
  color: #212121 !important;
}

html body .tp-topbar,
html body.theme-dark .tp-topbar {
  padding: 8px !important;
}

html body.modal-open .tp-topbar,
html body.theme-dark.modal-open .tp-topbar {
  pointer-events: none !important;
}

html body .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__menu svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5 !important;
}

html body .sidebar.sidebar--v2 .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll {
  top: 0 !important;
  bottom: 0 !important;
  right: 2px !important;
  width: 4px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2.sb-has-scroll .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2.sb-has-scroll .sb-scroll {
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .sidebar.sidebar--v2.sb-has-scroll:hover .sb-scroll,
html body.theme-dark .sidebar.sidebar--v2.sb-has-scroll:hover .sb-scroll,
html body .sidebar.sidebar--v2 .sb-scroll.is-dragging,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll.is-dragging {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body .sidebar.sidebar--v2 .sb-scroll__thumb,
html body.theme-dark .sidebar.sidebar--v2 .sb-scroll__thumb {
  width: 4px !important;
}

/* ─── Панель уведомлений (окно под колокольчиком, как сетка приложений Gmail) ─── */
html body .notif-pop,
html body.theme-dark .notif-pop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: visibility 0s linear var(--motion-fast, 100ms) !important;
}

html body .notif-pop.is-open,
html body.theme-dark .notif-pop.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
  transition: visibility 0s linear 0s !important;
}

/* Ловушка кликов мимо окна: прозрачная, страница под окном не затемняется. */
html body .notif-pop__catcher,
html body.theme-dark .notif-pop__catcher {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
}

html body .notif-pop__card,
html body.theme-dark .notif-pop__card {
  /* Высота шапки: от неё отсчитывается экран настроек (лежит поверх ленты). */
  --notif-head-h: 56px;
  /* left/top ставит JS от колокольчика — здесь только стартовая точка. */
  position: fixed !important;
  inset: 60px auto auto 998px !important;
  /* Размер фиксированный: место под скролл резервируется заранее (см. __body),
     поэтому появление полосы не двигает вёрстку. */
  width: 328px !important;
  height: 550px !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 88px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--pop-bg, #ffffff) !important;
  color: var(--pop-text, #1f1f1f) !important;
  /* Тот же шрифт, что у модалок и выпадающих меню. */
  font-family: var(--app-font) !important;
  /* Радиус — модальный (r28, канон addw): это панель со своей шапкой и
     лентой, а не список пунктов. Рамка и тень — общие, из канона окон,
     чтобы карточка стояла на одной высоте со всеми меню. */
  border: 1px solid var(--pop-border-color, #dadce0) !important;
  border-radius: 28px !important;
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18)) !important;
  transform-origin: top right !important;
  opacity: 0 !important;
  transform: scale(0.98) !important;
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
    transform var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)) !important;
}

html body .notif-pop.is-open .notif-pop__card,
html body.theme-dark .notif-pop.is-open .notif-pop__card {
  opacity: 1 !important;
  transform: none !important;
  transition:
    opacity var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)),
    transform var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) !important;
}

html body .notif-pop__head,
html body.theme-dark .notif-pop__head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: var(--notif-head-h, 56px) !important;
  padding: 24px 20px 12px 24px !important;
  background: #ffffff !important;
}

html body .notif-pop__title,
html body.theme-dark .notif-pop__title {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #1f1f1f !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Заголовок меняется без JS: показываем нужный вариант по режиму панели. */
html body .notif-pop__title-text[data-notif-title="settings"],
html body .notif-pop.is-settings .notif-pop__title-text[data-notif-title="list"] {
  display: none !important;
}

html body .notif-pop.is-settings .notif-pop__title-text[data-notif-title="settings"] {
  display: inline !important;
}

/* Иконки шапки («удалить все», «настройки», «назад») — одна пилюля с крестиком. */
html body .notif-pop__actions,
html body.theme-dark .notif-pop__actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

html body .notif-pop__act,
html body.theme-dark .notif-pop__act,
html body .notif-pop__close,
html body.theme-dark .notif-pop__close {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8b8f97 !important;
  cursor: pointer !important;
  transition:
    background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .notif-pop__act[hidden],
html body.theme-dark .notif-pop__act[hidden] {
  display: none !important;
}

/* Глифы шапки — Material Symbols, размер как у иконок топбара. */
html body .notif-pop__act .material-symbols-outlined,
html body .notif-pop__close .material-symbols-outlined {
  font-size: 20px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

html body .notif-pop__act:hover,
html body.theme-dark .notif-pop__act:hover,
html body .notif-pop__close:hover,
html body.theme-dark .notif-pop__close:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

html body .notif-pop__act:focus-visible,
html body .notif-pop__close:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* «Назад» — только на экране настроек; «удалить все» и «настройки» — только в ленте. */
html body .notif-pop__back,
html body.theme-dark .notif-pop__back {
  display: none !important;
}

html body .notif-pop.is-settings .notif-pop__back {
  display: inline-flex !important;
}

html body .notif-pop.is-settings .notif-pop__act[data-notif-clear],
html body .notif-pop.is-settings .notif-pop__act[data-notif-settings="open"] {
  display: none !important;
}

/* Со стрелкой «назад» левый отступ шапки даёт сама кнопка. */
html body .notif-pop.is-settings .notif-pop__head {
  padding-left: 8px !important;
}

html body .notif-pop__body,
html body.theme-dark .notif-pop__body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  /* Полоса прокрутки живёт в зарезервированном жёлобе справа: список одинаково
     широк и с ней, и без неё. Тонкая полоса занимает 10px, +2px padding — и
     справа получается те же 12px, что слева. */
  scrollbar-width: thin !important;
  scrollbar-gutter: stable !important;
  padding: 10px 5px 10px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body .notif-pop__empty,
html body.theme-dark .notif-pop__empty {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 32px 40px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #8b8f97 !important;
}

/* Скрытый экран не должен занимать место: display у обоих задан через !important. */
html body .notif-pop__body[hidden],
html body.theme-dark .notif-pop__body[hidden],
html body .notif-pop__empty[hidden],
html body.theme-dark .notif-pop__empty[hidden] {
  display: none !important;
}

/* Переход «лента ⇄ настройки» — общая ось X (MOTION §3.4): лента уходит влево
   и гаснет за var(--motion-fast), настройки приходят справа за var(--motion-draw). */
html body .notif-pop__body,
html body.theme-dark .notif-pop__body,
html body .notif-pop__empty,
html body.theme-dark .notif-pop__empty {
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
    transform var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)) !important;
}

html body .notif-pop.is-settings .notif-pop__body,
html body.theme-dark .notif-pop.is-settings .notif-pop__body,
html body .notif-pop.is-settings .notif-pop__empty,
html body.theme-dark .notif-pop.is-settings .notif-pop__empty {
  opacity: 0 !important;
  transform: translateX(-16px) !important;
  pointer-events: none !important;
}

/* Возврат к ленте — её же появление: медленнее ухода и с мягким входом. */
html body .notif-pop:not(.is-settings) .notif-pop__body,
html body.theme-dark .notif-pop:not(.is-settings) .notif-pop__body,
html body .notif-pop:not(.is-settings) .notif-pop__empty,
html body.theme-dark .notif-pop:not(.is-settings) .notif-pop__empty {
  transition:
    opacity var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)),
    transform var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) !important;
}

/* Карточка — плитка внутри окна: скругление под стать окну, без рамок и теней. */
html body .notif-card,
html body.theme-dark .notif-card {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  /* Справа — место под крестик удаления, чтобы текст не уходил под кнопку. */
  padding: 12px 36px 12px 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f3f6fc !important;
  box-shadow: none !important;
}

/* Иконка тона — кружок с подложкой, как статусные значки Gmail. */
html body .notif-card__icon,
html body.theme-dark .notif-card__icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #e3e8f0 !important;
  color: #5f6368 !important;
}

html body .notif-card__icon .material-symbols-outlined,
html body.theme-dark .notif-card__icon .material-symbols-outlined {
  font-size: 20px !important;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

html body .notif-card__content,
html body.theme-dark .notif-card__content {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body .notif-card__title,
html body.theme-dark .notif-card__title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #2b2b2b !important;
}

html body .notif-card__text,
html body.theme-dark .notif-card__text {
  margin-top: 2px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #6b7280 !important;
}

/* Время события — третья строка карточки, тише текста сводки. */
html body .notif-card__meta,
html body.theme-dark .notif-card__meta {
  margin-top: 4px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #9aa0a6 !important;
}

/* Тон карточки задаёт кружок иконки — сама плитка остаётся нейтральной. */
html body .notif-card--info .notif-card__icon,
html body.theme-dark .notif-card--info .notif-card__icon {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
}

html body .notif-card--done .notif-card__icon,
html body.theme-dark .notif-card--done .notif-card__icon {
  background: #e6f4ea !important;
  color: #1e8e3e !important;
}

html body .notif-card--warn .notif-card__icon,
html body.theme-dark .notif-card--warn .notif-card__icon {
  background: #feefc3 !important;
  color: #b06000 !important;
}

html body .notif-card--error .notif-card__icon,
html body.theme-dark .notif-card--error .notif-card__icon {
  background: #fce8e6 !important;
  color: #d93025 !important;
}

/* Крестик удаления карточки — проявляется на hover, но всегда доступен с клавиатуры. */
html body .notif-card__remove,
html body.theme-dark .notif-card__remove {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #9aa0a6 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .notif-card__remove .material-symbols-outlined,
html body.theme-dark .notif-card__remove .material-symbols-outlined {
  font-size: 16px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

html body .notif-card:hover .notif-card__remove,
html body .notif-card__remove:focus-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body .notif-card__remove:hover,
html body.theme-dark .notif-card__remove:hover {
  background: #f1f3f4 !important;
  color: #d93025 !important;
}

html body .notif-card__remove:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* Без hover (тач) кнопка видна постоянно — иначе удалить нечем. */
@media (hover: none) {
  html body .notif-card__remove,
  html body.theme-dark .notif-card__remove {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Уход карточки — быстрое растворение; направленный переход задан в целевом
   состоянии (MOTION §3.2), поэтому не спорит с transition у --clickable. */
html body .notif-card.is-removing,
html body.theme-dark .notif-card.is-removing {
  opacity: 0 !important;
  transform: translateX(12px) !important;
  pointer-events: none !important;
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
    transform var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)) !important;
}

/* ─── Экран настроек уведомлений (лежит поверх ленты, «шестерёнка» в шапке) ─── */
html body .notif-settings,
html body.theme-dark .notif-settings {
  position: absolute !important;
  top: var(--notif-head-h, 56px) !important;
  right: 0 !important;
  bottom: 12px !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 2px 0 12px !important;
  overflow-y: auto !important;
  /* Тот же жёлоб под полосу, что и у ленты: ширина строк не пляшет. */
  scrollbar-width: thin !important;
  scrollbar-gutter: stable !important;
  background: #ffffff !important;
  opacity: 0 !important;
  transform: translateX(16px) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
    transform var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
    visibility 0s linear var(--motion-fast, 100ms) !important;
}

html body .notif-pop.is-settings .notif-settings,
html body.theme-dark .notif-pop.is-settings .notif-settings {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    opacity var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)),
    transform var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)),
    visibility 0s linear 0s !important;
}

html body .notif-settings__hint,
html body.theme-dark .notif-settings__hint {
  margin: 0 0 10px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #6b7280 !important;
}

html body .notif-settings__list,
html body.theme-dark .notif-settings__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .notif-settings__row,
html body.theme-dark .notif-settings__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .notif-settings__row:hover,
html body.theme-dark .notif-settings__row:hover {
  background: #f1f3f4 !important;
}

html body .notif-settings__label,
html body.theme-dark .notif-settings__label {
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}

/* «Все источники» — мастер-строка, отделена от списка модулей. */
html body .notif-settings__row--all,
html body.theme-dark .notif-settings__row--all {
  margin-bottom: 6px !important;
  border-bottom: 1px solid #ececec !important;
  border-radius: 16px 16px 0 0 !important;
}

html body .notif-settings__row--all .notif-settings__label,
html body.theme-dark .notif-settings__row--all .notif-settings__label {
  font-weight: 500 !important;
}

/* Переключатель — общий компонент .switch, но акцент в панели фиксированный. */
html body .notif-settings .switch input:checked + .switch__slider,
html body.theme-dark .notif-settings .switch input:checked + .switch__slider {
  background: #0b57d0 !important;
}

html body .notif-settings .switch__slider,
html body.theme-dark .notif-settings .switch__slider {
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .notif-settings .switch__slider::before,
html body.theme-dark .notif-settings .switch__slider::before {
  transition: transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .notif-settings .switch input:focus-visible + .switch__slider {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* На узком экране ширину и высоту подрезают max-width/max-height карточки —
   отдельного правила не нужно, окно само ужимается по полям. */

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Модуль «Прокси» в стиле модуля «Аккаунты».
   Базовые правила .am-hero / .am-stats / .am-bar* / .sel-bar / .quick-act
   не привязаны к .view-am и применяются автоматически. Здесь реплицируем
   только то, что в «Аккаунтах» ограничено селектором .view-am.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Акцентные переменные модуля (как у .view-am) + место под нижнюю панель */
.view-proxy {
  --am-accent: #2563eb;
  --am-accent-rgb: 37, 99, 235;
  --am-accent-active: #7478ff;
  --am-soft: rgba(37, 99, 235, 0.10);
  --am-control-h: 38px;
  padding-bottom: 100px;
}


/* ─── Шапка: зелёная кнопка «Добавить» (.px-hero__add) ─────── */
/* Оговорка про :not(.am-table-head__add): кнопка «Добавить прокси» уехала
   пилюлей в строку опознания, и там её ведёт канон .am-table-head__add в конце
   файла. Но этот легаси-набор весит (1,2,2) против (1,1,2) канона (лишний класс
   даёт сам :not) и весь на !important — без исключения он молча возвращает
   синий прямоугольник r10 на 44px. Та же мина, что у #am-add-accounts, только
   там веса равны и спор решает позиция в файле. ── */
html body .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add),
html body.theme-dark .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add),
html body .view-proxy .am-search-row__add,
html body.theme-dark .view-proxy .am-search-row__add {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 10px !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
}
html body .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add):hover,
html body.theme-dark .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add):hover,
html body .view-proxy .am-search-row__add:hover,
html body.theme-dark .view-proxy .am-search-row__add:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}
html body .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add) svg,
html body.theme-dark .view-proxy #px-add-many:not(.picker-gmail-bar__add):not(.am-table-head__add) svg,
html body .view-proxy .am-search-row__add svg,
html body.theme-dark .view-proxy .am-search-row__add svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.4 !important;
  color: #ffffff !important;
  background: transparent !important;
  border-radius: 0 !important;
}

html body .view-proxy #px-open-help svg,
html body.theme-dark .view-proxy #px-open-help svg {
  width: 23px !important;
  height: 23px !important;
}

html body .view-proxy .am-gmail-bar,
html body.theme-dark .view-proxy .am-gmail-bar {
  background: var(--card, #fff) !important;
  border-bottom: 1px solid var(--border, #e7ebf2) !important;
  min-height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0px 12px !important;
  overflow: visible !important;
}
html body .view-proxy .am-table-foot,
html body.theme-dark .view-proxy .am-table-foot {
  width: 100% !important;
  box-sizing: border-box !important;
}
html body .view-proxy .am-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-proxy .am-gmail-bar .picker-gmail-bar__action {
  border: 0 !important;
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
html body .view-proxy .am-gmail-bar .picker-gmail-bar__action:hover,
html body.theme-dark .view-proxy .am-gmail-bar .picker-gmail-bar__action:hover {
  background: rgba(60, 64, 67, 0.08) !important;
}
html body .view-proxy .am-filter-wrap,
html body.theme-dark .view-proxy .am-filter-wrap,
html body .view-proxy .am-range-wrap,
html body.theme-dark .view-proxy .am-range-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .view-proxy .am-filter-count,
html body .view-proxy .am-gmail-bar #px-filter-count,
html body.theme-dark .view-proxy .am-filter-count,
html body.theme-dark .view-proxy .am-gmail-bar #px-filter-count {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  background: var(--am-accent, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--card, #fff) !important;
}
html body .view-proxy .am-table-card,
html body.theme-dark .view-proxy .am-table-card {
  overflow: visible !important;
}


/* ─── Таблица: светлая шапка как у acc-table (не UPPERCASE) ─────────────── */
/* (Легаси-липкая шапка удалена — оболочка шапки приезжает из канонического
   контракта .app-table, скролл живёт в .am-table-shell, как в аккаунтах.) */



/* Proxy hero: unique dark-premium gradient built around the site's blue
   accent (--px-accent #2563eb). Deep midnight base with layered radial
   glows for depth; bright blue stays only in the highlight, keeping it dark. */

html body .view-proxy .px-flat__scroll,
html body.theme-dark .view-proxy .px-flat__scroll {
  width: 100% !important;
  overflow-x: auto !important;
}

html body .view-proxy .px-flat__table,
html body.theme-dark .view-proxy .px-flat__table {
  width: 100% !important;
  min-width: max(100%, var(--px-table-min-width, 720px)) !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Колонка Actions убрана: её действия живут оверлеем в ячейке пароля и
   всплывают при наведении (как иконки строки в аккаунтах). Ширины колонок —
   гибкие доли из --px-col-* (единый источник правды в блоке «Proxy table
   final reset»), поэтому таблица тянется на всю ширину контейнера (width:100%)
   и не уезжает за экран, а host не раздувается. */

html body .view-proxy .px-flat__table th:nth-child(1),
html body .view-proxy .px-flat__table td:nth-child(1) { width: var(--px-col-country) !important; overflow: visible !important; text-overflow: clip !important; }
html body .view-proxy .px-flat__table th:nth-child(2),
html body .view-proxy .px-flat__table td:nth-child(2) { width: var(--px-col-type) !important; }
html body .view-proxy .px-flat__table th:nth-child(3),
html body .view-proxy .px-flat__table td:nth-child(3) { width: var(--px-col-host) !important; }
html body .view-proxy .px-flat__table th:nth-child(4),
html body .view-proxy .px-flat__table td:nth-child(4) { width: var(--px-col-port) !important; }
html body .view-proxy .px-flat__table th:nth-child(5),
html body .view-proxy .px-flat__table td:nth-child(5) { width: var(--px-col-user) !important; }
html body .view-proxy .px-flat__table th:nth-child(6),
html body .view-proxy .px-flat__table td:nth-child(6) { width: var(--px-col-pass) !important; }

/* Контент ячеек — слева, ровно под своим заголовком (как в аккаунтах). Снимаем
   устаревшее центрирование tbody td, из-за которого port/user/pass «висели» по
   центру. Country (первый столбец) со встроенным чекбоксом выравнивается по
   каноническому td:first-child и здесь исключён (:not(:first-child)). */
html body .view-proxy .px-flat__table tbody td:not(:first-child),
html body.theme-dark .view-proxy .px-flat__table tbody td:not(:first-child) { text-align: left !important; }

html body .view-proxy .px-flat__table th,
html body .view-proxy .px-flat__table td,
html body.theme-dark .view-proxy .px-flat__table th,
html body.theme-dark .view-proxy .px-flat__table td {
  box-sizing: border-box !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Единый шрифт всей страницы прокси — Google Sans (как таблица .app-table):
   табы (.px-tabs), счётчики (.picker-counter/.am-table-counter), пагинация
   (.picker-pagination__info), тулбар и остальное переводим с Inter на
   --app-table-font. Иконочные шрифты Material Symbols исключаем, иначе их
   лигатуры распадаются в текст. */
html body.is-proxy-screen #view-proxy {
  --app-table-font: var(--app-font);
}
html body.is-proxy-screen #view-proxy,
html body.is-proxy-screen #view-proxy *:not(.material-symbols-outlined):not(.material-icons),
html body.theme-dark.is-proxy-screen #view-proxy,
html body.theme-dark.is-proxy-screen #view-proxy *:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--app-table-font, var(--app-font)) !important;
}

html body .view-proxy .px-flat__table th:nth-child(5),
html body .view-proxy .px-flat__table td:nth-child(5),
html body.theme-dark .view-proxy .px-flat__table th:nth-child(5),
html body.theme-dark .view-proxy .px-flat__table td:nth-child(5) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .view-proxy .px-flat__num,
html body.theme-dark .view-proxy .px-flat__num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: 2ch !important;
  margin-right: 18px !important;
  vertical-align: middle !important;
  color: var(--text-mute, #64748b) !important;
  text-align: right !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

html body .view-proxy .px-flat__cell,
html body.theme-dark .view-proxy .px-flat__cell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body .view-proxy .px-flat__cell > span:first-child,
html body.theme-dark .view-proxy .px-flat__cell > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .view-proxy .px-flat__actions,
html body.theme-dark .view-proxy .px-flat__actions {
  max-width: 100% !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
}

/* ---- Final userbase UI normalization: must stay after legacy overrides ----- */

html body .view-userbase--v2 .ub2-count__num,
html body.theme-dark .view-userbase--v2 .ub2-count__num,
html body .view-userbase--v2 .ub2-table tbody tr:hover .ub2-count__num,
html body.theme-dark .view-userbase--v2 .ub2-table tbody tr:hover .ub2-count__num {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #2b2b2b) !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}

html body .view-userbase--v2 .ub2-source-menu__button,
html body.theme-dark .view-userbase--v2 .ub2-source-menu__button {
  width: 100% !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border: 1px solid var(--border, #d9d9d9) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  font-size: 13.5px !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .ub2-source-menu__button:hover {
  border-color: var(--border-strong, #c3ccda) !important;
  background: #fbfcfe !important;
}

html body .view-userbase--v2 .ub2-source-menu__list,
html body.theme-dark .view-userbase--v2 .ub2-source-menu__list {
  position: absolute !important;
  top: calc(100% + var(--pop-gap, 4px)) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 430 !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  padding: var(--pop-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--pop-bg) !important;
  border: 1px solid var(--pop-border-color) !important;
  border-radius: var(--pop-radius) !important;
  box-shadow: var(--pop-shadow) !important;
}

html body .view-userbase--v2 .ub2-source-menu__list[hidden],
html body.theme-dark .view-userbase--v2 .ub2-source-menu__list[hidden] {
  display: none !important;
}

html body .view-userbase--v2 .ub2-source-menu__item,
html body.theme-dark .view-userbase--v2 .ub2-source-menu__item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: var(--pop-item-h, 32px) !important;
  padding: var(--pop-item-pad, 6px 8px) !important;
  border: 0 !important;
  border-radius: var(--pop-item-radius, 6px) !important;
  background: transparent !important;
  color: var(--pop-text, #1f1f1f) !important;
  font-size: var(--pop-font-size, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .ub2-source-menu__item:hover,
html body.theme-dark .view-userbase--v2 .ub2-source-menu__item:hover {
  background: var(--pop-item-hover, #f1f3f4) !important;
  color: var(--pop-text, #1f1f1f) !important;
}

html body .view-userbase--v2 .ub2-source-menu__item.is-active,
html body.theme-dark .view-userbase--v2 .ub2-source-menu__item.is-active {
  background: var(--pop-item-sel-bg, #d3e3fd) !important;
  color: var(--pop-item-sel-fg, #0b57d0) !important;
}

html body #ub-detail-modal .ub-detail--floppy,
html body #ub-import-modal .ub-import-modal,
html body.theme-dark #ub-detail-modal .ub-detail--floppy,
html body.theme-dark #ub-import-modal .ub-import-modal {
  background: #ffffff !important;
  color: #2b2b2b !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html body .newbase-modal .modal__head,
html body #ub-detail-modal .ub-detail--floppy .modal__head,
html body #ub-import-modal .modal__head,
html body.theme-dark .newbase-modal .modal__head,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .modal__head,
html body.theme-dark #ub-import-modal .modal__head {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  padding: 10px 20px 10px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

html body .newbase-modal .modal__title,
html body #ub-detail-modal .ub-detail__modal-title,
html body #ub-import-modal .modal__title,
html body.theme-dark .newbase-modal .modal__title,
html body.theme-dark #ub-detail-modal .ub-detail__modal-title,
html body.theme-dark #ub-import-modal .modal__title {
  color: #2b2b2b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body #ub-import-modal .ub-import-modal__title-row,
html body.theme-dark #ub-import-modal .ub-import-modal__title-row {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
}

html body #ub-import-modal .ub-import-modal__icon,
html body.theme-dark #ub-import-modal .ub-import-modal__icon {
  display: none !important;
}

html body .newbase-modal .modal__head .icon-btn,
html body .newbase-modal .modal__head .edit-profile__nav,
html body #ub-detail-modal .ub-detail__head-actions .icon-btn,
html body #ub-import-modal .modal__head .icon-btn,
html body #ub-import-modal .modal__head .edit-profile__nav,
html body.theme-dark .newbase-modal .modal__head .icon-btn,
html body.theme-dark .newbase-modal .modal__head .edit-profile__nav,
html body.theme-dark #ub-detail-modal .ub-detail__head-actions .icon-btn,
html body.theme-dark #ub-import-modal .modal__head .icon-btn,
html body.theme-dark #ub-import-modal .modal__head .edit-profile__nav {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8b8f97 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .newbase-modal .modal__head .icon-btn:hover,
html body .newbase-modal .modal__head .edit-profile__nav:hover,
html body #ub-detail-modal .ub-detail__head-actions .icon-btn:hover,
html body #ub-import-modal .modal__head .icon-btn:hover,
html body #ub-import-modal .modal__head .edit-profile__nav:hover,
html body.theme-dark .newbase-modal .modal__head .icon-btn:hover,
html body.theme-dark .newbase-modal .modal__head .edit-profile__nav:hover,
html body.theme-dark #ub-detail-modal .ub-detail__head-actions .icon-btn:hover,
html body.theme-dark #ub-import-modal .modal__head .icon-btn:hover,
html body.theme-dark #ub-import-modal .modal__head .edit-profile__nav:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

html body .newbase-modal .modal__body,
html body #ub-detail-modal .ub-detail--floppy .modal__body,
html body #ub-import-modal .modal__body,
html body.theme-dark .newbase-modal .modal__body,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .modal__body,
html body.theme-dark #ub-import-modal .modal__body {
  padding: 18px 24px 22px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

html body .newbase-modal .inv-input,
html body .newbase-modal .inv-textarea,
html body #ub-detail-modal .ub-detail__textarea,
html body.theme-dark .newbase-modal .inv-input,
html body.theme-dark .newbase-modal .inv-textarea,
html body.theme-dark #ub-detail-modal .ub-detail__textarea {
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
}

html body .newbase-modal .inv-input:focus,
html body .newbase-modal .inv-textarea:focus,
html body #ub-detail-modal .ub-detail__textarea:focus,
html body.theme-dark .newbase-modal .inv-input:focus,
html body.theme-dark .newbase-modal .inv-textarea:focus,
html body.theme-dark #ub-detail-modal .ub-detail__textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}

html body .newbase-modal .modal__foot,
html body #ub-detail-modal .ub-detail--floppy .ub-detail__foot,
html body #ub-import-modal .modal__foot,
html body.theme-dark .newbase-modal .modal__foot,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .ub-detail__foot,
html body.theme-dark #ub-import-modal .modal__foot {
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
}

html body .newbase-modal .btn--primary,
html body #ub-detail-modal .ub-detail--floppy .btn--primary,
html body #ub-import-modal .btn--primary,
html body.theme-dark .newbase-modal .btn--primary,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .btn--primary,
html body.theme-dark #ub-import-modal .btn--primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .newbase-modal .btn--primary:hover,
html body #ub-detail-modal .ub-detail--floppy .btn--primary:hover,
html body #ub-import-modal .btn--primary:hover,
html body.theme-dark .newbase-modal .btn--primary:hover,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .btn--primary:hover,
html body.theme-dark #ub-import-modal .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* Footer buttons: unified DESIGN.md size — horizontal layout */
html body .newbase-modal .modal__foot .btn,
html body.theme-dark .newbase-modal .modal__foot .btn {
  padding: 9px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .newbase-modal .btn--ghost,
html body.theme-dark .newbase-modal .btn--ghost {
  background: #f7f7f7 !important;
  border: 1px solid #d9d9d9 !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
}

html body .newbase-modal .btn--ghost:hover,
html body.theme-dark .newbase-modal .btn--ghost:hover {
  background: #efefef !important;
  border-color: #cfcfcf !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Userbase modals — final Nimbus conformance (DESIGN.md §7)
   The earlier "reference layout" blocks set the detail-modal focus rings to
   legacy indigo. Those rules carry a `.ub-detail__*` class that the green
   retrofit above omitted, so they out-specify it. This layer restores the
   spec colors (gray cancel, blue #78b7ff focus ring) by matching the
   wrapper-class specificity. Covers «База пользователей» and the shared
   «Удалить базу?» confirm dialog.
   Окно «Новый список пользователей» здесь не упоминается: его правила стояли
   на голом `.ub-create-modal`, которого в разметке нет, — снято 11.08.2026.
   ════════════════════════════════════════════════════════════════════════ */




/* ── Shared confirm/prompt dialog: Nimbus modal (light in both themes) ── */
html body #dlg-modal .dlg-panel,
html body.theme-dark #dlg-modal .dlg-panel {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html body #dlg-modal .dlg-head,
html body.theme-dark #dlg-modal .dlg-head {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px 10px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

html body #dlg-modal .dlg-title,
html body.theme-dark #dlg-modal .dlg-title {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #2b2b2b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #dlg-modal .dlg-body,
html body.theme-dark #dlg-modal .dlg-body {
  padding: 18px 24px 22px !important;
  background: #ffffff !important;
}

html body #dlg-modal .dlg-message,
html body.theme-dark #dlg-modal .dlg-message {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-mute, #6b7494) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
}

html body #dlg-modal .dlg-input,
html body.theme-dark #dlg-modal .dlg-input {
  display: none !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 14px 0 0 !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

html body #dlg-modal .dlg-input.is-visible,
html body.theme-dark #dlg-modal .dlg-input.is-visible {
  display: block !important;
}

html body #dlg-modal .dlg-input:focus,
html body.theme-dark #dlg-modal .dlg-input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}

html body #dlg-modal .dlg-actions,
html body.theme-dark #dlg-modal .dlg-actions {
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
}

html body #dlg-modal .dlg-actions .btn,
html body.theme-dark #dlg-modal .dlg-actions .btn {
  min-height: 0 !important;
  height: auto !important;
  padding: 9px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html body #dlg-modal .dlg-actions .btn--primary,
html body.theme-dark #dlg-modal .dlg-actions .btn--primary {
  border: 1px solid #3b82f6 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

html body #dlg-modal .dlg-actions .btn--primary:hover,
html body.theme-dark #dlg-modal .dlg-actions .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html body #dlg-modal .dlg-actions .btn--ghost,
html body.theme-dark #dlg-modal .dlg-actions .btn--ghost {
  background: transparent !important;
  border: 1px solid var(--border, #e3e8f0) !important;
  color: var(--text, #1f2740) !important;
}

html body #dlg-modal .dlg-actions .btn--ghost:hover,
html body.theme-dark #dlg-modal .dlg-actions .btn--ghost:hover {
  background: var(--bg-hover, #f1f4fa) !important;
  border-color: var(--border-strong, #d3dae6) !important;
  color: var(--text, #1f2740) !important;
}

html body #dlg-modal.dlg-modal--danger .dlg-actions .btn--primary,
html body.theme-dark #dlg-modal.dlg-modal--danger .dlg-actions .btn--primary {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

html body #dlg-modal.dlg-modal--danger .dlg-actions .btn--primary:hover,
html body.theme-dark #dlg-modal.dlg-modal--danger .dlg-actions .btn--primary:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ── Карточка окна .addw: правило на классе ──────────────────────
   Канон окон описан у каждого окна отдельно — своим блоком на свой id
   (#add-modal .addw, #md-bot-modal .addw, #phone-auth-modal .addw и так
   далее). Пока окно новое, у него такого блока нет, и карточка выходит
   БЕЗ фона, БЕЗ скругления и растянутой во всю ширину: класс .addw сам
   по себе не задавал ничего, кроме анимации входа.

   Поэтому здесь стоит основа на классе — ровно те значения, которые
   повторяет каждый из id-блоков. Их правила сильнее (id + !important),
   так что ни одно существующее окно эта основа не трогает; она
   подхватывает только те окна, у которых своего блока ещё нет.

   Ширину каждое окно выбирает себе само: 460px — самая частая, шире
   берут модификатором .addw--wide. */
.addw-modal .addw {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: calc(100vw - 28px);
  /* Отступы держат шапка, тело и подвал — см. канон отступов модалок. */
  padding: 0;
  background-color: #ffffff;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  font-family: var(--app-font);
  color: #1f1f1f;
}
/* Окну со списком галочек 460px тесно: подписи прав переносятся по два
   слова. Модификатор, а не правило на id, — чтобы следующее широкое окно
   не заводило третью копию тех же значений. */
.addw-modal .addw--wide { width: 560px; }

/* ── Диалог в стиле «Добавление аккаунтов» (.addw): белая карточка r28,
   крупный заголовок 23px/500, кнопки-пилюли 40px/r20 (отмена — синий текст,
   основная — заливка; danger — красная). Включается классом dlg-modal--addw. */
html body #dlg-modal.dlg-modal--addw .dlg-panel,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-panel {
  width: 460px !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-head,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-head {
  min-height: 0 !important;
  padding: 24px 24px 4px !important;
  background: #ffffff !important;
  border-bottom: 0 !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-title,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-title {
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
  white-space: normal !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-close,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-close {
  align-self: start !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-body,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-body {
  padding: 6px 24px 8px !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-message,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-message {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #444746 !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-actions,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions {
  padding: 12px 24px 24px !important;
  gap: 8px !important;
  border-top: 0 !important;
  background: #ffffff !important;
}
/* Кнопки — пилюли .addw__btn (40px / r20). */
html body #dlg-modal.dlg-modal--addw .dlg-actions .btn,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn {
  height: 40px !important;
  min-width: 64px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
/* Отмена — синий текст без заливки (как .addw__btn--cancel). */
html body #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost {
  border: 0 !important;
  background: transparent !important;
  color: #0b57d0 !important;
  padding-inline: 12px !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost:hover,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border: 0 !important;
  color: #0b57d0 !important;
}
/* Основная — синяя заливка-пилюля. */
html body #dlg-modal.dlg-modal--addw .dlg-actions .btn--primary,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--primary {
  border: 0 !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
}
html body #dlg-modal.dlg-modal--addw .dlg-actions .btn--primary:hover,
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}
/* Деструктивная основная — красная заливка-пилюля. */
html body #dlg-modal.dlg-modal--addw.dlg-modal--danger .dlg-actions .btn--primary,
html body.theme-dark #dlg-modal.dlg-modal--addw.dlg-modal--danger .dlg-actions .btn--primary {
  background: #d93025 !important;
  border: 0 !important;
  color: #ffffff !important;
}
html body #dlg-modal.dlg-modal--addw.dlg-modal--danger .dlg-actions .btn--primary:hover,
html body.theme-dark #dlg-modal.dlg-modal--addw.dlg-modal--danger .dlg-actions .btn--primary:hover {
  background: #c5221f !important;
  box-shadow: 0 1px 6px rgba(217, 48, 37, 0.35) !important;
}

/* ── Галочка «Больше не показывать» в подтверждениях ────────────
   Материальный чекбокс 21px по канону §3.2: input — маска рамки,
   отдельный span-оверлей — маска галочки (Chrome не рисует псевдоэлементы
   на <input>). Прорисовка — clip-path слева направо, токены из motion.css. */
html body #dlg-modal .dlg-again,
html body.theme-dark #dlg-modal .dlg-again {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 2px !important;
  cursor: pointer !important;
  user-select: none !important;
}
html body #dlg-modal .dlg-again[hidden],
html body.theme-dark #dlg-modal .dlg-again[hidden] {
  display: none !important;
}
html body #dlg-modal .dlg-again__label,
html body.theme-dark #dlg-modal .dlg-again__label {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
}
html body #dlg-modal .dlg-again__cbwrap,
html body.theme-dark #dlg-modal .dlg-again__cbwrap {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  line-height: 0 !important;
}
html body #dlg-modal .dlg-again__cb,
html body.theme-dark #dlg-modal .dlg-again__cb {
  position: relative !important;
  z-index: 1 !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  accent-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: url("img/checkbox-empty.svg") !important;
  mask-image: url("img/checkbox-empty.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #dlg-modal .dlg-again__cb:checked,
html body.theme-dark #dlg-modal .dlg-again__cb:checked {
  background-color: #0b57d0 !important;
}
html body #dlg-modal .dlg-again__tick,
html body.theme-dark #dlg-modal .dlg-again__tick {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  /* Цвет галочки = цвет рамки: рамка остаётся рамкой (канон §3.2). */
  background-color: #0b57d0 !important;
  -webkit-mask-image: url("img/checkbox-tick.svg") !important;
  mask-image: url("img/checkbox-tick.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
              clip-path 0s var(--motion-fast, 100ms) !important;
}
html body #dlg-modal .dlg-again__cb:checked + .dlg-again__tick,
html body.theme-dark #dlg-modal .dlg-again__cb:checked + .dlg-again__tick {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transition: opacity 0s,
              clip-path var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

@media (max-width: 480px) {
  html body #dlg-modal .dlg-panel,
  html body.theme-dark #dlg-modal .dlg-panel {
    max-width: calc(100vw - 20px) !important;
  }
}


/* ╭──────────────────────────────────────────────────────────╮
   │  FAQ — частые вопросы (модалка из топбара)                │
   ╰──────────────────────────────────────────────────────────╯
   Графику в ответах (help-flow / help-status / help-tip / help-list /
   help-steps / help-tiles) переиспользуем из блока «Помощь» ниже — это
   общие декоративные хелперы, поэтому здесь не дублируются.

   Окно стоит на КАНОНЕ addw (эталон — #add-modal): карточка r28 без рамки
   с тенью 0 4px 24px, заголовок 23px/500 БЕЗ разделителя под шапкой,
   строки-опции r12 с hover #f1f3f4, кнопки-пилюли 40px/r20 на #0b57d0.
   Рамку 24/25/24/24 держит блок «СТАНДАРТ ОТСТУПОВ МОДАЛЬНЫХ ОКОН» в
   конце файла — поэтому боковых отступов у шапки, поиска и подвала здесь
   нет. Двухколоночная раскладка рамку не получает (так велит стандарт):
   её берут сами колонки, иначе заливка боковой панели отлипает от края. */

/* Акцент окна — общие с «Помощью» и «Поддержкой» --help-accent/-weak (объявлены
   ниже по файлу, у трёх окон один набор). Своих --faq-* переменных здесь нет
   намеренно: раздел открывается из того же меню и читается с ними подряд. */


/* Поиск. СТРОКА держит рамку 24/25 (её ей даёт стандарт отступов), а видимая
   пилюля — вложенное поле. Пока пилюлей была сама строка, стандарт загонял
   свои 24/25 ВНУТРЬ неё: рамка поля упиралась в края карточки, а текст стоял
   в 24px от собственной обводки. Рамку и фокус-кольцо несёт поле, у самого
   input обводки нет. */
.faq-modal__search {
  flex: none;
  padding-bottom: var(--modal-gap, 16px);
}
.faq-modal__search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}
.faq-modal__search-field:focus-within {
  border-color: var(--help-accent);
  box-shadow: 0 0 0 3px var(--help-accent-weak);
}
.faq-modal__search-ico { width: 18px; height: 18px; color: var(--text-light); flex: none; }
.faq-modal__search input {
  flex: 1 1 auto;
  min-width: 0;
  /* Во всю высоту пилюли: клик по любому её месту попадает в поле. */
  height: 100%;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.faq-modal__search input:focus,
.faq-modal__search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.faq-modal__search input::placeholder { color: var(--text-light); }
.faq-modal__search-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--text-light);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.faq-modal__search-clear:hover { background: var(--bg-hover); color: var(--text); }
.faq-modal__search-clear[hidden] { display: none; }

/* Раскладка: категории + контент. Рамку 24/25 колонки НЕ получают (так велит
   стандарт отступов) — её берут сами колонки. Верхний зазор даёт padding-bottom
   строки поиска, линии через всё окно нет: границу рисует колонка навигации —
   как в «Помощи», «Поддержке» и «Что нового». */
.faq-modal__layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* Категории. Строка-опция канона addw: r12, hover #f1f3f4, активная —
   мягкая заливка акцентом, как у пунктов сайдбара программы. Своей заливки
   у колонки нет — все четыре окна меню стоят на белом. */
.faq-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 12px 20px 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.faq-nav__group { display: flex; flex-direction: column; gap: 2px; }
.faq-nav__group-title {
  margin: 0 0 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
}
/* Пункт — та же пилюля Material, что и .help-nav__item: подложка выделения
   скруглена по высоте строки (36 / r18). Свои 38 / r12 читались чужой
   строкой рядом с «Помощью» и «Поддержкой». */
.faq-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  text-align: left;
  padding: 7px 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.faq-cat svg { width: 18px; height: 18px; flex: none; }
.faq-cat span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.faq-cat:hover { background: var(--bg-hover); color: var(--text); }
.faq-cat.is-active {
  background: var(--help-accent-weak);
  color: var(--help-accent);
  font-weight: 500;
}
.faq-cat.is-active svg { color: var(--help-accent); }

/* Контент. Верхний отступ тот же, что у колонки категорий (2px): первый
   заголовок статьи встаёт вровень с первым пунктом слева — как в «Помощи»,
   «Поддержке» и «Что нового». Свои 20px опускали текст на 18px ниже. */
.faq-modal__content {
  padding: 2px 0 24px;
  overflow-y: auto;
  min-height: 0;
  /* Резервируем место под скроллбар, чтобы текст не «дёргался» между темами. */
  scrollbar-gutter: stable;
}
.faq-group__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text);
}
/* Врез под заголовком темы: новичку нужен контекст раздела до того, как он
   начнёт раскрывать вопросы. В режиме поиска не нужен — там результаты
   стоят вперемешку и врез только шумит. */
.faq-group__lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
}
.faq-group__lead b { color: var(--text); font-weight: 600; }

/* Декоративные блоки (схемы / плитки) — прячем в режиме поиска */
.faq-decor { margin-bottom: 16px; }

/* Аккордеон-вопрос */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] {
  border-color: var(--help-accent);
  background: var(--help-accent-soft);
}
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--text-light);
  border-bottom: 2px solid var(--text-light);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--motion-draw) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.faq-item__q:hover { background: var(--bg-hover); }
.faq-item[open] .faq-item__q { color: var(--help-accent); }
.faq-item[open] .faq-item__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--help-accent);
}
.faq-item__a {
  padding: 0 18px 16px;
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.7;
}
.faq-item__a p { margin: 0 0 10px; }
.faq-item__a b { color: var(--text); font-weight: 600; }
.faq-item__a code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--gray-bg);
  color: var(--text);
}
/* Срезаем нижний отступ последнего вложенного хелпера — без лишнего «воздуха» */
.faq-item__a > :last-child { margin-bottom: 0; }

/* Доп. статус-бейджи для меток базы (расширяют общий .help-status) */
.help-status--privacy {
  background: var(--status-frozen-bg);
  color: var(--status-frozen-color);
}
.help-status--skip {
  background: var(--status-skip-bg);
  color: var(--status-skip-color);
}
.help-status--error {
  background: var(--status-dead-bg);
  color: var(--status-dead-color);
}

/* Подсветка совпадений в поиске */
.faq-item__q mark,
.faq-item__a mark {
  background: var(--help-accent-weak);
  color: var(--help-accent);
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 600;
}

/* Графика внутри ответов — общие хелперы блока «Помощь». Здесь только
   перекрашиваем их в акцент окна: сами хелперы держат синий числом, и без
   этого блока схемы, врезки и маркеры списков спорили бы с канонным
   #0b57d0, а в тёмной теме светились бы неразбавленным #2563eb. */

/* Пустой результат — по умолчанию скрыт, виден только при поиске без совпадений */
.faq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 44px 24px;
  text-align: center;
  color: var(--text-light);
}
.faq-empty[hidden] { display: none; }
.faq-empty svg { width: 42px; height: 42px; margin-bottom: 4px; }
.faq-empty__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-mute); }
.faq-empty__sub { margin: 0; font-size: 12.5px; color: var(--text-light); }

/* Футер — по канону addw: без разделителя, кнопки справа, gap 12px (как у
   «Помощи»), отступы от стандарта. Линии над подвалом нет намеренно; границу
   низа рабочей зоны рисует колонка навигации, а не черта через всё окно. */

/* Кнопки — «пилюли» addw (40px / r20 / Google Sans), один в один с «Помощью».
   html body + !important здесь обязательны: глобальный punch-list сажает
   .btn--primary/.btn--ghost на радиус 6px и без перебоя выигрывает у
   селектора с одним id. */

/* Адаптив */
@media (max-width: 1000px) {
  /* Колонка тем ужимается раньше, чем ломается раскладка: терять её сразу
     незачем — подписи ещё помещаются. */
  .faq-modal__layout { grid-template-columns: 208px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* Навигация уходит в горизонтальную ленту сверху, контент — под ней. */
  .faq-modal__layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .faq-modal__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 12px 12px 0;
  }
  .faq-nav__group { flex-direction: row; gap: 6px; }
  .faq-nav__group-title { display: none; }
  .faq-cat { flex: none; width: auto; padding: 9px; }
  .faq-cat span { display: none; }
  .faq-cat svg { width: 18px; height: 18px; }
  .faq-modal__content { padding: 16px 18px 20px; }
}

/* ╭──────────────────────────────────────────────────────────╮
   │  Помощь — руководство по программе (модалка из топбара)   │
   ╰──────────────────────────────────────────────────────────╯
   Визуальный язык — канон addw («Добавление аккаунтов»): Google Sans,
   карточка r28, заголовок 23px/500, кнопки-пилюли 40px/r20, акцент
   #0b57d0. Тема-адаптивно: фон/текст/границы на токенах, зашиты только
   акцент и типографика. Рамку 24/25 держит канон отступов модалок —
   здесь её нет намеренно (см. блок «Отступы окон» ниже по файлу).      */
.help-modal {
  font-family: var(--app-font);
  /* Раздел читают, а не пробегают: колонка текста шире обычного окна,
     иначе таблицы настроек и схемы модулей ломаются переносами. */
  width: min(1020px, calc(100vw - 28px));
  /* Фиксированная высота: окно не «прыгает» при переключении тем — лишнее скроллится внутри. */
  height: min(88vh, 720px);
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}

/* Заголовок — как .addw__header (23px / 500), без разделителя под ним:
   границу рисует колонка навигации, а не линия через всё окно. */
.help-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}
.help-modal__head-text { min-width: 0; }
.help-modal__title {
  margin: 0;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  color: var(--text);
}
.help-modal__close { flex: none; }

/* Поиск по разделам — пилюля в языке окна (r22, 44px). Устроен как в FAQ:
   СТРОКА держит рамку 24/25 (её ей даёт стандарт отступов), а видимая пилюля —
   вложенное поле. Пока пилюлей была сама строка, стандарт загонял свои 24/25
   ВНУТРЬ неё: обводка поля упиралась в края карточки (поиск во всю ширину
   окна), а текст стоял в 24px от собственной обводки. Рамку и фокус-кольцо
   несёт поле, у самого input обводки нет. */
.help-modal__search {
  flex: none;
  padding-bottom: var(--modal-gap, 16px);
}
.help-modal__search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-app);
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}
.help-modal__search-field:focus-within {
  border-color: var(--help-accent);
  box-shadow: 0 0 0 3px var(--help-accent-weak);
}
.help-modal__search-ico { width: 18px; height: 18px; flex: none; color: var(--text-light); }
/* Обводку на фокусе рисует ПОЛЕ, а не input: у общего правила модалок
   (.modal input:focus-visible в style.css) своё box-shadow, и внутри круглой
   пилюли оно проступало прямоугольной рамкой. Гасим все три свойства. */
.help-modal__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}
.help-modal__search input:focus,
.help-modal__search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.help-modal__search input::placeholder { color: var(--text-light); }
.help-modal__search-clear {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: background var(--motion-state) var(--motion-ease),
              color var(--motion-state) var(--motion-ease);
}
.help-modal__search-clear:hover { background: var(--bg-hover); color: var(--text); }
.help-modal__search-clear[hidden] { display: none; }

/* Раскладка: навигация + контент */
.help-modal__layout {
  display: grid;
  /* Колонка навигации рассчитана так, чтобы самые длинные подписи помещались в одну строку. */
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* Навигация по темам */
.help-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 12px 20px 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.help-nav__group { display: flex; flex-direction: column; gap: 2px; }
.help-nav__group-title {
  margin: 0 0 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
}
/* Пункт — пилюля Material: подложка выделения скруглена по высоте строки. */
.help-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 36px;
  padding: 7px 12px;
  border: none;
  border-radius: 18px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-mute);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.help-nav__item svg { width: 18px; height: 18px; flex: none; }
/* Подпись занимает остаток ширины; длинный текст обрезается многоточием и не двигает иконку. */
.help-nav__item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-nav__item:hover { background: var(--bg-hover); color: var(--text); }
.help-nav__item.is-active {
  background: var(--help-accent-weak);
  color: var(--help-accent);
  font-weight: 500;
}
.help-nav__item.is-active svg { color: var(--help-accent); }
/* Поиск прячет то, что не подошло; пустая группа уходит вместе с заголовком. */
.help-nav__item[hidden],
.help-nav__group[hidden] { display: none; }
.help-nav__empty {
  margin: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
}
.help-nav__empty[hidden] { display: none; }

/* Контент */
.help-modal__content {
  padding: 2px 0 24px;
  overflow-y: auto;
  min-height: 0;
  /* Резервируем место под скроллбар, чтобы текст не «дёргался» между темами. */
  scrollbar-gutter: stable;
}
.help-article__title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.help-article__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
}
.help-article__h {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.help-article__h:first-of-type { margin-top: 18px; }
.help-article p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-mute);
}
.help-article p:last-child { margin-bottom: 0; }
.help-article b { color: var(--text); font-weight: 500; }
.help-article code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--gray-bg);
  color: var(--text);
}

/* Где искать модуль — крошка того же вида, что и в шапках таблиц. */
.help-path {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--help-accent-weak);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--help-accent);
}
.help-path svg { width: 14px; height: 14px; flex: none; }
.help-path i { font-style: normal; opacity: .6; }

.help-list,
.help-steps {
  margin: 4px 0 14px;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-mute);
}
.help-list { list-style: disc; }
.help-steps { list-style: decimal; }
.help-list li,
.help-steps li { margin-bottom: 7px; }
.help-list li::marker { color: var(--help-accent); }
.help-steps li::marker { color: var(--help-accent); font-weight: 500; }

/* ── Таблица настроек: «что за поле» → «что оно делает» ──
   Главный носитель исчерпывающих подробностей по модулю: параметры
   перечислены ровно те, что стоят на его странице запуска.          */
.help-kv {
  margin: 6px 0 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.help-kv__row {
  display: grid;
  grid-template-columns: minmax(150px, 232px) minmax(0, 1fr);
  gap: 16px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}
.help-kv__row:first-child { border-top: none; }
.help-kv__row:nth-child(odd) { background: var(--help-accent-soft); }
.help-kv__key { font-weight: 500; color: var(--text); }
.help-kv__val { color: var(--text-mute); }
.help-kv__val b { color: var(--text); font-weight: 500; }

/* ── Наглядная схема окна (Обзор интерфейса) ── */
.help-mock {
  margin: 4px 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-app);
  box-shadow: var(--shadow);
}
/* Схема повторяет НЫНЕШНИЙ вид программы: и панель, и боковое меню
   светлые, на общем фоне --bg-app, а различает их граница — ровно как на
   экране. Тёмно-синий градиент здесь остался от прежнего оформления и
   рисовал пользователю окно, которого он не увидит. */
.help-mock__topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 36px;
  border-bottom: 1px solid var(--border);
}
.help-mock__search {
  width: 140px; height: 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.help-mock__dots { margin-left: auto; display: flex; gap: 7px; }
.help-mock__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--gray-bg); }
.help-mock__body { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.help-mock__side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 10px 14px;
  border-right: 1px solid var(--border);
}
.help-mock__navline { height: 11px; border-radius: 5px; background: var(--gray-bg); }
.help-mock__navline.is-on { background: var(--help-accent-weak); }
.help-mock__main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 12px 14px;
}
/* Строка опознания раздела — путь и название над содержимым. */
.help-mock__hero {
  height: 36px; border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.help-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.help-mock__stats i { height: 28px; border-radius: 7px; background: var(--bg-card); border: 1px solid var(--border); }
.help-mock__rows { display: flex; flex-direction: column; gap: 6px; }
.help-mock__rows i { height: 12px; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border); }
.help-mock__marker {
  position: absolute;
  top: 8px; left: 8px;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 500; color: #fff;
  background: #0b57d0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  z-index: 2;
}
.help-mock__topbar .help-mock__marker { top: 50%; transform: translateY(-50%); }

/* Легенда к схеме */
.help-legend {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-legend__item { display: flex; align-items: flex-start; gap: 10px; }
.help-legend__num {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 500; color: #fff;
  background: #0b57d0;
  margin-top: 1px;
}
.help-legend__text { font-size: 13.5px; line-height: 1.6; color: var(--text-mute); }
.help-legend__text b { color: var(--text); font-weight: 500; }

/* ── Конвейер: последовательность шагов со стрелками ── */
.help-flow {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 6px 0 16px;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-app);
}
.help-flow__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.help-flow__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--help-accent-weak);
  color: var(--help-accent);
}
.help-flow__ico svg { width: 21px; height: 21px; }
.help-flow__label { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; }
.help-flow__arrow {
  flex: none;
  margin-top: 12px;
  display: grid; place-items: center;
  color: var(--text-light);
}
.help-flow__arrow svg { width: 16px; height: 16px; }
/* Подпись на стрелке (например «1 : 1») */
.help-flow__tag {
  flex: none;
  margin-top: 9px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--help-accent);
  background: var(--help-accent-weak);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Цветные плитки-иконки ── */
.help-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 6px 0 14px;
}
.help-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-card);
  transition: border-color .15s;
}
.help-tile:hover { border-color: var(--help-accent); }
.help-tile__ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--help-accent-weak);
  color: var(--help-accent);
  margin-bottom: 2px;
}
.help-tile__ico svg { width: 19px; height: 19px; }
.help-tile b { font-size: 13px; color: var(--text); font-weight: 500; }
.help-tile span { font-size: 12px; color: var(--text-mute); line-height: 1.45; }
/* Цветовые варианты плиток. Акцент — один на окно (см. --help-accent);
   свой цвет остаётся только у смысловых: предупреждение и успех. */
.help-tile__ico--green  { background: rgba(43, 191, 122, .15); color: var(--help-ok); }
.help-tile__ico--blue   { background: var(--help-accent-weak); color: var(--help-accent); }
.help-tile__ico--amber  { background: var(--help-warn-weak);   color: var(--help-warn); }
.help-tile__ico--indigo { background: var(--help-accent-weak); color: var(--help-accent); }
.help-tile__ico--rose   { background: rgba(226, 85, 85, .12);  color: #cf4b4b; }
.help-tile__ico--teal   { background: rgba(43, 191, 122, .15); color: var(--help-ok); }

/* ── Список статусов с цветными бейджами ── */
.help-status-list {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-status-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
}
.help-status {
  flex: none;
  display: inline-block;
  min-width: 132px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}
.help-status--ok     {
  background: var(--status-active-bg);
  color: var(--status-active-color);
}
.help-status--temp   {
  background: var(--status-spamblock-temp-bg);
  color: var(--status-spamblock-temp-color);
}
.help-status--perm   {
  background: var(--status-spamblock-perm-bg);
  color: var(--status-spamblock-perm-color);
}
.help-status--frozen {
  background: var(--status-frozen-bg);
  color: var(--status-frozen-color);
}
.help-status--dead   {
  background: var(--status-dead-bg);
  color: var(--status-dead-color);
}

/* ── Мини-карточка задачи с прогресс-баром ── */
.help-task {
  margin: 6px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.help-task__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.help-task__ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--help-accent-weak);
  color: var(--help-accent);
}
.help-task__ico svg { width: 17px; height: 17px; }
.help-task__name {
  font-size: 13.5px; font-weight: 500; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.help-task__badge {
  margin-left: auto; flex: none;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--help-accent-weak); color: var(--help-accent);
}
.help-task__bar { height: 8px; border-radius: 999px; background: var(--gray-bg); overflow: hidden; }
.help-task__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--help-accent); }
.help-task__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--text-mute); }
.help-task__stats b { color: var(--text); font-weight: 500; }
.help-task__stats .is-ok b { color: var(--help-ok); }
.help-task__stats .is-err b { color: var(--red); }

/* Сетка карточек разделов (Обзор) */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}
.help-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  transition: border-color .15s;
}
.help-card:hover { border-color: var(--help-accent); }
.help-card b { font-size: 13.5px; color: var(--text); font-weight: 500; }
.help-card span { font-size: 12px; color: var(--text-mute); line-height: 1.45; }

/* Подсказка-callout */
.help-tip {
  margin: 16px 0 4px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--help-accent);
  border-radius: 10px;
  background: var(--help-accent-weak);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-mute);
}
.help-tip b { color: var(--text); font-weight: 500; }
.help-tip--warn {
  border-left-color: var(--help-warn);
  background: var(--help-warn-weak);
}

/* Клавиша */
.help-kbd {
  display: inline-block;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  background: var(--gray-bg);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}


/* Адаптив */
@media (max-width: 1000px) {
  /* Таблица настроек в одну колонку: 150px под ключ на узком окне
     оставляют значению полосу в пару слов. */
  .help-kv__row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  /* Колонка тем ужимается раньше, чем уходит в ленту: на планшете
     252px навигации забирали у текста почти половину окна. */
  .help-modal__layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* На узких экранах навигация уходит в горизонтальную ленту сверху, контент — под ней. */
  .help-modal { height: min(88vh, 640px); }
  .help-modal__layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .help-modal__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 12px 12px 0;
  }
  .help-nav__group { flex-direction: row; gap: 6px; }
  .help-nav__group-title { display: none; }
  .help-nav__item { flex: none; width: auto; padding: 9px; }
  .help-nav__item span { display: none; }
  .help-nav__item svg { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .help-modal { width: calc(100vw - 20px) !important; }
  /* Компактнее графику на телефонах */
  .help-flow { padding: 12px 8px; }
  .help-flow__ico { width: 34px; height: 34px; }
  .help-flow__ico svg { width: 18px; height: 18px; }
  .help-flow__label { font-size: 11px; }
  .help-status { min-width: 110px; }
  .help-status-list li { flex-direction: column; gap: 3px; }
}

/* ╭──────────────────────────────────────────────────────────╮
   │  Что нового — журнал обновлений (модалка из топбара)      │
   ╰──────────────────────────────────────────────────────────╯ */
/* Окно «Обновления» — четвёртое в семье меню помощи (FAQ / Помощь /
   Поддержка / Обновления) и последнее, переехавшее на addw: белая карточка
   r28, Google Sans, заголовок 23px/500 без разделителя под ним, кнопки-
   пилюли 40px/r20. Своё у него только одно — рейл версий вместо рейла тем;
   вёрстка текста внутри берётся с общих .help-* (см. блок --help-accent),
   поэтому собственных двойников .wn-list / .wn-tip раздел больше не держит. */


/* Раскладка: рейл версий + контент — колонки и правило границы те же,
   что у .help-modal__layout. */
.wn-modal__layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* Рейл версий. Заливки у колонки нет — её границу рисует только линия
   справа, как в навигации Помощи и FAQ. */
.wn-modal__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 12px 20px 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.wn-rail__group-title {
  margin: 0 0 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
}
/* Пункт — пилюля Material, как .help-nav__item: подложка выделения
   скруглена по высоте строки (r18 при min-height 36px). Слева оставлена
   дорожка под точку таймлайна — она и отличает рейл версий от рейла тем. */
.wn-rail__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 1px;
  width: 100%;
  text-align: left;
  min-height: 36px;
  padding: 7px 12px 7px 26px;
  border: none;
  border-radius: 18px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-mute);
  transition: background var(--motion-state) var(--motion-ease),
              color var(--motion-state) var(--motion-ease);
}
/* Точка-маркер таймлайна */
.wn-rail__item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}
.wn-rail__item:hover { background: var(--bg-hover); color: var(--text); }
.wn-rail__item.is-active {
  background: var(--help-accent-weak);
  color: var(--help-accent);
}
.wn-rail__item.is-active::before {
  background: var(--help-accent);
  box-shadow: 0 0 0 3px var(--help-accent-weak);
}
.wn-rail__ver { font-size: 13.5px; font-weight: 400; line-height: 1.3; }
.wn-rail__item.is-active .wn-rail__ver { font-weight: 500; }
.wn-rail__date { grid-column: 1 / 2; font-size: 11.5px; color: var(--text-light); line-height: 1.3; }
.wn-rail__item.is-active .wn-rail__date { color: var(--help-accent); opacity: .85; }
/* Метка текущей версии — пилюля в языке .help-path. */
.wn-rail__tag {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.wn-rail__tag--now { background: var(--help-accent); color: var(--bg-card); }

/* Контент версий */
.wn-modal__content {
  padding: 2px 0 24px;
  overflow-y: auto;
  min-height: 0;
  /* Место под скроллбар резервируем, чтобы текст не «дёргался» при
     переключении версий разной длины (как в Помощи). */
  scrollbar-gutter: stable;
}

/* Шапка текущего релиза. Тёмного градиентного баннера здесь больше нет:
   ни одно окно меню помощи не держит цветных плашек во всю ширину, и
   рядом с ними он читался как вставка из другой программы. Выделение
   даёт мягкая заливка акцентом — тот же приём, что у .help-tip. */
.wn-hero {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--help-accent-soft);
}
.wn-hero__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--help-accent);
  background: var(--help-accent-weak);
}
.wn-hero__title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.wn-hero__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
}
.wn-hero__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-hero__chip {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-mute);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
/* Чип «Установлена у вас» — единственный акцентный: он отвечает на вопрос
   «а это про мою версию?», ради которого раздел и открывают. */
.wn-hero__chip--ok {
  color: var(--help-accent);
  background: var(--help-accent-weak);
  border-color: transparent;
  font-weight: 500;
}

/* ── Сводка релиза числами ────────────────────────────────────────────
   Первое, что видит человек после баннера: сколько всего изменилось.
   Без неё список из тридцати пунктов читается как стена. */
.wn-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.wn-sum__cell {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
/* Цифра — акцентом окна. Три разных цвета на три ячейки читались как
   светофор и спорили с единственным акцентом семьи. */
.wn-sum__num {
  display: block;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--help-accent);
}
.wn-sum__label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-mute);
}

/* ── Карточка нового модуля ───────────────────────────────────────────
   Одной строкой «Появилась модерация» новичок не поймёт ничего. Карточка
   отвечает на три вопроса сразу: что это, зачем и где включается.
   Рамка, скругление и подложка иконки — как у .help-tile, только строкой,
   а не колонкой: под описанием в две строки плитка не собирается. */
.wn-feat {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color var(--motion-state) var(--motion-ease);
}
.wn-feat:last-child { margin-bottom: 0; }
.wn-feat:hover { border-color: var(--help-accent); }
.wn-feat__ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--help-accent-weak);
  color: var(--help-accent);
}
.wn-feat__ico svg { width: 19px; height: 19px; }
.wn-feat__body { min-width: 0; }
.wn-feat__name {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.wn-feat__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-mute);
}
/* Путь до модуля рисует общий .help-path — своей пилюли раздел не заводит,
   иначе одна и та же крошка «где искать» выглядела бы в Помощи и в
   Обновлениях по-разному. Здесь только отбивка внутри карточки и
   разрешение на перенос: в Помощи пилюля стоит во всю ширину статьи, а
   тут колонка уже на иконку с отбивкой — и «Боковое меню → Модули →
   Снятие ограничений» вылезал за карточку на узком окне. */
.wn-feat .help-path {
  margin: 8px 0 0;
  max-width: 100%;
  flex-wrap: wrap;
}

/* ── Врезка для новичка ───────────────────────────────────────────────
   Журнал изменений бесполезен тому, кто открыл программу впервые: ему
   нужен не список правок, а маршрут. Коробка — .help-tip с иконкой. */
.wn-onboard {
  display: flex;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--help-accent);
  border-radius: 10px;
  background: var(--help-accent-weak);
}
.wn-onboard__ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--help-accent);
  color: var(--bg-card);
}
.wn-onboard__ico svg { width: 17px; height: 17px; }
.wn-onboard__body { min-width: 0; }
.wn-onboard__title {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.wn-onboard__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-mute);
}
.wn-onboard__text b { color: var(--text); font-weight: 500; }

/* Шапка обычного релиза */
.wn-release__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}
/* Шапка прошлой версии — та же типографика, что у заголовка статьи
   Помощи (.help-article__title), чтобы разделы читались одинаково. */
.wn-release__title { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--text); }
.wn-release__date { font-size: 13px; color: var(--text-light); }
.wn-release__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
}

/* Выделение внутри текста. В Помощи его красит `.help-article b`, но
   статьи здесь нет — правило повторяем на корне релиза, иначе общие
   .help-list / .help-tip достанутся журналу с браузерным bold. */
.wn-release b { color: var(--text); font-weight: 500; }

/* Группа изменений */
.wn-group { margin: 0 0 20px; }
.wn-group:last-child { margin-bottom: 0; }
.wn-group__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.wn-group__title { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }
/* Метка вида изменений — пилюля в языке .help-path: капслока и веса 700
   в addw нет нигде. Цвета берём из смысловой тройки семьи (ok / accent /
   warn), поэтому метки живут в обеих темах без отдельных правил. */
.wn-tag {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}
.wn-tag--new     { color: var(--help-ok); background: var(--help-ok-weak); }
.wn-tag--improve { color: var(--help-accent); background: var(--help-accent-weak); }
.wn-tag--fix     { color: var(--help-warn); background: var(--help-warn-weak); }

/* Приглушённая врезка поверх общего .help-tip — ею помечена самая ранняя
   версия, и акцентная заливка на этой строчке была бы не по делу. */
.wn-tip--muted {
  border-left-color: var(--border-strong);
  background: var(--bg-hover);
}

/* Футер */
.wn-modal__foot-link { color: var(--help-accent); font-weight: 500; text-decoration: none; }
.wn-modal__foot-link:hover { text-decoration: underline; }

/* Кнопки — «пилюли» addw (40px / r20 / Google Sans). html body +
   !important перебивают глобальный punch-list, который сажает
   .btn--primary/.btn--ghost на радиус 6px. */

/* Адаптив — те же три порога, что у Помощи. */
@media (max-width: 1000px) {
  /* Колонка версий ужимается раньше, чем уходит в ленту. */
  .wn-modal__layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* На узких экранах рейл уходит в горизонтальную ленту сверху. */
  .wn-modal__layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .wn-modal__rail {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 12px 12px 0;
  }
  .wn-rail__group-title { display: none; }
  /* В ленте у пункта остаётся только номер версии: дата и метка «Сейчас»
     растягивали пилюлю так, что в кадр влезали две версии из четырёх. */
  .wn-rail__item {
    flex: none;
    width: auto;
    padding: 7px 14px;
    grid-template-columns: auto;
  }
  .wn-rail__item::before { display: none; }
  .wn-rail__date,
  .wn-rail__tag { display: none; }
}
@media (max-width: 480px) {
  .wn-hero__title { font-size: 19px; }
  /* Сводка в два столбца: три ячейки по 120px в 320px не встают. */
  .wn-sum { grid-template-columns: 1fr 1fr; }
}

/* ╭──────────────────────────────────────────────────────────╮
   │  Лицензия — обновить / продлить / сменить ключ (топбар)   │
   ╰──────────────────────────────────────────────────────────╯ */
/* Главный цвет — фирменный зелёный #2563eb (CTA #3b82f6 → #2563eb).
   Акценты/выделения/фокус читают эти переменные, не легаси-синий --primary
   (DESIGN.md §8, Golden Rule #4). */
.lic-modal {
  --lic-accent: #2563eb;
  --lic-accent-strong: #3b82f6;
  --lic-accent-rgb: 37, 99, 235;
  --lic-soft: rgba(37, 99, 235, .10);
  max-width: calc(100vw - 28px);
  max-height: 88vh;
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lic-modal--renew   { width: 640px; }

/* Заголовок */
.lic-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 20px 14px 24px;
  border-bottom: 1px solid var(--border);
}
.lic-modal__head-text { min-width: 0; }
.lic-modal__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--text); }
.lic-modal__sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.45;
}
.lic-modal__close { flex: none; }

/* Тело */
.lic-modal__body {
  padding: 18px 24px 20px;
  overflow-y: auto;
  min-height: 0;
}

.lic-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }

/* Полоса текущей лицензии */
.lic-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 12.5px;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.lic-status__dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--lic-accent);
  box-shadow: 0 0 0 3px var(--lic-soft);
}
.lic-status__text b { color: var(--text); font-weight: 600; }
.lic-status__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lic-soft);
  color: var(--lic-accent);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Перекрёстные ссылки между разделами лицензии */
.lic-cross {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.lic-cross__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-mute);
  text-align: left;
  transition: background .15s, color .15s;
}
.lic-cross__link svg { width: 17px; height: 17px; flex: none; color: var(--text-light); }
.lic-cross__link b { color: var(--text); font-weight: 600; }
.lic-cross__link:hover { background: var(--bg-hover); color: var(--text); }
.lic-cross__link:hover svg { color: var(--lic-accent); }

/* Секции */
.lic-section__title { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--text); }

/* Продление — выбор срока */
.lic-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.lic-period {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.lic-period:hover { border-color: var(--border-strong); }
.lic-period:focus-within { border-color: var(--lic-accent); box-shadow: 0 0 0 3px var(--lic-soft); }
.lic-period__radio { position: absolute; opacity: 0; pointer-events: none; }
.lic-period.is-selected { border-color: var(--lic-accent); box-shadow: 0 0 0 1px var(--lic-accent) inset; background: var(--lic-soft); }
.lic-period__top { font-size: 12.5px; color: var(--text-mute); }
.lic-period__num { font-size: 20px; font-weight: 700; color: var(--text); }
.lic-period__price { font-size: 12.5px; font-weight: 600; color: var(--text); }
.lic-period__save {
  font-size: 10.5px; font-weight: 700;
  color: var(--lic-accent);
  background: var(--lic-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Продление — превью дат */
.lic-renew-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-app);
}
.lic-renew-preview__row { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lic-renew-preview__k { font-size: 11.5px; color: var(--text-mute); }
.lic-renew-preview__v { font-size: 14px; font-weight: 700; color: var(--text); }
.lic-renew-preview__row--new .lic-renew-preview__v { color: var(--lic-accent); }
.lic-renew-preview__arrow { width: 22px; height: 22px; flex: none; color: var(--text-light); }

/* Футер */
.lic-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.lic-modal__foot-hint { font-size: 12px; color: var(--text-mute); }
.lic-modal__foot-hint .lic-foot-total { color: var(--text); font-weight: 700; }
.lic-modal__foot-actions { display: flex; align-items: center; gap: 8px; }
.lic-modal .btn--primary { background: var(--lic-accent-strong); border-color: var(--lic-accent-strong); color: #fff; }
.lic-modal .btn--primary:hover { background: var(--lic-accent); border-color: var(--lic-accent); }
.lic-modal .btn--primary:disabled { background: var(--bg-app); border-color: var(--border); color: var(--text-mute); cursor: not-allowed; }

/* Адаптив */
@media (max-width: 720px) {
  .lic-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .lic-modal--upgrade,
  .lic-modal--renew,
  .lic-modal--key { width: calc(100vw - 20px) !important; }
  .lic-modal__body { padding: 16px 16px 18px; }
  .lic-modal__foot-hint { display: none; }
  .lic-renew-preview { flex-direction: column; align-items: stretch; gap: 8px; }
  .lic-renew-preview__arrow { transform: rotate(90deg); align-self: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЙ КАБИНЕТ (.accp-page) — раздел «Аккаунт» из меню профиля
   ───────────────────────────────────────────────────────────────
   Оболочка по тому же канону, что и экраны модулей (.srch-page выше
   по файлу): hero нет, белые карточки r16 без обводки и тени,
   Google Sans, акцент #0b57d0, вторичный текст 14/20 серым #444746,
   кнопки — пилюли 40px/r20, плитки выбора r12, поля r8/40px.

   Раньше раздел донашивал от «Настроек» hero-градиент, вкладки и
   карточки .set-*, а поверх них — свой набор синих переопределений
   (.view-account .btn--primary и прочее). На фоне остальной программы
   это читалось как чужой экран, поэтому от .view-settings раздел
   отвязан целиком, а старые .acc-* классы ушли вместе с ним. Сами
   «Настройки» переехали на тот же канон следом (.stgp-page ниже), и
   классов .set-* в программе больше нет.

   Токены не наследуются от .srch-page: класс на другом <main>, и
   каскад их сюда не донесёт. Значения те же — один экран, один язык.
   ═══════════════════════════════════════════════════════════════ */
.accp-page {
  --accp-ink: #1f1f1f;
  --accp-desc: #444746;
  --accp-outline: #c4c7c5;
  --accp-accent: #0b57d0;
  --accp-accent-soft: #d3e3fd;
  --accp-hover: #f1f3f4;
  --accp-danger: #b3261e;
  font-family: var(--app-font);
}
/* Отступы <main> раздают общие правила (edge-to-edge, 96px снизу под
   панель активных задач) — здесь только раскладка карточек. */
.accp-page:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Поверхность карточки ────────────────────────────────────── */
.accp-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
  background: #ffffff;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  color: var(--accp-ink);
}
/* Атрибут hidden обязан прятать карточку. Без этой строки `display: flex`
   выше побеждает браузерное `[hidden] { display: none }` — они одинаковой
   силы, и решает порядок в файле. Карточки этого канона скрываются по
   состоянию (нет связи, нет прав), и без правила они оставались бы
   на экране пустыми коробками. */
.accp-card[hidden] { display: none; }


.accp-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--accp-desc);
}
.accp-card__ico { display: inline-flex; flex: none; color: var(--accp-accent); }
.accp-card__ico svg { width: 18px; height: 18px; }
.accp-card__label { flex: 1 1 auto; min-width: 0; }

/* Состояние лицензии — точка и слово. Три положения: активна, скоро
   закончится, истекла. Цвет несёт только точка: цветной текст на
   белой карточке спорил бы с заголовком тарифа. */
.accp-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--accp-hover);
  font-size: 12px;
  line-height: 16px;
  color: var(--accp-desc);
  white-space: nowrap;
}
.accp-state__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1e8e3e;
  flex: none;
}
.accp-state[data-state="soon"] .accp-state__dot { background: #e8a33d; }
.accp-state[data-state="dead"] .accp-state__dot { background: var(--accp-danger); }

/* ── Тексты карточки ─────────────────────────────────────────── */
.accp-h {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--accp-ink);
}
.accp-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--accp-desc);
  max-width: 96ch;
}
.accp-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--accp-desc);
  max-width: 96ch;
}
.accp-error {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
  color: var(--accp-danger);
}
.accp-error:empty { min-height: 0; }

/* ── Кнопки: пилюли 40px/r20 ─────────────────────────────────── */
.accp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  background: var(--accp-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.accp-btn:hover:not([disabled]) { background: #0a4fc0; }
.accp-btn:active:not([disabled]) { background: #083f9b; }
.accp-btn:focus-visible { outline: 2px solid var(--accp-accent); outline-offset: 2px; }
.accp-btn[disabled] {
  background: rgba(31, 31, 31, 0.12);
  color: rgba(31, 31, 31, 0.38);
  cursor: default;
}
/* Обведённая (secondary) и текстовая (tertiary) — те же 40px/r20. */
.accp-btn--plain {
  background: #ffffff;
  border: 1px solid var(--accp-outline);
  color: var(--accp-accent);
}
.accp-btn--plain:hover:not([disabled]) { background: rgba(11, 87, 208, 0.08); }
.accp-btn--plain:active:not([disabled]) { background: rgba(11, 87, 208, 0.14); }
.accp-btn--text {
  background: transparent;
  color: var(--accp-accent);
  padding: 0 16px;
}
.accp-btn--text:hover:not([disabled]) { background: rgba(11, 87, 208, 0.08); }
.accp-btn--text:active:not([disabled]) { background: rgba(11, 87, 208, 0.14); }
.accp-btn--text[disabled] { background: transparent; color: rgba(31, 31, 31, 0.38); }
.accp-btn--danger {
  background: #ffffff;
  border: 1px solid rgba(179, 38, 30, 0.4);
  color: var(--accp-danger);
}
.accp-btn--danger:hover:not([disabled]) { background: rgba(179, 38, 30, 0.08); }
.accp-btn--danger:active:not([disabled]) { background: rgba(179, 38, 30, 0.14); }
.accp-btn--sm { height: 36px; min-height: 36px; padding: 0 16px; border-radius: 18px; }

.accp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.accp-actions__hint { font-size: 13px; line-height: 18px; color: var(--accp-desc); }
.accp-actions__hint[hidden] { display: none; }

/* ── Списки «ключ → значение» ────────────────────────────────── */
.accp-kv { margin: 16px 0 0; }
.accp-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #e3e3e3;
  font-size: 14px;
  line-height: 20px;
}
.accp-kv__row:last-child { border-bottom: 0; }
.accp-kv__row > dt { margin: 0; color: var(--accp-desc); flex: none; }
.accp-kv__row > dd { margin: 0; color: var(--accp-ink); text-align: right; overflow-wrap: anywhere; }
.accp-mono { font-family: var(--mono-font, ui-monospace, "SFMono-Regular", Consolas, monospace); }
/* Папки данных: ключ — путь моноширинным, значение — объяснение
   слева направо. Тут выравнивание по правому краю только мешало бы. */
.accp-kv--wide .accp-kv__row {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}
.accp-kv--wide .accp-kv__row > dt {
  width: 170px;
  flex: none;
  font-family: var(--mono-font, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: 13px;
  color: var(--accp-ink);
}
.accp-kv--wide .accp-kv__row > dd { text-align: left; color: var(--accp-desc); }
@media (max-width: 760px) {
  .accp-kv--wide .accp-kv__row { flex-direction: column; gap: 2px; }
  .accp-kv--wide .accp-kv__row > dt { width: auto; }
}

/* ── Форма профиля ───────────────────────────────────────────── */
.accp-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 18px;
}
.accp-avatar-row__pic {
  width: 72px; height: 72px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accp-accent);
  color: #ffffff;
  font: 500 27px/1 var(--app-font);
}
.accp-avatar-row__pic img { width: 100%; height: 100%; object-fit: cover; }
.accp-avatar-row__side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accp-avatar-row__title { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--accp-ink); }
.accp-avatar-row__hint { font-size: 13px; line-height: 18px; color: var(--accp-desc); }
.accp-avatar-row__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.accp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
  max-width: 720px;
}
.accp-form[hidden] { display: none; }   /* см. .accp-card[hidden] */
@media (max-width: 760px) {
  .accp-form { grid-template-columns: minmax(0, 1fr); }
}
.accp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.accp-field__label { font-size: 13px; line-height: 18px; color: var(--accp-desc); }
/* Поле — outlined r8 высотой 40px: та же геометрия, что у полей на
   странице запуска. Фокус утолщает обводку, а не подсвечивает тенью. */
.accp-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--accp-outline);
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--accp-ink);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.accp-input:hover { border-color: #747775; }
.accp-input:focus {
  outline: none;
  border-color: var(--accp-accent);
  box-shadow: inset 0 0 0 1px var(--accp-accent);
}
.accp-input::placeholder { color: #80868b; }

/* ── Плашка-пояснение ────────────────────────────────────────── */
.accp-callout[hidden] { display: none; }   /* см. .accp-card[hidden] */
.accp-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f1f5fd;
  font-size: 13px;
  line-height: 18px;
  color: var(--accp-desc);
}
.accp-callout[data-tone="warn"] { background: #fdf3e6; }
.accp-callout__ico { display: inline-flex; flex: none; margin-top: 1px; color: var(--accp-accent); }
.accp-callout[data-tone="warn"] .accp-callout__ico { color: #b45309; }
.accp-callout__ico svg { width: 18px; height: 18px; }
.accp-callout__text b { font-weight: 500; color: var(--accp-ink); }

/* ── Список людей и передач ──────────────────────────────────────
   Одна форма строки на два списка — участников команды и предложений
   передачи. Списки разные по смыслу, но одинаковые по устройству:
   слева кто/что, посередине состояние, справа действия. Заводить им
   два набора классов значило бы чинить отступы дважды.

   Разделители и ритм взяты у .accp-kv__row — рядом на карточке стоят
   именно такие строки, и своя геометрия читалась бы как чужой блок. */
.accp-team-list { margin-top: 12px; }
.accp-team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--accp-hover);
  font-size: 14px;
  line-height: 20px;
}
.accp-team-row:last-child { border-bottom: 0; }
.accp-team-row__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.accp-team-row__who b {
  font-weight: 500;
  color: var(--accp-ink);
  overflow-wrap: anywhere;
}
.accp-team-row__who span {
  font-size: 13px;
  line-height: 18px;
  color: var(--accp-desc);
  overflow-wrap: anywhere;
}
/* Роль без права её менять — просто слово, а не отключённый селект:
   отключённое поле выглядит как поломка, хотя ничего не сломано. */
.accp-team-row__role {
  flex: none;
  color: var(--accp-desc);
  white-space: nowrap;
}
.accp-team-row__act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* ── Окно сотрудника: вкладки и список доступов ──────────────────
   Живёт в модалке (.addw), а не на странице раздела, поэтому цвета
   берёт у модалки, а не у .accp-page. Переключатель наверху — общий
   .md-seg, здесь только его отступ: заводить второй сегментный
   переключатель ради одного окна незачем. */
.tu-tabs { margin: 0 0 16px; }
.tu-perms__lead { margin: 0 0 12px; }

.tu-group + .tu-group { margin-top: 18px; }
.tu-group__title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--text-2, #5f6368);
}
.tu-group__note {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-3, #80868b);
}
.tu-group__items { display: flex; flex-direction: column; gap: 2px; }

/* Строка галочки кликается целиком: попадать в квадратик 16px мышью —
   лишняя точность там, где выбирают два десятка пунктов подряд. */
.tu-perm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  cursor: pointer;
}
.tu-perm:hover { background: rgba(11, 87, 208, 0.06); }
.tu-perm input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; cursor: pointer; }
.tu-perm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tu-perm__title { font-size: 14px; line-height: 20px; }
.tu-perm__note { font-size: 12px; line-height: 16px; color: var(--text-3, #80868b); }

/* Список длинный — держим его в собственной прокрутке, чтобы окно не
   вырастало на весь экран и подвал с кнопками оставался на виду. */
.tu-perms { max-height: 46vh; overflow-y: auto; }

/* ── Тёмная тема ─────────────────────────────────────────────────
   Карточки по этому канону остаются белыми в обеих темах — так же,
   как экраны модулей (.srch-page). Поэтому здесь не «тёмный вариант
   раздела», а заплатки на два элемента, которые красит общая тёмная
   тема и которые от этого становятся тёмными пятнами на белом:
   поле ввода и кружок подсказки «?». Остальное читает собственные
   переменные .accp-page и от темы не зависит. */
html body.theme-dark .accp-page .accp-input {
  background: #ffffff;
  color: var(--accp-ink);
}
html body.theme-dark .accp-page .accp-input::placeholder { color: #80868b; }
/* Кружок «?» описываем один раз на обе темы: его светлый вид тоже
   собран из переменных темы, и в тёмной он расходился бы с соседним
   текстом карточки не только фоном, но и цветом знака. */
html body .accp-page .inv-help,
html body.theme-dark .accp-page .inv-help {
  background: #f4f6fb;
  border-color: #d3dae6;
  color: var(--accp-desc);
}
html body .accp-page .inv-help:hover,
html body .accp-page .inv-help:focus-visible,
html body.theme-dark .accp-page .inv-help:hover,
html body.theme-dark .accp-page .inv-help:focus-visible {
  background: var(--accp-hover);
  border-color: #747775;
  color: var(--accp-ink);
}







/* ── Панель раздела ─────────────────────────────────────────── */












/* ── Узкое окно ─────────────────────────────────────────────── */




/* v14 — переделанный глобальный поиск: сгруппированное выпадающее окно
   в топбаре. Окно живёт в .tp-topbar__search (вне .sidebar--v2), поэтому
   результаты оформляем здесь отдельно. Цвета — через переменные темы. */
html body .tp-topbar__search .sidebar-search-results,
html body.theme-dark .tp-topbar__search .sidebar-search-results {
  padding: 6px !important;
  border-radius: 12px !important;
}

html body .tp-topbar__search .sidebar-search-results .ss-group,
html body.theme-dark .tp-topbar__search .sidebar-search-results .ss-group {
  padding: 9px 10px 4px !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-light, #94a0b8) !important;
  user-select: none !important;
}
html body .tp-topbar__search .sidebar-search-results .ss-group:first-child,
html body.theme-dark .tp-topbar__search .sidebar-search-results .ss-group:first-child {
  padding-top: 2px !important;
}

html body .tp-topbar__search .sidebar-search-result,
html body.theme-dark .tp-topbar__search .sidebar-search-result {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-align: left !important;
  color: var(--text, #1f2740) !important;
  background: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
}

html body .tp-topbar__search .sidebar-search-result:hover,
html body.theme-dark .tp-topbar__search .sidebar-search-result:hover {
  background: var(--bg-hover, #f1f4fa) !important;
}
html body .tp-topbar__search .sidebar-search-result.is-active,
html body.theme-dark .tp-topbar__search .sidebar-search-result.is-active {
  background: var(--tp-accent-soft, rgba(37, 99, 235, 0.14)) !important;
}

html body .tp-topbar__search .sidebar-search-result__dot,
html body.theme-dark .tp-topbar__search .sidebar-search-result__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}

html body .tp-topbar__search .sidebar-search-result__body,
html body.theme-dark .tp-topbar__search .sidebar-search-result__body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .tp-topbar__search .sidebar-search-result__head,
html body.theme-dark .tp-topbar__search .sidebar-search-result__head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .tp-topbar__search .sidebar-search-result__title,
html body.theme-dark .tp-topbar__search .sidebar-search-result__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text, #1f2740) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
}

html body .tp-topbar__search .sidebar-search-result__kind,
html body.theme-dark .tp-topbar__search .sidebar-search-result__kind {
  flex: 0 0 auto !important;
  color: var(--text-light, #94a0b8) !important;
  background: var(--bg-hover, #f1f4fa) !important;
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
html body .tp-topbar__search .sidebar-search-result.is-active .sidebar-search-result__kind,
html body.theme-dark .tp-topbar__search .sidebar-search-result.is-active .sidebar-search-result__kind {
  background: var(--bg-card, #fff) !important;
}

html body .tp-topbar__search .sidebar-search-result__detail,
html body.theme-dark .tp-topbar__search .sidebar-search-result__detail {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text-light, #94a0b8) !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

html body .tp-topbar__search .sidebar-search-result mark,
html body.theme-dark .tp-topbar__search .sidebar-search-result mark {
  background: var(--tp-accent-soft, rgba(37, 99, 235, 0.18)) !important;
  color: var(--tp-accent, #2563eb) !important;
  padding: 0 1px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

html body .tp-topbar__search .sidebar-search-empty,
html body.theme-dark .tp-topbar__search .sidebar-search-empty {
  padding: 14px 10px !important;
  color: var(--text-light, #94a0b8) !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* ─── История поиска (недавние запросы, как в Gmail) ──────────── */
html body .tp-topbar__search .sidebar-search-result.ss-history,
html body.theme-dark .tp-topbar__search .sidebar-search-result.ss-history {
  grid-template-columns: 20px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 10px !important;
}

html body .tp-topbar__search .ss-history__ico,
html body.theme-dark .tp-topbar__search .ss-history__ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--text-light, #94a0b8) !important;
}
html body .tp-topbar__search .ss-history__ico svg,
html body.theme-dark .tp-topbar__search .ss-history__ico svg {
  width: 16px !important;
  height: 16px !important;
}

html body .tp-topbar__search .ss-history__del,
html body.theme-dark .tp-topbar__search .ss-history__del {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text-light, #94a0b8) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity .12s ease, background .12s ease, color .12s ease !important;
}
html body .tp-topbar__search .ss-history:hover .ss-history__del,
html body .tp-topbar__search .ss-history.is-active .ss-history__del,
html body.theme-dark .tp-topbar__search .ss-history:hover .ss-history__del,
html body.theme-dark .tp-topbar__search .ss-history.is-active .ss-history__del {
  opacity: 1 !important;
}
html body .tp-topbar__search .ss-history__del:hover,
html body.theme-dark .tp-topbar__search .ss-history__del:hover {
  background: var(--bg-hover, #e6ebf5) !important;
  color: var(--text, #1f2740) !important;
}
html body .tp-topbar__search .ss-history__del svg,
html body.theme-dark .tp-topbar__search .ss-history__del svg {
  width: 14px !important;
  height: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   «Действия» flow — unified site footers (DESIGN.md §7.8)

   The action modal and its subwindows (Изменить профиль,
   Конфиденциальность, Облачный пароль, Автоудаление, Сменить
   пароль, Добавить роль, Переместить в папку, подтверждение)
   shipped with the deprecated telegram-blue `.privacy-form__action`
   footer buttons. Restyle them in place to the site's unified
   `.btn` footer: gray ghost «Отмена» + green primary confirm
   (#3b82f6 → hover #2563eb). No HTML/JS changes — button ids are
   preserved. Scoped to the action-flow footer containers only so
   the out-of-scope filter modal keeps its own styling.
   ───────────────────────────────────────────────────────────── */
html body .tg-security-footer,
html body .role-modal__footer,
html body .folder-modal__footer,
html body #edit-privacy-form-modal .privacy-form__footer,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer,
html body.theme-dark .tg-security-footer,
html body.theme-dark .role-modal__footer,
html body.theme-dark .folder-modal__footer,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
  background: #ffffff !important;
}

/* Ghost cancel button — unified .btn geometry */
html body .tg-security-footer .privacy-form__action,
html body .role-modal__footer .privacy-form__action,
html body .folder-modal__footer .privacy-form__action,
html body #edit-privacy-form-modal .privacy-form__footer .privacy-form__action,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action,
html body.theme-dark .tg-security-footer .privacy-form__action,
html body.theme-dark .role-modal__footer .privacy-form__action,
html body.theme-dark .folder-modal__footer .privacy-form__action,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .privacy-form__action,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 9px 18px !important;
  border: 1px solid var(--border, #e3e8f0) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text, #1f2740) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease, filter 0.12s ease !important;
}
html body .tg-security-footer .privacy-form__action:hover,
html body .role-modal__footer .privacy-form__action:hover,
html body .folder-modal__footer .privacy-form__action:hover,
html body #edit-privacy-form-modal .privacy-form__footer .privacy-form__action:hover,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:hover,
html body.theme-dark .tg-security-footer .privacy-form__action:hover,
html body.theme-dark .role-modal__footer .privacy-form__action:hover,
html body.theme-dark .folder-modal__footer .privacy-form__action:hover,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .privacy-form__action:hover,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:hover {
  background: var(--bg-hover, #f1f4fa) !important;
  border-color: var(--border-strong, #d3dae6) !important;
  box-shadow: none !important;
}
html body .tg-security-footer .privacy-form__action:focus-visible,
html body .role-modal__footer .privacy-form__action:focus-visible,
html body .folder-modal__footer .privacy-form__action:focus-visible,
html body #edit-privacy-form-modal .privacy-form__footer .privacy-form__action:focus-visible,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:focus-visible {
  outline: none !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18) !important;
}

/* Green primary confirm button */
html body .tg-security-footer .privacy-form__action--primary,
html body .role-modal__footer .privacy-form__action--primary,
html body #edit-privacy-form-modal .privacy-form__footer .privacy-form__action--primary,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary,
html body.theme-dark .tg-security-footer .privacy-form__action--primary,
html body.theme-dark .role-modal__footer .privacy-form__action--primary,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .privacy-form__action--primary,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary {
  border: 1px solid #3b82f6 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body .tg-security-footer .privacy-form__action--primary:hover,
html body .role-modal__footer .privacy-form__action--primary:hover,
html body #edit-privacy-form-modal .privacy-form__footer .privacy-form__action--primary:hover,
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary:hover,
html body.theme-dark .tg-security-footer .privacy-form__action--primary:hover,
html body.theme-dark .role-modal__footer .privacy-form__action--primary:hover,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .privacy-form__action--primary:hover,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* Privacy form modal (Nimbus): green .btn--primary in footer */
html body #edit-privacy-form-modal .modal__foot .btn--primary,
html body.theme-dark #edit-privacy-form-modal .modal__foot .btn--primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
html body #edit-privacy-form-modal .modal__foot .btn--primary:hover,
html body.theme-dark #edit-privacy-form-modal .modal__foot .btn--primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  filter: none !important;
}

/* Destructive footer actions keep a red cue (Отключить пароль) */
html body #twofa-delete.privacy-form__action,
html body.theme-dark #twofa-delete.privacy-form__action {
  color: var(--red, #e25555) !important;
  border-color: var(--border, #e3e8f0) !important;
  background: transparent !important;
}
html body #twofa-delete.privacy-form__action:hover,
html body.theme-dark #twofa-delete.privacy-form__action:hover {
  background: rgba(226, 85, 85, 0.08) !important;
  border-color: rgba(226, 85, 85, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   «Облачный пароль» — #twofa-modal
   DESIGN.md §7.9 Actions-flow subwindow: 392px / 56px / 40px
   rows / 22px icons / 14px labels / footer with Отмена
   ═══════════════════════════════════════════════════════════ */

/* ── Panel (flex column so header / body / footer stack) ── */
html body #twofa-modal .tg-security-modal,
html body.theme-dark #twofa-modal .tg-security-modal {
  width: 392px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(92vh, 620px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2b2b2b !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
}

/* ── Header (title + close — back button is hidden via shared rule) ── */
html body #twofa-modal .tg-security-head,
html body.theme-dark #twofa-modal .tg-security-head {
  flex: 0 0 auto !important;
  min-height: 56px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px 8px 22px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
}

/* Title */
html body #twofa-modal .tg-security-head__title,
html body.theme-dark #twofa-modal .tg-security-head__title {
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #2b2b2b !important;
}

/* ── Body (scrolls if content overflows) ── */
html body #twofa-modal .tg-security-body,
html body.theme-dark #twofa-modal .tg-security-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow-y: auto !important;
  padding: 14px 18px 18px !important;
  background: #ffffff !important;
}

/* Description */
html body #twofa-modal .tg-security-text,
html body.theme-dark #twofa-modal .tg-security-text {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f8f8f !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* Action list */
html body #twofa-modal .tg-security-list,
html body.theme-dark #twofa-modal .tg-security-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Rows ── */
html body #twofa-modal .tg-security-row,
html body.theme-dark #twofa-modal .tg-security-row {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2b2b2b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.12s ease !important;
}

html body #twofa-modal .tg-security-row:hover,
html body.theme-dark #twofa-modal .tg-security-row:hover {
  background: #f7f7f7 !important;
}

/* Row icons */
html body #twofa-modal .tg-security-row__ico,
html body.theme-dark #twofa-modal .tg-security-row__ico {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8f8f8f !important;
  background: transparent !important;
}

html body #twofa-modal .tg-security-row__ico svg,
html body.theme-dark #twofa-modal .tg-security-row__ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7 !important;
}

/* Row label */
html body #twofa-modal .tg-security-row__label,
html body.theme-dark #twofa-modal .tg-security-row__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #2b2b2b !important;
}

/* Destructive row */
html body #twofa-modal .tg-security-row--danger,
html body.theme-dark #twofa-modal .tg-security-row--danger {
  color: #ef4444 !important;
}
html body #twofa-modal .tg-security-row--danger .tg-security-row__ico,
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__ico {
  color: #ef4444 !important;
}

/* ── Note ── */
html body #twofa-modal .tg-security-note,
html body.theme-dark #twofa-modal .tg-security-note {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f8f8f !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* ── Footer ── */
html body #twofa-modal .tg-security-footer,
html body.theme-dark #twofa-modal .tg-security-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border, #e3e8f0) !important;
  background: #ffffff !important;
}

/* Footer cancel button — standard .btn--ghost */
html body #twofa-modal .tg-security-footer .btn--ghost,
html body.theme-dark #twofa-modal .tg-security-footer .btn--ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border: 1px solid var(--border, #e3e8f0) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text, #1f2740) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html body #twofa-modal .tg-security-footer .btn--ghost:hover,
html body.theme-dark #twofa-modal .tg-security-footer .btn--ghost:hover {
  background: var(--bg-hover, #f1f4fa) !important;
  border-color: var(--border-strong, #d3dae6) !important;
}

/* ── «Добавить прокси»: единый слой с «Новый список пользователей» —
      см. секцию «ADD-PROXY + USERBASE-CREATE — один язык addw» в конце
      файла. ── */

/* ════════════════════════════════════════════════════════════════
   Переиспользуемая синяя акцентная схема «.accent-blue»
   ----------------------------------------------------------------
   Зелёная гамма подходит не всем модулям. Этот класс переводит
   модуль на синий акцент модуля «Клонер чатов» (#2563eb / 37,99,235).
   Использование: добавить class="… accent-blue" на корневой .view-*.

   Большинство элементов читают переменные акцента и перекрашиваются
   автоматически. Ниже — правила для мест, где цвет зашит жёстко
   (hero, CTA, контролы inv-*, индиго-кнопки рассылки). Селекторы
   привязаны к .accent-blue, поэтому к новому модулю достаточно
   добавить класс. Парные .view-XXX.accent-blue — там, где базовый
   .view-XXX задаёт зелёный/индиго и его нужно перебить по специфике.
   ════════════════════════════════════════════════════════════════ */
.accent-blue {
  /* Все семейства акцентных переменных → единый синий */
  --inv-accent: #2563eb;
  --inv-accent-rgb: 37, 99, 235;
  --accent: var(--inv-accent);
  --cln-accent: var(--inv-accent);
  --cln-accent-rgb: var(--inv-accent-rgb);
  --set-accent: var(--inv-accent);
  --set-accent-rgb: var(--inv-accent-rgb);
  --am-accent: var(--inv-accent);
  --am-accent-rgb: var(--inv-accent-rgb);
  --ub-accent: var(--inv-accent);
  --ub-accent-rgb: var(--inv-accent-rgb);
  --px-accent: var(--inv-accent);
  --px-accent-rgb: var(--inv-accent-rgb);
  --primary: var(--inv-accent);
  --primary-soft: rgba(37, 99, 235, 0.10);
}

/* ── CTA «Запустить задачу» — одна синяя пилюля на все модули ──────── */
.accent-blue .prs-cta__start:not([disabled]) {
  background: var(--inv-accent);
  border-color: var(--inv-accent);
  color: #fff;
  box-shadow: none;
}
.accent-blue .prs-cta__start:hover:not([disabled]) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(var(--inv-accent-rgb), 0.28);
}
/* Тёмная тема: CTA синим градиентом (как у клонера) */
body.theme-dark .accent-blue .prs-cta__start:not([disabled]) {
  background: linear-gradient(120deg, #4f83ff, #66a9ff);
  border-color: #4f83ff;
  box-shadow: 0 12px 24px -12px rgba(79, 131, 255, 0.55);
}
body.theme-dark .accent-blue .prs-cta__start:hover:not([disabled]) {
  background: linear-gradient(120deg, #5a8eff, #73b2ff);
  border-color: #5a8eff;
}

/* ── Контролы на inv-* классах (Инвайтер, Рассылка, Накрутка,
      Автоответчик): базовые стили нейтральные, поэтому красим явно.
      prs-* контролы читают --accent и синеют сами. ─────────────────── */
.accent-blue .inv-presets button:hover {
  border-color: rgba(var(--inv-accent-rgb), 0.40);
  color: var(--inv-accent);
}
.accent-blue .inv-presets button.is-active {
  background: rgba(var(--inv-accent-rgb), 0.12);
  border-color: rgba(var(--inv-accent-rgb), 0.40);
  color: var(--inv-accent);
}
/* Активный сегмент — синий текст (в тёмной теме нейтрально-белый) */
body:not(.theme-dark) .accent-blue .inv-segmented button.is-active,
body:not(.theme-dark) .accent-blue .inv-segmented--lg button.is-active .inv-seg__txt {
  color: var(--inv-accent);
}


/* ── Рассылка / Накрутка / Автоответчик (view-bc): индиго-кнопки
      compose и primary → синие (CTA уже покрыта правилом prs-cta) ──── */
.view-bc.accent-blue .bc-btn--message,
.view-bc.accent-blue .bc-btn--links,
.view-bc.accent-blue .bc-btn--media,
.view-bc.accent-blue .btn--primary:not(.prs-cta__start) {
  background: var(--inv-accent);
  box-shadow: 0 4px 14px -6px rgba(var(--inv-accent-rgb), 0.42);
}
.view-bc.accent-blue .bc-btn--message:hover,
.view-bc.accent-blue .bc-btn--links:hover,
.view-bc.accent-blue .bc-btn--media:hover,
.view-bc.accent-blue .btn--primary:not(.prs-cta__start):hover {
  box-shadow: 0 6px 16px -6px rgba(var(--inv-accent-rgb), 0.5);
}

/* ════════════════════════════════════════════════════════════════════════
   UI punch-list fixes — userbase modals + broadcast content compaction
   ════════════════════════════════════════════════════════════════════════ */

/* «Добавить базу» (create modal): footer buttons were forced to 38px by the
   shared `.newbase-modal .btn { min-height: 38px }`. Drop it so they match
   the «Добавить прокси» footer buttons (~33px, padding-driven).
   Правило на классе семьи — оно накрывает оба окна заведения базы
   (#ub-create-modal и #sb-add-modal), а не одно из них. */
html body .newbase-modal .modal__foot .btn,
html body.theme-dark .newbase-modal .modal__foot .btn {
  min-height: 0 !important;
  height: auto !important;
}

/* «База пользователей» (detail modal): bring title + footer buttons down to
   the standard modal scale (title 16px like .modal__title, buttons like the
   proxy modal: ~33px tall, 13px text, 9px radius — were 38px/14px/6px). */

/* «Рассылка по ЛС» → «Контент рассылки»: tighten the 4 source cards so the
   block reads more compact (smaller padding, icons, gaps and buttons). */

html body .btn--primary,
html body .btn--ghost {
  border-radius: 6px !important;
}

/* =========================================================================
   GMAIL-STYLE PASS — top menu + sidebar redesigned after the Gmail reference.
   Appended last so it wins by source order over the earlier topbar/sidebar
   layers. Tokens (--tp-accent, --tp-side-*) are reused, so it tracks both the
   light and dark themes automatically.
   ========================================================================= */

/* ---- Top menu: wider centre column, Gmail-like proportions.
        Desktop only, so the 900/640px mobile grids above keep winning. ---- */
@media (min-width: 901px) {
  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 720px) minmax(200px, 1fr) !important;
    gap: 16px !important;
    padding: 8px !important;
  }
}

/* ---- Search: large rounded pill with a leading search glyph and a
        trailing tune/filter glyph, exactly like Gmail ---- */
html body .tp-topbar__search,
html body.theme-dark .tp-topbar__search {
  height: 40px !important;
  grid-template-columns: 26px minmax(0, 1fr) 22px !important;
  gap: 12px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  transition: background-color .14s ease, box-shadow .14s ease !important;
}
html body .tp-topbar__search:hover,
html body.theme-dark .tp-topbar__search:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
html body .tp-topbar__search:focus-within,
html body.theme-dark .tp-topbar__search:focus-within {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28) !important;
}
html body .tp-topbar__search:focus-within svg,
html body.theme-dark .tp-topbar__search:focus-within svg,
html body .tp-topbar__search:focus-within .tp-topbar__search-tune,
html body.theme-dark .tp-topbar__search:focus-within .tp-topbar__search-tune,
html body .tp-topbar__search:focus-within .tp-topbar__search-tune svg,
html body.theme-dark .tp-topbar__search:focus-within .tp-topbar__search-tune svg {
  color: #444746 !important;
  stroke: currentColor !important;
}
html body .tp-topbar__search:focus-within input,
html body.theme-dark .tp-topbar__search:focus-within input {
  color: #202124 !important;
}
html body .tp-topbar__search:focus-within input::placeholder,
html body.theme-dark .tp-topbar__search:focus-within input::placeholder {
  color: #5f6368 !important;
}

/* ====================== SIDEBAR — Gmail nav rails ======================== */

/* Nav container: a little side padding so the pills float off the edges,
   but the active fill still reaches the left edge of that padded area. */
html body .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark .sidebar.sidebar--v2 .sidebar__nav {
  padding: 6px 8px 12px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0 !important;
}
html body .sidebar.sidebar--v2 .nav-section + .nav-section,
html body.theme-dark .sidebar.sidebar--v2 .nav-section + .nav-section {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* Rows become full pills, rounded on the right — the defining Gmail shape. */
html body .sidebar.sidebar--v2 .nav-item,
html body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  gap: 18px !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 1px 0 !important;
  padding: 6px 18px 6px 22px !important;
  border-radius: 0 19px 19px 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: background-color .12s ease, color .12s ease !important;
}

/* Hover: soft grey pill. Active: tinted accent pill with a heavier label. */
html body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]) {
  background: var(--tp-side-bg-hover, rgba(31,39,64,0.06)) !important;
  color: var(--tp-side-text-strong, #1f2740) !important;
}
html body .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  background: var(--tp-accent-soft, rgba(37,99,235,0.14)) !important;
  color: var(--tp-accent, #2563eb) !important;
}
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-weight: 700 !important;
}

/* Counts: Gmail shows a bare bold number on the right, not a coloured pill. */
html body .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__badge {
  margin-left: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  color: var(--tp-accent, #2563eb) !important;
}

/* The night-mode toggle keeps its switch on the right, pill shape and all. */
html body .sidebar.sidebar--v2 .nav-item--toggle .nav-item__switch {
  margin-left: auto !important;
}


/* =========================================================================
   GMAIL-STYLE PASS v2 — unified light chrome.
   Goal (per reference): top bar has NO fill (blends with the page), the
   search starts exactly where the content table starts, the sidebar melts
   into the same background, nothing shifts on hover (outline only), and
   font/icon sizes echo Gmail. Layout rules are theme-agnostic; colour rules
   are scoped to the light theme so the existing dark theme keeps working.
   Content rail maths: sidebar 256px; .main has no horizontal padding.
   ========================================================================= */

/* ---------- TOP BAR: no fill, blends with the page ---------- */
html body:not(.theme-dark) .tp-topbar {
  background: var(--bg-app, #f7f8fb) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: #3c4043 !important;
}

/* Rail-aligned columns: left block == sidebar width, search begins at the
   table's left edge, actions hug the right. Desktop only so the mobile
   topbar grids defined earlier keep winning. */
@media (min-width: 901px) {
  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    grid-template-columns: 256px minmax(0, 1fr) auto !important;
    gap: 0 !important;
    padding: 8px 0 !important;
  }
  html body .tp-topbar__left,
  html body.theme-dark .tp-topbar__left {
    padding-left: 22px !important;
  }
  html body .tp-topbar__search,
  html body.theme-dark .tp-topbar__search {
    justify-self: start !important;
    width: min(720px, 100%) !important;
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .tp-topbar__actions,
  html body.theme-dark .tp-topbar__actions {
    padding-right: 20px !important;
    gap: 6px !important;
  }
}

/* Brand sits on the light bar now: dark wordmark, coloured emblem stays. */
html body:not(.theme-dark) .tp-topbar__brand,
html body:not(.theme-dark) .tp-topbar__brand-text {
  color: #3c4043 !important;
}
/* Action + menu icons: Gmail-sized round hit areas, neutral grey glyphs. */
html body .tp-topbar__menu,
html body .tp-topbar__icon,
html body.theme-dark .tp-topbar__menu,
html body.theme-dark .tp-topbar__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
}
html body .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__menu svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.1 !important;
}
html body .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.5 !important;
}
html body:not(.theme-dark) .tp-topbar__menu,
html body:not(.theme-dark) .tp-topbar__icon {
  color: #444746 !important;
}
html body:not(.theme-dark) .tp-topbar__menu:hover,
html body:not(.theme-dark) .tp-topbar__icon:hover,
html body:not(.theme-dark) .tp-topbar__icon.is-open,
html body:not(.theme-dark) .tp-topbar__icon.is-active,
html body:not(.theme-dark) .tp-topbar__icon[aria-expanded="true"] {
  background: rgba(60, 64, 67, 0.12) !important;
  color: #202124 !important;
}

/* Search field: Gmail grey-blue pill → white on focus. */
html body:not(.theme-dark) .tp-topbar__search {
  height: 48px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #eaeef6 !important;
  color: #3c4043 !important;
  box-shadow: none !important;
}
html body:not(.theme-dark) .tp-topbar__search:hover {
  background: #e4e9f2 !important;
}
html body:not(.theme-dark) .tp-topbar__search:focus-within {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18) !important;
}
html body:not(.theme-dark) .tp-topbar__search svg,
html body:not(.theme-dark) .tp-topbar__search-tune,
html body:not(.theme-dark) .tp-topbar__search-tune svg {
  color: #444746 !important;
  stroke: currentColor !important;
}
html body:not(.theme-dark) .tp-topbar__search input,
html body:not(.theme-dark) .tp-topbar__search-tune {
  color: #3c4043 !important;
}
html body:not(.theme-dark) .tp-topbar__search input {
  font-size: 15px !important;
}
html body:not(.theme-dark) .tp-topbar__search input::placeholder {
  color: #5f6368 !important;
}

/* ---------- SIDEBAR: melts into the page background ---------- */
html body:not(.theme-dark) .sidebar.sidebar--v2 {
  background: var(--bg-app, #f7f8fb) !important;
  background-image: none !important;
  border-right: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
}

/* Drop the in-sidebar search row — search now lives in the top bar (Gmail). */
html body .sidebar.sidebar--v2 .sidebar__topbar {
  display: none !important;
}
html body .sidebar.sidebar--v2 .sidebar__nav {
  padding-top: 10px !important;
}

/* Nav rows: Gmail metrics. Stable box (1px transparent border on every
   state) so hovering only paints an outline — the row never shifts. */
html body .sidebar.sidebar--v2 .nav-item,
html body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active {
  gap: 14px !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 1px 0 !important;
  padding: 0 16px 0 24px !important;
  border: 1px solid transparent !important;
  border-radius: 0 20px 20px 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transform: none !important;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease !important;
}

/* Hover = outline only, no fill, no movement. */
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: transparent !important;
  border-color: rgba(60, 64, 67, 0.28) !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
}
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--tp-side-text-strong, #fff) !important;
}

/* Active = filled accent pill (no outline), label a touch heavier. The
   :hover variants outrank the plain hover rule so an active row keeps its
   fill instead of flipping to an outline when the pointer is over it. */
html body .sidebar.sidebar--v2 .nav-item.is-active,
html body .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body .sidebar.sidebar--v2 .nav-item.is-active:focus-visible,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active:focus-visible {
  background: var(--tp-accent-soft, rgba(37, 99, 235, 0.14)) !important;
  border-color: transparent !important;
  color: var(--tp-accent, #2563eb) !important;
}
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-weight: 600 !important;
}

/* Icons ~Gmail size: 20px glyph, neutral until hover/active. */
html body .sidebar.sidebar--v2 .nav-item__icon,
html body .sidebar.sidebar--v2 .nav-item__icon[data-tone],
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  opacity: 0.85 !important;
}
html body .sidebar.sidebar--v2 .nav-item__icon svg,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.6 !important;
}
html body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]) .nav-item__icon,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  opacity: 1 !important;
}

/* ---- Decisive colour layer (light) ----------------------------------------
   Earlier passes (v11.2) hard-pin every label/icon to #000 and the active
   fill to a grey, both at (0,5,2). These rules match or beat that specificity
   and sit last in the file, so the Gmail palette actually lands: neutral grey
   resting state, accent-blue active row with a tinted pill. ------------------ */

/* Resting label/icon — Gmail greys instead of pure black. */
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item__label,
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label {
  color: #202124 !important;
}
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon {
  color: #5f6368 !important;
}

/* Active row — tinted blue pill, accent-blue label + icon. */
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active {
  background: #e6eefc !important;
  border-color: transparent !important;
}
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  color: #2563eb !important;
  font-weight: 600 !important;
}
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon {
  color: #2563eb !important;
}

/* =========================================================================
   PROXY MODULE — Gmail layout pass.
   Category tabs sit on their own row inside the table card (Primary /
   Promotions / Social analog), below the action toolbar and above the list.
   Sticky-header offset is reset to 0 so the first data row is not hidden.
   ========================================================================= */

/* The proxy table scrolls inside .px-flat__scroll, so the thead must stick to
   the top of THAT box (0), not 52px — the old offset hid the first row.
   Accounts now uses the same flat layout (no sticky search row), so it shares
   the 0 offset — otherwise the sticky header is clamped 52px down, showing an
   empty row above it. */
html body .view-proxy,
html body.theme-dark .view-proxy,
html body .view-am,
html body.theme-dark .view-am {
  --am-sticky-search-offset: 0px;
}

/* ---- Action toolbar row: 48px, Gmail reference tokens ---- */
html body .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-gmail-bar {
  --px-gmail-icon: #444746;
  --px-gmail-muted: #5f6368;
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
}
html body .view-proxy .am-table-shell > .px-gmail-bar,
html body .view-proxy .am-table-shell > .picker-gmail-bar.px-gmail-bar,
html body.theme-dark .view-proxy .am-table-shell > .px-gmail-bar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ---- Gmail-style checkbox + caret menu ---- */
html body .view-proxy .px-check-menu,
html body.theme-dark .view-proxy .px-check-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
  margin-right: 0 !important;
}
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color .12s ease !important;
}
html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--px-gmail-icon, #444746) !important;
  border-radius: 2px !important;
  background: #fff !important;
  cursor: pointer !important;
  flex: none !important;
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: border-color .12s ease, background-color .12s ease !important;
}
html body .view-proxy .px-check-menu__check:checked,
html body.theme-dark .view-proxy .px-check-menu__check:checked {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
}
html body .view-proxy .px-check-menu__check:checked::after,
html body.theme-dark .view-proxy .px-check-menu__check:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 6px !important;
  border: solid #fff !important;
  border-width: 0 1.75px 1.75px 0 !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  box-sizing: border-box !important;
}
html body .view-proxy .px-check-menu__check:indeterminate,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
}
html body .view-proxy .px-check-menu__check:indeterminate::after,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 1.75px !important;
  background: #fff !important;
  border: 0 !important;
  transform: translate(-50%, -50%) !important;
}
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 32px !important;
  margin: 0 0 0 -8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  cursor: pointer !important;
  transition: background-color .12s ease !important;
}
html body .view-proxy .px-check-menu__caret svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}
html body .view-proxy .px-check-menu__control:not(.is-active) .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__control:not(.is-active) .px-check-menu__check-hit:hover {
  border-radius: 4px !important;
}
html body .view-proxy .px-check-menu__control:not(.is-active) .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__control:not(.is-active) .px-check-menu__caret:hover {
  color: var(--px-gmail-icon, #444746) !important;
  border-radius: 4px !important;
}
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit {
  border-radius: 4px 0 0 4px !important;
}
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  border-radius: 0 4px 4px 0 !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body.theme-dark .view-proxy .px-check-menu__check {
  border-color: #9aa0a6 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Toolbar icons — Gmail #444746, 40px hit, 20px glyph */
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action,
html body .view-proxy .px-gmail-bar #px-refresh,
html body .view-proxy .px-gmail-bar #px-more-toggle,
html body .view-proxy .px-check-menu__caret {
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action:hover,
html body .view-proxy .px-gmail-bar #px-refresh:hover,
html body .view-proxy .px-gmail-bar #px-more-toggle:hover {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  filter: none !important;
  box-shadow: none !important;
}
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action svg path {
  fill: none !important;
  stroke-width: 1.5px !important;
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
}
html body .view-proxy .px-gmail-bar #px-refresh svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-proxy .px-gmail-bar #px-refresh svg path {
  fill: currentColor !important;
  stroke: none !important;
}
/* Троеточие «Ещё» — тот же глиф/кегль, что #am-more-toggle (22px, заливка). */
html body .view-proxy .px-gmail-bar #px-more-toggle svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-proxy .px-gmail-bar #px-more-toggle svg circle,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg circle {
  fill: currentColor !important;
  stroke: none !important;
}

/* Proxy toolbar: swap base actions for selection actions (same pattern as Accounts). */
html body .view-proxy .px-gmail-bar .px-sel-action,
html body .view-proxy .px-gmail-bar .am-sel-action,
html body.theme-dark .view-proxy .px-gmail-bar .px-sel-action,
html body.theme-dark .view-proxy .px-gmail-bar .am-sel-action {
  display: none !important;
}
html body .view-proxy .px-gmail-bar.has-selection .px-base-action,
html body.theme-dark .view-proxy .px-gmail-bar.has-selection .px-base-action {
  display: none !important;
}
html body .view-proxy .px-gmail-bar.has-selection .px-sel-action,
html body .view-proxy .px-gmail-bar.has-selection .am-sel-action,
html body.theme-dark .view-proxy .px-gmail-bar.has-selection .px-sel-action,
html body.theme-dark .view-proxy .px-gmail-bar.has-selection .am-sel-action {
  display: inline-flex !important;
}
html body .view-proxy .px-gmail-bar.has-selection #px-more-menu,
html body.theme-dark .view-proxy .px-gmail-bar.has-selection #px-more-menu {
  display: none !important;
}
html body .view-proxy .px-gmail-bar .px-sel-action,
html body .view-proxy .px-gmail-bar .am-sel-action,
html body .view-proxy .px-gmail-bar #px-sel-check,
html body .view-proxy .px-gmail-bar #px-sel-copy,
html body .view-proxy .px-gmail-bar #px-sel-delete {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-proxy .px-gmail-bar .px-sel-action:hover,
html body .view-proxy .px-gmail-bar .am-sel-action:hover,
html body .view-proxy .px-gmail-bar #px-sel-check:hover,
html body .view-proxy .px-gmail-bar #px-sel-copy:hover,
html body .view-proxy .px-gmail-bar #px-sel-delete:hover {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-proxy .px-gmail-bar .am-sel-action--danger:hover,
html body .view-proxy .px-gmail-bar #px-sel-delete:hover {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #dc2626 !important;
}
html body .view-proxy .px-gmail-bar .am-sel-action--danger:hover svg,
html body .view-proxy .px-gmail-bar #px-sel-delete:hover svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}
html body .view-proxy .px-gmail-bar .px-sel-action svg,
html body .view-proxy .px-gmail-bar .am-sel-action svg,
html body .view-proxy .px-gmail-bar #px-sel-check svg,
html body .view-proxy .px-gmail-bar #px-sel-copy svg,
html body .view-proxy .px-gmail-bar #px-sel-delete svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
/* Proxy selection icons — parity with Accounts gmail-bar stroke icons. */
html body .view-proxy .px-gmail-bar .px-selection-icon {
  width: 20px !important;
  height: 20px !important;
}
html body .view-proxy .px-gmail-bar .px-selection-icon,
html body .view-proxy .px-gmail-bar .px-selection-icon *:not([stroke="none"]) {
  stroke-width: 1.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* «Проверить» — единственный залитый значок этого ряда: он взят из строки
   таблицы (autorenew), а там значок заливают, а не обводят. Общий штриховой
   закон бара (fill: none, stroke: currentColor) его бы стёр, поэтому у него
   своя строка — ровно так же, как у «Обновить список» ниже. Цвет при этом
   остаётся нейтральным (--px-gmail-icon), как у копирования и удаления:
   синий, которым значок горит в строке таблицы, в бар не едет.

   Заливку приходится называть и на самом контуре: общий закон бара гасит
   fill не только на svg, но и отдельной строкой на path
   (.picker-gmail-bar__action svg path), а она бьёт наследование — без этой
   строки значок выходит пустым. */
html body .view-proxy .px-gmail-bar #px-sel-check svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-sel-check svg,
html body .view-proxy .px-gmail-bar #px-sel-check svg path,
html body.theme-dark .view-proxy .px-gmail-bar #px-sel-check svg path {
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}

html body.theme-dark .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle,
html body.theme-dark .view-proxy .px-check-menu__caret {
  --px-gmail-icon: #444746;
  --px-gmail-muted: #5f6368;
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
  color: #444746 !important;
}
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action svg {
  color: #444746 !important;
  stroke: #444746 !important;
  fill: none !important;
}
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh svg {
  color: #444746 !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg {
  width: 22px !important;
  height: 22px !important;
  color: #444746 !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Pagination — Gmail-like text + chevrons */
html body .view-proxy .px-gmail-bar .picker-pagination {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 168px !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__info {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  padding-right: 8px !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__nav {
  flex: 0 0 64px !important;
  width: 64px !important;
  gap: 0 !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-proxy .px-gmail-bar .picker-gmail-bar__actions {
  gap: 0px !important;
}
/* Позицию задаёт positionCheckMenuPop() от .px-check-menu__control (общий
   канон .am-gmail-bar .am-check-menu ниже по файлу) — здесь только оболочка. */
html body .view-proxy .px-check-menu__pop,
html body.theme-dark .view-proxy .px-check-menu__pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 640 !important;
  min-width: 196px !important;
  padding: 6px 0 !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 8px !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.18) !important;
  box-sizing: border-box !important;
}
html body .view-proxy .px-check-menu__item,
html body.theme-dark .view-proxy .px-check-menu__item {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #202124 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body .view-proxy .px-check-menu__item:hover,
html body.theme-dark .view-proxy .px-check-menu__item:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}
html body .view-proxy .px-check-menu__range,
html body.theme-dark .view-proxy .px-check-menu__range {
  position: relative !important;
}

/* ---- Toolbar «Ещё» (три точки) ---- */
html body .view-proxy .px-more-menu,
html body.theme-dark .view-proxy .px-more-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}
/* Окно «…» (#px-more-pop) — канон am-actions-menu (см. style.css) +
   позиционирование positionToolbarPopover; локальной оболочки больше нет. */

/* ---- Category tabs (Gmail-style row above the list) ---- */
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex: none !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-card, #fff) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  /* Только горизонтальная прокрутка — иначе колесо крутит вкладки по вертикали
     (см. канон .app-table ниже). */
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  color: #444746 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row::-webkit-scrollbar {
  display: none !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: none !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #444746 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background-color .007s ease, color .007s ease, border-color .007s ease !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:hover:not(.is-active) {
  color: #444746 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active {
  color: var(--tp-accent, #2563eb) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  z-index: 1 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -1px !important;
  height: 3px !important;
  background: var(--tp-accent, #2563eb) !important;
  border-radius: 3px 3px 0 0 !important;
  z-index: 2 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  width: 20px !important;
  height: 20px !important;
  flex: none !important;
  display: block !important;
  margin-right: 16px !important;
  opacity: 1 !important;
  color: #444746 !important;
  stroke: #444746 !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
  opacity: 1 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__label {
  white-space: nowrap !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__label {
  color: var(--tp-accent, #2563eb) !important;
  font-weight: 500 !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row {
  background: var(--bg-card, #1e1e1e) !important;
}

/* Верхняя линия шапки — из канонического контракта .app-table (как в
   аккаунтах); локальные border-top:0 сняты. */
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:hover:not(.is-active) {
  color: #444746 !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active {
  color: var(--tp-accent, #2563eb) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active::after {
  background: var(--tp-accent, #2563eb) !important;
  left: 12px !important;
  right: 12px !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
}
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__label {
  color: var(--tp-accent, #2563eb) !important;
}

/* ---- Lead column alignment: toolbar checkbox = tab icon = table checkboxes ---- */
html body .view-proxy .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell {
  --px-check-align: 15.5px;
  --px-check-hit: 32px;
  --px-check-size: 21px;
}
html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit {
  justify-content: center !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row {
  padding: 0 !important;
}
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:first-child,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:first-child {
  padding-left: var(--px-check-align) !important;
  padding-right: 20px !important;
}
html body .view-proxy .px-flat__table th.px-flat__check-cell,
html body .view-proxy .px-flat__table td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table th.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table td.px-flat__check-cell {
  text-align: left !important;
  padding-left: var(--px-check-align) !important;
  padding-right: 0 !important;
}

/* =========================================================================
   SIDEBAR / CHROME polish v3 — match the Gmail reference more closely.
   • hover highlight = soft filled pill (no hard border that gets cut off at
     the rail edge), still metric-stable so nothing jumps;
   • menu items get the reference's icon→label rhythm;
   • burger + line icons carry a touch more weight, like the reference.
   ========================================================================= */

/* Hover = Gmail soft fill (replaces the earlier border-outline). Same pill
   geometry as the active row, so hover→active never shifts. */
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: rgba(60, 64, 67, 0.08) !important;
  border-color: transparent !important;
  color: #202124 !important;
}
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: transparent !important;
  color: var(--tp-side-text-strong, #fff) !important;
}

/* Active row keeps its blue fill even while hovered (outranks the hover fill). */
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body:not(.theme-dark) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible {
  background: #e6eefc !important;
}
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active:focus-visible {
  background: var(--tp-accent-soft, rgba(92, 166, 255, 0.16)) !important;
}

/* Item rhythm: reference icon→label gap + comfortable row height. */
html body .sidebar.sidebar--v2 .nav-item,
html body .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark .sidebar.sidebar--v2 .nav-item {
  gap: 18px !important;
  min-height: 40px !important;
  padding: 0 16px 0 24px !important;
}

/* Icons + burger: a hair more weight so they read like the reference. */
html body .sidebar.sidebar--v2 .nav-item__icon svg,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon svg {
  stroke-width: 1.75 !important;
}
html body .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__menu svg {
  stroke-width: 2.1 !important;
}
html body .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__icon svg {
  stroke-width: 1.5 !important;
}

/* ---- Proxy checkboxes: Gmail reference states ---- */
html body .view-proxy .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell {
  --px-gmail-check-bg: #fff;
  --px-gmail-check-active-bg: #1a73e8;
  --px-gmail-check-border: #5f6368;
  --px-gmail-check-border-active: #1a73e8;
  --px-gmail-check-mark: #fff;
  --px-gmail-check-hover: rgba(60, 64, 67, 0.14);
  --px-gmail-check-hover-strong: rgba(60, 64, 67, 0.2);
  --px-gmail-combo-hover: #f1f3f4;
  --px-gmail-combo-active: #e8eaed;
  --px-gmail-combo-active-hover: #dadce0;
  --px-gmail-combo-outline: #c4c7c5;
}
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control {
  height: 32px !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .12s ease, box-shadow .12s ease !important;
}
html body .view-proxy .px-check-menu__control:hover,
html body.theme-dark .view-proxy .px-check-menu__control:hover {
  background: var(--px-gmail-combo-hover) !important;
  box-shadow: inset 0 0 0 1px var(--px-gmail-combo-outline) !important;
}
html body .view-proxy .px-check-menu__control.is-check-on,
html body .view-proxy .px-check-menu__control.is-check-mixed,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open) {
  background: var(--px-gmail-combo-active) !important;
  box-shadow: inset 0 0 0 1px var(--px-gmail-combo-outline) !important;
}
html body .view-proxy .px-check-menu__control.is-check-on:hover,
html body .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover {
  background: var(--px-gmail-combo-active-hover) !important;
}
html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover,
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body .view-proxy .px-check-menu__caret:hover,
html body .view-proxy .px-check-menu__caret.is-open,
html body.theme-dark .view-proxy .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__caret.is-open {
  background: transparent !important;
}
html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--px-check-size, 14px) !important;
  height: var(--px-check-size, 14px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--px-gmail-check-border) !important;
  border-radius: 2px !important;
  background: var(--px-gmail-check-bg) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: none !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
html body .view-proxy .px-check-menu__check:hover,
html body.theme-dark .view-proxy .px-check-menu__check:hover {
  border-color: var(--px-gmail-check-border) !important;
  box-shadow: none !important;
}
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover {
  border-color: var(--px-gmail-check-border) !important;
  box-shadow: 0 0 0 10px var(--px-gmail-check-hover) !important;
}
html body .view-proxy .px-check-menu__check:focus-visible,
html body.theme-dark .view-proxy .px-check-menu__check:focus-visible,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(26, 115, 232, 0.35) !important;
  outline-offset: 3px !important;
}
html body .view-proxy .px-check-menu__check:checked,
html body .view-proxy .px-check-menu__check:indeterminate,
html body.theme-dark .view-proxy .px-check-menu__check:checked,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate {
  background: var(--px-gmail-check-active-bg) !important;
  border-color: var(--px-gmail-check-border-active) !important;
}
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover {
  box-shadow: 0 0 0 10px var(--px-gmail-check-hover-strong) !important;
}
html body .view-proxy .px-check-menu__check:checked::after,
html body.theme-dark .view-proxy .px-check-menu__check:checked::after,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked::after,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 6px !important;
  border: solid var(--px-gmail-check-mark) !important;
  border-width: 0 1.75px 1.75px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  box-sizing: border-box !important;
}
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate)::after,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate)::after {
  content: none !important;
  display: none !important;
}
html body .view-proxy .px-check-menu__check:indeterminate::after,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate::after,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate::after,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 1.75px !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: var(--px-gmail-check-mark) !important;
  transform: translate(-50%, -50%) !important;
}

/* No text caret / selection in proxy toolbar + table rows */
html body .view-proxy .px-gmail-bar,
html body .view-proxy .px-gmail-bar .picker-pagination,
html body .view-proxy .px-gmail-bar .picker-pagination__info,
html body .view-proxy .px-check-menu,
html body .view-proxy .px-check-menu__control,
html body .view-proxy .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__info,
html body.theme-dark .view-proxy .px-check-menu,
html body.theme-dark .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__caret {
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body .view-proxy .px-gmail-bar .picker-pagination__info,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__info {
  cursor: default !important;
}
html body.is-proxy-screen .view-proxy .px-flat__table tbody td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr {
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check {
  cursor: pointer !important;
  caret-color: transparent !important;
}

/* Proxy table: flat surface without outer gray card border */
html body .view-proxy .am-table-card.px-table--flat,
html body.theme-dark .view-proxy .am-table-card.px-table--flat,
html body.is-proxy-screen .view-proxy .am-table-card,
html body.theme-dark.is-proxy-screen .view-proxy .am-table-card,
html body.is-proxy-screen .view-proxy .px-table--flat,
html body.theme-dark.is-proxy-screen .view-proxy .px-table--flat {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* v13.3 — sidebar width + edge-to-edge main content */
html body .main,
html body.theme-dark .main {
  padding: 0px 0px 96px !important;
}

@media (min-width: 901px) {
  html body .app,
  html body.theme-dark .app {
    grid-template-columns: 256px minmax(0, 1fr) !important;
  }

  html body .sidebar.sidebar--v2,
  html body.theme-dark .sidebar.sidebar--v2 {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex: 0 0 256px !important;
  }

  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    grid-template-columns: 256px minmax(0, 1fr) auto !important;
  }
}

/* v13.4 — search rail aligned with table left edge (edge-to-edge main) */
@media (min-width: 901px) {
  html body .tp-topbar,
  html body.theme-dark .tp-topbar {
    padding: 8px 0 !important;
  }

  html body .tp-topbar__search,
  html body.theme-dark .tp-topbar__search {
    justify-self: start !important;
    width: min(720px, 100%) !important;
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.is-proxy-screen .view-proxy,
  html body.theme-dark.is-proxy-screen .view-proxy,
  html body .view-proxy,
  html body.theme-dark .view-proxy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.is-proxy-screen .view-proxy,
  html body.theme-dark.is-proxy-screen .view-proxy {
    padding-top: 0 !important;
    padding-bottom: 96px !important;
  }
}

html body .tp-topbar__search > svg,
html body.theme-dark .tp-topbar__search > svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.1 !important;
}

/* v13.5 — unified neutral icon color (#444746) */

html body .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-gmail-bar,
html body .view-proxy .px-gmail-bar .picker-gmail-bar__action,
html body .view-proxy .px-gmail-bar #px-refresh,
html body .view-proxy .px-gmail-bar #px-more-toggle,
html body .view-proxy .px-check-menu__caret,
html body .view-proxy .px-gmail-bar .picker-pagination__btn,
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__btn {
  --px-gmail-icon: #444746 !important;
  color: #444746 !important;
}

html body .view-proxy .px-gmail-bar .picker-gmail-bar__action svg,
html body .view-proxy .px-gmail-bar #px-refresh svg,
html body .view-proxy .px-gmail-bar #px-more-toggle svg,
html body .view-proxy .px-gmail-bar .picker-pagination__btn svg,
html body .view-proxy .px-check-menu__caret svg,
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__btn svg,
html body.theme-dark .view-proxy .px-check-menu__caret svg,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico {
  color: #444746 !important;
  stroke: #444746 !important;
}

html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
}

html body .view-proxy .px-gmail-bar #px-refresh svg,
html body .view-proxy .px-gmail-bar #px-more-toggle svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg,
html body .view-proxy .px-check-menu__caret svg,
html body.theme-dark .view-proxy .px-check-menu__caret svg {
  fill: currentColor !important;
  stroke: none !important;
}

html body:not(.theme-dark) .tp-topbar__search > svg,
html body:not(.theme-dark) .tp-topbar__search .tp-topbar__search-tune svg {
  color: #444746 !important;
  stroke: #444746 !important;
}

html body .view-proxy .px-tabs.px-tabs--row,
html body.theme-dark .view-proxy .px-tabs.px-tabs--row {
  color: #444746 !important;
}

/* v13.6 — proxy tabs: active blue chrome + checkbox/icon rail lock */
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active {
  color: var(--tp-accent, #2563eb) !important;
}

html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__label,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__label,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__label,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__label {
  color: var(--tp-accent, #2563eb) !important;
}

html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__ico,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
}

html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active::after,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active::after,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active::after,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active::after {
  left: 12px !important;
  right: 12px !important;
}

html body .view-proxy .px-flat__table th:nth-child(1),
html body .view-proxy .px-flat__table td:nth-child(1),
html body .view-proxy .px-flat__table th.px-flat__check-cell,
html body .view-proxy .px-flat__table td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table th:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table th.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table td.px-flat__check-cell {
  text-align: left !important;
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 0 !important;
}

/* ---- Material baseline checkboxes (#444746): proxy toolbar, proxy table, accounts ---- */
html body .view-proxy .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell,
html body .view-am,
html body.theme-dark .view-am {
  --tp-checkbox-size: 21px;
  --tp-checkbox-color: #444746;
  --tp-checkbox-hover: rgba(68, 71, 70, 0.08);
  --tp-checkbox-hover-strong: rgba(68, 71, 70, 0.12);
  --tp-checkbox-svg-empty: url("img/checkbox-empty.svg");
  --tp-checkbox-svg-checked: url("img/checkbox-checked.svg");
  --tp-checkbox-svg-indeterminate: url("img/checkbox-indeterminate.svg");
}

html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body .view-am .acc-table input[type="checkbox"],
html body.theme-dark .view-am .acc-table input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  min-width: var(--tp-checkbox-size, 21px) !important;
  min-height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--tp-checkbox-svg-empty) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: none !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: none !important;
}

/* ---- Checkbox hover isolation + stable layout (v13.8) ---- */
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control,
html body .view-proxy .px-check-menu__control:hover,
html body.theme-dark .view-proxy .px-check-menu__control:hover,
html body .view-proxy .px-check-menu__control.is-check-on,
html body .view-proxy .px-check-menu__control.is-check-mixed,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body .view-proxy .px-check-menu__control.is-check-on:hover,
html body .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Коробку хит-зоны задаёт канон мастера в конце файла: там ширина идёт от
   --px-check-hit, а высота — от роста связки. Здешняя копия считала ВЫСОТУ от
   того же токена и после его ужатия до 26px делала связку прокси на 6px ниже
   обводки. */

html body .view-proxy .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08)) !important;
  border-radius: 4px !important;
}

html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret {
  flex: none !important;
}

html body .view-proxy .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__caret:hover {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08)) !important;
  border-radius: 4px !important;
  color: var(--px-gmail-icon, #444746) !important;
}

html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit {
  background: transparent !important;
  border-radius: 4px !important;
}

html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08)) !important;
  border-radius: 4px !important;
}

html body .view-proxy .px-check-menu__check:hover,
html body.theme-dark .view-proxy .px-check-menu__check:hover,
html body .view-proxy .px-check-menu__check:checked:hover,
html body.theme-dark .view-proxy .px-check-menu__check:checked:hover,
html body .view-proxy .px-check-menu__check:indeterminate:hover,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate:hover {
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
}

html body .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate):hover {
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-check-menu__check:checked:hover,
html body.theme-dark .view-proxy .px-check-menu__check:checked:hover {
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-check-menu__check:indeterminate:hover,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate:hover {
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body .view-am .acc-table input[type="checkbox"],
html body.theme-dark .view-am .acc-table input[type="checkbox"] {
  transition: none !important;
  transform: none !important;
  outline-offset: 0 !important;
}

html body .view-proxy .px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__check-cell,
html body .view-am .acc-table .col-check,
html body.theme-dark .view-am .acc-table .col-check,
html body .view-am .acc-table thead th:first-child,
html body .view-am .acc-table tbody td:first-child,
html body.theme-dark .view-am .acc-table thead th:first-child,
html body.theme-dark .view-am .acc-table tbody td:first-child {
  overflow: visible !important;
}
html body .view-proxy .px-check-menu__check::after,
html body.theme-dark .view-proxy .px-check-menu__check::after,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]::after,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]::after,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]::after,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]::after,
html body .view-am .acc-table input[type="checkbox"]::after,
html body.theme-dark .view-am .acc-table input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

html body .view-proxy .px-check-menu__check:checked,
html body.theme-dark .view-proxy .px-check-menu__check:checked,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body .view-am .acc-table input[type="checkbox"]:checked,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:checked {
  background-color: transparent !important;
  background-image: var(--tp-checkbox-svg-checked) !important;
  border: 0 !important;
}

html body .view-proxy .px-check-menu__check:indeterminate,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body .view-am .acc-table input[type="checkbox"]:indeterminate,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:indeterminate {
  background-color: transparent !important;
  background-image: var(--tp-checkbox-svg-indeterminate) !important;
  border: 0 !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body .view-am .acc-table input[type="checkbox"]:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:hover {
  border: 0 !important;
  box-shadow: 0 0 0 10px var(--tp-checkbox-hover) !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body .view-am .acc-table input[type="checkbox"]:checked:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:checked:hover,
html body .view-am .acc-table input[type="checkbox"]:indeterminate:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:indeterminate:hover {
  box-shadow: 0 0 0 10px var(--tp-checkbox-hover-strong) !important;
}

html body .view-proxy .px-check-menu__check:focus-visible,
html body.theme-dark .view-proxy .px-check-menu__check:focus-visible,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:focus-visible,
html body .view-am .acc-table input[type="checkbox"]:focus-visible,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35) !important;
  outline-offset: 3px !important;
}

/* ---- Table checkbox hover: single hit area, no row bleed (v13.9) ---- */
html body .view-proxy .px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__check-cell,
html body .view-am .acc-table thead th.col-check,
html body .view-am .acc-table tbody td.col-check,
html body .view-am .acc-table thead th[data-col="select"],
html body .view-am .acc-table tbody td[data-col="select"],
html body.theme-dark .view-am .acc-table thead th.col-check,
html body.theme-dark .view-am .acc-table tbody td.col-check,
html body.theme-dark .view-am .acc-table thead th[data-col="select"],
html body.theme-dark .view-am .acc-table tbody td[data-col="select"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body .view-am .acc-table input[type="checkbox"],
html body.theme-dark .view-am .acc-table input[type="checkbox"] {
  position: relative !important;
  z-index: 1 !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked,
html body .view-am .acc-table input[type="checkbox"]:checked,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body .view-am .acc-table input[type="checkbox"]:indeterminate,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:indeterminate {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check {
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
}

html body .view-proxy .px-check-menu__check:checked,
html body.theme-dark .view-proxy .px-check-menu__check:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-check-menu__check:indeterminate,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]::before,
html body .view-am .acc-table input[type="checkbox"]::before,
html body.theme-dark .view-am .acc-table input[type="checkbox"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--px-check-hit, 32px) !important;
  height: var(--px-check-hit, 32px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 4px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover::before,
html body .view-am .acc-table input[type="checkbox"]:hover::before,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:hover::before {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:hover,
html body .view-am .acc-table input[type="checkbox"]:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:hover,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body .view-am .acc-table input[type="checkbox"]:checked:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:checked:hover,
html body .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body .view-am .acc-table input[type="checkbox"]:indeterminate:hover,
html body.theme-dark .view-am .acc-table input[type="checkbox"]:indeterminate:hover {
  box-shadow: none !important;
  border: 0 !important;
}

html body.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__check-cell input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  min-width: var(--tp-checkbox-size, 21px) !important;
  min-height: var(--tp-checkbox-size, 21px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
}

html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret {
  margin-left: -8px !important;
}

/* ---- Accounts table: Gmail muted checkbox + hover stroke (v14.0) ---- */
html body .view-am,
html body.theme-dark .view-am {
  --tp-checkbox-color-muted: #babec0;
  --tp-checkbox-hover-ring: rgba(60, 64, 67, 0.08);
  --tp-checkbox-svg-empty-muted: url("img/checkbox-empty-muted.svg");
}

html body.theme-dark .view-am,
html body.theme-dark .view-am {
  --tp-checkbox-color-muted: #babec0;
  --tp-checkbox-hover-ring: rgba(255, 255, 255, 0.08);
}

html body .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate),
html body.theme-dark .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color-muted, #babec0) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty-muted) !important;
  mask-image: var(--tp-checkbox-svg-empty-muted) !important;
  transition: background-color .12s ease, -webkit-mask-image .12s ease, mask-image .12s ease !important;
}

html body .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover {
  background-color: var(--tp-checkbox-color-muted, #babec0) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty-muted) !important;
  mask-image: var(--tp-checkbox-svg-empty-muted) !important;
}

html body .view-am .acc-table tbody input.row-check::before,
html body.theme-dark .view-am .acc-table tbody input.row-check::before {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  transition: background-color .12s ease !important;
}

html body .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover::before,
html body.theme-dark .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover::before {
  background: var(--tp-checkbox-hover-ring, rgba(60, 64, 67, 0.08)) !important;
}

html body .view-am .acc-table tbody input.row-check:checked::before,
html body.theme-dark .view-am .acc-table tbody input.row-check:checked::before,
html body .view-am .acc-table tbody input.row-check:indeterminate::before,
html body.theme-dark .view-am .acc-table tbody input.row-check:indeterminate::before {
  background: var(--tp-checkbox-hover-ring, rgba(60, 64, 67, 0.08)) !important;
}

html body .view-am .acc-table tbody input.row-check:checked:hover::before,
html body.theme-dark .view-am .acc-table tbody input.row-check:checked:hover::before,
html body .view-am .acc-table tbody input.row-check:indeterminate:hover::before,
html body.theme-dark .view-am .acc-table tbody input.row-check:indeterminate:hover::before {
  background: var(--tp-checkbox-hover-strong, rgba(68, 71, 70, 0.12)) !important;
}

/* ---- Proxy table: muted checkbox + circular icon-like hover (v14.1) ----
   Этап 6: токены выровнены с аккаунтами (#view-accounts) — непроставленный
   чекбокс строки #babec1 (--tp-row-checkbox-color), кольцо hover 8% в обеих
   темах, как --tp-checkbox-hover у аккаунтов. */
html body .view-proxy .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell {
  --tp-checkbox-color-muted: #bfc3c7;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-svg-empty-muted: url("img/checkbox-empty-muted.svg");
  --tp-checkbox-hover-ring-proxy: rgba(68, 71, 70, 0.08);
}

html body.theme-dark .view-proxy .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell {
  --tp-checkbox-color-muted: #80868b;
  --tp-checkbox-hover-ring-proxy: rgba(68, 71, 70, 0.08);
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color-muted, #bfc3c7) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty-muted) !important;
  mask-image: var(--tp-checkbox-svg-empty-muted) !important;
  transition: background-color .12s ease, -webkit-mask-image .12s ease, mask-image .12s ease !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover {
  background: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::before {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  transition: background-color .12s ease !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover::before {
  background: var(--tp-checkbox-hover-ring-proxy, rgba(68, 71, 70, 0.06)) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

/* (v14.2 удалён: чекбокса в шапке прокси больше нет — мастер только в
   тулбаре, как в аккаунтах.) */

/* ---- Toolbar master checkbox #px-toolbar-check: keep visible on hover (v14.3) ---- */
html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body .view-proxy #px-toolbar-check.px-check-menu__check,
html body.theme-dark .view-proxy #px-toolbar-check.px-check-menu__check,
html body .view-proxy .px-check-menu__check:hover,
html body.theme-dark .view-proxy .px-check-menu__check:hover,
html body .view-proxy #px-toolbar-check.px-check-menu__check:hover,
html body.theme-dark .view-proxy #px-toolbar-check.px-check-menu__check:hover {
  background: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate),
html body.theme-dark .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate),
html body .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-proxy .px-check-menu__check:not(:checked):not(:indeterminate):hover {
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-check-menu__check:checked,
html body.theme-dark .view-proxy .px-check-menu__check:checked,
html body .view-proxy .px-check-menu__check:checked:hover,
html body.theme-dark .view-proxy .px-check-menu__check:checked:hover {
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-check-menu__check:indeterminate,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate,
html body .view-proxy .px-check-menu__check:indeterminate:hover,
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate:hover {
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

/* (v14.4 toolbar hover rings removed — superseded by the consolidated
   toolbar select-all hover block at the end of this file.) */

/* ---- Proxy tabs: active item hover background (v14.5) ---- */
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active:hover,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}

html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active:hover,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Table row checkboxes: match toolbar/header master (v14.6) ---- */
html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"],
html body .view-am .acc-table tbody input.row-check,
html body.theme-dark .view-am .acc-table tbody input.row-check {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  accent-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate),
html body.theme-dark .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color-muted, #bfc3c7) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked,
html body .view-am .acc-table tbody input.row-check:checked,
html body.theme-dark .view-am .acc-table tbody input.row-check:checked {
  background: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body .view-am .acc-table tbody input.row-check:indeterminate,
html body.theme-dark .view-am .acc-table tbody input.row-check:indeterminate {
  background: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover,
html body.theme-dark .view-am .acc-table tbody input.row-check:not(:checked):not(:indeterminate):hover {
  background: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color-muted, #bfc3c7) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover,
html body .view-am .acc-table tbody input.row-check:checked:hover,
html body.theme-dark .view-am .acc-table tbody input.row-check:checked:hover {
  background: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover,
html body .view-am .acc-table tbody input.row-check:indeterminate:hover,
html body.theme-dark .view-am .acc-table tbody input.row-check:indeterminate:hover {
  background: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::after,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::after,
html body.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::after,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]::after,
html body .view-am .acc-table tbody input.row-check::after,
html body.theme-dark .view-am .acc-table tbody input.row-check::after {
  content: none !important;
  display: none !important;
}

/* ---- Proxy row selection colour token (v14.7) ----
   The actual fill rules live in the consolidated selection block above; only
   the token is defined here. */
html body .view-proxy,
html body.theme-dark .view-proxy,
html body.is-proxy-screen .view-proxy,
html body.theme-dark.is-proxy-screen .view-proxy {
  --px-row-selected-bg: #c3dbff;
}

/* ---- Proxy check column: remove white line under checkbox (v14.8) ---- */
html body .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1),
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) {
  line-height: 0 !important;
  font-size: 0 !important;
  vertical-align: middle !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"] {
  display: block !important;
  margin: 0 !important;
  line-height: 0 !important;
  vertical-align: top !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before {
  z-index: 0 !important;
}

/* ---- Proxy check column: no selected-row artifacts (v14.9) ---- */
html body .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row:hover,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover {
  box-shadow: none !important;
}

/* NOTE: a selected row must NOT touch the divider — the base
   `td { border-bottom: 1px solid #edeeef }` is the single, always-present row
   separator. Selection only changes the background (see v14.7 above). */

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1),
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) {
  position: relative !important;
  isolation: isolate !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1)::before {
  content: "" !important;
  position: absolute !important;
  left: calc(var(--px-check-align, 15.5px) + (var(--tp-checkbox-size, 21px) / 2)) !important;
  top: 50% !important;
  /* 36px — как кольцо чекбоксов строк аккаунтов (v14.0). */
  width: 36px !important;
  height: 36px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell:has(input[type="checkbox"]:hover)::before,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell:has(input[type="checkbox"]:hover)::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell:has(input[type="checkbox"]:hover)::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell:has(input[type="checkbox"]:hover)::before,
html body .view-proxy .px-flat__table tbody td:nth-child(1):has(input[type="checkbox"]:hover)::before,
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1):has(input[type="checkbox"]:hover)::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1):has(input[type="checkbox"]:hover)::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1):has(input[type="checkbox"]:hover)::before {
  background: var(--tp-checkbox-hover-ring-proxy, rgba(68, 71, 70, 0.06)) !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"] {
  position: relative !important;
  z-index: 1 !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"]::before,
html body .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}

/* ---- Proxy toolbar check/caret hover rings: no double overlay (v14.10) ---- */
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control,
html body .view-proxy .px-check-menu__control:hover,
html body.theme-dark .view-proxy .px-check-menu__control:hover,
html body .view-proxy .px-check-menu__control.is-check-on,
html body .view-proxy .px-check-menu__control.is-check-mixed,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body .view-proxy .px-check-menu__control.is-active,
html body.theme-dark .view-proxy .px-check-menu__control.is-active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover,
html body .view-proxy .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__caret:hover,
html body .view-proxy .px-check-menu__caret.is-open,
html body.theme-dark .view-proxy .px-check-menu__caret.is-open,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* (The hover-backdrop geometry for the check-hit/caret ::before lives in the
   consolidated v15.0 block below — only the transparent base states above are
   kept here.) */

html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body .view-proxy .px-check-menu__caret svg,
html body.theme-dark .view-proxy .px-check-menu__caret svg {
  position: relative !important;
  z-index: 1 !important;
}

/* ========================================================================
   v15.0 — proxy table layout cleanup
   1) Toolbar select-all checkbox + caret: matching rounded-RECT hovers
      (no round halo, no overlap, no stray focus outline).
   2) Header master + row checkboxes (2nd onward): round hover ring only.
   3) Selected rows: continuous, uniform row divider (incl. checkbox column).
   4) Active tab underline: flush to the top of the table (kill white pocket).
   ===================================================================== */

/* 1) Toolbar: tuck the caret close to the checkbox (small gap), while still
      leaving enough room that the two hover rectangles never overlap. */
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret {
  margin-left: -5px !important;
}

/* 1) A single, OUTER rounded-rectangle hover backdrop per element — no inner
      ring, no circle. Inset inside each box (and combined with the -5px caret
      tuck above) so the checkbox and caret rectangles never collide.
      Supersedes the v14.10 circular ::before rings. */
html body .view-proxy .px-check-menu__check-hit::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit::before,
html body .view-proxy .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__caret::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(100% - 6px) !important;
  height: 28px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: background-color .12s ease !important;
}

html body .view-proxy .px-check-menu__check-hit:hover::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover::before,
html body .view-proxy .px-check-menu__caret:hover::before,
html body.theme-dark .view-proxy .px-check-menu__caret:hover::before,
html body .view-proxy .px-check-menu__caret.is-open::before,
html body.theme-dark .view-proxy .px-check-menu__caret.is-open::before,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

/* 1) No square focus outline stacking on top of the rounded-rect hover — reuse
      the same rounded backdrop for keyboard focus instead. */
html body .view-proxy .px-check-menu__check:focus-visible,
html body.theme-dark .view-proxy .px-check-menu__check:focus-visible {
  outline: 0 !important;
}
html body .view-proxy .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

/* 2) Header master + row checkboxes keep a circular hover ring (via the 40px
      round ::before rings defined earlier) — make sure no square box-shadow
      halo bleeds back in. */
html body .view-proxy .px-flat__table thead .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark .view-proxy .px-flat__table thead .px-flat__check-cell input[type="checkbox"]:hover,
html body .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover,
html body.theme-dark .view-proxy .px-flat__table tbody .px-flat__check-cell input[type="checkbox"]:hover {
  box-shadow: none !important;
}

/* 3) Selection does NOT manage the divider at all — the base
      `td { border-bottom: 1px solid #edeeef }` is the single row separator and
      stays put under the selection fill (collapsed borders paint over the cell
      background). See v14.7 for the selection background. */

/* TABLE SKELETON - canonical tabs contract.
   Proxy is the reference layout. New list tables should reuse
   `.am-table-shell > .px-tabs.px-tabs--row` with `.px-tab` parts and inherit
   these metrics instead of adding module-local tab geometry. */
html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-tab-height: 56px;
  --app-table-tab-width: 250px;
  --app-table-tab-pad-x: 20px;
  --app-table-tab-text: #444746;
  --app-table-tab-active: var(--tp-accent, #2563eb);
  --app-table-tab-hover-bg: rgba(60, 64, 67, 0.06);
  --app-table-tab-icon-size: 20px;
  --app-table-tab-icon-gap: 16px;
  --app-table-tab-underline-x: 12px;
  --app-table-tab-underline-bottom: -1px;
  --app-table-tab-underline-height: 3px;
  --app-table-tab-underline-radius: 3px 3px 0 0;
}

html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-tab-hover-bg: rgba(255, 255, 255, 0.06);
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row),
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex: none !important;
  width: 100% !important;
  height: var(--app-table-tab-height) !important;
  min-height: var(--app-table-tab-height) !important;
  max-height: var(--app-table-tab-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-card, #fff) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  /* Ряд листается только по горизонтали. overflow-y обязателен явно: по
     спецификации при overflow-x: auto соседняя ось из visible вычисляется в
     auto, и ряд становится вертикальным скроллером — таб на 2px выше ряда
     (58px против 56px, см. --app-table-tab-height) даёт 2px прокрутки, и
     колесо мыши над вкладками дёргало их вверх-вниз вместо страницы.
     Свисающие 2px — прозрачный border-bottom, синяя линия активного таба
     лежит выше среза, поэтому clip ничего не съедает. */
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  color: var(--app-table-tab-text) !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row)::-webkit-scrollbar {
  display: none !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  flex: none !important;
  width: var(--app-table-tab-width) !important;
  min-width: var(--app-table-tab-width) !important;
  max-width: var(--app-table-tab-width) !important;
  height: var(--app-table-tab-height) !important;
  min-height: var(--app-table-tab-height) !important;
  max-height: var(--app-table-tab-height) !important;
  margin: 0 !important;
  padding: 0 var(--app-table-tab-pad-x) !important;
  border: 0 !important;
  border-bottom: var(--app-table-tab-underline-height) solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--app-table-tab-text) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background-color .007s ease, color .007s ease, border-color .007s ease !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:first-child,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:first-child {
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: var(--app-table-tab-pad-x, 20px) !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:hover,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:hover {
  background: var(--app-table-tab-hover-bg) !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:hover:not(.is-active),
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab:hover:not(.is-active) {
  color: var(--app-table-tab-text) !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active {
  color: var(--app-table-tab-active) !important;
  background: transparent !important;
  z-index: 1 !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active::after,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: var(--app-table-tab-underline-x) !important;
  right: var(--app-table-tab-underline-x) !important;
  bottom: var(--app-table-tab-underline-bottom) !important;
  height: var(--app-table-tab-underline-height) !important;
  border-radius: var(--app-table-tab-underline-radius) !important;
  background: var(--app-table-tab-active) !important;
  z-index: 2 !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab__ico {
  width: var(--app-table-tab-icon-size) !important;
  height: var(--app-table-tab-icon-size) !important;
  min-width: var(--app-table-tab-icon-size) !important;
  flex: none !important;
  display: block !important;
  margin-right: var(--app-table-tab-icon-gap) !important;
  opacity: 1 !important;
  color: var(--app-table-tab-text) !important;
  stroke: var(--app-table-tab-text) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab__label,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab__label {
  white-space: nowrap !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active .px-tab__ico,
html body :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active .px-tab__label,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell > :is(.px-tabs--row, .px-tabs.px-tabs--row) .px-tab.is-active .px-tab__label {
  color: var(--app-table-tab-active) !important;
  stroke: var(--app-table-tab-active) !important;
  font-weight: 500 !important;
}

/* (v15.1 + v15.2 divider experiments removed. They fought over the row
   separator using three different mechanisms — td border #edeeef, td border
   #c3dbff, and a `tr` inset box-shadow (which is unreliable under
   border-collapse) — which is what rendered an extra line over the selection
   and shifted the layout. The divider now comes solely from the base
   `td { border-bottom: 1px solid #edeeef }`, with selection only tinting the
   background, so the line is identical whether or not a row is selected.) */

/* =========================================================================
   Sidebar — Gmail rail pass (2026-06-20)
   Reference = Gmail's left rail: right-rounded pill rows, max 6 items + a
   "More / Less" expander, no in-rail search (straight to the menu), and no
   visible scrollbar. Hover (soft grey) and active (accent-blue) colours are
   already defined above — here we add the pill geometry, the collapse
   mechanism and the chrome cleanup. Placed last so it wins the cascade.
   ========================================================================= */

/* Straight to the menu: drop the in-rail burger + search row. Gmail keeps
   search in the top bar, and we skip Compose entirely. */
html body .sidebar.sidebar--v2 .sidebar__topbar { display: none !important; }

/* No visible scrollbar in the rail. The overlay bar and the native bar are
   both off; the nav still scrolls with the wheel if the expanded list is
   taller than the rail. */
html body .sidebar.sidebar--v2 .sb-scroll,
html body .sidebar.sidebar--v2 .sidebar__nav .sb-scroll { display: none !important; }
html body .sidebar.sidebar--v2,
html body .sidebar.sidebar--v2 .sidebar__nav { scrollbar-width: none !important; }
html body .sidebar.sidebar--v2::-webkit-scrollbar,
html body .sidebar.sidebar--v2 .sidebar__nav::-webkit-scrollbar {
  width: 0 !important; height: 0 !important; display: none !important;
}

/* Flat, divider-free list like the reference, with a little top breathing room
   now that the search row is gone. */
body:not(.sidebar-collapsed) #sidebar .sidebar__nav {
  padding: 0px 0 12px !important;
  margin: 0 !important;
  gap: 0 !important;
}
#sidebar .nav-section { gap: 2px !important; }
#sidebar .nav-section + .nav-section {
  border-top: 0 !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
}

/* Gmail right-rounded pill geometry for every row (nav items + the More row),
   expanded rail only. The #sidebar id and :not([disabled]) push specificity
   above the older flat-list passes; :not([disabled]) also covers hover/active/
   focus, and overflow:hidden clips the hover ::before fill to the pill shape. */
body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
body:not(.sidebar-collapsed) #sidebar .sidebar__more {
  width: calc(100% - 12px) !important;
  box-sizing: border-box !important;
  margin: 0 12px 0 0 !important;
  padding: 0 16px 0 24px !important;
  min-height: 40px !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 9999px 9999px 0 !important;
  overflow: hidden !important;
}

/* Icons: 18px glyph — the reference's nav-icon size (24px box kept). */
body:not(.sidebar-collapsed) #sidebar .nav-item__icon svg {
  width: 18px !important; height: 18px !important; stroke-width: 1.3 !important;
}



/* Burger and topbar actions share one icon size. */
html body .tp-topbar__menu svg,
html body .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__icon svg { width: 24px !important; height: 24px !important; }

/* =========================================================================
   v15.3 — Proxy selection UX: no bottom sel-bar; check-menu single outer
   outline only (no overlapping inner rings on checkbox / caret).
   ========================================================================= */

html body #px-select-bar.px-sel-bar,
html body .view-proxy #px-select-bar,
html body.theme-dark #px-select-bar.px-sel-bar,
html body.theme-dark .view-proxy #px-select-bar {
  display: none !important;
  visibility: hidden !important;
}

html body .view-proxy .px-check-menu__control:hover,
html body.theme-dark .view-proxy .px-check-menu__control:hover {
  background: var(--px-gmail-combo-hover, #f1f3f4) !important;
  box-shadow: inset 0 0 0 1px var(--px-gmail-combo-outline, #c4c7c5) !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__control.is-check-on,
html body .view-proxy .px-check-menu__control.is-check-mixed,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body .view-proxy .px-check-menu__control.is-active,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-proxy .px-check-menu__control.is-active {
  background: var(--px-gmail-combo-active, #e8eaed) !important;
  box-shadow: inset 0 0 0 1px var(--px-gmail-combo-outline, #c4c7c5) !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__control.is-check-on:hover,
html body .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body .view-proxy .px-check-menu__control.is-active:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-active:hover {
  background: var(--px-gmail-combo-active-hover, #dadce0) !important;
}

html body .view-proxy .px-check-menu__check-hit::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit::before,
html body .view-proxy .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__caret::before {
  content: none !important;
  display: none !important;
}

html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body .view-proxy .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover,
html body .view-proxy .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__caret:hover,
html body .view-proxy .px-check-menu__caret.is-open,
html body.theme-dark .view-proxy .px-check-menu__caret.is-open,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__check:focus-visible,
html body.theme-dark .view-proxy .px-check-menu__check:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* =========================================================================
   v15.4 — Proxy selected row: keep full row divider in the check column.
   Use tr background + inherited td fill + normal border-bottom (no overlay).
   ========================================================================= */

html body .view-proxy,
html body.theme-dark .view-proxy,
html body.is-proxy-screen .view-proxy,
html body.theme-dark.is-proxy-screen .view-proxy {
  --px-row-divider: #edeeef;
  --px-row-selected-divider: rgba(120, 138, 162, 0.18);
}

html body.is-proxy-screen .view-proxy .px-flat__table tbody td,
html body .view-proxy .px-flat__table tbody td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td,
html body.theme-dark .view-proxy .px-flat__table tbody td {
  border-bottom: 1px solid var(--px-row-divider, #edeeef) !important;
  box-shadow: none !important;
}

html body .view-proxy .px-flat__row.is-sel-row td,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row td,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td,
html body .view-proxy .px-flat__row.is-sel-row td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row td.px-flat__check-cell,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td.px-flat__check-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td.px-flat__check-cell,
html body .view-proxy .px-flat__row.is-sel-row td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__row.is-sel-row td:nth-child(1),
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td:nth-child(1),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row td:nth-child(1) {
  background-color: inherit !important;
  box-shadow: none !important;
}

html body.is-proxy-screen .view-proxy .px-flat__table tbody tr:last-child td,
html body .view-proxy .px-flat__table tbody tr:last-child td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr:last-child td,
html body.theme-dark .view-proxy .px-flat__table tbody tr:last-child td {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Paint selection on the row, not per-cell — keeps collapsed borders intact in col 1. */
html body .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row:hover,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover {
  background: var(--px-row-selected-bg, #c3dbff) !important;
}

/* Replace v14.8 zero line-height — it left a transparent strip over the divider. */
html body .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell,
html body .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1),
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) {
  line-height: 18px !important;
  font-size: inherit !important;
  vertical-align: middle !important;
  isolation: auto !important;
}

html body .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell input[type="checkbox"],
html body .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"],
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1) input[type="checkbox"] {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: normal !important;
  margin: 0 !important;
}

/* Hover ring lives on the checkbox ::before — td ::before must not cover row dividers. */
html body .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.theme-dark .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td.px-flat__check-cell::before,
html body .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.theme-dark .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1)::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody td:nth-child(1)::before {
  content: none !important;
  display: none !important;
}

/* v15.6 — proxy table layout restore + row-hover checkbox + isolated check-menu hovers */
html body .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row::before,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row::before {
  content: none !important;
  display: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td {
  position: static !important;
  z-index: auto !important;
  border-bottom: 1px solid var(--px-row-divider, #edeeef) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td {
  background: var(--px-row-selected-bg, #c3dbff) !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td {
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.04) !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td {
  border-bottom: 0 !important;
}

html body .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row,
html body .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark .view-proxy .px-flat__row.is-sel-row:hover,
html body.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__row.is-sel-row:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Row hover also highlights the row checkbox */
html body .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]::before,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__check-cell input[type="checkbox"]::before {
  background: var(--tp-checkbox-hover-ring-proxy, rgba(68, 71, 70, 0.06)) !important;
}

/* Toolbar check-menu: no shared control chrome; separate fill-only hovers */
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control,
html body .view-proxy .px-check-menu__control:hover,
html body.theme-dark .view-proxy .px-check-menu__control:hover,
html body .view-proxy .px-check-menu__control.is-check-on,
html body .view-proxy .px-check-menu__control.is-check-mixed,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body .view-proxy .px-check-menu__control.is-active,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-proxy .px-check-menu__control.is-active,
html body .view-proxy .px-check-menu__control.is-check-on:hover,
html body .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body .view-proxy .px-check-menu__control.is-active:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on:hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed:hover,
html body.theme-dark .view-proxy .px-check-menu__control:has(.px-check-menu__caret.is-open):hover,
html body.theme-dark .view-proxy .px-check-menu__control.is-active:hover {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body .view-proxy .px-check-menu__control.is-check-on .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-check-mixed .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-check-on .px-check-menu__caret,
html body .view-proxy .px-check-menu__control.is-check-mixed .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-on .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-check-mixed .px-check-menu__caret,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
}

html body .view-proxy .px-check-menu__check-hit::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit::before,
html body .view-proxy .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__caret::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: background-color .12s ease !important;
}

html body .view-proxy .px-check-menu__check-hit::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit::before {
  width: calc(100% - 4px) !important;
  height: 28px !important;
}

html body .view-proxy .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__caret::before {
  width: calc(100% - 2px) !important;
  height: 28px !important;
}

html body .view-proxy .px-check-menu__check-hit:hover::before,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body .view-proxy .px-check-menu__caret:hover::before,
html body.theme-dark .view-proxy .px-check-menu__caret:hover::before,
html body .view-proxy .px-check-menu__caret.is-open::before,
html body.theme-dark .view-proxy .px-check-menu__caret.is-open::before,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret::before,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body .view-proxy .px-check-menu__check-hit:hover,
html body.theme-dark .view-proxy .px-check-menu__check-hit:hover,
html body .view-proxy .px-check-menu__caret:hover,
html body.theme-dark .view-proxy .px-check-menu__caret:hover,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-proxy .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit::before,
html body.theme-dark .view-proxy .px-check-menu__control.is-active .px-check-menu__check-hit::before {
  background: transparent !important;
}

html body .view-proxy .px-check-menu__check,
html body.theme-dark .view-proxy .px-check-menu__check,
html body .view-proxy .px-check-menu__caret svg,
html body.theme-dark .view-proxy .px-check-menu__caret svg {
  position: relative !important;
  z-index: 1 !important;
}

/* v15.9 — Row-level selection fill + constant td dividers (no per-cell white gaps)
   Selection paints the whole <tr>; cells stay transparent so the row is one surface.
   border-bottom on td is the only row separator — same #edeeef selected or not. */
html body .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td,
html body .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__check-cell,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__check-cell,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__check-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__check-cell,
html body .view-proxy .px-flat__table tbody tr.px-flat__row td:nth-child(1),
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row td:nth-child(1),
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td:nth-child(1),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td:nth-child(1),
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover td {
  border-bottom: 1px solid var(--px-row-divider, #edeeef) !important;
  border-bottom-color: var(--px-row-divider, #edeeef) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row,
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover {
  background-color: var(--px-row-selected-bg, #c3dbff) !important;
  background-image: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover {
  background-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.04) !important;
  background-image: none !important;
}

html body .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td {
  border-bottom: 0 !important;
}

/* v15.10 - Proxy bulk selection dividers.
   Muted gray divider over the shared <tr> selection fill. */
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td {
  border-bottom: 1px solid var(--px-row-selected-divider, rgba(120, 138, 162, 0.18)) !important;
}

/* v15.11 — снято. Линия НАД выделенной строкой и так остаётся дефолтной:
   разделитель строк прокси давно рисует tr::after одним цветом на все
   состояния, а бордеры на td гасятся правилом с id-специфичностью ниже
   («Строки прокси: один непрерывный 1px-разделитель через tr::after»).
   Правило было мёртвым — вычисленные стили без него не менялись, — но
   стоило дорого: соседский :has() клал класс выделения в дорогой бакет, и
   переключение выделения одной строки стоило 13.3 мс вместо 0.3 мс — во
   ВСЕХ таблицах семейства px-flat, а не только в прокси. Не возвращать:
   см. память canonical-css-invalidation-budget. */

html body .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:last-child td {
  border-bottom: 0 !important;
}

/* v16.0 — Sidebar rail alignment: burger metrics + 32px nav rows */
@media (min-width: 901px) {
  html body .tp-topbar__left,
  html body.theme-dark .tp-topbar__left {
    padding-left: 10px !important;
  }
}

/* Topbar action icons: align help, notifications and account with burger glyph metrics. */
html body .tp-topbar__icon,
html body.theme-dark .tp-topbar__icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  line-height: 0 !important;
}

html body .tp-topbar__menu svg,
html body.theme-dark .tp-topbar__menu svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.1 !important;
}

html body .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.5 !important;
}

html body .tp-topbar__actions .tp-topbar__icon svg,
html body.theme-dark .tp-topbar__actions .tp-topbar__icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.8px !important;
}

html body .tp-topbar__actions .tp-topbar__icon:hover,
html body .tp-topbar__actions .tp-topbar__icon.is-open,
html body .tp-topbar__actions .tp-topbar__icon.is-active,
html body .tp-topbar__actions .tp-topbar__icon[aria-expanded="true"],
html body.theme-dark .tp-topbar__actions .tp-topbar__icon:hover,
html body.theme-dark .tp-topbar__actions .tp-topbar__icon.is-open,
html body.theme-dark .tp-topbar__actions .tp-topbar__icon.is-active,
html body.theme-dark .tp-topbar__actions .tp-topbar__icon[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

html body:not(.theme-dark) .tp-topbar__actions .tp-topbar__icon:hover,
html body:not(.theme-dark) .tp-topbar__actions .tp-topbar__icon.is-open,
html body:not(.theme-dark) .tp-topbar__actions .tp-topbar__icon.is-active,
html body:not(.theme-dark) .tp-topbar__actions .tp-topbar__icon[aria-expanded="true"] {
  background: rgba(60, 64, 67, 0.12) !important;
  color: #202124 !important;
}

html body .tp-topbar__menu svg *,
html body .tp-topbar__icon svg *,
html body.theme-dark .tp-topbar__menu svg *,
html body.theme-dark .tp-topbar__icon svg * {
  vector-effect: non-scaling-stroke !important;
}

/* Keep the burger's original hit area and horizontal offset. */
html body .tp-topbar__menu,
html body.theme-dark .tp-topbar__menu {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 4px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  line-height: 0 !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__nav,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .sidebar__nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px 0 26px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  gap: 0 !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
}

html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label {
  line-height: 20px !important;
}

/* v16.1 — Gmail sidebar nav: grey hover pill, blue active pill, stable text color */
html body:not(.sidebar-collapsed) #sidebar,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  --sb-nav-text: rgb(32, 33, 36);
  --sb-nav-hover-bg: rgba(60, 64, 67, 0.08);
  --sb-nav-active-bg: #d3e3fd;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 12px 0 26px !important;
  margin: 0 !important;
  border: 0 !important;
  gap: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--sb-nav-text) !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .12s ease !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible {
  background: var(--sb-nav-hover-bg) !important;
  color: var(--sb-nav-text) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  background: var(--sb-nav-active-bg) !important;
  color: var(--sb-nav-text) !important;
  font-weight: 700 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label {
  font-size: 14px !important;
  font-weight: inherit !important;
  line-height: 20px !important;
  color: inherit !important;
  opacity: 1 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-weight: 700 !important;
  color: inherit !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item__icon[data-tone],
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon[data-tone],
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  color: var(--sb-nav-text) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  color: var(--sb-nav-text) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  stroke-width: 1.8 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  stroke-width: 2.1 !important;
}

html body.theme-dark:not(.sidebar-collapsed) #sidebar,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  --sb-nav-text: rgb(232, 234, 237);
  --sb-nav-hover-bg: rgba(255, 255, 255, 0.08);
  --sb-nav-active-bg: rgba(138, 180, 248, 0.24);
}

/* v16.3 — proxy category tabs row: 56px */
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row,
html body.is-proxy-screen .view-proxy .px-tabs.px-tabs--row,
html body.theme-dark.is-proxy-screen .view-proxy .px-tabs.px-tabs--row {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab,
html body :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.is-proxy-screen .view-proxy .px-tabs.px-tabs--row .px-tab,
html body.theme-dark.is-proxy-screen .view-proxy .px-tabs.px-tabs--row .px-tab {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}

/* v16.4 — sidebar Gmail metrics: active #001d35, icon gap, proxy count */
html body:not(.sidebar-collapsed) #sidebar,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 {
  --sb-nav-active-text: #001d35;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible {
  gap: 0 !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  color: var(--sb-nav-active-text) !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  color: var(--sb-nav-active-text) !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon {
  color: var(--sb-nav-active-text) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px !important;
  margin-right: 18px !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__badge,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgb(95, 99, 104) !important;
  flex: 0 0 auto !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  color: var(--sb-nav-active-text) !important;
  font-weight: 700 !important;
}

html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  color: rgb(232, 234, 237) !important;
  font-weight: 700 !important;
}

/* v16.6 — sidebar 14px; activation changes bg only (no text/icon shift) */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  gap: 0 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  color: var(--sb-nav-text) !important;
  background: var(--sb-nav-active-bg) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: inherit !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  font-weight: 400 !important;
  color: var(--sb-nav-text) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  stroke-width: 1.4 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__badge,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  color: #001d35 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* v16.7 — sidebar row height 32px (expanded rail) */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .sidebar__more {
  min-height: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
}

/* v16.8 — stable sidebar hover: identical box metrics, bg-only feedback, label 14px/500 */
html body .sidebar.sidebar--v2 .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__label,
html body .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  color: inherit !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px 0 26px !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  transform: none !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible {
  background: var(--sb-nav-hover-bg) !important;
  color: var(--sb-nav-text) !important;
  border: 0 !important;
  border-color: transparent !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  background: var(--sb-nav-active-bg) !important;
  color: var(--sb-nav-text) !important;
  border: 0 !important;
  border-color: transparent !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover::before,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible::before,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover::before,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible::before,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover::before,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible::before,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover::before,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible::before {
  background-color: transparent !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px !important;
  margin-right: 18px !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  color: var(--sb-nav-text) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):focus-visible .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):hover .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  /* stroke-width активного — только в v19 ниже */
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: inherit !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible {
  background: var(--sb-nav-hover-bg) !important;
  border: 0 !important;
  border-color: transparent !important;
  color: var(--sb-nav-text) !important;
}

/* v16.9 — sidebar typography lock: 14px/500 in every row state (no shrink on active) */
html body:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
  transform: none !important;
}

/* v17 — sidebar weights: 400 inactive, 500 active; instant more chevron */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active) .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):hover .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):focus-visible .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active) .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):focus-visible .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active) .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active) .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):hover .nav-item__label {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: inherit !important;
}

/* v18 — extra items collapsed by default */

html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg {
  stroke-width: 1.75 !important;
}

/* Активный stroke-width — только в v19 (не дублировать здесь). */

/* v19 - active sidebar: label 500, icon stroke 1.75
   ЕДИНЫЙ источник правды для веса активного пункта сайдбара.
   Не дублировать font-weight / stroke-width активных иконок ниже по файлу. */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover {
  font-weight: 500 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  font-weight: 500 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon {
  font-weight: 500 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg {
  font-weight: 500 !important;
  stroke-width: 1.75 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__badge {
  font-weight: 600 !important;
}

/* Active task count in the sidebar mirrors the blue counter in the active-tasks dock.
   The id selector deliberately outranks the generic expanded/active badge rules above. */
html body #sidebar #nav-task-badge,
html body .sidebar.sidebar--v2 #nav-task-badge,
html body.theme-dark #sidebar #nav-task-badge,
html body.theme-dark .sidebar.sidebar--v2 #nav-task-badge {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--accent, #2563eb) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22) !important;
}

html body #sidebar #nav-task-badge[hidden],
html body .sidebar.sidebar--v2 #nav-task-badge[hidden],
html body.theme-dark #sidebar #nav-task-badge[hidden],
html body.theme-dark .sidebar.sidebar--v2 #nav-task-badge[hidden] {
  display: none !important;
}

/* =========================================================================
   ACCOUNTS MODULE — Gmail layout pass (mirror of the proxy px-tabs).
   The status filters now live as a px-tabs--row inside the table card, and the
   "Добавить" action + search moved into the toolbar (am-hero / am-stats /
   am-search-row removed).
   ========================================================================= */

/* Proxy aligns the first tab to its checkbox rail; accounts has no leading
   checkbox, so keep the first tab on the normal tab padding. */
html body .view-am .am-table-shell,
html body.theme-dark .view-am .am-table-shell {
  --px-check-align: 20px;
}

/* Tabs keep the .stat class for the existing renderStats() wiring — drop the
   legacy stat-card shadow so they read as flat px-tabs. */
html body .view-am .am-table-shell > .px-tabs--row .px-tab.stat,
html body .view-am .am-table-shell > .px-tabs--row .px-tab.stat:hover,
html body .view-am .am-table-shell > .px-tabs--row .px-tab.stat.is-active {
  box-shadow: none !important;
}

/* Круглой «+» в баре аккаунтов больше нет: добавление аккаунтов — действие
   раздела, и кнопка переехала в строку опознания над баром (контракт
   .am-table-head__add в конце файла). */

/* "Refresh list" in Accounts mirrors the proxy toolbar refresh icon. */
html body .view-am .am-gmail-bar #am-accounts-refresh,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh {
  min-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #444746 !important;
  flex: none !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh:hover,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh:hover {
  background: rgba(68, 71, 70, 0.08) !important;
  box-shadow: none !important;
  color: #444746 !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh svg,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh svg {
  width: 20px !important;
  height: 20px !important;
  color: #444746 !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh svg path,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh svg path {
  fill: currentColor !important;
  stroke: none !important;
}

/* Account search relocated into the toolbar — compact field, not the old
   full-width search row. */
/* Accounts toolbar: keep all icons aligned with Proxy / Userbase controls. */
html body .view-am .am-gmail-bar,
html body.theme-dark .view-am .am-gmail-bar {
  --px-gmail-icon: #444746 !important;
  --px-gmail-muted: #5f6368 !important;
  --px-gmail-hover: rgba(68, 71, 70, 0.08) !important;
}
html body .view-am .am-gmail-bar #am-more-menu,
html body.theme-dark .view-am .am-gmail-bar #am-more-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}


/* #inv-pick-refresh стоит рядом с #am-accounts-refresh не случайно: это одна
   и та же кнопка «Обновить список», просто вторая живёт в окне выбора. Пока
   её id тут не было, кнопка брала цвет из .picker-gmail-bar__action
   (--text-mute, #6b7494) и подсветку rgba(60,64,67,.08) — сам значок это не
   выдавало (ему цвет прибит ниже), а вот наведение и нажатие в окне и в
   таблице расходились. */
html body .view-am .am-gmail-bar #am-accounts-refresh,
html body .view-am .am-gmail-bar #inv-pick-refresh,
html body .view-am .am-gmail-bar #am-more-toggle,
html body .view-am .am-gmail-bar #am-filter-toggle,
html body .view-am .am-gmail-bar .am-sel-action,
html body .view-am .am-gmail-bar .picker-pagination__btn,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-refresh,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle,
html body.theme-dark .view-am .am-gmail-bar #am-filter-toggle,
html body.theme-dark .view-am .am-gmail-bar .am-sel-action,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
  filter: none !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh:hover,
html body .view-am .am-gmail-bar #inv-pick-refresh:hover,
html body .view-am .am-gmail-bar #am-more-toggle:hover,
html body .view-am .am-gmail-bar #am-more-toggle.is-open,
html body .view-am .am-gmail-bar #am-filter-toggle:hover,
html body .view-am .am-gmail-bar #am-filter-toggle.is-open,
html body .view-am .am-gmail-bar .am-sel-action:hover,
html body .view-am .am-gmail-bar .am-sel-action--danger:hover,
html body .view-am .am-gmail-bar .picker-pagination__btn:hover:not([disabled]),
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh:hover,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-refresh:hover,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle:hover,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle.is-open,
html body.theme-dark .view-am .am-gmail-bar #am-filter-toggle:hover,
html body.theme-dark .view-am .am-gmail-bar #am-filter-toggle.is-open,
html body.theme-dark .view-am .am-gmail-bar .am-sel-action:hover,
html body.theme-dark .view-am .am-gmail-bar .am-sel-action--danger:hover,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
  filter: none !important;
}
html body .view-am .am-gmail-bar .am-sel-action--danger:hover svg,
html body.theme-dark .view-am .am-gmail-bar .am-sel-action--danger:hover svg {
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
}
html body .view-am .am-gmail-bar #am-filter-toggle svg,
html body .view-am .am-gmail-bar .am-sel-action svg,
html body .view-am .am-gmail-bar .picker-pagination__btn svg,
html body.theme-dark .view-am .am-gmail-bar #am-filter-toggle svg,
html body.theme-dark .view-am .am-gmail-bar .am-sel-action svg,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh svg,
html body .view-am .am-gmail-bar #inv-pick-refresh svg,
html body .view-am .am-gmail-bar #am-more-toggle svg,
html body .view-am .am-gmail-bar #am-sel-actions svg,
html body .view-am .am-gmail-bar #inv-pick-sel-actions svg,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh svg,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-refresh svg,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle svg,
html body.theme-dark .view-am .am-gmail-bar #am-sel-actions svg,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-sel-actions svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-am .am-gmail-bar #am-accounts-refresh svg path,
html body .view-am .am-gmail-bar #inv-pick-refresh svg path,
html body .view-am .am-gmail-bar #am-more-toggle svg circle,
html body .view-am .am-gmail-bar #am-sel-actions svg circle,
html body .view-am .am-gmail-bar #inv-pick-sel-actions svg circle,
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh svg path,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-refresh svg path,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle svg circle,
html body.theme-dark .view-am .am-gmail-bar #am-sel-actions svg circle,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-sel-actions svg circle {
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-am .am-gmail-bar #am-filter-toggle svg,
html body .view-am .am-gmail-bar #am-sel-delete svg,
html body .view-am .am-gmail-bar #am-more-toggle svg,
html body .view-am .am-gmail-bar #am-sel-actions svg,
html body .view-am .am-gmail-bar #inv-pick-sel-delete svg,
html body .view-am .am-gmail-bar #inv-pick-sel-actions svg,
html body.theme-dark .view-am .am-gmail-bar #am-filter-toggle svg,
html body.theme-dark .view-am .am-gmail-bar #am-sel-delete svg,
html body.theme-dark .view-am .am-gmail-bar #am-more-toggle svg,
html body.theme-dark .view-am .am-gmail-bar #am-sel-actions svg,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-sel-delete svg,
html body.theme-dark .view-am .am-gmail-bar #inv-pick-sel-actions svg {
  width: 22px !important;
  height: 22px !important;
}
html body .view-am .am-gmail-bar .picker-pagination,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 168px !important;
}
html body .view-am .am-gmail-bar .picker-pagination__info,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__info {
  color: #5e5e5e !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  font-family: var(--app-font) !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body .view-am .am-gmail-bar .picker-pagination__nav,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__nav {
  flex: 0 0 64px !important;
  width: 64px !important;
  gap: 0 !important;
}
html body .view-am .am-gmail-bar .picker-pagination__btn,
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
}

/* px-tabs count badge — shared proxy + accounts (the Gmail-style pill next to
   each category label). */
html body :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__count,
html body.theme-dark :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__count,
html body :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__count,
html body.theme-dark :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__count {
  margin-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: rgba(60, 64, 67, 0.10) !important;
  color: #444746 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  letter-spacing: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
html body :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__count,
html body.theme-dark :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs--row .px-tab.is-active .px-tab__count {
  background: var(--tp-accent-soft, rgba(37, 99, 235, 0.14)) !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
  color: var(--tp-accent, #2563eb) !important;
}

/* USERBASE MODULE - proxy flat-table layout parity */
html body .view-userbase--v2,
html body.theme-dark .view-userbase--v2 {
  --proxy-bg: #f8f9fa;
  --proxy-surface: #ffffff;
  --proxy-surface-low: #f3f4f5;
  --proxy-surface-line: #e7e8e9;
  --proxy-outline: #c7c4d7;
  --proxy-text: #191c1d;
  --proxy-muted: #464554;
  --proxy-subtle: #767586;
  --proxy-primary: #2563eb;
  --px-row-divider: #edeeef;
  --px-row-selected-bg: #c3dbff;
  background: var(--proxy-bg) !important;
  color: var(--proxy-text) !important;
  padding: 32px !important;
  gap: 16px !important;
}

html body .view-userbase--v2 .ub2--list {
  gap: 0 !important;
}

html body .view-userbase--v2 #ub2-flat-table,
html body .view-userbase--v2 #sbl-flat-table,
html body .view-userbase--v2 #pbl-flat-table,
html body.theme-dark .view-userbase--v2 #ub2-flat-table,
html body.theme-dark .view-userbase--v2 #sbl-flat-table,
html body.theme-dark .view-userbase--v2 #pbl-flat-table {
  margin-top: 2px !important;
  background: var(--proxy-surface) !important;
  border: 1px solid var(--proxy-surface-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04) !important;
  overflow: hidden !important;
}

html body .view-userbase--v2 .am-table-shell {
  min-width: 0 !important;
}

html body .view-userbase--v2 .ub2-gmail-bar,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar {
  --px-gmail-icon: #444746;
  --px-gmail-muted: #5f6368;
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  border-bottom: 0 !important;
  background: var(--proxy-surface) !important;
  box-sizing: border-box !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__actions {
  gap: 0px !important;
  min-width: 0 !important;
}

html body .view-userbase--v2 .px-check-menu,
html body.theme-dark .view-userbase--v2 .px-check-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
  margin-right: 0 !important;
}

html body .view-userbase--v2 .px-check-menu__control,
html body.theme-dark .view-userbase--v2 .px-check-menu__control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  /* 40px, как контрол аккаунтов: меню выделения открывается ровно от низа
     Gmail-бара (control 40 по центру бара 48 → низ контрола + 4px = низ бара). */
  height: 40px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .view-userbase--v2 .px-check-menu__check-hit,
html body.theme-dark .view-userbase--v2 .px-check-menu__check-hit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .px-check-menu__caret,
html body.theme-dark .view-userbase--v2 .px-check-menu__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 32px !important;
  margin: 0 0 0 -8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .px-check-menu__caret svg {
  width: 12px !important;
  height: 12px !important;
}

html body .view-userbase--v2 .px-check-menu__check-hit:hover,
html body .view-userbase--v2 .px-check-menu__caret:hover,
html body .view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__caret {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action,
html body .view-userbase--v2 .ub2-gmail-bar #ub2-add-many,
html body .view-userbase--v2 .ub2-gmail-bar #ub2-refresh,
html body .view-userbase--v2 .ub2-gmail-bar #ub2-more-toggle,
html body .view-userbase--v2 .ub2-gmail-bar #ubd-refresh,
html body .view-userbase--v2 .ub2-gmail-bar #pbd-refresh,
html body .view-userbase--v2 .ub2-gmail-bar #ubd-more-toggle,
html body .view-userbase--v2 .ub2-gmail-bar #pbd-more-toggle,
html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action:hover,
html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action svg,
html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
}

/* Глиф обновления залитый, а блок выше красит обводкой всё подряд — без
   этого сброса контур ложится поверх заливки, и стрелка выглядит жирнее той
   же иконки в аккаунтах и прокси. Списки источников (#sbl-*, #ubs-*) живут в
   том же баре, поэтому перечислены здесь же, а не лечатся своим блоком. */
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-refresh, #ubd-refresh, #sbl-refresh, #ubs-refresh) svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-refresh, #ubd-refresh, #pbl-refresh, #pbd-refresh) svg {
  fill: currentColor !important;
  stroke: none !important;
}
/* Троеточие «Ещё» — паритет с #am-more-toggle (22px, заливка точек). */
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #sbl-more-toggle, #ubs-more-toggle) svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #pbl-more-toggle, #pbd-more-toggle) svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #sbl-more-toggle, #ubs-more-toggle) svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #pbl-more-toggle, #pbd-more-toggle) svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #sbl-more-toggle, #ubs-more-toggle) svg circle,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #pbl-more-toggle, #pbd-more-toggle) svg circle,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #sbl-more-toggle, #ubs-more-toggle) svg circle,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-more-toggle, #ubd-more-toggle, #pbl-more-toggle, #pbd-more-toggle) svg circle {
  fill: currentColor !important;
  stroke: none !important;
}

/* Круглая «+» в баре осталась только у источников: у баз пользователей
   (список и открытая база) «Добавить …» — пилюля с подписью в строке
   опознания, и прятать у неё текст больше некому. */
html body .view-userbase--v2 .ub2-gmail-bar :is(#sbl-add-many, #ubs-add-sources) span,
html body .view-userbase--v2 .ub2-gmail-bar :is(#pbl-add-many, #pbd-add-sources) span {
  display: none !important;
}

html body .view-userbase--v2 .ub2-gmail-search {
  flex: 0 1 220px !important;
  width: 220px !important;
  min-width: 150px !important;
  max-width: 260px !important;
  height: 36px !important;
  margin-left: 8px !important;
  padding: 0 10px !important;
  border: 1px solid var(--proxy-outline) !important;
  border-radius: 8px !important;
  background: var(--proxy-surface) !important;
  box-shadow: none !important;
}

html body .view-userbase--v2 .ub2-gmail-search input {
  font-size: 13px !important;
  color: var(--proxy-text) !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 168px !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__info {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  padding-right: 8px !important;
}

html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__nav {
  flex: 0 0 64px !important;
  width: 64px !important;
  gap: 0 !important;
}

/* Габариты стрелок — паритет с аккаунтами/прокси: min/max-height обязательны,
   иначе от общего блока действий бара остаётся 40px и подсветка наведения
   растягивается в овал 32×40 вместо круга 32×32. */
html body .view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
}

/* Позицию задаёт positionCheckMenuPop() от .px-check-menu__control (общий
   канон .am-gmail-bar .am-check-menu ниже по файлу) — здесь только оболочка. */
html body .view-userbase--v2 .px-check-menu__pop,
html body.theme-dark .view-userbase--v2 .px-check-menu__pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 640 !important;
  min-width: 196px !important;
  padding: 6px 0 !important;
  border: 1px solid rgba(218, 220, 224, 0.9) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(60, 64, 67, 0.22) !important;
}

html body .view-userbase--v2 .px-more-menu {
  position: relative !important;
  display: inline-flex !important;
}

html body .view-userbase--v2 .px-check-menu__item {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #202124 !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .px-check-menu__item:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}

/* Геометрия — как у #am-range-pop/#px-range-pop: смещение +8px от бара,
   компактная ширина из общего правила .picker-range-pop, z-index 620. */
html body .view-userbase--v2 .ub2-gmail-bar .picker-range-pop,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .picker-range-pop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 620 !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row {
  display: flex !important;
  align-items: stretch !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 0 0 20px !important;
  border-top: 1px solid var(--proxy-surface-line) !important;
  border-bottom: 1px solid var(--proxy-surface-line) !important;
  background: var(--proxy-surface) !important;
  overflow-x: auto !important;
  /* Только горизонтальная прокрутка — иначе колесо крутит вкладки по вертикали
     (см. канон .app-table). */
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row::-webkit-scrollbar {
  display: none !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 56px !important;
  min-width: 156px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #444746 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab:hover:not(.is-active) {
  background: rgba(60, 64, 67, 0.06) !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active {
  color: var(--tp-accent, #2563eb) !important;
  background: transparent !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: var(--tp-accent, #2563eb) !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico,
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  width: 18px !important;
  height: 18px !important;
  color: #444746 !important;
  stroke: #444746 !important;
  flex: none !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__count,
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__count {
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  background: rgba(60, 64, 67, 0.10) !important;
  color: #444746 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

html body .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__count {
  background: rgba(37, 99, 235, 0.14) !important;
  color: var(--tp-accent, #2563eb) !important;
}

html body .view-userbase--v2 .px-flat__scroll,
html body.theme-dark .view-userbase--v2 .px-flat__scroll {
  overflow-x: auto !important;
  background: var(--proxy-surface) !important;
}

/* Оболочка таблицы баз (база, шапка, ячейки, hover/selected) — из
   канонического контракта .app-table в конце файла; здесь остаются
   геометрия колонок и сущностные ячейки. */
html body .view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) .px-flat__head,
html body .view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) .px-flat__row {
  display: table-row !important;
  padding: 0 !important;
}

/* Ширины колонок задаёт общий модуль колонок (инлайн в th), поэтому
   colgroup-долей и позиционных правил (nth-child) здесь нет: после
   перестановки «третья ячейка» — уже не «Источник». Выравнивание — по
   data-col, как в проксях. */
html body .view-userbase--v2 .ub2-flat__table th[data-col],
html body .view-userbase--v2 .ub2-flat__table td[data-col] {
  text-align: left !important;
}

html body .view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row {
  cursor: pointer !important;
}

/* В px-flat__head в базах данных при наведении — cursor: pointer.
   Кроме зоны захвата ширины: .am-col-grip — это разделитель колонок, и под
   курсором он обязан показывать col-resize, как во всех остальных таблицах
   (канон РЕСАЙЗ И ПОРЯДОК КОЛОНОК в конце файла). Правило с `*` и !important
   молча перекрашивало курсор разделителя в «палец» на всех четырёх таблицах
   этого экрана — базы, записи, прогоны, источники, — и границу колонки было
   не отличить от подписи заголовка. */
html body :is(.view-userbase, .view-userbase--v2, #view-userbase) .px-flat__head,
html body :is(.view-userbase, .view-userbase--v2, #view-userbase) .px-flat__head *:not(.am-col-grip),
html body :is(.view-userbase, .view-userbase--v2, #view-userbase) .px-flat__head:hover,
html body :is(.view-userbase, .view-userbase--v2, #view-userbase) .px-flat__head th:hover {
  cursor: pointer !important;
}
html body :is(.view-userbase, .view-userbase--v2, #view-userbase) .px-flat__head .am-col-grip {
  cursor: col-resize !important;
}

html body .view-userbase--v2 .ub2-name-edit {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--proxy-text) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

html body .view-userbase--v2 .ub2-source-tag {
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

html body .view-userbase--v2 .ub2-count {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 13px !important;
  color: var(--proxy-text) !important;
}

html body .view-userbase--v2 .ub2-mute {
  color: var(--proxy-subtle) !important;
  text-align: left !important;
}

html body .view-userbase--v2 .px-flat__actions,
html body.theme-dark .view-userbase--v2 .px-flat__actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

html body .view-userbase--v2 .table-footer.am-table-foot,
html body.theme-dark .view-userbase--v2 .table-footer.am-table-foot {
  border-top: 1px solid var(--proxy-surface-line) !important;
  background: var(--proxy-surface) !important;
}

@media (max-width: 900px) {
  html body .view-userbase--v2,
  html body.theme-dark .view-userbase--v2 {
    padding: 58px 16px 20px !important;
  }

  html body .view-userbase--v2 .ub2-gmail-bar {
    gap: 8px !important;
  }

  html body .view-userbase--v2 .ub2-gmail-search {
    flex: 1 1 150px !important;
    width: auto !important;
  }
}

/* USERBASE MODULE - proxy table parity corrections */
#view-userbase.view-userbase.view-userbase--v2,
html body #view-userbase.view-userbase.view-userbase--v2,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 {
  padding: 0 !important;
  background: var(--proxy-bg, #f8f9fa) !important;
  color: var(--proxy-text, #191c1d) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2--list,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2--list {
  gap: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--proxy-surface, #ffffff) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell {
  --px-check-align: 15.5px;
  --px-check-hit: 32px;
  --px-check-size: 21px;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--proxy-surface, #ffffff) !important;
  box-shadow: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex: none !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-card, #fff) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  /* Только горизонтальная прокрутка — иначе колесо крутит вкладки по вертикали
     (см. канон .app-table). */
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  color: #444746 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row::-webkit-scrollbar {
  display: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: none !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #444746 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child {
  padding-left: var(--px-check-align) !important;
  padding-right: 20px !important;
}

/* Рельс разделов «Баз» — как в аккаунтах: содержимое вкладки прижато влево,
   и первая начинается на рельсе чекбоксов. По умолчанию вкладки этого вида
   центрируют содержимое, и первая уезжала на 42px правее рельса — из-за
   этого рельс читался с отступом, а таблица под ним — с самого начала. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row.ub2-bases-tabs .px-tab,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row.ub2-bases-tabs .px-tab {
  justify-content: flex-start !important;
  text-align: left !important;
  /* Таб на 2px выше ряда (56px) — свисает под верхнюю границу таблицы,
     чтобы синяя линия активного пункта легла ровно на границу, как в
     аккаунтах (там .px-tab тоже 58px при ряду 56px). При 56px линия
     вставала на 2px выше границы и рельс читался приподнятым. */
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active {
  color: var(--tp-accent, #2563eb) !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
  z-index: 1 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -1px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: var(--tp-accent, #2563eb) !important;
  z-index: 2 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  width: 20px !important;
  height: 20px !important;
  flex: none !important;
  display: block !important;
  margin-right: 16px !important;
  color: #444746 !important;
  stroke: #444746 !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__ico,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__ico {
  color: var(--tp-accent, #2563eb) !important;
  stroke: var(--tp-accent, #2563eb) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__label,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__label {
  color: inherit !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__label,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab.is-active .px-tab__label {
  color: var(--tp-accent, #2563eb) !important;
  font-weight: 500 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__count {
  display: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__scroll,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__scroll {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  background: var(--proxy-surface, #ffffff) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th.px-flat__check-cell,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th.px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.px-flat__check-cell {
  text-align: left !important;
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 0 !important;
}

/* Состояния строк (hover/selected/dividers) — канонический контракт .app-table. */

/* USERBASE MODULE - proxy hover and sidebar type helpers */

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-add-many.picker-gmail-bar__add,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-refresh,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-more-toggle,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-add-many.picker-gmail-bar__add,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-refresh,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-more-toggle,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-icon-btn,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-icon-btn {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease !important;
  transform: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-add-many.picker-gmail-bar__add:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-refresh:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-more-toggle:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn:hover:not([disabled]),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-gmail-bar__action:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-add-many.picker-gmail-bar__add:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-refresh:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar #ub2-more-toggle:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Позиционных правил ширины (col / nth-child) у таблиц баз больше нет:
   ширину каждой колонки ставит общий модуль колонок инлайном в th, а после
   перестановки «третья ячейка» — уже не «Источник». */

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-name-edit,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-count__num,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-name-edit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-count__num,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag {
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  cursor: pointer !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-mute,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-mute {
  color: var(--tp-side-muted, #8b95b1) !important;
}


/* USERBASE MODULE - proxy checkbox, tabs and table typography parity */
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell {
  --tp-checkbox-size: 21px;
  --tp-checkbox-color: #444746;
  --tp-checkbox-color-muted: #bfc3c7;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-hover: rgba(68, 71, 70, 0.08);
  --tp-checkbox-hover-strong: rgba(68, 71, 70, 0.12);
  --tp-checkbox-hover-ring-proxy: rgba(68, 71, 70, 0.08);
  --tp-checkbox-svg-empty: url("img/checkbox-empty.svg");
  --tp-checkbox-svg-empty-muted: url("img/checkbox-empty-muted.svg");
  --tp-checkbox-svg-checked: url("img/checkbox-checked.svg");
  --tp-checkbox-svg-indeterminate: url("img/checkbox-indeterminate.svg");
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-search,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-search {
  display: none !important;
}

/* Типографика таблицы — канонический контракт .app-table (Google Sans). */

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-name-edit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-name-edit {
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-count,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-count,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-count__num,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-count__num {
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-mute,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-mute {
  color: var(--tp-side-muted, #8b95b1) !important;
  font-weight: 400 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag {
  height: 22px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 20px !important;
}

/* Окна «Диапазон» (#ub2-range-pop), меню выделения (#ub2-check-menu-pop) и
   «…» (#ub2-more-pop) намеренно НЕ здесь: первые два наследуют канон
   аккаунтов из финального блока .am-gmail-bar .am-check-menu, а «…» — общий
   стиль am-actions-menu (style.css) + positionToolbarPopover. */

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-check-on,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-check-mixed,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-check-on,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-check-mixed,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit {
  z-index: 1 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret {
  margin-left: -5px !important;
  z-index: 2 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit::before,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: background-color .12s ease !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit::before {
  width: calc(100% - 4px) !important;
  height: 28px !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret::before {
  width: calc(100% - 2px) !important;
  height: 28px !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:hover::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:hover::before,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret:hover::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret:hover::before,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret.is-open::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret.is-open::before,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__caret::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__caret::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__caret:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__check-hit,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__check-hit::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control.is-active .px-check-menu__check-hit::before {
  background: transparent !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check,
html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"],
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  min-width: var(--tp-checkbox-size, 21px) !important;
  min-height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: none !important;
  position: relative !important;
  z-index: 1 !important;
  vertical-align: middle !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
  transition: none !important;
  transform: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check::after,
html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:checked,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:checked,
html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:checked,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:indeterminate,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:indeterminate,
html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:indeterminate,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:indeterminate {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Строковые чекбоксы — паритет с #view-accounts / #view-proxy:
   тот же mask SVG (stroke 2), цвет #babec1; при ховере на чекбокс — #444746.
   Ховер всей строки НЕ подсвечивает чекбокс: клик по строке открывает базу,
   а не выделяет её — иначе сигнал «сейчас выберется» вводит в заблуждение. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-row-checkbox-color, #babec1) !important;
  color: var(--tp-row-checkbox-color, #babec1) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:not(:checked):not(:indeterminate):hover {
  background-color: var(--tp-checkbox-color, #444746) !important;
  color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: background-color .12s ease !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:hover::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__check-cell input[type="checkbox"]:hover::before {
  background: var(--tp-checkbox-hover-ring-proxy, rgba(68, 71, 70, 0.08)) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:checked:hover::before,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .px-flat__check-cell input[type="checkbox"]:indeterminate:hover::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

/* Как в прокси (v14.3): правило гасит фон/рамку, но НЕ трогает mask-image —
   иначе связка id+id перебивает состояния :checked/:indeterminate и мастер-
   чекбокс навсегда остаётся «пустым» при выделении строк. */
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:hover {
  background: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:not(:checked):not(:indeterminate),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:not(:checked):not(:indeterminate),
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:not(:checked):not(:indeterminate),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:not(:checked):not(:indeterminate) {
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:checked,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:checked,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:checked,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:checked {
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:indeterminate,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:indeterminate,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:indeterminate,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-toolbar-check.px-check-menu__check:indeterminate {
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:focus-visible,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  #view-userbase.view-userbase.view-userbase--v2,
  html body #view-userbase.view-userbase.view-userbase--v2,
  html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 {
    padding: 0 !important;
  }
}

/* USERBASE MODULE - proxy final table reset */
#view-userbase.view-userbase.view-userbase--v2,
html body #view-userbase.view-userbase.view-userbase--v2,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 {
  padding: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2--list,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2--list,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--card, #fff) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table .am-table-shell {
  min-width: 0 !important;
  min-height: 0 !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--card, #fff) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar::before,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-gmail-bar::after,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tabs::before,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tabs::after {
  content: none !important;
  display: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .px-flat__scroll,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-flat__scroll {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: var(--card, #fff) !important;
  -webkit-overflow-scrolling: touch;
}

/* База/шапка/ячейки таблицы — канонический контракт .app-table. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th.px-flat__check-cell,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th.px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.px-flat__check-cell {
  width: 44px !important;
  text-align: left !important;
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 0 !important;
}

/* Состояния строк — канонический контракт .app-table. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag.ub2-source-tag--parser,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag.ub2-source-tag--parser {
  display: inline !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #1f2740) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 18px !important;
  text-transform: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag::before,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-source-tag::before {
  content: none !important;
  display: none !important;
}


/* ===== Accounts: proxy-exact toolbar + table polish ===================== */

/* Refresh spins while loading (animation: click feedback). */
html body .view-am .am-gmail-bar #am-accounts-refresh.is-loading svg {
  animation: am-rescan-spin 0.8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

/* Checkbox + caret menu — self-contained copy of proxy px-check-menu. */
html body .view-am .am-gmail-bar .px-check-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}
html body .view-am .am-gmail-bar .px-check-menu__control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 40px !important;
  padding: 0 !important;
  background: transparent !important;
}
html body .view-am .am-gmail-bar .px-check-menu__check-hit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color .12s ease !important;
}
html body .view-am .am-gmail-bar .px-check-menu__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #444746 !important;
  border-radius: 2px !important;
  background: #fff !important;
  cursor: pointer !important;
  flex: none !important;
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: border-color .12s ease, background-color .12s ease !important;
}
html body .view-am .am-gmail-bar .px-check-menu__check:checked,
html body .view-am .am-gmail-bar .px-check-menu__check:indeterminate {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
}
html body .view-am .am-gmail-bar .px-check-menu__check:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 3px !important;
  height: 6px !important;
  border: solid #fff !important;
  border-width: 0 1.75px 1.75px 0 !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  box-sizing: border-box !important;
}
html body .view-am .am-gmail-bar .px-check-menu__check:indeterminate::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 1.75px !important;
  background: #fff !important;
  transform: translate(-50%, -50%) !important;
}
html body .view-am .am-gmail-bar .px-check-menu__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 32px !important;
  margin: 0 0 0 -6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #444746 !important;
  cursor: pointer !important;
  transition: background-color .12s ease !important;
}
html body .view-am .am-gmail-bar .px-check-menu__caret svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}
html body .view-am .am-gmail-bar .px-check-menu__control:not(.is-active) .px-check-menu__check-hit:hover,
html body .view-am .am-gmail-bar .px-check-menu__control:not(.is-active) .px-check-menu__caret:hover {
  background: rgba(68, 71, 70, 0.08) !important;
  border-radius: 4px !important;
}
html body .view-am .am-gmail-bar .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-am .am-gmail-bar .px-check-menu__control.is-active .px-check-menu__caret {
  background: rgba(68, 71, 70, 0.08) !important;
}
html body .view-am .am-gmail-bar .px-check-menu__control.is-active .px-check-menu__check-hit {
  border-radius: 4px 0 0 4px !important;
}
html body .view-am .am-gmail-bar .px-check-menu__control.is-active .px-check-menu__caret {
  border-radius: 0 4px 4px 0 !important;
}
html body .view-am .am-gmail-bar .px-check-menu__pop {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 640 !important;
  min-width: 196px !important;
  padding: 6px 0 !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 8px !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.18) !important;
  box-sizing: border-box !important;
}
html body .view-am .am-gmail-bar .px-check-menu__pop[hidden] { display: none !important; }
html body .view-am .am-gmail-bar .px-check-menu__item {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #202124 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body .view-am .am-gmail-bar .px-check-menu__item:hover {
  background: rgba(60, 64, 67, 0.06) !important;
}
html body .view-am .am-gmail-bar .px-check-menu__range {
  position: relative !important;
}

/* Remove the outer table frame (match proxy — only row dividers remain). */
html body .view-am .acc-table,
html body .view-am .am-table-scroll,
html body .view-am .table-wrap {
  border: 0 !important;
}

/* Row hover / selection — mirror the userbase (.ub2-flat) table exactly:
   a single subtle accent wash on the whole row, painted on the <tr> with the
   cells kept transparent. No side border lines, no box-shadow, no z-index lift.
   The previous Gmail-style treatment added a 1px border-left/right on hover
   (shifting cell content → the checkbox "jittered") and painted the cells
   #f8fbff, which bled over selected rows as a white fill on hover. */
html body .view-am .acc-table tbody tr[data-name]:not(.is-sel-acc):hover {
  z-index: auto !important;
  background-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.04) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .view-am .acc-table tbody tr[data-name]:not(.is-sel-acc):hover td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
/* Selected rows keep the solid selection colour on the <tr> (transparent cells),
   and stay the same colour on hover — no white wash. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover {
  background-color: var(--px-row-selected-bg, #c3dbff) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc td,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Подложки под бейджем роли на выделенной строке больше нет. Она была нужна,
   пока чип роли имел полупрозрачную заливку: та смешивалась с синим
   выделением, и бейдж «уходил за выделение», поэтому под него клали два слоя
   псевдоэлементами (непрозрачный --bg-card плюс копия собственного фона).
   С 08.09.2026 чип нарисован обводкой на прозрачном — как пилюля статуса, у
   которой такой подложки не было никогда, — и непрозрачный слой под ним
   выглядел бы белой карточкой поверх выделения. */

/* Hide refresh (and «Ещё») in selection mode — их правила ставят
   display:inline-flex через ID-специфичность, поэтому скрытие .am-base-action
   тоже идёт с id. «Добавить аккаунты» в этом списке больше нет: кнопка живёт в
   строке опознания и в режиме выделения остаётся на месте. */
html body .view-am .am-gmail-bar.has-selection #am-accounts-refresh,
html body .view-am .am-gmail-bar.has-selection #am-more-menu {
  display: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-action,
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-only,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-action,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-only {
  display: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-action,
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-only,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-action,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-only {
  display: inline-flex !important;
}

/* Счётчик выбранных — общий по всем страницам, виден при любом выделении. */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-table-counter,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-table-counter {
  display: none !important;
  order: 50 !important;
}
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-global-selection .am-table-counter,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-global-selection .am-table-counter {
  display: inline-flex !important;
}

/* Счётчик выбранных прокси — как в таблице аккаунтов. */
html body #view-proxy .px-gmail-bar .am-table-counter,
html body.theme-dark #view-proxy .px-gmail-bar .am-table-counter {
  display: none !important;
  order: 50 !important;
}
html body #view-proxy .px-gmail-bar.has-global-selection .am-table-counter,
html body.theme-dark #view-proxy .px-gmail-bar.has-global-selection .am-table-counter {
  display: inline-flex !important;
}

/* Кнопка «Восстановить» в панели выделения — только во вкладке «Корзина»
   (.is-trash ставится в renderSelectionBar). В остальных вкладках скрыта,
   даже когда есть выделение. */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-restore,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection .am-sel-restore {
  display: none !important;
}
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection.is-trash .am-sel-restore,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar.has-selection.is-trash .am-sel-restore {
  display: inline-flex !important;
}
/* Восстановление — положительное действие: подсвечиваем брендовым синим. */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-restore:hover svg,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar .am-sel-restore:hover svg {
  color: var(--accent, #2563eb);
  stroke: var(--accent, #2563eb);
}


/* Filter sits before delete in selection mode; restore after refresh in normal mode. */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar:not(.has-selection) .am-filter-wrap {
  order: 30;
}
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar:not(.has-selection) #am-more-menu {
  order: 40;
}

/* Accounts: userbase table chrome parity */
html body :is(#view-accounts, .am-embed).view-am .am-table-shell,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-shell {
  --acc-check-col-width: 38px;
  --px-check-align: 15.5px;
  --px-check-hit: 32px;
  --px-check-size: 21px;
  --tp-checkbox-size: 21px;
  --tp-checkbox-color: #444746;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-hover: rgba(68, 71, 70, 0.08);
  --tp-checkbox-svg-empty: url("img/checkbox-empty.svg");
  --tp-checkbox-svg-checked: url("img/checkbox-checked.svg");
  --tp-checkbox-svg-indeterminate: url("img/checkbox-indeterminate.svg");
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
}

html body :is(#view-accounts, .am-embed).view-am .am-table-card,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-card,
html body :is(#view-accounts, .am-embed).view-am .table-card,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .table-card {
  border: 0 !important;
  box-shadow: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar,
html body :is(#view-accounts, .am-embed).view-am .picker-gmail-bar,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .picker-gmail-bar {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar::before,
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar::after,
html body :is(#view-accounts, .am-embed).view-am .px-tabs.px-tabs--row::before,
html body :is(#view-accounts, .am-embed).view-am .px-tabs.px-tabs--row::after {
  content: none !important;
  display: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  justify-content: flex-start !important;
  text-align: left !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child {
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 20px !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control:hover,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-check-on,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-check-mixed,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-check-on,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-check-mixed,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit {
  /* Строки: padding-left 16px у td:first-child (.app-table).
     Тулбар: bar 12px + центр 21px в hit 32px → 17.5px. Сдвиг −1.5px
     даёт общий левый край; −2px совпадает с layout (subpixel). */
  margin-left: -2px !important;
  z-index: 1 !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret {
  margin-left: -5px !important;
  z-index: 2 !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit::before,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: background-color .12s ease !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit::before {
  width: calc(100% - 4px) !important;
  height: 28px !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret::before {
  width: calc(100% - 2px) !important;
  height: 28px !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:hover::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:hover::before,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:hover::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:hover::before {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08)) !important;
}

/* (Удалено: «отмеченный мастер под курсором — #D9D9D9». Подсветку наведения
   и нажатия теперь ведёт канон мастер-чекбокса в конце файла, и #D9D9D9 там
   привязан к активации, а не к отметке. Правило мешало: два id
   (#view-accounts в :is() плюс #am-toolbar-check в :has()) давали вес 2-4-3 —
   выше любого правила канона, — и на отмеченном чекбоксе цвет наведения
   намертво перебивал цвет нажатия. Из-за этого второй клик (снятие) нажатием
   не отзывался. */

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret:hover::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret:hover::before,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret.is-open::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret.is-open::before,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__caret::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__caret::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check-hit:hover,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__caret:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__caret:hover,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__check-hit,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__check-hit::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control.is-active .px-check-menu__check-hit::before {
  background: transparent !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check,
html body :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"],
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  min-width: var(--tp-checkbox-size, 21px) !important;
  min-height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: none !important;
  position: relative !important;
  z-index: 1 !important;
  vertical-align: middle !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
  transition: none !important;
  transform: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check::after,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check::after,
html body :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]::after,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check:checked,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check:checked,
html body :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:checked,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body :is(#view-accounts, .am-embed).view-am .px-check-menu__check:indeterminate,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__check:indeterminate,
html body :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:indeterminate,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table input[type="checkbox"]:indeterminate {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-row-checkbox-color, #babec0) !important;
  color: var(--tp-row-checkbox-color, #babec0) !important;
}

/* Row hover — подсветка чекбокса строки аккаунта */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color, #444746) !important;
  color: var(--tp-checkbox-color, #444746) !important;
}

/* Чекбокс больше не занимает отдельную колонку (он внутри «Аккаунты»), поэтому
   эти правила НЕ должны цепляться к первой колонке через :first-child — иначе
   они зажимали бы «Аккаунты» в 38px. Оставлены только мёртвые селекторы старой
   колонки выбора для истории; ширину «Аккаунтов» задаёт --acc-account-w выше. */
html body :is(#view-accounts, .am-embed).view-am .acc-table thead th[data-col="select"],
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody td[data-col="select"],
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table thead th[data-col="select"],
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody td[data-col="select"] {
  width: var(--acc-check-col-width, 38px) !important;
  min-width: var(--acc-check-col-width, 38px) !important;
  max-width: var(--acc-check-col-width, 38px) !important;
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 0 !important;
  text-align: left !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Accounts table — single, invariant row separator (база).
   The line between accounts must ALWAYS be one continuous 1px stroke of the
   same colour, in every state (idle / hover / selected / multi-selected):
   it must never thicken, recolour, or be interrupted by anything.

   Why it broke:
     • selected cells drew the divider TWICE — `border-bottom: 1px` *and*
       `box-shadow: inset 0 -1px 0` of the same colour — so it read ~2px thick;
     • a floating overlay inside the last cell (the row-action icons, since
       removed) painted over the cell, covering the right edge of the border
       → the white/light gaps the user saw.

   Fix: draw the separator exactly ONCE, as a pseudo-element on the <tr> that
   sits above every cell child, and strip the per-cell border/shadow dividers
   so nothing can ever thicken, recolour, or break it. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name],
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name] {
  position: relative !important;
  /* Скорость выделения/ховера строки — канон MOTION.md (motion.css). */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]::after,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  z-index: 5 !important;            /* above any positioned cell content */
  pointer-events: none !important;
}
/* Remove every per-cell divider so the pseudo-line is the sole, identical line
   — no border-bottom, no inset shadow — selected or not, hovered or not. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name] td,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover td,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc td,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name] td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc td,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover td {
  border: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── «+» add-icon: Базы данных ────────────────────────────
   Круглый «+» в баре остался только у баз — держим его на одном глифе:
   20px, 1.5-stroke, round-cap. Ни прокси, ни аккаунтов здесь нет: их «+»
   ушёл из бара пилюлей в строку опознания (там глиф 18px внутри пилюли,
   см. .am-table-head__add). */
html body .view-userbase--v2 .ub2-gmail-bar #ub2-add-many svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar #ub2-add-many svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke-width: 1.5px !important;
}
html body .view-userbase--v2 .ub2-gmail-bar #ub2-add-many svg path,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar #ub2-add-many svg path {
  fill: none !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* v20 - sidebar hover feedback speed */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible {
  transition: background-color 70ms cubic-bezier(.2, 0, .2, 1), color 70ms cubic-bezier(.2, 0, .2, 1) !important;
  transition-delay: 0ms !important;
}

/* v21 - sidebar modules header and active hover contract */
html body:not(.sidebar-collapsed) #sidebar .nav-section--modules,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-section--modules {
  padding-top: 0 !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title {
  display: none !important;
}

html body.sidebar-collapsed #sidebar .nav-section--modules .nav-section__title,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules .nav-section__title {
  display: none !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):hover,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):hover,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):not(.is-active):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):not(.is-active):focus-visible {
  background: var(--sb-nav-hover-bg) !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  background: var(--sb-nav-active-bg) !important;
}

/* v23 — раскрытое «Ещё» читается как открытая створка, а не как выбранный
   раздел. Вес 500 в сайдбаре занят: им помечена строка того модуля, чья
   страница сейчас открыта. «Ещё» страницы не открывает, поэтому весом не
   выделяется вовсе и остаётся на 400 (v22 поднимал его до 500, и створка
   выглядела выбранным модулем). Своё состояние она показывает иначе —
   подписью «Свернуть», развёрнутой стрелкой и заливкой строки. */

/* Заливка раскрытой створки — та же, что у наведения на строку сайдбара, и
   держится, когда курсор уже ушёл. Цвет берётся токеном --sb-nav-hover-bg,
   который у каждой темы свой, поэтому ночного двойника правилу не нужно.

   Условие — is-more-lit, а не is-more-open: список остаётся раскрытым и
   после выбора модуля, но подсветка тогда уже принадлежит активной строке,
   и створка её отдаёт (класс снимает обработчик пунктов сайдбара). */

/* Accounts: the table owns the first viewport and scrolls inside itself.
   Only the Gmail toolbar sticks to the top; tabs and table headers scroll away
   with the rows. */
html body .main.view-accounts.view-am {
  height: calc(100vh - var(--tp-global-topbar-height, 44px));
  max-height: calc(100vh - var(--tp-global-topbar-height, 44px));
  padding-bottom: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
html body .view-am .am-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
html body .view-am .am-table-card > .am-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Резервируем место под вертикальный скроллбар тела таблицы ВСЕГДА — даже
     когда строк мало и прокрутки нет (например, во вкладке «Корзина» или в любой
     другой категории аккаунтов с малым числом записей). Без этого ширина
     контентной области меняется на ширину каретки (9px) при появлении/исчезно-
     вении скролла, и таблица «прыгает» при переключении между вкладками. Гаттер
     отводится по правому краю независимо от того, виден скроллбар или нет. */
  scrollbar-gutter: stable !important;
}
html body .view-am .am-table-shell > .am-gmail-bar,
html body.theme-dark .view-am .am-table-shell > .am-gmail-bar {
  flex: 0 0 auto;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
}
html body .view-am .am-table-shell > .px-tabs,
html body .view-am .am-table-shell > .am-table-foot {
  flex: 0 0 auto;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* The shell is the vertical scroll container. The table wrapper keeps only the
   horizontal scroll behavior, so px-tabs and thead are part of the vertical
   flow instead of staying pinned above the rows. */
html body .view-am .am-table-shell > .am-table-scroll,
html body.theme-dark .view-am .am-table-shell > .am-table-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: visible !important;
  overflow-x: auto !important;
  position: relative !important;
  z-index: 2 !important;
  /* Нижний отступ — hover-рамка и тень последней строки не уходят под футер. */
  padding-bottom: 6px !important;
}
/* Header cells are ordinary table rows here. The toolbar above is the only
   sticky element in the accounts table area. Именно relative, а не static:
   «не липкая» значит «не sticky», а система координат заголовку нужна — от
   неё считаются зона захвата ширины и шестерёнка (см. блок «РЕСАЙЗ И ПОРЯДОК
   КОЛОНОК»). Со static спор с каноном решался только позицией в файле. */
html body .view-am .am-table-scroll .acc-table thead th,
html body.theme-dark .view-am .am-table-scroll .acc-table thead th {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg-card, #fff) !important;
}

/* Служебный футер таблицы аккаунтов — Gmail-style (хранилище · ссылки · активность). */
html body .view-am .am-table-foot.am-service-foot,
html body.theme-dark .view-am .am-table-foot.am-service-foot {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 52px !important;
  padding: 16px 20px !important;
  background: var(--bg-card, #fff) !important;
  border-top: none !important;
  font-family: var(--app-table-font, var(--app-font)) !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: #70757a !important;
}
html body.theme-dark .view-am .am-table-foot.am-service-foot {
  color: #9aa0a6 !important;
  background: var(--bg-card, #161b27) !important;
}
html body .view-am .am-service-foot__left,
html body .view-am .am-service-foot__center,
html body .view-am .am-service-foot__right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
html body .view-am .am-service-foot__left {
  flex: 0 1 220px !important;
  max-width: 240px !important;
}
html body .view-am .am-service-foot__center {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
  text-align: center !important;
}
html body .view-am .am-service-foot__legal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1.45 !important;
}
html body .view-am .am-service-foot__legal-row {
  display: block !important;
}
html body .view-am .am-service-foot__right {
  flex: 0 1 260px !important;
  max-width: 320px !important;
  text-align: right !important;
}
html body .view-am .am-service-foot__link,
html body .view-am .am-service-foot__details {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
}
html body .view-am .am-service-foot__link:hover,
html body .view-am .am-service-foot__details:hover {
  text-decoration: underline !important;
}
html body .view-am .am-service-foot__sep {
  margin: 0 3px !important;
  opacity: 1 !important;
}
html body .view-am .am-service-foot__activity {
  margin-bottom: 2px !important;
}
html body .view-am .am-service-foot__details-pop {
  position: fixed !important;
  z-index: 250 !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border, #dadce0) !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.18) !important;
  color: var(--text, #3c4043) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
html body.theme-dark .view-am .am-service-foot__details-pop {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
html body .view-am .am-service-foot__details-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
html body .view-am .am-service-foot__details-title {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #202124) !important;
}
html body .view-am .am-service-foot__details-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}
html body .view-am .am-service-foot__details-close:hover {
  background: rgba(68, 71, 70, 0.08) !important;
}
html body .view-am .am-service-foot__details-list {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 4px 12px !important;
  margin: 0 !important;
}
html body .view-am .am-service-foot__details-list dt {
  margin: 0 !important;
  color: var(--text-mute, #70757a) !important;
  font-weight: 400 !important;
}
html body .view-am .am-service-foot__details-list dd {
  margin: 0 !important;
  font-weight: 500 !important;
  color: var(--text, #3c4043) !important;
}
@media (max-width: 960px) {
  html body .view-am .am-service-foot__center {
    order: 3 !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  html body .view-am .am-service-foot__right {
    text-align: left !important;
  }
}

/* Служебный футер таблиц прокси и баз пользователей — точная копия футера
   аккаунтов (полоска · юр. ссылки · активность · подробные сведения). */
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-foot.am-service-foot,
html body.theme-dark :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-foot.am-service-foot {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 52px !important;
  padding: 16px 20px !important;
  background: var(--bg-card, #fff) !important;
  border-top: none !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #70757a !important;
}
html body.theme-dark :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-foot.am-service-foot {
  color: #9aa0a6 !important;
  background: var(--bg-card, #161b27) !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__left,
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__center,
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__left {
  flex: 0 1 220px !important;
  max-width: 240px !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__center {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
  text-align: center !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__legal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1.45 !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__legal-row {
  display: block !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__right {
  flex: 0 1 260px !important;
  max-width: 320px !important;
  text-align: right !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__link,
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__link:hover,
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details:hover {
  text-decoration: underline !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__sep {
  margin: 0 3px !important;
  opacity: 1 !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__activity {
  margin-bottom: 2px !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-pop {
  position: fixed !important;
  z-index: 250 !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border, #dadce0) !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.18) !important;
  color: var(--text, #3c4043) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
html body.theme-dark :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-pop {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-title {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #202124) !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-close:hover {
  background: rgba(68, 71, 70, 0.08) !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-list {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 4px 12px !important;
  margin: 0 !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-list dt {
  margin: 0 !important;
  color: var(--text-mute, #70757a) !important;
  font-weight: 400 !important;
}
html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__details-list dd {
  margin: 0 !important;
  font-weight: 500 !important;
  color: var(--text, #3c4043) !important;
}
@media (max-width: 960px) {
  html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__center {
    order: 3 !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  html body :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-service-foot__right {
    text-align: left !important;
  }
}

/* Скроллбар тела таблицы аккаунтов — классический «гугловский» вид:
   квадратный бегунок #cccccc с рамкой 1px (#bebebe сверху и по бокам,
   #cacaca снизу), ширина каретки 12px, без стрелок вверх/вниз. Дорожка по
   умолчанию прозрачная — виден только бегунок. При наведении: бегунок темнеет
   до #919191 (рамка по бокам и сверху #656565), дорожка заливается #F2F2F2,
   а по правой стороне появляется сплошная линия #D9D9D9 (прерывается кареткой). */
html body .view-am .am-table-card > .am-table-shell,
html body.theme-dark .view-am .am-table-card > .am-table-shell,
html body .view-am .am-table-scroll,
html body.theme-dark .view-am .am-table-scroll {
  /* Дедикейтед-стиль скроллбара ТАБЛИЦЫ аккаунтов (не трогаем глобальный
     `*` скроллбар, т.к. компонент таблицы используется и в других модулях).
     `scrollbar-width: auto` обязателен: при `thin` Chromium игнорирует ширину
     из `::-webkit-scrollbar` и рисует узкий ползунок вместо нужных 12px. */
  scrollbar-width: auto;
  scrollbar-color: #cccccc transparent;
  box-sizing: border-box;
}
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar,
html body .view-am .am-table-scroll::-webkit-scrollbar,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body .view-am .am-table-scroll::-webkit-scrollbar-track,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar-track,
html body .view-am .am-table-scroll::-webkit-scrollbar-track-piece,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 0;
  margin-block: 0;
}
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body .view-am .am-table-scroll::-webkit-scrollbar-thumb,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-clip: border-box;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  /* верх / право / низ / лево */
  border-color: #b7b7b7 transparent #bebebe #b7b7b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
  border-radius: 0;
  min-height: 40px;
}
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body .view-am .am-table-scroll::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
  border-color: #656565 #656565 #cacaca #656565;
}
/* Hovering the scroll area reveals the track and the right guide line. */
html body .view-am .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark .view-am .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body .view-am .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-am .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body .view-am .am-table-scroll:hover::-webkit-scrollbar-track,
html body.theme-dark .view-am .am-table-scroll:hover::-webkit-scrollbar-track,
html body .view-am .am-table-scroll:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-am .am-table-scroll:hover::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2;
  border-right: 1px solid #d9d9d9;
}
html body .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark .view-am .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body .view-am .am-table-scroll::-webkit-scrollbar-button,
html body.theme-dark .view-am .am-table-scroll::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}
/* Небольшой отступ между ячейками и скроллбаром (перебиваем
   .view-am .table-wrap { padding-inline: 0 !important } большей специфичностью). */
html body .view-am .am-table-shell > .am-table-scroll,
html body.theme-dark .view-am .am-table-shell > .am-table-scroll {
  padding-right: 8px !important;
}

/* ── Документный скролл на «Аккаунтах» скрыт ────────────────────────────
   Страница не крутится (overflow у main + shell), правый запас как раньше
   через scrollbar-gutter: stable. Прокрутка списка — у .am-table-shell
   («гугловская» каретка там). Документный webkit-скролл оставляем 12px
   шириной под гаттер, но каретку/трек не рисуем. */
html:has(main.view-am:not([hidden])),
body:has(main.view-am:not([hidden])) {
  overflow-y: hidden !important;
  scrollbar-gutter: stable !important;
}
html:has(main.view-am:not([hidden]))::-webkit-scrollbar,
body:has(main.view-am:not([hidden]))::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
html:has(main.view-am:not([hidden]))::-webkit-scrollbar-thumb,
body:has(main.view-am:not([hidden]))::-webkit-scrollbar-thumb,
html:has(main.view-am:not([hidden]))::-webkit-scrollbar-track,
body:has(main.view-am:not([hidden]))::-webkit-scrollbar-track,
html:has(main.view-am:not([hidden]))::-webkit-scrollbar-track-piece,
body:has(main.view-am:not([hidden]))::-webkit-scrollbar-track-piece,
html:has(main.view-am:not([hidden]))::-webkit-scrollbar-button,
body:has(main.view-am:not([hidden]))::-webkit-scrollbar-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: none;
  width: 0;
  height: 0;
}

/* ---- Accounts table: row hover = top/sides frame + bottom-only shadow (no fill) ----
   The row separator is the single tr::after line and all per-cell borders/shadows are
   stripped !important above. A tr::before overlay can't be used: generated content at
   the START of a table row gets wrapped in an anonymous table-cell that shoves every
   real cell to the right (the visible "jump", which also pushes the checkbox out of
   view). So morph the EXISTING tr::after — already absolute and trailing, so it never
   shifts cells — from a 1px bottom line into a 1px #DADCE0 top/side frame. The
   overlay starts 1px above the row, so the top stroke covers the divider between
   accounts; z-index 6 keeps it above neighbouring dividers (5). The bottom edge is
   shadow-only so it never doubles the account separator. The background:transparent
   (ID specificity) overrides the row wash regardless of the lower-specificity wash
   rule earlier in the file. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:not(.is-sel-acc):hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:not(.is-sel-acc):hover {
  background: transparent !important;
}
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover::after,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px 0 1px !important;
  border-color: #DADCE0 #DADCE0 transparent #DADCE0 !important;
  box-shadow:
    0 2px 4px -1px rgba(60, 64, 67, 0.30),
    0 4px 8px -4px rgba(60, 64, 67, 0.24) !important;
  z-index: 6 !important;
}

html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover::after,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 0 1px 0 !important;
  border-color: #ADC5E4 transparent var(--am-row-divider, rgba(120, 138, 162, 0.18)) transparent !important;
}

/* ── Массовое выделение (drag): пока курсор «тащит» по строкам, гасим
   ховер-подъём (рамка + двойная тень). Во время выделения он только мешает и
   даёт лишнюю перерисовку blurred-тени на каждой строке под курсором. Сама
   подсветка выбора остаётся мгновенной и чёткой.
   Селектор с #id перебивает hover-правила без id в любой теме. */
html body.is-drag-selecting :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover::after,
html body.theme-dark.is-drag-selecting :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name]:hover::after {
  inset: auto 0 0 0 !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PROXY = ACCOUNTS (этап 6). Прокси-таблица повторяет оболочку таблицы
   аккаунтов один в один: страница не скроллится — вертикальный скролл у
   .am-table-shell внутри карточки, липнет только Gmail-тулбар; «гугловский»
   скроллбар; один непрерывный разделитель строк через tr::after; Gmail-ховер
   строки (рамка #DADCE0 + тень, без заливки); паритет чекбоксов строк.
   Это зеркало одноимённых правил .view-am выше — их селекторы пинят
   контрактные тесты, поэтому аккаунты не трогаем, а дублируем скоуп.
   ──────────────────────────────────────────────────────────────────────── */
html body .main.view-proxy {
  height: calc(100vh - var(--tp-global-topbar-height, 44px));
  max-height: calc(100vh - var(--tp-global-topbar-height, 44px));
  padding-bottom: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
html body .view-proxy .am-table-card > .am-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Гаттер зарезервирован всегда — таблица не «прыгает» при появлении
     прокрутки (см. одноимённое правило аккаунтов). */
  scrollbar-gutter: stable !important;
}
html body .view-proxy .am-table-shell > .px-gmail-bar,
html body .view-proxy .am-table-shell > .picker-gmail-bar.px-gmail-bar,
html body.theme-dark .view-proxy .am-table-shell > .px-gmail-bar {
  flex: 0 0 auto;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #view-proxy .am-table-shell > .picker-gmail-bar.am-gmail-bar.is-scroll-raised,
html body.theme-dark #view-proxy .am-table-shell > .picker-gmail-bar.am-gmail-bar.is-scroll-raised {
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1) !important;
}
html body .view-proxy .am-table-shell > .px-tabs,
html body .view-proxy .am-table-shell > .am-table-foot {
  flex: 0 0 auto;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* Обёртка таблицы — только горизонтальная прокрутка; вкладки и шапка уходят
   вверх вместе со строками. */
html body .view-proxy .am-table-shell > .am-table-scroll,
html body.theme-dark .view-proxy .am-table-shell > .am-table-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: visible !important;
  overflow-x: auto !important;
  position: relative !important;
  z-index: 2 !important;
  /* Нижний отступ — hover-рамка и тень последней строки не уходят под футер. */
  padding-bottom: 6px !important;
  /* Небольшой отступ между ячейками и скроллбаром. */
  padding-right: 8px !important;
}
/* Шапка — обычные строки таблицы: липкость не возвращается. Именно relative,
   а не static: заголовок остаётся системой координат для зоны захвата ширины
   и шестерёнки (см. блок «РЕСАЙЗ И ПОРЯДОК КОЛОНОК»). */
html body .view-proxy .am-table-scroll .px-flat__table thead th,
html body.theme-dark .view-proxy .am-table-scroll .px-flat__table thead th {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg-card, #fff) !important;
}

/* Скроллбар тела таблицы прокси — классический «гугловский», как у аккаунтов. */
html body .view-proxy .am-table-card > .am-table-shell,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell,
html body .view-proxy .am-table-scroll,
html body.theme-dark .view-proxy .am-table-scroll {
  scrollbar-width: auto;
  scrollbar-color: #cccccc transparent;
  box-sizing: border-box;
}
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar,
html body .view-proxy .am-table-scroll::-webkit-scrollbar,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body .view-proxy .am-table-scroll::-webkit-scrollbar-track,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar-track,
html body .view-proxy .am-table-scroll::-webkit-scrollbar-track-piece,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 0;
  margin-block: 0;
}
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body .view-proxy .am-table-scroll::-webkit-scrollbar-thumb,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-clip: border-box;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  /* верх / право / низ / лево */
  border-color: #b7b7b7 transparent #bebebe #b7b7b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
  border-radius: 0;
  min-height: 40px;
}
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body .view-proxy .am-table-scroll::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
  border-color: #656565 #656565 #cacaca #656565;
}
html body .view-proxy .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body .view-proxy .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body .view-proxy .am-table-scroll:hover::-webkit-scrollbar-track,
html body.theme-dark .view-proxy .am-table-scroll:hover::-webkit-scrollbar-track,
html body .view-proxy .am-table-scroll:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-proxy .am-table-scroll:hover::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2;
  border-right: 1px solid #d9d9d9;
}
html body .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark .view-proxy .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body .view-proxy .am-table-scroll::-webkit-scrollbar-button,
html body.theme-dark .view-proxy .am-table-scroll::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   TASKS = ACCOUNTS. Диспетчер задач повторяет оболочку таблицы аккаунтов
   один в один: страница не скроллится — вертикальный скролл у .am-table-shell
   внутри карточки, липнет только Gmail-тулбар; «гугловский» скроллбар;
   вкладки и шапка уезжают вверх вместе со строками. Зеркало одноимённых
   правил .view-am/.view-proxy выше — их селекторы пинят контрактные тесты,
   поэтому существующие блоки не трогаем, а дублируем скоуп.
   ──────────────────────────────────────────────────────────────────────── */
html body .main.view-tasks {
  height: calc(100vh - var(--tp-global-topbar-height, 44px));
  max-height: calc(100vh - var(--tp-global-topbar-height, 44px));
  /* Как у аккаунтов/прокси: edge-to-edge рельс + только низ 16px. */
  padding-bottom: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
/* Документный скролл на задачах выключен (страница не крутится), но правый
   запас как у аккаунтов/прокси остаётся через scrollbar-gutter: stable.
   Прокрутка списка — только у .am-table-shell ниже. */
html:has(main.view-tasks:not([hidden])),
body:has(main.view-tasks:not([hidden])) {
  overflow-y: hidden !important;
  scrollbar-gutter: stable !important;
}
html:has(main.view-tasks:not([hidden]))::-webkit-scrollbar,
body:has(main.view-tasks:not([hidden]))::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
html:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-thumb,
body:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-thumb,
html:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-track,
body:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-track,
html:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-track-piece,
body:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-track-piece,
html:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-button,
body:has(main.view-tasks:not([hidden]))::-webkit-scrollbar-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: none;
  width: 0;
  height: 0;
}
html body .view-tasks .am-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
/* Карточка таблицы задач — без внешней обводки и тени, как в аккаунтах. */
html body #view-tasks.view-tasks .am-table-card,
html body.theme-dark #view-tasks.view-tasks .am-table-card,
html body #view-tasks.view-tasks .table-card,
html body.theme-dark #view-tasks.view-tasks .table-card {
  border: 0 !important;
  box-shadow: none !important;
}
/* Вкладки статусов — без верхней/нижней линии и псевдоэлементов (как в аккаунтах);
   верхняя линия шапки таблицы приезжает из канонического контракта .app-table. */
html body #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row,
html body.theme-dark #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html body #view-tasks.view-tasks .am-gmail-bar::before,
html body #view-tasks.view-tasks .am-gmail-bar::after,
html body #view-tasks.view-tasks .px-tabs.px-tabs--row::before,
html body #view-tasks.view-tasks .px-tabs.px-tabs--row::after {
  content: none !important;
  display: none !important;
}
/* Первая вкладка выровнена по левому краю шапки первой колонки (как в аккаунтах). */
html body #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child,
html body.theme-dark #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab:first-child {
  padding-left: var(--px-check-align, 15.5px) !important;
  padding-right: 20px !important;
}
html body .view-tasks .am-table-card > .am-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Гаттер зарезервирован всегда — таблица не «прыгает» при появлении
     прокрутки (см. одноимённое правило аккаунтов). */
  scrollbar-gutter: stable !important;
}
html body .view-tasks .am-table-shell > .am-gmail-bar,
html body.theme-dark .view-tasks .am-table-shell > .am-gmail-bar {
  flex: 0 0 auto;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #view-tasks .am-table-shell > .picker-gmail-bar.am-gmail-bar.tm-gmail-bar.is-scroll-raised,
html body.theme-dark #view-tasks .am-table-shell > .picker-gmail-bar.am-gmail-bar.tm-gmail-bar.is-scroll-raised {
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1) !important;
}
/* Gmail-бар задач — контейнер и круглые кнопки-иконки как в аккаунтах
   (зеркало правил .view-am .am-gmail-bar). */
html body .view-tasks .am-gmail-bar,
html body.theme-dark .view-tasks .am-gmail-bar {
  background: var(--card, #fff) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  min-height: 48px !important;
  padding: 0px 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action {
  border: 0 !important;
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action:hover,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action:hover {
  background: rgba(60, 64, 67, 0.08) !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-active,
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-on,
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-open,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-active,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-on,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-open {
  background: rgba(var(--am-accent-rgb, 37, 99, 235), 0.1) !important;
  color: var(--am-accent, #2563eb) !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action svg,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action svg {
  width: 20px !important;
  height: 20px !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]),
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]) {
  stroke-width: 1.5px !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg {
  color: #444746 !important;
}
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"],
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"] *:not([stroke="none"]),
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"],
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg[fill="none"] *:not([stroke="none"]) {
  stroke: #444746 !important;
}
/* Бейджи-счётчики на кнопках фильтров (тип задач, дата) — как в аккаунтах. */
html body .view-tasks .am-gmail-bar .picker-gmail-bar__badge,
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  background: var(--am-accent, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--card, #fff) !important;
}
html body .view-tasks .tm-kind-wrap,
html body.theme-dark .view-tasks .tm-kind-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .view-tasks .am-table-shell > .px-tabs,
html body .view-tasks .am-table-shell > .am-table-foot,
html body .view-tasks .am-table-shell > .tm-scheduled {
  flex: 0 0 auto;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* Обёртка таблицы — только горизонтальная прокрутка; вкладки и шапка уходят
   вверх вместе со строками (как у аккаунтов/прокси). */
html body .view-tasks .am-table-shell > .am-table-scroll,
html body.theme-dark .view-tasks .am-table-shell > .am-table-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: visible !important;
  overflow-x: auto !important;
  position: relative !important;
  z-index: 2 !important;
  /* Нижний отступ — hover-рамка и тень последней строки не уходят под футер. */
  padding-bottom: 6px !important;
  /* Небольшой отступ между ячейками и скроллбаром. */
  padding-right: 8px !important;
}
@media (max-width: 900px) {
  html body .view-tasks .am-table-shell > .am-table-scroll,
  html body.theme-dark .view-tasks .am-table-shell > .am-table-scroll {
    overflow-x: auto !important;
  }
}
/* Карточка задач клипает содержимое по скруглению 14px — как в аккаунтах:
   иначе квадратные углы внутренней оболочки .am-table-shell и её скроллбара
   вылезают за скруглённый угол карточки. Липкость тулбара живёт внутри
   .am-table-shell (это и есть скролл-контейнер). */
html body .view-tasks .table-card.am-table-card,
html body.theme-dark .view-tasks .table-card.am-table-card {
  overflow: hidden !important;
}
/* Шапка — обычные строки таблицы: липкость не возвращается (иначе sticky
   цепляется к вьюпорту и возвращает скролл страницы). Именно relative, а не
   static: заголовок остаётся системой координат для зоны захвата ширины и
   шестерёнки (см. блок «РЕСАЙЗ И ПОРЯДОК КОЛОНОК»). */
html body .view-tasks .am-table-scroll .tm-table thead th,
html body.theme-dark .view-tasks .am-table-scroll .tm-table thead th {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg-card, #fff) !important;
}

/* Скроллбар тела таблицы задач — классический «гугловский», как у аккаунтов. */
html body .view-tasks .am-table-card > .am-table-shell,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell,
html body .view-tasks .am-table-scroll,
html body.theme-dark .view-tasks .am-table-scroll {
  scrollbar-width: auto;
  scrollbar-color: #cccccc transparent;
  box-sizing: border-box;
}
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar,
html body .view-tasks .am-table-scroll::-webkit-scrollbar,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-track,
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-track-piece,
html body .view-tasks .am-table-scroll::-webkit-scrollbar-track,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar-track,
html body .view-tasks .am-table-scroll::-webkit-scrollbar-track-piece,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 0;
  margin-block: 0;
}
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-thumb,
html body .view-tasks .am-table-scroll::-webkit-scrollbar-thumb,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-clip: border-box;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  /* верх / право / низ / лево */
  border-color: #b7b7b7 transparent #bebebe #b7b7b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
  border-radius: 0;
  min-height: 40px;
}
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body .view-tasks .am-table-scroll::-webkit-scrollbar-thumb:hover,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
  border-color: #656565 #656565 #cacaca #656565;
}
html body .view-tasks .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track,
html body .view-tasks .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body .view-tasks .am-table-scroll:hover::-webkit-scrollbar-track,
html body.theme-dark .view-tasks .am-table-scroll:hover::-webkit-scrollbar-track,
html body .view-tasks .am-table-scroll:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .view-tasks .am-table-scroll:hover::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2;
  border-right: 1px solid #d9d9d9;
}
html body .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark .view-tasks .am-table-card > .am-table-shell::-webkit-scrollbar-button,
html body .view-tasks .am-table-scroll::-webkit-scrollbar-button,
html body.theme-dark .view-tasks .am-table-scroll::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* Модульная геометрия таблицы задач: ячеечные детали. Оболочка (шрифт,
   шапка, hover, выделение) — канонический контракт .app-table в конце файла,
   а набор, порядок и ШИРИНЫ колонок задаёт общий модуль колонок: он ставит
   ширину инлайном в th. Поэтому здесь нет ни colgroup-долей, ни min-width
   таблицы — модуль всегда укладывает сумму ширин ровно в контейнер, а тесноту
   разбирает горизонтальная прокрутка .am-table-scroll по минимумам колонок. */

/* Колонки переставляются, поэтому позиционных правил (nth-child) быть не
   может: всё, что принадлежит колонке, адресуется по её data-col. */
html body .view-tasks .tm-table thead th[data-col],
html body .view-tasks .tm-table tbody td[data-col],
html body.theme-dark .view-tasks .tm-table thead th[data-col],
html body.theme-dark .view-tasks .tm-table tbody td[data-col] {
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Первая колонка держит чекбокс выбора и порядковый номер — её содержимое
   по горизонтали не обрезаем, иначе при сужении пропадёт сам чекбокс. */
html body .view-tasks .tm-table tbody td[data-col="title"],
html body.theme-dark .view-tasks .tm-table tbody td[data-col="title"] {
  overflow: visible !important;
}
/* Своего правила выравнивания у «Активности» и «Длительности» нет намеренно —
   они идут по левому краю от общего правила выше, как все прочие
   колонки. Правое выравнивание снято не только ради единообразия. Значение
   стояло вплотную к правой границе колонки, и подпись в шапке, и дата в
   строке держали до разделителя один и тот же отступ. Поэтому при
   перетаскивании .am-col-grip они ехали вместе с границей, колонка под
   курсором выглядела неизменной и ресайз казался мёртвым, хотя ширина честно
   пересчитывалась. Слева отступ до значения постоянный, и любое изменение
   ширины сразу видно по зазору до соседа справа. */

/* Порядкового номера у строки задач нет (снят в июле 2026): первая ячейка —
   чекбокс и сразу заголовок задачи, зазор между ними раздаёт flex-gap
   .tm-task-cell (канон LEAD RAIL). */
html body .view-tasks .tm-table tbody tr[data-task-id] {
  cursor: pointer;
}
/* Вертикальная геометрия строки: td наследуют канонический
   vertical-align: middle из контракта .app-table — одиночные элементы
   (статус, дата, действия) стоят на вертикальной середине строки, а
   двухстрочные блоки (заголовок+тип, бар+текст прогресса) центрируются
   как единое целое. Никакого модульного override vertical-align: top —
   он прижимал одиночные ячейки к верху и строка выглядела перекошенной. */
html body .view-tasks .tm-task-cell__body,
html body .view-tasks .tm-status-cell,
html body .view-tasks .tm-progress-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
html body .view-tasks .tm-row-primary,
html body .view-tasks .tm-table__title {
  display: flex;
  align-items: center;
  min-height: 24px;
  height: 24px;
  line-height: 20px;
  box-sizing: border-box;
}
html body .view-tasks .tm-table__title {
  font-weight: 500;
  color: var(--text, #1c2434);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
html body .view-tasks .tm-table__sub {
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  margin-top: 0;
}
html body .view-tasks .tm-table__error {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  margin-top: 0;
  color: var(--danger, #e23f3f);
}
/* ── Иконки строки: оверлей, а не колонка ──────────────────────────────────
   Своей колонки у действий нет: группа кнопок прижата к правому краю строки
   и лежит поверх последней ячейки. Контейнер — именно последняя ячейка:
   какая колонка окажется последней, решает пользователь шестерёнкой, а правый
   край строки один и тот же.
   В аккаунтах и прокси такого оверлея больше нет: команды строки открывает
   правая кнопка (#am-actions-menu). Задачи — единственная таблица, где
   кнопки живут прямо в строке: пауза, стоп и «Продолжить» нужны сразу. */
html body .view-tasks .tm-table tbody tr[data-task-id] > td:last-child,
html body .view-tasks .tm-table tbody tr[data-sched-id] > td:last-child {
  position: relative;
}
html body .view-tasks .tm-row-acts {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  z-index: 3;
}
/* Корзина — только под курсором строки (и при переходе по Tab). Пауза, стоп
   и «Продолжить» рядом с ней видны всегда: активной задачей управляют, не
   выцеливая строку курсором.

   Прячем прозрачностью, а НЕ visibility: hidden — иначе кнопка выпадает из
   обхода по Tab, до неё нельзя доехать с клавиатуры, и ветка :focus-within
   ниже никогда не срабатывает (проверено в живом приложении). Кликов по
   невидимой кнопке не будет: их снимает pointer-events. */
html body .view-tasks .tm-row-acts__hover {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
html body .view-tasks .tm-table tbody tr:hover .tm-row-acts__hover,
html body .view-tasks .tm-table tbody tr:focus-within .tm-row-acts__hover {
  opacity: 1;
  pointer-events: auto;
}
/* Размер и толщина глифа — в базовом правиле .tm-card__act (style.css): оно
   одно на строку таблицы и шапку карточки задачи, дублировать его здесь
   значило бы завести второй источник правды. */
/* Тач-экран: наведения нет — корзина видна всегда. */
@media (hover: none) {
  html body .view-tasks .tm-row-acts__hover {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Первая ячейка: чекбокс выделения + название/тип задачи. Чекбокс
   центрируется по вертикали относительно двухстрочного блока (margin-top
   не работает: Material-блок чекбоксов задаёт margin: 0 !important). */
html body .view-tasks .tm-task-cell {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
html body .view-tasks .tm-task-cell__body {
  flex: 1;
  min-width: 0;
}
/* Прогресс-бар фиксированной ширины на линии заголовка (tm-table__title). */
html body .view-tasks .tm-table .task-progress-bar {
  width: 140px;
  max-width: 140px;
  height: 6px;
  flex-shrink: 0;
}
/* Чекбоксы задач — единый Material-стиль списочных таблиц, в точности как в
   аккаунтах/прокси/базах: SVG-глиф подаётся через mask-image, цвет даёт
   background-color (обводка невыбранной строки #babec1, при hover/checked —
   #444746; мастер в тулбаре всегда #444746). Hover — круглое кольцо 40px
   (::before), как в прокси/базах. Никаких background-image и рисованных
   галочек. */
html body .view-tasks .am-table-shell,
html body.theme-dark .view-tasks .am-table-shell {
  --tp-checkbox-size: 21px;
  --tp-checkbox-color: #444746;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-hover-ring: rgba(68, 71, 70, 0.08);
  --tp-checkbox-svg-empty: url("img/checkbox-empty.svg");
  --tp-checkbox-svg-checked: url("img/checkbox-checked.svg");
  --tp-checkbox-svg-indeterminate: url("img/checkbox-indeterminate.svg");
}
html body .view-tasks .tm-row-check,
html body.theme-dark .view-tasks .tm-row-check,
html body .view-tasks .tm-check-menu .px-check-menu__check,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  min-width: var(--tp-checkbox-size, 21px) !important;
  min-height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: none !important;
  position: relative !important;
  z-index: 1 !important;
  vertical-align: middle !important;
  transition: none !important;
  transform: none !important;
  outline-offset: 0 !important;
}
html body .view-tasks .tm-row-check::after,
html body.theme-dark .view-tasks .tm-row-check::after,
html body .view-tasks .tm-check-menu .px-check-menu__check::after,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check::after {
  content: none !important;
  display: none !important;
}
html body .view-tasks .tm-row-check:checked,
html body.theme-dark .view-tasks .tm-row-check:checked,
html body .view-tasks .tm-check-menu .px-check-menu__check:checked,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}
html body .view-tasks .tm-row-check:indeterminate,
html body.theme-dark .view-tasks .tm-row-check:indeterminate,
html body .view-tasks .tm-check-menu .px-check-menu__check:indeterminate,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check:indeterminate {
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}
/* Невыбранный чекбокс строки — приглушённая обводка #babec1, при наведении
   темнеет до #444746 (паритет с аккаунтами/прокси/базами). */
html body .view-tasks .tm-table tbody .tm-row-check:not(:checked):not(:indeterminate),
html body.theme-dark .view-tasks .tm-table tbody .tm-row-check:not(:checked):not(:indeterminate) {
  background-color: var(--tp-row-checkbox-color, #babec1) !important;
  color: var(--tp-row-checkbox-color, #babec1) !important;
  transition: background-color .12s ease !important;
}
html body .view-tasks .tm-table tbody .tm-row-check:not(:checked):not(:indeterminate):not(:disabled):hover,
html body.theme-dark .view-tasks .tm-table tbody .tm-row-check:not(:checked):not(:indeterminate):not(:disabled):hover {
  background-color: var(--tp-checkbox-color, #444746) !important;
  color: var(--tp-checkbox-color, #444746) !important;
}
/* Круглое hover-кольцо 40px за чекбоксом строки — как в прокси/базах;
   у тулбарного мастера ховер даёт квадратная зона .px-check-menu__check-hit. */
html body .view-tasks .tm-row-check::before,
html body.theme-dark .view-tasks .tm-row-check::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: background-color .12s ease !important;
}
html body .view-tasks .tm-row-check:not(:disabled):hover::before,
html body.theme-dark .view-tasks .tm-row-check:not(:disabled):hover::before {
  background: var(--tp-checkbox-hover-ring, rgba(68, 71, 70, 0.08)) !important;
}
html body .view-tasks .tm-row-check:focus-visible,
html body.theme-dark .view-tasks .tm-row-check:focus-visible,
html body .view-tasks .tm-check-menu .px-check-menu__check:focus-visible,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35) !important;
  outline-offset: 3px !important;
}
html body .view-tasks .tm-row-check:disabled,
html body.theme-dark .view-tasks .tm-row-check:disabled,
html body .view-tasks .tm-check-menu .px-check-menu__check:disabled,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check:disabled {
  opacity: .35 !important;
  cursor: default !important;
}
/* Разделитель строк — как в аккаунтах: одна полупрозрачная линия ::after на
   <tr>, пер-ячеечные border-bottom сняты. Иначе между выделенными строками
   видна светлая линия границы ячеек. */
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id],
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id],
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id],
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id] {
  position: relative !important;
}
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id]::after,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id]::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id] td,
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:hover td,
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task td,
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task:hover td,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id] td,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:hover td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id] td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:hover td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task:hover td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id] td,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:hover td {
  border: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Ховер строки задачи = Material-подъём: рамка сверху/по бокам + тень снизу,
   без заливки. Точное зеркало аккаунтов (#view-accounts), прокси (#view-proxy)
   и баз (#view-userbase). Канонический фон-вош .app-table (rgba(37,99,235,.04))
   гасим прозрачным фоном с ID-специфичностью #view-tasks, а существующий
   ::after-разделитель морфим из 1px-линии в рамку #DADCE0 с двойной тенью.
   Оверлей стартует на 1px выше строки (закрывает верхний разделитель),
   z-index 6 держит его над соседними разделителями (5). */
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:not(.is-sel-task):hover,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:not(.is-sel-task):hover,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:not(.is-sel-task):hover,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:not(.is-sel-task):hover {
  background: transparent !important;
}
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:hover::after,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:hover::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id]:hover::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id]:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px 0 1px !important;
  border-color: #DADCE0 #DADCE0 transparent #DADCE0 !important;
  box-shadow:
    0 2px 4px -1px rgba(60, 64, 67, 0.30),
    0 4px 8px -4px rgba(60, 64, 67, 0.24) !important;
  z-index: 6 !important;
}
/* Ховер уже выделенной строки: сохраняем сплошную заливку выбора, ::after даёт
   только верхнюю (#ADC5E4) и нижнюю (divider) кромки без тени — как в аккаунтах. */
html body #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task:hover::after,
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id].is-sel-task:hover::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-task-id].is-sel-task:hover::after,
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id].is-sel-task:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 0 1px 0 !important;
  border-color: #ADC5E4 transparent var(--am-row-divider, rgba(120, 138, 162, 0.18)) transparent !important;
}
/* Первая ячейка не клипает hover-ореол чекбокса (как в аккаунтах/прокси). */
html body .view-tasks .tm-table thead th:first-child,
html body .view-tasks .tm-table tbody td:first-child,
html body.theme-dark .view-tasks .tm-table thead th:first-child,
html body.theme-dark .view-tasks .tm-table tbody td:first-child {
  overflow: visible !important;
}
/* Чекбокс-выделение в баре задач — зеркало px-check-menu прокси/аккаунтов. */
html body .view-tasks .tm-check-menu,
html body.theme-dark .view-tasks .tm-check-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__control,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control {
  display: inline-flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 !important;
  background: transparent !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color .12s ease !important;
}
/* Caret меню выделения — зеркало аккаунтов/прокси/баз (.px-check-menu__caret). */
html body .view-tasks .tm-check-menu .px-check-menu__caret,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  isolation: isolate !important;
  width: 22px !important;
  height: 32px !important;
  margin: 0 0 0 -5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--px-gmail-icon, #444746) !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background-color .12s ease !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__caret svg,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit,
html body .view-tasks .tm-check-menu .px-check-menu__caret,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret {
  position: relative !important;
  isolation: isolate !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit::before,
html body .view-tasks .tm-check-menu .px-check-menu__caret::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: background-color .12s ease !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit::before {
  width: calc(100% - 4px) !important;
  height: 28px !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__caret::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret::before {
  width: calc(100% - 2px) !important;
  height: 28px !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit:hover::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit:hover::before,
html body .view-tasks .tm-check-menu .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit:has(.px-check-menu__check:focus-visible)::before,
html body .view-tasks .tm-check-menu .px-check-menu__caret:hover::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret:hover::before,
html body .view-tasks .tm-check-menu .px-check-menu__caret.is-open::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret.is-open::before,
html body .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__caret::before,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__caret::before {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__check-hit:hover,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__check-hit:hover,
html body .view-tasks .tm-check-menu .px-check-menu__caret:hover,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret:hover,
html body .view-tasks .tm-check-menu .px-check-menu__caret.is-open,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__caret.is-open,
html body .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__check-hit,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__check-hit,
html body .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__caret,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-active .px-check-menu__caret {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html body .view-tasks .tm-check-menu .px-check-menu__control,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control,
html body .view-tasks .tm-check-menu .px-check-menu__control:hover,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control:hover,
html body .view-tasks .tm-check-menu .px-check-menu__control.is-check-on,
html body .view-tasks .tm-check-menu .px-check-menu__control.is-check-mixed,
html body .view-tasks .tm-check-menu .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body .view-tasks .tm-check-menu .px-check-menu__control.is-active,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-check-on,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-check-mixed,
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control:has(.px-check-menu__caret.is-open),
html body.theme-dark .view-tasks .tm-check-menu .px-check-menu__control.is-active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
/* Отрисовка самого чекбокса тулбара — общий Material-блок выше
   (.tm-check-menu .px-check-menu__check в списке с .tm-row-check). */
/* Счётчик выбранного — как в аккаунтах/прокси: после всех иконок
   (order: 50), с разделительной чертой и muted-стилем .picker-counter. */
html body #view-tasks.view-tasks .am-gmail-bar .am-table-counter,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .am-table-counter {
  display: none !important;
  order: 50 !important;
}
html body #view-tasks.view-tasks .am-gmail-bar.has-global-selection .am-table-counter,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar.has-global-selection .am-table-counter {
  display: inline-flex !important;
}
/* Кнопка «Удалить выбранные» видна только при выделении: перебиваем
   display: flex общих кнопок бара, иначе [hidden] игнорируется.
   Hover — общий .picker-gmail-bar__action:hover (как у tm-kind-toggle),
   без красной подсветки опасного действия. */
html body .view-tasks .am-gmail-bar .picker-gmail-bar__action.tm-sel-delete[hidden],
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action.tm-sel-delete[hidden] {
  display: none !important;
}
/* Пагинация задач — зеркало аккаунтов (.view-am .am-gmail-bar .picker-pagination*):
   круглые кнопки 32×32, шевроны 20px, nav 64px без gap. */
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 168px !important;
}
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination__info,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__info {
  color: #5e5e5e !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  font-family: var(--app-font) !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination__nav,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__nav {
  flex: 0 0 64px !important;
  width: 64px !important;
  gap: 0 !important;
}
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn:hover:not([disabled]),
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}
/* Верхние углы карточки задач скруглены, как у аккаунтов (14px). Скругление
   несёт сам Gmail-бар — его белый фон закрашивал угол карточки. */
html body .view-tasks .table-card.am-table-card,
html body.theme-dark .view-tasks .table-card.am-table-card {
  border-radius: 14px !important;
}
html body .view-tasks .am-table-shell > .tm-gmail-bar,
html body.theme-dark .view-tasks .am-table-shell > .tm-gmail-bar {
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}
/* Секция расписаний внутри оболочки — свои отступы, т.к. паддингов вида нет. */
html body .view-tasks .am-table-shell > .tm-scheduled {
  padding: 16px 20px;
}

/* Документный скролл на прокси скрыт — как у аккаунтов/задач: gutter
   справа (scrollbar-gutter: stable), каретка документа не рисуется.
   Прокрутка списка — у .am-table-shell. */
html:has(main.view-proxy:not([hidden])),
body:has(main.view-proxy:not([hidden])) {
  overflow-y: hidden !important;
  scrollbar-gutter: stable !important;
}
html:has(main.view-proxy:not([hidden]))::-webkit-scrollbar,
body:has(main.view-proxy:not([hidden]))::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
html:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-thumb,
body:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-thumb,
html:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-track,
body:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-track,
html:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-track-piece,
body:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-track-piece,
html:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-button,
body:has(main.view-proxy:not([hidden]))::-webkit-scrollbar-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: none;
  width: 0;
  height: 0;
}

/* ── Строки прокси: один непрерывный 1px-разделитель через tr::after и
   Gmail-ховер (рамка + тень, без заливки) — зеркало правил tr[data-name]
   таблицы аккаунтов. Разделители на td гасятся, чтобы линия никогда не
   двоилась (id-специфичность перебивает td-бордеры v15.x). */
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row {
  position: relative !important;
  /* Скорость выделения/ховера строки — канон MOTION.md (motion.css). */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row::after,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row td,
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover td,
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row td,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover td,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover td {
  border: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:not(.is-sel-row):hover {
  background: transparent !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px 0 1px !important;
  border-color: #DADCE0 #DADCE0 transparent #DADCE0 !important;
  box-shadow:
    0 2px 4px -1px rgba(60, 64, 67, 0.30),
    0 4px 8px -4px rgba(60, 64, 67, 0.24) !important;
  z-index: 6 !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover::after,
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row.is-sel-row:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 0 1px 0 !important;
  border-color: #ADC5E4 transparent var(--am-row-divider, rgba(120, 138, 162, 0.18)) transparent !important;
}
/* Массовое выделение (drag): гасим ховер-подъём, как в аккаунтах. */
html body.is-drag-selecting #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after,
html body.theme-dark.is-drag-selecting #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after,
html body.is-proxy-bulk-selecting #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after,
html body.theme-dark.is-proxy-bulk-selecting #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover::after {
  inset: auto 0 0 0 !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  box-shadow: none !important;
}

/* ── Чекбоксы строк прокси: паритет с аккаунтами (#babec1, затемнение при
   ховере строки) — зеркало правил #view-accounts выше. */
html body #view-proxy.view-proxy .px-flat__table tbody input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-row-checkbox-color, #babec0) !important;
  color: var(--tp-row-checkbox-color, #babec0) !important;
}
html body #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover input[type="checkbox"]:not(:checked):not(:indeterminate),
html body.theme-dark #view-proxy.view-proxy .px-flat__table tbody tr.px-flat__row:hover input[type="checkbox"]:not(:checked):not(:indeterminate) {
  background-color: var(--tp-checkbox-color, #444746) !important;
  color: var(--tp-checkbox-color, #444746) !important;
}

/* ========================================================================
   Toolbar select-all combo: checkbox + caret share ONE outline.
   When the caret menu is open (.is-active) or the checkbox is
   checked / indeterminate, a single rounded pill wraps both controls —
   no per-element backdrop, so the two boxes never stack into a double
   outline. Applies to accounts (view-am), userbase (v2), proxy and tasks.
   ===================================================================== */
html body .view-proxy .px-check-menu__control,
html body.theme-dark .view-proxy .px-check-menu__control,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__control,
html body :is(#view-accounts, .am-embed).view-am .px-check-menu__control,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .px-check-menu__control,
html body #view-tasks.view-tasks .px-check-menu__control,
html body.theme-dark #view-tasks.view-tasks .px-check-menu__control {
  position: relative !important;
}

/* Здесь жила «единая пилюля» v14: 30px, скругление 8px, заливка 8% чёрного —
   предшественница нынешней конструкции «обводка + две заливки» (канон
   мастер-чекбокса в конце файла). Снесена целиком, а не подправлена, по двум
   причинам.

   1) Условие. У прокси, баз и диспетчера она зажигалась по
      :has(.px-check-menu__check:checked/:indeterminate), то есть от ЛЮБОГО
      выделения — в том числе набранного протяжкой по строкам. У аккаунтов —
      только по .is-active/.is-sel-pill, то есть по действию самого мастера.
      Одна и та же связка в двух таблицах вела себя по-разному, и именно это
      бросалось в глаза при сравнении.
   2) Вес. :has() добавляет специфичность своего аргумента, поэтому эти
      селекторы (1,6,3) перебивали канон (1,4,3) и в состоянии «отмечен»
      возвращали старую геометрию 30px/r8 поверх новой 32px/r3. Канон не мог
      её переписать, не отращивая себе лишних псевдоклассов.

   Всё, что рисовал этот блок, канон рисует сам и для всех одиннадцати
   панелей: .is-active он тоже покрывает. */

/* Парное правило той же пилюли — оно гасило собственные подложки чекбокса и
   каретки, пока пилюля закрывала их собой. Заливки теперь и есть конструкция
   (канон рисует их вместо пилюли), гасить нечего. */

/* ════════════════════════════════════════════════════════════════
   Окно импорта session-аккаунтов (#session-import-modal).
   Визуальный язык — как у окна «Добавление аккаунтов» (#add-modal .addw):
   шрифт Google Sans, скруглённая панель, залитые иконки #0b57d0,
   кнопки-«пилюли» 40px/радиус 20px. В ОТЛИЧИЕ от addw — тема-адаптивно:
   текст/фон/границы на токенах, зашиты только акцент и типографика.
   Крестик и поддержка тёмной темы сохранены.
   ──────────────────────────────────────────────────────────────── */
#session-import-modal { --si-accent: #0b57d0; }
body.theme-dark #session-import-modal { --si-accent: #8ab4f8; }

/* Каркас панели → метрики addw поверх пресета .modal__panel--std */
#session-import-modal .modal__panel {
  font-family: var(--app-font);
  width: min(500px, calc(100vw - 28px));
  min-height: 360px;
  max-height: 86vh;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}
#session-import-modal .modal__head { padding: 22px 24px 14px; }
#session-import-modal .modal__body { padding: 8px 24px; }
#session-import-modal .modal__foot { padding: 14px 24px 20px; gap: 8px; }

/* Заголовок → как .addw__header (23px / 500) */
#session-import-modal .modal__title {
  gap: 12px;
  font-size: 23px; font-weight: 500; line-height: 32px;
  color: var(--text);
}
#session-import-modal .modal__head .icon-btn { color: var(--text-mute); }

/* Dropzone */
#session-import-modal .si-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px;
  border: 2px dashed var(--border);
  border-radius: 16px;
  background: rgba(11, 87, 208, .03);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
body.theme-dark #session-import-modal .si-drop { background: rgba(138, 180, 248, .05); }
#session-import-modal .si-drop:hover,
#session-import-modal .si-drop.is-drag {
  border-color: var(--si-accent);
  background: rgba(11, 87, 208, .06);
}
body.theme-dark #session-import-modal .si-drop:hover,
body.theme-dark #session-import-modal .si-drop.is-drag {
  background: rgba(138, 180, 248, .10);
}
/* Активное перетаскивание — заметно сильнее hover: подсветка панели-вуалью
   (.is-dragover на .modal__panel) или прямой класс .is-drag на зоне. */
#session-import-modal .si-drop.is-drag,
#session-import-modal .modal__panel.is-dragover .si-drop {
  border-color: var(--si-accent);
  background: rgba(11, 87, 208, .10);
  box-shadow: 0 0 0 4px rgba(11, 87, 208, .12);
}
body.theme-dark #session-import-modal .si-drop.is-drag,
body.theme-dark #session-import-modal .modal__panel.is-dragover .si-drop {
  background: rgba(138, 180, 248, .14);
  box-shadow: 0 0 0 4px rgba(138, 180, 248, .16);
}
#session-import-modal .si-drop.is-drag .si-drop__ico,
#session-import-modal .modal__panel.is-dragover .si-drop .si-drop__ico {
  animation: si-drop-bob .6s ease-in-out infinite alternate;
}
@keyframes si-drop-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
#session-import-modal .si-drop__ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(11, 87, 208, .10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--si-accent);
}
body.theme-dark #session-import-modal .si-drop__ico { background: rgba(138, 180, 248, .14); }
#session-import-modal .si-drop__ico svg { width: 26px; height: 26px; fill: var(--si-accent); display: block; }
#session-import-modal .si-drop__title { font-size: 15px; font-weight: 500; color: var(--text); }
#session-import-modal .si-drop__sub { font-size: 13px; color: var(--text-mute); }

/* Вторичные действия под dropzone: открыть папку / обновить (текстовые пилюли) */
#session-import-modal .si-pick-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
#session-import-modal .si-pick-actions[hidden],
#session-import-modal .si-pick-hint[hidden] {
  display: none !important;
}
#session-import-modal .si-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  border: none; border-radius: 18px; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--si-accent); cursor: pointer;
  transition: background-color .15s ease;
}
#session-import-modal .si-link:hover { background: rgba(11, 87, 208, .08); }
body.theme-dark #session-import-modal .si-link:hover { background: rgba(138, 180, 248, .12); }
#session-import-modal .si-link svg { fill: var(--si-accent); display: block; }
#session-import-modal .si-pick-hint {
  margin: 10px 2px 0; font-size: 12.5px; color: var(--text-mute); line-height: 1.4;
}
/* Когда показан результат распознавания — прячем вторичные действия и делаем
   зону добавления компактной (клик по ней = выбрать другие файлы). */
#session-import-modal .modal__panel[data-si-state="loading"] .si-pick-actions,
#session-import-modal .modal__panel[data-si-state="preview"] .si-pick-actions,
#session-import-modal .modal__panel[data-si-state="loading"] .si-pick-hint,
#session-import-modal .modal__panel[data-si-state="preview"] .si-pick-hint { display: none; }
#session-import-modal .modal__panel[data-si-state="preview"] .si-drop { padding: 16px 20px; margin-bottom: 14px; }
#session-import-modal .modal__panel[data-si-state="preview"] .si-drop__sub { display: none; }

/* Панель «loading»: спиннер + подпись + (опционально) прогресс-бар и счётчик */
#session-import-modal .si-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 0; text-align: center;
  font-size: 14px; color: var(--text-mute);
}
#session-import-modal .si-loading__spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(11, 87, 208, .18);
  border-top-color: var(--si-accent);
  animation: si-spin .8s linear infinite;
}
body.theme-dark #session-import-modal .si-loading__spin { border-color: rgba(138, 180, 248, .22); border-top-color: var(--si-accent); }
@keyframes si-spin { to { transform: rotate(360deg); } }
#session-import-modal .si-loading__label { font-size: 14.5px; font-weight: 500; color: var(--text); }
#session-import-modal .si-progress {
  width: min(280px, 80%); height: 6px; border-radius: 999px;
  background: rgba(11, 87, 208, .12); overflow: hidden;
}
body.theme-dark #session-import-modal .si-progress { background: rgba(138, 180, 248, .16); }
#session-import-modal .si-progress__fill {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--si-accent);
  transition: width .2s ease;
}
#session-import-modal .si-loading__sub { font-size: 12.5px; color: var(--text-mute); }
#session-import-modal .si-progress[hidden],
#session-import-modal .si-loading__sub[hidden] { display: none; }

/* Вуаль на всю панель при перетаскивании файлов над модалкой */
#session-import-modal .si-dropveil {
  position: absolute; inset: 0; z-index: 5;
  border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 87, 208, .08);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}
body.theme-dark #session-import-modal .si-dropveil { background: rgba(138, 180, 248, .10); }
#session-import-modal .modal__panel.is-dragover .si-dropveil { opacity: 1; visibility: visible; }
#session-import-modal .si-dropveil__box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 30px;
  border: 2px dashed var(--si-accent); border-radius: 20px;
  background: var(--bg-card, #fff);
  color: var(--si-accent);
  font-size: 15px; font-weight: 500;
}
#session-import-modal .si-dropveil__ico svg { fill: var(--si-accent); display: block; }

@media (prefers-reduced-motion: reduce) {
  #session-import-modal .si-loading__spin,
  #session-import-modal .si-drop.is-drag .si-drop__ico,
  #session-import-modal .modal__panel.is-dragover .si-drop .si-drop__ico { animation: none; }
}

/* Превью-список */
#session-import-modal .si-preview__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 12px;
}
#session-import-modal .si-checkall {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer;
}
#session-import-modal .si-checkall input { accent-color: var(--si-accent); }
#session-import-modal .si-preview__count { font-size: 14px; font-weight: 500; color: var(--text); }
#session-import-modal .si-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 340px; overflow: auto;
  margin: 0 -6px; padding: 0 6px;
}
#session-import-modal .si-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  cursor: pointer;
  transition: background .12s ease;
}
#session-import-modal .si-row:hover { background: var(--bg-hover); }
#session-import-modal .si-row--off { cursor: default; opacity: .72; }
#session-import-modal .si-row--off:hover { background: transparent; }
#session-import-modal .si-row__check { flex: none; width: 16px; height: 16px; cursor: pointer; accent-color: var(--si-accent); }
#session-import-modal .si-row--off .si-row__check { cursor: not-allowed; }
#session-import-modal .si-row__ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--si-accent); background: rgba(11, 87, 208, .10);
}
body.theme-dark #session-import-modal .si-row__ico { background: rgba(138, 180, 248, .14); }
#session-import-modal .si-row__ico svg { width: 18px; height: 18px; fill: var(--si-accent); display: block; }
#session-import-modal .si-row__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
#session-import-modal .si-row__name {
  font-size: 15px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#session-import-modal .si-row__sub {
  font-size: 13px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#session-import-modal .si-badge {
  flex: none; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
#session-import-modal .si-badge.is-ok  { color: #047857; background: rgba(16, 185, 129, .14); }
#session-import-modal .si-badge.is-dup { color: #b45309; background: rgba(245, 158, 11, .16); }
#session-import-modal .si-badge.is-bad { color: #e11d48; background: rgba(244, 63, 94, .14); }

#session-import-modal .si-empty { padding: 28px 4px; text-align: center; }
#session-import-modal .si-empty p { margin: 0 0 6px; font-size: 14px; color: var(--text); }
#session-import-modal .si-empty__hint { font-size: 12.5px; color: var(--text-mute); }
#session-import-modal .si-empty code {
  font-size: 12px; padding: 1px 5px; border-radius: 5px;
  background: var(--bg-hover); color: var(--text);
}

/* Кнопки футера → «пилюли» addw (40px / радиус 20px / Google Sans).
   html body + !important — перебивает глобальный punch-list
   `html body .btn--primary/.btn--ghost { border-radius: 6px !important }`. */
html body #session-import-modal .modal__foot .btn,
html body.theme-dark #session-import-modal .modal__foot .btn {
  height: 40px !important;
  min-width: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .1px !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease !important;
}
/* Текстовая пилюля (Отмена) */
html body #session-import-modal .modal__foot .btn--ghost,
html body.theme-dark #session-import-modal .modal__foot .btn--ghost {
  background: transparent !important;
  color: var(--si-accent) !important;
  padding: 0 12px !important;
}
html body #session-import-modal .modal__foot .btn--ghost:hover,
html body.theme-dark #session-import-modal .modal__foot .btn--ghost:hover {
  background: rgba(11, 87, 208, .08) !important;
}
html body.theme-dark #session-import-modal .modal__foot .btn--ghost:hover {
  background: rgba(138, 180, 248, .12) !important;
}
/* Залитая пилюля (Добавить) — Material filled button */
html body #session-import-modal .modal__foot .btn--primary,
html body.theme-dark #session-import-modal .modal__foot .btn--primary {
  background: #0b57d0 !important;
  color: #fff !important;
  padding: 0 20px !important;
}
html body #session-import-modal .modal__foot .btn--primary:hover:not(:disabled),
html body.theme-dark #session-import-modal .modal__foot .btn--primary:hover:not(:disabled) {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, .35) !important;
}
html body #session-import-modal .modal__foot .btn--primary:disabled,
html body.theme-dark #session-import-modal .modal__foot .btn--primary:disabled {
  opacity: .5 !important;
  cursor: default !important;
}

/* --- Sidebar custom overrides (gmail bar styling) --- */

/* Единый размер (18px) и толщина обводки (1.75) для НЕАКТИВНЫХ иконок сайдбара.
   1.75 — толщина, на которую нарисован набор (docs/icons/airgram-icons).
   Активные — в блоке v19 выше (stroke-width: 1.75): активность передаётся
   цветом и фоном строки, вес иконки от неё не меняется. */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):focus-visible .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active) .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not(.is-active):hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active) .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not(.is-active):hover .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
}

/* Размер SVG активного пункта — тот же 18px; stroke задаёт только v19. */
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg {
  width: 18px !important;
  height: 18px !important;
}

html body:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px !important;
  background: transparent !important;
}

/* Убираем заливку фона контейнера иконки в активном состоянии */
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  background: transparent !important;
}

/* Активные иконки: контур без заливки/теней. Толщина обводки — только в v19 (1.7). */
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg *,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg *,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:focus-visible .nav-item__icon svg *,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg *,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg *,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:focus-visible .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:focus-visible .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg *,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:focus-visible .nav-item__icon svg * {
  fill: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  shape-rendering: geometricPrecision !important;
}

/* Цвета для светлой темы */
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:focus-visible .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:focus-visible .nav-item__icon {
  color: #444746 !important;
}
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item:hover .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon svg[fill="none"] *:not([stroke="none"]) {
  stroke: #444746 !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon {
  color: #041E49 !important;
}
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg[fill="none"] *:not([stroke="none"]),
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg[fill="none"],
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg[fill="none"] *:not([stroke="none"]) {
  stroke: #041E49 !important;
}

html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  color: #001D35 !important;
}

/* ════════════════════════════════════════════════════════════════
   «Добавление аккаунтов» — точная копия modal_styles.md.
   Полностью изолированная верстка (#add-modal .addw*), namespace не
   пересекается ни с одним старым правилом, поэтому зашитые стили
   .modal__panel--add / .add-modal__* больше не применяются к окну.
   ──────────────────────────────────────────────────────────────── */
html body #add-modal,
html body.theme-dark #add-modal {
  display: grid !important;
  place-items: center !important;
}
html body #add-modal[hidden],
html body.theme-dark #add-modal[hidden] {
  display: none !important;
}

html body #add-modal .addw__overlay,
html body.theme-dark #add-modal .addw__overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(20, 30, 60, 0.32) !important;
  animation: modal-backdrop-in var(--modal-enter-duration) var(--modal-enter-ease) both !important;
}

/* Вход карточки и проявление её содержимого здесь НЕ дублируются: их держит
   общее правило `.modal__panel, .addw-modal .addw` в style.css (там же — про
   fill-mode backwards и про то, почему у проявления нет задержки). Своими
   тут остались только длительность 0.4s и кривая — они в блоке #add-modal
   выше, а анимация читает их через var(). */
html body #add-modal .addw,
html body.theme-dark #add-modal .addw {
  position: relative !important;
  box-sizing: border-box !important;
  width: 500px !important;
  max-width: calc(100vw - 28px) !important;
  height: 360px !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: var(--app-font) !important;
  color: #1f1f1f !important;
}

@media (prefers-reduced-motion: reduce) {
  /* Затемнению нужен свой перебой: его анимация выставлена здесь через
     !important и базовое правило style.css её не переспорит. Карточка и её
     содержимое сидят на общих правилах — их reduced-motion уже разобрал. */
  html body #add-modal .addw__overlay,
  html body.theme-dark #add-modal .addw__overlay {
    animation-name: modal-fade-in !important;
  }
}

html body #add-modal.modal--static-backdrop .addw__overlay,
html body.theme-dark #add-modal.modal--static-backdrop .addw__overlay {
  animation: none !important;
  opacity: 1 !important;
}

html body #add-modal.modal--static-backdrop .addw,
html body.theme-dark #add-modal.modal--static-backdrop .addw {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #add-modal.modal--closing .addw__overlay,
html body.theme-dark #add-modal.modal--closing .addw__overlay {
  animation: modal-backdrop-out var(--modal-exit-duration) var(--modal-exit-ease) forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #add-modal.modal--closing .addw__overlay,
  html body.theme-dark #add-modal.modal--closing .addw__overlay {
    animation-name: modal-fade-out !important;
  }
}

html body #add-modal .addw__header,
html body.theme-dark #add-modal .addw__header {
  margin: 0 0 15px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
}

html body #add-modal .addw__list,
html body.theme-dark #add-modal .addw__list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 -12px auto -12px !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body #add-modal .addw__option,
html body.theme-dark #add-modal .addw__option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.1s !important;
}

html body #add-modal .addw__option:hover,
html body.theme-dark #add-modal .addw__option:hover {
  background-color: #f1f3f4 !important;
}

html body #add-modal .addw__option::after,
html body.theme-dark #add-modal .addw__option::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 16px !important;
  left: 16px !important;
  height: 1px !important;
  background-color: #dadce0 !important;
}

html body #add-modal .addw__icon,
html body.theme-dark #add-modal .addw__icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

html body #add-modal .addw__icon svg,
html body.theme-dark #add-modal .addw__icon svg {
  fill: #0b57d0 !important;
}

html body #add-modal .addw__content,
html body.theme-dark #add-modal .addw__content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 0 !important;
}

html body #add-modal .addw__title,
html body.theme-dark #add-modal .addw__title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
  margin: 0 0 2px !important;
}

html body #add-modal .addw__desc,
html body.theme-dark #add-modal .addw__desc {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  margin: 0 !important;
}

html body #add-modal .addw__actions,
html body.theme-dark #add-modal .addw__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding: 0 !important;
  border: 0 !important;
}

html body #add-modal .addw__btn,
html body.theme-dark #add-modal .addw__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

html body #add-modal .addw__btn--cancel,
html body.theme-dark #add-modal .addw__btn--cancel {
  background-color: transparent !important;
  color: #0b57d0 !important;
  padding-inline: 12px !important;
}

html body #add-modal .addw__btn--cancel:hover,
html body.theme-dark #add-modal .addw__btn--cancel:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
}

/* v23 - "Модули" section heading is visible when the sidebar is expanded */
html body:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title--modules,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title--modules {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 4px 10px 6px !important;
  color: var(--text-light) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* keep it hidden in the collapsed (icon-only) sidebar */
html body.sidebar-collapsed #sidebar .nav-section--modules .nav-section__title--modules,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules .nav-section__title--modules {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Таблица аккаунтов: тёмный номер у выделенной строки.
   При выделении строки порядковый номер становится тёмным (#1f2740) вместо
   приглушённого серого. Сами чекбоксы рисуются mask-SVG (см. блок ниже). */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc .am-acct-cell__num,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc .am-acct-cell__num {
  color: #1f2740 !important;
}

/* Чекбоксы рисуются mask-SVG (тонкая отрисовка ровно как в файле
   checkbox-*.svg, а не «жирный» растянутый PNG). Цвет задаётся через
   background-color базовыми mask-правилами выше:
     • верхний (тулбарный) чекбокс — #444746 (--tp-checkbox-color);
     • строковый чекбокс таблицы по умолчанию — #BABEC1 (--tp-row-checkbox-color);
     • строковый чекбокс в активном состоянии (checked / indeterminate) — #404241.
   Базовые правила красят активное состояние и тулбарного, и строкового в один
   --tp-checkbox-color; здесь перекрываем ТОЛЬКО строковый, не трогая верхний. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate {
  background-color: #404241 !important;
  color: #404241 !important;
}

/* Отмеченный строковый чекбокс рисовал постоянный серый ::before-ореол (круг
   36px) — у пустого он только на ховере, а у активного висел всегда, давая
   «лишнюю серую обводку». Гасим фон ::before для checked/indeterminate, чтобы
   показывался чистый mask-SVG галочки/минуса без кольца. Ховер-ореол пустого
   чекбокса не трогаем. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked::before,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate::before,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked:hover::before,
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate:hover::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked:hover::before,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate:hover::before {
  background: transparent !important;
}


/* Пустое состояние таблицы аккаунтов своих правил не имеет: значок, заголовок
   и подсказка рисует общий .empty-state — тот же, что у прокси, баз и задач.
   Прежний блок (иллюстрация 208px + своя filled-кнопка) снят: первый экран
   получался тяжелее самой таблицы, а кнопка повторяла шапку страницы. */

html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]), html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover, html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible, html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active, html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover, html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible, html body:not(.sidebar-collapsed) #sidebar .sidebar__more, html body:not(.sidebar-collapsed) #sidebar .sidebar__more:hover, html body:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible, html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]), html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover, html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible, html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active, html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover, html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible, html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]), html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover, html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible, html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active, html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover, html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible, html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more, html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:hover, html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible, html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]), html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover, html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible, html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active, html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover, html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

/* Custom styling when only a flyout menu (like role) is shown */
html body .am-actions-menu.am-actions-menu--flyout-only {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}
html body .am-actions-menu.am-actions-menu--flyout-only .am-actions-menu__list {
  display: none !important;
}
html body .am-actions-menu.am-actions-menu--flyout-only .am-actions-fly:not([hidden]) {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  display: block !important;
}

/* Прямой выбор роли из панели: окно строится от кнопки #am-sel-role — её
   координаты уже посчитал positionAmActionsMenu() для прозрачной оболочки
   .am-actions-menu--flyout-only, поэтому подменю просто лежит внутри неё.
   Прибитые top/left здесь были остатком старой панели и уводили окно
   от кнопки, стоило бару сместиться (общий канон привязки к своей иконке). */
html body .am-actions-menu.am-actions-menu--flyout-only .am-actions-fly.am-actions-fly--role.is-right:not([hidden]) {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   Airgram brand lockup (logo mark + wordmark) — Gmail-style.
   Appended last so it wins over the earlier Montserrat/uppercase
   brand rules (≈L15721). Keep this block at the very end.
   ───────────────────────────────────────────────────────────── */

/* Whole lockup (emblem + "Airgram") occupies a 120×30 box.
   max-height override defeats the ≤900px cap at ≈L15679. */
html body .tp-topbar__brand,
html body.theme-dark .tp-topbar__brand {
  width: 120px !important;
  max-width: 120px !important;
  height: 30px !important;
  max-height: 30px !important;
  gap: 8px !important;
  font-weight: 400 !important;
  overflow: hidden !important;
}

/* Logo emblem — keep the PNG's native aspect (do not force a square). */
html body .tp-topbar__brand-mark,
html body.theme-dark .tp-topbar__brand-mark {
  display: block !important;
  width: auto !important;
  height: 26px !important;
  max-height: 26px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
}

/* Wordmark "Airgram" — Google Sans stack, mixed case (no uppercasing). */
html body .tp-topbar__brand-text,
html body.theme-dark .tp-topbar__brand-text {
  font-family: var(--app-font) !important;
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-synthesis: none !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Text colour in the lockup: #1F1F1F on the light bar; readable on dark. */
html body:not(.theme-dark) .tp-topbar__brand-text {
  color: #1F1F1F !important;
}
html body.theme-dark .tp-topbar__brand-text {
  color: #e8eaed !important;
}

/* ════════════════════════════════════════════════════════════════
   «Изменить профиль» — форма действия (#edit-profile-form-modal).
   Визуальный язык — как #add-modal .addw: Google Sans, radius 28px,
   заголовок 23px/500, кнопки-пилюли 40px / radius 20px, акцент #0b57d0.
   ──────────────────────────────────────────────────────────────── */
html body #edit-profile-form-modal,
html body.theme-dark #edit-profile-form-modal {
  display: grid !important;
  place-items: center !important;
}
html body #edit-profile-form-modal[hidden],
html body.theme-dark #edit-profile-form-modal[hidden] {
  display: none !important;
}

html body #edit-profile-form-modal .addw,
html body.theme-dark #edit-profile-form-modal .addw {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(500px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: var(--app-font) !important;
  color: #1f1f1f !important;
}

html body #edit-profile-form-modal .addw__header,
html body.theme-dark #edit-profile-form-modal .addw__header {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
}

html body #edit-profile-form-modal .epf__sub,
html body.theme-dark #edit-profile-form-modal .epf__sub {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #5f6368 !important;
}

html body #edit-profile-form-modal .epf__body,
html body.theme-dark #edit-profile-form-modal .epf__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(62vh, 520px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 -4px !important;
  padding: 0 4px 4px !important;
}

html body #edit-profile-form-modal .edit-profile__form:not([hidden]),
html body.theme-dark #edit-profile-form-modal .edit-profile__form:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body #edit-profile-form-modal .edit-profile__form .form-row:not([hidden]),
html body.theme-dark #edit-profile-form-modal .edit-profile__form .form-row:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* display:flex !important выше ломает нативный [hidden] — восстанавливаем скрытие */
html body #edit-profile-form-modal [hidden],
html body.theme-dark #edit-profile-form-modal [hidden] {
  display: none !important;
}

html body #edit-profile-form-modal .edit-profile__form .form-row > label,
html body.theme-dark #edit-profile-form-modal .edit-profile__form .form-row > label,
html body #edit-profile-form-modal .edit-profile__photo-replace .inv-field__label,
html body.theme-dark #edit-profile-form-modal .edit-profile__photo-replace .inv-field__label,
html body #edit-profile-form-modal .edit-profile__bulk-toggle,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-toggle {
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html body #edit-profile-form-modal .edit-profile__form .muted,
html body.theme-dark #edit-profile-form-modal .edit-profile__form .muted,
html body #edit-profile-form-modal .edit-profile__bulk-hint,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-hint,
html body #edit-profile-form-modal .edit-profile__file-status,
html body.theme-dark #edit-profile-form-modal .edit-profile__file-status,
html body #edit-profile-form-modal .edit-profile__note-text,
html body.theme-dark #edit-profile-form-modal .edit-profile__note-text {
  color: #5f6368 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body #edit-profile-form-modal .edit-profile__form input[type="text"],
html body #edit-profile-form-modal .edit-profile__form input[type="number"],
html body #edit-profile-form-modal .edit-profile__form select,
html body #edit-profile-form-modal .edit-profile__form textarea,
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="text"],
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="number"],
html body.theme-dark #edit-profile-form-modal .edit-profile__form select,
html body.theme-dark #edit-profile-form-modal .edit-profile__form textarea {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

html body #edit-profile-form-modal .edit-profile__form textarea,
html body.theme-dark #edit-profile-form-modal .edit-profile__form textarea {
  min-height: 88px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

html body #edit-profile-form-modal .edit-profile__form input[type="text"]:focus,
html body #edit-profile-form-modal .edit-profile__form input[type="number"]:focus,
html body #edit-profile-form-modal .edit-profile__form select:focus,
html body #edit-profile-form-modal .edit-profile__form textarea:focus,
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="text"]:focus,
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="number"]:focus,
html body.theme-dark #edit-profile-form-modal .edit-profile__form select:focus,
html body.theme-dark #edit-profile-form-modal .edit-profile__form textarea:focus {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
  outline: 0 !important;
}

html body #edit-profile-form-modal .edit-profile__bulk-toggle input[type="checkbox"]:focus,
html body #edit-profile-form-modal .edit-profile__bulk-toggle input[type="checkbox"]:focus-visible,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-toggle input[type="checkbox"]:focus,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-toggle input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source {
  gap: 2px !important;
  flex-wrap: nowrap !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  overflow: visible !important;
  background: #f1f3f4 !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile {
  position: relative !important;
  flex: 1 1 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.12s ease !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:first-child,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:first-child {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:last-child,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:last-child {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:hover,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:hover {
  background: #e8eaed !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked {
  background: #ffffff !important;
  z-index: 1 !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked::after,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #0b57d0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

html body #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice-title,
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
}

html body #edit-profile-form-modal .edit-profile__file-btn,
html body.theme-dark #edit-profile-form-modal .edit-profile__file-btn {
  min-height: 40px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #f8f9fa !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body #edit-profile-form-modal .edit-profile__file-btn:hover,
html body.theme-dark #edit-profile-form-modal .edit-profile__file-btn:hover {
  background: #f1f3f4 !important;
}

html body #edit-profile-form-modal .edit-profile__note,
html body.theme-dark #edit-profile-form-modal .edit-profile__note {
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
}

html body #edit-profile-form-modal .edit-profile__note-ico,
html body.theme-dark #edit-profile-form-modal .edit-profile__note-ico {
  color: #0b57d0 !important;
  background: rgba(11, 87, 208, 0.10) !important;
}

html body #edit-profile-form-modal .edit-profile__note-title,
html body.theme-dark #edit-profile-form-modal .edit-profile__note-title {
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body #edit-profile-form-modal .addw__actions,
html body.theme-dark #edit-profile-form-modal .addw__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #edit-profile-form-modal .addw__btn,
html body.theme-dark #edit-profile-form-modal .addw__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

html body #edit-profile-form-modal .addw__btn--cancel,
html body.theme-dark #edit-profile-form-modal .addw__btn--cancel {
  background-color: transparent !important;
  color: #0b57d0 !important;
  padding-inline: 12px !important;
}

html body #edit-profile-form-modal .addw__btn--cancel:hover,
html body.theme-dark #edit-profile-form-modal .addw__btn--cancel:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
}

html body #edit-profile-form-modal .addw__btn--primary,
html body.theme-dark #edit-profile-form-modal .addw__btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
  padding: 0 20px !important;
}

html body #edit-profile-form-modal .addw__btn--primary:hover,
html body.theme-dark #edit-profile-form-modal .addw__btn--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

html body #edit-profile-form-modal .addw__btn--primary.btn--danger,
html body.theme-dark #edit-profile-form-modal .addw__btn--primary.btn--danger {
  background: #d93025 !important;
  color: #ffffff !important;
}

html body #edit-profile-form-modal .addw__btn--primary.btn--danger:hover,
html body.theme-dark #edit-profile-form-modal .addw__btn--primary.btn--danger:hover {
  background: #c5221f !important;
  box-shadow: 0 1px 6px rgba(217, 48, 37, 0.35) !important;
}

/* ────────────────────────────────────────────────────────────────
   «Добавить аккаунт · Номер + код» (#phone-auth-modal)
   Визуальный язык — как форма «Изменить профиль» (#edit-profile-form-modal):
   белая карточка radius 28px, Google Sans, заголовок 23px/500, поля 40px
   с фокусом #0b57d0, кнопки-пилюли (отмена — синий текст, основная — заливка).
   ──────────────────────────────────────────────────────────────── */
html body #phone-auth-modal,
html body.theme-dark #phone-auth-modal {
  display: grid !important;
  place-items: center !important;
}
html body #phone-auth-modal[hidden],
html body.theme-dark #phone-auth-modal[hidden] {
  display: none !important;
}

html body #phone-auth-modal .addw,
html body.theme-dark #phone-auth-modal .addw {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(460px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: var(--app-font) !important;
  color: #1f1f1f !important;
}

html body #phone-auth-modal .addw__header,
html body.theme-dark #phone-auth-modal .addw__header {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
}

html body #phone-auth-modal .pa__sub,
html body.theme-dark #phone-auth-modal .pa__sub {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #5f6368 !important;
}

html body #phone-auth-modal .pa__body,
html body.theme-dark #phone-auth-modal .pa__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 -4px !important;
  padding: 0 4px 4px !important;
}

html body #phone-auth-modal .pa-form:not([hidden]),
html body.theme-dark #phone-auth-modal .pa-form:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body #phone-auth-modal .pa-form .form-row:not([hidden]),
html body.theme-dark #phone-auth-modal .pa-form .form-row:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* display:flex !important выше ломает нативный [hidden] — восстанавливаем скрытие */
html body #phone-auth-modal [hidden],
html body.theme-dark #phone-auth-modal [hidden] {
  display: none !important;
}

html body #phone-auth-modal .pa-form .form-row > label,
html body.theme-dark #phone-auth-modal .pa-form .form-row > label {
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html body #phone-auth-modal .pa-hint,
html body.theme-dark #phone-auth-modal .pa-hint {
  color: #5f6368 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body #phone-auth-modal .pa-form input[type="text"],
html body #phone-auth-modal .pa-form input[type="tel"],
html body #phone-auth-modal .pa-form input[type="password"],
html body.theme-dark #phone-auth-modal .pa-form input[type="text"],
html body.theme-dark #phone-auth-modal .pa-form input[type="tel"],
html body.theme-dark #phone-auth-modal .pa-form input[type="password"] {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

html body #phone-auth-modal .pa-form input:focus,
html body.theme-dark #phone-auth-modal .pa-form input:focus {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
  outline: 0 !important;
}

html body #phone-auth-modal .pa-error,
html body.theme-dark #phone-auth-modal .pa-error {
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid #f3c2be !important;
  border-radius: 8px !important;
  background: #fce8e6 !important;
  color: #c5221f !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html body #phone-auth-modal .pa-done:not([hidden]),
html body.theme-dark #phone-auth-modal .pa-done:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

html body #phone-auth-modal .pa-done__ico,
html body.theme-dark #phone-auth-modal .pa-done__ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  color: #188038 !important;
  background: rgba(24, 128, 56, 0.12) !important;
}

html body #phone-auth-modal .pa-done__text,
html body.theme-dark #phone-auth-modal .pa-done__text {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
}

html body #phone-auth-modal .addw__actions,
html body.theme-dark #phone-auth-modal .addw__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #phone-auth-modal .addw__btn,
html body.theme-dark #phone-auth-modal .addw__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

html body #phone-auth-modal .addw__btn--cancel,
html body.theme-dark #phone-auth-modal .addw__btn--cancel {
  background-color: transparent !important;
  color: #0b57d0 !important;
  padding-inline: 12px !important;
}

html body #phone-auth-modal .addw__btn--cancel:hover,
html body.theme-dark #phone-auth-modal .addw__btn--cancel:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
}

html body #phone-auth-modal .addw__btn--primary,
html body.theme-dark #phone-auth-modal .addw__btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
  padding: 0 20px !important;
}

html body #phone-auth-modal .addw__btn--primary:hover,
html body.theme-dark #phone-auth-modal .addw__btn--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

html body #phone-auth-modal .addw__btn--primary:disabled,
html body.theme-dark #phone-auth-modal .addw__btn--primary:disabled {
  background: #c6c9cf !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* ── Unified modal backdrop tint (all modals, light + dark) ───────────────
   Appended last so it wins over per-modal backdrop overrides in this file. */
html body .modal__backdrop,
html body.theme-dark .modal__backdrop,
html body #add-modal .addw__overlay,
html body.theme-dark #add-modal .addw__overlay,
html body #edit-profile-form-modal .addw__overlay,
html body.theme-dark #edit-profile-form-modal .addw__overlay,
html body #phone-auth-modal .addw__overlay,
html body.theme-dark #phone-auth-modal .addw__overlay {
  background: rgba(20, 30, 60, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Active tasks dock (плавающая панель активных задач) ─────────────────
   Правый нижний угол; не конфликтует с тостами слева. */
.tm-dock {
  --tm-dock-enter-duration: 0.8s;
  --tm-dock-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tm-dock-exit-duration: 0.28s;
  --tm-dock-exit-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  right: 24px;
  /* Низ — переменная, а не константа: в том же углу живёт липкая полоса
     запуска модуля (.inv-cta / .prs-cta), и панель обязана уступать её
     кнопке. Значение считает layoutActiveTasksDock() в app.js; 24px —
     положение по умолчанию, когда уступать некому. */
  bottom: var(--tm-dock-bottom, 24px);
  /* Пока модалок нет — панель выше всего нижнего слоя (полосы запуска,
     оверлеи занятости). Под модалку её опускает .dock-under-modal. */
  z-index: 1300;
  width: 340px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e3e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 30, 60, 0.18);
  overflow: hidden;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.96);
  transform-origin: right bottom;
  transition:
    opacity var(--tm-dock-enter-duration) var(--tm-dock-enter-ease),
    transform var(--tm-dock-enter-duration) var(--tm-dock-enter-ease),
    visibility 0s linear var(--tm-dock-enter-duration),
    bottom var(--motion-draw) var(--motion-ease);
}
.tm-dock[hidden] { display: none !important; }
/* Модальное окно всегда сверху: панель уходит под слой модалок (500 + место
   в стопке, см. syncModalZIndex в app.js), и её накрывает подложка окна.
   Исключение одно — пикер аккаунтов: из него тоже запускают задачи, поэтому
   над ним панель остаётся. Класс ставит syncActiveTasksDockLayer(). */
body.dock-under-modal .tm-dock { z-index: 499; }
.tm-dock.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s, 0s;
}
.tm-dock.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.96);
  transition-duration: var(--tm-dock-exit-duration), var(--tm-dock-exit-duration), 0s, 0s;
  transition-timing-function: var(--tm-dock-exit-ease), var(--tm-dock-exit-ease), linear, linear;
  transition-delay: 0s, 0s, var(--tm-dock-exit-duration), 0s;
}
/* Первая установка позиции (панель только появилась) не должна ехать: панель
   обязана возникнуть уже над кнопкой запуска. Гасим только переезд по низу —
   список свойств короче, чем в .tm-dock, поэтому лишние значения длительностей
   отбрасываются, а вход/выход панели остаются нетронутыми. */
.tm-dock.is-pos-instant { transition-property: opacity, transform, visibility; }
@media (prefers-reduced-motion: reduce) {
  .tm-dock {
    --tm-dock-enter-duration: 0.16s;
    --tm-dock-exit-duration: 0.08s;
    transform: none;
  }
  .tm-dock.is-visible,
  .tm-dock.is-hiding {
    transform: none;
  }
}
.tm-dock__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  border-bottom: 1px solid var(--border, #e3e8f0);
  transition: border-bottom-color var(--tm-dock-enter-duration) var(--tm-dock-enter-ease);
}
/* Разделитель гасим цветом, а не `border: none` — иначе панель дёргается на
   1px в самом начале сворачивания. */
.tm-dock.is-collapsed .tm-dock__head {
  border-bottom-color: transparent;
  transition-duration: var(--tm-dock-exit-duration);
  transition-timing-function: var(--tm-dock-exit-ease);
}
.tm-dock__title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text, #1c2434);
  padding: 8px 6px 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.tm-dock__title:hover { background: var(--bg-hover, #f2f5fa); }
.tm-dock__count {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.tm-dock__count[hidden] { display: none !important; }
.tm-dock__chev {
  width: 16px; height: 16px;
  flex: none;
  color: var(--text-mute, #6b7280);
  transform: rotate(180deg);
  /* Стрелка едет тем же движением, что и тело панели: разворот — «вход»
     окна, сворачивание — «выход». */
  transition: transform var(--tm-dock-enter-duration) var(--tm-dock-enter-ease);
}
.tm-dock.is-collapsed .tm-dock__chev {
  transform: none;
  transition-duration: var(--tm-dock-exit-duration);
  transition-timing-function: var(--tm-dock-exit-ease);
}
.tm-dock__open {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-mute, #6b7280);
  border-radius: 8px;
  cursor: pointer;
}
.tm-dock__open:hover { background: var(--bg-hover, #f2f5fa); color: var(--text, #1c2434); }
.tm-dock__open svg { width: 16px; height: 16px; }
.tm-dock__close {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-mute, #8b8f97);
  border-radius: 50%;
  cursor: pointer;
}
.tm-dock__close:hover { background: var(--bg-hover, #f3f4f6); color: var(--text, #374151); }
.tm-dock__close svg { width: 16px; height: 16px; }
/* Сворачивание/разворачивание тела панели — тем же движением, что вход и
   выход окон: разворот на «входной» кривой, сворачивание на «выходной».
   Высота едет через grid-template-rows 1fr↔0fr, поэтому список не нужно
   мерить из JS — анимация верна при любом числе строк. Обёртка режет
   переполнение сама, а список внутри выровнен по верху (align-items: start)
   и высоту не меняет: так скроллбар не мигает по ходу анимации. */
.tm-dock__body {
  display: grid;
  /* minmax(0, …), а не голый 1fr: иначе минимум дорожки упирается в padding
     списка и свёрнутая панель сохраняет пустую полоску в 12px. */
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--tm-dock-enter-duration) var(--tm-dock-enter-ease),
    opacity var(--tm-dock-enter-duration) var(--tm-dock-enter-ease),
    visibility 0s linear 0s;
}
.tm-dock.is-collapsed .tm-dock__body {
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--tm-dock-exit-duration) var(--tm-dock-exit-ease),
    opacity var(--tm-dock-exit-duration) var(--tm-dock-exit-ease),
    visibility 0s linear var(--tm-dock-exit-duration);
}
/* Первая отрисовка уже свёрнутой панели не должна проигрывать сворачивание. */
.tm-dock.is-collapse-instant .tm-dock__body,
.tm-dock.is-collapse-instant .tm-dock__head,
.tm-dock.is-collapse-instant .tm-dock__chev { transition: none; }
.tm-dock__list {
  /* ≈ 4 строки (строка ~67px + зазоры 4px + внутренние отступы 12px) —
     дальше список скроллится. */
  max-height: 292px;
  overflow-y: auto;
  /* Место под скроллбар зарезервировано всегда — панель не дёргается при
     появлении прокрутки на 5-й и следующих задачах. */
  scrollbar-gutter: stable;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tm-dock__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.tm-dock__row:hover { background: var(--bg-hover, #f2f5fa); }
.tm-dock__row-main { flex: 1; min-width: 0; }
.tm-dock__row-title {
  font-weight: 600;
  color: var(--text, #1c2434);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-dock__row-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-mute, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-dock__bar { margin-top: 6px; }
.tm-dock__stop {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-mute, #6b7280);
  border-radius: 8px;
  cursor: pointer;
}
.tm-dock__stop:hover { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.tm-dock__stop svg { width: 16px; height: 16px; }
/* Пауза/возобновление — акцентный hover вместо «опасного» красного. */
.tm-dock__stop--pause:hover { background: rgba(37, 99, 235, 0.1); color: var(--accent, #2563eb); }
/* Статусная иконка строки панели: единый круглый значок слева — «в работе» /
   «пауза» / итог. Текст строки не меняется, о статусе говорит иконка. */
.tm-dock__final-ico {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.tm-dock__final-ico svg { width: 14px; height: 14px; }
.tm-dock__final-ico--running { color: var(--accent, #2563eb); background: rgba(37, 99, 235, 0.12); }
.tm-dock__final-ico--running svg { animation: tm-dock-spin 0.9s linear infinite; }
.tm-dock__final-ico--paused  { color: #d97706; background: rgba(217, 119, 6, 0.12); }
.tm-dock__final-ico--done    { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.tm-dock__final-ico--warn    { color: #d97706; background: rgba(217, 119, 6, 0.12); }
.tm-dock__final-ico--error   { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
@keyframes tm-dock-spin { to { transform: rotate(360deg); } }
/* Крестик «Скрыть» — нейтральный hover, не «опасный» красный. */
.tm-dock__dismiss:hover { background: var(--bg-hover, #f2f5fa); color: var(--text, #1c2434); }
html body.theme-dark .tm-dock {
  background: var(--bg-card, #1c2434);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* (Тулбар диспетчера — доп. типы, переключатель вида, очистка — удалён:
   управление переехало в Gmail-бар карточки таблицы, стили кнопок общие
   .picker-gmail-bar__action.) */


/* (Легаси-оболочка .tm-table удалена — таблица задач несёт класс app-table и
   наследует шапку/ячейки/hover из канонического контракта в конце файла;
   модульная геометрия колонок — в блоке «TASKS = ACCOUNTS» выше.) */

/* ── Детальный экран: фильтры и экспорт результатов ──────────────────── */
/* Сводок шесть — по аккаунтам (инвайт), по группам (парсер), по ключам
   (поиск), по аккаунтам же (чекер номеров), по чатам с аккаунтами сразу
   (подписка/отписка) и по сообщениям (клонер чатов). Оболочка, пилюли и тона
   этапов у них общие, различаются только колонки. Чекер и вовсе берёт ячейки
   аккаунтной сводки: таблица «кто сколько прошёл» у них одна и та же. */
.task-account-summary,
.task-source-summary,
.task-keyword-summary,
.task-check-summary,
.task-subs-summary,
.task-clone-summary,
.task-autoreply-summary,
.task-profile-summary,
.task-creator-summary,
.task-broadcast-summary,
.task-groupcast-summary,
.task-boost-summary {
  margin: 0;
}
.task-detail__results-bar.task-account-summary__bar,
.task-detail__results-bar.task-source-summary__bar,
.task-detail__results-bar.task-keyword-summary__bar,
.task-detail__results-bar.task-subs-summary__bar,
.task-detail__results-bar.task-clone-summary__bar,
.task-detail__results-bar.task-autoreply-summary__bar,
.task-detail__results-bar.task-profile-summary__bar,
.task-detail__results-bar.task-creator-summary__bar,
.task-detail__results-bar.task-broadcast-summary__bar,
.task-detail__results-bar.task-groupcast-summary__bar,
.task-detail__results-bar.task-boost-summary__bar {
  justify-content: flex-start;
}
.task-result-pill.task-account-summary__stat,
.task-result-pill.task-keyword-summary__stat,
.task-result-pill.task-subs-summary__stat,
.task-result-pill.task-clone-summary__stat,
.task-result-pill.task-autoreply-summary__stat,
.task-result-pill.task-profile-summary__stat,
.task-result-pill.task-creator-summary__stat,
.task-result-pill.task-broadcast-summary__stat,
.task-result-pill.task-groupcast-summary__stat,
.task-result-pill.task-boost-summary__stat {
  cursor: default;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.task-result-pill.task-account-summary__stat--ok,
.task-result-pill.task-source-summary__stat--ok,
.task-result-pill.task-keyword-summary__stat--ok,
.task-result-pill.task-subs-summary__stat--ok,
.task-result-pill.task-clone-summary__stat--ok,
.task-result-pill.task-autoreply-summary__stat--ok,
.task-result-pill.task-profile-summary__stat--ok,
.task-result-pill.task-creator-summary__stat--ok,
.task-result-pill.task-broadcast-summary__stat--ok,
.task-result-pill.task-groupcast-summary__stat--ok,
.task-result-pill.task-boost-summary__stat--ok { color: var(--ok, #16803c); }
.task-result-pill.task-account-summary__stat--warn,
.task-result-pill.task-source-summary__stat--warn,
.task-result-pill.task-subs-summary__stat--warn,
.task-result-pill.task-clone-summary__stat--warn,
.task-result-pill.task-profile-summary__stat--warn,
.task-result-pill.task-creator-summary__stat--warn,
.task-result-pill.task-broadcast-summary__stat--warn,
.task-result-pill.task-groupcast-summary__stat--warn,
.task-result-pill.task-boost-summary__stat--warn { color: var(--warning, #b66a00); }
.task-result-pill.task-account-summary__stat--error,
.task-result-pill.task-source-summary__stat--error,
.task-result-pill.task-keyword-summary__stat--error,
.task-result-pill.task-subs-summary__stat--error,
.task-result-pill.task-clone-summary__stat--error,
.task-result-pill.task-autoreply-summary__stat--error,
.task-result-pill.task-profile-summary__stat--error,
.task-result-pill.task-creator-summary__stat--error,
.task-result-pill.task-broadcast-summary__stat--error,
.task-result-pill.task-groupcast-summary__stat--error,
.task-result-pill.task-boost-summary__stat--error { color: var(--danger, #c73535); }
/* Пилюли сводки парсера — единственные живые: под ними таблица источников, и
   клик оставляет в ней только свой ярус. Поэтому общий запрет pointer-events
   их не касается, а выбранная красится как в «Результатах» — акцентом поверх
   цвета яруса (класс яруса иначе перебил бы белую подпись своим цветом). */
.task-result-pill.task-source-summary__stat {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.task-result-pill.task-source-summary__stat.is-active {
  border-color: var(--accent, #2563eb);
  background: var(--accent, #2563eb);
  color: #fff;
}
/* Итог прогона в том же ряду — подпись, а не фильтр: своей таблицы за ним
   нет. Курсор и наведение обязаны это показывать, иначе ряд обещает клик,
   которого не будет. */
.task-result-pill.task-source-summary__stat--static {
  cursor: default;
  pointer-events: none;
}
/* Полоса осей сводки парсера: «Источники» и «Аккаунты» — две таблицы одной
   вкладки. Стоит над баром пилюль, потому что пилюли принадлежат таблице, а
   ось выбирает саму таблицу.

   Свой класс, а не общий `px-tabs`: тот стилизован только внутри
   `.am-table-shell` своих экранов, и здесь от него оставалась голая разметка
   — иконка вырастала во всю колонку. Цвета — те же переменные, что у пилюль
   под ним, поэтому ночная тема подхватывает полосу без своей карты. */
.task-summary-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 10px;
  border: 1px solid var(--border, #e3e8f0);
  background: var(--bg-card, #fff);
  border-radius: 999px;
}
.task-summary-view {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-mute, #6b7280);
  border-radius: 999px;
  height: 28px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.task-summary-view__ico {
  width: 15px;
  height: 15px;
  flex: none;
}
.task-summary-view__n {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.task-summary-view.is-active {
  background: var(--accent, #2563eb);
  color: #fff;
}
.task-account-summary__table-wrap,
.task-source-summary__table-wrap,
.task-keyword-summary__table-wrap,
.task-subs-summary__table-wrap {
  max-height: 420px;
}
.task-account-summary__table {
  min-width: 760px;
}
.task-account-summary__table th {
  white-space: nowrap;
}
.task-account-summary__table th:nth-child(1) { width: 20%; }
.task-account-summary__table th:nth-child(2) { width: 24%; }
.task-account-summary__table th:nth-child(n+3):nth-child(-n+7) {
  width: 11.2%;
  text-align: right;
}
.task-account-summary__table td {
  vertical-align: middle;
}
.task-account-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-account-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-account-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-account-summary__num.is-warn { color: var(--warning, #b66a00); }
.task-account-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-account-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Лимит аккаунта — приписка к приглашённым: «12 / 25». Тише самого числа,
   потому что число — результат, а лимит только рамка вокруг него. */
.task-account-summary__limit {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}
/* Рамки прогона строкой над таблицей: куда зовём, сколько обещали и сколько
   разрешили одному аккаунту. У парсера там же — потоки и папка результатов.
   Тише таблицы: это условия прогона, а не его разбор. */
.task-account-summary__legend,
.task-source-summary__legend,
.task-keyword-summary__legend,
.task-subs-summary__legend {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

/* Сводка парсинга: строка — группа. Колонок шесть, две последние цифровые. */
.task-source-summary__table {
  min-width: 800px;
}
.task-source-summary__table th {
  white-space: nowrap;
}
.task-source-summary__table th:nth-child(1) { width: 28%; }
.task-source-summary__table th:nth-child(2) { width: 14%; }
.task-source-summary__table th:nth-child(3) { width: 18%; }
.task-source-summary__table th:nth-child(4) { width: 16%; }
.task-source-summary__table th:nth-child(n+5):nth-child(-n+6) {
  width: 12%;
  text-align: right;
}
.task-source-summary__table td {
  vertical-align: middle;
}
.task-source-summary__chat {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-source-summary__kind,
.task-source-summary__account {
  color: var(--text-mute, #6b7280);
  overflow-wrap: anywhere;
}
.task-source-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Число с единицей («308 411 сообщ.») переносить нельзя: в узком окне оно
     ломалось на две строки и колонка цифр переставала быть колонкой цифр.
     Тесно станет — таблица уедет под свою горизонтальную прокрутку, она для
     того и есть. */
  white-space: nowrap;
}
.task-source-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }

/* Та же сводка, вторая ось: строка — аккаунт. Колонок пять, три последние
   цифровые — ширины источников (их шесть) сюда не годятся, поэтому свои. */
.task-source-summary__table.task-source-summary__table--accounts {
  min-width: 620px;
}
.task-source-summary__table--accounts th:nth-child(1) { width: 30%; }
.task-source-summary__table--accounts th:nth-child(2) { width: 26%; }
.task-source-summary__table--accounts th:nth-child(n+3):nth-child(-n+5) {
  width: 14.6%;
  text-align: right;
}

/* Сводка поиска: строка — ключ. Колонок шесть, три последние цифровые. */
.task-keyword-summary__table {
  min-width: 760px;
}
.task-keyword-summary__table th {
  white-space: nowrap;
}
.task-keyword-summary__table th:nth-child(1) { width: 30%; }
.task-keyword-summary__table th:nth-child(2) { width: 18%; }
.task-keyword-summary__table th:nth-child(3) { width: 16%; }
.task-keyword-summary__table th:nth-child(n+4):nth-child(-n+6) {
  width: 12%;
  text-align: right;
}
.task-keyword-summary__table td {
  vertical-align: middle;
}
.task-keyword-summary__kw {
  overflow-wrap: anywhere;
  font-weight: 600;
}
/* Номер прохода — приписка к ключу, а не отдельная колонка: проходов чаще
   всего один, и целый столбец единиц занимал бы место зря. */
.task-keyword-summary__pass,
.task-keyword-summary__account {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.task-keyword-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-keyword-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }

/* Сводка подписки/отписки. Таблиц две: чаты («куда дошли») и аккаунты («кто
   сколько сделал»), обе на общей оболочке сводок. Колонок шесть у аккаунтов и
   семь у чатов, цифровые — последние четыре. */
.task-subs-summary__table {
  min-width: 720px;
}
.task-subs-summary__table th {
  white-space: nowrap;
}
.task-subs-summary__table th:nth-child(1) { width: 26%; }
.task-subs-summary__table th:nth-child(2) { width: 26%; }
.task-subs-summary__table th:nth-child(n+3):nth-child(-n+6) {
  width: 12%;
  text-align: right;
}
.task-subs-summary__table td {
  vertical-align: middle;
}
.task-subs-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-subs-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-subs-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-subs-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-subs-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Лимит аккаунта — приписка к числу, а не отдельная колонка: число это
   результат, а лимит только рамка вокруг него. */
.task-subs-summary__limit {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}

/* Сводка накрутки. Таблица одна — строка на аккаунт: две таблицы на один
   прогон читались громоздко, а «куда» уместилось в колонку «Посты» и её
   подсказку. */
.task-boost-summary__table-wrap {
  max-height: 360px;
  margin-bottom: 0;
}
.task-boost-summary__table {
  min-width: 780px;
}
.task-boost-summary__table th {
  white-space: nowrap;
}
.task-boost-summary__table th:nth-child(1) { width: 24%; }
.task-boost-summary__table th:nth-child(2) { width: 14%; }
.task-boost-summary__table th:nth-child(3) { width: 22%; }
.task-boost-summary__table th:nth-child(n+4):nth-child(-n+7) {
  width: 10%;
  text-align: right;
}
.task-boost-summary__table td {
  vertical-align: middle;
}
.task-boost-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-boost-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-boost-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-boost-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-boost-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Лимит аккаунта — приписка к числу, а не отдельная колонка: число это
   результат, а рамка вокруг него только рамка. */
.task-boost-summary__limit {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}
/* «Что поставлено»: эмодзи с числом. Ячейка не переносится в столбик —
   лишнее не влезло, значит уходит в «ещё N» и в подсказку. display ячейке не
   меняем: td с display:flex выпадает из таблицы, и колонки соседних строк
   перестают сходиться. */
.task-boost-summary__tally {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-mute, #6b7280);
}
.task-boost-summary__emoji {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.task-boost-summary__emoji + .task-boost-summary__emoji {
  margin-left: 8px;
}
.task-boost-summary__emoji b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text, #202124);
}
.task-boost-summary__emoji--rest {
  font-size: 12px;
}
/* Набор целиком — одной строкой над таблицей: самый короткий ответ на «что
   вообще сделано». Второй строкой — пауза после вступления: она объясняет
   длительность прогона там же, где на неё смотрят. Обе тише таблицы, потому
   что это итог и оговорка, а не разбор. */
.task-boost-summary__legend,
.task-boost-summary__note {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Сводка рассылки по ЛС. Таблица одна — строка на аккаунт: «кому и сколько»
   уместилось в колонку «Отправлено» с подсказкой, а причины пропусков и
   отказов — в подсказки своих чисел. Колонок семь, цифровые — последние
   пять. */
.task-broadcast-summary__table-wrap {
  max-height: 360px;
  margin-bottom: 0;
}
.task-broadcast-summary__table {
  min-width: 780px;
}
.task-broadcast-summary__table th {
  white-space: nowrap;
}
.task-broadcast-summary__table th:nth-child(1) { width: 22%; }
.task-broadcast-summary__table th:nth-child(2) { width: 20%; }
.task-broadcast-summary__table th:nth-child(n+3):nth-child(-n+7) {
  width: 11.6%;
  text-align: right;
}
.task-broadcast-summary__table td {
  vertical-align: middle;
}
.task-broadcast-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-broadcast-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-broadcast-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-broadcast-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-broadcast-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Лимит аккаунта — приписка к числу отправленных: «4 / 50». Тише самого
   числа, потому что число это результат, а лимит только рамка вокруг него. */
.task-broadcast-summary__limit {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}
/* Кому писали и что уходило — строкой над таблицей, следом рамка лимитов.
   Обе тише таблицы: это условия прогона, а не его разбор. */
.task-broadcast-summary__legend,
.task-broadcast-summary__note {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Сводка рассылки по группам. Строка — аккаунт, но колонок восемь: у этого
   модуля отправка ещё не итог, и «дожило/удалено» стоят своими числами рядом
   с ней. Цифровые — последние шесть. */
.task-groupcast-summary__table-wrap {
  max-height: 360px;
  margin-bottom: 0;
}
.task-groupcast-summary__table {
  min-width: 820px;
}
.task-groupcast-summary__table th {
  white-space: nowrap;
}
.task-groupcast-summary__table th:nth-child(1) { width: 20%; }
.task-groupcast-summary__table th:nth-child(2) { width: 18%; }
.task-groupcast-summary__table th:nth-child(n+3):nth-child(-n+8) {
  width: 10.3%;
  text-align: right;
}
.task-groupcast-summary__table td {
  vertical-align: middle;
}
.task-groupcast-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-groupcast-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-groupcast-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-groupcast-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-groupcast-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Лимит аккаунта — приписка к числу отправленных: «3 / 10». Тише самого
   числа, потому что число это результат, а лимит только рамка вокруг него. */
.task-groupcast-summary__limit {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}
/* Откуда чаты и как они разложены — строкой над таблицей, следом рамка
   лимитов и проверки доставки. Обе тише таблицы: это условия прогона. */
.task-groupcast-summary__legend,
.task-groupcast-summary__note {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Сводка заполнения профилей: строка — аккаунт. Колонка «Что заполнено»
   текстовая и тянется, три остальные — узкие. */
.task-profile-summary__table-wrap,
.task-creator-summary__table-wrap {
  max-height: 360px;
  margin-bottom: 0;
}
.task-profile-summary__table {
  min-width: 720px;
}
.task-profile-summary__table th {
  white-space: nowrap;
}
.task-profile-summary__table th:nth-child(1) { width: 22%; }
.task-profile-summary__table th:nth-child(2) { width: 20%; }
.task-profile-summary__table th:nth-child(3) { width: 38%; }
.task-profile-summary__table th:nth-child(n+4):nth-child(-n+5) {
  width: 10%;
  text-align: right;
}
.task-profile-summary__fields {
  color: var(--text-mute, #6b7280);
  overflow-wrap: anywhere;
}

/* Сводка создания чатов: строка — аккаунт, колонок три. Что именно создано —
   подсказкой к числу: ссылок у аккаунта столько же, сколько чатов. */
.task-creator-summary__table {
  min-width: 560px;
}
.task-creator-summary__table th {
  white-space: nowrap;
}
.task-creator-summary__table th:nth-child(1) { width: 34%; }
.task-creator-summary__table th:nth-child(2) { width: 34%; }
.task-creator-summary__table th:nth-child(3) { width: 32%; text-align: right; }

.task-profile-summary__table td,
.task-creator-summary__table td {
  vertical-align: middle;
}
.task-profile-summary__account,
.task-creator-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-profile-summary__num,
.task-creator-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-profile-summary__num.is-ok,
.task-creator-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-profile-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
/* Условия прогона и что легло за прогон — строками над таблицей, тише её. */
.task-profile-summary__legend,
.task-creator-summary__legend {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Сводка автоответчика: строка — аккаунт. Колонок пять, цифровые — три
   последние. Таблица короткая: у слушателя нет ни целей, ни очереди. */
.task-autoreply-summary__table-wrap {
  max-height: 360px;
  margin-bottom: 0;
}
.task-autoreply-summary__table {
  min-width: 640px;
}
.task-autoreply-summary__table th {
  white-space: nowrap;
}
.task-autoreply-summary__table th:nth-child(1) { width: 26%; }
.task-autoreply-summary__table th:nth-child(2) { width: 26%; }
.task-autoreply-summary__table th:nth-child(n+3):nth-child(-n+5) {
  width: 16%;
  text-align: right;
}
.task-autoreply-summary__table td {
  vertical-align: middle;
}
.task-autoreply-summary__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.task-autoreply-summary__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-autoreply-summary__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-autoreply-summary__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-autoreply-summary__num.is-skip { color: var(--text-mute, #6b7280); }
/* Чем отвечаем и в каких рамках — строкой над таблицей, тише её самой. */
.task-autoreply-summary__legend {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Сводка клонера чатов: строка — аккаунт, как и у всех остальных сводок.
   Что прогону было позволено брать и почему сумма по строкам меньше
   счётчика — обе строки поясняющие, поэтому тише таблицы. */
.task-clone-summary__legend,
.task-clone-summary__filters,
.task-clone-summary__note {
  color: var(--text-mute, #6b7280);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.task-clone-senders__table-wrap {
  max-height: 260px;
  margin-bottom: 10px;
}
.task-clone-senders__table {
  min-width: 780px;
}
.task-clone-senders__table th {
  white-space: nowrap;
}
.task-clone-senders__table th:nth-child(1) { width: 20%; }
.task-clone-senders__table th:nth-child(2) { width: 22%; }
.task-clone-senders__table th:nth-child(3) { width: 18%; }
.task-clone-senders__table th:nth-child(n+4):nth-child(-n+7) {
  width: 10%;
  text-align: right;
}
.task-clone-senders__table td {
  vertical-align: middle;
}
.task-clone-senders__account {
  overflow-wrap: anywhere;
  font-weight: 600;
}
/* Донор — подпись профиля из источника: «Имя (@username)». Она длиннее
   аккаунта и в столбец не всегда влезает, поэтому обрезается многоточием, а
   не растягивает таблицу; целиком её видно в подсказке строки. */
.task-clone-senders__donor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-mute, #6b7280);
}
.task-clone-senders__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-clone-senders__num.is-ok { color: var(--ok, #16803c); font-weight: 650; }
.task-clone-senders__num.is-warn { color: var(--warning, #b66a00); }
.task-clone-senders__num.is-error { color: var(--danger, #c73535); font-weight: 650; }
.task-clone-senders__num.is-skip { color: var(--text-mute, #6b7280); }
/* План аккаунта — приписка к отданному: «12 / 57». Тише самого числа, потому
   что число это результат, а план только рамка вокруг него. */
.task-clone-senders__plan {
  color: var(--text-mute, #6b7280);
  font-weight: 400;
}
.task-account-stage {
  display: inline;
  color: var(--text-mute, #6b7280);
  font-weight: 500;
}
.task-account-stage--running {
  color: var(--accent, #2563eb);
}
.task-account-stage--done {
  color: var(--ok, #16803c);
}
.task-account-stage--warn,
.task-account-stage--paused {
  color: var(--warning, #b66a00);
}
.task-account-stage--error {
  color: var(--danger, #c73535);
}

.task-detail__results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.task-detail__result-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.task-result-pill {
  appearance: none;
  border: 1px solid var(--border, #e3e8f0);
  background: var(--bg-card, #fff);
  color: var(--text-mute, #6b7280);
  border-radius: 999px;
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.task-result-pill.is-active {
  border-color: var(--accent, #2563eb);
  background: var(--accent, #2563eb);
  color: #fff;
}
.task-result-pill__n { opacity: 0.75; font-weight: 600; }
.task-detail__result-actions { display: inline-flex; align-items: center; gap: 8px; }
.task-detail__result-search {
  border: 1px solid var(--border, #e3e8f0);
  background: var(--bg-card, #fff);
  color: var(--text, #1c2434);
  border-radius: 8px;
  height: 30px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  min-width: 200px;
}
.btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }

/* ═══ Подсказки в стиле Gmail ════════════════════════════════════════
   Единый вид всех hover-подсказок: тёмно-серая плашка как в Gmail
   (#3C4043, ~92%), белый текст 12px, радиус 4px, без стрелки.
   Глобальный тултип .gm-tooltip рисуется из JS (initGmailTooltips)
   вместо нативных title-подсказок и появляется под элементом. */

.gm-tooltip {
  position: fixed;
  z-index: 100000;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(60, 64, 67, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.gm-tooltip.is-visible { opacity: 1; }
body.theme-dark .gm-tooltip { background: rgba(60, 64, 67, 0.97); }

/* Существующие кастомные подсказки приводим к тому же виду */
.task-bar__tooltip,
.sidebar-collapsed-tooltip,
body.theme-dark .sidebar-collapsed-tooltip,
.inv-help[data-tooltip]::after {
  background: rgba(60, 64, 67, 0.92);
  color: #fff;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: none;
}
body.theme-dark .task-bar__tooltip,
body.theme-dark .inv-help[data-tooltip]::after {
  background: rgba(60, 64, 67, 0.97);
}

/* Стрелки-уголки убираем — у подсказок Gmail их нет */
.inv-help[data-tooltip]::before {
  display: none;
}

/* ════════════════════════════════════════════════════════════════
   Подокна «Конфиденциальность» — визуальный язык addw.
   Эталон — окна «Добавить аккаунты» (#add-modal .addw, #phone-auth-modal)
   и «Изменить профиль · шаг 2» (#edit-profile-form-modal): белая карточка
   radius 28px, Google Sans, заголовок 23px/500, строки-пилюли с hover
   #f1f3f4 и синими иконками #0b57d0, поля 40px с фокусом #0b57d0,
   кнопки-пилюли 40px/r20 (отмена — синий текст, основная — заливка).
   Только CSS поверх текущей разметки (как #session-import-modal):
   HTML/JS/ids не меняются, контракт модалок сохранён. Добавлено в конец
   файла, чтобы перекрыть Nimbus-секции (§7.8/§7.9) по порядку источника.
   Охват: #edit-privacy-modal, #edit-privacy-form-modal, #twofa-modal,
   #cloud-password-change-modal, #auto-delete-modal, #security-confirm-modal.
   ──────────────────────────────────────────────────────────────── */

/* ── Панели: белая карточка addw ── */
html body #edit-privacy-modal .modal__panel--privacy-list,
html body #edit-privacy-form-modal .modal__panel--privacy-form,
html body #twofa-modal .tg-security-modal,
html body #cloud-password-change-modal .modal__panel--password,
html body #auto-delete-modal .modal__panel--auto-delete,
html body #security-confirm-modal .tg-security-modal,
html body.theme-dark #edit-privacy-modal .modal__panel--privacy-list,
html body.theme-dark #edit-privacy-form-modal .modal__panel--privacy-form,
html body.theme-dark #twofa-modal .tg-security-modal,
html body.theme-dark #cloud-password-change-modal .modal__panel--password,
html body.theme-dark #auto-delete-modal .modal__panel--auto-delete,
html body.theme-dark #security-confirm-modal .tg-security-modal {
  box-sizing: border-box !important;
  width: min(440px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  font-family: var(--app-font) !important;
}

/* ── Шапки: только заголовок (без «Назад» / «Закрыть») ── */
html body #edit-privacy-modal .privacy-list__head,
html body #edit-privacy-form-modal .privacy-form__head,
html body #cloud-password-change-modal .modal__head,
html body #twofa-modal .tg-security-head,
html body #security-confirm-modal .tg-security-head,
html body #auto-delete-modal .auto-delete-modal__head,
html body.theme-dark #edit-privacy-modal .privacy-list__head,
html body.theme-dark #edit-privacy-form-modal .privacy-form__head,
html body.theme-dark #cloud-password-change-modal .modal__head,
html body.theme-dark #twofa-modal .tg-security-head,
html body.theme-dark #security-confirm-modal .tg-security-head,
html body.theme-dark #auto-delete-modal .auto-delete-modal__head {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding: 18px 24px 8px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

/* ── Заголовки → как .addw__header (23px / 500 / 32px) ── */
html body #edit-privacy-modal .privacy-list__title,
html body #edit-privacy-form-modal .privacy-form__title,
html body #cloud-password-change-modal .modal__title,
html body #twofa-modal .tg-security-head__title,
html body #security-confirm-modal .tg-security-head__title,
html body #auto-delete-modal .auto-delete-modal__title,
html body.theme-dark #edit-privacy-modal .privacy-list__title,
html body.theme-dark #edit-privacy-form-modal .privacy-form__title,
html body.theme-dark #cloud-password-change-modal .modal__title,
html body.theme-dark #twofa-modal .tg-security-head__title,
html body.theme-dark #security-confirm-modal .tg-security-head__title,
html body.theme-dark #auto-delete-modal .auto-delete-modal__title {
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
  text-align: left !important;
}

/* ── Круглые иконки-кнопки шапки (назад / закрыть) — убраны из подокон конфиденциальности ── */

/* ── «Конфиденциальность» шаг 1: список пунктов ── */
html body #edit-privacy-modal .privacy-list__body,
html body.theme-dark #edit-privacy-modal .privacy-list__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 4px 12px 16px !important;
  background: transparent !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31, 31, 31, 0.3) transparent !important;
}
html body #edit-privacy-modal .privacy-list__items--security,
html body.theme-dark #edit-privacy-modal .privacy-list__items--security {
  margin: 0 0 8px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #dadce0 !important;
}
html body #edit-privacy-modal .privacy-list__row,
html body.theme-dark #edit-privacy-modal .privacy-list__row {
  width: 100% !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.1s !important;
}
html body #edit-privacy-modal .privacy-list__row:hover,
html body.theme-dark #edit-privacy-modal .privacy-list__row:hover {
  background: #f1f3f4 !important;
}
html body #edit-privacy-modal .privacy-list__row:focus-visible,
html body.theme-dark #edit-privacy-modal .privacy-list__row:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
}
html body #edit-privacy-modal .privacy-list__ico,
html body.theme-dark #edit-privacy-modal .privacy-list__ico {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0b57d0 !important;
  background: transparent !important;
}
html body #edit-privacy-modal .privacy-list__ico svg,
html body.theme-dark #edit-privacy-modal .privacy-list__ico svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.6 !important;
}
html body #edit-privacy-modal .privacy-list__label,
html body.theme-dark #edit-privacy-modal .privacy-list__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}
html body #edit-privacy-modal .privacy-list__value,
html body.theme-dark #edit-privacy-modal .privacy-list__value {
  color: #0b57d0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

/* ── «Конфиденциальность» шаг 2: форма настройки ── */
html body #edit-privacy-form-modal .privacy-form__body,
html body.theme-dark #edit-privacy-form-modal .privacy-form__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 8px 24px !important;
  background: transparent !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31, 31, 31, 0.3) transparent !important;
}
html body #edit-privacy-form-modal .privacy-form__section + .privacy-form__section,
html body.theme-dark #edit-privacy-form-modal .privacy-form__section + .privacy-form__section {
  margin-top: 20px !important;
}
html body #edit-privacy-form-modal .privacy-form__section-title,
html body.theme-dark #edit-privacy-form-modal .privacy-form__section-title {
  margin: 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}
html body #edit-privacy-form-modal .privacy-form__choices,
html body.theme-dark #edit-privacy-form-modal .privacy-form__choices {
  margin: 0 -10px !important;
  padding: 0 !important;
}
html body #edit-privacy-form-modal .privacy-form__radio,
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
  transition: background-color 0.1s !important;
}
html body #edit-privacy-form-modal .privacy-form__radio:hover,
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio:hover {
  background: #f1f3f4 !important;
}
html body #edit-privacy-form-modal .privacy-form__note,
html body.theme-dark #edit-privacy-form-modal .privacy-form__note {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Радио-кнопки privacy-формы и автоудаления — акцент #0b57d0 */
html body #edit-privacy-form-modal .privacy-form__radio input,
html body #auto-delete-modal .auto-delete-radio input[type="radio"],
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio input,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #747775 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
  flex: none !important;
}
html body #edit-privacy-form-modal .privacy-form__radio input::before,
html body #auto-delete-modal .auto-delete-radio input[type="radio"]::before,
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio input::before,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  transition: transform 0.14s ease !important;
  background: #0b57d0 !important;
}
html body #edit-privacy-form-modal .privacy-form__radio input:checked,
html body #auto-delete-modal .auto-delete-radio input[type="radio"]:checked,
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio input:checked,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]:checked {
  border-color: #0b57d0 !important;
}
html body #edit-privacy-form-modal .privacy-form__radio input:checked::before,
html body #auto-delete-modal .auto-delete-radio input[type="radio"]:checked::before,
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio input:checked::before,
html body.theme-dark #auto-delete-modal .auto-delete-radio input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

/* ── «Облачный пароль»: описание, строки-действия, примечание ── */
html body #twofa-modal .tg-security-body,
html body.theme-dark #twofa-modal .tg-security-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow-y: auto !important;
  padding: 4px 12px 8px !important;
  background: transparent !important;
}
html body #twofa-modal .tg-security-text,
html body.theme-dark #twofa-modal .tg-security-text {
  margin: 0 0 8px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
html body #twofa-modal .tg-security-row,
html body.theme-dark #twofa-modal .tg-security-row {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.1s !important;
}
html body #twofa-modal .tg-security-row:hover,
html body.theme-dark #twofa-modal .tg-security-row:hover {
  background: #f1f3f4 !important;
}
html body #twofa-modal .tg-security-row__ico,
html body.theme-dark #twofa-modal .tg-security-row__ico {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0b57d0 !important;
  background: transparent !important;
}
html body #twofa-modal .tg-security-row__ico svg,
html body.theme-dark #twofa-modal .tg-security-row__ico svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.6 !important;
}
html body #twofa-modal .tg-security-row__label,
html body.theme-dark #twofa-modal .tg-security-row__label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}
html body #twofa-modal .tg-security-row--danger .tg-security-row__ico,
html body #twofa-modal .tg-security-row--danger .tg-security-row__label,
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__ico,
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__label {
  color: #d93025 !important;
}
html body #twofa-modal .tg-security-note,
html body.theme-dark #twofa-modal .tg-security-note {
  margin: 8px 0 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* ── «Добавить пароль»: поля как в addw-формах ── */
html body #cloud-password-change-modal .modal__body,
html body.theme-dark #cloud-password-change-modal .modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 8px 24px 4px !important;
  background: transparent !important;
}
html body #cloud-password-change-modal .inv-field,
html body.theme-dark #cloud-password-change-modal .inv-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #cloud-password-change-modal .inv-field__label,
html body.theme-dark #cloud-password-change-modal .inv-field__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}
html body #cloud-password-change-modal .inv-input,
html body.theme-dark #cloud-password-change-modal .inv-input {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}
html body #cloud-password-change-modal .inv-input:focus,
html body.theme-dark #cloud-password-change-modal .inv-input:focus {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
  outline: 0 !important;
}
html body #cloud-password-change-modal .modal__hint,
html body.theme-dark #cloud-password-change-modal .modal__hint {
  margin: 0 !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* ── «Автоудаление сообщений»: строки-радио ── */
html body #auto-delete-modal .auto-delete-modal__body,
html body.theme-dark #auto-delete-modal .auto-delete-modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 4px 12px 8px !important;
  background: transparent !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(31, 31, 31, 0.3) transparent !important;
}
html body #auto-delete-modal .auto-delete-radio,
html body.theme-dark #auto-delete-modal .auto-delete-radio {
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  cursor: pointer !important;
  transition: background-color 0.1s !important;
}
html body #auto-delete-modal .auto-delete-radio:hover,
html body.theme-dark #auto-delete-modal .auto-delete-radio:hover {
  background: #f1f3f4 !important;
}
html body #auto-delete-modal .auto-delete-radio__label,
html body.theme-dark #auto-delete-modal .auto-delete-radio__label {
  color: #1f1f1f !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #auto-delete-modal .auto-delete-modal__note,
html body.theme-dark #auto-delete-modal .auto-delete-modal__note {
  margin: 10px 0 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* ── «Подтвердите действие»: текст сообщения ── */
html body #security-confirm-modal .tg-security-confirm-body,
html body.theme-dark #security-confirm-modal .tg-security-confirm-body {
  min-height: 64px !important;
  max-height: none !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 24px 8px !important;
  background: transparent !important;
}
html body #security-confirm-modal .tg-security-confirm-msg,
html body.theme-dark #security-confirm-modal .tg-security-confirm-msg {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #444746 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  text-align: left !important;
}

/* ── Футеры → как .addw__actions (без разделителя, справа) ── */
html body #edit-privacy-form-modal .privacy-form__footer,
html body #twofa-modal .tg-security-footer,
html body #cloud-password-change-modal .modal__foot,
html body #auto-delete-modal .auto-delete-modal__foot,
html body #security-confirm-modal .security-confirm__foot,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer,
html body.theme-dark #twofa-modal .tg-security-footer,
html body.theme-dark #cloud-password-change-modal .modal__foot,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot,
html body.theme-dark #security-confirm-modal .security-confirm__foot {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 24px 20px !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* ── Кнопки футеров → пилюли .addw__btn (40px / r20) ── */
html body #edit-privacy-form-modal .privacy-form__footer .btn,
html body #twofa-modal .tg-security-footer .btn,
html body #cloud-password-change-modal .modal__foot .btn,
html body #auto-delete-modal .auto-delete-modal__foot .btn,
html body #security-confirm-modal .security-confirm__foot .btn,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn,
html body.theme-dark #twofa-modal .tg-security-footer .btn,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}
html body #edit-privacy-form-modal .privacy-form__footer .btn--ghost,
html body #twofa-modal .tg-security-footer .btn--ghost,
html body #cloud-password-change-modal .modal__foot .btn--ghost,
html body #auto-delete-modal .auto-delete-modal__foot .btn--ghost,
html body #security-confirm-modal .security-confirm__foot .btn--ghost,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--ghost,
html body.theme-dark #twofa-modal .tg-security-footer .btn--ghost,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--ghost,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--ghost,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--ghost {
  background: transparent !important;
  color: #0b57d0 !important;
  padding: 0 12px !important;
}
html body #edit-privacy-form-modal .privacy-form__footer .btn--ghost:hover,
html body #twofa-modal .tg-security-footer .btn--ghost:hover,
html body #cloud-password-change-modal .modal__foot .btn--ghost:hover,
html body #auto-delete-modal .auto-delete-modal__foot .btn--ghost:hover,
html body #security-confirm-modal .security-confirm__foot .btn--ghost:hover,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--ghost:hover,
html body.theme-dark #twofa-modal .tg-security-footer .btn--ghost:hover,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--ghost:hover,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--ghost:hover,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body #edit-privacy-form-modal .privacy-form__footer .btn--primary,
html body #cloud-password-change-modal .modal__foot .btn--primary,
html body #auto-delete-modal .auto-delete-modal__foot .btn--primary,
html body #security-confirm-modal .security-confirm__foot .btn--primary,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--primary,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--primary,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--primary,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--primary {
  background: #0b57d0 !important;
  border: 0 !important;
  color: #ffffff !important;
  padding: 0 20px !important;
  font-weight: 500 !important;
}
html body #edit-privacy-form-modal .privacy-form__footer .btn--primary:hover,
html body #cloud-password-change-modal .modal__foot .btn--primary:hover,
html body #auto-delete-modal .auto-delete-modal__foot .btn--primary:hover,
html body #security-confirm-modal .security-confirm__foot .btn--primary:hover,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--primary:hover,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--primary:hover,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--primary:hover,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--primary:hover {
  background: #0a4fc0 !important;
  border-color: transparent !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
  filter: none !important;
}
html body #edit-privacy-form-modal .privacy-form__footer .btn--primary:disabled,
html body #cloud-password-change-modal .modal__foot .btn--primary:disabled,
html body #auto-delete-modal .auto-delete-modal__foot .btn--primary:disabled,
html body #security-confirm-modal .security-confirm__foot .btn--primary:disabled,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--primary:disabled,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--primary:disabled,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--primary:disabled,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--primary:disabled {
  background: #c6c9cf !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* display-правила выше не должны ломать нативный [hidden] */
html body #edit-privacy-modal [hidden],
html body #edit-privacy-form-modal [hidden],
html body #twofa-modal [hidden],
html body #cloud-password-change-modal [hidden],
html body #auto-delete-modal [hidden],
html body #security-confirm-modal [hidden],
html body.theme-dark #edit-privacy-modal [hidden],
html body.theme-dark #edit-privacy-form-modal [hidden],
html body.theme-dark #twofa-modal [hidden],
html body.theme-dark #cloud-password-change-modal [hidden],
html body.theme-dark #auto-delete-modal [hidden],
html body.theme-dark #security-confirm-modal [hidden] {
  display: none !important;
}

/* TABLE SKELETON - canonical table contract (.app-table).
   Продолжение канонического контракта табов (см. блок --app-table-tab-* выше):
   таблица аккаунтов — эталон. Списочные таблицы (аккаунты, прокси, базы)
   несут класс `app-table` рядом со своим модульным классом и наследуют отсюда
   оболочку: шрифт, шапку 44px, ячейки, hover/selected, глифы сортировки.
   Геометрия колонок (ширины, colgroup) и сущностные ячейки остаются
   модульными. Новые списочные таблицы должны переиспользовать этот блок,
   а не заводить локальные копии оболочки.

   ── Как править внешний вид таблиц ──────────────────────────────────────────
   Правила ниже НЕ содержат зашитых значений: всё, что отличает одну таблицу от
   другой, вынесено в переменные --app-table-* и объявлено один раз на
   .am-table-shell. Отсюда два простых правила работы:

     • нужно поменять ВСЕ списочные таблицы разом — правь значение токена
       в этом объявлении;
     • нужно поменять ОДНУ таблицу — переопредели токен на её оболочке
       (`html body .view-proxy .am-table-shell { --app-table-cell-pad: 10px 14px; }`)
       и больше ничего.

   Так правка одной таблицы физически не может задеть соседнюю, а таблицы
   остаются похожими друг на друга по построению, а не по договорённости.
   Локальные копии оболочки с !important заводить не нужно — если для правки
   не хватает токена, заведи токен, а не ещё один !important. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-font: var(--app-font);
  --app-table-accent-rgb: 37, 99, 235;

  /* Шапка. Горизонталь здесь обязана совпадать с горизонталью ячейки
     (--app-table-cell-pad), иначе заголовок колонки стоит не над своими
     данными: при 12px против 16px каждая «Гео», «Статус», «Роль» сидела на
     4px левее того, что под ней, и таблица читалась косой. Краевые колонки
     уже делят общий --app-table-edge-pad, так что расходилась только
     середина. */
  --app-table-head-h: 44px;
  --app-table-head-pad: 10px 16px;
  --app-table-head-size: 11.5px;
  --app-table-head-line: 16px;
  --app-table-head-weight: 600;
  --app-table-head-tracking: 0.5px;
  --app-table-head-transform: uppercase;
  --app-table-head-color: var(--text-mute, #64748b);
  --app-table-head-bg: var(--bg-card, #fff);
  --app-table-head-border: var(--border, #e7ebf2);

  /* Состояния заголовка: приглушён в покое, темнеет под курсором и у
     колонки, по которой отсортировано. Глиф сортировки в покое прозрачен
     (место под него зарезервировано), под курсором — серый, у
     отсортированной колонки — акцентный. */
  --app-table-head-color-hover: var(--text, #1f2740);
  --app-table-head-sorted-color: var(--text, #1f2740);
  --app-table-sort-color: var(--text-light, #94a3b8);
  --app-table-sort-active: var(--primary, #3578f6);

  /* Шестерёнка «Настроить колонки» в правом краю шапки. --app-table-gear-ring
     — диаметр задней подложки под иконкой: она же зона наведения, поэтому
     круг и хит-зона не могут разойтись. Кнопка растёт от своего центра
     (см. правила .am-cols-btn), так что менять диаметр можно прямо здесь —
     иконка останется на месте, а высота шапки не шелохнётся.
     --app-table-gear-inset — расстояние от правого края таблицы до ЦЕНТРА
     шестерёнки. */
  --app-table-gear-ring: 32px;
  --app-table-gear-inset: 24px;
  --app-table-gear-icon: 16px;
  --app-table-gear-color: #5f6368;
  /* Подложка — один серый тон под 8%: и под курсором, и при раскрытом списке
     колонок. Тёмная тема переопределяет только этот токен (блок ниже). */
  --app-table-gear-ring-bg: rgba(60, 64, 67, 0.08);

  /* Ячейки. --app-table-cell-size задаёт кегль всей строки: вложенные
     элементы наследуют его (см. правило font-size: inherit ниже), поэтому
     чипы, кнопки и теги не разъезжаются с текстом ячейки. */
  --app-table-cell-pad: 12px 16px;
  --app-table-cell-size: 13px;
  --app-table-cell-weight: 400;
  --app-table-cell-color: var(--text);
  --app-table-cell-border: var(--border, #eef2f7);
  --app-table-edge-pad: 16px;

  /* Высота строки. auto — высоту диктует содержимое: строка ровно такая,
     какой её сделала сумма «вертикальный padding + самый высокий элемент».
     Так живут аккаунты и диспетчер: у них в строке двухэтажные ячейки, и
     фиксировать высоту им нечем.

     Списочным таблицам этого мало: их ставят рядом и переключают одну на
     другую, поэтому лишняя пилюля статуса на 24px не должна делать таблицу
     выше соседней. Такие таблицы объявляют высоту числом на своей оболочке
     (см. блок «Единая высота строки» ниже) — вместе с --app-table-cell-pad
     без вертикальной части, иначе высоту снова начнёт считать контент.
     Токен уходит на саму строку (tbody tr), и для строки таблицы height —
     это МИНИМУМ: контент выше заданного всё равно её раздвинет, обрезать
     он ничего не может. */
  --app-table-row-h: auto;

  /* Единственный «якорь» строки — одно поле с весом 500 (правило 1–1–0). Это
     то, чем строку узнают в лицо: имя аккаунта, код страны прокси, название
     базы, название записи, заголовок задачи. Кегль якоря отдельным токеном:
     по умолчанию он равен кеглю ячейки (аккаунты и прокси — 13px), но модуль
     вправе поднять его у себя, не трогая остальные колонки. */
  --app-table-anchor-size: var(--app-table-cell-size, 13px);
  --app-table-anchor-weight: 500;

  /* Мета-подписи строки: пилюля статуса, порядковый номер. Мельче основного
     кегля, но одинаково во всех таблицах — раньше пилюля статуса была 12px
     в аккаунтах и 11px в задачах и базах, и разницу никто не замечал, пока
     таблицы не поставили рядом. */
  --app-table-meta-size: 12px;

  /* Разделитель колонок в шапке: он же черта, за которую тянут ширину. */
  --app-table-divider: var(--border-strong, #d3dae6);

  /* Состояния строки */
  --app-table-row-hover-a: 0.04;
  --app-table-row-selected-bg: var(--px-row-selected-bg, #c3dbff);
}

/* Тёмная тема правит только тон шестерёнки: размеры и геометрия у неё общие
   со светлой, поэтому дублировать их здесь нечего. */
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-gear-color: #9aa0a6;
  --app-table-gear-ring-bg: rgba(232, 234, 237, 0.1);
}

/* ── Единая высота строки: аудитория, источники, прокси ─────────────────────
   Одна высота на пять таблиц: базы пользователей, записи внутри базы, базы
   источников, источники внутри базы, прокси. До этого высоту каждой строки
   считал её самый высокий элемент, и таблицы разъезжались на 1–3px: базы и
   источники 45.5px, прокси 46.5px, записи внутри базы 48.5px (виновата
   пилюля статуса на 24px). Разницу не видно по отдельности, но их
   переключают одну на другую — и строка «дышала» на каждом переходе.

   Высота живёт в --app-table-row-h, а вертикальный padding у ячейки нулевой:
   пока в --app-table-cell-pad есть вертикальная часть, высоту считает
   контент, а не токен. Ячейки центрируются по vertical-align: middle
   (общее правило выше), так что убранные 12px сверху/снизу ничего не
   сдвигают. Аккаунты, диспетчер и модерация здесь не упомянуты намеренно —
   у них --app-table-row-h остаётся auto и высота своя.

   Менять высоту этой пятёрки — править одно число здесь. */
html body :is(.view-proxy, .view-userbase--v2) .am-table-shell,
html body.theme-dark :is(.view-proxy, .view-userbase--v2) .am-table-shell {
  --app-table-row-h: 46px;
  --app-table-cell-pad: 0 16px;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: fixed !important;
  margin-inline: 0 !important;
  border-collapse: collapse !important;
  text-align: left !important;
  font-family: var(--app-table-font) !important;
}

/* Иконочные шрифты (Material Symbols) из переопределения исключаются,
   иначе лигатуры распадаются в текст. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table *:not(.material-symbols-outlined):not(.material-icons),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table *:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--app-table-font) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead {
  background: var(--app-table-head-bg, var(--bg-card, #fff)) !important;
  width: 100% !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead tr,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead tr {
  width: 100% !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th {
  /* Шапка НЕ липкая — сверху закрепляется только .am-gmail-bar. */
  position: static !important;
  z-index: 30 !important;
  height: var(--app-table-head-h, 44px) !important;
  max-height: var(--app-table-head-h, 44px) !important;
  padding: var(--app-table-head-pad, 10px 16px) !important;
  background: var(--app-table-head-bg, var(--bg-card, #fff)) !important;
  border-top: 1px solid var(--app-table-head-border, var(--border, #e7ebf2)) !important;
  border-bottom: 1px solid var(--app-table-head-border, var(--border, #e7ebf2)) !important;
  border-left: none !important;
  color: var(--app-table-head-color, var(--text-mute, #64748b)) !important;
  font-size: var(--app-table-head-size, 11.5px) !important;
  line-height: var(--app-table-head-line, 16px) !important;
  font-weight: var(--app-table-head-weight, 600) !important;
  letter-spacing: var(--app-table-head-tracking, 0.5px) !important;
  text-transform: var(--app-table-head-transform, uppercase) !important;
  text-align: left !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:is([data-sort-key], [data-px-sort-key], [data-md-sort-key], [data-ub2-sort-key], [data-ub2-srcbase-sort-key], [data-ub2-src-sort-key], [data-ubd-sort-key]),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:is([data-sort-key], [data-px-sort-key], [data-md-sort-key], [data-ub2-sort-key], [data-ub2-srcbase-sort-key], [data-ub2-src-sort-key], [data-ubd-sort-key]) {
  cursor: pointer !important;
  transition: color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Тихая шапка: подпись приглушена, пока на колонку не навели. Отклик даём
   только сортируемым заголовкам — иначе шапка обещает клик там, где его нет.
   Подсветка живёт в самой ячейке шапки и не трогает колонку под ней: ховер
   строки и так красит всю строку, два пересекающихся ховера мерцали бы. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:is([data-sort-key], [data-px-sort-key], [data-md-sort-key], [data-ub2-sort-key], [data-ub2-srcbase-sort-key], [data-ub2-src-sort-key], [data-ubd-sort-key]):hover,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:is([data-sort-key], [data-px-sort-key], [data-md-sort-key], [data-ub2-sort-key], [data-ub2-srcbase-sort-key], [data-ub2-src-sort-key], [data-ubd-sort-key]):hover {
  color: var(--app-table-head-color-hover, var(--text, #1f2740)) !important;
}

/* Колонка, по которой отсортировано, узнаётся боковым зрением: подпись
   темнеет вместе со стрелкой. Раньше отличалась только стрелка — 12px глиф
   среди девяти таких же терялся. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted {
  color: var(--app-table-head-sorted-color, var(--text, #1f2740)) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .sort,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .sort {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
  flex: 0 0 12px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  font-size: 0 !important;
  line-height: 12px !important;
  color: var(--app-table-sort-color, var(--text-light, #94a3b8)) !important;
  /* В покое глиф прозрачен, но место под него занято: подпись не прыгает,
     когда стрелка проявляется под курсором. Поэтому прозрачность, а не
     display: none. */
  opacity: 0 !important;
  transition:
    opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:hover .sort,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:hover .sort {
  opacity: 1 !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .sort::before,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .sort::before {
  content: "\2195" !important;
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted .sort,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted .sort {
  font-size: 0 !important;
  opacity: 1 !important;
  color: var(--app-table-sort-active, var(--primary, #3578f6)) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted-asc .sort::before,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted-asc .sort::before {
  content: "\25B2" !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted-desc .sort::before,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-sorted-desc .sort::before {
  content: "\25BC" !important;
}

.geo__code {
  font-weight: 400 !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td {
  padding: var(--app-table-cell-pad, 12px 16px) !important;
  border-bottom: 1px solid var(--app-table-cell-border, var(--border, #eef2f7)) !important;
  color: var(--app-table-cell-color, var(--text)) !important;
  font-size: var(--app-table-cell-size, 13px) !important;
  font-weight: var(--app-table-cell-weight, 400) !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th *,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th * {
  letter-spacing: 0.5px !important;
}

/* Вложенные элементы наследуют кегль своей ячейки (--app-table-cell-size).
   Раньше здесь стояло font-size: 14px, и это прямо противоречило соседнему
   правилу td = 13px: ячейка с голым текстом получалась 13px, а ячейка, где
   текст завёрнут в span (как «Гео» в аккаунтах или кнопка правки имени в
   базах), — 14px. Разнобой был не виден, пока в таблицах не появились
   колонки со сложной вёрсткой.

   Именно inherit, а не значение токена: кнопки и поля ввода не наследуют
   кегль сами (у них свой размер из таблицы стилей браузера), а модульные
   правила с собственным font-size — статусная пилюля, подписи-меты —
   продолжают выигрывать, потому что здесь нет !important. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody *:not(.material-symbols-outlined):not(.material-icons),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody *:not(.material-symbols-outlined):not(.material-icons) {
  font-size: inherit;
}

/* Краевые отступы: первая и последняя колонки не прилипают к границе карточки. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:first-child,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td:first-child,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:first-child,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td:first-child {
  padding-left: var(--app-table-edge-pad, 16px) !important;
  text-align: left !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:last-child,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td:last-child,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th:last-child,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td:last-child {
  padding-right: var(--app-table-edge-pad, 16px) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr {
  /* Высота строки — на самой строке, а не на ячейке: заглушка загрузки держит
     свою высоту через td (--app-skel-row-h), и высота на td отбирала бы её у
     заглушки. Здесь же обе высоты складываются как надо — строка не ниже
     заданной, ячейки растягиваются до неё сами. */
  height: var(--app-table-row-h, auto) !important;
  /* Скорость выделения/ховера строки — канон MOTION.md (motion.css). */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:not(.empty):hover,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:not(.empty):hover {
  background: rgba(var(--app-table-accent-rgb), var(--app-table-row-hover-a, 0.04)) !important;
}

/* Выделение — сплошной цвет строки (единый токен всех списочных таблиц,
   см. v14.7/v15.x): td остаются прозрачными, красится сама строка. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task),
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task):hover,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task):hover {
  background: var(--app-table-row-selected-bg, var(--px-row-selected-bg, #c3dbff)) !important;
  box-shadow: none !important;
}

/* Hover/selected красят строку целиком — фоны на td из модульных стилей
   не должны перекрывать строку. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:not(.empty):hover td,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:not(.empty):hover td,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task) td,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr:is(.is-sel-acc,.is-sel-row,.is-sel-task) td {
  background: transparent !important;
}

/* Пустое состояние: единая строка tr.empty > td[colspan] c .empty-state. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr.empty td,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody tr.empty td {
  text-align: center !important;
  white-space: normal !important;
  border-bottom: none !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table .empty-state__art,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table .empty-state__art {
  color: var(--text-light, #94a3b8);
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table .empty-state__text,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table .empty-state__text {
  color: var(--text-mute, #64748b);
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}

/* ==========================================================================
   Proxy row actions overlay (в аккаунтах такого оверлея больше нет вовсе)
   Колонки Actions больше нет. Оверлей .px-flat__actions в ячейке пароля
   остаётся в разметке, но скрыт (в т.ч. на hover). Копирование пароля —
   через .px-inline-copy, как у host / port / login.
   Блок стоит в самом конце файла, чтобы перебить легаси-раскладку .px-flat__actions.
   ========================================================================== */
/* Ячейка пароля — контейнер оверлея. Селектор повторяет структуру легаси-правила
   (…tbody tr.px-flat__row td { position: static }), плюс класс ячейки — чтобы
   гарантированно перебить его и сделать ячейку containing-block для иконок. */
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__pass-cell,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row td.px-flat__pass-cell {
  position: relative !important;
  overflow: hidden !important;
  /* Ширина зоны иконок = 2 кнопки × 30px + gap 4px + правый отступ 12px ≈ 76px. */
  --px-actions-reserve: 76px;
}

/* Пароль тянется на всю ширину ячейки (как .am-role-cell__content в аккаунтах),
   длинное значение обрезается многоточием; справа — .px-inline-copy. */
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__password,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__password {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__password > span:first-child,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__password > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Оверлей действий — прижат к правому краю ячейки, скрыт по умолчанию. */
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100% - 12px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  z-index: 3 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .12s ease !important;
}

html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__pass-cell .px-flat__actions,
html body.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:focus-within .px-flat__pass-cell .px-flat__actions,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:hover .px-flat__pass-cell .px-flat__actions,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__table tbody tr.px-flat__row:focus-within .px-flat__pass-cell .px-flat__actions {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Row actions stay hidden in the proxy and account/base tables, including hover. */
html body .view-userbase--v2 .px-flat__actions,
html body.theme-dark .view-userbase--v2 .px-flat__actions {
  display: none !important;
}

/* Маска «тает под actions» снята: в пароле при hover — inline .px-inline-copy
   (как у host/port/login), а оверлей .px-flat__actions остаётся скрытым. */

/* Компактные иконки-кнопки (30px), стиль иконок строки в аккаунтах. */
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__link-action,
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health,
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__copy {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #444746 !important;
  cursor: pointer !important;
  transition: background .12s ease, color .12s ease !important;
}

html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__link-action:hover:not([disabled]),
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health:hover,
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__copy:hover {
  background: rgba(68, 71, 70, 0.08) !important;
  color: #202124 !important;
  text-decoration: none !important;
}

html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .material-symbols-outlined {
  width: 19px !important;
  height: 19px !important;
  font-size: 19px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* Цвет иконки по результату проверки. */
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--ok { color: #059669 !important; }
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--ok:hover { background: rgba(5, 150, 105, 0.10) !important; color: #059669 !important; }
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--error { color: #dc2626 !important; }
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--error:hover { background: rgba(220, 38, 38, 0.10) !important; color: #dc2626 !important; }

/* Идёт проверка — иконка не крутится: строка просто ждёт своей очереди
   (статичное «многоточие», приглушённое). Ход и итог всей проверки видно
   в тулбаре после «Выбрано: N». */
html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__link-action--busy {
  cursor: progress !important;
  opacity: .55 !important;
}

/* Тач/без hover: действия видны всегда (наведения нет), пароль обрезаем справа. */
@media (hover: none) {
  html body.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   «Прокси» / «Авто-подбор прокси» → визуальный язык addw.
   Эталон — окно «Добавление аккаунтов» (#add-modal .addw) и диалог
   #dlg-modal.dlg-modal--addw: белая карточка r28 с мягкой тенью,
   крупный заголовок 23px/500 без разделителя, футер без разделителя,
   кнопки-пилюли 40px/r20 (Отмена — синий текст, основная — синяя
   заливка #0b57d0). Окно всегда светлое, поэтому light == dark.
   ────────────────────────────────────────────────────────────────── */

/* Панель → белая карточка addw (r28 / мягкая тень / Google Sans). */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel {
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
}

/* Шапка → как .addw__header: без разделителя, крупный заголовок,
   круглая «крестик»-кнопка прижата к верху. */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__head,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__head {
  min-height: 0 !important;
  padding: 24px 20px 6px 24px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__title,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__title {
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
  white-space: normal !important;
  overflow: visible !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__head .edit-profile__nav,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__head .edit-profile__nav {
  align-self: start !important;
}

/* Тело → отступы addw, приглушённая подсказка #444746, мягкие ряды. */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__body,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__body {
  padding: 6px 24px 10px !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__hint,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__hint {
  color: #444746 !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__row,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__row {
  border-radius: 12px !important;
}

html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__select,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__select {
  padding: 10px 36px 10px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23889099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
}

/* Футер → как .addw__actions: без разделителя, прозрачный, справа
   (счётчик слева тянется flex:1 из style.css). */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer {
  padding: 14px 24px 20px !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* Кнопки футера → пилюли .addw__btn (40px / r20). */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action {
  height: 40px !important;
  min-width: 64px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
/* Отмена — синий текст без заливки (как .addw__btn--cancel). */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:not(.privacy-form__action--primary),
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:not(.privacy-form__action--primary) {
  background: transparent !important;
  color: #0b57d0 !important;
  padding: 0 12px !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:not(.privacy-form__action--primary):hover,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:not(.privacy-form__action--primary):hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Основная — синяя заливка-пилюля #0b57d0 (как .addw__btn--primary). */
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary {
  background: #0b57d0 !important;
  border: 0 !important;
  color: #ffffff !important;
}
html body :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary:hover,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
  filter: none !important;
}

/* USERBASE MODULE - gmail bar bulk actions parity */
/* Кнопки массовых действий над базами видны только при выделении; базовые
   действия (добавить/обновить/ещё) на время выделения скрываются — ровно
   как в таблицах аккаунтов и прокси. */
html body .view-userbase--v2 .ub2-gmail-bar .ub2-sel-action,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .ub2-sel-action {
  display: none !important;
}
html body .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-add-many,
html body .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-refresh,
html body .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-more-menu,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-add-many,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-refresh,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar.has-selection #ub2-more-menu {
  display: none !important;
}
html body .view-userbase--v2 .ub2-gmail-bar.has-selection .ub2-sel-action,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar.has-selection .ub2-sel-action {
  display: inline-flex !important;
}
/* Список баз источников — тот же канон: базовые действия на время выделения
   уступают место массовым. Воронка остаётся, как у списка аудитории: фильтр
   сужает список, из которого выделение и набирают. */
html body .view-userbase--v2 .sbl-gmail-bar.has-selection :is(
  #sbl-add-many,
  #pbl-add-many,
  #sbl-refresh,
  #pbl-refresh,
  #sbl-more-menu
),
html body.theme-dark .view-userbase--v2 .sbl-gmail-bar.has-selection :is(
  #sbl-add-many,
  #pbl-add-many,
  #sbl-refresh,
  #pbl-refresh,
  #sbl-more-menu
) {
  display: none !important;
}
/* Панель открытого источника живёт по тому же канону: на время выделения
   базовые действия (добавить, обновить, «Ещё») уступают место массовым. */
html body .view-userbase--v2 .ubs-gmail-bar.has-selection :is(
  #ubs-add-sources,
  #pbd-add-sources,
  #ubs-refresh,
  #pbd-refresh,
  #ubs-more-menu
),
html body.theme-dark .view-userbase--v2 .ubs-gmail-bar.has-selection :is(
  #ubs-add-sources,
  #pbd-add-sources,
  #ubs-refresh,
  #pbd-refresh,
  #ubs-more-menu
) {
  display: none !important;
}
html body .view-userbase--v2 .ub2-gmail-bar .ub2-sel-action {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-userbase--v2 .ub2-gmail-bar .ub2-sel-action:hover {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body .view-userbase--v2 .ub2-gmail-bar .ub2-sel-action svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.7px !important;
  fill: none !important;
}
/* Корзина баз повторяет аккаунты буквально: тот же 22px-глиф и нейтральная
   круглая hover-плашка. Опасность подтверждается диалогом, а не красным цветом
   в списочном тулбаре. */
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-sel-delete, #ubd-sel-delete) svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-sel-delete, #pbd-sel-delete) svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-sel-delete, #ubd-sel-delete) svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-sel-delete, #pbd-sel-delete) svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
}

/* Счётчик выбранных баз — как в таблицах аккаунтов и прокси. */
html body .view-userbase--v2 .ub2-gmail-bar .am-table-counter,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .am-table-counter {
  display: none !important;
  order: 50 !important;
}
html body .view-userbase--v2 .ub2-gmail-bar.has-global-selection .am-table-counter,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar.has-global-selection .am-table-counter {
  display: inline-flex !important;
}

/* Userbase detail modal: tools row + async loading */
/* Панель инструментов открытой базы: поиск, дубли, копирование, экспорт,
   отправка в Инвайтер/Рассыльщик. Язык addw: поле поиска 40px/r8 с синим
   фокусом #0b57d0, действия — круглые иконки 40px с hover-плашкой Gmail. */

/* USERBASE MODULE - inline row checkbox in first cell (accounts/proxy parity) */
/* Чекбокс строки встроен в первую ячейку «Название базы», как в аккаунтах и
   прокси. Отдельной колонки-чекбокса и мастер-чекбокса в шапке больше нет —
   единственный мастер живёт в тулбаре (#ub2-toolbar-check). Первая колонка
   встаёт на общий рельс --px-check-align (16px, см. блок LEAD RAIL в конце
   файла) — на нём же стоят мастер-чекбокс тулбара и первый таб. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th:first-child,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td:first-child,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table th:first-child,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td:first-child {
  padding-left: var(--px-check-align, 15.5px) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name {
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .px-flat__check-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .px-flat__check-cell {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  /* Отступ до названия — канон рельса (LEAD RAIL, конец файла): 20px. */
  margin-right: var(--app-table-lead-gap, 20px) !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
/* Ширину названия считаем от рельса: чекбокс + зазор + номер строки (2 знака
   и 18px до названия — те же 5ch, что у таблицы источников). */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit {
  vertical-align: middle !important;
  max-width: calc(100% - var(--tp-checkbox-size, 21px) - var(--app-table-lead-gap, 20px) - 5ch) !important;
}
/* Ширину таблице задаёт общий модуль колонок: он всегда укладывает сумму
   ширин ровно в контейнер, а тесноту разбирает горизонтальная прокрутка
   .am-table-scroll по минимумам колонок — своего min-width таблице не нужно. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table {
  width: 100% !important;
}

/* USERBASE MODULE - one typography stack for the entire database UI.
   The dialogs live outside #view-userbase in the document, so they are
   included explicitly. The root class in :is() also gives this late rule
   enough specificity to replace legacy monospace declarations on controls.
   .newbase-modal намеренно не здесь: окна заведения базы живут в языке
   addw вместе с «Добавить прокси» (общий слой в конце файла). */
html body :is(
  #view-userbase.view-userbase--v2,
  #ub-detail-modal.modal,
  #ub-import-modal.modal
),
html body :is(
  #view-userbase.view-userbase--v2,
  #ub-detail-modal.modal,
  #ub-import-modal.modal
) * {
  font-family: var(--app-font) !important;
}

/* USERBASE MODALS - addw / proxy-add visual parity.
   Both database dialogs now use the same white 28px card, compact header,
   blue focus treatment and pill actions as #px-add-modal. */
html body :is(
  .newbase-modal .ub-create-modal__panel,
  #ub-detail-modal .ub-detail-modal__panel
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__panel,
  #ub-detail-modal .ub-detail-modal__panel
) {
  box-sizing: border-box !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

html body .newbase-modal .ub-create-modal__panel,
html body.theme-dark .newbase-modal .ub-create-modal__panel {
  width: min(560px, calc(100vw - 28px)) !important;
}

html body :is(
  .newbase-modal .ub-create-modal__head,
  #ub-detail-modal .ub-detail-modal__head
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__head,
  #ub-detail-modal .ub-detail-modal__head
) {
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* .ub-detail__name — то же правило намеренно: это поле подменяет заголовок
   на время переименования базы, и типографика обязана совпасть с ним
   один в один (меняется только текст, см. блок inline database name editing). */
html body :is(
  .newbase-modal .ub-create-modal__title,
  #ub-detail-modal .ub-detail-modal__title,
  #ub-detail-modal .ub-detail__name
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__title,
  #ub-detail-modal .ub-detail-modal__title,
  #ub-detail-modal .ub-detail__name
) {
  margin: 0 !important;
  padding: 0 !important;
  color: #1f1f1f !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
}

html body :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
) {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5f6368 !important;
  box-shadow: none !important;
}

html body :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
):hover,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
):hover {
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
}

html body :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
) svg,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__close,
  #ub-detail-modal .ub-detail-modal__close
) svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.7px !important;
}

html body :is(
  .newbase-modal .ub-create-modal__body,
  #ub-detail-modal .ub-detail-modal__body
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__body,
  #ub-detail-modal .ub-detail-modal__body
) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 4px 4px !important;
  margin: 0 -4px !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  color: #1f1f1f !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .newbase-modal .ub-create-modal__body,
html body.theme-dark .newbase-modal .ub-create-modal__body {
  gap: 16px !important;
}

html body .newbase-modal :is(.px-input, .px-textarea),
html body #ub-detail-modal :is(.ub-detail__search-wrap, .ub-detail__textarea),
html body.theme-dark .newbase-modal :is(.px-input, .px-textarea),
html body.theme-dark #ub-detail-modal :is(.ub-detail__search-wrap, .ub-detail__textarea) {
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  box-shadow: none !important;
}

html body .newbase-modal .px-input,
html body.theme-dark .newbase-modal .px-input {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

html body .newbase-modal .px-textarea,
html body.theme-dark .newbase-modal .px-textarea {
  min-height: 176px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

html body .newbase-modal :is(.px-input, .px-textarea):focus,
html body #ub-detail-modal :is(.ub-detail__search-wrap:focus-within, .ub-detail__textarea:focus),
html body.theme-dark .newbase-modal :is(.px-input, .px-textarea):focus,
html body.theme-dark #ub-detail-modal :is(.ub-detail__search-wrap:focus-within, .ub-detail__textarea:focus) {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
  outline: 0 !important;
}

html body .newbase-modal .px-dropzone,
html body.theme-dark .newbase-modal .px-dropzone {
  border: 1px dashed rgba(47, 109, 251, 0.36) !important;
  border-radius: 8px !important;
  background: rgba(47, 109, 251, 0.06) !important;
  color: #1f1f1f !important;
}

html body .newbase-modal .px-dropzone:is(:hover, .is-drag),
html body.theme-dark .newbase-modal .px-dropzone:is(:hover, .is-drag) {
  border-color: rgba(47, 109, 251, 0.6) !important;
  background: rgba(47, 109, 251, 0.12) !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
),
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) {
  min-height: 0 !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn {
  min-width: 64px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--ghost,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--ghost {
  padding: 0 12px !important;
  background: transparent !important;
  color: #0b57d0 !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--ghost:hover,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--primary,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
}

html body :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--primary:hover,
html body.theme-dark :is(
  .newbase-modal .ub-create-modal__foot,
  #ub-detail-modal .ub-detail-modal__foot
) .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

@media (max-width: 640px) {
  html body :is(
    .newbase-modal .ub-create-modal__panel,
    #ub-detail-modal .ub-detail-modal__panel
  ),
  html body.theme-dark :is(
    .newbase-modal .ub-create-modal__panel,
    #ub-detail-modal .ub-detail-modal__panel
  ) {
    max-width: calc(100vw - 20px) !important;
    padding: 20px !important;
  }

}

/* USERBASE DETAIL - addw finish.
   Компактная секция «compact site-style list editor» и ранние floppy-слои
   выигрывают у parity-блока по специфичности (два класса против одного),
   поэтому шапка/футер получали разделители и внутренние отступы, а крестик
   оставался квадратным и висел на absolute 14/14 из легаси-правила.
   Здесь — финальный слой в языке addw поверх .ub-detail--floppy:
   шапка и футер без разделителей внутри паддинга панели 24px, круглый
   крестик 38px, подсказка #444746, чипы фильтра статусов и счётчик строк
   в тонах Google. Окно всегда светлое, поэтому light == dark. */



/* Слой DESIGN.md (…floppy .ub-detail__foot .btn) прижимал кнопки футера к
   auto/13px/r6 и обходил parity-блок по специфичности — возвращаем
   пилюли addw 40px/r20 тем же весом селектора. */





/* v24 — compact collapsed sidebar rail.
   The 76px rail shares the global burger's x=38 axis. Only primary
   destinations, the current module and Settings stay in the compact view. */
@media (min-width: 901px) {
  /* Ночной двойник обязателен. Прежние проходы задавали колонку рельса ПАРОЙ
     правил — светлым `html body.sidebar-collapsed .app` и ночным
     `html body.theme-dark.sidebar-collapsed .app` (оба 56px). Ночное на класс
     длиннее, поэтому одиночное светлое правило этого прохода перебивало
     только светлую тему: в ночи колонка оставалась 56px, а сам рельс уходил
     на новые 76px — и накрывал левый край таблицы аккаунтов, прокси и всех
     остальных. Колонка сетки и ширина рельса — одно число, и меняются вместе.
     (Ширину самого рельса тот же проход задаёт через #sidebar: идентификатор
     старшинством бьёт ночные правила на классах, и двойник ей не нужен.) */
  html body.sidebar-collapsed .app,
  html body.theme-dark.sidebar-collapsed .app {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html body.sidebar-collapsed #sidebar.sidebar--v2 {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

@media (min-width: 901px) {
  html body.sidebar-collapsed #sidebar .sidebar__nav,
  html body.theme-dark.sidebar-collapsed #sidebar .sidebar__nav {
    padding: 8px 0 12px !important;
    overflow: hidden !important;
  }

html body.sidebar-collapsed #sidebar .nav-section--modules,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 0 !important;
  width: 100% !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item {
  display: none !important;
}

html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav],
html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav],
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-module="settings"],
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-module="settings"] {
  margin-top: auto !important;
}

html body.sidebar-collapsed #sidebar .nav-item__icon,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}

html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav],
html body.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav],
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active {
  transform: none !important;
  scale: none !important;
  transition: background-color 140ms ease, color 140ms ease !important;
}

html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav]:hover,
html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav]:focus-visible,
html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active:hover,
html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active:focus-visible {
  background: rgba(60, 64, 67, 0.08) !important;
  border-radius: 999px !important;
  transform: none !important;
  scale: none !important;
}

html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav]:hover,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item[data-collapsed-nav]:focus-visible,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active:hover,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section--modules > .nav-item.is-active:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  transform: none !important;
  scale: none !important;
}

html body.sidebar-collapsed #sidebar .nav-item__icon,
html body.sidebar-collapsed #sidebar .nav-item__icon svg,
html body.sidebar-collapsed #sidebar .nav-item:hover .nav-item__icon,
html body.sidebar-collapsed #sidebar .nav-item:hover .nav-item__icon svg,
html body.sidebar-collapsed #sidebar .nav-item:focus-visible .nav-item__icon,
html body.sidebar-collapsed #sidebar .nav-item:focus-visible .nav-item__icon svg,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__icon,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__icon svg,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item:hover .nav-item__icon,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item:hover .nav-item__icon svg,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item:focus-visible .nav-item__icon,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item:focus-visible .nav-item__icon svg {
  transform: none !important;
  scale: none !important;
  animation: none !important;
}

html body.sidebar-collapsed #sidebar .nav-item__label,
html body.sidebar-collapsed #sidebar .nav-item__badge,
html body.sidebar-collapsed #sidebar .nav-item__switch,
html body.sidebar-collapsed #sidebar .nav-section__title,
html body.sidebar-collapsed #sidebar .sidebar__more,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__label,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__badge,
html body.theme-dark.sidebar-collapsed #sidebar .nav-item__switch,
html body.theme-dark.sidebar-collapsed #sidebar .nav-section__title,
html body.theme-dark.sidebar-collapsed #sidebar .sidebar__more {
  display: none !important;
}
}

/* ════════════════════════════════════════════════════════════════
   ADD-PROXY + NEWBASE - one addw dialog language.
   «Добавить прокси» (#px-add-modal) и окна заведения базы
   (.newbase-modal) раньше стилились двумя разными слоями и
   разъехались: шрифт (Google Sans Flex против незагруженного
   «Google Sans» → Roboto), заголовок и блок загрузки файла (строка с
   кнопкой против дропзоны). Этот слой задаёт общий вид ОДИН раз для
   обоих окон. Эталон — #add-modal .addw: белая карточка r28 с мягкой
   тенью, Google Sans Flex, заголовок 23px/500 без разделителя,
   круглый крестик 38px, поля 40px r8 #dadce0 с фокусом #0b57d0,
   общая дропзона «Загрузить из файла», футер-пилюли 40px/r20
   (Отмена — синий текст, основная — заливка #0b57d0). Окна всегда
   светлые, поэтому light == dark.

   .newbase-modal — семья окон заведения базы: «Новый список
   пользователей» (#ub-create-modal) и «Новая база источников»
   (#sb-add-modal). Слой намеренно на классе, а не на id первого окна:
   пока он был написан на #ub-create-modal, второе окно — с той же
   разметкой и теми же классами оболочки — канона addw не получало
   вовсе и падало на общие .px-field (подпись 12.5px/400 серая вместо
   14px/500 тёмной, ввод 35px на #f4f6fb вместо 40px белого #dadce0).
   Новое окно этой породы достаточно завести с классом newbase-modal.
   ──────────────────────────────────────────────────────────────── */

/* ── Панель: белая карточка addw ── */
html body :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel),
html body.theme-dark :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel) {
  box-sizing: border-box !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  font-family: var(--app-font) !important;
  overflow: hidden !important;
}

/* Всё внутри наследует стек панели (перебивает юзербазовый
   «Google Sans» и легаси-моноширинные объявления на контролах).

   Кроме значков: Material Symbols — не стек текста, а шрифт-картинка, и
   наследование выводило вместо стрелки связи слово «sync_alt». */
html body :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel) *:not(.material-symbols-outlined),
html body.theme-dark :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel) *:not(.material-symbols-outlined) {
  font-family: inherit !important;
}

/* ── Шапка: заголовок + круглый крестик, без разделителя ── */
html body :is(#px-add-modal .px-add-modal__head, .newbase-modal .ub-create-modal__head, #am-proxy-modal .amproxy__head),
html body.theme-dark :is(#px-add-modal .px-add-modal__head, .newbase-modal .ub-create-modal__head, #am-proxy-modal .amproxy__head) {
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body :is(#px-add-modal .px-add-modal__title, .newbase-modal .ub-create-modal__title, #am-proxy-modal .amproxy__title),
html body.theme-dark :is(#px-add-modal .px-add-modal__title, .newbase-modal .ub-create-modal__title, #am-proxy-modal .amproxy__title) {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: #1f1f1f !important;
  text-align: left !important;
}

html body :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close),
html body.theme-dark :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close) {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5f6368 !important;
  box-shadow: none !important;
}

html body :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close):hover,
html body.theme-dark :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close):hover {
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
}

html body :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close) svg,
html body.theme-dark :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close) svg {
  width: 18px !important;
  height: 18px !important;
}

/* ── Тело: колонка с шагом 16px внутри паддинга панели ── */
html body :is(#px-add-modal .px-add-modal__body, .newbase-modal .ub-create-modal__body, #am-proxy-modal .amproxy__body),
html body.theme-dark :is(#px-add-modal .px-add-modal__body, .newbase-modal .ub-create-modal__body, #am-proxy-modal .amproxy__body) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 4px 4px !important;
  margin: 0 -4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f1f1f !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ── Подписи полей и счётчик «Распознано» ── */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__label,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta b,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta b {
  color: #1f1f1f !important;
  font-weight: 500 !important;
}

/* ── Контролы: 40px, r8, #dadce0, фокус #0b57d0 ── */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select, .px-textarea),
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select, .px-textarea) {
  min-height: 40px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select),
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select) {
  height: 40px !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-textarea,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-textarea {
  min-height: 176px !important;
  padding: 10px 14px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select, .px-textarea):focus,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select, .px-textarea):focus {
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
  outline: 0 !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-textarea)::placeholder,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-textarea)::placeholder {
  color: #80868b !important;
  opacity: 1 !important;
}

/* ── Поле со значками в своей рамке ──
   Подпись такого поля живёт в нём самом (placeholder), а справа, в рамке,
   стоят значки: проверка того, что вписали, и «подробнее». Правило написано
   на класс, а не на адрес окна: поле такой формы будет не одно.

   Значки лежат ПОВЕРХ поля (position: absolute) — в <input> ничего не
   вложишь, — а место под них держит его собственный padding-right: иначе
   текст заезжал бы под значки. Ширина запаса считается от числа значков:
   у поля с одним «подробнее» лишние 28px читались бы кривым отступом. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box {
  position: relative !important;
  display: block !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box .px-input,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box .px-input {
  padding-right: 76px !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box:has(.px-field__acts > :only-child) .px-input,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__box:has(.px-field__acts > :only-child) .px-input {
  padding-right: 44px !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  /* transform завёл свой слой рисования, и пузырь подсказки «подробнее»
     оказался заперт в нём: соседнее поле, лежащее в разметке ниже,
     закрашивало его серединой. Слой поднимаем целиком — z-index у самого
     пузыря (40) внутри этого слоя ничего не решает. */
  z-index: 5 !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5f6368 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act .material-symbols-outlined,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act:hover,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act:hover {
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
}
/* Ход и итог проверки — те же три вида, что у значка связи в аккаунтах:
   кольцо на месте стрелки, потом галочка или крест (цвета оттуда же). */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-busy,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-busy {
  cursor: default !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-ok,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-ok {
  color: #1a7f37 !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-error,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-error {
  color: #b42525 !important;
}
/* Подпись под полем и есть ответ проверки словами — она же красит его в
   тот же зелёный и красный, что значок: цвет один на ответ, а не на место. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="ok"],
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="ok"] {
  color: #1a7f37 !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="error"],
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="error"] {
  color: #b42525 !important;
}
/* «Подробнее» — общий кружок подсказки программы (.inv-help со своим слоем
   пузыря). В рамке поля он рисуется ЗНАЧКОМ (Material Symbols «info»), а не
   знаком вопроса: рядом стоит такой же значок проверки, и «?» в рамке из
   двух значков читался третьей породой кнопок. Своя окружность значку не
   нужна — она у него нарисована, поэтому рамку гасим цветом. Пузырь,
   поведение и класс остаются общими: подсказка в программе одна. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 12px !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help .material-symbols-outlined,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
  font-variation-settings: "opsz" 20, "wght" 400, "FILL" 0, "GRAD" 0 !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:hover,
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:focus-visible,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:hover,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:focus-visible {
  /* Наведение читается по значку — окружность рисовать не начинаем: она у
     значка своя, и вторая вокруг неё выглядела бы мишенью. */
  border-color: transparent !important;
  background: transparent !important;
  color: #1f1f1f !important;
}
/* Спрятанный пузырь не занимает места. Пузырь общего слоя лежит В ПОТОКЕ
   (см. канон подсказок), а тело окна прокручивается — и пузырь, которому не
   хватило места сверху и который лёг под кружок, растил прокрутку окна на
   свою высоту: в коротком окне выходила полоса прокрутки при содержимом,
   которое влезает целиком. Гасим коробку, а не показ: проявление живёт на
   opacity, и оно по-прежнему анимируется. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]::after,
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]::before {
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]:hover::after,
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]:focus-visible::after {
  max-width: min(280px, calc(100vw - 32px)) !important;
  max-height: none !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]:hover::before,
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help[data-tooltip]:focus-visible::before {
  max-width: none !important;
  max-height: none !important;
  border-width: 5px !important;
}

/* ── Общая дропзона «Загрузить из файла» ── */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone {
  border: 1px dashed rgba(11, 87, 208, 0.32) !important;
  border-radius: 8px !important;
  background: rgba(11, 87, 208, 0.04) !important;
  color: #1f1f1f !important;
}

/* Скрытая дропзона обязана и правда пропадать: авторский display: grid выше
   сильнее браузерного [hidden] { display: none }. Прячет её голый вид окна
   «Добавить источники» — там у человека один вопрос, какие ссылки. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone[hidden],
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone[hidden] {
  display: none !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone:is(:hover, .is-drag),
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone:is(:hover, .is-drag) {
  border-color: rgba(11, 87, 208, 0.6) !important;
  background: rgba(11, 87, 208, 0.1) !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__ico,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__ico {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(11, 87, 208, 0.1) !important;
  color: #0b57d0 !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__ico svg,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__ico svg {
  width: 20px !important;
  height: 20px !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt {
  gap: 2px !important;
  font-size: 12.5px !important;
  color: #5f6368 !important;
}

html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt b,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt b {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
}

/* ── Футер: пилюли addw 40px/r20 без разделителя ── */
html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot),
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) {
  min-height: 0 !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn,
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn {
  min-width: 64px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost,
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost {
  padding: 0 12px !important;
  background: transparent !important;
  color: #0b57d0 !important;
}

html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost:hover,
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: transparent !important;
  color: #0b57d0 !important;
}

html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--primary,
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
}

html body :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--primary:hover,
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

@media (max-width: 640px) {
  html body :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel),
  html body.theme-dark :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel) {
    max-width: calc(100vw - 20px) !important;
    padding: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TASKS PAGE PARITY — единый стиль страницы задач с аккаунтами/прокси.
   1) Единый шрифт всей страницы задач — Google Sans (как таблица
      .app-table): тулбар, вкладки статусов, счётчики, поповеры фильтров
      («Тип задач», дата) и «Запланированные» переводятся с Inter на
      --app-table-font — зеркало одноимённого блока прокси
      (body.is-proxy-screen #view-proxy). Иконочные шрифты Material Symbols
      исключаем, иначе их лигатуры распадаются в текст.
   2) Таб на 2px выше ряда (56px) — свисает под верхнюю границу таблицы,
      чтобы синяя линия активного пункта легла ровно на границу, как в
      аккаунтах, прокси и базах (там .px-tab тоже 58px при ряду 56px —
      см. блок v16.3).
   3) Иконки тулбара — фильтр, очистка истории, удаление выбранных и «Ещё»
      22px, как #am-filter-toggle / #am-sel-delete / #am-more-toggle в
      аккаунтах. Hover у всех — общий нейтральный ореол
      .picker-gmail-bar__action:hover (как у #tm-kind-toggle), без красной
      подсветки.
   ──────────────────────────────────────────────────────────────────────── */
html body #view-tasks.view-tasks {
  --app-table-font: var(--app-font);
  /* Акцент чипов фильтра (#tm-kind-chips) — как у .view-am / #am-filter-chips. */
  --am-accent: #2563eb;
  --am-accent-rgb: 37, 99, 235;
  --am-soft: rgba(37, 99, 235, 0.10);
}
html body #view-tasks.view-tasks,
html body #view-tasks.view-tasks *:not(.material-symbols-outlined):not(.material-icons),
html body.theme-dark #view-tasks.view-tasks,
html body.theme-dark #view-tasks.view-tasks *:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--app-table-font, var(--app-font)) !important;
}

html body #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab,
html body.theme-dark #view-tasks.view-tasks .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}

html body #view-tasks.view-tasks .am-gmail-bar #tm-kind-toggle svg,
html body #view-tasks.view-tasks .am-gmail-bar #tasks-clear-btn svg,
html body #view-tasks.view-tasks .am-gmail-bar #tm-sel-delete svg,
html body #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-kind-toggle svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tasks-clear-btn svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-sel-delete svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg {
  width: 22px !important;
  height: 22px !important;
}
/* Троеточие «Ещё» — заливка точек как у #am-more-toggle (не контур). */
html body #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg {
  color: #444746 !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg circle,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg circle {
  fill: currentColor !important;
  stroke: none !important;
}
/* Обёртка «…» — та же, что в проксях и базах (#px-more-menu / #ub2-more-menu):
   inline-flex, чтобы <div> не разрывал ряд бара, и position: relative — на
   ней держится проверка «клик вне меню». Само окно #tm-more-pop position:
   fixed и координаты берёт у positionToolbarPopover, не у этой коробки. */
html body #view-tasks.view-tasks .am-gmail-bar .px-more-menu,
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .px-more-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}
/* Подсветки открытой кнопки здесь НЕТ намеренно: её на весь бар раздаёт общий
   .view-tasks .am-gmail-bar .picker-gmail-bar__action.is-open (см. выше), под
   который троеточие подпадает вместе с фильтром. Своё правило на #id перебило
   бы акцент бара серым цветом из аккаунтов — ровно тот случай, когда общий
   элемент обязан стилизоваться по классу, а не по адресу. */

/* ── Userbase detail modal: фильтр статусов в выпадающем меню ─────────────
   Статусы обработки (OK/PRIVACY/SKIP/ERROR) убраны из тела модалки под одну
   кнопку-воронку в панели инструментов. Меню — единый стиль am-actions-menu,
   счётчики статусов — компактные бейджи справа. */

/* ════════════════════════════════════════════════════════════════════════
   USERBASE = ACCOUNTS/PROXY (этап 7). Список баз повторяет оболочку таблицы
   аккаунтов один в один: страница не скроллится — вертикальный скролл у
   .am-table-shell внутри карточки, липнет только Gmail-тулбар; «гугловский»
   скроллбар; один непрерывный разделитель строк через tr::after; Gmail-ховер
   строки (рамка #DADCE0 + тень, без заливки). Зеркало одноимённых правил
   .view-am/.view-proxy выше — их селекторы пинят контрактные тесты, поэтому
   существующие блоки не трогаем, а дублируем скоуп. Высота фиксируется
   только для экрана списка (гейт :has по скрытому detail-экрану) — экран
   деталей и легаси-модалки живут в обычном потоке.
   ──────────────────────────────────────────────────────────────────────── */
html body #view-userbase.main.view-userbase.view-userbase--v2,
html body.theme-dark #view-userbase.main.view-userbase.view-userbase--v2 {
  height: calc(100vh - var(--tp-global-topbar-height, 44px)) !important;
  max-height: calc(100vh - var(--tp-global-topbar-height, 44px)) !important;
  /* Легаси задаёт min-height: 100vh — без сброса он раздувает вью выше
     вьюпорта и возвращает скролл страницы. */
  min-height: 0 !important;
  padding-bottom: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* Документный скролл на списке баз скрыт — как у аккаунтов/прокси/задач:
   scrollbar-gutter: stable сохраняет правый запас, каретка документа
   не рисуется. Один уровень :has (без вложенного) — надёжнее в Chromium.
   Экран деталей (detail без [hidden]) остаётся со скроллом страницы. */
html:has(#view-userbase:not([hidden])),
body:has(#view-userbase:not([hidden])) {
  overflow-y: hidden !important;
  scrollbar-gutter: stable !important;
}
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-thumb,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-thumb,
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-track,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-track,
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-track-piece,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-track-piece,
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button,
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button:start:decrement,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button:start:decrement,
html:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button:end:increment,
body:has(#view-userbase:not([hidden]))::-webkit-scrollbar-button:end:increment {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Секция списка и карточка таблицы — гибкая колонка, ужимаются по высоте. */
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2.ub2--list, .ub2.ub2--detail, .ub2.ub2--source),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2.ub2--list, .ub2.ub2--detail, .ub2.ub2--source) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* …но скрытый экран остаётся скрытым: !important-раскладка выше побеждает
   и display:none из [hidden], из-за чего список «просвечивал» под базой. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2[hidden],
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2[hidden] {
  display: none !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Гаттер зарезервирован всегда — таблица не «прыгает» при появлении
     прокрутки (см. одноимённое правило аккаунтов). */
  scrollbar-gutter: stable !important;
}
/* Липнет только Gmail-тулбар; вкладки и футер — обычный поток. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ub2-gmail-bar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ub2-gmail-bar {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ub2-gmail-bar.is-scroll-raised,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ub2-gmail-bar.is-scroll-raised {
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs {
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* Футер — как служебный футер аккаунтов: relative, чтобы абсолютные части
   (селектор «Показывать») якорились к футеру, а не к документу. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .am-table-foot,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .am-table-foot {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
/* Обёртка таблицы — только горизонтальная прокрутка; вкладки и шапка уходят
   вверх вместе со строками. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .am-table-scroll,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .am-table-scroll {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  position: relative !important;
  z-index: 2 !important;
  /* Нижний отступ — hover-рамка и тень последней строки не уходят под футер. */
  padding-bottom: 6px !important;
  /* Небольшой отступ между ячейками и скроллбаром. */
  padding-right: 8px !important;
}
/* Шапка — обычные строки таблицы: липкость не возвращается. Именно relative,
   а НЕ static: «не липкая» значит «не sticky», а систему координат заголовку
   отбирать нельзя — от неё считаются зона захвата ширины (.am-col-grip) и
   шестерёнка. Правило весит на целый ID больше канона (см. блок «РЕСАЙЗ И
   ПОРЯДОК КОЛОНОК»), поэтому со static оно молча забирало у баз разделители
   колонок: все ползунки якорились к .am-table-scroll и слипались у правого
   края таблицы. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll :is(.ub2-flat__table, .ubd-flat__table) thead th,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll :is(.ub2-flat__table, .ubd-flat__table) thead th {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg-card, #fff) !important;
}

/* Скроллбар тела таблицы баз — классический «гугловский», как у аккаунтов. */
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll {
  scrollbar-width: auto;
  scrollbar-color: #cccccc transparent;
  box-sizing: border-box;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 0;
  margin-block: 0;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-thumb,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-clip: border-box;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  /* верх / право / низ / лево */
  border-color: #b7b7b7 transparent #bebebe #b7b7b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
  border-radius: 0;
  min-height: 40px;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-thumb:hover,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-thumb:hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
  border-color: #656565 #656565 #cacaca #656565;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell:hover::-webkit-scrollbar-track-piece,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll:hover::-webkit-scrollbar-track,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll:hover::-webkit-scrollbar-track,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll:hover::-webkit-scrollbar-track-piece,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll:hover::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2;
  border-right: 1px solid #d9d9d9;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button:start:decrement,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub2-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #sbl-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbl-flat-table > .am-table-shell::-webkit-scrollbar-button:end:increment,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button:start:decrement,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button:start:decrement,
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button:end:increment,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-scroll::-webkit-scrollbar-button:end:increment {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* ── Строки баз: один непрерывный 1px-разделитель через tr::after и
   Gmail-ховер (рамка + тень, без заливки) — зеркало правил tr[data-name]
   таблицы аккаунтов и tr.px-flat__row прокси. Разделители на td гасятся,
   чтобы линия никогда не двоилась. */
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row {
  position: relative !important;
  /* Скорость выделения/ховера строки — канон MOTION.md (motion.css). */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row td,
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover td,
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row td,
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row td,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover td,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row:hover td {
  border: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:not(.is-sel-row):hover,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:not(.is-sel-row):hover {
  background: transparent !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px 0 1px !important;
  border-color: #DADCE0 #DADCE0 transparent #DADCE0 !important;
  box-shadow:
    0 2px 4px -1px rgba(60, 64, 67, 0.30),
    0 4px 8px -4px rgba(60, 64, 67, 0.24) !important;
  z-index: 6 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row:hover::after,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row.is-sel-row:hover::after {
  inset: -1px 0 0 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px 0 1px 0 !important;
  border-color: #ADC5E4 transparent var(--am-row-divider, rgba(120, 138, 162, 0.18)) transparent !important;
}

/* ── Массовое выделение: пока идёт выбор нескольких баз, гасим ховер-подъём
   (рамка #DADCE0 + тень) — та строка под курсором иначе показывает светлую
   приподнятую рамку, которая читается как «жирная белая линия» между
   выделенными базами и отличается от аккаунтов/прокси. Возвращаем плоскую
   1px-линию, как в #view-accounts (~27052) и #view-proxy (~27895). */
html body.is-drag-selecting #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover::after,
html body.theme-dark.is-drag-selecting #view-userbase.view-userbase.view-userbase--v2 :is(.ub2-flat__table, .ubd-flat__table) tbody tr.px-flat__row:hover::after {
  inset: auto 0 0 0 !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  box-shadow: none !important;
}

/* Кнопки окна «Диапазон» баз (#ub2-range-pop) намеренно не переопределяются:
   они наследуют канон аккаунтов (#am-range-pop) из финального блока
   .am-gmail-bar .am-check-menu; легаси #view-userbase .btn--ghost без
   !important ему проигрывает. */

/* TASK MANAGER FILTER - exact proxy filter popover parity.
   Оболочка — Gmail-канон окна фильтров аккаунтов (#am-filter-pop): белая
   карточка r4 с Material-тенью без рамки. Позиция остаётся якорной под
   своей кнопкой (base .am-filter-pop), меняется только визуальный стиль. */
html body :is(#px-filter-pop, #tm-kind-pop) {
  z-index: 700 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 400px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

html body.theme-dark :is(#px-filter-pop, #tm-kind-pop) {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body :is(#px-filter-pop, #tm-kind-pop) .am-filter-pop__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body :is(#px-filter-pop, #tm-kind-pop) .picker-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 999px !important;
  background: var(--bg-app, #f7f8fb) !important;
  color: var(--text) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

/* Hover — точное зеркало .picker-chip:hover из #am-filter-chips (без
   принудительного background, чтобы is-active сохранял --am-soft). */
html body :is(#px-filter-pop, #tm-kind-pop) .picker-chip:hover {
  border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.4) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body :is(#px-filter-pop, #tm-kind-pop) .picker-chip.is-active {
  border-color: var(--am-accent, #2563eb) !important;
  background: var(--am-soft, rgba(37, 99, 235, 0.10)) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body :is(#px-filter-pop, #tm-kind-pop) .picker-chip--clear {
  margin-left: auto !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-mute) !important;
}

html body :is(#px-filter-pop, #tm-kind-pop) .picker-chip--clear:hover {
  border-color: transparent !important;
  background: transparent !important;
  color: #ef4444 !important;
}

/* «Фильтры» диспетчера задач: две группы (тип задач + дата) в одном окне
   #tm-kind-pop — заголовки групп и разделитель между ними. Поля даты
   переиспользуют .tm-datepop__* (объявлены в начале файла). */
html body #tm-kind-pop .tm-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html body #tm-kind-pop .tm-filter-group + .tm-filter-group {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border, #e6e9ef) !important;
}
html body.theme-dark #tm-kind-pop .tm-filter-group + .tm-filter-group {
  border-top-color: rgba(255, 255, 255, .10) !important;
}
html body #tm-kind-pop .tm-filter-group__title {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--text-mute, #6b7494) !important;
}

/* Accounts filter: use the exact outer shell of the Gmail-style "More" menu.
   Filter chips and their behavior remain unchanged. Координаты не прибиты:
   их выставляет positionToolbarPopover() относительно иконки «Фильтры». */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-filter-pop {
  position: fixed !important;
  right: auto !important;
  z-index: 700 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 400px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-filter-pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* #am-filter-dropdown — оболочка и полноширинные строки как в Gmail «Ещё». */
html body #am-filter-dropdown.dropdown {
  padding: 6px 0 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  z-index: 710 !important;
}

html body #am-filter-dropdown .dropdown__list {
  width: 100% !important;
  padding: 0 !important;
}

html body #am-filter-dropdown .dropdown__item {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

html body #am-filter-dropdown .dropdown__item:hover {
  background: #EEEEEE !important;
}

html body.theme-dark #am-filter-dropdown.dropdown {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark #am-filter-dropdown .dropdown__item:hover {
  background: var(--bg-hover, #2a2a2a) !important;
}

/* Accounts selection menu: exact Gmail action-menu shell and item states.
   Координаты не прибиты: их ставит positionCheckMenuPop() от собственного
   .px-check-menu__control (общий канон привязки окон к родительской иконке). */
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop.px-check-menu__pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 700 !important;
  min-width: 196px !important;
  padding: 6px 16px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  /* Растягиваем на всю ширину окна (компенсируем горизонтальный padding попа),
     чтобы hover-фон шёл от края до края. */
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding: 6px 16px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgb(32, 33, 36) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  user-select: none !important;
}

html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:hover,
html body :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:focus {
  background: #EEEEEE !important;
  color: rgb(32, 33, 36) !important;
  outline: none !important;
}

html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop.px-check-menu__pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item {
  color: var(--text, #cccccc) !important;
}

html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:focus {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text, #cccccc) !important;
}

/* Accounts range picker: am-actions-menu shell; existing content geometry stays intact.
   Координаты ставит positionCheckMenuPop() от .px-check-menu__control. */
html body :is(#view-accounts, .am-embed).view-am #am-range-pop.picker-range-pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 700 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
}

html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop.picker-range-pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Compact addw pills: 32px / r16 instead of the full-size 40px / r20. */
html body :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 56px !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 16px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.1px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

html body :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost,
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost {
  padding-inline: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #0b57d0 !important;
}

html body :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
  box-shadow: none !important;
}

html body :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--primary,
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--primary {
  padding-inline: 10px !important;
  background: #0b57d0 !important;
  border: none !important;
  color: #ffffff !important;
}

html body :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--primary:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
  filter: none !important;
}

/* Shared table selection controls: accounts are the visual source of truth.
   Module-specific ids/data attributes keep selection behavior isolated.
   Пиксели не прибиваем: у каждого модуля панель стоит на своей высоте, поэтому
   координаты считает positionCheckMenuPop() от .px-check-menu__control модуля. */
html body .am-gmail-bar .am-check-menu > .px-check-menu__pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 700 !important;
  min-width: 196px !important;
  padding: 6px 16px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
}

html body .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding: 6px 16px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgb(32, 33, 36) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  user-select: none !important;
}

html body .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:hover,
html body .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:focus {
  background: #EEEEEE !important;
  color: rgb(32, 33, 36) !important;
  outline: none !important;
}

html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item {
  color: var(--text, #cccccc) !important;
}

html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:hover,
html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:focus {
  background: var(--bg-hover, #2a2a2a) !important;
  color: var(--text, #cccccc) !important;
}

/* Окно «Диапазон» — та же привязка к иконке, что и меню выделения. */
html body .am-gmail-bar .am-check-menu .picker-range-pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 700 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
}

html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 56px !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 16px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.1px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

html body .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost,
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost {
  padding-inline: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #0b57d0 !important;
}

html body .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost:hover,
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
  box-shadow: none !important;
}

html body .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--primary,
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--primary {
  padding-inline: 10px !important;
  background: #0b57d0 !important;
  border: none !important;
  color: #ffffff !important;
}

html body .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--primary:hover,
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
  filter: none !important;
}

/* ── Базы: шрифтовой паритет попов выделения с аккаунтами ─────────────────
   Глобальное правило баз `html body :is(#view-userbase.view-userbase--v2, …) *`
   задаёт «Google Sans» с id-специфичностью и перебивает канонический блок
   .am-gmail-bar .am-check-menu выше. Возвращаем точные шрифты аккаунтов:
   меню выделения — Google Sans Flex (как #am-check-menu-pop), окно «Диапазон» —
   Google Sans (как #am-range-pop). */
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-check-menu-pop.px-check-menu__pop,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-check-menu-pop .px-check-menu__item {
  font-family: var(--app-font) !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 #ub2-range-pop.picker-range-pop,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-range-pop * {
  font-family: var(--app-font) !important;
}

/* Окно «…» (#ub2-more-pop) — тот же шрифт, что у #am-more-pop
   (канон #am-more-pop / .am-actions-menu выше по файлу). */
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-more-pop.am-actions-menu,
html body #view-userbase.view-userbase.view-userbase--v2 #ub2-more-pop * {
  font-family: var(--app-font) !important;
}

/* ── БАЗЫ ДАННЫХ: кнопка «Фильтры» перед троеточием — паритет с прокси ────
   Тот же поповер с чипами групп и floating-дропдауном значений, что и в
   #px-filter-pop / #tm-kind-pop (их селекторы закреплены контрактом и не
   расширяются — правила ниже зеркалят эталон для #ub2-filter-pop). */
html body .view-userbase--v2 .ub2-gmail-bar .am-filter-wrap,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar .am-filter-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}

html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-count, #sbl-filter-count, #ubs-filter-count),
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-count, #pbl-filter-count, #pbd-filter-count),
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-count, #sbl-filter-count, #ubs-filter-count),
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-count, #pbl-filter-count, #pbd-filter-count) {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  background: var(--am-accent, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--card, #fff) !important;
}

html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle).is-active svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle).is-active svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle).is-on svg,
html body .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle).is-on svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle).is-active svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle).is-active svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle).is-on svg,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar :is(#ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle).is-on svg {
  stroke: var(--am-accent, #2563eb) !important;
}

/* Иконки фильтров (Аккаунты, Базы, Источники, Прокси) — единый стандарт 22px:
   у воронки в источниках оставался общий 20px от .picker-gmail-bar__action, и
   рядом с той же кнопкой в аудитории она читалась мельче. Окна выбора аккаунтов
   в списке нет: там отбор стоит строкой чипов, а воронки в панели больше нет. */
html body :is(#am-filter-toggle, #ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle, #px-filter-toggle) .am-filter-toggle__icon,
html body :is(#am-filter-toggle, #ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle, #px-filter-toggle) .am-filter-toggle__icon,
html body.theme-dark :is(#am-filter-toggle, #ub2-filter-toggle, #ubd-filter-toggle, #sbl-filter-toggle, #ubs-filter-toggle, #px-filter-toggle) .am-filter-toggle__icon,
html body.theme-dark :is(#am-filter-toggle, #ub2-filter-toggle, #ubd-filter-toggle, #pbl-filter-toggle, #pbd-filter-toggle, #px-filter-toggle) .am-filter-toggle__icon {
  width: 22px !important;
  height: 22px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}

/* Воронки источников (#sbl-*, #ubs-*) перечислены вместе с базами: до этого
   их поповер оставался на общем .am-filter-pop — 300px и радиус 12 против
   240px и радиуса 4 у соседнего модуля. */
html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop),
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) {
  z-index: 700 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 400px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop),
html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .am-filter-pop__chips,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .am-filter-pop__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 999px !important;
  background: var(--bg-app, #f7f8fb) !important;
  color: var(--text) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

/* Hover — точное зеркало .picker-chip:hover из #am-filter-chips. */
html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip:hover,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip:hover {
  border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.4) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip.is-active,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip.is-active {
  border-color: var(--am-accent, #2563eb) !important;
  background: var(--am-soft, rgba(37, 99, 235, 0.10)) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip--clear,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip--clear {
  margin-left: auto !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-mute) !important;
}

html body :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip--clear:hover,
html body :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip--clear:hover {
  border-color: transparent !important;
  background: transparent !important;
  color: #ef4444 !important;
}

/* ── ПРОКСИ/БАЗЫ: floating-дропдаун значений фильтра ─────────────────────
   Зеркало #am-filter-dropdown (оболочка Gmail-меню «Ещё» и полноширинные
   строки). Селектор эталона закреплён контрактом и не расширяется —
   правила ниже дублируют его для #px-filter-dropdown / #ub2-filter-dropdown. */
html body #px-filter-dropdown.dropdown,
html body #sbl-filter-dropdown.dropdown,
html body #pbl-filter-dropdown.dropdown,
html body #ubs-filter-dropdown.dropdown,
html body #pbd-filter-dropdown.dropdown,
html body #ccc-filter-dropdown.dropdown,
html body #ub2-filter-dropdown.dropdown {
  padding: 6px 0 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  z-index: 710 !important;
}

html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #sbl-filter-dropdown, #ubs-filter-dropdown) .dropdown__list,
html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #pbl-filter-dropdown, #pbd-filter-dropdown) .dropdown__list {
  width: 100% !important;
  padding: 0 !important;
}

html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #sbl-filter-dropdown, #ubs-filter-dropdown) .dropdown__item,
html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #pbl-filter-dropdown, #pbd-filter-dropdown) .dropdown__item {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #sbl-filter-dropdown, #ubs-filter-dropdown) .dropdown__item:hover,
html body :is(#px-filter-dropdown, #ub2-filter-dropdown, #pbl-filter-dropdown, #pbd-filter-dropdown) .dropdown__item:hover {
  background: #EEEEEE !important;
}

html body.theme-dark #px-filter-dropdown.dropdown,
html body.theme-dark #sbl-filter-dropdown.dropdown,
html body.theme-dark #pbl-filter-dropdown.dropdown,
html body.theme-dark #ubs-filter-dropdown.dropdown,
html body.theme-dark #pbd-filter-dropdown.dropdown,
html body.theme-dark #ccc-filter-dropdown.dropdown,
html body.theme-dark #ub2-filter-dropdown.dropdown {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark :is(#px-filter-dropdown, #ub2-filter-dropdown, #sbl-filter-dropdown, #ubs-filter-dropdown) .dropdown__item:hover,
html body.theme-dark :is(#px-filter-dropdown, #ub2-filter-dropdown, #pbl-filter-dropdown, #pbd-filter-dropdown) .dropdown__item:hover {
  background: var(--bg-hover, #2a2a2a) !important;
}

/* ── Канон положения всплывающих окон тулбара (эталон — «Аккаунты») ─────
   Окна «Фильтры» и «…» списочных модулей — position: fixed; точные
   координаты выставляет positionToolbarPopover() в app.js с привязкой к
   своей иконке: left = иконка.left + 8px, top = иконка.bottom − 3px.
   Прибитых пиксельных координат по модулям больше нет — окно открывается
   в едином положении относительно иконки, где бы она ни находилась. */
html body :is(#px-filter-pop, #ub2-filter-pop, #ubd-filter-pop, #tm-kind-pop,
              #sbl-filter-pop, #ubs-filter-pop, #sbl-more-pop, #ubs-more-pop,
              #pbl-filter-pop, #pbd-filter-pop, #pbl-more-pop, #pbd-more-pop,
              #px-more-pop, #ub2-more-pop, #ubd-more-pop, #pbd-more-pop,
              #ccc-filter-pop, #ccc-more-pop) {
  position: fixed !important;
  right: auto !important;
  z-index: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ОКНО ЗАПУСКА ЗАДАЧИ (#inv-run-modal) — та же таблица, что в «Аккаунтах»
   ──────────────────────────────────────────────────────────────────────
   Оболочка внутри модалки размечена 1:1 с #view-accounts, а класс
   .am-embed на секции открывает ей весь скоуп аккаунтов (см. селекторы
   `:is(#view-accounts, .am-embed).view-am` выше): чекбоксы 21px, шрифт
   Google Sans, разделители/ховер строк, вкладки, gmail-бар и фильтры —
   всё приходит оттуда, здесь только «посадка» карточки в панель модалки.
   ══════════════════════════════════════════════════════════════════════ */

/* Панель под ширину таблицы аккаунтов: сумма минимумов колонок ~1000px.
   Визуальный язык — addw (#add-modal): белая карточка r28 с мягкой тенью,
   Google Sans, шапка без заливки и разделителя. */
html body .modal__panel.modal__panel--picker,
html body.theme-dark .modal__panel.modal__panel--picker {
  width: 1180px !important;
  max-width: 96vw !important;
  height: 88vh !important;
  max-height: 88vh !important;
  padding: 0 !important;
  overflow: hidden !important;          /* панель сама клипает углы карточки */
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  font-family: var(--app-font) !important;
}

/* Шапка → как .addw__header: без заливки и разделителя, заголовок 23px/500.
   Волосок под шапкой не нужен — его роль играет нижняя граница gmail-бара. */
html body .modal__panel--picker .modal__head,
html body.theme-dark .modal__panel--picker .modal__head {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 24px 10px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html body .modal__panel--picker .modal__title,
html body.theme-dark .modal__panel--picker .modal__title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: var(--text, #1f1f1f) !important;
}

html body .modal__panel--picker .modal__body,
html body.theme-dark .modal__panel--picker .modal__body {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Горизонтальный инсет контента = шапка/футер (24px): gmail-бар, вкладки и
   первая/последняя колонка таблицы начинаются на одном уровне с заголовком
   «Выбрать аккаунты» и подвалом. Разделители строк по-прежнему full-bleed.
   #inv-pick-shell нужен, чтобы перебить
   :is(#view-accounts, .am-embed) { --px-check-align: 15.5px }.

   Правый край считается иначе левого, и по двум причинам. Во-первых, по
   канону отступов модалок справа не 24px, а 25px (шапка 24px 25px 16px 24px)
   — это --picker-inset-x-r. Во-вторых, полосу прокрутки держит сама
   оболочка, и её ширина съедается у ВНУТРЕННИХ блоков: «1–50 из 1093»
   уезжала левее крестика и кнопок подвала ровно на полосу. Отсюда
   --picker-inset-r = 25px − ширина полосы. Ширину полосы знает только
   браузер, её проставляет JS в --picker-sbw при открытии окна
   (setPickerScrollbarWidth), а scrollbar-gutter: stable держит её
   постоянной — иначе короткий список без прокрутки сдвигал бы содержимое. */
html body .modal__panel--picker .am-embed .am-table-shell,
html body.theme-dark .modal__panel--picker .am-embed .am-table-shell,
html body .modal__panel--picker #inv-pick-shell.am-table-shell,
html body.theme-dark .modal__panel--picker #inv-pick-shell.am-table-shell {
  --px-check-align: 24px;
  --picker-inset-x: 24px;
  --picker-inset-x-r: 25px;
  --picker-inset-r: calc(var(--picker-inset-x-r, 25px) - var(--picker-sbw, 0px));
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  scrollbar-gutter: stable !important;
  border-radius: 0 !important;
}

html body .modal__panel--picker .am-embed .am-gmail-bar,
html body .modal__panel--picker .am-embed .picker-gmail-bar,
html body.theme-dark .modal__panel--picker .am-embed .am-gmail-bar,
html body.theme-dark .modal__panel--picker .am-embed .picker-gmail-bar {
  padding-left: var(--picker-inset-x, 24px) !important;
  padding-right: var(--picker-inset-r, 25px) !important;
}

/* Общий контракт аккаунтов отбивает таблицу от полосы прокрутки на 8px
   (.view-am .am-table-shell > .am-table-scroll). В окне этот зазор уже
   заложен в --picker-inset-r, а лишние 8px делали таблицу уже панели —
   последняя колонка обрывалась раньше «1–50 из 1093». */
html body .modal__panel--picker .am-embed .am-table-shell > .am-table-scroll,
html body.theme-dark .modal__panel--picker .am-embed .am-table-shell > .am-table-scroll {
  padding-right: 0 !important;
}

html body .modal__panel--picker .am-embed .acc-table thead th:first-child,
html body .modal__panel--picker .am-embed .acc-table tbody td:first-child,
html body.theme-dark .modal__panel--picker .am-embed .acc-table thead th:first-child,
html body.theme-dark .modal__panel--picker .am-embed .acc-table tbody td:first-child {
  padding-left: var(--picker-inset-x, 24px) !important;
}

html body .modal__panel--picker .am-embed .acc-table thead th:last-child,
html body .modal__panel--picker .am-embed .acc-table tbody td:last-child,
html body.theme-dark .modal__panel--picker .am-embed .acc-table thead th:last-child,
html body.theme-dark .modal__panel--picker .am-embed .acc-table tbody td:last-child {
  padding-right: var(--picker-inset-r, 25px) !important;
}

/* Master-чекбокс пикера и чекбоксы строк: общий левый край.
   Bar и td:first-child делят --picker-inset-x (24px). Центрирование
   21px-чекбокса в hit 32px даёт +(32-21)/2 = +5.5px — компенсируем. */
html body .modal__panel--picker #inv-pick-card .px-check-menu__check-hit,
html body.theme-dark .modal__panel--picker #inv-pick-card .px-check-menu__check-hit {
  margin-left: calc((var(--tp-checkbox-size, 21px) - var(--px-check-hit, 32px)) / 2) !important;
}

/* Карточка таблицы занимает тело модалки целиком: рамку и углы даёт панель,
   поэтому собственные скругления карточки здесь сняты (иначе — двойная
   рамка «карточка в карточке»). Всё остальное — канон аккаунтов. */
html body .modal__panel--picker .am-table-card.am-embed,
html body.theme-dark .modal__panel--picker .am-table-card.am-embed {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  /* padding: 0 — оболочка .card даёт 22px/28px, в «Аккаунтах» они сняты
     страничными правилами; здесь снимаем явно, иначе таблица «в рамке».
     Заодно гасит .view-am { padding-bottom: 100px }. */
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: var(--bg-card, #fff) !important;
}

/* Липкая панель и вкладки: скроллится только список строк. */
html body .modal__panel--picker .am-embed .am-table-shell > .picker-gmail-bar,
html body.theme-dark .modal__panel--picker .am-embed .am-table-shell > .picker-gmail-bar {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Иконки панели окна собственных размеров не имеют: и разметка, и правила —
   те же, что у «Аккаунтов» (см. блоки #am-* / .am-sel-action выше, куда
   вписаны и id окна). Отдельный размер здесь заводить нельзя: панель окна и
   панель «Аккаунтов» стоят в одном ряду задач, и любая иконка, отличная от
   соседки на странице, читается как чужая. */

/* Счётчик выбранного — как в аккаунтах: появляется только при выделении и
   стоит сразу за последней иконкой панели (разделительную черту даёт
   .picker-gmail-bar .picker-counter в style.css, порядок — order: 50). */

/* Курсор протяжки по строкам (замена body.is-drag-selecting .picker-row). */
html body.is-drag-selecting #inv-pick-tbody tr[data-name] {
  cursor: grabbing !important;
}

html body #inv-pick-tbody tr[data-name] {
  cursor: pointer !important;
}

/* Подвал модалки: «Показывать: N» слева, действия справа. Волосок сверху
   остаётся — он отделяет прокручиваемые строки таблицы от подвала.
   Нижний padding = верхний у шапки (18px), чтобы поля модалки совпадали. */
html body .modal__panel--picker .modal__foot.inv-run-foot,
html body.theme-dark .modal__panel--picker .modal__foot.inv-run-foot {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 24px 18px !important;
  border-top: 1px solid var(--border, rgba(60, 64, 67, 0.12)) !important;
  background: var(--bg-card, #fff) !important;
}

/* «Показывать: N» в подвале окна запуска — тот же .picker-pagesize,
   что у «Аккаунтов» / «Прокси» (style.css): рамка, заливка, padding 6×9. */

/* Кнопки подвала → пилюли .addw__btn (40px / r20, Google Sans 14/500).
   Геометрия — на .btn, варианты ниже несут только цвета (канон 6px-теста). */
html body #inv-run-modal .inv-run-foot .btn,
html body.theme-dark #inv-run-modal .inv-run-foot .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s !important;
}

/* Отмена — синий текст без заливки (как .addw__btn--cancel). */
html body #inv-run-modal .inv-run-foot .btn--ghost,
html body.theme-dark #inv-run-modal .inv-run-foot .btn--ghost {
  background: transparent !important;
  color: #0b57d0 !important;
  padding: 0 12px !important;
}

html body #inv-run-modal .inv-run-foot .btn--ghost:hover,
html body.theme-dark #inv-run-modal .inv-run-foot .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
}

/* Основная — синяя заливка-пилюля #0b57d0 (как .addw__btn--primary). */
html body #inv-run-modal .inv-run-foot .btn--primary,
html body.theme-dark #inv-run-modal .inv-run-foot .btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
  padding: 0 20px !important;
}

html body #inv-run-modal .inv-run-foot .btn--primary:hover,
html body.theme-dark #inv-run-modal .inv-run-foot .btn--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
  filter: none !important;
}

html body #inv-run-modal .inv-run-foot .btn--primary:disabled,
html body.theme-dark #inv-run-modal .inv-run-foot .btn--primary:disabled {
  background: #c6c9cf !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Окна панели (выделение / диапазон) — поверх панели модалки.
   Общий контракт .am-gmail-bar .am-check-menu прибивает top/left к
   координатам страницы «Аккаунты» (105/271). В модалке иконка в другом
   месте — сбрасываем пиксели, позицию ставит positionCheckMenuPop()
   от .px-check-menu__control. */
html body #inv-pick-check-menu-pop,
html body #inv-pick-range-pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 700 !important;
}

/* ── Строка отбора окна запуска (#inv-pick-filters) ───────────────────
   Канон Gmail из расширенного поиска: строка чипов над панелью. Воронки и
   поповера за ней больше нет, вкладок-категорий тоже: сколько аккаунтов
   осталось после отбора, видно сразу в списке.

   Горизонтальный инсет общий с шапкой, панелью и таблицей
   (--picker-inset-x), поэтому первый чип начинается ровно под заголовком
   «Выбрать аккаунты». */
html body .modal__panel--picker #inv-pick-filters,
html body.theme-dark .modal__panel--picker #inv-pick-filters {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
  flex-wrap: wrap !important;
  padding: 2px var(--picker-inset-x, 24px) 12px !important;
  background: transparent !important;
}

/* Чипы группы — прямоугольные пилюли Google r8 высотой 32px: в покое
   обводка #747775 на прозрачном, с выбранными значениями — заливка
   #d3e3fd без обводки (тот же сегмент, что в «Поиске источников»).
   Типографика чипа: 14/18, вес 500, трекинг .25px, цвет #444746. */
html body .modal__panel--picker .picker-filter-row__chips .picker-chip,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #444746 !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .25px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip:hover,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: #747775 !important;
  color: #444746 !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip.is-open,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-open {
  background: rgba(11, 87, 208, 0.12) !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active {
  border-color: transparent !important;
  background: #d3e3fd !important;
  color: #041e49 !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active:hover,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active:hover {
  background: #c2d9fb !important;
}

/* Число выбранных значений — не бейдж-«пуля», а часть подписи чипа:
   заливка чипа уже сообщает, что фильтр включён. */
html body .modal__panel--picker .picker-filter-row__chips .picker-chip__count,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip__count {
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Каретка — сплошной треугольник (svg), а не символ «▾»: рядом с подписью
   14px/500 глиф читался волоском. Цвет и плотность те же, что у подписи. */
html body .modal__panel--picker .picker-filter-row__chips .picker-chip__caret,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
  opacity: 1 !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip__caret svg,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip__caret svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* «Сбросить» — текстовая кнопка Google, без рамки; появляется только когда
   в отборе что-то есть (см. renderPickerFilterChips). */
html body .modal__panel--picker .picker-filter-row__chips .picker-chip--clear,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear {
  margin-left: 0 !important;
  padding: 0 10px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #0b57d0 !important;
  font-weight: 500 !important;
}

html body .modal__panel--picker .picker-filter-row__chips .picker-chip--clear:hover,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear:hover {
  border-color: transparent !important;
  background: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
}

html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active:hover {
  background: rgba(11, 87, 208, 0.32) !important;
  color: #e8f0fe !important;
}

html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear,
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear:hover {
  color: #8ab4f8 !important;
}

/* Список значений группы — оболочка и строки как у #am-filter-dropdown. */
html body #inv-pick-dropdown.dropdown {
  padding: 6px 0 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  z-index: 710 !important;
}

html body #inv-pick-dropdown .dropdown__list {
  width: 100% !important;
  padding: 0 !important;
}

html body #inv-pick-dropdown .dropdown__item {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

html body #inv-pick-dropdown .dropdown__item:hover {
  background: #EEEEEE !important;
}

html body.theme-dark #inv-pick-dropdown.dropdown {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark #inv-pick-dropdown .dropdown__item:hover {
  background: var(--bg-hover, #2a2a2a) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   v24 — Motion canon: Gmail-прорисовка галочки чекбокса строк.
   Токены — motion.css, правила применения — MOTION.md (§3.2).

   Чекбокс строки (таблица «Аккаунты» + пикер окна запуска, .am-embed)
   разделён на два слоя. Псевдоэлементы на самом <input> Chrome НЕ
   отрисовывает (input — заменяемый элемент: стили вычисляются, но бокс не
   красится), поэтому галочку рисует РЕАЛЬНЫЙ span-оверлей .am-acct-cell__tick,
   лежащий поверх input в обёртке .am-acct-cell__cb:
     • input — ВСЕГДА маска рамки (empty), состояние меняет только цвет
       (#babec0 → #444746) с плавным переходом;
     • .am-acct-cell__tick — галочка (маска checkbox-tick.svg), при :checked
       «прорисовывается» слева направо через clip-path за --motion-draw;
     • снятие — быстрое растворение (opacity) за --motion-fast, без обратной
       прорисовки.
   Направленные скорости заданы транзишеном ЦЕЛЕВОГО состояния: в
   :checked + tick — clip-path (прорисовка), в базовом tick — opacity.
   Тулбарный чекбокс (#am-toolbar-check) не слоится: у него есть
   indeterminate-состояние, он остаётся на штатной подмене маски.
   ══════════════════════════════════════════════════════════════════════════ */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"],
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"] {
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* :checked оставляет на input маску РАМКИ — галочку рисует span-оверлей. */
html body :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"]:checked,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input[type="checkbox"]:checked {
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}

/* Обёртка чекбокса: размер = чекбокс (21px), tick позиционируется от неё. */
html body :is(#view-accounts, .am-embed).view-am .acc-table .am-acct-cell__cb,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table .am-acct-cell__cb {
  position: relative !important;
  display: inline-flex !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

/* Галочка-оверлей: реальный элемент (красится надёжно), маска — только путь
   галочки; цвет наследует токен чекбокса. По умолчанию скрыта и обрезана. */
html body :is(#view-accounts, .am-embed).view-am .acc-table .am-acct-cell__tick,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table .am-acct-cell__tick {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: url("img/checkbox-tick.svg") !important;
  mask-image: url("img/checkbox-tick.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  /* Снятие: галочка тает за --motion-fast; clip-path возвращается скачком
     ПОСЛЕ растворения (duration 0, delay --motion-fast) — стирания не видно. */
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
              clip-path 0s var(--motion-fast, 100ms) !important;
}

html body :is(#view-accounts, .am-embed).view-am .acc-table .row-check:checked + .am-acct-cell__tick,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table .row-check:checked + .am-acct-cell__tick {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  /* Установка: галочка видима сразу (opacity скачком) и прорисовывается
     слева направо за --motion-draw. */
  transition: opacity 0s,
              clip-path var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* ════════════════════════════════════════════════════════════════
   Окно выбора прокси / аккаунта (#pick-bind-modal) — семейство addw.
   Визуальный язык — как «Добавление аккаунтов» (#add-modal .addw) и
   «Изменить профиль»: белая карточка radius 28px, Google Sans,
   заголовок 23px/500 без разделителя, строки-опции с hover #f1f3f4 и
   разделителями #dadce0, кнопки-пилюли 40px / radius 20px, акцент #0b57d0.
   Анимация окна — по MOTION.md §3.5 (--motion-panel + ease-enter/exit).
   ──────────────────────────────────────────────────────────────── */
html body #pick-bind-modal,
html body.theme-dark #pick-bind-modal {
  /* Окно одного размера при любом наполнении. Строка: 12 + 36 (аватар) + 12 =
     60px, между строками ничего; видно пять — столько же, сколько в пикере
     баз. Короб держит список (см. правило .pick-bind__list ниже). */
  --pkb-row-h: 60px;
  --pkb-rows: 5;
  --pkb-list-h: calc(var(--pkb-row-h) * var(--pkb-rows));
  display: grid !important;
  place-items: center !important;
}
html body #pick-bind-modal[hidden],
html body.theme-dark #pick-bind-modal[hidden] {
  display: none !important;
}

html body #pick-bind-modal .addw,
html body.theme-dark #pick-bind-modal .addw {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: var(--app-font) !important;
  color: #1f1f1f !important;
}

/* Вход карточки, проявление содержимого и их reduced-motion здесь НЕ
   дублируются: всё держит общее правило `.modal__panel, .addw-modal .addw`
   в style.css. Токены этому окну достаются из блока #pick-bind-modal выше —
   они ровно канонные (--motion-panel + ease-enter/exit). */

html body #pick-bind-modal.modal--static-backdrop .addw,
html body.theme-dark #pick-bind-modal.modal--static-backdrop .addw {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #pick-bind-modal .addw__header,
html body.theme-dark #pick-bind-modal .addw__header {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
  flex: none !important;
}

html body #pick-bind-modal .pb__sub,
html body.theme-dark #pick-bind-modal .pb__sub {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #5f6368 !important;
  flex: none !important;
}

/* ── Поиск: залитая пилюля (нейтраль addw #f1f3f4), фокус — акцент ── */
html body #pick-bind-modal .pick-bind__search,
html body.theme-dark #pick-bind-modal .pick-bind__search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: none !important;
  margin-bottom: 12px !important;
}
/* Лупа отсчитывается от ПИЛЮЛИ, а не от края карточки: рамку модалки
   (--modal-pad-l) держит сама строка поиска, а абсолютная лупа меряется от
   её padding-box — то есть от внешнего края. Голые 16px оставляли иконку
   на 8px левее поля; внутрь пилюли её заводит рамка + те же 16px. */
html body #pick-bind-modal .pick-bind__search-ico,
html body.theme-dark #pick-bind-modal .pick-bind__search-ico {
  position: absolute !important;
  left: calc(var(--modal-pad-l, 24px) + 16px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  color: #5f6368 !important;
  pointer-events: none !important;
}
html body #pick-bind-modal .pick-bind__search input,
html body.theme-dark #pick-bind-modal .pick-bind__search input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__search input::placeholder,
html body.theme-dark #pick-bind-modal .pick-bind__search input::placeholder {
  color: #5f6368 !important;
}
html body #pick-bind-modal .pick-bind__search input:focus,
html body.theme-dark #pick-bind-modal .pick-bind__search input:focus {
  background: #ffffff !important;
  border-color: #0b57d0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
}

/* ── Фильтры: селект-«таблетка» + Material-чип + счётчик ── */
html body #pick-bind-modal .pick-bind__filters,
html body.theme-dark #pick-bind-modal .pick-bind__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
  margin-bottom: 8px !important;
}
html body #pick-bind-modal .pick-bind__filter,
html body.theme-dark #pick-bind-modal .pick-bind__filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #5f6368 !important;
}
html body #pick-bind-modal .pick-bind__filter select,
html body.theme-dark #pick-bind-modal .pick-bind__filter select {
  height: 32px !important;
  padding: 0 28px 0 12px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%235f6368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  transition: border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__filter select:hover,
html body.theme-dark #pick-bind-modal .pick-bind__filter select:hover {
  border-color: #5f6368 !important;
}
html body #pick-bind-modal .pick-bind__filter select:focus,
html body.theme-dark #pick-bind-modal .pick-bind__filter select:focus {
  border-color: #0b57d0 !important;
  outline: 0 !important;
}

/* Country picker reuses the same FlagCDN labels as account/proxy geo filters. */
html body #pick-bind-modal .pick-bind__country-picker,
html body.theme-dark #pick-bind-modal .pick-bind__country-picker {
  position: relative !important;
}
html body #pick-bind-modal .pick-bind__country-toggle,
html body.theme-dark #pick-bind-modal .pick-bind__country-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 92px !important;
  height: 32px !important;
  padding: 0 10px 0 12px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
html body #pick-bind-modal .pick-bind__country-toggle:hover,
html body.theme-dark #pick-bind-modal .pick-bind__country-toggle:hover {
  border-color: #5f6368 !important;
}
html body #pick-bind-modal .pick-bind__country-toggle:focus-visible,
html body.theme-dark #pick-bind-modal .pick-bind__country-toggle:focus-visible {
  border-color: #0b57d0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1px #0b57d0 !important;
}
html body #pick-bind-modal .pick-bind__country-value,
html body.theme-dark #pick-bind-modal .pick-bind__country-value {
  min-width: 0 !important;
}
html body #pick-bind-modal .pick-bind__country-chevron,
html body.theme-dark #pick-bind-modal .pick-bind__country-chevron {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 auto !important;
  color: #5f6368 !important;
  transition: transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__country-picker.is-open .pick-bind__country-chevron,
html body.theme-dark #pick-bind-modal .pick-bind__country-picker.is-open .pick-bind__country-chevron {
  transform: rotate(180deg) !important;
}
/* Поле со СВОИМ раскрытым списком светится так же, как поле в фокусе, — и так
   же, как нативный селект канона (select.is-pick-open). До этого подсветка
   висела на :focus-visible, а он мышиному клику не достаётся: список был
   открыт, а поле оставалось серым — единственное такое поле в программе. */
html body #pick-bind-modal .pick-bind__country-picker.is-open .pick-bind__country-toggle,
html body.theme-dark #pick-bind-modal .pick-bind__country-picker.is-open .pick-bind__country-toggle {
  border-color: #0b57d0 !important;
}
/* Форма самого окна (рамка, радиус, тень, поля, зазор до кнопки, ширина и
   строки) — блок «КАНОН РАСКРЫВАЮЩИХСЯ ОКОН» в конце файла: это эталон, и
   своих чисел у него быть не может. Здесь остаётся только каркас — где окно
   висит и чем прокручивается. */
html body #pick-bind-modal .pick-bind__country-menu,
html body.theme-dark #pick-bind-modal .pick-bind__country-menu {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  box-sizing: border-box !important;
  /* Потолок списка — 220px, но не выше свободного места у своей стороны:
     --pbc-room кладёт setCountryMenuOpen, когда выбирает сторону. */
  max-height: min(220px, var(--pbc-room, 220px)) !important;
  overflow-y: auto !important;
}
html body #pick-bind-modal .pick-bind__country-menu[hidden],
html body.theme-dark #pick-bind-modal .pick-bind__country-menu[hidden] {
  display: none !important;
}
html body #pick-bind-modal .pick-bind__country-option,
html body.theme-dark #pick-bind-modal .pick-bind__country-option {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body #pick-bind-modal .pick-bind__country-option:hover,
html body #pick-bind-modal .pick-bind__country-option:focus-visible,
html body.theme-dark #pick-bind-modal .pick-bind__country-option:hover,
html body.theme-dark #pick-bind-modal .pick-bind__country-option:focus-visible {
  outline: 0 !important;
}

html body #pick-bind-modal .pick-bind__chip,
html body.theme-dark #pick-bind-modal .pick-bind__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #444746 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__chip:hover,
html body.theme-dark #pick-bind-modal .pick-bind__chip:hover {
  background: #f1f3f4 !important;
  border-color: #dadce0 !important;
  color: #1f1f1f !important;
}
html body #pick-bind-modal .pick-bind__chip.is-active,
html body.theme-dark #pick-bind-modal .pick-bind__chip.is-active {
  background: #d3e3fd !important;
  border-color: transparent !important;
  color: #0b57d0 !important;
}
html body #pick-bind-modal .pick-bind__count,
html body.theme-dark #pick-bind-modal .pick-bind__count {
  margin-left: auto !important;
  font-size: 13px !important;
  color: #5f6368 !important;
}

/* ── Список: строки-опции addw (hover #f1f3f4, разделитель #dadce0) ──
   Короб фиксирован: окно одного размера при любом наполнении — ни прокси, два
   прокси, сотня, ввод в поиске, смена фильтра. Со `flex: 1 1 auto` высоту
   диктовало содержимое, и окно прыгало от каждого символа в поиске: ровно та
   болезнь, из-за которой канон «Окно одного размера» и появился — этот список
   он называл по имени с самого начала.

   Токены размера объявлены выше, в блоке #pick-bind-modal вместе с токенами
   анимации окна: одно окно — одно место, где написаны его числа. */
html body #pick-bind-modal .pick-bind__list,
html body.theme-dark #pick-bind-modal .pick-bind__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 0 1 auto !important;
  height: var(--pkb-list-h) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 -12px !important;
  padding: 0 !important;
}
html body #pick-bind-modal .pick-bind__row,
html body.theme-dark #pick-bind-modal .pick-bind__row,
html body #pick-bind-modal .pick-bind__row--account,
html body.theme-dark #pick-bind-modal .pick-bind__row--account {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: inherit !important;
  color: #1f1f1f !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__row:hover:not([disabled]),
html body.theme-dark #pick-bind-modal .pick-bind__row:hover:not([disabled]) {
  background-color: #f1f3f4 !important;
  transform: none !important;
}
html body #pick-bind-modal .pick-bind__row:active:not([disabled]),
html body.theme-dark #pick-bind-modal .pick-bind__row:active:not([disabled]) {
  transform: none !important;
}
html body #pick-bind-modal .pick-bind__row[disabled],
html body.theme-dark #pick-bind-modal .pick-bind__row[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
}
html body #pick-bind-modal .pick-bind__row.is-current,
html body.theme-dark #pick-bind-modal .pick-bind__row.is-current {
  background-color: #e8f0fe !important;
}
/* Разделитель между строками — как у .addw__option (кроме последней). */
html body #pick-bind-modal .pick-bind__row::after,
html body.theme-dark #pick-bind-modal .pick-bind__row::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 1px !important;
  background-color: #dadce0 !important;
}
html body #pick-bind-modal .pick-bind__row:last-child::after,
html body.theme-dark #pick-bind-modal .pick-bind__row:last-child::after {
  display: none !important;
}
/* Строка со значками проверки и копирования (.pxpick-*). Своего запаса
   справа строка не держит: место под значки держит метка состояния в
   конце строки, а сама она на это время гаснет — правило написано на
   классе .pxpick-*, не здесь. Значки лежат ПОВЕРХ строки (кнопку в кнопку
   не вкладывают), поэтому подсветку под курсором строке возвращаем сами,
   а последнюю строку списка закрывает обёртка — :last-child ищем на ней. */
html body #pick-bind-modal .pxpick-row:hover > .pick-bind__row:not([disabled]):not(.is-current) {
  background-color: #f1f3f4 !important;
}
html body #pick-bind-modal .pxpick-row:last-child .pick-bind__row::after,
html body.theme-dark #pick-bind-modal .pxpick-row:last-child .pick-bind__row::after {
  display: none !important;
}

html body #pick-bind-modal .pick-bind__row-ico,
html body.theme-dark #pick-bind-modal .pick-bind__row-ico {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(11, 87, 208, 0.10) !important;
  color: #0b57d0 !important;
  flex: none !important;
}
html body #pick-bind-modal .pick-bind__row-ico svg,
html body.theme-dark #pick-bind-modal .pick-bind__row-ico svg {
  width: 20px !important;
  height: 20px !important;
}
html body #pick-bind-modal .pick-bind__row-ava,
html body.theme-dark #pick-bind-modal .pick-bind__row-ava {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e8f0fe !important;
  color: #0b57d0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html body #pick-bind-modal .pick-bind__row-main,
html body.theme-dark #pick-bind-modal .pick-bind__row-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html body #pick-bind-modal .pick-bind__row-title,
html body.theme-dark #pick-bind-modal .pick-bind__row-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #1f1f1f !important;
}
html body #pick-bind-modal .pick-bind__row-sub,
html body.theme-dark #pick-bind-modal .pick-bind__row-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color: #5f6368 !important;
}

/* Статус-метки: свободен / текущий / занят — Material-контейнеры. */
html body #pick-bind-modal .pick-bind__row-tag,
html body.theme-dark #pick-bind-modal .pick-bind__row-tag {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
html body #pick-bind-modal .pick-bind__row-tag--ok,
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--ok {
  background: #e6f4ea !important;
  color: #137333 !important;
}
html body #pick-bind-modal .pick-bind__row-tag--bound,
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--bound {
  background: #d3e3fd !important;
  color: #0b57d0 !important;
}
html body #pick-bind-modal .pick-bind__row-tag--warn,
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--warn {
  background: #fef7e0 !important;
  color: #b06000 !important;
}

html body #pick-bind-modal .pick-bind__empty,
html body.theme-dark #pick-bind-modal .pick-bind__empty {
  padding: 40px 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5f6368 !important;
}

/* ── Подвал: пилюли addw. «Отвязать» — красный текст слева. ── */
html body #pick-bind-modal .addw__actions,
html body.theme-dark #pick-bind-modal .addw__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex: none !important;
}
html body #pick-bind-modal .pick-bind__spacer,
html body.theme-dark #pick-bind-modal .pick-bind__spacer {
  flex: 1 1 auto !important;
}
html body #pick-bind-modal .addw__btn,
html body.theme-dark #pick-bind-modal .addw__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  padding-inline: 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  border: none !important;
  border-radius: 20px !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .addw__btn--cancel,
html body.theme-dark #pick-bind-modal .addw__btn--cancel {
  color: #0b57d0 !important;
}
html body #pick-bind-modal .addw__btn--cancel:hover,
html body.theme-dark #pick-bind-modal .addw__btn--cancel:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
}
html body #pick-bind-modal .addw__btn--danger-text,
html body.theme-dark #pick-bind-modal .addw__btn--danger-text {
  color: #d93025 !important;
}
html body #pick-bind-modal .addw__btn--danger-text:hover,
html body.theme-dark #pick-bind-modal .addw__btn--danger-text:hover {
  background-color: rgba(217, 48, 37, 0.08) !important;
}

/* display:flex/grid !important выше ломает нативный [hidden] — восстанавливаем. */
html body #pick-bind-modal [hidden],
html body.theme-dark #pick-bind-modal [hidden] {
  display: none !important;
}

/* ============================================================================
   «1–50 из N» — кликабельный выбор размера страницы.
   Счётчик пагинации (аккаунты, прокси, базы, диспетчер задач, «Выбрать
   аккаунты») стал <button> и открывает #picker-pagesize-pop — тот же
   Gmail-канон окна, что у #am-filter-pop / #px-filter-pop, с чипами
   .picker-chip. Цвет, размер и семейство шрифта счётчика по-прежнему
   задают модульные правила выше — здесь только сброс кнопки, аффорданс
   и оболочка окна.
   ============================================================================ */
html body button.picker-pagination__info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex: 0 1 auto !important;
  margin-left: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-family: inherit;
  font-weight: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Модульные бары уже дают контейнеру width:auto/min-width:168px; окну
   «Выбрать аккаунты» — нет, а каретка и паддинги счётчика шире прежнего. */
html body #inv-pick-pagination.picker-pagination {
  width: auto !important;
  min-width: 168px !important;
}

/* cursor/padding перебиваем адресно: модульные правила выше объявлены с
   !important и большей специфичностью (…\.am-gmail-bar .picker-pagination__info). */
html body .view-am .am-gmail-bar button.picker-pagination__info,
html body #view-tasks.view-tasks .am-gmail-bar button.picker-pagination__info,
html body .view-proxy .px-gmail-bar button.picker-pagination__info,
html body .view-userbase--v2 .ub2-gmail-bar button.picker-pagination__info,
html body button.picker-pagination__info {
  padding: 5px 8px 5px 10px !important;
  cursor: pointer !important;
}

/* Каретка — треугольник на currentColor, отдельным ::after: textContent
   счётчика переписывается на каждом рендере и стёр бы вложенный узел. */
html body button.picker-pagination__info::after {
  content: "" !important;
  flex: none !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 3.5px solid transparent !important;
  border-right: 3.5px solid transparent !important;
  border-top: 4px solid currentColor !important;
  opacity: 0.6 !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body button.picker-pagination__info:hover,
html body button.picker-pagination__info.is-open {
  background: rgba(60, 64, 67, 0.08) !important;
}
html body button.picker-pagination__info:hover::after,
html body button.picker-pagination__info.is-open::after {
  opacity: 1 !important;
}
html body button.picker-pagination__info:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--am-accent-rgb, 37, 99, 235), 0.16) !important;
}
html body.theme-dark button.picker-pagination__info:hover,
html body.theme-dark button.picker-pagination__info.is-open {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Оболочка окна — белая карточка r4 с Material-тенью, без рамки; координаты
   ставит positionToolbarPopover() относительно счётчика. */
html body #picker-pagesize-pop.am-filter-pop {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 720 !important;
  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) !important;
  color: rgb(32, 33, 36) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  animation: picker-pagesize-pop-in var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both !important;
}
html body #picker-pagesize-pop.am-filter-pop[hidden] { display: none !important; }

html body.theme-dark #picker-pagesize-pop.am-filter-pop {
  background: var(--bg-card, #181818) !important;
  color: var(--text, #cccccc) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

@keyframes picker-pagesize-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Подвальный «Показывать: N» раскрывает то же окно вверх — анимация та же,
   зеркально по направлению роста (снизу вверх). transform-origin нужен для
   совпадения с «выездом» из-под селекта. */
html body #picker-pagesize-pop.am-filter-pop.is-above {
  transform-origin: bottom left !important;
  animation: picker-pagesize-pop-in-up var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both !important;
}

@keyframes picker-pagesize-pop-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Селект-триггер: нативный дропдаун подавлён в JS, поэтому курсор и
   подсветка открытого состояния — как у кликабельного счётчика. */
html body .picker-pagesize select.is-open {
  border-color: var(--am-accent, #2563eb) !important;
}

html body #picker-pagesize-pop .picker-pagesize-pop__title {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--text-mute, #6b7494) !important;
}

html body #picker-pagesize-pop .am-filter-pop__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

/* Чипы — точная копия канона #am-filter-chips / #px-filter-pop. */
html body #picker-pagesize-pop .picker-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 42px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 999px !important;
  background: var(--bg-app, #f7f8fb) !important;
  color: var(--text) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  cursor: pointer !important;
  transition:
    border-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body #picker-pagesize-pop .picker-chip:hover {
  border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.4) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body #picker-pagesize-pop .picker-chip.is-active {
  border-color: var(--am-accent, #2563eb) !important;
  background: var(--am-soft, rgba(37, 99, 235, 0.10)) !important;
  color: var(--am-accent, #2563eb) !important;
}

html body #picker-pagesize-pop .picker-chip:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--am-accent-rgb, 37, 99, 235), 0.16) !important;
}

/* ════════════════════════════════════════════════════════════════
   Окно «Выбор базы пользователей» (#inv-base-modal) — семейство addw.
   Эталон — «Добавление аккаунтов» (#add-modal .addw) и окно выбора
   прокси/аккаунта (#pick-bind-modal): белая карточка radius 28px,
   Google Sans, заголовок 23px/500 без разделителя, строки-опции с
   hover #f1f3f4 и разделителями #dadce0, кнопки-пилюли 40px / r20,
   акцент #0b57d0. Разметка осталась на .modal__panel — язык addw
   накладывается слоем, как у «Прокси» и «Конфиденциальности».
   Анимации — только токены MOTION.md: окно §3.5 (panel + ease-enter/
   exit), hover §3.3 (fast), выделение строки §3.1 (state), галочка
   чекбокса §3.2 (draw / fast).
   ──────────────────────────────────────────────────────────────── */
html body #inv-base-modal,
html body.theme-dark #inv-base-modal {
  --tp-checkbox-size: 21px;
  --tp-checkbox-color: #444746;
  /* Окно одного размера при любом наполнении. Высоту держит короб списка:
     строка = 12 + 20 (имя) + 2 + 18 (подпись) + 12 = 64px, видно пять,
     дальше скролл. Тот же короб занимает пустое состояние, поэтому окно
     не прыгает ни при вводе в поиск, ни когда баз нет совсем. */
  --invb-row-h: 64px;
  --invb-rows: 5;
  --invb-list-h: calc(var(--invb-row-h) * var(--invb-rows));
  display: grid !important;
  place-items: center !important;
}
html body #inv-base-modal[hidden],
html body.theme-dark #inv-base-modal[hidden] {
  display: none !important;
}

/* ── Панель: белая карточка addw ── */
html body #inv-base-modal .inv-base-modal__panel,
html body.theme-dark #inv-base-modal .inv-base-modal__panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: var(--app-font) !important;
  color: #1f1f1f !important;
  transform-origin: center center !important;
  animation: modal-in var(--modal-enter-duration) var(--modal-enter-ease) backwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #inv-base-modal .inv-base-modal__panel,
  html body.theme-dark #inv-base-modal .inv-base-modal__panel {
    animation-name: modal-fade-in !important;
  }
}

html body #inv-base-modal.modal--static-backdrop .inv-base-modal__panel,
html body.theme-dark #inv-base-modal.modal--static-backdrop .inv-base-modal__panel {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Содержимое при открытии проявляется, а не едет вместе с карточкой —
   базовое правило `.modal--entering .modal__panel > *` в style.css.
   Панель этого окна как раз .modal__panel, отдельных правил не нужно. */

/* ── Шапка: заголовок 23px/500 без разделителя + круглая «✕» ── */
html body #inv-base-modal .modal__head,
html body.theme-dark #inv-base-modal .modal__head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex: none !important;
}
html body #inv-base-modal .modal__title,
html body.theme-dark #inv-base-modal .modal__title {
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: #1f1f1f !important;
}
html body #inv-base-modal .modal__head [data-close],
html body.theme-dark #inv-base-modal .modal__head [data-close] {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: -4px -8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #444746 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-base-modal .modal__head [data-close]:hover,
html body.theme-dark #inv-base-modal .modal__head [data-close]:hover {
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
}
html body #inv-base-modal .modal__head [data-close]:focus-visible,
html body.theme-dark #inv-base-modal .modal__head [data-close]:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* ── Тело: подсказка, поиск, список ── */
html body #inv-base-modal .inv-base-modal__body,
html body.theme-dark #inv-base-modal .inv-base-modal__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body #inv-base-modal .modal__hint,
html body.theme-dark #inv-base-modal .modal__hint {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #5f6368 !important;
  flex: none !important;
}

/* Поиск: залитая пилюля (нейтраль addw #f1f3f4), фокус — акцент. */
html body #inv-base-modal .inv-base-search,
html body.theme-dark #inv-base-modal .inv-base-search {
  position: relative !important;
  display: block !important;
  flex: none !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #inv-base-modal .inv-base-search__ico,
html body.theme-dark #inv-base-modal .inv-base-search__ico {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  color: #5f6368 !important;
  pointer-events: none !important;
}
html body #inv-base-modal .inv-base-search__ico svg,
html body.theme-dark #inv-base-modal .inv-base-search__ico svg {
  width: 16px !important;
  height: 16px !important;
}
html body #inv-base-modal .inv-base-search input,
html body.theme-dark #inv-base-modal .inv-base-search input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-base-modal .inv-base-search input::placeholder,
html body.theme-dark #inv-base-modal .inv-base-search input::placeholder {
  color: #5f6368 !important;
}
html body #inv-base-modal .inv-base-search input:hover,
html body.theme-dark #inv-base-modal .inv-base-search input:hover {
  background: #ececee !important;
}
html body #inv-base-modal .inv-base-search input:focus,
html body #inv-base-modal .inv-base-search input:focus-visible,
html body.theme-dark #inv-base-modal .inv-base-search input:focus,
html body.theme-dark #inv-base-modal .inv-base-search input:focus-visible {
  background: #ffffff !important;
  border-color: #0b57d0 !important;
  /* inset: внешнее 0 0 0 1px обрезалось overflow:hidden у .inv-base-modal__body. */
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
}

/* ── Список: строки-опции addw (hover #f1f3f4, разделитель #dadce0) ── */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-list,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  /* Короб фиксирован (--invb-list-h): пять строк, дальше скролл. Расти по
     содержимому нельзя — иначе окно меняло бы размер от каждого символа в
     поиске. Сжаться на низком экране разрешено: flex-shrink остаётся 1. */
  flex: 0 1 auto !important;
  height: var(--invb-list-h) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 -12px !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
  /* Жёлоб под полосу зарезервирован всегда: ширина строк не пляшет, когда
     поиск оставляет от списка одну-две базы и полоса пропадает. */
  scrollbar-gutter: stable !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 21px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: inherit !important;
  color: #1f1f1f !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row:hover,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row:hover {
  background-color: #f1f3f4 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked,
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-active,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-active {
  background-color: #e8f0fe !important;
  border-color: transparent !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked:hover,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked:hover {
  background-color: #d9e7fd !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row:focus-visible,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
/* Разделитель между строками — как у .addw__option (кроме последней). */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row::after,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 1px !important;
  background-color: #dadce0 !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row:last-child::after,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row:last-child::after {
  display: none !important;
}

/* Строка-заглушка: окно открывается ДО ответа сервера, и до его прихода на
   месте списка стоят полосы, а не пустота (канон загрузки — блок LOADING
   SKELETON ниже). Геометрию берёт у живой строки, потому что это она и есть:
   тот же класс, та же сетка 21px / 1fr / auto, тот же разделитель — приход
   данных не двигает ни одной точки. Полосы канонические (.app-skel__bar),
   своей анимации здесь нет. */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row--skel,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row--skel {
  pointer-events: none !important;
  cursor: default !important;
  background-color: transparent !important;
}

/* Заглушка карточки задачи: экран открывается сразу по нажатию на строку, а
   полмегабайта её содержимого приезжают следом (см. openTaskDetail). Пустая
   карточка читалась бы как «в задаче ничего нет», поэтому на её месте стоят
   полосы канона .app-skel__bar — как в списочных таблицах. */
html body .task-detail-skel,
html body.theme-dark .task-detail-skel {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 24px !important;
  pointer-events: none !important;
}
html body .task-detail-skel > .app-skel__bar,
html body.theme-dark .task-detail-skel > .app-skel__bar {
  height: 16px !important;
}

/* Чекбокс — канон списочных таблиц: 21px SVG-маска, галочка отдельным
   span-оверлеем (MOTION.md §3.2: рисуется слева направо за --motion-draw,
   снимается растворением за --motion-fast). Отмеченный — акцент addw. */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cbwrap,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cbwrap {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  line-height: 0 !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb {
  position: relative !important;
  z-index: 1 !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  accent-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: url("img/checkbox-empty.svg") !important;
  mask-image: url("img/checkbox-empty.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb:checked,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb:checked {
  background-color: #0b57d0 !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__tick,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__tick {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  /* Цвет галочки = цвет рамки: рамка остаётся рамкой (канон §3.2), поэтому
     белая галочка внутри незалитого бокса была бы не видна. */
  background-color: #0b57d0 !important;
  -webkit-mask-image: url("img/checkbox-tick.svg") !important;
  mask-image: url("img/checkbox-tick.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
              clip-path 0s var(--motion-fast, 100ms) !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb:checked + .inv-base-row__tick,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__cb:checked + .inv-base-row__tick {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transition: opacity 0s,
              clip-path var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Текстовая колонка + счётчик. */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__main,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__name,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__name {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #1f1f1f !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__sub,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__sub {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color: #5f6368 !important;
}
/* Счётчик записей — Material-метка, как .pick-bind__row-tag. */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row__count,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__count {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked .inv-base-row__count,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked .inv-base-row__count {
  background: #d3e3fd !important;
  color: #0b57d0 !important;
}

/* ── Пустое состояние ── */
/* Пустое состояние встаёт на место списка, а не под него: короб один и тот
   же, поэтому окно с пустым состоянием ровно того же размера, что и со
   списком. Список на это время убран — иначе его 320px сложились бы с
   высотой заглушки. */
html body #inv-base-modal .inv-base-modal__body:has(> .inv-base-empty:not([hidden])) .inv-base-list,
html body.theme-dark #inv-base-modal .inv-base-modal__body:has(> .inv-base-empty:not([hidden])) .inv-base-list {
  display: none !important;
}
html body #inv-base-modal .inv-base-empty,
html body.theme-dark #inv-base-modal .inv-base-empty {
  box-sizing: border-box !important;
  flex: 0 1 auto !important;
  height: var(--invb-list-h) !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  overflow: hidden !important;
}
html body #inv-base-modal .inv-base-empty__art,
html body.theme-dark #inv-base-modal .inv-base-empty__art {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(11, 87, 208, 0.10) !important;
  color: #0b57d0 !important;
}
html body #inv-base-modal .inv-base-empty h4,
html body.theme-dark #inv-base-modal .inv-base-empty h4 {
  margin: 8px 0 0 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  color: #1f1f1f !important;
}
html body #inv-base-modal .inv-base-empty p,
html body.theme-dark #inv-base-modal .inv-base-empty p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #5f6368 !important;
}

/* ── Подвал: счётчик слева, пилюли addw (40px / r20) справа ── */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex: none !important;
}
/* Счётчик выбранного остался у пикера баз аудитории: у «Источников» его
   подвал больше не носит (3 сентября 2026), и держать окно в этом селекторе
   значило бы обещать элемент, которого там нет. */
html body #inv-base-modal .inv-base-foot__count,
html body.theme-dark #inv-base-modal .inv-base-foot__count {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  font-variant-numeric: tabular-nums !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot__actions,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot__actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  padding-inline: 20px !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  -webkit-font-smoothing: antialiased !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* «Очистить» — синий текст без заливки (как .addw__btn--cancel). */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost {
  padding-inline: 12px !important;
  background-color: transparent !important;
  color: #0b57d0 !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost:hover,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
}
/* «Применить» — синяя пилюля #0b57d0 (как .addw__btn--primary). */
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--primary,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--primary {
  background-color: #0b57d0 !important;
  color: #ffffff !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--primary:hover,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--primary:hover {
  background-color: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}
html body :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn:focus-visible,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* display:flex/grid !important выше ломает нативный [hidden] — восстанавливаем. */
html body #inv-base-modal [hidden],
html body.theme-dark #inv-base-modal [hidden] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LEAD RAIL + ROW CHECKBOX — канонический контракт списочных таблиц.
   Продолжение блока «TABLE SKELETON — canonical table contract (.app-table)».
   Эталон — таблица аккаунтов; здесь её геометрия и чекбокс распространяются
   на прокси, базы и задачи, чтобы во всех модулях совпадали:

     • рельс первой колонки — 16px (шапка, чекбокс строки, тулбар, вкладки);
     • отступ до первого содержательного элемента — 20px, поэтому номер /
       название / заголовок задачи стоят на одной вертикали (57px от края);
     • сам чекбокс — 21px SVG-маска, цвет #babec1 → #444746;
     • ховер и активация — круглое кольцо 42px, одного размера в обоих;
     • установка галочки — прорисовка слева направо (MOTION.md §3.2).

   Разметка: <span class="app-check"><input class="app-check__box">
   <span class="app-check__tick"></span></span>. Обёртка обязательна и не
   может быть заменена псевдоэлементами на самом <input>: у input стоит
   mask-image, а маска обрезает ВСЁ, что он рисует, включая ::before/::after
   (проверено попиксельно) — поэтому и кольцо, и галочка живут на обёртке.

   Новый списочный модуль: выдать строке ту же разметку .app-check и добавить
   его селекторы в списки ниже — локальных копий чекбокса больше не заводим.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Токены рельса и чекбокса — на оболочке таблицы каждого модуля.
   Селекторы повторяют специфичность легаси-объявлений (#id + классы модуля),
   поэтому позиция в конце файла решает конфликт в пользу канона. Пикер в
   модалке (.am-embed, --px-check-align: 24px) намеренно не затрагивается:
   там рельс равен инсету карточки. ── */
html body #view-accounts.view-am .am-table-shell,
html body.theme-dark #view-accounts.view-am .am-table-shell,
html body #view-proxy.view-proxy .am-table-shell,
html body.theme-dark #view-proxy.view-proxy .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ub2-flat-table, #sbl-flat-table, #ubd-records-table, #ubs-sources-table) .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ub2-flat-table, #pbl-flat-table, #ubd-records-table, #pbd-records-table) .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ub2-flat-table, #sbl-flat-table, #ubd-records-table, #ubs-sources-table) .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ub2-flat-table, #pbl-flat-table, #ubd-records-table, #pbd-records-table) .am-table-shell,
html body #view-tasks.view-tasks .am-table-shell,
html body.theme-dark #view-tasks.view-tasks .am-table-shell,
html body :is(#view-moderation-chats, #view-creator-chats).view-moderation .am-table-shell,
html body.theme-dark :is(#view-moderation-chats, #view-creator-chats).view-moderation .am-table-shell {
  --px-check-align: 16px;
  --px-check-hit: 32px;
  --px-check-size: 21px;
  --tp-checkbox-size: 21px;
  /* Рамка и галочка — сплошной --tp-checkbox-color. Приглушённые оттенки,
     которые ещё читают легаси-правила тулбара, привязаны к нему через
     color-mix: правка --tp-checkbox-color перекрашивает их разом. Где
     color-mix не поддержан, объявление становится невалидным, и var() отдаёт
     числовой фолбэк с той же базой — поэтому фолбэки в правилах обязаны
     совпадать с этими значениями. */
  --tp-checkbox-color: #444746;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-hover: color-mix(in srgb, var(--tp-checkbox-color, #444746) 8%, transparent);
  --tp-checkbox-hover-ring: color-mix(in srgb, var(--tp-checkbox-color, #444746) 8%, transparent);
  --tp-checkbox-hover-strong: color-mix(in srgb, var(--tp-checkbox-color, #444746) 12%, transparent);
  --tp-checkbox-svg-empty: url("img/checkbox-empty.svg");
  --tp-checkbox-svg-checked: url("img/checkbox-checked.svg");
  --tp-checkbox-svg-indeterminate: url("img/checkbox-indeterminate.svg");
  --app-table-lead-inset: 16px;
  --app-table-lead-gap: 20px;
  /* Диаметр круга один на все состояния: и под курсором, и при активации с
     обводкой. Размер вообще не участвует в смене состояния — работают только
     заливка и линия. Строка высотой 55px держит 42px без тесноты у
     разделителей. */
  --app-table-check-ring: 42px;
  /* Заливка кольца — ОДИН тон (чёрный) в двух прозрачностях, и между
     состояниями меняется ТОЛЬКО альфа: ховер 6%, активация 12%. Раньше
     активация собиралась из посторонних цветов — сплошной #e4e4e4 плюс линия
     30% #444746, а у отмеченного #bdc1c7, — и кольцо меняло не плотность, а
     оттенок, причём разный в каждом состоянии. Непрозрачный #e4e4e4 к тому же
     пробивал в подсветке выделенной строки серую дырку; чёрный с альфой
     ложится поверх любого фона строки и остаётся тем же кольцом. Новая
     плотность заливки — это новая альфа ЭТОГО тона, а не новый цвет. */
  --app-table-check-ring-tone: 0, 0, 0;
  --app-table-check-ring-bg-hover: rgba(var(--app-table-check-ring-tone, 0, 0, 0), 0.06);
  --app-table-check-ring-bg-active: rgba(var(--app-table-check-ring-tone, 0, 0, 0), 0.12);
  /* Внешняя линия кольца — единственный сплошной цвет конструкции и один на
     все состояния: отмечен чекбокс или нет, линия всегда #bdc1c7. */
  --app-table-check-ring-stroke: #bdc1c7;
  --app-bar-inset: 12px;
}

/* Пикер аккаунтов («Выбрать аккаунты») намеренно не входит в блок выше —
   у него свой рельс 24px. Но чекбокс он рисует общий, поэтому цвета
   конструкции ему нужны те же. */
html body .am-embed.view-am .am-table-shell,
html body.theme-dark .am-embed.view-am .am-table-shell {
  --tp-checkbox-color: #444746;
  --tp-row-checkbox-color: #babec1;
  --tp-checkbox-hover: color-mix(in srgb, var(--tp-checkbox-color, #444746) 8%, transparent);
  --tp-checkbox-hover-ring: color-mix(in srgb, var(--tp-checkbox-color, #444746) 8%, transparent);
  --tp-checkbox-hover-strong: color-mix(in srgb, var(--tp-checkbox-color, #444746) 12%, transparent);
  --app-table-check-ring-tone: 0, 0, 0;
  --app-table-check-ring-bg-hover: rgba(var(--app-table-check-ring-tone, 0, 0, 0), 0.06);
  --app-table-check-ring-bg-active: rgba(var(--app-table-check-ring-tone, 0, 0, 0), 0.12);
  --app-table-check-ring-stroke: #bdc1c7;
}

/* Мастер-чекбокс тулбара — на том же рельсе, что и чекбоксы строк. Хит-зона
   32px центрирует свой 21px чекбокс, поэтому её левый край смещается на
   (рельс − инсет бара − (хит − чекбокс) / 2) = 16 − 12 − 5.5 = −1.5px.
   Пикер в модалке (.am-embed) со своим рельсом 24px сюда не входит. */
html body #view-accounts.view-am .px-check-menu__check-hit,
html body.theme-dark #view-accounts.view-am .px-check-menu__check-hit,
html body #view-proxy.view-proxy .px-check-menu__check-hit,
html body.theme-dark #view-proxy.view-proxy .px-check-menu__check-hit,
html body #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .px-check-menu__check-hit,
html body #view-tasks.view-tasks .px-check-menu__check-hit,
html body.theme-dark #view-tasks.view-tasks .px-check-menu__check-hit,
html body :is(#view-moderation-chats, #view-creator-chats).view-moderation .px-check-menu__check-hit,
html body.theme-dark :is(#view-moderation-chats, #view-creator-chats).view-moderation .px-check-menu__check-hit {
  margin-left: calc(
    var(--px-check-align, 16px) - var(--app-bar-inset, 12px)
    - (var(--px-check-hit, 32px) - var(--tp-checkbox-size, 21px)) / 2
  ) !important;
}

/* ── 2. Инсет первой колонки = рельс. Дублирует канон .app-table с
   ID-специфичностью, чтобы перебить модульные 15.5px у прокси и баз. ── */
html body #view-accounts.view-am table.app-table :is(thead th, tbody td):first-child,
html body.theme-dark #view-accounts.view-am table.app-table :is(thead th, tbody td):first-child,
html body #view-proxy.view-proxy table.app-table :is(thead th, tbody td):first-child,
html body.theme-dark #view-proxy.view-proxy table.app-table :is(thead th, tbody td):first-child,
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table :is(thead th, tbody td):first-child,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table :is(thead th, tbody td):first-child,
html body #view-tasks.view-tasks table.app-table :is(thead th, tbody td):first-child,
html body.theme-dark #view-tasks.view-tasks table.app-table :is(thead th, tbody td):first-child,
html body :is(#view-moderation-chats, #view-creator-chats).view-moderation table.app-table :is(thead th, tbody td):first-child,
html body.theme-dark :is(#view-moderation-chats, #view-creator-chats).view-moderation table.app-table :is(thead th, tbody td):first-child {
  padding-left: var(--app-table-lead-inset, 16px) !important;
  overflow: visible !important;
}

/* ── 3. Отступ от чекбокса до содержимого строки — 20px во всех модулях.
   Аккаунты и задачи задают его flex-gap контейнера ячейки, прокси и базы —
   правым полем обёртки (их первая ячейка не flex-контейнер). ── */
html body #view-accounts.view-am table.app-table tbody .am-acct-cell,
html body.theme-dark #view-accounts.view-am table.app-table tbody .am-acct-cell,
html body #view-tasks.view-tasks table.app-table tbody .tm-task-cell,
html body.theme-dark #view-tasks.view-tasks table.app-table tbody .tm-task-cell,
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody .ubd-rec-cell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody .ubd-rec-cell,
html body :is(#view-moderation-chats, #view-creator-chats).view-moderation table.app-table tbody :is(.md-chat-cell, .ccc-name-cell),
html body.theme-dark :is(#view-moderation-chats, #view-creator-chats).view-moderation table.app-table tbody :is(.md-chat-cell, .ccc-name-cell) {
  display: flex !important;
  align-items: center !important;
  gap: var(--app-table-lead-gap, 20px) !important;
  min-width: 0 !important;
}
html body #view-proxy.view-proxy table.app-table tbody .app-check,
html body.theme-dark #view-proxy.view-proxy table.app-table tbody .app-check,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .app-check,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody .app-check {
  margin-right: var(--app-table-lead-gap, 20px) !important;
}

/* ── 4. Обёртка чекбокса: собственный бокс 21px, от неё позиционируются
   кольцо (::before) и галочка. Не масштабируется и не сжимается. ── */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 var(--tp-checkbox-size, 21px) !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  padding: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Кольцо под чекбоксом (::before обёртки) — css/components/table-check-ring.css. */

/* Пустой обёртки в рельсе больше нет: строка запланированной задачи выбирается
   так же, как строка задачи, и держит настоящий чекбокс. */

/* ── 5. Сам чекбокс: всегда маска РАМКИ, состояние меняет только цвет.
   Галочку рисует оверлей .app-check__tick (см. п.6). ── */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: var(--app-table-check-ring, 42px) !important;
  height: var(--app-table-check-ring, 42px) !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  accent-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--tp-row-checkbox-color, #babec1) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box:checked,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box:checked {
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
}
/* Ховер и последний тронутый чекбокс (:focus) поднимают неотмеченную рамку с
   приглушённого #babec1 до полного #444746 — глиф читается так же ярко, как у
   отмеченного. Раньше это делали только прокси и базы своими легаси-ховерами,
   аккаунты оставались блёклыми; теперь состояние принадлежит канону.

   Класс .app-check утроен намеренно — это счётчик специфичности, а не опечатка.
   Легаси-ховеры модулей ещё живы, самый тяжёлый весит (1,8,4):
   `#view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table tbody
   .px-flat__check-cell input[type=checkbox]:not(:checked):not(:indeterminate)
   :hover`. Без повторов канон весит (1,7,4) и проигрывает; с двумя — ничья,
   победа только за счёт позиции в конце файла; с тремя он строго тяжелее и не
   зависит от того, что допишут ниже (замерено в браузере). */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check.app-check.app-check .app-check__box:not(:checked):not(:disabled):is(:hover, :focus),
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check.app-check.app-check .app-check__box:not(:checked):not(:disabled):is(:hover, :focus) {
  background-color: var(--tp-checkbox-color, #444746) !important;
}

html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box:disabled,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check .app-check__box:disabled {
  cursor: not-allowed !important;
  opacity: 0.45 !important;
}

/* ── 6. Галочка-оверлей: маска только пути галочки, цвет = цвет рамки.
   Установка — прорисовка слева направо за --motion-draw, снятие — быстрое
   растворение за --motion-fast (clip-path возвращается уже невидимым). ── */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check__tick,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check__tick {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: url("img/checkbox-tick.svg") !important;
  mask-image: url("img/checkbox-tick.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
              clip-path 0s var(--motion-fast, 100ms) !important;
}
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check__box:checked + .app-check__tick,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check__box:checked + .app-check__tick {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transition: opacity 0s,
              clip-path var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* ── USERBASE MODULE - переименование базы в шапке ───────────────────────
   Базу переименовывают в заголовке её открытой страницы — кликом или Enter
   по названию (движок registerDetailNameRename, три раздела «Баз»).
   В строке списка название — кнопка «открыть базу», редактора там нет.

   Правка на месте, а не поле ввода: рамки, заливки и скругления нет — текст
   остаётся тем же самым по размеру, весу и цвету (типографику держат общие
   правила названия и заголовка модалки, здесь она намеренно не повторяется).
   Что редактирование включилось, показывают только каретка и пунктирное
   подчёркивание; 1px подчёркивания гасится margin-bottom, чтобы соседи
   не сдвигались ни на пиксель.

   Пунктир — язык дропзоны «перетащите файлы сюда»: 1px dashed синего addw,
   намёк при наведении (--ub-name-dash) и та же линия в полную силу при
   активной правке (--ub-name-dash-on). Появление линии — MOTION §3.3:
   border-color за --motion-fast/--motion-ease (микро-отклик ховера).

   Линия подчёркивает САМО название, а не всю шапку: у заголовка ширина по
   контенту (max-content), у поля ввода — из --ub-name-fit, который считает
   fitUserbaseNameInput() в app.js. ── */
html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap {
  --ub-name-dash: rgba(11, 87, 208, 0.32);
  --ub-name-dash-on: rgba(11, 87, 208, 0.6);
}

/* Название строки — кнопка открытия базы: подчёркивания нет ни в покое,
   ни при наведении. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit:is(:hover, :focus-visible),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit:is(:hover, :focus-visible) {
  outline: none !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}

/* Заголовок открытой базы: ширина по тексту, чтобы пунктир не тянулся
   на всю шапку модалки. Три страницы в списке — по одной на раздел «Баз»
   (пользователи, группы и каналы, номера): переименование у них общее, и
   правило обязано быть одним, иначе пунктир разойдётся по разделам. */
html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title {
  width: max-content !important;
  max-width: 100% !important;
  border: 0 !important;
  border-bottom: 1px dashed transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
  background: transparent !important;
  cursor: text !important;
  transition: border-bottom-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Наведение — каретка и пунктир, без заливки и рамки-коробки.
   Клавиатурный фокус показываем тем же пунктиром. */
html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title:is(:hover, :focus-visible),
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title:is(:hover, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom-color: var(--ub-name-dash, rgba(11, 87, 208, 0.32)) !important;
}

html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__title,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__title {
  display: none !important;
}

html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name {
  box-sizing: content-box !important;
  display: block !important;
  width: min(var(--ub-name-fit, 100%), 100%) !important;
  min-width: 24px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 -1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--ub-name-dash-on, rgba(11, 87, 208, 0.6)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: text !important;
}

html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name:focus,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--ub-name-dash-on, rgba(11, 87, 208, 0.6)) !important;
}

html body :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name:disabled,
html body.theme-dark :is(#ub-detail-page, #ub-source-page, #ub-phones-page) .ubd__title-wrap.is-editing-name .ubd__name:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

/* ============================================================================
   MOTION — появление панели действий выделения в тулбарах списков
   (аккаунты, прокси, базы, задачи, пикер окна запуска).

   .picker-gmail-bar__actions переключается между базовым режимом и режимом
   выделения подменой display (base-action ⇄ sel-action), а display не
   транзишится — поэтому появление даёт CSS-анимация: кнопка входит в поток и
   keyframes стартуют сами, без JS. Тип — «появление» (MOTION.md §3.6):
   --motion-draw + --motion-ease-enter, fade + масштаб 0.92→1 на месте
   (Material fade-through — соседей не сдвигает). Каскада нет: все иконки
   стартуют одновременно (MOTION.md §1.3).

   Обратный переход (возврат базовых иконок при снятии выделения) намеренно
   мгновенный: виды переключаются через hidden, и анимация «входа» базовых
   кнопок повторялась бы при каждом открытии вкладки.
   ============================================================================ */
@keyframes picker-bar-actions-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

html body .picker-gmail-bar.has-selection .am-sel-action,
html body .picker-gmail-bar.has-selection .am-sel-only,
html body .picker-gmail-bar.has-selection .px-sel-action,
html body .picker-gmail-bar.has-selection .ub2-sel-action,
html body .picker-gmail-bar.has-selection .ubd-sel-action,
html body .picker-gmail-bar.has-selection .tm-sel-delete,
html body .picker-gmail-bar.has-global-selection .am-table-counter {
  animation: picker-bar-actions-in var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both !important;
}

/* ── Modal panels radius contract (r20) ── */
html body .modal__panel.modal__panel--list,
html body .modal__panel.ub-detail-modal__panel,
html body .modal__panel.modal__panel--form,
html body.theme-dark .modal__panel.modal__panel--list,
html body.theme-dark .modal__panel.ub-detail-modal__panel,
html body.theme-dark .modal__panel.modal__panel--form {
  border-radius: 20px !important;
}

/* Кегль пилюли — общий токен списочных таблиц: статус в задачах, аккаунтах
   и базах обязан выглядеть одинаково (см. --app-table-meta-size). */
.task-status {
  font-size: var(--app-table-meta-size, 12px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   USERBASE DETAIL — открытая база это полноэкранная списочная таблица.

   Экран базы устроен как таблица аккаунтов/прокси/баз: слим-шапка (возврат,
   название, «Сохранить») и под ней карточка таблицы во всю оставшуюся высоту.
   Панели сводки, тулбара и вкладок-редактора у базы нет — вся работа с
   записями идёт внутри gmail-бара таблицы.

   Разметка:
     .table-card.card.am-table-card > .am-table-shell
       → .picker-gmail-bar.am-gmail-bar.ub2-gmail-bar.ubd-gmail-bar
       → .px-tabs.px-tabs--row  (все записи / свободные / обработанные)
       → .am-table-scroll > table.app-table
       → .am-table-foot         («Показывать: N», ссылки, сведения)

   Бар несёт класс модуля .ub2-gmail-bar, а кнопки выделения — .ub2-sel-action,
   поэтому иконки, круглые плашки ховера, стрелки пагинации и логика
   «базовые действия ⇄ действия выделения» приходят из правил списка баз один
   в один. Оболочку таблицы, рельс первой колонки и чекбокс строки раздают
   контракты .app-table / TABLE SKELETON / LEAD RAIL. Здесь остаются шапка
   страницы, колонки и сущностные ячейки.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Экран базы: ubd__head-main внутри утилитарного бара таблицы ── */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Своей копии строки опознания у вложенных экранов больше НЕТ: и база, и
   источник размечены каноном `.am-table-head` (конец файла), оттуда и берут
   высоту 68px, рельс 16px, отбивку пути и кегль названия. Копия жила здесь и
   повторяла те же числа через !important — ровно она и мешала: при переходе
   «список → база» название уезжало на 2px вниз, потому что обёртка правки
   названия считалась по другому line-height. Ниже осталось только то, чего у
   корневых экранов нет, — обёртка названия с полем ввода.

   Обёртка — блок с inline-block заголовком внутри: без сброса line-height она
   добирает 6px пустоты под текстом, и путь с названием съезжают вверх от
   центра строки. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-head .ubd__title-wrap,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-head .ubd__title-wrap {
  line-height: 0 !important;
}
/* Поле правки названия встаёт на место заголовка, поэтому повторяет его
   типографику из канона — иначе строка прыгает в момент правки. */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-head .ubd__title-wrap.is-editing-name .ubd__name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-head .ubd__title-wrap.is-editing-name .ubd__name {
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
}

/* Метка и «Сохранить» показываются только при несохранённых правках — в
   покое строка базы несёт только название и возврат. */
html body .ubd__dirty[hidden],
html body #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save[hidden],
html body.theme-dark .ubd__dirty[hidden],
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save[hidden] {
  display: none !important;
}
/* «Сохранить» — пилюля языка addw (r20 / #0b57d0), как основные кнопки
   модалок приложения. */
html body #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save {
  flex: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save:hover:not(:disabled),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save:hover:not(:disabled) {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save:disabled,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ub-detail-save:disabled {
  opacity: .5 !important;
  cursor: default !important;
}

/* ── Карточка таблицы: занимает всю высоту под шапкой ── */
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #ubs-sources-table),
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #pbd-records-table),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #ubs-sources-table),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #pbd-records-table) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  /* --bg-card, а не --proxy-surface: последний прибит к #ffffff и в тёмной
     теме тоже, из-за чего карточка оставалась белой под белым текстом. */
  background: var(--bg-card, #ffffff) !important;
}

/* Прокрутка — на оболочке: gmail-бар липнет сверху, вкладки и шапка уезжают
   вместе со строками (один в один со списком баз). */
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #ubs-sources-table) > .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #pbd-records-table) > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #ubs-sources-table) > .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 :is(#ubd-records-table, #pbd-records-table) > .am-table-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Гаттер зарезервирован всегда — таблица не «прыгает» при появлении
     прокрутки (см. одноимённое правило аккаунтов и баз). */
  scrollbar-gutter: stable !important;
}

html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ubd-gmail-bar,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ubd-gmail-bar {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  box-shadow: none !important;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ubd-gmail-bar.is-scroll-raised,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .picker-gmail-bar.ubd-gmail-bar.is-scroll-raised {
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1) !important;
}

/* Поиск по записям живёт в баре. У списка баз тот же элемент скрыт (там
   ищет глобальный поиск топбара) — здесь возвращаем его в поток. */
html body :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search,
html body.theme-dark :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  order: 60 !important;
  flex: 0 1 240px !important;
  width: 240px !important;
  height: 36px !important;
  margin-left: 8px !important;
  padding: 0 12px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--px-gmail-muted, #5f6368) !important;
  box-shadow: none !important;
  transition: border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search:focus-within,
html body.theme-dark :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search:focus-within {
  border-color: #0b57d0 !important;
}
html body :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search svg,
html body.theme-dark :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search svg {
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--px-gmail-icon, #444746) !important;
}
html body :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search input,
html body.theme-dark :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: 13px !important;
}
/* Счётчик выделения встаёт перед поиском, а не после него. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar .am-table-counter,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar .am-table-counter {
  order: 50 !important;
}


/* Базовые действия уходят на время выделения — как #ub2-add-many и «…» в
   списке баз (там правило по id, здесь по классу группы). */
html body .view-userbase--v2 .ubd-gmail-bar.has-selection .ubd-base-action,
html body .view-userbase--v2 .ubd-gmail-bar.has-selection #ubd-more-menu,
html body .view-userbase--v2 .ubd-gmail-bar.has-selection #pbd-more-menu,
html body.theme-dark .view-userbase--v2 .ubd-gmail-bar.has-selection .ubd-base-action,
html body.theme-dark .view-userbase--v2 .ubd-gmail-bar.has-selection #ubd-more-menu,
html body.theme-dark .view-userbase--v2 .ubd-gmail-bar.has-selection #pbd-more-menu {
  display: none !important;
}
/* Корзина записей повторяет корзину баз: 22px-глиф и нейтральная плашка —
   опасность подтверждается диалогом, а не красным в тулбаре. */
html body .view-userbase--v2 .ubd-gmail-bar #ubd-sel-delete svg,
html body .view-userbase--v2 .ubd-gmail-bar #pbd-sel-delete svg,
html body.theme-dark .view-userbase--v2 .ubd-gmail-bar #ubd-sel-delete svg,
html body.theme-dark .view-userbase--v2 .ubd-gmail-bar #pbd-sel-delete svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5px !important;
}

/* Ширины колонок записей задаёт общий модуль колонок (инлайн в th):
   «Запись» шире прочих — в ней чекбокс, номер и сам идентификатор. */

/* Первая ячейка — контейнер .ubd-rec-cell, как .am-acct-cell в аккаунтах:
   чекбокс, номер, запись. Раскладку (flex + gap 20px рельса) он получает из
   блока LEAD RAIL, здесь остаётся только типографика частей. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-rec__num,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-rec__num {
  flex: none !important;
  min-width: 22px !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 20px !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-rec,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-rec {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  /* Кегль и вес — из токенов оболочки (см. канон типографики строк ниже по
     файлу): у записей базы 13px/400, у остальных таблиц модуля 14px/500. */
  font-size: var(--app-table-anchor-size, 13px) !important;
  font-weight: var(--app-table-anchor-weight, 500) !important;
  line-height: 20px !important;
}

/* Имя человека — обычное значение ячейки: якорь строки один, и это запись. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-name {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--app-table-cell-color, var(--text)) !important;
  font-family: inherit !important;
  font-size: var(--app-table-cell-size, 13px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* Логин — значение ячейки, которое копируется по клику: тот же приём, что у
   логина и телефона в «Аккаунтах». Кнопка не должна отличаться от текста
   ничем, кроме цвета на ховере — подложки-чипа здесь нет. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-login,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-login {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--app-table-cell-color, var(--text)) !important;
  font-family: inherit !important;
  font-size: var(--app-table-cell-size, 13px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-login:is(:hover, :focus-visible),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-login:is(:hover, :focus-visible) {
  background: transparent !important;
  color: var(--tp-accent, #2563eb) !important;
  outline: none !important;
}

/* Онлайн — значение ячейки, не пилюля: это факт о человеке, а не состояние
   работы с ним. Цветом выделен только тот, кто в сети прямо сейчас. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-seen,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-seen {
  color: var(--app-table-cell-color, var(--text)) !important;
  font-family: inherit !important;
  font-size: var(--app-table-cell-size, 13px) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-seen--online {
  color: #137a3c !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-seen--online {
  color: #4ec9b0 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-seen--long_ago,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-seen--long_ago {
  color: var(--text-mute, #64748b) !important;
}

/* «+2» рядом со статусом: сколько ещё модулей работало с этим человеком.
   Мета строки — кегль и тон подписи, не спорит с самой отметкой. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-marks-more,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-marks-more {
  display: inline-block !important;
  margin-left: 6px !important;
  color: var(--text-mute, #64748b) !important;
  cursor: default !important;
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 20px !important;
  vertical-align: middle !important;
}

/* Тип — обычный текст ячейки: цветной пилюлей его не выделяем. */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-kind,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-kind {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* Статус записи — цветная пилюля диспетчера: та же геометрия (2px 9px, r999,
   кегль --app-table-meta-size/500, строка 20px → высота 24px) и та же палитра
   .task-status--*. Раскладка: OK → done (зелёный), PRIVACY → running (синий),
   SKIP → paused (янтарный), ERROR → error (красный), «Свободен» →
   interrupted (серый). */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status {
  display: inline-block !important;
  padding: 2px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--ok {
  background: #e6f7ec !important; color: #137a3c !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--privacy {
  background: #e6f0ff !important; color: #1d4ed8 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--skip {
  background: #fef3c7 !important; color: #b45309 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--error {
  background: #fde7e7 !important; color: #b42525 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--none {
  background: #eef1f6 !important; color: #556 !important;
}

html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--ok {
  background: rgba(78, 201, 176, .15) !important; color: #4ec9b0 !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--privacy {
  background: rgba(0, 120, 212, .18) !important; color: #4fc1ff !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--skip {
  background: rgba(245, 158, 11, .18) !important; color: #fbbf24 !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--error {
  background: rgba(244, 135, 113, .15) !important; color: #f48771 !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--none {
  background: rgba(160, 174, 192, .16) !important; color: #a0aec0 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-mute,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-mute {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════════
   USERBASE MODULE - sources (базы поиска и открытый источник)
   Вкладка «Источники» в списке показывает базы, собранные модулем «Поиск
   источников»; сам источник открывается своим экраном (.ub2--source) с
   собственной панелью и таблицей. Отсюда правила ниже:
   1) gmail-бар списка переключает набор действий — над базами поиска нет ни
      «Добавить базу», ни дублирования/объединения/экспорта;
   2) в первой ячейке рядом с названием стоит ссылка чата — у источника нет
      своей страницы, и ссылка это единственный способ его открыть.
   Блок стоит после LEAD RAIL намеренно: рельс и ячейку названия он не
   переопределяет, а правила первой ячейки (td.ub2-name) должны читаться
   поверх канона — иначе название источника теряет обрезку. */

/* Правил «панель в режиме источников» здесь больше нет: у списка баз поиска
   своя панель (#sbl-*) на своём экране, и набор её кнопок собран в разметке.
   Прятать половину чужой панели классом .is-sources было следствием общей
   вкладки — вкладки не стало. */

/* Название источника — одна строка: ряд источников обязан совпадать по
   высоте с рядом прогонов (замерено: две строки давали 62px против 46px).
   Логин уехал в свою колонку, поэтому здесь остаётся только название, и
   ширину ему считаем от рельса: чекбокс + зазор + номер строки. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src__table td.ub2-name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src__table td.ub2-name {
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: calc(100% - var(--tp-checkbox-size, 21px) - var(--app-table-lead-gap, 20px) - 5ch) !important;
  vertical-align: middle !important;
}

/* Порядковый номер строки — та же мета, что в проксях: 2 знака, правое
   выравнивание, приглушённый кегль. Стоит между чекбоксом и названием.
   Селектор общий на все таблицы модуля (список баз, прогоны, источники):
   номер в первой колонке — часть канона списочной таблицы, а не украшение
   одной из них. */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table .px-flat__num,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table .px-flat__num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: 2ch !important;
  margin-right: 18px !important;
  vertical-align: middle !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  text-align: right !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

/* Логин и ID — текст ячейки, который копируется по клику: ровно так же
   ведут себя телефон и логин в «Аккаунтах». Кнопка не должна выглядеть
   кнопкой, пока на неё не навели. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-login,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-login {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-login:is(:hover, :focus-visible),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-login:is(:hover, :focus-visible) {
  color: var(--tp-accent, #2563eb) !important;
  text-decoration: underline !important;
  outline: none !important;
}

/* Вход в чат: «По заявке» — предупреждение, а не украшение. Прямой инвайт
   в такой чат не сработает, поэтому строка обязана отличаться взглядом.
   Геометрия и кегль — общая пилюля списочных таблиц (12px/20px). */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--free {
  background: rgba(30, 142, 62, 0.12) !important;
  color: #1e8e3e !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--free {
  background: rgba(129, 201, 149, 0.16) !important;
  color: #81c995 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--request {
  background: rgba(232, 113, 10, 0.14) !important;
  color: #b06000 !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--request {
  background: rgba(253, 188, 100, 0.16) !important;
  color: #fdbc64 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--unknown,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--unknown {
  padding: 0 !important;
  background: transparent !important;
  color: var(--tp-side-muted, #8b95b1) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name__title,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name__title {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-link,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-link {
  flex: 0 0 auto !important;
  max-width: 45% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-decoration: none !important;
  transition: color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 a.ub2-src-link:is(:hover, :focus-visible),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 a.ub2-src-link:is(:hover, :focus-visible) {
  color: var(--tp-accent, #2563eb) !important;
  text-decoration: underline !important;
  outline: none !important;
}

/* Тип источника — обычный текст ячейки: цветных пилюль в записях баз нет,
   и группа с каналом не повод их заводить (см. .ubd-kind). */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-kind,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-kind {
  color: var(--tp-side-text-strong, #1d2540) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOADING SKELETON — заглушка списочных таблиц, пока едут данные.
   Продолжение блоков «TABLE SKELETON — canonical table contract (.app-table)»
   и «LEAD RAIL». Слово skeleton там означает КАРКАС таблицы; здесь — «серые
   строки на время загрузки», это разные сущности, пересечений в классах нет.

   Зачем. Открытие базы (и любого списка) раньше показывало пустую таблицу или,
   хуже, готовое «Здесь пока нет баз» — то есть врало, пока ответ ещё летел.
   Заглушка занимает то же место, что и будущие строки: колонки уже разведены
   через <colgroup>, а число строк считается от нижней границы окна
   (tableSkeletonRows в app.js), поэтому приход данных не двигает вёрстку.

   Появление. Заглушка молчит первые --motion-hold и только потом проявляется.
   Локальный ответ приходит за 20-30ms — то есть быстрее одного кадра, и раньше
   серые полосы успевали мелькнуть в кадре и исчезнуть. Теперь быстрый ответ
   снимает заглушку, которую ещё никто не видел, а затянувшийся получает мягкое
   проявление за --motion-draw. Механизм тот же, что у пульса ниже: задержка
   анимации, без JS-таймеров.

   Мигание. Пульс включает не JS, а задержка анимации (--motion-wait): быстрый
   ответ успевает снять заглушку раньше старта keyframes, и она так и остаётся
   спокойной. Затянулось — строки начинают дышать. Ни таймеров, ни классов,
   ни гонок: элемента нет — анимации нет (обоснование: MOTION.md §3.7).

   Вечной заглушка быть не может. Снять её должна перерисовка после ответа;
   если загрузчик перерисовался раньше, чем снял свой флаг «гружусь», снимать
   становится некому — пустой список остаётся мигать навсегда. Такую заглушку
   подменяет честным «Данные не загрузились» сторож в app.js
   (appSkelWatchTick). Анимации он не касается — здесь ничего для него нет.

   Разметку раздаёт appTableSkeleton() в app.js — локальных копий не заводим.
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-dark {
  --app-skel-tint: rgba(255, 255, 255, 0.09);
}

/* Заглушка — не строка: ни ховера, ни выделения, ни курсора-руки.
   Проявление живёт на строке, а не на полосе: полоса уже занята бесконечным
   пульсом, а два правила animation на одном элементе затирают друг друга.
   Прозрачная строка при этом держит свою высоту — раскладка ждёт данные на
   месте, просто пока не показывает, что ждёт. */
html body tr.app-skel__row,
html body.theme-dark tr.app-skel__row {
  pointer-events: none !important;
  cursor: default !important;
  background: transparent !important;
  animation: app-skel-reveal
             var(--motion-draw, 200ms)
             var(--motion-ease, cubic-bezier(0.2, 0, 0, 1))
             var(--motion-hold, 200ms)
             both !important;
}

@keyframes app-skel-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html body tr.app-skel__row > td,
html body.theme-dark tr.app-skel__row > td {
  height: var(--app-skel-row-h, 44px) !important;
}

/* Первая ячейка живёт на общем рельсе: квадрат чекбокса, зазор 20px, полоса. */
html body .app-skel__lead,
html body.theme-dark .app-skel__lead {
  display: flex !important;
  align-items: center !important;
  gap: var(--app-table-lead-gap, 20px) !important;
  min-width: 0 !important;
}

html body .app-skel__check,
html body.theme-dark .app-skel__check {
  flex: 0 0 auto !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  border-radius: 4px !important;
  background: var(--app-skel-tint) !important;
}

html body .app-skel__bar,
html body.theme-dark .app-skel__bar {
  display: block !important;
  flex: 0 1 auto !important;
  width: var(--app-skel-w, 60%) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: var(--app-skel-tint) !important;
  animation: app-skel-blink
             var(--motion-pulse, 1200ms)
             var(--motion-ease, cubic-bezier(0.2, 0, 0, 1))
             var(--motion-wait, 700ms)
             infinite !important;
}

@keyframes app-skel-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.38; }
}

/* Просили убрать анимации — заглушка просто стоит серой. 0.01ms из шкалы тут
   не подходит: бесконечный цикл превратился бы в стробоскоп.
   Проявление строки (app-skel-reveal) не выключаем: --motion-draw шкала и так
   глушит до 0.01ms, и остаётся ровно тишина --motion-hold — не анимация, а
   отказ мелькать. Убрать её значит вернуть мелькание тому, кто анимации и
   просил убрать. */
@media (prefers-reduced-motion: reduce) {
  html body .app-skel__bar,
  html body.theme-dark .app-skel__bar { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   СТАНДАРТ ОТСТУПОВ МОДАЛЬНЫХ ОКОН
   ─────────────────────────────────────────────────────────────────────
   Шапка любого окна: padding: 24px 25px 16px 24px.
   Остальные секции выстроены по той же рамке, чтобы текст шапки, текст
   контента и кнопки подвала стояли на одной вертикали:

       ┌─────────────────────────────────┐
       │ 24 ↑                            │
       │ 24 →  ЗАГОЛОВОК            ← 25 │
       │ 16 ↓                            │
       │ 24 →  контент              ← 25 │
       │ 16 ↑                            │
       │ 24 →            [Отмена] [ОК]   │
       │ 24 ↓                            │
       └─────────────────────────────────┘

   Рамку держат СЕКЦИИ, а не карточка: у панели padding обнулён, зазоры
   между шапкой/контентом/подвалом дают padding-bottom шапки и
   padding-top подвала (ни одна панель не использует gap — проверено).

   Про вес селекторов: точечные правила окон в этом файле написаны как
   `html body #some-modal .modal__head { … !important }` — у них есть id,
   поэтому обычный `html body .modal .modal__head` их не перебьёт.
   Стандарт продублирован со списком id в :is() — id + два класса `.modal`
   дают вес выше, чем у любого из них (в том числе у theme-dark-копий).
   Первый, безымянный селектор оставлен, чтобы новые окна получали
   стандарт сами, без правки этого списка.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Панель: рамку отдаём секциям ──────────────────────────────── */

html body .modal .modal__panel,
html body .modal .addw,
html body :is(#px-add-modal, .newbase-modal, #inv-base-modal, #add-modal,
               #phone-auth-modal, #edit-profile-form-modal,
               #pick-bind-modal).modal.modal .modal__panel,
html body :is(#px-add-modal, .newbase-modal, #inv-base-modal, #add-modal,
               #phone-auth-modal, #edit-profile-form-modal,
               #pick-bind-modal).modal.modal .addw {
  padding: 0 !important;
}

/* У окна настроек шапки нет — рамку держит сама панель. */
html body #settings-modal.modal.modal .modal__panel {
  padding: var(--modal-pad-t) var(--modal-pad-r) var(--modal-pad-b) var(--modal-pad-l) !important;
}

/* ── 2. Шапка — собственно стандарт ───────────────────────────────── */

html body .modal :is(.modal__head, .addw__header, .edit-profile__head,
                     .privacy-list__head, .tg-security-head, .role-modal__head),
html body :is(#px-add-modal, .newbase-modal, #ub-import-modal, #inv-list-modal,
               #pc-numbers-modal, #srch-keywords-modal, #cc-material-modal,
               #msge-modal, #media-modal, #inv-base-modal, #schedule-modal,
               #inv-run-modal, #actions-modal, #add-modal, #session-import-modal,
               #phone-auth-modal, #edit-profile-modal, #edit-profile-form-modal,
               #edit-privacy-modal, #edit-privacy-form-modal, #twofa-modal,
               #cloud-password-change-modal, #auto-delete-modal, #security-confirm-modal,
               #folder-modal, #role-modal, #bind-proxy-modal, #bind-proxy-preview-modal,
               #pick-bind-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal,
               #ar-editor, #faq-modal, #help-modal, #support-modal, #whatsnew-modal,
               #lic-upgrade-modal, #lic-renew-modal, #lic-key-modal,
               #dlg-modal).modal.modal :is(.modal__head, .addw__header,
               .edit-profile__head, .privacy-list__head, .tg-security-head,
               .role-modal__head) {
  padding: var(--modal-pad-t) var(--modal-pad-r) var(--modal-gap) var(--modal-pad-l) !important;
}

/* ── 3. Подвал — зеркало шапки ────────────────────────────────────── */

html body .modal :is(.modal__foot, .addw__actions, .modal__actions,
                     .tg-security-footer, .privacy-form__footer),
html body :is(#px-add-modal, .newbase-modal, #inv-list-modal,
               #pc-numbers-modal,
               #srch-keywords-modal, #cc-material-modal, #msge-modal,
               #media-modal, #inv-base-modal, #schedule-modal, #inv-run-modal,
               #settings-modal, #add-modal, #session-import-modal, #phone-auth-modal,
               #edit-profile-form-modal, #edit-privacy-form-modal, #twofa-modal,
               #cloud-password-change-modal, #auto-delete-modal, #security-confirm-modal,
               #folder-modal, #role-modal, #bind-proxy-modal, #bind-proxy-preview-modal,
               #pick-bind-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal,
               #ar-editor, #faq-modal, #help-modal, #support-modal, #whatsnew-modal,
               #lic-upgrade-modal, #lic-renew-modal, #lic-key-modal,
               #dlg-modal).modal.modal :is(.modal__foot, .addw__actions,
               .modal__actions, .tg-security-footer, .privacy-form__footer) {
  padding: var(--modal-gap) var(--modal-pad-r) var(--modal-pad-b) var(--modal-pad-l) !important;
}


/* ── 4. Контент: обычные секции встают на рамку ───────────────────── */

html body .modal :is(.modal__body, .privacy-form__body, .tg-security-confirm-body,
                     .lic-modal__body, .epf__body, .pa__body,
                     .epf__sub, .edit-profile__sub, .pb__sub, .pick-bind__search,
                     .pick-bind__filters, .faq-modal__search,
                     .help-modal__search),
html body :is(#px-add-modal, .newbase-modal, #ub-import-modal, #inv-list-modal,
               #pc-numbers-modal, #srch-keywords-modal, #cc-material-modal,
               #msge-modal, #media-modal, #inv-base-modal, #schedule-modal,
               #session-import-modal, #phone-auth-modal, #edit-profile-form-modal,
               #edit-privacy-form-modal, #cloud-password-change-modal,
               #security-confirm-modal, #bind-proxy-modal, #bind-proxy-preview-modal,
               #pick-bind-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal,
               #ar-editor, #faq-modal, #help-modal, #support-modal, #lic-upgrade-modal,
               #lic-renew-modal, #lic-key-modal,
               #dlg-modal).modal.modal :is(.modal__body, .privacy-form__body,
               .tg-security-confirm-body, .lic-modal__body,
               .epf__body, .pa__body, .epf__sub, .edit-profile__sub, .pb__sub,
               .pick-bind__search, .pick-bind__filters,
               .faq-modal__search, .help-modal__search) {
  padding-left: var(--modal-pad-l) !important;
  padding-right: var(--modal-pad-r) !important;
}

/* Поля-«роли» живут только в #role-modal: у их строк своих отступов нет. */
html body #role-modal.modal.modal .role-modal__body {
  padding-left: var(--modal-pad-l) !important;
  padding-right: var(--modal-pad-r) !important;
}

/* ── 5. Контент со «своими» отступами у строк ─────────────────────────
   Здесь строка — не карточка, а зона наведения: подложка обязана вылезать
   за текст. Поэтому боковой отступ секции = 24 − собственный отступ строки,
   чтобы ТЕКСТ всё равно встал на 24/25, а подсветка ушла шире.        */

/* строки с padding-left 12px */
html body :is(#actions-modal, #edit-privacy-modal, #twofa-modal,
               #auto-delete-modal).modal.modal :is(.actions-list, .privacy-list__body,
               .tg-security-body, .auto-delete-modal__body),
html body #edit-profile-modal.modal.modal .edit-profile__picker {
  padding-left: calc(var(--modal-pad-l) - 12px) !important;
  padding-right: calc(var(--modal-pad-r) - 12px) !important;
}


/* Списки-опции addw: подложка строки уезжает за рамку отрицательным
   margin, поэтому рамку задаём margin'ом, а не padding'ом (строка = 16px). */
html body :is(#add-modal, #pick-bind-modal).modal.modal :is(.addw__list, .pick-bind__list) {
  margin-left: calc(var(--modal-pad-l) - 16px) !important;
  margin-right: calc(var(--modal-pad-r) - 16px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── 6. Контент во всю ширину — рамку держат его колонки ──────────── */

/* Встроенная таблица аккаунтов — тоже во всю ширину. */
html body #inv-run-modal.modal.modal .modal__body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Плёнка drag-n-drop лежит поверх окна — рамка ей не нужна. */
html body #session-import-modal.modal.modal .si-dropveil {
  padding: 0 !important;
}

/* ── 6a. Хвосты старой схемы «рамку держит панель» ────────────────────
   Пока боковые отступы давала карточка, эти секции вылезали за неё
   отрицательным margin и возвращали себе те же пиксели своим padding.
   Теперь рамку задаёт padding секции, и старый margin уводит контент
   левее шапки — снимаем. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal).modal.modal .modal__body,
html body :is(#phone-auth-modal, #edit-profile-form-modal).modal.modal .epf__body {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ── 7. Вертикаль: зазоры дают шапка и подвал ─────────────────────── */

/* Зазор шапка↔контент и контент↔подвал равен ровно 16px, поэтому свои
   margin'ы шапка и подвал не добавляют — иначе к 16 приклеивались бы
   старые 4/10/12/15px и каждое окно дышало бы по-своему. */
html body .modal :is(.modal__head, .addw__header, .edit-profile__head,
                     .privacy-list__head, .tg-security-head, .role-modal__head),
html body :is(#px-add-modal, .newbase-modal, #inv-base-modal, #add-modal,
               #phone-auth-modal, #edit-profile-form-modal,
               #pick-bind-modal).modal.modal :is(.modal__head, .addw__header) {
  margin-bottom: 0 !important;
}

html body .modal :is(.modal__foot, .addw__actions, .modal__actions,
                     .tg-security-footer, .privacy-form__footer),
html body :is(#px-add-modal, .newbase-modal, #inv-base-modal, #settings-modal,
               #add-modal, #phone-auth-modal, #edit-profile-form-modal,
               #pick-bind-modal).modal.modal :is(.modal__foot, .addw__actions,
               .modal__actions) {
  margin-top: 0 !important;
}

/* Секция сразу под шапкой: 16px уже отданы её padding-bottom. */
html body .modal .modal__panel > :is(.modal__head, .edit-profile__head,
          .privacy-list__head, .tg-security-head, .role-modal__head) + *,
html body .modal .addw > .addw__header + *,
html body :is(#px-add-modal, .newbase-modal, #ub-import-modal, #inv-list-modal,
               #pc-numbers-modal, #srch-keywords-modal, #cc-material-modal,
               #msge-modal, #media-modal, #inv-base-modal, #schedule-modal,
               #actions-modal, #add-modal, #session-import-modal, #phone-auth-modal,
               #edit-profile-modal, #edit-profile-form-modal, #edit-privacy-modal,
               #edit-privacy-form-modal, #twofa-modal, #cloud-password-change-modal,
               #auto-delete-modal, #security-confirm-modal, #folder-modal, #role-modal,
               #bind-proxy-modal, #bind-proxy-preview-modal, #pick-bind-modal,
               #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor,
               #faq-modal, #help-modal, #support-modal, #whatsnew-modal,
               #lic-upgrade-modal, #lic-renew-modal, #lic-key-modal,
               #dlg-modal).modal.modal :is(.modal__panel, .addw)
               > :is(.modal__head, .addw__header, .edit-profile__head,
                     .privacy-list__head, .tg-security-head, .role-modal__head) + * {
  padding-top: 0 !important;
}

/* Секция вплотную перед подвалом: 16px отдаёт его padding-top. */
html body .modal :is(.modal__panel, .addw)
          > *:has(+ :is(.modal__foot, .addw__actions, .modal__actions,
                        .tg-security-footer, .privacy-form__footer)),
html body :is(#px-add-modal, .newbase-modal, #inv-list-modal,
               #pc-numbers-modal,
               #srch-keywords-modal, #cc-material-modal, #msge-modal,
               #media-modal, #inv-base-modal, #schedule-modal, #inv-run-modal,
               #add-modal, #session-import-modal, #phone-auth-modal,
               #edit-profile-form-modal, #edit-privacy-form-modal, #twofa-modal,
               #cloud-password-change-modal, #auto-delete-modal, #security-confirm-modal,
               #folder-modal, #role-modal, #bind-proxy-modal, #bind-proxy-preview-modal,
               #pick-bind-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal,
               #ar-editor, #faq-modal, #help-modal, #support-modal, #whatsnew-modal,
               #lic-upgrade-modal, #lic-renew-modal, #lic-key-modal,
               #dlg-modal).modal.modal :is(.modal__panel, .addw)
               > *:has(+ :is(.modal__foot, .addw__actions, .modal__actions,
                             .tg-security-footer, .privacy-form__footer)) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Первая ВИДИМАЯ секция под шапкой. Соседний селектор `+` не умеет
   перешагивать display:none, а подзаголовок в этих окнах бывает скрыт —
   тогда 16px шапки складывались бы с padding-top следующей секции. */
html body #edit-profile-modal.modal.modal .edit-profile__picker {
  padding-top: 0 !important;
}

/* Окно без подвала: нижнюю сторону рамки держит последняя секция. */
html body .modal :is(.modal__panel, .addw)
          > *:last-child:not(.modal__head, .addw__header, .edit-profile__head,
                             .privacy-list__head, .tg-security-head, .role-modal__head,
                             .modal__foot, .addw__actions, .modal__actions,
                             .tg-security-footer, .privacy-form__footer),
html body :is(#ub-import-modal, #actions-modal, #edit-profile-modal,
               #edit-privacy-modal).modal.modal :is(.modal__panel, .addw)
               > *:last-child {
  padding-bottom: var(--modal-pad-b) !important;
}

/* ---- Подвкладки «Ограничений» (Все / Временные / Вечные) ----
   Вид ограничения уточняет уже выбранную вкладку, а не заводит новую
   категорию, поэтому строка не повторяет 56-пиксельные табы: это чипы
   .picker-chip — тот же канон, что #am-filter-chips и #px-filter-pop. */
html body .px-subtabs,
html body #am-subtabs,
html body .view-am .am-table-shell > #am-subtabs {
  display: none !important;
}
html body .view-am .am-table-shell > #am-subtabs[hidden] {
  display: none !important;
}
html body .view-am .am-table-shell > #am-subtabs .picker-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border, #e6e9ef) !important;
  border-radius: 999px !important;
  background: var(--bg-app, #f7f8fb) !important;
  color: var(--text) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all var(--motion-state) var(--motion-ease) !important;
}
html body .view-am .am-table-shell > #am-subtabs .picker-chip:hover {
  border-color: rgba(var(--am-accent-rgb, 37, 99, 235), 0.4) !important;
  color: var(--am-accent, #2563eb) !important;
}
html body .view-am .am-table-shell > #am-subtabs .picker-chip.is-active {
  border-color: var(--am-accent, #2563eb) !important;
  background: var(--am-soft, rgba(37, 99, 235, 0.10)) !important;
  color: var(--am-accent, #2563eb) !important;
}

/* ═══════════════════════════════════════════════════════════════
   СТРАНИЦА ЗАПУСКА (.srch-page) — общий канон по addw
   ───────────────────────────────────────────────────────────────
   Один набор правил на все экраны запуска модуля. Класс вешается на
   <main>: сейчас это «Поиск групп и каналов» (#view-searcher) и
   «Парсинг аудитории» (#view-parser). Раньше блок был прибит к
   #view-searcher, и второму модулю канон было не занять — отсюда
   и переезд на класс. Внутри правил id больше нет: всё, что верно
   для одной страницы запуска, верно для любой.

   Hero убран: название модуля уже стоит в сайдбаре. Экран начинается
   сразу с работы — карточки-секции по канону списочных таблиц: белая
   поверхность БЕЗ внешней обводки и тени, скругление 16px, Google
   Sans, акцент #0b57d0.

   Форма отделяет кнопку от поля, как в настройках аккаунта Google:
   кнопки — пилюли r20 высотой 40px, кнопки выбора — сегменты Google
   (выбранный залит #d3e3fd), а инпуты и степперы — прямоугольные
   outlined-поля r8 высотой 37px с обводкой #c4c7c5. Описания и
   подписи — 14/20 серым #444746, шрифт элементов — 14px.
   Фиксированной ширины у режима поиска нет: подписи разной длины
   обязаны помещаться целиком.
   ═══════════════════════════════════════════════════════════════ */
html body .srch-page,
html body.theme-dark .srch-page {
  --srch-ink: #1f1f1f;
  --srch-ink-mute: #444746;
  --srch-outline: #c4c7c5;
  /* Обводка полей ввода — та же, что у чипов и плиток: на экране один
     контур, и поле не выделяется тяжелее соседей. Тёмная #747775 никуда
     не делась, но досталась наведению и фокусу — тому состоянию, куда
     пользователь уже целится. */
  --srch-field-line: var(--srch-outline);
  --srch-field-line-hover: #747775;
  /* Описания и подписи: 14/20 серым #444746 — вторичный текст Google. */
  --srch-desc: #444746;
  /* Ступень ниже подписей — строке расчёта под полем. Её никто не вписывал,
     и читают её после подписи, а не вместо неё: тон тише ровно настолько,
     чтобы разница читалась, но текст оставался текстом. */
  --srch-note: #5f6368;
  --srch-accent: #0b57d0;
  --srch-accent-soft: #d3e3fd;
  --srch-hover: #f1f3f4;
  font-family: var(--app-font) !important;
}
html body .srch-page:not([hidden]),
html body.theme-dark .srch-page:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ── Поверхности секций ────────────────────────────────────────
   Карточки живут по канону списочных таблиц: белая плита без
   внешней обводки и тени, скругление 16px. Границу карточке
   задаёт только фон страницы — так же, как таблицам аккаунтов,
   прокси и баз. */
html body .srch-page .cln-io,
html body.theme-dark .srch-page .cln-io,
html body .srch-page .prs-advanced,
html body.theme-dark .srch-page .prs-advanced,
html body .srch-page .prs-cta,
html body.theme-dark .srch-page .prs-cta {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html body .srch-page .prs-advanced > summary,
html body.theme-dark .srch-page .prs-advanced > summary {
  padding: 16px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--srch-ink) !important;
}
/* Значок «Дополнительных настроек» — инлайновый svg без width/height: без размера
   браузер рисует его на 300px и заголовок раздувается на полэкрана. Размер
   раздавали правила, заскопленные под .view-parser и .view-cloner, и каждая
   новая страница запуска напарывалась на это заново. Раздаём здесь — по
   классу канона, а не по имени модуля. */
html body .srch-page .prs-advanced > summary svg,
html body.theme-dark .srch-page .prs-advanced > summary svg {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  vertical-align: middle !important;
}
html body .srch-page .prs-advanced > summary > span:first-child,
html body.theme-dark .srch-page .prs-advanced > summary > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

/* ── Заголовок модуля: живёт в карточке .cln-io над пилюлями ── */
html body .srch-page .cln-adv-grid,
html body.theme-dark .srch-page .cln-adv-grid {
  gap: 20px !important;
  padding: 4px 20px 20px !important;
}
html body .srch-page .inv-field__label,
html body.theme-dark .srch-page .inv-field__label {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--srch-desc) !important;
  user-select: none !important;
}

/* ── Шапка модуля: заголовок слева, выход к найденному справа ── */
/* ═══════════════════════════════════════════════════════════════
   ВСТУПИТЕЛЬНЫЙ БЛОК МОДУЛЯ (.mod-intro) — общий шаблон
   ───────────────────────────────────────────────────────────────
   Лицо модуля: заголовок, описание, одно действие и рисунок. Стоит
   первым и отличается от рабочих карточек намеренно — залит своим
   цветом и скруглён на 28px против 16px у карточек. За счёт этого
   модули различаются с первого взгляда, а рабочая область у всех
   остаётся одинаковой.

   Новый модуль повторяет разметку и задаёт три переменные:
     --mod-tint   — заливка блока (светлый тон модуля);
     --mod-accent — цвет действия и рисунка;
     --mod-ink    — цвет заголовка.
   Рисунок — инлайновый svg внутри .mod-intro__art, свой у каждого.
   ═══════════════════════════════════════════════════════════════ */
html body .mod-intro,
html body.theme-dark .mod-intro {
  --mod-tint: #e8f0fe;
  --mod-accent: #0b57d0;
  --mod-ink: #041e49;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 24px 28px !important;
  background: var(--mod-tint) !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  font-family: var(--app-font) !important;
  overflow: hidden !important;
}
html body .mod-intro__text,
html body.theme-dark .mod-intro__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html body .mod-intro__title,
html body.theme-dark .mod-intro__title {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--mod-ink) !important;
}
html body .mod-intro__sub,
html body.theme-dark .mod-intro__sub {
  margin: 0 !important;
  max-width: 64ch !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--mod-ink) !important;
  opacity: .82 !important;
}
/* Действия блока: главное — выход к результату модуля, рядом второе,
   попроще. Белая пилюля на заливке читается как кнопка и не спорит с
   синей «Запустить» внизу экрана. */
html body .mod-intro__art,
html body.theme-dark .mod-intro__art {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  /* Рисунок набирают в currentColor: так один и тот же svg попадает в
     тон любого модуля, а цвет остаётся в одной переменной с действием. */
  color: var(--mod-accent) !important;
}
html body .mod-intro__art svg,
html body.theme-dark .mod-intro__art svg {
  display: block !important;
  width: 148px !important;
  height: 108px !important;
}
/* Рисунок — украшение: на узком окне он уходит первым, текст остаётся. */
@media (max-width: 900px) {
  html body .mod-intro,
  html body.theme-dark .mod-intro { padding: 20px !important; }
  html body .mod-intro__art,
  html body.theme-dark .mod-intro__art { display: none !important; }
}

/* ── Два ввода: «Что ищем» и «Чем ищем» ────────────────────────
   Обе карточки — главные на экране, поэтому стоят рядом и занимают
   ровно половину ширины. Пока ввод пуст, кнопка залита акцентом:
   она и есть подсказка, что делать дальше. */
html body .srch-page .srch-inputs,
html body.theme-dark .srch-page .srch-inputs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
/* Вводов не всегда два. У инвайта их три (куда, кого, чем) и они стоят в
   ряд; у инвайта админами добавляется главный админ, и четыре карточки
   ложатся сеткой 2×2 — в один ряд они были бы уже, чем их содержимое. */
html body .srch-page .srch-inputs--3,
html body.theme-dark .srch-page .srch-inputs--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html body .srch-page .srch-inputs--4,
html body.theme-dark .srch-page .srch-inputs--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Пилюля ввода может быть завёрнута в обёртку меню (.bc-recipients):
   тогда к низу карточки прижимается обёртка, а не сама кнопка. */
html body .srch-page .srch-input > .bc-recipients,
html body.theme-dark .srch-page .srch-input > .bc-recipients {
  margin-top: auto !important;
  max-width: 100% !important;
}
html body .srch-page .srch-input > .bc-recipients > .srch-input__btn,
html body.theme-dark .srch-page .srch-input > .bc-recipients > .srch-input__btn {
  margin-top: 0 !important;
}

/* Числовые поля внутри вопроса карточки: у каждого своя подпись,
   мельче общей (13/18 против 14/20), — иначе вопрос и его части
   выглядят одинаково важными.

   Столбик — раскладка по умолчанию: «Всего за прогон», под ним «С одного
   аккаунта» (чекер номеров), а следующим вопросом карточки — пауза. Так
   лимиты читаются одной колонкой сверху вниз вместе с паузой, а не
   ломаются на ряд из двух и отдельную строку под ним.

   У инвайта, инвайта админами и рассылки по ЛС этой обёртки больше нет:
   каждый лимит там вырос в собственный вопрос карточки («Сколько
   приглашаем/отправляем всего» / «…с одного аккаунта») с подписью 14/20,
   своим тултипом и единицей за полем. */
html body .srch-page .srch-nums,
html body.theme-dark .srch-page .srch-nums {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
/* Ширина поля — по подписи, а не по вводу: в столбике поле сжималось до
   88px ввода, и «С одного аккаунта» переносилось на вторую строку. */
html body .srch-page .srch-nums .inv-field,
html body.theme-dark .srch-page .srch-nums .inv-field {
  width: max-content !important;
  max-width: none !important;
  gap: 6px !important;
}
html body .srch-page .srch-nums .inv-field__label,
html body.theme-dark .srch-page .srch-nums .inv-field__label {
  font-size: 13px !important;
  line-height: 18px !important;
}
/* Одиночному лимиту (.inv-limit-single — .cln-range без второй половины
   диапазона) своей ширины не нужно: канон полей ниже задаёт всем
   .cln-range .inv-input--sm те же 88px. Правило с двумя id инвайта, которое
   пыталось это повторить, канон перебивал !important, и убрать его можно
   было без последствий. */

/* Строка расчёта под лимитами: цифры должны сходиться с настройками ещё
   до запуска. Пустую строку не показываем — до загрузки состояния текста
   в ней нет.

   Расчёт — не подпись поля, а вывод из уже введённых чисел, и глаз обязан
   различить их раньше, чем прочтёт. Отделяем двумя лёгкими приёмами: значок
   ⓘ перед текстом и тон на ступень тише подписей (--srch-note против
   --srch-desc). Ни рамки, ни плашки: карточка набрана из полей, и любой фон
   утяжелил бы её сильнее, чем строка того стоит.

   Значок — маской, а не картинкой: цвет берётся из currentColor, поэтому
   янтарная, зелёная и красная разновидности строки красят его вместе с
   текстом, одним объявлением на все. Висячий отступ (padding + отрицательный
   text-indent) держит перенос под первым словом, а не под значком.

   display строке не задаём намеренно: `:empty` гасит её через display:none,
   а #rst-unfreeze-warn прячется атрибутом hidden — своя раскладка перебила
   бы обоих. Значок для этого и сделан строчным. */
html body .srch-page .srch-plan-note,
html body.theme-dark .srch-page .srch-plan-note {
  margin: 0 !important;
  padding-left: 20px !important;
  text-indent: -20px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--srch-note) !important;
}
html body .srch-page .srch-plan-note::before,
html body.theme-dark .srch-page .srch-plan-note::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
  vertical-align: -2px !important;
  text-indent: 0 !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("img/plan-note-info.svg") !important;
  mask-image: url("img/plan-note-info.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 14px 14px !important;
  mask-size: 14px 14px !important;
}
html body .srch-page .srch-plan-note:empty,
html body.theme-dark .srch-page .srch-plan-note:empty {
  display: none !important;
}
/* Та же строка, но про оговорку, а не про расчёт: у снятия ограничений ею
   сказано, что заявку на разморозку модуль пока не подаёт. Цвет — янтарь
   предупреждений, геометрия общая: это по-прежнему подпись под полем. */
html body .srch-page .srch-plan-note--warn,
html body.theme-dark .srch-page .srch-plan-note--warn {
  color: #b45309 !important;
}
/* Та же строка, но с ответом сервиса, а не с расчётом и не с оговоркой: у
   снятия ограничений ею говорит 2captcha — на связи он и сколько на нём
   денег. Проверка отвечает тремя исходами (работает / работает, но не на
   что / не работает), и цвет — единственное, что отличает их с одного
   взгляда: текст в строке один и тот же по месту и по размеру. */
html body .srch-page .srch-plan-note--ok,
html body.theme-dark .srch-page .srch-plan-note--ok {
  color: #1e8e3e !important;
}
html body .srch-page .srch-plan-note--error,
html body.theme-dark .srch-page .srch-plan-note--error {
  color: #d93025 !important;
}
html body .srch-page .srch-input,
html body.theme-dark .srch-page .srch-input,
html body .srch-page .srch-card,
html body.theme-dark .srch-page .srch-card {
  margin: 0 !important;
  padding: 16px 20px 20px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html body .srch-page .srch-input,
html body.theme-dark .srch-page .srch-input {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
html body .srch-page .srch-input__head,
html body.theme-dark .srch-page .srch-input__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  color: var(--srch-desc) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
html body .srch-page .srch-input__ico,
html body.theme-dark .srch-page .srch-input__ico {
  display: inline-flex !important;
  flex: none !important;
  color: var(--srch-accent) !important;
}
html body .srch-page .srch-input__ico svg,
html body.theme-dark .srch-page .srch-input__ico svg {
  width: 18px !important;
  height: 18px !important;
}
html body .srch-page .srch-input__label,
html body.theme-dark .srch-page .srch-input__label {
  flex: 1 1 auto !important;
}
/* Галочка «этот ввод заполнен» — единственный знак состояния карточки. */
html body .srch-page .srch-input__done,
html body.theme-dark .srch-page .srch-input__done {
  display: none !important;
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background: var(--srch-accent) !important;
  color: #ffffff !important;
}
html body .srch-page .srch-input.is-filled .srch-input__done,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__done {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .srch-page .srch-input__done svg,
html body.theme-dark .srch-page .srch-input__done svg {
  width: 14px !important;
  height: 14px !important;
}
html body .srch-page .srch-input__value,
html body.theme-dark .srch-page .srch-input__value {
  margin: 8px 0 0 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  color: #80868b !important;
}
html body .srch-page .srch-input.is-filled .srch-input__value,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__value {
  color: var(--srch-ink) !important;
}
/* Значением бывает не только счёт («28 ключей»), но и ссылка на группу —
   сплошная строка без пробелов. Без переноса она вылезала бы за карточку,
   поэтому рвём её по любому месту, а не только по пробелам. */
html body .srch-page .srch-input__value,
html body.theme-dark .srch-page .srch-input__value {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
html body .srch-page .srch-input__preview,
html body.theme-dark .srch-page .srch-input__preview {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 10px 0 14px !important;
}
html body .srch-page .srch-input__hint,
html body.theme-dark .srch-page .srch-input__hint {
  font-size: 13px !important;
  line-height: 18px !important;
  color: #80868b !important;
}
html body .srch-page .srch-input__chip,
html body.theme-dark .srch-page .srch-input__chip {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  height: 26px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  background: var(--srch-hover) !important;
  color: var(--srch-ink-mute) !important;
  font-size: 12px !important;
  line-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Тип сбора внутри карточки «Что ищем»: подпись и три мелких
   переключателя. Ростом ниже кнопок (30px против 40px) — это уточнение
   к ключам, а не самостоятельное действие. */
html body .srch-page .srch-input__types,
html body.theme-dark .srch-page .srch-input__types {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e6e8ee !important;
}
html body .srch-page .srch-input__types-label,
html body.theme-dark .srch-page .srch-input__types-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--srch-desc) !important;
  user-select: none !important;
}
/* Пилюли в карточке может не быть: у рассылки по ЛС источники «Контакты
   аккаунтов» и «Открытые диалоги» ничего не спрашивают, и выбирать там
   нечего. Тогда нижним элементом карточки становится ряд чипов — он и
   встаёт на место кнопки, а не повисает под превью. */
html body .srch-page .srch-input:has(> .bc-recipients[hidden]) > .srch-input__types,
html body.theme-dark .srch-page .srch-input:has(> .bc-recipients[hidden]) > .srch-input__types {
  margin: auto 0 0 !important;
}
html body .srch-page .srch-input__btn,
html body.theme-dark .srch-page .srch-input__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin-top: auto !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--srch-accent) !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .srch-input__btn:hover,
html body.theme-dark .srch-page .srch-input__btn:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}
html body .srch-page .srch-input__btn:focus-visible,
html body.theme-dark .srch-page .srch-input__btn:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 2px !important;
}
/* Заполненный ввод больше не зовёт к себе: кнопка становится обычной. */
html body .srch-page .srch-input.is-filled .srch-input__btn,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__btn {
  border: 1px solid var(--srch-outline) !important;
  background: #ffffff !important;
  color: var(--srch-ink) !important;
}
html body .srch-page .srch-input.is-filled .srch-input__btn:hover,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__btn:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  box-shadow: none !important;
}
html body .srch-page .srch-input__cnt,
html body.theme-dark .srch-page .srch-input__cnt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}
html body .srch-page .srch-input__cnt[hidden],
html body.theme-dark .srch-page .srch-input__cnt[hidden] {
  display: none !important;
}
html body .srch-page .srch-input.is-filled .srch-input__cnt,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__cnt {
  background: var(--srch-hover) !important;
  color: #5f6368 !important;
}

/* ── Ввод-строка вместо пилюли: целевая группа ──────────────────
   «Целевая группа» — единственный ответ инвайта и инвайта админами,
   который набирают руками, а не выбирают из списка. Окна на один этот
   вопрос нет: поле стоит в самой карточке и занимает место пилюли —
   `margin-top: auto` прижимает его к низу, и ряд вводов по-прежнему
   заканчивается одним рядом органов управления высотой 40px.

   Форма поля — общая форма страницы запуска: во всю ширину, 40px, r8,
   обводка #747775. Свою старую (320px, 42px, r10) полю задаёт style.css
   ещё со времён, когда оно стояло на экране отдельной строкой, поэтому
   перебиваем её здесь целиком. Строки-значения 22px у такой карточки
   нет — значение видно в самом поле. */
html body .srch-page .srch-input__field,
html body.theme-dark .srch-page .srch-input__field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: auto !important;
  flex: none !important;
  gap: 0 !important;
}
html body .srch-page .srch-input__field .inv-target-input-wrap,
html body.theme-dark .srch-page .srch-input__field .inv-target-input-wrap {
  width: 100% !important;
}
html body .srch-page .srch-input__field .inv-target-input,
html body.theme-dark .srch-page .srch-input__field .inv-target-input {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px 0 40px !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body .srch-page .srch-input__field .inv-target-input:focus,
html body .srch-page .srch-input__field .inv-target-input:focus-visible,
html body.theme-dark .srch-page .srch-input__field .inv-target-input:focus,
html body.theme-dark .srch-page .srch-input__field .inv-target-input:focus-visible {
  border-color: #0b57d0 !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
  outline: none !important;
}
html body .srch-page .srch-input__field .inv-target-input-icon,
html body.theme-dark .srch-page .srch-input__field .inv-target-input-icon {
  left: 12px !important;
  color: #0b57d0 !important;
}
html body .srch-page .srch-input__field .inv-target-input-icon svg,
html body.theme-dark .srch-page .srch-input__field .inv-target-input-icon svg {
  width: 18px !important;
  height: 18px !important;
}
/* Подсказки из истории раскрываются под полем и выходят за карточку —
   как любое раскрывающееся окно программы. Потолок `min(260px, 40vh)`:
   260px — привычная высота списка, 40vh подбирает её на низких окнах,
   чтобы список целиком оставался на виду. */
html body .srch-page .srch-input__field .inv-chat-suggestions,
html body.theme-dark .srch-page .srch-input__field .inv-chat-suggestions {
  right: 0 !important;
  max-height: min(260px, 40vh) !important;
}

/* ── Что собирать и глубина: два вопроса в одной карточке ────── */
html body .srch-page .srch-what,
html body.theme-dark .srch-page .srch-what {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
html body .srch-page .srch-what__field,
html body.theme-dark .srch-page .srch-what__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* Вопрос карточки бывает не ко всякому режиму: «Откуда берём чаты» есть
   только у отписки. Канон раздаёт display через !important, и атрибут
   hidden без своего правила его бы не перебил — прятать поле было бы
   нечем. То же и с карточкой-вводом: у подписок их две на один слот
   сетки, и лишняя обязана уходить, а не сжимать соседнюю. И то же с
   целой карточкой: «Как разбираем» у конвертера касается только импорта
   и на обратном направлении уходит с экрана вся. И с пилюлей выбора
   получателей: у рассылки по ЛС она нужна только источнику «Базы и
   список» — контакты и открытые диалоги берутся с аккаунтов сами.

   Кнопок рамки запуска в наборе больше нет: прятать там было нечего с тех
   пор, как «Остановить» у автоответчика уехало в диспетчер задач. */
html body .srch-page .srch-what__field[hidden],
html body.theme-dark .srch-page .srch-what__field[hidden],
html body .srch-page .srch-input[hidden],
html body.theme-dark .srch-page .srch-input[hidden],
html body .srch-page .srch-card[hidden],
html body.theme-dark .srch-page .srch-card[hidden],
html body .srch-page .srch-input > .bc-recipients[hidden],
html body.theme-dark .srch-page .srch-input > .bc-recipients[hidden],
/* Чип канона раздаёт себе display через !important, поэтому и ему нужно своё
   правило: без него [hidden] на чипе не действует вовсе. Прячут чип там, где
   настройка к режиму не относится (подписочные оговорки в отписке). */
html body .srch-page .srch-type[hidden],
html body.theme-dark .srch-page .srch-type[hidden] {
  display: none !important;
}
html body .srch-page .srch-what__label,
html body.theme-dark .srch-page .srch-what__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--srch-desc) !important;
  user-select: none !important;
}

/* Три независимых переключателя-галочки. */
html body .srch-page .srch-types,
html body.theme-dark .srch-page .srch-types {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html body .srch-page .srch-type,
html body.theme-dark .srch-page .srch-type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 12px 0 9px !important;
  border: 1px solid var(--srch-outline) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  color: var(--srch-ink-mute) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease),
              color var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .srch-type:hover,
html body.theme-dark .srch-page .srch-type:hover {
  background: var(--srch-hover) !important;
}
/* Слева от подписи всегда стоит свой значок чипа — он и показывает
   состояние, меняя цвет вместе с чипом. Галочку вместо значка не
   подставляем: значок говорит, ЧТО это за чип, и подменять его на
   «выбрано» значит терять опознание там, где чипов в ряд пять.
   Цвет наследуется от чипа, поэтому отдельного правила на включённый
   значок нет. */
html body .srch-page .srch-type__box,
html body.theme-dark .srch-page .srch-type__box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
}
html body .srch-page .srch-type__box svg,
html body.theme-dark .srch-page .srch-type__box svg {
  width: 16px !important;
  height: 16px !important;
}
/* Чип без подписи: у эффекта Telegram нет названия — только эмодзи, и оно
   стоит вместо значка. Подпись рядом была бы одним и тем же словом двадцать
   раз подряд, поэтому её нет, а имя эффекта живёт в aria-label и подсказке. */
html body .srch-page .srch-type--emoji,
html body.theme-dark .srch-page .srch-type--emoji {
  padding: 0 8px !important;
}
/* Размер эмодзи в чипе — 20 px, как в сетках выбора, и по той же причине:
   клетка листа вдвое больше показа, и любой другой размер браузер получает
   некратным уменьшением — то есть рябью. Коробка значка растёт с 16 до 20
   вслед за ним: 15 px картинка была бы и мельче остальных эмодзи, и грязнее
   их. См. CELL в scripts/make_emoji_sheet.py. */
html body .srch-page .srch-type--emoji .srch-type__box,
html body.theme-dark .srch-page .srch-type--emoji .srch-type__box {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  line-height: 20px !important;
}
/* Чип без значка: набор, в котором картинка ничего не опознаёт. Такие —
   ступени одной шкалы («10 сек», «1 мин», «1 час») и права канала с чата:
   рисовать шестнадцать разных значков для «Банить участников» и «Закреплять
   сообщения» значит выдумывать различия там, где их нет, а один значок на
   всех не различает ничего. Остаётся подпись, и подложка чипа выравнивается
   под неё — без места под значок слева. */
html body .srch-page .srch-type--plain,
html body.theme-dark .srch-page .srch-type--plain {
  padding: 0 14px !important;
}
/* Счётчик внутри чипа: им заканчиваются чипы-вложения («Файлы 3»,
   «Ссылки 2»). Отдельного цвета у него нет — он часть чипа и гаснет
   вместе с ним; ноль прячем, иначе пустой чип выглядит заполненным. */
html body .srch-page .srch-type__cnt,
html body.theme-dark .srch-page .srch-type__cnt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-left: 2px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  background: rgba(31, 31, 31, 0.08) !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}
html body .srch-page .srch-type.is-on .srch-type__cnt,
html body.theme-dark .srch-page .srch-type.is-on .srch-type__cnt {
  background: rgba(11, 87, 208, 0.16) !important;
}
html body .srch-page .srch-type__cnt[hidden],
html body.theme-dark .srch-page .srch-type__cnt[hidden] {
  display: none !important;
}
html body .srch-page .srch-type.is-on,
html body.theme-dark .srch-page .srch-type.is-on {
  background: var(--srch-accent-soft) !important;
  border-color: var(--srch-accent-soft) !important;
  color: var(--srch-accent) !important;
}
html body .srch-page .srch-type:focus-visible,
html body.theme-dark .srch-page .srch-type:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 2px !important;
}
/* Чип, которому в выбранной базе нечего собирать. Не запрещаем — включить
   можно, — но говорим заранее, что прогон по нему пройдёт вхолостую.
   Приглушение читается и на включённом чипе: он остаётся залитым. */
html body .srch-page .srch-type.is-dead,
html body.theme-dark .srch-page .srch-type.is-dead {
  opacity: 0.45 !important;
}
/* То же приглушение, но для поля целиком: у рассылки по группам выдержка
   после вступления и часы окна активности имеют смысл только при включённом
   рядом переключателе. Запрещать их нельзя — значение остаётся настоящим и
   пригодится, как только переключатель вернут; сказать, что сейчас оно ни на
   что не влияет, — нужно. Прозрачность та же, что у чипа: сообщение одно. */
html body .srch-page .srch-what__field.is-dead,
html body.theme-dark .srch-page .srch-what__field.is-dead,
html body .srch-page .cln-range.is-dead,
html body.theme-dark .srch-page .cln-range.is-dead {
  opacity: 0.45 !important;
}

/* Глубина — две плитки: у каждой сказано, чем она обернётся. */
html body .srch-page .srch-depth,
html body.theme-dark .srch-page .srch-depth {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html body .srch-page .srch-depth__opt,
html body.theme-dark .srch-page .srch-depth__opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 12px 16px 14px !important;
  border: 1px solid var(--srch-outline) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .srch-depth__opt:hover,
html body.theme-dark .srch-page .srch-depth__opt:hover {
  background: var(--srch-hover) !important;
}
html body .srch-page .srch-depth__title,
html body.theme-dark .srch-page .srch-depth__title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--srch-ink) !important;
}
html body .srch-page .srch-depth__sub,
html body.theme-dark .srch-page .srch-depth__sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color: var(--srch-desc) !important;
}
html body .srch-page .srch-depth__opt.is-active,
html body.theme-dark .srch-page .srch-depth__opt.is-active {
  border-color: var(--srch-accent) !important;
  box-shadow: inset 0 0 0 1px var(--srch-accent) !important;
  background: #f6f9fe !important;
}
html body .srch-page .srch-depth__opt.is-active .srch-depth__title,
html body.theme-dark .srch-page .srch-depth__opt.is-active .srch-depth__title {
  color: var(--srch-accent) !important;
}
html body .srch-page .srch-depth__opt:focus-visible,
html body.theme-dark .srch-page .srch-depth__opt:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 2px !important;
}
/* Три варианта в ряд (формат записи у парсера). Плитка узкая, но
   подпись у неё короче, чем у режима поиска, и переносится целиком. */
html body .srch-page .srch-depth--3,
html body.theme-dark .srch-page .srch-depth--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Стрелка аккордеона одна и рисуется разметкой (.prs-advanced__chev).
   У парсера своя досталась от ::after в style.css — с ней стрелок было
   бы две. Гасим: на странице запуска источник стрелки один. */
html body .srch-page .prs-advanced > summary::after,
html body.theme-dark .srch-page .prs-advanced > summary::after {
  content: none !important;
}
html body .srch-page .prs-advanced__chev,
html body.theme-dark .srch-page .prs-advanced__chev {
  color: var(--srch-desc) !important;
  opacity: 1 !important;
}

/* ── Дополнительные настройки: значения видны в свёрнутом заголовке ──── */
html body .srch-page .srch-fine__sum,
html body.theme-dark .srch-page .srch-fine__sum {
  margin-left: 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--srch-desc) !important;
}

@media (max-width: 900px) {
  html body .srch-page .srch-inputs,
  html body.theme-dark .srch-page .srch-inputs,
  html body .srch-page .srch-depth,
  html body.theme-dark .srch-page .srch-depth {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Инпуты: outlined-поля Google (r8) и степперы ───────────────
   Поле ввода — прямоугольник со скруглением 8px и обводкой
   #c4c7c5. Пилюли остаются за кнопками: форма и отличает поле от
   кнопки.

   Размер поля меряется не само по себе, а по соседям. Рядом стоят
   чипы 30px/13px и плитки с той же светлой обводкой, и поле на
   40px с тёмной рамкой и текстом 14/500 читалось тяжелее всего на
   экране — вровень с кнопкой «Запустить», хотя это ввод двух цифр.
   Поэтому высота 37px, шрифт 13px и общий контур: ряд «чипы → поле
   → плитки» идёт одной линией веса. Тёмная обводка ушла на hover и
   фокус — там она и нужна, чтобы было видно, куда пишешь. */
html body .srch-page .prs-stepper,
html body.theme-dark .srch-page .prs-stepper {
  width: 132px !important;
  height: 37px !important;
  padding: 0 4px !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--srch-field-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .prs-stepper:hover,
html body.theme-dark .srch-page .prs-stepper:hover {
  border-color: var(--srch-field-line-hover) !important;
}
html body .srch-page .prs-stepper button,
html body.theme-dark .srch-page .prs-stepper button {
  width: 31px !important;
  height: 31px !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--srch-accent) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .prs-stepper button:hover,
html body.theme-dark .srch-page .prs-stepper button:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  box-shadow: none !important;
}
html body .srch-page .prs-stepper input,
html body.theme-dark .srch-page .prs-stepper input {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--srch-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
html body .srch-page .prs-stepper:focus-within,
html body.theme-dark .srch-page .prs-stepper:focus-within {
  border-color: var(--srch-accent) !important;
  box-shadow: inset 0 0 0 1px var(--srch-accent) !important;
}
html body .srch-page .cln-range,
html body.theme-dark .srch-page .cln-range {
  gap: 8px !important;
}
/* Ширина держится по самому длинному значению, а не по «на глаз»: у
   парсера диапазон онлайна по умолчанию стоит 0–99999, и на 72px
   пять цифр обрезались. */
html body .srch-page .cln-range .inv-input--sm,
html body.theme-dark .srch-page .cln-range .inv-input--sm {
  width: 80px !important;
  height: 37px !important;
  padding: 0 10px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid var(--srch-field-line) !important;
  border-radius: 8px !important;
  color: var(--srch-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .cln-range .inv-input--sm:hover,
html body.theme-dark .srch-page .cln-range .inv-input--sm:hover {
  border-color: var(--srch-field-line-hover) !important;
}
html body .srch-page .cln-range .inv-input--sm:focus,
html body.theme-dark .srch-page .cln-range .inv-input--sm:focus {
  border-color: var(--srch-accent) !important;
  box-shadow: inset 0 0 0 1px var(--srch-accent) !important;
  outline: none !important;
}
html body .srch-page .cln-range__sep,
html body.theme-dark .srch-page .cln-range__sep,
html body .srch-page .cln-range__suffix,
html body.theme-dark .srch-page .cln-range__suffix {
  color: var(--srch-desc) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

/* Строковое поле (замены ссылок у клонера, ключи у снятия ограничений) —
   тот же outlined-прямоугольник, что и числовые: страница запуска не знает
   двух видов полей. Ширину держим в пределах карточки: ключ и ссылка
   длинные, но растягивать поле на всю ширину экрана незачем. Правило
   одинаково работает и в дополнительных настройках, и в карточке вопроса — поле
   не меняет вид от того, в какой блок его положили. */
html body .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm),
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm),
html body .srch-page .srch-card .inv-input:not(.inv-input--sm),
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm) {
  width: 100% !important;
  max-width: 420px !important;
  height: 37px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 1px solid var(--srch-field-line) !important;
  border-radius: 8px !important;
  color: var(--srch-ink) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm):hover,
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm):hover,
html body .srch-page .srch-card .inv-input:not(.inv-input--sm):hover,
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm):hover {
  border-color: var(--srch-field-line-hover) !important;
}
html body .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm)::placeholder,
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm)::placeholder,
html body .srch-page .srch-card .inv-input:not(.inv-input--sm)::placeholder,
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm)::placeholder {
  color: #80868b !important;
}
html body .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm):focus,
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm):focus,
html body .srch-page .srch-card .inv-input:not(.inv-input--sm):focus,
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm):focus {
  border-color: var(--srch-accent) !important;
  box-shadow: inset 0 0 0 1px var(--srch-accent) !important;
  outline: none !important;
}

/* Поле ключа с кнопкой проверки. Ряд заведён под пару «поле + одно
   действие над ним» (ключ 2captcha у снятия ограничений) и держит ширину
   поля прежней: 420px поля + 8px зазор + 37px кнопки. Кнопка ростом с
   поле и с той же обводкой — пара читается одним элементом, а не полем и
   отдельно стоящей кнопкой. */
html body .srch-page .srch-key-row,
html body.theme-dark .srch-page .srch-key-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 465px !important;
}
/* Поле внутри ряда своей ширины не держит: её задаёт ряд, иначе 420px поля
   и 37px кнопки вместе вылезли бы за 465px ряда. */
html body .srch-page .srch-key-row .inv-input,
html body.theme-dark .srch-page .srch-key-row .inv-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html body .srch-page .srch-key-btn,
html body.theme-dark .srch-page .srch-key-btn {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 37px !important;
  height: 37px !important;
  padding: 0 !important;
  border: 1px solid var(--srch-field-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--srch-accent) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .srch-key-btn svg,
html body.theme-dark .srch-page .srch-key-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
}
html body .srch-page .srch-key-btn:hover:not(:disabled),
html body.theme-dark .srch-page .srch-key-btn:hover:not(:disabled) {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: var(--srch-field-line-hover) !important;
}
html body .srch-page .srch-key-btn:focus-visible,
html body.theme-dark .srch-page .srch-key-btn:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 2px !important;
}
/* Выключенная кнопка — не серая копия включённой: проверять нечего, пока
   поле пустое, и об этом же говорит строка под полем. */
html body .srch-page .srch-key-btn:disabled,
html body.theme-dark .srch-page .srch-key-btn:disabled {
  background: #ffffff !important;
  border-color: var(--srch-outline) !important;
  color: #9aa0a6 !important;
  cursor: default !important;
}
/* Оборот иконки на время запроса — тот же, что у кнопок «Обновить» в
   списочных таблицах (keyframes picker-refresh-spin в style.css). */
html body .srch-page .srch-key-btn.is-loading svg,
html body.theme-dark .srch-page .srch-key-btn.is-loading svg {
  animation: picker-refresh-spin 0.8s linear infinite !important;
}

/* Вход в список из карточки (у клонера — «Список замен»). Пилюля той же
   геометрии, что кнопки карточек-вводов (40px/r20), но белая с обводкой:
   это второстепенное действие и оно не должно спорить ни с синими
   кнопками вводов, ни с «Запустить» внизу экрана. */
html body .srch-page .cln-list-btn,
html body.theme-dark .srch-page .cln-list-btn {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid var(--srch-outline) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: var(--srch-ink) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .cln-list-btn:hover,
html body.theme-dark .srch-page .cln-list-btn:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: var(--srch-outline) !important;
  color: var(--srch-ink) !important;
}
html body .srch-page .cln-list-btn:focus-visible,
html body.theme-dark .srch-page .cln-list-btn:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 2px !important;
}
html body .srch-page .cln-list-btn svg,
html body.theme-dark .srch-page .cln-list-btn svg {
  color: var(--srch-accent) !important;
}
/* Счётчик строк — тот же бейдж, что у заполненной кнопки ввода. */
html body .srch-page .cln-list-btn b,
html body.theme-dark .srch-page .cln-list-btn b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: var(--srch-hover) !important;
  color: #5f6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}
html body .srch-page .cln-list-btn b[hidden],
html body.theme-dark .srch-page .cln-list-btn b[hidden] {
  display: none !important;
}
/* Заполненный список отмечен так же, как заполненный ввод, — залитым
   бейджем со счётом. Обводку не трогаем: пилюль в ряду бывает пять, и
   пять разных рамок читались бы как пять разных кнопок. */
html body .srch-page .cln-list-btn.is-filled b,
html body.theme-dark .srch-page .cln-list-btn.is-filled b {
  background: var(--srch-accent-soft) !important;
  color: var(--srch-accent) !important;
}
/* Список, которому в выбранном режиме нечего хранить (юзернеймы у
   приватного объекта). Не прячем — иначе ряд бы прыгал при смене типа, —
   но открыть нечего: причина живёт в подсказке кнопки. */
html body .srch-page .cln-list-btn:disabled,
html body.theme-dark .srch-page .cln-list-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: #ffffff !important;
}

/* Ряд входов в списки: несколько пилюль подряд там, где вопрос карточки
   отвечается не одним списком, а пятью (материалы создания чатов). Каждой
   пилюле своя ширина по подписи, перенос — по месту. */
html body .srch-page .srch-list-row,
html body.theme-dark .srch-page .srch-list-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .srch-page .srch-list-row .cln-list-btn,
html body.theme-dark .srch-page .srch-list-row .cln-list-btn {
  align-self: auto !important;
  padding: 0 16px !important;
}

/* ── Конвертер tdata ⇄ session: своё в пределах канона ──────────
   Ряд пилюль внизу карточки. Пилюлю ко дну прижимает margin-top: auto,
   и когда действий два, прижимать надо ряд, а не первую кнопку, —
   ровно так же канон поступает с обёрткой меню (.bc-recipients выше). */
html body .srch-page .tdc-actions,
html body.theme-dark .srch-page .tdc-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: auto !important;
}
html body .srch-page .tdc-actions > .srch-input__btn,
html body.theme-dark .srch-page .tdc-actions > .srch-input__btn,
html body .srch-page .tdc-actions > .cln-list-btn,
html body.theme-dark .srch-page .tdc-actions > .cln-list-btn {
  margin-top: 0 !important;
}
/* Ссылка-пилюля «Скачать архив» — та же геометрия, что у вторичной
   кнопки: у <a> нет ни своего шрифта кнопки, ни подчёркивания. */
html body .srch-page a.cln-list-btn,
html body.theme-dark .srch-page a.cln-list-btn {
  text-decoration: none !important;
}
html body .srch-page a.cln-list-btn[hidden],
html body.theme-dark .srch-page a.cln-list-btn[hidden] {
  display: none !important;
}
/* Перетаскивание принимает сама карточка-источник: отдельной пунктирной
   коробки на экране нет, и подсветка возникает ровно там, куда бросают. */
html body .srch-page .tdc-drop,
html body.theme-dark .srch-page .tdc-drop {
  transition: background-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .tdc-drop.is-drag,
html body.theme-dark .srch-page .tdc-drop.is-drag {
  background: #f6f9fe !important;
  box-shadow: inset 0 0 0 2px var(--srch-accent) !important;
}

/* ── Рамка запуска: небольшая, по центру ─────────────────────
   Запуск шёл липкой полосой во всю ширину колонки. В том же нижнем
   правом углу стоит панель «Активные задачи», и чтобы не накрыть
   кнопку, полоса отдавала панели свой правый край коридором —
   кнопка уезжала влево ровно в ту секунду, когда задачу запустили.
   Теперь запуск — небольшая рамка по центру колонки: до правого
   угла она не достаёт, уступать нечего, и коридор снят целиком
   (--tm-dock-lane / .has-dock-lane, см. app.js).

   Сама рамка — плитка по ширине содержимого: планировщик и кнопка.
   Скругление по высоте (56px = 8 + 40 + 8), тень — та же, что у
   раскрывающихся окон: рамка висит над прокручиваемым текстом и
   обязана от него отделяться, обводки канон карточкам не даёт.

   Заголовок и подпись остались в разметке — их считают update*Cta
   шестнадцати модулей, — но на экране их нет: сводку прогона и
   причину серой кнопки показывает подсказка самой кнопки
   (syncCtaHint в app.js).

   Стоит рамка внизу ЭКРАНА, а не там, где кончился текст модуля.
   Одной липкости для этого мало: sticky не даёт элементу уйти за
   нижний край, но вниз, к краю, его не двигает, — на коротком
   модуле (поиск, инвайт, чекер номеров) рамка так и висела посреди
   пустого экрана. Опускает её margin-top: auto: колонка .srch-page
   растянута на всю высоту окна, и всё свободное место уходит выше
   рамки. Нижний отступ страницы при этом равен зазору липкости —
   с общими 96px рамка вставала бы на 96px выше края и прыгала бы
   между «прилипла» и «встала на место». */
html body .srch-page:not([hidden]),
html body.theme-dark .srch-page:not([hidden]) {
  padding-bottom: 12px !important;
}
html body .srch-page .prs-cta,
html body.theme-dark .srch-page .prs-cta {
  margin-top: auto !important;
  align-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.18) !important;
}
html body .srch-page .prs-cta__text,
html body.theme-dark .srch-page .prs-cta__text {
  display: none !important;
}
html body .srch-page .prs-cta__actions,
html body.theme-dark .srch-page .prs-cta__actions {
  align-items: center !important;
  gap: 8px !important;
}
/* Планировщик — круглая иконка вровень с кнопкой. Класс, а не id:
   значок один и тот же в шести модулях, а соседний .btn--ghost
   «Остановить» у автоответчика — обычная кнопка с текстом. */
html body .srch-page .prs-cta__plan,
html body.theme-dark .srch-page .prs-cta__plan {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: var(--srch-accent) !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .prs-cta__plan:hover,
html body.theme-dark .srch-page .prs-cta__plan:hover {
  background: var(--srch-hover) !important;
}
/* Вторичная кнопка рамки — по канону addw: та же пилюля 40px/r20, что и
   основная, но синим текстом на прозрачном. Сейчас такая одна («Проверить
   админов» у инвайта админами), и в полосе её разнобой с основной кнопкой
   терялся — в тесной рамке 36px рядом с 40px видно сразу. Правило пишем на
   пару «рамка + вторичная», а не на id кнопки: следующая такая кнопка
   должна встать ровно без новой правки. Планировщик из набора исключён
   явно — он круглый значок, а не кнопка с подписью. */
html body .srch-page .prs-cta__actions .btn--ghost:not(.prs-cta__plan),
html body.theme-dark .srch-page .prs-cta__actions .btn--ghost:not(.prs-cta__plan) {
  height: 40px !important;
  min-height: 40px !important;
  min-width: 64px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: var(--srch-accent) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .prs-cta__actions .btn--ghost:not(.prs-cta__plan):hover,
html body.theme-dark .srch-page .prs-cta__actions .btn--ghost:not(.prs-cta__plan):hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: var(--srch-accent) !important;
}
/* Наведение делает ровно одно: чуть темнее фон за 100мс. Базовая
   .btn--primary:hover подсвечивает кнопку через filter: brightness(),
   а фильтр красит и текст, и фон, и делает это мгновенно, мимо
   перехода, — отсюда и мигание. Гасим фильтр в обоих состояниях. */
html body .srch-page .prs-cta__start,
html body.theme-dark .srch-page .prs-cta__start,
html body .srch-page .prs-cta__start:hover,
html body.theme-dark .srch-page .prs-cta__start:hover {
  filter: none !important;
}
html body .srch-page .prs-cta__start,
html body.theme-dark .srch-page .prs-cta__start {
  height: 40px !important;
  min-width: 64px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--srch-accent) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .prs-cta__start:hover:not([disabled]),
html body.theme-dark .srch-page .prs-cta__start:hover:not([disabled]) {
  background: #0a4fc0 !important;
  border-color: #0a4fc0 !important;
  box-shadow: none !important;
}
html body .srch-page .prs-cta__start:active:not([disabled]),
html body.theme-dark .srch-page .prs-cta__start:active:not([disabled]) {
  background: #083f9b !important;
}
html body .srch-page .prs-cta__start[disabled],
html body.theme-dark .srch-page .prs-cta__start[disabled] {
  background: rgba(31, 31, 31, 0.12) !important;
  color: rgba(31, 31, 31, 0.38) !important;
  box-shadow: none !important;
}

/* ── Общий редактор списка: содержимое ──────────────────────────
   Одно окно на «Список замен» клонера, пользователей и чаты инвайта
   и прочие построчные списки (openListModal). Внутри — пояснение,
   поле на всё окно и счётчик строк: пояснение равняем на лид окна
   «Ключевые слова» (14/20 #444746), зазоры даёт gap 12px тела, поэтому
   свои margin'ы строкам не нужны. */
html body #inv-list-modal .modal__hint,
html body.theme-dark #inv-list-modal .modal__hint {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
}

/* ── Окно выбора базы: содержимое ───────────────────────────────
   Разметка .prs-base-list → .prs-base-row живёт в окне «Куда пишем»
   групповой рассылки, поэтому правила написаны на классах, а окна
   перечислены в :is(). Новому окну с выбором базы — добавить id в :is(), а
   не привязывать правила к своему адресу: пока блок был написан на
   #prs-base-modal, вся разметка «Куда пишем» стояла без стиля.

   Сам парсер этих строк больше не рисует: с переходом на выбор нескольких
   баз его окно взяло строку пикера баз (.inv-base-row) — ту же, что у
   инвайтера, с чекбоксом. Своё за «Источниками» осталось только пустое
   состояние в коробе и подвал. */

html body :is(#prs-base-modal, #gc-base-modal) .prs-base-empty,
html body.theme-dark :is(#prs-base-modal, #gc-base-modal) .prs-base-empty {
  padding: 24px 12px !important;
  color: #444746 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
}
html body :is(#prs-base-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #ar-editor, #cc-material-modal, #pc-numbers-modal) .prs-base-field,
html body.theme-dark :is(#prs-base-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #ar-editor, #cc-material-modal, #pc-numbers-modal) .prs-base-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html body :is(#prs-base-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #ar-editor, #cc-material-modal, #pc-numbers-modal) .prs-base-field__label,
html body.theme-dark :is(#prs-base-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #ar-editor, #cc-material-modal, #pc-numbers-modal) .prs-base-field__label {
  color: #444746 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}




/* Окна главного админа больше нет: поле вернулось на страницу, в свою
   карточку, и форму ему задаёт общий канон `.srch-input__field` — тот же,
   что и полю целевой группы. Своих правил у него не осталось. */


/* ── Заглушка загрузки страницы поиска ──────────────────────────
   Страница показывается целиком и уже готовой: пока не приехали
   настройки и ключи, на месте карточек стоит заглушка, а живой
   разметки в кадре нет. Иначе видно, как на сегменты и пилюли
   «доезжают» заливки выбранного — те самые мигания.

   Мигание — задержка CSS-анимации (--motion-wait/--motion-pulse),
   таймеров в JS нет: атрибут data-loading снимается один раз, когда
   всё применено (loadSearcherView). Полосы переиспользуют канон
   .app-skel__bar, блоки-элементы повторяют его анимацию. */
html body .srch-page[data-loading] > :not(.srch-skel),
html body.theme-dark .srch-page[data-loading] > :not(.srch-skel) {
  display: none !important;
}
html body .srch-page:not([data-loading]) > .srch-skel,
html body.theme-dark .srch-page:not([data-loading]) > .srch-skel {
  display: none !important;
}
html body .srch-page > .srch-skel,
html body.theme-dark .srch-page > .srch-skel {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  pointer-events: none !important;
}
html body .srch-page .srch-skel__card,
html body.theme-dark .srch-page .srch-skel__card {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 16px !important;
}
html body .srch-page .srch-skel__card--cta,
html body.theme-dark .srch-page .srch-skel__card--cta {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Два ввода стоят рядом — заглушка обязана повторять ту же сетку,
   иначе на месте карточек мигнёт одна широкая плита. */
html body .srch-page .srch-skel__grid,
html body.theme-dark .srch-page .srch-skel__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
/* Три ввода в ряд (инвайт) — заглушка повторяет ту же сетку. */
html body .srch-page .srch-skel__grid--3,
html body.theme-dark .srch-page .srch-skel__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Карточка-ввод: шапка 16, число 28, ряд превью 44, кнопка 40 и зазоры
   по 12 — те же 200px, что и у живой карточки «Что ищем». */
html body .srch-page .srch-skel__card--input,
html body.theme-dark .srch-page .srch-skel__card--input {
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 16px 20px 20px !important;
}
html body .srch-page .srch-skel__card--input > .app-skel__bar:first-child,
html body.theme-dark .srch-page .srch-skel__card--input > .app-skel__bar:first-child {
  height: 16px !important;
}
html body .srch-page .srch-skel__card--input .srch-skel__row,
html body.theme-dark .srch-page .srch-skel__card--input .srch-skel__row {
  align-items: center !important;
  min-height: 44px !important;
  margin-top: 0 !important;
}
html body .srch-page .srch-skel__card--fine,
html body.theme-dark .srch-page .srch-skel__card--fine {
  padding: 20px !important;
}
html body .srch-page .srch-skel__value,
html body.theme-dark .srch-page .srch-skel__value {
  height: 28px !important;
}
html body .srch-page .srch-skel__row,
html body.theme-dark .srch-page .srch-skel__row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
html body .srch-page .srch-skel__field,
html body.theme-dark .srch-page .srch-skel__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
html body .srch-page .srch-skel__ctrl,
html body.theme-dark .srch-page .srch-skel__ctrl {
  display: block !important;
  height: 40px !important;
  max-width: 100% !important;
  background: var(--app-skel-tint) !important;
  animation: app-skel-blink
             var(--motion-pulse, 1200ms)
             var(--motion-ease, cubic-bezier(0.2, 0, 0, 1))
             var(--motion-wait, 700ms)
             infinite !important;
}
html body .srch-page .srch-skel__ctrl--pill,
html body.theme-dark .srch-page .srch-skel__ctrl--pill {
  border-radius: 20px !important;
}
/* Поля ввода — прямоугольники r8 высотой 48px, как в живой разметке. */
html body .srch-page .srch-skel__ctrl--round,
html body.theme-dark .srch-page .srch-skel__ctrl--round {
  height: 48px !important;
  border-radius: 8px !important;
}
html body .srch-page .srch-skel__ctrl--seg,
html body.theme-dark .srch-page .srch-skel__ctrl--seg {
  border-radius: 8px !important;
}
html body .srch-page .srch-skel__ctrl--chip,
html body.theme-dark .srch-page .srch-skel__ctrl--chip {
  height: 26px !important;
  border-radius: 13px !important;
}
/* Переключатели «Собирать» — 30px, как в живой карточке. */
html body .srch-page .srch-skel__ctrl--mini,
html body.theme-dark .srch-page .srch-skel__ctrl--mini {
  height: 30px !important;
  border-radius: 15px !important;
}
html body .srch-page .srch-skel__row--types,
html body.theme-dark .srch-page .srch-skel__row--types {
  min-height: 30px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e6e8ee !important;
}
/* Плитки глубины: две по половине ширины, r12 — как в живой разметке. */
html body .srch-page .srch-skel__ctrl--tile,
html body.theme-dark .srch-page .srch-skel__ctrl--tile {
  flex: 1 1 0 !important;
  height: 74px !important;
  border-radius: 12px !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .srch-page .srch-skel__ctrl,
  html body.theme-dark .srch-page .srch-skel__ctrl { animation: none !important; }
}

/* ── Шапка открытого прогона на вкладке «Источники» ─────────────
   Прогон = база: список показывает прогоны, клик открывает один. Путь,
   название и сводка живут первой строкой карточки НАД gmail-баром —
   там же, где опознание открытой базы пользователей (.ubd__head, её
   геометрию этот блок и переиспользует). Здесь только сводка справа. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-head__summary,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-head__summary {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tp-side-muted, #8b95b1) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
/* Строка базы открывается кликом — курсор обязан об этом сказать. */
html body .ub2-src-base,
html body.theme-dark .ub2-src-base {
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════
   САЙДБАР: неактивные пункты — вес 400
   ───────────────────────────────────────────────────────────────
   Активный пункт остаётся 500 (блок .nav-item.is-active выше по
   файлу), неактивные отличаются ещё и весом, а не только цветом.
   Блок стоит в конце файла намеренно: раньше по тексту лежат
   правила сайдбара с !important, и перебить их можно только
   порядком.

   Курсива в сайдбаре нет — начертание везде прямое.
   ═══════════════════════════════════════════════════════════════ */
html body #sidebar .nav-item:not(.is-active),
html body #sidebar .nav-item:not(.is-active) .nav-item__label,
html body.theme-dark #sidebar .nav-item:not(.is-active),
html body.theme-dark #sidebar .nav-item:not(.is-active) .nav-item__label {
  font-family: var(--app-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════
   НАСТОЯЩИЙ GOOGLE SANS — шрифт всего приложения
   ───────────────────────────────────────────────────────────────
   Файлы взяты с fonts.gstatic.com (те самые @font-face, которыми
   Google раздаёт Google Sans своим сервисам).

   Семейство названо ровно "Google Sans" — тем именем, с которого
   начинается --app-font в style.css. Поэтому шрифт подхватывается
   всем приложением сразу, без единого точечного правила: раньше
   первый пункт стека ни во что не разрешался и стек молча отдавал
   Roboto, теперь разрешается сюда.

   Вес объявлен диапазоном 400–700, а не тремя отдельными гранями:
   woff2 у Google один на все веса, он вариативный. С отдельными
   гранями 400/500/700 промежуточный вес округляется вверх, и все
   251 правило с font-weight: 600 рисуются как 700 — заметно жирнее
   задуманного. Диапазон даёт настоящую 600.

   Подключены поднаборы под русский интерфейс: cyrillic-ext,
   cyrillic, greek, latin-ext, latin. Экзотические письменности из
   исходного списка (армянский, деванагари, кхмерский и прочие) не
   включены — приложению они не нужны, а unicode-range всё равно
   не даёт браузеру их качать.
   ═══════════════════════════════════════════════════════════════ */
/* cyrillic-ext */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2swCIlsw.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2ugCIlsw.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vQCIlsw.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2sACIlsw.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/s/googlesans/v62/4UaRrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iq2vgCI.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;
}

/* ════════════════════════════════════════════════════════════════════════════
   РЕСАЙЗ И ПОРЯДОК КОЛОНОК ТАБЛИЦЫ «АККАУНТЫ» (v16)
   Ширины колонок задаёт applyAccountTableLayout() в app.js — инлайном на th
   с !important, поэтому пер-колоночные --acc-*-w выше остаются только
   фолбэком до первого кадра JS. Здесь — органы управления: зона захвата у
   правой границы заголовка и список колонок с ручками перетаскивания.
   ════════════════════════════════════════════════════════════════════════ */

/* Заголовок становится системой координат для своей зоны захвата. Оболочка
   .app-table держит `position: static !important`, поэтому селектор набирает
   вес классами таблицы, а не !important-гонкой. Шестерёнка «Настроить
   колонки» после этого якорится к последнему th вместо .am-table-scroll: она
   по-прежнему у правого края таблицы, но при горизонтальной прокрутке едет
   вместе с последней колонкой, а не висит над ней. */
html body :is(.view-am, .am-embed, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-scroll table.app-table thead th,
html body.theme-dark :is(.view-am, .am-embed, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-scroll table.app-table thead th {
  position: relative !important;
  /* Оболочка .app-table держит overflow: visible, и у узкой колонки подпись
     со значком сортировки вылезала за правый край таблицы — контейнер
     показывал несколько пикселей горизонтальной прокрутки из ничего.
     Зона захвата и шестерёнка позиционированы внутрь ячейки, их обрезка
     не задевает. */
  overflow: hidden !important;
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  z-index: 4;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

/* Черта, за которую тянут. В покое — тихий штрих в 1px на половину высоты
   шапки: границу видно глазом, но в списке на полсотни строк он не читается
   как разлиновка (вертикальных линий в самих строках по-прежнему нет — это
   метка только в шапке). Под курсором штрих вырастает во всю высоту, берёт
   акцентный цвет и становится 2px — сразу понятно, что схвачено.
   Последняя колонка ручки не имеет, поэтому у правого края таблицы штриха
   не будет. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip::after,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  border-radius: 1px;
  background: var(--app-table-divider, var(--border-strong, #d3dae6));
  transition:
    background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    width var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    top var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    bottom var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}

html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip:hover::after,
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip.is-dragging::after,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip:hover::after,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-grip.is-dragging::after {
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tp-accent, #2563eb);
}

/* Пока границу тянут, курсор один на весь экран, а выделение текста выключено:
   иначе при быстром движении курсор мигает, а строки таблицы подсвечиваются
   синим выделением. */
html body.is-col-resizing,
html body.is-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Узкие колонки обязаны обрезать содержимое многоточием, иначе при сужении
   текст залезает на соседнюю. «Роль» исключена намеренно: в ней живут
   всплывающие кнопки действий строки, и overflow: hidden обрезал бы их. */
html body .view-am .acc-table tbody td[data-col="username"],
html body .view-am .acc-table tbody td[data-col="phone"],
html body .view-am .acc-table tbody td[data-col="geo"],
html body .view-am .acc-table tbody td[data-col="age"],
html body .view-am .acc-table tbody td[data-col="twofa"],
html body .view-am .acc-table tbody td[data-col="proxy"],
html body.theme-dark .view-am .acc-table tbody td[data-col="username"],
html body.theme-dark .view-am .acc-table tbody td[data-col="phone"],
html body.theme-dark .view-am .acc-table tbody td[data-col="geo"],
html body.theme-dark .view-am .acc-table tbody td[data-col="age"],
html body.theme-dark .view-am .acc-table tbody td[data-col="twofa"],
html body.theme-dark .view-am .acc-table tbody td[data-col="proxy"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Список колонок: ручка перетаскивания и замок первой колонки ──────────── */
html body .am-cols-pop .am-cols-pop__item,
html body.theme-dark .am-cols-pop .am-cols-pop__item {
  gap: 4px;
  padding: 4px 6px;
  cursor: default;
  transition: transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}

html body .am-cols-pop .am-cols-pop__pick,
html body.theme-dark .am-cols-pop .am-cols-pop__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

html body .am-cols-pop .am-cols-pop__grip,
html body.theme-dark .am-cols-pop .am-cols-pop__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-light, #b3b9c6);
  cursor: grab;
  touch-action: none;
  transition:
    background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
    color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
html body .am-cols-pop .am-cols-pop__grip svg,
html body.theme-dark .am-cols-pop .am-cols-pop__grip svg {
  width: 14px;
  height: 14px;
}
html body .am-cols-pop .am-cols-pop__grip:hover {
  background: rgba(60, 64, 67, .10);
  color: var(--text-mute, #5f6368);
}
html body.theme-dark .am-cols-pop .am-cols-pop__grip:hover {
  background: rgba(232, 234, 237, .10);
  color: var(--text-mute, #9aa0a6);
}
/* Ручка у «Аккаунтов» стоит только ради того, чтобы подписи всех строк были
   на одной вертикали: колонка зарезервирована и не двигается. */
html body .am-cols-pop .am-cols-pop__grip.is-off,
html body.theme-dark .am-cols-pop .am-cols-pop__grip.is-off {
  opacity: .3;
  cursor: default;
  background: transparent;
}

html body .am-cols-pop .am-cols-pop__item.is-dragging,
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-dragging {
  position: relative;
  z-index: 2;
  transition: none;
  cursor: grabbing;
}
html body .am-cols-pop .am-cols-pop__item.is-dragging {
  background: #fff;
  box-shadow: 0 4px 14px rgba(32, 33, 36, .18);
}
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-dragging {
  background: var(--bg-card, #171b22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
/* Во время перестановки ховер соседей молчит — подсвечена только та строка,
   которую держат. */
html body .am-cols-pop.is-reordering .am-cols-pop__item:not(.is-dragging):hover,
html body.theme-dark .am-cols-pop.is-reordering .am-cols-pop__item:not(.is-dragging):hover {
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   ПРАВИЛО 1–1–0 В СТРОКЕ ТАБЛИЦЫ (v16)
   Один цветной элемент на строку — пилюля статуса: только она означает
   «обрати внимание». Прокси несёт свой признак тоном значка связи.
   Подчёркиваний нет: в списке на полсотни строк подчёркнутый текст
   превращает колонку в сплошное поле ссылок.
   Один вес 500 на строку — имя аккаунта, единственный якорь для глаза.

   Роль — исключение по просьбе: с 08.09.2026 её чип нарисован обводкой в
   один синий тон (блок «Роль в таблице» выше). Правило это не ломает: тон
   у роли ОДИН и от названия не зависит, поэтому «обрати внимание» в строке
   по-прежнему говорит только статус — он один меняет цвет по смыслу.
   ════════════════════════════════════════════════════════════════════════ */

/* Точки состояния у прокси больше нет: колонка показывает сам прокси, а
   состояние несёт тон значка связи слева от него (блок «Ячейка „Прокси“»
   выше). Оттенки там те же, что у пилюль статуса, — зелёный и красный
   значат в строке одно и то же, в какой бы колонке ни встретились. */

/* Типографика строки: имя — единственный вес 500, размер общий с ячейками
   (13px), цифры в колонках-ключах моноширинные по ширине знака, чтобы
   телефоны и возраст выстраивались в столбик без смены гарнитуры. */
html body .view-am .acc-table .am-acct__name,
html body.theme-dark .view-am .acc-table .am-acct__name {
  font-size: inherit !important;
  font-weight: var(--app-table-anchor-weight, 500) !important;
}
/* Кегль здесь не задаётся: его несёт --app-table-cell-size через ячейку
   (см. канонический контракт .app-table в конце файла). Остаётся только вес —
   единственный 500 в строке принадлежит имени аккаунта, всё остальное 400. */
html body .view-am .acc-table .username-cell .am-username,
html body .view-am .acc-table .username-cell button.am-username,
html body .view-am .acc-table .am-phone,
html body .view-am .acc-table button.am-phone,
html body .view-am .acc-table .am-proxy,
html body .view-am .acc-table button.am-proxy,
html body.theme-dark .view-am .acc-table .username-cell .am-username,
html body.theme-dark .view-am .acc-table .username-cell button.am-username,
html body.theme-dark .view-am .acc-table .am-phone,
html body.theme-dark .view-am .acc-table button.am-phone,
html body.theme-dark .view-am .acc-table .am-proxy,
html body.theme-dark .view-am .acc-table button.am-proxy {
  font-weight: 400 !important;
}
html body .view-am .acc-table .am-phone,
html body .view-am .acc-table .am-acct-cell__num,
html body .view-am .acc-table td[data-col="age"],
html body.theme-dark .view-am .acc-table .am-phone,
html body.theme-dark .view-am .acc-table .am-acct-cell__num,
html body.theme-dark .view-am .acc-table td[data-col="age"] {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ПРОКСИ-ТАБЛИЦА НА ОБЩЕМ МОДУЛЕ КОЛОНОК (v16)
   Набор, порядок и ширины колонок задаёт пользователь, поэтому позиционные
   правила (td:nth-child) больше не описывают ту колонку, для которой писались:
   после перестановки «третья ячейка» — уже не «Хост». Ширину всегда ставит
   модуль инлайном в th, а всё, что действительно принадлежит колонке,
   адресуется по её data-col.
   ════════════════════════════════════════════════════════════════════════ */
html body .view-proxy .px-flat__table thead th[data-col],
html body .view-proxy .px-flat__table tbody td[data-col],
html body.theme-dark .view-proxy .px-flat__table thead th[data-col],
html body.theme-dark .view-proxy .px-flat__table tbody td[data-col] {
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Первая колонка держит чекбокс выбора и порядковый номер — её содержимое
   по горизонтали не обрезаем, иначе при сужении пропадёт сам чекбокс. */
html body .view-proxy .px-flat__table tbody td[data-col="country"],
html body.theme-dark .view-proxy .px-flat__table tbody td[data-col="country"] {
  overflow: visible !important;
}

/* «Занят» — нейтральный текст с точкой-признаком (правило 1–1–0): цветная
   заливка в строке остаётся только у пилюли проверки. */
html body .view-proxy .px-flat__busy,
html body.theme-dark .view-proxy .px-flat__busy {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--text, #1f2740) !important;
}
html body .view-proxy .px-flat__busy-dot,
html body.theme-dark .view-proxy .px-flat__busy-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-right: 7px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--text-light, #b3b9c6) !important;
}
html body .view-proxy .px-flat__busy.is-on .px-flat__busy-dot {
  background: #b45309 !important;
  box-shadow: none !important;
}
html body.theme-dark .view-proxy .px-flat__busy.is-on .px-flat__busy-dot {
  background: #fbbf24 !important;
}

/* ── Правило 1–1–0 в строке прокси ────────────────────────────────────────────
   Тот же закон, что и в аккаунтах: один цветной элемент на строку (пилюля
   проверки), нейтральные признаки точкой, ноль подчёркиваний, ровно один
   вес 500. Палитра пилюли — общая с аккаунтами и диспетчером задач, чтобы
   зелёный и красный значили одно и то же в любой таблице.
   -------------------------------------------------------------------------- */

/* Единственный вес 500 в строке — код страны рядом с флагом: это опознавание
   строки, ровно как имя рядом с аватаркой в аккаунтах. Порядковый номер —
   мета, он такой же приглушённый, как в остальных таблицах. */
html body .view-proxy .px-flat__table .px-flat__country,
html body.theme-dark .view-proxy .px-flat__table .px-flat__country {
  font-weight: var(--app-table-anchor-weight, 500) !important;
}
html body .view-proxy .px-flat__table .px-flat__num,
html body.theme-dark .view-proxy .px-flat__table .px-flat__num {
  font-weight: 400 !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Статус — обводка вместо заливки, форма скруглённого прямоугольника. Кегль
   здесь с !important: канонический `tbody * { font-size: inherit }` специфичнее
   исходного правила и тянул подпись к кеглю ячейки; заодно повторяем геометрию
   и рамку — иначе прежние правила заливки из середины файла победили бы
   каскад. Тонов два: рамка (`--px-status-line`) и подпись (`--px-status-ink`),
   оба объявлены в блоке «Proxy table final reset», ночь переопределяет их в
   theme_dark.css. */
html body.is-proxy-screen .view-proxy .px-flat__status,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__status {
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  /* Те же отступы, что у статуса аккаунта: 1 + 20 + 1 плюс рамка = 24px. */
  padding: 1px 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--px-status-line, #b3bac8) !important;
  color: var(--px-status-ink, #5b6478) !important;
}

/* Ноль подчёркиваний: копируемость и кликабельность показывает цвет на
   ховере, а не линия под текстом — в списке на полсотни строк подчёркивания
   превращают колонку в сплошное поле ссылок. */
html body .view-proxy .px-flat__assigned:hover,
html body .view-proxy .px-flat__link-action:hover > span:not(.material-symbols-outlined),
html body .view-proxy .px-flat__copy:hover > span:not(.material-symbols-outlined),
html body .view-proxy .px-flat__health:hover .px-flat__health-main > span:not(.material-symbols-outlined),
html body.theme-dark .view-proxy .px-flat__assigned:hover,
html body.theme-dark .view-proxy .px-flat__link-action:hover > span:not(.material-symbols-outlined),
html body.theme-dark .view-proxy .px-flat__copy:hover > span:not(.material-symbols-outlined),
html body.theme-dark .view-proxy .px-flat__health:hover .px-flat__health-main > span:not(.material-symbols-outlined) {
  text-decoration: none !important;
  color: var(--tp-accent, #2563eb) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ПЕРЕСТАНОВКА КОЛОНОК ПРЯМО В ШАПКЕ (v16)
   Колонку тащат за её подпись, не открывая шестерёнку. Порог в 5px отделяет
   перетаскивание от обычного клика по заголовку (сортировка), поэтому в покое
   заголовок ведёт себя ровно как раньше — никакого нового курсора и никаких
   новых значков.
   ════════════════════════════════════════════════════════════════════════ */

/* Иконка перемещения занимает то же место, что глиф сортировки, и в покое
   спрятана: подпись не прыгает, когда они меняются местами. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-move,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-move {
  display: none;
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  color: var(--app-table-sort-active, var(--primary, #3578f6)) !important;
}
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-move svg,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th .am-col-move svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* Колонка, которую тащат: подпись темнеет, стрелка сортировки уступает место
   точкам перемещения, сама ячейка приподнимается прозрачностью. */
html body table.app-table thead th.is-col-moving .sort,
html body.theme-dark table.app-table thead th.is-col-moving .sort {
  display: none !important;
}
html body table.app-table thead th.is-col-moving .am-col-move,
html body.theme-dark table.app-table thead th.is-col-moving .am-col-move {
  display: inline-flex !important;
}
/* Селектор намеренно повторяет форму канонического правила шапки: канон
   красит th через `background`/`color` с !important, и подсветка удерживаемой
   колонки должна перебивать его не по случайности порядка строк в файле,
   а по весу селектора. */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-col-moving,
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th.is-col-moving {
  color: var(--app-table-head-color-hover, var(--text, #1f2740)) !important;
  background: rgba(var(--app-table-accent-rgb), 0.08) !important;
}

/* Пока переставляют, курсор один на весь экран, а выделение текста выключено:
   иначе протяжка по шапке подсвечивает подписи синим. */
html body.is-col-reordering,
html body.is-col-reordering * {
  cursor: grabbing !important;
  user-select: none !important;
}
/* Соседние заголовки в это время молчат: подсвечена только та колонка,
   которую держат, и место, куда она встанет. */
html body table.app-table.is-col-reordering thead th:not(.is-col-moving):hover {
  color: var(--app-table-head-color, var(--text-mute, #64748b)) !important;
}
html body table.app-table.is-col-reordering thead th:not(.is-col-moving):hover .sort {
  opacity: 0 !important;
}

/* Направляющая места вставки — вертикальная линия на границе колонок,
   ростом с шапку. Живёт в .am-table-scroll (position: relative по контракту
   оболочки), поэтому едет вместе с горизонтальной прокруткой. */
html body .am-table-scroll .am-col-drop-line,
html body.theme-dark .am-table-scroll .am-col-drop-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: var(--app-table-head-h, 44px);
  border-radius: 1px;
  background: var(--app-table-sort-active, var(--primary, #3578f6));
  pointer-events: none;
  z-index: 6;
}

/* Курсор на время перетаскивания и ресайза.
   Отдельным правилом с полным весом селектора: у заголовка есть собственное
   `cursor: pointer !important` из канонического контракта (.app-table thead
   th[data-sort-key]), и короткое `body.is-col-reordering *` ему проигрывало —
   курсор над самой шапкой оставался «рукой», хотя колонку уже тащили. */
html body.is-col-reordering :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th,
html body.is-col-reordering :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th *,
html body.is-col-reordering :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td,
html body.is-col-reordering :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td * {
  cursor: grabbing !important;
}
html body.is-col-resizing :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th,
html body.is-col-resizing :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table thead th *,
html body.is-col-resizing :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td,
html body.is-col-resizing :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody td * {
  cursor: col-resize !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ТАБЛИЦЫ БАЗ ДАННЫХ НА ОБЩЕМ МОДУЛЕ КОЛОНОК
   Список баз, список прогонов поиска и записи открытой базы устроены как
   «Аккаунты» и «Прокси»: набор, порядок и ширины колонок задаёт пользователь,
   поэтому позиционные правила (nth-child, colgroup) больше не описывают ту
   колонку, для которой писались. Ширину всегда ставит модуль инлайном в th,
   а всё, что действительно принадлежит колонке, адресуется по её data-col.
   ════════════════════════════════════════════════════════════════════════ */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table thead th[data-col],
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td[data-col],
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table thead th[data-col],
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td[data-col] {
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Первая колонка держит чекбокс выбора и порядковый номер — её содержимое
   по горизонтали не обрезаем, иначе при сужении пропадёт сам чекбокс
   (у него ещё и кольцо 42px, выходящее за бокс ячейки). */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td:is([data-col="name"], [data-col="item"], [data-col="title"]),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td:is([data-col="name"], [data-col="item"], [data-col="title"]) {
  overflow: visible !important;
}

/* Коридор под панель активных задач (--tm-dock-lane / .has-dock-lane) снят
   07.08.2026 вместе с полосой запуска: рамка запуска стоит по центру колонки
   и до правого нижнего угла не достаёт — уступать панели нечем и незачем.
   На узком окне, где рамка всё-таки доходит до угла, панель поднимается над
   ней, как было до коридора (measureActiveTasksDockBottom в app.js). */

/* ════════════════════════════════════════════════════════════════════════════
   ТИПОГРАФИКА СТРОКИ СПИСОЧНОЙ ТАБЛИЦЫ — ОДИН ИСТОЧНИК НА ВСЕ МОДУЛИ
   Продолжение канонического контракта .app-table. Эталон — «Аккаунты» и
   «Прокси»; здесь их разметка кегля, веса и тона распространяется на базы
   данных и диспетчер задач, чтобы одинаковые по смыслу поля выглядели
   одинаково во всех таблицах, а не «примерно похоже».

   Правило 1–1–0 в строке: ОДИН якорь весом 500 (то, чем строку узнают в лицо),
   ОДНА цветная пилюля (статус), НОЛЬ подчёркиваний. Всё остальное — 400.

     • якорь           --app-table-anchor-size / --app-table-anchor-weight (500)
     • обычная ячейка  --app-table-cell-size (13px) / 400 / --app-table-cell-color
     • пилюля статуса  --app-table-meta-size (12px) / 400 / строка 20px
     • мета строки     --app-table-meta-size (12px) / 400 / приглушённый тон
       (порядковый номер, подпись под якорем, даты, комментарии)

   Замерено в живом приложении (июль 2026) — до этого блока расходились:
   номер строки 12px в аккаунтах против 13px в записях базы, пилюля статуса
   400 в аккаунтах против 500 в задачах и записях, приглушённый тон
   #6b7494 против #8b95b1, название базы 13px против записи базы 14px.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Кегль якоря модуля баз — 14px во ВСЕХ четырёх его таблицах.
   Записи, источники и прогоны уже так и рисовались, список баз отставал на
   пиксель. Токен, а не правка каждого класса: поднять кегль якоря целому
   модулю — это одно объявление, и другие колонки его не видят. ── */
html body #view-userbase.view-userbase.view-userbase--v2 .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell {
  --app-table-anchor-size: 14px;
}

/* Записи внутри базы — исключение: 13px и вес 400. Якорь здесь не название,
   которое читают глазами («Аудитория клиентов»), а идентификатор — @логин или
   пятнадцатизначный id. Их не читают, а сверяют, и на 14px строка первой
   колонки упиралась в свою ширину раньше, чем успевала показать хвост. Вес 500
   тоже работал против: голая колонка цифр весом заголовка перетягивала на себя
   всю строку, хотя опознают запись не ей, а именем и логином рядом. Токеном,
   а не правкой .ubd-rec: колонка «Имя» рядом считает кегль от того же места. */
html body #view-userbase.view-userbase.view-userbase--v2 #ubd-records-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbd-records-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ubd-records-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbd-records-table .am-table-shell {
  --app-table-anchor-size: 13px;
  --app-table-anchor-weight: 400;
}

/* Чаты внутри базы источников — те же 13px, и по той же причине: рядом с
   названием в строке стоят логин, id и ссылка обычного кегля, и на 14px
   название выбивалось из общего роста строки. Вес остаётся 500 — здесь якорь
   как раз название, им чат и узнают. */
html body #view-userbase.view-userbase.view-userbase--v2 #ubs-sources-table .am-table-shell,
html body #view-userbase.view-userbase.view-userbase--v2 #pbd-records-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #ubs-sources-table .am-table-shell,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 #pbd-records-table .am-table-shell {
  --app-table-anchor-size: 13px;
}

/* ── 2. Якорь строки. Кегль и вес — из токенов оболочки, тон — общий цвет
   ячейки: приглушать якорь нельзя, он и есть опознание строки. ── */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-name-edit, .ubd-rec, .ub2-src-name__title),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-name-edit, .ubd-rec, .ub2-src-name__title),
html body #view-tasks.view-tasks table.app-table tbody .tm-table__title,
html body.theme-dark #view-tasks.view-tasks table.app-table tbody .tm-table__title {
  color: var(--app-table-cell-color, var(--text)) !important;
  font-family: inherit !important;
  font-size: var(--app-table-anchor-size, 13px) !important;
  font-weight: var(--app-table-anchor-weight, 500) !important;
}

/* ── 3. Пилюля статуса — одна геометрия и один вес на все модули.
   Вес 400, а не 500: единственный вес 500 в строке принадлежит якорю
   (правило 1–1–0). Аккаунты и прокси уже такие — они здесь ради одного
   источника правды, их вид не меняется. ── */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody :is(.status, .px-flat__status, .task-status, .ubd-status, .ub2-src-join),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody :is(.status, .px-flat__status, .task-status, .ubd-status, .ub2-src-join),
/* Модульные правила баз адресуются через #view-userbase, то есть весят на
   целый ID больше. Повторяем селектор с тем же ID — иначе канон проигрывает
   каскад и статус записи остаётся весом 500 (проверено в живом приложении). */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ubd-status, .ub2-src-join),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ubd-status, .ub2-src-join) {
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* ── 4. Мета строки: порядковый номер и вторая строка под якорем (тип задачи,
   счётчик прогресса, файл прогона). Мельче основного кегля и приглушены —
   иначе подпись спорит с якорем за внимание. Тон — общий --text-mute, тот же,
   что в аккаунтах и проксях: у баз он был на два тона светлее (#8b95b1), и
   рядом таблицы читались как из разных программ. ── */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.px-flat__num, .ubd-rec__num),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.px-flat__num, .ubd-rec__num) {
  color: var(--text-mute, #64748b) !important;
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
}

html body #view-tasks.view-tasks table.app-table tbody .tm-table__sub,
html body.theme-dark #view-tasks.view-tasks table.app-table tbody .tm-table__sub {
  color: var(--text-mute, #64748b) !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
}

/* ── 5. Приглушённые ЗНАЧЕНИЯ ячеек (даты, комментарий, «не проверяли») —
   кегль общий с ячейкой, тон приглушённый. От меты их отличает именно кегль:
   это содержимое колонки, а не подпись под другим полем. ── */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-mute, .ubd-mute, .ub2-src-join--unknown),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-mute, .ubd-mute, .ub2-src-join--unknown),
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody .muted,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody .muted {
  color: var(--text-mute, #64748b) !important;
}

/* ── 6. Числовые колонки — моноширинные по знаку, чтобы разряды выстраивались
   в столбик (как телефон и возраст в аккаунтах). ── */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-count__num, .ubd-rec, td[data-col="count"], td[data-col="members"]),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ub2-count__num, .ubd-rec, td[data-col="count"], td[data-col="members"]),
html body #view-tasks.view-tasks table.app-table tbody :is(td[data-col="activity"], td[data-col="duration"]),
html body.theme-dark #view-tasks.view-tasks table.app-table tbody :is(td[data-col="activity"], td[data-col="duration"]) {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* ── 7. Обычные ячейки таблиц баз — тот же тон, что в аккаунтах и проксях.
   Модуль красил их своим --tp-side-text-strong (#1d2540), и одинаковый по
   смыслу текст в соседних таблицах отличался оттенком. ── */
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ubd-kind, .ub2-source-tag, .ub2-src-login, .ub2-src-kind, .ub2-count__num),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.ubd-kind, .ub2-source-tag, .ub2-src-login, .ub2-src-kind, .ub2-count__num) {
  color: var(--app-table-cell-color, var(--text)) !important;
  font-family: inherit !important;
  font-size: var(--app-table-cell-size, 13px) !important;
  font-weight: 400 !important;
}

/* ── 8. Геометрия порядкового номера — одна на все модули, чтобы ЯКОРЬ строки
   во всех таблицах стоял на одной вертикали. Замерено: рельс 16 + чекбокс 21 +
   зазор 20 = 57px до номера (это канон LEAD RAIL), дальше номер шириной 2ch
   (16px при кегле меты) и тот же зазор 20px = 93px до якоря.

   Расходились ровно здесь: прокси и базы отбивали номер на 18px вместо 20, а
   номер записи держал min-width: 22px вместо 2ch — и якорь вставал на 91px,
   93px и 99px в трёх соседних таблицах одного окна. Номер стоит внутри
   flex-контейнера первой ячейки (аккаунты, записи, чаты модерации) либо
   прямо в td (прокси, список баз, прогоны, источники) — в первом случае
   зазор раздаёт gap контейнера, во втором нужно собственное поле.

   Задачи из списка выпали намеренно: у них номера строки нет вовсе, и
   заголовок задачи стоит сразу за чекбоксом, на 57px.

   2ch — это МИНИМУМ, а не жёсткая ширина. Жёсткой она и была, и на базе в
   тринадцать тысяч записей пятизначный номер не влезал в свои 16px: выравнивание
   раздаёт только положительный остаток, поэтому лишние цифры вылезали вправо,
   съедали зазор целиком и вставали вплотную к id — «13501254278340» одной
   строкой. Номер, переросший два знака, раздвигает свой бокс, и зазор до якоря
   остаётся тем же 20px в любой таблице. ── */
html body :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody :is(.px-flat__num, .ubd-rec__num, .am-acct-cell__num, .md-chat-cell__num),
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) table.app-table tbody :is(.px-flat__num, .ubd-rec__num, .am-acct-cell__num, .md-chat-cell__num),
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.px-flat__num, .ubd-rec__num),
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody :is(.px-flat__num, .ubd-rec__num) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 2ch !important;
  text-align: right !important;
}

/* Номер прямо в td (не во flex-контейнере) сам отбивает зазор до якоря. */
html body :is(.view-proxy, .view-userbase--v2) table.app-table tbody td > .px-flat__num,
html body.theme-dark :is(.view-proxy, .view-userbase--v2) table.app-table tbody td > .px-flat__num,
html body #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td > .px-flat__num,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 table.app-table tbody td > .px-flat__num {
  margin-right: var(--app-table-lead-gap, 20px) !important;
}

/* Ширина якоря считается от рельса: чекбокс + зазор + номер (2ch ≈ 16px) +
   зазор. Раньше здесь стояло «5ch», а ch считается от кегля САМОГО якоря
   (14px), тогда как номер набран кеглем меты (12px) — вычиталось на 9px
   больше, чем занято, и длинное название обрывалось раньше времени. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-flat__table td.ub2-name .ub2-name-edit,
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-name {
  max-width: calc(
    100% - var(--tp-checkbox-size, 21px) - var(--app-table-lead-gap, 20px)
    - 16px - var(--app-table-lead-gap, 20px)
  ) !important;
}

/* ── Подписки/Отписки ───────────────────────────────────────────
   Своих правил у экрана нет. Он целиком живёт по канону страницы запуска
   (.srch-page): плитки режима, карточки-вводы, чипы и липкая полоса
   запуска приходят оттуда. Прежний сегмент-пилюля (.sub-seg) убран
   вместе с самодельными шагами: собственный переключатель на странице
   запуска — второй вид кнопки выбора там, где канон знает один.

   Единственное, что осталось модулю, — окно списка чатов: строка про
   непонятые ссылки, та же пара строк под полем, что и у накрутки.
   Красным горит только вторая и только когда есть о чём предупреждать. */

/* Active navigation item label bold styling */
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__label {
  font-weight: 700 !important;
}

/* Активный пункт держит ту же толщину, что и остальные: активность передаётся
   цветом и фоном строки, форма и вес иконки не меняются. */
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body:not(.theme-dark):not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item.is-active:hover .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon svg,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item.is-active:hover .nav-item__icon svg {
  stroke-width: 1.75 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЗАГОЛОВОК И ПУТЬ НАД БАРОМ — общий контракт списочных таблиц
   ──────────────────────────────────────────────────────────────────────────
   Одна строка опознания на все таблицы: путь 12px над названием 20px, вся
   строка 68px. Эталон — крошки детального экрана задачи (.task-detail__crumbs)
   и шапка открытой базы (.ubd__head), от которых сюда пришли и геометрия,
   и типографика.

   Разметка:
     .am-table-shell
       → .am-table-head            ← ЭТА строка, первой в карточке
       → .picker-gmail-bar …
       → .am-table-scroll > table.app-table

   Рельс 16px общий с чекбоксами строк: путь и название стоят ровно над
   мастер-чекбоксом бара. У вложенных экранов (открытая база, открытый
   источник, открытая задача) на рельсе стоят путь и стрелка возврата: стрелка
   открывает строку НАЗВАНИЯ (.am-table-head__titlerow), а само название идёт
   за ней.

   Карточка задачи (.task-detail-card) идёт вторым носителем строки: своей
   оболочки .am-table-shell у неё нет, а геометрия обязана быть той же, что у
   открытой базы — отсюда второй селектор, а не копия правил.

   Внутренности пути (.crumbs__back / __link / __sep / __here) раздаёт контракт
   .crumbs в style.css — здесь только раскладка строки. ── */
html body .am-table-shell > .am-table-head,
html body.theme-dark .am-table-shell > .am-table-head,
html body .task-detail-card > .am-table-head,
html body.theme-dark .task-detail-card > .am-table-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Строка одна и на узких экранах: название сжимается троеточием, а не
     переносится — высота фиксированная. */
  flex-wrap: nowrap;
  gap: 12px;
  height: 68px;
  min-height: 68px;
  margin: 0;
  padding: 0 12px 0 16px;
  box-sizing: border-box;
  border: 0;
  background: var(--bg-card, #ffffff);
}
/* Черта под строкой опознания: та же волосинка, что режет шапку таблицы
   (--app-table-head-border), — строка названия и таблица разделены одинаково.
   Рисуем псевдоэлементом, а не border-bottom: рамка съела бы пиксель у
   фиксированных 68px и увела бы название с вертикального центра на полпикселя.
   По умолчанию черты нет — её включает токен --app-table-head-rule на оболочке
   таблицы. Пробный прогон у аккаунтов не понравился, поэтому сейчас токен не
   задаёт никто: строка опознания отделена от таблицы только воздухом. */
html body .am-table-shell > .am-table-head::after,
html body.theme-dark .am-table-shell > .am-table-head::after,
html body .task-detail-card > .am-table-head::after,
html body.theme-dark .task-detail-card > .am-table-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--app-table-head-rule, transparent);
  pointer-events: none;
}
/* display: flex выше перебивает браузерное [hidden] { display: none } —
   скрытая шапка обязана оставаться скрытой (та же мина, что у .ubd__head). */
html body .am-table-shell > .am-table-head[hidden],
html body.theme-dark .am-table-shell > .am-table-head[hidden],
html body .task-detail-card > .am-table-head[hidden],
html body.theme-dark .task-detail-card > .am-table-head[hidden] {
  display: none;
}
html body .am-table-head .am-table-head__main,
html body.theme-dark .am-table-head .am-table-head__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Строка пути — РОВНО 16px, независимо от того, что в ней стоит. У корневого
   экрана путь из одной крошки-текста (16px), у вложенного первая крошка —
   кнопка-пилюля с полями 2px, то есть 20px. Пока высоту диктовало содержимое,
   блок «путь + название» был 46px против 42px, центрировался в тех же 68px, и
   при переходе «список → база» путь уезжал на 2px вверх, а название на 2px
   вниз. Пилюля своих 20px не теряет — она выходит за строку по 2px в обе
   стороны (внутри 68px это невидимо) и центрируется контрактом .crumbs. */
html body .am-table-head .am-table-head__crumbs,
html body.theme-dark .am-table-head .am-table-head__crumbs {
  margin: 0 0 2px 0;
  max-width: 100%;
  height: 16px;
}
/* Путь корневого экрана — одна крошка, и она обязана стоять ровно над первой
   буквой заголовка. Контракт .crumbs даёт .crumbs__here отбивку 2px влево (она
   отделяет текущий пункт от шеврона), но без шеврона эти 2px уводят путь с
   рельса названия — те самые 2px, которые в глаза не бросаются, а в замере
   видны. Снимаем ровно у первой крошки. */
html body .am-table-head .am-table-head__crumbs > .crumbs__here:first-child,
html body.theme-dark .am-table-head .am-table-head__crumbs > .crumbs__here:first-child {
  padding-left: 0;
}
/* Кегль названия — 18px/24px на ВСЕХ семи таблицах, включая вложенные экраны
   (открытая база, открытый источник). Один блок на все, потому что при
   переходе «список → база» заголовок обязан остаться на месте и того же
   размера: модульные копии этого правила давали 20px и лишний пиксель под
   пунктиром правки названия, и текст дёргался на 2px вниз. */
html body .am-table-head .am-table-head__title,
html body.theme-dark .am-table-head .am-table-head__title {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--tp-side-text-strong, #1d2540);
}
html body.theme-dark .am-table-shell > .am-table-head,
html body.theme-dark .task-detail-card > .am-table-head {
  background: var(--bg-card, #161b27);
}
html body.theme-dark .am-table-head .am-table-head__title {
  color: var(--text, #e8eaed);
}

/* ── Возврат вложенного экрана: стрелка ПЕРЕД НАЗВАНИЕМ ────────────────────
   31 июля 2026: «стрелку назад перед путем нужно убрать, мы ставим ее перед
   заголовком». Раньше стрелка открывала строку пути; теперь путь у вложенного
   экрана выглядит ровно как у корневого (крошки с 16px), а возврат стоит в
   строке названия — там же, где написано, куда возвращаешься.

   Геометрию самой стрелки (24px подложка, глиф 18px, рельс 16px по глифу)
   держит контракт .crumbs__back в style.css — здесь только строка: стрелка,
   6px, название. На вложенном экране название начинается правее пути, и это
   единственное, чем его строка опознания отличается от корневой. ── */
html body .am-table-head .am-table-head__titlerow,
html body.theme-dark .am-table-head .am-table-head__titlerow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Обёртка названия открытой базы (заголовок + поле правки) сжимается вместе с
   ним, а не растягивает строку: троеточие обязано появляться у названия. */
html body .am-table-head .am-table-head__titlerow > .ubd__title-wrap,
html body.theme-dark .am-table-head .am-table-head__titlerow > .ubd__title-wrap {
  min-width: 0;
  flex: 0 1 auto;
}

/* ── Действие раздела в строке опознания ───────────────────────────────────
   «Добавить …» — действие НАД РАЗДЕЛОМ, а не над строками таблицы, поэтому
   кнопка стоит здесь, у правого края строки опознания, а не в gmail-баре: там
   живёт только работа со списком и выделением. Правый край даёт инсет самой
   строки (12px) — пилюля встаёт ровно над стрелками страниц бара (замерено:
   правый край 1233px и там, и там).

   Вид — ТОНАЛЬНАЯ пилюля (Material tonal, язык Drive/Gmail): бледная синяя
   заливка #e8f0fe и синий текст #0b57d0, без тени ни в покое, ни под курсором.
   Заливкой #0b57d0 кнопка была слишком яркой для шапки списка — она спорила с
   названием раздела. Геометрия тоже тише: 32px вместо 40, radius 16, 13px/500,
   глиф 16px (строка опознания 68px, поля 18px).

   Цвета вынесены в локальные токены --app-head-add-*, поэтому тёмная тема
   переопределяет ТОЛЬКО их (заливка и текст на подложке #161b27 берутся из
   палитры Material dark), а геометрию не дублирует.

   Специфичность: у аккаунтов ещё жив легаси-набор геройской кнопки
   (html body .view-am #am-add-accounts, ~11698 — синий прямоугольник r10 на
   44px) весом (1,1,2) и целиком на !important; он спал, пока кнопка сидела в
   баре под правилами бара. Поэтому id взят внутрь :is(): вес :is() считается
   по самому весомому аргументу, выходит те же (1,1,2), а спор решает позиция
   в файле — этот блок последний. Легаси не удаляем: на него завязан
   контрактный тест геройской кнопки. Класс .am-table-head__add в том же
   :is() — по нему кнопку получает любая следующая таблица, уже без id. ── */
html body .am-table-head :is(.am-table-head__add, #am-add-accounts),
html body.theme-dark .am-table-head :is(.am-table-head__add, #am-add-accounts) {
  --app-head-add-bg: #e8f0fe;
  --app-head-add-bg-hover: #d3e3fd;
  --app-head-add-ink: #0b57d0;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 32px !important;
  min-height: 32px !important;
  /* Слева 11px, справа 14px: глиф просит у края меньше поля, чем подпись,
     иначе «+» кажется отодвинутым внутрь. */
  padding: 0 14px 0 11px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--app-head-add-bg) !important;
  color: var(--app-head-add-ink) !important;
  font-family: var(--app-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* Тёмная тема — только тон: заливка тем же синим в 16% и светлый текст. */
html body.theme-dark .am-table-head :is(.am-table-head__add, #am-add-accounts) {
  --app-head-add-bg: rgba(138, 180, 248, 0.16);
  --app-head-add-bg-hover: rgba(138, 180, 248, 0.24);
  --app-head-add-ink: #a8c7fa;
}
html body .am-table-head :is(.am-table-head__add, #am-add-accounts):hover,
html body.theme-dark .am-table-head :is(.am-table-head__add, #am-add-accounts):hover {
  background: var(--app-head-add-bg-hover) !important;
  border-color: transparent !important;
  color: var(--app-head-add-ink) !important;
  box-shadow: none !important;
}
html body .am-table-head :is(.am-table-head__add, #am-add-accounts) svg,
html body.theme-dark .am-table-head :is(.am-table-head__add, #am-add-accounts) svg {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  color: var(--app-head-add-ink) !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Sidebar nav items fixed height */
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item:not([disabled]).is-active:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:hover,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .sidebar__more:focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:hover,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active:focus-visible {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ВЕРХНИЙ (МАСТЕР-)ЧЕКБОКС — обводка и заливки как в Gmail.

   Конструкция из трёх частей, и у каждой своя работа:

     • ОБВОДКА — одна на всю связку «чекбокс + каретка»: линия 1px #b4b8bc,
       скругление 4px. Живёт на .px-check-menu__control::before, рисуется
       поверх заливок и статична: пока стоит, её не меняют ни наведение,
       ни нажатие.
     • ДВЕ ЗАЛИВКИ — своя у чекбокса и своя у каретки, на их ::before. Вместе
       они закрывают ВСЁ поле внутри обводки: одна высота с ней, наружные
       края вровень, между собой встык. Внутренние углы прямые, наружные
       скруглены на те же 4px — поэтому половинки читаются одной заливкой,
       а не двумя плитками. Наведение и активация показывают ОДНУ И ТУ ЖЕ
       коробку и отличаются только цветом: размер в смене состояния не
       участвует.
     • ГЛИФЫ — галочка и стрелка, поверх заливок.

   Высота обводки равна высоте самой связки (32px — рост хит-зоны и каретки),
   а не подложек иконок бара: обводка обязана быть впритык к тому, что
   обводит, иначе внутри неё остаётся незакрытая полоса.

   Активация — это ПОСЛЕДНИЙ ТРОНУТЫЙ чекбокс, то есть :focus, а не
   «отмечено» (тот же закон, что у колец чекбоксов строк выше). Поэтому
   повторное нажатие активацию НЕ снимает: галочка уходит, обводка остаётся;
   гасит её только уход фокуса — клик мимо, Esc, Tab.

   Цвета заливки — одна шкала на обе ячейки:
     покой вне активации — пусто;
     наведение вне активации — обычный тон бара (8% чёрного);
     активация без курсора — тот же обычный тон;
     активация под курсором — #d9d9d9;
     нажатие — #cccccc, и уходит с отпусканием: курсор на месте — #d9d9d9,
     курсор ушёл — обычный тон.

   ГЕОМЕТРИЯ. Каретке снята подтяжка margin-left: -5px. С ней ячейки
   налезали друг на друга (подложки пересекались на 2px), а правым краем
   упирались в линию обводки — квадратные углы вылезали из её скруглений.
   Без подтяжки ячейки — это собственные коробки хит-зоны (32px) и каретки
   (22px): каждая отцентрована по своему глифу, стыкуются без зазора,
   наружные края вровень с обводкой. Связка становится на 5px шире — это
   цена того, чтобы всё стояло ровно.

   Хит-зона выступает влево за связку на величину рельса (--app-check-master-lead):
   обводку начинаем ровно с её края, иначе галочка прижималась бы к линии.

   Виды перечислены с их классами (#view-userbase.view-userbase.view-userbase--v2
   и т.д.), хотя для поиска элемента хватило бы одного id: :is() берёт вес
   самого тяжёлого аргумента, и без классов блок не перебил бы легаси-правила
   пилюли и подложек выше.

   ЭТОТ БЛОК — ЕДИНСТВЕННЫЙ ИСТОЧНИК КОНСТРУКЦИИ НА ВСЕ ДЕВЯТЬ ПАНЕЛЕЙ
   (аккаунты, пикер запуска, прокси, четыре таблицы баз, диспетчер задач,
   модерация). Модульных копий мастера больше не заводим, а сам блок обязан
   прошивать КАЖДОЕ свойство коробки — не только те, что он менял против
   легаси. Причина конкретная: хит-зона считалась у прокси и модерации как
   height: var(--px-check-hit), а канон переопределяет этот токен на 26px
   ради просвета между глифами — и связка в двух модулях становилась 26px
   вместо 32px, то есть заливка чекбокса была ниже заливки каретки и ниже
   обводки. Свойство, которое блок не объявил, модуль однажды объявит сам.
   ═══════════════════════════════════════════════════════════════════════ */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: none !important;
  gap: 0 !important;
  padding: 0 !important;
  /* Скругление конструкции держат обводка и заливки — сама коробка связки
     остаётся прямоугольной и прозрачной. У прокси здесь жило 4px, и радиус
     висел на невидимом фоне, споря с 3px обводки. */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: var(--app-check-master-box-h, 40px) !important;
  /* Коробка связки (40px) держит место в баре, обводка (32px) обтягивает
     хит-зону и каретку — их собственный рост. */
  --app-check-master-box-h: 40px;
  --app-check-master-ring-h: 32px;
  --app-check-master-caret-w: 16px;
  /* 4px было слишком мягко, 2px — уже угловато; 3px единственное значение
     между ними. Заливки берут этот же токен, поэтому наружные углы связки
     всегда одной кривизны с обводкой. */
  --app-check-master-radius: 3px;
  /* Хит-зона мастера ужата с 32px до 26px — ТОЛЬКО у него: обе формулы
     выравнивания (общая и пикера) считают отступ от этого же токена, поэтому
     галочка остаётся на рельсе сама, а поле справа от неё падает с 5.5px до
     2.5px. Чекбоксы строк живут вне связки и токена не видят. */
  --px-check-hit: 26px;
  --app-check-master-stroke: #b4b8bc;
  /* Шкала заливки. Вне активации наведение показывает обычный тон бара —
     полупрозрачный, как у всех подложек в баре. Под обводкой шкала другая,
     из трёх сплошных ступеней: покой E0E0E0 → курсор D9D9D9 → нажатие
     CCCCCC. Сплошные, а не альфа: ступени соседние, и на прозрачности их
     разница зависела бы от того, что под связкой. */
  --app-check-master-fill: var(--px-gmail-hover, rgba(68, 71, 70, 0.08));
  --app-check-master-fill-active: #e0e0e0;
  --app-check-master-fill-hover: #d9d9d9;
  --app-check-master-fill-press: #cccccc;
}

/* Левый край обводки = левый край хит-зоны. Повторяем ровно те же формулы,
   которыми выравнивают саму хит-зону (канон рельса выше и правило пикера),
   поэтому обводка едет за ней сама, если поменять --px-check-hit. Объявлено
   ОТДЕЛЬНО и лёгким селектором: у пикера рельс свой, а перебить значение он
   может только правилом тяжелее — класса против id в общем блоке не хватило
   бы. */
html body .px-check-menu__control,
html body.theme-dark .px-check-menu__control {
  --app-check-master-ring-left: calc(
    var(--px-check-align, 16px) - var(--app-bar-inset, 12px)
    - (var(--px-check-hit, 26px) - var(--tp-checkbox-size, 21px)) / 2
  );
}
html body .am-embed.view-am .px-check-menu__control,
html body.theme-dark .am-embed.view-am .px-check-menu__control {
  --app-check-master-ring-left: calc((var(--tp-checkbox-size, 21px) - var(--px-check-hit, 26px)) / 2);
}

/* Каретка: подтяжка снята (в модерации она своя, -8px, — снимаем и её), а
   ширина ужата с 22px до 16px. Просвет между глифами — это сумма их полей
   внутри своих коробок, и другого рычага у него нет: двигать глиф внутри
   коробки нельзя, он перестанет стоять по центру своей заливки. Поэтому
   ужимаем обе коробки — хит-зону до 26px (поле 2.5px) и каретку до 16px
   (поле 2px): просвет 4.5px вместо 10.5px в начале, и при этом у стрелки
   снова есть поля, которых не было при каретке в 12px. */
/* Ширину хит-зоны задаём здесь же, хотя её и считает --px-check-hit: базовые
   правила видов прошивают 32px литералом, и от одного токена уехал бы только
   отступ (его формулы токен читают) — коробка осталась бы прежней, а галочка
   съехала бы с рельса.

   ВЫСОТА — рост связки (--app-check-master-ring-h), и она НЕ считается от
   --px-check-hit. Прокси и модерация писали height: var(--px-check-hit, 32px),
   то есть брали высоту из ширины; после того как канон ужал токен до 26px,
   у этих двух модулей хит-зона стала 26×26 при каретке 16×32 — заливка
   чекбокса не доставала до краёв обводки сверху и снизу, а курсор у верхней
   и нижней кромки её вообще не зажигал. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__check-hit,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__check-hit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: var(--px-check-hit, 26px) !important;
  min-width: var(--px-check-hit, 26px) !important;
  max-width: var(--px-check-hit, 26px) !important;
  height: var(--app-check-master-ring-h, 32px) !important;
  min-height: var(--app-check-master-ring-h, 32px) !important;
  max-height: var(--app-check-master-ring-h, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex: none !important;
  width: var(--app-check-master-caret-w, 16px) !important;
  min-width: var(--app-check-master-caret-w, 16px) !important;
  max-width: var(--app-check-master-caret-w, 16px) !important;
  height: var(--app-check-master-ring-h, 32px) !important;
  min-height: var(--app-check-master-ring-h, 32px) !important;
  max-height: var(--app-check-master-ring-h, 32px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--px-gmail-icon, #444746) !important;
  cursor: pointer !important;
}

/* Глиф каретки — 12px во всех девяти панелях. Заливка, а не обводка: общий
   слой gmail-бара кладёт stroke поверх fill, и стрелка читается жирнее. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret > svg,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret > svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Сам чекбокс — тот же глиф, что у строк: 21px, маска по состоянию, цвет
   сплошной --tp-checkbox-color. Прошиваем здесь, чтобы девятая панель не
   зависела от того, докопировали ли ей модульные правила маски. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: none !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Маска обрезает всё, что рисует сам input, поэтому цвет глифа — это его
     background-color, а не заливка svg. */
  background-color: var(--tp-checkbox-color, #444746) !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  /* Мастер не слоится галочкой-оверлеем (у него есть чёрточка), маску меняем
     штатно — и без перехода: подмена картинки не анимируется, а transition:
     all в модерации только держал лишний слушатель. */
  transition: none !important;
  cursor: pointer !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check:checked,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check:checked {
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check:indeterminate,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control .px-check-menu__check:indeterminate {
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}

/* ОБВОДКА. z-index 2 — поверх заливок и глифов; пересекается с ними только
   своей линией по краю, поэтому ничего не закрывает. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: var(--app-check-master-ring-left, 1.5px) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--app-check-master-ring-h, 32px) !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: var(--app-check-master-radius, 4px) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  /* Тот же такт, что у колец строк: --motion-state + --motion-ease. */
  transition: box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* ЗАЛИВКИ. Своя коробка у каждой ячейки, но вместе они закрывают всё поле
   внутри обводки: та же высота, наружные края вровень, стык без зазора.
   Меняется только цвет. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  width: auto !important;
  height: var(--app-check-master-ring-h, 32px) !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  /* Заливка обеих половин связки — это и есть наведение на каретку: своего
     фона ячейки не несут. Такт общий с иконками панели (--motion-ease-icon),
     обводке ::before выше он не нужен: она зажигается от активации, а не от
     курсора. */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__check-hit::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__check-hit::before {
  left: 0 !important;
  right: 0 !important;
  border-radius: var(--app-check-master-radius, 4px) 0 0 var(--app-check-master-radius, 4px) !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret::before {
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 var(--app-check-master-radius, 4px) var(--app-check-master-radius, 4px) 0 !important;
}

/* Сами ячейки фона не несут — он весь ушёл в ::before, иначе поверх заливки
   легла бы вторая, своей формы и своего размера. Глифы держим над заливкой. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret),
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret) {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret > svg,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > .px-check-menu__caret > svg {
  position: relative !important;
  z-index: 1 !important;
}

/* НАВЕДЕНИЕ ВНЕ АКТИВАЦИИ — обычный тон бара. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret):hover:not(:active)::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret):hover:not(:active)::before {
  background: var(--app-check-master-fill, rgba(68, 71, 70, 0.08)) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   «ДОБАВИТЬ ПРОКСИ» (18.10.2026) — окно-список по стандарту окон данных:
   вид даёт css/components/list-window.css и launch-window.css. Здесь
   остались правила, которые #px-add-modal делит с «Прокси аккаунта» (чипы
   протокола, подпись под полем): для этого окна они уже ничего не красят.
   ──────────────────────────────────────────────────────────────────────── */
/* ── Протокол: чипы 30px/r15 канона страниц запуска ── */
html body :is(#px-add-modal, #am-proxy-modal) .px-add-chips,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html body :is(#px-add-modal, #am-proxy-modal) .px-add-chip,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip {
  height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  color: #444746 !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#px-add-modal, #am-proxy-modal) .px-add-chip:hover,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip:hover {
  background: rgba(11, 87, 208, 0.06) !important;
}
/* Выбранная капсула держит синюю обводку, а не гасит её: рядом стоят
   невыбранные с серой рамкой, и на одной заливке выбор читался как «чуть
   светлее соседей». Рамка у всех капсул одна и та же по толщине — меняется
   только цвет, поэтому ряд не дёргается при переключении. */
html body :is(#px-add-modal, #am-proxy-modal) .px-add-chip.is-on,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip.is-on {
  background: rgba(11, 87, 208, 0.12) !important;
  border-color: #0b57d0 !important;
  color: #0b57d0 !important;
}
html body :is(#px-add-modal, #am-proxy-modal) .px-add-chip:focus-visible,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

html body :is(#px-add-modal, #am-proxy-modal) .px-field__hint,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-field__hint {
  margin-top: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #5f6368 !important;
}
html body :is(#px-add-modal, #am-proxy-modal) .px-field__hint code,
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-field__hint code,
  padding: 1px 5px !important;
  border-radius: 5px !important;
  background: #f1f3f4 !important;
  color: #3c4043 !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
}


/* ─── Раздел «Базы» → «Номера» ─────────────────────────────────────────
   Раскладку, панель и таблицу разделу дают правила соседей: их селекторы
   называют #pbl-* и #pbd-* наравне с #sbl-* и #ubs-*. Здесь остаётся
   только то, чего у соседей нет. */

/* Результат проверки — та же пилюля, что вердикт ИИ у чатов: колонки с
   короткими метками обязаны читаться как одна система. «Не проверен»
   намеренно без подложки: отсутствие результата — не пятый результат, а
   пустота. */
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-status,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-status--found {
  background: rgba(30, 142, 62, 0.12) !important;
  color: #1e8e3e !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--found {
  background: rgba(129, 201, 149, 0.16) !important;
  color: #81c995 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-status--bad {
  background: rgba(232, 113, 10, 0.14) !important;
  color: #b06000 !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--bad {
  background: rgba(253, 188, 100, 0.16) !important;
  color: #fdbc64 !important;
}
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-status--error {
  background: rgba(217, 48, 37, 0.12) !important;
  color: #c5221f !important;
}
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--error {
  background: rgba(242, 139, 130, 0.16) !important;
  color: #f28b82 !important;
}
/* «Нет в Telegram» — не беда и не ошибка, а обычный исход проверки:
   подложки у него нет, иначе половина базы светилась бы тревогой. */
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-status--none,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--none {
  padding: 0 !important;
  background: transparent !important;
  color: var(--tp-side-muted, #8b95b1) !important;
}

/* Premium — значок у имени, а не своя колонка. */
html body #view-userbase.view-userbase.view-userbase--v2 .pbd-premium,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-premium {
  color: #f2a33c !important;
  font-size: 12px !important;
}

/* Доля найденных рядом с их числом: «12» и «12 из 5000» — разные ответы. */
html body #view-userbase.view-userbase.view-userbase--v2 .ub2-count__sub,
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-count__sub {
  color: var(--tp-side-muted, #8b95b1) !important;
  font-size: var(--app-table-meta-size, 12px) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ═══════════════════════════════════════════════════════════════
   «ПРОКСИ АККАУНТА» — три способа в одном окне
   ───────────────────────────────────────────────────────────────
   Карточку, шапку, поля, пилюли и футер окно берёт у семьи addw
   (#px-add-modal / .newbase-modal — их селекторы перечисляют и это
   окно): та же работа, тот же язык. Своего здесь только раскладка
   режимов и список сохранённых прокси. Окно всегда светлое —
   канон addw, поэтому light == dark.
   ─────────────────────────────────────────────────────────────── */
html body #am-proxy-modal .amproxy__modes,
html body.theme-dark #am-proxy-modal .amproxy__modes {
  margin-bottom: 4px !important;
}
html body #am-proxy-modal .amproxy__pane,
html body.theme-dark #am-proxy-modal .amproxy__pane {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-height: 0 !important;
}
html body #am-proxy-modal .amproxy__pane[hidden],
html body.theme-dark #am-proxy-modal .amproxy__pane[hidden] {
  display: none !important;
}
html body #am-proxy-modal .amproxy__note,
html body.theme-dark #am-proxy-modal .amproxy__note {
  margin: 0 !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* Пилюли протокола стоят вплотную к полю, которое ими и правится: подписи
   над ними нет, и лишний зазор читался бы отдельной строкой ни о чём. */
html body #am-proxy-modal .amproxy__proto,
html body.theme-dark #am-proxy-modal .amproxy__proto {
  margin-bottom: -4px !important;
}
/* Список сохранённых больше не лежит коробкой в окне — он раскрывается из
   поля (канон раскрывающихся окон, строки рисует _canonSelectRow). Своих
   правил полю не нужно: оно одето как .px-select семьи addw. */
/* ═══════════════════════════════════════════════════════════════
   ЗАПОЛНЕНИЕ АККАУНТОВ — окно шаблонов и редакторы материала
   ───────────────────────────────────────────────────────────────
   Экран модуля живёт по общему канону .srch-page — своих правил ему
   не нужно. Здесь только то, чего у канона нет: содержимое окна
   шаблонов (два экрана — список и материал) и два редактора поверх
   него. Оболочка у всех трёх общая — addw, их id стоят в том же :is()
   выше по файлу, что и окна парсера с инвайтом.
   ═══════════════════════════════════════════════════════════════ */
html body :is(#pf-folder-modal, #pf-mat-modal, #pf-media-modal) .pf-screen,
html body.theme-dark :is(#pf-folder-modal, #pf-mat-modal, #pf-media-modal) .pf-screen {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
html body :is(#pf-folder-modal, #pf-mat-modal, #pf-media-modal) .pf-screen[hidden],
html body.theme-dark :is(#pf-folder-modal, #pf-mat-modal, #pf-media-modal) .pf-screen[hidden] {
  display: none !important;
}

/* Окно одного размера на оба экрана. Экрана здесь два — «Чем заполняем» и
   материал выбранного шаблона, — и меняются они ВНУТРИ окна, кнопкой
   «назад»: высоты 314 и 592 давали прыжок в 278px прямо под руками. Короб
   тела фиксирован, экраны и их списки встают в него и прокручиваются внутри
   (канон «Окно одного размера»).

   Число короба: подпись списка 20 + 12 + пять строк (5×60 + 4×2 = 308) =
   340. Пять строк — столько же, сколько видно в пикере баз. */
html body #pf-folder-modal,
html body.theme-dark #pf-folder-modal {
  --pff-row-h: 60px;
  --pff-rows: 5;
  --pff-body-h: calc(20px + 12px + var(--pff-row-h) * var(--pff-rows)
                     + 2px * (var(--pff-rows) - 1));
}
html body #pf-folder-modal .modal__body,
html body.theme-dark #pf-folder-modal .modal__body {
  flex: 0 1 auto !important;
  height: var(--pff-body-h) !important;
  min-height: 0 !important;
}
html body #pf-folder-modal .pf-screen,
html body.theme-dark #pf-folder-modal .pf-screen {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Строка шаблона: сама строка выбирает, кнопки в её конце — материал и
   удаление. Список занимает короб целиком и прокручивается внутри себя. */
html body #pf-folder-modal .pf-frows,
html body.theme-dark #pf-folder-modal .pf-frows {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  margin: 0 -8px !important;
  padding: 0 8px !important;
}
html body #pf-folder-modal .pf-frow,
html body.theme-dark #pf-folder-modal .pf-frow {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  border-radius: 12px !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body #pf-folder-modal .pf-frow:hover,
html body.theme-dark #pf-folder-modal .pf-frow:hover {
  background: #f1f3f4 !important;
}
html body #pf-folder-modal .pf-frow.is-on,
html body.theme-dark #pf-folder-modal .pf-frow.is-on {
  background: #d3e3fd !important;
}
html body #pf-folder-modal .pf-frow__pick,
html body.theme-dark #pf-folder-modal .pf-frow__pick {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 10px 4px 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body #pf-folder-modal .pf-frow__pick:focus-visible,
html body.theme-dark #pf-folder-modal .pf-frow__pick:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
}
/* Галочка выбора — пустой кружок, пока шаблон не взят. Так видно, что
   строка вообще выбирается, а не просто открывается. */
html body #pf-folder-modal .pf-frow__mark,
html body.theme-dark #pf-folder-modal .pf-frow__mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #747775 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: transparent !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease) !important;
}
html body #pf-folder-modal .pf-frow__mark svg,
html body.theme-dark #pf-folder-modal .pf-frow__mark svg {
  width: 13px !important;
  height: 13px !important;
}
html body #pf-folder-modal .pf-frow.is-on .pf-frow__mark,
html body.theme-dark #pf-folder-modal .pf-frow.is-on .pf-frow__mark {
  border-color: #0b57d0 !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
}
html body #pf-folder-modal .pf-frow__text,
html body.theme-dark #pf-folder-modal .pf-frow__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body #pf-folder-modal .pf-frow__name,
html body.theme-dark #pf-folder-modal .pf-frow__name {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #pf-folder-modal .pf-frow__sub,
html body.theme-dark #pf-folder-modal .pf-frow__sub {
  font-size: 13px !important;
  line-height: 18px !important;
  color: #444746 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Шаблон, в котором нет материала под включённый пункт, выбрать не
   запрещаем — говорим заранее, что запуск от него будет закрыт. */
html body #pf-folder-modal .pf-frow__sub.is-warn,
html body.theme-dark #pf-folder-modal .pf-frow__sub.is-warn {
  color: #b3261e !important;
}
html body #pf-folder-modal .pf-frow__act,
html body.theme-dark #pf-folder-modal .pf-frow__act {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #444746 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease) !important;
}
html body #pf-folder-modal .pf-frow__act:last-child,
html body.theme-dark #pf-folder-modal .pf-frow__act:last-child {
  margin-right: 6px !important;
}
html body #pf-folder-modal .pf-frow__act svg,
html body.theme-dark #pf-folder-modal .pf-frow__act svg {
  width: 18px !important;
  height: 18px !important;
}
html body #pf-folder-modal .pf-frow__act:hover,
html body.theme-dark #pf-folder-modal .pf-frow__act:hover {
  background: rgba(11, 87, 208, 0.10) !important;
  color: #0b57d0 !important;
}
html body #pf-folder-modal .pf-frow__act--danger:hover,
html body.theme-dark #pf-folder-modal .pf-frow__act--danger:hover {
  background: rgba(179, 38, 30, 0.10) !important;
  color: #b3261e !important;
}
html body #pf-folder-modal .pf-frow__act:focus-visible,
html body.theme-dark #pf-folder-modal .pf-frow__act:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
}
html body #pf-folder-modal .pf-frows__empty,
html body.theme-dark #pf-folder-modal .pf-frows__empty {
  padding: 24px 12px !important;
  color: #444746 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
}

/* ── Редактор списков ────────────────────────────────────────── */
html body #pf-mat-modal .pf-mat__lists,
html body.theme-dark #pf-mat-modal .pf-mat__lists {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
html body #pf-mat-modal .pf-mat__list,
html body.theme-dark #pf-mat-modal .pf-mat__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html body #pf-mat-modal .pf-mat__list-head,
html body.theme-dark #pf-mat-modal .pf-mat__list-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #444746 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
html body #pf-mat-modal .pf-mat__list-count,
html body.theme-dark #pf-mat-modal .pf-mat__list-count {
  color: #80868b !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
html body #pf-mat-modal .pf-mat__list textarea,
html body.theme-dark #pf-mat-modal .pf-mat__list textarea {
  min-height: 168px !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  resize: vertical !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body #pf-mat-modal .pf-mat__list textarea::placeholder,
html body.theme-dark #pf-mat-modal .pf-mat__list textarea::placeholder {
  color: #80868b !important;
}
html body #pf-mat-modal .pf-mat__list textarea:focus,
html body.theme-dark #pf-mat-modal .pf-mat__list textarea:focus {
  border-color: #0b57d0 !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
  outline: none !important;
}

/* ── Редактор медиа ──────────────────────────────────────────────
   Плитки шире списков, поэтому панель больше канонических 600px:
   в шесть столбцов видно, что лежит в шаблоне, а в четыре — уже нет.

   Окно одно на три модуля: «Заполнение аккаунтов» (#pf-media-modal),
   «Рассылка по группам» (#media-modal) и «Рассылка по ЛС»
   (#media-modal). Вопрос у них один — какие файлы прикрепляем, —
   поэтому и выглядят одинаково; новому такому окну добавлять id в
   :is(), а не копировать блок. Кнопку загрузки
   правило узнаёт по классу .pf-media__upload: пока она опознавалась
   по for="pf-media-upload", вторая кнопка оставалась мелкой
   .btn--sm из общей темы. */
html body :is(#pf-media-modal, #media-modal) .modal__panel,
html body.theme-dark :is(#pf-media-modal, #media-modal) .modal__panel {
  width: 720px !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__toolbar,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__upload,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload,
html body :is(#pf-media-modal, #media-modal) .pf-media__select-all,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid #c4c7c5 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__upload:hover,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload:hover,
html body :is(#pf-media-modal, #media-modal) .pf-media__select-all:hover,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: #1f1f1f !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__upload svg,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload svg,
html body :is(#pf-media-modal, #media-modal) .pf-media__select-all svg,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all svg {
  width: 16px !important;
  height: 16px !important;
  color: #0b57d0 !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__select-all.is-active,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all.is-active {
  border-color: #d3e3fd !important;
  background: #d3e3fd !important;
  color: #0b57d0 !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__count,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__count {
  color: #444746 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__icon-btn,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__icon-btn {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #b3261e !important;
  box-shadow: none !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__icon-btn:hover,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__icon-btn:hover {
  background: rgba(179, 38, 30, 0.10) !important;
}
/* «Удалить выбранные» появляется только вместе с выделением, и прячет её
   атрибут hidden. Но display панели (см. .pf-media__toolbar выше по файлу)
   бьёт скрытие браузера, и красная корзина стояла в панели всегда — во всех
   трёх окнах сразу. Скрытое в панели гасим явно. */
html body :is(#pf-media-modal, #media-modal) .pf-media__toolbar [hidden],
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__toolbar [hidden] {
  display: none !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__grid,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__grid {
  gap: 8px !important;
  max-height: 46vh !important;
  overflow-y: auto !important;
}
/* Плитка: у «Заполнения» она .pf-media__tile, у рассылки — .media-pick__tile
   (в ней ещё и вес файла). Коробка у обеих одна, поэтому и правило одно. */
html body :is(#pf-media-modal, #media-modal) :is(.pf-media__tile, .media-pick__tile),
html body.theme-dark :is(#pf-media-modal, #media-modal) :is(.pf-media__tile, .media-pick__tile) {
  border: 1px solid #e6e8ee !important;
  border-radius: 12px !important;
  background: #f1f3f4 !important;
}
html body :is(#pf-media-modal, #media-modal) .media-pick__tile:hover,
html body.theme-dark :is(#pf-media-modal, #media-modal) .media-pick__tile:hover {
  border-color: #0b57d0 !important;
}
html body :is(#pf-media-modal, #media-modal) :is(.pf-media__tile, .media-pick__tile).is-checked,
html body.theme-dark :is(#pf-media-modal, #media-modal) :is(.pf-media__tile, .media-pick__tile).is-checked {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__tile.is-checked .pf-media__tile-check,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__tile.is-checked .pf-media__tile-check {
  background: #0b57d0 !important;
  border-color: #0b57d0 !important;
}
html body :is(#pf-media-modal, #media-modal) :is(.pf-media__tile-audio, .media-pick__tile-ico),
html body.theme-dark :is(#pf-media-modal, #media-modal) :is(.pf-media__tile-audio, .media-pick__tile-ico) {
  color: #0b57d0 !important;
}
html body :is(#pf-media-modal, #media-modal) .pf-media__empty,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__empty {
  padding: 32px 12px !important;
  border: 0 !important;
  color: #444746 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

/* ── ПРАВЫЙ КОРИДОР СТРАНИЦЫ — ОДИН НА ВСЕ МОДУЛИ ──────────────────────
   Эталон — «Аккаунты» и «Прокси»: их содержимое кончается за 20px до края
   окна. Там эти 20px набираются сами собой. Страница не крутится
   (html/body { overflow-y: hidden } у видов со своей прокруткой, см. выше
   по файлу), обе застолблённые полосы — и у html, и у body — остаются
   пустым запасом, и правый край таблицы встаёт на 20px от окна.

   На всех остальных модулях крутится документ. Полосу html занимает
   настоящая каретка, а body при overflow-y: visible гаттер не резервирует
   вовсе — и карточки упирались прямо в каретку, на 10px правее таблиц.
   Разъезд был виден при любом переходе «Аккаунты → экран запуска».

   Недостающие 10px добираем ВНЕШНИМ отступом, и по двум причинам сразу.
   Во-первых, padding у `.main` расписан выше по файлу шорткатом с
   !important, и обычный longhand до страницы не доходит вовсе — на этом
   уже спотыкалась модерация, которой пришлось повторять форму записи с
   !important (см. moderation.css). Во-вторых, содержимое колонки тянется
   на всю её ширину, и у липкой полосы запуска своя подложка: внутренний
   отступ разрезал бы её белым, а не подвинул полосу целиком.

   Видам, которые прокрутку выключают, коридор уже застолбил body-шный
   scrollbar-gutter — им отступ обнуляем, иначе уедут на 30px. Список
   ровно тот же, что у правил overflow-y: hidden выше по файлу.

   Только от 901px: ниже сайдбар складывается, `.main` занимает всю
   ширину с `width: 100%`, и внешний отступ вылез бы за край окна, а не
   отодвинул содержимое. Там у страницы свои поля (16px / 10px). */
@media (min-width: 901px) {
  html body .main,
  html body.theme-dark .main {
    margin-right: var(--app-page-gutter, 10px) !important;
  }

  html body:has(main.view-am:not([hidden])) .main,
  html body:has(main.view-tasks:not([hidden])) .main,
  html body:has(main.view-proxy:not([hidden])) .main,
  html body:has(#view-userbase:not([hidden])) .main {
    margin-right: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   КАНОН РАСКРЫВАЮЩИХСЯ ОКОН — ВНЕ СПИСОЧНЫХ ТАБЛИЦ
   ──────────────────────────────────────────────────────────────────────────
   Эталон — меню выбора страны в окне «Привязать прокси»
   (#pick-bind-modal .pick-bind__country-menu): белая карточка r8 с рамкой
   #dadce0 и мягкой тенью, внутри — строки 32px с полями 6/8 и скруглением 6.

   ГРАНИЦА. Канон держит окна ВНЕ списочных таблиц: меню топбара
   («Помощь», «Профиль»), пилюли выбора базы и получателей на страницах
   запуска (.bc-recipients), меню ключей поиска (#srch-kw-menu), выбор
   настроек модерации (.md-scope__pop), список ролей в модалке и сам эталон.

   Окна СПИСОЧНЫХ ТАБЛИЦ (аккаунты, прокси, базы, задачи, модерация и
   встроенная таблица окна запуска) каноном НЕ красятся и оставлены на
   прежней Gmail-форме: белая карточка r4 без рамки с трёхслойной
   Material-тенью, строки во всю ширину окна с подложкой #EEEEEE, шрифт
   14px. Это «Фильтры» и их список значений, «…», меню выделения,
   «Диапазон», «Колонки таблицы», «Показывать по», сведения в подвале и
   меню действий над строками (.am-actions-menu / .am-actions-fly).
   Пользователь оставил их прежними намеренно — не переводить на --pop-*.

   Токены — в css/tokens.css; это единственный источник значений для своей половины.
   Тёмная тема переопределяет те же токены на body.theme-dark — отдельных
   «тёмных» правил таким окнам не нужно.

   Ширина: окно не бывает уже своей кнопки. Правило пишется как
   `min-width: max(<своя минимальная>, var(--pop-anchor-w, 0px))`, а сам
   --pop-anchor-w кладёт на окно JS (positionToolbarPopover → см. app.js)
   от ширины родительской иконки. Окна, которые лежат в обёртке размером с
   кнопку (.bc-recipients, .pick-bind__country-picker), берут ту
   же ширину через `max(<своя>, 100%)` — JS им не нужен.

   Зазор до кнопки — var(--pop-gap): 4px, как в эталоне. Координаты окон
   position: fixed по-прежнему считает JS (канон привязки к своей иконке).

   Раскрытие тоже общее: pop-canon-in — проявление с выездом из-под своей
   кнопки за --motion-draw кривой --motion-ease-enter (MOTION.md 3.4), и
   зеркальное pop-canon-in-up у окна, вставшего НАД кнопкой (класс
   is-above). Своих keyframes окно семьи не заводит.
   ═══════════════════════════════════════════════════════════════════════ */

html body.theme-dark {
  --pop-bg: var(--bg-card, #181818);
  --pop-border-color: var(--border-strong, #2a3140);
  --pop-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --pop-text: var(--text, #e8eaed);
  --pop-muted: #9aa0a6;
  --pop-sep: var(--border-strong, #2a3140);
  --pop-item-hover: rgba(232, 234, 237, 0.08);
  --pop-item-sel-bg: rgba(11, 87, 208, 0.36);
  --pop-item-sel-fg: #a8c7fa;
}

/* ── Раскрытие: одно на всю семью ──────────────────────────────────────
   MOTION.md 3.4: окно проявляется и выезжает ИЗ-ПОД своей кнопки за
   --motion-draw кривой --motion-ease-enter. Анимация была ровно у одного
   окна семьи (список нативного селекта), и остальные — меню «Помощь» и
   «Профиль», получатели рассылки, ключи поиска, настройки модерации, окна
   редактора сообщения и сам эталон — вставали рывком: одно и то же меню
   двигалось по-разному в зависимости от того, где его открыли.

   Правило общего элемента живёт на его классе, а не переписывается под
   каждое окно, поэтому семья перечислена здесь одним списком. Карточка
   между показами остаётся в DOM — перезапускать анимацию из JS не нужно,
   это делает сама смена display у [hidden].

   `transform` на окне безопасен: `position: fixed` внутри этих карточек не
   живёт (ловушка containing block — см. канон привязки к своей иконке). */
html body .bc-recipients__menu,
html body #pick-bind-modal .pick-bind__country-menu,
html body .md-scope__pop,
html body .msge-pop,
html body #pick-select-pop.pick-select__pop {
  animation: pop-canon-in var(--motion-draw, 200ms)
             var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both !important;
}

@keyframes pop-canon-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Снизу не поместилось — окно встало над кнопкой, и выезд зеркальный:
   список всегда выходит ИЗ-ПОД своей кнопки, а не навстречу ей. */
html body .bc-recipients__menu.is-above,
html body #pick-bind-modal .pick-bind__country-menu.is-above,
html body .md-scope__pop.is-above,
html body .msge-pop.is-above,
html body #pick-select-pop.pick-select__pop.is-above {
  animation-name: pop-canon-in-up !important;
}

@keyframes pop-canon-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Эталон канона. Живёт здесь, а не в блоке #pick-bind-modal выше, чтобы
   его нельзя было поправить «локально» и незаметно увести от остальных. */
html body #pick-bind-modal .pick-bind__country-menu,
html body.theme-dark #pick-bind-modal .pick-bind__country-menu {
  top: calc(100% + var(--pop-gap, 4px)) !important;
  min-width: max(148px, 100%) !important;
  padding: var(--pop-pad, 6px) !important;
  border: 1px solid var(--pop-border-color, #dadce0) !important;
  border-radius: var(--pop-radius, 8px) !important;
  background: var(--pop-bg, #ffffff) !important;
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18)) !important;
}
/* Окно эталона лежит в обёртке кнопки, а карточка режет по своим краям
   (.addw — overflow: hidden), поэтому раскрываться всегда вниз оно не может:
   у нижнего края формы список не прокрутился бы, а пропал. Сторону и потолок
   высоты считает JS (setCountryMenuOpen), здесь — зеркальная привязка. */
html body #pick-bind-modal .pick-bind__country-menu.is-above,
html body.theme-dark #pick-bind-modal .pick-bind__country-menu.is-above {
  top: auto !important;
  bottom: calc(100% + var(--pop-gap, 4px)) !important;
}
html body #pick-bind-modal .pick-bind__country-option,
html body.theme-dark #pick-bind-modal .pick-bind__country-option {
  min-height: var(--pop-item-h, 32px) !important;
  padding: var(--pop-item-pad, 6px 8px) !important;
  border-radius: var(--pop-item-radius, 6px) !important;
  color: var(--pop-text, #1f1f1f) !important;
  font-size: var(--pop-font-size, 13px) !important;
  transition: background-color var(--motion-fast, 100ms)
              var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-bind-modal .pick-bind__country-option:hover,
html body #pick-bind-modal .pick-bind__country-option:focus-visible,
html body.theme-dark #pick-bind-modal .pick-bind__country-option:hover,
html body.theme-dark #pick-bind-modal .pick-bind__country-option:focus-visible {
  background: var(--pop-item-hover, #f1f3f4) !important;
}
html body #pick-bind-modal .pick-bind__country-option.is-selected,
html body.theme-dark #pick-bind-modal .pick-bind__country-option.is-selected {
  background: var(--pop-item-sel-bg, #d3e3fd) !important;
  color: var(--pop-item-sel-fg, #0b57d0) !important;
}

/* ── Список нативного <select> ─────────────────────────────────────────
   Окно выбора нативного селекта рисует система: прямые углы, свои строки
   и никакой анимации — единственное окно в программе, до которого канон
   не дотягивался ни одним правилом. Нативное окно гасим в JS, а вместо
   него раскрываем эту карточку: та же форма, что у эталона выше, те же
   строки 32px и та же ширина «не уже своего поля».

   Разметку кладёт в body openCanonSelectPop (app.js) — окно перекрывает
   карточку модалки, поэтому z-index берём выше слоя модалок (500). */
html body #pick-select-pop.pick-select__pop,
html body.theme-dark #pick-select-pop.pick-select__pop {
  position: fixed !important;
  z-index: 760 !important;
  box-sizing: border-box !important;
  /* Ширина списка = ширина поля, из которого он раскрылся: не уже (канон
     окон) и не шире. Длинная подпись раздвигала окно до 480px, и список
     прокси вылезал из-под своего поля на пол-карточки — ширину задаёт
     пункт, а не содержимое, а не поместившееся ужимается многоточием. */
  min-width: max(160px, var(--pop-anchor-w, 0px)) !important;
  max-width: min(max(160px, var(--pop-anchor-w, 480px)), calc(100vw - 32px)) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: var(--pop-pad, 6px) !important;
  border: 1px solid var(--pop-border-color, #dadce0) !important;
  border-radius: var(--pop-radius, 8px) !important;
  background: var(--pop-bg, #ffffff) !important;
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18)) !important;
  /* Раскрытие — общее для всей семьи (pop-canon-in), объявлено выше вместе
     с токенами. Своей копии keyframes у окна больше нет: она и была тем
     единственным экземпляром, от которого отставали остальные окна. */
}
html body #pick-select-pop.pick-select__pop[hidden] { display: none !important; }

html body #pick-select-pop .pick-select__option,
html body.theme-dark #pick-select-pop .pick-select__option {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--pop-item-h, 32px) !important;
  padding: var(--pop-item-pad, 6px 8px) !important;
  border: 0 !important;
  border-radius: var(--pop-item-radius, 6px) !important;
  background: transparent !important;
  color: var(--pop-text, #1f1f1f) !important;
  font-family: var(--app-font) !important;
  font-size: var(--pop-font-size, 13px) !important;
  line-height: 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms)
              var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #pick-select-pop .pick-select__option:hover,
html body #pick-select-pop .pick-select__option:focus-visible,
html body.theme-dark #pick-select-pop .pick-select__option:hover,
html body.theme-dark #pick-select-pop .pick-select__option:focus-visible {
  background: var(--pop-item-hover, #f1f3f4) !important;
  outline: none !important;
}
html body #pick-select-pop .pick-select__option.is-selected,
html body.theme-dark #pick-select-pop .pick-select__option.is-selected {
  background: var(--pop-item-sel-bg, #d3e3fd) !important;
  color: var(--pop-item-sel-fg, #0b57d0) !important;
  font-weight: 500 !important;
}
html body #pick-select-pop .pick-select__option[disabled],
html body.theme-dark #pick-select-pop .pick-select__option[disabled] {
  color: var(--pop-muted, #5f6368) !important;
  cursor: default !important;
}
html body #pick-select-pop .pick-select__option[disabled]:hover,
html body.theme-dark #pick-select-pop .pick-select__option[disabled]:hover {
  background: transparent !important;
}
/* Подпись строки — своя лента: длинная (прокси с логином и паролем) она
   ужимается многоточием, а не растягивает окно и не переносится. Целиком
   её показывает общая подсказка title. */
html body #pick-select-pop .pick-select__label,
html body.theme-dark #pick-select-pop .pick-select__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #pick-select-pop .pick-select__label .fi {
  width: 16px !important;
  height: 12px !important;
  border-radius: 2px !important;
  vertical-align: -1px !important;
}
/* Строка со значками (.pxpick-act) держит под них место всегда — иначе
   подпись прыгала бы при наведении. Сами значки лежат поверх строки,
   поэтому подсветку строки под курсором возвращаем ей руками. */
html body #pick-select-pop .pxpick-row .pick-select__option,
html body.theme-dark #pick-select-pop .pxpick-row .pick-select__option {
  padding-right: 62px !important;
}
/* Строка с меткой состояния («свободен», «занят», «Текущий») держит место и
   под неё: метка шире пары значков, и подпись заезжала бы под слово. */
html body #pick-select-pop .pxpick-row[data-pxpick-tag] .pick-select__option,
html body.theme-dark #pick-select-pop .pxpick-row[data-pxpick-tag] .pick-select__option {
  padding-right: 96px !important;
}
html body #pick-select-pop .pxpick-row:hover .pick-select__option:not(.is-selected),
html body.theme-dark #pick-select-pop .pxpick-row:hover .pick-select__option:not(.is-selected) {
  background: var(--pop-item-hover, #f1f3f4) !important;
}
/* Поле с раскрытым списком светится так же, как поле в фокусе: нативной
   подсветки открытого селекта у нас больше нет. Класс свой, а не общий
   .is-open: тот уже занят подвальным «Показывать: N» со своим цветом. */
html body select.is-pick-open,
html body.theme-dark select.is-pick-open { border-color: #0b57d0 !important; }



/* ══════════════════════════════════════════════════════════════════════════
   ОКНО ПЛАНИРОВЩИКА — то же поколение, что окна-формы программы

   Эталон — «Добавить прокси» и «Новый список пользователей»: белая карточка
   r20 с мягкой тенью, шапка 23px/500 без разделителя и круглый крестик,
   подвал с кнопками-пилюлями 40px/r20 на #0b57d0.

   Своих правил у окна было полтора десятка, и все прошлого поколения:
   карточка r10 с тяжёлой тенью, заголовок 18px/700, линии под шапкой и над
   подвалом, поля 38px/r5 и синие кнопки 38px/r6 #3b82f6. Они перебивали
   общий слой, и окно выглядело чужим среди своих же.

   Отступы секций сюда не входят: их задаёт СТАНДАРТ ОТСТУПОВ МОДАЛЬНЫХ ОКОН
   выше по файлу — безымянным селектором, поэтому рамку 24/25/16/24 окно
   получает само.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Панель ─────────────────────────────────────────────────────────── */
/* Окно одного размера при любом наполнении формы. Высоту держит короб тела
   (--schd-body-h), а не содержимое: панель = шапка + короб + подвал и в
   пустом состоянии, и в самом полном. До этого тело росло по содержимому, и
   окно дёргалось на каждый ввод — сводка внизу растёт с одной строки до трёх,
   состав прогона у разных модулей занимает от одной строки до трёх. Читать
   форму на прыгающем окне нельзя — тот же диагноз и то же лечение, что у
   окон-списков (канон «Окно-список одного размера»).

   Число короба — самое высокое ОБЫЧНОЕ состояние формы, посчитанное по её
   собственным строкам, а не подобранное на глаз: состав 2 строки (60) + 16
   + подсказка 3 строки (57) + 16 + поля (309) + 16 + сводка 2 строки (60)
   = 534. Всё, что выше (состав в три строки), уезжает под прокрутку: короб
   под него не растёт. */
html body #schedule-modal .schedule-modal__panel,
html body.theme-dark #schedule-modal .schedule-modal__panel {
  --schd-body-h: 534px;
  box-sizing: border-box !important;
  width: min(440px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  font-family: var(--app-font) !important;
  overflow: hidden !important;
}

html body #schedule-modal .schedule-modal__panel *,
html body.theme-dark #schedule-modal .schedule-modal__panel * {
  font-family: inherit !important;
}

/* ── Шапка: заголовок и круглый крестик, без разделителя ────────────── */
html body #schedule-modal .schedule-modal__head,
html body.theme-dark #schedule-modal .schedule-modal__head {
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #schedule-modal .schedule-modal__title,
html body.theme-dark #schedule-modal .schedule-modal__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: #1f1f1f !important;
  text-align: left !important;
}

html body #schedule-modal .schedule-modal__close,
html body.theme-dark #schedule-modal .schedule-modal__close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5f6368 !important;
  box-shadow: none !important;
}

html body #schedule-modal .schedule-modal__close:hover {
  background: #f1f3f4 !important;
  color: #1f1f1f !important;
}

html body #schedule-modal .schedule-modal__close svg,
html body.theme-dark #schedule-modal .schedule-modal__close svg {
  width: 18px !important;
  height: 18px !important;
}

/* ── Тело: короб фиксированной высоты, колонка с шагом 16px ─────────── */
/* Короб не растёт и не сжимается под содержимое (flex: 0 1 auto + height):
   расти ему запрещено, а сжиматься он будет только под потолком 86vh — на
   экране, где окно целиком не помещается.

   Про полосу прокрутки здесь ни строки: жёлоб, проявление ползунка и
   возврат правой рамки дал общий слой (блок «ПОЛОСА ПРОКРУТКИ В ОКНАХ» в
   конце файла). Своей копии этих правил у окна быть не должно. */
html body #schedule-modal .schedule-modal__body,
html body.theme-dark #schedule-modal .schedule-modal__body {
  flex: 0 1 auto !important;
  height: var(--schd-body-h) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f1f1f !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body #schedule-modal .schedule-modal__hint,
html body.theme-dark #schedule-modal .schedule-modal__hint {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #5f6368 !important;
}

/* ── Поля: 40px, r8, #dadce0, фокус #0b57d0 ─────────────────────────── */
html body #schedule-modal .schedule-grid,
html body.theme-dark #schedule-modal .schedule-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
}

html body #schedule-modal .schedule-field,
html body.theme-dark #schedule-modal .schedule-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html body #schedule-modal .schedule-field .px-field__label,
html body.theme-dark #schedule-modal .schedule-field .px-field__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #1f1f1f !important;
}

html body #schedule-modal .schedule-field .px-input,
html body.theme-dark #schedule-modal .schedule-field .px-input {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html body #schedule-modal .schedule-field .px-input:focus {
  outline: none !important;
  border-color: #0b57d0 !important;
  box-shadow: none !important;
}

/* Подсказка под полем — там, где у значения есть особое прочтение: ноль
   запусков значит «без остановки», пустая граница — «перерыв ровный», пустое
   время — «начать сразу». Без строки под полем это знание жило бы только в
   сводке внизу, то есть после того, как человек уже набрал число. */
html body #schedule-modal .schedule-field__hint,
html body.theme-dark #schedule-modal .schedule-field__hint {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #5f6368 !important;
}

/* Перерыв — промежуток: два числа через тире, единица за вторым. Ровно так
   его набирают на странице модуля (.cln-range, «Задержка между
   приглашениями»), и промежуток не может выглядеть в окне иначе, чем на
   странице. Подписей «от / до» здесь поэтому нет: их работу делает тире. */
html body #schedule-modal .schedule-range,
html body.theme-dark #schedule-modal .schedule-range {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body #schedule-modal .schedule-range__sep,
html body.theme-dark #schedule-modal .schedule-range__sep,
html body #schedule-modal .schedule-range__suffix,
html body.theme-dark #schedule-modal .schedule-range__suffix {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
}

html body #schedule-modal .schedule-range .px-input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Календарь в поле времени — как у фильтра задач (.tm-datepop__input):
   значок кликабелен и слегка приглушён. */
html body #schedule-modal .schedule-field__moment::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  opacity: .7 !important;
}

html body #schedule-modal .schedule-field[hidden] { display: none !important; }

/* ── Две плашки: состав прогона и что получится из расписания ───────── */
/* Вопросы разные — и вид разный: состав нейтрален, расписание подсвечено
   акцентом, потому что это и есть ответ окна. */
html body #schedule-modal .schedule-compose,
html body.theme-dark #schedule-modal .schedule-compose {
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  background: #f8f9fa !important;
  color: #1f1f1f !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html body #schedule-modal .schedule-summary,
html body.theme-dark #schedule-modal .schedule-summary {
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #d3e3fd !important;
  border-radius: 8px !important;
  background: #e8f0fe !important;
  color: #1f1f1f !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html body #schedule-modal .schedule-compose[hidden] { display: none !important; }

/* ── Подвал: кнопки-пилюли 40px/r20 ─────────────────────────────────── */
html body #schedule-modal .schedule-modal__foot,
html body.theme-dark #schedule-modal .schedule-modal__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #schedule-modal .schedule-modal__foot .btn,
html body.theme-dark #schedule-modal .schedule-modal__foot .btn {
  min-width: 64px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

html body #schedule-modal .schedule-modal__foot .btn--ghost,
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--ghost {
  padding: 0 12px !important;
  background: transparent !important;
  color: #0b57d0 !important;
}

html body #schedule-modal .schedule-modal__foot .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: transparent !important;
  color: #0b57d0 !important;
}

html body #schedule-modal .schedule-modal__foot .btn--primary,
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
}

html body #schedule-modal .schedule-modal__foot .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЖУРНАЛ СОЗДАННЫХ ЧАТОВ — вход на странице модуля и части ячеек таблицы.

   Оболочка таблицы (карточка, gmail-бар, строки, чекбоксы) не описана здесь
   ни строкой: экран носит класс .view-moderation и получает её из канона
   списочных таблиц целиком — тот же приём, что у списка групп модерации. В
   этом блоке только то, чего у канона нет: вход и содержимое ячеек.

   .cc-made — вход на экран со страницы запуска. Тот же элемент, что .md-bit
   у модерации; своя разметка потому, что тот класс живёт под .md-page и на
   своих токенах. Понадобится третьему модулю — класс делаем общим, а не
   третью копию (канон «Общий элемент — на класс, не на вид»).
   ══════════════════════════════════════════════════════════════════════════ */
html body .srch-page .cc-made,
html body.theme-dark .srch-page .cc-made {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html body .srch-page .cc-made__main,
html body.theme-dark .srch-page .cc-made__main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--srch-outline, #c4c7c5) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  color: var(--srch-ink, #1f1f1f) !important;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body .srch-page .cc-made__main:hover {
  background: var(--srch-hover, #f6f8fc) !important;
  border-color: var(--srch-accent, #0b57d0) !important;
}
html body .srch-page .cc-made__main:focus-visible {
  outline: 2px solid var(--srch-accent, #0b57d0) !important;
  outline-offset: 2px !important;
}
html body .srch-page .cc-made__ico,
html body.theme-dark .srch-page .cc-made__ico {
  display: inline-flex !important;
  flex: none !important;
  color: var(--srch-accent, #0b57d0) !important;
}
html body .srch-page .cc-made__ico svg { width: 20px !important; height: 20px !important; }
html body .srch-page .cc-made__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
html body .srch-page .cc-made__label,
html body.theme-dark .srch-page .cc-made__label {
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--srch-desc, #444746) !important;
}
html body .srch-page .cc-made__value,
html body.theme-dark .srch-page .cc-made__value {
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--srch-ink, #1f1f1f) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body .srch-page .cc-made__go,
html body.theme-dark .srch-page .cc-made__go {
  display: inline-flex !important;
  flex: none !important;
  color: var(--srch-ink-mute, #444746) !important;
}
html body .srch-page .cc-made__go svg { width: 18px !important; height: 18px !important; }

/* ── Части ячеек таблицы ── */
html body #view-creator-chats .ccc-name-cell__num {
  color: var(--text-light, #80868b) !important;
  font-variant-numeric: tabular-nums !important;
  flex: none !important;
}
html body #view-creator-chats .ccc-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
html body #view-creator-chats .ccc-mute { color: var(--text-mute, #5f6368) !important; }
/* Копируемое значение выглядит ссылкой, но ею не является: клик кладёт текст
   в буфер, а не открывает браузер. */
html body #view-creator-chats .ccc-copy {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font: inherit !important;
  color: var(--g-primary, #0b57d0) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}
html body #view-creator-chats .ccc-copy:is(:hover, :focus-visible) {
  text-decoration: underline !important;
}
/* Чат, в который нельзя войти снаружи: не ошибка прогона, но и не норма —
   тон предупреждения, а не красный. */
html body #view-creator-chats .ccc-nolink {
  color: var(--g-warn-ink, #b06000) !important;
  font-size: 13px !important;
}
html body #view-creator-chats .ccc-owner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
/* «Вышел» — не состояние аккаунта, а свойство ЭТОГО чата: создатель покинул
   его, и выданная им ссылка может быть отозвана вместе с правами. */
html body #view-creator-chats .ccc-left {
  flex: none !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  background: var(--g-warn-bg, #fef7e0) !important;
  color: var(--g-warn-ink, #b06000) !important;
  font-size: 11px !important;
  line-height: 16px !important;
}
html body #view-creator-chats .ccc-kind { color: var(--text-mute, #5f6368) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА СПИСОЧНЫХ ТАБЛИЦ — ОБЩИЙ КОНТРАКТ
   ──────────────────────────────────────────────────────────────────────────
   Таблице, которой не хватило ширины, колонки больше не сжимают: она едет
   вбок. Родная полоса .am-table-scroll для этого не годится — короб высотой
   во весь список, и полоса нарисована под последней строкой, за два экрана
   от глаз (вертикально листается .am-table-shell). Поэтому полосу заводит
   общий модуль в app.js (блок «ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА СПИСОЧНЫХ ТАБЛИЦ»):
   узкий короб .am-hscroll сразу за таблицей с распоркой .am-hscroll__rail во
   всю её ширину внутри.

   Короб липнет к низу оболочки, поэтому стоит у нижней кромки списка на
   любой прокрутке, а на коротком списке садится прямо под таблицей. Правило
   пишем на класс, а не на вид: полоса одинакова у аккаунтов, прокси, задач,
   баз и модерации.

   Геометрия одним токеном: --am-hscroll-caret — каретка канона списочных
   таблиц, высота короба на 1px распорки больше. */
html body .am-hscroll {
  --am-hscroll-caret: 9px;
  --am-hscroll-h: calc(var(--am-hscroll-caret) + 1px);
  position: sticky;
  bottom: 0;
  z-index: 40;
  flex: 0 0 auto;
  width: 100%;
  height: var(--am-hscroll-h);
  min-height: var(--am-hscroll-h);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  background: var(--bg-card, #ffffff);
  /* Полоса лежит поверх последней строки — лёгкая тень отделяет её от неё
     так же, как поднятый тулбар (.is-scroll-raised) отделён от строк. */
  box-shadow: 0 -2px 3px -3px rgba(0, 0, 0, 0.28);
}
/* display: flex/block выше перебил бы браузерное [hidden] { display: none } —
   таблица влезла целиком, полосы быть не должно. */
html body .am-hscroll[hidden] {
  display: none !important;
}
html body .am-hscroll .am-hscroll__rail {
  height: 1px;
}
/* Каретка — та же «гугловская», что у тела списочной таблицы: квадратный
   бегунок #cccccc с рамкой, дорожка проступает только под курсором.

   Цвет каретки задаёт ТОЛЬКО блок ::-webkit-scrollbar ниже, а `scrollbar-color`
   здесь обязан быть `auto`. С Chromium 121 любое другое его значение переводит
   короб на системную полосу, и весь ::-webkit-scrollbar пропускается целиком:
   каретка выходит системной — 15px со стрелками, — а короб канона высотой
   10px обрезает её посередине. Своего цвета мы не ставим, но выше по файлу
   стоит общее правило `html, body, *`, поэтому от него нужно отписаться явно.

   `scrollbar-width: auto` — значение по умолчанию: оно ничего не отключает и
   отменяет `thin` из того же общего правила (с `thin` Chromium рисует узкую
   системную полосу вместо каретки канона). */
html body .am-hscroll {
  scrollbar-width: auto;
  scrollbar-color: auto;
}
html body .am-hscroll::-webkit-scrollbar {
  height: var(--am-hscroll-caret);
  width: var(--am-hscroll-caret);
}
html body .am-hscroll::-webkit-scrollbar-track,
html body .am-hscroll::-webkit-scrollbar-track-piece {
  background: transparent;
  border-radius: 0;
  margin-inline: 0;
}
html body .am-hscroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-clip: border-box;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  /* верх / право / низ / лево */
  border-color: #b7b7b7 #b7b7b7 transparent #b7b7b7;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
  border-radius: 0;
  min-width: 40px;
}
html body .am-hscroll::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
  border-color: #656565 #656565 #cacaca #656565;
}
html body .am-hscroll:hover::-webkit-scrollbar-track,
html body .am-hscroll:hover::-webkit-scrollbar-track-piece {
  background-color: #f2f2f2;
}
html body .am-hscroll::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}
/* Пока полосу рисует .am-hscroll, родная полоса короба не нужна: иначе на
   самом низу списка их две, одна над другой — ровно то, что видно в конце
   любой широкой таблицы.

   Гасим двумя способами сразу. Одной webkit-строки мало: у короба таблицы
   стоит `scrollbar-color` (блоки скроллбаров таблиц выше), а с Chromium 121
   это выключает весь ::-webkit-scrollbar — правило `height: 0` до полосы не
   доходит, и вторая полоса остаётся на месте. Стандартное `scrollbar-width`
   доходит: короб по-прежнему листается (Shift + колёсико, тачпад), но своей
   полосы не рисует. `!important` обязателен — те же блоки ставят коробу
   `scrollbar-width: auto`, а один из них (базы) адресуется через id и по
   специфичности выше.

   Вертикальной полосы у короба с зеркалом нет по построению: зеркало
   заводится только тогда, когда короб ВЫШЕ оболочки и листает его она
   (см. tableHScrollApply в app.js). Webkit-строку оставляем ради движков,
   где стандартного свойства ещё нет (WebKit на macOS). */
html body .am-table-scroll.has-hscroll {
  scrollbar-width: none !important;
}
html body .am-table-scroll.has-hscroll::-webkit-scrollbar:horizontal {
  height: 0;
}
/* Шестерёнка «Настроить колонки» у широкой таблицы. Она прижата к правому
   краю таблицы, а он уехал за экран — вместе с единственным способом убрать
   лишние колонки. Сдвиг --app-table-gear-shift (его ведёт tableHScrollGear в
   app.js) возвращает кнопку к правому краю ВИДИМОЙ части: сколько осталось
   прокрутить вправо, на столько кнопка и смещается влево. На полностью
   прокрученной таблице сдвиг нулевой, и кнопка стоит там же, где всегда.

   Подложка под кнопкой — фон шапки: кнопка едет по чужим заголовкам и должна
   закрывать их собой, а не просвечивать. Наведение и раскрытый список красят
   фон своим правилом с большей специфичностью — они выше по каскаду. */
html body .am-table-scroll.is-wide,
html body.theme-dark .am-table-scroll.is-wide {
  --app-table-gear-bg: var(--bg-card, #ffffff);
}
html body .am-table-scroll.is-wide table.app-table thead th .am-cols-btn,
html body.theme-dark .am-table-scroll.is-wide table.app-table thead th .am-cols-btn {
  right: calc(
    var(--app-table-gear-inset, 24px) - var(--app-table-gear-ring, 32px) / 2
    + var(--app-table-gear-shift, 0px)
  );
}
/* Слева от кнопки — растушёвка в тот же фон. Кругом одной кнопки не обойтись:
   он рубит подпись соседней колонки посередине слова («СТА|ТУС»), и это
   читается как поломка вёрстки. С растушёвкой подпись гаснет к кнопке, как
   гаснет содержимое под любым прижатым элементом.

   Пятно живёт СТРОГО левее кнопки (right: 100%), поэтому не спорит с её
   собственным фоном: подложка наведения и раскрытого списка остаются целы. */
html body .am-table-scroll.is-wide table.app-table thead th .am-cols-btn::before,
html body.theme-dark .am-table-scroll.is-wide table.app-table thead th .am-cols-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg-card, #ffffff));
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   ПОЛОСА ПРОКРУТКИ В ОКНАХ — общий слой

   Полоса не имеет права дёргать содержимое. Появись она по факту переполнения
   — строки окна прыгнули бы вбок на её ширину; появись рывком — это читается
   как щелчок. Поэтому жёлоб зарезервирован всегда (scrollbar-gutter: stable),
   а видимым делается один ползунок и проявлением по канону анимаций.

   Класс mdl-scroll вешает markModalScrollBoxes на прокручиваемые секции
   открытого окна, is-scrollable зажигает ползунок — следующим кадром после
   правки содержимого, иначе переходу не с чего начинать. Своих правил про
   полосу у окон здесь нет и быть не должно: правило общего элемента живёт на
   классе, а не переписывается под каждое окно.

   Про цвет: глобальный `scrollbar-width: thin` в начале этого файла переводит
   все полосы программы на СТАНДАРТНУЮ отрисовку, и правила ::-webkit-scrollbar
   в ней не работают вовсе. Цвет полосы задаёт только scrollbar-color — он же
   и анимируется. Токен --scrollbar-thumb ночью меняется сам.
   ══════════════════════════════════════════════════════════════════════════ */
html body .modal .mdl-scroll,
html body.theme-dark .modal .mdl-scroll {
  scrollbar-gutter: stable !important;
  scrollbar-color: transparent transparent !important;
  transition: scrollbar-color var(--motion-draw, 200ms)
              var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) !important;
}

html body .modal .mdl-scroll.is-scrollable,
html body.theme-dark .modal .mdl-scroll.is-scrollable {
  scrollbar-color: var(--scrollbar-thumb) transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   v25 — САЙДБАР: ДВА БЛОКА И РАСКРЫВАЮЩИЕСЯ ГРУППЫ

   Меню было плоским списком на восемнадцать строк, половину которого прятала
   створка «Ещё». Подпись «Ещё» ничего не говорит о содержимом, поэтому за ней
   искали наугад. Теперь меню читается сверху вниз двумя блоками:

     (без подписи) — аккаунты, прокси, базы, диспетчер: то, что открывают из
                     любого модуля и между делом;
     Модули        — сами инструменты, и там уже свои группы.

   Подпись «Основное» над верхним блоком снята: она стояла первой строкой в
   колонке, отделять её было не от чего, и меню начиналось не с дела, а с
   слова о деле. Осталась одна подпись — «Модули»: ей есть что отбивать.

   Группа объединяет модули, между которыми ВЫБИРАЮТ: сперва «мне рассылать»,
   потом — по ЛС или по группам. Одиночки (создание чатов, модерация, накрутка,
   конвертер) остаются строками: группа из одного пункта — лишний щелчок.

   Про иконы. Икона есть и у заголовка группы, и у её пунктов, но в один момент
   видна ровно одна: развёрнутое меню показывает икону заголовка (пунктам её
   гасит правило ниже, они выровнены по подписи родителя), рельс 76px —
   икону активного пункта. Поэтому заголовок носит икону своего главного
   модуля и повторения на экране не создаёт.

   Геометрия пишется через #sidebar: идентификатор старшинством бьёт ночные
   правила на классах, и двойника ей не нужно (тот же приём, что у рельса в
   v24). Двойники стоят там, где правило про ЦВЕТ.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Заголовок блока ───────────────────────────────────────────────────────
   Раньше подпись «Модули» гасилась (v21): над плоским списком она была
   единственным заголовком и висела ни к чему. Теперь она делит меню надвое,
   поэтому возвращается — но только в развёрнутом меню: в рельсе 76px ей негде
   поместиться. Верхний блок подписи не носит: он стоит первым, и отделять его
   не от чего; поле над первой строкой держит теперь сама колонка (ниже,
   «Инсеты колонки»). */
html body:not(.sidebar-collapsed) #sidebar {
  --sb-nav-caption: rgb(95, 99, 104);
  /* Каретка тише подписи блока. Подпись читают, каретку — замечают: пять
     групп подряд дают пять стрелок в столбик, и в тоне подписи они собирались
     в отдельный ряд значков, спорящий с названиями. */
  --sb-nav-chevron: rgba(60, 64, 67, 0.42);
}

html body.theme-dark:not(.sidebar-collapsed) #sidebar {
  --sb-nav-caption: rgba(232, 234, 237, 0.62);
  --sb-nav-chevron: rgba(232, 234, 237, 0.38);
}

/* Ночной двойник здесь обязателен: подпись гасил v21 ПАРОЙ правил, и ночное
   из них длиннее на класс .theme-dark. Без двойника ночью осталось бы
   display: none, и заголовки блоков пропали бы только в темноте. */
html body:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title,
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-section--modules .nav-section__title {
  display: block !important;
  margin: 0 !important;
  padding: 18px 12px 6px 26px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--sb-nav-caption) !important;
  background: transparent !important;
  border: 0 !important;
}

/* ── Заголовок группы ──────────────────────────────────────────────────────
   Во всём — обычная строка меню: та же высота, та же икона, та же заливка на
   наведении. Отличает её каретка справа и то, что нажатие не открывает
   страницу. Подсветкой выбранного заголовок не помечается никогда: страницы у
   него нет, а две залитые строки разом читались бы как два выбора. */
/* Каретка — служебный знак, а не часть подписи: мельче строки и тише её
   тоном (--sb-nav-chevron). Заметить её можно, спорить с названием — уже нет. */
html body #sidebar .nav-group .nav-item--group .nav-item__chevron {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex: 0 0 14px !important;
  color: var(--sb-nav-chevron, currentColor) !important;
  opacity: 1 !important;
  position: relative !important;
  transform: none !important;
}

html body #sidebar .nav-group .nav-item--group .nav-item__chevron svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.6 !important;
}

/* Направление каретки — это состояние, а не движение: знак «вниз» уступает
   место знаку «вверх», оба стоят на одном месте и не крутятся. Мягкость даёт
   только прозрачность — по тем же токенам, что и остальная смена состояний. */
html body #sidebar .nav-group .nav-item--group .nav-item__chevron-glyph {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  transition: opacity var(--motion-state) var(--motion-ease) !important;
}

html body #sidebar .nav-group .nav-item--group .nav-item__chevron-glyph--up { opacity: 0 !important; }
html body #sidebar .nav-group.is-open > .nav-item--group .nav-item__chevron-glyph--down { opacity: 0 !important; }
html body #sidebar .nav-group.is-open > .nav-item--group .nav-item__chevron-glyph--up { opacity: 1 !important; }

/* Подпись заголовка забирает всю свободную ширину и обрывается многоточием.
   Без этого длинное «Работа с аккаунтами» выдавило бы каретку за край. */
html body #sidebar .nav-group .nav-item--group .nav-item__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Цвет строк группы — общий цвет меню. Прежние слои красили .nav-item--sub и
   каретку своими токенами (ещё от тёмного сайдбара), и группа выделялась бы
   из списка блёклым тоном. Правило пишется через #sidebar: идентификатор
   старше их классов. */
html body:not(.sidebar-collapsed) #sidebar .nav-group .nav-item,
html body:not(.sidebar-collapsed) #sidebar .nav-group .nav-item--sub,
html body:not(.sidebar-collapsed) #sidebar .nav-group.is-open > .nav-item--group {
  color: var(--sb-nav-text) !important;
}

/* Свёрнутая группа с открытым модулем внутри. Подсветки не видно — значит
   меню молчит о том, где мы находимся. Вес подписи заголовка это чинит: он
   такой же, как у выбранной строки, и держится ровно пока группа закрыта. */
html body:not(.sidebar-collapsed) #sidebar .nav-group.has-active:not(.is-open) > .nav-item--group .nav-item__label {
  font-weight: 500 !important;
}

/* ── Пункты группы ─────────────────────────────────────────────────────────
   Пункт носит свою икону — ту же, что и раньше в плоском списке, и ту же,
   что показывает рельс 76px. Уровень задаёт отступ: 16px сверх общего
   инсета 26px. Больше брать нельзя — «Заполнение аккаунтов» и «Рассылка по
   группам» и так почти во всю ширину колонки, и лишний отступ обрывал бы их
   многоточием. Зазор до подписи у пункта короче (14px против 18px):
   отступ уже сказал, что строка вложена, и широкий зазор только съедал бы
   ширину подписи. */
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]),
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]):hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]):focus-visible,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]).is-active,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]).is-active:hover,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:not([disabled]).is-active:focus-visible {
  padding: 0 12px 0 42px !important;
}

/* Зазор до подписи один во ВСЕХ состояниях строки. Список состояний тут не
   для красоты: общие правила сайдбара задают свои 18px отдельной строкой на
   каждое состояние, и та, что длиннее нашей на класс, отыгрывала зазор назад.
   Ловилось это на «активный + наведение»: подпись выбранного пункта прыгала
   вправо на 4px под курсором. Появится новое состояние — его добавляют сюда,
   иначе прыжок вернётся. */
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub:focus-visible .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub.is-active .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub.is-active:hover .nav-item__icon,
html body:not(.sidebar-collapsed) #sidebar .nav-item.nav-item--sub.is-active:focus-visible .nav-item__icon {
  margin-right: 14px !important;
}

/* Створка группы живёт в components/sidebar-nav.css. */

/* ── Подвал меню ───────────────────────────────────────────────────────────
   Настройки и ночной режим ничего не запускают — это не модули. Поэтому они
   уезжают вниз колонки и стоят особняком. Чтобы «уехать вниз» было куда,
   секция обязана занимать всю высоту меню; расти ей разрешено, сжиматься
   нет (flex: 1 0 auto) — иначе длинный список сплющило бы внутри прокрутки. */
html body:not(.sidebar-collapsed) #sidebar .nav-section--modules {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* Блок стоит НА дне колонки, а не висит над ним. Черты над ним нет: пустое
   поле выше и так отделяет его от модулей, а линия посреди пустоты только
   подчёркивала бы, что блок повис. */
html body:not(.sidebar-collapsed) #sidebar .nav-tail {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  border: 0 !important;
}

/* Инсеты колонки — сверху и снизу одно и то же поле, оно же у бургера в шапке:
   между краем и первым/последним значком везде одинаково. Сверху поле раньше
   давала подпись «Основное»; её сняли, и держит его теперь сама колонка —
   иначе первая строка легла бы вплотную к шапке. */
html body:not(.sidebar-collapsed) #sidebar .sidebar__nav {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ── Рельс 76px ────────────────────────────────────────────────────────────
   Свёрнутый рельс уровней не знает: в нём стоят главные разделы, текущий
   модуль и настройки. Группы для него — просто обёртки, поэтому обёртки
   расступаются (display: contents), заголовки уходят, а из пунктов остаётся
   один активный. Гашение закрытой створки здесь тоже снимаем: активный пункт
   может лежать в свёрнутой группе, а в рельсе он обязан быть виден. */
@media (min-width: 901px) {
  html body.sidebar-collapsed #sidebar .nav-group,
  html body.sidebar-collapsed #sidebar .nav-group__items,
  html body.sidebar-collapsed #sidebar .nav-group__items-inner,
  html body.sidebar-collapsed #sidebar .nav-tail {
    display: contents !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  html body.sidebar-collapsed #sidebar .nav-item--group,
  html body.sidebar-collapsed #sidebar .nav-group .nav-item,
  html body.sidebar-collapsed #sidebar .nav-tail .nav-item {
    display: none !important;
  }

  html body.sidebar-collapsed #sidebar .nav-tail .nav-item[data-collapsed-nav],
  html body.sidebar-collapsed #sidebar .nav-group .nav-item.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
    scale: none !important;
  }

  html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-group .nav-item.is-active:hover,
  html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-group .nav-item.is-active:focus-visible,
  html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-tail .nav-item[data-collapsed-nav]:hover,
  html body:not(.theme-dark).sidebar-collapsed #sidebar .nav-tail .nav-item[data-collapsed-nav]:focus-visible {
    background: rgba(60, 64, 67, 0.08) !important;
  }

  html body.theme-dark.sidebar-collapsed #sidebar .nav-group .nav-item.is-active:hover,
  html body.theme-dark.sidebar-collapsed #sidebar .nav-group .nav-item.is-active:focus-visible,
  html body.theme-dark.sidebar-collapsed #sidebar .nav-tail .nav-item[data-collapsed-nav]:hover,
  html body.theme-dark.sidebar-collapsed #sidebar .nav-tail .nav-item[data-collapsed-nav]:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

/* Компактный список галочек — для окна передачи, где прав пять, а не
   тридцать: собственная прокрутка там только мешала бы. */
.tu-perms--compact { max-height: none; overflow: visible; }

/* ── Вход в программу (#auth-gate) ───────────────────────────────
   Самостоятельный экран, а не модалка: за ним ничего нет, закрывать
   его нечем и незачем. Поэтому ни затемнения поверх интерфейса, ни
   крестика — сплошная поверхность на весь экран.

   Разметка в index.html видна по умолчанию, и прячет её скрипт. Так
   упавший или не успевший скрипт показывает вход, а не рабочий
   интерфейс, в который никто не входил.

   Свои цвета, а не переменные темы: экран показывается ДО того, как
   применена тема, и мигание тёмным по светлому здесь заметнее всего. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f6f8fc;
  font-family: var(--app-font);
}
.auth-gate[hidden] { display: none !important; }

.auth-gate__card {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.auth-gate__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.auth-gate__logo { display: block; }
.auth-gate__brand-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: #1f1f1f;
}

.auth-gate__title {
  margin: 0 0 4px;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  color: #1f1f1f;
}
.auth-gate__sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 20px;
  color: #444746;
}

.auth-gate__form { display: flex; flex-direction: column; gap: 14px; }
.auth-gate__field { display: flex; flex-direction: column; gap: 6px; }
.auth-gate__label { font-size: 13px; line-height: 18px; color: #444746; }
.auth-gate__input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #c4c7c5;
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: #1f1f1f;
}
.auth-gate__input:hover { border-color: #747775; }
.auth-gate__input:focus {
  outline: none;
  border-color: #0b57d0;
  box-shadow: inset 0 0 0 1px #0b57d0;
}
.auth-gate__input::placeholder { color: #80868b; }

/* Место под ошибку держим всегда: иначе появление текста дёргает кнопку
   вниз ровно в тот момент, когда человек к ней тянется. */
.auth-gate__error {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: #b3261e;
}

.auth-gate__btn {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border: 0;
  border-radius: 22px;
  background: #0b57d0;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.auth-gate__btn:hover:not([disabled]) { background: #0a4fc0; }
.auth-gate__btn:active:not([disabled]) { background: #083f9b; }
.auth-gate__btn[disabled] { background: #e3e3e3; color: rgba(31, 31, 31, 0.38); cursor: default; }

.auth-gate__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #80868b;
}

/* Поле почты живёт только в регистрации: входят по логину. */
.auth-gate[data-mode="login"] .auth-gate__field--reg { display: none; }

/* Переключатель «вход ↔ регистрация» — строчка, а не вторая кнопка: рядом с
   синей пилюлей вторая пилюля читалась бы как равный по важности выбор. */
.auth-gate__link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: #0b57d0;
  cursor: pointer;
}
.auth-gate__link:hover { text-decoration: underline; }

/* Заставка и форма лежат друг на друге: карточка не меняет высоту, когда
   одна сменяет другую, и вход не «прыгает» на глазах. */
.auth-gate__stack { position: relative; }

/* Уходит сама через две секунды — на случай, если скрипт до проверки не
   дошёл. Без этого правила упавший скрипт оставил бы человека наедине с
   надписью «Проверяю вход…» и без единого поля. */
.auth-gate__checking {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 28px;
  background: #ffffff;
  font-size: 14px;
  line-height: 20px;
  color: #80868b;
}
.auth-gate:not(.auth-gate--checking) .auth-gate__checking { display: none; }
.auth-gate--checking .auth-gate__checking {
  animation: auth-gate-splash-out var(--motion-fast) var(--motion-ease) 2s forwards;
}
@keyframes auth-gate-splash-out {
  to { opacity: 0; visibility: hidden; }
}

/* Пока экран входа наверху, страница под ним не прокручивается: колесо мыши
   над сплошной поверхностью не должно двигать то, чего человек не видит. */
body.is-auth-gate { overflow: hidden; }

/* Ночная тема экран входа не перекрашивает: он показывается до того, как
   тема применена, и переключение на глазах читалось бы как моргание. */

/* ═══ components/role-tag.css ═══ */
/* ═══ css/components/role-tag.css — чип роли ═══
   Общий узел двух мест: колонка «Роли» таблицы аккаунтов и поле окна «Роли
   аккаунта» (#am-role-modal). Перенесено из style.css (канон `.role-tag`)
   17.09.2026; вместе с переносом снята палитра из пяти тонов.

   Тон у роли больше НЕ свой. Пять тонов различали ярлыки между собой, но
   цена вышла выше пользы: чип стоит в соседней клетке с пилюлей статуса и
   той же формы, и любая пятёрка рядом со статусами читается как ещё одно
   состояние — а на базе с десятком ролей колонка становится гирляндой и
   спорит с гаммой экрана. Ролей при этом больше пяти, и цвет всё равно
   повторялся. Теперь все чипы носят акцент программы; ночь переопределяет
   сам акцент (theme_dark.css), поэтому здесь одно значение на обе темы.

   Заливки у чипа нет: пятном в строке говорит статус, тег остаётся контуром.

   Кегль — 10px и числом, а не от мета-размера таблицы: тег стоит и в строке,
   и в поле окна «Теги аккаунта», а там мета-размера таблицы нет вовсе, и чип
   в окне вырастал бы против чипа в строке. Размеров вокруг он не трогает:
   высоту чипа держит строка 20px, высоту клетки — сама строка таблицы, а
   ряд чипов — flex с нулевым переносом. Кегль объявлен здесь и только здесь:
   у колонки он раньше стоял вторым экземпляром (ui_tweaks), и один размер
   решали два места.

   `!important` у кегля — не украшение: таблица аккаунтов сбрасывает кегль
   всему, что лежит в её клетках, одним общим правилом (`font-size: inherit`
   на `:is(.view-am, …) table.app-table tbody :not(…)` в ui_tweaks.css), и
   селектор у него длиннее любого разумного здесь. Важностью канон класса
   выигрывает у него, не заводя второго места, где решается размер. */
.role-tag {
  --role-ink:  var(--g-primary);
  --role-line: var(--g-primary);
  display: inline-block;
  font-size: 10px !important;
  font-weight: 400;
  white-space: nowrap;
  padding: 1px 10px;
  border-radius: 6px;
  background: transparent;
  color: var(--role-ink);
  border: 1px solid var(--role-line);
  line-height: 20px;
}

/* «+N» — счётчик спрятанных ролей, а не роль: акцента не носит, иначе синий
   на нём читался бы как ещё одно название. Нейтральный серый той же формы.

   Стоит ниже базового правила НАМЕРЕННО и в том же файле: вес у селекторов
   равный (0-1-0), и серым счётчик держит только порядок. Разъедутся по
   файлам — «+N» посинеет вместе с ролями. */
.role-tag--more {
  --role-ink:  var(--text-mute, #6b7494);
  --role-line: var(--border-strong, #d3dae6);
}

/* ═══ components/select-chevron.css ═══ */
/* ═══ css/components/select-chevron.css — стрелка поля со списком ═══
   Размер знака «здесь есть список» один на все такие поля. Кривая у них тоже
   одна: у нативных селектов семьи addw (окна «Добавить прокси», «Новая база»,
   «Прокси аккаунта») её рисует фон селекта, у поля тегов — кнопка со своим
   svg, и обе нарисованы по `M5 8l5 5 5-5`.

   Размер задан ТОЛЬКО здесь и только `background-size`: сам фон объявлен в
   style.css, а тот заморожен — поменять там ширину картинки значило бы
   завести новую пару «селектор + свойство». Вектор от масштаба не мылится. */
html body :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-select,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-select {
  background-size: var(--field-chevron-size) var(--field-chevron-size);
}

/* ═══ components/sidebar-profile.css ═══ */
/* ═══ components/sidebar-profile.css — карточка профиля на дне сайдбара ═════
   Карточка (.sbp__card) с фото, именем и тарифом — вход в окно «Личный
   кабинет» — плюс раскрывающееся вверх меню (.sbp__menu): профиль, настройки,
   помощь; каждый пункт открывает кабинет на своём разделе (15.10.2026).

   Меню — из семьи раскрывающихся окон: форма целиком на токенах --pop-*
   (канон в ui_tweaks.css, «КАНОН РАСКРЫВАЮЩИХСЯ ОКОН»), keyframes общие
   (pop-canon-in-up — окно выезжает снизу вверх, потому что под карточкой
   места нет: она сама лежит на дне колонки).

   Ночь своих правил здесь не пишет: и --pop-*, и --g-* переопределены в
   theme_dark.css, и карточка с меню перекрашиваются вместе со всей
   программой.
   ═══════════════════════════════════════════════════════════════════════ */

.sbp {
  position: relative;
  /* Ширину считает сама колонка; по бокам карточке оставлено поле, иначе
     она легла бы от края до края, как строки модулей. */
  width: calc(100% - var(--space-12) * 2);
  margin: 0 var(--space-12);
}

/* ── Карточка ────────────────────────────────────────────────────────────
   В покое фона нет — она стоит вровень с остальной колонкой, и цвет
   появляется только как ответ на действие (наведение, раскрытое меню). */
.sbp__card {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  height: 52px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-14);
  background: transparent;
  color: var(--g-ink);
  font-family: var(--app-font);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-enter);
}

.sbp__card:hover { background: var(--g-surface-4); }

/* Раскрытое меню — главное на экране, и карточка под ним тише: иначе два
   цветных пятна спорят друг с другом. */
.sbp.is-open .sbp__card { background: var(--g-surface-4); }

.sbp__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--g-primary);
  color: var(--g-primary-ink);
  font-size: var(--fs-14);
  font-weight: 500;
  overflow: hidden;
}

.sbp__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sbp__avatar svg {
  width: var(--space-20);
  height: var(--space-20);
}

.sbp__who-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.sbp__name,
.sbp__plan {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sbp__name {
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 16px;
  color: var(--g-ink);
}

.sbp__plan {
  font-size: var(--fs-11);
  line-height: 14px;
  color: var(--g-ink-faint);
}

.sbp__chevron {
  display: flex;
  flex: 0 0 auto;
  color: var(--g-ink-faint);
  transition: transform var(--motion-fast) var(--motion-ease-enter);
}

.sbp__chevron svg {
  width: var(--space-16);
  height: var(--space-16);
}

.sbp.is-open .sbp__chevron { transform: rotate(180deg); }

/* ── Меню ────────────────────────────────────────────────────────────────
   Стоит НАД карточкой: под ней край окна. Ширина — не уже своей карточки
   (канон окон), поэтому 100 % обёртки. */
.sbp__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--pop-gap));
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--pop-pad);
  background: var(--pop-bg);
  border: 1px solid var(--pop-border-color);
  border-radius: var(--pop-radius);
  box-shadow: var(--pop-shadow);
  animation: pop-canon-in-up var(--motion-draw) var(--motion-ease-enter);
}

.sbp__menu[hidden] { display: none; }

/* Почта — не пункт: её не нажимают. Она отвечает на вопрос «под кем я
   сижу», и стоит первой строкой окна. */
.sbp__who {
  display: flex;
  align-items: center;
  height: var(--pop-item-h);
  padding: var(--pop-item-pad);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-12);
  color: var(--pop-muted);
}

.sbp__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 0 0 auto;
  height: var(--pop-item-h);
  padding: var(--pop-item-pad);
  border: 0;
  border-radius: var(--pop-item-radius);
  background: transparent;
  color: var(--pop-text);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
}

.sbp__item:hover,
.sbp__item:focus-visible {
  background: var(--pop-item-hover);
  outline: none;
}

.sbp__item svg {
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
  color: var(--pop-muted);
}

.sbp__label {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Рельс 76px ──────────────────────────────────────────────────────────
   Свёрнутая колонка показывает один значок в строке, и профиль — не
   исключение: от карточки остаётся фото в круге 44px. Обёртка подвала в
   рельсе расступается (display: contents), поэтому ко дну карточку
   прижимает её собственный margin-top. */
@media (min-width: 901px) {
  body.sidebar-collapsed .sbp {
    width: 44px;
    margin: auto auto 0;
  }

  body.sidebar-collapsed .sbp__card {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-round);
  }

  body.sidebar-collapsed .sbp__who-card,
  body.sidebar-collapsed .sbp__chevron { display: none; }

  /* Окно шире своей кнопки только здесь: в 44px пункты меню не помещаются
     ни одной подписью. Выезжает оно вправо, в сторону содержимого. */
  body.sidebar-collapsed .sbp__menu {
    right: auto;
    min-width: 208px;
  }

  /* Колонка режет всё, что шире рельса, — и срезала бы меню до первых букв.
     Обрезка снимается ровно на время показа (метка на body от JS): постоянно
     снятой она оставляла бы подписи видимыми, пока колонка складывается. */
  html body.sidebar-collapsed.sbp-open #sidebar,
  html body.sidebar-collapsed.sbp-open #sidebar .sidebar__nav {
    overflow: visible !important;
  }
}

/* ═══ components/modal-motion.css ═══ */
/* ══ Появление и закрытие модальных окон — одни числа на все окна ════════
   Длительности (по MOTION.md §3.5):
   - вход  — --motion-state 150ms, кривая --motion-ease-enter (в style.css);
   - выход — --motion-fast  100ms, кривая --motion-ease-exit  (в style.css).
   Своих длительностей у окон нет: до 25.09.2026 «Добавить аккаунты» входило
   за 0.4s по своей кривой, остальные — за 300ms, а закрывались кто за 0.14s,
   кто за 300ms.

   Закрытие. Карточка уходит зеркально входу: `modal-out` (масштаб 1 → 0.88
   и прозрачность, кадры — в style.css) вместе с затемнением. До этого
   карточка пряталась сразу (`visibility: hidden`), гасло одно затемнение.

   Вес селектора. Окна со своим блоком в ui_tweaks.css держат анимацию
   карточки правилом по id с !important (`html body #inv-base-modal
   .inv-base-modal__panel { animation-name: modal-fade-in !important }`).
   `:is(.modal, #_)` берёт вес самого тяжёлого аргумента — id, хотя
   совпадает по `.modal`, а двойной `.modal--closing` даёт перевес над любым
   «html body[.theme-dark] #окно .карточка». Так правило одно, без списка id,
   и новое окно получает закрытие само.

   opacity и transform здесь без !important: важное объявление сильнее кадров
   и перебило бы саму анимацию. `visibility` — с !important, чтобы окно,
   где карточку прятали при закрытии, её больше не прятало. */
.modal {
  --modal-enter-duration: var(--motion-state, 150ms);
  --modal-exit-duration: var(--motion-fast, 100ms);
}

html body .modal--closing.modal--closing:is(.modal, #_) :is(.modal__panel, .addw) {
  visibility: visible !important;
  pointer-events: none !important;
  animation: modal-out var(--modal-exit-duration) var(--modal-exit-ease) forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    --modal-enter-duration: 0.16s;
    --modal-exit-duration: 0.08s;
  }
  html body .modal--closing.modal--closing:is(.modal, #_) :is(.modal__panel, .addw) {
    animation-name: modal-fade-out !important;
  }
}

/* ═══ components/sidebar-nav.css ═══ */
/* ═══ components/sidebar-nav.css — створка группы сайдбара ══════════════════
   «Парсинг», «Инвайт», «Рассылки», «Клонирование», «Работа с аккаунтами»:
   заголовок и под ним складной список пунктов.

   Раскрытие идёт через grid-template-rows 0fr→1fr: высоту содержимого никто
   не считает, и список любой длины разворачивается одним правилом.
   visibility в закрытом состоянии обязателен и не ради глаза — по нему
   клавиатурный слой (isFocusable) понимает, что этих строк на экране нет.
   Гасится она с задержкой в длительность створки, иначе строки исчезли бы
   до того, как схлопнется сама высота.

   Два правила против дёрганья (замер 25.09.2026, тест
   test_sidebar_group_motion_contract.py):

   1. Всё, что меняет высоту группы, обязано ехать вместе с высотой створки.
      Раньше зазор заголовок→створка был у раскрытой 2px, а у свёрнутой 0 —
      классом, в кадр клика. Всё под группой прыгало на 2px до начала
      анимации, при закрытии — и сами пункты, ещё видимые. Теперь зазора у
      группы нет вовсе, а те же 2px стоят над первым пунктом ВНУТРИ
      складываемой строки: при 0fr их не видно, раскрываются они вместе с
      пунктами.
      Свёрнутая группа по-прежнему ровно одна строка меню.
   2. Высота идёт по симметричной --motion-ease-icon, а не по --motion-ease:
      у той половина списка выпадала за 40ms из 200 и дальше долго
      доползала — на первом опоздавшем кадре список появлялся рывком.
   ═══════════════════════════════════════════════════════════════════════ */

html body #sidebar .nav-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

html body #sidebar .nav-group__items {
  display: grid !important;
  grid-template-rows: 1fr;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1;
  transition: grid-template-rows var(--motion-draw) var(--motion-ease-icon),
              opacity var(--motion-fast) var(--motion-ease) !important;
}

html body #sidebar .nav-group__items > * {
  min-height: 0 !important;
}

html body #sidebar .nav-group__items-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  overflow: hidden !important;
}

/* Отступ до первого пункта даёт пустая распорка нулевой высоты: её отделяет
   от пункта тот же зазор списка, 2px, и лежит она внутри обрезаемой строки.
   Два способа проще не годятся. padding створки не сжимается до нуля —
   свёрнутая группа выходила на 2px выше строки меню. Поле первого пункта
   перебивают правила сайдбара, заданные на КАЖДОЕ состояние строки
   (наведение, выбор, фокус), и отступ пропадал. */
html body #sidebar .nav-group__items-inner::before {
  content: "";
  flex: none;
  height: 0;
}

/* В рельсе 76px створки расступаются (display: contents, ui_tweaks.css
   «Рельс 76px»), и распорка встала бы лишним пунктом в общий список. */
@media (min-width: 901px) {
  html body.sidebar-collapsed #sidebar .nav-group__items-inner::before {
    display: none;
  }
}

html body #sidebar .nav-group:not(.is-open) > .nav-group__items {
  grid-template-rows: 0fr;
  opacity: 0 !important;
  /* !important обязателен: без него створку гасит только высота, а
     visibility остаётся visible — и клавиатурный слой водит стрелками по
     строкам, которых на экране нет. */
  visibility: hidden !important;
  pointer-events: none !important;
  border-color: transparent !important;
  transition: grid-template-rows var(--motion-draw) var(--motion-ease-icon),
              opacity var(--motion-fast) var(--motion-ease),
              visibility 0s linear var(--motion-draw) !important;
}

/* ═══ components/category-window.css ═══ */
/* ═══ css/components/category-window.css — галочка строк «Из базы» ═══
   Общий узел окон «Добавить источники» (парсинг аудитории, #prs-base-modal) и
   «Добавить пользователей» (инвайт и рассылка по ЛС, #inv-users-modal):
   галочка строки базы и число справа. «Включено» галочки каждое окно ставит
   на своей строке (.prs-srcbase-row.is-on, .invu-base-row.is-on).

   До 29.09.2026 здесь жило всё окно рассылки «Добавить получателей»
   (#bc-recip-modal): пилюли-категории «Вручную» / «Из базы», короб, поле,
   список баз и «Итого». Рассылка перешла на общее окно инвайта, и эти правила
   ушли вместе с ним.

   Каждое правило идёт парой `html body …, html body.theme-dark …`: с id в
   селекторе правило весило (1,1,2), на классе — (0,3,2), и пара возвращает
   перевес над ночными правилами семьи без id. */
html body .catwin .catwin__check,
html body.theme-dark .catwin .catwin__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--g-ink-mute);
  border-radius: var(--radius-4);
  color: var(--g-primary-ink);
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, ease),
              border-color var(--motion-fast, 100ms) var(--motion-ease, ease);
}
html body .catwin .catwin__check svg,
html body.theme-dark .catwin .catwin__check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
}
html body .catwin .catwin__row-count,
html body.theme-dark .catwin .catwin__row-count {
  font-size: var(--fs-12);
  color: var(--g-ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═══ components/removable-chip.css ═══ */
/* ═══ css/components/removable-chip.css — пилюля с крестиком ═══
   Пилюля превью карточки-ввода, которую убирают прямо с карточки, не
   открывая окно: базы у «Получателей» рассылки по ЛС и запросы у «Поисковых
   запросов» поиска групп и каналов. Перенесено из css/screens/broadcaster.css
   26.09.2026, когда пилюля понадобилась второму экрану (было .bc-base-chip).

   Крестик появляется по наведению на пилюлю (и при фокусе с клавиатуры);
   место под него занято всегда — пилюля не прыгает шириной. Канон пилюли
   (.srch-input__chip в ui_tweaks.css) обрезает текст многоточием на самой
   пилюле; у пилюли с кнопкой многоточие переезжает на текст. */
html body .srch-page .srch-input__chip.rm-chip,
html body.theme-dark .srch-page .srch-input__chip.rm-chip {
  gap: 2px !important;
  padding-right: 4px !important;
}
html body .srch-page .rm-chip__text,
html body.theme-dark .srch-page .rm-chip__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .srch-page .rm-chip__x,
html body.theme-dark .srch-page .rm-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, ease),
              color var(--motion-fast, 100ms) var(--motion-ease, ease);
}
html body .srch-page .rm-chip:hover .rm-chip__x,
html body.theme-dark .srch-page .rm-chip:hover .rm-chip__x,
html body .srch-page .rm-chip__x:focus-visible,
html body.theme-dark .srch-page .rm-chip__x:focus-visible {
  opacity: 1;
}
html body .srch-page .rm-chip__x:hover,
html body.theme-dark .srch-page .rm-chip__x:hover {
  color: var(--red);
}
html body .srch-page .rm-chip__x svg,
html body.theme-dark .srch-page .rm-chip__x svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* ═══ components/launch-window.css ═══ */
/* ═══ css/components/launch-window.css — рамка окна страницы запуска ═══
   Перенесено 27.09.2026 из ui_tweaks.css без изменения значений (снимок
   каскада по всем окнам в обеих темах — ноль расхождений): ui_tweaks.css
   заморожен, и новое окно в :is() туда уже не дописать. Первым добавлено
   окно «Добавить пользователей» обоих инвайтов (#inv-users-modal).
   «Выше по файлу» в тексте ниже — это ui_tweaks.css, откуда блок приехал. */

/* ── Оболочка окна страницы запуска — канон addw ────────────────
   Белая карточка r28 без разделителей, заголовок 23px/500, элементы
   40px и шрифт 14px. Кнопки — пилюли 40px/r20: основная залита
   #0b57d0, вторичная — синим текстом. Отступы НЕ трогаем: их держит
   общий стандарт рамки окон (--modal-pad-*), см. выше по файлу.

   Общая на «Ключевые слова» (поиск), «Источники» (парсер), цель
   инвайта и оба окна клонера: все они открываются с карточки-ввода и
   обязаны выглядеть одинаково. Сюда же — общий редактор списка
   #inv-list-modal: с него открываются «Список замен» клонера и
   пользователи/чаты инвайта, а выглядел он ещё по-старому (карточка
   r20 с разделителями, заголовок 16px, кнопки 29px/r6). И «Номера на
   проверку» чекера: страница у него давно по канону .srch-page, а окно
   с карточки «Что проверяем» открывалось той же старой панелью.
   И окно «Изменить задачу» (#task-edit-modal, 15.10.2026): оно спрашивает
   числа страницы модуля и обязано выглядеть как её окна. И окно
   «Добавить прокси» (#px-add-modal, 18.10.2026): окно-список по образцу
   «Номеров для проверки». И «Добавить базу пользователей» раздела «Базы»
   (#ub-create-modal, 19.10.2026) — по образцу «Добавить получателей».
   Новому окну страницы запуска — добавить id в :is(), а не копировать
   блок. Содержимое у каждого своё и живёт ниже отдельными правилами. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__panel,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__panel {
  width: 600px !important;
  max-width: calc(100vw - 28px) !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
  font-family: var(--app-font) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head {
  min-height: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__title,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__title {
  margin: 0 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: #1f1f1f !important;
}
/* Шапка окна «Сообщение» — .addw__header, а не .modal__head: крестик у неё
   тот же (30.09.2026). */
html body #msge-modal .addw__header [data-close],
html body.theme-dark #msge-modal .addw__header [data-close],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head [data-close],
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head [data-close] {
  align-self: start !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #444746 !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body #msge-modal .addw__header [data-close]:hover,
html body.theme-dark #msge-modal .addw__header [data-close]:hover,
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head [data-close]:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__head [data-close]:hover {
  background: #f1f3f4 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__body,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #ffffff !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea {
  min-height: 260px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  resize: vertical !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea::placeholder,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea::placeholder {
  color: #80868b !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea:focus,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-textarea:focus {
  border-color: #0b57d0 !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
  outline: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-list-meta,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .inv-list-meta {
  margin: 0 !important;
  padding: 0 2px !important;
  color: #444746 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot {
  gap: 8px !important;
  background: #ffffff !important;
  border: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn {
  height: 40px !important;
  min-height: 40px !important;
  min-width: 64px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost {
  border: 0 !important;
  background: transparent !important;
  color: #0b57d0 !important;
  padding-inline: 12px !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  color: #0b57d0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost svg,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--ghost svg {
  color: #0b57d0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--primary,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--primary {
  border: 0 !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--primary:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal) .modal__foot .btn--primary:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

/* ═══ components/dialog-window.css ═══ */
/* ═══ css/components/dialog-window.css — поле общего окна ввода ═══
   Общее окно #dlg-modal (js/app.js: showPrompt / showConfirm) — «Название
   нового шаблона», «Переименовать», «Сохранить как шаблон» и им подобные.
   Подвал окна стоит вплотную к полю ввода, поэтому ничто в поле не должно
   выходить за его границу: наружное кольцо фокуса (`0 0 0 3px` в
   ui_tweaks.css) закрашивал белый подвал, и обводка казалась обрезанной
   снизу (живой просмотр 01.10.2026).

   Канон окон с полями — как у списков в css/components/launch-window.css:
   рамка в покое — --g-line-strong, при фокусе синеет, а кольцо в 1 px
   рисуется внутрь (inset), наружу не выходит.

   Правила идут парой `html body …, html body.theme-dark …`, как у соседей:
   пара держит вес, а не цвет — ночные значения дают токены. */
/* Подпись и поле — одна пара: 14 px из ui_tweaks.css отрывали «Название
   нового шаблона:» от поля, она читалась отдельным абзацем. */
html body #dlg-modal .dlg-input,
html body.theme-dark #dlg-modal .dlg-input {
  margin: var(--space-6) 0 0 !important;
  border: 1px solid var(--g-line-strong) !important;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}
html body #dlg-modal .dlg-input:focus,
html body.theme-dark #dlg-modal .dlg-input:focus {
  border-color: var(--g-primary) !important;
  box-shadow: inset 0 0 0 1px var(--g-primary) !important;
  outline: none !important;
}

/* ═══ components/list-window.css ═══ */
/* ═══ css/components/list-window.css — окно-список со строкой добавления ═══
   Общий узел окон «Поисковые запросы» (поиск групп и каналов, #srch-keywords-modal),
   «Добавить источники» (парсинг аудитории, #prs-base-modal) и «Добавить
   пользователей» (оба инвайта, #inv-users-modal, 27.09.2026), с 07.10.2026 —
   «Номера для проверки» чекера номеров (#pc-numbers-modal, меню #pcn-menu) и
   «Ссылки на посты» накрутки реакций (#bs-targets-modal, меню #bs-tg-menu),
   с 18.10.2026 — «Добавить прокси» (#px-add-modal, меню #pxa-menu),
   с 19.10.2026 — «Добавить базу пользователей» (#ub-create-modal, меню #ubc-menu).
   С 07.10.2026 — экраны списков строк окна «Материалы» создания чатов: окно
   одно на все экраны, поэтому вписано с классом режима —
   #cc-material-modal.is-list (меню #cc-list-menu — отдельной строкой рядом с
   #pcn-menu) — и без правила высоты тела
   (под списком стоят «Удалять после использования» и права админов).
   Новому окну-списку — добавить id в :is() здесь. Рамку окна (панель, шапка, подвал)
   держит css/components/launch-window.css.

   Сюда 26.09.2026 перенесено из css/screens/searcher.css то, что было только
   у окна запросов: строка добавления и один размер окна (вторая часть файла).
   27.09.2026 — из ui_tweaks.css карточка, шапка со счётчиком и поиском,
   строки и пустое состояние (первая часть). Значения не менялись: снимок
   каскада (tools/frontend/cascade_check.py) по всем окнам в обеих темах —
   ноль расхождений. Порядок частей — порядок каскада: размер окна обязан
   стоять после карточки. */

/* ── Перенесено 27.09.2026 из ui_tweaks.css без изменения значений ── */

/* ── Окно «Ключевые слова»: содержимое ──────────────────────────
   Окно работает списком, а не полем ввода: строка добавления, карточка
   списка (счётчик, фильтр, меню массовых операций), смета прогона.
   Элементы — те же, что на странице поиска: поля outlined r8 высотой
   48px с обводкой #747775, кнопки-пилюли 40px/r20 #0b57d0, подписи
   14/20 серым #444746. Textarea режима «текстом» стилизована выше.  */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__lead,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__lead {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
}


/* Карточка списка: обводка #c4c7c5, r12, шапка со счётчиком и поиском. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card {
  border: 1px solid #c4c7c5 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card[hidden],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk[hidden],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty[hidden],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores[hidden],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list[hidden],
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__menu-badge[hidden] {
  display: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bar,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 8px 0 16px !important;
  border-bottom: 1px solid #e8eaed !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__count,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__count {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bar-tools,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bar-tools {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 200px !important;
  max-width: 100% !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  background: #f1f3f4 !important;
  color: #444746 !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search:focus-within,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search:focus-within {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search svg,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search svg {
  flex: 0 0 auto !important;
  color: #444746 !important;
}
/* Фокус показывает пилюля целиком (:focus-within выше), а само поле не
   рисует ничего своего. Иначе общее правило модалок (.modal
   input:focus-visible в style.css) вешает на поле прямоугольное кольцо, и
   внутри круглой пилюли появляется рамка углами наружу. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input::placeholder,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input::placeholder {
  color: #80868b !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #444746 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn:hover {
  background: #f1f3f4 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn.is-open,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn.is-open {
  background: #d3e3fd !important;
  color: #0b57d0 !important;
}

/* Строки списка: номер, ключ, метка дубликата, кнопка «убрать». */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list {
  max-height: 264px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}

html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 8px 0 16px !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row:hover {
  background: #f1f3f4 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__num,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__num {
  flex: 0 0 auto !important;
  min-width: 20px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: #80868b !important;
  font-variant-numeric: tabular-nums !important;
  user-select: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__text,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #1f1f1f !important;
  cursor: text !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__edit,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__edit {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #0b57d0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  outline: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__tag,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__tag {
  flex: 0 0 auto !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  background: #fef7e0 !important;
  color: #8a6116 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #80868b !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row:hover .srch-kw__rm,
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm:focus-visible,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row:hover .srch-kw__rm,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm:focus-visible {
  opacity: 1 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm:hover {
  background: #fce8e6 !important;
  color: #b3261e !important;
}
/* Дубликат виден и без наведения: этот ключ уйдёт в прогон дважды. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row.is-dupe .srch-kw__text,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row.is-dupe .srch-kw__text {
  color: #80868b !important;
}

/* Пустой список и пустой фильтр — вместо голой рамки. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 28px 24px 24px !important;
  text-align: center !important;
  color: #80868b !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-title,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-title {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #1f1f1f !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-sub,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-sub {
  margin: 0 !important;
  max-width: 42ch !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__samples,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__samples {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample {
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid #c4c7c5 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0b57d0 !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample:hover {
  background: #d3e3fd !important;
  border-color: #d3e3fd !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores {
  padding: 28px 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #80868b !important;
}

/* Режим «текстом». */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
/* Короб текста держит подсветку найденной строки (list_text_find.js): она
   лежит поверх поля и от краёв карточки её режет overflow. Выделение текста
   для этого не годится — Chromium не рисует его в поле без фокуса, а фокус
   остаётся в строке «Найти». */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk {
  position: relative !important;
  overflow: hidden !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__find-mark,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__find-mark {
  position: absolute !important;
  pointer-events: none !important;
  border-radius: var(--radius-4) !important;
  background: color-mix(in srgb, var(--g-primary) 16%, transparent) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk-note,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk-note {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444746 !important;
}
/* Сметы под списком нет: окно кончается карточкой списка. Пока смета
   стояла здесь, поздний ответ сервера (refreshSearcherPlan) менял высоту
   панели уже после открытия окна, и шапку списка дёргало — поэтому под
   неё держали постоянные 66px. Теперь дёргать нечему. */

/* ── Своё у окон-списков: строка добавления и размер окна ── */
/* Строка добавления: поле 48px и кнопка-пилюля 40px по центру. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add[hidden],
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add[hidden] {
  display: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input::placeholder,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input::placeholder {
  color: #80868b !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input:focus,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input:focus {
  border-color: #0b57d0 !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add-btn,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add-btn {
  flex: 0 0 auto !important;
  height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add-btn:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__add-btn:hover {
  background: #0a4fc0 !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}
/* ── Окно запросов держит один размер ────────────────────────────────
   Потолок в 264px оставлял высоту на откуп содержимому: окно росло с каждым
   добавленным запросом (330 → 586), садилось, когда фильтр оставлял одну
   строку, и прыгало ещё на 28px при переходе в массовый ввод. Все три
   движения — под руками, на открытом окне. Теперь 264px это ВЫСОТА короба, а
   не его потолок, и пустое состояние занимает тот же короб, а не своё место
   под ним (канон «Окно одного размера»).

   Числа: короб 264 = восемь строк по 33. Тело окна: строка ввода 48 + 12 +
   карточка (рамка 2 + шапка 48 + короб 264) = 374. Короб тела один на оба
   режима: иначе переключение режима двигало бы окно. Массовый ввод сам по
   себе ниже (поле 294 + 8 + подпись 40 = 342), поэтому поле растягивается на
   всё тело, а не оставляет под собой дыру.

   До 26.09.2026 над строкой ввода стоял вводный абзац (40 + 12), и тело было
   454: абзац убрали, а число осталось — под списком открылось 80px пустоты. */
/* Тело окна задаёт и размер окна «Добавить группу» инвайта (#inv-target-modal,
   27.09.2026): оно стоит на соседней карточке и обязано быть того же размера,
   что «Добавить пользователей». Остальные правила этого файла к нему не
   относятся — только токен (см. css/screens/inviter-target-picker.css). */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #cc-material-modal.is-list, #inv-target-modal, #bs-targets-modal),
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #cc-material-modal.is-list, #inv-target-modal, #bs-targets-modal) {
  --kw-list-h: 264px;
  --kw-body-h: 374px;
  /* Строка добавления вместе с отступом под ней: поле 48 + 12. На эту высоту
     растёт карточка, когда строка спрятана (текстовый режим, см. ниже). */
  --kw-add-h: 60px;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk > textarea,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk > textarea {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* «Редактировать текстом» у окон-списков (28.09.2026; у «Добавить источники» —
   тем же днём): поле текста живёт в
   карточке, в том же коробе, что и строки списка, — окно при смене режима не
   меняется ни на пиксель. Своей рамки, скругления и кольца фокуса у поля нет:
   рамку даёт карточка, отступы слева — как у строк списка. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk {
  height: var(--kw-list-h) !important;
  gap: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea,
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea:focus,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea:focus,
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea:focus-visible,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea:focus-visible {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: var(--space-8, 8px) var(--space-16, 16px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--g-ink) !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  resize: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea::placeholder,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card > .srch-kw__bulk > textarea::placeholder {
  color: var(--g-ink-faint) !important;
}
/* В текстовом режиме строки «ввод + Добавить» над карточкой нет (03.10.2026):
   текст правят прямо в поле. Корень окна помечает скрипт экрана (is-text).
   Тело окна высоты не теряет, поэтому поле растёт на высоту убранной строки —
   окно при смене режима по-прежнему не меняется ни на пиксель. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list).is-text .srch-kw__add,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list).is-text .srch-kw__add {
  display: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list).is-text .srch-kw__card > .srch-kw__bulk,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list).is-text .srch-kw__card > .srch-kw__bulk {
  height: calc(var(--kw-list-h) + var(--kw-add-h)) !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal) .modal__body,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal) .modal__body {
  flex: 0 1 auto !important;
  height: var(--kw-body-h) !important;
  min-height: 0 !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list {
  height: var(--kw-list-h) !important;
  max-height: none !important;
}
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty,
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores {
  box-sizing: border-box !important;
  height: var(--kw-list-h) !important;
  overflow-y: auto !important;
}

/* Подсветка строки — до рамки списка. Общий слой окон держит жёлоб под
   полосу прокрутки всегда (.mdl-scroll, ui_tweaks.css), и у короткого списка
   справа оставалась пустая полоса: подсветка обрывалась, не дойдя до рамки.
   Здесь жёлоб живёт, только пока есть что прокручивать (is-scrollable ставит
   syncModalScrollbars): тогда подсветка доходит до полосы, но её не
   перекрывает. Строки при появлении полосы сужаются справа на её ширину —
   текст стоит слева и не сдвигается. */
html body :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list.mdl-scroll:not(.is-scrollable),
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #px-add-modal, #ub-create-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__list.mdl-scroll:not(.is-scrollable) {
  scrollbar-gutter: auto !important;
}

/* ── Меню «…» списка ─────────────────────────────────────────────────────
   Одно меню у трёх окон-списков: «Поисковые запросы» (#srch-kw-menu),
   «Добавить источники» парсинга аудитории (#prs-src-menu) и «Добавить
   пользователей» обоих инвайтов (#invu-menu, 29.09.2026), у «Номеров для
   проверки» чекера — #pcn-menu, у «Ссылок на посты» накрутки — #bs-tg-menu
   (07.10.2026), у склада вложений — #media-menu (12.10.2026) — «Редактировать
   текстом», у источников и пользователей ещё «Из базы», и «Очистить список»
   (28.09.2026). Перенесено сюда из ui_tweaks.css и screens/searcher.css,
   когда меню появилось у второго окна; вид не менялся. Появление — канон
   раскрывающихся окон (pop-canon-in, ui_tweaks.css). */
/* Оболочка меню: координаты ставит positionToolbarPopover. */
html body #srch-kw-menu,
html body.theme-dark #srch-kw-menu,
html body #prs-src-menu,
html body.theme-dark #prs-src-menu,
html body #invu-menu,
html body.theme-dark #invu-menu,
html body #cc-list-menu,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu),
html body.theme-dark #cc-list-menu,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu),
html body #media-menu,
html body #bs-tg-menu,
html body.theme-dark #media-menu,
html body.theme-dark #bs-tg-menu {
  position: fixed !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  min-width: max(244px, var(--pop-anchor-w, 0px)) !important;
  padding: var(--pop-pad, 6px) !important;
  border: 1px solid var(--pop-border-color, #dadce0) !important;
  border-radius: var(--pop-radius, 8px) !important;
  background: var(--pop-bg, #ffffff) !important;
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18)) !important;
  font-family: var(--app-font) !important;
}
html body #srch-kw-menu[hidden],
html body.theme-dark #srch-kw-menu[hidden],
html body #prs-src-menu[hidden],
html body.theme-dark #prs-src-menu[hidden],
html body #invu-menu[hidden],
html body.theme-dark #invu-menu[hidden],
html body #cc-list-menu[hidden],
html body :is(#pcn-menu, #pxa-menu, #ubc-menu)[hidden],
html body.theme-dark #cc-list-menu[hidden],
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu)[hidden],
html body #media-menu[hidden],
html body #bs-tg-menu[hidden],
html body.theme-dark #media-menu[hidden],
html body.theme-dark #bs-tg-menu[hidden] {
  display: none !important;
}
html body #srch-kw-menu .srch-kw__menu-item,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item,
html body #prs-src-menu .srch-kw__menu-item,
html body.theme-dark #prs-src-menu .srch-kw__menu-item,
html body #invu-menu .srch-kw__menu-item,
html body.theme-dark #invu-menu .srch-kw__menu-item,
html body #cc-list-menu .srch-kw__menu-item,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item,
html body.theme-dark #cc-list-menu .srch-kw__menu-item,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item,
html body #media-menu .srch-kw__menu-item,
html body #bs-tg-menu .srch-kw__menu-item,
html body.theme-dark #media-menu .srch-kw__menu-item,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: var(--pop-item-h, 32px) !important;
  padding: var(--pop-item-pad, 6px 8px) !important;
  border: 0 !important;
  border-radius: var(--pop-item-radius, 6px) !important;
  background: transparent !important;
  color: var(--pop-text, #1f1f1f) !important;
  font-family: var(--app-font) !important;
  font-size: var(--pop-font-size, 13px) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #srch-kw-menu .srch-kw__menu-item:hover,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item:hover,
html body #prs-src-menu .srch-kw__menu-item:hover,
html body.theme-dark #prs-src-menu .srch-kw__menu-item:hover,
html body #invu-menu .srch-kw__menu-item:hover,
html body.theme-dark #invu-menu .srch-kw__menu-item:hover,
html body #cc-list-menu .srch-kw__menu-item:hover,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item:hover,
html body.theme-dark #cc-list-menu .srch-kw__menu-item:hover,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item:hover,
html body #media-menu .srch-kw__menu-item:hover,
html body #bs-tg-menu .srch-kw__menu-item:hover,
html body.theme-dark #media-menu .srch-kw__menu-item:hover,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item:hover {
  background: var(--pop-item-hover, #f1f3f4) !important;
}
html body #srch-kw-menu .srch-kw__menu-item[disabled],
html body.theme-dark #srch-kw-menu .srch-kw__menu-item[disabled],
html body #prs-src-menu .srch-kw__menu-item[disabled],
html body.theme-dark #prs-src-menu .srch-kw__menu-item[disabled],
html body #invu-menu .srch-kw__menu-item[disabled],
html body.theme-dark #invu-menu .srch-kw__menu-item[disabled],
html body #cc-list-menu .srch-kw__menu-item[disabled],
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item[disabled],
html body.theme-dark #cc-list-menu .srch-kw__menu-item[disabled],
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item[disabled],
html body #media-menu .srch-kw__menu-item[disabled],
html body #bs-tg-menu .srch-kw__menu-item[disabled],
html body.theme-dark #media-menu .srch-kw__menu-item[disabled],
html body.theme-dark #bs-tg-menu .srch-kw__menu-item[disabled] {
  color: rgba(31, 31, 31, 0.38) !important;
  cursor: default !important;
  background: transparent !important;
}
html body #srch-kw-menu .srch-kw__menu-item svg,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item svg,
html body #prs-src-menu .srch-kw__menu-item svg,
html body.theme-dark #prs-src-menu .srch-kw__menu-item svg,
html body #invu-menu .srch-kw__menu-item svg,
html body.theme-dark #invu-menu .srch-kw__menu-item svg,
html body #cc-list-menu .srch-kw__menu-item svg,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item svg,
html body.theme-dark #cc-list-menu .srch-kw__menu-item svg,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item svg,
html body #media-menu .srch-kw__menu-item svg,
html body #bs-tg-menu .srch-kw__menu-item svg,
html body.theme-dark #media-menu .srch-kw__menu-item svg,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item svg {
  flex: 0 0 auto !important;
  color: #444746 !important;
}
html body #srch-kw-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item[disabled] svg,
html body #prs-src-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark #prs-src-menu .srch-kw__menu-item[disabled] svg,
html body #invu-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark #invu-menu .srch-kw__menu-item[disabled] svg,
html body #cc-list-menu .srch-kw__menu-item[disabled] svg,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item[disabled] svg,
html body.theme-dark #cc-list-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item[disabled] svg,
html body #media-menu .srch-kw__menu-item[disabled] svg,
html body #bs-tg-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark #media-menu .srch-kw__menu-item[disabled] svg,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item[disabled] svg {
  color: rgba(31, 31, 31, 0.38) !important;
}
html body #srch-kw-menu .srch-kw__menu-label,
html body.theme-dark #srch-kw-menu .srch-kw__menu-label,
html body #prs-src-menu .srch-kw__menu-label,
html body.theme-dark #prs-src-menu .srch-kw__menu-label,
html body #invu-menu .srch-kw__menu-label,
html body.theme-dark #invu-menu .srch-kw__menu-label,
html body #cc-list-menu .srch-kw__menu-label,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-label,
html body.theme-dark #cc-list-menu .srch-kw__menu-label,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-label,
html body #media-menu .srch-kw__menu-label,
html body #bs-tg-menu .srch-kw__menu-label,
html body.theme-dark #media-menu .srch-kw__menu-label,
html body.theme-dark #bs-tg-menu .srch-kw__menu-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body #srch-kw-menu .srch-kw__menu-item--danger,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger,
html body #srch-kw-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger svg,
html body #prs-src-menu .srch-kw__menu-item--danger,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger,
html body #prs-src-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger svg,
html body #invu-menu .srch-kw__menu-item--danger,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger,
html body #invu-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger svg,
html body #cc-list-menu .srch-kw__menu-item--danger,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger,
html body #cc-list-menu .srch-kw__menu-item--danger svg,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger svg,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger svg,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger svg,
html body #media-menu .srch-kw__menu-item--danger,
html body #bs-tg-menu .srch-kw__menu-item--danger,
html body.theme-dark #media-menu .srch-kw__menu-item--danger,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger,
html body #media-menu .srch-kw__menu-item--danger svg,
html body #bs-tg-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #media-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger svg {
  color: #b3261e !important;
}
html body #srch-kw-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger:hover,
html body #prs-src-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger:hover,
html body #invu-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger:hover,
html body #cc-list-menu .srch-kw__menu-item--danger:hover,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger:hover,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-item--danger:hover,
html body #media-menu .srch-kw__menu-item--danger:hover,
html body #bs-tg-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #media-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger:hover {
  background: #fce8e6 !important;
}
html body #srch-kw-menu .srch-kw__menu-sep,
html body.theme-dark #srch-kw-menu .srch-kw__menu-sep,
html body #prs-src-menu .srch-kw__menu-sep,
html body.theme-dark #prs-src-menu .srch-kw__menu-sep,
html body #invu-menu .srch-kw__menu-sep,
html body.theme-dark #invu-menu .srch-kw__menu-sep,
html body #cc-list-menu .srch-kw__menu-sep,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-sep,
html body.theme-dark #cc-list-menu .srch-kw__menu-sep,
html body.theme-dark :is(#pcn-menu, #pxa-menu, #ubc-menu) .srch-kw__menu-sep,
html body #media-menu .srch-kw__menu-sep,
html body #bs-tg-menu .srch-kw__menu-sep,
html body.theme-dark #media-menu .srch-kw__menu-sep,
html body.theme-dark #bs-tg-menu .srch-kw__menu-sep {
  height: 1px !important;
  margin: var(--pop-pad, 6px) calc(var(--pop-pad, 6px) * -1) !important;
  background: var(--pop-sep, #dadce0) !important;
}
html body #srch-kw-menu,
html body #prs-src-menu,
html body #invu-menu,
html body #cc-list-menu,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu),
html body #media-menu,
html body #bs-tg-menu {
  animation: pop-canon-in var(--motion-draw, 200ms)
             var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both !important;
}
html body #srch-kw-menu.is-above,
html body #prs-src-menu.is-above,
html body #invu-menu.is-above,
html body #cc-list-menu.is-above,
html body :is(#pcn-menu, #pxa-menu, #ubc-menu).is-above,
html body #media-menu.is-above,
html body #bs-tg-menu.is-above {
  animation-name: pop-canon-in-up !important;
}

/* ═══ components/message-preview.css ═══ */
/* Предпросмотр окна сообщения — «примерно так увидит Telegram» (08.10.2026).

   Кнопка-«глаз» (.msge__tool[data-msge-preview]) переключает окно в вид
   Telegram: поле ввода и плитки прячутся, на их месте — фон чата и сообщение.
   Вид у модулей свой (components/message_preview.js): пост канала, сообщение
   в группе или исходящий пузырь. Цвета Telegram — токены --tg-* (tokens.css).
   Размер — как у поля ввода, чтобы окно не прыгало при переключении. */

.msge.is-preview .msge__area,
.msge.is-preview .msge__files { display: none !important; }
.msge__preview[hidden] { display: none !important; }
.msge__tool[data-msge-preview].is-on {
  background: var(--g-sel);
  color: var(--g-sel-ink);
}
.msge__tool:disabled { opacity: 0.38; cursor: default; }

.msge__preview {
  min-height: 260px;
  max-height: 44vh;
  overflow-y: auto;
  border-radius: var(--radius-12);
  background: var(--tg-chat-bg);
}
.tgp {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16) var(--space-16);
  font-family: var(--app-font);
}
.tgp__note {
  align-self: center;
  margin: 0;
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-10);
  background: var(--tg-note-bg);
  color: var(--g-primary-ink);
  font-size: var(--fs-12);
  line-height: 18px;
}
.tgp__empty {
  align-self: center;
  margin: var(--space-24) 0;
  color: var(--tg-meta);
  font-size: var(--fs-14);
}

/* Сообщение: пост канала и группы — слева, исходящий пузырь — справа. */
.tgp__msg {
  position: relative;
  max-width: 420px;
  min-width: 120px;
  overflow: hidden;
  border-radius: var(--radius-14);
  background: var(--tg-bubble-in);
  box-shadow: var(--g-shadow-1);
  color: var(--tg-ink);
}
.tgp--chat .tgp__msg {
  align-self: flex-end;
  background: var(--tg-bubble-out);
}
.tgp--channel .tgp__msg,
.tgp--group .tgp__msg { align-self: flex-start; }
.tgp__author {
  padding: var(--space-8) var(--space-12) 0;
  color: var(--tg-link);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 20px;
}
.tgp__msg.has-media .tgp__author { padding-bottom: var(--space-6); }

/* Альбом — рядами, как у Telegram (albumRows в message_preview.js): по три
   в ряд, недостающее — рядами по два в начале (10 → 2-2-3-3), три кадра —
   один большой сверху и два под ним. В ряду кадры делят ширину поровну и
   подрезаются под клетку: ряд из двух выше ряда из трёх, как в Telegram. */
.tgp__album {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tgp__row {
  display: flex;
  gap: 2px;
}
.tgp__row > .tgp__media { flex: 1 1 0; min-width: 0; }
.tgp__row--1 > .tgp__media { aspect-ratio: 16 / 10; }
.tgp__row--2 > .tgp__media { aspect-ratio: 1 / 1; }
.tgp__row--3 > .tgp__media { aspect-ratio: 1 / 1; }
.tgp__media {
  position: relative;
  overflow: hidden;
  background: var(--tg-code-bg);
}
.tgp__media img,
.tgp__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Одно фото или видео Telegram показывает целиком, в своих пропорциях: на
   всю ширину сообщения, высота — по кадру. Обрезка под клетки — только у
   альбома из нескольких файлов, так делает и Telegram. Очень высокий кадр
   ограничен по высоте и вписан без обрезки. */
.tgp__album--1 .tgp__media {
  aspect-ratio: auto;
}
.tgp__album--1 .tgp__media img,
.tgp__album--1 .tgp__media video {
  height: auto;
  max-height: 560px;
  object-fit: contain;
}
.tgp__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-6);
  border-radius: var(--radius-round);
  background: var(--tg-play-bg);
  color: var(--g-primary-ink);
  font-size: 28px;
}
.tgp__doc {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-12) 0;
}
.tgp__doc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--tg-link);
  color: var(--g-primary-ink);
  font-size: 22px;
}
.tgp__doc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: 500;
}

/* Текст и оформление — то, что понимает Telegram. */
.tgp__text {
  padding: var(--space-6) var(--space-12) var(--space-6);
  font-size: var(--fs-15);
  line-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tgp__msg:not(.has-media) .tgp__author + .tgp__text { padding-top: var(--space-2); }
.tgp__text a,
.tgp__text .tgp-link { color: var(--tg-link); text-decoration: none; }
.tgp__text code {
  padding: 0 var(--space-4);
  border-radius: var(--radius-4);
  background: var(--tg-code-bg);
  color: var(--tg-code-ink);
  font-family: Consolas, "Roboto Mono", monospace;
  font-size: 0.92em;
}
.tgp__text pre {
  margin: var(--space-4) 0;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-8);
  background: var(--tg-code-bg);
  font-family: Consolas, "Roboto Mono", monospace;
  font-size: 0.92em;
  white-space: pre-wrap;
}
.tgp__text blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-10);
  border-left: 3px solid var(--tg-quote-bar);
  border-radius: var(--radius-4);
  background: var(--tg-quote-bg);
}
.tgp-spoiler {
  border-radius: var(--radius-4);
  background: var(--tg-spoiler);
  color: transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.tgp-spoiler.is-open { background: transparent; color: inherit; }
.tgp-emoji__img {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
}

/* Подвал сообщения: просмотры у канала, время, у исходящего — две галочки. */
/* Подвал — в правом нижнем углу, в последней строке текста, как в Telegram.
   Место ему держит невидимая вставка той же ширины в конце текста
   (.tgp__meta-gap). Без текста — на кадре, тёмной плашкой. */
.tgp__meta,
.tgp__meta-gap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-12);
  line-height: 16px;
  white-space: nowrap;
}
.tgp__meta {
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-6);
  color: var(--tg-meta);
}
.tgp__meta-gap {
  visibility: hidden;
  margin-left: var(--space-8);
  vertical-align: bottom;
}
.tgp__msg.no-text .tgp__meta {
  bottom: var(--space-8);
  padding: 0 var(--space-6);
  border-radius: var(--radius-8);
  background: var(--tg-play-bg);
  color: var(--g-primary-ink);
}
.tgp--chat .tgp__msg:not(.no-text) .tgp__meta { color: var(--tg-meta-out); }
.tgp__views { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); }
.tgp__views .material-symbols-outlined,
.tgp__check { font-size: 15px; }

.tgp__reroll {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: 32px;
  padding: 0 var(--space-14);
  border: 0;
  border-radius: var(--radius-16);
  background: var(--g-surface-3);
  color: var(--g-primary);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--g-shadow-1);
}
.tgp__reroll .material-symbols-outlined { font-size: 18px; }
.tgp__reroll:hover { background: var(--g-surface-4); }
.tgp__warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-10);
  background: var(--g-warn-bg);
  color: var(--g-warn-ink);
  font-size: var(--fs-13);
  line-height: 18px;
}
.tgp__warn .material-symbols-outlined { font-size: 18px; }

/* ═══ components/advanced-settings.css ═══ */
/* ═══ css/components/advanced-settings.css — «Дополнительные настройки» ═══
   Свёрнутая секция редких настроек на всех страницах запуска
   (.srch-page .prs-advanced). Здесь — только наведение на её заголовок.

   До 28.09.2026 наведение заливало строку заголовка целиком — навязчиво для
   секции, которую открывают редко. Теперь заливки нет:
   - наведение на строку темнит стрелку и серую сводку значений до тона
     заголовка (сам заголовок и так самый тёмный) — видно, что строка живая;
   - кружок под стрелкой появляется, только когда курсор на самой стрелке,
     как у иконок-кнопок.
   Открывается секция по-прежнему кликом в любом месте строки. */

/* Стрелка — кнопка-кружок 32px. Отрицательные поля съедают разницу с
   высотой строки заголовка (20px), чтобы строка не выросла, и возвращают
   глиф к правому полю карточки. В покое она тише подписи (--g-ink-faint),
   чтобы потемнение на наведении строки было видно глазом. Поворота нет
   (transform: none гасит переворот из style.css) — см. глифы ниже. */
html body .srch-page .prs-advanced__chev,
html body.theme-dark .srch-page .prs-advanced__chev {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 32px !important;
  height: 32px !important;
  margin: -6px -6px -6px 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  color: var(--g-ink-faint) !important;
  transform: none !important;
  transition: color var(--motion-fast) var(--motion-ease) !important;
}

/* Кружок стрелки — как у стрелок пагинации таблиц («Аккаунты», «Прокси»):
   живёт на ::before, форму берёт у стрелки, меняет только заливку и кольцо
   за --motion-state. */
html body .srch-page .prs-advanced__chev::before,
html body.theme-dark .srch-page .prs-advanced__chev::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease) !important;
}

/* Направление стрелки — состояние, а не движение, как у каретки группы в
   сайдбаре: знак «вниз» уступает место знаку «вверх», оба стоят на одном
   месте и не крутятся. Мягкость даёт только прозрачность.
   Глиф — как стрелки пагинации: 20px в сетке 20 с линией 1.5, то есть ровно
   полтора пикселя (в сетке 24 при 16px линия выходила 1.2px и мылилась).
   Селектор тяжелее правила «summary svg» в ui_tweaks.css, которое держит
   значки заголовка в 16px. */
html body .srch-page .prs-advanced__chev > .prs-advanced__glyph,
html body.theme-dark .srch-page .prs-advanced__chev > .prs-advanced__glyph {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 20px !important;
  height: 20px !important;
  transition: opacity var(--motion-state) var(--motion-ease) !important;
}
html body .srch-page .prs-advanced__glyph--up,
html body.theme-dark .srch-page .prs-advanced__glyph--up,
html body .srch-page .prs-advanced[open] > summary .prs-advanced__glyph--down,
html body.theme-dark .srch-page .prs-advanced[open] > summary .prs-advanced__glyph--down {
  opacity: 0 !important;
}
html body .srch-page .prs-advanced[open] > summary .prs-advanced__glyph--up,
html body.theme-dark .srch-page .prs-advanced[open] > summary .prs-advanced__glyph--up {
  opacity: 1 !important;
}
html body .srch-page .prs-advanced .srch-fine__sum,
html body.theme-dark .srch-page .prs-advanced .srch-fine__sum {
  transition: color var(--motion-fast) var(--motion-ease) !important;
}

/* Наведение на строку: стрелка и сводка темнеют, фона нет. */
html body .srch-page .prs-advanced > summary:hover .prs-advanced__chev,
html body.theme-dark .srch-page .prs-advanced > summary:hover .prs-advanced__chev,
html body .srch-page .prs-advanced > summary:hover .srch-fine__sum,
html body.theme-dark .srch-page .prs-advanced > summary:hover .srch-fine__sum {
  color: var(--srch-ink) !important;
}

/* Кружок — только под курсором на самой стрелке (и при фокусе с клавиатуры,
   иначе у Tab не было бы видимой остановки на строке). */
html body .srch-page .prs-advanced__chev:hover::before,
html body.theme-dark .srch-page .prs-advanced__chev:hover::before,
html body .srch-page .prs-advanced > summary:focus-visible .prs-advanced__chev::before,
html body.theme-dark .srch-page .prs-advanced > summary:focus-visible .prs-advanced__chev::before {
  background: var(--g-icon-btn-hover) !important;
}
/* Нажатие — плотнее заливка и кольцо 1px, как у нажатой стрелки пагинации.
   Строго после наведения: нажатая стрелка перекрывает ховер. */
html body .srch-page .prs-advanced__chev:active::before,
html body.theme-dark .srch-page .prs-advanced__chev:active::before {
  background: var(--g-icon-btn-press) !important;
  box-shadow: inset 0 0 0 1px var(--g-icon-btn-ring) !important;
}

/* ═══ components/input-info.css ═══ */
/* ═══ css/components/input-info.css — подсказка ⓘ у карточек-вводов ═══
   Кнопка ⓘ в шапке карточки-ввода (.srch-input__head) на страницах
   запуска: крайняя справа, галочка «заполнено» — слева от неё. Клик
   раскрывает окошко с коротким объяснением блока. Обкатано в «Парсинге
   источников» (28.09.2026), затем вынесено в компонент — «Парсинг
   аудитории» ставит ту же разметку. Раскрытие — js/components/input_info.js.

   Размер тот же, что у галочки (20px): шапка не меняет высоту.
   Значок тихий: светло-серый (--g-ink-faint) и тонкий штрих, чтобы не
   спорить с галочкой и заголовком. Наведение и раскрытое окно лишь
   темнят его до тона подписи — без акцента.
   ═══════════════════════════════════════════════════════════════════════ */
html body .srch-page .srch-info,
html body.theme-dark .srch-page .srch-info {
  display: inline-flex !important;
  flex: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--g-ink-faint) !important;
  cursor: pointer !important;
  transition: color var(--motion-fast) var(--motion-ease) !important;
}
html body .srch-page .srch-info:hover,
html body.theme-dark .srch-page .srch-info:hover,
html body .srch-page .srch-info.is-open,
html body.theme-dark .srch-page .srch-info.is-open {
  color: var(--srch-desc) !important;
}
html body .srch-page .srch-info:focus-visible,
html body.theme-dark .srch-page .srch-info:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 1px !important;
}
html body .srch-page .srch-info svg,
html body.theme-dark .srch-page .srch-info svg {
  width: 20px !important;
  height: 20px !important;
}

/* Окошко подсказки — форма семьи раскрывающихся окон (--pop-*), отступ
   окна с текстом (--pop-pad-form). Координаты ставит positionToolbarPopover
   от кнопки ⓘ; раскрытие — общие pop-canon-in / pop-canon-in-up. */
html body .srch-page .srch-info-pop,
html body.theme-dark .srch-page .srch-info-pop {
  position: fixed !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  width: 320px !important;
  max-width: calc(100vw - 16px) !important;
  padding: var(--pop-pad-form) !important;
  border: 1px solid var(--pop-border-color) !important;
  border-radius: var(--pop-radius) !important;
  background: var(--pop-bg) !important;
  box-shadow: var(--pop-shadow) !important;
  color: var(--pop-text) !important;
  font-family: var(--app-font) !important;
  font-size: var(--pop-font-size) !important;
  line-height: 20px !important;
  text-align: left !important;
  animation: pop-canon-in var(--motion-draw) var(--motion-ease-enter) both !important;
}
html body .srch-page .srch-info-pop.is-above,
html body.theme-dark .srch-page .srch-info-pop.is-above {
  animation-name: pop-canon-in-up !important;
}
html body .srch-page .srch-info-pop[hidden],
html body.theme-dark .srch-page .srch-info-pop[hidden] {
  display: none !important;
}
html body .srch-page .srch-info-pop > * + *,
html body.theme-dark .srch-page .srch-info-pop > * + * {
  margin-top: calc(var(--pop-gap) * 2) !important;
}
/* Текст подсказки — один короткий абзац без нумерации и без заголовка,
   до 200 символов (28.09.2026; заголовок «Как работает …» снят 02.10.2026). */
html body .srch-page .srch-info-pop__text,
html body.theme-dark .srch-page .srch-info-pop__text {
  margin-bottom: 0 !important;
  color: var(--pop-text) !important;
}
/* Ссылка на раздел программы внутри текста («Базы» → «Источники»,
   «Базы» → «Пользователи»): кнопка, но выглядит строкой текста — акцентом
   экрана, подчёркнута на наведении. Любое упоминание базы или места, куда
   сохраняется результат, — такая ссылка, а не просто название. */
html body .srch-page .srch-info-pop__link,
html body.theme-dark .srch-page .srch-info-pop__link {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--srch-accent) !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  cursor: pointer !important;
}
html body .srch-page .srch-info-pop__link:hover,
html body.theme-dark .srch-page .srch-info-pop__link:hover {
  text-decoration: underline !important;
}
html body .srch-page .srch-info-pop__link:focus-visible,
html body.theme-dark .srch-page .srch-info-pop__link:focus-visible {
  outline: 2px solid var(--srch-accent) !important;
  outline-offset: 1px !important;
  border-radius: 2px !important;
}

/* ═══ components/flood-wait-field.css ═══ */
/* ═══ css/components/flood-wait-field.css — поле «Лимит ожидания FloodWait» ═══
   Стандарт — docs/contracts/flood_wait_field.md, поведение ввода —
   js/components/flood_wait_field.js. Поле одно на все модули с FloodWait.

   Пустое поле значит «взять общую настройку», и компонент показывает её
   число подсказкой (placeholder). В фокусе подсказка прячется (28.09.2026):
   курсор стоял в поле, а за ним серые «300» читались как введённое значение,
   хотя поле пустое. Ушли из поля пустым — число общей настройки видно снова. */
html body [data-flood-wait]:focus::placeholder,
html body.theme-dark [data-flood-wait]:focus::placeholder {
  color: transparent !important;
}

/* ═══ components/account-picker.css ═══ */
/* ═══ css/components/account-picker.css — окно выбора аккаунтов ═══
   Одно окно «Выбрать аккаунты» на все модули (#inv-run-modal, панель
   .modal__panel--picker, см. index.html window:inviter/inv-run-modal).
   Остальной вид окна пока живёт в ui_tweaks.css и style.css.

   Скругление — как у всех окон программы, r28 (27.09.2026): до этого общий
   «контракт радиусов» в ui_tweaks.css ровнял панель со списочными окнами на
   r20, и окно аккаунтов выбивалось из соседей. */
html body .modal__panel.modal__panel--picker,
html body.theme-dark .modal__panel.modal__panel--picker {
  border-radius: var(--radius-28) !important;
}

/* ═══ components/virtual-rows.css ═══ */
/* ═══ css/components/virtual-rows.css — распорки виртуальной прокрутки ═══
   Списочная таблица с длинной страницей держит в DOM только видимые строки,
   а высоту остальных — две строки-распорки tr.vr-spacer (js/core/virtual_rows.js).
   Распорка — пустое место: без разделителя, наведения, выделения и отступов
   ячейки. Высоту и нулевые отступы ячейке пишет сам модуль инлайном, здесь —
   то, что инлайном не достать: псевдоэлементы строки и фон. */
html body table.app-table > tbody > tr.vr-spacer,
html body table.app-table > tbody > tr.vr-spacer:hover,
html body table.app-table > tbody > tr.vr-spacer > td,
html body table.app-table > tbody > tr.vr-spacer:hover > td {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
}

/* Фокус на tbody — служебный: туда модуль переносит его со строки, которую
   прокрутка увела из DOM. Рамки у него нет, видимый курсор вернётся на строку
   со следующей клавишей. */
html body table.app-table > tbody:focus {
  outline: none !important;
}

html body table.app-table > tbody > tr.vr-spacer::before,
html body table.app-table > tbody > tr.vr-spacer::after {
  content: none !important;
  display: none !important;
}

/* ═══ components/filter-chip.css ═══ */
/* ═══ css/components/filter-chip.css — чип группы в окне «Фильтры» таблиц ═══
   Окна фильтров всех списочных таблиц (аккаунты, прокси, базы, источники,
   задачи, модерация) несут общий класс .am-filter-pop — правило висит на нём.

   Число выбранных значений — часть подписи («Статус 1»), а не кружок: кружок
   15px был выше строки подписи 13px, и при первом выбранном значении чип,
   ряд и всё окно вырастали на 2px — окно прыгало под курсором. Включённый
   фильтр и так показывает заливка чипа; тот же канон у окна запуска задачи
   (.modal__panel--picker, ui_tweaks.css). Высота чипа закреплена токеном,
   чтобы никакое содержимое его не растягивало. */
html body .am-filter-pop .picker-chip {
  box-sizing: border-box;
  height: var(--filter-chip-h);
}

html body .am-filter-pop .picker-chip__count {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
}

/* ═══ components/table-check-ring.css ═══ */
/* ═══ css/components/table-check-ring.css — кольцо под чекбоксом строки ═══
   Круг под чекбоксом строки всех списочных таблиц (обёртка .app-check:
   аккаунты, прокси, базы, задачи, чаты модерации и созданные чаты, окно
   выбора аккаунтов). Вынесено из ui_tweaks.css (блок LEAD RAIL, п.4) вместе с
   появлением «как в Gmail» (03.10.2026). Остальной чекбокс — рамка, галочка,
   токены рельса — пока живёт там же, в ui_tweaks.css.

   Кольцо: круг 42px по центру чекбокса. Живёт на обёртке (не на input),
   иначе его срезала бы маска чекбокса. Заливка — один чёрный тон, состояние
   меняет только его плотность:

     • покой — кольца нет;
     • наведение — заливка 6%;
     • активация (:focus — последний тронутый чекбокс) — заливка 12% и внешняя
       линия 1px #bdc1c7; кольцо остаётся, даже когда курсор ушёл;
     • нажатие (:active) — линия уходит на время удержания кнопки мыши.

   ПОЯВЛЕНИЕ КАК В GMAIL: кольцо не просто проявляется на месте, а вырастает
   из центра чекбокса — в покое оно сжато вдвое (scale 0.5) и прозрачно, под
   курсором и при активации раскрывается до полного диаметра, уходя курсора —
   сжимается обратно. Рост и заливка идут одним переходом (--motion-state +
   --motion-ease). Между наведением и активацией диаметр один (scale 1) —
   там работают только заливка и линия.

   Кольцо привязано к :focus, а не к :checked: подсветка принадлежит месту
   последнего действия, поэтому массово выделенные строки колец не несут.
   Уход фокуса (клик мимо, Esc) гасит кольцо сам. */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check::before,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  /* Покой — кольцо сжато к центру: отсюда оно вырастает под курсором. */
  transform: translate(-50%, -50%) scale(0.5) !important;
  width: var(--app-table-check-ring, 42px) !important;
  height: var(--app-table-check-ring, 42px) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  /* --motion-state, а не --motion-fast: заливка и обводка кольца обязаны идти
     в такт с подсветкой строки при активации, а она анимирует
     `background-color var(--motion-state) var(--motion-ease)`. Менять здесь
     скорость — значит расходиться со строкой. Рост круга — тем же тактом,
     что и заливка: иначе пустой круг успевал бы вырасти раньше, чем
     проявится. */
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* ЗАЛИВКА ПОД КУРСОРОМ — только заливка, обводки в ховере нет. Уровень один
   на любое состояние чекбокса: отдельная, более плотная заливка для ховера
   отмеченного заводила бы вторую шкалу там, где по замыслу одна. Разница
   яркости и так на месте — активация ровно вдвое плотнее ховера. */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:is(:hover, :has(> .app-check__box:hover))::before,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:is(:hover, :has(> .app-check__box:hover))::before {
  transform: translate(-50%, -50%) scale(1) !important;
  background: var(--app-table-check-ring-bg-hover, rgba(0, 0, 0, 0.06)) !important;
}

/* АКТИВАЦИЯ (:focus — последний тронутый чекбокс) — тот же чёрный вдвое
   плотнее плюс единственная в конструкции внешняя линия 1px #bdc1c7. Круг
   полного диаметра, как под курсором: активированный кольцом остаётся и
   после ухода курсора. Обе части въезжают одной анимацией из базового
   правила (--motion-state + --motion-ease) — тем же тактом, что подсветка
   строки. Линия одна на отмеченный и неотмеченный: состояние читается по
   заливке чекбокса, кольцу для этого второй цвет не нужен. Через `:focus`, а
   не голый `:has(:checked)`: последний матчился бы и в покое, и у каждой
   выделенной строки повис бы контур. */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:focus)::before,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:focus)::before {
  transform: translate(-50%, -50%) scale(1) !important;
  background: var(--app-table-check-ring-bg-active, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: inset 0 0 0 1px var(--app-table-check-ring-stroke, #bdc1c7) !important;
}

/* НАЖАТИЕ (:active — кнопка мыши держится) — внешняя линия уходит и
   возвращается на отпускании. Без этого нажатие ничем не отзывалось бы:
   заливка активации приходит уже на mousedown (вместе с :focus), и дальше до
   отпускания кольцо стояло бы неподвижно. Правило идёт СТРОГО после
   активации — вес у них одинаковый, и порядок здесь единственное, что решает.
   Линия уходит быстро (--motion-fast + --motion-ease-exit, MOTION.md §2.2
   «исчезновение мелочи»), а возвращается штатным --motion-state базового
   правила — в такт с подсветкой строки. Заливку и рост нажатие не трогает, но
   их переходы здесь перечислены заново: transition задаётся целиком, и без
   этого заливка на mousedown приходила бы рывком, а кольцо под клавиатурным
   «пробелом» выпрыгивало бы без роста. */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:active)::before,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:active)::before {
  box-shadow: none !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-fast, 100ms) var(--motion-ease-exit, cubic-bezier(0.3, 0, 1, 1)),
              transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* Заблокированный чекбокс (активная задача) кольца не показывает — и не
   растит его невидимым под курсором. */
html body :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:disabled)::before,
html body.theme-dark :is(#view-accounts.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase--v2, #view-tasks.view-tasks, .am-embed.view-am, :is(#view-moderation-chats, #view-creator-chats).view-moderation) table.app-table tbody .app-check:has(> .app-check__box:disabled)::before {
  transform: translate(-50%, -50%) scale(0.5) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ═══ components/check-menu-master.css ═══ */
/* ═══ css/components/check-menu-master.css — активация мастер-чекбокса ═══
   Связка «чекбокс + каретка» над списочными таблицами (аккаунты, окно выбора
   аккаунтов, прокси, базы, диспетчер задач, модерация, созданные чаты): обводка
   и заливки ячеек, когда связка активна. Геометрия, токены и заливка наведения
   вне активации — в каноне мастера в ui_tweaks.css (блок «ВЕРХНИЙ
   (МАСТЕР-)ЧЕКБОКС»), здесь только то, что зависит от активации. 03.10.2026.

   Фокус на самом чекбоксе раньше ловили селектором
   `:has(.px-check-menu__check:focus)`. Замер на таблице в 500 строк: с ним
   переключение `hidden` у ЛЮБОГО элемента страницы (так открываются все меню
   и поповеры) стоило ~23 мс пересчёта стилей, без него — ~8 мс. Теперь фокус
   ставит классом .is-check-focus components/check_menu_focus.js.
   `:focus-within` дешевле, но зажигал бы обводку и от фокуса каретки.

   Класс контрола в условии повторён: прежний `:has(.x:focus)` весил два
   класса, и от веса зависит, что перебивает наведение `:hover:not(:active)`
   из канона. Файл подключён после ui_tweaks.css и до bar-hover-ring.css. */

/* Условие активации ОДНО на все девять панелей: обводка принадлежит месту
   последнего действия — открытому меню (.is-active), фокусу на самом чекбоксе
   (.is-check-focus) и массовой команде, отданной этим контролом
   (.is-sel-pill). Отмеченность сюда не входит. Прокси, базы и диспетчер
   держали отдельную ветку на :checked/:indeterminate, и обводка у них
   зажигалась от ЛЮБОГО выделения — в том числе набранного протяжкой по
   строкам, которое в аккаунтах пилюлю наоборот снимает
   (updateSelectionDuringDrag). Ветка убрана, ровность поведения даёт
   syncMasterSelPill в app.js. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus)::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus)::before {
  box-shadow: inset 0 0 0 1px var(--app-check-master-stroke) !important;
}

/* АКТИВАЦИЯ БЕЗ КУРСОРА — сплошной #e0e0e0 сразу на обеих ячейках: это
   нижняя ступень шкалы под обводкой, а не тон наведения. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before {
  background: var(--app-check-master-fill-active) !important;
}

/* АКТИВАЦИЯ ПОД КУРСОРОМ — подсветка #d9d9d9 у той ячейки, на которой мышь. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret):hover:not(:active)::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret):hover:not(:active)::before {
  background: var(--app-check-master-fill-hover) !important;
}

/* НАЖАТИЕ — #cccccc; уходит с отпусканием само, потому что дальше решают
   правила наведения и активации. Идут последними и повторяют условия
   активации: без них правило активации (вес выше) перебивало бы нажатие. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret):active::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret):active::before,
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret):active::before,
html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret):active::before {
  background: var(--app-check-master-fill-press) !important;
}

/* ═══ components/bar-hover-ring.css ═══ */
/* ═══ css/components/bar-hover-ring.css — подсветка кнопок панели над таблицей ═══
   Панель списка (.picker-gmail-bar__actions) во всех девяти таблицах:
   аккаунты, окно выбора аккаунтов, прокси, базы, диспетчер задач, модерация,
   созданные чаты. Подсветка под курсором появляется «как в Gmail» — как и
   кольцо чекбокса строки (components/table-check-ring.css): вырастает из
   центра (scale 0.5 → 1) одним тактом с заливкой, уход курсора — сжатие
   обратно. Кривая — --motion-ease-icon, та же, что у цвета иконок панели
   (MOTION.md §2.1): рост и заливка идут в одном такте. 03.10.2026.

   1. ИКОНКИ ПАНЕЛИ (.picker-gmail-bar__action). Свои цвета у кнопки задают
      десятки модульных правил: наведение, открытое меню (.is-open), включённый
      фильтр (.is-active / .is-on) — и цвет у панелей разный. Этот блок их не
      переписывает: кружок ::before берёт цвет у самой кнопки
      (background-color: inherit), а собственный фон кнопки гасится
      background-clip: text — у кнопки нет текста, клип пуст. Значит, где
      модуль красил кнопку, теперь растёт кружок того же цвета, а новые
      состояния с новым цветом работают без правки этого файла.

      Вес — три `:is(#_, .класс)`: каждое считается как id, а совпадает по
      классу. Модульные правила наведения доходят до двух id
      (#view-… и #кнопка) с `background:` !important — шорткат сбрасывает
      background-clip, и перебить его может только более тяжёлый селектор.
      «Добавить источники» (.picker-gmail-bar__add) — кнопка с подписью: клип
      по тексту залил бы её буквы, её блок не трогает. */
html body .picker-gmail-bar__actions .picker-gmail-bar__action:not(.picker-gmail-bar__add):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action) {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  /* Свой слой наложения: кружок с z-index −1 ложится под значок, но над
     фоном панели и строк. */
  isolation: isolate !important;
}

html body .picker-gmail-bar__actions .picker-gmail-bar__action:not(.picker-gmail-bar__add):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: 50% !important;
  background-color: inherit !important;
  pointer-events: none !important;
  /* Покой — кружок сжат к центру: отсюда он вырастает под курсором. */
  transform: scale(0.5) !important;
  transition: transform var(--motion-state, 150ms) var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

/* Полный кружок — везде, где модуль красит кнопку: курсор, клавиатурный
   фокус, открытое меню, включённый фильтр. В покое цвет у кнопки прозрачный,
   и сжатый кружок не виден. */
html body .picker-gmail-bar__actions .picker-gmail-bar__action:not(.picker-gmail-bar__add):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action):is(#_, .picker-gmail-bar__action):is(:hover, :focus-visible, .is-open, .is-active, .is-on, [aria-expanded="true"])::before {
  transform: scale(1) !important;
}

/* 2. МАСТЕР-ЧЕКБОКС (связка «чекбокс + каретка»). Заливки ячеек — их ::before
   из канона мастера в ui_tweaks.css (блок «ВЕРХНИЙ (МАСТЕР-)ЧЕКБОКС») и
   components/check-menu-master.css: там цвета, здесь только рост. Под курсором
   ячейка вырастает из своего центра; при активации (обводка связки, условие
   то же, что в check-menu-master.css) обе ячейки стоят полными. Обводка
   (.px-check-menu__control::before) не растёт — она про активацию, а не про
   курсор. Селектор повторяет вес канона (+1 класс), поэтому перебивает его
   transform и transition. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .picker-gmail-bar__actions .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before {
  transform: translateY(-50%) scale(0.5) !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--motion-state, 150ms) var(--motion-ease-icon, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .picker-gmail-bar__actions .px-check-menu__control > :is(.px-check-menu__check-hit, .px-check-menu__caret):is(:hover, :active)::before {
  transform: translateY(-50%) scale(1) !important;
}

/* Активация и её уход — связка зажигается и гаснет ОДНОЙ коробкой, рост из
   центра здесь не участвует (15.10.2026). Раньше ячейка под курсором уже
   стояла полной, а соседняя вырастала за такт, — заливка ложилась по частям,
   с задержкой. Теперь обе ячейки сразу полные, и цвет набирается той же
   кривой, что и обводка связки (--motion-ease в каноне мастера).
   Уход: из покоя выше обе ячейки сжимались разом, каждая к своему центру, и
   заливка распадалась на две плашки. На такт после ухода активации
   components/check_menu_focus.js ставит .is-check-release: ячейки стоят
   полными и гаснут вместе с обводкой; когда класс снят, они сжимаются уже
   прозрачными. Переход берётся у состояния, В КОТОРОЕ входят, поэтому рост
   под курсором вне активации остаётся прежним. */
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .picker-gmail-bar__actions .px-check-menu__control.px-check-menu__control:is(.is-active, .is-sel-pill, .is-check-focus) > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before,
html body :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .picker-gmail-bar__actions .px-check-menu__control.is-check-release > :is(.px-check-menu__check-hit, .px-check-menu__caret)::before {
  transform: translateY(-50%) scale(1) !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* 3. СТРЕЛКИ ПАГИНАЦИИ (.picker-pagination__btn). Кольцо у них уже есть —
   ::before из style.css (заливка наведения, при нажатии плотнее и с линией);
   здесь только рост. В покое кольцо сжато к центру, под курсором и при
   нажатии (:focus/:active) — полное, тем же тактом, что и его заливка
   (--motion-state + --motion-ease, как у кольца чекбокса строки).

   Своя заливка у самой стрелки (модульные `background: … !important` на
   :hover) легла бы под растущее кольцо ровным кругом и съела бы рост: она
   гасится клипом по тексту (у стрелки текста нет). Вес — три
   `:is(#_, .класс)`, как в п.1: шорткат `background` сбрасывает клип, и
   перебить его может только более тяжёлый селектор. Заблокированная стрелка
   (край списка) кольца не показывает — её правила наведения и так не
   срабатывают, кольцо остаётся сжатым и прозрачным. */
html body .picker-gmail-bar .picker-pagination__btn:is(#_, .picker-pagination__btn):is(#_, .picker-pagination__btn):is(#_, .picker-pagination__btn) {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html body .picker-gmail-bar .picker-pagination__btn::before {
  transform: scale(0.5) !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              transform var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

html body .picker-gmail-bar .picker-pagination__btn:is(:hover, :focus, :active):not([disabled])::before {
  transform: scale(1) !important;
}

/* ═══ components/chip-toggle.css ═══ */
/* ═══ css/components/chip-toggle.css — пилюля-переключатель .srch-type ═══
   Пилюля страницы запуска: «Каналы» / «Группы» поиска, режимы сбора
   парсинга, права и оговорки рассылок и подписок. Основа — размер, контур,
   заливка включённой — живёт в ui_tweaks.css (он заморожен), здесь — отклик
   на включение и нажатие (03.10.2026).

   По образцу кольца под чекбоксом таблицы аккаунтов
   (components/table-check-ring.css):

     • включённая — заливка --srch-accent-soft и синяя обводка в тон ей:
       смесь акцента с той же заливкой, а не новый цвет. До этого обводка
       совпадала с заливкой и пропадала вовсе;
     • нажатие (:active — кнопка мыши держится) — обводка уходит и
       возвращается на отпускании. Уходит быстро (--motion-fast +
       --motion-ease-exit, MOTION.md §2.2 «исчезновение мелочи»),
       возвращается штатным --motion-state базового правила — уже цветом
       нового состояния: щелчок переключает пилюлю на отпускании.

   Ночная тема — на паузе: её правила в theme_dark.css этот файл не трогает. */
html body .srch-page .srch-type.is-on {
  border-color: color-mix(in srgb, var(--srch-accent) 40%, var(--srch-accent-soft)) !important;
}
/* Нажатие идёт строго после включённого состояния: у .is-on:active вес выше,
   а у голого :active — тот же, что у включённой, и решает порядок. transition
   задаётся целиком, поэтому заливка и цвет текста перечислены заново — иначе
   на нажатии они пришли бы рывком. */
html body .srch-page .srch-type:active,
html body .srch-page .srch-type.is-on:active {
  border-color: transparent !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease-exit),
              color var(--motion-state) var(--motion-ease) !important;
}

/* ═══ components/run-cta-results.css ═══ */
/* ═══ css/components/run-cta-results.css — значок результатов в рамке запуска ═══
   Круглая иконка рядом с «Запустить задачу»: ведёт туда, куда модуль
   складывает итог прогона (создание чатов — свой журнал, поиск — «Базы →
   Источники», парсинг — «Пользователи», чекер — «Номера»). Форма та же, что
   у .prs-cta__plan (40px, прозрачная, синий значок, подложка при наведении),
   но класс свой: тот закреплён за планировщиком (test_run_cta_frame_contract).
   Счётчика над значком нет (13.10.2026) — числа живут в подсказке. */
html body .srch-page .prs-cta__actions .prs-cta__results,
html body.theme-dark .srch-page .prs-cta__actions .prs-cta__results {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-20);
  background: transparent;
  color: var(--srch-accent);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
html body .srch-page .prs-cta__actions .prs-cta__results:hover,
html body.theme-dark .srch-page .prs-cta__actions .prs-cta__results:hover {
  background: var(--srch-hover);
}

/* ═══ components/cabinet.css ═══ */
/* ═══ css/components/cabinet.css — окно «Личный кабинет» ═══════════════════
   Профиль, лицензия, настройки и справка — одним окном (решение владельца
   15.10.2026). Открывает его только карточка «Профиль» на дне сайдбара;
   ведёт — js/components/cabinet.js.

   Окно того же рода, что «Помощь»: панель носит .help-modal, и размер, r28,
   шапка 23/500, колонка меню с пилюлями 36/r18 и адаптив приходят из её
   правил на классах (ui_tweaks.css, блок «Помощь»). Копию заводить нельзя:
   семья окон справки держит один канон, и вторая копия разошлась бы с ним на
   первой же правке. Здесь только то, что там привязано к id старых окон, и
   своё — раскладки окна и разделы справа.

   Ночи у файла своей нет: цвет — только токенами, ночь переопределяет их
   сама (theme_dark.css). */

/* ── Рамка колонок ───────────────────────────────────────────────────────
   Стандарт отступов модалок (ui_tweaks.css, §6 «Контент во всю ширину»)
   даёт двухколоночным окнам рамку через сами колонки: меню доходит до края
   карточки, а текст встаёт на 24/25. Правило перечисляет id окон справки —
   окна кабинета там нет, а дописать его в замороженный файл нельзя.
   Повторяем с тем же весом (id + два класса .modal). Правый отступ
   содержимого — ровно --modal-pad-r: от него markModalScrollBoxes вычитает
   ширину полосы прокрутки. */
html body #cabinet-modal.modal.modal .cab-layout {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body #cabinet-modal.modal.modal .cab-nav {
  padding-left: var(--modal-pad-l) !important;
}
html body #cabinet-modal.modal.modal .cab-content {
  padding-left: var(--modal-pad-l) !important;
  padding-right: var(--modal-pad-r) !important;
}
/* Пузыри подсказок «?» (.inv-help) стоят в раскладке и прозрачные, пока их
   не навели: у правого края колонки они растягивали её вбок, и под
   содержимым появлялась горизонтальная полоса прокрутки. */
#cabinet-modal .cab-content { overflow-x: hidden; }

/* ── Без шапки ───────────────────────────────────────────────────────────
   Заголовка «Личный кабинет» у окна нет (решение владельца 15.10.2026):
   колонка меню начинается от верха окна, на уровне крестика, а раздел
   справа — ниже, на своём отступе. Крестик стоит поверх раскладки в правом
   верхнем углу. Без шапки стандарт отступов не даёт раскладке верхнего поля
   («секция под шапкой»), поэтому верх держат сами колонки. */
.cab-panel { position: relative; }
/* Крестик стоит на том же верхнем поле, что поиск в колонке меню, а поле
   поиска — его высоты (--modal-close-size, канон кнопки закрытия окон):
   поиск и крестик читаются одной строкой. */
#cabinet-modal .cab-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  z-index: var(--z-raise);
}
html body #cabinet-modal.modal.modal .cab-layout { padding-top: 0 !important; }
/* Раздел справа — заметно ниже крестика, как на референсе владельца.
   Сама прокручиваемая колонка начинается не от верха окна, а на том же
   поле, что снизу (--modal-pad-b): панель скруглена r28 и обрезает всё за
   краем, и полоса прокрутки, начинаясь от верха, уходила под скругление —
   без стрелки и словно за границей окна. Отступ текста прежний: поле
   колонки вычитается из её внутреннего отступа. */
html body #cabinet-modal.modal.modal .cab-content {
  margin-top: var(--modal-pad-b);
  padding-top: calc(var(--space-40) + var(--space-16) - var(--modal-pad-b)) !important;
}
@media (max-width: 760px) {
  /* Узкое окно: колонка — лента сверху, крестик не должен на неё ложиться.
     Раздел стоит под лентой, а не у края окна: своё поле ему не нужно. */
  html body #cabinet-modal.modal.modal .cab-nav {
    padding-right: calc(var(--space-40) + var(--space-16)) !important;
  }
  html body #cabinet-modal.modal.modal .cab-content {
    margin-top: 0;
    padding-top: var(--space-20) !important;
  }
}

/* Нижнюю сторону рамки окна без подвала держит последняя секция панели
   (стандарт отступов, «Окно без подвала»). Раскладка стоит за крестиком,
   не последним ребёнком панели: отступ даём ей сами. */
html body #cabinet-modal.modal.modal .cab-layout {
  padding-bottom: var(--modal-pad-b) !important;
}

/* ── Меню окна ───────────────────────────────────────────────────────────
   Помощь и Обновления открываются в браузере — это говорит значок справа.
   Тише подписи, как каретка групп сайдбара. */
#cabinet-modal .help-nav__item .cab-nav__go {
  width: var(--space-16);
  height: var(--space-16);
  color: var(--text-light);
}

/* Подписи групп меню — мелкие и строчными, как в настройках приложения
   Claude: заглавные с разрядкой спорили с пунктами под ними. В колонке
   оглавления справки — то же самое, окно одно. */
#cabinet-modal .help-nav__group-title,
#cabinet-modal .faq-nav__group-title,
#cabinet-modal .wn-rail__group-title {
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Поиск по кабинету ───────────────────────────────────────────────────
   Поле — в начале колонки меню, компактное: 36px, r8. Пока в нём есть
   текст, группы меню спрятаны, а вместо них стоят находки по группам. */
/* Поля окна — поиск и поля профиля — одно правило: белое поле, светло-серая
   рамка; под курсором рамка темнее на ступень, в фокусе — ещё на ступень
   и без синего свечения (как в настройках учётной записи у Claude). Одна
   высота, 32px: строка поиска и поле имени различались на 6px, и рядом они
   читались разными элементами. Поле поиска — обёртка, фокус ловит она
   (:focus-within), у поля профиля — сам input.

   Активное поле — как на референсе владельца: синяя рамка акцента и тонкий
   светлый ореол вокруг, без заливки. */
#cabinet-modal {
  --cab-field-line: var(--g-line);
  --cab-field-line-hover: var(--g-icon-btn-ring);
  --cab-field-line-focus: var(--g-primary);
  --cab-field-ring-focus: var(--g-tint-strong);
}
#cabinet-modal .cab-search .help-modal__search-field,
#cabinet-modal .cab-row__control .accp-input,
#cabinet-modal .cab-support__fields .accp-input {
  height: var(--space-32);
  padding: 0 var(--space-10);
  border: 1px solid var(--cab-field-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-2);
  box-shadow: none;
}
#cabinet-modal .cab-search .help-modal__search-field:hover,
#cabinet-modal .cab-row__control .accp-input:hover,
#cabinet-modal .cab-support__fields .accp-input:hover {
  border-color: var(--cab-field-line-hover);
}
#cabinet-modal .cab-search .help-modal__search-field:focus-within,
#cabinet-modal .cab-row__control .accp-input:focus,
#cabinet-modal .cab-row__control .accp-input:focus-within,
#cabinet-modal .cab-row__control .accp-input:focus-visible,
#cabinet-modal .cab-support__fields .accp-input:focus,
#cabinet-modal .cab-support__fields .accp-input:focus-visible {
  border-color: var(--cab-field-line-focus);
  box-shadow: 0 0 0 1px var(--cab-field-ring-focus);
  outline: none;
}
/* Поле поиска стоит на одном уровне с крестиком (38px по канону окон):
   верхнее поле колонки добавляет половину разницы высот, и середины полей
   совпадают. */
html body #cabinet-modal.modal.modal .cab-nav {
  padding-top: calc(var(--space-16) + (var(--modal-close-size) - var(--space-32)) / 2) !important;
}
#cabinet-modal .cab-nav.is-searching > .help-nav__group { display: none; }
.cab-found { display: flex; flex-direction: column; gap: var(--space-16); }
.cab-found[hidden] { display: none; }
.cab-found__empty {
  margin: 0 var(--space-12);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-light);
}

/* Поиск переехал из строки под шапкой в колонку оглавления. Стандарт
   отступов (§4) даёт строке поиска боковую рамку окна — в колонке она
   удвоила бы поле, которое колонка уже держит сама. */
html body #cabinet-modal.modal.modal .cab-search {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0;
}
@media (max-width: 760px) {
  /* Колонка на узком окне — лента значков; полю поиска нужна своя ширина,
     иначе в ленте от него осталась бы одна лупа. */
  #cabinet-modal .cab-search { flex: 0 0 auto; min-width: 180px; }
}

/* Режим поиска FAQ прячет вводные абзацы групп. Метку is-searching носила
   панель окна FAQ, теперь — корень его раскладки. */
#cabinet-modal .faq-modal__layout.is-searching :is(.faq-decor, .faq-group__lead) {
  display: none;
}

/* ── Раздел справа ───────────────────────────────────────────────────────
   Панели «Профиль» и «Лицензия» носят .accp-page, «Настройки» — .stgp-page:
   токены и элементы этих канонов (поля, кнопки-пилюли, списки «ключ →
   значение») приходят оттуда. Карточек нет — раздел стоит прямо на белой
   панели окна, поэтому раскладка своя: колонка без зазора, отбивку дают
   верхние поля самих элементов канона, как внутри их бывших карточек. */
#cabinet-modal .cab-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#cabinet-modal .cab-pane[hidden] { display: none; }

/* Заголовок раздела — как заголовок статьи справки (.help-article__title):
   разделы и статьи стоят в одной колонке и читаются одним языком. */
.cab-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}
.cab-pane__head .help-article__title { margin: 0; }
.cab-pane > .help-article__title { margin: 0; }
/* Заголовок раздела кабинета — 16/24, как в настройках учётной записи:
   21px статьи справки над тремя строками полей читался крупнее содержимого.
   Статьи справки в своих раскладках остаются на прежнем кегле. */
#cabinet-modal .cab-pane > .help-article__title,
#cabinet-modal .cab-pane__head .help-article__title {
  font-size: var(--fs-16);
  line-height: 24px;
}
/* Подраздел внутри раздела: «Вход в программу», «Что входит в тариф». */
.cab-pane__h {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color: var(--text);
}
.cab-pane__sub {
  margin-top: var(--space-28);
  padding-top: var(--space-20);
  border-top: 1px solid var(--g-line-soft);
}
.cab-pane__sub[hidden] { display: none; }

/* ── Строки «подпись слева — поле справа» ────────────────────────────────
   Профиль устроен как страница настроек учётной записи: у строки слева
   название и пояснение, справа управление, между строками — тонкая линия.
   Раньше поля стояли столбцом под заголовком, и на широком окне подпись и
   поле разделяло пустое место. Поле — общее .accp-input канона, меняется
   только его ширина. */
.cab-rows { display: flex; flex-direction: column; margin-top: var(--space-16); }
.cab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--space-40);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--g-line-soft);
}
/* Линии — только между строками: под последней строкой списка (Email,
   «Выйти из программы») черты нет, как на референсе владельца. */
.cab-row:last-child { border-bottom: 0; }
/* Строку прячут атрибутом (срок у тарифа Free) — flex сильнее [hidden]. */
.cab-row[hidden] { display: none; }
.cab-row__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cab-row__label { font-size: var(--fs-14); line-height: 20px; color: var(--text); }
.cab-row__hint { font-size: var(--fs-13); line-height: 18px; color: var(--text-light); }
.cab-row__control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  flex: none;
}
/* Ширина поля в строке — 220px (высоту и цвета задаёт общее правило
   «Поля окна» выше). */
#cabinet-modal .cab-row__control .accp-input { width: 220px; max-width: 100%; }

/* ── Фото профиля: аватар — кнопка ──────────────────────────────────────
   Отдельных кнопок «Загрузить / Убрать» нет: фото меняют нажатием на сам
   аватар. Под курсором на нём проступает карандаш, по клику раскрывается
   меню «Загрузить фото / Удалить» — из семьи раскрывающихся окон, форма на
   токенах --pop-*. */
.cab-avatar { position: relative; }
.cab-avatar__btn {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  cursor: pointer;
}
.cab-avatar__btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }
#cabinet-modal .cab-avatar .accp-avatar-row__pic {
  width: var(--space-40);
  height: var(--space-40);
  font-size: var(--fs-16);
}
/* Карандаш — поверх аватара, на светлой подложке, как в настройках
   учётной записи. Виден под курсором, на фокусе и пока открыто меню.
   Подложка непрозрачная и на пиксель шире круга: полупрозрачная и того же
   размера, она оставляла по краю тёмный ободок фото (сглаживание краёв
   двух кругов не совпадает), и аватар выглядел сломанным. */
.cab-avatar__edit {
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--g-surface-4);
  color: var(--g-ink);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.cab-avatar__edit svg { width: var(--space-18); height: var(--space-18); }
.cab-avatar__btn:hover .cab-avatar__edit,
.cab-avatar__btn:focus-visible .cab-avatar__edit,
.cab-avatar__btn[aria-expanded="true"] .cab-avatar__edit { opacity: 1; }

.cab-avatar__menu {
  position: absolute;
  top: calc(100% + var(--pop-gap));
  right: 0;
  z-index: var(--z-modal-pop);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 200px;
  padding: var(--pop-pad);
  background: var(--pop-bg);
  border: 1px solid var(--pop-border-color);
  border-radius: var(--pop-radius);
  box-shadow: var(--pop-shadow);
  animation: pop-canon-in var(--motion-draw) var(--motion-ease-enter);
}
.cab-avatar__menu[hidden] { display: none; }
.cab-avatar__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: var(--pop-item-h);
  padding: var(--pop-item-pad);
  border: 0;
  border-radius: var(--pop-item-radius);
  background: transparent;
  color: var(--pop-text);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.cab-avatar__item[hidden] { display: none; }
.cab-avatar__item:hover,
.cab-avatar__item:focus-visible { background: var(--pop-item-hover); outline: none; }
.cab-avatar__item svg { flex: none; width: var(--space-16); height: var(--space-16); color: var(--pop-muted); }
.cab-avatar__item--danger,
.cab-avatar__item--danger svg { color: var(--g-danger-ink); }
@media (max-width: 760px) {
  /* Узкое окно: подпись над полем, поле во всю ширину. */
  .cab-row { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .cab-row__control { justify-content: flex-start; }
  #cabinet-modal .cab-row__control .accp-input { width: 100%; }
}

/* ── Раздел «Аккаунт» в профиле ──────────────────────────────────────────
   По образцу раздела «Аккаунт» у Claude, без удаления: те же строки, что у
   профиля выше. Виден, только пока вход включён (renderCabinetLogin). */
/* «Аккаунт» продолжает профиль той же страницей: ни линии над ним, ни
   отступа раздела у него нет. Заголовок отстоит от последней строки
   профиля, как раздел от раздела в настройках Claude, а первая строка — от
   заголовка так же, как «Фото профиля» от «Профиля» (общий .cab-rows,
   16px). */
/* Пустая строка ошибки профиля места не занимает: её верхний отступ
   прибавлялся бы к отступу «Аккаунта» от черты. */
#cabinet-modal .accp-error:empty { margin: 0; }
.cab-pane__sub.cab-account {
  margin-top: calc(var(--space-40) + var(--space-8));
  padding-top: 0;
  border-top: 0;
}
.cab-account .accp-callout { margin-top: var(--space-12); }
.cab-row__value { font-size: var(--fs-14); line-height: 20px; color: var(--text-mute); }

/* Кнопка строки — как «Выйти» у Claude: белая, рамка полей окна, 32px. */
.cab-btn {
  display: inline-flex;
  align-items: center;
  height: var(--space-32);
  padding: 0 var(--space-12);
  border: 1px solid var(--cab-field-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-2);
  color: var(--g-ink);
  font-family: inherit;
  font-size: var(--fs-14);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.cab-btn:hover:not([disabled]) { border-color: var(--cab-field-line-hover); background: var(--g-surface-4); }
.cab-btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.cab-btn[disabled] { color: var(--g-ink-disabled); cursor: default; }

/* Идентификатор — моноширинной плашкой; по клику копируется. */
.cab-mono {
  padding: var(--space-2) var(--space-8);
  border: 0;
  border-radius: var(--radius-6);
  background: var(--g-surface-4);
  color: var(--g-ink);
  font-family: var(--mono-font, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: var(--fs-12);
  line-height: 20px;
  cursor: copy;
}
.cab-mono:hover { background: var(--g-surface-5); }
.cab-mono:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

/* ── Раздел «Лицензия» ───────────────────────────────────────────────────
   Три строки: тариф, срок, ключ. Срок берёт цвет состояния — жёлтый в
   последние две недели, красный после окончания; метка у заголовка
   появляется только тогда же. */
#cabinet-modal .accp-state[hidden] { display: none; }
.cab-lic-term[data-state="soon"] { color: var(--g-warn-ink); }
.cab-lic-term[data-state="dead"] { color: var(--g-danger-ink); }

/* ── Раздел «Поддержка» ──────────────────────────────────────────────────
   Форма обращения — два поля друг под другом во всю ширину, без подписей и
   линий (решение владельца 20.10.2026): что вводить, говорит пример внутри
   поля. Сами поля — те же, что в других окнах (правила «Поля окна» выше).
   Публичных контактов в разделе нет: чат и канал закрытые. Ниже — тумблер
   технических данных и кнопка формы. */
.cab-support__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
#cabinet-modal .cab-support__fields .accp-input { width: 100%; }
#cabinet-modal .cab-support__fields textarea.accp-input {
  height: auto;
  min-height: 116px;
  padding: var(--space-8) var(--space-10);
  line-height: 1.5;
  resize: vertical;
}
/* Строка тумблера — сам <label>: нажатие по названию переключает. */
.cab-support__toggle { cursor: pointer; }
.cab-support__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.cab-support__status {
  margin-right: auto;
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--text-mute);
}
.cab-support__status.is-error { color: var(--g-danger-ink); }
/* Главная кнопка формы — пилюля приложения (как .accp-btn и кнопки
   страниц запуска): 40px, скругление по высоте, залита акцентом. */
.cab-btn--primary {
  height: var(--space-40);
  padding: 0 var(--space-24);
  border-color: var(--g-primary-fill);
  border-radius: var(--radius-20);
  background: var(--g-primary-fill);
  color: var(--g-primary-ink);
  font-weight: 500;
}
.cab-btn--primary:hover:not([disabled]) {
  border-color: var(--g-primary-strong);
  background: var(--g-primary-strong);
}

/* ═══ components/license-upgrade.css ═══ */
/* ═══ components/license-upgrade.css — окно «Обновить тариф» ═══════════════
   Заголовок по центру, под ним три срока доступа: демо, месяц, год с
   переключателем 1–3 года (решение владельца 16.10.2026). Карточка:
   название, цена со скидкой, кнопка, что входит.
   Ни вкладки «Модули», ни корзины с «Итого», ни подвала: всё решает кнопка
   карточки.

   Окно — по канону окон программы (addw, 16.10.2026): белая карточка r28
   без рамки, заголовок 23px/500 без черты под шапкой, кнопки — пилюли
   40px. Общие правила .lic-modal (r10, черта под шапкой, 18px/700)
   остались окнам «Продлить» и «Сменить ключ»; здесь они перебиты по id —
   так же весит канон шапки, поэтому и !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* Окно просторное: три карточки по 320px стоят посередине, вокруг — воздух. */
.lic-modal--upgrade { width: 1200px; }

/* ── Окно ─────────────────────────────────────────────────────────────── */
html body #lic-upgrade-modal .modal__panel {
  border: 0 !important;
  border-radius: var(--radius-28) !important;
  background-color: var(--g-surface-2) !important;
  box-shadow: var(--g-shadow-3) !important;
  font-family: var(--app-font) !important;
  color: var(--g-ink) !important;
}
html body #lic-upgrade-modal .modal__head {
  align-items: center !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body #lic-upgrade-modal .modal__title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: var(--g-ink) !important;
}
/* Снизу пошире канонических 24px: карточки не прижаты к краю окна. */
html body #lic-upgrade-modal .lic-modal__body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 600px !important;
  padding-bottom: var(--space-40) !important;
}

/* Тело белое, как у всех окон: карточки тарифов держат свою рамку. */
.lup__title {
  margin: var(--space-8) 0 var(--space-32);
  font-size: calc(var(--fs-24) + var(--space-4));
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  color: var(--g-ink);
}
.lup__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  gap: var(--space-20);
  align-items: stretch;
}

/* ── Карточка ─────────────────────────────────────────────────────────── */
.lup-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Карточка вытянута вверх-вниз (520px): список входящего не прижат к низу,
     а пояснение демо уходит на дно. */
  min-height: calc(var(--space-40) * 13);
  padding: var(--space-24);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-16);
  background: var(--g-surface-2);
}
/* Месяц — главный выбор: синяя рамка и залитая кнопка. */
.lup-card.is-featured { border-color: var(--g-primary); }

/* Название и переключатель лет — одной высоты: цены трёх карточек стоят
   на одной линии. */
.lup-card__name {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 32px;
  color: var(--g-ink);
}
.lup-seg {
  display: flex;
  gap: var(--space-6);
  height: var(--space-32);
}
.lup-seg__btn {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--g-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--g-ink-mute);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.lup-seg__btn:hover:not(.is-active) { background: var(--g-surface-4); color: var(--g-ink); }
.lup-seg__btn.is-active {
  border-color: transparent;
  background: var(--g-tint-strong);
  color: var(--g-primary);
}
.lup-seg__btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

/* Цена: сумма, зачёркнутая цена без скидки и метка скидки. */
.lup-card__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  min-height: var(--space-40);
  margin: var(--space-16) 0 var(--space-20);
}
.lup-card__price b {
  font-size: calc(var(--fs-24) + var(--space-4));
  font-weight: 600;
  line-height: 36px;
  color: var(--g-ink);
  white-space: nowrap;
}
.lup-card__old {
  font-size: var(--fs-14);
  color: var(--g-ink-faint);
  white-space: nowrap;
}
.lup-card__save {
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--g-tint-strong);
  color: var(--g-primary);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

/* Пилюли канона окон (.addw__btn): 40px, r20, 14px/500. Главная — синяя
   заливка, остальные — обводка с синим текстом, неактивная — серая. */
.lup-card__btn {
  height: var(--space-40);
  padding: 0 var(--space-20);
  border: 1px solid var(--g-primary-fill);
  border-radius: var(--radius-20);
  background: var(--g-primary-fill);
  color: var(--g-primary-ink);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.lup-card__btn:hover:not(:disabled) {
  border-color: var(--g-primary-strong);
  background: var(--g-primary-strong);
  box-shadow: var(--g-shadow-1);
}
.lup-card__btn.is-quiet {
  border-color: var(--g-line-strong);
  background: transparent;
  color: var(--g-primary);
}
.lup-card__btn.is-quiet:hover:not(:disabled) {
  border-color: var(--g-line-strong);
  background: var(--g-tint);
  box-shadow: none;
}
.lup-card__btn:disabled {
  border-color: var(--g-surface-5);
  background: var(--g-surface-5);
  color: var(--g-ink-disabled);
  cursor: default;
}
.lup-card__btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

.lup-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: var(--space-28) 0 0;
  padding: 0;
  list-style: none;
}
.lup-card__feat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink);
}
.lup-card__feat svg {
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  margin-top: var(--space-2);
  color: var(--g-primary);
}
.lup-card__fine {
  margin: auto 0 0;
  padding-top: var(--space-16);
  font-size: var(--fs-12);
  line-height: 18px;
  color: var(--g-ink-faint);
}

/* Гарантия возврата — под карточками, по центру, со щитом. */
.lup__guard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin: var(--space-28) 0 0;
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--g-ink-mute);
}
.lup__guard-icon {
  flex: none;
  width: var(--space-20);
  height: var(--space-20);
  color: var(--g-primary);
}

/* Узкое окно: карточки — столбиком. */
@media (max-width: 860px) {
  html body #lic-upgrade-modal .lic-modal__body { min-height: 0 !important; }
  .lup__title { margin-bottom: var(--space-20); font-size: var(--fs-20); line-height: 28px; }
  .lup__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ components/license-key.css ═══ */
/* ═══ components/license-key.css — окно «Добавить ключ» ═══════════════════
   Одно поле и одна кнопка (решение владельца 16.10.2026): подпись «Ключ
   лицензии», поле со значком ключа, под ним строка ошибки (пустая, пока
   ключ не набран неверно), в подвале — «Добавить». Ни текущего ключа, ни
   пояснений, ни ссылок на соседние окна.

   Окно — по канону окон программы (addw): белая карточка r28 без рамки,
   заголовок 23px/500 без черты под шапкой, кнопка — пилюля 40px. Общие
   правила .lic-modal (r10, черта под шапкой и над подвалом, 18px/700)
   перебиты по id — так же весит канон шапки, поэтому и !important.
   ═══════════════════════════════════════════════════════════════════════ */

.lic-modal--key { width: 460px; }

/* ── Окно ─────────────────────────────────────────────────────────────── */
html body #lic-key-modal .modal__panel {
  border: 0 !important;
  border-radius: var(--radius-28) !important;
  background-color: var(--g-surface-2) !important;
  box-shadow: var(--g-shadow-3) !important;
  font-family: var(--app-font) !important;
  color: var(--g-ink) !important;
}
html body #lic-key-modal .modal__head {
  align-items: center !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body #lic-key-modal .modal__title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: var(--g-ink) !important;
}
html body #lic-key-modal .modal__foot {
  justify-content: flex-end !important;
  border: 0 !important;
  background: transparent !important;
}

/* ── Поле ключа ───────────────────────────────────────────────────────── */
.lkey-field {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}
/* Рамка — у обёртки: внутри неё значок и само поле, фокус поля красит всю
   рамку (как поля окна кабинета). */
.lkey-box {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: var(--space-40);
  padding: 0 var(--space-12);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-8);
  background: var(--g-surface-2);
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.lkey-box:hover { border-color: var(--g-ink-mute); }
.lkey-box:focus-within {
  border-color: var(--g-primary);
  box-shadow: inset 0 0 0 1px var(--g-primary);
}
.lkey-box.is-error,
.lkey-box.is-error:focus-within {
  border-color: var(--g-danger-ink);
  box-shadow: inset 0 0 0 1px var(--g-danger-ink);
}
.lkey-box__icon {
  flex: none;
  width: var(--space-20);
  height: var(--space-20);
  color: var(--g-ink-faint);
}
.lkey-box__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--mono-font, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: var(--fs-14);
  letter-spacing: 0.5px;
  color: var(--g-ink);
}
.lkey-box__input::placeholder { color: var(--g-ink-faint); }
/* Фокус рисует рамка обёртки. Своё кольцо фокуса полю в окне даёт общее
   правило style.css (.modal … :focus-visible, 2px) — внутри рамки оно
   читалось второй обводкой. */
#lic-key-modal .lkey-box__input:focus,
#lic-key-modal .lkey-box__input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}

/* Ошибка — только когда ключ набран неверно; пустая строка места не держит. */
.lkey-error {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--g-danger-ink);
}
.lkey-error:empty { display: none; }

/* ── Кнопка: пилюля канона окон (.addw__btn) ──────────────────────────── */
.lkey-btn {
  height: var(--space-40);
  padding: 0 var(--space-24);
  border: 0;
  border-radius: var(--radius-20);
  background: var(--g-primary-fill);
  color: var(--g-primary-ink);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.lkey-btn:hover:not(:disabled) {
  background: var(--g-primary-strong);
  box-shadow: var(--g-shadow-1);
}
.lkey-btn:disabled {
  background: var(--g-surface-5);
  color: var(--g-ink-disabled);
  cursor: default;
}
.lkey-btn:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

/* ═══ components/access-lock.css ═══ */
/* ═══ components/access-lock.css — замки пропуска программы ═══════════════
   Три вещи одной темы (webapp/access_gate.py):

   1. экран входа в виде «замок» (data-mode="lock"): программа закрыта не из-за
      логина, а из-за пропуска — нет связи с сервером, место тарифа занято
      другим компьютером. Формы нет, есть «Проверить снова»;
   2. пункт меню неподключённого модуля (data-locked="module") — с замком;
   3. окно «Подключить модуль» (#module-lock-modal) — по канону окон
      программы, как «Добавить ключ» (license-key.css).

   Сам экран входа описан в ui_tweaks.css (заморожен): здесь только то, что
   добавил вид «замок».
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Экран входа: вид «замок» ─────────────────────────────────────── */
.auth-gate:not([data-mode="lock"]) .auth-gate__lock { display: none; }
.auth-gate[data-mode="lock"] .auth-gate__form,
.auth-gate[data-mode="lock"] #auth-submit,
.auth-gate[data-mode="lock"] #auth-toggle { display: none; }

.auth-gate__lock-info {
  margin: 0 0 var(--space-16);
  font-size: var(--fs-13);
  line-height: 20px;
  color: var(--g-ink-mute);
}
.auth-gate__lock-info:empty { display: none; }
/* .auth-gate__link — блок (ui_tweaks.css), и атрибут hidden он перебивает:
   «Перепривязать» нужна только при чужом компьютере. */
.auth-gate__lock [hidden] { display: none; }

/* ── 2. Пункт меню с замком ──────────────────────────────────────────── */
/* Замок рисуется маской после подписи: пункт тот же, что у открытого
   модуля, а не отдельная разметка, и сворачивается вместе с рельсом. */
/* Подпись у пункта — блок (sidebar-nav), поэтому замок встаёт в строку сам,
   а не через flex у подписи. */
.nav-item[data-locked="module"] .nav-item__label::after {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  margin-left: var(--space-6);
  width: var(--space-12);
  height: var(--space-12);
  background-color: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 3. Окно «Подключить модуль» ─────────────────────────────────────── */
.mlock { width: 460px; }

html body #module-lock-modal .modal__panel {
  border: 0 !important;
  border-radius: var(--radius-28) !important;
  background-color: var(--g-surface-2) !important;
  box-shadow: var(--g-shadow-3) !important;
  font-family: var(--app-font) !important;
  color: var(--g-ink) !important;
}
html body #module-lock-modal .modal__head {
  align-items: flex-start !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body #module-lock-modal .modal__title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: var(--g-ink) !important;
}
html body #module-lock-modal .modal__foot {
  justify-content: flex-end !important;
  border: 0 !important;
  background: transparent !important;
}

.mlock__text {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}
.mlock__text:last-child { margin-bottom: 0; }

/* ═══ components/message-cards.css ═══ */
/* ═══ css/components/message-cards.css — список сообщений карточками ═══
   Список готовых сообщений одним окном: полоса «Добавить …» · счёт, ниже
   карточки по порядку — номер, начало текста без разметки, файлы чипами,
   справа ↑/↓ и крестик. Щелчок по карточке открывает сообщение в общем
   окне сообщения (#msge-modal). Пустой — «Список пуст» пунктирной рамкой.

   Заведён 15.10.2026 для окна «Ответы» автоответчика (#ar-editor) по
   образцу экрана «Посты» окна «Материалы» создания чатов; в тот же день
   «Посты» переведены сюда, их копия на id из screens/chat-creator.css
   удалена (там осталось своё: булавка и «…»). Правила на классах .msgc*:
   следующее окно получает вид разметкой, а не строкой в списке id. */

html body .msgc {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ── Полоса: «Добавить …» · счёт ─────────────────────────────────── */
html body .msgc__bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin: 0;
}
html body .msgc__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-20);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-20);
  background: var(--g-surface-3);
  color: var(--g-ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
html body .msgc__add:hover {
  background: var(--g-tint);
}
html body .msgc__add svg {
  width: 16px;
  height: 16px;
  color: var(--g-primary);
}
html body .msgc__count {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g-ink-mute);
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
}

/* ── Карточки ─────────────────────────────────────────────────────── */
html body .msgc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-height: 40vh;
  overflow-y: auto;
}
html body .msgc__list[hidden] {
  display: none;
}
html body .msgc__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  border: 1px solid var(--g-line-soft);
  border-radius: var(--radius-12);
  background: var(--g-surface-3);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
/* Вся карточка — щелчок «изменить»: наведение подсвечивает её целиком. */
html body .msgc__item:hover {
  border-color: var(--g-line);
  background: var(--g-surface-4);
}
html body .msgc__num {
  flex: none;
  min-width: 20px;
  font-size: var(--fs-13);
  line-height: 20px;
  color: var(--g-ink-faint);
  font-variant-numeric: tabular-nums;
}
html body .msgc__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Кнопка — вся строка текста: рамка вокруг неё читалась бы полем ввода.
   Клавиатурный фокус виден по карточке целиком. */
html body .msgc__body:focus,
html body .msgc__body:focus-visible {
  outline: none;
  box-shadow: none;
}
html body.is-kbd .msgc__item:focus-within {
  border-color: var(--g-primary);
}
html body .msgc__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink);
}
html body .msgc__text.is-empty {
  color: var(--g-ink-faint);
}
html body .msgc__files {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  min-width: 0;
}
html body .msgc__file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 24px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-12);
  background: var(--g-surface-4);
  color: var(--g-ink-mute);
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* «…» после первых файлов — только значок, не сжимается. */
html body .msgc__file--more {
  flex: none;
  cursor: default;
}
html body .msgc__actions {
  flex: none;
  display: flex;
  gap: var(--space-2);
  margin-top: calc(-1 * var(--space-6));
  cursor: default;
}
html body .msgc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-16);
  background: transparent;
  color: var(--g-ink-mute);
  cursor: pointer;
}
html body .msgc__btn:hover:not([disabled]) {
  background: var(--g-icon-btn-hover);
}
html body .msgc__btn[disabled] {
  color: var(--g-ink-disabled);
  cursor: default;
}
html body .msgc__btn--rm:hover {
  color: var(--g-danger-ink);
}

/* ── Пустой список ────────────────────────────────────────────────── */
html body .msgc__empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-28) var(--space-24) var(--space-24);
  border: 1px dashed var(--g-line);
  border-radius: var(--radius-12);
  text-align: center;
  color: var(--g-ink-faint);
}
html body .msgc__empty-title {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  color: var(--g-ink);
}
html body .msgc__empty-sub {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}

/* ═══ screens/accounts.css ═══ */
/* ═══ css/screens/accounts.css — экран «Аккаунты» ═══
   Пока экран целиком живёт в ui_tweaks.css, сюда попадает только новое и то,
   что из замороженных файлов вынесено осознанно.

   ── Карандаш в ячейке ──────────────────────────────────────────────────
   Карандаш проявляется по наведению на СВОЮ ячейку, а не на строку. Строчный
   ховер зажигал карандаш прокси на всю ширину таблицы: курсор стоял в
   «Аккаунте» или «Телефоне», а на другом конце строки уже что-то предлагали
   нажать. Теперь правка принадлежит колонке, в которой стоит курсор, и
   правило одно на оба карандаша — прокси и роли. Клавиатуре карандаш виден
   всегда (focus-visible): наведения у неё нет.

   Правило прокси перенесено из ui_tweaks.css (блок «Ячейка „Прокси“») —
   сменить там селектор было нельзя, файл заморожен. `!important` оставлен:
   это язык окружающих правил таблицы, и он страхует от правила `tr:hover td`
   с важностью, которое могут написать позже. */
html body .view-am .acc-table tbody td[data-col="proxy"] .am-proxy__edit,
html body .view-am .acc-table tbody td[data-col="role"] .am-role-cell__edit {
  opacity: 0 !important;
}
html body .view-am .acc-table tbody td[data-col="proxy"]:hover .am-proxy__edit,
html body .view-am .acc-table tbody td[data-col="proxy"] .am-proxy__edit:focus-visible,
html body .view-am .acc-table tbody td[data-col="role"]:hover .am-role-cell__edit,
html body .view-am .acc-table tbody td[data-col="role"] .am-role-cell__edit:focus-visible {
  opacity: 1 !important;
}

/* Карандаш роли — та же кнопка-значок, что карандаш прокси (ui_tweaks.css,
   «Значок связи и карандаш»). Объявления повторены, а не дописаны к тому
   правилу: ui_tweaks заморожен, новый селектор туда не добавляется. Когда
   канон карандаша уедет в css/components/, оба правила сойдутся в одно.

   Кнопка стоит В ПОТОКЕ ряда чипов (`flex: 0 0 auto`), а не абсолютом поверх
   ячейки: место под неё занято всегда, поэтому наведение ничего не двигает, а
   сжимаются от неё названия тегов — «+N» своей ширины не отдаёт
   (ui_tweaks.css, `.role-tag--more`). Ячейка при этом остаётся как была:
   `overflow: hidden` и `padding-right` не трогаем.

   К правому краю клетки карандаш НЕ прижимается (`margin-left: auto` снят
   17.09.2026): между тегом и кнопкой вставало пустое поле в полклетки, и
   кнопка читалась как принадлежащая колонке, а не тегу. Теперь она идёт
   сразу за последним чипом — с тем же зазором 6px, что у карандаша прокси
   за адресом. */
html body .view-am .acc-table .am-role-cell__edit,
html body.theme-dark .view-am .acc-table .am-role-cell__edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text-mute) !important;
  cursor: pointer !important;
  transition: opacity .12s ease, background .12s ease, color .12s ease !important;
}
html body .view-am .acc-table .am-role-cell__edit .material-symbols-outlined {
  font-size: 14px !important;
  line-height: 1 !important;
}
html body .view-am .acc-table .am-role-cell__edit:hover,
html body .view-am .acc-table .am-role-cell__edit:focus-visible {
  background: var(--bg-hover) !important;
  color: var(--tp-accent) !important;
}
/* Ноль подчёркиваний и сдвигов: кликабельность показывает цвет, а не линия
   под текстом и не прыжок — в списке на полсотни строк это поле кнопок. */
html body .view-am .acc-table .am-role-cell__edit:hover,
html body.theme-dark .view-am .acc-table .am-role-cell__edit:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ── Правый край поля «Сохранённые прокси» (#am-proxy-modal) ──────────────
   Тот же край, что у поля тегов: крестик «снять» и стрелка списка, стрелка
   переворачивается сменой знака (как каретка группы в сайдбаре), крестик
   приходит на наведение, под раскрытым списком оба горят синим работающего
   поля. Размеры — общие токены --field-chevron-size / --field-clear-size.

   Правила повторены, а не взяты у поля тегов: там это кнопки внутри короба, а
   здесь — слой ПОВЕРХ нативного селекта (в <select> ничего не вложишь). Общее
   у них — числа и решение, а не разметка. Пара к ним живёт в
   css/screens/accounts-roles.css.

   Свою фоновую стрелку селект здесь отдаёт: два знака сразу читались бы как
   двойная стрелка. У соседей по семье (#px-add-modal, .newbase-modal) фон
   остаётся — им переворот не нужен. */
#am-proxy-modal .amproxy__combo {
  position: relative;
}
#am-proxy-modal .amproxy__select {
  background-image: none;
  padding-right: 68px;
}
#am-proxy-modal .amproxy__acts {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Щелчок принадлежит селекту: это он раскрывает список. Крестик забирает
     себе только свою кнопку. */
  pointer-events: none;
}

#am-proxy-modal .amproxy__clear {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
#am-proxy-modal .amproxy__combo:hover .amproxy__clear,
#am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__clear,
#am-proxy-modal .amproxy__clear:focus-visible { opacity: 1; }
#am-proxy-modal .amproxy__clear svg {
  display: block;
  width: var(--field-clear-size);
  height: var(--field-clear-size);
}

#am-proxy-modal .amproxy__chev {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: #889099;
}
#am-proxy-modal .amproxy__chev-glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: var(--field-chevron-size);
  height: var(--field-chevron-size);
  transition: opacity var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
#am-proxy-modal .amproxy__chev-glyph--up { opacity: 0; }
#am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__chev-glyph--down { opacity: 0; }
#am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__chev-glyph--up { opacity: 1; }

/* Раскрыт список — край поля горит тем же синим, что и его рамка. */
#am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__chev,
#am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__clear { color: #0b57d0; }

/* ── Поле «Пароль» в окне «Добавить пароль» ────────────────────────────
   Глаз «показать введённое» и кости «придумать пароль». Обработчики на них
   живут в app.js давно (`twofa-toggle-visibility`, `twofa-generate`), а из
   разметки кнопки пропали — и окно осталось с двумя полями `type="password"`
   без единого способа увидеть набранное.

   Приём тот же, что у поля прокси выше (`.amproxy__combo`): ряд кнопок стоит
   АБСОЛЮТОМ поверх правого края поля, а не рядом с ним. Иначе поле пришлось
   бы сужать, и оно перестало бы совпадать по ширине с полем подтверждения
   под ним.

   Правила здесь, а не в style.css, где объявлены `.inv-field` и `.inv-input`:
   тот файл заморожен, новая пара «селектор + свойство» роняет храповик. */
/* `align-self` обязателен. Комбо — элемент колоночного флекса `.inv-field`,
   а такой элемент по умолчанию растягивается на всю ширину поля (391px в
   окне), тогда как сам ввод остаётся своей ширины (320px, style.css). Кнопки
   на «правом краю» вставали тогда на правом краю ПОЛЯ — в пустоте за рамкой
   ввода. `flex-start` прижимает комбо к ширине ввода; `max-width` страхует на
   узком окне, где ввод сжимается.
   Писать `inline-flex` бессмысленно: элемент флекса блокифицируется, и
   вычисленным всё равно окажется `flex`. */
#cloud-password-change-modal .cloud-pass__combo {
  position: relative;
  display: flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
}

/* Место под две кнопки: текст не должен уезжать под них. Считается из общего
   размера кнопки, а не подобранным числом.

   `!important` — не перестраховка: `ui_tweaks.css` держит на это поле
   `html body #cloud-password-change-modal .inv-input { padding: … !important }`,
   а тот файл заморожен, и снять важность там нельзя. Это язык окружающих
   правил экрана — см. карандаши в начале файла. */
#cloud-password-change-modal .cloud-pass__input {
  padding-right: calc(var(--field-act-size) * 2 + 12px) !important;
}

#cloud-password-change-modal .cloud-pass__acts {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#cloud-password-change-modal .cloud-pass__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--field-act-size);
  height: var(--field-act-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
#cloud-password-change-modal .cloud-pass__act:hover,
#cloud-password-change-modal .cloud-pass__act:focus-visible { color: var(--text); }

/* Пароль показан — глаз горит синим программы. Именно `--g-primary`: токена
   `--accent` в проекте нет вовсе, и `var(--accent)` без запасного значения
   отбрасывается целиком, молча возвращая кнопку к серому. */
#cloud-password-change-modal .cloud-pass__act[aria-pressed="true"] { color: var(--g-primary); }

#cloud-password-change-modal .cloud-pass__act svg {
  display: block;
  width: var(--field-clear-size);
  height: var(--field-clear-size);
}

/* ── «Добавление аккаунтов»: подвал — тот же шаг, что под заголовком ───
   Карточка по высоте равна содержимому, а «Отмена» стоит под последним
   пунктом на том же шаге `--modal-gap` (16px), что и первый пункт под
   заголовком: сверху вниз окно читается одним ритмом. Раньше карточка была
   фиксированной высоты (360px), подвал держал низ `margin-top: auto`, и между
   последним пунктом и «Отменой» зияло ~70px — две строки списка (третью,
   «Tdata», прячет флаг сборки) не заполняли карточку.

   Высоту ставит ui_tweaks.css (заморожен, `html body #add-modal .addw`),
   поэтому перебиваем весом: к id окна добавлен `.modal.modal`. Отступ подвала
   обнулять не нужно — его даёт канонный слой окон (padding-top подвала =
   --modal-gap), а `margin-top: auto` из замороженного файла гасит тот же
   канон.

   Нижняя линия у последнего пункта лишняя: она разделяет пункты между собой,
   а под последним ничего нет. */
html body #add-modal.modal.modal .addw {
  height: auto !important;
}
html body #add-modal.modal .addw__option:last-child::after {
  content: none !important;
}

/* ═══ screens/accounts-roles.css ═══ */
/* ═══ css/screens/accounts-roles.css — окно «Теги аккаунта» ═══
   Состав тегов ОДНОЙ строки таблицы (#am-role-modal, открывается карандашом
   в колонке «Теги»). Массовое окно #role-modal живёт своими правилами в
   style.css / ui_tweaks.css и здесь не участвует: его правила написаны по
   адресу `#role-modal`, и тянуть их на второй id значило бы дописывать
   селекторы в замороженный файл.

   ── Почему оболочка расписана здесь целиком ──────────────────────────────
   Окно открывает карандаш в строке — как и соседнее «Прокси аккаунта»
   (#am-proxy-modal). Один жест обязан открывать окна одного вида, поэтому
   оболочка (карточка, шапка, круглый крестик, тело, подвал и кнопки-пилюли)
   повторяет канон addw один в один по числам семьи
   «ADD-PROXY + NEWBASE — one addw dialog language» (ui_tweaks.css).

   Повторяет, а не переиспользует: семья написана одним списком
   `:is(#px-add-modal …, #am-proxy-modal …)`, а ui_tweaks заморожен — дописать
   туда третий id значит завести новые пары «селектор + свойство», и храповик
   краснеет. Когда канон addw уедет в css/components/, эти правила сойдутся
   обратно в одно.

   Цвета оболочки — литералами той же палитры, что у семьи прокси: ночь этим
   окнам даёт генератор (scripts/gen_theme_dark_map.py читает и css/screens/),
   и литерал — его единственный вход. Список тегов, наоборот, нарисован
   токенами `--pop-*` канона раскрывающихся окон: их ночь переопределяет
   сама. */

/* ── Карточка ── */
#am-role-modal .amrole__panel {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: #1f1f1f;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  font-family: var(--app-font);
  /* У семьи прокси здесь `overflow: hidden`. Нам нельзя: под полем висит
     раскрывающийся список, и скрытый перелив срезал бы его по краю карточки.
     Прокрутку взял на себя сам список (max-height) и короб с чипами. */
  overflow: visible;
}

/* Всё внутри наследует стек панели. Кроме значков: Material Symbols — не стек
   текста, а шрифт-картинка, и наследование выводит вместо глифа слово. */
#am-role-modal .amrole__panel *:not(.material-symbols-outlined) {
  font-family: inherit;
}

/* ── Шапка: заголовок + круглый крестик, без разделителя ── */
#am-role-modal .amrole__head {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
#am-role-modal .amrole__title {
  margin: 0;
  padding: 0;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
  color: #1f1f1f;
  text-align: left;
}
#am-role-modal .amrole__head .amrole__close {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  box-shadow: none;
}
#am-role-modal .amrole__head .amrole__close:hover {
  background: #f1f3f4;
  color: #1f1f1f;
}
#am-role-modal .amrole__head .amrole__close svg {
  width: 18px;
  height: 18px;
}

/* ── Тело ── */
#am-role-modal .amrole__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #1f1f1f;
  overflow: visible;
}

/* ── Подвал: кнопки-пилюли 40px / r20 ── */
#am-role-modal .amrole__foot {
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border: 0;
  background: transparent;
}
/* `!important` у кнопок — не украшение: общий канон пилюль перебивается тем
   же оружием, что у семьи прокси. Радиус кнопок приколочен в ui_tweaks
   правилом `html body .btn--primary, html body .btn--ghost { border-radius:
   6px !important }`, и без важности «Сохранить» оставалось прямоугольным. */
#am-role-modal .amrole__foot .btn {
  min-width: 64px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
#am-role-modal .amrole__foot .btn--ghost {
  padding: 0 12px !important;
  background: transparent !important;
  color: #0b57d0 !important;
}
#am-role-modal .amrole__foot .btn--ghost:hover {
  background: rgba(11, 87, 208, 0.08) !important;
  border-color: transparent !important;
  color: #0b57d0 !important;
}
#am-role-modal .amrole__foot .btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
}
#am-role-modal .amrole__foot .btn--primary:hover {
  background: #0a4fc0 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(11, 87, 208, 0.35) !important;
}

@media (max-width: 640px) {
  #am-role-modal .amrole__panel {
    max-width: calc(100vw - 20px);
    padding: 20px;
  }
}

/* ── Поле: чипы назначенных тегов + ввод + шеврон ─────────────────────────
   Поле называет себя изнутри (канон полей): подпись стоит в placeholder
   ввода, отдельной метки над коробом нет. Короб — один прямоугольник на
   чипы и ввод: чипы ЗДЕСЬ, а не под полем, потому что это и есть состав, а
   не итог выбора где-то ещё. Рамка, радиус и фокус — те же, что у контролов
   семьи прокси (40px, r8, #dadce0, фокус #0b57d0).

   Обёртка `.amrole__combo` — якорь раскрывающегося списка: он висит под полем
   абсолютом, а значит кому-то в предках надо быть `position: relative`. */
.amrole__combo {
  position: relative;
}
.amrole__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  /* Много тегов не растят карточку: короб прокручивается сам. */
  max-height: 132px;
  overflow-y: auto;
  padding: 7px 8px 7px 10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  /* Короб целиком — кнопка: щелчок по нему раскрывает список, и курсор обязан
     об этом сказать. Текстовая каретка обещала бы только ввод. */
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Под курсором короб меняет ТОЛЬКО цвет рамки. Кольцо `box-shadow` рядом с
   ней читалось второй, внешней обводкой — у поля с чипами внутри и без того
   довольно рамок.

   Считается фокус ВВОДА, а не `:focus-within`: внутри короба живут ещё
   крестик и стрелка, и с `focus-within` поле загоралось синим от кнопки,
   которой клавиатурный слой отдал фокус при открытии окна. */
.amrole__field:has(.amrole__input:focus) {
  border-color: #0b57d0;
}

.amrole__chips {
  display: contents;
}

/* Чип в поле — тот же `.role-tag`, что в таблице: одна роль выглядит одинаково
   везде. Своего у него только место под крестик справа. */
.amrole__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 3px;
  max-width: 100%;
}
.amrole__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amrole__chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .65;
  cursor: pointer;
}
.amrole__chip-del:hover,
.amrole__chip-del:focus-visible {
  opacity: 1;
  background: var(--g-tint);
}
.amrole__chip-del svg { display: block; width: 12px; height: 12px; }

.amrole__input {
  flex: 1 1 120px;
  min-width: 90px;
  border: 0;
  outline: none;
  padding: 2px 0;
  background: transparent;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.amrole__input::placeholder { color: #80868b; opacity: 1; }
/* Общий канон окон рисует под курсором кольцо вокруг КАЖДОГО поля модалки
   (`.modal input:focus-visible { box-shadow: 0 0 0 2px rgba(--inv-accent-rgb,
   .08) }` в style.css). Здесь ввод — не поле, а часть короба, и это кольцо
   вставало внутри рамки серой обводкой длиной с оставшееся место. Фокус
   показывает сам короб: он меняет цвет рамки. */
#am-role-modal .amrole__input:focus,
#am-role-modal .amrole__input:focus-visible {
  box-shadow: none;
  outline: none;
}

/* Правый край поля: крестик «снять все» и стрелка списка. Стоят парой, потому
   что крестик приходит и уходит (его нет, пока снимать нечего), а стрелка на
   месте всегда — свободное место держит за них обоих обёртка. */
.amrole__acts {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  gap: 2px;
}

/* Шеврон — не кнопка-действие, а край поля: он показывает, что у поля есть
   список, и раскрывает его. Подложки под курсором у него нет — подсветился бы
   край короба, а не то, что можно нажать. Кольцо фокуса остаётся: клавиатуре
   надо видеть, где она стоит. */
.amrole__chev {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #889099;
  cursor: pointer;
}

/* Направление стрелки — состояние, а не движение: знак «вниз» уступает место
   знаку «вверх», оба стоят на одном месте и не крутятся. Ровно так сделана
   каретка группы в сайдбаре, и мягкость здесь даёт та же прозрачность по тем
   же токенам движения. */
.amrole__chev-glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: var(--field-chevron-size);
  height: var(--field-chevron-size);
  transition: opacity var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.amrole__chev-glyph--up { opacity: 0; }
.amrole__chev.is-open .amrole__chev-glyph--down { opacity: 0; }
.amrole__chev.is-open .amrole__chev-glyph--up { opacity: 1; }

/* Крестик снимает ВЕСЬ состав разом — до «Сохранить» это правка в окне, а не
   на сервере. В покое его не видно: полтора десятка окон приучили, что «снять
   всё» показывается, когда до поля дотянулись. Приходит он на наведение на
   короб, под раскрытым списком стоит всегда, и клавиатуре виден по фокусу. */
.amrole__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.amrole__field:hover .amrole__clear,
.amrole__field:has(.amrole__chev.is-open) .amrole__clear,
.amrole__clear:focus-visible { opacity: 1; }
.amrole__clear[hidden] { display: none; }
.amrole__clear svg {
  display: block;
  width: var(--field-clear-size);
  height: var(--field-clear-size);
}

/* Список раскрыт — оба значка горят тем же синим, которым короб отвечает на
   курсор: поле работает, и его край это показывает. */
.amrole__field:has(.amrole__chev.is-open) .amrole__chev,
.amrole__field:has(.amrole__chev.is-open) .amrole__clear { color: #0b57d0; }

/* ── Список справочника — раскрывающееся окно по канону ──────────────────
   Форма и строки взяты токенами `--pop-*` (эталон канона —
   `#pick-bind-modal .pick-bind__country-menu`): список НАКРЫВАЕТ содержимое
   окна, а не раздвигает его, стоит вплотную под полем (`--pop-gap` = 4px) и
   ровно в его ширину — поле и есть его кнопка.

   Не влезает вниз — переворачивается вверх по классу `is-above`, который
   ставит JS. Раскрытие — общие кейфреймы канона (`pop-canon-in` объявлен в
   ui_tweaks.css; кейфреймы глобальны, и дописывать себя в замороженный файл
   для этого не нужно). */
.amrole__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--pop-gap, 4px));
  z-index: var(--z-modal-pop, 700);
  box-sizing: border-box;
  margin: 0;
  padding: var(--pop-pad);
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--pop-border-color);
  border-radius: var(--pop-radius);
  background: var(--pop-bg);
  box-shadow: var(--pop-shadow);
  animation: pop-canon-in var(--motion-draw, 200ms) var(--motion-ease-enter, cubic-bezier(0, 0, 0, 1)) both;
}
.amrole__list[hidden] { display: none; }
.amrole__list.is-above {
  top: auto;
  bottom: calc(100% + var(--pop-gap, 4px));
  animation-name: pop-canon-in-up;
}
.amrole__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--pop-item-h);
  padding: var(--pop-item-pad);
  border-radius: var(--pop-item-radius);
  color: var(--pop-text);
  font-size: var(--pop-font-size);
  cursor: pointer;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.amrole__item:hover { background: var(--pop-item-hover); }
/* Отмеченный тег — заливкой и подписью, как выбранная строка у эталона:
   одного цвета подписи мало, строка в списке читается пятном. */
.amrole__item.is-on {
  background: var(--pop-item-sel-bg);
  color: var(--pop-item-sel-fg);
}
.amrole__item.is-on:hover { background: var(--pop-item-sel-bg); }

/* Метка занимает своё место и у неотмеченного тега: иначе названия прыгали бы
   влево-вправо на каждом щелчке. */
.amrole__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--g-primary);
}
.amrole__mark svg { display: block; width: 16px; height: 16px; }
.amrole__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amrole__count {
  flex: 0 0 auto;
  color: var(--pop-muted);
  font-variant-numeric: tabular-nums;
}
/* Крестик удаляет тег из справочника — у ВСЕХ аккаунтов. Действие другое по
   последствиям, поэтому и появляется оно только у строки под курсором, и
   спрашивает подтверждение (см. js/screens/account_roles.js). */
.amrole__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pop-muted);
  cursor: pointer;
  opacity: 0;
}
.amrole__item:hover .amrole__del,
.amrole__del:focus-visible { opacity: 1; }
.amrole__del:hover { background: var(--bg-hover); color: var(--red); }
.amrole__del svg { display: block; width: 14px; height: 14px; }

.amrole__empty {
  padding: 10px var(--pop-item-pad-x);
  color: var(--pop-muted);
  font-size: var(--pop-font-size);
}

/* ═══ screens/settings.css ═══ */
/* ═══ css/screens/settings.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из ui_tweaks.css ── */
/* ═══════════════════════════════════════════════════════════════
   НАСТРОЙКИ (.stgp-page) — раздел окна «Личный кабинет»
   ───────────────────────────────────────────────────────────────
   Тот же канон, что у личного кабинета (.accp-page выше) и страниц
   запуска (.srch-page): hero нет, белые карточки r16 без обводки и
   тени, Google Sans, акцент #0b57d0, вторичный текст 14/20 серым
   #444746, кнопки — пилюли 40px/r20, поля r8/40px.

   Раздел был последним экраном программы на старом языке: hero с
   сине-серым градиентом, вкладки-пиллюли, карточки с тенью и своя
   палитра --set-accent (#2563eb) вместо общего акцента. Всё это
   снято вместе с блоком .set-* в style.css.

   С 15.10.2026 настройки — раздел окна «Личный кабинет»: все разделы
   схемы одной страницей, без каталога плиток и без карточек.

   Токены не наследуются от .accp-page — класс на другом <main>. Так
   же поступает .accp-page по отношению к .srch-page: значения те же,
   а каскад их между экранами не носит.

   Цвет в правилах ниже — только токеном. Литерал допускается ровно в
   объявлении под этим комментарием: ночь переопределяет токены
   (theme_dark.css), и захардкоженный цвет до неё не доходит. Своих
   правил body.theme-dark у экрана нет — так он однажды и разъехался:
   ночь покрасила карточку в тёмное, а оставшаяся здесь заплатка
   продолжала заливать поля белым, и цифры в них стали нечитаемы.
   ═══════════════════════════════════════════════════════════════ */
.stgp-page {
  /* Светлые значения канона — теми же числами, что у .srch-page и
     .accp-page. Ночь переопределяет их в theme_dark.css. */
  --stgp-ink: #1f1f1f;
  --stgp-desc: #444746;
  --stgp-outline: #c4c7c5;
  --stgp-accent: #0b57d0;
  --stgp-accent-soft: #d3e3fd;
  --stgp-hover: #f1f3f4;
  --stgp-line: #e3e3e3;
  /* Остальное берём общими токенами: они уже темнеют сами, и ночи не
     придётся дописывать сюда второй список. */
  --stgp-ink-faint: var(--g-ink-faint);
  --stgp-outline-hover: var(--g-line-strong);
  --stgp-accent-strong: var(--g-primary-strong);
  --stgp-on-accent: var(--g-primary-ink);
  --stgp-tint: var(--g-tint);
  --stgp-tint-strong: var(--g-tint-strong);
  font-family: var(--app-font);
}
/* Отступы <main> раздают общие правила (см. «Unified main view
   paddings»); здесь только раскладка двух колонок. */
.stgp-page:not([hidden]) { display: flex; flex-direction: column; }
/* Своего поля поиска у страницы нет: поиск в программе один — общий, в
   сайдбаре, и настройки он находит по подписи поля. Блок .stgp-search*
   снят вместе с полем 22.09.2026. */
/* Панель — все разделы схемы подряд, одной страницей окна «Личный
   кабинет» (15.10.2026). Каталога плиток и страницы раздела больше нет:
   настроек одиннадцать, и уровень над ними был лишним щелчком. Карточек
   тоже нет — раздел стоит прямо на белой панели окна, и границу между
   разделами держат заголовок и зазор. */
/* С 16.10.2026 раздел устроен как «Профиль» и «Лицензия»: заголовок
   раздела — .cab-pane__h (как «Аккаунт» в профиле), строки — .cab-rows /
   .cab-row из components/cabinet.css: подпись слева, управление справа,
   тонкая линия между строками. Здесь только то, чего у строк кабинета нет:
   зазор между разделами, подсветка найденной настройки, поля и чипы. */
.stgp-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-40) + var(--space-8));
  min-width: 0;
  margin-top: var(--space-24);
}
.stgp-sec { display: flex; flex-direction: column; min-width: 0; color: var(--stgp-ink); }
/* Приход из общего поиска: окно прокручивается к найденной настройке и
   на мгновение подкрашивает её — иначе на странице из одиннадцати полей
   глаз искал бы, куда его привели. Подложка свисает за рельс поля
   тенью-растяжкой, поэтому текст не сдвигается. */
.stgp-field {
  border-radius: var(--radius-8);
  transition: background-color var(--motion-panel) var(--motion-ease),
              box-shadow var(--motion-panel) var(--motion-ease);
}
.stgp-field.is-flash {
  background: var(--stgp-tint);
  box-shadow: 0 0 0 var(--space-8) var(--stgp-tint);
}
/* Настройка-тумблер кликается целиком (поле само <label>): попадать в
   32 пикселя переключателя вместо клика по названию было бы работой. */
.stgp-field--toggle { cursor: pointer; }
/* Подпись строки — цвет и кегль от .cab-row__label; здесь только место
   для «?» рядом с текстом. */
.stgp-field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  user-select: none;
}
/* Подсказка «?» — общий элемент программы (.inv-help): кружок 17px и
   пузырь над ним. Своего значка у настроек нет и не заводится. */
.stgp-page .inv-help { flex: 0 0 17px; }
/* Подзаголовок внутри раздела. Нужен там, где в одном разделе соседствуют
   два предмета: в «Инвайте» поле «Попыток пересобрать связь в прогоне» есть
   и у обычного инвайта, и у админского, и без подписи над второй группой
   строки читались бы дублем. Тот же подзаголовок едет вместе со своими
   полями в результаты поиска — иначе там оказались бы две одинаковые строки.

   Отбивка сверху больше, чем снизу: подзаголовок принадлежит тому, что под
   ним, и прижат к своей группе. Разделителя-линии нет — её роль уже играет
   граница предыдущей строки. */
.stgp-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 0;
}
.stgp-group__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--stgp-ink);
}
.stgp-group__hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--stgp-desc);
  max-width: 84ch;
}
/* ── Поля ввода ──────────────────────────────────────────────────
   Как поля профиля: 32px, r8, рамка и фокус — токенами полей окна
   (--cab-field-*), число по центру. */
.stgp-page .inv-input {
  height: var(--space-32);
  padding: 0 var(--space-10);
  border: 1px solid var(--cab-field-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-2);
  font-family: inherit;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--stgp-ink);
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.stgp-page .inv-input--sm {
  width: calc(var(--space-40) * 2);
  padding: 0 var(--space-8);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Крутилки числового поля прячем: значение набирают или правят
   стрелками клавиатуры, а пара стрелок внутри 80 пикселей отъедала бы
   место у самих цифр. */
.stgp-page .inv-input[type="number"] { -moz-appearance: textfield; }
.stgp-page .inv-input[type="number"]::-webkit-outer-spin-button,
.stgp-page .inv-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stgp-page .inv-input:hover { border-color: var(--cab-field-line-hover); }
.stgp-page .inv-input:focus,
.stgp-page .inv-input:focus-within {
  outline: none;
  border-color: var(--cab-field-line-focus);
  box-shadow: 0 0 0 1px var(--cab-field-ring-focus);
}
.stgp-page .inv-input::placeholder { color: var(--stgp-ink-faint); }
/* «от … до …»: два числа через тире, единица за вторым полем. Одно
   число живёт в той же обёртке — тогда «сек» у одиночного поля и у
   диапазона стоит одинаково. */
.stgp-page .cln-range { display: inline-flex; align-items: center; gap: 8px; }
.stgp-page .cln-range__sep {
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--stgp-desc);
}
.stgp-page .cln-range__suffix {
  min-width: var(--space-24);
  padding: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--stgp-desc);
}
/* ── Выбор одного из нескольких: чипы ────────────────────────────
   Тот же чип, что несёт «Способ инвайта» и «Режим поиска»
   (.srch-type). Здесь он без значка: у вариантов настройки картинки
   нет, а пустая коробка 16px оставляла бы дырку слева. */
.stgp-page .srch-types { display: flex; flex-wrap: wrap; gap: 6px; }
.stgp-page .srch-type {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--stgp-outline);
  border-radius: 15px;
  background: var(--g-surface-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--stgp-desc);
  cursor: pointer;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease),
              color var(--motion-state) var(--motion-ease);
}
.stgp-page .srch-type:hover { background: var(--stgp-hover); }
.stgp-page .srch-type.is-on {
  background: var(--stgp-accent-soft);
  border-color: var(--stgp-accent-soft);
  color: var(--stgp-accent);
}
.stgp-page .srch-type:focus-visible {
  outline: 2px solid var(--stgp-accent);
  outline-offset: 2px;
}
/* Переключатель — общий .switch программы; здесь только фиксируем
   акцент, как это делает панель уведомлений: общая переменная
   --accent в разных темах разная, а карточка настроек белая всегда. */
.stgp-page .switch input:checked + .switch__slider { background: var(--stgp-accent); }
.stgp-page .switch input:focus-visible + .switch__slider {
  outline: 2px solid var(--stgp-accent);
  outline-offset: 2px;
}
/* Кнопки строк — .cab-btn кабинета, своих кнопок у раздела нет. */
/* Выход в модуль — последняя строка раздела, кнопка .cab-btn кабинета. */
/* ── Настройки не загрузились ───────────────────────────────── */
.stgp-empty {
  padding: 40px 24px;
  background: var(--g-surface-2);
  border-radius: 16px;
  text-align: center;
}
/* ── Тёмная тема ────────────────────────────────────────────────
   Её здесь нет, и это правило, а не упущение. Ночь в программе —
   отдельный слой (css/theme_dark.css и собираемый theme_dark_map.css),
   где каждый селектор начинается с body.theme-dark, а из свойств
   только цвет.

   Экран нёс свои ночные правила, написанные тогда, когда карточки
   этого канона считались белыми в обеих темах: они заливали поля
   белым и брали текст из --stgp-ink. Потом ночь дошла до самой
   карточки — покрасила её в #1e1f22 и переопределила --stgp-ink на
   светлый. Заплатка осталась, и каждое числовое поле раздела стало
   белым прямоугольником со светло-серыми цифрами: «Количество
   потоков» ночью было нельзя прочитать.

   Теперь цвета приходят токенами, которые ночь переопределяет сама.
   Прошито tests/unit/test_settings_dark_theme_contract.py. */

/* ═══ screens/boost.css ═══ */
/* ═══ css/screens/boost.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из ui_tweaks.css ── */
/* Окно списка постов (#bs-targets-modal) с 07.10.2026 — окно-список общего
   узла css/components/list-window.css; своих правил у него нет. */
/* ── Окно реакций: сетка стандартного набора ────────────────────
   Полсотни эмодзи чипами в ряд занимали всю ширину экрана и спорили с
   целями и аккаунтами. В окне тот же набор укладывается сеткой из
   квадратных клеток — так эмодзи и выбирают везде. Отмеченная клетка
   залита тем же #d3e3fd, что и включённый чип страницы: выбор на
   странице и выбор в окне обязаны выглядеть одинаково. */
html body #bs-reactions-modal .bs-emoji-grid,
html body.theme-dark #bs-reactions-modal .bs-emoji-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
@media (max-width: 640px) {
  html body #bs-reactions-modal .bs-emoji-grid,
  html body.theme-dark #bs-reactions-modal .bs-emoji-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}
html body #bs-reactions-modal .bs-emoji-cell,
html body.theme-dark #bs-reactions-modal .bs-emoji-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #f8f9fa !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease) !important;
}
html body #bs-reactions-modal .bs-emoji-cell:hover,
html body.theme-dark #bs-reactions-modal .bs-emoji-cell:hover {
  background: #e8eaed !important;
}
html body #bs-reactions-modal .bs-emoji-cell.is-on,
html body.theme-dark #bs-reactions-modal .bs-emoji-cell.is-on {
  background: #d3e3fd !important;
  border-color: #0b57d0 !important;
}
html body #bs-reactions-modal .bs-emoji-cell:focus-visible,
html body.theme-dark #bs-reactions-modal .bs-emoji-cell:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}
/* Выбранное на карточке — те же чипы-эмодзи, но только для показа:
   набор правится в окне, и второй способ снять реакцию мимо него
   означал бы два разных места для одного действия. */
html body .srch-page .srch-type--emoji.bs-reaction-pill,
html body.theme-dark .srch-page .srch-type--emoji.bs-reaction-pill {
  cursor: default !important;
}
/* Пустой ряд выбранного не должен занимать место: без реакций между
   подписью и пилюлей оставался бы зазор ни от чего. */
html body .srch-page #bs-reactions-preview:empty,
html body.theme-dark .srch-page #bs-reactions-preview:empty {
  display: none !important;
}

/* ── Меню «⋮» окна списка: пункт-переключатель гостя ───────────────
   «Удалять после использования» у ссылок для {link} рассылок (11.10.2026):
   галочка справа видна, когда он включён, — как у меню «Материалов»
   создания чатов. display пунктов бьёт атрибут hidden. */
html body #bs-tg-menu .bs-menu-check__mark {
  margin-left: auto;
  color: var(--pop-item-sel-fg);
  visibility: hidden;
}
html body #bs-tg-menu .bs-menu-check[aria-checked="true"] .bs-menu-check__mark {
  visibility: visible;
}
html body #bs-tg-menu .srch-kw__menu-item[hidden] {
  display: none !important;
}

/* ═══ screens/subscriptions.css ═══ */
/* ═══ css/screens/subscriptions.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из ui_tweaks.css ── */
/* Правило пишется на класс, а не на адрес окна: строка предупреждения у
   модуля не одна (список чатов и исключения метлы), и привязка к id значила
   бы, что во втором окне она молча станет обычным серым текстом. */
html body .sub-targets-warn,
html body.theme-dark .sub-targets-warn {
  color: #b3261e !important;
}
html body .sub-targets-warn[hidden],
html body.theme-dark .sub-targets-warn[hidden] {
  display: none !important;
}

/* Строка счётчика окон списка и исключений краснеет, когда есть нераспознанные
   строки. Общее правило окон-списков (launch-window.css) красит .inv-list-meta
   через id окна и сильнее правила выше, поэтому здесь — с теми же id. */
html body :is(#sub-targets-modal, #sub-keep-modal) .inv-list-meta.sub-targets-warn,
html body.theme-dark :is(#sub-targets-modal, #sub-keep-modal) .inv-list-meta.sub-targets-warn {
  color: var(--g-danger-ink) !important;
}

/* ═══ screens/parser.css ═══ */
/* ═══ css/screens/parser.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из style.css ── */
#view-parser .prs-step__title,
#view-parser .prs-source__title,
#view-parser .prs-card__label,
#view-parser .prs-pills__label,
#view-parser .inv-field__label,
#view-parser .prs-advanced summary > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* ── Карточки параметров сбора ─────────────────────────────────────── */

#view-parser .prs-card:hover,
#view-parser .prs-pills-grid:hover,
#view-parser .prs-advanced:hover {
  border-color: rgba(var(--inv-accent-rgb), 0.22);
}
#view-parser .prs-stepper:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--inv-accent-rgb), 0.18);
}
#view-parser .prs-advanced summary {
  transition: background 0.15s;
}
#view-parser .prs-advanced summary:hover { background: transparent; }
#view-parser .prs-advanced summary::after {
  content: "\203A";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  opacity: 0.55;
  transform: rotate(90deg);
  transition: transform 0.18s ease, opacity 0.15s ease;
}
#view-parser .prs-advanced summary:hover::after { opacity: 0.85; }
#view-parser .prs-advanced[open] summary::after { transform: rotate(-90deg); }
.prs-accounts-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-app, #f4f6fb);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#view-parser .prs-source__list:focus-visible,
#view-parser .prs-preset:focus-visible,
#view-parser .prs-pill:focus-visible,
#view-parser .prs-segmented button:focus-visible,
#view-parser .prs-advanced summary:focus-visible,
#view-parser .inv-input:focus-visible,
#view-parser #prs-accounts:focus-visible,
#view-parser #prs-schedule:focus-visible,
#view-parser .prs-cta__start:focus-visible {
  outline: none;
  box-shadow: var(--prs-focus-ring);
}
#view-parser.is-keyboard-nav .prs-source__list:focus,
#view-parser.is-keyboard-nav .prs-preset:focus,
#view-parser.is-keyboard-nav .prs-pill:focus,
#view-parser.is-keyboard-nav .prs-segmented button:focus,
#view-parser.is-keyboard-nav .prs-advanced summary:focus,
#view-parser.is-keyboard-nav .inv-input:focus,
#view-parser.is-keyboard-nav #prs-accounts:focus,
#view-parser.is-keyboard-nav #prs-schedule:focus,
#view-parser.is-keyboard-nav .prs-cta__start:focus {
  outline: none;
  box-shadow: var(--prs-focus-ring);
}
#view-parser .prs-stepper:focus-within,
#view-parser .prs-days-custom:focus-within {
  border-color: var(--inv-accent);
  box-shadow: var(--prs-focus-ring);
}
#view-parser.is-keyboard-nav .prs-stepper:focus-within,
#view-parser.is-keyboard-nav .prs-days-custom:focus-within {
  border-color: var(--inv-accent);
  box-shadow: var(--prs-focus-ring);
}
#view-parser label.switch:focus-visible .switch__slider,
#view-parser .switch input:focus-visible + .switch__slider {
  box-shadow: var(--prs-focus-ring);
}
#view-parser.is-keyboard-nav label.switch:focus .switch__slider,
#view-parser.is-keyboard-nav .switch input:focus + .switch__slider {
  box-shadow: var(--prs-focus-ring);
}
/* ── Парсер: рестайл в духе «Рассылки по ЛС» ──
   Источники = пиллы cln-tab со встроенным переключателем,
   настройки = cln-advanced панели в столбик. */
#view-parser { --cln-accent: var(--inv-accent, #2563eb); --cln-accent-rgb: var(--inv-accent-rgb, 37, 99, 235); }
/* Равномерные отступы между секциями — как в чекере номеров */
#view-parser:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
#view-parser .prs-cta { margin-top: 0; }
#view-parser .prs-advanced summary > span:first-child {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
/* Сегментед-контролы и поля не растягиваются на всю панель */
#view-parser .cln-adv-grid .prs-segmented { max-width: 460px; }
/* Тултипы «?» прижимаем к левому краю иконки, чтобы не уезжали под сайдбар */
#view-parser .cln-adv-grid .inv-help[data-tooltip]::after { left: 0; right: auto; transform: translateX(var(--tip-dx, 0px)); }
#view-parser .cln-adv-grid .inv-help[data-tooltip]::before { left: 8px; right: auto; transform: none; }
/* ── Окно «Добавить источники»: подвал под свой короб ──────────────
   «Из базы» открывается в этом же окне (26.09.2026), и подвал меняет набор
   кнопок: у списка — «Загрузить из файла», «Из базы», «Готово», у баз —
   «К списку», «Отмечено», «Добавить». Лишние прячет [hidden], но у .btn
   свой display, и он сильнее браузерного [hidden] { display: none }. */
html body #prs-base-modal .modal__foot [hidden],
html body.theme-dark #prs-base-modal .modal__foot [hidden] {
  display: none !important;
}
/* То же в меню «…»: у списка нет второго «Редактировать текстом», в базах —
   «Из базы» и «Очистить список», а у пункта меню свой display: flex. */
html body #prs-src-menu [hidden],
html body.theme-dark #prs-src-menu [hidden] {
  display: none !important;
}
/* Строка базы в режиме «Из базы» — строка списка источников (.srch-kw__row)
   с галочкой. Галочку рисует общий узел .catwin, но её «включено» там
   привязано к своей строке (.catwin__row.is-on) — здесь то же на нашей. */
html body #prs-base-modal .prs-srcbase-row,
html body.theme-dark #prs-base-modal .prs-srcbase-row {
  cursor: pointer;
  outline: 0;
}
html body #prs-base-modal .prs-srcbase-row .srch-kw__text,
html body.theme-dark #prs-base-modal .prs-srcbase-row .srch-kw__text {
  cursor: pointer !important;
}
html body #prs-base-modal .prs-srcbase-row:focus-visible,
html body.theme-dark #prs-base-modal .prs-srcbase-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--g-primary);
}
html body #prs-base-modal .prs-srcbase-row.is-on .catwin__check,
html body.theme-dark #prs-base-modal .prs-srcbase-row.is-on .catwin__check {
  border-color: var(--g-primary);
  background: var(--g-primary);
}
html body #prs-base-modal .prs-srcbase-row.is-on .catwin__check svg,
html body.theme-dark #prs-base-modal .prs-srcbase-row.is-on .catwin__check svg {
  opacity: 1;
}

/* ── «Кого собираем»: подпись в одном ряду с чипами ─────────────────────
   Пять чипов в карточку не помещаются одним рядом, и раньше весь ряд
   переносился под подпись — она висела отдельной строкой над чипами.
   Теперь подпись и чипы — один поток: подпись первая, чипы за ней, а
   перенос начинает следующую строку от левого края, под подписью, без
   пустоты под ней (28.09.2026). Группа .srch-types растворяется в ряду
   (display: contents): её чипы встают соседями подписи. Шаг между чипами
   тот же, что внутри группы (6px), от подписи до первого чипа — прежние
   10px. Подсказки «?» у подписи нет: что откуда собирается, говорят
   погашенные чипы. */
html body #view-parser .srch-input__types,
html body.theme-dark #view-parser .srch-input__types {
  gap: var(--space-6) !important;
}
html body #view-parser .srch-input__types-label,
html body.theme-dark #view-parser .srch-input__types-label {
  flex: none !important;
  margin-right: var(--space-4) !important;
  white-space: nowrap !important;
}
html body #view-parser .srch-input__types > .srch-types,
html body.theme-dark #view-parser .srch-input__types > .srch-types {
  display: contents !important;
}

/* ── Быстрая ссылка на карточке «Источники аудитории» (03.10.2026) ──────
   Описание пустой карточки — кнопка: клик кладёт поверх него строку ввода
   (parser.js, startParserQuickSrc). Описание гаснет, но остаётся на месте и
   держит высоту блока — разделитель под ним не сдвигается. Строка того же
   кегля, что описание, без рамки, фона и линии: видна одна каретка —
   нейтральная, цветом текста, а не акцентом.
   После пилюль та же строка стоит последней в ряду (fitParserSourceChips).
   Поле — ровно две строки пилюль (26px — высота .srch-input__chip, 6px —
   шаг между ними) и в пустой карточке тоже: заполняясь, оно не растёт. */
html body #view-parser #prs-base-preview,
html body.theme-dark #view-parser #prs-base-preview {
  min-height: calc((var(--space-24) + var(--space-2)) * 2 + var(--space-6)) !important;
  cursor: text !important;
}
html body #view-parser #prs-base-preview .srch-input__chip,
html body.theme-dark #view-parser #prs-base-preview .srch-input__chip {
  cursor: default !important;
}
html body #view-parser #prs-base-preview.is-quick,
html body.theme-dark #view-parser #prs-base-preview.is-quick {
  position: relative !important;
}
html body #view-parser #prs-base-preview.is-quick .prs-quick-src-hint,
html body.theme-dark #view-parser #prs-base-preview.is-quick .prs-quick-src-hint {
  visibility: hidden !important;
}
/* Описание — подсказка, а не ссылка: цвет на наведение не меняет, к вводу
   зовёт курсор-каретка. */
html body #view-parser .prs-quick-src-hint,
html body.theme-dark #view-parser .prs-quick-src-hint {
  cursor: text !important;
  border-radius: var(--radius-4) !important;
}
html body #view-parser .prs-quick-src-hint:focus-visible,
html body.theme-dark #view-parser .prs-quick-src-hint:focus-visible,
html body #view-parser.is-keyboard-nav .prs-quick-src-hint:focus,
html body.theme-dark #view-parser.is-keyboard-nav .prs-quick-src-hint:focus {
  outline: none !important;
  box-shadow: var(--prs-focus-ring) !important;
}
html body #view-parser .prs-quick-src,
html body.theme-dark #view-parser .prs-quick-src {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-ink) !important;
  caret-color: var(--g-ink) !important;
  font-family: var(--app-font) !important;
  font-size: var(--fs-13) !important;
  line-height: 18px !important;
  outline: none !important;
}
html body #view-parser #prs-base-preview.is-quick .prs-quick-src,
html body.theme-dark #view-parser #prs-base-preview.is-quick .prs-quick-src {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}
html body #view-parser .prs-quick-src--inline,
html body.theme-dark #view-parser .prs-quick-src--inline {
  flex: 1 1 calc(var(--space-40) * 2) !important;
  width: auto !important;
}

/* ── Описание под заголовком окна «Добавить источники» (03.10.2026) ──────
   Что это за ссылки. Стоит между шапкой и телом окна: от заголовка — на
   --space-8 (шапка держит под собой --space-16, подпись подтянута к нему), от
   таблицы — на --space-6 + --prs-lead-shift. Гостю (рассылки по группам и
   комментариям) описание скрыто атрибутом hidden. */
html body #prs-base-modal,
html body.theme-dark #prs-base-modal {
  /* На столько таблица отодвинута от описания и на столько же она ниже —
     окно своего размера не меняет (канон «Окно одного размера»). */
  --prs-lead-shift: 5px;
}
html body #prs-base-modal .srch-kw__lead,
html body.theme-dark #prs-base-modal .srch-kw__lead {
  margin: calc(-1 * var(--space-8)) 0 0 !important;
  padding: 0 var(--space-24) calc(var(--space-6) + var(--prs-lead-shift)) !important;
  font-family: var(--app-font) !important;
  font-size: var(--fs-14) !important;
  line-height: 20px !important;
  color: var(--g-ink-mute) !important;
}
/* Общее правило «секция сразу под шапкой — без верхнего отступа, 16px отдал
   её padding-bottom» (ui_tweaks.css) ловит теперь описание, а не тело окна.
   Тело получало свои 14px (.modal__panel--list .modal__body), и список
   отъезжал от текста — у гостя со скрытым описанием тоже. Тело за описанием
   (видимым или скрытым) верхнего отступа не берёт. */
html body #prs-base-modal .srch-kw__lead + .modal__body,
html body.theme-dark #prs-base-modal .srch-kw__lead + .modal__body {
  padding-top: 0 !important;
}
/* Описание видно — тело и короба таблицы ниже на --prs-lead-shift: всё, что
   описание отодвинуло вниз, таблица отдаёт снизу. Размеры — общие токены окон-
   списков (components/list-window.css) минус сдвиг. */
html body #prs-base-modal:has(.srch-kw__lead:not([hidden])) .modal__body,
html body.theme-dark #prs-base-modal:has(.srch-kw__lead:not([hidden])) .modal__body {
  height: calc(var(--kw-body-h) - var(--prs-lead-shift)) !important;
}
html body #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__list,
html body #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__empty,
html body #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__nores,
html body.theme-dark #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__list,
html body.theme-dark #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__empty,
html body.theme-dark #prs-base-modal:has(.srch-kw__lead:not([hidden])) .srch-kw__nores {
  height: calc(var(--kw-list-h) - var(--prs-lead-shift)) !important;
}
html body #prs-base-modal:has(.srch-kw__lead:not([hidden])).is-text .srch-kw__card > .srch-kw__bulk,
html body.theme-dark #prs-base-modal:has(.srch-kw__lead:not([hidden])).is-text .srch-kw__card > .srch-kw__bulk {
  height: calc(var(--kw-list-h) + var(--kw-add-h) - var(--prs-lead-shift)) !important;
}

/* ═══ screens/searcher.css ═══ */
/* ═══ css/screens/searcher.css — «Поиск групп и каналов» (#view-searcher) ═══
   Основные стили экрана — в ui_tweaks.css (.srch-page), он заморожен; новое
   идёт сюда. Селекторы — от класса .srch-page и id своих элементов, не от
   #view-searcher: канон страницы запуска висит на классе
   (test_run_page_canon_is_shared_by_class_not_by_view_id).

   ── Быстрый запрос на карточке «Поисковые запросы» (03.10.2026) ──────────
   Как быстрая ссылка в «Источниках аудитории» (screens/parser.css).
   Описание пустой карточки — кнопка: клик кладёт поверх него строку ввода
   (searcher.js, startSearcherQuickKw). Описание гаснет, но остаётся на месте
   и держит высоту блока — разделитель под ним не сдвигается. Строка того же
   кегля, что описание, без рамки, фона и линии: видна одна каретка —
   нейтральная, цветом текста, а не акцентом.
   После пилюль та же строка стоит последней в ряду (fitSearcherKeywordChips).
   Поле — ровно две строки пилюль (26px — высота .srch-input__chip, 6px —
   шаг между ними) и в пустой карточке тоже: заполняясь, оно не растёт. */
html body .srch-page #srch-keywords-preview,
html body.theme-dark .srch-page #srch-keywords-preview {
  min-height: calc((var(--space-24) + var(--space-2)) * 2 + var(--space-6)) !important;
  cursor: text !important;
}
html body .srch-page #srch-keywords-preview .srch-input__chip,
html body.theme-dark .srch-page #srch-keywords-preview .srch-input__chip {
  cursor: default !important;
}
html body .srch-page #srch-keywords-preview.is-quick,
html body.theme-dark .srch-page #srch-keywords-preview.is-quick {
  position: relative !important;
}
html body .srch-page #srch-keywords-preview.is-quick .srch-quick-kw-hint,
html body.theme-dark .srch-page #srch-keywords-preview.is-quick .srch-quick-kw-hint {
  visibility: hidden !important;
}
/* Описание — подсказка, а не ссылка: цвет на наведение не меняет, к вводу
   зовёт курсор-каретка. */
html body .srch-page .srch-quick-kw-hint,
html body.theme-dark .srch-page .srch-quick-kw-hint {
  cursor: text !important;
  border-radius: var(--radius-4) !important;
}
html body .srch-page .srch-quick-kw-hint:focus-visible,
html body.theme-dark .srch-page .srch-quick-kw-hint:focus-visible,
html body .srch-page.is-keyboard-nav .srch-quick-kw-hint:focus,
html body.theme-dark .srch-page.is-keyboard-nav .srch-quick-kw-hint:focus {
  outline: none !important;
  box-shadow: var(--prs-focus-ring) !important;
}
html body .srch-page .srch-quick-kw,
html body.theme-dark .srch-page .srch-quick-kw {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-ink) !important;
  caret-color: var(--g-ink) !important;
  font-family: var(--app-font) !important;
  font-size: var(--fs-13) !important;
  line-height: 18px !important;
  outline: none !important;
}
html body .srch-page #srch-keywords-preview.is-quick .srch-quick-kw,
html body.theme-dark .srch-page #srch-keywords-preview.is-quick .srch-quick-kw {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}
html body .srch-page .srch-quick-kw--inline,
html body.theme-dark .srch-page .srch-quick-kw--inline {
  flex: 1 1 calc(var(--space-40) * 2) !important;
  width: auto !important;
}

/* ═══ screens/group-broadcaster.css ═══ */
/* ═══ css/screens/group-broadcaster.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из ui_tweaks.css ── */
/* Экран — столбик: поле поиска, под ним список. Правило обязательное, а не
   косметическое: без него экран остаётся блоком, <input> встаёт по своей
   размерной подсказке (size=20) и строка поиска сжимается в огрызок на
   треть окна, а список прилипает к ней вплотную. */
html body #gc-base-modal .prs-base-screen,
html body.theme-dark #gc-base-modal .prs-base-screen {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
html body #gc-base-modal .prs-base-screen[hidden],
html body.theme-dark #gc-base-modal .prs-base-screen[hidden] {
  display: none !important;
}
/* Ширину поле держит само, а не только растяжкой экрана: у input'а есть
   своя размерная подсказка, и любой блок-родитель снова её послушает. */
html body #gc-base-modal .prs-base-search,
html body.theme-dark #gc-base-modal .prs-base-search {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1px solid #747775 !important;
  border-radius: 8px !important;
  color: #1f1f1f !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
}
html body #gc-base-modal .prs-base-search:focus,
html body.theme-dark #gc-base-modal .prs-base-search:focus {
  border-color: #0b57d0 !important;
  box-shadow: inset 0 0 0 1px #0b57d0 !important;
  outline: none !important;
}
/* Короб списка фиксирован: окно одного размера при любом наполнении — пусто,
   одна база, тридцать, ввод в поиске. С потолком 46vh высоту диктовало
   содержимое, и окно прыгало от каждого символа в поиске, как когда-то пикер
   баз (канон «Окно одного размера»). Пустое состояние рисуется ВНУТРИ короба
   (renderGroupcastBaseList кладёт .prs-base-empty в сам список), поэтому
   высоты не складываются. */
html body #gc-base-modal,
html body.theme-dark #gc-base-modal {
  /* Строка: 10 + 20 (имя) + 2 + 18 (подпись) + 10 = 60px, между строками 2px.
     Видно пять — столько же, сколько в пикере баз. */
  --gcb-row-h: 60px;
  --gcb-rows: 5;
  --gcb-list-h: calc(var(--gcb-row-h) * var(--gcb-rows) + 2px * (var(--gcb-rows) - 1));
}
html body #gc-base-modal .prs-base-list,
html body.theme-dark #gc-base-modal .prs-base-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 0 1 auto !important;
  height: var(--gcb-list-h) !important;
  max-height: none !important;
  overflow-y: auto !important;
  margin: 0 -8px !important;
  padding: 0 8px !important;
}
html body #gc-base-modal .prs-base-row,
html body.theme-dark #gc-base-modal .prs-base-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body #gc-base-modal .prs-base-row:hover,
html body.theme-dark #gc-base-modal .prs-base-row:hover {
  background: #f1f3f4 !important;
}
html body #gc-base-modal .prs-base-row.is-current,
html body.theme-dark #gc-base-modal .prs-base-row.is-current {
  background: #d3e3fd !important;
}
html body #gc-base-modal .prs-base-row:focus-visible,
html body.theme-dark #gc-base-modal .prs-base-row:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: -2px !important;
}
html body #gc-base-modal .prs-base-row__text,
html body.theme-dark #gc-base-modal .prs-base-row__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body #gc-base-modal .prs-base-row__name,
html body.theme-dark #gc-base-modal .prs-base-row__name {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #gc-base-modal .prs-base-row__sub,
html body.theme-dark #gc-base-modal .prs-base-row__sub {
  font-size: 13px !important;
  line-height: 18px !important;
  color: #444746 !important;
}
html body #gc-base-modal .prs-base-row__cnt,
html body.theme-dark #gc-base-modal .prs-base-row__cnt {
  flex: none !important;
  color: #444746 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Ряды чипов карточек («Источник», «Тип») — подпись и чипы одним потоком,
   как у парсера (css/screens/parser.css, 28.09.2026). Три чипа «Источника»
   рядом с подписью не помещаются, и группа .srch-types целиком уходила на
   следующую строку — подпись висела отдельно, а у «Типа» чипы стояли
   сразу за ней (09.10.2026). Группа растворяется в ряду (display:
   contents): чипы встают соседями подписи, перенос начинает строку от
   левого края. Шаг между чипами — 6px, как внутри группы, от подписи до
   первого чипа — прежние 10px. */
html body #view-group-broadcaster .srch-input__types,
html body.theme-dark #view-group-broadcaster .srch-input__types {
  gap: var(--space-6) !important;
}
html body #view-group-broadcaster .srch-input__types-label,
html body.theme-dark #view-group-broadcaster .srch-input__types-label {
  flex: none !important;
  margin-right: var(--space-4) !important;
  white-space: nowrap !important;
}
html body #view-group-broadcaster .srch-input__types > .srch-types,
html body.theme-dark #view-group-broadcaster .srch-input__types > .srch-types {
  display: contents !important;
}

/* ═══ screens/broadcaster.css ═══ */
/* ═══ css/screens/broadcaster.css ═══════════════════════════════════════════════════
   Перенесено из старых файлов стилей инструментом tools/frontend/css_move.py
   14.09.2026. Порядок правил — как в каскаде до переноса. */

/* ── из style.css ── */
/* ── Рассылка: размеры и выравнивание иконок (как в чекере/клонере) ──
   .i-svg не задаёт размер, а правила свг-иконок заскоплены под
   .view-parser/.view-cloner. Для #view-broadcaster задаём явно,
   иначе свг без width/height рендерятся огромными и ломают вёрстку. */
#view-broadcaster .prs-advanced summary svg {
  width: 16px; height: 16px; vertical-align: middle; flex: none;
}
#view-broadcaster .prs-advanced summary > span:first-child {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}

/* Пилюля-предупреждение карточки «Сообщение» (broadcasterMessageWarnings):
   текст длиннее подписи к файлу (предупреждений про {link} нет с 10.10.2026).
   Вид пилюли — канонный (.srch-input__chip), здесь только смысловая заливка;
   канон красит с !important, поэтому и здесь так же. */
html body .srch-page .srch-input__chip.bc-chip-warn,
html body.theme-dark .srch-page .srch-input__chip.bc-chip-warn {
  background: var(--g-warn-bg) !important;
  color: var(--g-warn-ink) !important;
}

/* Ряды чипов карточек («Источник», «Тип») — подпись и чипы одним потоком,
   как у парсера (css/screens/parser.css, 28.09.2026). Три чипа «Источника»
   рядом с подписью не помещаются, и группа .srch-types целиком уходила на
   следующую строку — подпись висела отдельно, а у «Типа» чипы стояли
   сразу за ней (09.10.2026). Группа растворяется в ряду (display:
   contents): чипы встают соседями подписи, перенос начинает строку от
   левого края. Шаг между чипами — 6px, как внутри группы, от подписи до
   первого чипа — прежние 10px. */
html body #view-broadcaster .srch-input__types,
html body.theme-dark #view-broadcaster .srch-input__types {
  gap: var(--space-6) !important;
}
html body #view-broadcaster .srch-input__types-label,
html body.theme-dark #view-broadcaster .srch-input__types-label {
  flex: none !important;
  margin-right: var(--space-4) !important;
  white-space: nowrap !important;
}
html body #view-broadcaster .srch-input__types > .srch-types,
html body.theme-dark #view-broadcaster .srch-input__types > .srch-types {
  display: contents !important;
}

/* ═══ screens/moderation.css ═══ */
/* ═══ Экран «Модерация» ════════════════════════════════════════════════════
   Части, вынесенные из старого css/moderation.css: он заморожен и может
   только сокращаться, новое правило экрана живёт здесь
   (docs/FRONTEND_STRUCTURE.md). Цвета и отступы — токенами. */

/* ── Воронка групп ─────────────────────────────────────────────────────────
   Поповер открывает JS и ставит ему ЭКРАННЫЕ координаты — общий канон
   positionToolbarPopover, эталон которого воронка аккаунтов. Значит, и
   позиционирование обязано быть экранным: у `absolute` отсчёт пошёл бы от
   обёртки `.picker-filter-wrap` (у неё `position: relative`), и окно уезжало
   бы ровно на её смещение — на широком экране это выглядело как «фильтры
   посередине». У воронки аккаунтов `fixed` задан в ui_tweaks.css; здесь то же
   решение для своей. */
#md-filter-pop {
  position: fixed;
}

/* ═══ screens/moderation-server.css ═══ */
/* ═══ css/screens/moderation-server.css — модерация: окно «Где работает» ═══
   Часть экрана «Модерация»: screen_css("moderation") читает её вместе с ним.

   Окна модерации получают канон addw правилами на свои id в moderation.css —
   канон там расписан не на класс, а на окна. moderation.css под храповиком,
   дописывать в него нельзя, поэтому окно «Где работает модерация» получает те
   же значения здесь и на токенах: светлые — из tokens.css, ночные — тем же
   токенам их задаёт theme_dark.css, своего ночного слоя у файла нет. */

#md-server-modal .addw {
  /* Без position карточка остаётся под затемнением: сосед .addw__overlay
     позиционирован, а она нет — так же, как у эталона #phone-auth-modal. */
  position: relative;
  z-index: var(--z-raise);
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: calc(100vw - 2 * var(--space-24));
  max-height: 86vh;
  padding: 0;
  background: var(--g-surface-2);
  border: 0;
  border-radius: var(--radius-28);
  box-shadow: var(--g-shadow-3);
  font-family: var(--app-font);
  overflow: hidden;
}

#md-server-modal .addw__header {
  margin: 0;
  padding: var(--modal-pad-t) var(--modal-pad-r) var(--modal-gap) var(--modal-pad-l);
  border: 0;
  color: var(--g-ink);
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
}

#md-server-modal .pa__sub {
  margin: 0 0 var(--space-12);
  padding: 0 var(--modal-pad-r) 0 var(--modal-pad-l);
  color: var(--pop-muted);
  font-size: var(--fs-13);
  line-height: 18px;
}

#md-server-modal .pa__body {
  margin: 0;
  padding: 0 var(--modal-pad-r) 0 var(--modal-pad-l);
  overflow-y: auto;
}

#md-server-modal .pa-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

#md-server-modal .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
}

#md-server-modal .form-row label {
  margin: 0;
  color: var(--g-ink);
  font-size: var(--fs-14);
  font-weight: 500;
}

#md-server-modal .form-row input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-14);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-3);
  color: var(--g-ink);
  font-family: var(--app-font);
  font-size: var(--fs-15);
}

#md-server-modal .form-row input:focus-visible {
  outline: none;
  border-color: var(--g-primary);
}

#md-server-modal .pa-hint {
  margin: 0;
  color: var(--pop-muted);
  font-size: var(--fs-13);
  line-height: 18px;
}

/* Итог переноса — отдельной строкой под шагами и тоном основного текста:
   это не подсказка, а что уже сделано и что осталось. */
#md-server-modal #md-server-done {
  margin-top: var(--space-14);
  color: var(--g-ink);
}

#md-server-modal .pa-error {
  margin: var(--space-14) 0 0;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-8);
  background: var(--g-danger-bg);
  color: var(--g-danger-ink);
  font-size: var(--fs-13);
  line-height: 18px;
}

/* Строка «что сейчас происходит»: проверка ключа и перенос — запросы по
   сети, и без неё окно на пару секунд выглядит зависшим. */
#md-server-modal .md-busy {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-14) 0 0;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-8);
  background: var(--g-surface-4);
  color: var(--pop-muted);
  font-size: var(--fs-13);
  line-height: 18px;
}

#md-server-modal .addw__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  margin: 0;
  padding: var(--modal-gap) var(--modal-pad-r) var(--modal-pad-b) var(--modal-pad-l);
  border: 0;
}

/* «Вернуть модерацию на этот компьютер» — в теле окна, под шагами: действие
   редкое и уводит модерацию с сервера, рядом с главной кнопкой ему не место.
   Отрицательный отступ ставит надпись по тексту окна, а не по краю пилюли. */
#md-server-modal #md-server-back {
  margin: var(--space-12) 0 0 calc(-1 * var(--space-12));
}

#md-server-modal .addw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 0;
  border-radius: var(--radius-20);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

#md-server-modal .addw__btn--cancel {
  padding: 0 var(--space-12);
  background: transparent;
  color: var(--g-primary);
}

#md-server-modal .addw__btn--cancel:hover {
  background: var(--g-tint);
}

/* Главная кнопка — сплошное пятно цвета в обеих темах (канон ночи), поэтому
   на токенах addw, у которых ночного значения нет. Ночью её заливку от общего
   «призрачного» вида .addw__btn держит правило в theme_dark.css. */
#md-server-modal .addw__btn--primary {
  padding: 0 var(--space-20);
  background: var(--addw-primary-fill);
  color: var(--addw-primary-ink);
}

#md-server-modal .addw__btn--primary:hover {
  background: var(--addw-primary-fill-hover);
}

#md-server-modal .addw__btn[disabled] {
  opacity: .5;
  cursor: default;
}

/* Свои display у кнопок и строк перебивают браузерное [hidden]: прячем явно. */
#md-server-modal .addw__btn[hidden],
#md-server-modal .pa-hint[hidden],
#md-server-modal .pa-error[hidden],
#md-server-modal .md-busy[hidden] {
  display: none;
}

/* ═══ screens/inviter-target-picker.css ═══ */
/* ══ Окно «Добавить группу» (#inv-target-modal) ══════════════════════
   Одно окно на оба модуля инвайта (js/screens/inviter_target_picker.js).
   Вид — канон addw, как у «Выбор базы аудитории» (#inv-base-modal): белая
   карточка r28, заголовок 23px/500, строки-опции r16 с разделителем, короб
   списка фиксированной высоты. Правила того окна написаны по его id, поэтому
   здесь свои — на токенах tokens.css: ночь переопределяет токены в
   theme_dark.css, и окно следует за ней без отдельного блока.

   Селекторы — «html body #inv-target-modal …» с !important: так же пишутся
   блоки окон в ui_tweaks.css, и общие правила .modal__panel / .modal__head
   иначе перебили бы эти. Закрытие окна не трогаем — его ведёт общий стандарт
   components/modal-motion.css. */

/* Размер окна — как у соседа «Добавить пользователей» (27.09.2026, решение
   пользователя): ширина 600 и то же тело `--kw-body-h`, что держит окна-списки
   (токен задан в css/components/list-window.css и на это окно). Список групп
   забирает остаток тела — строк в нём видно меньше пяти, остальное листается. */
html body #inv-target-modal {
  --invtg-row-h: 64px;
}

/* ── Панель ── */
html body #inv-target-modal .invtg-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(600px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: 86vh !important;
  padding: 0 !important;
  background-color: var(--g-surface-2) !important;
  border: 0 !important;
  border-radius: var(--radius-28) !important;
  box-shadow: var(--g-shadow-3) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: var(--app-font) !important;
  color: var(--g-ink) !important;
}

/* ── Шапка: заголовок 23px/500 без разделителя + круглая «✕» ── */
html body #inv-target-modal .modal__head {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-8) !important;
  margin: 0 !important;
  padding: var(--modal-pad-t) var(--modal-pad-r) var(--modal-gap) var(--modal-pad-l) !important;
  border: 0 !important;
  background: transparent !important;
  flex: none !important;
}
html body #inv-target-modal .modal__title {
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: var(--g-ink) !important;
}
/* Крестик — 40px, как у окон страницы запуска: общий 38px делал шапку ниже
   соседней на 2px. */
html body #inv-target-modal .modal__head [data-close] {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-20) !important;
}

/* ── Тело: строка добавления, список ── */
html body #inv-target-modal .invtg-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  height: var(--kw-body-h) !important;
  min-height: 0 !important;
  padding: 0 var(--modal-pad-r) 0 var(--modal-pad-l) !important;
  overflow: visible !important;
}

/* Строка добавления: поле ссылки + «Добавить группу». */
html body #inv-target-modal .invtg-addrow {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-8) !important;
  margin: 0 0 var(--space-12) !important;
}
html body #inv-target-modal .invtg-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--pop-muted) !important;
}
html body #inv-target-modal .invtg-field svg {
  position: absolute !important;
  left: var(--space-16) !important;
  pointer-events: none !important;
}
html body #inv-target-modal .invtg-field input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 var(--space-16) 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background: var(--g-surface-4) !important;
  color: var(--g-ink) !important;
  font: 400 var(--fs-14) var(--app-font) !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-target-modal .invtg-field input::placeholder { color: var(--pop-muted) !important; }
html body #inv-target-modal .invtg-field input:hover { background: var(--g-surface-5) !important; }
html body #inv-target-modal .invtg-field input:focus,
html body #inv-target-modal .invtg-field input:focus-visible {
  background: var(--g-surface-3) !important;
  border-color: var(--g-primary) !important;
  box-shadow: inset 0 0 0 1px var(--g-primary) !important;
}
html body #inv-target-modal .invtg-field.is-error { color: var(--g-danger-ink) !important; }
html body #inv-target-modal .invtg-field.is-error input,
html body #inv-target-modal .invtg-field.is-error input:focus,
html body #inv-target-modal .invtg-field.is-error input:focus-visible {
  border-color: var(--g-danger-ink) !important;
  box-shadow: inset 0 0 0 1px var(--g-danger-ink) !important;
}
html body #inv-target-modal .invtg-addbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-6) !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  padding: 0 var(--space-18) 0 var(--space-14) !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--g-sel) !important;
  color: var(--g-ink) !important;
  font: 500 var(--fs-14) var(--app-font) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-target-modal .invtg-addbtn svg { color: var(--g-primary) !important; }
html body #inv-target-modal .invtg-addbtn:hover { background: var(--g-sel-hover) !important; box-shadow: var(--g-shadow-1) !important; }
html body #inv-target-modal .invtg-addbtn:focus-visible { outline: 2px solid var(--g-primary) !important; outline-offset: 2px !important; }

/* Ошибка — пузырь под полем, поверх списка: место в окне не занимает. */
html body #inv-target-modal .invtg-err {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + var(--space-6)) !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  padding: var(--space-8) var(--space-12) !important;
  border-radius: var(--radius-8) !important;
  background: var(--pop-bg) !important;
  color: var(--g-danger-ink) !important;
  font: 400 var(--fs-13) / 18px var(--app-font) !important;
  white-space: nowrap !important;
  box-shadow: var(--pop-shadow) !important;
}
html body #inv-target-modal .invtg-err[hidden] { display: none !important; }

/* ── Список: остаток тела фиксированной высоты, дальше скролл ── */
html body #inv-target-modal .invtg-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 calc(var(--space-12) * -1) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}
html body #inv-target-modal .invtg-row {
  position: relative !important;
  display: grid !important;
  /* Радио, аватарка, название с итогами под ним, «⋮». */
  grid-template-columns: 20px 36px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: var(--space-12) !important;
  flex: none !important;
  box-sizing: border-box !important;
  min-height: var(--invtg-row-h) !important;
  padding: var(--space-12) var(--space-16) !important;
  border-radius: var(--radius-16) !important;
  color: var(--g-ink) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-state, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-target-modal.is-admins .invtg-row { grid-template-columns: 20px 36px minmax(0, 1fr) auto 32px !important; }
html body #inv-target-modal .invtg-row:hover { background-color: var(--g-surface-4) !important; }
html body #inv-target-modal .invtg-row.is-selected { background-color: var(--g-info-bg) !important; }
html body #inv-target-modal .invtg-row.is-selected:hover { background-color: var(--g-sel-hover) !important; }
html body #inv-target-modal .invtg-row:focus-visible { outline: 2px solid var(--g-primary) !important; outline-offset: -2px !important; }
html body #inv-target-modal .invtg-row.is-flash {
  animation: invtg-flash 1.6s var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
@keyframes invtg-flash { 0%, 40% { background-color: var(--g-warn-bg); } 100% { background-color: transparent; } }
/* Разделитель между строками — как у .addw__option (кроме последней). */
html body #inv-target-modal .invtg-row::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: var(--space-16) !important;
  right: var(--space-16) !important;
  height: 1px !important;
  background-color: var(--g-line) !important;
}
html body #inv-target-modal .invtg-row:last-child::after { display: none !important; }

html body #inv-target-modal .invtg-radio {
  position: relative !important;
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--g-ink-mute) !important;
  border-radius: 50% !important;
}
html body #inv-target-modal .invtg-row.is-selected .invtg-radio { border-color: var(--g-primary) !important; }
html body #inv-target-modal .invtg-row.is-selected .invtg-radio::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 50% !important;
  background: var(--g-primary) !important;
}
html body #inv-target-modal .invtg-ava {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--g-surface-5) !important;
  color: var(--g-ink-mute) !important;
  overflow: hidden !important;
}
/* Фото группы (29.09.2026) — записывает прогон; нет фото — первая буква
   названия тем же кружком. */
html body #inv-target-modal .invtg-ava img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body #inv-target-modal .invtg-ava.is-letter {
  background: var(--g-tint-strong) !important;
  color: var(--g-primary) !important;
  font: 500 var(--fs-15) / 1 var(--app-font) !important;
}
html body #inv-target-modal .invtg-row__main { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
html body #inv-target-modal .invtg-row__name,
html body #inv-target-modal .invtg-row__sub {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #inv-target-modal .invtg-row__name { font-size: var(--fs-15) !important; font-weight: 500 !important; line-height: 20px !important; }
html body #inv-target-modal .invtg-row__sub { font-size: var(--fs-13) !important; line-height: 18px !important; color: var(--pop-muted) !important; }

/* Главные админы группы — только в «Инвайте админами». */
html body #inv-target-modal .invtg-adm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 28px !important;
  padding: 0 var(--space-10) 0 var(--space-8) !important;
  border: 0 !important;
  border-radius: 14px !important;
  font: 500 var(--fs-12) var(--app-font) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
html body #inv-target-modal .invtg-adm.is-ok { background: var(--g-ok-bg) !important; color: var(--g-ok-ink) !important; }
html body #inv-target-modal .invtg-adm.is-none { background: var(--g-warn-bg) !important; color: var(--g-warn-ink) !important; }
html body #inv-target-modal .invtg-adm:hover { filter: brightness(.96) !important; }
html body #inv-target-modal .invtg-kebab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--g-ink-mute) !important;
  cursor: pointer !important;
  /* «⋮» виден только при наведении на строку (27.09.2026, решение
     пользователя): список спокойнее без ряда точек. Место под кнопку занято
     всегда — строка не прыгает шириной. */
  opacity: 0 !important;
  transition: opacity var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
/* Проявляют кнопку наведение на строку, фокус с клавиатуры и открытое меню
   (меню живёт в body — без пометки кнопка гасла бы, едва курсор уходил со
   строки в меню). Без мыши наведения нет — там кнопка видна всегда. */
html body #inv-target-modal .invtg-row:hover .invtg-kebab,
html body #inv-target-modal .invtg-row:focus-within .invtg-kebab,
html body #inv-target-modal .invtg-kebab:focus-visible,
html body #inv-target-modal .invtg-kebab.is-open {
  opacity: 1 !important;
}
@media (hover: none) {
  html body #inv-target-modal .invtg-kebab { opacity: 1 !important; }
}
html body #inv-target-modal .invtg-kebab:hover,
html body #inv-target-modal .invtg-kebab.is-open { background: var(--g-tint) !important; }

/* Пусто: тот же короб, что у списка — размер окна не меняется. */
html body #inv-target-modal .invtg-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  gap: var(--space-8) !important;
  padding: 0 var(--space-32) !important;
  text-align: center !important;
}
html body #inv-target-modal .invtg-empty__art {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: var(--space-4) !important;
  border-radius: 50% !important;
  background: var(--g-info-bg) !important;
  color: var(--g-primary) !important;
}
html body #inv-target-modal .invtg-empty h4 { margin: 0 !important; font-size: var(--fs-15) !important; font-weight: 500 !important; color: var(--g-ink) !important; }
html body #inv-target-modal .invtg-empty p { max-width: 400px !important; margin: 0 !important; font-size: var(--fs-13) !important; line-height: 18px !important; color: var(--pop-muted) !important; }

/* ── Подвал: слева выбранная группа, справа Отмена / Выбрать ── */
html body #inv-target-modal .invtg-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-12) !important;
  margin: 0 !important;
  padding: var(--modal-gap) var(--modal-pad-r) var(--modal-pad-b) var(--modal-pad-l) !important;
  border: 0 !important;
  background: transparent !important;
  flex: none !important;
}
html body #inv-target-modal .invtg-foot__count {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--fs-13) !important;
  color: var(--pop-muted) !important;
}
html body #inv-target-modal .invtg-foot__count.is-error { color: var(--g-danger-ink) !important; }
html body #inv-target-modal .invtg-foot__actions { display: flex !important; gap: var(--space-8) !important; flex: none !important; }
/* Кнопки — канон addw: пилюли 40px/r20; «Отмена» — синий текст без заливки. */
html body #inv-target-modal .invtg-foot .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  padding-inline: var(--space-20) !important;
  border: none !important;
  border-radius: var(--radius-20) !important;
  font: 500 var(--fs-14) var(--app-font) !important;
  letter-spacing: 0.1px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-fast, 100ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}
html body #inv-target-modal .invtg-foot .btn--ghost {
  padding-inline: var(--space-12) !important;
  background-color: transparent !important;
  color: var(--g-primary) !important;
}
html body #inv-target-modal .invtg-foot .btn--ghost:hover { background-color: var(--g-tint) !important; }
html body #inv-target-modal .invtg-foot .btn--primary {
  background-color: var(--g-primary-fill) !important;
  color: var(--g-primary-ink) !important;
}
html body #inv-target-modal .invtg-foot .btn--primary:hover {
  background-color: var(--g-primary-strong) !important;
  box-shadow: var(--g-shadow-1) !important;
}
html body #inv-target-modal .invtg-foot .btn:focus-visible { outline: 2px solid var(--g-primary) !important; outline-offset: 2px !important; }

/* ── Меню «⋮» строки: живёт в body, поверх окна ── */
html body .invtg-menu {
  position: fixed !important;
  z-index: var(--z-modal-pop) !important;
  min-width: 220px !important;
  padding: var(--space-6) 0 !important;
  border-radius: var(--radius-12) !important;
  background: var(--pop-bg) !important;
  box-shadow: var(--pop-shadow) !important;
  font-family: var(--app-font) !important;
}
html body .invtg-menu button {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-12) !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 var(--space-16) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pop-text) !important;
  font: 400 var(--fs-14) var(--app-font) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body .invtg-menu button:hover { background: var(--pop-item-hover) !important; }
html body .invtg-menu button.is-danger { color: var(--g-danger-ink) !important; }
html body .invtg-menu svg { width: 18px !important; height: 18px !important; color: var(--g-ink-mute) !important; flex: none !important; }
html body .invtg-menu hr { margin: var(--space-6) 0 !important; border: 0 !important; border-top: 1px solid var(--pop-sep) !important; }

/* ── Карточка «Инвайта админами»: у группы нет главных админов ── */
html body .srch-page .srch-input__hint.invtg-hint-warn { color: var(--g-warn-ink) !important; }

/* ═══ screens/inviter-users-picker.css ═══ */
/* ═══ css/screens/inviter-users-picker.css — окно «Добавить пользователей» ═══
   Окно обоих инвайтов (#inv-users-modal, js/screens/inviter_users_picker.js).
   Вид — общие узлы: рамка — css/components/launch-window.css, список —
   css/components/list-window.css, галочка — .catwin. Здесь только своё:
   подвал под два режима и строка базы с галочкой — то же, что у окна
   «Добавить источники» парсера (css/screens/parser.css). */

/* Подвал меняет набор кнопок: у списка — «Загрузить из файла» и «Готово»,
   у баз — «Добавить». Лишние прячет [hidden], но у .btn свой display, и он
   сильнее браузерного [hidden] { display: none }. */
html body #inv-users-modal .modal__foot [hidden],
html body.theme-dark #inv-users-modal .modal__foot [hidden] {
  display: none !important;
}
/* То же в меню «…» (29.09.2026): у списка нет второго «Редактировать
   текстом», в базах — «Из базы» и «Очистить список», а у пункта меню свой
   display: flex. */
html body #invu-menu [hidden],
html body.theme-dark #invu-menu [hidden] {
  display: none !important;
}

/* Строка базы в режиме «Из базы» — строка списка (.srch-kw__row) с
   галочкой. Галочку рисует .catwin, но её «включено» там привязано к своей
   строке (.catwin__row.is-on) — здесь то же на нашей. */
html body #inv-users-modal .invu-base-row,
html body.theme-dark #inv-users-modal .invu-base-row {
  cursor: pointer;
  outline: 0;
}
html body #inv-users-modal .invu-base-row .srch-kw__text,
html body.theme-dark #inv-users-modal .invu-base-row .srch-kw__text {
  cursor: pointer !important;
}
html body #inv-users-modal .invu-base-row:focus-visible,
html body.theme-dark #inv-users-modal .invu-base-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--g-primary);
}
html body #inv-users-modal .invu-base-row.is-on .catwin__check,
html body.theme-dark #inv-users-modal .invu-base-row.is-on .catwin__check {
  border-color: var(--g-primary);
  background: var(--g-primary);
}
html body #inv-users-modal .invu-base-row.is-on .catwin__check svg,
html body.theme-dark #inv-users-modal .invu-base-row.is-on .catwin__check svg {
  opacity: 1;
}

/* ═══ screens/autoresponder.css ═══ */
/* ═══ css/screens/autoresponder.css — экран «Автоответчик» ═══
   Экран собран из канона страницы запуска (.srch-page), поэтому своего здесь
   только одно: пилюля ответа на карточке «Ответы». Она — общий узел .rm-chip
   (css/components/removable-chip.css), но её текст не подпись, а кнопка: клик
   открывает этот ответ в окне сообщения. Кнопке снимаем собственный вид, и
   она читается обычной пилюлей. Так же устроена «ещё N»: это кнопка, которая
   раскрывает остальные ответы на месте. */
html body .srch-page .ar-reply-chip__open,
html body.theme-dark .srch-page .ar-reply-chip__open {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .srch-page .ar-reply-more,
html body.theme-dark .srch-page .ar-reply-more {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ═══ screens/profile-filler.css ═══ */
/* ═══ css/screens/profile-filler.css — экран «Заполнение профилей» ═══
   Экран собран из канона страницы запуска (.srch-page): пара карточек
   «Что заполняем» и «Аккаунты» — .srch-input в сетке .srch-inputs. Своего
   здесь — заметки под карточками и окно «Что заполняем»: список полей,
   экраны полей и экран шаблона в одном окне со стрелкой «←».

   Окно — прежний #pf-folder-modal, экраны текста и файлов несут прежние id
   #pf-mat-modal и #pf-media-modal: на них стоят стили в замороженном
   ui_tweaks.css (строки шаблонов, короб окна, списки, плитки файлов). Здесь —
   только то, чего там нет.

   Галочки в окне — общий узел .catwin__check (css/components/category-
   window.css): состояние «включено» окно ставит у себя — на .is-on строки.

   Правила идут парой `html body …, html body.theme-dark …`, как у соседей:
   пара держит вес, а не цвет — ночные значения дают токены. */

/* ── Заметки под карточками ──────────────────────────────────────────
   Только о нехватке: @username и файлов «только одному аккаунту» меньше,
   чем аккаунтов. Пустое поле просто не заполняется — о нём заметки нет. */
html body .srch-page .pf-notes,
html body.theme-dark .srch-page .pf-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}
html body .srch-page .pf-notes[hidden],
html body.theme-dark .srch-page .pf-notes[hidden] {
  display: none;
}
html body .srch-page .pf-notes .srch-plan-note,
html body.theme-dark .srch-page .pf-notes .srch-plan-note {
  margin: 0;
}

/* ── Окно «Что заполняем»: короб и шапка ─────────────────────────────
   Высота одна на все экраны (канон «Окно одного размера») и ровно по
   списку: строка «Шаблон» и семь полей по 48, семь зазоров по 2, 10 под
   чертой шаблона и 12 нижнего отступа тела окна — 420. Пустоты под содержимым нет: на экранах полей поле
   ввода тянется на свободное место, файлы и шаблоны прокручиваются внутри
   (стенд 01.10.2026: короб был выше списка, и на «Дате рождения» под
   списком оставалось 60 % пустого окна). */
html body #pf-folder-modal,
html body.theme-dark #pf-folder-modal {
  --pf-row-h: 48px;
  --pff-body-h: calc(var(--pf-row-h) * 8 + 2px * 7 + 10px + 12px);
}
/* «←» стоит слева от заголовка и есть только на экранах полей и шаблона. */
html body #pf-folder-modal .modal__head,
html body.theme-dark #pf-folder-modal .modal__head {
  gap: var(--space-8);
}
html body #pf-folder-modal .modal__title,
html body.theme-dark #pf-folder-modal .modal__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #pf-folder-modal .pf-fill__back,
html body.theme-dark #pf-folder-modal .pf-fill__back {
  flex: none;
  margin-left: calc(-1 * var(--space-8));
}
/* `display: inline-flex !important` общего .edit-profile__nav (ui_tweaks.css)
   перебивает hidden — без своего правила «‹» висела бы и на списке. */
html body #pf-folder-modal .pf-fill__back[hidden],
html body.theme-dark #pf-folder-modal .pf-fill__back[hidden] {
  display: none !important;
}
/* Экраны, кроме шаблона, прокручиваются сами: у шаблона прокручивается
   список строк (ui_tweaks.css, .pf-frows). */
html body #pf-folder-modal .pf-screen:not([data-pf-screen="templates"]),
html body.theme-dark #pf-folder-modal .pf-screen:not([data-pf-screen="templates"]) {
  overflow-y: auto;
}
/* Содержимое прокручиваемого экрана не сжимается под короб: иначе сетку
   файлов ужимало до высоты экрана и плитки наезжали друг на друга. */
html body #pf-folder-modal .pf-screen:not([data-pf-screen="templates"]) > *,
html body.theme-dark #pf-folder-modal .pf-screen:not([data-pf-screen="templates"]) > * {
  flex-shrink: 0;
}
/* Прокручиваемый экран режет всё, что за его краем, — и вынос строк на 8 px
   за край (их текст стоит под заголовком) срезал подсветку слева. Экран
   списка сам шире на те же 8 px с отступом внутрь: подсветка целиком в нём. */
html body #pf-folder-modal .pf-screen[data-pf-screen="list"],
html body.theme-dark #pf-folder-modal .pf-screen[data-pf-screen="list"] {
  margin: 0 calc(-1 * var(--space-8));
  padding: 0 var(--space-8);
}
/* Экран текстового поля: списки занимают всё свободное место окна, поле
   ввода тянется до низа — у имени два списка делят его пополам. */
html body #pf-folder-modal #pf-mat-modal .pf-mat__lists,
html body.theme-dark #pf-folder-modal #pf-mat-modal .pf-mat__lists {
  flex: 1 1 auto;
  min-height: 0;
}
html body #pf-folder-modal #pf-mat-modal .pf-mat__list,
html body.theme-dark #pf-folder-modal #pf-mat-modal .pf-mat__list {
  flex: 1 1 0;
  min-height: 0;
}
html body #pf-folder-modal #pf-mat-modal .pf-mat__list textarea,
html body.theme-dark #pf-folder-modal #pf-mat-modal .pf-mat__list textarea {
  flex: 1 1 auto;
  min-height: 96px !important;
  resize: none !important;
}
html body #pf-folder-modal #pf-media-modal .pf-media__grid,
html body.theme-dark #pf-folder-modal #pf-media-modal .pf-media__grid {
  max-height: none !important;
  overflow: visible !important;
}

/* ── Список: строка «Шаблон» и семь полей ────────────────────────────
   Строка — имя слева, значение справа, «›». Клик открывает её экран. */
html body #pf-folder-modal .pf-rows,
html body.theme-dark #pf-folder-modal .pf-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
html body #pf-folder-modal .pf-row,
html body.theme-dark #pf-folder-modal .pf-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: none;
  min-height: 48px;
  padding: 0 var(--space-8) 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--g-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
html body #pf-folder-modal .pf-row:hover,
html body.theme-dark #pf-folder-modal .pf-row:hover {
  background: var(--g-tint);
}
html body #pf-folder-modal .pf-row:focus-visible,
html body.theme-dark #pf-folder-modal .pf-row:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: -2px;
}
/* Шаблон — не поле: отделён от полей чертой. */
html body #pf-folder-modal .pf-row--template,
html body.theme-dark #pf-folder-modal .pf-row--template {
  position: relative;
  margin-bottom: var(--space-10);
}
html body #pf-folder-modal .pf-row--template::after,
html body.theme-dark #pf-folder-modal .pf-row--template::after {
  content: "";
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: calc(-1 * var(--space-6));
  border-bottom: 1px solid var(--g-line-soft);
}
html body #pf-folder-modal .pf-row__name,
html body.theme-dark #pf-folder-modal .pf-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 20px;
}
html body #pf-folder-modal .pf-row__value,
html body.theme-dark #pf-folder-modal .pf-row__value {
  flex: none;
  max-width: 55%;
  overflow: hidden;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #pf-folder-modal .pf-row__chev,
html body.theme-dark #pf-folder-modal .pf-row__chev {
  display: inline-flex;
  flex: none;
  color: var(--g-ink-faint);
}
html body #pf-folder-modal .pf-row__chev svg,
html body.theme-dark #pf-folder-modal .pf-row__chev svg {
  width: 16px;
  height: 16px;
}

/* ── Экран «Шаблон» ─────────────────────────────────────────────────
   Строки — прежние .pf-frow (ui_tweaks.css, блок окна шаблонов): «Без
   шаблона» первой и отделена чертой; под списком — «Чередовать». */
html body #pf-folder-modal .pf-frow--own,
html body.theme-dark #pf-folder-modal .pf-frow--own {
  border-bottom: 1px solid var(--g-line-soft);
}
html body #pf-folder-modal .pf-frow.is-busy .pf-frow__sub,
html body.theme-dark #pf-folder-modal .pf-frow.is-busy .pf-frow__sub {
  color: var(--g-ink-mute);
}
html body #pf-folder-modal .pf-rotate,
html body.theme-dark #pf-folder-modal .pf-rotate {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  flex: none;
  width: 100%;
  margin: 0;
  padding: var(--space-10) var(--space-4);
  border: 0;
  border-top: 1px solid var(--g-line-soft);
  background: transparent;
  color: var(--g-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body #pf-folder-modal .pf-rotate.is-on .catwin__check,
html body.theme-dark #pf-folder-modal .pf-rotate.is-on .catwin__check {
  border-color: var(--g-primary);
  background: var(--g-primary);
}
html body #pf-folder-modal .pf-rotate.is-on .catwin__check svg,
html body.theme-dark #pf-folder-modal .pf-rotate.is-on .catwin__check svg {
  opacity: 1;
}
html body #pf-folder-modal .pf-opt__sub,
html body.theme-dark #pf-folder-modal .pf-opt__sub {
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--g-ink-mute);
}
html body #pf-folder-modal .modal__foot [hidden],
html body.theme-dark #pf-folder-modal .modal__foot [hidden] {
  display: none;
}

/* ── Экраны полей: чей материал правим ──────────────────────────────
   Без шаблона — строки нет. Один шаблон — строка с его именем
   (.pf-src--line). Несколько — ряд вкладок: какой из них правим сейчас. */
html body :is(#pf-mat-modal, #pf-media-modal) .pf-src,
html body.theme-dark :is(#pf-mat-modal, #pf-media-modal) .pf-src {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  font-size: var(--fs-13);
  color: var(--g-ink-mute);
}
html body :is(#pf-mat-modal, #pf-media-modal) .pf-src[hidden],
html body.theme-dark :is(#pf-mat-modal, #pf-media-modal) .pf-src[hidden] {
  display: none;
}
html body :is(#pf-mat-modal, #pf-media-modal) .pf-src__tab,
html body.theme-dark :is(#pf-mat-modal, #pf-media-modal) .pf-src__tab {
  height: 28px;
  padding: 0 var(--space-12);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--g-ink-mute);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}
html body :is(#pf-mat-modal, #pf-media-modal) .pf-src__tab.is-on,
html body.theme-dark :is(#pf-mat-modal, #pf-media-modal) .pf-src__tab.is-on {
  border-color: transparent;
  background: var(--g-sel);
  color: var(--g-sel-ink);
}

/* Под каждым списком экрана поля: слева «Загрузить из файла», справа
   счётчик строк — подписи над списком нет, его называет заголовок окна. */
html body #pf-mat-modal .pf-mat__list-foot,
html body.theme-dark #pf-mat-modal .pf-mat__list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-4);
}
html body #pf-mat-modal .pf-mat__file,
html body.theme-dark #pf-mat-modal .pf-mat__file {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--g-primary);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}
html body #pf-mat-modal .pf-mat__file:hover,
html body.theme-dark #pf-mat-modal .pf-mat__file:hover {
  text-decoration: underline;
}

/* ── Экран файлов: раздел «Как ставить» ─────────────────────────────
   Настройки поля стоят рядом с его файлами. Они общие для всех шаблонов и
   сохраняются вместе с настройками экрана. */
html body #pf-media-modal .pf-howto,
html body.theme-dark #pf-media-modal .pf-howto {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-12);
  border-top: 1px solid var(--g-line-soft);
}
html body #pf-media-modal .pf-howto[hidden],
html body.theme-dark #pf-media-modal .pf-howto[hidden] {
  display: none;
}
html body #pf-media-modal .pf-howto__title,
html body.theme-dark #pf-media-modal .pf-howto__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--g-ink);
}
html body #pf-media-modal .pf-howto__row,
html body.theme-dark #pf-media-modal .pf-howto__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-6) 0;
  font-size: var(--fs-14);
  color: var(--g-ink);
}
html body #pf-media-modal .pf-opt,
html body.theme-dark #pf-media-modal .pf-opt {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-6) 0;
  border: 0;
  background: transparent;
  color: var(--g-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body #pf-media-modal .pf-opt.is-on .catwin__check,
html body.theme-dark #pf-media-modal .pf-opt.is-on .catwin__check {
  border-color: var(--g-primary);
  background: var(--g-primary);
}
html body #pf-media-modal .pf-opt.is-on .catwin__check svg,
html body.theme-dark #pf-media-modal .pf-opt.is-on .catwin__check svg {
  opacity: 1;
}
html body #pf-folder-modal .pf-opt__text,
html body.theme-dark #pf-folder-modal .pf-opt__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-14);
  line-height: 20px;
}
/* Выбор из нескольких — сегменты одной полосы. */
html body #pf-media-modal .pf-seg,
html body.theme-dark #pf-media-modal .pf-seg {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--g-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
html body #pf-media-modal .pf-seg__opt,
html body.theme-dark #pf-media-modal .pf-seg__opt {
  height: 32px;
  padding: 0 var(--space-14);
  border: 0;
  background: transparent;
  color: var(--g-ink-mute);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
}
html body #pf-media-modal .pf-seg__opt + .pf-seg__opt,
html body.theme-dark #pf-media-modal .pf-seg__opt + .pf-seg__opt {
  border-left: 1px solid var(--g-line);
}
html body #pf-media-modal .pf-seg__opt.is-on,
html body.theme-dark #pf-media-modal .pf-seg__opt.is-on {
  background: var(--g-sel);
  color: var(--g-sel-ink);
}
html body #pf-media-modal .pf-seg__opt:focus-visible,
html body #pf-media-modal .pf-opt:focus-visible,
html body.theme-dark #pf-media-modal .pf-seg__opt:focus-visible,
html body.theme-dark #pf-media-modal .pf-opt:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: 2px;
}

/* ═══ screens/task-summary.css ═══ */
/* ═══ css/screens/task-summary.css — вкладка «Сводка» в карточке задачи ═══
   Основные стили «Сводки» — в ui_tweaks.css (.task-account-summary__*), он
   заморожен; новое идёт сюда.

   ── Колонка «Права админа» (07.10.2026) ─────────────────────────────────
   Ширины колонок «Сводки» в ui_tweaks.css заданы по номерам на семь колонок:
   20 % + 24 % + пять по 11,2 % = 100 %. У инвайта через админов колонок восемь
   (js/tasks/summary/admin_rights.js вставляет «Права админа» третьей), и
   последняя — «Предупр.» — получала ширину 0 и уезжала за край таблицы.
   Таблица с правами несёт класс --rights и свои ширины на все восемь колонок.
   Селектор держит оба класса таблицы: у правила ui_tweaks.css вес (0,3,1),
   при равном весе выигрывает этот файл — он подключён позже. */
.task-account-summary__table.task-account-summary__table--rights th:nth-child(1) { width: 17%; }
.task-account-summary__table.task-account-summary__table--rights th:nth-child(2) { width: 19%; }
.task-account-summary__table.task-account-summary__table--rights th:nth-child(3) {
  width: 14%;
  text-align: left;
}
.task-account-summary__table.task-account-summary__table--rights th:nth-child(n+4) {
  width: 10%;
  text-align: right;
}
/* «выданы · сняты» — одной строкой: перенос делил слово состояния надвое. */
.task-account-summary__rights {
  white-space: nowrap;
}

/* ═══ screens/chat-creator.css ═══ */
/* ═══ css/screens/chat-creator.css — экран «Создание чатов/каналов» ═══
   Экран собран из канона страницы запуска (.srch-page). Своего здесь —
   компактная раскладка 02.10.2026 по образцу конкурента («всё максимально
   компактно»): строка задания, поле-список, столбик переключателей в
   «Дополнительных настройках», чипы прав и блоки настроек в окне списков.
   Старые правила модуля (окно материалов, вход в журнал созданного) пока
   живут в ui_tweaks.css — он заморожен, новое идёт сюда (CLAUDE.md, п. 2). */

/* ── Поле-список (нативный <select>, раскрывает карточка канона) ────
   По канону полей страницы запуска: 37px, r8, контур --srch-field-line,
   наведение и фокус как у чисел. Системную стрелку гасим и рисуем свою
   маской — цвет берёт из токена, а не из картинки. */
html body #view-chat-creator .cc-select-wrap,
html body.theme-dark #view-chat-creator .cc-select-wrap {
  position: relative;
  display: inline-flex;
  width: 170px;
  max-width: 100%;
}
html body #view-chat-creator .cc-select-wrap::after,
html body.theme-dark #view-chat-creator .cc-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-12);
  width: var(--field-chevron-size);
  height: var(--field-chevron-size);
  transform: translateY(-50%);
  background-color: var(--srch-desc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--motion-state) var(--motion-ease);
}
html body #view-chat-creator .cc-select-wrap:has(.is-pick-open)::after,
html body.theme-dark #view-chat-creator .cc-select-wrap:has(.is-pick-open)::after {
  transform: translateY(-50%) rotate(180deg);
}
html body #view-chat-creator .cc-select,
html body.theme-dark #view-chat-creator .cc-select {
  width: 100%;
  height: 37px;
  padding: 0 var(--space-40) 0 var(--space-12);
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--srch-field-line);
  border-radius: var(--radius-8);
  color: var(--srch-ink);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}
html body #view-chat-creator .cc-select:hover,
html body.theme-dark #view-chat-creator .cc-select:hover {
  border-color: var(--srch-field-line-hover);
}
html body #view-chat-creator .cc-select:focus,
html body #view-chat-creator .cc-select.is-pick-open,
html body.theme-dark #view-chat-creator .cc-select:focus,
html body.theme-dark #view-chat-creator .cc-select.is-pick-open {
  border-color: var(--srch-accent);
  box-shadow: inset 0 0 0 1px var(--srch-accent);
  outline: none;
}

/* Строка-предупреждение под вводами стоит вне карточки — на фоне
   страницы. Отступ слева — как у содержимого карточек, чтобы значок строки
   встал по одной линии с их подписями. */
html body #view-chat-creator .cc-materials-note,
html body.theme-dark #view-chat-creator .cc-materials-note {
  margin: calc(-1 * var(--space-6)) var(--space-20) 0 !important;
}

/* ── «Дополнительные настройки»: поля в ряд и столбик переключателей ──
   Как «Разные настройки» у конкурента: без подзаголовков и стен чипов.
   Поля выполнения — сеткой в ряд, переключатели — двумя колонками строк
   «переключатель + подпись». Строки «только для групп» прячет атрибут
   hidden (data-cc-group-only), а канон раздаёт display с !important —
   поэтому [hidden] здесь перебивается явно. */
/* Поля выполнения — столбиком, подпись над полем, как в других модулях
   (09.10.2026; было сеткой в ряд). */
html body #view-chat-creator .cc-fine-fields,
html body.theme-dark #view-chat-creator .cc-fine-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  align-items: flex-start;
}
html body #view-chat-creator .cc-toggles,
html body.theme-dark #view-chat-creator .cc-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-12) var(--space-24);
  padding-top: var(--space-18);
  border-top: 1px solid var(--srch-outline);
}
html body #view-chat-creator .cc-toggle,
html body.theme-dark #view-chat-creator .cc-toggle {
  --accent: var(--srch-accent);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 24px;
  color: var(--srch-ink);
  font-size: var(--fs-14);
  line-height: 20px;
  cursor: pointer;
  user-select: none;
}
html body #view-chat-creator [data-cc-group-only][hidden],
html body.theme-dark #view-chat-creator [data-cc-group-only][hidden],
html body #view-chat-creator [data-cc-channel-only][hidden],
html body.theme-dark #view-chat-creator [data-cc-channel-only][hidden] {
  display: none !important;
}

/* ── Окно списков: блоки настроек ──────────────────────────────────
   «Публикация» у постов и «Права и звание» у админов — настройки самого
   списка, поэтому живут в его окне. Отделены линией от содержимого выше. */
#cc-material-modal .cc-post-settings {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
}
#cc-material-modal .cc-post-settings[hidden] {
  display: none;
}
#cc-material-modal .cc-post-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}
#cc-material-modal .cc-post-settings .inv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}
/* Переключатель «Закрепить первый пост» — тот же ряд, что «Удалять после
   использования», но внутри блока: линия над ним уже есть у самого блока. */
#cc-material-modal .cc-post-settings .cc-material-remove-row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#cc-material-modal .cc-rank-input {
  max-width: 220px;
}

/* Чипы прав в окне. Канон чипов (.srch-type) живёт под .srch-page, а окно
   лежит вне страницы — повторяем ту же форму на токенах раскрывающихся
   окон: контур, наведение и заливка выбранного — те же, что у списков. */
#cc-material-modal .cc-rights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
#cc-material-modal .cc-rights .srch-type {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-14);
  border: 1px solid var(--pop-border-color);
  border-radius: var(--radius-pill);
  background: var(--pop-bg);
  color: var(--pop-text);
  font-family: var(--app-font);
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-state) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease),
              color var(--motion-state) var(--motion-ease);
}
#cc-material-modal .cc-rights .srch-type:hover {
  background: var(--pop-item-hover);
}
#cc-material-modal .cc-rights .srch-type.is-on {
  background: var(--pop-item-sel-bg);
  border-color: var(--pop-item-sel-bg);
  color: var(--pop-item-sel-fg);
}

/* ── Окно «Материалы»: экран-список ───────────────────────────────
   Шесть строк — имя слева, что в списке справа, «›»; клик открывает экран
   списка в том же окне, «←» в шапке — назад. Та же строка, что в окне
   «Заполнения профилей» (.pf-row): 48px, r12, подложка при наведении. */
#cc-material-modal .cc-rows:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#cc-material-modal .cc-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  padding: 0 var(--space-8) 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--g-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
#cc-material-modal .cc-row:hover {
  background: var(--g-tint);
}
#cc-material-modal .cc-row:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: -2px;
}
#cc-material-modal .cc-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 20px;
}
#cc-material-modal .cc-row__value {
  flex: none;
  max-width: 55%;
  overflow: hidden;
  color: var(--g-ink-mute);
  font-size: var(--fs-14);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Пустой обязательный список подписан «Обязательно» цветом акцента. */
#cc-material-modal .cc-row__value.is-required {
  color: var(--g-primary);
  font-weight: 500;
}
#cc-material-modal .cc-row__chev {
  display: inline-flex;
  flex: none;
  color: var(--g-ink-faint);
}
#cc-material-modal .cc-row__chev svg {
  width: 16px;
  height: 16px;
}
/* «←» — слева от заголовка; подвал на экране-списке не нужен: сохранять
   там нечего, закрывает крестик. */
#cc-material-modal .cc-back[hidden],
#cc-material-modal .modal__foot[hidden],
#cc-material-modal .modal__foot > [hidden],
#cc-material-modal .cc-material-remove-row[hidden] {
  display: none !important;
}

/* Без подвала нижний отступ окна пропадал: по канону (окна addw) его даёт
   подвал — 24px снизу, а тело перед подвалом обнуляет свой (ui_tweaks.css,
   правило «:has(+ .modal__foot)» — оно не смотрит, спрятан ли подвал). На
   экране-списке подвала нет, и тот же отступ берёт тело окна; вес
   селектора — выше того правила. */
html body #cc-material-modal.modal.modal .modal__panel:has(> .modal__foot[hidden]) > .modal__body {
  padding-bottom: var(--space-24) !important;
}

/* Заголовок экрана списка — слева, сразу за «←», а не посередине: шапка
   окна раскладывает детей через space-between, и с тремя детьми (стрелка,
   заголовок, крестик) заголовок вставал по центру. Заголовок забирает всё
   свободное место — крестик уходит вправо, текст стоит у стрелки. */
html body #cc-material-modal .modal__head .modal__title {
  flex: 1 1 auto !important;
  min-width: 0;
  text-align: left !important;
}
html body #cc-material-modal .modal__head .cc-back:not([hidden]) {
  flex: none;
  margin: 0 var(--space-4) 0 calc(-1 * var(--space-8));
}

/* ── Экраны-списки строк окна «Материалы» ─────────────────────────
   У соседних окон-списков строка добавления и карточка стоят прямо в теле
   окна, и 12px между ними даёт gap тела. Здесь обе живут в своём экране
   (#cc-list-pane) — тот же зазор задаём ему, иначе поле ложилось на
   карточку вплотную. */
#cc-material-modal #cc-list-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
/* Пункт меню-переключатель: галочка справа видна, когда он включён. */
html body #cc-list-menu .cc-menu-check__mark {
  margin-left: auto;
  color: var(--pop-item-sel-fg);
  visibility: hidden;
}
html body #cc-list-menu .cc-menu-check[aria-checked="true"] .cc-menu-check__mark {
  visibility: visible;
}
/* Пункты прячет экран: у ссылок нет «Удалять после использования», у
   «Аватаров» — вида и очистки. display пунктов бьёт атрибут hidden. */
html body #cc-list-menu :is(.srch-kw__menu-item, .srch-kw__menu-sep)[hidden] {
  display: none !important;
}

/* Поле добавления — многострочное (textarea): у описаний Shift+Enter
   переносит строку, и поле растёт под текст. Пустое — той же высоты 48px,
   что строка добавления у соседних окон-списков. */
html body #cc-material-modal.is-list textarea.cc-list-input {
  height: auto !important;
  min-height: 48px;
  max-height: 160px;
  field-sizing: content;
  padding: var(--space-12) var(--space-16) !important;
  line-height: 20px;
  resize: none;
  overflow-y: auto;
}
html body #cc-material-modal.is-list .srch-kw__add:has(textarea.cc-list-input) {
  align-items: flex-end !important;
}
html body #cc-material-modal.is-list .srch-kw__add:has(textarea.cc-list-input) .srch-kw__add-btn {
  margin-bottom: var(--space-4);
}
/* Описания в несколько строк: строка списка показывает описание целиком,
   с его переносами, номер и крестик — у первой строки. */
html body #cc-material-modal.is-list #ccl-list.is-multiline .srch-kw__row {
  align-items: flex-start !important;
  padding-block: var(--space-10) !important;
}
html body #cc-material-modal.is-list #ccl-list.is-multiline .srch-kw__text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
}
html body #cc-material-modal.is-list #ccl-list.is-multiline .srch-kw__rm {
  margin-block: calc(-1 * var(--space-6));
}
html body #cc-material-modal.is-list #ccl-list.is-multiline .srch-kw__edit {
  height: auto !important;
  min-height: 32px;
  field-sizing: content;
  padding: var(--space-6) var(--space-10) !important;
  line-height: 20px;
  resize: none;
}

/* ── Экран «Аватары» окна «Материалы» (07.10.2026, было «Фото») ─────
   По образцу общего окна «Прикрепляемые файлы» (#media-modal): полоса
   «Добавить фото» · счёт · «…», сетка плиток .media-pick__tile. Его вид
   задан в замороженном ui_tweaks.css по id окон — вписать туда наше окно
   нельзя, поэтому те же значения здесь, на токенах. Пустой экран — «Список
   пуст», как у экранов-списков, и он же место, куда бросают файлы. */
html body #cc-material-modal :is(#cc-avatars-pane, #cc-posts-pane):not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  border-radius: var(--radius-12);
}
html body #cc-material-modal #cc-avatars-pane.is-drop {
  outline: 2px dashed var(--g-primary);
  outline-offset: var(--space-4);
  background: var(--g-tint);
}
/* Полоса — всегда одна строка: «…» не уезжает вниз. Уступает место
   только счёт — он сжимается с многоточием. */
html body #cc-material-modal .cc-pane-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--space-8) !important;
  margin: 0 !important;
}
html body #cc-material-modal .cc-pane-toolbar > * {
  flex: none;
}
html body #cc-material-modal .cc-pane-toolbar > .pf-media__toolbar-spacer {
  flex: 1 1 auto;
}
html body #cc-material-modal .cc-pane-toolbar > .pf-media__count {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #cc-material-modal .cc-pane-toolbar .pf-media__upload {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-8) !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 var(--space-20) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: var(--radius-20) !important;
  background: var(--g-surface-3) !important;
  color: var(--g-ink) !important;
  font: inherit !important;
  font-size: var(--fs-14) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast) var(--motion-ease) !important;
}
html body #cc-material-modal .cc-pane-toolbar .pf-media__upload:hover {
  background: var(--g-tint) !important;
}
html body #cc-material-modal .cc-pane-toolbar .pf-media__upload svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--g-primary) !important;
}
html body #cc-material-modal .cc-pane-toolbar .pf-media__count {
  color: var(--g-ink-mute) !important;
  font-size: var(--fs-14) !important;
  font-variant-numeric: tabular-nums !important;
}
/* «…» — у «Аватаров» в их полосе, у «Постов» — в полосе общих карточек
   (.msgc__bar): правило на классе кнопки, а не на полосе. */
html body #cc-material-modal .cc-pane-more {
  flex: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: var(--radius-20) !important;
  background: transparent !important;
  color: var(--g-ink-mute) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body #cc-material-modal .cc-pane-more:is(:hover, .is-open) {
  background: var(--g-icon-btn-hover) !important;
}
html body #cc-material-modal .cc-avatars-grid {
  gap: var(--space-8);
  max-height: 46vh;
  overflow-y: auto;
}
html body #cc-material-modal .cc-avatars-grid[hidden] {
  display: none;
}
html body #cc-material-modal .cc-avatars-grid .media-pick__tile {
  border: 1px solid var(--g-line-soft);
  border-radius: var(--radius-12);
  background: var(--g-surface-4);
}
html body #cc-material-modal .cc-avatars-grid .media-pick__tile:hover {
  border-color: var(--g-primary);
}
html body #cc-material-modal .cc-pane-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-28) var(--space-24) var(--space-24);
  border: 1px dashed var(--g-line);
  border-radius: var(--radius-12);
  text-align: center;
  color: var(--g-ink-faint);
}
html body #cc-material-modal .cc-pane-empty .srch-kw__empty-title {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 20px;
  color: var(--g-ink);
}
html body #cc-material-modal .cc-pane-empty .srch-kw__empty-sub {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}

/* ── Экран «Посты» (08.10.2026) ──────────────────────────────────────
   Карточки — общий узел css/components/message-cards.css (.msgc*, с
   15.10.2026, как окно «Ответы» автоответчика): полоса, номер, начало
   текста, файлы чипами, ↑/↓, крестик, пустой список. Здесь — только своё
   у постов: «…» (.cc-pane-more выше) и булавка.

   «Булавка» (08.10.2026): закрепить именно этот пост. Включённая — залита
   и цвета акцента, номер закреплённого поста — тоже акцентом. */
html body #cc-material-modal .cc-post__btn--pin .material-symbols-outlined {
  font-size: 18px;
}
html body #cc-material-modal .cc-post__btn--pin.is-on {
  color: var(--g-primary);
}
html body #cc-material-modal .cc-post__btn--pin.is-on .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}
html body #cc-material-modal .msgc__item.is-pinned .msgc__num {
  color: var(--g-primary);
  font-weight: 600;
}

/* ── Высота окна «Материалы» (09.10.2026) ─────────────────────────────
   Все экраны окна не выше экранов «Названия» и «Публичные ссылки»: тело —
   374px, как у окон-списков (--kw-body-h в list-window.css), дальше —
   прокрутка внутри. Раньше «Админы» с чипами прав вырастали до 786px. */
html body #cc-material-modal {
  --cc-body-max-h: 374px;
}
html body #cc-material-modal .modal__body {
  max-height: var(--cc-body-max-h);
  overflow-y: auto;
}

/* Раскрывающийся пункт «Права администраторов»: шапка — название, итог и
   стрелка; чипы — внутри. */
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold {
  border: 1px solid var(--g-line);
  border-radius: var(--radius-12);
  background: var(--g-surface-3);
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  padding: 0 var(--space-12) 0 var(--space-16);
  cursor: pointer;
  list-style: none;
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold__head::-webkit-details-marker {
  display: none;
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--g-ink);
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold__sum {
  flex: none;
  font-size: var(--fs-13);
  color: var(--g-ink-mute);
  font-variant-numeric: tabular-nums;
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold__chev {
  flex: none;
  font-size: 20px;
  color: var(--g-ink-mute);
}
/* Стрелка меняется сразу, без поворота на ходу — как в сайдбаре (09.10.2026):
   свёрнуто — вниз, раскрыто — вверх. */
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold[open] .cc-fold__chev {
  transform: rotate(180deg);
}
html body :is(#cc-material-modal, #view-chat-creator) .cc-fold > .cc-rights {
  padding: 0 var(--space-16) var(--space-16);
}

/* ── Журнал созданного: аккаунт выделяется как текст (25.10.2026) ────
   Строка таблицы выделяется кликом и протяжкой, текст в ней — нет. Имя
   владельца — исключение: его выделяют мышью и копируют сами, движок
   протяжки пропускает его по data-text-select. */
html body #view-creator-chats .ccc-owner__name {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* ═══ screens/chat-creator-fine.css ═══ */
/* ═══ css/screens/chat-creator-fine.css — «Дополнительные настройки» экрана
   «Создание чатов/каналов»: права участников и реакции (09.10.2026) ═══
   Отдельной частью экрана, чтобы chat-creator.css не перерос 800 строк.
   Тест читает её вместе с ним: frontend_sources.screen_css("chat-creator"). */

/* ── Права участников ───────────────────────────────────────────────────
   Подпись над полем, как у соседей, а под ней — кнопка с обводкой, как
   список «Медленного режима»: «Разрешено N из M». Раскрытые права идут
   ниже во всю ширину колонки, поэтому само поле растянуто. */
html body #view-chat-creator :is(#cc-field-member-rights, #cc-field-reactions) {
  align-self: stretch;
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select {
  border: 0;
  border-radius: 0;
  background: transparent;
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select > .cc-fold__head {
  position: relative;
  width: max-content;
  min-width: 170px;
  max-width: 100%;
  height: 37px;
  min-height: 0;
  padding: 0 var(--space-40) 0 var(--space-12);
  gap: 0;
  border: 1px solid var(--srch-field-line);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  color: var(--srch-ink);
  font-size: var(--fs-14);
  font-weight: 400;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select > .cc-fold__head:hover {
  border-color: var(--srch-field-line-hover);
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select[open] > .cc-fold__head,
html body #view-chat-creator .cc-fine-fields .cc-fold--select > .cc-fold__head:focus-visible {
  border-color: var(--srch-accent);
  box-shadow: inset 0 0 0 1px var(--srch-accent);
  outline: none;
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select .cc-fold__sum {
  font-size: var(--fs-14);
  color: inherit;
}
/* Стрелка — та же, что у списка, и меняется сразу, без поворота на ходу:
   свёрнуто — вниз, раскрыто — вверх (как в сайдбаре). */
html body #view-chat-creator .cc-fine-fields .cc-fold--select > .cc-fold__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-12);
  width: var(--field-chevron-size);
  height: var(--field-chevron-size);
  transform: translateY(-50%);
  background-color: var(--srch-desc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
html body #view-chat-creator .cc-fine-fields .cc-fold--select[open] > .cc-fold__head::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Раскрытые права — чипы в две строки: основные и медиафайлы по видам.
   Зазор между строками — как между чипами внутри строки (11.10.2026:
   заголовок «Отправка медиафайлов» со своим счётом снят). */
html body #view-chat-creator .cc-mrights {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-12);
}

/* ── Реакции ────────────────────────────────────────────────────────────
   «Только выбранные»: под списком — поле с выбранными эмодзи, щелчок
   открывает окно выбора. Обводка и стрелка-плюс — как у списка выше. */
/* «Только выбранные» в список шириной 170px не влезает — у реакций он шире. */
html body #view-chat-creator #cc-field-reactions .cc-select-wrap {
  width: 190px;
}
/* Поле выбранных и поповер под ним — одна обёртка (щелчок внутри неё —
   не «щелчок мимо»). Сам поповер — fixed, место ему ставит JS от поля
   (positionToolbarPopover, канон привязки к своей иконке): в потоке он
   выходил за низ страницы, растягивал прокрутку, и вёрстка прыгала
   (11.10.2026); под плавающей панелью запуска его нижние клетки пропадали. */
html body #view-chat-creator .cc-react-anchor {
  position: relative;
  width: min(100%, 360px);
}
html body #view-chat-creator .cc-react-anchor[hidden] {
  display: none;
}
html body #view-chat-creator .cc-react-pick {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 37px;
  padding: var(--space-6) var(--space-40) var(--space-6) var(--space-12);
  border: 1px solid var(--srch-field-line);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  font-size: 20px;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
html body #view-chat-creator .cc-react-pick:hover {
  border-color: var(--srch-field-line-hover);
}
html body #view-chat-creator .cc-react-pick[aria-expanded="true"],
html body #view-chat-creator .cc-react-pick:focus-visible {
  border-color: var(--srch-accent);
  box-shadow: inset 0 0 0 1px var(--srch-accent);
  outline: none;
}
html body #view-chat-creator .cc-react-pick__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
html body #view-chat-creator .cc-react-pick__empty {
  font-size: var(--fs-14);
  color: var(--srch-desc);
}
html body #view-chat-creator .cc-react-pick__add {
  position: absolute;
  top: 50%;
  right: var(--space-10);
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--srch-desc);
}

/* Поповер выбора: форма — токены канона --pop-*, раскрытие — общее
   pop-canon-in (над полем — зеркальное pop-canon-in-up). Ширина — с поле
   (--pop-anchor-w ставит JS). Слой — над панелью запуска, как у списка
   выбора (#pick-select-pop). Эмодзи — 20 px, как в остальных сетках
   выбора: лист эмодзи собран под этот размер. */
html body #view-chat-creator .cc-react-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 760;
  box-sizing: border-box;
  width: var(--pop-anchor-w, 360px);
  padding: var(--pop-pad-form);
  border: 1px solid var(--pop-border-color);
  border-radius: var(--pop-radius);
  background: var(--pop-bg);
  box-shadow: var(--pop-shadow);
  animation: pop-canon-in var(--motion-draw) var(--motion-ease-enter) both;
}
html body #view-chat-creator .cc-react-pop.is-above {
  animation-name: pop-canon-in-up;
}
html body #view-chat-creator .cc-react-pop[hidden] {
  display: none;
}
html body #view-chat-creator .cc-react-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
html body #view-chat-creator .cc-react-meta {
  font-size: var(--pop-font-size);
  color: var(--pop-muted);
}
html body #view-chat-creator .cc-react-clear {
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--g-primary);
  font-family: var(--app-font);
  font-size: var(--pop-font-size);
  font-weight: 500;
  cursor: pointer;
}
html body #view-chat-creator .cc-react-clear:hover {
  background: var(--g-tint);
}
html body #view-chat-creator .cc-react-clear:disabled {
  color: var(--g-ink-disabled);
  background: transparent;
  cursor: default;
}
/* Сетка — около шести рядов, дальше прокрутка внутри, как в клиенте
   Telegram: целиком (393 px) поповер не помещался ни под полем, ни над ним
   в невысоком окне и наезжал на само поле. */
html body #view-chat-creator .cc-react-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--space-4);
  max-height: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html body #view-chat-creator .cc-react-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
html body #view-chat-creator .cc-react-cell:hover {
  background: var(--g-surface-4);
}
html body #view-chat-creator .cc-react-cell.is-on {
  border-color: var(--g-primary);
  background: var(--g-sel);
}
html body #view-chat-creator .cc-react-cell:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: 1px;
}

/* ═══ screens/cloner-authors.css ═══ */
/* ═══ css/screens/cloner-authors.css — «Выбрать пользователей для клонирования» ═══
   Функция «Истории» клонера чатов (этап 2, 14.10.2026): поле на основной
   карточке (#cln-authors-row) и окно выбора (#cln-authors-modal, логика —
   js/screens/cloner_authors.js). Таблица окна — таблица «Аккаунтов»
   (.am-embed.view-am, панель .modal__panel--picker — как окно выбора
   аккаунтов); здесь только своё: ширина окна под три колонки, поиск в
   gmail-баре, недоступная строка и подпись подвала. */

/* ── Поле на карточке «История» ──────────────────────────────── */

/* Отступы — как у соседних полей карточки: подпись → кнопка 10px (gap
   самого .srch-what__field), кнопка → строка-подпись тоже 10px. Своего
   margin-top нет: он удваивал зазор под подписью до 20px. */
html body #cln-authors-row,
html body.theme-dark #cln-authors-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-12);
  margin: 0;
}
html body #cln-authors-row .cln-list-btn:disabled,
html body.theme-dark #cln-authors-row .cln-list-btn:disabled {
  cursor: progress;
  opacity: 0.7;
}
/* «Получить заново» и «Остановить» — тихие ссылки рядом с кнопкой: главное
   действие поля одно, это — его поправки. */
html body .cln-authors__link,
html body.theme-dark .cln-authors__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--g-primary);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
}
html body .cln-authors__link:hover,
html body.theme-dark .cln-authors__link:hover {
  text-decoration: underline;
}
html body .cln-authors__link[hidden],
html body.theme-dark .cln-authors__link[hidden] {
  display: none;
}
html body #cln-authors-row .cln-authors__note,
html body.theme-dark #cln-authors-row .cln-authors__note {
  flex: 1 0 100%;
}

/* ── Окно выбора ─────────────────────────────────────────────── */

/* Таблица — во всю ширину панели, как в окне выбора аккаунтов: инсет даёт
   оболочка (--picker-inset-x / --picker-inset-r в ui_tweaks.css), а не тело
   модалки. Окно аккаунтов снимает отступы тела правилом на своём id. */
html body #cln-authors-modal.modal.modal .modal__body,
html body.theme-dark #cln-authors-modal.modal.modal .modal__body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Кнопки подвала — пилюли окон программы (как у окна выбора аккаунтов и
   .addw__btn): 40px / r20, «Отмена» — синий текст, «Сохранить» — синяя
   заливка. Там они заданы на id своего окна, здесь — на токенах. */
html body #cln-authors-modal .inv-run-foot .btn,
html body.theme-dark #cln-authors-modal .inv-run-foot .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 64px !important;
  font-family: inherit !important;
  font-size: var(--fs-14) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  border: none !important;
  border-radius: var(--radius-20) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  transition: box-shadow var(--motion-state) var(--motion-ease), background-color var(--motion-state) var(--motion-ease) !important;
}
html body #cln-authors-modal .inv-run-foot .btn--ghost,
html body.theme-dark #cln-authors-modal .inv-run-foot .btn--ghost {
  padding: 0 var(--space-12) !important;
  background: transparent !important;
  color: var(--g-primary) !important;
}
html body #cln-authors-modal .inv-run-foot .btn--ghost:hover,
html body.theme-dark #cln-authors-modal .inv-run-foot .btn--ghost:hover {
  background: var(--g-tint) !important;
}
html body #cln-authors-modal .inv-run-foot .btn--primary,
html body.theme-dark #cln-authors-modal .inv-run-foot .btn--primary {
  padding: 0 var(--space-20) !important;
  background: var(--g-primary-fill) !important;
  color: var(--g-primary-ink) !important;
}
html body #cln-authors-modal .inv-run-foot .btn--primary:hover,
html body.theme-dark #cln-authors-modal .inv-run-foot .btn--primary:hover {
  background: var(--g-primary-strong) !important;
  box-shadow: var(--g-shadow-1) !important;
  filter: none !important;
}

/* Три колонки, а не восемь, как у аккаунтов: окно уже. */
html body .modal__panel.modal__panel--picker.cln-authors-panel,
html body.theme-dark .modal__panel.modal__panel--picker.cln-authors-panel {
  width: 820px !important;
  height: 80vh !important;
  max-height: 80vh !important;
}

/* Меню выделения и «Диапазон» — поверх панели модалки, позицию ставит
   positionCheckMenuPop() от .px-check-menu__control (как у окна выбора
   аккаунтов: общий контракт прибивает их к координатам «Аккаунтов»). */
html body #cln-authors-check-menu-pop,
html body #cln-authors-range-pop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: var(--z-modal-pop) !important;
}

/* Поиск по имени и @логину — пилюля в gmail-баре: после
   мастер-чекбокса, «Обновить» и корзины, перед счётчиком «Выбрано N
   пользователей» (у счётчика order: 50 — style.css). */
html body .cln-authors-search,
html body.theme-dark .cln-authors-search {
  order: 40;
  margin-left: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: 36px;
  min-width: 240px;
  padding: 0 var(--space-12);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-pill);
  background: var(--g-surface-3);
  color: var(--g-ink-faint);
}
html body .cln-authors-search:focus-within,
html body.theme-dark .cln-authors-search:focus-within {
  border-color: var(--g-primary);
}
html body .cln-authors-search svg,
html body.theme-dark .cln-authors-search svg {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Рамку фокуса держит пилюля, у самого поля обводки нет: общие правила
   полей рисуют её на input:focus и давали рамку в рамке. */
html body .cln-authors-search input,
html body.theme-dark .cln-authors-search input,
html body .cln-authors-search input:focus,
html body.theme-dark .cln-authors-search input:focus,
html body .cln-authors-search input:focus-visible,
html body.theme-dark .cln-authors-search input:focus-visible {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--g-ink);
  font: inherit;
  font-size: var(--fs-14);
}

html body #cln-authors-refresh:disabled,
html body.theme-dark #cln-authors-refresh:disabled {
  cursor: progress;
  opacity: 0.5;
}

/* Колонки: имя забирает остаток, логин и число — по содержимому. */
html body #cln-authors-table,
html body.theme-dark #cln-authors-table {
  width: 100%;
  table-layout: fixed;
}
html body #cln-authors-table th[data-col="username"],
html body.theme-dark #cln-authors-table th[data-col="username"] {
  width: 220px;
}
html body #cln-authors-table th[data-col="count"],
html body.theme-dark #cln-authors-table th[data-col="count"] {
  width: 140px;
}
/* Число — по правому краю, и заголовок над ним тоже: шапка таблицы
   «Аккаунтов» ровняет подписи влево с !important. */
html body #cln-authors-table .cln-authors-table__num,
html body.theme-dark #cln-authors-table .cln-authors-table__num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* Разделитель строк — как у таблицы «Аккаунтов» (ui_tweaks.css, «single,
   invariant row separator»): одна полупрозрачная линия того же цвета
   (--am-row-divider), у ячеек рамок нет. Непрозрачная нижняя рамка ячеек
   резала выделение подряд светлыми полосами; полупрозрачная на голубом
   сливается в одну полосу. Линия — фоном ячеек, а не tr::after, как там:
   псевдоэлемент строки в этой таблице (table-layout: fixed, первая колонка
   без ширины) Chrome учитывает при раскладке колонок, и они сжимались. */
html body #cln-authors-table tbody tr[data-uid],
html body.theme-dark #cln-authors-table tbody tr[data-uid] {
  cursor: pointer;
  transition: background-color var(--motion-state) var(--motion-ease) !important;
}
html body #cln-authors-table tbody tr[data-uid] td,
html body.theme-dark #cln-authors-table tbody tr[data-uid] td {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: linear-gradient(var(--am-row-divider, rgba(120, 138, 162, 0.18)),
                                    var(--am-row-divider, rgba(120, 138, 162, 0.18))) !important;
  background-size: 100% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
}
/* Подвал: «Данные от 14:32», во время обновления — его ход. */
html body .cln-authors-foot__note,
html body.theme-dark .cln-authors-foot__note {
  margin: 0;
  color: var(--g-ink-mute);
  font-size: var(--fs-13);
  line-height: 18px;
}
html body .cln-authors-foot__note.is-warn,
html body.theme-dark .cln-authors-foot__note.is-warn {
  color: var(--g-warn-ink);
}

/* ═══ screens/task-edit.css ═══ */
/* ═══ css/screens/task-edit.css — окно «Изменить задачу» и вход в него ═══
   Окно правки запланированной записи и идущей задачи (#task-edit-modal,
   логика — js/tasks/task_edit.js). Оболочка — канон addw из
   components/launch-window.css: карточка r28, заголовок 23px/500, пилюли
   40px/r20. Здесь — только своё: ширина, порядок полей и сами поля.

   Поля стоят так же, как на странице модуля: подпись сверху, короткий ввод
   37px/r8 с единицей справа, «от – до» одной строкой, потоки — степпером.
   До 15.10.2026 каждое поле тянулось на всю ширину окна, так что ввод под
   две цифры выглядел текстовым полем. Теперь поля короткие и идут одним
   столбиком, каждое своей строкой; поля «Название», заголовков разделов и
   пояснений под полями в окне нет (решения 15.10.2026).

   Вынесено из ui_tweaks.css (блок «ОКНО „ИЗМЕНИТЬ ЗАДАЧУ“»): он заморожен.
   Цвета — токены, поэтому ночь приходит сама (theme_dark.css). */

/* ── Строка расписания — вход в окно ─────────────────────────────────
   Клик по строке на вкладке «Запланировано» открывает правку (вход —
   task_edit.js), и курсор обязан это говорить, как у строки задачи. */
html body #view-tasks.view-tasks .tm-table tbody tr[data-sched-id],
html body.theme-dark #view-tasks.view-tasks .tm-table tbody tr[data-sched-id] {
  cursor: pointer;
}

/* ── Оболочка: уже канона addw ───────────────────────────────────── */
/* Уже канонных 600px (решение 15.10.2026): поля короткие и идут одним
   столбиком, пояснений под ними нет — широкое окно оставалось бы пустым
   справа. Шапка и подвал не сжимаются, прокручивается только тело. */
html body #task-edit-modal .tedit__panel,
html body.theme-dark #task-edit-modal .tedit__panel {
  width: 440px !important;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html body #task-edit-modal .tedit__head,
html body #task-edit-modal .tedit__foot {
  flex: 0 0 auto;
}

html body #task-edit-modal .tedit__body,
html body.theme-dark #task-edit-modal .tedit__body {
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-16) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Плашка состава называет то, что правят («Инвайт · 2 аккаунта»), и
   спорить за внимание с полями ей незачем — заливка наведения, без рамки. */
html body #task-edit-modal .tedit__compose {
  margin: 0;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-8);
  background: var(--g-surface-4);
  color: var(--g-ink);
  font-size: var(--fs-14);
  line-height: 20px;
}

html body #task-edit-modal .tedit__compose[hidden] { display: none; }

html body #task-edit-modal .tedit__lead {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}

html body #task-edit-modal .tedit__lead[hidden] { display: none; }

/* ── Поля ─────────────────────────────────────────────────────────── */
html body #task-edit-modal .tedit__grid { margin: 0; }

/* Один столбик: каждое поле — своей строкой, по порядку, без заголовков
   разделов (решение 15.10.2026). */
html body #task-edit-modal .tedit__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* ── Поле: подпись и ввод ─────────────────────────────────────────── */
html body #task-edit-modal .tedit__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

html body #task-edit-modal .tedit__label {
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 20px;
  color: var(--g-ink-mute);
  user-select: none;
}

html body #task-edit-modal .tedit__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

html body #task-edit-modal .tedit__unit,
html body #task-edit-modal .tedit__sep {
  flex: none;
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--g-ink-mute);
}


/* Ввод — outlined-прямоугольник страницы модуля: 37px, r8, светлая
   обводка; тёмная — на наведении, акцент — на фокусе. */
html body #task-edit-modal :is(.tedit__num, .tedit__moment) {
  box-sizing: border-box;
  height: 37px;
  margin: 0;
  padding: 0 var(--space-10);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-3);
  color: var(--g-ink);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  font-weight: 400;
  box-shadow: none;
  outline: none;
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}

html body #task-edit-modal :is(.tedit__num, .tedit__moment):hover {
  border-color: var(--g-line-strong);
}

html body #task-edit-modal :is(.tedit__num, .tedit__moment):focus {
  border-color: var(--g-primary);
  box-shadow: inset 0 0 0 1px var(--g-primary);
}

html body #task-edit-modal .tedit__num::placeholder {
  color: var(--g-ink-faint);
  font-weight: 400;
}

/* Число — по центру и цифрами одной ширины, как на странице модуля.
   Ширина держит семь цифр: потолок приглашений — до миллиона. */
html body #task-edit-modal .tedit__num {
  width: 88px;
  text-align: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

html body #task-edit-modal .tedit__num::-webkit-inner-spin-button,
html body #task-edit-modal .tedit__num::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

html body #task-edit-modal .tedit__moment { width: 220px; }

/* ── Степпер «− N +» — потоки ─────────────────────────────────────── */
html body #task-edit-modal .tedit__stepper {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 132px;
  height: 37px;
  padding: 0 var(--space-4);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-8);
  background: var(--g-surface-3);
  transition: border-color var(--motion-state) var(--motion-ease),
              box-shadow var(--motion-state) var(--motion-ease);
}

html body #task-edit-modal .tedit__stepper:hover {
  border-color: var(--g-line-strong);
}

html body #task-edit-modal .tedit__stepper:focus-within {
  border-color: var(--g-primary);
  box-shadow: inset 0 0 0 1px var(--g-primary);
}

html body #task-edit-modal .tedit__stepper button {
  flex: none;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--g-primary);
  font-family: var(--app-font);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

html body #task-edit-modal .tedit__stepper button:hover {
  background: var(--g-tint);
}

/* Рамку держит сам степпер — у числа внутри её нет ни в покое, ни в фокусе. */
html body #task-edit-modal .tedit__stepper .tedit__num,
html body #task-edit-modal .tedit__stepper .tedit__num:hover,
html body #task-edit-modal .tedit__stepper .tedit__num:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ── Пилюля «Аккаунты» — кнопка, поэтому пилюля, а не поле ────────── */
html body #task-edit-modal .tedit__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  height: 37px;
  padding: 0 var(--space-14) 0 var(--space-12);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-pill);
  background: var(--g-surface-3);
  color: var(--g-ink);
  font-family: var(--app-font);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-state) var(--motion-ease);
}

html body #task-edit-modal .tedit__pill:hover {
  border-color: var(--g-line-strong);
  background: var(--g-surface-4);
}

html body #task-edit-modal .tedit__pill svg {
  flex: none;
  color: var(--g-primary);
}

html body #task-edit-modal .tedit__pill b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--g-sel);
  color: var(--g-sel-ink);
  font-size: var(--fs-12);
  font-weight: 500;
}

/* ── Пусто и заглушка загрузки ────────────────────────────────────── */
html body #task-edit-modal .tedit__empty {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--g-ink-mute);
}

/* Заглушка — тот же столбик, полоса ростом с поле с подписью. */
html body #task-edit-modal .tedit__skel-bar {
  display: block;
  height: 65px;
  border-radius: var(--radius-8);
  background: var(--app-skel-tint);
}

/* ── Подвал: «Сохранить» до приезда данных погашена ───────────────── */
html body #task-edit-modal .modal__foot .btn--primary:disabled,
html body.theme-dark #task-edit-modal .modal__foot .btn--primary:disabled {
  background: var(--g-surface-5) !important;
  color: var(--g-ink-disabled) !important;
  box-shadow: none !important;
  cursor: default;
}

/* ═══ screens/userbase.css ═══ */
/* ═══ css/screens/userbase.css — экран «Базы» (пользователи) ═══
   Своё у экрана, чего нет в замороженных ui_tweaks.css и style.css. Остальной
   вид экрана пока живёт там; новое — сюда. */

/* Пилюля статуса «Вручную: исключён» (19.10.2026). Остальные состояния
   раскрашены в ui_tweaks.css тем же селектором: этот файл стоит после него,
   и вес у правил равный. Исключённый — не итог прогона, а решение человека,
   поэтому цвет нейтральный, но темнее «Не использован». */
html body #view-userbase.view-userbase.view-userbase--v2 .ubd-status--excluded {
  background: var(--g-surface-5) !important;
  color: var(--g-ink) !important;
}

/* «Снять статусы» — ластик ink_eraser из Material Symbols, залитый глиф.
   Иконки бара выделенных нарисованы обводкой, и общее правило
   `.ub2-sel-action svg` (ui_tweaks.css) снимает заливку — без этого сброса
   ластик пропадал. Тот же приём, что у «Обновить» (#ubd-refresh). Пункт
   «Снять все статусы» в меню «Ещё» заливку не теряет и правки не требует. */
html body .view-userbase--v2 .ub2-gmail-bar #ubd-sel-reset svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* ═══ moderation.css ═══ */
/* ══════════════════════════════════════════════════════════════════════
   Модуль «Модерация» — только то, чего нет в каноне таблиц.

   Оболочка, строки, чекбоксы, рельс и шестерёнка колонок берутся из общего
   контракта .app-table / .px-flat__* — здесь их не переопределяем. Свои
   стили нужны трём вещам: подмене базовых кнопок панели кнопками выделения,
   содержимому ячеек (название чата, права, переключатель) и блоку
   «Старт / Стоп» справа в gmail-баре.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Панель: базовые действия ↔ действия над выделением ───────────── */
html body .view-moderation .md-gmail-bar .md-sel-action,
html body.theme-dark .view-moderation .md-gmail-bar .md-sel-action {
  display: none !important;
}
html body .view-moderation .md-gmail-bar.has-selection .md-base-action,
html body.theme-dark .view-moderation .md-gmail-bar.has-selection .md-base-action {
  display: none !important;
}
html body .view-moderation .md-gmail-bar.has-selection .md-sel-action,
html body.theme-dark .view-moderation .md-gmail-bar.has-selection .md-sel-action {
  display: inline-flex !important;
}

/* Счётчик выбранных — как в аккаунтах и прокси: появляется вместе с
   выделением. Постоянное «Выбрано: 0» занимает место в панели и ничего
   не сообщает.

   order: 50 здесь — не украшение, а лекарство от дёрганья панели. В разметке
   счётчик стоит ПОСЕРЕДИНЕ ряда, между действиями и воронкой, и без переноса
   в конец каждое изменение числа («Выбрано: 0» → «Выбрано: 12» — 92px против
   88px) двигало воронку, «Ещё» и поиск вправо-влево. Правило на классе бара
   (.am-gmail-bar), а не на .md-gmail-bar: журнал созданных чатов —
   вторая таблица этой же оболочки, и своей копии этих правил у него нет. */
html body .view-moderation .am-gmail-bar .am-table-counter,
html body.theme-dark .view-moderation .am-gmail-bar .am-table-counter {
  display: none !important;
  order: 50 !important;
}
html body .view-moderation .am-gmail-bar:is(.has-selection, .has-global-selection) .am-table-counter,
html body.theme-dark .view-moderation .am-gmail-bar:is(.has-selection, .has-global-selection) .am-table-counter {
  display: inline-flex !important;
}

/* Меню «Ещё» над выделением прячется и показывается вместе с остальными
   .md-sel-action, но само оно не кнопка, а обёртка: круг рисует её ребёнок
   #md-sel-actions. Отсюда :not(.px-more-menu) во всех правилах геометрии
   ниже — иначе ховер накладывался бы дважды и выходил вдвое плотнее канона. */
html body .view-moderation .md-gmail-bar.has-selection #md-sel-more-menu,
html body.theme-dark .view-moderation .md-gmail-bar.has-selection #md-sel-more-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: none !important;
}

/* ── Кнопки панели — иконки канона (эталон .view-am) ───────────────────
   Круг 40px, прозрачный фон, серая заливка под курсором. Раньше правила
   существовали только под именами кнопок аккаунтов и прокси (#am-…, #px-…),
   а нашим доставался лишь общий .picker-gmail-bar__action: у «Подключить
   бота» подпись из .picker-gmail-bar__add вылезала из круга 40px и наезжала
   на «обновить» — та самая «куча» из чекбокса, плюса и стрелки.

   Правила написаны на КЛАССЫ кнопок, а не на их имена (#md-…). Список имён
   ровно так и подводит: журнал созданных чатов — вторая таблица этой же
   оболочки, разметка бара у него копия, а в списки #md-… его кнопки никто
   не вписал — и все шесть значков остались на базовом .picker-gmail-bar__action
   из style.css: 18px вместо 20/22 и синеватый #6b7494 вместо #444746. Тем же
   списком мимо канона пронесло и воронку самой модерации (#md-filter-toggle
   не встречался здесь ни разу). См. канон «Общий элемент — на класс». */
html body .view-moderation .am-gmail-bar,
html body.theme-dark .view-moderation .am-gmail-bar {
  --px-gmail-icon: #444746;
  --px-gmail-muted: #5f6368;
  --px-gmail-hover: rgba(68, 71, 70, 0.08);
}
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  flex: none !important;
  color: var(--px-gmail-icon, #444746) !important;
}
/* Подпись кнопки «Добавить» живёт в title/aria-label: в баре у неё круг
   40px, и текст туда не помещается ни в одном модуле. */
html body .view-moderation .am-gmail-bar .picker-gmail-bar__add span,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__add span {
  display: none !important;
}
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action:hover,
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action.is-open,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action:hover,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action.is-open {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Контурные иконки (плюс, щит, ключ, круг, корзина, воронка, копирование).
   Контур узнаётся по самому рисунку — fill="none" в разметке, — а не по
   имени кнопки; толщина обводки сводится к 1.5px канона (в разметке лежит
   вперемешку 1.5/1.6/1.7). */
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  fill: none !important;
}
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]),
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"],
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action svg[fill="none"] *:not([stroke="none"]) {
  stroke-width: 1.5px !important;
}
/* Заливочные (обновление и две «тройки точек») — те же 20px, но fill. */
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action svg:not([fill="none"]),
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action svg:not([fill="none"]) {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  fill: currentColor !important;
  stroke: none !important;
}
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action svg:not([fill="none"]) :is(path, circle),
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action svg:not([fill="none"]) :is(path, circle) {
  fill: currentColor !important;
  stroke: none !important;
}
/* Корзина, воронка и «ещё» — 22px, как в аккаунтах: у них меньше рисунка
   внутри. Роли опознаются классами (--danger / --filter / кнопка внутри
   .px-more-menu), поэтому список не приходится пополнять на каждую таблицу. */
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action.am-sel-action--danger svg,
html body .view-moderation .am-gmail-bar .picker-gmail-bar__action.picker-gmail-bar__action--filter svg,
html body .view-moderation .am-gmail-bar .px-more-menu > .picker-gmail-bar__action svg,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action.am-sel-action--danger svg,
html body.theme-dark .view-moderation .am-gmail-bar .picker-gmail-bar__action.picker-gmail-bar__action--filter svg,
html body.theme-dark .view-moderation .am-gmail-bar .px-more-menu > .picker-gmail-bar__action svg {
  width: 22px !important;
  height: 22px !important;
}
/* Своего тона иконок для тёмной темы здесь нет намеренно: в аккаунтах и
   прокси он в обеих темах один и тот же (#444746, замерено), а панель
   модерации обязана совпадать с ними, а не решать за них. */

/* Пункт меню, недоступный при текущем выделении, остаётся на месте и
   приглушается: исчезающая строка меняет высоту списка под курсором. */
.view-moderation .am-actions-menu__item.is-disabled {
  opacity: .45;
}

/* ── Путь и заголовок над баром ────────────────────────────────────────
   Своих правил здесь нет: строка опознания размечена каноном
   `.am-table-head` (конец ui_tweaks.css) и берёт оттуда высоту 68px, рельс
   16px, путь 12px и название 18px. Прежняя копия `.md-thead*` повторяла те
   же числа своими руками и разошлась с каноном на 2–3px по вертикали. */

/* ── Ячейка «Группа» ───────────────────────────────────────────────────
   Контейнер (flex, зазор 20px) и рельс задаёт канон LEAD RAIL — здесь
   только номер строки и само опознание группы. */
.view-moderation .md-chat-cell__cb {
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
}
.view-moderation .md-chat-cell__num {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 2ch;
  height: var(--tp-checkbox-size, 21px);
  color: var(--text-mute, #64748b);
  font-size: var(--app-table-meta-size, 12px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}
.view-moderation .md-chat-cell > .md-chat {
  flex: 1 1 auto;
  min-width: 0;
}

.view-moderation .md-chat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.view-moderation .md-chat__title {
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text, #202124);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Подпись — ряд фиксированной высоты: бейдж «Нужна супергруппа» со своими
   вертикальными полями иначе раздувал бы строку на 6px, и в списке из
   десятка групп ряды переставали быть одинаковыми. */
.view-moderation .md-chat__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted, #5f6368);
  overflow: hidden;
}
.view-moderation .md-chat__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-moderation .md-chat__sub .md-badge {
  flex: 0 1 auto;
  height: 16px;
  padding: 0 8px;
}

/* ── Бейджи прав и типа ───────────────────────────────────────────── */
.view-moderation .md-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(60, 64, 67, .08);
  color: var(--text-muted, #5f6368);
}
.view-moderation .md-badge--ok {
  background: rgba(11, 128, 67, .12);
  color: #0b8043;
}
.view-moderation .md-badge--warn {
  background: rgba(234, 134, 0, .14);
  color: #b06000;
}
.view-moderation .md-badge--error {
  background: rgba(217, 48, 37, .12);
  color: #d93025;
}
html body.theme-dark .view-moderation .md-badge {
  background: rgba(232, 234, 237, .10);
  color: #9aa0a6;
}
html body.theme-dark .view-moderation .md-badge--ok    { background: rgba(129, 201, 149, .16); color: #81c995; }
html body.theme-dark .view-moderation .md-badge--warn  { background: rgba(253, 214, 99, .16);  color: #fdd663; }
html body.theme-dark .view-moderation .md-badge--error { background: rgba(242, 139, 130, .16); color: #f28b82; }

/* ── Ячейка «Модерация»: переключатель + обновление прав ──────────── */
.view-moderation .md-state-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.view-moderation .md-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #5f6368);
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.view-moderation .md-row-action:hover {
  background: rgba(60, 64, 67, .09);
}
html body.theme-dark .view-moderation .md-row-action:hover {
  background: rgba(232, 234, 237, .12);
}
.view-moderation .md-row-action svg {
  width: 16px;
  height: 16px;
}
.view-moderation .md-row-action[disabled] {
  opacity: .45;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════
   ГЛАВНЫЙ ЭКРАН МОДУЛЯ (.md-page)

   Строение и метрики повторяют «Поиск источников»: карточки белые,
   радиус 16px, отступы 16/20/20. Классы свои, а не заимствованные, —
   у searcher они привязаны к #view-searcher, и расширять его селекторы
   значило бы править чужой модуль ради своего.
   ══════════════════════════════════════════════════════════════════════ */

/* Токены модуля живут и на странице, и в окнах: окна лежат в конце body,
   вне .md-page, и раньше переменные до них не доезжали. Молча: `var(--md-line)`
   без запасного значения — недопустимая величина, и браузер подставлял
   currentColor. Метки в «Медиа» из-за этого выходили с чернильной обводкой,
   а квадратик выбора не было видно вовсе. */
.md-page,
#md-module-modal,
#md-bot-modal,
#md-wizard-modal,
#md-chat-modal,
#md-log-modal,
#md-bots-modal {
  --md-accent: #0b57d0;
  --md-ink: #202124;
  --md-desc: #5f6368;
  --md-card: #ffffff;
  --md-soft: #f1f3f4;
  --md-line: #e3e6ea;
}
html body.theme-dark .md-page,
html body.theme-dark #md-module-modal,
html body.theme-dark #md-bot-modal,
html body.theme-dark #md-wizard-modal,
html body.theme-dark #md-chat-modal,
html body.theme-dark #md-log-modal,
html body.theme-dark #md-bots-modal {
  --md-accent: #a8c7fa;
  --md-ink: #e8eaed;
  --md-desc: #9aa0a6;
  --md-card: #1f2125;
  --md-soft: #2a2d31;
  --md-line: #35383d;
}

/* ── Ввод двумя строками (.md-head) ───────────────────────────────────
   Два ряда: сверху что защищаем и кто защищает, под ними — чьи настройки
   правим. Каждый пункт — коробка с единственной кнопкой во всю площадь:
   подпись сверху, готовое значение снизу, состояние точкой. Крупные
   карточки, что стояли здесь раньше, занимали пол-экрана ради двух строк
   текста и уводили модули под сгиб. */
/* Сетка, а не два ряда flex: колонка одна на оба ряда, и «Настройки»
   выходят ровно той же ширины, что «Группы» над ними, на любом окне.
   Потолок 420px — значение в пункте короткое, растянутый на пол-экрана
   он выглядел бы пустым. */
.md-page .md-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 420px));
  gap: 12px;
}
.md-page .md-bit--scope { grid-column: 1; }
.md-page .md-card {
  margin: 0;
  padding: 16px 20px 20px;
  background: var(--md-card);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.md-page .md-bit {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  background: var(--md-card);
  overflow: hidden;
  transition: border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-page .md-bit:hover { border-color: rgba(11, 87, 208, .38); }
.md-page .md-bit__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px 10px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--app-font);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-page .md-bit__main:hover { background: var(--md-soft); }
.md-page .md-bit__main:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: -2px;
}
.md-page .md-bit__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--md-soft);
  color: var(--md-accent);
}
.md-page .md-bit__ico svg { width: 18px; height: 18px; }
.md-page .md-bit__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.md-page .md-bit__label {
  color: var(--md-desc);
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-page .md-bit__value {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #80868b;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.md-page .md-bit.is-filled .md-bit__value,
.md-page .md-bit--scope .md-bit__value { color: var(--md-ink); }
.md-page .md-bit__txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-page .md-bit__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #80868b;
}
.md-page .md-bit__dot--on    { background: #0b8043; }
.md-page .md-bit__dot--warn  { background: #b06000; }
.md-page .md-bit__dot--error { background: #d93025; }
.md-page .md-bit__go {
  display: inline-flex;
  flex: none;
  color: #9aa0a6;
}
.md-page .md-bit__go svg { width: 18px; height: 18px; }
.md-page .md-bit__go--down svg { width: 12px; height: 12px; }

.md-page .md-input__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--md-line);
  border-radius: 20px;
  background: transparent;
  color: var(--md-accent);
  font-family: var(--app-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-page .md-input__btn:hover { background: var(--md-soft); }


/* ══════════════════════════════════════════════════════════════════════
   МОДУЛИ — карточки настроек

   Пришли на смену плиткам строгости. Карточка отвечает на два вопроса, не
   раскрываясь: что модуль ловит (подпись) и что сделает (метка действия).
   ══════════════════════════════════════════════════════════════════════ */

/* Чьи настройки правим: общие или конкретной группы. Пункт той же строки
   ввода (.md-bit), поэтому своей коробки у него нет — только внутренности:
   обёртка выпадающего окна и кнопка возврата к общим. */
.md-page .md-scope.is-chat { border-color: rgba(11, 87, 208, .5); }
.md-page .md-scope__pick {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
/* Координат здесь нет намеренно: окно строится от своей кнопки в
   positionToolbarPopover. При position: absolute вычисленные там координаты
   окна экрана легли бы поверх смещения родителя и окно уехало бы вниз. */
.md-page .md-scope__pop {
  position: fixed;
  z-index: 700;
  box-sizing: border-box;
  min-width: max(240px, var(--pop-anchor-w, 0px));
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--pop-pad, 6px);
  border: 1px solid var(--pop-border-color, #dadce0);
  border-radius: var(--pop-radius, 8px);
  background: var(--pop-bg, #ffffff);
  box-shadow: var(--pop-shadow, 0 8px 24px rgba(60, 64, 67, 0.18));
}
.md-page .md-scope__pop[hidden] { display: none; }
.md-page .md-scope__item {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--pop-item-h, 32px);
  padding: var(--pop-item-pad, 6px 8px);
  border: 0;
  border-radius: var(--pop-item-radius, 6px);
  background: transparent;
  color: var(--pop-text, #1f1f1f);
  font-family: var(--app-font);
  font-size: var(--pop-font-size, 13px);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-page .md-scope__item:hover { background: var(--pop-item-hover, #f1f3f4); }
.md-page .md-scope__item.is-on {
  background: var(--pop-item-sel-bg, #d3e3fd);
  color: var(--pop-item-sel-fg, #0b57d0);
  font-weight: 500;
}
.md-page .md-scope__empty {
  display: block;
  padding: var(--pop-item-pad, 6px 8px);
  color: var(--pop-muted, #5f6368);
  font-size: var(--pop-font-size, 13px);
}
.md-page .md-scope__reset {
  flex: none;
  align-self: center;
  height: 28px;
  margin-right: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--md-accent);
  font-family: var(--app-font);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.md-page .md-scope__reset:hover { background: rgba(11, 87, 208, .08); }
.md-page .md-scope__reset[hidden] { display: none; }

/* ── Сетка карточек ───────────────────────────────────────────────────
   Карточка — не строка списка, а рассказ о модуле: значок, название,
   счётчик за сутки, для кого это правило, готовое значение в рамке и
   наказание с тумблером в подвале. Строкой в 56px всё это не помещалось:
   сводку резало многоточием, а пояснения не было вовсе — модуль нельзя
   было понять, не открыв окно. */
.md-page .md-modules {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.md-page .md-modgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.md-page .md-modgroup__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding-left: 2px;
  color: var(--md-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.md-page .md-modgroup__note {
  color: var(--md-desc);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
/* Карточка одна на все модули: 315×210. Раньше колонка была резиновой,
   а высота — по содержимому, и ряды выходили разной высоты (246/228/176).
   Одинаковый размер держит и ширину колонки (потолок 315px), и высоту
   карточки; текст внутрь укладывают обрезки по строкам. */
.md-page .md-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 315px));
  gap: 16px;
}
.md-page .md-mod {
  display: flex;
  flex-direction: column;
  height: 210px;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  background: var(--md-card);
  transition: border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              box-shadow var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-page .md-mod:hover {
  border-color: rgba(11, 87, 208, .38);
  box-shadow: 0 1px 4px rgba(20, 30, 60, .08);
}
/* Выключенный модуль гасим, но не прячем: он должен оставаться на месте,
   иначе сетка прыгает при каждом тумблере. */
.md-page .md-mod.is-off .md-mod__ico,
.md-page .md-mod.is-off .md-mod__title,
.md-page .md-mod.is-off .md-mod__hint,
.md-page .md-mod.is-off .md-mod__sum,
.md-page .md-mod.is-off .md-mod__act { opacity: .45; }
.md-page .md-mod.is-own { border-color: rgba(11, 87, 208, .5); }

.md-page .md-mod__open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 16px 16px 12px;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
  font-family: var(--app-font);
  text-align: left;
  cursor: pointer;
}
.md-page .md-mod__open:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: -2px;
}
.md-page .md-mod__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.md-page .md-mod__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(11, 87, 208, .10);
  color: var(--md-accent);
}
.md-page .md-mod__ico svg { width: 19px; height: 19px; }
/* Тон значка — по классу нарушения (см. moderationModuleTone в app.js). */
.md-page .md-mod__ico[data-tone="red"]    { background: rgba(217, 48, 37, .10);  color: #d93025; }
.md-page .md-mod__ico[data-tone="orange"] { background: rgba(234, 134, 0, .14);  color: #b06000; }
.md-page .md-mod__ico[data-tone="violet"] { background: rgba(123, 97, 255, .12); color: #6b4eff; }
.md-page .md-mod__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--md-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.md-page .md-mod__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-page .md-mod__own {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(11, 87, 208, .12);
  color: var(--md-accent);
  font-size: 11px;
  font-weight: 500;
}
.md-page .md-mod__hits {
  flex: none;
  align-self: flex-start;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 87, 208, .10);
  color: var(--md-accent);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}
/* Пояснение держим ровно в две строки: иначе карточки в ряду разъезжаются
   по высоте, а рамка со значением встаёт на разных уровнях. */
.md-page .md-mod__hint {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: none;
  height: 34px;
  color: var(--md-desc);
  font-size: 13px;
  line-height: 17px;
}
/* Готовое значение модуля — в рамке: это ответ на «что будет прямо
   сейчас», и его нельзя путать с пояснением. Две строки — потолок: при
   фиксированной высоте карточки третья вылезла бы за рамку, поэтому
   длинную сводку обрезаем, а целиком её показывает окно модуля. */
.md-page .md-mod__sum {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: none;
  margin-top: auto;
  padding: 8px 11px;
  border: 1px solid var(--md-line);
  border-radius: 10px;
  color: var(--md-ink);
  font-size: 13px;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.md-page .md-mod__sum.is-empty { color: #80868b; }
.md-page .md-mod__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 0 16px 14px;
}
.md-page .md-mod__act {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--md-soft);
  color: var(--md-desc);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.md-page .md-mod__act--soft { background: rgba(234, 134, 0, .14); color: #b06000; }
.md-page .md-mod__act--hard { background: rgba(217, 48, 37, .12); color: #d93025; }
.md-page .md-mod__act--none { background: transparent; padding: 4px 0; }
/* Карточка без подвала кончается рамкой значения — нижний отступ забирает
   себе кнопка, иначе низ был бы уже верха. */
.md-page .md-mod--nofoot .md-mod__open { padding-bottom: 16px; border-radius: 16px; }
.md-page .md-mod__switch { flex: none; }

html body.theme-dark .md-page .md-mod__own,
html body.theme-dark .md-page .md-mod__hits {
  background: rgba(168, 199, 250, .16);
  color: #a8c7fa;
}
html body.theme-dark .md-page .md-mod__ico { background: rgba(168, 199, 250, .14); color: #a8c7fa; }
html body.theme-dark .md-page .md-mod__ico[data-tone="red"]    { background: rgba(242, 139, 130, .16); color: #f28b82; }
html body.theme-dark .md-page .md-mod__ico[data-tone="orange"] { background: rgba(253, 214, 99, .16);  color: #fdd663; }
html body.theme-dark .md-page .md-mod__ico[data-tone="violet"] { background: rgba(197, 175, 255, .16); color: #c5afff; }
html body.theme-dark .md-page .md-mod__act--soft { background: rgba(253, 214, 99, .16); color: #fdd663; }
html body.theme-dark .md-page .md-mod__act--hard { background: rgba(242, 139, 130, .16); color: #f28b82; }
html body.theme-dark .md-page .md-mod:hover { box-shadow: none; }
html body.theme-dark .md-page .md-scope.is-chat { border-color: rgba(168, 199, 250, .5); }
html body.theme-dark .md-page .md-scope__reset { color: #a8c7fa; }
html body.theme-dark .md-page .md-scope__item.is-on { color: #a8c7fa; }
html body.theme-dark .md-page .md-bit:hover { border-color: rgba(168, 199, 250, .38); }
html body.theme-dark .md-page .md-mod:hover { border-color: rgba(168, 199, 250, .38); }

@media (max-width: 720px) {
  .md-page .md-modgrid { grid-template-columns: 1fr; }
  .md-page .md-head { grid-template-columns: 1fr; }
}

/* Правый край страницы — по таблице «Аккаунты», и это больше не забота
   модуля: коридор в 10px раздаёт всем видам разом `.main` в конце
   ui_tweaks.css («Правый коридор страницы»). Свой padding-right здесь
   лежал до него и теперь только удваивал бы отступ — модерация уезжала
   бы на 30px от края, пока остальные стоят на 20px. */

/* ══════════════════════════════════════════════════════════════════════
   ЖУРНАЛ — лента решений с разбором
   ══════════════════════════════════════════════════════════════════════ */

.md-journal-page .md-jhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.md-journal-page .md-jhead__text { flex: 1 1 auto; min-width: 0; }
.md-journal-page .md-jhead__title {
  margin: 0;
  color: var(--md-ink);
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
}
.md-journal-page .md-jhead__sub {
  margin: 2px 0 0;
  color: var(--md-desc);
  font-size: 13px;
  line-height: 18px;
}
.md-journal-page .md-jback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-ink);
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-journal-page .md-jback:hover { background: var(--md-soft); }
.md-journal-page .md-jback svg { width: 22px; height: 22px; }

.md-journal-page .md-jfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.md-journal-page .md-jfilter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--md-line);
  border-radius: 999px;
  background: transparent;
  color: var(--md-desc);
  font-family: var(--app-font);
  font-size: 13px;
  cursor: pointer;
}
.md-journal-page .md-jfilter[aria-pressed="true"] {
  border-color: var(--md-accent);
  color: var(--md-accent);
}
.md-journal-page .md-jfilter__cnt {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--md-soft);
  font-size: 12px;
}

/* Подсказка «по какому правилу бот чаще ошибается» */
.md-journal-page .md-jhint {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(234, 134, 0, .12);
  color: #b06000;
  font-size: 13px;
  line-height: 18px;
}
html body.theme-dark .md-journal-page .md-jhint {
  background: rgba(253, 214, 99, .14);
  color: #fdd663;
}

.md-journal-page .md-journal {
  display: flex;
  flex-direction: column;
}
.md-journal-page .md-jentry {
  padding: 14px 0;
  border-top: 1px solid var(--md-line);
}
.md-journal-page .md-jentry:first-child { border-top: 0; padding-top: 0; }
.md-journal-page .md-jentry.is-undone { opacity: .55; }

.md-journal-page .md-jtop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.md-journal-page .md-jact {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.md-journal-page .md-jact--delete { background: rgba(60, 64, 67, .10); color: #444746; }
.md-journal-page .md-jact--warn   { background: rgba(234, 134, 0, .14); color: #b06000; }
.md-journal-page .md-jact--mute   { background: rgba(234, 134, 0, .14); color: #b06000; }
.md-journal-page .md-jact--kick,
.md-journal-page .md-jact--ban    { background: rgba(217, 48, 37, .12); color: #d93025; }
.md-journal-page .md-jact--dry    { background: rgba(11, 87, 208, .10); color: #0b57d0; }
html body.theme-dark .md-journal-page .md-jact--delete { background: rgba(232, 234, 237, .12); color: #c4c7c5; }
html body.theme-dark .md-journal-page .md-jact--warn,
html body.theme-dark .md-journal-page .md-jact--mute   { background: rgba(253, 214, 99, .16); color: #fdd663; }
html body.theme-dark .md-journal-page .md-jact--kick,
html body.theme-dark .md-journal-page .md-jact--ban    { background: rgba(242, 139, 130, .16); color: #f28b82; }
html body.theme-dark .md-journal-page .md-jact--dry    { background: rgba(168, 199, 250, .16); color: #a8c7fa; }

.md-journal-page .md-juser {
  color: var(--md-ink);
  font-size: 14px;
  font-weight: 500;
}
.md-journal-page .md-jmeta {
  color: var(--md-desc);
  font-size: 12px;
}
.md-journal-page .md-jexcerpt {
  margin: 0 0 9px;
  padding-left: 11px;
  border-left: 2px solid var(--md-line);
  color: var(--md-desc);
  font-size: 13px;
  line-height: 19px;
  word-break: break-word;
}
/* ── Снимок удалённого вложения ────────────────────────────────────
   Небольшой, но узнаваемый: задача — понять, за что удалён пост, а не
   разглядывать картинку. Полный размер открывается по клику. */
.md-journal-page .md-jmedia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.md-journal-page .md-jmedia__link {
  display: block;
  flex: none;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--md-line);
}
.md-journal-page .md-jmedia__img {
  display: block;
  width: auto;
  height: 88px;
  max-width: 200px;
  object-fit: cover;
  background: var(--md-soft);
}
.md-journal-page .md-jmedia__kind {
  color: var(--md-desc);
  font-size: 12px;
  line-height: 17px;
}
.md-journal-page .md-jmedia__gone { display: none; }
/* Снимки стареют раньше журнала: тогда вместо битой рамки — честная строка. */
.md-journal-page .md-jmedia.is-gone .md-jmedia__link { display: none; }
.md-journal-page .md-jmedia.is-gone .md-jmedia__gone { display: inline; }

.md-journal-page .md-jsignals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.md-journal-page .md-jsig {
  padding: 2px 9px;
  border-radius: 8px;
  background: rgba(234, 134, 0, .12);
  color: #b06000;
  font-size: 12px;
  line-height: 17px;
}
html body.theme-dark .md-journal-page .md-jsig { background: rgba(253, 214, 99, .14); color: #fdd663; }

.md-journal-page .md-jactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.md-journal-page .md-jbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  background: transparent;
  color: var(--md-ink);
  font-family: var(--app-font);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-journal-page .md-jbtn:hover { background: var(--md-soft); }
.md-journal-page .md-jbtn[disabled] { opacity: .5; cursor: default; }
.md-journal-page .md-jbtn svg { width: 15px; height: 15px; }
.md-journal-page .md-jdone {
  color: var(--md-desc);
  font-size: 12px;
  line-height: 32px;
}
.md-journal-page .md-jempty {
  padding: 28px 0;
  color: var(--md-desc);
  font-size: 14px;
  text-align: center;
}

/* ── Чипы фильтров ────────────────────────────────────────────────── */
.md-page .md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.md-page .md-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--md-line);
  border-radius: 999px;
  background: transparent;
  color: var(--md-desc);
  font-family: var(--app-font);
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-page .md-chip:hover { background: var(--md-soft); }
.md-page .md-chip__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--md-line);
  border-radius: 5px;
  color: transparent;
}
.md-page .md-chip__box svg { width: 11px; height: 11px; }
.md-page .md-chip[aria-checked="true"] {
  border-color: var(--md-accent);
  color: var(--md-ink);
}
.md-page .md-chip[aria-checked="true"] .md-chip__box {
  border-color: var(--md-accent);
  background: var(--md-accent);
  color: #ffffff;
}
html body.theme-dark .md-page .md-chip[aria-checked="true"] .md-chip__box { color: #0b2a5b; }

/* Те же метки в окне настроек модуля: оно рендерится вне .md-page,
   поэтому селекторы страницы до него не достают. */
#md-module-modal .md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#md-module-modal .md-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--md-line);
  border-radius: 999px;
  background: transparent;
  color: var(--md-desc);
  font-family: var(--app-font);
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
#md-module-modal .md-chip:hover { background: var(--md-soft); }
#md-module-modal .md-chip__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--md-line);
  border-radius: 5px;
  color: transparent;
}
#md-module-modal .md-chip__box svg { width: 11px; height: 11px; }
#md-module-modal .md-chip[aria-checked="true"] {
  border-color: var(--md-accent);
  color: var(--md-ink);
}
#md-module-modal .md-chip[aria-checked="true"] .md-chip__box {
  border-color: var(--md-accent);
  background: var(--md-accent);
  color: #ffffff;
}
html body.theme-dark #md-module-modal .md-chip[aria-checked="true"] .md-chip__box { color: #0b2a5b; }



/* ══════════════════════════════════════════════════════════════════════
   ОКНО «ДОБАВИТЬ ГРУППУ» — три шага

   Шаги нарисованы полосой сверху, а не заголовком «шаг 2 из 3»: человек
   должен видеть весь путь целиком и понимать, сколько осталось.
   ══════════════════════════════════════════════════════════════════════ */
/* Ширину и рамку окно берёт из общего правила окон модуля ниже по файлу:
   второй источник той же величины разошёлся бы с ним на первой же правке. */
.md-wizard__steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.md-wizard__step {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  color: var(--md-desc);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}
.md-wizard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--md-soft);
  color: var(--md-desc);
  font-size: 12px;
  font-weight: 500;
}
/* Пройденный шаг и текущий различаем заливкой, а не только цветом текста:
   на бегущем взгляде цвет подписи не читается. */
.md-wizard__step.is-on { color: var(--md-ink); font-weight: 500; }
.md-wizard__step.is-on .md-wizard__num { background: #0b57d0; color: #fff; }
.md-wizard__step.is-done .md-wizard__num { background: rgba(11, 87, 208, .16); color: #0b57d0; }
html body.theme-dark .md-wizard__step.is-done .md-wizard__num {
  background: rgba(168, 199, 250, .18);
  color: #a8c7fa;
}

.md-wizard__pane[hidden] { display: none; }
.md-wizard__lead {
  margin: 0 0 14px;
  color: var(--md-ink);
  font-size: 14px;
  line-height: 20px;
}
.md-wizard__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
/* Выбор бота — строка-кнопка во всю ширину: список коротких имён в
   выпадающем поле не давал увидеть ни статуса, ни предупреждения. */
.md-wizard__bot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: transparent;
  color: var(--md-ink);
  font-family: var(--app-font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-wizard__bot:hover { background: var(--md-soft); }
.md-wizard__bot.is-on { border-color: #0b57d0; background: rgba(11, 87, 208, .06); }
html body.theme-dark .md-wizard__bot.is-on {
  border-color: #a8c7fa;
  background: rgba(168, 199, 250, .10);
}
.md-wizard__bot-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.md-wizard__bot-name { font-weight: 500; }
.md-wizard__bot-note { color: var(--md-desc); font-size: 12px; line-height: 16px; }
.md-wizard__bot-note--warn { color: #b06000; }
.md-wizard__bot-tick { flex: none; width: 18px; height: 18px; color: #0b57d0; }
.md-wizard__bot:not(.is-on) .md-wizard__bot-tick { visibility: hidden; }

.md-wizard__link {
  padding: 0;
  border: 0;
  background: none;
  color: #0b57d0;
  font-family: var(--app-font);
  font-size: 13px;
  cursor: pointer;
}
.md-wizard__link:hover { text-decoration: underline; }
html body.theme-dark .md-wizard__link { color: #a8c7fa; }

.md-wizard__found {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(11, 128, 67, .10);
  color: var(--md-ink);
  font-size: 14px;
  line-height: 19px;
}
.md-wizard__found[hidden] { display: none; }
html body.theme-dark .md-wizard__found { background: rgba(129, 201, 149, .14); }
.md-wizard__found-ico { flex: none; width: 20px; height: 20px; color: #0b8043; }
/* Прав не хватает — группа добавлена, но модерировать нечем: зелёная
   плашка обещала бы обратное. */
.md-wizard__found--warn { background: rgba(176, 96, 0, .10); }
html body.theme-dark .md-wizard__found--warn { background: rgba(247, 181, 0, .14); }
.md-wizard__found--warn .md-wizard__found-ico { color: #b06000; }
html body.theme-dark .md-wizard__found--warn .md-wizard__found-ico { color: #f7b500; }



/* ══════════════════════════════════════════════════════════════════════
   ОКНО НАСТРОЕК МОДУЛЯ

   Поля рисует JS по реестру, поэтому стили здесь — на вид поля, а не на
   конкретную настройку. Рамку и типографику держит общий канон addw,
   ниже только внутренности списка полей.
   ══════════════════════════════════════════════════════════════════════ */
/* Ширины здесь нет намеренно: она приходит из общего правила окон
   модерации ниже по файлу (460px, мера канона addw). Стоявшие тут 520px
   не работали никогда — общее правило идёт следом и перебивало их. */
#md-module-modal .md-module__scope {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11, 87, 208, .08);
  color: #0b57d0;
  font-size: 13px;
  line-height: 18px;
}
#md-module-modal .md-module__scope[hidden] { display: none; }
html body.theme-dark #md-module-modal .md-module__scope {
  background: rgba(168, 199, 250, .12);
  color: #a8c7fa;
}
#md-module-modal .md-module__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#md-module-modal .md-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Тумблер — подпись слева, переключатель справа, как в канонических
   настройках. Остальные поля идут колонкой. */
#md-module-modal .md-field--switch {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}
#md-module-modal .md-field__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
#md-module-modal .md-field--switch .switch { flex: none; margin-top: 2px; }
#md-module-modal .md-field__label {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
html body.theme-dark #md-module-modal .md-field__label { color: #e8eaed; }
#md-module-modal .md-field__num {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Поля одной меры: 37px и рамка #dadce0. До канона число было 44px, список
   48px, а рамки у них — своего оттенка: три разных поля в одном окне.
   Высота и кегль здесь ниже соседних окон модерации (40px/15px) намеренно:
   в окне модуля полей сразу пять-семь колонкой, и на их росте карточка
   упиралась в потолок 86vh. */
#md-module-modal .md-field__num input,
#md-module-modal select {
  box-sizing: border-box;
  height: 37px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 14px;
}
#md-module-modal .md-field__num input { width: 120px; }
#md-module-modal select { width: 100%; }
#md-module-modal .md-field__num input:focus-visible,
#md-module-modal select:focus-visible {
  outline: none;
  border-color: #0b57d0;
}
#md-module-modal .md-field__suffix {
  color: #5f6368;
  font-size: 13px;
}
html body.theme-dark #md-module-modal .md-field__num input,
html body.theme-dark #md-module-modal select {
  border-color: #35383d;
  background: #1f2125;
  color: #e8eaed;
}
html body.theme-dark #md-module-modal .md-field__suffix { color: #9aa0a6; }
#md-module-modal .md-list-text {
  min-height: 120px;
  border-color: #dadce0;
  background: #ffffff;
  color: #1f1f1f;
}
html body.theme-dark #md-module-modal .md-list-text {
  border-color: #35383d;
  background: #1f2125;
  color: #e8eaed;
}

/* ── Список подключённых ботов ───────────────────────────────────── */
.md-bots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-bots__empty {
  margin: 0;
  color: #5f6368;
  font-size: 14px;
  line-height: 20px;
}
html body.theme-dark .md-bots__empty { color: #9aa0a6; }
.md-bots__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
}
html body.theme-dark .md-bots__row { border-color: #35383d; }
.md-bots__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b8043;
}
.md-bots__row.is-error .md-bots__dot { background: #d93025; }
.md-bots__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.md-bots__name {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
html body.theme-dark .md-bots__name { color: #e8eaed; }
.md-bots__meta {
  color: #5f6368;
  font-size: 12px;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.theme-dark .md-bots__meta { color: #9aa0a6; }
.md-bots__row.is-error .md-bots__meta:first-of-type { color: #d93025; }
/* Приватность бота — не ошибка связи, а неверная настройка у BotFather:
   янтарный, как у нехватки прав, а не красный, как у обрыва. */
html body .md-bots__meta--warn,
html body.theme-dark .md-bots__meta--warn { color: #b06000; }
.md-bots__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-bots__del:hover { background: rgba(217, 48, 37, .10); color: #d93025; }
.md-bots__del svg { width: 18px; height: 18px; }

/* «Обновить бота» — та же круглая кнопка строки, что и «отключить», но
   действие обычное, поэтому и подсветка обычная. */
.md-bots__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-bots__act:hover { background: var(--md-soft); color: var(--md-accent); }
.md-bots__act svg { width: 18px; height: 18px; }
.md-bots__act.is-loading svg {
  animation: md-btn-spin .8s linear infinite;
  transform-origin: 50% 50%;
}
html body.theme-dark .md-bots__act { color: #9aa0a6; }

/* ── Редактор списка в модалке ────────────────────────────────────── */
.md-list-text {
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--md-line, #e3e6ea);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: var(--app-font);
  font-size: 14px;
  line-height: 21px;
  resize: vertical;
}
.md-list-text:focus-visible {
  outline: none;
  border-color: #0b57d0;
}

/* ── Заглушка загрузки ────────────────────────────────────────────── */
.md-page[data-loading] > *:not(.md-skel) { display: none !important; }
.md-page:not([data-loading]) > .md-skel { display: none !important; }
.md-skel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Заглушка повторяет строение страницы: два ряда ввода, заголовок раздела,
   сетка карточек. Иначе после загрузки экран перекладывается заново. */
.md-skel__head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 420px));
  gap: 12px;
}
.md-skel__bit--scope { grid-column: 1; }
.md-skel__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.md-skel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 315px));
  gap: 16px;
}
/* Мигание — та же анимация и тот же тон, что у канонической заглушки:
   заглушки всех модулей обязаны дышать в такт. */
.md-skel__bit,
.md-skel__mod {
  display: inline-block;
  height: 28px;
  border-radius: 999px;
  background: var(--app-skel-tint);
  animation: app-skel-blink
             var(--motion-pulse, 1200ms)
             var(--motion-ease, cubic-bezier(0.2, 0, 0, 1))
             var(--motion-wait, 700ms)
             infinite;
}
@media (prefers-reduced-motion: reduce) {
  .md-skel__bit,
  .md-skel__mod { animation: none; }
}
.md-skel__bit { height: 58px; border-radius: 16px; }
.md-skel__mod { height: 210px; border-radius: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   ОКНА МОДУЛЯ

   Канон addw в ui_tweaks.css расписан не на класс, а на конкретные окна:
   `html body #add-modal .addw`, `#phone-auth-modal .addw` и так далее. Наши
   окна ни в один такой список не входили и выходили голой разметкой —
   без карточки, без отступов, с полями высотой 18px. Значения ниже сняты
   с эталонного #phone-auth-modal, чтобы окна модерации были неотличимы.
   ══════════════════════════════════════════════════════════════════════ */

#md-bot-modal .addw,
#md-wizard-modal .addw,
#md-chat-modal .addw,
#md-log-modal .addw,
#md-module-modal .addw,
#md-bots-modal .addw {
  /* Без position карточка остаётся непозиционированной, а сосед
     .addw__overlay несёт .modal__backdrop с position: absolute — и
     затемнение по правилам наложения рисуется ПОВЕРХ окна. Эталон
     `#phone-auth-modal .addw` позиционирован именно поэтому. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: calc(100vw - 48px);
  max-height: 86vh;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
  font-family: var(--app-font);
  overflow: hidden;
}

html body.theme-dark #md-bot-modal .addw,
html body.theme-dark #md-wizard-modal .addw,
html body.theme-dark #md-chat-modal .addw,
html body.theme-dark #md-log-modal .addw,
html body.theme-dark #md-module-modal .addw,
html body.theme-dark #md-bots-modal .addw {
  background: #1f2125;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

#md-bot-modal .addw__header,
#md-wizard-modal .addw__header,
#md-chat-modal .addw__header,
#md-log-modal .addw__header,
#md-module-modal .addw__header,
#md-bots-modal .addw__header {
  margin: 0;
  padding: 24px 25px 16px 24px;
  border: 0;
  color: #1f1f1f;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
}
#md-bot-modal .pa__sub,
#md-wizard-modal .pa__sub,
#md-chat-modal .pa__sub,
#md-log-modal .pa__sub,
#md-module-modal .pa__sub,
#md-bots-modal .pa__sub {
  margin: 0 0 12px;
  padding: 0 25px 0 24px;
  color: #5f6368;
  font-size: 13px;
  line-height: 18px;
}
#md-bot-modal .pa__body,
#md-wizard-modal .pa__body,
#md-chat-modal .pa__body,
#md-log-modal .pa__body,
#md-module-modal .pa__body,
#md-bots-modal .pa__body {
  margin: 0;
  padding: 0 25px 0 24px;
  overflow-y: auto;
}

/* Мастер подключения — три шага в ОДНОМ окне: шаги сменяются под руками, и
   окно на каждом переходе меняло высоту (222 → 406 → 224). Читать мастер на
   прыгающем окне нельзя — короб один на все шаги, самый высокий из них
   (224px), остальные стоят в нём же. Канон «Окно одного размера»: размер
   держит короб, а не то, что в нём показано сейчас. */
#md-wizard-modal .pa__body {
  --mdw-body-h: 224px;
  flex: 0 1 auto;
  height: var(--mdw-body-h);
  min-height: 0;
}
html body.theme-dark #md-bot-modal .addw__header,
html body.theme-dark #md-wizard-modal .addw__header,
html body.theme-dark #md-chat-modal .addw__header,
html body.theme-dark #md-log-modal .addw__header,
html body.theme-dark #md-module-modal .addw__header,
html body.theme-dark #md-bots-modal .addw__header { color: #e8eaed; }
html body.theme-dark #md-bot-modal .pa__sub,
html body.theme-dark #md-wizard-modal .pa__sub,
html body.theme-dark #md-chat-modal .pa__sub,
html body.theme-dark #md-log-modal .pa__sub,
html body.theme-dark #md-module-modal .pa__sub,
html body.theme-dark #md-bots-modal .pa__sub { color: #9aa0a6; }

/* Полей в наших окнах больше одного, поэтому расстояние держит форма. */
#md-bot-modal .pa-form,
#md-log-modal .pa-form,
#md-wizard-modal .pa-form,
#md-chat-modal .pa-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#md-bot-modal .form-row,
#md-log-modal .form-row,
#md-wizard-modal .form-row,
#md-chat-modal .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
#md-bot-modal .form-row label,
#md-log-modal .form-row label,
#md-wizard-modal .form-row label,
#md-chat-modal .form-row label {
  margin: 0;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 500;
}
#md-bot-modal .form-row input,
#md-chat-modal .form-row input,
#md-wizard-modal .form-row input,
#md-log-modal .form-row input,
#md-log-modal .form-row select,
#md-chat-modal .form-row select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 15px;
}
#md-bot-modal .form-row input:focus-visible,
#md-chat-modal .form-row input:focus-visible,
#md-wizard-modal .form-row input:focus-visible,
#md-log-modal .form-row input:focus-visible,
#md-log-modal .form-row select:focus-visible,
#md-chat-modal .form-row select:focus-visible {
  outline: none;
  border-color: #0b57d0;
}
html body.theme-dark #md-bot-modal .form-row label,
html body.theme-dark #md-wizard-modal .form-row label,
html body.theme-dark #md-chat-modal .form-row label { color: #e8eaed; }
html body.theme-dark #md-log-modal .form-row label { color: #e8eaed; }
html body.theme-dark #md-bot-modal .form-row input,
html body.theme-dark #md-chat-modal .form-row input,
html body.theme-dark #md-wizard-modal .form-row input,
html body.theme-dark #md-log-modal .form-row input,
html body.theme-dark #md-log-modal .form-row select,
html body.theme-dark #md-chat-modal .form-row select {
  border-color: #35383d;
  background: #1f2125;
  color: #e8eaed;
}

#md-bot-modal .pa-hint,
#md-wizard-modal .pa-hint,
#md-chat-modal .pa-hint,
#md-log-modal .pa-hint,
#md-module-modal .pa-hint,
#md-bots-modal .pa-hint {
  margin: 0;
  color: #5f6368;
  font-size: 13px;
  line-height: 18px;
}
html body.theme-dark #md-bot-modal .pa-hint,
html body.theme-dark #md-wizard-modal .pa-hint,
html body.theme-dark #md-chat-modal .pa-hint,
html body.theme-dark #md-log-modal .pa-hint,
html body.theme-dark #md-module-modal .pa-hint,
html body.theme-dark #md-bots-modal .pa-hint { color: #9aa0a6; }

/* Окно модуля в этом списке не стояло, и его ошибка выходила голой
   строкой: без подложки, без отступов, чёрным по белому. */
#md-bot-modal .pa-error,
#md-wizard-modal .pa-error,
#md-log-modal .pa-error,
#md-chat-modal .pa-error,
#md-module-modal .pa-error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fce8e6;
  color: #c5221f;
  font-size: 13px;
  line-height: 18px;
}
#md-bot-modal .pa-error[hidden],
#md-wizard-modal .pa-error[hidden],
#md-chat-modal .pa-error[hidden],
#md-module-modal .pa-error[hidden] { display: none; }
#md-log-modal .pa-error[hidden] { display: none; }
html body.theme-dark #md-bot-modal .pa-error,
html body.theme-dark #md-wizard-modal .pa-error,
html body.theme-dark #md-log-modal .pa-error,
html body.theme-dark #md-chat-modal .pa-error,
html body.theme-dark #md-module-modal .pa-error {
  background: rgba(242, 139, 130, .16);
  color: #f28b82;
}

#md-bot-modal .addw__actions,
#md-wizard-modal .addw__actions,
#md-chat-modal .addw__actions,
#md-log-modal .addw__actions,
#md-module-modal .addw__actions,
#md-bots-modal .addw__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 16px 25px 24px 24px;
  border: 0;
}
#md-bot-modal .addw__btn,
#md-wizard-modal .addw__btn,
#md-chat-modal .addw__btn,
#md-log-modal .addw__btn,
#md-module-modal .addw__btn,
#md-bots-modal .addw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 0;
  border-radius: 20px;
  font-family: var(--app-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
#md-bot-modal .addw__btn--cancel,
#md-wizard-modal .addw__btn--cancel,
#md-chat-modal .addw__btn--cancel,
#md-log-modal .addw__btn--cancel,
#md-module-modal .addw__btn--cancel,
#md-bots-modal .addw__btn--cancel {
  padding: 0 12px;
  background: transparent;
  color: #0b57d0;
}
#md-bot-modal .addw__btn--cancel:hover,
#md-wizard-modal .addw__btn--cancel:hover,
#md-chat-modal .addw__btn--cancel:hover,
#md-log-modal .addw__btn--cancel:hover,
#md-module-modal .addw__btn--cancel:hover,
#md-bots-modal .addw__btn--cancel:hover { background: rgba(11, 87, 208, .08); }
#md-bot-modal .addw__btn--primary,
#md-wizard-modal .addw__btn--primary,
#md-chat-modal .addw__btn--primary,
#md-log-modal .addw__btn--primary,
#md-module-modal .addw__btn--primary,
#md-bots-modal .addw__btn--primary {
  padding: 0 20px;
  background: #0b57d0;
  color: #ffffff;
}
#md-bot-modal .addw__btn--primary:hover,
#md-wizard-modal .addw__btn--primary:hover,
#md-chat-modal .addw__btn--primary:hover,
#md-log-modal .addw__btn--primary:hover,
#md-module-modal .addw__btn--primary:hover,
#md-bots-modal .addw__btn--primary:hover { background: #0a4bb5; }
#md-bot-modal .addw__btn[disabled],
#md-wizard-modal .addw__btn[disabled],
#md-chat-modal .addw__btn[disabled],
#md-log-modal .addw__btn[disabled],
#md-module-modal .addw__btn[disabled],
#md-bots-modal .addw__btn[disabled] { opacity: .5; cursor: default; }

/* Ожидание Telegram. Добавление группы — это getChat, права бота и число
   участников: три запроса по сети, и без пометки окно на пару секунд выглядит
   зависшим — по кнопке начинают жать второй раз. Крутилка живёт в самой
   кнопке: отдельная полоса на такое короткое ожидание только дёргает окно. */
#md-bot-modal .addw__btn--primary.is-busy,
#md-wizard-modal .addw__btn--primary.is-busy,
#md-chat-modal .addw__btn--primary.is-busy,
#md-log-modal .addw__btn--primary.is-busy { gap: 8px; opacity: 1; }
#md-bot-modal .addw__btn--primary.is-busy::before,
#md-wizard-modal .addw__btn--primary.is-busy::before,
#md-chat-modal .addw__btn--primary.is-busy::before,
#md-log-modal .addw__btn--primary.is-busy::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  animation: md-btn-spin .8s linear infinite;
}
@keyframes md-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #md-bot-modal .addw__btn--primary.is-busy::before,
  #md-wizard-modal .addw__btn--primary.is-busy::before,
  #md-chat-modal .addw__btn--primary.is-busy::before,
  #md-log-modal .addw__btn--primary.is-busy::before { animation: none; }
}

/* Строка «что сейчас происходит» под формой. Кнопка говорит «занято»,
   а эта строка — чем именно: пользователь ждёт осмысленно и понимает,
   почему это не мгновенно. */
#md-bot-modal .md-busy,
#md-wizard-modal .md-busy,
#md-chat-modal .md-busy,
#md-log-modal .md-busy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--md-soft);
  color: var(--md-desc);
  font-size: 13px;
  line-height: 18px;
}
#md-bot-modal .md-busy[hidden],
#md-wizard-modal .md-busy[hidden],
#md-chat-modal .md-busy[hidden],
#md-log-modal .md-busy[hidden] { display: none; }
.md-busy__dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(11, 87, 208, .25);
  border-top-color: #0b57d0;
  animation: md-btn-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .md-busy__dot { animation: none; }
}
html body.theme-dark .md-busy__dot {
  border-color: rgba(168, 199, 250, .25);
  border-top-color: #a8c7fa;
}
html body.theme-dark #md-bot-modal .addw__btn--cancel,
html body.theme-dark #md-wizard-modal .addw__btn--cancel,
html body.theme-dark #md-chat-modal .addw__btn--cancel,
html body.theme-dark #md-log-modal .addw__btn--cancel,
html body.theme-dark #md-module-modal .addw__btn--cancel,
html body.theme-dark #md-bots-modal .addw__btn--cancel { color: #a8c7fa; }
html body.theme-dark #md-bot-modal .addw__btn--primary,
html body.theme-dark #md-wizard-modal .addw__btn--primary,
html body.theme-dark #md-chat-modal .addw__btn--primary,
html body.theme-dark #md-log-modal .addw__btn--primary,
html body.theme-dark #md-module-modal .addw__btn--primary,
html body.theme-dark #md-bots-modal .addw__btn--primary {
  background: #a8c7fa;
  color: #0b2a5b;
}

/* ══════════════════════════════════════════════════════════════════════
   СПИСОК ГРУПП — оболочка таблицы

   Правила оболочки в ui_tweaks.css перечисляют виды поимённо
   (`.view-am, .view-proxy, .view-tasks`), нашего в списках не было: панель
   и таблица разъезжались, шапка растягивалась на всю высоту, а мастер-
   чекбокс схлопывался в 17px. Повторяем только структурные правила —
   ширины колонок у нас свои, из общего модуля колонок.
   ══════════════════════════════════════════════════════════════════════ */

/* Карточка и оболочка — те же числа, что у таблицы аккаунтов
   (.view-am .table-card): радиус 14, тень, потолок высоты 520 и обрезка по
   рамке. Обрезка безопасна: все раскрывающиеся окна модуля позиционируются
   JS и стоят position: fixed, из карточки они не «вылезают». */
/* Карточка списка — плоская, как у аккаунтов, прокси и баз: ни рамки, ни
   тени. Рамка была не только «лишним видом»: её 1px сдвигал ВСЁ содержимое
   карточки, и путь с названием стояли на 17px вместо общего рельса 16px. */
.view-moderation .am-table-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  margin-top: 0;
  border-radius: 14px;
  border: 0;
  background: var(--bg-card, #fff);
  box-shadow: none;
  overflow: hidden;
}
/* Оболочка тянется на всю карточку, а слабину забирает область прокрутки:
   иначе на коротком списке подвал вставал по центру экрана, а под ним
   оставалась пустая белая плита в треть высоты (замерено: 215px). */
.view-moderation .am-table-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  --am-table-tool-row-h: 48px;
}
.view-moderation .am-table-shell > .am-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.view-moderation .am-table-shell > .am-table-foot {
  flex: 0 0 auto;
}
.view-moderation .am-table-shell .picker-gmail-bar,
.view-moderation .am-table-shell .am-gmail-bar {
  width: 100%;
  box-sizing: border-box;
}
.view-moderation .am-gmail-bar {
  min-height: var(--am-table-tool-row-h);
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border, #e6e9ef);
  overflow: visible;
}
.view-moderation .am-table-scroll { overflow: auto visible; }
.view-moderation .table-wrap {
  padding-inline: 0;
  box-sizing: border-box;
  overflow: auto visible;
}
.view-moderation .px-flat__head,
.view-moderation .px-flat__row {
  display: table-row;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}
.view-moderation .px-flat__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* ── Разделитель строк — один, неизменный, поверх ячеек ─────────────────
   Канон списочных таблиц (аккаунты ~27676, прокси ~29580, базы ~35272):
   линия между строками рисуется РОВНО ОДИН РАЗ псевдоэлементом на самой
   строке, а все разделители на ячейках гасятся.

   Зачем: общий контракт .app-table вешает разделитель на td
   (border-bottom: 1px var(--app-table-cell-border) — светло-серый #e3e8f0),
   а выделение красит СТРОКУ. Светлая линия ложится поверх синей заливки, и
   массовое выделение распадается на полосы, разделённые белым, — то, чего
   нет ни в одной другой таблице программы. Псевдолиния лежит НА строке,
   поэтому у выделенных соседей она одна и та же полупрозрачная штриховка,
   а полоса выделения остаётся сплошной.

   Токен --am-row-divider — тот же, что у аккаунтов: полупрозрачный, поэтому
   один на обе темы. */
html body .view-moderation table.app-table tbody tr.px-flat__row,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row {
  position: relative !important;
}
html body .view-moderation table.app-table tbody tr.px-flat__row::after,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--am-row-divider, rgba(120, 138, 162, 0.18)) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
html body .view-moderation table.app-table tbody tr.px-flat__row td,
html body .view-moderation table.app-table tbody tr.px-flat__row:hover td,
html body .view-moderation table.app-table tbody tr.px-flat__row.is-sel-row td,
html body .view-moderation table.app-table tbody tr.px-flat__row.is-sel-row:hover td,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row td,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row:hover td,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row.is-sel-row td,
html body.theme-dark .view-moderation table.app-table tbody tr.px-flat__row.is-sel-row:hover td {
  border: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Мастер-чекбокс с меню выделения.

   Сам чекбокс (21px, SVG-маска) и его рельс приходят из канона LEAD RAIL в
   ui_tweaks.css — вид добавлен в те списки поимённо. Своей копии здесь больше
   нет: прежние 14px с рисованной галочкой не совпадали ни размером, ни
   рисунком с чекбоксами строк под ними. Остаётся только обвязка меню. */
.view-moderation .px-check-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.view-moderation .px-check-menu__control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 0;
  background: transparent;
}
/* Коробку хит-зоны и каретки задаёт канон мастера в конце ui_tweaks.css:
   ширина оттуда идёт от --px-check-hit, высота — от роста связки. Здешняя
   копия считала ВЫСОТУ от того же токена и после его ужатия до 26px делала
   связку модерации на 6px ниже обводки. */
/* Рисунок мастер-чекбокса — те же три маски и тот же токен цвета, что у
   чекбоксов строк (LEAD RAIL, п.5). Правила перечисляют виды поимённо, и
   каждому модулю приходится повторять этот десяток строк; повторяем ровно
   его — ни одного своего числа здесь нет. */
html body .view-moderation .px-check-menu__check,
html body.theme-dark .view-moderation .px-check-menu__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  flex: none !important;
  box-sizing: border-box !important;
  width: var(--tp-checkbox-size, 21px) !important;
  height: var(--tp-checkbox-size, 21px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--tp-checkbox-color, #444746) !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  -webkit-mask-image: var(--tp-checkbox-svg-empty) !important;
  mask-image: var(--tp-checkbox-svg-empty) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  mask-size: var(--tp-checkbox-size, 21px) var(--tp-checkbox-size, 21px) !important;
  accent-color: transparent !important;
  color: var(--tp-checkbox-color, #444746) !important;
}
html body .view-moderation .px-check-menu__check::after,
html body.theme-dark .view-moderation .px-check-menu__check::after {
  content: none !important;
  display: none !important;
}
html body .view-moderation .px-check-menu__check:checked,
html body.theme-dark .view-moderation .px-check-menu__check:checked {
  -webkit-mask-image: var(--tp-checkbox-svg-checked) !important;
  mask-image: var(--tp-checkbox-svg-checked) !important;
}
html body .view-moderation .px-check-menu__check:indeterminate,
html body.theme-dark .view-moderation .px-check-menu__check:indeterminate {
  -webkit-mask-image: var(--tp-checkbox-svg-indeterminate) !important;
  mask-image: var(--tp-checkbox-svg-indeterminate) !important;
}
.view-moderation .px-check-menu__check-hit:hover {
  background: var(--tp-checkbox-hover, rgba(68, 71, 70, 0.08));
}
.view-moderation .px-check-menu__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 32px;
  margin: 0 0 0 -8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--px-gmail-icon, #444746);
  cursor: pointer;
}
.view-moderation .px-check-menu__caret svg { width: 12px; height: 12px; display: block; }

/* ── Модалки: список шагов и пометка «необязательно» ──────────────── */
.md-steps {
  margin: 4px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted, #5f6368);
}
.md-optional {
  color: var(--text-muted, #5f6368);
  font-weight: 400;
}

/* ── Переключатель способа подключения (прокси в окне бота) ───────── */
.md-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 20px;
  background: rgba(11, 87, 208, .06);
}
.md-seg__btn {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #444746;
  font-family: var(--app-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
}
.md-seg__btn:hover { background: rgba(11, 87, 208, .08); }
.md-seg__btn.is-on {
  background: #0b57d0;
  color: #ffffff;
}
.md-proxy-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-proxy-pane[hidden] { display: none; }
#md-bot-modal .md-proxy-pane select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #c4c7c5;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 15px;
}
#md-bot-modal .md-proxy-pane select:disabled { color: #9aa0a6; }

html body.theme-dark .md-seg { background: rgba(168, 199, 250, .10); }
html body.theme-dark .md-seg__btn { color: #c4c7c5; }
html body.theme-dark .md-seg__btn:hover { background: rgba(168, 199, 250, .14); }
html body.theme-dark .md-seg__btn.is-on { background: #a8c7fa; color: #062e6f; }
html body.theme-dark #md-bot-modal .md-proxy-pane select {
  background: #2a2c30;
  border-color: #444746;
  color: #e8eaed;
}

/* ─── ИИ-антиспам ──────────────────────────────────────────────────────
   Отдельный раскрывающийся блок под дополнительными настройками. Геометрия та же
   (.prs-advanced), своё — только внутренности: он единственный здесь
   стоит денег, и это должно быть видно, а не спрятано среди чисел. */

/* Выключённый ИИ — ручки видны, но приглушены: скрывать их значит прятать
   от пользователя, во что ему обойдётся включение. */

.md-ai__usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tp-soft, rgba(11, 87, 208, 0.05));
  font-size: 13px;
}
/* Пока расхода нет, блок скрыт атрибутом — но display его перебивал, и в
   окне «ИИ-антиспам» снизу висела пустая голубая полоса. */
.md-ai__usage[hidden] { display: none; }

.md-ai__usage-head {
  color: var(--tp-side-muted, #5f6368);
  font-size: 12px;
}

.md-ai__usage-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: baseline;
}

.md-ai__usage-chat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-ai__usage-num {
  font-variant-numeric: tabular-nums;
}

/* Исчерпанный потолок — не ошибка, а рабочее состояние: чат дальше живёт
   на обычных правилах. Поэтому предупреждающий цвет, а не красный. */
.md-ai__usage-row.is-full .md-ai__usage-num {
  color: #b06000;
  font-weight: 500;
}

.md-ai__usage-spam,
.md-ai__usage-tokens {
  color: var(--tp-side-muted, #5f6368);
  font-variant-numeric: tabular-nums;
}

body.theme-dark .md-ai__usage-row.is-full .md-ai__usage-num { color: #fdbc64; }

/* ── Пагинация списков оболочки — зеркало аккаунтов и задач ─────────────
   Своих значений здесь нет: круглые кнопки 32×32, шевроны 20px, nav 64px
   без gap и приглушённый счётчик. Без этого блока таблица брала базовые
   .picker-pagination из style.css — квадратные кнопки 24px и синеватый
   серый, то есть выпадала из канона всех остальных списков. Ровно там и
   стоял журнал созданных чатов, пока блок был подписан на .md-gmail-bar:
   бар у него свой (.ccc-gmail-bar), а класс оболочки — общий. */
html body .view-moderation .am-gmail-bar .picker-pagination,
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination {
  color: var(--px-gmail-muted, #5f6368) !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 168px !important;
}
html body .view-moderation .am-gmail-bar .picker-pagination__info,
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__info {
  color: #5e5e5e !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  font-family: var(--app-font) !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html body .view-moderation .am-gmail-bar .picker-pagination__nav,
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__nav {
  flex: 0 0 64px !important;
  width: 64px !important;
  gap: 0 !important;
}
html body .view-moderation .am-gmail-bar .picker-pagination__btn,
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}
html body .view-moderation .am-gmail-bar .picker-pagination__btn svg,
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--px-gmail-icon, #444746) !important;
  stroke: var(--px-gmail-icon, #444746) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}
html body .view-moderation .am-gmail-bar .picker-pagination__btn:hover:not([disabled]),
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__btn:hover:not([disabled]) {
  background: var(--px-gmail-hover, rgba(68, 71, 70, 0.08)) !important;
  color: var(--px-gmail-icon, #444746) !important;
  box-shadow: none !important;
}

/* ═══ message_editor.css ═══ */
/* ══════════════════════════════════════════════════════════════════════
   РЕДАКТОР СООБЩЕНИЯ  (окно #msge-modal, разметка — message_editor.js)

   Оболочка окна — канон addw: белая карточка r28, заголовок 23px/500 без
   разделителя, кнопки-пилюли 40px/r20. Канон в ui_tweaks.css расписан по
   именам окон (`#add-modal .addw`, `#phone-auth-modal .addw`), в такой
   список это окно не входит — значения ниже сняты с эталона
   #phone-auth-modal, как это уже сделано для окон модерации
   (moderation.css).

   ОТСТУПОВ шапки и подвала здесь нет намеренно: их держит общее правило
   `html body .modal :is(.modal__head, .addw__header, …)` с !important — то
   есть канон отступов модалок раздаёт их всем окнам сразу. Свои значения
   рядом с ним были бы мёртвым текстом.

   Раскрывающиеся окна панели (вставка, эмодзи, ссылка) написаны токенами
   канона `--pop-*` — своей формы у них нет.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Карточка окна ──────────────────────────────────────────────────── */
#msge-modal .addw {
  /* position — как у эталона: сосед .addw__overlay несёт затемнение с
     position: absolute, и непозиционированная карточка ушла бы под него.
     overflow здесь именно visible: окна панели лежат внутри карточки и
     обязаны выходить за её край, а прокрутку держит сам ввод. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 680px;
  max-width: calc(100vw - 48px);
  max-height: 88vh;
  background: #ffffff;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
  font-family: var(--app-font);
  overflow: visible;
}
#msge-modal .addw__header {
  margin: 0;
  border: 0;
  color: #1f1f1f;
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
}
/* Шапка — строка: заголовок слева, крестик справа (30.09.2026). Вид
   крестика — тот же, что у окон-списков («Добавить получателей»): его
   рисует правило окон страницы запуска (components/launch-window.css),
   отступы шапки держит канон модалок. */
#msge-modal .msge__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
#msge-modal .msge__close {
  flex: none;
}
#msge-modal .pa__sub {
  margin: 0 0 12px;
  padding: 0 25px 0 24px;
  color: #5f6368;
  font-size: 13px;
  line-height: 18px;
}
#msge-modal .pa__body {
  position: relative;
  margin: 0;
  padding: 0 25px 0 24px;
  overflow: visible;
}
#msge-modal .addw__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  border: 0;
}
#msge-modal .addw__btn {
  min-width: 96px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  font-family: var(--app-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#msge-modal .addw__btn--cancel {
  background: transparent;
  color: #0b57d0;
}
#msge-modal .addw__btn--cancel:hover { background: rgba(11, 87, 208, .08); }
/* Заливка главной кнопки объявлена с !important и одна на обе темы: ночь
   красит ВСЕ `.addw__btn` в призрачные (`background: transparent !important`
   в theme_dark.css), и без веса «Сохранить» превращалась бы в ночи в текст
   без кнопки. Канон ночи главную кнопку намеренно не перекрашивает — белый
   на #0b57d0 читается одинаково на любом фоне. */
#msge-modal .addw__btn--primary {
  background: #0b57d0 !important;
  color: #ffffff !important;
}
#msge-modal .addw__btn--primary:hover { background: #0a4fbd !important; }

/* ── Панель оформления ──────────────────────────────────────────────── */
.msge__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 8px;
}
.msge__bar-gap { flex: 1 1 auto; }
.msge__sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: #dadce0;
}
.msge__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #444746;
  font-family: var(--app-font);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast, 100ms) var(--motion-ease, ease),
              color var(--motion-fast, 100ms) var(--motion-ease, ease);
}
.msge__tool--text { padding: 0 12px 0 8px; }
.msge__tool .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "wght" 400, "opsz" 20;
}
.msge__tool:hover { background: #f1f3f4; }
.msge__tool.is-on {
  background: #d3e3fd;
  color: #0b57d0;
}

/* ── Ввод ───────────────────────────────────────────────────────────── */
.msge__area {
  position: relative;
  min-height: 260px;
  max-height: 44vh;
  padding: 12px 14px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 15px;
  line-height: 22px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  outline: none;
}
.msge__area:focus { border-color: #0b57d0; }
/* Подсказка лежит вне потока строки: в потоке она стояла перед пустым
   текстовым узлом, и каретка после нажатия вставала ЗА ней. Без смещений
   absolute остаётся на своём месте — в начале поля, под его отступом. */
.msge__area.is-empty::before {
  content: attr(data-placeholder);
  position: absolute;
  color: #80868b;
  pointer-events: none;
}
/* Нажали в поле — подсказка пропадает сразу, не дожидаясь первой буквы. */
.msge__area.is-empty:focus::before { content: none; }

/* Оформление внутри ввода — то же, что увидит получатель. */
.msge__area b { font-weight: 700; }
.msge__area i { font-style: italic; }
.msge__area u { text-decoration: underline; }
.msge__area s { text-decoration: line-through; }
.msge__area a {
  color: #0b57d0;
  text-decoration: underline;
  cursor: text;
}
.msge__area code,
.msge__area pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  background: #f1f3f4;
  border-radius: 6px;
}
.msge__area code { padding: 1px 4px; }
.msge__area pre {
  display: block;
  margin: 6px 0;
  padding: 8px 10px;
  white-space: pre-wrap;
}
.msge__area blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid #0b57d0;
}
/* Скрытый текст: получателю Telegram покажет рябь, автору — подложку.
   Полностью прятать нельзя, иначе в него не попасть кареткой. */
.msge-spoiler {
  padding: 0 2px;
  border-radius: 4px;
  background: #dfe1e5;
  box-shadow: inset 0 0 0 1px #c4c7c5;
}
.msge-emoji {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  object-fit: contain;
}

/* ── Подвал ввода ───────────────────────────────────────────────────── */
.msge__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: #5f6368;
  font-size: 12px;
  line-height: 16px;
}
.msge__count { white-space: nowrap; }
.msge__count.is-over { color: #d93025; font-weight: 500; }

/* Прикреплённые файлы (08.10.2026) — плитками над текстом, как в Telegram:
   превью 72px, у видео — значок, пока грузится — полоска снизу, крестик в
   углу открепляет. Окно, куда тащат файлы, подсвечивается. Ведёт
   components/message_attachments.js. */
.msge__tool[hidden],
.msge__files[hidden] { display: none !important; }
.msge__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.msge__tile {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--radius-10);
  background: var(--g-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.msge__tile img,
.msge__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msge__tile.is-uploading img,
.msge__tile.is-uploading video { opacity: 0.55; }
.msge__tile-doc { font-size: 28px; color: var(--g-primary); }
.msge__tile-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: var(--g-primary-ink);
  text-shadow: var(--g-shadow-1);
  pointer-events: none;
}
.msge__tile-progress {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  height: 4px;
  border-radius: var(--radius-2);
  background: var(--g-surface-5);
  overflow: hidden;
}
.msge__tile-progress::after {
  content: "";
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: var(--g-primary);
  transition: width var(--motion-fast) linear;
}
.msge__tile-rm {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--g-ink-mute);
  color: var(--g-primary-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.msge__tile:hover .msge__tile-rm,
.msge__tile-rm:focus-visible { opacity: 1; }
.msge__tile.is-uploading .msge__tile-rm { display: none; }
.msge__tile-rm .material-symbols-outlined { font-size: 14px; color: inherit; }
.msge__tile-rm:hover { background: var(--g-danger-ink); }
.msge.is-drop { outline: 2px dashed var(--g-primary); outline-offset: -8px; }

/* Число в углу значка панели (11.10.2026): фото пула рассылки на скрепке,
   ссылки для {link} на значке ссылок. */
.msge__tool--badged { position: relative; }
.msge__tool-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-8);
  background: var(--g-primary);
  color: var(--g-primary-ink);
  font-size: var(--fs-10);
  line-height: 16px;
  text-align: center;
}
.msge__tool-badge[hidden] { display: none; }

/* Плитка окна склада выделяется нажатием и протягиванием — курсор над ней
   ссылочный (12.10.2026). */
#media-modal .media-pick__tile {
  cursor: pointer;
}

/* Кнопка «⋮» — соседка красной корзины по классу кнопки окна, но цвет у неё
   свой, нейтральный: меню — не удаление. */
html body #media-modal .pf-media__icon-btn.media-pick__menu-btn {
  color: var(--g-ink-mute) !important;
}
html body #media-modal .pf-media__icon-btn.media-pick__menu-btn:hover,
html body #media-modal .pf-media__icon-btn.media-pick__menu-btn.is-open {
  background: var(--pop-item-hover) !important;
}

/* Меню «⋮» окна склада (#media-menu, 12.10.2026): вид — общий у меню
   окон-списков (components/list-window.css). «Удалять после использования» —
   переключатель: галочка справа видна, когда он включён; display пунктов
   бьёт атрибут hidden. */
html body #media-menu .media-menu-check__mark {
  margin-left: auto;
  color: var(--pop-item-sel-fg);
  visibility: hidden;
}
html body #media-menu .media-menu-check[aria-checked="true"] .media-menu-check__mark {
  visibility: visible;
}
html body #media-menu .srch-kw__menu-item[hidden] {
  display: none !important;
}

/* ── Раскрывающиеся окна панели ─────────────────────────────────────── */
.msge-pop {
  position: absolute;
  z-index: 5;
  background: var(--pop-bg);
  border: 1px solid var(--pop-border-color);
  border-radius: var(--pop-radius);
  box-shadow: var(--pop-shadow);
  color: var(--pop-text, #1f1f1f);
  font-family: var(--app-font);
  font-size: var(--pop-font-size);
}
/* Закрытое окно закрыто у всех — и вес правилу нужен свой.
   Каждый вид окна ниже задаёт свой `display`, и у `.msge-pop.msge-pick`
   селектор весит ровно столько же, сколько `.msge-pop[hidden]`: при равном
   весе решает порядок в файле, и окно эмодзи стояло раскрытым ещё до нажатия
   на значок. `!important` снимает этот спор раз и навсегда — новый вид окна
   ниже по файлу его уже не перевесит. */
.msge-pop[hidden] { display: none !important; }

/* Вставка подстановок */
.msge-insert {
  display: flex;
  flex-direction: column;
  gap: var(--pop-gap);
  width: 268px;
  padding: var(--pop-pad);
}
.msge-insert__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: var(--pop-item-h);
  padding: var(--pop-item-pad-y) var(--pop-item-pad-x);
  border: 0;
  border-radius: var(--pop-item-radius);
  background: transparent;
  color: inherit;
  font-family: var(--app-font);
  text-align: left;
  cursor: pointer;
}
.msge-insert__item:hover { background: var(--pop-item-hover); }
.msge-insert__item b { font-size: 13px; font-weight: 500; }
.msge-insert__item small { color: #5f6368; font-size: 11px; }

/* Ссылка */
.msge-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  padding: var(--pop-pad-form);
}
.msge-link__label { color: #5f6368; font-size: 11px; }
.msge-link__input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 13px;
  outline: none;
}
.msge-link__input:focus { border-color: #0b57d0; }
.msge-link__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.msge-link__btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #0b57d0;
  font-family: var(--app-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.msge-link__btn:hover { background: rgba(11, 87, 208, .08); }
.msge-link__btn--primary { background: #0b57d0; color: #ffffff; }
.msge-link__btn--primary:hover { background: #0a4fbd; }

/* Эмодзи */
.msge-emoji {
  /* класс висит и на картинке в тексте, и на окне — окно узнаём по .msge-pop */
}
.msge-pop.msge-pick {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: var(--pop-pad-form);
  gap: 8px;
}
.msge-pick__tabs {
  display: flex;
  gap: 4px;
}
.msge-pick__tab {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 15px;
  background: #f1f3f4;
  color: #444746;
  font-family: var(--app-font);
  font-size: 13px;
  cursor: pointer;
}
.msge-pick__tab.is-on { background: #d3e3fd; color: #0b57d0; }
.msge-pick__packs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.msge-pick__pack {
  flex: 0 0 auto;
  max-width: 150px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #dadce0;
  border-radius: 14px;
  background: #ffffff;
  color: #444746;
  font-family: var(--app-font);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.msge-pick__pack.is-on { border-color: #0b57d0; background: #d3e3fd; color: #0b57d0; }
.msge-pick__pack-empty { color: #5f6368; font-size: 12px; }
.msge-pick__body {
  max-height: 260px;
  overflow-y: auto;
}
.msge-pick__group + .msge-pick__group { margin-top: 8px; }
.msge-pick__group-title {
  margin-bottom: 4px;
  color: #5f6368;
  font-size: 11px;
}
.msge-pick__chars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
}
.msge-pick__char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.msge-pick__char:hover { background: var(--pop-item-hover); }
.msge-pick__char--custom img { width: 26px; height: 26px; object-fit: contain; }
.msge-pick__wait { padding: 12px 4px; color: #5f6368; font-size: 12px; }
.msge-pick__note {
  margin: 0;
  color: #5f6368;
  font-size: 11px;
  line-height: 15px;
}
.msge-pick__note--warn { color: #b06000; }
/* Добавление набора — вопрос только премиум-вкладки. */
.msge-pick__add { display: none; gap: 6px; }
.msge-pop.msge-pick.is-premium .msge-pick__add { display: flex; }
.msge-pick__add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--app-font);
  font-size: 12px;
  outline: none;
}
.msge-pick__add-input:focus { border-color: #0b57d0; }
.msge-pick__add-btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: #0b57d0;
  color: #ffffff;
  font-family: var(--app-font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.msge-pick__add-btn:hover { background: #0a4fbd; }

/* ══ Ночь ══════════════════════════════════════════════════════════════
   Только цвет: раскладка у обеих тем совпадает до пикселя. */
/* Карточку, «Отмену» и её наведение ночь красит общим слоем
   (theme_dark.css: `.modal__panel, … .addw` и `.addw__btn`) — свои правила
   рядом были бы мёртвым текстом. Здесь только то, чего общий слой не знает. */
html body.theme-dark #msge-modal .addw__header { color: #e8eaed; }
html body.theme-dark #msge-modal .pa__sub { color: #9aa0a6; }
html body.theme-dark .msge__sep { background: #3c4043; }
html body.theme-dark .msge__tool { color: #c4c7c5; }
html body.theme-dark .msge__tool:hover { background: #2d2f34; }
html body.theme-dark .msge__tool.is-on { background: #004a77; color: #c2e7ff; }
html body.theme-dark .msge__area {
  background: #17191c;
  border-color: #3c4043;
  color: #e8eaed;
}
html body.theme-dark .msge__area:focus { border-color: #a8c7fa; }
html body.theme-dark .msge__area.is-empty::before { color: #80868b; }
html body.theme-dark .msge__area a { color: #a8c7fa; }
html body.theme-dark .msge__area code,
html body.theme-dark .msge__area pre { background: #2d2f34; }
html body.theme-dark .msge__area blockquote { border-left-color: #a8c7fa; }
html body.theme-dark .msge-spoiler {
  background: #3c4043;
  box-shadow: inset 0 0 0 1px #5f6368;
}
html body.theme-dark .msge__foot { color: #9aa0a6; }
html body.theme-dark .msge__count.is-over { color: #f28b82; }
html body.theme-dark .msge-insert__item small { color: #9aa0a6; }
html body.theme-dark .msge-link__label { color: #9aa0a6; }
html body.theme-dark .msge-link__input {
  background: #17191c;
  border-color: #3c4043;
  color: #e8eaed;
}
html body.theme-dark .msge-link__input:focus { border-color: #a8c7fa; }
html body.theme-dark .msge-link__btn { color: #a8c7fa; }
html body.theme-dark .msge-link__btn:hover { background: rgba(168, 199, 250, .12); }
html body.theme-dark .msge-link__btn--primary { background: #a8c7fa; color: #062e6f; }
html body.theme-dark .msge-link__btn--primary:hover { background: #c2ddff; }
html body.theme-dark .msge-pick__tab { background: #2d2f34; color: #c4c7c5; }
html body.theme-dark .msge-pick__tab.is-on { background: #004a77; color: #c2e7ff; }
html body.theme-dark .msge-pick__pack {
  background: #17191c;
  border-color: #3c4043;
  color: #c4c7c5;
}
html body.theme-dark .msge-pick__pack.is-on {
  background: #004a77;
  border-color: #a8c7fa;
  color: #c2e7ff;
}
html body.theme-dark .msge-pick__pack-empty,
html body.theme-dark .msge-pick__group-title,
html body.theme-dark .msge-pick__wait,
html body.theme-dark .msge-pick__note { color: #9aa0a6; }
html body.theme-dark .msge-pick__note--warn { color: #fdd663; }
html body.theme-dark .msge-pick__add-input {
  background: #17191c;
  border-color: #3c4043;
  color: #e8eaed;
}
html body.theme-dark .msge-pick__add-input:focus { border-color: #a8c7fa; }
html body.theme-dark .msge-pick__add-btn { background: #a8c7fa; color: #062e6f; }
html body.theme-dark .msge-pick__add-btn:hover { background: #c2ddff; }

/* ═══ emoji.css ═══ */
/* ══════════════════════════════════════════════════════════════════════
   ЭМОДЗИ TELEGRAM — форма клетки

   Эмодзи в программе — не символ шрифта, а клетка одного листа-картинки:
   того самого набора, которым рисует эмодзи сам Telegram. Почему так —
   в шапке js/emoji.js; лист собирает scripts/make_emoji_sheet.py.

   Правило написано на класс, а не на место: клетка стоит и в сетке выбора
   окна сообщения, и в сетке реакций накрутки, и чипом на карточке, и в
   сводке задачи. Размер она берёт от места (em), поэтому нигде не нужно
   договариваться о пикселях — где стоял символ в 20 px, там встанет
   картинка в 20 px.

   Сетка листа — 32×32 клетки, отсюда background-size 3200%. Число знают
   три места: генератор, это правило и контрактный тест; клетку внутри
   листа выбирает background-position — его ставит js/emoji.js.

   За резкость отвечает не это правило, а размер клетки на листе: он вдвое
   больше показа (40 px против 20 px), поэтому браузер уменьшает картинку
   ровно вдвое — усреднением квадрата 2×2, без ряби. Ставить эмодзи в
   размер, не кратный клетке, значит вернуть рябь; см. CELL в генераторе.
   ══════════════════════════════════════════════════════════════════════ */
.emo {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  /* Символ в строке сидит на базовой линии, картинка — нет: без сдвига
     эмодзи «подпрыгивало» над текстом рядом с ним. */
  vertical-align: -0.15em;
  background-image: url("img/emoji/apple.webp?v=60c85027af");
  background-repeat: no-repeat;
  background-size: 3200% 3200%;
}

/* ═══ theme_dark_map.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   НОЧНАЯ КАРТА ЦВЕТОВ — файл собран генератором, руками не правится
   ═══════════════════════════════════════════════════════════════════════════

   Светлые каноны в style.css / ui_tweaks.css / moderation.css вбивают цвет
   литералом палитры Google и перечисляют обе темы одним селектором — ночь
   получала тот же белый. Здесь для каждого такого места выпущена ночная
   пара: селектор тот же, @media тот же, переведено только значение.

       поверхность   → ступень ночи по светлоте (#1e1f22 / #2d2f34 / #35373c)
       тонированная  → смысловой тон (выбор, ок, предупреждение, ошибка)
       тёмный текст  → светлый той же ступени (#e3e3e3 / #c4c7c5 / #9aa0a6)
       светлая линия → #444746

   Градиенты, картинки и значения через var() генератор не трогает: там цвет
   несёт замысел, а не палитру, и переводить его механически нельзя.

   Важность (!important) копируется с исходного правила, а не ставится
   всем подряд: иначе перевод перебивал бы настоящие ночные правила.

   Порядок подключения: файл идёт ПЕРЕД theme_dark.css. Всё, что решено
   вручную, лежит там и перебивает механический перевод при равной
   специфичности.

   Пересобрать: .venv/Scripts/python.exe scripts/gen_theme_dark_map.py
   ═══════════════════════════════════════════════════════════════════════════ */

/* style.css:147 */
body.theme-dark .nav-section__title {
  color: #9aa0a6;
}

/* style.css:258 */
body.theme-dark .version {
  color: #c4c7c5;
}

/* style.css:303 */
body.theme-dark .icon-btn {
  background-color: #1e1f22;
}

/* style.css:330 */
body.theme-dark .chip {
  background-color: #2d2f34;
}

/* style.css:344 */
body.theme-dark .search {
  background-color: #2d2f34;
}

/* style.css:358 */
body.theme-dark .dropdown {
  background-color: #1e1f22;
}

/* style.css:525 */
body.theme-dark .table-footer {
  background-color: #1e1f22;
}

/* style.css:540 */
body.theme-dark .page-size select {
  background-color: #1e1f22;
}

/* style.css:549 */
body.theme-dark .pagination button {
  background-color: #1e1f22;
}

/* style.css:568 */
body.theme-dark .sel-bar {
  background-color: #1e1f22;
}

/* style.css:597 */
body.theme-dark .quick-act {
  background-color: #1e1f22;
}

/* style.css:668 */
body.theme-dark .modal__panel {
  background-color: #1e1f22;
}

/* style.css:849 */
body.theme-dark .form-row input[type="number"] {
  background-color: #1e1f22;
}

/* style.css:1056 */
body.theme-dark .task-status--running {
  background-color: rgba(168, 199, 250, 0.14);
  color: #a8c7fa;
}

/* style.css:1057 */
body.theme-dark .task-status--paused {
  background-color: rgba(253, 214, 99, 0.16);
  color: #fdd663;
}

/* style.css:1058 */
body.theme-dark .task-status--warning {
  background-color: rgba(253, 214, 99, 0.16);
  color: #fdd663;
}

/* style.css:1059 */
body.theme-dark .task-status--done {
  background-color: rgba(168, 218, 181, 0.16);
  color: #a8dab5;
}

/* style.css:1060 */
body.theme-dark .task-status--cancelled {
  background-color: rgba(253, 214, 99, 0.16);
  color: #fdd663;
}

/* style.css:1061 */
body.theme-dark .task-status--interrupted {
  background-color: #2d2f34;
  color: #c4c7c5;
}

/* style.css:1062 */
body.theme-dark .task-status--error {
  background-color: rgba(242, 184, 181, 0.16);
  color: #f2b8b5;
}

/* style.css:1136 */
body.theme-dark .task-row__error {
  color: #f2b8b5;
}

/* style.css:1221 */
body.theme-dark .task-detail__error {
  background-color: rgba(242, 184, 181, 0.16);
  color: #f2b8b5;
  border-color: #444746;
}

/* style.css:1226 */
body.theme-dark .task-detail__warning {
  background-color: rgba(253, 214, 99, 0.16);
  color: #fdd663;
  border-color: #444746;
}

/* style.css:1350 */
body.theme-dark .modal__panel--role {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:1364 */
body.theme-dark .role-modal__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:1395 */
body.theme-dark .role-modal__title {
  color: #e3e3e3;
}

/* style.css:1409 */
body.theme-dark .role-modal__body {
  background-color: #1e1f22;
}

/* style.css:1419 */
body.theme-dark .role-modal__footer {
  border-top-color: #444746;
}

/* style.css:1556 */
body.theme-dark .role-list__del:hover {
  color: #f2b8b5;
}

/* style.css:1559 */
body.theme-dark .modal__panel--edit-profile {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:1571 */
body.theme-dark .edit-profile__head,
body.theme-dark .edit-profile-form__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:1581 */
body.theme-dark .edit-profile__nav {
  color: #9aa0a6;
}

/* style.css:1595 */
body.theme-dark .edit-profile__nav:hover {
  background-color: #2d2f34;
  color: #c4c7c5;
}

/* style.css:1600 */
body.theme-dark .edit-profile__title,
body.theme-dark .edit-profile-form__title {
  color: #e3e3e3;
}

/* style.css:1614 */
body.theme-dark .edit-profile__picker {
  background-color: #1e1f22;
}

/* style.css:1623 */
body.theme-dark .edit-profile__card {
  color: #e3e3e3;
}

/* style.css:1640 */
body.theme-dark .edit-profile__card:hover {
  background-color: #2d2f34;
}

/* style.css:1643 */
body.theme-dark .edit-profile__card:active {
  background-color: rgba(168, 199, 250, 0.14);
}

/* style.css:1657 */
body.theme-dark .modal__panel--privacy-list {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:1668 */
body.theme-dark .privacy-list__head {
  border-bottom-color: #444746;
}

/* style.css:1677 */
body.theme-dark .privacy-list__title {
  color: #e3e3e3;
}

/* style.css:1684 */
body.theme-dark .privacy-list__body {
  background-color: #1e1f22;
}

/* style.css:1694 */
body.theme-dark .privacy-list__items--security {
  border-bottom-color: #444746;
}

/* style.css:1698 */
body.theme-dark .privacy-list__row {
  color: #e3e3e3;
}

/* style.css:1717 */
body.theme-dark .privacy-list__row:hover {
  background-color: #2d2f34;
}

/* style.css:1731 */
body.theme-dark .privacy-list__ico {
  color: #c4c7c5;
}

/* style.css:1743 */
body.theme-dark .privacy-list__value {
  color: #a8c7fa;
}

/* style.css:1752 */
body.theme-dark .modal__panel--privacy-form {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:1766 */
body.theme-dark .privacy-form__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:1777 */
body.theme-dark .privacy-form__title {
  color: #e3e3e3;
}

/* style.css:1788 */
body.theme-dark .privacy-form__body {
  background-color: #1e1f22;
}

/* style.css:1803 */
body.theme-dark .privacy-form__section-title {
  color: #e3e3e3;
}

/* style.css:1815 */
body.theme-dark .privacy-form__radio {
  color: #e3e3e3;
}

/* style.css:1832 */
body.theme-dark .privacy-form__radio:hover {
  background-color: #2d2f34;
}

/* style.css:1835 */
body.theme-dark .privacy-form__radio input {
  background-color: #1e1f22;
}

/* style.css:1863 */
body.theme-dark .privacy-form__note {
  color: #9aa0a6;
}

/* style.css:1872 */
body.theme-dark .privacy-form__footer {
  background-color: #1e1f22;
}

/* style.css:1884 */
body.theme-dark .privacy-form__action {
  color: #a8c7fa;
}

/* style.css:1898 */
body.theme-dark .privacy-form__action:hover {
  background-color: rgba(168, 199, 250, 0.14);
}

/* style.css:1911 */
body.theme-dark .privacy-form__action--primary:hover {
  background-color: rgba(168, 199, 250, 0.14);
}

/* style.css:1915 */
body.theme-dark .tg-security-modal {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:1929 */
body.theme-dark .tg-security-head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:1940 */
body.theme-dark .tg-security-head__title {
  color: #e3e3e3;
}

/* style.css:1951 */
body.theme-dark .tg-security-body,
body.theme-dark .tg-password-body {
  background-color: #1e1f22;
}

/* style.css:1957 */
body.theme-dark .tg-security-text {
  color: #9aa0a6;
}

/* style.css:1970 */
body.theme-dark .tg-security-row {
  color: #e3e3e3;
}

/* style.css:1985 */
body.theme-dark .tg-security-row:hover {
  background-color: #2d2f34;
}

/* style.css:1988 */
body.theme-dark .tg-security-row__ico {
  color: #9aa0a6;
}

/* style.css:2004 */
body.theme-dark .tg-security-row--danger {
  color: #f2b8b5;
}

/* style.css:2007 */
body.theme-dark .tg-security-row--danger .tg-security-row__ico {
  color: #f2b8b5;
}

/* style.css:2010 */
body.theme-dark .tg-security-note {
  background-color: #2d2f34;
  color: #9aa0a6;
  border-top-color: #444746;
}

/* style.css:2018 */
body.theme-dark .tg-security-footer {
  background-color: #1e1f22;
  border-top-color: #444746;
}

/* style.css:2031 */
body.theme-dark .edit-profile-form__footer {
  border-top-color: #444746;
}

/* style.css:2289 */
body.theme-dark .hamburger span {
  background-color: rgba(168, 199, 250, 0.14);
}

/* style.css:2592 */
body.theme-dark .switch__slider::before {
  background-color: #1e1f22;
}

/* style.css:3499 */
body.theme-dark .sel-bar .quick-act:hover {
  background-color: #1e1f22;
  color: #a8c7fa;
}

/* style.css:3503 */
body.theme-dark .sel-bar .primary-btn {
  background-color: #1e1f22;
  color: #a8c7fa;
}

/* style.css:3592 */
body.theme-dark .modal__panel--picker .btn--primary[disabled] {
  background-color: rgba(168, 199, 250, 0.14);
}

/* style.css:3711 */
body.theme-dark .picker-chip--clear:hover {
  color: #f2b8b5;
}

/* style.css:3715 */
body.theme-dark .am-filter-pop {
  color: #e3e3e3;
}

/* style.css:3786 */
body.theme-dark .ub-color[data-color="amber"] {
  background-color: rgba(253, 214, 99, 0.16);
}

/* style.css:3830 */
body.theme-dark .tm-card__act {
  color: #c4c7c5;
}

/* style.css:3851 */
body.theme-dark .tm-card__act--danger:hover {
  color: #f2b8b5;
}

/* style.css:3855 */
body.theme-dark .tm-card__act--pause:hover {
  color: #a8c7fa;
}

/* style.css:3861 */
body.theme-dark .tm-card__act--continue {
  color: #a8c7fa;
}

/* style.css:4103 */
body.theme-dark .sidebar__collapse {
  color: #9aa0a6;
}

/* style.css:4287 */
body.theme-dark .btn--danger {
  color: #f2b8b5;
}

/* style.css:4397 */
body.theme-dark .px-status {
  color: #c4c7c5;
}

/* style.css:4406 */
body.theme-dark .px-status--checking {
  color: #a8c7fa;
}

/* style.css:4407 */
body.theme-dark .px-status--ok {
  color: #a8dab5;
}

/* style.css:4408 */
body.theme-dark .px-status--error {
  color: #f2b8b5;
}

/* style.css:4409 */
body.theme-dark .px-status--unknown {
  color: #9aa0a6;
}

/* style.css:4473 */
body.theme-dark .am-username {
  color: #a8c7fa;
}

/* style.css:4546 */
body.theme-dark #px-add-modal .edit-profile__nav,
body.theme-dark .newbase-modal .edit-profile__nav {
  color: #9aa0a6;
}

/* style.css:4553 */
body.theme-dark #px-add-modal .edit-profile__nav:hover,
body.theme-dark .newbase-modal .edit-profile__nav:hover {
  background-color: #2d2f34;
  color: #c4c7c5;
}

/* style.css:4690 */
body.theme-dark #px-add-modal .px-dropzone__ico,
body.theme-dark .newbase-modal .px-dropzone__ico {
  color: #a8c7fa;
}

/* style.css:4748 */
body.theme-dark button.am-username {
  color: #a8c7fa;
}

/* style.css:4800 */
body.theme-dark .ub-card__action {
  background-color: #1e1f22;
}

/* style.css:4973 */
body.theme-dark .inv-chat-suggestion__admin {
  color: #a8c7fa;
}

/* style.css:5007 */
body.theme-dark .inv-chat-suggestion__remove:hover {
  color: #f2b8b5;
}

/* style.css:5486 */
body.theme-dark .acc-table thead th.is-sorted .sort {
  color: #a8c7fa;
}

/* style.css:5493 */
body.theme-dark .acc-table thead th.is-sorted-asc .sort,
body.theme-dark .acc-table thead th.is-sorted-desc .sort {
  color: #a8c7fa;
}

/* style.css:5500 */
body.theme-dark .modal__panel--bind-proxy {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:5510 */
body.theme-dark .modal__panel--bind-proxy .modal__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:5521 */
body.theme-dark .modal__panel--bind-proxy .modal__title {
  color: #e3e3e3;
}

/* style.css:5559 */
body.theme-dark .tf-err--proxy {
  color: #fdd663;
}

/* style.css:5560 */
body.theme-dark .tf-err--account {
  color: #f2b8b5;
}

/* style.css:5592 */
body.theme-dark .modal__panel--actions {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:5603 */
body.theme-dark .actions-modal__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:5617 */
body.theme-dark .actions-modal__nav {
  color: #9aa0a6;
}

/* style.css:5631 */
body.theme-dark .actions-modal__nav:hover {
  background-color: #2d2f34;
  color: #c4c7c5;
}

/* style.css:5635 */
body.theme-dark .actions-modal__title {
  color: #e3e3e3;
}

/* style.css:5651 */
body.theme-dark .actions-list--telegram li {
  color: #e3e3e3;
}

/* style.css:5661 */
body.theme-dark .actions-list--telegram li:hover {
  background-color: #2d2f34;
}

/* style.css:5662 */
body.theme-dark .actions-list--telegram .ico {
  color: #9aa0a6;
}

/* style.css:5781 */
body.theme-dark .picker-empty__art--err {
  color: #f2b8b5;
}

/* style.css:5963 */
body.theme-dark .modal__panel--password {
  background-color: #1e1f22;
}

/* style.css:5975 */
body.theme-dark .modal__panel--password .modal__head {
  background-color: #1e1f22;
  border-bottom-color: #444746;
}

/* style.css:5986 */
body.theme-dark .modal__panel--password .edit-profile__nav {
  color: #9aa0a6;
}

/* style.css:5993 */
body.theme-dark .modal__panel--password .edit-profile__nav:hover {
  background-color: #2d2f34;
  color: #c4c7c5;
}

/* style.css:6003 */
body.theme-dark .modal__panel--password .modal__title {
  color: #e3e3e3;
}

/* style.css:6014 */
body.theme-dark .modal__panel--password .modal__body {
  background-color: #1e1f22;
}

/* style.css:6028 */
body.theme-dark .modal__panel--password .modal__body .inv-field__label {
  color: #e3e3e3;
}

/* style.css:6033 */
body.theme-dark .modal__panel--password .modal__body .inv-input {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* style.css:6042 */
body.theme-dark .modal__panel--password .modal__body .inv-input:focus {
  border-color: #444746;
}

/* style.css:6050 */
body.theme-dark .modal__panel--password .modal__hint {
  color: #9aa0a6;
}

/* style.css:6056 */
body.theme-dark .modal__panel--password .modal__foot {
  background-color: #1e1f22;
}

/* style.css:6407 */
body.theme-dark .pf-media__icon-btn--danger {
  color: #f2b8b5;
}

/* style.css:6504 */
body.theme-dark .pf-media__tile-check {
  border-color: #444746;
}

/* style.css:6520 */
body.theme-dark .pf-media__tile-check::after {
  border-color: #444746;
}

/* style.css:6675 */
body.theme-dark .ub2-source-tag--parser {
  background-color: rgba(168, 199, 250, 0.14);
  color: #a8c7fa;
  border-color: #444746;
}

/* style.css:6676 */
body.theme-dark .ub2-source-tag--manual {
  background-color: #2d2f34;
  color: #c4c7c5;
  border-color: #444746;
}

/* style.css:6677 */
body.theme-dark .ub2-source-tag--import {
  background-color: rgba(199, 178, 251, 0.16);
  color: #c7b2fb;
  border-color: #444746;
}

/* style.css:6678 */
body.theme-dark .ub2-source-tag--duplicate {
  background-color: rgba(253, 214, 99, 0.16);
  color: #fdd663;
  border-color: #444746;
}

/* style.css:6679 */
body.theme-dark .ub2-source-tag--checker {
  background-color: rgba(168, 218, 181, 0.16);
  color: #a8dab5;
  border-color: #444746;
}

/* style.css:6892 */
body.theme-dark.is-proxy-screen .px-flat__flag-placeholder {
  background-color: #35373c;
}

/* style.css:7260 */
body.theme-dark .am-actions-menu {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:7275 */
body.theme-dark #am-sel-actions.is-open {
  background-color: #35373c !important;
  color: #e3e3e3 !important;
}

/* style.css:7282 */
body.theme-dark .am-actions-menu__item,
body.theme-dark .am-actions-fly__item {
  color: #e3e3e3;
}

/* style.css:7296 */
body.theme-dark .am-actions-menu__item:hover,
body.theme-dark .am-actions-menu__item:focus,
body.theme-dark .am-actions-menu__item.is-active,
body.theme-dark .am-actions-fly__item:hover,
body.theme-dark .am-actions-fly__item:focus,
body.theme-dark .am-actions-fly__item.is-active {
  background-color: #35373c;
}

/* style.css:7301 */
body.theme-dark .am-actions-menu__ico,
body.theme-dark .am-actions-fly__ico {
  color: #c4c7c5;
}

/* style.css:7341 */
body.theme-dark .am-actions-menu__sep,
body.theme-dark .am-actions-fly__sep {
  background-color: #35373c;
}

/* style.css:7349 */
body.theme-dark .am-actions-fly {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* style.css:7393 */
body.theme-dark .am-actions-fly__mark {
  color: #a8c7fa;
}

/* style.css:7413 */
body.theme-dark .am-actions-fly__del {
  color: #c4c7c5;
}

/* style.css:7426 */
body.theme-dark .am-actions-fly__del:hover {
  color: #f2b8b5;
}

/* style.css:7430 */
body.theme-dark .am-actions-fly__search {
  border-bottom-color: #444746;
}

/* style.css:7441 */
body.theme-dark .am-actions-fly__search:focus-within {
  border-color: #444746;
}

/* style.css:7446 */
body.theme-dark .am-actions-fly__search-ico {
  color: #c4c7c5;
}

/* style.css:7451 */
body.theme-dark .am-actions-fly__search input {
  color: #e3e3e3;
}

/* style.css:7460 */
body.theme-dark .am-actions-fly__foot {
  color: #e3e3e3;
}

/* style.css:7466 */
body.theme-dark .am-actions-fly__foot:hover {
  background-color: #35373c;
}

/* ui_tweaks.css:718 */
body.theme-dark #ub-detail-modal .modal__panel,
body.theme-dark .newbase-modal .modal__panel,
body.theme-dark #ub-import-modal .modal__panel {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* ui_tweaks.css:916 */
body.theme-dark #view-userbase .ub-card__action--primary {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:922 */
body.theme-dark #view-userbase .ub-card__action--primary:hover {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:1376 */
body.theme-dark #view-userbase .ub-card__icon-btn {
  color: #9aa0a6;
}

/* ui_tweaks.css:1473 */
body.theme-dark #view-userbase .ub-card__meta-line {
  color: #9aa0a6;
}

/* ui_tweaks.css:1675 */
body.theme-dark #view-userbase .ub-card__updated {
  color: #9aa0a6;
}

/* ui_tweaks.css:1900 */
body.theme-dark #ub-import-modal .ub-import-modal {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:1915 */
body.theme-dark #ub-import-modal .ub-import-modal .modal__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:1934 */
body.theme-dark #ub-import-modal .ub-import-modal__icon {
  background-color: rgba(168, 199, 250, 0.14);
  color: #a8c7fa;
}

/* ui_tweaks.css:1951 */
body.theme-dark #ub-import-modal .ub-import-modal .modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:1973 */
body.theme-dark #ub-import-modal .ub-import-modal .icon-btn:hover {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:1983 */
body.theme-dark #ub-import-modal .ub-import-modal .modal__body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:1993 */
body.theme-dark #ub-import-modal .ub-import-modal .modal__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:2033 */
body.theme-dark #ub-import-modal .ub-session {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:2049 */
body.theme-dark #ub-import-modal .ub-session:hover {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:2063 */
body.theme-dark #ub-import-modal .ub-session__ico {
  background-color: #1e1f22 !important;
  color: #a8c7fa !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:2076 */
body.theme-dark #ub-import-modal .ub-session__ico--indigo {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:2092 */
body.theme-dark #ub-import-modal .ub-session__name {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:2102 */
body.theme-dark #ub-import-modal .ub-session__date {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:2109 */
body.theme-dark #ub-import-modal .ub-session__count {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:2118 */
body.theme-dark #ub-import-modal .ub-session__count small {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:2125 */
body.theme-dark #ub-import-modal .picker-empty {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:2473 */
body.theme-dark .view-proxy .px-flat__health--error {
  color: #f2b8b5;
}

/* ui_tweaks.css:2554 */
body.theme-dark #ub-import-modal .modal__panel {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:2565 */
body.theme-dark #ub-import-modal .modal__head {
  background-color: #1e1f22;
}

/* ui_tweaks.css:2575 */
body.theme-dark #ub-import-modal .modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:2586 */
body.theme-dark #ub-import-modal .modal__body {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:2592 */
body.theme-dark #ub-import-modal .modal__foot {
  background-color: #1e1f22;
}

/* ui_tweaks.css:3485 */
body.theme-dark.is-proxy-screen .view-proxy .px-flat__health--error {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:4027 */
body.theme-dark .sidebar.sidebar--v2 .nav-item__switch-knob {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:5666 */
html body.theme-dark .sidebar.sidebar--v2 .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__label,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:5677 */
html body.theme-dark .sidebar.sidebar--v2 .nav-item__icon,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:hover .nav-item__icon,
html body.theme-dark .sidebar.sidebar--v2 .nav-item.is-active .nav-item__icon {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:5692 */
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:5730 */
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover::before {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:5978 */
html body.theme-dark .view-am .am-username:hover,
html body.theme-dark button.am-username:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:6117 */
html body.theme-dark .sel-bar .icon-btn:hover,
html body.theme-dark .sel-bar .quick-act:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:6297 */
body.theme-dark .cc-material-remove-row {
  border-top-color: #444746;
}

/* ui_tweaks.css:6306 */
body.theme-dark .cc-material-remove-row__label {
  color: #c4c7c5;
}

/* ui_tweaks.css:6580 */
html body.theme-dark .view-am .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:6628 */
html body.theme-dark .dropdown__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6645 */
html body.theme-dark .dropdown__item:hover,
html body.theme-dark .dropdown__item.is-active,
html body.theme-dark .dropdown__item.is-checked {
  background-color: #35373c !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6672 */
html body.theme-dark .dropdown__search {
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:6691 */
html body.theme-dark .dropdown__search-ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:6704 */
html body.theme-dark .dropdown__search-input {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6765 */
html body.theme-dark .modal__panel--actions {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6790 */
html body.theme-dark #role-modal .modal__panel--role {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6885 */
html body.theme-dark .modal__panel--edit-profile {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6897 */
html body.theme-dark .edit-profile__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:6910 */
html body.theme-dark .edit-profile__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6919 */
html body.theme-dark .modal__panel--edit-profile .edit-profile__sub {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:6928 */
html body.theme-dark .edit-profile__picker {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:6940 */
html body.theme-dark .edit-profile__card {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:6957 */
html body.theme-dark .edit-profile__card:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:6968 */
html body.theme-dark .edit-profile__ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:6988 */
html body.theme-dark .edit-profile__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7005 */
html body.theme-dark .edit-profile__choice--tile {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7014 */
html body.theme-dark .edit-profile__choice--tile.is-checked {
  background-color: #35373c !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7021 */
html body.theme-dark .edit-profile__file-btn {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7032 */
html body.theme-dark .edit-profile__file-status,
html body.theme-dark .edit-profile__note-text {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7037 */
html body.theme-dark .edit-profile__note {
  background-color: #1e1f22 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7044 */
html body.theme-dark .edit-profile__note-ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:7051 */
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-row {
  border-top-color: #444746 !important;
}

/* ui_tweaks.css:7066 */
html body.theme-dark .edit-profile__bulk-hint {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7074 */
html body.theme-dark .edit-profile__choice-row--source {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7098 */
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile + .edit-profile__choice--tile {
  border-left-color: #444746 !important;
}

/* ui_tweaks.css:7103 */
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:7108 */
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked {
  background-color: #35373c !important;
}

/* ui_tweaks.css:7125 */
html body.theme-dark .edit-profile__choice-row--source .edit-profile__choice-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7133 */
html body.theme-dark .edit-profile__photo-replace .inv-field__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7140 */
html body.theme-dark #role-modal .role-modal__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:7160 */
html body.theme-dark #role-modal .role-modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7169 */
html body.theme-dark #role-modal .role-modal__body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7177 */
html body.theme-dark #role-modal .role-modal__field-label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7191 */
html body.theme-dark #role-modal .role-combo input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7204 */
html body.theme-dark #role-modal .role-combo input:focus {
  border-color: #444746 !important;
}

/* ui_tweaks.css:7210 */
html body.theme-dark #role-modal .role-combo__chev {
  background-color: #1e1f22 !important;
  color: #9aa0a6 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7229 */
html body.theme-dark #role-modal .role-modal__footer {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7267 */
html body.theme-dark .modal .privacy-form__footer .privacy-form__action {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:7289 */
html body.theme-dark .modal .privacy-form__footer .privacy-form__action:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:7302 */
html body.theme-dark .privacy-list__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:7315 */
html body.theme-dark .privacy-list__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7324 */
html body.theme-dark .privacy-list__body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7353 */
html body.theme-dark .privacy-list__row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7411 */
html body.theme-dark .privacy-list__value {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:7423 */
html body.theme-dark .modal__panel--privacy-form,
html body.theme-dark .modal .tg-security-modal {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7437 */
html body.theme-dark .modal__panel--privacy-list {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7452 */
html body.theme-dark .privacy-form__head,
html body.theme-dark .modal .tg-security-head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:7494 */
html body.theme-dark .privacy-list__title,
html body.theme-dark .privacy-form__title,
html body.theme-dark .modal .tg-security-head__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7540 */
html body.theme-dark .privacy-list__row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:7545 */
html body.theme-dark .privacy-list__ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7589 */
html body.theme-dark .privacy-list__label,
html body.theme-dark .modal .tg-security-row__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7649 */
html body.theme-dark .privacy-form__body,
html body.theme-dark .modal .tg-security-body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7667 */
html body.theme-dark #security-confirm-modal .tg-security-confirm-body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7695 */
html body.theme-dark #security-confirm-modal .security-confirm__foot {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7725 */
html body.theme-dark #auto-delete-modal .modal__panel--auto-delete {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7739 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:7753 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7763 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7779 */
html body.theme-dark #auto-delete-modal .auto-delete-radio {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7798 */
html body.theme-dark #auto-delete-modal .auto-delete-radio:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:7804 */
html body.theme-dark #auto-delete-modal .auto-delete-radio__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7855 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__note {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7868 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:7913 */
html body.theme-dark .privacy-form__radio,
html body.theme-dark .modal .tg-security-row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:7936 */
html body.theme-dark .privacy-form__radio:hover,
html body.theme-dark .modal .tg-security-row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:7941 */
html body.theme-dark .modal .tg-security-row__ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7960 */
html body.theme-dark .modal .tg-security-text,
html body.theme-dark .modal .tg-security-note {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:7972 */
html body.theme-dark .privacy-form__note {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8002 */
html body.theme-dark .privacy-form__footer,
html body.theme-dark .modal .tg-security-footer {
  background-color: #1e1f22 !important;
  border-top-color: #444746 !important;
}

/* ui_tweaks.css:8013 */
html body.theme-dark .actions-modal__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:8026 */
html body.theme-dark .actions-modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:8036 */
html body.theme-dark .modal__panel--actions .actions-list--telegram {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:8048 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:8067 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:8079 */
html body.theme-dark .modal__panel--actions .actions-list--telegram .ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8101 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="check"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="check_spamblock"] .ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8107 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="change_role"] .ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8113 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="open_web"] .ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8121 */
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="edit_profile"] .ico,
html body.theme-dark .modal__panel--actions .actions-list--telegram li[data-act="edit_privacy"] .ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:8127 */
html body.theme-dark .modal__panel--actions .actions-list--telegram .actions-list__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:8317 */
html body.theme-dark #px-add-modal .modal__panel,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:8797 */
html body.theme-dark .view-am .acc-table .am-proxy--ok .am-proxy__check,
html body.theme-dark .am-proxy--ok .am-proxy__check {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:8801 */
html body.theme-dark .view-am .acc-table .am-proxy--error .am-proxy__check,
html body.theme-dark .am-proxy--error .am-proxy__check {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:9171 */
html body.theme-dark .am-cols-pop .am-cols-pop__title {
  color: #9aa0a6;
}

/* ui_tweaks.css:9209 */
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-locked {
  color: #9aa0a6;
}

/* ui_tweaks.css:9238 */
html body.theme-dark .am-cols-pop .am-cols-pop__reset {
  color: #a8c7fa;
}

/* ui_tweaks.css:9363 */
html body.theme-dark .view-am .am-gmail-bar .am-sel-action--danger:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:9367 */
html body.theme-dark .view-am .am-gmail-bar .am-sel-action--danger:hover svg {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:9822 */
html body.theme-dark .sidebar.sidebar--v2,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2,
html body.theme-dark.sidebar-open .sidebar.sidebar--v2 {
  border-right-color: #444746 !important;
}

/* ui_tweaks.css:9836 */
html body.theme-dark .sidebar.sidebar--v2 .nav-item,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]),
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):hover,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]):focus-visible,
html body.theme-dark .sidebar.sidebar--v2 .nav-item:not([disabled]).is-active {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:9956 */
html body.theme-dark .notif-pop__head {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:9968 */
html body.theme-dark .notif-pop__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10003 */
html body.theme-dark .notif-pop__act,
html body.theme-dark .notif-pop__close {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:10036 */
html body.theme-dark .notif-pop__act:hover,
html body.theme-dark .notif-pop__close:hover {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:10083 */
html body.theme-dark .notif-pop__empty {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:10134 */
html body.theme-dark .notif-card {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:10149 */
html body.theme-dark .notif-card__icon {
  background-color: rgba(168, 199, 250, 0.14) !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:10174 */
html body.theme-dark .notif-card__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10182 */
html body.theme-dark .notif-card__text {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:10202 */
html body.theme-dark .notif-card--info .notif-card__icon {
  background-color: rgba(168, 199, 250, 0.14) !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:10208 */
html body.theme-dark .notif-card--done .notif-card__icon {
  background-color: rgba(168, 218, 181, 0.16) !important;
  color: #a8dab5 !important;
}

/* ui_tweaks.css:10214 */
html body.theme-dark .notif-card--warn .notif-card__icon {
  background-color: rgba(253, 214, 99, 0.16) !important;
  color: #fdd663 !important;
}

/* ui_tweaks.css:10220 */
html body.theme-dark .notif-card--error .notif-card__icon {
  background-color: rgba(242, 184, 181, 0.16) !important;
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:10263 */
html body.theme-dark .notif-card__remove:hover {
  background-color: #2d2f34 !important;
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:10296 */
html body.theme-dark .notif-settings {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:10333 */
html body.theme-dark .notif-settings__hint {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:10362 */
html body.theme-dark .notif-settings__row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:10367 */
html body.theme-dark .notif-settings__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10376 */
html body.theme-dark .notif-settings__row--all {
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:10675 */
html body.theme-dark .view-userbase--v2 .ub2-source-menu__button {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10691 */
html body.theme-dark .view-userbase--v2 .ub2-source-menu__button:hover {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:10755 */
html body.theme-dark #ub-detail-modal .ub-detail--floppy,
html body.theme-dark #ub-import-modal .ub-import-modal {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10769 */
html body.theme-dark .newbase-modal .modal__head,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .modal__head,
html body.theme-dark #ub-import-modal .modal__head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:10784 */
html body.theme-dark .newbase-modal .modal__title,
html body.theme-dark #ub-detail-modal .ub-detail__modal-title,
html body.theme-dark #ub-import-modal .modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10811 */
html body.theme-dark .newbase-modal .modal__head .icon-btn,
html body.theme-dark .newbase-modal .modal__head .edit-profile__nav,
html body.theme-dark #ub-detail-modal .ub-detail__head-actions .icon-btn,
html body.theme-dark #ub-import-modal .modal__head .icon-btn,
html body.theme-dark #ub-import-modal .modal__head .edit-profile__nav {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:10833 */
html body.theme-dark .newbase-modal .modal__head .icon-btn:hover,
html body.theme-dark .newbase-modal .modal__head .edit-profile__nav:hover,
html body.theme-dark #ub-detail-modal .ub-detail__head-actions .icon-btn:hover,
html body.theme-dark #ub-import-modal .modal__head .icon-btn:hover,
html body.theme-dark #ub-import-modal .modal__head .edit-profile__nav:hover {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:10843 */
html body.theme-dark .newbase-modal .modal__body,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .modal__body,
html body.theme-dark #ub-import-modal .modal__body {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10857 */
html body.theme-dark .newbase-modal .inv-input,
html body.theme-dark .newbase-modal .inv-textarea,
html body.theme-dark #ub-detail-modal .ub-detail__textarea {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:10880 */
html body.theme-dark .newbase-modal .modal__foot,
html body.theme-dark #ub-detail-modal .ub-detail--floppy .ub-detail__foot,
html body.theme-dark #ub-import-modal .modal__foot {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:10929 */
html body.theme-dark .newbase-modal .btn--ghost {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:10937 */
html body.theme-dark .newbase-modal .btn--ghost:hover {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:10959 */
html body.theme-dark #dlg-modal .dlg-panel {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10972 */
html body.theme-dark #dlg-modal .dlg-head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:10984 */
html body.theme-dark #dlg-modal .dlg-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:10999 */
html body.theme-dark #dlg-modal .dlg-body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:11016 */
html body.theme-dark #dlg-modal .dlg-input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:11043 */
html body.theme-dark #dlg-modal .dlg-actions {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:11120 */
body.theme-dark .addw-modal .addw {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* ui_tweaks.css:11151 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-head {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:11158 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:11174 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-message {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:11180 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:11199 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:11206 */
html body.theme-dark #dlg-modal.dlg-modal--addw .dlg-actions .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:11254 */
html body.theme-dark #dlg-modal .dlg-again__label {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:12122 */
body.theme-dark .help-tile__ico--rose {
  color: #f2b8b5;
}

/* ui_tweaks.css:13191 */
body.theme-dark .accp-card {
  background-color: #1e1f22;
}

/* ui_tweaks.css:13245 */
body.theme-dark .accp-state[data-state="soon"] .accp-state__dot {
  background-color: rgba(253, 214, 99, 0.16);
}

/* ui_tweaks.css:13308 */
body.theme-dark .accp-btn--plain {
  background-color: #1e1f22;
}

/* ui_tweaks.css:13323 */
body.theme-dark .accp-btn--danger {
  background-color: #1e1f22;
}

/* ui_tweaks.css:13344 */
body.theme-dark .accp-kv__row {
  border-bottom-color: #444746;
}

/* ui_tweaks.css:13416 */
body.theme-dark .accp-input {
  background-color: #1e1f22;
}

/* ui_tweaks.css:13434 */
body.theme-dark .accp-input::placeholder {
  color: #9aa0a6;
}

/* ui_tweaks.css:13438 */
body.theme-dark .accp-callout {
  background-color: rgba(168, 199, 250, 0.14);
}

/* ui_tweaks.css:13450 */
body.theme-dark .accp-callout[data-tone="warn"] {
  background-color: rgba(253, 214, 99, 0.16);
}

/* ui_tweaks.css:13452 */
body.theme-dark .accp-callout[data-tone="warn"] .accp-callout__ico {
  color: #fdd663;
}

/* ui_tweaks.css:13568 */
html body.theme-dark .accp-page .inv-help {
  background-color: #2d2f34;
  border-color: #444746;
}

/* ui_tweaks.css:13819 */
html body.theme-dark .tg-security-footer,
html body.theme-dark .role-modal__footer,
html body.theme-dark .folder-modal__footer,
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer,
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:13945 */
html body.theme-dark #twofa-modal .tg-security-modal {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:13961 */
html body.theme-dark #twofa-modal .tg-security-head {
  background-color: #1e1f22 !important;
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:13976 */
html body.theme-dark #twofa-modal .tg-security-head__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:13989 */
html body.theme-dark #twofa-modal .tg-security-body {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:14002 */
html body.theme-dark #twofa-modal .tg-security-text {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:14025 */
html body.theme-dark #twofa-modal .tg-security-row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:14047 */
html body.theme-dark #twofa-modal .tg-security-row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:14053 */
html body.theme-dark #twofa-modal .tg-security-row__ico {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:14072 */
html body.theme-dark #twofa-modal .tg-security-row__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:14085 */
html body.theme-dark #twofa-modal .tg-security-row--danger {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:14089 */
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__ico {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:14095 */
html body.theme-dark #twofa-modal .tg-security-note {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:14108 */
html body.theme-dark #twofa-modal .tg-security-footer {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:14300 */
html body.theme-dark .tp-topbar__search:focus-within {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:14310 */
html body.theme-dark .tp-topbar__search:focus-within svg,
html body.theme-dark .tp-topbar__search:focus-within .tp-topbar__search-tune,
html body.theme-dark .tp-topbar__search:focus-within .tp-topbar__search-tune svg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:14315 */
html body.theme-dark .tp-topbar__search:focus-within input {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:14319 */
html body.theme-dark .tp-topbar__search:focus-within input::placeholder {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:14713 */
html body.theme-dark .view-proxy .px-check-menu__check {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:14737 */
html body.theme-dark .view-proxy .px-check-menu__check:checked::after {
  border-color: #444746 !important;
}

/* ui_tweaks.css:14755 */
html body.theme-dark .view-proxy .px-check-menu__check:indeterminate::after {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:14928 */
html body.theme-dark .view-proxy .px-gmail-bar .am-sel-action--danger:hover,
html body.theme-dark .view-proxy .px-gmail-bar #px-sel-delete:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:14933 */
html body.theme-dark .view-proxy .px-gmail-bar .am-sel-action--danger:hover svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-sel-delete:hover svg {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:15062 */
html body.theme-dark .view-proxy .px-check-menu__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:15099 */
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15128 */
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15155 */
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab:hover:not(.is-active) {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15178 */
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15602 */
html body.theme-dark .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__btn {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15618 */
html body.theme-dark .view-proxy .px-gmail-bar .picker-gmail-bar__action svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-refresh svg,
html body.theme-dark .view-proxy .px-gmail-bar #px-more-toggle svg,
html body.theme-dark .view-proxy .px-gmail-bar .picker-pagination__btn svg,
html body.theme-dark .view-proxy .px-check-menu__caret svg,
html body.theme-dark :is(.view-proxy, .view-am, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:15646 */
html body.theme-dark .view-proxy .px-tabs.px-tabs--row {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:17761 */
html body.theme-dark:not(.sidebar-collapsed) #sidebar .nav-item__badge,
html body.theme-dark:not(.sidebar-collapsed) .sidebar.sidebar--v2 .nav-item__badge {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18326 */
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18339 */
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh:hover {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18345 */
html body.theme-dark .view-am .am-gmail-bar #am-accounts-refresh svg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18499 */
html body.theme-dark .view-am .am-gmail-bar .picker-pagination__info {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18530 */
html body.theme-dark :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs--row .px-tab__count,
html body.theme-dark :is(.view-proxy, .view-am, .view-tasks, .view-moderation) .am-table-shell > .px-tabs.px-tabs--row .px-tab__count {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18810 */
html body.theme-dark .view-userbase--v2 .px-check-menu__pop {
  background-color: #1e1f22 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:18828 */
html body.theme-dark .view-userbase--v2 .px-check-menu__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:18880 */
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18921 */
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:18935 */
html body.theme-dark .view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__count {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:19128 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:19158 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:19231 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .am-table-shell > .px-tabs.px-tabs--row .px-tab__ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:19863 */
html body.theme-dark .view-am .am-gmail-bar .px-check-menu__check {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:19886 */
html body.theme-dark .view-am .am-gmail-bar .px-check-menu__check:checked::after {
  border-color: #444746 !important;
}

/* ui_tweaks.css:19898 */
html body.theme-dark .view-am .am-gmail-bar .px-check-menu__check:indeterminate::after {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:19908 */
html body.theme-dark .view-am .am-gmail-bar .px-check-menu__caret {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:19957 */
html body.theme-dark .view-am .am-gmail-bar .px-check-menu__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:20611 */
html body.theme-dark .view-am .am-table-foot.am-service-foot {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:20763 */
html body.theme-dark :is(.view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-foot.am-service-foot {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:21381 */
html body.theme-dark .view-tasks .am-gmail-bar .picker-gmail-bar__action:not(.is-active):not(.is-on):not(.is-open) svg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:22069 */
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar .picker-pagination__info {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:22507 */
body.theme-dark #session-import-modal .si-badge.is-ok {
  color: #a8dab5;
}

/* ui_tweaks.css:22508 */
body.theme-dark #session-import-modal .si-badge.is-dup {
  color: #fdd663;
}

/* ui_tweaks.css:22509 */
body.theme-dark #session-import-modal .si-badge.is-bad {
  color: #f2b8b5;
}

/* ui_tweaks.css:22736 */
html body.theme-dark #add-modal .addw {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:22789 */
html body.theme-dark #add-modal .addw__header {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:22829 */
html body.theme-dark #add-modal .addw__option:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:22834 */
html body.theme-dark #add-modal .addw__option::after {
  background-color: #35373c !important;
}

/* ui_tweaks.css:22871 */
html body.theme-dark #add-modal .addw__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:22879 */
html body.theme-dark #add-modal .addw__desc {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:22916 */
html body.theme-dark #add-modal .addw__btn--cancel {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:22951 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody tr[data-name].is-sel-acc .am-acct-cell__num {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:22966 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:checked,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .acc-table tbody input.row-check:indeterminate {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:23100 */
html body.theme-dark #edit-profile-form-modal .addw {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23119 */
html body.theme-dark #edit-profile-form-modal .addw__header {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23130 */
html body.theme-dark #edit-profile-form-modal .epf__sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:23176 */
html body.theme-dark #edit-profile-form-modal .edit-profile__form .form-row > label,
html body.theme-dark #edit-profile-form-modal .edit-profile__photo-replace .inv-field__label,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-toggle {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23190 */
html body.theme-dark #edit-profile-form-modal .edit-profile__form .muted,
html body.theme-dark #edit-profile-form-modal .edit-profile__bulk-hint,
html body.theme-dark #edit-profile-form-modal .edit-profile__file-status,
html body.theme-dark #edit-profile-form-modal .edit-profile__note-text {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:23203 */
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="text"],
html body.theme-dark #edit-profile-form-modal .edit-profile__form input[type="number"],
html body.theme-dark #edit-profile-form-modal .edit-profile__form select,
html body.theme-dark #edit-profile-form-modal .edit-profile__form textarea {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23248 */
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23285 */
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:23290 */
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice--tile.is-checked {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:23307 */
html body.theme-dark #edit-profile-form-modal .edit-profile__choice-row--source .edit-profile__choice-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23314 */
html body.theme-dark #edit-profile-form-modal .edit-profile__file-btn {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23326 */
html body.theme-dark #edit-profile-form-modal .edit-profile__file-btn:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:23331 */
html body.theme-dark #edit-profile-form-modal .edit-profile__note {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23338 */
html body.theme-dark #edit-profile-form-modal .edit-profile__note-ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:23344 */
html body.theme-dark #edit-profile-form-modal .edit-profile__note-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23381 */
html body.theme-dark #edit-profile-form-modal .addw__btn--cancel {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:23434 */
html body.theme-dark #phone-auth-modal .addw {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23453 */
html body.theme-dark #phone-auth-modal .addw__header {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23464 */
html body.theme-dark #phone-auth-modal .pa__sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:23505 */
html body.theme-dark #phone-auth-modal .pa-form .form-row > label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23513 */
html body.theme-dark #phone-auth-modal .pa-hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:23524 */
html body.theme-dark #phone-auth-modal .pa-form input[type="text"],
html body.theme-dark #phone-auth-modal .pa-form input[type="tel"],
html body.theme-dark #phone-auth-modal .pa-form input[type="password"] {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23546 */
html body.theme-dark #phone-auth-modal .pa-error {
  background-color: rgba(242, 184, 181, 0.16) !important;
  color: #f2b8b5 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:23566 */
html body.theme-dark #phone-auth-modal .pa-done__ico {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:23579 */
html body.theme-dark #phone-auth-modal .pa-done__text {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:23616 */
html body.theme-dark #phone-auth-modal .addw__btn--cancel {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:23909 */
body.theme-dark .tm-dock__stop:hover {
  color: #f2b8b5;
}

/* ui_tweaks.css:23925 */
body.theme-dark .tm-dock__final-ico--paused {
  color: #fdd663;
}

/* ui_tweaks.css:23926 */
body.theme-dark .tm-dock__final-ico--done {
  color: #a8dab5;
}

/* ui_tweaks.css:23927 */
body.theme-dark .tm-dock__final-ico--warn {
  color: #fdd663;
}

/* ui_tweaks.css:23928 */
body.theme-dark .tm-dock__final-ico--error {
  color: #f2b8b5;
}

/* ui_tweaks.css:24743 */
html body.theme-dark #edit-privacy-modal .modal__panel--privacy-list,
html body.theme-dark #edit-privacy-form-modal .modal__panel--privacy-form,
html body.theme-dark #twofa-modal .tg-security-modal,
html body.theme-dark #cloud-password-change-modal .modal__panel--password,
html body.theme-dark #auto-delete-modal .modal__panel--auto-delete,
html body.theme-dark #security-confirm-modal .tg-security-modal {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24794 */
html body.theme-dark #edit-privacy-modal .privacy-list__title,
html body.theme-dark #edit-privacy-form-modal .privacy-form__title,
html body.theme-dark #cloud-password-change-modal .modal__title,
html body.theme-dark #twofa-modal .tg-security-head__title,
html body.theme-dark #security-confirm-modal .tg-security-head__title,
html body.theme-dark #auto-delete-modal .auto-delete-modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24821 */
html body.theme-dark #edit-privacy-modal .privacy-list__items--security {
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:24827 */
html body.theme-dark #edit-privacy-modal .privacy-list__row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24845 */
html body.theme-dark #edit-privacy-modal .privacy-list__row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:24854 */
html body.theme-dark #edit-privacy-modal .privacy-list__ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:24870 */
html body.theme-dark #edit-privacy-modal .privacy-list__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24881 */
html body.theme-dark #edit-privacy-modal .privacy-list__value {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:24906 */
html body.theme-dark #edit-privacy-form-modal .privacy-form__section-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24919 */
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:24938 */
html body.theme-dark #edit-privacy-form-modal .privacy-form__radio:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:24942 */
html body.theme-dark #edit-privacy-form-modal .privacy-form__note {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25010 */
html body.theme-dark #twofa-modal .tg-security-text {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25042 */
html body.theme-dark #twofa-modal .tg-security-row__ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:25071 */
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__ico,
html body.theme-dark #twofa-modal .tg-security-row--danger .tg-security-row__label {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:25075 */
html body.theme-dark #twofa-modal .tg-security-note {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25107 */
html body.theme-dark #cloud-password-change-modal .inv-field__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:25114 */
html body.theme-dark #cloud-password-change-modal .inv-input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:25135 */
html body.theme-dark #cloud-password-change-modal .modal__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25188 */
html body.theme-dark #auto-delete-modal .auto-delete-modal__note {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25211 */
html body.theme-dark #security-confirm-modal .tg-security-confirm-msg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25286 */
html body.theme-dark #edit-privacy-form-modal .privacy-form__footer .btn--ghost,
html body.theme-dark #twofa-modal .tg-security-footer .btn--ghost,
html body.theme-dark #cloud-password-change-modal .modal__foot .btn--ghost,
html body.theme-dark #auto-delete-modal .auto-delete-modal__foot .btn--ghost,
html body.theme-dark #security-confirm-modal .security-confirm__foot .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:25842 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__link-action,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__copy {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25864 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__link-action:hover:not([disabled]),
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health:hover,
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__copy:hover {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:25879 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--ok {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:25880 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--ok:hover {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:25881 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--error {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:25882 */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__pass-cell .px-flat__actions .px-flat__health--error:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:25914 */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__panel {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:25931 */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:25950 */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:25959 */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .bind-proxy__select {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:25993 */
html body.theme-dark :is(#bind-proxy-modal, #bind-proxy-preview-modal) .privacy-form__footer .privacy-form__action:not(.privacy-form__action--primary) {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:26199 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__panel, #ub-detail-modal .ub-detail-modal__panel ) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26250 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__title, #ub-detail-modal .ub-detail-modal__title, #ub-detail-modal .ub-detail__name ) {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26267 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__close, #ub-detail-modal .ub-detail-modal__close ) {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:26289 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__close, #ub-detail-modal .ub-detail-modal__close ):hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26314 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__body, #ub-detail-modal .ub-detail-modal__body ) {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26335 */
html body.theme-dark .newbase-modal :is(.px-input, .px-textarea),
html body.theme-dark #ub-detail-modal :is(.ub-detail__search-wrap, .ub-detail__textarea) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:26370 */
html body.theme-dark .newbase-modal .px-dropzone {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26431 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__foot, #ub-detail-modal .ub-detail-modal__foot ) .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:26444 */
html body.theme-dark :is( .newbase-modal .ub-create-modal__foot, #ub-detail-modal .ub-detail-modal__foot ) .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:26682 */
html body.theme-dark :is(#px-add-modal .px-add-modal__panel, .newbase-modal .ub-create-modal__panel, #am-proxy-modal .amproxy__panel) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26724 */
html body.theme-dark :is(#px-add-modal .px-add-modal__title, .newbase-modal .ub-create-modal__title, #am-proxy-modal .amproxy__title) {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26736 */
html body.theme-dark :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close) {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:26752 */
html body.theme-dark :is(#px-add-modal .px-add-modal__head .px-add-modal__close, .newbase-modal .ub-create-modal__head .ub-create-modal__close, #am-proxy-modal .amproxy__head .amproxy__close):hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26765 */
html body.theme-dark :is(#px-add-modal .px-add-modal__body, .newbase-modal .ub-create-modal__body, #am-proxy-modal .amproxy__body) {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26782 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26790 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:26797 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__meta b {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26824 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-select, .px-textarea) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:26856 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) :is(.px-input, .px-textarea)::placeholder {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:26899 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:26920 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act:hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:26931 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-ok {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:26935 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__act.is-error {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:26941 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="ok"] {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:26945 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__hint[data-tone="error"] {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:26955 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:26973 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:hover,
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-field__acts .inv-help:focus-visible {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27010 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27032 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:27047 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:27054 */
html body.theme-dark :is(#px-add-modal, .newbase-modal, #am-proxy-modal) .px-dropzone__txt b {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27092 */
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:27099 */
html body.theme-dark :is(#px-add-modal .px-add-modal__foot, .newbase-modal .ub-create-modal__foot, #am-proxy-modal .amproxy__foot) .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:27178 */
html body.theme-dark #view-tasks.view-tasks .am-gmail-bar #tm-more-toggle svg {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:27577 */
html body.theme-dark :is(#px-filter-pop, #tm-kind-pop) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27644 */
html body.theme-dark :is(#px-filter-pop, #tm-kind-pop) .picker-chip--clear:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:27678 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-filter-pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27704 */
html body.theme-dark #am-filter-dropdown.dropdown {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27727 */
html body.theme-dark #am-filter-dropdown .dropdown__item:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:27744 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop.px-check-menu__pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27764 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27788 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:hover,
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-gmail-bar #am-check-menu-pop .px-check-menu__item:focus {
  background-color: #35373c !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27812 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop.picker-range-pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27856 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:27864 */
html body.theme-dark :is(#view-accounts, .am-embed).view-am #am-range-pop .picker-range-pop__footer .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:27890 */
html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27910 */
html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27932 */
html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:hover,
html body.theme-dark .am-gmail-bar .am-check-menu > .px-check-menu__pop .px-check-menu__item:focus {
  background-color: #35373c !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27955 */
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:27998 */
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:28006 */
html body.theme-dark .am-gmail-bar .am-check-menu .picker-range-pop__footer .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:28110 */
html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop),
html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28183 */
html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #sbl-filter-pop, #ubs-filter-pop) .picker-chip--clear:hover,
html body.theme-dark :is(#ub2-filter-pop, #ubd-filter-pop, #pbl-filter-pop, #pbd-filter-pop, #ccc-filter-pop) .picker-chip--clear:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:28199 */
html body.theme-dark #px-filter-dropdown.dropdown,
html body.theme-dark #sbl-filter-dropdown.dropdown,
html body.theme-dark #pbl-filter-dropdown.dropdown,
html body.theme-dark #ubs-filter-dropdown.dropdown,
html body.theme-dark #pbd-filter-dropdown.dropdown,
html body.theme-dark #ccc-filter-dropdown.dropdown,
html body.theme-dark #ub2-filter-dropdown.dropdown {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28225 */
html body.theme-dark :is(#px-filter-dropdown, #ub2-filter-dropdown, #sbl-filter-dropdown, #ubs-filter-dropdown) .dropdown__item:hover,
html body.theme-dark :is(#px-filter-dropdown, #ub2-filter-dropdown, #pbl-filter-dropdown, #pbd-filter-dropdown) .dropdown__item:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:28485 */
html body.theme-dark #inv-run-modal .inv-run-foot .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:28558 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28580 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip:hover {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28592 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active {
  background-color: #004a77 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28599 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip.is-active:hover {
  background-color: #004a77 !important;
}

/* ui_tweaks.css:28643 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:28653 */
html body.theme-dark .modal__panel--picker .picker-filter-row__chips .picker-chip--clear:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:28671 */
html body.theme-dark #inv-pick-dropdown.dropdown {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28695 */
html body.theme-dark #inv-pick-dropdown .dropdown__item:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:28811 */
html body.theme-dark #pick-bind-modal .addw {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28842 */
html body.theme-dark #pick-bind-modal .addw__header {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28854 */
html body.theme-dark #pick-bind-modal .pb__sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28878 */
html body.theme-dark #pick-bind-modal .pick-bind__search-ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28888 */
html body.theme-dark #pick-bind-modal .pick-bind__search input {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:28905 */
html body.theme-dark #pick-bind-modal .pick-bind__search input::placeholder {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28909 */
html body.theme-dark #pick-bind-modal .pick-bind__search input:focus {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:28926 */
html body.theme-dark #pick-bind-modal .pick-bind__filter {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:28934 */
html body.theme-dark #pick-bind-modal .pick-bind__filter select {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:28965 */
html body.theme-dark #pick-bind-modal .pick-bind__country-toggle {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:28996 */
html body.theme-dark #pick-bind-modal .pick-bind__country-chevron {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29053 */
html body.theme-dark #pick-bind-modal .pick-bind__chip {
  background-color: #1e1f22 !important;
  color: #c4c7c5 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:29072 */
html body.theme-dark #pick-bind-modal .pick-bind__chip:hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:29078 */
html body.theme-dark #pick-bind-modal .pick-bind__chip.is-active {
  background-color: #004a77 !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29084 */
html body.theme-dark #pick-bind-modal .pick-bind__count {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29115 */
html body.theme-dark #pick-bind-modal .pick-bind__row,
html body.theme-dark #pick-bind-modal .pick-bind__row--account {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29135 */
html body.theme-dark #pick-bind-modal .pick-bind__row:hover:not([disabled]) {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:29149 */
html body.theme-dark #pick-bind-modal .pick-bind__row.is-current {
  background-color: rgba(168, 199, 250, 0.14) !important;
}

/* ui_tweaks.css:29154 */
html body.theme-dark #pick-bind-modal .pick-bind__row::after {
  background-color: #35373c !important;
}

/* ui_tweaks.css:29173 */
html body.theme-dark #pick-bind-modal .pxpick-row:hover > .pick-bind__row:not([disabled]):not(.is-current) {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:29182 */
html body.theme-dark #pick-bind-modal .pick-bind__row-ico {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29199 */
html body.theme-dark #pick-bind-modal .pick-bind__row-ava {
  background-color: rgba(168, 199, 250, 0.14) !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29216 */
html body.theme-dark #pick-bind-modal .pick-bind__row-title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29223 */
html body.theme-dark #pick-bind-modal .pick-bind__row-sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29232 */
html body.theme-dark #pick-bind-modal .pick-bind__row-tag {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29242 */
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--ok {
  background-color: rgba(168, 218, 181, 0.16) !important;
  color: #a8dab5 !important;
}

/* ui_tweaks.css:29247 */
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--bound {
  background-color: #004a77 !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29252 */
html body.theme-dark #pick-bind-modal .pick-bind__row-tag--warn {
  background-color: rgba(253, 214, 99, 0.16) !important;
  color: #fdd663 !important;
}

/* ui_tweaks.css:29258 */
html body.theme-dark #pick-bind-modal .pick-bind__empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29303 */
html body.theme-dark #pick-bind-modal .addw__btn--cancel {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29311 */
html body.theme-dark #pick-bind-modal .addw__btn--danger-text {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:29404 */
html body.theme-dark #picker-pagesize-pop.am-filter-pop {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29547 */
html body.theme-dark #inv-base-modal .inv-base-modal__panel {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29598 */
html body.theme-dark #inv-base-modal .modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29609 */
html body.theme-dark #inv-base-modal .modal__head [data-close] {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29627 */
html body.theme-dark #inv-base-modal .modal__head [data-close]:hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29649 */
html body.theme-dark #inv-base-modal .modal__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29677 */
html body.theme-dark #inv-base-modal .inv-base-search__ico {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29692 */
html body.theme-dark #inv-base-modal .inv-base-search input {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29710 */
html body.theme-dark #inv-base-modal .inv-base-search input::placeholder {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29714 */
html body.theme-dark #inv-base-modal .inv-base-search input:hover {
  background-color: #35373c !important;
}

/* ui_tweaks.css:29720 */
html body.theme-dark #inv-base-modal .inv-base-search input:focus,
html body.theme-dark #inv-base-modal .inv-base-search input:focus-visible {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:29749 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29769 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:29778 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked,
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-active {
  background-color: rgba(168, 199, 250, 0.14) !important;
}

/* ui_tweaks.css:29783 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked:hover {
  background-color: #004a77 !important;
}

/* ui_tweaks.css:29794 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row::after {
  background-color: #35373c !important;
}

/* ui_tweaks.css:29918 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__name {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29925 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29934 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row__count {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29948 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-row.is-picked .inv-base-row__count {
  background-color: #004a77 !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29963 */
html body.theme-dark #inv-base-modal .inv-base-empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:29977 */
html body.theme-dark #inv-base-modal .inv-base-empty__art {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:29985 */
html body.theme-dark #inv-base-modal .inv-base-empty h4 {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:29994 */
html body.theme-dark #inv-base-modal .inv-base-empty p {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:30018 */
html body.theme-dark #inv-base-modal .inv-base-foot__count {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:30055 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:30061 */
html body.theme-dark :is(#inv-base-modal, #prs-base-modal) .inv-base-foot .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:30676 */
html body.theme-dark :is(#view-userbase.view-userbase.view-userbase--v2 .ubd-gmail-bar, #view-creator-chats .ccc-gmail-bar) .ub2-gmail-search {
  border-color: #444746 !important;
}

/* ui_tweaks.css:30836 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-seen--online {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:30896 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--ok {
  background-color: rgba(168, 218, 181, 0.16) !important;
  color: #a8dab5 !important;
}

/* ui_tweaks.css:30899 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--privacy {
  background-color: rgba(168, 199, 250, 0.14) !important;
  color: #a8c7fa !important;
}

/* ui_tweaks.css:30902 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--skip {
  background-color: rgba(253, 214, 99, 0.16) !important;
  color: #fdd663 !important;
}

/* ui_tweaks.css:30905 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--error {
  background-color: rgba(242, 184, 181, 0.16) !important;
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:30908 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ubd-status--none {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:31035 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--free {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:31043 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .ub2-src-join--request {
  color: #fdd663 !important;
}

/* ui_tweaks.css:31572 */
html body.theme-dark .srch-page .cln-io,
html body.theme-dark .srch-page .prs-advanced,
html body.theme-dark .srch-page .prs-cta {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:31835 */
html body.theme-dark .srch-page .srch-plan-note--warn {
  color: #fdd663 !important;
}

/* ui_tweaks.css:31844 */
html body.theme-dark .srch-page .srch-plan-note--ok {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:31848 */
html body.theme-dark .srch-page .srch-plan-note--error {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:31854 */
html body.theme-dark .srch-page .srch-input,
html body.theme-dark .srch-page .srch-card {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:31917 */
html body.theme-dark .srch-page .srch-input__value {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:31947 */
html body.theme-dark .srch-page .srch-input__hint {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:31972 */
html body.theme-dark .srch-page .srch-input__types {
  border-top-color: #444746 !important;
}

/* ui_tweaks.css:32032 */
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__btn {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32062 */
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__cnt {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:32093 */
html body.theme-dark .srch-page .srch-input__field .inv-target-input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:32115 */
html body.theme-dark .srch-page .srch-input__field .inv-target-input-icon {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:32193 */
html body.theme-dark .srch-page .srch-type {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32330 */
html body.theme-dark .srch-page .srch-depth__opt {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32364 */
html body.theme-dark .srch-page .srch-depth__opt.is-active {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:32429 */
html body.theme-dark .srch-page .prs-stepper {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32482 */
html body.theme-dark .srch-page .cln-range .inv-input--sm {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32526 */
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm),
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm) {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32549 */
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm)::placeholder,
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm)::placeholder {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:32583 */
html body.theme-dark .srch-page .srch-key-btn {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32618 */
html body.theme-dark .srch-page .srch-key-btn:disabled {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32636 */
html body.theme-dark .srch-page .cln-list-btn {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32671 */
html body.theme-dark .srch-page .cln-list-btn b {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:32702 */
html body.theme-dark .srch-page .cln-list-btn:disabled {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:32761 */
html body.theme-dark .srch-page .tdc-drop.is-drag {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:32919 */
html body.theme-dark #inv-list-modal .modal__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:32939 */
html body.theme-dark :is(#prs-base-modal, #gc-base-modal) .prs-base-empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:32953 */
html body.theme-dark :is(#prs-base-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #ar-editor, #cc-material-modal, #pc-numbers-modal) .prs-base-field__label {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:32993 */
html body.theme-dark .srch-page .srch-skel__card {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:33097 */
html body.theme-dark .srch-page .srch-skel__row--types {
  border-top-color: #444746 !important;
}

/* ui_tweaks.css:33396 */
html body.theme-dark .am-cols-pop .am-cols-pop__item.is-dragging {
  background-color: #1e1f22;
}

/* ui_tweaks.css:34606 */
html body.theme-dark #px-add-modal .px-add-modes {
  border-bottom-color: #444746 !important;
}

/* ui_tweaks.css:34622 */
html body.theme-dark #px-add-modal .px-add-modes .px-tab {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34792 */
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip {
  background-color: #1e1f22 !important;
  color: #c4c7c5 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:34816 */
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip.is-on {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:34828 */
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-field__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34837 */
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-field__hint code,
html body.theme-dark #px-add-modal .px-add-empty code {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34848 */
html body.theme-dark #px-add-modal .px-add-card {
  background-color: #1e1f22 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:34866 */
html body.theme-dark #px-add-modal .px-add-tab {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34884 */
html body.theme-dark #px-add-modal .px-add-tab span {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:34901 */
html body.theme-dark #px-add-modal .px-add-tab.is-on {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:34906 */
html body.theme-dark #px-add-modal .px-add-tab.is-on span {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:34926 */
html body.theme-dark #px-add-modal .px-add-strip {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:34952 */
html body.theme-dark #px-add-modal .px-add-row {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:34964 */
html body.theme-dark #px-add-modal .px-add-row__proto {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34981 */
html body.theme-dark #px-add-modal .px-add-row__user {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:34990 */
html body.theme-dark #px-add-modal .px-add-row__ln {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:34999 */
html body.theme-dark #px-add-modal .px-add-row__tag {
  color: #fdd663 !important;
}

/* ui_tweaks.css:35008 */
html body.theme-dark #px-add-modal .px-add-row.is-bad .px-add-row__tag {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:35040 */
html body.theme-dark #px-add-modal .px-add-more {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35047 */
html body.theme-dark #px-add-modal .px-add-empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35128 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--found {
  color: #a8dab5 !important;
}

/* ui_tweaks.css:35136 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--bad {
  color: #fdd663 !important;
}

/* ui_tweaks.css:35144 */
html body.theme-dark #view-userbase.view-userbase.view-userbase--v2 .pbd-status--error {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:35201 */
html body.theme-dark #am-proxy-modal .amproxy__note {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35286 */
html body.theme-dark #pf-folder-modal .pf-frow:hover {
  background-color: #2d2f34 !important;
}

/* ui_tweaks.css:35290 */
html body.theme-dark #pf-folder-modal .pf-frow.is-on {
  background-color: #004a77 !important;
}

/* ui_tweaks.css:35294 */
html body.theme-dark #pf-folder-modal .pf-frow__pick {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:35317 */
html body.theme-dark #pf-folder-modal .pf-frow__mark {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:35360 */
html body.theme-dark #pf-folder-modal .pf-frow__sub {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35371 */
html body.theme-dark #pf-folder-modal .pf-frow__sub.is-warn {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:35375 */
html body.theme-dark #pf-folder-modal .pf-frow__act {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35400 */
html body.theme-dark #pf-folder-modal .pf-frow__act:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:35405 */
html body.theme-dark #pf-folder-modal .pf-frow__act--danger:hover {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:35415 */
html body.theme-dark #pf-folder-modal .pf-frows__empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35437 */
html body.theme-dark #pf-mat-modal .pf-mat__list-head {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35448 */
html body.theme-dark #pf-mat-modal .pf-mat__list-count {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:35454 */
html body.theme-dark #pf-mat-modal .pf-mat__list textarea {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:35469 */
html body.theme-dark #pf-mat-modal .pf-mat__list textarea::placeholder {
  color: #9aa0a6 !important;
}

/* ui_tweaks.css:35505 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:35526 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload:hover,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all:hover {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:35533 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__upload svg,
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all svg {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:35539 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__select-all.is-active {
  background-color: #004a77 !important;
  color: #a8c7fa !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:35545 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__count {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35551 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__icon-btn {
  color: #f2b8b5 !important;
}

/* ui_tweaks.css:35581 */
html body.theme-dark :is(#pf-media-modal, #media-modal) :is(.pf-media__tile, .media-pick__tile) {
  background-color: #2d2f34 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:35601 */
html body.theme-dark :is(#pf-media-modal, #media-modal) :is(.pf-media__tile-audio, .media-pick__tile-ico) {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:35605 */
html body.theme-dark :is(#pf-media-modal, #media-modal) .pf-media__empty {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:35943 */
html body.theme-dark #schedule-modal .schedule-modal__panel {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:35978 */
html body.theme-dark #schedule-modal .schedule-modal__title {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:35990 */
html body.theme-dark #schedule-modal .schedule-modal__close {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:36005 */
html body.theme-dark #schedule-modal .schedule-modal__close:hover {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:36025 */
html body.theme-dark #schedule-modal .schedule-modal__body {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:36040 */
html body.theme-dark #schedule-modal .schedule-modal__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:36065 */
html body.theme-dark #schedule-modal .schedule-field .px-field__label {
  color: #e3e3e3 !important;
}

/* ui_tweaks.css:36073 */
html body.theme-dark #schedule-modal .schedule-field .px-input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:36097 */
html body.theme-dark #schedule-modal .schedule-field__hint {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:36118 */
html body.theme-dark #schedule-modal .schedule-range__sep,
html body.theme-dark #schedule-modal .schedule-range__suffix {
  color: #c4c7c5 !important;
}

/* ui_tweaks.css:36143 */
html body.theme-dark #schedule-modal .schedule-compose {
  background-color: #2d2f34 !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:36155 */
html body.theme-dark #schedule-modal .schedule-summary {
  background-color: rgba(168, 199, 250, 0.14) !important;
  color: #e3e3e3 !important;
  border-color: #444746 !important;
}

/* ui_tweaks.css:36197 */
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--ghost {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:36203 */
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* ui_tweaks.css:36242 */
html body.theme-dark .srch-page .cc-made__main {
  background-color: #1e1f22 !important;
}

/* ui_tweaks.css:36827 */
body.theme-dark .auth-gate {
  background-color: #2d2f34;
}

/* ui_tweaks.css:36840 */
body.theme-dark .auth-gate__card {
  background-color: #1e1f22;
}

/* ui_tweaks.css:36857 */
body.theme-dark .auth-gate__brand-text {
  color: #e3e3e3;
}

/* ui_tweaks.css:36864 */
body.theme-dark .auth-gate__title {
  color: #e3e3e3;
}

/* ui_tweaks.css:36871 */
body.theme-dark .auth-gate__sub {
  color: #c4c7c5;
}

/* ui_tweaks.css:36880 */
body.theme-dark .auth-gate__label {
  color: #c4c7c5;
}

/* ui_tweaks.css:36881 */
body.theme-dark .auth-gate__input {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* ui_tweaks.css:36898 */
body.theme-dark .auth-gate__input::placeholder {
  color: #9aa0a6;
}

/* ui_tweaks.css:36902 */
body.theme-dark .auth-gate__error {
  color: #f2b8b5;
}

/* ui_tweaks.css:36926 */
body.theme-dark .auth-gate__btn[disabled] {
  background-color: #35373c;
}

/* ui_tweaks.css:36928 */
body.theme-dark .auth-gate__note {
  color: #9aa0a6;
}

/* ui_tweaks.css:36940 */
body.theme-dark .auth-gate__link {
  color: #a8c7fa;
}

/* ui_tweaks.css:36962 */
body.theme-dark .auth-gate__checking {
  background-color: #1e1f22;
  color: #9aa0a6;
}

/* components/launch-window.css:27 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__panel {
  background-color: #1e1f22 !important;
}

/* components/launch-window.css:37 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__head {
  background-color: #1e1f22 !important;
}

/* components/launch-window.css:43 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__title {
  color: #e3e3e3 !important;
}

/* components/launch-window.css:55 */
html body.theme-dark #msge-modal .addw__header [data-close],
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__head [data-close] {
  color: #c4c7c5 !important;
}

/* components/launch-window.css:68 */
html body.theme-dark #msge-modal .addw__header [data-close]:hover,
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__head [data-close]:hover {
  background-color: #2d2f34 !important;
}

/* components/launch-window.css:72 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__body {
  background-color: #1e1f22 !important;
}

/* components/launch-window.css:79 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .inv-textarea {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* components/launch-window.css:94 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .inv-textarea::placeholder {
  color: #9aa0a6 !important;
}

/* components/launch-window.css:104 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .inv-list-meta {
  color: #c4c7c5 !important;
}

/* components/launch-window.css:112 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__foot {
  background-color: #1e1f22 !important;
}

/* components/launch-window.css:129 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__foot .btn--ghost {
  color: #a8c7fa !important;
}

/* components/launch-window.css:136 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__foot .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* components/launch-window.css:141 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #msge-modal, #bs-targets-modal, #bs-reactions-modal, #sub-targets-modal, #sub-keep-modal, #pf-folder-modal, #pf-mat-modal, #pf-media-modal, #ar-editor, #cc-material-modal, #gc-base-modal, #media-modal, #task-edit-modal, #inv-list-modal, #pc-numbers-modal) .modal__foot .btn--ghost svg {
  color: #a8c7fa !important;
}

/* components/list-window.css:32 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__lead {
  color: #c4c7c5 !important;
}

/* components/list-window.css:42 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__card {
  background-color: #1e1f22 !important;
  border-color: #444746 !important;
}

/* components/list-window.css:57 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bar {
  border-bottom-color: #444746 !important;
}

/* components/list-window.css:67 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__count {
  color: #c4c7c5 !important;
}

/* components/list-window.css:82 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search {
  background-color: #2d2f34 !important;
  color: #c4c7c5 !important;
}

/* components/list-window.css:97 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search:focus-within {
  background-color: #1e1f22 !important;
}

/* components/list-window.css:102 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search svg {
  color: #c4c7c5 !important;
}

/* components/list-window.css:111 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input {
  color: #e3e3e3 !important;
}

/* components/list-window.css:124 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__search input::placeholder {
  color: #9aa0a6 !important;
}

/* components/list-window.css:128 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn {
  color: #c4c7c5 !important;
}

/* components/list-window.css:144 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn:hover {
  background-color: #2d2f34 !important;
}

/* components/list-window.css:148 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__icon-btn.is-open {
  background-color: #004a77 !important;
  color: #a8c7fa !important;
}

/* components/list-window.css:171 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row:hover {
  background-color: #2d2f34 !important;
}

/* components/list-window.css:175 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__num {
  color: #9aa0a6 !important;
}

/* components/list-window.css:185 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__text {
  color: #e3e3e3 !important;
}

/* components/list-window.css:197 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__edit {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* components/list-window.css:211 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__tag {
  background-color: rgba(253, 214, 99, 0.16) !important;
  color: #fdd663 !important;
}

/* components/list-window.css:223 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm {
  color: #9aa0a6 !important;
}

/* components/list-window.css:247 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__rm:hover {
  background-color: rgba(242, 184, 181, 0.16) !important;
  color: #f2b8b5 !important;
}

/* components/list-window.css:253 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__row.is-dupe .srch-kw__text {
  color: #9aa0a6 !important;
}

/* components/list-window.css:259 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty {
  color: #9aa0a6 !important;
}

/* components/list-window.css:269 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-title {
  color: #e3e3e3 !important;
}

/* components/list-window.css:277 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__empty-sub {
  color: #c4c7c5 !important;
}

/* components/list-window.css:293 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample {
  background-color: #1e1f22 !important;
  color: #a8c7fa !important;
  border-color: #444746 !important;
}

/* components/list-window.css:307 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__sample:hover {
  background-color: #004a77 !important;
  border-color: #444746 !important;
}

/* components/list-window.css:312 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__nores {
  color: #9aa0a6 !important;
}

/* components/list-window.css:344 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__bulk-note {
  color: #c4c7c5 !important;
}

/* components/list-window.css:368 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* components/list-window.css:384 */
html body.theme-dark :is(#srch-keywords-modal, #prs-base-modal, #inv-users-modal, #pc-numbers-modal, #bs-targets-modal, #cc-material-modal.is-list) .srch-kw__input::placeholder {
  color: #9aa0a6 !important;
}

/* components/list-window.css:663 */
html body.theme-dark #srch-kw-menu .srch-kw__menu-item svg,
html body.theme-dark #prs-src-menu .srch-kw__menu-item svg,
html body.theme-dark #invu-menu .srch-kw__menu-item svg,
html body.theme-dark #cc-list-menu .srch-kw__menu-item svg,
html body.theme-dark #pcn-menu .srch-kw__menu-item svg,
html body.theme-dark #media-menu .srch-kw__menu-item svg,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item svg {
  color: #c4c7c5 !important;
}

/* components/list-window.css:727 */
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger,
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger,
html body.theme-dark #pcn-menu .srch-kw__menu-item--danger,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #pcn-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #media-menu .srch-kw__menu-item--danger,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger,
html body.theme-dark #media-menu .srch-kw__menu-item--danger svg,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger svg {
  color: #f2b8b5 !important;
}

/* components/list-window.css:743 */
html body.theme-dark #srch-kw-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #prs-src-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #invu-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #cc-list-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #pcn-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #media-menu .srch-kw__menu-item--danger:hover,
html body.theme-dark #bs-tg-menu .srch-kw__menu-item--danger:hover {
  background-color: rgba(242, 184, 181, 0.16) !important;
}

/* screens/accounts.css:113 */
body.theme-dark #am-proxy-modal .amproxy__clear {
  color: #c4c7c5;
}

/* screens/accounts.css:139 */
body.theme-dark #am-proxy-modal .amproxy__chev {
  color: #9aa0a6;
}

/* screens/accounts.css:164 */
body.theme-dark #am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__chev,
body.theme-dark #am-proxy-modal .amproxy__combo:has(.px-select.is-pick-open) .amproxy__clear {
  color: #a8c7fa;
}

/* screens/accounts-roles.css:28 */
body.theme-dark #am-role-modal .amrole__panel {
  background-color: #1e1f22;
  color: #e3e3e3;
}

/* screens/accounts-roles.css:66 */
body.theme-dark #am-role-modal .amrole__title {
  color: #e3e3e3;
}

/* screens/accounts-roles.css:76 */
body.theme-dark #am-role-modal .amrole__head .amrole__close {
  color: #c4c7c5;
}

/* screens/accounts-roles.css:90 */
body.theme-dark #am-role-modal .amrole__head .amrole__close:hover {
  background-color: #2d2f34;
  color: #e3e3e3;
}

/* screens/accounts-roles.css:100 */
body.theme-dark #am-role-modal .amrole__body {
  color: #e3e3e3;
}

/* screens/accounts-roles.css:142 */
body.theme-dark #am-role-modal .amrole__foot .btn--ghost {
  color: #a8c7fa !important;
}

/* screens/accounts-roles.css:147 */
body.theme-dark #am-role-modal .amrole__foot .btn--ghost:hover {
  color: #a8c7fa !important;
}

/* screens/accounts-roles.css:181 */
body.theme-dark .amrole__field {
  background-color: #1e1f22;
  border-color: #444746;
}

/* screens/accounts-roles.css:250 */
body.theme-dark .amrole__input {
  color: #e3e3e3;
}

/* screens/accounts-roles.css:262 */
body.theme-dark .amrole__input::placeholder {
  color: #9aa0a6;
}

/* screens/accounts-roles.css:289 */
body.theme-dark .amrole__chev {
  color: #9aa0a6;
}

/* screens/accounts-roles.css:326 */
body.theme-dark .amrole__clear {
  color: #c4c7c5;
}

/* screens/accounts-roles.css:355 */
body.theme-dark .amrole__field:has(.amrole__chev.is-open) .amrole__chev,
body.theme-dark .amrole__field:has(.amrole__chev.is-open) .amrole__clear {
  color: #a8c7fa;
}

/* screens/boost.css:27 */
html body.theme-dark #bs-reactions-modal .bs-emoji-cell {
  background-color: #2d2f34 !important;
}

/* screens/boost.css:43 */
html body.theme-dark #bs-reactions-modal .bs-emoji-cell:hover {
  background-color: #35373c !important;
}

/* screens/boost.css:47 */
html body.theme-dark #bs-reactions-modal .bs-emoji-cell.is-on {
  background-color: #004a77 !important;
}

/* screens/subscriptions.css:10 */
html body.theme-dark .sub-targets-warn {
  color: #f2b8b5 !important;
}

/* screens/group-broadcaster.css:23 */
html body.theme-dark #gc-base-modal .prs-base-search {
  background-color: #1e1f22 !important;
  color: #e3e3e3 !important;
}

/* screens/group-broadcaster.css:69 */
html body.theme-dark #gc-base-modal .prs-base-row {
  color: #e3e3e3 !important;
}

/* screens/group-broadcaster.css:85 */
html body.theme-dark #gc-base-modal .prs-base-row:hover {
  background-color: #2d2f34 !important;
}

/* screens/group-broadcaster.css:89 */
html body.theme-dark #gc-base-modal .prs-base-row.is-current {
  background-color: #004a77 !important;
}

/* screens/group-broadcaster.css:115 */
html body.theme-dark #gc-base-modal .prs-base-row__sub {
  color: #c4c7c5 !important;
}

/* screens/group-broadcaster.css:121 */
html body.theme-dark #gc-base-modal .prs-base-row__cnt {
  color: #c4c7c5 !important;
}

/* moderation.css:251 */
body.theme-dark .view-moderation .md-badge--ok {
  color: #a8dab5;
}

/* moderation.css:255 */
body.theme-dark .view-moderation .md-badge--warn {
  color: #fdd663;
}

/* moderation.css:259 */
body.theme-dark .view-moderation .md-badge--error {
  color: #f2b8b5;
}

/* moderation.css:430 */
body.theme-dark .md-page .md-bit__value {
  color: #9aa0a6;
}

/* moderation.css:673 */
body.theme-dark .md-page .md-mod__ico[data-tone="red"] {
  color: #f2b8b5;
}

/* moderation.css:674 */
body.theme-dark .md-page .md-mod__ico[data-tone="orange"] {
  color: #fdd663;
}

/* moderation.css:675 */
body.theme-dark .md-page .md-mod__ico[data-tone="violet"] {
  color: #a8c7fa;
}

/* moderation.css:748 */
body.theme-dark .md-page .md-mod__sum.is-empty {
  color: #9aa0a6;
}

/* moderation.css:766 */
body.theme-dark .md-page .md-mod__act--soft {
  color: #fdd663;
}

/* moderation.css:767 */
body.theme-dark .md-page .md-mod__act--hard {
  color: #f2b8b5;
}

/* moderation.css:875 */
body.theme-dark .md-journal-page .md-jhint {
  color: #fdd663;
}

/* moderation.css:913 */
body.theme-dark .md-journal-page .md-jact--delete {
  color: #c4c7c5;
}

/* moderation.css:914 */
body.theme-dark .md-journal-page .md-jact--warn {
  color: #fdd663;
}

/* moderation.css:915 */
body.theme-dark .md-journal-page .md-jact--mute {
  color: #fdd663;
}

/* moderation.css:917 */
body.theme-dark .md-journal-page .md-jact--kick,
body.theme-dark .md-journal-page .md-jact--ban {
  color: #f2b8b5;
}

/* moderation.css:918 */
body.theme-dark .md-journal-page .md-jact--dry {
  color: #a8c7fa;
}

/* moderation.css:985 */
body.theme-dark .md-journal-page .md-jsig {
  color: #fdd663;
}

/* moderation.css:1164 */
body.theme-dark .md-wizard__step.is-done .md-wizard__num {
  color: #a8c7fa;
}

/* moderation.css:1210 */
body.theme-dark .md-wizard__bot-note--warn {
  color: #fdd663;
}

/* moderation.css:1211 */
body.theme-dark .md-wizard__bot-tick {
  color: #a8c7fa;
}

/* moderation.css:1214 */
body.theme-dark .md-wizard__link {
  color: #a8c7fa;
}

/* moderation.css:1240 */
body.theme-dark .md-wizard__found-ico {
  color: #a8dab5;
}

/* moderation.css:1245 */
body.theme-dark .md-wizard__found--warn .md-wizard__found-ico {
  color: #fdd663;
}

/* moderation.css:1260 */
body.theme-dark #md-module-modal .md-module__scope {
  color: #a8c7fa;
}

/* moderation.css:1300 */
body.theme-dark #md-module-modal .md-field__label {
  color: #e3e3e3;
}

/* moderation.css:1318 */
body.theme-dark #md-module-modal .md-field__num input,
body.theme-dark #md-module-modal select {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* moderation.css:1336 */
body.theme-dark #md-module-modal .md-field__suffix {
  color: #c4c7c5;
}

/* moderation.css:1347 */
body.theme-dark #md-module-modal .md-list-text {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* moderation.css:1365 */
body.theme-dark .md-bots__empty {
  color: #c4c7c5;
}

/* moderation.css:1372 */
body.theme-dark .md-bots__row {
  border-color: #444746;
}

/* moderation.css:1396 */
body.theme-dark .md-bots__name {
  color: #e3e3e3;
}

/* moderation.css:1403 */
body.theme-dark .md-bots__meta {
  color: #c4c7c5;
}

/* moderation.css:1412 */
body.theme-dark .md-bots__row.is-error .md-bots__meta:first-of-type {
  color: #f2b8b5;
}

/* moderation.css:1416 */
html body.theme-dark .md-bots__meta--warn {
  color: #fdd663;
}

/* moderation.css:1417 */
body.theme-dark .md-bots__del {
  color: #c4c7c5;
}

/* moderation.css:1432 */
body.theme-dark .md-bots__del:hover {
  color: #f2b8b5;
}

/* moderation.css:1437 */
body.theme-dark .md-bots__act {
  color: #c4c7c5;
}

/* moderation.css:1541 */
body.theme-dark #md-bot-modal .addw,
body.theme-dark #md-wizard-modal .addw,
body.theme-dark #md-chat-modal .addw,
body.theme-dark #md-log-modal .addw,
body.theme-dark #md-module-modal .addw,
body.theme-dark #md-bots-modal .addw {
  background-color: #1e1f22;
}

/* moderation.css:1577 */
body.theme-dark #md-bot-modal .addw__header,
body.theme-dark #md-wizard-modal .addw__header,
body.theme-dark #md-chat-modal .addw__header,
body.theme-dark #md-log-modal .addw__header,
body.theme-dark #md-module-modal .addw__header,
body.theme-dark #md-bots-modal .addw__header {
  color: #e3e3e3;
}

/* moderation.css:1591 */
body.theme-dark #md-bot-modal .pa__sub,
body.theme-dark #md-wizard-modal .pa__sub,
body.theme-dark #md-chat-modal .pa__sub,
body.theme-dark #md-log-modal .pa__sub,
body.theme-dark #md-module-modal .pa__sub,
body.theme-dark #md-bots-modal .pa__sub {
  color: #c4c7c5;
}

/* moderation.css:1654 */
body.theme-dark #md-bot-modal .form-row label,
body.theme-dark #md-log-modal .form-row label,
body.theme-dark #md-wizard-modal .form-row label,
body.theme-dark #md-chat-modal .form-row label {
  color: #e3e3e3;
}

/* moderation.css:1665 */
body.theme-dark #md-bot-modal .form-row input,
body.theme-dark #md-chat-modal .form-row input,
body.theme-dark #md-wizard-modal .form-row input,
body.theme-dark #md-log-modal .form-row input,
body.theme-dark #md-log-modal .form-row select,
body.theme-dark #md-chat-modal .form-row select {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* moderation.css:1706 */
body.theme-dark #md-bot-modal .pa-hint,
body.theme-dark #md-wizard-modal .pa-hint,
body.theme-dark #md-chat-modal .pa-hint,
body.theme-dark #md-log-modal .pa-hint,
body.theme-dark #md-module-modal .pa-hint,
body.theme-dark #md-bots-modal .pa-hint {
  color: #c4c7c5;
}

/* moderation.css:1725 */
body.theme-dark #md-bot-modal .pa-error,
body.theme-dark #md-wizard-modal .pa-error,
body.theme-dark #md-log-modal .pa-error,
body.theme-dark #md-chat-modal .pa-error,
body.theme-dark #md-module-modal .pa-error {
  background-color: rgba(242, 184, 181, 0.16);
  color: #f2b8b5;
}

/* moderation.css:1784 */
body.theme-dark #md-bot-modal .addw__btn--cancel,
body.theme-dark #md-wizard-modal .addw__btn--cancel,
body.theme-dark #md-chat-modal .addw__btn--cancel,
body.theme-dark #md-log-modal .addw__btn--cancel,
body.theme-dark #md-module-modal .addw__btn--cancel,
body.theme-dark #md-bots-modal .addw__btn--cancel {
  color: #a8c7fa;
}

/* moderation.css:1829 */
body.theme-dark #md-bot-modal .addw__btn--primary.is-busy::before,
body.theme-dark #md-wizard-modal .addw__btn--primary.is-busy::before,
body.theme-dark #md-chat-modal .addw__btn--primary.is-busy::before,
body.theme-dark #md-log-modal .addw__btn--primary.is-busy::before {
  border-top-color: #444746;
}

/* moderation.css:2140 */
body.theme-dark .md-seg__btn {
  color: #c4c7c5;
}

/* moderation.css:2167 */
body.theme-dark #md-bot-modal .md-proxy-pane select {
  background-color: #1e1f22;
  color: #e3e3e3;
  border-color: #444746;
}

/* moderation.css:2236 */
body.theme-dark .md-ai__usage-row.is-full .md-ai__usage-num {
  color: #fdd663;
}

/* moderation.css:2264 */
html body.theme-dark .view-moderation .am-gmail-bar .picker-pagination__info {
  color: #c4c7c5 !important;
}


/* ═══ theme_dark.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   НОЧНОЙ РЕЖИМ — единый канон (Google Material 3 dark)
   ═══════════════════════════════════════════════════════════════════════════

   Зачем отдельный файл. Светлая тема писалась канонами по семействам классов,
   и почти каждый такой канон вбивал цвет литералом с !important, а селектор
   перечислял обе темы сразу:

       html body .srch-page .srch-card,
       html body.theme-dark .srch-page .srch-card { background: #ffffff !important; }

   То есть ночной режим получал ровно тот же белый. Так белыми остались все
   страницы запуска, модалки, окна выбора, панели и половина полей ввода.
   Править это внутри канонов значило бы тронуть ~430 правил в ui_tweaks.css
   и каждый раз рисковать светлой темой, которая всех устраивает.

   Поэтому ночь живёт здесь: файл подключается ПОСЛЕДНИМ, повторяет форму
   селектора канона (та же специфичность) и выигрывает порядком в каскаде.
   Светлая тема этим файлом не затрагивается — ни одно правило вне
   body.theme-dark здесь не объявлено.

   ── Палитра ───────────────────────────────────────────────────────────────
   Взята с тёмной темы Google (Material 3 / Gmail dark), потому что светлая
   тема программы говорит на языке Google: #f1f3f4 наведение, #d3e3fd выбор,
   #0b57d0 акцент, #c4c7c5 обводка. Ночь — их прямые ночные пары:

       белая поверхность #ffffff   →  --g-surface-2   #1e1f22
       фон страницы     #f8f9fa    →  --g-surface     #131314
       наведение        #f1f3f4    →  --g-surface-4   #2d2f34
       нажатие          #e8eaed    →  --g-surface-5   #35373c
       линия            #dadce0    →  --g-line        #444746
       выбор            #d3e3fd    →  --g-sel         #004a77 (текст #c2e7ff)
       акцент           #0b57d0    →  --g-primary     #a8c7fa
       текст            #1f1f1f    →  --g-ink         #e3e3e3
       вторичный        #444746    →  --g-ink-mute    #c4c7c5

   Правило чтения палитры: чем выше элемент над страницей, тем светлее его
   поверхность. Обратное светлой теме, где поднятое — белее. Поэтому граница
   между блоками в ночи задаётся ступенью поверхности, а не рамкой: рамки
   добавляются только там, где ступени не хватает (поля ввода, окна).

   ── Что здесь НЕ делается ─────────────────────────────────────────────────
   Геометрия. Ни одного padding/размера/радиуса — ночь меняет только цвет.
   Если в тёмной теме что-то поехало по раскладке, чинить надо канон, а не
   этот файл. Даже лишняя рамка гасится через `border-color: transparent`, а
   не `border: 0`: ноль убрал бы пиксель ширины, и переключение темы двигало
   бы интерфейс.

   Светлая тема этим файлом не затрагивается: каждый селектор здесь и в
   theme_dark_map.css обязан начинаться с body.theme-dark. Это не соглашение,
   а проверяемое правило — tests/unit/test_theme_dark_scope_contract.py.

   ── Сосед: theme_dark_map.css ─────────────────────────────────────────────
   Механический перевод палитры на ~1100 правил, собранный генератором
   scripts/gen_theme_dark_map.py по трём светлым файлам. Он подключается
   ПЕРЕД этим файлом, поэтому всё, что решено здесь руками, перебивает
   перевод. Каноны в ui_tweaks.css живые — после правок в них карту надо
   пересобрать:

       .venv\Scripts\python.exe scripts\gen_theme_dark_map.py
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. Палитра ══════════════════════════════════════════════════════════
   Объявлена и на <html>, и на <body>: класс темы висит на обоих (его ставит
   applyTheme), потому что фон окна и рамку берёт html — без своей копии
   токенов его правило было бы невычислимым, и фон окна оставался бы светлым
   по краям и при перепрокрутке.

   Класс на html ставится ЯВНО, а не выводится из `html:has(> body.theme-dark)`:
   :has() заставляет браузер держать зависимость html от содержимого body и
   пересчитывать её при изменениях в дереве. Ради одного фона это лишняя
   работа на каждом кадре. */

html.theme-dark,
body.theme-dark {
  /* Поверхности — ступенями по высоте над страницей */
  --g-surface:        #131314;  /* сама страница */
  --g-surface-1:      #1a1b1e;  /* утопленное: полосы, дорожки, футеры */
  --g-surface-2:      #1e1f22;  /* карточка, таблица, модалка */
  --g-surface-3:      #26282c;  /* поднятое: окна, тулбары, поля ввода */
  --g-surface-4:      #2d2f34;  /* наведение */
  --g-surface-5:      #35373c;  /* нажатие и «включено» */

  /* Линии */
  --g-line:           #444746;  /* обычная граница */
  --g-line-soft:      #303236;  /* разделитель внутри одной поверхности */
  --g-line-strong:    #8e918f;  /* контур, который обязан быть виден */

  /* Текст */
  --g-ink:            #e3e3e3;
  --g-ink-mute:       #c4c7c5;
  --g-ink-faint:      #9aa0a6;
  /* Выключенное обязано читаться как выключенное, но всё-таки читаться:
     на ступени наведения (#2d2f34) это 3.2:1 — нижняя граница, при которой
     надпись на кнопке ещё разбирают глазами. */
  --g-ink-disabled:   #7d8084;

  /* Акцент */
  --g-primary:        #a8c7fa;
  --g-primary-strong: #d3e3fd;
  --g-primary-ink:    #062e6f;  /* текст НА заливке акцентом */
  --g-primary-fill:   #8ab4f8;  /* заливка главной кнопки */
  --g-tint:           rgba(168, 199, 250, 0.14);
  --g-tint-strong:    rgba(168, 199, 250, 0.22);

  /* Выбор — «вторичный контейнер» Google: залитая пилюля выбранного пункта */
  --g-sel:            #004a77;
  --g-sel-hover:      #005b92;
  --g-sel-ink:        #c2e7ff;

  /* Смысловые заливки: тон прозрачный, чтобы ложиться на любую ступень */
  --g-ok-bg:          rgba(168, 218, 181, 0.16);
  --g-ok-ink:         #a8dab5;
  --g-warn-bg:        rgba(253, 214, 99, 0.16);
  --g-warn-ink:       #fdd663;
  --g-danger-bg:      rgba(242, 184, 181, 0.16);
  --g-danger-ink:     #f2b8b5;
  --g-info-bg:        rgba(168, 199, 250, 0.16);
  --g-info-ink:       #a8c7fa;

  /* Тени. В ночи тень почти не читается — работу границы делает ступень
     поверхности, поэтому тени мягче и глубже, чем в светлой теме. */
  --g-shadow-1:       0 1px 2px rgba(0, 0, 0, 0.45);
  --g-shadow-2:       0 4px 12px rgba(0, 0, 0, 0.50);
  --g-shadow-3:       0 8px 24px rgba(0, 0, 0, 0.60);

  /* Иконка-кнопка в круге — ночные пары токенов из tokens.css (как у
     пагинации таблиц ночью). */
  --g-icon-btn-hover: rgba(232, 234, 237, 0.08);
  --g-icon-btn-press: rgba(232, 234, 237, 0.12);
  --g-icon-btn-ring:  var(--g-ink-mute);
}


/* ═══ 2. Общие токены программы ═══════════════════════════════════════════
   半 работы делается здесь: правила, написанные через var(--bg-card) и
   прочие общие токены, чинятся переопределением самих токенов — по одному
   объявлению на семейство вместо сотни правил.
   Блок идёт ПОСЛЕ style.css, поэтому переопределяет её ночную палитру
   (сине-серую «Apple-like v2») на гугловскую. */

body.theme-dark {
  --bg-app:        var(--g-surface);
  --bg-card:       var(--g-surface-2);
  --card:          var(--g-surface-2);
  --bg-sidebar:    var(--g-surface);
  --bg-sidebar-2:  var(--g-surface-4);
  --bg-hover:      var(--g-surface-4);
  --bg-row-hover:  var(--g-surface-3);
  --border:        var(--g-line);
  --border-strong: var(--g-line-strong);
  --text:          var(--g-ink);
  --text-mute:     var(--g-ink-mute);
  --text-light:    var(--g-ink-faint);
  --primary:       var(--g-primary);
  --primary-soft:  var(--g-tint);
  --gray-bg:       var(--g-surface-3);
  --green:         var(--g-ok-ink);
  --green-bg:      var(--g-ok-bg);
  --red:           var(--g-danger-ink);
  --red-bg:        var(--g-danger-bg);
  --orange:        var(--g-warn-ink);
  --orange-bg:     var(--g-warn-bg);
  --blue:          var(--g-info-ink);
  --blue-bg:       var(--g-info-bg);
  --shadow:        var(--g-shadow-2);

  /* Полосы прокрутки */
  --scrollbar-thumb:        rgba(232, 234, 237, 0.24);
  --scrollbar-thumb-hover:  rgba(232, 234, 237, 0.36);
  --scrollbar-thumb-active: rgba(232, 234, 237, 0.48);
  --sidebar-scrollbar-thumb:        rgba(232, 234, 237, 0.20);
  --sidebar-scrollbar-thumb-hover:  rgba(232, 234, 237, 0.32);
  --sidebar-scrollbar-thumb-active: rgba(232, 234, 237, 0.44);

  /* Раскрывающиеся окна (канон pick-bind__country-menu) */
  --pop-bg:           var(--g-surface-3);
  --pop-border-color: var(--g-line);
  --pop-sep:          var(--g-line-soft);
  --pop-text:         var(--g-ink);
  --pop-muted:        var(--g-ink-mute);
  --pop-item-hover:   var(--g-surface-4);
  --pop-item-sel-bg:  var(--g-sel);
  --pop-item-sel-fg:  var(--g-sel-ink);
  --pop-shadow:       var(--g-shadow-3);

  /* Страницы запуска (.srch-page) */
  --srch-ink:              var(--g-ink);
  --srch-ink-mute:         var(--g-ink-mute);
  --srch-desc:             var(--g-ink-mute);
  --srch-note:             var(--g-ink-faint);
  --srch-outline:          var(--g-line);
  --srch-field-line:       var(--g-line);
  --srch-field-line-hover: var(--g-line-strong);
  --srch-accent:           var(--g-primary);
  --srch-accent-soft:      var(--g-sel);
  --srch-hover:            var(--g-surface-4);

  /* Настройки, личный кабинет, помощь, модерация */
  --stgp-ink: var(--g-ink);      --stgp-desc: var(--g-ink-mute);
  --stgp-outline: var(--g-line); --stgp-line: var(--g-line-soft);
  --stgp-hover: var(--g-surface-4);
  --stgp-accent: var(--g-primary); --stgp-accent-soft: var(--g-sel);
  --accp-ink: var(--g-ink);      --accp-desc: var(--g-ink-mute);
  --accp-outline: var(--g-line); --accp-hover: var(--g-surface-4);
  --accp-accent: var(--g-primary); --accp-accent-soft: var(--g-sel);
  --accp-danger: var(--g-danger-ink);
  --md-card: var(--g-surface-2);  --md-ink: var(--g-ink);
  --md-desc: var(--g-ink-mute);   --md-line: var(--g-line-soft);
  --md-soft: var(--g-surface-4);  --md-accent: var(--g-primary);
  --mod-accent: var(--g-primary); --mod-ink: var(--g-sel-ink);
  --mod-tint: var(--g-tint);
  --help-accent: var(--g-primary);
  --help-accent-soft: rgba(168, 199, 250, 0.06);
  --help-accent-weak: rgba(168, 199, 250, 0.12);
  --help-ok: var(--g-ok-ink);   --help-ok-weak: var(--g-ok-bg);
  --help-warn: var(--g-warn-ink); --help-warn-weak: var(--g-warn-bg);

  /* Прокси и общая механика таблиц */
  --proxy-bg:           var(--g-surface);
  --proxy-surface:      var(--g-surface-2);
  --proxy-surface-low:  var(--g-surface-3);
  --proxy-surface-line: var(--g-line-soft);
  --proxy-text:         var(--g-ink);
  --proxy-muted:        var(--g-ink-mute);
  --proxy-subtle:       var(--g-ink-faint);
  --proxy-outline:      var(--g-line);
  --proxy-primary:      var(--g-primary);
  --proxy-ok:           var(--g-ok-ink);
  --proxy-error:        var(--g-danger-ink);
  --px-row-divider:     var(--g-line-soft);
  --px-row-selected-bg: var(--g-sel);
  --px-row-selected-divider: rgba(255, 255, 255, 0.10);
  --px-gmail-hover:              rgba(232, 234, 237, 0.08);
  --px-gmail-combo-hover:        var(--g-surface-4);
  --px-gmail-combo-active:       var(--g-surface-5);
  --px-gmail-combo-active-hover: #3e4045;
  --px-gmail-combo-outline:      var(--g-line);
  --px-gmail-icon:               var(--g-ink-mute);
  --px-gmail-muted:              var(--g-ink-faint);
  --px-gmail-check-bg:            transparent;
  --px-gmail-check-border:        var(--g-ink-mute);
  --px-gmail-check-border-active: var(--g-primary);
  --px-gmail-check-active-bg:     var(--g-primary);
  --px-gmail-check-mark:          var(--g-primary-ink);
  --px-gmail-check-hover:         rgba(232, 234, 237, 0.14);
  --px-gmail-check-hover-strong:  rgba(232, 234, 237, 0.20);

  /* Списочные таблицы (канон .app-table) */
  --app-table-head-bg:           var(--g-surface-2);
  --app-table-head-border:       var(--g-line-soft);
  --app-table-head-color:        var(--g-ink-mute);
  --app-table-head-color-hover:  var(--g-ink);
  --app-table-head-sorted-color: var(--g-ink);
  --app-table-cell-color:        var(--g-ink);
  --app-table-cell-border:       var(--g-line-soft);
  --app-table-divider:           var(--g-line);
  --app-table-row-selected-bg:   var(--g-sel);
  --app-table-row-hover-a:       0.06;
  --app-table-check-ring-tone:   232, 234, 237;
  --app-table-check-ring-stroke: var(--g-ink-mute);
  --app-table-gear-color:        var(--g-ink-mute);
  --app-table-gear-ring-bg:      rgba(232, 234, 237, 0.10);
  --app-table-tab-text:          var(--g-ink-mute);
  --app-table-tab-active:        var(--g-primary);
  --app-table-tab-hover-bg:      rgba(232, 234, 237, 0.08);
  --app-check-master-stroke:     var(--g-ink-mute);
  --app-check-master-fill:       rgba(232, 234, 237, 0.08);
  --app-check-master-fill-hover: rgba(232, 234, 237, 0.14);
  --app-check-master-fill-active:rgba(232, 234, 237, 0.18);
  --app-check-master-fill-press: rgba(232, 234, 237, 0.24);
  --app-head-add-bg:       var(--g-sel);
  --app-head-add-bg-hover: var(--g-sel-hover);
  --app-head-add-ink:      var(--g-sel-ink);
  --app-skel-tint:         rgba(232, 234, 237, 0.08);

  /* Чекбоксы строк */
  --tp-checkbox-color:       var(--g-ink-mute);
  --tp-checkbox-color-muted: #7a7d80;
  --tp-row-checkbox-color:   #7a7d80;
  --tp-checkbox-hover:       rgba(232, 234, 237, 0.10);
  --tp-checkbox-hover-strong:rgba(232, 234, 237, 0.16);
  --tp-checkbox-hover-ring:  rgba(232, 234, 237, 0.10);
  --tp-checkbox-hover-ring-proxy: rgba(232, 234, 237, 0.10);
  --tp-icon-neutral:         var(--g-ink-mute);
  --tp-accent:        var(--g-primary);
  --tp-accent-hover:  var(--g-primary-strong);
  --tp-accent-soft:   var(--g-tint);
  --tp-accent-border: rgba(168, 199, 250, 0.30);
  --tp-danger:        var(--g-danger-ink);
  --tp-success:       var(--g-ok-ink);
  --tp-slate:         var(--g-ink-faint);

  /* Сайдбар. Фон — ступень САМОЙ СТРАНИЦЫ, а не утопленная: сайдбар и
     верхняя панель составляют одну оболочку окна, и разные ступени под ними
     читаются как светлое пятно, подвешенное под тёмной шапкой. Поднятыми в
     ночи остаются только карточки и плита таблицы — оболочка держит ровный
     фон страницы. */
  --tp-side-bg:        var(--g-surface);
  --tp-side-bg-solid:  var(--g-surface);
  --tp-side-bg-soft:   var(--g-surface-2);
  --tp-side-bg-hover:  rgba(232, 234, 237, 0.08);
  --tp-side-bg-active: rgba(232, 234, 237, 0.12);
  --tp-side-divider:   var(--g-line-soft);
  --tp-side-text:      var(--g-ink-mute);
  --tp-side-text-strong: var(--g-ink);
  --tp-side-muted:     var(--g-ink-faint);
  --tp-side-scroll-track: transparent;
  --tp-side-scroll-thumb: rgba(232, 234, 237, 0.20);
  --tp-side-scroll-thumb-hover: rgba(232, 234, 237, 0.32);
  --sb-nav-text:       var(--g-ink-mute);
  --sb-nav-hover-bg:   rgba(232, 234, 237, 0.08);
  --sb-nav-active-bg:  var(--g-sel);
  --sb-nav-active-text:var(--g-sel-ink);

  /* Модалки и выделение */
  --modal-close-color:        var(--g-ink-faint);
  --modal-close-hover-bg:     var(--g-surface-4);
  --modal-close-hover-color:  var(--g-ink);
  --sel-border:         var(--g-line);
  --sel-border-hover:   var(--g-primary);
  --sel-icon:           var(--g-ink-mute);
  --sel-surface-hover:  var(--g-surface-4);

  /* Базы пользователей — были заданы почти-чёрными; выравниваем по ступеням */
  --ub-page-bg:      var(--g-surface);
  --ub-panel:        var(--g-surface-2);
  --ub-panel-2:      var(--g-surface-3);
  --ub-panel-hover:  var(--g-surface-4);
  --ub-control:      var(--g-surface-3);
  --ub-control-hover:var(--g-surface-4);
  --ub-border:       var(--g-line-soft);
  --ub-border-strong:var(--g-line);
  --ub-text:         var(--g-ink);
  --ub-muted:        var(--g-ink-mute);
  --ub-subtle:       var(--g-ink-faint);
  --ub-accent:       var(--g-primary);
  --ub-accent-hover: var(--g-primary-strong);
  --ub-name-dash:    rgba(168, 199, 250, 0.32);
  --ub-name-dash-on: rgba(168, 199, 250, 0.60);

  /* ── Токены, которых нет ни в одном объявлении ──────────────────────
     Несколько правил читают имена, которых в программе не существует:
     --text-muted (у нас --text-mute, без «d»), --muted, --warning,
     --tp-border. var() тогда всегда берёт запасное значение, а оно
     написано под светлый фон — и в ночи такой текст остаётся тёмным.

     Чиним объявлением ЗДЕСЬ, а не правкой самих правил: под ночью имя
     появляется и var() берёт его, а в светлой теме имени по-прежнему нет
     и запасное значение остаётся ровно тем же. Светлая тема не двигается
     ни на единицу. */
  --text-muted: var(--g-ink-mute);
  --muted:      var(--g-ink-faint);
  --warning:    var(--g-warn-ink);
  --tp-border:  var(--g-line);

  /* Статусы аккаунтов */
  --status-active-bg: var(--g-ok-bg);          --status-active-color: var(--g-ok-ink);
  --status-spamblock-perm-bg: rgba(255, 167, 108, 0.16);
  --status-spamblock-perm-color: #ffa76c;
  --status-spamblock-temp-bg: var(--g-warn-bg);--status-spamblock-temp-color: var(--g-warn-ink);
  --status-frozen-bg: var(--g-info-bg);        --status-frozen-color: var(--g-info-ink);
  --status-dead-bg: var(--g-danger-bg);        --status-dead-color: var(--g-danger-ink);
  --status-skip-bg: rgba(154, 160, 166, 0.16); --status-skip-color: var(--g-ink-faint);
}


/* ═══ 2Б. Те же токены, но на своей глубине ═══════════════════════════════
   Пользовательские свойства наследуются, и выигрывает не тот, кто объявлен
   специфичнее вообще, а тот, кто объявлен БЛИЖЕ к элементу. Каноны раздают
   --srch-*, --app-table-*, --ub-*, --proxy-* и прочие не на body, а на своей
   странице или на оболочке таблицы. Пока ночь переопределяла их только на
   body, до элемента доезжало светлое значение со страницы — так и остались
   светлыми счётчики на страницах запуска и половина таблиц.

   Поэтому каждый такой блок повторён здесь дословно тем же селектором
   (с body.theme-dark) и той же глубины — выигрывает порядок в каскаде. */

html body.theme-dark .srch-page {
  --srch-ink:              var(--g-ink);
  --srch-ink-mute:         var(--g-ink-mute);
  --srch-desc:             var(--g-ink-mute);
  --srch-note:             var(--g-ink-faint);
  --srch-outline:          var(--g-line);
  --srch-field-line:       var(--g-line);
  --srch-field-line-hover: var(--g-line-strong);
  --srch-accent:           var(--g-primary);
  --srch-accent-soft:      var(--g-sel);
  --srch-hover:            var(--g-surface-4);
}

html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell,
html body.theme-dark :is(.view-proxy, .view-am, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-head-bg:           var(--g-surface-2);
  --app-table-head-border:       var(--g-line-soft);
  --app-table-head-color:        var(--g-ink-mute);
  --app-table-head-color-hover:  var(--g-ink);
  --app-table-head-sorted-color: var(--g-ink);
  --app-table-cell-color:        var(--g-ink);
  --app-table-cell-border:       var(--g-line-soft);
  --app-table-divider:           var(--g-line);
  --app-table-row-selected-bg:   var(--g-sel);
  --app-table-row-hover-a:       0.06;
  --app-table-sort-color:        var(--g-ink-faint);
  --app-table-sort-active:       var(--g-primary);
  --app-table-gear-color:        var(--g-ink-mute);
  --app-table-gear-ring-bg:      rgba(232, 234, 237, 0.10);
  --app-table-tab-text:          var(--g-ink-mute);
  --app-table-tab-active:        var(--g-primary);
  --app-table-tab-hover-bg:      rgba(232, 234, 237, 0.08);
  --app-table-check-ring-tone:   232, 234, 237;
  --app-table-check-ring-stroke: var(--g-ink-mute);
}

/* Чекбоксы строк. В ночи «приглушённый» — это НЕ темнее: на тёмной плите
   тускнеет как раз тёмное. Пустая коробочка светлеет ровно настолько,
   чтобы её было видно, но чтобы она не спорила с отмеченной. */
html body.theme-dark :is(#view-accounts, .am-embed).view-am .am-table-shell,
html body.theme-dark #view-accounts.view-am .am-table-shell,
html body.theme-dark .am-embed.view-am .am-table-shell,
html body.theme-dark .view-proxy .am-table-shell,
html body.theme-dark .view-tasks .am-table-shell,
html body.theme-dark :is(#view-moderation-chats, #view-creator-chats).view-moderation .am-table-shell,
html body.theme-dark .view-am,
html body.theme-dark .view-proxy,
html body.theme-dark .view-userbase--v2 {
  --tp-checkbox-color:        var(--g-ink-mute);
  --tp-checkbox-color-muted:  #80868b;
  --tp-row-checkbox-color:    #80868b;
  --tp-checkbox-hover:        rgba(232, 234, 237, 0.10);
  --tp-checkbox-hover-strong: rgba(232, 234, 237, 0.16);
  --tp-checkbox-hover-ring:   rgba(232, 234, 237, 0.10);
  --tp-checkbox-hover-ring-proxy: rgba(232, 234, 237, 0.10);
  --app-table-check-ring-tone:   232, 234, 237;
  --app-table-check-ring-stroke: var(--g-ink-mute);
}

html body.theme-dark :is(#view-accounts.view-am, .am-embed.view-am, #view-proxy.view-proxy, #view-userbase.view-userbase.view-userbase--v2, #view-tasks.view-tasks, :is(#view-moderation-chats, #view-creator-chats).view-moderation) .px-check-menu__control {
  --app-check-master-stroke:      var(--g-ink-mute);
  --app-check-master-fill:        rgba(232, 234, 237, 0.08);
  --app-check-master-fill-hover:  rgba(232, 234, 237, 0.14);
  --app-check-master-fill-active: rgba(232, 234, 237, 0.18);
  --app-check-master-fill-press:  rgba(232, 234, 237, 0.24);
}

/* Прокси и базы: свои палитры поверхностей */
html body.theme-dark.is-proxy-screen,
html body.theme-dark .view-proxy,
html body.theme-dark .view-userbase--v2 {
  --proxy-bg:           var(--g-surface);
  --proxy-surface:      var(--g-surface-2);
  --proxy-surface-low:  var(--g-surface-3);
  --proxy-surface-line: var(--g-line-soft);
  --proxy-text:         var(--g-ink);
  --proxy-muted:        var(--g-ink-mute);
  --proxy-subtle:       var(--g-ink-faint);
  --proxy-outline:      var(--g-line);
  --proxy-primary:      var(--g-primary);
  --proxy-primary-strong: var(--g-primary-strong);
  --proxy-ok:           var(--g-ok-ink);
  --proxy-error:        var(--g-danger-ink);
  --px-row-divider:     var(--g-line-soft);
  --px-row-selected-bg: var(--g-sel);
}

/* Базы пользователей — палитра задана на самом виде и на модалках баз */
html body.theme-dark #view-userbase.view-userbase,
html body.theme-dark .view-userbase--v2,
html body.theme-dark #ub-detail-modal,
html body.theme-dark .newbase-modal,
html body.theme-dark #ub-import-modal {
  --ub-page-bg:       var(--g-surface);
  --ub-panel:         var(--g-surface-2);
  --ub-panel-2:       var(--g-surface-3);
  --ub-panel-hover:   var(--g-surface-4);
  --ub-control:       var(--g-surface-3);
  --ub-control-hover: var(--g-surface-4);
  --ub-border:        var(--g-line-soft);
  --ub-border-strong: var(--g-line);
  --ub-text:          var(--g-ink);
  --ub-muted:         var(--g-ink-mute);
  --ub-subtle:        var(--g-ink-faint);
  --ub-accent:        var(--g-primary);
  --ub-accent-hover:  var(--g-primary-strong);
}

/* Настройки и личный кабинет раздают палитру на своей странице */
html body.theme-dark .stgp-page {
  --stgp-ink: var(--g-ink);        --stgp-desc: var(--g-ink-mute);
  --stgp-outline: var(--g-line);   --stgp-line: var(--g-line-soft);
  --stgp-hover: var(--g-surface-4);
  --stgp-accent: var(--g-primary); --stgp-accent-soft: var(--g-sel);
}
html body.theme-dark .accp-page {
  --accp-ink: var(--g-ink);        --accp-desc: var(--g-ink-mute);
  --accp-outline: var(--g-line);   --accp-hover: var(--g-surface-4);
  --accp-accent: var(--g-primary); --accp-accent-soft: var(--g-sel);
  --accp-danger: var(--g-danger-ink);
}

/* Gmail-бар таблиц раздаёт свою палитру на самом баре, а не на виде —
   поэтому и переопределяем её там же, иначе счётчик страниц и значки
   остаются тёмно-серыми (#5f6368) на тёмной плите. */
html body.theme-dark .view-proxy .px-gmail-bar,
html body.theme-dark .view-proxy .px-check-menu__caret,
html body.theme-dark .view-am .am-gmail-bar,
html body.theme-dark .view-userbase--v2 .ub2-gmail-bar,
html body.theme-dark .view-tasks .am-gmail-bar,
html body.theme-dark .view-moderation .am-gmail-bar {
  --px-gmail-muted: var(--g-ink-mute) !important;
  --px-gmail-icon:  var(--g-ink-mute) !important;
  --px-gmail-hover: rgba(232, 234, 237, 0.08) !important;
  --px-gmail-combo-hover:  var(--g-surface-4) !important;
  --px-gmail-combo-active: var(--g-surface-5) !important;
  --px-gmail-combo-outline: var(--g-line) !important;
}

/* Полоса выделения: рамка кнопок и подложка наведения */
html body.theme-dark .sel-bar .icon-btn,
html body.theme-dark .sel-bar .quick-act {
  --sel-border:        var(--g-line);
  --sel-border-hover:  var(--g-primary);
  --sel-icon:          var(--g-ink-mute);
  --sel-surface:       transparent;
  --sel-surface-hover: var(--g-surface-4);
}

/* Акценты модулей. В светлой теме это насыщенный синий #2563eb, читаемый на
   белом; на тёмном он проваливается — берём ночную пару Google. */
html body.theme-dark .view-am,
html body.theme-dark .view-proxy,
html body.theme-dark .view-userbase--v2,
html body.theme-dark .accent-blue {
  --am-accent:      var(--g-primary);
  --am-accent-rgb:  168, 199, 250;
  --am-accent-active: var(--g-primary-strong);
  --am-soft:        var(--g-tint);
  --am-tile-color:  var(--g-primary);
  --am-tile-soft:   var(--g-tint);
  --px-accent:      var(--g-primary);
  --px-accent-rgb:  168, 199, 250;
  --ub-accent:      var(--g-primary);
  --ub-accent-rgb:  168, 199, 250;
}
html body.theme-dark .srch-page,
html body.theme-dark .view-inviter,
html body.theme-dark .view-cloner {
  --inv-accent:     var(--g-primary);
  --inv-accent-rgb: 168, 199, 250;
  --cln-accent:     #c7b2fb;
  --cln-accent-rgb: 199, 178, 251;
}


/* ═══ 3. Основа страницы ══════════════════════════════════════════════════ */

/* color-scheme — не косметика: этим переключателем браузер красит то, до чего
   CSS не дотягивается. Без него в ночи остаются светлыми полосы прокрутки,
   выпадающие списки <select>, каретка, подсветка автозаполнения и рамка
   фокуса — ровно то, что читалось как «внутри инпутов какие-то рамки». */
html.theme-dark,
html body.theme-dark {
  color-scheme: dark;
}

/* Фон самого <html>. Он остаётся светлым, если красить только body, и
   вылезает белым при перепрокрутке и по краям окна. */
html.theme-dark {
  background: var(--g-surface);
}
html body.theme-dark {
  background: var(--g-surface);
  color: var(--g-ink);
}

/* Выделение текста и подсветка автозаполнения */
body.theme-dark ::selection {
  background: rgba(168, 199, 250, 0.30);
  color: #ffffff;
}
body.theme-dark input:-webkit-autofill,
body.theme-dark input:-webkit-autofill:hover,
body.theme-dark input:-webkit-autofill:focus,
body.theme-dark textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--g-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--g-surface-3) inset;
  caret-color: var(--g-ink);
}

/* Полосы прокрутки.

   Основную работу делает color-scheme выше: в тёмной схеме браузер сам
   рисует тёмную полосу, и делает это на композиторе. Поэтому здесь ТОЛЬКО
   те места, где канон вбил светлый цвет литералом (#f2f2f2 дорожке,
   #cccccc ползунку) — и адресно, по своим контейнерам.

   Универсального `*::-webkit-scrollbar` здесь было и больше нет: любое
   правило на ::-webkit-scrollbar снимает у контейнера быструю отрисовку
   полосы и переводит её на главный поток. С селектором `*` это касалось
   КАЖДОГО прокручиваемого узла — и только в ночи. Отсюда и брались
   подтормаживания, которых нет днём. */
html body.theme-dark :is(.view-am, .view-proxy, .view-tasks, .view-userbase--v2, .view-moderation) .am-table-shell::-webkit-scrollbar-track,
html body.theme-dark :is(.view-am, .view-proxy, .view-tasks, .view-userbase--v2, .view-moderation) .am-table-shell:hover::-webkit-scrollbar-track,
html body.theme-dark :is(.view-am, .view-proxy, .view-tasks, .view-userbase--v2, .view-moderation) .am-table-shell::-webkit-scrollbar-corner {
  background: transparent !important;
}
html body.theme-dark :is(.view-am, .view-proxy, .view-tasks, .view-userbase--v2, .view-moderation) .am-table-shell::-webkit-scrollbar-thumb {
  background: rgba(232, 234, 237, 0.22) !important;
}
html body.theme-dark :is(.view-am, .view-proxy, .view-tasks, .view-userbase--v2, .view-moderation) .am-table-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 234, 237, 0.34) !important;
}
/* Липкая полоса горизонтальной прокрутки списочных таблиц (.am-hscroll,
   контракт в конце ui_tweaks.css): там каретка вбита светлыми литералами
   канона — здесь тот же адресный перекрас, что у оболочки выше. Подложка
   берётся из --bg-card, её карта уже перекрасила.

   Перекрашиваем только через ::-webkit-scrollbar-thumb ниже: стандартное
   `scrollbar-color` с Chromium 121 отключает у короба весь блок
   ::-webkit-scrollbar, и вместо каретки канона ночь получала бы системную
   полосу — 15px со стрелками в коробе высотой 10px. Отписку от общего
   правила (`scrollbar-color: auto`) контракт уже сделал за обе темы. */
html body.theme-dark .am-hscroll {
  box-shadow: 0 -2px 3px -3px rgba(0, 0, 0, 0.6) !important;
}
html body.theme-dark .am-hscroll::-webkit-scrollbar-track,
html body.theme-dark .am-hscroll:hover::-webkit-scrollbar-track,
html body.theme-dark .am-hscroll::-webkit-scrollbar-track-piece,
html body.theme-dark .am-hscroll:hover::-webkit-scrollbar-track-piece,
html body.theme-dark .am-hscroll::-webkit-scrollbar-corner {
  background: transparent !important;
}
html body.theme-dark .am-hscroll::-webkit-scrollbar-thumb {
  background: rgba(232, 234, 237, 0.22) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.theme-dark .am-hscroll::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 234, 237, 0.34) !important;
  border-color: transparent !important;
}


/* ═══ 4. Переход между темами ═════════════════════════════════════════════
   Смена темы идёт кроссфейдом всей страницы через View Transitions API
   (см. applyTheme в app.js). Здесь — только длительность и кривая, общие
   с motion.css: анимация принадлежит канону движения, а не теме.

   Почему не «transition на всё подряд»: наследуемые свойства на <body> и
   переходы на тысячах узлов заставляют браузер пересчитывать стили всему
   дереву — тот самый бюджет инвалидации, из-за которого раньше подвисало
   выделение строк. Кроссфейд View Transition делает то же самое одним
   снимком на композиторе и дерево не трогает. */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-draw, 200ms);
  animation-timing-function: var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
  mix-blend-mode: normal;
}
/* Новая тема проявляется поверх старой, старая не гаснет — иначе в середине
   перехода сквозь обе картинки просвечивает фон окна и получается вспышка. */
::view-transition-old(root) {
  animation: none;
  opacity: 1;
}
::view-transition-new(root) {
  animation-name: theme-swap-in;
}
@keyframes theme-swap-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Запасной путь для окружения без View Transitions: короткий переход цвета,
   включённый ТОЛЬКО на время смены темы (класс снимается по таймеру), —
   постоянного перехода на всех узлах здесь нет намеренно.

   Списком, а не `.srch-page *`. Селектор с `*` справа попадает в
   универсальную корзину и проверяется у КАЖДОГО узла при каждом пересчёте
   стиля — даже когда класса .theme-anim нет и правило заведомо не сработает.
   Правая часть селектора должна быть узкой. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .sidebar,
html.theme-anim main,
html.theme-anim .card,
html.theme-anim .modal__panel,
html.theme-anim .srch-card,
html.theme-anim .srch-input,
html.theme-anim .am-table-card,
html.theme-anim .tp-topbar {
  transition: background-color var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color     var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
              color            var(--motion-draw, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Кому движение противопоказано — переключаем мгновенно. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}


/* ═══ 5. Верхняя панель ═══════════════════════════════════════════════════ */

html body.theme-dark .tp-topbar {
  background: var(--g-surface) !important;
  border-bottom-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .tp-topbar__search {
  background: var(--g-surface-3) !important;
  border-color: transparent !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .tp-topbar__search:hover,
html body.theme-dark .tp-topbar__search:focus-within {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .tp-topbar__search input {
  background: transparent !important;
  color: var(--g-ink) !important;
  /* Рамку гасим цветом, а не `border: 0`: ноль убрал бы пиксель ширины, и
     поле в ночи стояло бы на пиксель иначе, чем в светлой теме. Ночь меняет
     только цвет — раскладка у обеих тем обязана совпадать до пикселя. */
  border-color: transparent !important;
}
html body.theme-dark .tp-topbar__search input::placeholder {
  color: var(--g-ink-faint) !important;
}
html body.theme-dark .tp-topbar__menu,
html body.theme-dark .tp-topbar__act,
html body.theme-dark .tp-topbar__icon-btn {
  color: var(--g-ink-mute) !important;
  background: transparent !important;
}
html body.theme-dark .tp-topbar__menu:hover,
html body.theme-dark .tp-topbar__act:hover,
html body.theme-dark .tp-topbar__icon-btn:hover {
  background: rgba(232, 234, 237, 0.10) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .tp-topbar__brand-text {
  color: var(--g-ink) !important;
}


/* ═══ 6. Страницы запуска (.srch-page) ════════════════════════════════════
   Канон запуска — самая большая белая площадь ночи: он один обслуживает
   поиск, парсер, инвайт, инвайт админами, чекер, оба клонера, обе рассылки,
   реакции, подписки, автоответчик, заполнение, создание чатов, снятие
   ограничений и конвертер. Поэтому и правил здесь больше всего.

   Ступени: страница --g-surface, карточка --g-surface-2, элемент внутри
   карточки (поле, чип, плитка, степпер) --g-surface-3. */

html body.theme-dark .srch-page .srch-card,
html body.theme-dark .srch-page .srch-input,
html body.theme-dark .srch-page .cln-io,
html body.theme-dark .srch-page .prs-advanced,
html body.theme-dark .srch-page .prs-cta,
html body.theme-dark .srch-page .cc-made__main,
html body.theme-dark .srch-page .srch-skel__card {
  background: var(--g-surface-2) !important;
  color: var(--g-ink) !important;
}

/* Заголовки, описания и подписи внутри карточек */
html body.theme-dark .srch-page .srch-card__title,
html body.theme-dark .srch-page .srch-what__title,
html body.theme-dark .srch-page .prs-advanced > summary,
html body.theme-dark .srch-page .inv-field__label,
html body.theme-dark .srch-page .srch-input__value {
  color: var(--g-ink) !important;
}
html body.theme-dark .srch-page .srch-input__head,
html body.theme-dark .srch-page .srch-card__desc,
html body.theme-dark .srch-page .srch-hint,
html body.theme-dark .srch-page .prs-advanced__hint {
  color: var(--g-ink-mute) !important;
}
/* Строка расчёта ночью тише подписей ровно на ту же ступень, что и днём:
   цвет ей задаёт --srch-note (var(--g-ink-faint)) из блока токенов выше,
   и своей строки здесь ей больше не нужно — прежняя, в общей группе с
   описаниями, возвращала её к --g-ink-mute и разницу гасила. */
html body.theme-dark .srch-page .srch-plan-note--warn {
  color: var(--g-warn-ink) !important;
}
html body.theme-dark .srch-page .srch-plan-note--ok {
  color: var(--g-ok-ink) !important;
}
html body.theme-dark .srch-page .srch-plan-note--error {
  color: var(--g-danger-ink) !important;
}

/* Поля ввода. Одна обводка и только она: канон рисует рамку на самом поле,
   а браузер в светлой схеме добавлял свою — отсюда «рамка внутри рамки». */
html body.theme-dark .srch-page .inv-input,
html body.theme-dark .srch-page .inv-textarea,
html body.theme-dark .srch-page .inv-target-input,
html body.theme-dark .srch-page .srch-input__field .inv-target-input,
html body.theme-dark .srch-page .cln-range .inv-input--sm,
html body.theme-dark .srch-page .cln-adv-grid .inv-input:not(.inv-input--sm),
html body.theme-dark .srch-page .srch-card .inv-input:not(.inv-input--sm),
html body.theme-dark .srch-page .prs-stepper,
html body.theme-dark .srch-page .prs-days-custom,
html body.theme-dark .srch-page select,
html body.theme-dark .srch-page textarea {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink) !important;
  box-shadow: none !important;
}
html body.theme-dark .srch-page .inv-input:hover,
html body.theme-dark .srch-page .inv-target-input:hover,
html body.theme-dark .srch-page .prs-stepper:hover {
  border-color: var(--g-line-strong) !important;
}
html body.theme-dark .srch-page .inv-input:focus,
html body.theme-dark .srch-page .inv-input:focus-visible,
html body.theme-dark .srch-page .inv-target-input:focus,
html body.theme-dark .srch-page .inv-textarea:focus,
html body.theme-dark .srch-page textarea:focus {
  border-color: var(--g-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}
html body.theme-dark .srch-page .inv-input::placeholder,
html body.theme-dark .srch-page .inv-target-input::placeholder,
html body.theme-dark .srch-page .inv-textarea::placeholder,
html body.theme-dark .srch-page textarea::placeholder {
  color: var(--g-ink-faint) !important;
}
/* Степпер: поле внутри степпера своей рамки не имеет — рамку держит сам
   степпер. Вторая обводка тут и была лишней. */
html body.theme-dark .srch-page .prs-stepper input,
html body.theme-dark .srch-page .prs-stepper .inv-input {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .srch-page .prs-stepper button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--g-ink-mute) !important;
}
html body.theme-dark .srch-page .prs-stepper button:hover:not(:disabled) {
  background: rgba(232, 234, 237, 0.10) !important;
  color: var(--g-ink) !important;
}

/* Чипы режима (.srch-type) и плитки (.srch-depth__opt) */
html body.theme-dark .srch-page .srch-type,
html body.theme-dark .srch-page .srch-depth__opt {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink-mute) !important;
}
html body.theme-dark .srch-page .srch-type:hover:not(.is-dead):not(:disabled),
html body.theme-dark .srch-page .srch-depth__opt:hover:not(:disabled) {
  background: var(--g-surface-4) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .srch-page .srch-type.is-on,
html body.theme-dark .srch-page .srch-type.is-on.is-active,
html body.theme-dark .srch-page .srch-depth__opt.is-on,
html body.theme-dark .srch-page .srch-depth__opt.is-active,
html body.theme-dark .srch-page .srch-depth__opt.is-on.is-active {
  background: var(--g-sel) !important;
  border-color: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
html body.theme-dark .srch-page .srch-type.is-on:hover,
html body.theme-dark .srch-page .srch-depth__opt.is-active:hover {
  background: var(--g-sel-hover) !important;
}
html body.theme-dark .srch-page .srch-type.is-dead,
html body.theme-dark .srch-page .srch-type:disabled,
html body.theme-dark .srch-page .srch-depth__opt:disabled {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink-disabled) !important;
}

/* Кнопки строки ввода и списков */
html body.theme-dark .srch-page .srch-input__btn,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__btn,
html body.theme-dark .srch-page .cln-list-btn {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-primary) !important;
}
html body.theme-dark .srch-page .srch-input__btn:hover:not(:disabled),
html body.theme-dark .srch-page .cln-list-btn:hover:not(:disabled) {
  background: var(--g-surface-4) !important;
  border-color: var(--g-line-strong) !important;
}
html body.theme-dark .srch-page .cln-list-btn:disabled,
html body.theme-dark .srch-page .srch-input__btn:disabled {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink-disabled) !important;
}
html body.theme-dark .srch-page .cln-list-btn.is-filled {
  background: var(--g-sel) !important;
  border-color: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
/* Кнопка проверки рядом с полем ключа. Ступень та же, что у самого поля
   (--g-surface-3): пара «поле + действие над ним» ночью не расслаивается
   на светлое и тёмное. */
html body.theme-dark .srch-page .srch-key-btn {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-primary) !important;
}
html body.theme-dark .srch-page .srch-key-btn:hover:not(:disabled) {
  background: var(--g-surface-4) !important;
  border-color: var(--g-line-strong) !important;
}
html body.theme-dark .srch-page .srch-key-btn:disabled {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink-disabled) !important;
}
/* Галочка «заполнено» */
html body.theme-dark .srch-page .srch-input__done {
  background: var(--g-primary) !important;
  color: var(--g-primary-ink) !important;
}
html body.theme-dark .srch-page .srch-input__chip {
  background: var(--g-surface-4) !important;
  color: var(--g-ink) !important;
  border-color: transparent !important;
}
/* Счётчики-бейджи у кнопок ввода и списков. Канон красил их светло-серой
   плиткой с текстом #5f6368: в ночи бейдж оставался белым пятном на тёмной
   карточке, а текст — почти нечитаемым. */
html body.theme-dark .srch-page .srch-input__cnt,
html body.theme-dark .srch-page .srch-input.is-filled .srch-input__cnt,
html body.theme-dark .srch-page .cln-list-btn b,
html body.theme-dark .srch-page .srch-what b,
html body.theme-dark .srch-page .srch-card b[id] {
  background: rgba(232, 234, 237, 0.14) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .srch-page .cln-list-btn.is-filled b,
html body.theme-dark .srch-page .srch-input__btn.is-filled .srch-input__cnt {
  background: rgba(255, 255, 255, 0.20) !important;
  color: var(--g-sel-ink) !important;
}
/* Зона перетаскивания конвертера */
html body.theme-dark .srch-page .tdc-drop.is-drag {
  background: var(--g-tint) !important;
  border-color: var(--g-primary) !important;
}
/* Кнопку запуска ночь не перекрашивает: её заливка — опознавательный знак
   модуля (у клонера она фиолетовая, --cln-accent), и общий синий стёр бы это
   различие. Белым по насыщенному цвету читается одинаково в обеих темах.
   Ночи достаётся только выключенное состояние. */
html body.theme-dark .srch-page .prs-cta__start:disabled,
html body.theme-dark .prs-cta .btn--primary:disabled {
  background: var(--g-surface-4) !important;
  border-color: var(--g-surface-4) !important;
  color: var(--g-ink-disabled) !important;
}


/* ═══ 7. Модалки и окна ═══════════════════════════════════════════════════
   Канон модалок (addw): белая карточка r28. В ночи — та же карточка на
   --g-surface-2, шапка и подвал ступенью ниже не уходят: у Google в тёмной
   теме диалог однороден, разделяют его линии, а не заливки. */

html body.theme-dark .modal__panel,
html body.theme-dark .modal__panel--actions,
html body.theme-dark .modal__panel--role,
html body.theme-dark .modal__panel--edit-profile,
html body.theme-dark .modal__panel--privacy-form,
html body.theme-dark .modal__panel--privacy-list,
html body.theme-dark .modal__panel--folder,
html body.theme-dark .modal__panel--auto-delete,
html body.theme-dark .modal__panel--picker,
html body.theme-dark .modal .tg-security-modal,
html body.theme-dark .addw,
html body.theme-dark .addw__panel {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
  box-shadow: var(--g-shadow-3) !important;
}
html body.theme-dark .modal__head,
html body.theme-dark .modal__body,
html body.theme-dark .modal__foot,
html body.theme-dark .addw__head,
html body.theme-dark .addw__body,
html body.theme-dark .addw__foot,
html body.theme-dark .privacy-list__head,
html body.theme-dark .privacy-list__body,
html body.theme-dark .privacy-form__head,
html body.theme-dark .privacy-form__body,
html body.theme-dark .privacy-form__footer,
html body.theme-dark .modal .tg-security-head,
html body.theme-dark .modal .tg-security-body,
html body.theme-dark .modal .tg-security-footer {
  background: var(--g-surface-2) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .modal__head,
html body.theme-dark .addw__head,
html body.theme-dark .privacy-list__head,
html body.theme-dark .privacy-form__head,
html body.theme-dark .modal .tg-security-head {
  border-bottom-color: var(--g-line-soft) !important;
}
html body.theme-dark .modal__foot,
html body.theme-dark .addw__foot,
html body.theme-dark .privacy-form__footer,
html body.theme-dark .modal .tg-security-footer {
  border-top-color: var(--g-line-soft) !important;
}
html body.theme-dark .modal__title,
html body.theme-dark .addw__title {
  color: var(--g-ink) !important;
}
html body.theme-dark .modal__sub,
html body.theme-dark .addw__sub,
html body.theme-dark .modal__hint {
  color: var(--g-ink-mute) !important;
}
/* Затемнение под модалкой: в ночи оно должно быть глубже — иначе панель
   и фон различаются на глаз слабее, чем в светлой теме. */
html body.theme-dark .modal,
html body.theme-dark .modal__backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
}
html body.theme-dark .modal__close,
html body.theme-dark .addw__close {
  color: var(--g-ink-faint) !important;
  background: transparent !important;
}
html body.theme-dark .modal__close:hover,
html body.theme-dark .addw__close:hover {
  background: var(--g-surface-4) !important;
  color: var(--g-ink) !important;
}
/* Строки-варианты в модалках (роль, приватность, действия, папки) */
html body.theme-dark .privacy-list__row:hover,
html body.theme-dark .privacy-form__radio:hover,
html body.theme-dark .modal .tg-security-row:hover,
html body.theme-dark .modal__panel--actions .actions-list--telegram li:hover,
html body.theme-dark .addw__option:hover,
html body.theme-dark .role-modal__row:hover {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .modal__panel--actions .actions-list--telegram {
  background: var(--g-surface-2) !important;
}
html body.theme-dark .addw__option {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .addw__option.is-active,
html body.theme-dark .addw__option[aria-selected="true"] {
  background: var(--g-sel) !important;
  border-color: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
/* Кнопки-пилюли канона addw */
html body.theme-dark .addw__btn,
html body.theme-dark .btn--ghost,
html body.theme-dark .btn-ghost {
  background: transparent !important;
  border-color: var(--g-line) !important;
  color: var(--g-primary) !important;
}
html body.theme-dark .addw__btn:hover,
html body.theme-dark .btn--ghost:hover,
html body.theme-dark .btn-ghost:hover {
  background: rgba(168, 199, 250, 0.10) !important;
  border-color: var(--g-line-strong) !important;
}
/* Главную кнопку (.btn--primary) ночь НЕ перекрашивает.

   Пробовали залить её ночным акцентом #8ab4f8 с тёмной надписью — и получили
   обратное: заливку у части кнопок держат правила, заскопленные на id окна
   (например `#faq-modal .modal__foot .btn--primary`), они специфичнее и
   оставляли синий #0b57d0, а надпись успевала стать тёмной. Тёмно-синее на
   тёмно-синем.

   Считать все такие окна поимённо смысла нет: белый на #0b57d0 даёт 6.3:1 и
   на тёмном фоне читается ровно так же хорошо, как на светлом. Кнопка и
   задумана как единственное сплошное пятно цвета на экране — пусть им и
   остаётся. Ночь трогает только выключенное состояние, где серая заливка
   светлой темы на тёмном фоне выглядит как обычная кнопка. */
html body.theme-dark .btn--primary:disabled,
html body.theme-dark .addw__btn--primary:disabled {
  background: var(--g-surface-4) !important;
  border-color: var(--g-surface-4) !important;
  color: var(--g-ink-disabled) !important;
}
/* «Где работает модерация» (css/screens/moderation-server.css): её главная
   кнопка стоит на токене, а не на литерале по адресу окна с !important, и
   общий «призрачный» вид .addw__btn выше гасил её заливку. Возвращаем то, что
   велит правило о главной кнопке: то же сплошное пятно, что и днём. */
html body.theme-dark #md-server-modal .addw__btn--primary:not(:disabled) {
  background: var(--addw-primary-fill) !important;
  color: var(--addw-primary-ink) !important;
}
html body.theme-dark #md-server-modal .addw__btn--primary:not(:disabled):hover {
  background: var(--addw-primary-fill-hover) !important;
}
/* Обводка выбранной капсулы протокола: днём синяя #0b57d0, ночью — тот же
   синий палитры, что и её подпись. Механический перевод её не берёт: по
   светлоте тёмно-синий не дотягивает до порога линии, и капсула осталась бы
   в общей серой рамке — то есть без признака выбора. */
html body.theme-dark :is(#px-add-modal, #am-proxy-modal) .px-add-chip.is-on {
  border-color: #a8c7fa !important;
}
/* ── Окно планировщика ──────────────────────────────────────────────
   Светлый канон окна (ui_tweaks.css, блок «ОКНО ПЛАНИРОВЩИКА») написан по
   идиоме этого файла: цвет литералом, оба селектора сразу. Значит и ночь
   обязана перечислить те же места с id — иначе общий слой ниже по весу и
   окно остаётся белым. Меняем только цвет, геометрия у обеих тем общая. */
html body.theme-dark #schedule-modal .schedule-modal__panel {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
  box-shadow: var(--g-shadow-3) !important;
}
html body.theme-dark #schedule-modal .schedule-modal__title,
html body.theme-dark #schedule-modal .schedule-modal__body,
html body.theme-dark #schedule-modal .schedule-field .px-field__label {
  color: var(--g-ink) !important;
}
html body.theme-dark #schedule-modal .schedule-modal__hint {
  color: var(--g-ink-mute) !important;
}
html body.theme-dark #schedule-modal .schedule-modal__close {
  color: var(--g-ink-faint) !important;
}
html body.theme-dark #schedule-modal .schedule-modal__close:hover {
  background: var(--g-surface-4) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark #schedule-modal .schedule-field .px-input {
  background-color: var(--g-surface-2) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark #schedule-modal .schedule-field .px-input:focus {
  border-color: var(--g-primary) !important;
}
/* Подсказка под полем, тире промежутка и единица за ним — приглушённый
   текст, как и вся вспомогательная речь окна. */
html body.theme-dark #schedule-modal .schedule-field__hint,
html body.theme-dark #schedule-modal .schedule-range__sep,
html body.theme-dark #schedule-modal .schedule-range__suffix {
  color: var(--g-ink-mute) !important;
}
/* Внутренности поля времени рисует браузер сам, и значок календаря в тёмной
   карточке оставался чёрным на чёрном. Инвертировать картинку не нужно —
   достаточно сказать полю, в какой теме оно стоит: дальше браузер сам рисует
   и значок, и разделители светлыми. */
html body.theme-dark #schedule-modal .schedule-field__moment {
  color-scheme: dark !important;
}
/* Состав прогона — нейтральная ступень над карточкой; расписание рядом
   остаётся подсвеченным: два ответа на разные вопросы. */
html body.theme-dark #schedule-modal .schedule-compose {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark #schedule-modal .schedule-summary {
  background: var(--g-sel) !important;
  border-color: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
/* Главную кнопку ночь не перекрашивает (см. пояснение выше), вторичную —
   в ночной акцент. */
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--ghost {
  color: var(--g-primary) !important;
}
html body.theme-dark #schedule-modal .schedule-modal__foot .btn--ghost:hover {
  background: rgba(168, 199, 250, 0.10) !important;
  color: var(--g-primary) !important;
}


/* ═══ 8. Раскрывающиеся окна и меню ═══════════════════════════════════════
   Форма окна задана токенами --pop-* (переопределены выше), но часть окон
   вбивала цвет литералом мимо токенов — их и добираем здесь. */

html body.theme-dark .pop,
html body.theme-dark .popover,
html body.theme-dark .dropdown,
html body.theme-dark .dropdown-menu,
html body.theme-dark .px-check-menu__pop,
html body.theme-dark .ub2-source-menu__button,
html body.theme-dark .pick-bind__country-menu,
html body.theme-dark .srch-kw__menu,
html body.theme-dark #srch-kw-menu,
html body.theme-dark .am-filter-pop,
html body.theme-dark .table-cols-pop,
html body.theme-dark .page-size-pop {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink) !important;
  box-shadow: var(--g-shadow-3) !important;
}
html body.theme-dark .dropdown__item,
html body.theme-dark .pop__item,
html body.theme-dark .pick-bind__country-option,
html body.theme-dark .ub2-source-menu__item {
  color: var(--g-ink) !important;
  background: transparent !important;
}
html body.theme-dark .dropdown__item:hover,
html body.theme-dark .pop__item:hover,
html body.theme-dark .pick-bind__country-option:hover,
html body.theme-dark .pick-bind__country-option:focus,
html body.theme-dark .ub2-source-menu__item:hover,
html body.theme-dark .srch-kw__menu-item:hover {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .dropdown__item.is-active,
html body.theme-dark .pop__item.is-active,
html body.theme-dark .pick-bind__country-option.is-selected,
html body.theme-dark .ub2-source-menu__item.is-active {
  background: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
html body.theme-dark .srch-kw__menu-item--danger:hover {
  background: var(--g-danger-bg) !important;
  color: var(--g-danger-ink) !important;
}
html body.theme-dark .srch-kw__menu-badge {
  background: var(--g-warn-bg) !important;
  color: var(--g-warn-ink) !important;
}


/* ═══ 9. Окно выбора аккаунтов/чатов (pick-bind, picker, inv-base) ════════ */

html body.theme-dark .pick-bind__search input,
html body.theme-dark .inv-base-search input {
  background: var(--g-surface-3) !important;
  border-color: transparent !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .pick-bind__search input:hover,
html body.theme-dark .inv-base-search input:hover {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .pick-bind__search input:focus,
html body.theme-dark .pick-bind__search input:focus-visible,
html body.theme-dark .inv-base-search input:focus,
html body.theme-dark .inv-base-search input:focus-visible {
  background: var(--g-surface-4) !important;
  border-color: var(--g-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}
html body.theme-dark .pick-bind__filter select,
html body.theme-dark .pick-bind__country-toggle,
html body.theme-dark .pick-bind__chip {
  background: var(--g-surface-3) !important;
  border-color: var(--g-line) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .pick-bind__chip:hover,
html body.theme-dark .pick-bind__country-toggle:hover {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .pick-bind__chip.is-active,
html body.theme-dark .picker-chip.is-active {
  background: var(--g-sel) !important;
  border-color: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
html body.theme-dark .picker-chip.is-active:hover,
html body.theme-dark .pick-bind__chip.is-active:hover {
  background: var(--g-sel-hover) !important;
}
html body.theme-dark .pick-bind__row:hover:not([disabled]),
html body.theme-dark .inv-base-row:hover {
  background: var(--g-surface-4) !important;
}
html body.theme-dark .pick-bind__row.is-current,
html body.theme-dark .inv-base-row.is-picked,
html body.theme-dark .inv-base-row.is-active {
  background: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
}
html body.theme-dark .inv-base-row.is-picked:hover {
  background: var(--g-sel-hover) !important;
}
html body.theme-dark .pick-bind__row::after,
html body.theme-dark .inv-base-row::after {
  background: var(--g-line-soft) !important;
}
html body.theme-dark .pick-bind__row-ava {
  background: var(--g-tint) !important;
  color: var(--g-primary) !important;
}
html body.theme-dark .pick-bind__row-role,
html body.theme-dark .pick-bind__row-tag,
html body.theme-dark .inv-base-row__count {
  background: var(--g-surface-4) !important;
  color: var(--g-ink-mute) !important;
}
html body.theme-dark .pick-bind__row-tag--ok {
  background: var(--g-ok-bg) !important;  color: var(--g-ok-ink) !important;
}
html body.theme-dark .pick-bind__row-tag--warn {
  background: var(--g-warn-bg) !important; color: var(--g-warn-ink) !important;
}
html body.theme-dark .pick-bind__row-tag--bound,
html body.theme-dark .inv-base-row.is-picked .inv-base-row__count {
  background: var(--g-tint-strong) !important; color: var(--g-primary) !important;
}
html body.theme-dark .inv-base-modal__panel,
html body.theme-dark .ub-create-modal__panel,
html body.theme-dark .ub-detail-modal__panel {
  background: var(--g-surface-2) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark #inv-run-modal .inv-run-foot .btn--primary:disabled {
  background: var(--g-surface-4) !important;
  color: var(--g-ink-disabled) !important;
}


/* ═══ 10. Списочные таблицы ═══════════════════════════════════════════════
   Геометрию и поведение держит канон .app-table, ночь только красит.
   Ступени: страница --g-surface, плита таблицы --g-surface-2,
   gmail-бар и вкладки — та же плита (они её продолжение), наведение строки
   и футер — --g-surface-3. */

html body.theme-dark .am-table-card,
html body.theme-dark .table-card,
html body.theme-dark .am-table-shell,
html body.theme-dark .am-gmail-bar,
html body.theme-dark .ub2-gmail-bar,
html body.theme-dark .ubd-gmail-bar,
html body.theme-dark .px-flat__scroll,
html body.theme-dark .am-table-foot,
html body.theme-dark .table-footer,
html body.theme-dark .am-service-foot,
html body.theme-dark .px-tabs--row {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark table.app-table thead th,
html body.theme-dark .acc-table thead th,
html body.theme-dark .px-flat__table thead th,
html body.theme-dark .tm-table thead th,
html body.theme-dark .ub2-flat__table thead th,
html body.theme-dark .ubd-flat__table thead th {
  background: var(--g-surface-2) !important;
  color: var(--g-ink-mute) !important;
  border-bottom-color: var(--g-line) !important;
}
html body.theme-dark table.app-table tbody td,
html body.theme-dark .acc-table tbody td,
html body.theme-dark .px-flat__table tbody td,
html body.theme-dark .tm-table tbody td {
  border-bottom-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .ub2-table tbody tr:hover,
html body.theme-dark table.app-table tbody tr:hover td,
html body.theme-dark .acc-table tbody tr:hover td,
html body.theme-dark .px-flat__table tbody tr:hover td {
  background: var(--g-surface-3) !important;
}
/* Поисковая полоса таблицы: одна заливка, без второй рамки внутри. */
html body.theme-dark .am-search-field,
html body.theme-dark .ub2-gmail-search,
html body.theme-dark .am-bar__search {
  background: var(--g-surface-3) !important;
  border-color: transparent !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .am-search-field:focus-within,
html body.theme-dark .ub2-gmail-search:focus-within {
  background: var(--g-surface-4) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.theme-dark .am-search-field input,
html body.theme-dark .ub2-gmail-search input,
html body.theme-dark .am-bar__search input {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--g-ink) !important;
  box-shadow: none !important;
}
html body.theme-dark .am-search-field input::placeholder,
html body.theme-dark .ub2-gmail-search input::placeholder {
  color: var(--g-ink-faint) !important;
}
/* Кнопки бара и шестерёнка строки */
html body.theme-dark .stat.am-stat,
html body.theme-dark .stat,
html body.theme-dark .am-stat,
html body.theme-dark .card,
html body.theme-dark .px-card,
html body.theme-dark .am-bar {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
  box-shadow: none !important;
}
/* Кнопка «Добавить …» в строке опознания */
html body.theme-dark .am-table-head__add {
  background: var(--g-sel) !important;
  color: var(--g-sel-ink) !important;
  border-color: transparent !important;
}
html body.theme-dark .am-table-head__add:hover {
  background: var(--g-sel-hover) !important;
}
/* Строка опознания и заголовок таблицы */
html body.theme-dark .am-table-head__title,
html body.theme-dark .table-head__title {
  color: var(--g-ink) !important;
}
/* Точка «занят» — янтарь читается на тёмном как есть. Точки «идёт проверка»
   у прокси аккаунта здесь больше нет: ход проверки ведёт кольцо на месте
   значка связи, и тон ему даёт итог (см. блок статусов ниже). */
html body.theme-dark .px-flat__busy.is-on .px-flat__busy-dot {
  background: var(--g-warn-ink) !important;
}


/* ═══ 11. Поля ввода вне канонов ══════════════════════════════════════════
   Общее правило ночи: у поля одна обводка и одна заливка. Светлая тема
   местами ставила и рамку, и внутреннюю тень, и собственный фон у
   вложенного <input> — в ночи это читалось как рамка внутри рамки. */

html body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body.theme-dark select,
html body.theme-dark textarea,
html body.theme-dark .inv-input,
html body.theme-dark .inv-textarea,
html body.theme-dark .search input {
  background: var(--g-surface-3);
  border-color: var(--g-line);
  color: var(--g-ink);
}
html body.theme-dark input::placeholder,
html body.theme-dark textarea::placeholder {
  color: var(--g-ink-faint);
}
html body.theme-dark input:focus,
html body.theme-dark select:focus,
html body.theme-dark textarea:focus {
  border-color: var(--g-primary);
  box-shadow: none;
  outline: none;
}
/* Поле, вложенное в оболочку с собственной рамкой, своей не имеет. */
html body.theme-dark .search input,
html body.theme-dark .srch-input__field input,
html body.theme-dark .inv-base-search input,
html body.theme-dark .pick-bind__search input,
html body.theme-dark .am-search-field input,
html body.theme-dark .sidebar__search input {
  box-shadow: none !important;
}
/* Раскрывающийся список: список рисует браузер, ему нужна тёмная схема
   (см. color-scheme выше) и тёмный фон опций. */
html body.theme-dark select option,
html body.theme-dark select optgroup {
  background: var(--g-surface-3);
  color: var(--g-ink);
}
/* Переключатели */
html body.theme-dark .switch__slider,
html body.theme-dark .toggle__slider {
  background: var(--g-surface-5) !important;
}
html body.theme-dark .switch__slider::before,
html body.theme-dark .toggle__slider::before {
  background: var(--g-ink-mute) !important;
}
html body.theme-dark .switch input:checked + .switch__slider,
html body.theme-dark .toggle input:checked + .toggle__slider {
  background: var(--g-primary) !important;
}
html body.theme-dark .switch input:checked + .switch__slider::before,
html body.theme-dark .toggle input:checked + .toggle__slider::before {
  background: var(--g-primary-ink) !important;
}


/* ═══ 12. Настройки, личный кабинет, окна «Помощи» ════════════════════════ */

html body.theme-dark .accp-card,
html body.theme-dark .help-card,
html body.theme-dark .mod-intro {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .accp-card:hover {
  background: var(--g-surface-3) !important;
}
html body.theme-dark .stgp-btn--plain {
  background: transparent !important;
  border-color: var(--g-line) !important;
  color: var(--g-primary) !important;
}
html body.theme-dark .stgp-btn--plain:hover {
  background: rgba(168, 199, 250, 0.10) !important;
}
html body.theme-dark .accp-card__title,
html body.theme-dark .help-h2 {
  color: var(--g-ink) !important;
}


/* ═══ 13. Панель задач, уведомления, подсказки ════════════════════════════ */

html body.theme-dark .tm-dock,
html body.theme-dark .tm-card,
html body.theme-dark .task-detail-card,
html body.theme-dark .notif-panel,
html body.theme-dark .notif-item,
html body.theme-dark .dlg,
html body.theme-dark .dlg__panel {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line-soft) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .tm-card__act {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--g-ink-mute) !important;
}
html body.theme-dark .tm-card__act:hover {
  background: rgba(232, 234, 237, 0.10) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .tm-card__act--continue {
  color: var(--g-primary) !important;
}
html body.theme-dark .tm-card__act--continue:hover {
  background: var(--g-tint) !important;
}
/* Тосты и нативные подсказки «?» */
html body.theme-dark .toast,
html body.theme-dark .inv-tip,
html body.theme-dark .tip-bubble,
html body.theme-dark [data-sidebar-tooltip]::after {
  background: var(--g-surface-5) !important;
  color: var(--g-ink) !important;
  border-color: var(--g-line) !important;
  box-shadow: var(--g-shadow-2) !important;
}


/* ═══ 13Б. Залитое акцентом и выключенное ═════════════════════════════════

   Два случая, которые машинный перевод палитры не берёт и взять не может.

   Первый — надпись НА заливке акцентом. В светлой теме акцент тёмно-синий
   (#0b57d0) и надпись белая. В ночи акцент по правилам Google светлеет до
   #a8c7fa — иначе он не читается как акцент на тёмном, — и белая надпись на
   нём исчезает. Значит вместе с акцентом обязана перевернуться и надпись:
   тёмно-синяя #062e6f поверх светлой заливки. Правило перечисляет ровно те
   места, где заливка берётся из акцентного токена.

   Второй — «выключено», записанное полупрозрачным чернильным тоном
   (rgba(31,31,31,.38) — токен Material для disabled). Прозрачность
   складывается с фоном, поэтому на тёмном такой тон уходит в ноль. Ночная
   пара — тот же приём, но от светлых чернил. */

html body.theme-dark .srch-page .prs-cta__start:not([disabled]),
html body.theme-dark .srch-page .srch-input__done,
html body.theme-dark .picker-gmail-bar__badge,
html body.theme-dark .am-filter-count {
  color: var(--g-primary-ink) !important;
}
html body.theme-dark .srch-page .prs-cta__start:not([disabled]) svg,
html body.theme-dark .srch-page .srch-input__done svg {
  color: var(--g-primary-ink) !important;
  stroke: var(--g-primary-ink) !important;
}

html body.theme-dark .accp-btn[disabled],
html body.theme-dark .accp-btn--text[disabled],
html body.theme-dark .srch-page .prs-cta__start[disabled],
html body.theme-dark #srch-kw-menu .srch-kw__menu-item[disabled] {
  color: rgba(227, 227, 227, 0.38) !important;
}
html body.theme-dark .accp-btn[disabled],
html body.theme-dark .srch-page .prs-cta__start[disabled] {
  background: rgba(227, 227, 227, 0.12) !important;
}
html body.theme-dark #srch-kw-menu .srch-kw__menu-item[disabled] svg {
  color: rgba(227, 227, 227, 0.38) !important;
}
html body.theme-dark .srch-page .srch-type__cnt {
  background: rgba(227, 227, 227, 0.14) !important;
}

/* Вводный блок модуля (.mod-intro) раздаёт свои три цвета на себе самом —
   переопределяем там же, иначе заголовок остаётся почти чёрным. */
html body.theme-dark .mod-intro {
  --mod-tint: var(--g-tint) !important;
  --mod-accent: var(--g-primary) !important;
  --mod-ink: var(--g-ink) !important;
}

/* Полосы прокрутки, заданные чернильным тоном светлой темы. */
html body.theme-dark #edit-privacy-modal .privacy-list__body,
html body.theme-dark .privacy-list__body,
html body.theme-dark .privacy-form__body {
  scrollbar-color: rgba(227, 227, 227, 0.30) transparent !important;
}


/* ═══ 13В. Ночь без линий ═════════════════════════════════════════════════

   В светлой теме границу между областями держит линия: на белом фоне
   разница поверхностей почти не читается, и без неё сайдбар слипся бы с
   таблицей. В тёмной теме всё наоборот — оболочка окна (шапка, сайдбар,
   страница) держит один ровный фон #131314, а поднято над ним только
   содержимое: плита таблицы #1e1f22. Границу показывает сама ступень, и
   линия поверх неё становится лишним швом: две границы вместо одной.

   Поэтому ночь снимает внешнюю обводку целиком — у сайдбара, у верхней
   панели и над таблицей. Цветом, а не шириной: `border-width` тронуть
   нельзя, иначе раскладка тем разъедется на пиксель.

   Свёрнутый рельс перечислен отдельной строкой: у него `.sidebar-collapsed`
   даёт лишний класс, и правило карты (оно переводит светлую линию #e0e0e0)
   выигрывало по специфичности — полоска возвращалась на рельс, хотя у
   развёрнутого сайдбара её уже не было. */

html body.theme-dark .sidebar,
html body.theme-dark .sidebar.sidebar--v2,
html body.theme-dark.sidebar-collapsed .sidebar.sidebar--v2 {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}
html body.theme-dark .tp-topbar {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
/* Полоса над таблицей — верхняя граница шапки. Ниже неё канон ставит вторую,
   разделяющую шапку и строки; в ночи шапку от строк отделяет наведение и
   приглушённый тон подписей, линия для этого не нужна. */
html body.theme-dark table.app-table thead th,
html body.theme-dark table.app-table thead tr,
html body.theme-dark .acc-table thead th,
html body.theme-dark .px-flat__table thead th,
html body.theme-dark .tm-table thead th,
html body.theme-dark .ub2-flat__table thead th,
html body.theme-dark .ubd-flat__table thead th,
html body.theme-dark tr.px-flat__head,
html body.theme-dark tr.px-flat__head th,
html body.theme-dark tr.ub2-flat__head,
html body.theme-dark tr.am-flat__head {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
html body.theme-dark .am-table-card,
html body.theme-dark .table-card,
html body.theme-dark .am-table-shell,
html body.theme-dark .am-gmail-bar,
html body.theme-dark .ub2-gmail-bar,
html body.theme-dark .ubd-gmail-bar,
html body.theme-dark .px-tabs--row,
html body.theme-dark .am-table-head,
html body.theme-dark .am-table-foot,
html body.theme-dark .am-service-foot,
html body.theme-dark .table-footer,
html body.theme-dark .px-flat__scroll {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Разделители строк остаются, но как фактура, а не как линия: на тёмной
   плите даже #303236 читался отдельным штрихом. */
html body.theme-dark {
  --app-table-cell-border: #26282c;
  --px-row-divider: #26282c;
}
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-cell-border: #26282c;
}

/* Раскрывающиеся окна: внешней обводки нет вовсе. Окно поднято над
   страницей на две ступени и лежит под тенью — этого хватает, чтобы читать
   его как отдельный слой. Серая рамка поверх выглядела наклейкой. */
html body.theme-dark .pop,
html body.theme-dark .popover,
html body.theme-dark .dropdown,
html body.theme-dark .dropdown-menu,
html body.theme-dark .px-check-menu__pop,
html body.theme-dark .ub2-source-menu__button,
html body.theme-dark .pick-bind__country-menu,
html body.theme-dark .srch-kw__menu,
html body.theme-dark #srch-kw-menu,
html body.theme-dark .am-filter-pop,
html body.theme-dark .am-actions-menu,
html body.theme-dark .table-cols-pop,
html body.theme-dark .page-size-pop,
html body.theme-dark .notif-pop__card,
html body.theme-dark .inv-chat-suggestions {
  border-color: transparent !important;
  box-shadow: var(--g-shadow-3) !important;
}
html body.theme-dark {
  --pop-border-color: transparent;
  --pop-sep: #2b2d31;
}


/* ═══ 13Г. Наведение и выделение ══════════════════════════════════════════

   Три состояния строки обязаны отличаться с одного взгляда и переключаться
   мгновенно — длительность у ночи и дня одна, её задаёт канон таблиц.

       наведение  — белый налёт 8 % поверх плиты;
       выделено   — залитый контейнер #004a77 и надпись #c2e7ff;
       выделено и под курсором — та же заливка на тон светлее.

   Надпись на выделенной строке меняется вместе с заливкой: серый #e3e3e3
   поверх синего читается как обычная строка, из-за чего выделение и не
   ощущалось состоянием. */

/* Тон налёта. Канон красит наведение как
   `rgba(var(--app-table-accent-rgb), var(--app-table-row-hover-a))`, а
   --app-table-accent-rgb — это синий акцент светлой темы (37, 99, 235).
   Восемь процентов тёмно-синего поверх тёмной плиты не видно вообще: строка
   под курсором выглядела точно так же, как соседняя. В ночи налёт делается
   светлым — как у Google, где наведение это белый на 8 %. */
html body.theme-dark {
  --app-table-accent-rgb: 232, 234, 237;
  --app-table-row-hover-a: 0.08;
  --am-accent-2-rgb: 168, 199, 250;
  --lic-accent-rgb: 168, 199, 250;
}
html body.theme-dark :is(.view-am, .view-proxy, .view-userbase--v2, .view-tasks, .view-moderation) .am-table-shell {
  --app-table-accent-rgb: 232, 234, 237;
  --app-table-row-hover-a: 0.08;
}
html body.theme-dark table.app-table tbody tr.is-sel-row,
html body.theme-dark table.app-table tbody tr.is-sel-row td,
html body.theme-dark .px-flat__row.is-sel-row,
html body.theme-dark .px-flat__row.is-sel-row td,
html body.theme-dark .acc-table tbody tr.is-sel-row td,
html body.theme-dark .tm-table tbody tr.is-sel-row td {
  color: var(--g-sel-ink) !important;
}
html body.theme-dark table.app-table tbody tr.is-sel-row:hover,
html body.theme-dark table.app-table tbody tr.is-sel-row:hover td,
html body.theme-dark .px-flat__row.is-sel-row:hover,
html body.theme-dark .px-flat__row.is-sel-row:hover td {
  background: var(--g-sel-hover) !important;
}

/* Кнопки-иконки и строки окон: одно правило наведения на все семейства —
   налёт 8 %, как у строки таблицы. Разнобой брался из того, что каждое
   семейство красило наведение своим серым из светлой палитры. */
html body.theme-dark .icon-btn:hover:not(:disabled),
html body.theme-dark .quick-act:hover:not(:disabled),
html body.theme-dark .am-cols-btn:hover,
html body.theme-dark .app-table__gear:hover,
html body.theme-dark .picker-gmail-bar__btn:hover,
html body.theme-dark .px-gmail-bar__btn:hover,
html body.theme-dark .tp-topbar__icon-btn:hover,
html body.theme-dark .modal__close:hover,
html body.theme-dark .addw__close:hover {
  background: rgba(232, 234, 237, 0.08) !important;
  color: var(--g-ink) !important;
}
html body.theme-dark .icon-btn:active:not(:disabled),
html body.theme-dark .quick-act:active:not(:disabled),
html body.theme-dark .am-cols-btn:active,
html body.theme-dark .app-table__gear:active {
  background: rgba(232, 234, 237, 0.14) !important;
}


/* ═══ 13Д. Поле поиска в верхней панели ═══════════════════════════════════

   Единственное место, где ночи разрешено назвать не-цветовое свойство, и
   оно же — единственное, где ночь ОБЯЗАНА это сделать.

   Общий канон верхней панели задаёт вводу 13px, а светлая тема отдельным
   блоком `body:not(.theme-dark)` поднимает его до 15px. Ночи этот блок не
   достаётся, и при переключении текст в поиске мельчал. Здесь ночь берёт
   ту же величину — не «своя раскладка», а возврат к общей.

   Исключение поимённо перечислено в tests/unit/test_theme_dark_scope_contract.py:
   любое ДРУГОЕ не-цветовое свойство в файлах ночи тест по-прежнему валит. */
html body.theme-dark .tp-topbar__search input {
  font-size: 15px !important;
}


/* ═══ 14. Смысловые заливки ═══════════════════════════════════════════════
   Светлая тема раскладывала их пастельными плитками Google (#e6f4ea,
   #fef7e0, #fce8e6, #e8f0fe). В ночи те же смыслы несёт прозрачный тон
   поверх поверхности — так плитка не спорит со ступенью, на которой лежит. */

html body.theme-dark .badge--ok,
html body.theme-dark .chip--ok,
html body.theme-dark .tag--ok,
html body.theme-dark .is-ok {
  background: var(--g-ok-bg) !important;   color: var(--g-ok-ink) !important;
}
/* Пилюля статуса таблицы прокси — обводка вместо заливки (дневной канон в
   ui_tweaks.css, блок «Proxy table final reset»). Ночь снимает заливку и
   задаёт тон — сама рамка приходит из дневного правила и от темы не зависит:
   её цвет и так `currentColor`. Руками, а не картой: карта перевела старую
   ЗАЛИВКУ и до сих пор держит её `background-color` с !important — под ней
   обводки не было бы видно.

   Тонов у состояния два — рамка (`--px-status-line`) и подпись
   (`--px-status-ink`), — и ночь задаёт оба: дневные объявлены без
   `:not(.theme-dark)`, поэтому иначе рамка осталась бы дневной. Ночью тон у
   них общий: на тёмном фоне подпись обязана быть светлой, и «темнее рамки»
   означало бы «хуже видно». */
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__status {
  background: transparent !important;
  color: var(--px-status-ink, #9aa0a6) !important;
}
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__status--ok {
  --px-status-line: #a8dab5;
  --px-status-ink: #a8dab5;
}
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__status--error {
  --px-status-line: #f2b8b5;
  --px-status-ink: #f2b8b5;
}
html body.theme-dark.is-proxy-screen .view-proxy .px-flat__status--untested {
  --px-status-line: #9aa0a6;
  --px-status-ink: #9aa0a6;
}

/* Пилюля статуса аккаунта — та же обводка вместо заливки (дневной канон в
   ui_tweaks.css, блок «Статусы аккаунтов»). Ночь снимает заливку и задаёт оба
   тона: дневные переменные объявлены без `:not(.theme-dark)`, а карта до сих
   пор держит ночную ЗАЛИВКУ с !important — под ней обводки не было бы видно.
   Селектор повторяет форму карты (.view-am .acc-table), иначе перевод карты
   выигрывает по специфичности; второй, короткий — для окна запуска задачи,
   которое рисует ту же строку. Тон у рамки и подписи ночью общий: на тёмном
   фоне «темнее» значит «хуже видно». */
html body.theme-dark td[data-col="status"] .status,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status {
  background: transparent !important;
  color: var(--status-ink, #c4c7c5) !important;
}
html body.theme-dark td[data-col="status"] .status--active,
html body.theme-dark td[data-col="status"] .status--alive,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--active,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--alive {
  --status-line: #a8dab5; --status-ink: #a8dab5;
}
html body.theme-dark td[data-col="status"] .status--frozen,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--frozen {
  --status-line: #a8c7fa; --status-ink: #a8c7fa;
}
html body.theme-dark td[data-col="status"] .status--spamblock_temp,
html body.theme-dark td[data-col="status"] .status--spamblock_perm,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--spamblock_temp,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--spamblock_perm {
  --status-line: #fdd663; --status-ink: #fdd663;
}
html body.theme-dark td[data-col="status"] .status--banned,
html body.theme-dark td[data-col="status"] .status--dead,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--banned,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--dead {
  --status-line: #f2b8b5; --status-ink: #f2b8b5;
}
html body.theme-dark td[data-col="status"] .status--skip,
html body.theme-dark td[data-col="status"] .status--skipped,
html body.theme-dark td[data-col="status"] .status--unknown,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--skip,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--skipped,
html body.theme-dark .view-am .acc-table td[data-col="status"] .status--unknown {
  --status-line: #c4c7c5; --status-ink: #c4c7c5;
}

/* Чип роли — та же обводка, что у пилюли статуса (дневной канон в
   ui_tweaks.css, блок «Роль в таблице»). Тон у роли один на все роли и
   приезжает токеном акцента: `.role-tag` в css/components/role-tag.css
   берёт `--g-primary`, а ночь переопределяет сам акцент выше по файлу
   (#a8c7fa) — поэтому краски здесь НЕ назначаются вовсе, иначе решение о
   цвете роли принималось бы в двух местах.

   Правило всё же нужно: у чипа в колонке дневной канон написан с
   `!important` (ui_tweaks.css), и ночи надо перебить его не значением, а
   тем же оружием — важностью на тех же трёх свойствах. */
html body.theme-dark .role-tag {
  background: transparent !important;
  border-color: var(--role-line) !important;
  color: var(--role-ink) !important;
}

/* «+N» оттенка не носит ни днём, ни ночью: это счётчик спрятанных ролей, а
   не роль. Краски те же нейтральные токены, что и днём (ночь переопределяет
   их значения выше) — правило здесь нужно только затем, чтобы перебить
   ночной чип роли: у него селектор длиннее, и без этой строки счётчик
   покрасился бы ролью. */
html body.theme-dark .role-tag--more,
html body.theme-dark .view-am .acc-table .role-tag--more {
  --role-line: var(--border-strong);
  --role-ink: var(--text-mute);
  border-color: var(--role-line) !important;
  color: var(--role-ink) !important;
}

/* Значок связи в колонке «Прокси» — тон итога проверки. Он же достаётся
   кольцу под проверкой (`currentColor`). Карандаш ночью нейтрален и берёт
   --text-mute, который ночь уже переопределяет выше. */
html body.theme-dark .view-am .acc-table .am-proxy--ok .am-proxy__check {
  color: #a8dab5 !important;
}
html body.theme-dark .view-am .acc-table .am-proxy--error .am-proxy__check {
  color: #f2b8b5 !important;
}

/* Поле тегов в окне «Теги аккаунта» — ОДИН короб, а не короб с полем внутри.
   Ночь красит любой <input> своей заливкой (--g-surface-3 правилом выше по
   файлу), и внутри рамки проступал второй, светлее, прямоугольник. Ввод здесь
   — часть короба: своего фона у него быть не должно. Правило живёт тут, а не
   в файле экрана, потому что перебить ночное правило можно только ночным:
   theme_dark.css подключается последним. */
html body.theme-dark #am-role-modal .amrole__input {
  background: transparent;
  background-color: transparent;
}

/* Журнала созданных чатов здесь нет намеренно. Оболочку таблицы он берёт из
   правил .view-moderation выше — экран носит тот же класс, — а части ячеек
   написаны на токенах (--text-mute, --text-light, --g-primary, --g-warn-*),
   которые ночь уже переопределяет выше по файлу. Дублировать их значило бы
   завести второе место, где решается цвет одного и того же элемента. */

/* ═══ keyboard.css ═══ */
/* ============================================================================
   КЛАВИАТУРА — единый канон работы программы без мыши.
   Логика: webapp/static/js/keyboard.js. Здесь только то, что видно глазом:
   курсор таблицы, ссылка «к содержимому», окно горячих клавиш.

   СВОЕЙ ОБВОДКИ ФОКУСА СЛОЙ НЕ РИСУЕТ. Кольцо здесь было — общее, на все
   фокусируемые элементы программы разом, — и оно оказалось неуместным: у
   большинства элементов свой вид отклика, а навязанный поверх синий контур
   спорил с ним. Как элемент отвечает на Tab и чем подсвечивается, решает сам
   элемент; сюда общее правило на всю программу больше не заводим.

   Файл подключается ПОСЛЕДНИМ — после theme_dark.css: правила фона строк
   расписаны селекторами с id (наведение, выделение, чётность), и курсору
   таблицы нужно последнее слово в каскаде. Ночь при этом канон не теряет: её
   цвета объявлены здесь же, каждый — селектором на `body.theme-dark` (канон
   ночного режима).
   ============================================================================ */

:root {
  /* Подложка курсора таблицы: строка под кареткой при ходе стрелками. */
  --kbd-row-bg:      rgba(11, 87, 208, 0.06);
  --kbd-skip-bg:     #0b57d0;
  --kbd-skip-fg:     #ffffff;
  /* Подпись клавиши в окне подсказки и в статьях помощи. */
  --kbd-key-bg:      #f1f3f4;
  --kbd-key-border:  #dadce0;
  --kbd-key-fg:      #1f1f1f;
}

body.theme-dark {
  --kbd-row-bg:      rgba(138, 180, 248, 0.12);
  --kbd-skip-bg:     #8ab4f8;
  --kbd-skip-fg:     #202124;
  --kbd-key-bg:      #2d2f31;
  --kbd-key-border:  #4a4d50;
  --kbd-key-fg:      #e8eaed;
}

/* ─── Обводки фокуса здесь нет ──────────────────────────────────────────────
   Тут стоял слой с общим кольцом: `body.is-kbd :focus` и `:focus-visible` на
   всю программу разом, плюс поправки для полей, чекбоксов, переключателей,
   строк и ячеек. Правило было одно на все элементы — и потому неуместное:
   свой отклик на фокус у элементов разный, а навязанный поверх синий контур
   с ним спорил.

   Правило на всю программу сюда больше не заводим. Как элемент отвечает на
   Tab и чем подсвечивается — решение самого элемента, и принимает его не
   этот слой. Слой отвечает только за ПОРЯДОК обхода и за клавиши. */

/* ─── Курсор таблицы ────────────────────────────────────────────────────────
   Строка под кареткой при ходе стрелками. Выделение (`is-sel-acc`,
   `is-sel-row`) — своё состояние и свой цвет; каретка живёт поверх и не
   притворяется выбором.

   В слое: фон строк расписан правилами с id (наведение, выделение,
   чётность), и без слоя каретку было бы не видно ровно там, где она нужнее
   всего. Это подложка, а не обводка. */
@layer keyboard {
  body.is-kbd tr.kbd-cursor > td {
    background: var(--kbd-row-bg) !important;
  }
}

/* ─── Ссылка «Перейти к содержимому» ────────────────────────────────────────
   Первый Tab на странице. Живёт за пределами экрана и выезжает от фокуса. */
.kbd-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  transform: translateY(-200%);
  padding: 10px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--kbd-skip-bg);
  color: var(--kbd-skip-fg);
  font: 500 14px/1 var(--app-font);
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: transform var(--motion-draw) var(--motion-ease-enter);
}

.kbd-skip:focus {
  transform: translateY(0);
}

/* ─── Область под F6 ────────────────────────────────────────────────────────
   Прыжок между областями отмечался вспышкой — рамкой по краю той области,
   куда попал фокус. Это была такая же навязанная обводка, как кольцо, и ушла
   она вместе с ним: F6 по-прежнему переносит фокус, но своего контура слой не
   рисует. Чем отвечать на прыжок — решает оформление самих областей. */

/* ─── Окно «Горячие клавиши» ────────────────────────────────────────────────
   Форма — канон addw (карточка r28, заголовок 23/500, пилюли 40/r20):
   окно заводится общей разметкой .addw и берёт стиль оттуда. Здесь только
   то, чего в addw нет: две колонки списка и подписи клавиш. */
.addw.addw--kbd-help {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: auto;
}

.kbd-help__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 32px;
}

.kbd-help__group {
  break-inside: avoid;
}

.kbd-help__group-title {
  margin: 16px 0 8px;
  font: 500 14px/20px var(--app-font);
  color: var(--text-mute);
}

.kbd-help__group:first-child .kbd-help__group-title {
  margin-top: 0;
}

.kbd-help__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding: 4px 0;
}

.kbd-help__what {
  font: 400 14px/20px var(--app-font);
  color: var(--text);
}

.kbd-help__keys {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.kbd-help__sep {
  font: 400 12px/20px var(--app-font);
  color: var(--text-light);
}

kbd,
.kbd-key {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--kbd-key-border);
  border-radius: 4px;
  background: var(--kbd-key-bg);
  color: var(--kbd-key-fg);
  font: 500 12px/16px var(--app-font);
  text-align: center;
}

/* ─── Пользователь просил ОС убрать анимации ────────────────────────────────
   Выезд ссылки — отклик на действие, глушим по канону. */
@media (prefers-reduced-motion: reduce) {
  .kbd-skip { transition: none; }
}

/* ═══ прослойка страницы (server/moderation/web/src/shim.css) ═══ */
/* ═══ Страница модерации: то, чего нет в программе ═══════════════════════
   Экран собран из файлов программы, и его правила приезжают как есть. Здесь
   только то, чем страница отличается от окна программы: у неё нет сайдбара и
   верхней панели, зато есть вход по ключу.

   Цвета и отступы — токенами (css/tokens.css): ночь переопределяет те же
   токены, поэтому своего ночного слоя у страницы нет. */

body.mdweb {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--app-font);

  /* Поле страницы. В программе его нет вовсе: роль поля играет сайдбар, и
     контент начинается сразу за ним. Здесь сайдбара нет, поэтому отступ свой —
     и один на шапку и на экран, иначе заголовок и первая карточка разъезжаются.
     На узком окне поле меньше: там дорога каждая колонка таблицы. */
  --mdweb-gutter: var(--space-24);
}

@media (max-width: 900px) {
  body.mdweb {
    --mdweb-gutter: var(--space-16);
  }
}

/* Каркас программы — сетка «сайдбар + экран». Сайдбара здесь нет: колонка
   схлопывается, экран занимает всю ширину.

   `html body.mdweb` и `!important` — не украшение. Ширину сайдбара в программе
   задаёт цепочка правил из замороженного ui_tweaks.css, самое тяжёлое из них —
   `html body.theme-dark .app { … !important }` в медиазапросе. Без такого же
   веса экран остаётся в узкой колонке рядом с пустым местом. */
html body.mdweb .app {
  grid-template-columns: minmax(0, 1fr) !important;
  /* В программе ширина колонок ещё и анимирована — сайдбар складывается за
     280 мс. Складывать здесь нечего, а незавершённый переход оставляет сетку
     на старом значении (панель браузера морозит анимации). */
  transition: none !important;
  min-height: auto;
}

/* Экраны модерации — те же <main class="main">, что в программе. Вес тот же и
   по той же причине.

   Поле по краям — своё решение страницы (`--mdweb-gutter` выше): в программе
   `html body .main { padding: 0 0 96px !important }`, и без сайдбара карточки
   упирались бы в край окна. */
html body.mdweb .main {
  grid-column: 1 !important;
  padding-left: var(--mdweb-gutter) !important;
  padding-right: var(--mdweb-gutter) !important;
}

/* Готовый прокси берётся из раздела «Прокси» программы, а его на сервере нет.
   Способ «вручную» рядом остаётся — он работает и здесь. */
body.mdweb [data-md-proxy-mode="saved"],
body.mdweb [data-md-proxy-pane="saved"] {
  display: none !important;
}

/* ── Шапка страницы ───────────────────────────────────────────────── */

.mdweb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--mdweb-gutter);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.mdweb-top[hidden] {
  display: none;
}

.mdweb-top__name {
  font-size: var(--fs-16);
  font-weight: 600;
}

.mdweb-top__tools {
  display: flex;
  gap: var(--space-8);
}

.mdweb-btn {
  height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.mdweb-btn:hover {
  background: var(--bg-hover);
}

/* ── Вход по ключу ────────────────────────────────────────────────── */

.mdweb-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: grid;
  place-items: center;
  padding: var(--space-24);
  background: var(--bg-app);
}

.mdweb-gate[hidden] {
  display: none;
}

.mdweb-gate__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 360px;
  max-width: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.mdweb-gate__title {
  font-size: var(--fs-20);
  font-weight: 500;
}

.mdweb-gate__hint {
  margin: 0;
  color: var(--text-mute);
  font-size: var(--fs-13);
  line-height: 18px;
}

.mdweb-gate__error {
  color: var(--red);
  font-size: var(--fs-13);
  line-height: 18px;
}

.mdweb-gate__error[hidden] {
  display: none;
}

.mdweb-gate input {
  box-sizing: border-box;
  height: 40px;
  padding: 0 var(--space-14);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-15);
}

.mdweb-gate input:focus-visible {
  outline: none;
  border-color: var(--primary);
}

.mdweb-gate__go {
  height: 40px;
  border: 0;
  border-radius: var(--radius-20);
  background: var(--addw-primary-fill);
  color: var(--addw-primary-ink);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

.mdweb-gate__go:hover {
  background: var(--addw-primary-fill-hover);
}

.mdweb-gate__go[disabled] {
  opacity: .5;
  cursor: default;
}