:root {
  /* Общий масштаб интерфейса (как браузерный зум, но зашитый). 0.75 = комфортные 75%. */
  --ui-scale: 0.75;
  /* Ширина левого меню. Меню всегда одной ширины, с подписями (каркас как в Keitaro,
     согласован Борисом 04.09.2026) — в узкую полоску иконок больше не сворачивается. */
  --rail-w: 222px;
  /* Высота верхней строки (до зума 0.75 → на экране ~42px, как в трекере). */
  --topbar-h: 56px;

  /* ── Верхняя строка — тёмная в обеих темах (как в Keitaro) ── */
  --topbar-bg: #14161f;
  --topbar-text: #e7e9f0;
  --topbar-muted: #8b8fa3;
  --topbar-fill: rgba(255, 255, 255, 0.07);
  --topbar-line: rgba(255, 255, 255, 0.1);
  --topbar-badge: #ff8a3d;
  --topbar-accent: #22c55e;   /* зелёный логотипа — полоса тёмная в обеих темах */

  /* ── Цвета меню — те же поверхности, что у панели (не инверсные) ── */
  --rail-bg: var(--panel);
  --rail-text: var(--text);
  --rail-muted: var(--muted);
  --rail-hover: var(--surface-3);
  --rail-line: var(--line);
  /* Активный пункт — синий, как в трекере (зелёный акцент остаётся за кнопками) */
  --rail-active-bg: rgba(28, 111, 224, 0.12);
  --rail-active-fg: #1c6fe0;

  /* ── Светлая тема (по умолчанию значения = прежний вид) ── */
  /* поверхности */
  --bg: #f5f6f1;
  --panel: #ffffff;
  --surface-2: #fafbf7;   /* поднятые карточки / soft-филлы */
  --surface-3: #eef1ea;   /* ховер-филлы */
  --input-bg: #ffffff;
  --line: #d9ddd4;
  /* текст */
  --text: #202124;
  --muted: #62665f;
  /* акцент (зелёный) */
  --accent: #168a5f;
  --accent-strong: #0f6f4b;
  --accent-soft: rgba(22, 138, 95, 0.15);
  --on-accent: #ffffff;
  /* статус: ok */
  --ok-bg: #eef8f3;
  --ok-border: #b8d8ca;
  --ok-fg: #0f6f4b;
  /* статус: danger */
  --danger: #bd3d2f;
  --danger-bg: #fff4f2;
  --danger-border: #efc3bd;
  --danger-fg: #7a261b;
  /* статус: warn */
  --warn: #a86412;
  --warn-bg: #fff5e0;
  --warn-border: #e8c987;
  --warn-fg: #6e4f15;
  /* статус: info (синий) */
  --info-fg: #1e4570;
  --info-bg: #eef4fa;
  --info-border: #b8cee0;
  /* код / лог (в обеих темах тёмный) */
  --code-bg: #111412;
  --code-fg: #f0f5ee;
  --mono: #111412;
  /* прочее */
  --dot-muted: #9aa0a6;
  /* П4 «кинги → паспорта»: фиолетовый ярлык «по кингу» — второй источник, не путать с акцентом/семантикой */
  --king: #7c3aed; --king-soft: rgba(124, 58, 237, 0.12); --king-line: rgba(124, 58, 237, 0.4);
  --ring-bg: #e7e9e3;
  --overlay: rgba(0, 0, 0, 0.4);

  color-scheme: light;
}

/* ── Тёмная тема ── */
body.theme-dark {
  /* Меню берёт поверхности темы (см. --rail-* в :root), меняется только синева активного пункта. */
  --rail-active-bg: rgba(91, 157, 250, 0.18);
  --rail-active-fg: #5b9dfa;

  --bg: #14161a;
  --panel: #1c1f24;
  --surface-2: #23272e;
  --surface-3: #2a2f37;
  --input-bg: #20242a;
  --line: #2e333b;
  --text: #e6e8ea;
  --muted: #9aa1ab;
  --accent: #1faa74;
  --accent-strong: #27c089;
  --accent-soft: rgba(39, 192, 137, 0.18);
  --on-accent: #06120d;
  --ok-bg: #16352a;
  --ok-border: #1f5d44;
  --ok-fg: #58d6a4;
  --danger: #e0584a;
  --danger-bg: #3a1f1c;
  --danger-border: #6b322b;
  --danger-fg: #f08a7e;
  --warn: #d79a3a;
  --warn-bg: #352a16;
  --warn-border: #6e571f;
  --warn-fg: #e8c987;
  --info-fg: #7fb0e6;
  --info-bg: #16263a;
  --info-border: #274463;
  --code-bg: #0f1115;
  --code-fg: #e6ecdf;
  --mono: #cfd3d8;
  --dot-muted: #6b7280;
  --king: #b794f6; --king-soft: rgba(183, 148, 246, 0.16); --king-line: rgba(183, 148, 246, 0.5);
  --ring-bg: #2e333b;
  --overlay: rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Зашитый масштаб всего интерфейса. Браузерный зум держать на 100%. */
  zoom: var(--ui-scale);
  /* Место под фиксированную верхнюю строку (box-sizing: border-box — высоту не растит). */
  padding-top: var(--topbar-h);
}

/* ── Верхняя строка (каркас как в Keitaro) ───────────────────────────────
   Фиксирована поверх всего; лого · поиск · значки · юзер. Поиск, значки и
   юзер-меню — ЗАГЛУШКИ (по решению Бориса 04.09.2026: сначала каркас).
   ВНИМАНИЕ: класс `.topbar` в панели уже занят — так называются шапки внутри
   вкладок (17 штук). Поэтому верхняя строка зовётся `.app-topbar`. */
.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
}

/* Бургер сворачивает и разворачивает левое меню (состояние помнится в браузере) */
/* Кнопка меню — тумблер из логотипа: включён = меню развёрнуто */
.tb-toggle {
  flex: 0 0 auto;
  width: 56px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--topbar-text);
}
button.tb-toggle:hover:not(:disabled) { background: var(--topbar-fill); }
.tb-toggle-track {
  display: block;
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--topbar-accent);
  transition: background 0.18s ease;
}
.tb-toggle-knob {
  position: absolute;
  top: 4px;
  left: 24px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--topbar-accent);
  transition: left 0.18s ease, background 0.18s ease;
}
body.rail-collapsed .tb-toggle-track { background: var(--topbar-muted); }
body.rail-collapsed .tb-toggle-knob { left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tb-toggle-track, .tb-toggle-knob { transition: none; }
}

.tb-brand { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.tb-brand b { font-size: 33px; font-weight: 750; letter-spacing: 0.02em; line-height: 1; }
.tb-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--topbar-badge);
  border: 1px solid var(--topbar-badge);
  border-radius: 4px;
  padding: 1px 5px;
}

.tb-right { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.tb-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--topbar-muted);
}
.tb-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 20px; }
.tb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.tb-user-name { font-size: 12.5px; }
.tb-user-car { font-size: 9px; color: var(--topbar-muted); }

/* ── Внешний каркас: левый рейл + рабочая область ───────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: min(1920px, 100%);
  margin: 0 auto;
  padding: 18px;
  align-items: start;
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

/* ── Лог задач: ящик за правым краем на ВСЕХ экранах (09.09.2026, решение Бориса
   «кнопка вызова лога должна быть сквозной»). Вызывается значком 📋 в верхней строке
   (см. .tb-jobs); до 10.09.2026 вызовом был язычок у правого края, но он вставал ровно
   в ряд кнопок вкладки и закрывал собой то, что стояло крайним справа. */
#jobDock {
  position: fixed; top: var(--topbar-h); right: 0; z-index: 40;
  height: calc(100vh / var(--ui-scale) - var(--topbar-h)); max-height: none; min-height: 0;
  width: 440px; max-width: 92vw;
  border-radius: 0; border-width: 0 0 0 1px;
  box-shadow: -14px 0 36px rgba(0, 0, 0, .28);
  transform: translateX(100%); transition: transform .26s ease;
}
body.adr-dock-open #jobDock { transform: translateX(0); }
#jobDock .job-dock-rail { display: none; }      /* полоска-свёртка не нужна: есть значок 📋 */
#jobDock .job-dock-body { display: flex; }      /* даже если панель была свёрнута */
@media (prefers-reduced-motion: reduce) { #jobDock { transition: none; } }

/* ── Левое меню ──────────────────────────────────────────────────────────
   Всегда одной ширины, с подписями (каркас как в трекере). На узких экранах —
   в потоке страницы, на десктопе — прибито к левому краю (см. media ниже). */
.app-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--rail-bg);
  border: 1px solid var(--rail-line);
  border-radius: 12px;
  padding: 10px 0;
  max-height: calc(100vh - var(--topbar-h) - 36px);
  overflow: hidden;
}

/* Средняя часть рейла — единственное, что скроллится; разделы и переключатель
   проектов остаются на месте (переключатель прибит к нижней границе меню). */
.rail-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Переключатель проекта (BuyerSpot | LandingSpot | AdStalker) ─────────
   Прибит к нижней границе меню: три кнопки в ряд, активный проект подсвечен,
   остальные два серые. */
.rail-projects {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--rail-line);
}

/* Пакет 6: ярлык Landing у баера скрыт [hidden] — тот же guard. */
.rail-project[hidden] { display: none !important; }
.rail-project {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 3px;
  border-radius: 7px;
  color: var(--rail-muted);
  text-decoration: none;
  font-weight: 650;
  font-size: 11px;
  letter-spacing: -0.01em;
  cursor: default;
  box-sizing: border-box;
}
a.rail-project { cursor: pointer; }
a.rail-project:hover { background: var(--rail-hover); color: var(--rail-text); }
.rail-project.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-fg);
}
/* Иконки в переключателе не нужны — в ширину меню помещаются только подписи */
.rail-project .nav-ico { display: none; }
.rail-project .proj-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Десктоп: меню прибито к левому краю, всегда одной ширины ────────────
   Каркас как в трекере (согласовано 04.09.2026): меню не сворачивается в
   иконки и не выезжает по наведению — оно всегда на экране с подписями. */
@media (min-width: 981px) {
  /* Контент сдвинут правее меню */
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding-left: calc(var(--rail-w) + 18px);
  }

  .app-rail {
    position: fixed;
    left: 0;
    /* Делим на --ui-scale: body зум 0.75 ужимает фикс-элемент, поэтому берём
       высоту с запасом, чтобы после зума меню занимало весь экран под строкой. */
    top: var(--topbar-h);
    height: calc(100vh / var(--ui-scale) - var(--topbar-h));
    max-height: none;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--rail-line);
    z-index: 40;
    width: var(--rail-w);
    overflow: hidden;
    padding: 10px 0;
    gap: 0;
    transition: width .2s ease;
  }
  .layout { transition: padding-left .2s ease; }

  /* ── Свёрнутое меню (бургер в верхней строке) ──────────────────────────
     Одна переменная --rail-w двигает и ширину меню, и отступ контента.
     Остаются только иконки; названия разделов видны в подсказке (title). */
  body.rail-collapsed { --rail-w: 56px; }
  body.rail-collapsed .view-tab { justify-content: center; padding: 0; gap: 0; }
  body.rail-collapsed .view-tab .nav-ico { width: auto; }
  body.rail-collapsed .nav-label,
  body.rail-collapsed .nav-caret,
  body.rail-collapsed .proj-label { display: none; }
  /* Подменю в свёрнутом виде не показываем даже у раскрытого раздела.
     Селектор с `.nav-group.expanded` — иначе правило `.nav-group.expanded .nav-sub`
     ниже по файлу перебивает его по порядку (та же специфичность) и подпункты
     торчат полоской букв (грабли 04.09.2026). */
  body.rail-collapsed .nav-group.expanded .nav-sub { grid-template-rows: 0fr; }
  /* Переключатель проектов — стопкой иконок */
  body.rail-collapsed .rail-projects { flex-direction: column; gap: 2px; padding: 8px 6px 2px; }
  body.rail-collapsed .rail-project { height: 34px; padding: 0; }
  body.rail-collapsed .rail-project .nav-ico { display: block; font-size: 15px; }

  @media (prefers-reduced-motion: reduce) {
    .app-rail, .layout { transition: none; }
  }
}

.workspace {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace {
  padding: 14px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
  font-weight: 750;
}

h2 {
  font-size: 15px;
  font-weight: 750;
}

.topbar p {
  margin-top: 4px;
  color: var(--muted);
}

.status-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 13px;
}

.status-pill.ok {
  color: var(--accent-strong);
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.status-pill.error {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}


.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 7px 8px;
}

.step:hover:not(:disabled) {
  background: var(--surface-3);
}

.step.active {
  border-color: var(--accent);
  background: var(--ok-bg);
}

.step.done span,
.step.active span {
  background: var(--accent);
  color: var(--on-accent);
}

.step span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.step strong,
.step small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step small {
  color: var(--muted);
  font-weight: 500;
}


label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

label > span {
  color: var(--muted);
  font-size: 13px;
}


.soft-field {
  opacity: 0.72;
}


input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  padding: 10px 11px;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* Окно задач (#jobDock) — постоянная правая колонка, видна на всех вкладках.
   order:2 гарантирует, что dock всегда встаёт в правую колонку рядом с активным
   разделом, независимо от его позиции в DOM. */
#jobDock { order: 2; }


/* Мягкие кнопки */
.btn-soft-red {
  border-radius: 7px;
  padding: 10px 13px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
  font: inherit;
}
.btn-soft-red {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border-color: var(--danger-border);
}
.btn-soft-red:hover:not(:disabled) { background: var(--danger-border); }
.btn-soft-red:disabled { opacity: 0.45; cursor: not-allowed; }

/* Модалки */
.modal {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

textarea {
  resize: vertical;
  min-height: 94px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}

.checkbox input {
  width: auto;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

button {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 13px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-weight: 650;
}

button:hover:not(:disabled) {
  background: var(--accent-strong);
}

button.warn {
  background: var(--warn);
}

button.warn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--warn), #000 22%);
}

button.danger {
  background: var(--danger);
}

button.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger), #000 18%);
}

button.ghost {
  color: var(--text);
  background: var(--panel);
  border-color: var(--line);
}

button.ghost:hover:not(:disabled) {
  background: var(--surface-3);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}


.meta-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kv {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.kv span {
  color: var(--muted);
}

.kv strong {
  min-width: 0;
  color: var(--text);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.preview-text {
  white-space: pre-wrap;
}

.alert-danger {
  margin: 10px 0 12px;
  border: 1px solid var(--danger-border);
  border-radius: 7px;
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 11px;
}

.clean-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.info-list .clean-list {
  padding: 0;
}

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.list-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.info-tooltip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: help;
}

.tooltip-box {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: none;
  min-width: 190px;
  max-width: min(320px, 70vw);
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--code-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(17, 20, 18, 0.22);
}

.info-tooltip:hover .tooltip-box,
.info-tooltip:focus .tooltip-box {
  display: block;
}


pre {
  margin: 0;
  min-height: 360px;
  max-height: 56vh;
  overflow: auto;
  padding: 14px;
  background: var(--code-bg);
  color: var(--code-fg);
  font: 13px/1.48 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}


/* Чек-лист шагов внутри карточки «Коротко» */
.step-checklist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

.step-checklist li {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.step-checklist li.done {
  color: var(--accent-strong);
}

.step-checklist li.current {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Статусные строки под селектами (профиль/фанка) на шаге «Ссылка» */
.field-status {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.field-status.bad {
  color: var(--danger);
}

/* ── Окно задач (Job Dock) ──────────────────────────────────────────────── */
.job-dock {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 32px);
  min-height: calc(100vh - var(--topbar-h) - 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.job-dock-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;   /* переполнение → скроллится вся панель целиком */
}

/* ── Три окна панели: Очередь / Задачи / Логи ─────────────────────────────── */
.dock-card { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.dock-card:last-child { border-bottom: none; }
.dock-card-actions { display: flex; align-items: center; gap: 6px; }
.dock-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.dock-card-head h3 { margin: 0; font-size: 14px; }

/* Очередь и Задачи — по содержимому, ничего не прячут (внутренних скроллов нет) */
.dock-tasks { flex: 0 0 auto; }

/* Логи — забирают остаток высоты и автоматически ужимаются, уступая место верхним */
.dock-logs { flex: 1 1 auto; min-height: 120px; }
.dock-logs .job-dock-log { flex: 1 1 auto; min-height: 0; }
.dock-logs.logs-collapsed { flex: 0 0 auto; min-height: 0; margin-top: auto; }
.dock-logs.logs-collapsed .dock-card-head { border-bottom: none; }
.dock-logs.logs-collapsed .job-dock-log { display: none; }

/* ── Свёрнутое состояние: тонкая вертикальная полоска ──────────────────────── */
.job-dock-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.job-dock-rail:hover {
  color: var(--accent-strong);
}

.job-dock-rail-arrow {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.job-dock-rail-label {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.4px;
}

.job-dock-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
}

body.dock-collapsed .job-dock-body {
  display: none;
}

body.dock-collapsed .job-dock-rail {
  display: flex;
}

.job-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.job-dock-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
}

.job-dock-head .ghost {
  font-size: 12px;
  padding: 4px 8px;
}

.job-dock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.job-dock-tabs:empty { display: none; }

.job-dock-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.job-dock-tab.active {
  border-color: var(--accent);
  background: var(--ok-bg);
}

.job-dock-tab .job-dock-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.job-dock-tab .job-dock-close {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}

.job-dock-tab .job-dock-close:disabled {
  opacity: 0.35;
  cursor: default;
}

.job-dock-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.job-dock-dot.queued { background: var(--dot-muted); }
.job-dock-dot.running { background: #e0a000; animation: jobDockPulse 1.1s ease-in-out infinite; }
.job-dock-dot.succeeded { background: var(--accent-strong); }
.job-dock-dot.failed { background: var(--danger); }
.job-dock-dot.cancelled { background: var(--dot-muted); }

@keyframes jobDockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.job-dock-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.job-dock-meta:empty {
  display: none;
}

.job-dock-meta .ghost {
  font-size: 12px;
  padding: 4px 8px;
}

.job-dock-summary {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.job-dock-summary.is-ok {
  background: var(--ok-bg);
}

.job-dock-summary.is-error {
  background: var(--danger-bg);
}

.job-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.job-summary-head strong {
  font-size: 14px;
}

.job-dock-summary.is-ok .job-summary-head strong {
  color: var(--accent-strong);
}

.job-dock-summary.is-error .job-summary-head strong {
  color: var(--danger);
}

.job-summary-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 2px 8px;
}


.job-summary-detail {
  margin-top: 8px;
  min-height: 0;
  max-height: 180px;
}

.job-dock-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  border-radius: 0;
}

.job-dock-log[hidden] {
  display: none;
}

.job-dock-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 13px;
}

.info-list {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.info-list strong {
  color: var(--text);
}

.info-list ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.info-list li {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.ok-text {
  color: var(--accent-strong);
}

.bad-text {
  color: var(--danger);
}


.validation {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  /* Узкий экран: меню обычным блоком над контентом, той же вёрсткой. */
  .app-rail {
    position: static;
    max-height: none;
  }

  .app,
  body.dock-collapsed .app {
    grid-template-columns: 1fr;
    padding: 0;
  }

  /* На узких экранах окно задач становится обычным блоком снизу,
     свёрнутая полоска не используется — показываем полную панель. */
  .job-dock {
    position: static;
    max-height: none;
  }

  body.dock-collapsed .job-dock-rail {
    display: none;
  }

  body.dock-collapsed .job-dock-body {
    display: flex;
  }

  .job-dock-log {
    max-height: 56vh;
  }


  .meta-columns {
    grid-template-columns: 1fr;
  }


  .topbar {
    display: grid;
  }

  .kv {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ── Пункты левого меню (разделы) ────────────────────────────────────────
   Каркас как в трекере: подписи всегда видны, активный пункт — заливка и
   полоска у левого края. Обрезка длинных названий многоточием, полное имя
   в подсказке (title в разметке). */
.view-tabs {
  display: flex;
  flex-direction: column;
}

.view-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0 18px;
  height: 38px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--rail-text);
}

.view-tab .nav-ico {
  width: 18px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 15px;
  color: var(--rail-muted);
}

.view-tab .nav-label {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.view-tab:hover { background: var(--rail-active-bg); }

.view-tab.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-fg);
  font-weight: 650;
}
.view-tab.active .nav-ico { color: var(--rail-active-fg); }
/* Полоска у левого края активного пункта */
.view-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rail-active-fg);
}

/* ── Аккордеон-группы в левом меню ──────────────────────────────────────── */
/* Пакет 6: рельса по роли — группа «Аналитика» у баера скрыта [hidden]; display класса
   сильнее атрибута, guard первой строкой блока (та же грабля, что у .workspace[hidden]). */
.nav-group[hidden] { display: none !important; }
.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-caret {
  margin-left: auto;
  font-size: 10px;
  color: var(--rail-muted);
  transition: transform .15s;
  flex: 0 0 auto;
}

.nav-group.expanded .nav-caret {
  transform: rotate(90deg);
}

/* Плавное раскрытие: строка грида едет 0fr → 1fr, поэтому высоту знать не нужно
   (у `display: none` анимации не бывает). Внутренняя обёртка обязана иметь
   `min-height: 0` и `overflow: hidden`, иначе содержимое торчит в свёрнутом виде.
   Списки независимы: открытие соседнего раздела чужой не закрывает (см. toggleNavGroup). */
.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}

.nav-group.expanded .nav-sub {
  grid-template-rows: 1fr;
}

.nav-sub-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub { transition: none; }
}

.nav-subitem {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0 18px 0 47px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--rail-text);
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-subitem:hover { background: var(--rail-active-bg); }

.nav-subitem.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-fg);
  font-weight: 600;
}
.nav-subitem.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rail-active-fg);
}


/* ── Library view ───────────────────────────────────────────────────────── */
.library-view { padding: 18px; }


.library-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--warn-fg);
  font-size: 14px;
}


.lib-node { margin: 2px 0; }
.lib-node > .lib-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.lib-node > .lib-row:hover { background: var(--surface-3); }
.lib-node .lib-children { padding-left: 22px; border-left: 1px dotted var(--line); margin-left: 6px; }
.lib-caret { width: 12px; display: inline-block; color: var(--muted); }
.lib-name { flex: 1; }
.lib-count { color: var(--muted); font-size: 12px; }
.lib-leaf { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.lib-leaf .lib-row { cursor: default; }
.lib-leaf .lib-row:hover { background: transparent; }
.lib-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ok-fg);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  vertical-align: middle;
}

.adset-stat {
  display: inline-flex;
  align-items: center;
  flex: 0 0 190px;
  box-sizing: border-box;
  margin-left: 0;
  padding: 3px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.adset-stat.pos { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.adset-stat.neg { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
.adset-stat.empty { background: transparent; border-color: transparent; }
.adset-stat-spend { flex: 0 0 58px; text-align: right; font-weight: 700; }
.adset-stat-roi {
  flex: 1 1 auto;
  text-align: right;
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-variant-numeric: tabular-nums;
}


/* имя адсета сжимается с многоточием — строка не растягивается за край */
#creativesTree .lib-row > .lib-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* компактные плашки статистики (было 190px → 132px), ровно под шапкой */
#creativesTree .adset-stat { flex: 0 0 132px; padding: 3px 9px; gap: 4px; }
#creativesTree .adset-stat-spend { flex: 0 0 46px; }
#creativesTree .adset-stat-roi { margin-left: 6px; padding-left: 6px; }
/* пустая ячейка — прочерк, а не прозрачная дыра: ряд ровный во всех строках */
#creativesTree .adset-stat.empty { color: var(--muted); }
#creativesTree .adset-stat.empty::before { content: "—"; margin: 0 auto; opacity: .5; }

/* шапка колонок: те же 132px, прижаты влево под левый край плашек.
   h-name сдвигаем на ширину (чекбокс+caret+gap'ы строки ≈ 59px), которых
   в шапке нет — иначе заголовки уезжают влево от своих цифр. */
#creativesTree .lib-colhead .h-name { margin-left: 59px; }
#creativesTree .lib-colhead .h-30,
#creativesTree .lib-colhead .h-all { flex: 0 0 132px; text-align: left; padding-left: 9px; }
#creativesTree .lib-colhead .h-files { text-align: left; }

/* Закреплённая строка-заголовок колонок в окнах крео (30 дней | всё время | файлы) */
#creativesTree .lib-colhead {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  margin: 0 0 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
#creativesTree .lib-colhead .h-name { flex: 1; min-width: 0; }
#creativesTree .lib-colhead .h-30, #creativesTree .lib-colhead .h-all { flex: 0 0 190px; text-align: center; }
#creativesTree .lib-colhead .h-files { flex: 0 0 auto; min-width: 88px; text-align: right; }

/* Пометка «цифры из архива Keitaro, а не живые» — второй строкой под заголовком колонки */
.lib-arch-note {
  display: block; font-size: 9px; line-height: 1.2; margin-top: 1px;
  color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85;
}
/* Пояснение во вкладке «Аналитика», когда трекер отключён */
.analytics-empty.analytics-offline { text-align: left; max-width: 680px; margin: 0 auto; line-height: 1.55; }


/* Иерархия размеров имён: вертикаль > язык > доктор > адсет */
/* Креативы: секция (доктор) > адсет */
#creativesTree > .lib-node > .lib-row > .lib-name { font-size: 15px; font-weight: 700; }
#creativesTree > .lib-node > .lib-children > .lib-node > .lib-row > .lib-name { font-size: 14px; font-weight: 500; }

.push-adsets {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-2);
}
.push-adset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
}
.push-adset small { color: var(--muted); }

.push-upload-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}
.push-upload-progress {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.su-table { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.row-menu[hidden] { display: none; }
.row-menu {
  position: fixed;
  z-index: 90;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.row-menu button {
  text-align: left;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px 12px;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.row-menu button:hover { background: var(--surface-3); }


/* Floating utility buttons */
.theme-fab,
/* Пакет 6: кнопка ↻ у баера скрыта [hidden] — display класса сильнее атрибута, guard перед блоком. */
.server-restart-fab[hidden] { display: none !important; }
.server-restart-fab {
  position: fixed;
  bottom: 20px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.15s, box-shadow 0.15s;
  padding: 0;
  line-height: 1;
}
.theme-fab { right: 20px; }
.server-restart-fab { right: 64px; }
.theme-fab:hover,
.server-restart-fab:hover:not(:disabled) {
  background: var(--hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.theme-fab .nav-ico,
.server-restart-fab .nav-ico {
  font-style: normal;
}
.server-restart-fab:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* ── Вкладка «Аналитика» (прибыль по кампаниям) ──────────────────────────── */
.analytics-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.analytics-view[hidden] { display: none; }
.analytics-body {
  flex: 1;
}
.analytics-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.analytics-chip {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.an-bar-chips { margin-bottom: 0; flex-wrap: nowrap; }
/* Аналитика плиткой (макет Бориса «Четыре экрана на полосе», 15.09.2026): карточки стоят
   сеткой и всегда раскрыты — аккордеон требовал клика ради каждой цифры. Разрез шире
   «Итого» показывает список сущностей, поэтому занимает всю строку. */
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.an-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
           padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 250px; }
.an-card.an-wide { grid-column: 1 / -1; }
.an-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an-gv { font-weight: 700; font-size: 14px; }
.an-profit { font-size: 15px; font-weight: 700; }
.an-profit.pos, .an-nums b.pos { color: var(--ok-fg); }
.an-profit.neg, .an-nums b.neg { color: var(--danger); }
.an-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 11.5px; }
.an-nums b { color: var(--text); font-weight: 650; }
.an-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto;
           border-top: 1px solid var(--line); padding-top: 8px; color: var(--muted); font-size: 11.5px; }
.an-foot b { color: var(--text); font-weight: 650; }
@media (max-width: 1200px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .an-grid { grid-template-columns: 1fr; } }
/* график в плитке низкий, на развёрнутом разрезе — выше */
.an-card .av-canvas { height: 240px; }
.an-card.an-wide .av-canvas { height: 420px; }
.an-card.an-wide .av-subcard .av-canvas, .an-card.an-wide .av-subview .av-canvas { height: 300px; }

/* Строка бюджета под графиком «Итого»: место легенды, которой там нет. */
.analytics-chip:hover { background: var(--surface-3); }
.analytics-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.analytics-empty {
  padding: 24px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}
.analytics-empty code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
}
.analytics-error {
  color: var(--danger-fg);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}
.analytics-chip.sm {
  padding: 3px 9px;
  font-size: 11px;
}
.analytics-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.analytics-mini-empty {
  color: var(--muted);
  padding: 22px;
  text-align: center;
  font-size: 12px;
}

/* ── Аналитика v2: аккордеон вкладок GEO+Вертикаль + крупная легенда-список ── */
.av-fb-rest { margin-top: 10px; padding: 8px 19px; font-size: 13px; color: var(--muted); }
.av-fb-rest-item { cursor: help; font-weight: 700; color: var(--text); white-space: nowrap; }
.av-canvas { position: relative; height: 720px; }

.av-legend { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; overflow-x: auto; }
.av-row { display: grid; grid-template-columns: 18px minmax(130px, 1fr) repeat(5, 84px) 22px; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 13px; }
.av-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; }
.av-head:hover { background: transparent; }
.av-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-row .av-cell.pos { color: var(--accent); }
.av-row .av-cell.neg { color: var(--danger); }
.av-head .av-cell { color: var(--muted); }
.av-row:hover { background: var(--surface-2); }
.av-row.off .av-name, .av-row.off .av-cell { opacity: 0.45; }
.av-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; cursor: pointer; flex: 0 0 auto; padding: 0; }
.av-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-name.drill { cursor: pointer; }
.av-name.drill:hover { text-decoration: underline; }
.av-total { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; text-align: right; min-width: 90px; }
.av-row-caret { background: var(--surface-3); border: none; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: 0; flex: 0 0 auto; transition: background 0.15s; }
.av-row-caret:hover { background: var(--accent-soft); }
.av-prochie-toggle { margin-top: 8px; align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 8px 15px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.2px; }
.av-prochie-toggle:hover { background: var(--surface-3); }
.av-prochie { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--line); }
.av-prochie[hidden] { display: none; }

.av-subcards { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.av-subcard { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface-2); }
.av-subcard-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 650; }
.av-subcard-head .av-name { flex: 1; min-width: 0; }
.av-subcard .av-canvas, .av-subview .av-canvas { height: 560px; }
.analytics-mini-empty { color: var(--muted); padding: 22px; text-align: center; font-size: 12px; }


.recipe-dialog { max-width: 640px; }
.recipe-field { display: flex; flex-direction: column; gap: 6px; }
.recipe-field > label { font-weight: 600; font-size: 13.5px; }
.recipe-field select, .recipe-field textarea, .recipe-field input { width: 100%; box-sizing: border-box; }
.recipe-field textarea { resize: vertical; font-size: 13px; line-height: 1.4; }
#reuploadQueue.dock-card { flex: 0 0 auto; padding: 12px 14px; }
#reuploadQueue .rq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#reuploadQueue .rq-head h3 { margin: 0; font-size: 14px; }
#reuploadPauseBtn.rq-paused { color: #7fdb8a; }
.rq-list { display: flex; flex-direction: column; gap: 5px; }
.rq-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2, #1c1f26); font-size: 12.5px; }
.rq-item .rq-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-current { background: color-mix(in srgb, green 18%, transparent); }
.rq-del { border: none; background: transparent; color: var(--muted, #8a8f98); cursor: pointer; font-size: 13px; }
.rq-del:hover { color: #e06; }
.rq-empty { color: var(--muted, #8a8f98); font-size: 12.5px; padding: 4px 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Вкладка «Управление рекламой» — дерево БМ → кабинет → кампания → адсет → объявление
   ══════════════════════════════════════════════════════════════════════════ */


/* Каретка-шеврон (общая для всех уровней) */

/* Бизнес-менеджер (верхний уровень) */

/* Рекламный кабинет */


/* Строки дерева (кампания / адсет / объявление) + заголовок колонок */



/* Мини-кнопки действий */

/* Модалка «Настройки»: добавленные поля наследуют .recipe-field */

/* ── Тэг «👎» адсета (сквозной: Аналитика ↔ Библиотека, ключ DES-xxxx) ── */

.fav-star {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin-right: 4px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; vertical-align: middle;
  color: var(--muted); opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.fav-star:hover { opacity: 1; background: var(--surface-3); border-color: var(--line); color: #e0a800; }
.fav-star.on { opacity: 1; color: #f1b100; }


/* ── Панель проверки креативов на шаге «Креативы» ────────────────────────────
   Живой лог проверки перед переходом на «Режим»: что проверяем, что нашли,
   что чиним. Раньше тут была одна немая строка на 30-60 сек. */
.creative-check {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.creative-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.creative-check-head strong {
  font-size: 15px;
  color: var(--text);
}

.creative-check-state {
  font-size: 13px;
  color: var(--muted);
}

.creative-check-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.creative-check-lines li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.creative-check-lines .cc-icon {
  text-align: center;
  line-height: 1.45;
}

.creative-check-lines .cc-sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.cc-ok .cc-icon { color: var(--ok-fg); }
.cc-bad .cc-icon { color: var(--danger); }
.cc-warn .cc-icon { color: var(--warn); }
.cc-run .cc-icon { color: var(--accent); }
.cc-bad .cc-text { color: var(--danger-fg); }



/* ══════════════════════════════════════════════════════════════════════════
   Отчёт по сущностям Facebook (вкладка «Управление рекламой»)
   Раскладка отчёта трекера, цвета панели. Первая строка — guard: CSS display
   на классе перебивает атрибут [hidden], и блок не спрятался бы.
   ══════════════════════════════════════════════════════════════════════════ */
.adr-notes[hidden], .adr-card[hidden], .adr-cols[hidden], .adr-range[hidden] { display: none !important; }

.adr-bar-left, .adr-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adr-bar-right { margin-left: auto; }
.adr-updated { color: var(--muted); font-size: 12px; white-space: nowrap; }
.adr-search { width: 210px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--input-bg); color: var(--text); font: inherit; font-size: 13px; }
.adr-sel { width: auto; min-width: 128px; padding: 5px 9px; font-size: 13px; }
.adr-date { width: auto; padding: 4px 8px; font-size: 13px; }
.adr-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.antizombie-view .adr-toggle { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.antizombie-view .adr-toggle.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.adr-icon { padding: 5px 9px; font-size: 14px; line-height: 1; }

/* Быстрые кнопки «Вертикаль» и «ГЕО» (26.10.2026): явный блок ps-top под полосой экрана, две строки.
   Свои правила на button.adr-qf: общее button:hover красит в зелёный, а цвет текста у button — почти чёрный. */
.adr-quick[hidden], .adr-qrow[hidden] { display: none !important; }
.adr-quick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.adr-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
button.adr-qf { height: 26px; min-height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; }
button.adr-qf:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--line); }
button.adr-qf.active, button.adr-qf.active:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.adr-qf.gone { border-style: dashed; }
.adr-qsep { width: 1px; height: 18px; background: var(--line); flex: none; margin: 0 2px; }

.adr-notes { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 2px 8px; font-size: 12px; }
.adr-note-bad { color: var(--danger-fg); }
.adr-note-warn { color: var(--warn-fg); }
.adr-note-mute { color: var(--muted); }

.adr-body { padding: 0 2px 6px; }
.adr-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); flex: 1 1 auto; min-height: 0; }
/* Внутренняя обёртка не ниже области прокрутки: «Итого» через margin-top:auto уходит к низу,
   даже когда строк мало; при длинном списке — sticky у нижнего края (решение Бориса 03.09:
   «строка суммирования закреплена снизу и не привязана к нижней строке, как в трекере»). */
.adr-scroll { display: flex; flex-direction: column; min-height: 100%; }
.adr-scroll > .adr-table { flex: none; }
.adr-totals { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }
.adr-totals .adr-table { min-width: 1480px; }
.adr-totals thead.adr-ghost th { height: 0; padding: 0; border: 0; font-size: 0; line-height: 0; position: static; overflow: hidden; }
.adr-totals tbody td { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 500; }
.adr-totals tbody td b { font-weight: 600; }
/* Плотность как в отчёте трекера (макет v4, согласован Борисом 03.09): строка выше, текст мельче,
   воздуха в ячейке больше, шапка, имена и «Итого» легче. */
.adr-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1480px; font-size: 12px; table-layout: fixed; }
/* Ширины колонок цифр заданы явно (fixed layout берёт их из первой строки — заголовка),
   а колонка названия забирает остаток. Так таблица всегда вписывается в ширину экрана,
   а горизонтальная прокрутка внутри неё появляется только ниже min-width. */
.adr-table th.adr-c-id { width: 176px; }
.adr-table th.adr-c-hour { width: 68px; }   .adr-table th.adr-c-uniq { width: 64px; }
.adr-table th.adr-c-ucr { width: 66px; }    .adr-table th.adr-c-conv { width: 58px; }
.adr-table th.adr-c-leads { width: 54px; }  .adr-table th.adr-c-rej { width: 58px; }
.adr-table th.adr-c-trash { width: 54px; }  .adr-table th.adr-c-sales { width: 68px; }
.adr-table th.adr-c-appr { width: 76px; }   .adr-table th.adr-c-ucpc { width: 74px; }
.adr-table th.adr-c-cpa { width: 66px; }    .adr-table th.adr-c-cps { width: 70px; }
.adr-table th.adr-c-budget { width: 96px; } .adr-table th.adr-c-cost { width: 96px; }
.adr-table th.adr-c-rev { width: 96px; }    .adr-table th.adr-c-profit { width: 100px; }
.adr-table th.adr-c-roi { width: 86px; }
.adr-table td { overflow: hidden; text-overflow: ellipsis; }
.adr-table th, .adr-table td { padding: 0 9px; height: 35px; white-space: nowrap;
  border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.adr-table thead th.adr-num .adr-th { justify-content: flex-end; flex-direction: row-reverse; gap: 6px; }
.adr-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  color: var(--muted); font-size: 11.5px; font-weight: 500; cursor: pointer; user-select: none; }
.adr-table thead th:hover { background: var(--surface-3); }
.adr-table thead th.adr-sorted { color: var(--text); }
.adr-th { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adr-hl { display: inline-flex; align-items: center; gap: 4px; }
.adr-grip { color: var(--dot-muted); font-size: 10px; letter-spacing: -1px; }
.adr-arr { font-size: 9px; color: var(--accent); }
.adr-num { text-align: right; font-variant-numeric: tabular-nums; }
.adr-table tbody td { font-variant-numeric: tabular-nums; }
.adr-table tbody tr:hover td { background: var(--surface-3); }
.adr-table tr.adr-lvl-1 td { background: var(--surface-2); }
.adr-table tr.adr-lvl-2 .adr-nm { font-size: 11.5px; }
.adr-table tr.adr-off td, .adr-table tr.adr-off .adr-nm { color: var(--muted); }

/* Тумблер вкл./выкл. — как у кампании в Facebook: включён = зелёный, кружок справа.
   Ховер пишем через button.adr-sw, иначе общее правило панели красит любую кнопку зелёным. */
.adr-sw { width: 32px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--input-bg); position: relative; cursor: pointer; display: inline-block; flex: 0 0 32px;
  margin-right: 2px; vertical-align: middle; transition: background .14s, border-color .14s; }
.adr-sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--dot-muted); transition: transform .14s, background .14s; }
.adr-sw[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.adr-sw[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent); }
button.adr-sw:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); }
button.adr-sw[aria-checked="true"]:hover:not(:disabled) { background: var(--accent-soft); }
.adr-sw:disabled { opacity: .4; cursor: default; }
.adr-sw-busy { opacity: .55; cursor: progress; }
.adr-c-id { color: var(--muted); }

.adr-empty { color: var(--muted); text-align: center; padding: 22px 8px; }

.adr-c-name { min-width: 260px; }
.adr-name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.adr-lvl-1 .adr-name-cell { padding-left: 20px; }
.adr-lvl-2 .adr-name-cell { padding-left: 40px; }
.adr-caret { width: 16px; height: 16px; flex: 0 0 16px; border: 0; background: transparent;
  padding: 0; cursor: pointer; position: relative; }
.adr-caret::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translate(-60%, -50%) rotate(-45deg); transition: transform .12s; }
.adr-caret.open::before { transform: translate(-50%, -70%) rotate(45deg); }
.adr-caret-empty::before { display: none; }
.adr-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--dot-muted); }
.adr-dot-on { background: var(--accent); }
.adr-dot-bad { background: var(--danger); }
.adr-dot-wait { background: var(--warn); }
.adr-nm { color: var(--info-fg); text-decoration: none; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.adr-nm:hover { text-decoration: underline; }
.adr-lvl-0 .adr-nm { font-weight: 400; }
.adr-kids { display: inline-flex; gap: 5px; font-size: 10.5px; color: var(--muted); }
.adr-k-ok { color: var(--ok-fg); font-weight: 600; }
.adr-k-bad { color: var(--danger); font-weight: 600; }
.adr-k-wait { color: var(--warn); font-weight: 600; }
.adr-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3);
  color: var(--muted); border: 1px solid var(--line); }
.adr-tag-sm { font-size: 10px; color: var(--muted); margin-left: 4px; font-variant-numeric: normal; }
/* Метка «на модерации» («Каталоги с подменой»): у кампании, внутри которой каталожный адсет ждёт модерации,
   и у самого ждущего адсета. Только токены темы. */
.adr-swap { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3);
  color: var(--muted); border: 1px solid var(--line); white-space: nowrap; flex: 0 0 auto;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.adr-swap-wait { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.adr-warn { color: var(--warn); font-size: 12px; }
.adr-more { margin-left: auto; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 4px; }
button.adr-more:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
button.adr-caret:hover:not(:disabled) { background: var(--surface-3); }

.adr-mute { color: var(--muted); }
.adr-dash { color: var(--dot-muted); }
.adr-pos { color: var(--ok-fg); }
.adr-neg { color: var(--danger); }
.adr-hr-ok { color: var(--ok-fg); font-weight: 600; }
.adr-hr-bad { color: var(--danger); font-weight: 700; background: var(--danger-bg);
  padding: 1px 5px; border-radius: 4px; }
.adr-hr-low, .adr-hr-na { color: var(--muted); }

.adr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 4px 0; color: var(--muted); font-size: 12px; flex-wrap: wrap; }

.adr-card { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 10px 12px;
  min-width: 300px; max-width: 460px; font-size: 12px; pointer-events: none; }
.adr-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.adr-card dt { color: var(--muted); }
.adr-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.adr-card-full { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); white-space: normal; word-break: break-word; }

.adr-cols { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 10px 12px; width: 230px; }
.adr-cols h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.adr-cols label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; font-size: 13px; }
.adr-cols label.adr-lock { color: var(--dot-muted); cursor: default; }
.adr-cols-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; }

/* ── Вкладка-отчёт занимает всю страницу, как в утверждённом макете (решение Бориса 03.09:
   «лог задач не нужен на этом экране, экран на всю ширину»). Задачи в спрятанном ящике
   продолжают опрашиваться и по завершении обновляют отчёт. ── */
body.antizombie-mode .layout { width: 100%; max-width: none; }
body.antizombie-mode .app { grid-template-columns: minmax(0, 1fr); }
body.antizombie-mode .workspace.antizombie-view { background: transparent; border: 0; padding: 0; }
/* Вкладка ровно в высоту экрана — прокрутка только внутри таблицы (решение Бориса 03.09).
   100vh делим на масштаб панели (тот же приём, что у рейла): body зум 0.75 иначе ужал бы
   высоту до трёх четвертей экрана. 36px — верхний и нижний отступы .layout. */
@media (min-width: 981px) {
  body.antizombie-mode .workspace.antizombie-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    display: flex; flex-direction: column; overflow: hidden;
  }
}
body.antizombie-mode .adr-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.antizombie-mode .adr-foot { flex: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   «Активы» на паспортах (П4 этап Б, 05.09.2026) — по эталону ui_guidelines.md и макету
   PANEL_P4_mockup.html: экран во всю ширину, слева БМ с категориями, справа список,
   карточка паспорта поверх правой части списка внутри блока. Классы ps-* и hb-* (проверены: свободны).
   ═══════════════════════════════════════════════════════════════════════════ */
body.passports-mode .workspace.passports-view { background: transparent; border: 0; padding: 0; }
body.passports-mode .workspace.passports-view {
  height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
  display: flex; flex-direction: column; overflow: hidden;
}
.ps-screen[hidden] { display: none !important; }
.ps-screen { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
/* Полоса кнопок — ЯВНЫЙ блок той же материи, что таблица и левая колонка, и единственный дом
   кнопок экрана (решение Бориса 12.09.2026: «кнопки расположены хаотично… надо чтобы полоска
   была явной»). Слева действия · черта · контекст; фильтры справа. */
.ps-top { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.ps-bar-sep { width: 1px; height: 20px; background: var(--line); flex: none; margin: 0 2px; }
.ps-h1 { margin: 0; font-size: 17px; }
/* Пустое состояние «Активы → БМы» у баера без своего систем юзера (пакет 6, 01.10.2026):
   три шага вместо списка, стиль по эталону — карточка, токены цветов, обе темы. */
.ps-onboard[hidden] { display: none !important; }
.ps-onboard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ps-onboard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 420px; }
.ps-onboard-step { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.ps-onboard-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ps-onboard-step.done .ps-onboard-n { background: var(--accent-soft); color: var(--accent); }
.ps-onboard-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text); }
.ps-onboard-s { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.ps-onboard-step.done .ps-onboard-s { color: var(--ok-fg); }
.ps-onboard-acts { display: flex; gap: 10px; }
.ps-bypane[hidden] { display: none !important; }
.ps-bypane { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.ps-nav { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; min-height: 0; font-size: 12px; padding: 6px 0; }
/* Строка БМа — заголовок группы, явный и читаемый (замечание Бориса 12.09.2026): подложка
   --surface-2 и разделитель между группами отделяют её от категорий; крупно и жирно имя БМа,
   под ним систем юзер и приложение-ярлык. Деактивированный — приглушён. */
.ps-bmg { border-top: 1px solid var(--line); }
.ps-bmg:first-child { border-top: 0; }
.ps-bmh { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 12px; border-left: 3px solid transparent; background: var(--surface-2); }
.ps-bmh.sel { background: var(--rail-active-bg); border-left-color: var(--rail-active-fg); }
.ps-bmt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.ps-bmt:hover .ps-bmname { text-decoration: underline; }
.ps-bmname { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-bmsub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; line-height: 1.3; color: var(--muted); }
.ps-bmsu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-bmapp { flex: none; font-size: 9.5px; line-height: 1.5; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-3); color: var(--muted); letter-spacing: .02em; }
.ps-bmg.off .ps-bmname { color: var(--muted); font-weight: 500; }
.ps-bmg.pending .ps-n { color: var(--dot-muted); }
/* Значки действий у БМа в левой панели (19.09.2026, решение Бориса «из карточек уберём»):
   у БМа нет строки в таблице, поэтому его кнопки живут прямо в строке навигации. Вид тот же,
   что в списках, только компактнее — и видны, пока курсор на строке БМа. */
/* Замечание Бориса 09.10.2026: четыре значка съедали 110 px из 272, и имя БМа читалось с
   трудом. Теперь значки всплывают поверх хвоста имени — в покое имя занимает всю строку,
   а кнопки появляются, когда курсор на строке БМа (и при переходе по Tab). Так же, как было
   задумано в комментарии выше; раньше наведение меняло только цвет. Накладываем, а не
   раздвигаем: иначе имя дёргалось бы под курсором. Подложка под значками — та же, что у
   строки, с мягким краем слева, чтобы хвост имени не стыковался с ними впритык. */
.ps-bmh { position: relative; }
.ps-bmacts { display: flex; align-items: center; gap: 2px; flex: none;
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .12s;
  padding-left: 18px;
  background: linear-gradient(to right, transparent, var(--surface-2) 18px); }
.ps-bmh.sel .ps-bmacts { background: linear-gradient(to right, transparent, var(--rail-active-bg) 18px); }
.ps-bmh:hover .ps-bmacts, .ps-bmh:focus-within .ps-bmacts { opacity: 1; pointer-events: auto; }
.ps-bmacts button.ps-ico { width: 26px; height: 24px; }
.ps-bmacts button.ps-ico svg { width: 16px; height: 16px; }
.ps-bmh:hover .ps-bmacts button.ps-ico:not(:disabled) { color: var(--text); }
.ps-car { color: var(--muted); font-size: 10px; cursor: pointer; padding: 2px 4px; transition: transform .2s; flex: none; }
.ps-bmg.open .ps-car { transform: rotate(90deg); }
.ps-cats { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s; }
.ps-bmg.open .ps-cats { grid-template-rows: 1fr; }
.ps-cats-in { min-height: 0; overflow: hidden; }
.ps-cat { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 32px; cursor: pointer; color: var(--text); border-left: 3px solid transparent; }
.ps-cat:hover { background: var(--surface-3); }
.ps-cat.active { background: var(--rail-active-bg); color: var(--rail-active-fg); border-left-color: var(--rail-active-fg); }
.ps-n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.ps-n.bad { color: var(--danger); font-weight: 600; }
.ps-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.ps-crumbs { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-height: 30px; }
.ps-crumbs b { color: var(--text); font-weight: 600; }
.ps-rbody { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.ps-tw { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; min-height: 0; font-size: 12px; }
.ps-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 900px; }
/* Кабинеты (16.09.2026, решение Бориса): колонки с данными занимают столько, сколько им нужно,
   и собраны слева; всё свободное место забирает последняя колонка «Действия», а кнопки в ней
   прижаты к правому краю панели. Отсюда и ширина 100%: пустое место должно быть ВНУТРИ
   таблицы, иначе кнопки уедут вместе с её правым краем. */
.ps-table-acc { min-width: 960px; }
.ps-table th, .ps-table td { padding: 0 9px; height: 35px; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.ps-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 11.5px; user-select: none; }
.ps-th { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-grip { color: var(--dot-muted); letter-spacing: -1px; font-size: 11px; }
.ps-table tbody tr:hover td { background: var(--surface-3); }
.ps-table tr.ps-sel td { box-shadow: inset 0 0 0 1px var(--accent); }
.ps-table tr.ps-off td, .ps-table tr.ps-off .ps-nm { color: var(--muted); }
.ps-table th.ps-c-name { width: 200px; } .ps-table th.ps-c-status { width: 150px; } .ps-table th.ps-c-a { width: 140px; }
.ps-table th.ps-c-a2 { width: 200px; } .ps-table th.ps-c-b2 { width: 280px; }
/* Колонка «БМ» на вкладках «Фанки» и «Кабинеты» (16.09.2026): один актив бывает виден двум БМам. */
.ps-table th.ps-c-bm { width: 170px; }
.ps-table th.ps-c-accid { width: 230px; } .ps-table th.ps-c-owner { width: 150px; }
/* Кнопки строки: тонкие значки в цвет приглушённого текста, подпись — в title. Общее правило
   button:hover:not(:disabled) красит любую кнопку в зелёный и сильнее селектора по классу,
   поэтому своё правило — с тегом и :not(:disabled). */
.ps-table td.ps-c-act { white-space: nowrap; text-align: right; }
/* Подпись колонки — тоже вправо, к своим кнопкам: иначе она осталась бы у левого края
   широкой колонки, в стороне от того, что подписывает. */
.ps-table th.ps-c-act .ps-th { justify-content: flex-end; gap: 6px; }
/* Пакет 6: кнопка строки, скрытая баеру (ps-ico[hidden]) — display класса сильнее атрибута,
   guard первой строкой блока (та же грабля, что у .workspace[hidden]). */
button.ps-ico[hidden] { display: none !important; }
button.ps-ico { border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; padding: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; vertical-align: middle;
  /* Цвет обязателен: общее правило button даёт белый текст (--on-accent), и значок-рисунок
     стал бы белым на белом (так пропала стрелка 16.09.2026). В покое берём приглушённый цвет,
     на строке под курсором — основной: значки стоят в каждой строке и не должны рябить. */
  color: var(--muted);
  /* Видны ВСЕГДА, в каждой строке (решение Бориса 19.09.2026, отменяет прежнее «только под
     курсором» от 16.09.2026: «сделай так, чтобы все кнопки были видны всегда»). */
  opacity: 1;
  transition: color .12s, background-color .12s, box-shadow .12s, transform .12s; }
.ps-table tbody tr:hover button.ps-ico:not(:disabled),
button.ps-ico:focus-visible { color: var(--text); }
/* Под курсором кнопка подсвечивается: заливка, тонкая обводка и лёгкий подъём — так видно,
   что это именно кнопка, а не картинка. Акцентный цвет тут не берём: по эталону наведение
   в таблицах никогда не красится акцентом. */
button.ps-ico:hover:not(:disabled) {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: translateY(-1px) scale(1.08);
}
button.ps-ico:disabled { color: var(--dot-muted); cursor: default; }
/* Корзина краснеет под курсором: из всех кнопок строки только она необратима. Акцент тут ни при
   чём — это предупреждение, а не выбор (19.09.2026, кнопки переехали из карточек в списки). */
/* Пакет 12 (разбор кода 8.1): красный должен перебивать «значки строки под курсором строки» (специфичность 0,4,3) — иначе
   корзина и «Сменить баера» под курсором серо-белые (§15: необратимое краснеет). */
button.ps-ico-danger:hover:not(:disabled),
.ps-table tbody tr:hover button.ps-ico-danger:hover:not(:disabled) { color: var(--danger); }
/* Свои значки: рисунок на всю кнопку, цвет наследует от неё (currentColor). */
button.ps-ico svg { width: 20px; height: 20px; display: block; }
/* Пока идёт обновление — значок крутится: замена подписи «…», которой у рисунка нет. */
button.ps-ico-busy svg { animation: psIcoSpin .9s linear infinite; }
@keyframes psIcoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.ps-ico-busy svg { animation: none; opacity: .5; } }
/* Нажатие: кнопка проседает и на миг подсвечивается акцентом — короткий отклик «нажалось».
   Держим 60 мс, чтобы не было ощущения залипания. */
button.ps-ico:active:not(:disabled) {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: scale(.9);
  transition-duration: .06s;
}
/* Кольцо, разбегающееся от нажатия, — панель оживает, но без шума: полсекунды и исчезло. */
button.ps-ico { position: relative; overflow: visible; }
button.ps-ico:not(:disabled)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid var(--accent); opacity: 0; pointer-events: none;
}
button.ps-ico:not(:disabled):active::after { animation: psIcoPing .45s ease-out; }
@keyframes psIcoPing {
  from { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  button.ps-ico:hover:not(:disabled), button.ps-ico:active:not(:disabled) { transform: none; }
  button.ps-ico:not(:disabled):active::after { animation: none; }
}
/* Кабинеты (16.09.2026): в первой ячейке две строки — номер и под ним имя. Высота поднимается
   ТОЛЬКО на этой вкладке: класс ps-c-accid есть лишь в её таблице, соседние (Фанки, Приложения,
   БМы, События) остаются на 35px. Моноширинность даём селектором по ячейке, а не классом
   .ps-mono: тот стоит в файле ниже .ps-nm и перебил бы ссылке цвет. */
.ps-table td.ps-c-accid { height: 44px; }
.ps-c-accid .ps-nm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ps-two { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.ps-two .ps-sub { overflow: hidden; text-overflow: ellipsis; }
.ps-screen .adr-toggle.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ps-table th.ps-c-spent { width: 120px; }
/* «Расход» — единственная числовая колонка панели по ЛЕВОМУ краю (решение Бориса 16.09.2026):
   это сумма за всю жизнь кабинета, её не сравнивают по столбцу, а читают строкой. Моноширинные
   цифры оставлены. Общее правило «числа вправо» (эталон, раздел 4) тут не действует — исключение
   записано в эталон, чтобы следующая сессия не «починила» обратно. */
.ps-table td.ps-c-spent { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-table td.ps-c-bm { overflow: hidden; text-overflow: ellipsis; }
.ps-table-ev th.ps-c-when { width: 100px; } .ps-table-ev th.ps-c-kind { width: 130px; } .ps-table-ev th.ps-c-type { width: 110px; } .ps-table-ev th.ps-c-ent { width: 220px; }
/* Пакет 4 (24.09.2026): колонка «Автор» ленты событий — одна строка, не переносится: у «Текста»
   white-space: normal, и подпись в его хвосте уезжала бы за нижний край на длинных событиях. */
.ps-table-ev th.ps-c-author { width: 110px; } .ps-table-ev td.ps-c-author { white-space: nowrap; }
.ps-table td.ps-c-camps { white-space: normal; padding-top: 6px; padding-bottom: 6px; height: auto; }
.ps-table td.ps-c-text { white-space: normal; line-height: 1.3; }
.ps-camp { font-size: 11.5px; white-space: nowrap; }
.ps-sub { color: var(--muted); font-size: 10.5px; }
.ps-nc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ps-nm { color: var(--info-fg); text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.ps-nm:hover { text-decoration: underline; }
.ps-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-muted); flex: none; display: inline-block; }
.ps-dot.on { background: var(--accent); } .ps-dot.bad { background: var(--danger); } .ps-dot.wait { background: var(--warn); }
.ps-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); flex: none; }
.ps-tag-king { background: var(--king-soft); color: var(--king); border-color: var(--king-line); font-weight: 600; }
/* Заголовок группы «Вне БМ» в таблице «Кабинеты» (П4): как шапка-разделитель, одна строка на всю ширину */
.ps-table tr.ps-grp td { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11px; height: 28px; text-transform: uppercase; letter-spacing: .04em; }
/* Ярлыки в имени записи реестров (решение Бориса 11.09.2026, макет «Имена в реестрах», вариант А):
   гео — код моноширинным на синей подложке, доктор — обводкой, оффер — бинарно: под оффер зелёный,
   общий серый. Комментарий из имени файла — обычным текстом. Колонки гео / доктор / оффер /
   «В названиях» из таблиц убраны — они и так в имени. */
.reg-lbl { font-size: 10px; line-height: 1.5; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-3); color: var(--muted); flex: none; }
.reg-lbl-geo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .04em;
  color: var(--info-fg); background: color-mix(in srgb, var(--info-fg) 10%, transparent); border-color: color-mix(in srgb, var(--info-fg) 25%, transparent); }
.reg-lbl-doc { background: transparent; color: var(--text); }
.reg-lbl-offer { color: var(--ok-fg); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.reg-note { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ps-mute { color: var(--muted); } .ps-neg { color: var(--danger); } .ps-dash { color: var(--dot-muted); }
.ps-empty { color: var(--muted); padding: 14px; font-size: 12px; }
.ps-empty-row { color: var(--muted); text-align: center; }
.ps-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; flex: none; }
.ps-btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; padding: 0 10px; height: 30px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.ps-btn:hover:not(:disabled) { background: var(--surface-3); }
.ps-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
button.ps-btn.primary:hover:not(:disabled) { background: var(--accent-strong, var(--accent)); }
.ps-btn.ps-danger { color: var(--danger); border-color: var(--danger); }

/* карточка паспорта — поверх правой части списка, внутри блока */
.ps-card[hidden] { display: none !important; }
.ps-card { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: -14px 0 36px rgba(0, 0, 0, .22); display: flex; flex-direction: column; min-height: 0; overflow: hidden; font-size: 12px; }
.ps-card-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); flex: none; }
.ps-card-ttl { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ps-card-ttl h3 { margin: 0; font-size: 14px; line-height: 1.3; white-space: normal; word-break: break-word; }
.ps-cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ps-x { width: 30px; height: 30px; flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
button.ps-x:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.ps-acts { display: grid; gap: 6px; margin-top: 12px; }
.ps-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); flex: none; }
.ps-tabs button { border: 0; background: transparent; padding: 7px 10px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: 12px; }
.ps-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
button.ps-tabs-btn:hover:not(:disabled) { background: transparent; }
.ps-card-body { flex: 1 1 auto; overflow: auto; padding: 10px 14px; min-height: 0; }
.ps-kvs { display: grid; grid-template-columns: 150px 1fr; gap: 5px 10px; font-size: 12px; }
.ps-k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ps-v { font-variant-numeric: tabular-nums; word-break: break-word; }
.ps-tech { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.ps-tech summary { cursor: pointer; color: var(--muted); }
.ps-tech .ps-kvs { margin-top: 8px; }
.ps-lsec { margin-bottom: 12px; }
.ps-lh { font-weight: 600; font-size: 12px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.ps-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ps-lrow.ps-go { cursor: pointer; } .ps-lrow.ps-go:hover { background: var(--surface-3); }
.ps-lrow .ps-btn { flex: none; }
.ps-lt { display: flex; flex-direction: column; min-width: 0; }
.ps-ln { color: var(--info-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-la { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-note { margin: 8px 0 0; font-size: 11px; }
.ps-ev { display: grid; grid-template-columns: 78px 1fr; gap: 3px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ps-ev-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.ps-k { font-size: 11px; }
.ps-k-health, .ps-k-ad_rejected { color: var(--danger); } .ps-k-foreign_change, .ps-k-foreign_new { color: var(--warn); }
.ps-k-new, .ps-k-restored { color: var(--ok-fg); } .ps-k-stopped { color: var(--info-fg); } .ps-k-changed, .ps-k-confirm_missing, .ps-k-confirm, .ps-k-missing, .ps-k-error { color: var(--muted); }
.ps-card-foot { padding: 8px 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; flex: none; }
.ps-menu[hidden] { display: none !important; }
.ps-menu { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); padding: 6px; min-width: 240px; font-size: 12px; }
.ps-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 12px; }
.ps-menu button:hover:not(:disabled) { background: var(--surface-3); }
.ps-cost { color: var(--muted); font-size: 11px; margin-left: 6px; }
/* «Соц. аккаунты» (05–06.09.2026): срок ключа жёлтым, всплывашка «ссылка скопирована», форма приложения для входа */
.ps-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text); }
.ps-form { display: flex; flex-direction: column; gap: 10px; }
.ps-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.ps-form input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; padding: 6px 8px; }
.ps-form input:disabled { opacity: .6; }
.ps-form input:focus { outline: none; border-color: var(--accent); }
/* Поля, которые окно коннектора только показывает (ID и имя БМа при обновлении): readonly,
   а не disabled — выключенное поле читается хуже. Цвета — токены панели, своих нет. */
.ps-form input[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; }
.ps-form input[readonly]:focus { border-color: var(--line); }
.ps-warn { color: var(--warn); }
/* Карточка «Новый систем юзер» (12.09.2026): результат проверки у Facebook и плашки состояний */
.ps-form input, .ps-form select { height: 31px; }   /* одна высота у поля и списка (замер 12.09.2026: список был на 1,5px ниже) */
.ps-form select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; padding: 0 8px; }
.ps-form select:focus { outline: none; border-color: var(--accent); }
.ps-res { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ps-res .ps-kvs { grid-template-columns: 110px 1fr; }
.ps-plate { display: flex; gap: 7px; align-items: flex-start; border-radius: 6px; padding: 7px 9px; font-size: 11.5px; line-height: 1.4; border: 1px solid var(--line); }
.ps-plate-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-fg); }
.ps-plate-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.ps-plate-bad { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.ps-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ps-spin .7s linear infinite; vertical-align: -1px; margin-right: 5px; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ps-spin { animation: none; } }
/* Экран «Приложения»: ширины колонок */
/* «Где используется» получила свою ширину (19.09.2026): раньше она забирала весь остаток,
   а теперь остаток нужен колонке «Действия» — иначе кнопки уедут от правого края. */
.ps-table th.ps-c-app-use { width: 240px; }
.ps-table th.ps-c-app-st { width: 110px; } .ps-table th.ps-c-app-id { width: 170px; } .ps-table th.ps-c-app-when { width: 120px; }
.ps-table th.ps-c-app-ads { width: 120px; text-align: right; } .ps-table td.ps-c-app-ads { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table thead th.ps-c-app-ads .ps-th { justify-content: flex-end; }
.ps-toast[hidden] { display: none !important; }
.ps-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 95; max-width: 640px; background: var(--panel); border: 1px solid var(--accent); color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
/* Быстрая подсказка кнопок-значков (П4-доводка 24.10.2026): своя вместо браузерной, появляется почти сразу
   (JS ждёт 120 мс). Тёмная в обеих темах, поверх таблиц, мышь не перехватывает. */
.ps-tip { position: fixed; z-index: 95; max-width: 280px; padding: 5px 8px; border-radius: 6px;
  background: var(--topbar-bg); color: var(--topbar-text); font-size: 11.5px; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28); pointer-events: none; white-space: normal; }
.ps-tip[hidden] { display: none; }
.ps-ev-body { flex: 1 1 auto; }

/* колокольчик открытых поломок в верхней строке */
.tb-bell, .tb-jobs { border: 0; background: transparent; padding: 0; position: relative; cursor: pointer; font: inherit; color: inherit; }
button.tb-bell:hover:not(:disabled) { background: transparent; }
/* Значок «Задачи» — вызов ящика с логом (10.09.2026, решение Бориса). Общее правило
   button:hover красит кнопки в зелёный и сильнее простого класса — отсюда тег и :not(). */
button.tb-jobs:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
body.adr-dock-open .tb-jobs { background: rgba(255, 255, 255, .14); color: var(--topbar-text); }
/* Точка активности задач: на значке видна только когда есть о чём сообщить. */
#dockTab .job-dock-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px;
  border: 1.5px solid var(--topbar-bg); display: none; }
#dockTab .job-dock-dot.queued, #dockTab .job-dock-dot.running, #dockTab .job-dock-dot.succeeded,
#dockTab .job-dock-dot.failed, #dockTab .job-dock-dot.cancelled { display: block; }
.hb-cnt[hidden] { display: none !important; }
.hb-cnt { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.hb-pop[hidden], .hb-alert[hidden] { display: none !important; }
.hb-pop { position: fixed; z-index: 90; top: calc(var(--topbar-h) / var(--ui-scale) + 6px); right: 120px; width: 460px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: 12px; overflow: hidden; color: var(--text); }
.hb-head { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.hb-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: start; }
.hb-item:hover { background: var(--surface-3); }
.hb-item.hb-none, .hb-item.hb-done { cursor: default; color: var(--muted); }
.hb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-m { color: var(--muted); font-size: 11px; white-space: nowrap; }
.hb-foot { padding: 8px 12px; font-size: 11px; display: flex; justify-content: space-between; }
.hb-foot a { color: var(--info-fg); }
.hb-alert { position: fixed; z-index: 91; top: calc(var(--topbar-h) / var(--ui-scale) + 6px); right: 120px; width: 520px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font-size: 12px; color: var(--text); }
.hb-ah { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.hb-ah a { color: var(--info-fg); }
.hb-pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; font: 12px/1.45 inherit; font-family: inherit; max-height: 60vh; overflow: auto; }
.hb-af { padding: 8px 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }

/* рычажок включён, но сущность не крутится (выключен родитель / кабинет отключён) — паспорта, 06.09.2026 */
button.adr-sw.adr-sw-idle { opacity: .55; }

/* ── Бюджет карандашом на «Управлении рекламой» (05.09.2026) ── */
.adr-pencil { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 4px 0 0; margin-right: 2px; vertical-align: middle; }
button.adr-pencil:hover:not(:disabled) { background: transparent; color: var(--text); }
.adr-budget-edit { display: inline-flex; align-items: center; gap: 3px; }
.adr-budget-in { width: 52px; height: 24px; border: 1px solid var(--accent); border-radius: 5px; background: var(--input-bg, var(--panel)); color: var(--text); font: inherit; font-size: 11.5px; padding: 0 4px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.adr-budget-in::-webkit-outer-spin-button, .adr-budget-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.adr-budget-in.adr-budget-bad { border-color: var(--danger); }
.adr-budget-ok { height: 24px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-size: 11px; font-weight: 600; padding: 0 5px; cursor: pointer; }
button.adr-budget-ok:hover:not(:disabled) { background: var(--accent-strong, var(--accent)); }
.adr-budget-busy { color: var(--muted); cursor: progress; }
.adr-table td.adr-budget-editing { padding: 0 4px; overflow: visible; }


/* ═══════════════════════════════════════════════════════════════════════════
   Библиотека креативов (переработана 06.09.2026 по макету library_mockup.html и
   ui_guidelines.md): экран во всю ширину, слева полки «вертикаль → язык → доктор»,
   справа таблица крео, карточка крео и карточка загрузки — поверх правой части.
   Классы lib-* (старые .lib-row/.lib-node остались за деревьями мастера и «Загрузить в FB»).
   ═══════════════════════════════════════════════════════════════════════════ */
.lib-card[hidden], .lib-pane[hidden] { display: none !important; }   /* guard: класс с display перебил бы [hidden] */

/* Свой режим экрана (класс library-mode уже ставит setActiveTab): экран во всю ширину,
   лог задач — ящиком за язычком. Чужой antizombie-mode сюда брать нельзя: его правило
   display у .antizombie-view перебило бы [hidden] и показало вторую вкладку. */
body.library-mode .layout { width: 100%; max-width: none; }
body.library-mode .app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) {
  body.library-mode .workspace.library-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    display: flex; flex-direction: column; overflow: hidden;
  }
}
.library-view .adr-notes:empty { display: none; }

/* полки + правая часть */
.lib-pane { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.lib-shelf {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  overflow: auto; min-height: 0; font-size: 12px; padding: 6px 0;
}
.lib-shelf .lib-all { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent; font-weight: 600; }
.lib-shelf .lib-grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.lib-shelf .lib-grp:first-of-type { border-top: 0; margin-top: 0; }
.lib-shelf .lib-vh { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent; }
.lib-shelf .lib-vh .lib-nm2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lib-shelf .lib-car { color: var(--muted); font-size: 10px; transition: transform .2s; flex: none; }
.lib-shelf .lib-g.open > .lib-vh .lib-car { transform: rotate(90deg); }
.lib-shelf .lib-subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s; }
.lib-shelf .lib-g.open > .lib-subs { grid-template-rows: 1fr; }
.lib-shelf .lib-subs-in { min-height: 0; overflow: hidden; }
.lib-shelf .lib-lang { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 30px; cursor: pointer; border-left: 3px solid transparent; color: var(--muted); }
.lib-shelf .lib-doc { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 44px; cursor: pointer; border-left: 3px solid transparent; }
.lib-shelf .lib-all:hover, .lib-shelf .lib-vh:hover, .lib-shelf .lib-lang:hover, .lib-shelf .lib-doc:hover { background: var(--surface-3); }
.lib-shelf .active { background: var(--rail-active-bg); color: var(--rail-active-fg); border-left-color: var(--rail-active-fg); }
.lib-shelf .lib-n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; flex: none; }
.lib-shelf .active .lib-n { color: var(--rail-active-fg); }
.lib-shelf .lib-nmw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lib-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.lib-crumbs { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; min-height: 24px; }
.lib-crumbs b { color: var(--text); font-weight: 600; }
.lib-rbody { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.lib-tw { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; flex: 1; min-height: 0; font-size: 12px; }

/* таблица крео */
.lib-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 1015px; }
.lib-table th, .lib-table td { padding: 0 9px; height: 35px; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.lib-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 11.5px; user-select: none; cursor: pointer; }
.lib-table thead th.lib-nosort { cursor: default; }
.lib-table thead th.sorted { color: var(--text); }
.lib-table .lib-arr { font-size: 10px; color: var(--accent); margin-left: 4px; }
.lib-table tbody tr:hover td { background: var(--surface-3); }
.lib-table tbody td { font-variant-numeric: tabular-nums; }
.lib-table tbody tr.sel td { background: var(--accent-soft); }
.lib-table .num { text-align: right; }
.lib-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 500; }
.lib-c-pick { width: 30px; } .lib-c-fav { width: 26px; padding-left: 0 !important; }
.lib-c-lang { width: 86px; } .lib-c-doc { width: 142px; } .lib-c-files { width: 66px; }
.lib-c-up { width: 92px; } .lib-c-sp { width: 96px; } .lib-c-roi { width: 80px; } .lib-c-more { width: 34px; padding: 0 4px !important; }
.lib-nc { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lib-nm { color: var(--info-fg); cursor: pointer; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.lib-nm:hover { text-decoration: underline; }
.lib-code { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; flex: none; }
.lib-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); flex: none; }
.lib-pick { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.lib-star { border: 0; background: transparent; cursor: pointer; color: var(--dot-muted); font-size: 13px; line-height: 1; padding: 0; }
.lib-star.on { color: #d9a323; }
button.lib-star:hover:not(:disabled) { color: #d9a323; background: transparent; }
.lib-more { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
button.lib-more:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.lib-pos { color: var(--ok-fg); } .lib-neg { color: var(--danger); } .lib-dash { color: var(--dot-muted); }
.lib-empty { padding: 26px; color: var(--muted); }
.lib-bottom { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; gap: 12px; min-height: 26px; padding-right: 104px; }
.lib-bulk { display: inline-flex; align-items: center; gap: 10px; }
.lib-small { padding: 3px 9px; font-size: 11.5px; }

/* карточка крео и карточка загрузки — поверх правой части списка */
.lib-card {
  position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: -14px 0 36px rgba(0, 0, 0, .22);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; font-size: 12px; z-index: 5;
}
.lib-card-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.lib-card-ttl { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lib-card-ttl h3 { margin: 0; font-size: 14px; line-height: 1.3; white-space: normal; word-break: break-word; }
.lib-card-cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.lib-card-meta { color: var(--muted); font-size: 11px; margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.lib-x { width: 30px; height: 30px; flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
button.lib-x:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.lib-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lib-acts button { height: 30px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-acts .lib-wide { grid-column: 1 / 3; }
.lib-card-body { flex: 1; overflow: auto; padding: 10px 14px; }
.lib-card-foot { padding: 8px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.lib-kvs { display: grid; grid-template-columns: 132px 1fr; gap: 6px 10px; font-size: 12px; }
.lib-kvs .k { color: var(--muted); }
.lib-kvs .v { font-variant-numeric: tabular-nums; }
.lib-frow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.lib-frow .fn { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.lib-frow .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--info-fg); }
.lib-frow .fsz { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.lib-hint { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.45; }
.lib-drop { display: block; width: 100%; border: 1.5px dashed var(--line); border-radius: 8px; padding: 16px 14px; text-align: center; color: var(--muted); cursor: pointer; background: transparent; }
button.lib-drop:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.lib-drop b { display: block; color: var(--text); font-weight: 500; margin-bottom: 3px; }
.lib-drop span { font-size: 11px; }
.lib-dest { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: 14px; }
.lib-dest label { color: var(--muted); }
.lib-sel select { width: 100%; }
.lib-menu { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); padding: 6px; min-width: 210px; }
.lib-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text); }
.lib-menu button:hover:not(:disabled) { background: var(--surface-3); }
.lib-menu .lib-mi-danger { color: var(--danger); }
.lib-menu .lib-sep { height: 1px; background: var(--line); margin: 4px 2px; }

.lib-menu[hidden] { display: none !important; }
.library-view .adr-toggle { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.library-view .adr-toggle.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lib-warn { color: var(--warn); }
.lib-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); }
.lib-tabs button { border: 0; background: transparent; padding: 7px 10px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lib-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.lib-card .push-adsets { margin-top: 10px; }

/* Подсказка «как назвать папку и файлы» — схема в карточке загрузки (06.09.2026).
   Векторная, цвета из токенов: читается в обеих темах. */
.lib-howto { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.lib-howto figcaption { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lib-howto svg { display: block; width: 100%; max-width: 320px; height: auto; }
.lib-howto .lh-icon path { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.lib-howto .lh-icon .lh-corner { fill: var(--accent); stroke: none; }
.lib-howto .lh-line { fill: none; stroke: var(--dot-muted); stroke-width: 1.3; opacity: .75; }
.lib-howto .lh-brace { fill: none; stroke: var(--dot-muted); stroke-width: 1.3; opacity: .75; }
.lib-howto .lh-name { fill: var(--text); font-size: 15px; font-weight: 600; }
.lib-howto .lh-file { fill: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.lib-howto .lh-note { fill: var(--muted); font-size: 12px; }
.lib-howto p { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.lib-howto p.lib-hint { margin-top: 6px; }
.lib-howto code { font-size: 11px; }

/* B. Верхняя строка экранов-отчётов: у кнопки, поиска, списков и иконки была своя
   высота (32 / 23 / 21 / 19px на «Управлении рекламой») — строка шла в разнобой.
   Равняем все контролы по эталонным 31px; правило общее для «Управления рекламой»,
   «Библиотеки» и любого следующего экрана с .adr-topbar. */
.adr-topbar { align-items: center; }
.adr-bar-left, .adr-bar-right { align-items: center; }
.adr-topbar button,
.adr-topbar input[type="search"],
.adr-topbar input[type="date"],
.adr-topbar select {
  height: 31px; min-height: 31px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; line-height: 1;
}
.adr-topbar button { justify-content: center; }
/* display:flex у элементов полосы перебивал атрибут hidden — кнопка шага показывалась не на своём шаге */
.adr-topbar [hidden] { display: none !important; }
.adr-topbar .adr-icon { width: 31px; padding: 0; justify-content: center; }
.adr-updated { line-height: 31px; }

/* Выбрано несколько крео — панель действий слева, с подсветкой, чтобы её было видно */
.lib-bottom-right { display: inline-flex; align-items: center; gap: 10px; }
.lib-bottom.has-sel .lib-bulk {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 8px; padding: 3px 8px; color: var(--text);
}
.lib-bottom.has-sel #librarySelectedSummary { color: var(--text); font-weight: 600; }
.lib-c-act { width: 84px; }
.lib-act-on { color: var(--ok-fg); font-weight: 600; }
.lib-pickall { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }

/* Крошки и сводка — одной строкой над обеими колонками: пока крошки жили в правой части,
   её блок начинался ниже левого (замечание Бориса 06.09.2026). */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 24px; }
.lib-head .lib-crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-head .adr-notes { padding: 0; flex: none; }

.lib-tw > .lib-table { height: 100%; }
.lib-table tr.lib-spacer td { height: auto; padding: 0; border-bottom: 0; }
.lib-table tr.lib-spacer:hover td { background: transparent; }

/* ═══ Ревизия интерфейса 06.09.2026 ═══════════════════════════════════════
   A. Спрятанный экран обязан быть спрятан. Правила режима задают `.workspace`
   свой `display`, а он сильнее атрибута [hidden] — под «Активами» проступало
   «Управление рекламой» (831px пустоты и прокрутка страницы). Guard общий,
   чтобы грабля не повторилась на следующем экране. */
.workspace[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Мастер запуска (переработан 07.09.2026 по макету wizard_mockup_b.html):
   три шага колонкой слева, рабочая область без карточек, подробная сводка внизу.
   Классы wz-* (проверено: свободны).
   ═══════════════════════════════════════════════════════════════════════════ */
.wz-screen[hidden] { display: none !important; }

body.launch-mode .layout { width: 100%; max-width: none; }
body.launch-mode .app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) {
  body.launch-mode .workspace.wz-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  }
}

/* ступени в полосе сверху (пакет 2, этап 2) */
.wz-steps { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
/* Цвет текста задаём явно: общее правило button красит подпись в --on-accent (почти чёрный),
   и на тёмной полосе название ступени сливалось с фоном (замечание Бориса 15.09.2026). */
.wz-step { display: flex; gap: 8px; align-items: center; justify-content: flex-start; min-width: 170px; height: 31px;
  padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 12px; }
.wz-step .n { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; }
.wz-step .tt { font-size: 12px; font-weight: 600; white-space: nowrap; color: inherit; }
.wz-step.done .n { border-color: var(--accent); color: var(--accent-strong); }
.wz-step.on { border-color: var(--accent); background: var(--surface-3); color: var(--text); }
.wz-step.done { color: var(--text); }
.wz-step.on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.wz-step:hover:not(.on):not(:disabled) { background: var(--surface-3); }
.wz-step:disabled { opacity: .5; cursor: default; }

/* средний слот полосы и кнопка шага */
.wz-ctx { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
/* пилюля состояния в полосе живёт по правилам полосы: 31px и 12px, как кнопки рядом */
.wz-ctx .status-pill { display: inline-flex; align-items: center; height: 31px; padding: 0 10px; font-size: 12px; }
.wz-ctx-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wz-next { width: 170px; }

.wz-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.wz-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 0; }
.wz-screen { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

/* ссылка */
.wz-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.wz-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wz-urlbox { display: flex; flex-direction: column; gap: 6px; }
.wz-urlbox label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wz-urlbox textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg);
  padding: 0 14px; font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.wz-urlbox textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* плитки выбранного */
.wz-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: end; }
.wz-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 0 168px; }
.wz-f-wide { flex: 1 1 240px; }
.wz-f > span:first-child { font-size: 11.5px; color: var(--muted); }
.wz-f input, .wz-f select { width: 100%; height: 31px; border: 1px solid var(--line); background: var(--input-bg); border-radius: 6px; padding: 0 9px; color: var(--text); }
.wz-f select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; }
.wz-sel { position: relative; display: block; }
.wz-sel::after { content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 11px; }
/* Шаг «Настройки» в три колонки (05.10.2026, «Каталоги с подменой» + мастер): ссылка, фанка, пиксель · деньги и куда льём · тексты */
.wz-two.wz-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-f-span { grid-column: 1 / -1; }
/* Заголовок и основной текст: подпись слева, своя галочка «Шаблон» справа в той же строке */
.wz-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wz-txt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wz-txt-head > label:first-child { display: block; font-size: 11.5px; color: var(--muted); }
label.wz-tpl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; user-select: none; }
.wz-tpl input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.wz-tpl input:disabled { cursor: default; }
.wz-txt input[type="text"] { width: 100%; height: 31px; border: 1px solid var(--line); background: var(--input-bg); border-radius: 6px; padding: 0 9px; color: var(--text); }
.wz-txt textarea { width: 100%; min-height: 0; height: calc(6 * 1.4em + 14px); resize: none; border: 1px solid var(--line); background: var(--input-bg);
  border-radius: 6px; padding: 6px 9px; color: var(--text); font-size: 14px; line-height: 1.4; }
.wz-txt input[type="text"]:focus, .wz-txt textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-txt input:disabled, .wz-txt textarea:disabled { opacity: .55; }

/* фильтры и таблицы */
.wz-segrow { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
/* метод залива плитками (пакет 2, этап 4) */
.wz-tiles { display: flex; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.wz-mtile { display: flex; align-items: center; gap: 11px; min-width: 260px; padding: 11px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; }
.wz-mtile .ic { font-size: 19px; line-height: 1; }
.wz-mtile .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-mtile .tx b { font-size: 13px; font-weight: 600; }
.wz-mtile .tx span { font-size: 11.5px; color: var(--muted); }
.wz-mtile.on { border-color: var(--accent); background: var(--accent-soft); }
.wz-mtile.on .tx b { color: var(--accent-strong); }
button.wz-mtile:hover:not(.on) { background: var(--surface-3); }
.wz-ctx-slot .wz-search { width: 200px; }
.wz-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wz-seg button { border: 0; background: var(--panel); padding: 0 13px; height: 29px; cursor: pointer; font-size: 12px; border-right: 1px solid var(--line); color: var(--text); }
.wz-seg button:last-child { border-right: 0; }
.wz-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
button.wz-seg-b:hover:not(.on) { background: var(--surface-3); }
.wz-search { width: 240px; height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--text); }
.wz-tblwrap { flex: 0 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
.wz-tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.wz-tbl th, .wz-tbl td { padding: 0 10px; height: 42px; white-space: nowrap; text-align: left; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); }
.wz-tbl thead th { position: sticky; top: 0; background: var(--bg); color: var(--muted); font-weight: 500; font-size: 11.5px; white-space: normal; line-height: 1.25; height: auto; padding: 8px 10px; vertical-align: bottom; z-index: 1; }
.wz-tbl tbody tr:hover td { background: var(--surface-3); }
.wz-tbl tbody tr.sel td { background: var(--accent-soft); }
.wz-tbl tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.wz-tbl td.num, .wz-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.wz-tbl .muted { color: var(--muted); }
.wz-acc td { height: auto; padding-top: 9px; padding-bottom: 9px; white-space: normal; vertical-align: top; }
.wz-acc .wz-c-name b { display: block; font-size: 13.5px; }
.wz-acc .wz-c-name span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Пакет 7 (02.10.2026): подпись «чей» — логин хозяина мелким серым, только админу у чужого (цвета и
   размер — как у подстрочников рядом, новых нет). В строке мастера она стоит внутри блочного span. */
.own-tag { color: var(--muted); font-size: 10.5px; font-weight: 400; }
.wz-acc .wz-c-name span.own-tag { display: inline; margin: 0; }
.ps-bmsub .own-tag { flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-nc .own-tag { flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Пустые состояния без профилей: мастер и «Управление рекламой» — строка и одна кнопка перехода. */
.wz-empty-cell { padding: 0 !important; height: auto; }
.wz-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
.adr-empty-go { margin-top: 12px; }
.wz-acc .camps { font-size: 12px; line-height: 1.5; }
.wz-acc .camps span { display: block; }
.wz-c-name { width: 196px; } .wz-c-st { width: 104px; } .wz-c-card { width: 78px; }
.wz-c-spent { width: 92px; } .wz-c-budget { width: 112px; } .wz-c-cnt { width: 70px; } .wz-c-go { width: 162px; }
.wz-c-go { text-align: right; } .wz-c-go .btn, .wz-c-go button { height: 28px; padding: 0 13px; font-size: 12px; white-space: nowrap; }
.wz-c-go button.wz-rf { width: 28px; padding: 0; margin-right: 6px; font-size: 14px; line-height: 1; }
.wz-pres td { height: 36px; }
.wz-c-pick { width: 30px; } .wz-c-pname { width: 206px; } .wz-c-vert { width: 96px; } .wz-c-geo { width: 150px; }
.wz-c-doc { width: 154px; } .wz-c-lang { width: 92px; } .wz-c-crea { width: 80px; }
.wz-crea td { height: 38px; }
.wz-c-cname { width: 230px; } .wz-c-code { width: 150px; } .wz-c-files { width: 80px; } .wz-c-act { width: 86px; }
.wz-c-sp { width: 118px; } .wz-c-roi { width: 92px; }
.wz-radio { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--dot-muted); display: inline-block; vertical-align: middle; }
.wz-radio.on { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, transparent 46%); }
.wz-pick { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.wz-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.wz-hint.bad { color: var(--danger); }
.wz-hint.warn { color: var(--warn); }
.wz-txt .wz-hint { min-height: 1.45em; }
/* Причина у «Опубликовать» — в полосе слева от кнопки: красная блокирует, жёлтая только предупреждает */
.wz-top .adr-bar-right { flex-wrap: nowrap; min-width: 0; }
.wz-why { flex: 0 1 auto; min-width: 0; max-width: 470px; font-size: 12px; line-height: 31px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.wz-why:empty { display: none; }
.wz-why.bad { color: var(--danger); }
.wz-why.warn { color: var(--warn); }
.wz-warn { color: var(--warn); font-size: 12.5px; padding: 10px 0 0; }
.wz-warn:empty { display: none; }

/* нижняя полоса: подробная сводка + действия */
.wz-bottom { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 12px 96px 14px 20px; background: var(--surface-2); }
.wz-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 16px; flex: 1 1 auto; min-width: 0; }
.wz-sum .cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wz-sum .lab { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wz-sum .cell b { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }

/* ══════════════════════════════════════════════════════════════════════════
   Экраны реестров: «Пресеты · Гео · Доктора · Вертикали» (08.09.2026)
   Каркас, таблица, карточка и меню — общие классы панели (.ps-*, .adr-*),
   здесь только своё: полноэкранный режим, верхняя строка с фильтрами,
   «Итого» и ширины колонок. Первая строка — guard: CSS display на классе
   перебивает атрибут [hidden] (грабля 06.09.2026).
   ══════════════════════════════════════════════════════════════════════════ */
.reg-screen[hidden], .reg-card[hidden] { display: none !important; }

/* Свой режим экрана (класс presets-mode ставит setActiveTab). Чужой library-mode
   брать нельзя: его правило display у .library-view перебило бы [hidden]. */
body.presets-mode .layout { width: 100%; max-width: none; }
body.presets-mode .app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) {
  body.presets-mode .workspace.presets-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    display: flex; flex-direction: column; overflow: hidden;
  }
}

.reg-screen { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.reg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.reg-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 104px; }  /* место под язычок «Задачи» */
.reg-bar button, .reg-bar input, .reg-bar select { height: 31px; }
.reg-bar .adr-search { width: 210px; }
.reg-rbody { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.reg-tw { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; min-height: 0; font-size: 12px; }

/* «Итого» отдельной таблицей: при коротком списке садится на нижний край (margin-top:auto),
   при длинном — липнет снизу. Ширины держит нулевая «призрачная» шапка с теми же классами. */
.reg-scroll { display: flex; flex-direction: column; min-height: 100%; }
.reg-scroll > .ps-table { flex: none; }
.reg-totals { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }
.reg-totals thead.reg-ghost th { height: 0; padding: 0; border: 0; font-size: 0; line-height: 0; position: static; overflow: hidden; }
.reg-totals tbody td { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 500; }

.ps-table thead th.reg-sortable { cursor: pointer; }
.ps-table thead th.reg-sorted { color: var(--text); }
.reg-arr { font-size: 10px; color: var(--accent); }
.ps-table th.reg-num, .ps-table td.reg-num { text-align: right; }
.ps-table thead th.reg-num .ps-th { justify-content: flex-end; }
.reg-pos { color: var(--ok-fg); }
.reg-more { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
button.reg-more:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

/* ширины колонок */
.reg-t-presets { min-width: 1360px; }
.reg-t-presets th.reg-c-vert { width: 120px; }   .reg-t-presets th.reg-c-lang { width: 104px; }
.reg-t-presets th.reg-c-live { width: 84px; }
.reg-t-presets th.reg-c-launches { width: 80px; } .reg-t-presets th.reg-c-last { width: 110px; }
.reg-t-geo { min-width: 1280px; }
.reg-t-geo th.reg-c-cc { width: 84px; }       .reg-t-geo th.reg-c-key { width: 260px; }
.reg-t-geo th.reg-c-presets { width: 92px; }
.reg-t-geo th.reg-c-live { width: 88px; }
.reg-t-doctors { min-width: 960px; }
.reg-t-doctors th.reg-c-lang { width: 150px; }
.reg-t-doctors th.reg-c-presets { width: 96px; } .reg-t-doctors th.reg-c-live { width: 90px; }
.reg-t-doctors th.reg-c-launches { width: 88px; }
.reg-t-verticals { min-width: 900px; }
.reg-t-verticals th.reg-c-gender { width: 140px; } .reg-t-verticals th.reg-c-age { width: 140px; }
.reg-t-verticals th.reg-c-presets { width: 100px; } .reg-t-verticals th.reg-c-live { width: 92px; }
.reg-t-verticals th.reg-c-launches { width: 90px; }
.ps-table th.reg-c-more { width: 38px; }
.ps-table td.reg-c-more { padding: 0 4px; }

/* карточка: форма реестра, галочка оффера, состав гео */
.reg-form { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 7px 10px; align-items: center; }
.reg-form label, .reg-form .reg-lbl { color: var(--muted); font-size: 11.5px; }
.reg-form input, .reg-form select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12px; height: 29px; padding: 0 8px; }
.reg-form input:read-only { background: var(--surface-2); color: var(--muted); }
.reg-form input:disabled { opacity: .55; }
.reg-form input:focus, .reg-form select:focus { outline: none; border-color: var(--accent); }
.reg-pair { display: flex; align-items: center; gap: 8px; }
.reg-pair input { width: 66px; }
.reg-pair em { color: var(--muted); font-style: normal; }
.reg-sect { margin-top: 14px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reg-bucket { margin-top: 7px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.reg-bucket-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.reg-bucket-h b { font-weight: 500; }
.reg-err { color: var(--danger); margin-top: 8px; font-size: 11.5px; }

/* состав гео-профиля в карточке (09.09.2026): списки мест, добавление типа, итог проверки */
.reg-bucket textarea {
  width: 100%; box-sizing: border-box; border: 0; border-radius: 0;
  background: var(--input-bg); color: var(--text);
  font: 12px/1.5 inherit; padding: 7px 9px; resize: vertical; min-height: 54px; display: block;
}
.reg-bucket textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.reg-addtype {
  height: 24px; padding: 0 6px; font-size: 11.5px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--input-bg); color: var(--muted); cursor: pointer;
}
.reg-deltype { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
button.reg-deltype:hover:not(:disabled) { color: var(--danger); }
.reg-resolve { border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; margin-top: 7px; font-size: 11.5px; }
.reg-resolve-sum { color: var(--muted); margin-bottom: 6px; }
.reg-resolve-row { display: flex; gap: 7px; padding: 2px 0; align-items: baseline; }
.reg-resolve-row.ok > span:first-child { color: var(--ok-fg); }
.reg-resolve-row.miss { color: var(--danger); }

/* режим гео-профиля: общее гео или гео под оффер (09.09.2026) */
.reg-modes { display: flex; gap: 0; }
.reg-mode {
  flex: 1; height: 29px; border: 1px solid var(--line); background: var(--input-bg);
  color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
}
.reg-mode:first-child { border-radius: 6px 0 0 6px; }
.reg-mode:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.reg-mode.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
button.reg-mode:hover:not(.on) { background: var(--surface-3); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   Каретки — один размер по всей панели (замечание Бориса 12.09.2026: «треугольнички супер
   маленькие, тяжело попасть»). Меню слева (.nav-caret), группы БМ (.ps-car), дерево «Управления
   рекламой» (.adr-caret), полки библиотеки (.lib-car): зона нажатия 24×24 (18 на экране), шеврон
   9px рамкой 2px, серый; при наведении подложка и тёмный цвет. Раскрыто — у меню, колонки и полок
   поворачивается сам блок (прежние правила), у дерева — шеврон. Блок стоит в конце файла, чтобы
   перебить прежние размеры (font-size 10px, 16×16 с шевроном 5px).
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-caret, .ps-car, .adr-caret, .lib-shelf .lib-car {
  width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 6px; color: var(--muted); font-size: 0; line-height: 0; cursor: pointer;
  position: relative; transition: background .15s, color .15s, transform .18s;
}
.nav-caret::before, .ps-car::before, .adr-caret::before, .lib-shelf .lib-car::before {
  content: ""; position: static; width: 9px; height: 9px; box-sizing: border-box;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: -4px; transition: transform .18s;
}
.adr-caret.open::before { transform: rotate(45deg); margin-left: 0; margin-top: -4px; }
.adr-caret-empty::before { display: none; }
.nav-caret:hover, .ps-car:hover, .lib-shelf .lib-car:hover, button.adr-caret:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.nav-caret { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Свой вход в панель (пакет 3): окно входа поверх панели, меню пользователя в
   шапке, плашки «перезапускается» и «обновилась». Цвета — только токены панели.
   Разметка — webui/index.html, поведение — webui/auth.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Окно во весь экран: панель под ним не рисуется, пока /api/me не ответил 200.
   z-index выше плавающих кнопок (9999), иначе тема и ↻ висели бы поверх окна.
   Guard на [hidden] обязателен — свой display перебивает атрибут (грабли, п. 1). */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}
.auth-screen[hidden] { display: none !important; }
.auth-topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
}
.auth-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }

.auth-card {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.auth-card[hidden] { display: none !important; }
.auth-card h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 12px; color: var(--muted); }
.auth-field input { font-size: 14px; }
.auth-field input:focus { outline: none; border-color: var(--accent); }
.auth-hint { font-size: 11.5px; color: var(--muted); }
.auth-msg {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-fg);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.auth-msg[hidden] { display: none !important; }
.auth-actions { display: flex; justify-content: flex-end; gap: 10px; }
.auth-actions button { padding: 10px 20px; font-size: 13.5px; font-weight: 600; }
.auth-actions button[hidden] { display: none !important; }
/* Пункт 6 большой стройки: «Войти через Google» — ссылка видом главной кнопки окна (единственная зелёная), над формой
   пароля; «Войти» паролем — серая. Тонкая черта отделяет её от формы. */
.auth-google {
  display: block;
  text-align: center;
  border: 1px solid transparent;   /* как у кнопок панели: та же высота, что у полей и «Войти» */
  padding: 10px 20px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.auth-google:hover { background: var(--accent-strong); color: var(--on-accent); }
.auth-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-sep { height: 1px; background: var(--line); }

/* Блок пользователя в шапке: имя из /api/me и меню (сменить пароль · только админ · выйти) */
.tb-user { position: relative; }
.tb-user[hidden] { display: none !important; }
.tb-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--topbar-text);   /* явно: общее правило button красит текст в --on-accent */
  font-weight: 400;
  cursor: pointer;
}
button.tb-user-btn:hover:not(:disabled) { background: var(--topbar-fill); }
.tb-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                    /* прижато к правому краю окна — всплывашка не вылезает */
  min-width: 200px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.tb-menu[hidden] { display: none !important; }
.tb-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.tb-menu button:hover:not(:disabled) { background: var(--surface-3); }
.tb-menu button[hidden] { display: none !important; }

/* Плашки состояния сервера — показываются ПО ОДНОЙ (поправка к макету 22.09.2026) */
.auth-plate {
  position: fixed;
  top: calc(var(--topbar-h) + 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10010;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.auth-plate[hidden] { display: none !important; }
.auth-plate-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.auth-plate-spin {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: auth-spin 1s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-plate-spin { animation: none; } }

/* Плашка «перезапустится, когда доиграют задачи» (пакет 5) — своё место снизу по центру:
   #authPlate («Панель обновилась») стоит вверху, FAB-кнопки (↻/тема) — справа внизу, эта
   плашка их не перекрывает. Во всех вкладках сразу — рисует reuploadQueue по /api/job_queue. */
.restart-plate {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10005;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--warn-fg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.restart-plate[hidden] { display: none !important; }
.restart-plate button { font-size: 12px; padding: 4px 10px; }

/* ── Плашка «нет прокси» (пакет 19; с пакета 20 ведёт на «Профиль» → «Прокси») ─────────────── */
.proxy-plate {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: 12.5px;
}
.proxy-plate[hidden] { display: none !important; }
.proxy-plate span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxy-plate a { flex: 0 0 auto; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   «Профиль» (пакет 20): вкладки «Личная информация · Уведомления · Прокси» над полосой кнопок,
   таблица прокси и карточка .ps-card внутри блока списка — по образцу паспортов «Активов».
   Классы pf-* и режим body.profile-mode проверены по всем файлам webui: свободны. Чужой режим
   (passports-mode, antizombie-mode) не берём: его display у чужого .workspace перебил бы [hidden].
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-screen[hidden], .ps-card .ps-res[hidden] { display: none !important; }   /* guard: display класса сильнее [hidden] */
body.profile-mode .layout { width: 100%; max-width: none; }
body.profile-mode .app { grid-template-columns: minmax(0, 1fr); }
body.profile-mode .workspace.profile-view { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 981px) {
  body.profile-mode .workspace.profile-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    overflow: hidden;
  }
}
.pf-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); flex: none; }
.pf-title { padding: 8px 14px 8px 0; font-size: 15px; font-weight: 700; color: var(--text); }
/* Своё правило с тегом и :not(:disabled): общее button:hover красит любую кнопку в зелёный. */
button.pf-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: transparent; color: var(--muted); padding: 8px 14px; font-size: 13px; font-weight: 400; }
button.pf-tab:hover:not(:disabled) { background: transparent; color: var(--text); }
button.pf-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.pf-screen { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
/* Таблица прокси: колонки с данными собраны слева, остаток забирает «Действия» (эталон, раздел 15). */
.ps-table th.pf-c-who { width: 150px; } .ps-table th.pf-c-host { width: 210px; } .ps-table th.pf-c-ord { width: 120px; }
.ps-table th.pf-c-zhiv { width: 170px; } .ps-table th.pf-c-ts { width: 130px; }
.pf-table tbody tr[data-pf-row] { cursor: pointer; }
/* Место под кнопку, которой в строке нет: значки стоят ровными столбиками (эталон, раздел 14). */
.ps-ico-gap { display: inline-block; width: 34px; height: 30px; vertical-align: middle; }
.ps-acts.pf-acts2 { grid-template-columns: 1fr 1fr; }
/* ── «Профиль → Уведомления» (пункт 1 большой стройки, макет uvedomleniya_mockup.html утверждён 26.10.2026) ──
   Префикс un-* проверен по всем файлам webui: свободен. Режим — прежний body.profile-mode, экран — #pfNotify. */
#pfNotify [hidden] { display: none !important; }   /* guard: display классов (.ps-rbody, .pu-info, .adr-foot) сильнее [hidden] */
.un-state { color: var(--text); font-size: 12px; line-height: 31px; white-space: nowrap; }
.un-state b { font-weight: 600; font-variant-numeric: tabular-nums; }
.un-plate { flex: none; }
.ps-table th.un-c-name { width: 380px; } .ps-table th.un-c-short { width: 300px; } .ps-table th.un-c-tg { width: 130px; }
/* «Отправлено» — число сообщений, реально ушедших в Telegram; цифры справа, по нажатию — разбивка 7 / 30 / всего / последнее. */
.ps-table th.un-c-sent { width: 110px; }
.ps-table thead th.un-c-sent .ps-th { justify-content: flex-end; gap: 6px; }
.ps-table td.un-c-sent { text-align: right; font-variant-numeric: tabular-nums; }
button.un-n { border: 0; background: transparent; padding: 1px 5px; border-radius: 4px; font: inherit; font-size: 12px; font-weight: 400;
  color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; }
button.un-n.un-zero { color: var(--muted); }
button.un-n:hover:not(:disabled), button.un-n.on { background: var(--surface-3); color: var(--text); }
.un-table tr.un-cat-row { cursor: pointer; }
.un-table tr.un-sub td { background: var(--surface-2); }
.un-table tbody tr.un-sub:hover td { background: var(--surface-3); }
.un-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.un-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.un-sub .un-name { padding-left: 20px; }
.un-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text); }
.un-short-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.un-short { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.un-cat-row .un-short { color: var(--text); }
.un-table tr.un-off td, .un-table tr.un-off .un-code { color: var(--muted); }
button.un-i { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 14px; line-height: 22px; font-weight: 400; cursor: pointer; }
button.un-i:hover:not(:disabled), button.un-i.on { background: var(--surface-3); color: var(--text); }
.un-tgcell { display: flex; align-items: center; gap: 8px; }
.un-cnt { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
input.un-chk { width: 15px; height: 15px; margin: 0 0 0 2px; vertical-align: middle; accent-color: var(--accent); cursor: pointer; flex: none; }
input.un-chk:disabled { cursor: default; opacity: .45; }
.un-link { display: flex; align-items: center; gap: 8px; min-width: 0; }
.un-link code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.un-link .ps-btn { flex: none; }
#unLink .ps-v { min-width: 0; }   /* колонка 1fr сжимается — «Скопировать» не вылезает за рамку (разбор кода, П5-3) */
.un-tg .ps-ln { color: var(--text); }
.un-tg .ps-nc { min-width: 0; }
/* Подсказка ⓘ: своя всплывашка (наведение и нажатие). body в зуме 0.75, у подсказки обратный зум — координаты ставятся
   прямо в пикселях экрана (getBoundingClientRect), без деления на масштаб. */
.un-tip[hidden] { display: none !important; }
.un-tip { position: fixed; z-index: 96; zoom: calc(1 / var(--ui-scale)); left: 0; top: 0; width: max-content; max-width: 340px; padding: 9px 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.un-tip b { display: block; font-weight: 600; margin-bottom: 4px; }
.un-tip ul { margin: 0; padding-left: 16px; }
.un-tip li { margin: 2px 0; }
.un-tip .un-tip-ex { color: var(--muted); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   «Пользователи» (пакет 12, только админ): «Люди» — таблица мест и карточка .ps-card внутри блока
   списка, «Журнал» — журнал нажатий по образцу «Событий»; «Профиль → Личная информация» — блок .pu-info.
   Классы pu-* и режим body.users-mode проверены по всем файлам webui: свободны. Чужой режим не берём
   (грабля 1 эталона): его display у чужого .workspace перебил бы [hidden].
   ═══════════════════════════════════════════════════════════════════════════ */
.pu-screen[hidden], .pu-info[hidden] { display: none !important; }   /* guard: display класса сильнее [hidden] */
body.users-mode .layout { width: 100%; max-width: none; }
body.users-mode .app { grid-template-columns: minmax(0, 1fr); }
body.users-mode .workspace.users-view { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 981px) {
  body.users-mode .workspace.users-view {
    height: calc(100vh / var(--ui-scale) - var(--topbar-h) - 36px);
    overflow: hidden;
  }
}
.pu-screen { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
/* «Люди»: колонки с данными собраны слева, остаток забирает «Действия» (эталон, раздел 15). */
.ps-table th.pu-c-sab { width: 170px; } .ps-table th.pu-c-who { width: 100px; } .ps-table th.pu-c-su { width: 170px; }
.ps-table th.pu-c-last { width: 150px; } .ps-table th.pu-c-st { width: 190px; }
.pu-table tbody tr[data-pu-row] { cursor: pointer; }
/* «Журнал»: те же размеры строк, что «События» (.ps-table-ev). */
.ps-table-ev th.pu-c-when { width: 110px; } .ps-table-ev th.pu-c-kto { width: 130px; } .ps-table-ev th.pu-c-chto { width: 300px; }
.ps-table-ev th.pu-c-adr { width: 300px; } .ps-table-ev th.pu-c-itog { width: 190px; }
.pu-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); }
.pu-bad { color: var(--danger-fg); }
/* Одноразовый пароль — плашкой в карточке, один раз; выделяется целиком одним кликом. */
.pu-otp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-otp code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; user-select: all; }
.pu-plate-col { flex-direction: column; gap: 8px; }
.pu-card-plates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pu-prx { margin-top: 12px; }
.pu-modal-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.4; }
/* «Профиль → Личная информация»: строки «поле — значение» под полосой кнопок. */
.pu-info { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; max-width: 640px; }
.pu-info .ps-kvs { grid-template-columns: 170px 1fr; font-size: 12.5px; gap: 8px 12px; }


/* Вход FBTool (вкладка «Соц. аккаунты», П1 модуля браузерного токена, 23.10.2026) */
.fbt-input { width: 100%; min-height: 64px; resize: vertical; box-sizing: border-box; margin: 10px;
  width: calc(100% - 20px); font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; padding: 8px 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
.fbt-input::placeholder { color: var(--muted); }
.fbt-name { width: calc(100% - 20px); box-sizing: border-box; margin: 10px 10px 0; padding: 8px 10px;
  font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; }
.fbt-name::placeholder { color: var(--muted); }
#fbtStatus { color: var(--muted); font-size: 13px; }
.ps-ok { color: var(--ok-fg); }


/* Таблица входов FBTool — действия и контекст (23.10.2026) */
.fbt-cardacts { padding: 0 10px 12px; display: flex; gap: 8px; }
#fbtCtx { color: var(--muted); font-size: 13px; }

/* ── Карточка кинга (26.10.2026): плитки «что видит», чипы связей, события ── */
.ps-sees-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 5px; }
.ps-sees { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ps-see { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 8px 4px; text-align: center; }
.ps-see-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-see-n.ps-see-act { color: var(--ok-fg); }
.ps-see-c { font-size: 9.5px; color: var(--muted); margin-top: 1px; line-height: 1.2; }
.ps-kchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-kchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 11.5px; line-height: 1.2; cursor: pointer; }
button.ps-kchip:hover:not(:disabled) { background: var(--surface-3); border-color: var(--king-line); }
.ps-kchip.ps-khidden { display: none; }
.ps-kchips.open .ps-kchip.ps-khidden { display: inline-flex; }
.ps-kmore { border: 0; background: none; color: var(--info-fg); font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px 2px; border-bottom: 1px dashed var(--line); border-radius: 0; }
button.ps-kmore:hover:not(:disabled) { color: var(--accent-strong); }
.ps-klink { color: var(--info-fg); cursor: pointer; }
.ps-k-ok { color: var(--ok-fg); } .ps-k-bad { color: var(--danger); } .ps-k-warn { color: var(--warn); } .ps-k-king { color: var(--king); }
@media (max-width: 560px) { .ps-sees { grid-template-columns: repeat(3, 1fr); } }