:root {
  --vk: #2787f5;
  --vk-dark: #1a6fd6;
  --bg: #f5f6f8;
  --card: #fff;
  --line: #e3e6eb;
  --text: #1d2330;
  --muted: #818c99;
  --green: #4bb34b;
  --red: #e64646;
  --amber: #f5a623;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Топбар */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 16px; }
.spacer { flex: 1; }
.cabinet { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 340px; }

.btn { border: 0; border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.btn.primary { background: var(--vk); color: #fff; }
.btn.primary:hover { background: var(--vk-dark); }
.btn.primary:disabled { background: #b9d6fb; cursor: default; }
.btn.ghost { background: #eef1f5; color: var(--text); }
.btn.ghost:hover { background: #e3e8ee; }

/* Панель задач */
.tasks-panel {
  position: absolute; right: 16px; top: 52px; width: 420px; max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 8px;
}
.task-item { padding: 9px 10px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.task-item:last-child { border-bottom: 0; }
.task-head { display: flex; justify-content: space-between; gap: 8px; }
.task-op { font-weight: 600; }
.task-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.task-badge { font-size: 12px; padding: 2px 9px; border-radius: 11px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.task-badge.queued { background: #eef1f5; color: var(--muted); }
.task-badge.running { background: #eaf2fe; color: var(--vk-dark); }
.task-badge.done.ok { background: #e7f6e7; color: #2f7a2f; }
.task-badge.done.fail { background: #fde8e8; color: var(--red); }
.task-failtoggle { margin-top: 5px; cursor: pointer; color: var(--red); font-size: 12px; font-weight: 600; user-select: none; }
.task-failtoggle:hover { text-decoration: underline; }
.task-fails { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.task-fail-row { font-size: 12px; color: var(--red); background: #fdf1f1; border-radius: 6px; padding: 4px 7px; word-break: break-word; }
.task-fail-row.muted { color: var(--muted); background: transparent; padding: 2px 7px; }
.task-fail-http { font-weight: 600; opacity: 0.8; }
.task-fail-hint { display: block; margin-top: 2px; color: #8a5a00; font-size: 11px; }

main { padding: 16px; max-width: min(1680px, 95vw); margin: 0 auto; }

/* Вкладки */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tab { background: transparent; border: 0; padding: 9px 16px; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--muted); font-size: 15px; }
.tab.active { color: var(--vk); font-weight: 600; box-shadow: inset 0 -2px 0 var(--vk); }

.tabpane { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.search { flex: 0 0 320px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.muted { color: var(--muted); font-size: 13px; }

/* Таблицы */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; max-height: 60vh; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; background: #fafbfc; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; z-index: 1; }
tbody tr:hover { background: #f7f9fc; }
td.name { white-space: normal; font-weight: 500; }
td.name.clickable { color: var(--vk); cursor: pointer; }
td.name.clickable:hover { text-decoration: underline; }
.col-mini { width: 58px; text-align: center; white-space: nowrap; }
.col-mini input { cursor: pointer; vertical-align: middle; }
.col-mini input + .tgl { margin-left: 8px; } /* отступ тумблера от чекбокса (группы/объявления) */

/* Статус-точки */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); }
.dot.gray { background: #c4ccd6; }

/* Тумблер вкл/выкл статуса (как в кабинете VK) — в самом левом столбце */
.tgl { position: relative; display: inline-block; vertical-align: middle; width: 30px; height: 18px; padding: 0; border: none; border-radius: 9px; background: #c4ccd6; cursor: pointer; transition: background .15s; }
.tgl.on { background: var(--green); }
.tgl .tgl-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.tgl.on .tgl-knob { transform: translateX(12px); }
.tgl.busy { opacity: .55; cursor: default; }

.utm-cell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; }

/* Всплывающие иконки строки (при наведении) + меню ⋯ */
td.name { position: relative; }
.row-acts { display: none; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
tr:hover .row-acts { display: inline-flex; gap: 4px; }
.ric { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.ric:hover { background: #f2f6fb; color: var(--vk-dark); border-color: #cfe0f6; }
.row-menu { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); padding: 6px; min-width: 200px; }
.rm-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.rm-item:hover { background: #f2f6fb; }
.rm-danger { color: var(--red); }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { background: #cf3a3a; }

/* Панель операции */
.op-panel { margin-top: 14px; padding: 14px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; }
.op-title { font-weight: 600; margin-bottom: 8px; }
#utmValue { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, "SF Mono", Consolas, monospace; resize: vertical; }
.op-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.empty { padding: 30px; text-align: center; color: var(--muted); }
.hidden { display: none !important; }
.row-result { font-size: 12px; }
.row-result.ok { color: var(--green); }
.row-result.fail { color: var(--red); }

/* Тост */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1d2330; color: #fff; padding: 11px 18px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 50; max-width: 80vw;
}
.toast.err { background: var(--red); }

/* Ряд вкладок + хлебная крошка */
.tabs-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ctx-chip { display: inline-flex; align-items: center; gap: 8px; background: #eaf2fe; color: var(--vk-dark); padding: 5px 10px; border-radius: 16px; font-size: 13px; }
.ctx-chip .x { cursor: pointer; font-weight: 700; opacity: .7; }
.ctx-chip .x:hover { opacity: 1; }
.search-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-chip { background: #fff3e0; color: #8a5a00; } /* чип активного поиска — тёплый, отличается от синего чипа выбора */

/* Тулбар */
.toolbar .spacer { flex: 1; }

/* Дропдаун-меню (Статус, Действия) */
.dropdown { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px;
}
.menu.menu-right { left: auto; right: 0; }
.menu label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.menu label:hover { background: #f2f6fb; }
.menu .act { padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.menu .act:hover { background: #f2f6fb; }
.menu .menu-empty { padding: 9px 10px; color: var(--muted); }

/* Сортируемые заголовки + числовые столбцы */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--vk); }
th.th-sort.active { color: var(--vk); }
td.num, th.num { text-align: right; }

.loading-row { text-align: center; color: var(--muted); padding: 26px; font-size: 14px; }

/* Итоговая строка — зафиксирована внизу при прокрутке списка (кампании/группы/объявления) */
.table-wrap tfoot td { position: sticky; bottom: 0; background: #eef4fb; border-top: 2px solid #cfe0f5; font-weight: 600; z-index: 2; white-space: nowrap; }
.table-wrap tfoot tr:hover { background: #eef4fb; }

/* Кнопка/меню периода (даты как в ВК) */
.period-btn { font-weight: 600; }
.menu-period { min-width: auto; max-height: calc(100vh - 90px); overflow-y: auto; }
.menu .act.active { background: #eaf2fe; color: var(--vk-dark); font-weight: 600; }

/* Две колонки: пресеты | календарь — панель ниже и шире (открывается влево от кнопки) */
/* align-items: flex-start — иначе флекс растягивает колонку календаря по высоте пресетов,
   и грид распихивает лишнюю вертикаль между строками дней (провал после первой недели). */
.period-wrap { display: flex; gap: 6px; align-items: flex-start; }
.period-presets { min-width: 172px; }
.period-presets .act { white-space: nowrap; }

/* Календарь произвольного диапазона в меню периода */
.cal-sep { margin: 0 2px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cal { padding: 2px 2px 0 8px; border-left: 1px solid var(--line); }  /* хугает сетку (7×30+gap = 222px) — без слака */
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px; }
.cal-title { font-weight: 600; font-size: 13px; }
.cal-nav { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--vk); }
.cal-nav:hover { background: #f2f6fb; }
/* Колонки ФИКСИРОВАННЫЕ 30px, не 1fr — ширина дней недели не зависит от ширины меню/контейнера */
.cal-grid { display: grid; grid-template-columns: repeat(7, 30px); grid-auto-rows: 30px; gap: 2px; align-content: start; }
.cal-wd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.cal-day { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 6px; font-size: 12px; cursor: pointer; user-select: none; }
.cal-day:hover:not(.empty):not(.disabled) { background: #f2f6fb; }
.cal-day.empty { cursor: default; }
.cal-day.disabled { color: #c9cfd8; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--line); }
.cal-day.range { background: #eaf2fe; border-radius: 0; }
.cal-day.sel { background: var(--vk); color: #fff; font-weight: 600; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px 4px; }
.cal-sel { font-size: 12px; color: var(--muted); }
.cal-apply { padding: 5px 12px; border: none; border-radius: 7px; background: var(--vk); color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; }
.cal-apply:hover:not(:disabled) { background: var(--vk-dark); }
.cal-apply:disabled { background: #c9cfd8; cursor: default; }

/* Панель настройки столбцов */
.menu-cols { min-width: 260px; max-height: 60vh; overflow: auto; }
.cols-hint { padding: 6px 10px 8px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.col-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; }
.col-item:hover { background: #f7f9fc; }
.col-item.dragging { opacity: .5; background: #eaf2fe; }
.col-item label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; padding: 4px 0; }
.col-drag { cursor: grab; color: var(--muted); font-size: 13px; letter-spacing: -2px; padding: 0 2px; }
.col-drag:active { cursor: grabbing; }

/* Модалка */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,26,38,.45); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal { position: relative; background: #fff; border-radius: 14px; padding: 22px; width: 540px; max-width: 92vw; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); }
.modal h3 { margin: 0 0 6px; }
.modal .modal-sub { color: var(--muted); margin-bottom: 14px; }
.modal textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, "SF Mono", Consolas, monospace; resize: vertical; }
.modal .modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.modal input[type="number"], .modal select, .modal input[type="text"], .modal input:not([type]) {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.modal .fld { display: block; }
.modal .fld input { display: block; margin-top: 6px; width: 100%; }
.modal .radios { display: flex; gap: 18px; }
.modal .radios label, .modal .chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.modal .age-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.modal .chk { margin-top: 6px; }
.sched-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sched-presets button { padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; }
.sched-presets button:hover { background: #f2f6fb; }
.sched-presets button.clear { margin-left: auto; color: var(--red); }
.sched-grid { overflow-x: auto; }
table.sg { border-collapse: collapse; user-select: none; }
table.sg td { border: 1px solid var(--line); width: 16px; height: 16px; padding: 0; text-align: center; }
.sg-corner, .sg-hlabel, .sg-day { border: 0 !important; font-size: 10px; color: var(--muted); }
.sg-day { width: 24px; padding-right: 5px !important; text-align: right; text-transform: lowercase; }
.sg-day.wknd { color: var(--red); }
.sg-cell { cursor: pointer; background: #fff; }
.sg-cell.on { background: var(--vk); }
.sg-cell:hover { outline: 1px solid var(--vk); outline-offset: -1px; }
.modal .chk { margin-top: 10px; }

/* Строка задачи (несколько операций перед запуском) */
.task-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: #eef6ff; border: 1px solid #cfe2fb; border-radius: 10px; }
.task-bar .spacer { flex: 1; }
.tb-title { font-weight: 600; }
.tb-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 5px 10px; border-radius: 16px; font-size: 13px; }
.tb-chip .x { cursor: pointer; opacity: .6; font-weight: 700; }
.tb-chip .x:hover { opacity: 1; }
.geo-results { max-height: 200px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.geo-results:empty { display: none; }
.geo-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.geo-item:last-child { border-bottom: 0; }
.geo-item[data-id]:hover { background: #f2f6fb; }
.geo-chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: #eaf2fe; color: var(--vk-dark); padding: 5px 10px; border-radius: 16px; font-size: 13px; }
.chip .x { cursor: pointer; font-weight: 700; opacity: .7; }
.chip .x:hover { opacity: 1; }
#f_geo, #f_src { width: 100%; }
.pads-box { max-height: 320px; overflow: auto; }
.pads-auto { display: flex; align-items: center; gap: 8px; padding: 9px 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pads-group { margin-bottom: 12px; }
.pads-plat { font-weight: 600; margin-bottom: 6px; color: var(--vk-dark); }
.pads-group label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.pads-group label:hover { background: #f2f6fb; }

/* Поиск и замена */
.repl-opts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.repl-preview { max-height: 300px; overflow: auto; margin-top: 12px; padding-right: 2px; }
.repl-preview:empty { display: none; }
.repl-summary { font-weight: 600; margin-bottom: 10px; }
.repl-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.repl-name { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.repl-change { margin-top: 10px; }
.repl-change:first-of-type { margin-top: 0; }
.repl-tag { display: inline-block; background: #eef1f5; color: var(--muted); border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.repl-line { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.5; margin-top: 3px; }
.repl-label { flex: 0 0 42px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.repl-old, .repl-new { flex: 1; word-break: break-word; }
.repl-old { color: var(--muted); }
.repl-new { color: var(--text); }
mark.mark-del { background: #ffe0e0; color: #c0341d; border-radius: 3px; padding: 0 2px; }
mark.mark-ins { background: #dcf3dc; color: #1f7a2e; border-radius: 3px; padding: 0 2px; }
.repl-warn { margin-top: 12px; padding: 9px 12px; background: #fff6e6; border: 1px solid #f5d99a; border-radius: 8px; color: #8a5a00; font-size: 13px; }

/* ═══ Панель редактирования кампании (оверлей) ═══ */
.eo { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.eo-loading { margin: auto; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.eo-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.eo-x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.eo-x:hover { color: var(--text); }
.eo-title { font-weight: 700; font-size: 16px; }
.eo-camp { color: var(--muted); }
.eo-body { flex: 1; display: grid; grid-template-columns: 280px 1fr 380px; min-height: 0; }
.eo-tree { border-right: 1px solid var(--line); overflow: auto; background: var(--card); padding: 8px; }
.eo-main { overflow: auto; padding: 18px 22px; }
.eo-side { border-left: 1px solid var(--line); overflow: auto; background: var(--card); padding: 16px; }
.eo-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--card); border-top: 1px solid var(--line); }
.eo-foot-budget { color: var(--muted); }
.eo-foot-budget b { color: var(--text); }

/* Дерево */
.eo-grp { margin-bottom: 2px; }
.eo-node { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.eo-node:hover { background: #f2f6fb; }
.eo-node.active { background: #eaf2fe; color: var(--vk-dark); font-weight: 600; }
.eo-node.eo-camp { font-weight: 600; margin-bottom: 4px; }
.eo-node.eo-ad { padding-left: 24px; color: var(--muted); }
.eo-stub { opacity: .8; background: #f2f4f7 !important; cursor: not-allowed; }
.eo-node.eo-ad.active { color: var(--vk-dark); }
.eo-ico { flex: 0 0 auto; font-size: 13px; }
.eo-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eo-dup { margin-left: auto; flex: none; opacity: 0; border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; color: var(--muted); border-radius: 6px; }
.eo-node:hover .eo-dup { opacity: .6; }
.eo-dup:hover { opacity: 1; background: #dfe8f5; }
.eo-node.eo-draft { border: 1px dashed #d4a72c; background: #fffdf5; }
.eo-node.eo-draft.active { background: #fff3cd; }
.eo-drafthdr { margin: 12px 6px 4px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: #8a5a00; font-weight: 700; }
.eo-draftdel { color: #c0392b; }
/* Исключение из дубля: перечёркнутое имя + всегда видимая кнопка возврата ↺ */
.eo-dup + .eo-dup { margin-left: 0; } /* ⧉ и ✕ на одном узле — рядом, а не разнесены авто-отступом */
.eo-exclude { color: #c0392b; }
.eo-exclude.on { color: #1e7e34; opacity: 1; }
.eo-node.eo-excluded > .eo-nm { text-decoration: line-through; color: var(--muted); }
.eo-grp.eo-excluded .eo-ad .eo-nm { text-decoration: line-through; color: var(--muted); }
.eo-draftfoot { display: inline-flex; align-items: center; gap: 8px; }
/* Pro-mode: массовое создание групп */
.pro-body { flex: 1; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; min-height: 0; }
.pro-cfg { padding: 16px 18px; overflow-y: auto; border-right: 1px solid var(--line); }
.pro-prev { padding: 16px 18px; overflow: auto; }
.pro-cfg .fld { display: block; }
.pro-cfg textarea, .pro-cfg input[type=text], .pro-cfg select { width: 100%; }
.pro-fmts { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.pro-fmt { font-size: 13px; white-space: nowrap; }
.pro-row { display: flex; gap: 10px; }
.pro-mode { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pro-mrad { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.pro-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
/* Не обрезаем текст многоточием — ячейки тянутся по контенту, .pro-prev (overflow:auto) даёт
   боковую прокрутку, чтобы видеть полный динамический текст/имя. Длинные списки пабликов — переносим. */
.pro-table th, .pro-table td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; vertical-align: top; white-space: nowrap; }
.pro-table td .muted { white-space: normal; }
.pro-table thead th { background: var(--card); position: sticky; top: 0; z-index: 1; }
.pro-skip { opacity: .55; background: #faf2f2; }
.pro-bad { color: #c0392b; font-weight: 600; }
.pro-warn { background: #fff8e6; }
.pro-warn-cell { background: #ffe9a8; text-decoration: underline wavy #c07a00; }
.pro-linkbtn { border: 0; background: transparent; color: var(--vk-dark); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }
.pro-linkbtn:hover { color: #c0392b; }
.pro-reuse { color: #1e7e34; font-weight: 600; font-size: 12px; white-space: nowrap; }
.pro-new { color: #8a6d1f; font-weight: 600; font-size: 12px; white-space: nowrap; }
/* A/B-матрица: заголовок секции креативов + легенда чипов */
.ab-sect { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line, #e3e6ea); font-weight: 700; font-size: 13px; color: var(--vk-dark, #2a5885); }
.ab-legend { margin-top: 10px; font-size: 12px; line-height: 1.9; }
.ab-chip { display: inline-block; padding: 2px 8px; margin: 0 2px 2px 0; border-radius: 10px; background: #eef3f8; border: 1px solid #d6e0ea; white-space: nowrap; }
/* A/B: карточки-креативы (медиа + текст + центровка) */
.ab-crea-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-card { margin-top: 10px; padding: 10px; border: 1px solid #d6e0ea; border-radius: 8px; background: #fafcfe; }
.ab-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ab-card-x { border: 0; background: transparent; color: #c0392b; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; }
.ab-card-x:hover { background: #f4dcda; border-radius: 6px; }
.ab-card-fname { word-break: break-word; }
.ab-textrow { position: relative; margin-top: 8px; }
.ab-textrow .ab-text-x { position: absolute; top: 0; right: 0; }
.refresh-btn { padding: 6px 10px; font-size: 15px; line-height: 1; }
.refresh-ico { display: inline-block; }
.refresh-btn.busy { opacity: .7; cursor: default; }
.refresh-btn.busy .refresh-ico { animation: lt-spin .8s linear infinite; }
@keyframes lt-spin { to { transform: rotate(360deg); } }
/* Меню фильтра по метрикам */
.menu-filter { min-width: 360px; }
.filter-mode { display: flex; gap: 16px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.filter-mode label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.filter-rule { display: flex; gap: 6px; align-items: center; padding: 3px 4px; }
.filter-rule .flt-field { flex: 1; min-width: 0; }
.filter-rule .flt-op { width: 54px; text-align: center; }
.filter-rule .flt-val { width: 92px; }
.filter-rule select, .filter-rule input { padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; }
.filter-rule .flt-del { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 14px; padding: 0 4px; }
.filter-rule .flt-del:hover { color: #c0392b; }
.filter-foot { display: flex; gap: 8px; justify-content: space-between; padding: 8px 4px 2px; }
.filter-foot .btn { padding: 5px 8px; font-size: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
#filterBtn.active { background: #eaf2fe; border-color: #90c2f8; color: var(--vk-dark); font-weight: 600; }
.pro-cfg code { background: #eef2f7; padding: 1px 4px; border-radius: 4px; font-size: 12px; }

/* Центр — карточки/секции */
.eo-empty { color: var(--muted); padding: 24px; max-width: 560px; }
.eo-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.eo-groupname { font-size: 15px; }
.eo-sec { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; max-width: 640px; }
.eo-sec-h { font-weight: 600; margin-bottom: 10px; }
.eo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* Поля в оверлее (аналог .modal-стилей, т.к. те заскоуплены на .modal) */
.eo input[type="number"], .eo input[type="text"], .eo input[type="date"], .eo select, .eo textarea, .eo input:not([type]) {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; font-family: inherit; color: var(--text);
}
.eo textarea { width: 100%; resize: vertical; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.eo .fld { display: block; margin-bottom: 4px; }
.eo .fld select, .eo .fld input { display: block; margin-top: 6px; width: 100%; }
.eo .chk { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 8px; }
.eo #eoGeoInput, .eo #eoSegInput { width: 100%; margin-top: 4px; }
.eo .sched-grid { margin: 8px 0; }
.eo .pads-auto { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

/* Правая панель — статистика */
.eo-side-card { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.eo-side-h { font-weight: 600; margin-bottom: 12px; }
.eo-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.eo-stat:last-of-type { border-bottom: none; }
.eo-stat-l { color: var(--muted); font-size: 13px; }
.eo-stat-v { font-weight: 600; }
.eo-side-note { margin-top: 12px; font-size: 12px; line-height: 1.4; }

/* Редактор объявления */
.eo-warn { max-width: 640px; margin-bottom: 14px; padding: 9px 12px; background: #fff6e6; border: 1px solid #f5d99a; border-radius: 8px; color: #8a5a00; font-size: 13px; }
.eo-sec .eo-cnt { float: right; font-weight: 400; color: var(--muted); font-size: 12px; }
.eo #ba_title, .eo #ba_desc, .eo #ba_about, .eo #ba_cta { width: 100%; }
.eo-logo { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #f2f4f7; }
.eo-thumb { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #f2f4f7; }
.eo-soon { margin-top: 8px; font-size: 12px; }
/* Пикер сообщества (поиск + выбор) */
.comm-pick { position: relative; }
.comm-input { width: 100%; }
.comm-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  max-height: 280px; overflow-y: auto; }
.comm-row { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.comm-row:last-child { border-bottom: none; }
.comm-row:hover { background: #f2f4f7; }
.comm-row-name { font-size: 14px; color: var(--text); }
.comm-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.comm-loading { padding: 10px 12px; color: var(--muted); font-size: 13px; }
/* Пикер шаблона в мастере «＋ Кампания» */
.tpl-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.tpl-row { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.tpl-row:last-child { border-bottom: none; }
.tpl-row:hover, .tpl-row:focus { background: #f2f4f7; outline: none; }
.tpl-name { font-size: 14px; color: var(--text); }
.tpl-sub { font-size: 12px; margin-top: 2px; }
.comm-chosen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.comm-chosen .comm-name { font-weight: 600; color: var(--text); }
.comm-chosen .comm-sn, .comm-chosen .comm-mem { font-size: 12px; color: var(--muted); }
.comm-clear { margin-left: auto; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.comm-clear:hover { color: var(--text); }
/* Медиа-слоты с загрузкой */
.eo-media-row, .eo-media-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.eo-media-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eo-media-lbl { font-size: 11px; color: var(--muted); text-align: center; }
.eo-media-empty { width: 96px; height: 96px; border-radius: 8px; border: 1px dashed var(--line); background: #f7f9fc; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; }
.eo-media-slot .eo-logo + .eo-media-btn, .eo-media-slot .eo-media-empty + .eo-media-btn { margin-top: 2px; }
.eo-media-btn { padding: 5px 12px; font-size: 12px; }
/* Видео-слоты */
.eo-vid-actions { display: flex; gap: 6px; }
.eo-vid-btn, .eo-vid-del, .eo-media-del { padding: 5px 10px; font-size: 12px; }
.eo-vid-proc { font-size: 12px; line-height: 1.2; text-align: center; }
/* Мульти-загрузка (компактно) */
.eo-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; }
.eo-multi-lbl { color: var(--muted); font-size: 12px; }
.eo-mchk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.eo-multi-btn { margin-left: auto; padding: 5px 12px; font-size: 12px; }
.eo-center-btn { padding: 5px 12px; font-size: 12px; }

/* Модалка «Центровка» (фокус-кроп) */
.focal-box { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 12px; max-width: 92vw; }
.focal-main { display: flex; gap: 16px; align-items: flex-start; }
.focal-img { position: relative; overflow: hidden; border-radius: 8px; background: #111; cursor: crosshair; flex: 0 0 auto; }
.focal-src { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.focal-dot { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(39, 135, 245, .6); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); pointer-events: none; }
.focal-previews { display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow: auto; }
.focal-prev { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.focal-prev canvas { border: 1px solid var(--line); border-radius: 6px; background: #f2f4f7; }
.focal-prev span { font-size: 11px; color: var(--muted); }

/* Кадрирование */
.crop-ov { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; }
.crop-box { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .4); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-head { font-weight: 600; align-self: flex-start; }
.crop-vp { position: relative; overflow: hidden; border-radius: 8px; cursor: grab; background: #111; }
.crop-vp:active { cursor: grabbing; }
.crop-cv { display: block; }
.crop-frame { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); border-radius: 8px; }
.crop-frame::before, .crop-frame::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px); background-size: 33.33% 33.33%; }
.crop-zoom { width: 100%; }
.crop-actions { display: flex; gap: 10px; align-self: stretch; justify-content: flex-end; }
.crop-hint { font-size: 12px; }
.eo-link { color: var(--vk); word-break: break-all; font-size: 13px; }

/* Строка названия (редактируемая) + кнопка автоназвания */
.eo-namebar { display: flex; align-items: center; gap: 10px; }
.eo-nameinput { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); }
.eo-nameinput:hover { border-color: var(--line); }
.eo-nameinput:focus { border-color: var(--vk); background: #fff; outline: none; }
.eo-autoname { flex: 0 0 auto; border: 1px solid #cfe0f6; background: #eaf2fe; color: var(--vk-dark); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.eo-autoname:hover { background: #dcebfd; }
.eo-nameid { flex: 0 0 auto; }
.eo-name-prev { margin: 6px 2px 0; padding-left: 24px; color: var(--vk-dark); font-size: 13px; }
.autoname-pop { position: fixed; z-index: 80; width: 280px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .18); padding: 12px; }
.autoname-pop .an-title { font-weight: 600; margin-bottom: 4px; }
.autoname-pop .an-hint { color: var(--muted); font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
.autoname-pop .an-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.autoname-pop .an-chip { border: 1px solid var(--line); background: #f7f9fc; border-radius: 16px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.autoname-pop .an-chip:hover { background: #eaf2fe; border-color: #cfe0f6; color: var(--vk-dark); }

/* Предпросмотр поста (как в VK) */
.vkpost { max-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.vkpost-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.vkpost-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #dce1e6; flex: 0 0 auto; }
.vkpost-meta { min-width: 0; }
.vkpost-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkpost-sub { color: var(--muted); font-size: 12px; }
.vkpost-title { padding: 0 12px 8px; font-weight: 600; font-size: 15px; }
.vkpost-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vkpost-tab { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--muted); }
.vkpost-tab.on { background: #eaf2fe; border-color: #cfe0f6; color: var(--vk-dark); font-weight: 600; }
.vkpost-media { position: relative; background: #f2f4f7; }
.vkpost-img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 440px; object-fit: cover; }
.vkpost-noimg { display: flex; align-items: center; justify-content: center; height: 150px; color: var(--muted); font-size: 13px; }
.vkpost-btn { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--vk); color: #fff; padding: 9px 14px; font-weight: 500; font-size: 13px; }
.vkpost-chev { opacity: .85; font-size: 16px; line-height: 1; }
.vkpost-desc { padding: 10px 12px 12px; font-size: 13px; line-height: 1.45; white-space: normal; max-height: 180px; overflow: auto; }