/* ═══ Inter — тот же шрифт, что у референса para.co. Лежит локально,
   интернет для отрисовки не нужен. Кириллица и латиница отдельными файлами. ═══ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/vendor/inter-lat-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/vendor/inter-400.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/vendor/inter-lat-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/vendor/inter-500.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/vendor/inter-lat-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/vendor/inter-600.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/vendor/inter-lat-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/vendor/inter-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/*
  Тёмная тема, собранная по правилам, а не на глаз:
  · нейтральные с лёгкой холодной подмесью, насыщенность в пределах 5%
  · слои различаются СВЕТЛОТОЙ, а не оттенком — в темноте тени не работают
  · ближе к зрителю светлее: bg → surface → surface2 → surface3 (меню, модалки)
  · рамка светлее и фона, и контейнера, иначе исчезает
  · второстепенный текст — ближе к фону в том же тоне, а не нейтральный серый
  · один насыщенный акцент на весь интерфейс
*/
:root {
  /* Браузер рисует НАТИВНЫЕ части сам: выпадающий список у select, полосы
     прокрутки, календарь у полей даты, автодополнение. Без этой строки он
     считает страницу светлой и на долю секунды показывает белый прямоугольник,
     прежде чем применятся наши цвета — тот самый рывок при клике по часам и
     минутам. Одна строка убирает его во всём интерфейсе. */
  color-scheme: dark;

  --bg:        #0c0e12;
  --surface:   #13161c;
  --surface2:  #1a1e26;
  --surface3:  #222732;
  --row-alt:   #151920;   /* чётные строки таблицы */
  --row-hover: #1b212b;

  --border:    #262b35;
  --border-hi: #333a47;

  --text:      #e7e9ee;   /* не чистый белый — меньше режет глаз */
  --muted:     #a6b0c0;   /* было #8a93a3 — почти не читалось */
  --muted2:    #8891a1;

  /* Заливка кнопок: подобрана так, чтобы белый текст на ней давал контраст 4.8
     (при исходном #5b7cfa было 3.7 — ниже нормы). */
  --accent:    #4d67e6;
  --accent-hi: #6076ee;
  /* Ссылки и иконки на тёмном: там наоборот нужен оттенок посветлее */
  --link:      #8ba3ff;
  --accent-dim:#232b3d;   /* приглушённое выделение: синева убрана, осталась светлота */
  --accent2:   #6c63ff;
  --success:   #35c26b;
  --warning:   #e5a13a;
  --danger:    #f0574f;

  /* Шкала скруглений: вложенный радиус = внешний − отступ */
  --r-sm: 8px;
  --radius: 12px;
  --r-lg: 16px;

  /* Глубина: в тёмном интерфейсе тень видна только у всплывающего над фоном */
  --shadow-pop: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
}

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

body {
  font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', ui-sans-serif,
               system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Заголовки плотнее по межбуквенному — крупный текст этого требует */
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.25; }

/* Видимый фокус с клавиатуры: мышью не мешает, с Tab — понятно, где ты */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Header ── */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 58px;
  flex-shrink: 0;
  position: relative;          /* держит название сервиса по центру */
}

/* Название сервиса по центру шапки.
   Выведено из потока намеренно: иначе длинные хлебные крошки
   («Проекты / AMN / AMN») сдвигали бы его вбок, и центр «гулял». */
.марка {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Крупнее знака слева: в шапке это главное слово, а знак — опознавательный
     значок. Раньше название было мельче логотипа и терялось. */
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  /* Курсор-стрелка: название не поле ввода, и палочка над ним сбивает с толку. */
  cursor: default;
  /* И выделять его не надо: при двойном клике по шапке название подсвечивалось
     синим, как обычный текст. Копировать его незачем — это знак, а не данные. */
  user-select: none;
  -webkit-user-select: none;
}
/* «Автозагрузка» при наведении заливается зелёным, и по буквам проходит блик —
   тот же приём, что на кнопках: свет едет слева направо.

   Цвет букв задаёт градиент, обрезанный по их контуру (background-clip: text),
   а не свойство color: залить можно только то, что нарисовано картинкой, —
   у color нет «половины слова», он меняется скачком. Картинка вдвое шире слова:
   левая половина зелёная, правая — белая. Сдвигая её, двигаем границу заливки.

   Буквы остаются настоящим текстом: их читает поиск и можно выделить. */
.марка-фраза {
  position: relative;
  background-image: linear-gradient(90deg, var(--accent) 50%, var(--text) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;     /* в покое видна белая половина */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .45s ease;
}
/* Первая буква зелёная всегда — перекличка со знаком слева.
   Отдельной буквой, а не сдвигом градиента: ширина «А» зависит от шрифта, и
   подобранная на глаз граница разъезжалась бы на другом наборе шрифтов. */
.марка-фраза i {
  font-style: normal;
  -webkit-text-fill-color: var(--accent);
}
/* Наводят и на знак слева, и на «Мастер» — заливка идёт в любом случае.
   `~` дотягивается от знака до названия: в разметке они соседи в шапке. */
.марка:hover .марка-фраза,
.logo:hover ~ .марка .марка-фраза { background-position: 0 0; }

/* Блик — вторая копия слова поверх первой, светлая полоса сквозь буквы.
   Полосой поверх шапки его сделать нельзя: у кнопки есть границы, которые её
   удержат, а у слова их нет — светлый прямоугольник висел бы в воздухе. */
.марка-фраза::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg,
      rgba(255,255,255,0) 38%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 62%);
  background-size: 250% 100%;
  background-position: 120% 0;     /* в покое полоса стоит левее слова */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}
.марка:hover .марка-фраза::after,
.logo:hover ~ .марка .марка-фраза::after { opacity: 1; animation: маркаБлик .7s ease-out; }
@keyframes маркаБлик { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* Места мало — название уступает хлебным крошкам. Порог подняли с 1100:
   «АвтозагрузкаМастер» шире прежнего названия на 90 px и на узком экране
   доезжал бы до крошек. */
@media (max-width: 1200px) { .марка { display: none; } }

.logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

/* Знак берётся из logo.png высотой 128 px — на экранах с высокой плотностью
   он не мылится. Ширина по содержимому: логотип не квадратный. */
.logo-знак { height: 24px; width: auto; display: block; }

/* «Автозагрузка Авито» набрана так же, как подпись в самом логотипе:
   прописные, разреженные, средней насыщенности. Тогда шапка читается как
   продолжение знака, а не как подпись другим шрифтом рядом. */
.logo-имя {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo:hover .logo-имя { color: var(--text); }

/* На узком экране оставляем только знак: название занимает половину шапки */
@media (max-width: 720px) {
  .logo-имя { display: none; }
}

.avito-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.avito-status:hover { border-color: var(--accent); }
.avito-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.avito-status.ok .dot { background: var(--success); }
.avito-status.ok { color: var(--success); }
.avito-status.err .dot { background: var(--danger); }

/* ── Toolbar ── */
.toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
}
/* Иерархия действий: главное — заливка, второстепенное — контур, третье — ссылка */
.btn:hover { background: var(--surface3); border-color: var(--border-hi); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #2a1618; border-color: var(--danger); color: var(--danger); }
.btn.success { background: var(--success); border-color: var(--success); color: #06130b; font-weight: 600; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface2); border-color: var(--border); }

.sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

.filter-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 12px;
  font-size: 13px;
  outline: none;
  min-width: 160px;
}
.filter-input:focus { border-color: var(--accent); }

.filter-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: var(--accent); }

.selected-info {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

/* ── Table ── */
#table-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tabulator {
  background: var(--bg) !important;
  border: none !important;
  height: 100% !important;
}

.tabulator .tabulator-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.tabulator .tabulator-header .tabulator-col:hover {
  background: var(--surface2) !important;
}

.tabulator .tabulator-row {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  transition: background .1s;
  /* Высота строки должна совпадать с объявленной в rowHeight у таблицы.
     Без box-sizing рамка снизу добавлялась СВЕРХУ 36 пикселей, строка выходила
     37, а виртуальная прокрутка считала по 36 — и внизу копилось пустое поле,
     тем больше, чем длиннее таблица. Это и было «чёрное пространство». */
  height: 36px;
  box-sizing: border-box;
}

.tabulator .tabulator-row:hover {
  background: var(--surface) !important;
}

.tabulator .tabulator-row.tabulator-selected {
  background: #1e2d4a !important;
}

.tabulator .tabulator-cell {
  border-right: 1px solid var(--border) !important;
  padding: 6px 10px !important;
}

.tabulator .tabulator-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.tabulator .tabulator-paginator {
  color: var(--text) !important;
}

.tabulator .tabulator-page {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 5px !important;
}

.tabulator .tabulator-page.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.tabulator .tabulator-page:hover:not(.active):not([disabled]) {
  border-color: var(--accent) !important;
}

/* Статус бейджи */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.status-draft { background: #2d3748; color: #a0aec0; }
.status-active { background: #1a3a2a; color: #22c55e; }
.status-paused { background: #3a3010; color: #f59e0b; }
.status-error { background: #3a1414; color: #ef4444; }

/* ── Предпросмотр объявления: светлая «страница Авито» внутри тёмного сервиса ── */
.preview-toggle { display: flex; gap: 8px; margin-bottom: 12px; }

.av-frame { background: #fff; color: #1a1a1a; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); margin: 0 auto; transition: max-width .18s ease; }
.av-frame.pc { max-width: 100%; }
.av-frame.phone { max-width: 380px; }

.av-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #f2f1f0; border-bottom: 1px solid #e0dedc; }
.av-logo { font-weight: 800; color: #00aaff; font-size: 16px; letter-spacing: -.3px; }
.av-search { flex: 1; background: #fff; border: 1px solid #d9d7d5; border-radius: 6px;
  padding: 5px 10px; color: #9a9694; font-size: 12px; }

.av-body { display: flex; gap: 20px; padding: 16px; align-items: flex-start; }
.av-frame.phone .av-body { flex-direction: column; gap: 12px; }

.av-left { flex: 1; min-width: 0; }
.av-right { width: 250px; flex: none; }
.av-frame.phone .av-right { width: 100%; order: -1; }

.av-crumbs { color: #8f8b88; font-size: 12px; margin-bottom: 8px; }
.av-title { font-size: 22px; line-height: 1.25; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; }
.av-frame.phone .av-title { font-size: 18px; }

.av-gallery { margin-bottom: 16px; }
.av-main { display: block; width: 100%; max-height: 320px; object-fit: cover;
  border-radius: 8px; background: #f2f1f0; }
.av-main.av-broken { min-height: 160px; }
.av-noimg { display: flex; align-items: center; justify-content: center; min-height: 150px;
  color: #9a9694; font-size: 13px; text-align: center; padding: 16px; }
.av-thumbs { display: flex; gap: 6px; margin-top: 6px; }
.av-thumbs img { width: 62px; height: 46px; object-fit: cover; border-radius: 5px; background: #f2f1f0; }

.av-block-title { font-size: 16px; font-weight: 700; margin: 16px 0 6px; color: #1a1a1a; }
.av-desc { font-size: 14px; line-height: 1.55; color: #1a1a1a; word-wrap: break-word; }
.av-desc i { color: #9a9694; }

.av-specs { display: flex; flex-direction: column; gap: 4px; }
.av-spec { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  padding: 4px 0; border-bottom: 1px dashed #eceae8; }
.av-spec span { color: #8f8b88; }
.av-spec b { color: #1a1a1a; font-weight: 600; text-align: right; }

.av-price { font-size: 26px; font-weight: 800; margin-bottom: 12px; color: #1a1a1a; }
.av-btn { border-radius: 8px; padding: 11px; text-align: center; font-weight: 600;
  font-size: 14px; margin-bottom: 8px; }
.av-call { background: #04e061; color: #0a0a0a; }
.av-msg { background: var(--info); color: var(--ink-info); }
.av-seller { border: 1px solid #e0dedc; border-radius: 8px; padding: 10px; margin-top: 12px; }
.av-seller-name { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.av-seller-sub { color: #9a9694; font-size: 11px; margin-top: 2px; }
.av-addr { color: #6f6b68; font-size: 13px; margin-top: 12px; }

/* Подсветка строки, к которой перешли из проверки */
@keyframes rowFlash { 0%,100% { background: transparent; } 30%,70% { background: #3a3010; } }
#grid .row-flash { animation: rowFlash 2s ease-in-out; }

/* Таблица отчётов автозагрузки */
.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-table th, .rep-table td { padding: 7px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border); }
.rep-table th { font-weight: 600; color: var(--muted); font-size: 12px; }
.rep-table tbody tr:hover { background: var(--surface2); }

/* Цветовая точка строки */
.color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.15);
}

/* ── Модальное окно ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 760px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 20px; line-height: 1;
  padding: 2px 6px; border-radius: 5px;
  transition: color .15s;
}
.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Форма */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: span 2; }

label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
select option { background: var(--surface2); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.price-range { display: flex; gap: 8px; align-items: center; }
.price-range span { color: var(--muted); font-size: 12px; }

/* ── Рандомизатор панель ── */
.spin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.spin-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.spin-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.spin-hint code {
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent);
  font-family: 'Consolas', monospace;
}

/* ── Превью рандомизатора ── */
.preview-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  min-height: 50px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.preview-empty { color: var(--muted); font-style: italic; }

/* ── Цвет палитра ── */
.color-palette {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: absolute;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.color-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s;
}
.color-swatch:hover { transform: scale(1.2); border-color: #fff; }
.color-swatch.none {
  background: var(--surface);
  border: 2px solid var(--border);
}

/* ── Toast уведомления ── */
#toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideIn .2s ease;
  min-width: 220px;
}
.toast.ok { border-left: 3px solid var(--success); }
.toast.err { border-left: 3px solid var(--danger); }
@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Скроллбар */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ═══ Новый интерфейс: проекты / панели / таблицы ═══ */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-left:8px; }
.breadcrumb a { color:var(--link); cursor:pointer; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb b { color:var(--text); }
.breadcrumb span { color:var(--muted); }

#app { flex:1; overflow:auto; }
.page { max-width:1100px; margin:0 auto; padding:28px 24px; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-head h1 { font-size:22px; font-weight:700; }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; cursor:pointer; transition:border-color .15s, transform .1s; }
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; }
.card-title { font-size:17px; font-weight:700; margin-bottom:12px; }
.card-meta { display:flex; gap:16px; font-size:12px; color:var(--muted); margin-bottom:14px; }
.card-go { font-size:13px; color:var(--accent); font-weight:600; }

.empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; }
.empty-sm { padding:18px; color:var(--muted); font-size:13px; }

.panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-bottom:18px; overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.panel-head h2 { font-size:15px; font-weight:700; }
.list { padding:8px; }
.list-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:8px; font-size:14px; }
.list-row:hover { background:var(--surface2); }
.list-row.clickable { cursor:pointer; }
.list-row .muted { color:var(--muted); font-size:12px; }
.row-actions { margin-left:auto; display:flex; gap:4px; }
.icon-btn { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px 7px; border-radius:6px; font-size:14px; }
.icon-btn:hover { background:var(--border); color:var(--text); }

.status-dot { width:9px; height:9px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.status-dot.ok { background:var(--success); }
.status-dot.err { background:var(--danger); }

.hint { font-size:12px; color:var(--muted); line-height:1.6; margin-top:8px; }
.hint a { color:var(--accent); cursor:pointer; }

/* Выбор категорий */
.cat-results { max-height:180px; overflow-y:auto; margin-top:6px; border:1px solid var(--border); border-radius:8px; }
.cat-results:empty { display:none; }
.cat-item { padding:8px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); }
.cat-item:hover { background:var(--surface2); color:var(--accent); }
.cat-picked { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:4px 10px; font-size:12px; display:inline-flex; gap:6px; align-items:center; }
.chip b { cursor:pointer; color:var(--danger); }

/* Вкладки категорий в таблице */
.table-page { display:flex; flex-direction:column; height:100%; }
.cat-tabs { display:flex; gap:4px; padding:8px 16px 0; background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cat-tab { background:var(--surface2); border:1px solid var(--border); border-bottom:none; border-radius:8px 8px 0 0; padding:7px 16px; font-size:13px; cursor:pointer; color:var(--muted); }
.cat-tab.active { background:var(--bg); color:var(--accent); font-weight:600; }

#grid { flex:1; padding:0 4px; }
.req { color:#fca5a5; }
.rnd-cell { color:var(--accent2); cursor:pointer; font-weight:600; }
.del-x { cursor:pointer; opacity:.6; }
.del-x:hover { opacity:1; }

/* ═══ Двухстрочные заголовки колонок (как у конкурента) ═══ */
.tabulator .tabulator-header .tabulator-col { vertical-align:top !important; }
.tabulator .tabulator-col-title { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
.col-h { display:flex; flex-direction:column; gap:3px; padding:2px 0; line-height:1.25; }
.col-h-rus { font-size:12.5px; font-weight:700; color:var(--text); text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:5px; }
.col-h-tag { font-size:12px; font-size:10.5px; font-weight:500; color:var(--muted); font-family:'Consolas','Courier New',monospace; text-transform:none; }
.req-star { color:#fca5a5; font-weight:800; }
.col-h-q { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  background:var(--surface2); color:var(--accent); font-size:10px; font-weight:700; cursor:pointer; border:1px solid var(--border); }
.col-h-q:hover { background:var(--accent); color:var(--accent-ink); }
.tabulator .tabulator-col.col-required { background:#1e2436 !important; }

/* Модалка помощи по полю */
.help-req { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; margin-bottom:12px; }
.help-required { background:#3a1a1a; color:#fca5a5; }
.help-optional { background:#1e2a1e; color:#86efac; }
.help-conditional { background:#3a3010; color:#fcd34d; }
.help-block { margin-bottom:12px; font-size:13px; line-height:1.55; }
.help-block b { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.help-values { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; max-height:200px; overflow-y:auto; }
.help-values span { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:3px 9px; font-size:12px; }
code { background:var(--surface2); padding:1px 6px; border-radius:4px; color:var(--accent); font-family:'Consolas',monospace; font-size:12px; }

/* Заголовок таблицы повыше под две строки */
.tabulator .tabulator-header { min-height:54px !important; }
.tabulator-placeholder { color:var(--muted) !important; }

/* ═══ Заметная горизонтальная прокрутка таблицы ═══ */
.tabulator { width:100% !important; }
.tabulator .tabulator-tableholder { overflow-x:auto !important; overflow-y:auto !important; }
.tabulator .tabulator-tableholder::-webkit-scrollbar { height:14px; width:14px; }
.tabulator .tabulator-tableholder::-webkit-scrollbar-track { background:var(--surface); border-radius:7px; }
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
  background:var(--accent); border-radius:7px; border:3px solid var(--surface); }
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover { background:#6aa0ff; }
/* Подсказка-стрелка, что таблица скроллится вправо */
.scroll-hint { font-size:12px; color:var(--link); padding:4px 16px; }

/* ═══ Таблица ═══
   Раньше здесь была светлая таблица внутри тёмного интерфейса — два разных
   продукта на одном экране. Теперь единая тёмная: плотность и поведение
   как в Google Sheets, вид как в инструментах, где с таблицей сидят весь день.
   Слои различаются светлотой, цифры — моноширинными разрядами. */
#grid .tabulator { background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius); }
#grid .tabulator-header { background:var(--surface2) !important;
  border-bottom:1px solid var(--border-hi) !important; }
#grid .tabulator-header .tabulator-col { background:var(--surface2) !important;
  border-right:1px solid var(--border) !important; }
#grid .tabulator-header .tabulator-col:hover { background:var(--surface3) !important; }
#grid .tabulator-col.tabulator-frozen { background:var(--surface2) !important; }
#grid .tabulator-row { background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important; min-height:36px; }
#grid .tabulator-row:nth-child(even) { background:var(--row-alt) !important; }
#grid .tabulator-row:hover { background:var(--row-hover) !important; }
#grid .tabulator-row.tabulator-selected { background:var(--accent-dim) !important; }
#grid .tabulator-cell { border-right:1px solid var(--border) !important; color:var(--text) !important;
  padding:7px 11px !important; font-size:14px !important; line-height:22px;
  font-variant-numeric:tabular-nums; }
#grid .tabulator-cell.tabulator-frozen { background:inherit !important; }
#grid .tabulator-cell.tabulator-editing { box-shadow:inset 0 0 0 2px var(--accent) !important;
  background:var(--surface3) !important; padding:0 !important; }
#grid .tabulator-cell input, #grid .tabulator-cell select, #grid .tabulator-cell textarea {
  background:var(--surface3) !important; color:var(--text) !important; border:none !important;
  padding:7px 10px !important; font-size:14px !important; }
#grid .col-h-rus { color:var(--text) !important; }
#grid .col-h-tag { color:var(--muted) !important; }
#grid .col-h-q { background:var(--surface3) !important; border-color:var(--border-hi) !important;
  color:var(--muted) !important; }
#grid .col-h-q:hover { background:var(--accent) !important; color:var(--accent-ink) !important; }
/* Обязательная колонка — подсветка тоном, а не другой яркостью */
#grid .tabulator-col.col-required { background:#1d1a22 !important; }
#grid .row-num { color:var(--muted2); font-size:12px; }
#grid .cell-text { color:var(--text); }
#grid .cell-empty { color:var(--muted2); font-style:italic; font-size:12px; }
#grid .color-dot { border:1px solid var(--border-hi); width:16px; height:16px; }
#grid .del-x { opacity:.5; } #grid .del-x:hover { opacity:1; }
#grid .tabulator-placeholder span, #grid .tabulator-placeholder-contents { color:var(--muted) !important; }
#grid .tabulator-tableholder::-webkit-scrollbar-track { background:var(--surface2); }

/* Модальный редактор ячейки */
.cell-editor { width:100%; min-height:160px; background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:12px; font-size:14px; font-family:inherit; line-height:1.6; resize:vertical; outline:none; }
.cell-editor:focus { border-color:var(--accent); }
.char-count { text-align:right; font-size:11px; color:var(--muted); margin-top:6px; }
.rnd-preview { margin-top:14px; }
.rnd-preview-title { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.rnd-preview-item { background:var(--surface2); border-left:3px solid var(--accent2); border-radius:6px; padding:8px 11px; margin-bottom:6px; font-size:13px; line-height:1.5; }

/* Контролы массового добавления строк */
.add-many { display:inline-flex; align-items:center; gap:4px; }
.add-count-input { width:70px; background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); padding:5px 8px; font-size:13px; outline:none; }
.add-count-input:focus { border-color:var(--accent); }
.paste-hint { font-size:11px; color:var(--muted); padding:4px 8px; border:1px dashed var(--border); border-radius:6px; }

/* ═══ Режим диапазонов (Google Sheets) + скорость ═══ */
/* Колонка-нумератор строк */
#grid .tabulator-table { background:var(--surface) !important; }
#grid .tabulator-row .range-header-col, #grid .range-header-col {
  background:var(--surface2) !important; color:var(--muted) !important; font-size:12px; font-weight:600; }
/* Выделение диапазона ячеек */
#grid .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background:var(--accent-dim) !important; }
/* Одиночно выделенная ячейка получает класс range-only-cell-selected, и общее
   правило подсветки её исключает. Своего фона и рамки у неё не оставалось —
   её обводил только плавающий оверлей Tabulator, который при горизонтальной
   прокрутке уезжает. Рамку вешаем на саму ячейку: она переживает прокрутку. */
#grid .tabulator-cell.tabulator-range-selected { box-shadow:none; }
#grid .tabulator-cell.tabulator-range-only-cell-selected {
  box-shadow: inset 0 0 0 2px var(--accent) !important;
  background: rgba(var(--accent-rgb), .10) !important; }
#grid .tabulator-cell.col-stat.tabulator-range-only-cell-selected {
  background: rgba(var(--accent-rgb), .16) !important; }
#grid .tabulator-range-overlay .tabulator-range { border:2px solid var(--accent) !important; }
#grid .tabulator-range-overlay .tabulator-range.tabulator-range-active { border:2px solid var(--accent) !important; }
/* Заголовок выделенной колонки/строки */
#grid .tabulator-col.tabulator-range-highlight, #grid .range-header-col.tabulator-range-highlight { background:#2a3352 !important; }

/* Контекстное меню */
.tabulator-menu { background:#fff !important; border:1px solid #d0d7de !important; border-radius:8px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important; padding:4px !important; }
.tabulator-menu .tabulator-menu-item { color:#1f2937 !important; font-size:13px !important; border-radius:6px !important; padding:7px 12px !important; }
.tabulator-menu .tabulator-menu-item:hover { background:#f0f4ff !important; }
.tabulator-menu .tabulator-menu-separator { border-top:1px solid #e7e9ee !important; }
.menu-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:middle; }

/* Вкладки категорий: удаление и добавление */
.cat-tab { display:inline-flex; align-items:center; gap:6px; }
.tab-x { color:var(--muted); font-size:11px; cursor:pointer; padding:1px 4px; border-radius:4px; }
.tab-x:hover { background:var(--danger); color:var(--ink-danger); }
.cat-tab-add { background:transparent; border:1px dashed var(--border); border-radius:8px 8px 0 0;
  padding:7px 14px; font-size:13px; cursor:pointer; color:var(--accent); margin-left:4px; }
.cat-tab-add:hover { background:var(--surface2); }

/* Плавность скролла */
#grid .tabulator-tableholder { scroll-behavior:auto; }

/* Fill handle (уголок протягивания) */
#grid { position:relative; }
.fill-handle { position:absolute; width:10px; height:10px; background:var(--accent);
  border:1.5px solid #fff; border-radius:1px; cursor:crosshair; z-index:50; display:none;
  box-shadow:0 0 0 1px var(--accent); }
.fill-handle:hover { transform:scale(1.2); }
#grid .tabulator-cell.fill-target-cell { background:#cfe0ff !important; box-shadow:inset 0 0 0 1px var(--accent); }

/* Убрать стрелки ±1 у числового поля */
.add-count-input::-webkit-outer-spin-button,
.add-count-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.add-count-input { -moz-appearance:textfield; }

/* Своё контекстное меню */
.ctx-menu { position:absolute; z-index:9999; background:var(--surface3); border:1px solid var(--border-hi); border-radius:var(--radius);
  box-shadow:var(--shadow-pop); padding:6px; min-width:240px; font-size:14px; color:var(--text); }
.ctx-item { padding:8px 12px; border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.ctx-item:hover { background:var(--accent-dim); }
.ctx-sep { height:1px; background:var(--border); margin:4px 6px; }
.ctx-colors { display:flex; gap:6px; padding:6px 12px; flex-wrap:wrap; }
.ctx-color { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.ctx-color:hover { border-color:var(--text); transform:scale(1.15); }
.ctx-color.none { background:var(--surface2); border:2px solid var(--border-hi); position:relative; }
.ctx-color.none::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); }

/* Подменю контекстного меню */
.ctx-item { justify-content:space-between; position:relative; }
.ctx-arrow { color:#94a3b8; font-size:11px; }
.ctx-hint { color:#94a3b8; font-size:11px; }
.ctx-sub { position:absolute; left:100%; top:-5px; margin-left:2px; min-width:210px; }
.menu-dot.none { border:1px solid #ccc; background:#fff; }

/* Предпросмотр объявления */
.preview-toggle { display:flex; gap:8px; margin-bottom:14px; }
#preview-area { display:flex; justify-content:center; }
.ad-card { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface2); }
.ad-card.pc { width:100%; }
.ad-card.phone { width:320px; }
.ad-img { width:100%; max-height:280px; object-fit:cover; border-radius:8px; margin-bottom:12px; }
.ad-noimg { display:flex; align-items:center; justify-content:center; height:160px; color:var(--muted); background:var(--surface); }
.ad-title { font-size:20px; font-weight:700; margin-bottom:6px; }
.ad-price { font-size:22px; font-weight:800; color:var(--success); margin-bottom:10px; }
.ad-meta { font-size:13px; color:var(--muted); margin-bottom:12px; }
.ad-desc { font-size:14px; line-height:1.6; white-space:pre-wrap; }

/* Настройки таблицы: расписание */
.chk { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--text);
  font-weight:400; text-transform:none; letter-spacing:0; cursor:pointer; }
.chk input { width:auto; }
.chk-row { display:flex; flex-wrap:wrap; gap:12px; padding:4px 0; }
.chk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:200px; overflow-y:auto;
  padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); }
.info-box { background:#1e2a3a; border:1px solid #2d4a6a; border-radius:8px; padding:12px 14px;
  font-size:13px; line-height:1.5; color:#cfe0ff; margin-bottom:14px; }
.link-act { color:var(--accent); cursor:pointer; font-size:12px; margin-left:8px; text-transform:none; font-weight:400; }
.form-group label a { color:var(--accent); font-size:12px; text-transform:none; font-weight:400; }

/* Переключатель активна/неактивна */
.active-box { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.active-box.on { border-color:#2d5a3a; }
.active-box.off { border-color:#5a2d2d; }
.switch { position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#555; border-radius:26px; transition:.2s; cursor:pointer; }
.slider::before { content:""; position:absolute; width:20px; height:20px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--success); }
.switch input:checked + .slider::before { transform:translateX(22px); }
/* Индикатор активности таблицы в списке */
.tbl-active { font-size:14px; }
.tbl-active.on { color:var(--success); }
.tbl-active.off { color:var(--muted); }

/* Галерея фото в предпросмотре */
.ad-gallery { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ad-thumb { width:120px; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.ad-card.phone .ad-thumb { width:90px; height:68px; }

/* ═══ Чистый редизайн настроек таблицы ═══ */
.s-modal { display:flex; flex-direction:column; gap:16px; }
.s-field { display:flex; flex-direction:column; gap:6px; }
.s-label { font-size:13px; font-weight:600; color:var(--text); text-transform:none; letter-spacing:0; }
.s-sub { font-size:12px; font-weight:400; color:var(--muted); margin-left:6px; }
.s-hint { font-size:12px; color:var(--muted); line-height:1.5; }
.s-hint .lnk, .lnk { color:var(--link); cursor:pointer; }
.s-note { background:#15202e; border:1px solid #243447; border-radius:9px; padding:10px 12px; font-size:12.5px; color:#bcd3ee; line-height:1.5; }
.s-modal input, .s-modal select { background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 12px; font-size:14px; outline:none; width:100%; }
.s-modal input:focus, .s-modal select:focus { border-color:var(--accent); }
.active-title { font-size:14px; font-weight:700; }
.active-sub { font-size:12px; color:var(--muted); margin-top:2px; max-width:380px; }
.ac-on { color:var(--success); } .ac-off { color:var(--danger); }
/* Дни — чипы */
.day-chips { display:flex; gap:6px; flex-wrap:wrap; }
.day-chip { cursor:pointer; }
.day-chip input { display:none; }
.day-chip span { display:inline-block; padding:6px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface2); font-size:13px; color:var(--muted); transition:all .12s; }
.day-chip input:checked + span { background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:700; }
/* Часы — компактная панель */
.btn-mini { background:var(--surface2); border:1px solid var(--border); border-radius:7px; color:var(--accent);
  font-size:12px; padding:5px 12px; cursor:pointer; align-self:flex-start; }
.btn-mini:hover { border-color:var(--accent); }
.hours-panel { margin-top:8px; }
.hours-panel .chk-grid { grid-template-columns:repeat(6,1fr); margin-top:6px; }
.hours-panel .chk { font-size:12px; }

/* Стрелка-индикатор «выбор из списка» в ячейках enum */
#grid .tabulator-cell.col-list { position:relative; padding-right:20px !important; }
#grid .tabulator-cell.col-list::after { content:"▾"; position:absolute; right:7px; top:50%;
  transform:translateY(-50%); color:#7c8aa0; font-size:11px; pointer-events:none; }
#grid .tabulator-cell.col-list:hover::after { color:var(--accent); }
/* Воронка-фильтр в заголовке (Google Sheets стиль) */
.col-h-funnel { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  margin-left:4px; border-radius:3px; cursor:pointer; font-size:10px; color:#9aa4b2; }
.col-h-funnel:hover { background:#dbe7ff; color:var(--accent); }
.col-h-funnel.on { background:var(--accent); color:var(--accent-ink); }
.filter-pop { position:fixed; z-index:9999; width:276px; background:var(--surface3); border:1px solid var(--border-hi);
  border-radius:var(--radius); box-shadow:var(--shadow-pop); padding:12px; color:var(--text); font-size:14px; }
.fp-sort { display:flex; flex-direction:column; }
.fp-sort-item { padding:7px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.fp-sort-item:hover { background:var(--accent-dim); }
.fp-sep { height:1px; background:var(--border); margin:6px 0; }
.fp-srow { position:relative; }
.fp-search { width:100%; background:var(--surface2); color:var(--text); border:1px solid var(--border-hi); border-radius:7px; padding:7px 30px 7px 10px; font-size:13px; outline:none; }
.fp-search:focus { border-color:var(--accent); }
.fp-mag { position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.5; }
.fp-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; font-size:12px; }
.fp-actions a { color:var(--link); cursor:pointer; }
.fp-shown { color:var(--muted); }
.fp-list { max-height:230px; overflow-y:auto; border:1px solid var(--border); border-radius:7px; padding:4px; }
.fp-item { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:5px; cursor:pointer; }
.fp-item:hover { background:var(--accent-dim); }
.fp-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-empty { color:var(--muted); padding:10px; text-align:center; }
.fp-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.filter-pop .btn { color:var(--text); border-color:var(--border-hi); background:var(--surface2); }
.filter-pop .btn.primary { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
/* Стоимость контакта */
.cpc { color:var(--warning); font-weight:600; }

/* Статус синхронизации */
.sync-btn.dirty { background:var(--danger) !important; border-color:var(--danger) !important; color:var(--ink-danger) !important; }
.sync-btn.synced { background:var(--success) !important; border-color:var(--success) !important; color:var(--ink-success) !important; }
/* Сброс фильтров в попапе */
.fp-reset { padding:8px 2px 2px; border-top:1px solid #eceef1; margin-top:8px; }
.fp-reset a { color:var(--accent); cursor:pointer; font-size:12px; }

/* Кнопка-иконка (отмена) */
.btn-icon { font-size:16px; padding:6px 11px; }

/* Генерация дат (как у конкурента) */
.dg-tabs { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.dg-tab { background:none; border:none; color:var(--muted); font-size:14px; padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; }
.dg-tab.active { color:var(--text); border-bottom-color:var(--accent); font-weight:600; }
.dg-period { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dg-period input[type=date] { background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:8px 10px; font-size:13px; }
.dg-days-info { color:var(--muted); font-size:13px; }
.dg-head { display:flex; align-items:center; justify-content:space-between; }
.dg-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.dg-chip { cursor:pointer; }
.dg-chip input { display:none; }
.dg-chip span { display:inline-block; padding:8px 14px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface2); font-size:13px; color:var(--text); transition:all .12s; min-width:42px; text-align:center; }
.dg-chip input:checked + span { background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:700; }
.dg-toggle2 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; }
.dg-toggle2 b { font-size:13px; }
.dg-check { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:12px; cursor:pointer; }
.dg-check input { width:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   СТИЛЬ ПО РЕФЕРЕНСУ para.co — снят замером с живого сайта.
   Четыре приёма, из которых складывается «объём и свечение»:
     1. вертикальный градиент вместо плоской заливки (сверху светлее);
     2. inset-линия белым сверху — тот самый отблеск по верхней кромке;
     3. цветное свечение снизу у главного действия;
     4. радиальные ореолы на фоне вместо ровной заливки.
   Оригинальные значения para.co:
     кнопка  linear-gradient(#84f15a,#71eb44); r=100px;
             shadow 0 10px 30px rgba(113,235,68,.28), inset 0 1px 0 rgba(255,255,255,.4)
     карточка linear-gradient(rgba(18,21,19,.86),rgba(9,11,10,.92)); border rgba(255,255,255,.1);
             r=22px; shadow 0 34px 80px rgba(0,0,0,.6), 0 0 60px rgba(113,235,68,.08),
             inset 0 1px 0 rgba(255,255,255,.08)
     фон     radial-gradient(125% 85% at 50% -12%, #0a0f0b, #050606 38%, #000 70%)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:        #05070a;
  --surface:   #0f1216;
  --surface2:  #151a20;
  --surface3:  #1c222a;
  --row-alt:   #11151a;
  --row-hover: #171d24;

  /* Рамки белым с прозрачностью — так они работают на любом слое */
  --border:    rgba(255,255,255,.09);
  --border-hi: rgba(255,255,255,.16);

  --text:      #f2f4f6;
  --muted:     #aab3bf;
  --muted2:    #8b95a2;

  /* Акцент: зелёный как у референса, он же перекликается с кнопками Авито.
     Меняется одной строкой, если захотите другой цвет. */
  --accent:    #71eb44;
  --accent-hi: #84f15a;
  --accent-ink:#04140a;              /* текст на акценте — тёмный, не белый */
  --accent-rgb:113,235,68;
  --link:      #9df07a;
  --accent-dim:rgba(113,235,68,.12);

  --glow:      0 10px 30px rgba(var(--accent-rgb),.28);
  --sheen:     inset 0 1px 0 rgba(255,255,255,.35);
  --card-sheen:inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-pop: 0 34px 80px rgba(0,0,0,.6), 0 0 60px rgba(var(--accent-rgb),.07), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-card: 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);

  --r-sm: 10px;
  --radius: 14px;
  --r-lg: 22px;
}

/* Фон — не ровная заливка, а еле заметный свет сверху */
body {
  background-color: #000;
  background-image: radial-gradient(125% 85% at 50% -12%, #0b1014 0%, #06080b 38%, #000 70%);
  background-attachment: fixed;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  background-image: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow: var(--card-sheen);
  border-radius: 999px;
  letter-spacing: -.1px;
}
.btn:hover { background-image: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.01)); }

.btn.primary {
  background-image: linear-gradient(var(--accent-hi) 0%, var(--accent) 100%);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--glow), var(--sheen);
  font-weight: 600;
}
.btn.primary:hover {
  background-image: linear-gradient(#93f56d 0%, var(--accent-hi) 100%);
  box-shadow: 0 12px 36px rgba(var(--accent-rgb),.38), var(--sheen);
}
.btn.primary:active { box-shadow: 0 4px 14px rgba(var(--accent-rgb),.3), var(--sheen); }
.btn.success { background-image: linear-gradient(var(--accent-hi), var(--accent)); color: var(--accent-ink); }

/* ── Карточки, панели, всплывающие ────────────────────────────────────── */
.panel, .card, .list-row, .active-box, .info-box, .help-block {
  background-image: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.008));
  border-radius: var(--radius);
  box-shadow: var(--card-sheen);
}
.modal {
  background-image: linear-gradient(rgba(24,29,36,.96), rgba(12,15,19,.98));
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.ctx-menu, .filter-pop {
  background-image: linear-gradient(rgba(28,34,42,.98), rgba(16,20,25,.99));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

/* Шапка и панель инструментов — с отблеском по нижней кромке */
.header, .toolbar {
  background-image: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,0));
  box-shadow: var(--card-sheen);
}
.logo { color: var(--accent); text-shadow: 0 0 18px rgba(var(--accent-rgb),.45); }

/* ── Вкладки категорий: были почти не видны ───────────────────────────── */
.cat-tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px;
  background-image: linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom: 1px solid var(--border);
}
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background-image: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.01));
  color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--card-sheen);
  transition: all .15s;
}
.cat-tab:hover { border-color: rgba(var(--accent-rgb),.5); }
.cat-tab.active {
  background-image: linear-gradient(rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
  border-color: rgba(var(--accent-rgb),.55);
  color: #eaffe0;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb),.22), var(--sheen);
}
/* Крестик удаления категории — виден всегда, а не только при наведении */
.cat-tab .tab-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.09); color: var(--muted);
  font-size: 12px; line-height: 1; flex: none;
}
.cat-tab .tab-x:hover { background: rgba(240,87,79,.9); color: var(--ink-danger); }
.cat-tab-add {
  padding: 8px 14px; border-radius: 999px;
  border: 1px dashed var(--border-hi);
  background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.cat-tab-add:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.6); }

/* ── Таблица: подсветка выделения акцентом, а не синим ────────────────── */
#grid .tabulator { border-radius: var(--radius); box-shadow: var(--shadow-card); }
#grid .tabulator-header { background-image: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.01)); }
#grid .tabulator-row.tabulator-selected,
#grid .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) {
  background: rgba(var(--accent-rgb),.13) !important; }
#grid .tabulator-col.tabulator-range-highlight,
#grid .range-header-col.tabulator-range-highlight { background: rgba(var(--accent-rgb),.16) !important; }
#grid .tabulator-range-overlay .tabulator-range { border: 2px solid var(--accent) !important;
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.35); }
#grid .tabulator-cell.tabulator-editing { box-shadow: inset 0 0 0 2px var(--accent) !important; }
#grid .col-h-q { border-radius: 50%; }
#grid .col-h-q:hover { background: var(--accent) !important; color: var(--accent-ink) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.5); }

.tabulator .tabulator-page.active { background: transparent !important;
  background-image: linear-gradient(var(--accent-hi), var(--accent)) !important;
  color: var(--accent-ink) !important; border-color: transparent !important;
  box-shadow: var(--glow), var(--sheen); }

/* Бейджи статусов — в общей палитре */
.status-active { background: rgba(var(--accent-rgb),.16); color: var(--accent-hi); }
.status-badge { border-radius: 999px; box-shadow: var(--card-sheen); }

/* Таблица макросов в подсказке рандомизатора */
.macro-help { width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; }
.macro-help td { padding:5px 8px; vertical-align:top; border-bottom:1px solid var(--border); }
.macro-help td:first-child { white-space:nowrap; width:1%; }
.macro-help code { background:rgba(var(--accent-rgb),.12); color:var(--link);
  border:1px solid rgba(var(--accent-rgb),.22); border-radius:6px; padding:1px 6px; font-size:12px; }
.macro-help tr:last-child td { border-bottom:none; }

/* Блоки подсказок — с отблеском, как карточки */
.help-block, .info-box { border:1px solid var(--border); padding:10px 12px; margin-bottom:8px; }
.info-box { border-color:rgba(var(--accent-rgb),.25);
  background-image:linear-gradient(rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.02)); }
.help-values span { display:inline-block; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:999px; padding:2px 9px; margin:2px 3px 0 0; font-size:12px; }

/* Важные названия выделены весом, а не только цветом */
.col-h-rus { font-weight: 700 !important; }
.card-title, .panel-head h2, .s-label, .active-title, .modal-title { font-weight: 700; }
.help-block b, .info-box b { font-weight: 700; color: var(--text); }
h1 { font-weight: 700; } h2 { font-weight: 650; }

/* Кнопки: приём референса целиком — градиент, отблеск сверху, свечение при наведении */
.btn {
  background-color: var(--surface2);
  background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.015));
  border: 1px solid var(--border-hi);
  box-shadow: var(--card-sheen), 0 2px 8px rgba(0,0,0,.35);
  font-weight: 600;
}
.btn:hover {
  background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.03));
  border-color: rgba(var(--accent-rgb),.45);
  box-shadow: var(--card-sheen), 0 6px 20px rgba(var(--accent-rgb),.16);
}
.icon-btn {
  border-radius: 999px; border: 1px solid var(--border-hi);
  background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow: var(--card-sheen);
}
.icon-btn:hover { border-color: rgba(var(--accent-rgb),.5);
  box-shadow: var(--card-sheen), 0 4px 16px rgba(var(--accent-rgb),.2); }

/* ═══ Кнопки: правила сняты с para.co построчно ══════════════════════════════
   .heroCtaPrimary {
     padding: .9375rem 1.875rem;          → горизонтальные поля вдвое больше вертикальных
     border-radius: 6.25rem;              → таблетка
     box-shadow: 0 .625rem 1.875rem #71eb4447, inset 0 1px 0 #fff6;
     transition: box-shadow .25s, transform .15s;
     overflow: hidden; position: relative;
   }
   .heroCtaPrimary:active { transform: scale(0.97); }
   overflow:hidden + position:relative у них под блик, который ездит по кнопке.
   ═════════════════════════════════════════════════════════════════════════ */
.btn, .icon-btn, .cat-tab, .cat-tab-add {
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .15s, border-color .2s, background-image .2s;
}
.btn:active, .icon-btn:active, .cat-tab:active { transform: scale(.97); }

/* Блик: полоса света проезжает по кнопке при наведении — то самое «переливание» */
.btn::after, .cat-tab::after, .icon-btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.btn:hover::after, .cat-tab:hover::after, .icon-btn:hover::after {
  opacity: 1;
  animation: sheenSweep .7s ease-out;
}
.btn.primary::after { background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); }
@keyframes sheenSweep { from { left: -60%; } to { left: 130%; } }

/* Главная кнопка — пропорции и свечение как в референсе */
.btn.primary {
  padding: 8px 20px;                 /* горизонтальные вдвое больше вертикальных */
  box-shadow: 0 10px 30px rgba(var(--accent-rgb),.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:hover { box-shadow: 0 14px 40px rgba(var(--accent-rgb),.42), inset 0 1px 0 rgba(255,255,255,.5); }

/* ═══ Объёмные рамки: две линии — светлая сверху внутри, тёмная снаружи ═════ */
.panel, .card, .list-row, .modal, .ctx-menu, .filter-pop, .active-box,
.info-box, .help-block, #grid .tabulator {
  border: 1px solid var(--border-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),      /* блик по верхней кромке */
    inset 0 -1px 0 rgba(0,0,0,.35),           /* тень по нижней — даёт толщину */
    0 8px 24px rgba(0,0,0,.45),               /* отрыв от фона */
    0 0 42px rgba(var(--accent-rgb),.05);     /* еле заметное свечение */
}
.modal, .ctx-menu, .filter-pop {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 34px 80px rgba(0,0,0,.65),
    0 0 60px rgba(var(--accent-rgb),.08);
}
/* Поля ввода — вдавленные, а не плоские */
input, select, textarea, .cell-editor, .add-count-input, .filter-input, .fp-search {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  border-radius: var(--r-sm);
}
input:focus, select:focus, textarea:focus, .cell-editor:focus {
  border-color: rgba(var(--accent-rgb),.6) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 3px rgba(var(--accent-rgb),.16);
}
/* Шапка и панель — приподняты над таблицей */
.header { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 20px rgba(0,0,0,.5); position: relative; z-index: 5; }
.toolbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.4); position: relative; z-index: 4; }
.cat-tabs { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 12px rgba(0,0,0,.35); position: relative; z-index: 3; }

/* Формы не наследуют шрифт: браузер подставляет им свой Arial.
   Без этой строки весь Inter применялся только к обычному тексту. */
button, input, select, textarea, .btn, .icon-btn, .cat-tab, .cat-tab-add {
  font-family: inherit;
}

/* Кнопки не должны сжиматься — из-за overflow:hidden текст обрезался на середине слова */
.btn, .icon-btn, .cat-tab, .cat-tab-add { flex: 0 0 auto; }

/* Вкладки категорий переехали под таблицу — как листы в Excel */
.cat-tabs {
  border-top: 1px solid var(--border);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 -4px 16px rgba(0,0,0,.4);
  padding: 10px 20px;
}
.table-page { display: flex; flex-direction: column; height: 100%; }
.table-page #grid { flex: 1; min-height: 0; }

/* Цвет текста кнопки не зависит от наведения — у референса он постоянный.
   Раньше .btn:hover шёл ниже .btn.primary с той же специфичностью и перебивал
   тёмный текст на светлый. */
.btn:hover, .btn:active, .btn:focus { color: inherit; }
.btn { color: var(--text); }
.btn.primary, .btn.primary:hover, .btn.primary:active { color: var(--accent-ink); }
.btn.success, .btn.success:hover { color: var(--accent-ink); }
.btn.danger, .btn.danger:hover { color: var(--danger); }

/* Счётчик строк — внизу, рядом с вкладками категорий: заметно, но не мешает */
.row-count-box {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),.4);
  background-image: linear-gradient(rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
  color: #eaffe0; font-size: 14px; font-weight: 700;
  box-shadow: var(--card-sheen), 0 4px 16px rgba(var(--accent-rgb),.16);
  white-space: nowrap; flex: 0 0 auto;
}
.cat-sep { width:1px; height:24px; background:var(--border-hi); flex:0 0 auto; margin:0 4px; }
/* Номера строк: с сотой строки цифры не помещались в 48px */
#grid .range-header-col { font-variant-numeric: tabular-nums; }

/* ═══ Цвета по назначению ═══════════════════════════════════════════════════
   Раньше всё было зелёным, и счётчик строк сливался с вкладками категорий.
   Референс para.co тоже не одноцветный: зелёный, синий и фиолетовый ореолы
   (rgba(113,235,68,.16), rgba(0,174,239,.10), rgba(139,108,255,.07)).
   Разводим по смыслу: зелёный — действие, синий — данные, янтарь — проверка. */
:root {
  --info:      #2fa8ff;   --info-rgb: 47,168,255;   /* данные: счётчики, отчёты, статистика */
  --check:     #f0b429;   --check-rgb: 240,180,41;  /* проверка и предупреждения */
  --violet:    #9b7cff;   --violet-rgb: 155,124,255;/* предпросмотр и оформление */
}

/* Счётчик строк — синий, чтобы не путался с категориями */
.row-count-box {
  border-color: rgba(var(--info-rgb),.45);
  background-image: linear-gradient(rgba(var(--info-rgb),.18), rgba(var(--info-rgb),.06));
  color: #dcefff;
  box-shadow: var(--card-sheen), 0 4px 16px rgba(var(--info-rgb),.18);
}

/* Кнопки панели: подсветка при наведении по смыслу кнопки */
.btn[data-kind="data"]:hover  { border-color: rgba(var(--info-rgb),.55);
  box-shadow: var(--card-sheen), 0 6px 20px rgba(var(--info-rgb),.2); }
.btn[data-kind="check"]:hover { border-color: rgba(var(--check-rgb),.55);
  box-shadow: var(--card-sheen), 0 6px 20px rgba(var(--check-rgb),.2); }
.btn[data-kind="view"]:hover  { border-color: rgba(var(--violet-rgb),.55);
  box-shadow: var(--card-sheen), 0 6px 20px rgba(var(--violet-rgb),.2); }

/* Вкладки категорий — нейтральные, активная зелёная: так счётчик и категории
   больше не читаются как один элемент */
.cat-tab { background-image: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.015)); }

/* ═══ Панель инструментов: группы вместо стены кнопок ═══════════════════════ */
.tb-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px; border-radius: 999px;
  border: 1px solid var(--border);
  background-image: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,0));
  box-shadow: var(--card-sheen);
}
.tb-group .btn { box-shadow: none; }
.btn-icon { padding: 7px 11px; }

/* Компактный тумблер автосинхронизации прямо в панели */
.tb-switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:4px 12px 4px 8px; border-radius:999px; user-select:none; }
.tb-switch input { display:none; }
.tb-switch .slider { position:relative; width:34px; height:19px; border-radius:999px;
  background:var(--surface3); border:1px solid var(--border-hi); transition:.18s; flex:none; }
.tb-switch .slider::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:var(--muted); transition:.18s; }
.tb-switch input:checked + .slider { background:linear-gradient(rgba(var(--accent-rgb),.5), rgba(var(--accent-rgb),.25));
  border-color:rgba(var(--accent-rgb),.7); box-shadow:0 0 14px rgba(var(--accent-rgb),.35); }
.tb-switch input:checked + .slider::after { left:17px; background:var(--accent-hi); }
.tb-switch-label { font-size:13px; font-weight:600; color:var(--muted); }
.tb-switch input:checked ~ .tb-switch-label { color:var(--accent-hi); }

/* Переключатель способа создания таблицы: вручную или из файла */
.nt-tabs { display:flex; gap:6px; margin:4px 0 14px; padding:4px; border-radius:999px;
  border:1px solid var(--border); background-image:linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,0)); }
.nt-tab { flex:1; padding:8px 14px; border-radius:999px; border:1px solid transparent;
  background:transparent; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:.15s; }
.nt-tab:hover { color:var(--text); }
.nt-tab.active { color:#eaffe0; border-color:rgba(var(--accent-rgb),.5);
  background-image:linear-gradient(rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.2), var(--sheen); }

.nt-drop { display:flex; align-items:center; justify-content:center; min-height:96px;
  border:1px dashed var(--border-hi); border-radius:var(--radius); cursor:pointer;
  color:var(--muted); font-size:14px; font-weight:600; text-align:center; padding:16px;
  background-image:linear-gradient(rgba(var(--info-rgb),.06), rgba(255,255,255,0)); transition:.15s; }
.nt-drop:hover { border-color:rgba(var(--info-rgb),.6); color:#dcefff;
  box-shadow:0 6px 22px rgba(var(--info-rgb),.16); }

/* Разделитель «или по ссылке»: линия с надписью посередине. Нужен затем,
   чтобы поле ссылки читалось как второй равноправный путь, а не как
   продолжение выбора файла. */
.nt-или { display:flex; align-items:center; gap:10px; margin:14px 0 10px;
  color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.nt-или::before, .nt-или::after { content:""; flex:1; height:1px; background:var(--border); }

/* Заголовки колонок: русское название крупнее, тег под ним, отступы одинаковые */
#grid .tabulator-col .tabulator-col-content { padding: 8px 10px !important; }
#grid .col-h { display:flex; flex-direction:column; gap:3px; }
#grid .col-h-rus { font-size:14px !important; font-weight:700 !important; line-height:1.25;
  letter-spacing:-.01em; }
#grid .col-h-tag { font-size:12px !important; line-height:1.2; opacity:.85; }
#grid .tabulator-col-title { padding:0 !important; }
/* ── Перетаскивание колонок ─────────────────────────────────────────── */
/* Курсор-рука на всём заголовке, кроме закреплённых и полосы изменения ширины */
#grid .tabulator-header .tabulator-col:not(.tabulator-frozen):not(.range-header-col) {
  position:relative; }
#grid .tabulator-header .tabulator-col .tabulator-col-resize-handle { cursor:col-resize; }
/* Значок «взяться» — появляется при наведении на шапку */
#grid .tabulator-header .tabulator-col .col-grip {
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3;
  font-size:11px; line-height:10px; letter-spacing:-1px; color:var(--muted);
  padding:1px 8px 3px; cursor:grab; opacity:0; transition:opacity .12s, color .12s; }
#grid .tabulator-header .tabulator-col:hover .col-grip { opacity:.85; }
#grid .tabulator-header .tabulator-col .col-grip:hover { color:var(--accent); opacity:1; }
#grid .tabulator-header .tabulator-col .col-grip:active { cursor:grabbing; }
/* Колонка, которую держат, и линия, куда она встанет */
#grid .tabulator-col.col-taken { opacity:.5; }
#grid .col-drop-line { position:absolute; top:0; bottom:0; width:3px; z-index:60;
  display:none; pointer-events:none; background:var(--accent);
  box-shadow:0 0 10px 1px rgba(var(--accent-rgb),.75); border-radius:2px; }
/* Пока колонку тащат — «схваченная» рука по всей странице */
body.col-drag, body.col-drag * { cursor:grabbing !important; user-select:none !important; }
#grid .tabulator-col.tabulator-moving { background:var(--accent-dim) !important;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.5) inset; opacity:.92; }
#grid .tabulator-col.tabulator-moving::after { opacity:1 !important; color:var(--accent) !important; }
/* Место, куда встанет колонка */
#grid .tabulator-col-placeholder { background:rgba(var(--accent-rgb),.14) !important;
  border-left:2px solid var(--accent) !important; border-right:2px solid var(--accent) !important; }

/* ── Автопроверка текста ─────────────────────────────────────────────── */
/* Подчёркивание ошибок в ячейках убрано: рябь по всей таблице. Проверка
   текста работает в окне редактирования — см. .ed-layer ниже. */

#gram-btn.has-err  { border-color:rgba(239,68,68,.55); color:#ffd9d9; }
#gram-btn.has-typo { border-color:rgba(245,158,11,.55); color:#ffe9c2; }
#gram-btn .gram-num { font-weight:700; margin-left:4px; }

.gram-list { max-height:56vh; overflow:auto; margin:-4px -4px 0; padding:4px; }
.gram-row { border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; margin-bottom:8px; background:var(--surface2); }
.gram-row-head { display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-size:12px; color:var(--muted); }
.gram-row-head b { color:var(--text); font-size:13px; }
.gram-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px;
  border-top:1px dashed var(--border); }
.gram-item:first-of-type { border-top:0; }
.gram-kind { flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 6px; border-radius:5px; }
.gram-kind.ошибка   { background:rgba(239,68,68,.18); color:#ff9b9b; }
.gram-kind.стиль    { background:rgba(var(--info-rgb),.18); color:#9ccdff; }
.gram-kind.опечатка { background:rgba(245,158,11,.18); color:#ffcd7a; }
.gram-what { flex:1 1 auto; }
.gram-frag { font-family:'Consolas','Courier New',monospace; background:var(--surface3);
  padding:1px 5px; border-radius:4px; color:var(--text); }
.gram-fix { flex:0 0 auto; }
.gram-empty { text-align:center; color:var(--muted); padding:26px 10px; }


/* ══════════════════════════════════════════════════════════════════════
   Приведение интерфейса к системе (правки после разбора скриншотов)
   ══════════════════════════════════════════════════════════════════════ */

/* Чернила для светлых заливок. Проверено расчётом контраста: белый текст
   на любом цвете этой палитры даёт 1.5–3.4 при норме 4.5, тёмный — 5.6–12.3. */
:root {
  --ink-success: #04170c;
  --ink-danger:  #260604;
  --ink-info:    #041826;
  --ink-warn:    #1c1300;
  --ink-violet:  #100a26;
}

/* ── Поля ввода: одинаковый размер во всех окнах ───────────────────────── */
#modal-body .form-group { margin-bottom: 14px; gap: 6px; }
#modal-body .form-group:last-of-type { margin-bottom: 4px; }
#modal-body input:not([type=checkbox]):not([type=radio]),
#modal-body textarea, #modal-body select {
  min-height: 42px; padding: 11px 13px; font-size: 14px; border-radius: 9px; }
#modal-body textarea { min-height: 96px; }
#modal-body input:not([type=checkbox]):not([type=radio]):focus,
#modal-body textarea:focus, #modal-body select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
#modal-body input::placeholder, #modal-body textarea::placeholder {
  color: var(--muted); opacity: .65; }
#modal-body .form-group > label {
  font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
#modal-body .hint { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Кнопка-«ещё» в настройках: читаемая, а не зелёный текст на зелёном ── */
.btn-mini { min-height: 32px; padding: 6px 14px; font-weight: 600; color: var(--text); }
.btn-mini:hover { border-color: var(--accent); color: var(--accent); }

/* ── Заголовок колонки: две строки, значки справа, отступы одинаковые ──── */
#grid .tabulator-col .tabulator-col-content { padding: 9px 10px !important; }
/* Слева всегда пусто под ручку — тогда при наведении текст не прыгает,
   ровно как это сделано у конкурента (замерено: отступ 28px). */
#grid .col-h { display: flex; flex-direction: column; gap: 3px;
  min-width: 0; padding-left: 18px; }
#grid .col-h-row { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
#grid .col-h-rus { flex: 1 1 auto; min-width: 0; display: block !important;
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.25;
  letter-spacing: -.01em; color: var(--text); }
#grid .col-h-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
#grid .col-h-tag { font-size: 12px !important; line-height: 1.2; color: var(--muted); opacity: .85; }

/* Ручка перетаскивания — одна иконка слева от названия, как у конкурента.
   Место под неё зарезервировано всегда (padding-left у .col-h), поэтому при
   наведении заголовок не дёргается. */
#grid .tabulator-header .tabulator-col .col-grip {
  /* Зона захвата — вся левая полоса во всю высоту шапки: значок сам по себе
     16px, попасть в него мышью тяжело. Видно при этом только точки сверху. */
  position: absolute; left: 0; top: 0; width: 26px; height: 100%; z-index: 4;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; box-sizing: border-box;
  font-size: 13px; line-height: 1; color: var(--muted);
  opacity: 0; cursor: grab; border-radius: 0 6px 6px 0;
  transition: opacity .12s, background .12s, color .12s;
  transform: none; letter-spacing: 0; }
#grid .tabulator-header .tabulator-col:hover .col-grip { opacity: .8; }
#grid .tabulator-header .tabulator-col .col-grip:hover {
  opacity: 1; color: var(--accent); background: rgba(var(--accent-rgb), .16); }
#grid .tabulator-header .tabulator-col .col-grip:active { cursor: grabbing; }
/* У закреплённых колонок ручки нет — отступ слева им не нужен */
#grid .tabulator-col.tabulator-frozen .col-h,
#grid .range-header-col .col-h { padding-left: 0; }

/* Пока тащим: видно и что взяли, и куда встанет */
#grid .tabulator-col.col-taken { opacity: .45;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }
#grid .col-drop-line { position: absolute; top: 0; bottom: 0; width: 4px; z-index: 60;
  display: none; pointer-events: none; background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(var(--accent-rgb), .9); border-radius: 2px; }

/* Копия заголовка, которая едет за курсором — видно, что колонку держат */
#grid .col-ghost, .col-ghost {
  position: fixed !important; z-index: 9999; pointer-events: none;
  opacity: 1; border-radius: 8px; overflow: hidden;
  background: var(--surface3) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 0 2px var(--accent);
  transform: rotate(-1.5deg) scale(1.02); transition: none; }
.col-ghost .col-grip { opacity: 1 !important; color: var(--accent) !important; }
.col-ghost .tabulator-col-content, .col-ghost .col-h { background: var(--surface3) !important; }

/* Значок перевыпуска в таблице */
.reissue-badge { display:inline-block; padding:1px 7px; border-radius:6px;
  background:rgba(var(--violet-rgb,155,124,255), .18); color:#c9b6ff;
  font-size:12px; font-weight:700; }

/* Правило перепубликации в ячейке */
#grid .col-rule .tabulator-cell, .col-rule { white-space:nowrap; }
.rule-chip { display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px;
  background:var(--surface3); border:1px solid var(--border); color:var(--text); }
.rule-chip b { color:var(--accent); }
.rule-x { margin-left:6px; cursor:pointer; color:var(--danger); font-weight:700;
  opacity:.65; transition:opacity .12s; }
.rule-x:hover { opacity:1; }
/* Две вкладки режима, как в референсе */
.tabs-2 { display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:4px; margin-bottom:14px; }
.tab2 { flex:1; padding:9px 12px; border:0; border-radius:7px; background:transparent;
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.tab2.on { background:var(--surface3); color:var(--text); box-shadow:var(--shadow-card); }
.rule-box { border:1px solid var(--border); border-radius:10px; padding:2px 14px; }
/* Сетка, а не flex: подпись слева, поле фиксированной ширины, единица справа.
   На flex глобальное правило модалки (input width:100%) растягивало поле и
   выдавливало слово «дней» за край окна. */
.rule-line { display:grid; grid-template-columns:1fr 92px 96px 48px; align-items:center;
  column-gap:12px; padding:13px 0; border-bottom:1px solid var(--border); font-size:14px; }
.rule-line:last-child { border-bottom:0; }
.rule-label { line-height:1.35; }
.rule-unit { color:var(--muted); font-size:13px; }
#modal-body .rule-line input[type=number] { width:92px !important; min-width:0;
  text-align:center; padding-left:6px; padding-right:6px; }
#modal-body .rule-line .tb-switch { justify-self:end; }
.warn-box { background:rgba(240,87,79,.12); border:1px solid rgba(240,87,79,.35);
  border-radius:10px; padding:12px 14px; margin-bottom:14px; font-size:13px;
  line-height:1.5; color:#ffc9c5; }
.warn-box b { color:#ff9b93; }

/* Объявление снято и ждёт архива — его сейчас нет в фиде */
.rule-wait { display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px;
  background:rgba(240,180,41,.16); border:1px solid rgba(240,180,41,.35); color:#ffcd7a; }

/* Автопродвижение: точка «сейчас продвигается» */
.apr-on { color:var(--accent); margin-right:6px; font-size:15px; line-height:1;
  text-shadow:0 0 8px rgba(var(--accent-rgb),.9); }

/* Большое поле ввода описания: в объявлениях бывает 2000+ символов,
   в маленьком окне не видно, что написал. */
#modal-body .cell-editor { min-height: 46vh !important; max-height: 60vh;
  font-size: 14px; line-height: 1.55; resize: vertical; }
#modal-body #macro-help { max-height: 40vh; overflow-y: auto; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--surface2); }

/* ── Проверка текста прямо в поле ввода ─────────────────────────────────
   Под textarea лежит подложка с тем же текстом и теми же метриками.
   Textarea прозрачный, поэтому подчёркивание из подложки видно ровно
   под нужными словами. Любое расхождение шрифта или отступов сдвинет
   подчёркивание — поэтому метрики заданы в одном месте для обоих. */
.ed-wrap { position:relative; }
.ed-layer, #modal-body .ed-wrap .ed-input {
  font: 14px/1.55 inherit; font-family:inherit; letter-spacing:normal;
  padding:11px 13px; border:1px solid transparent; border-radius:9px;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:normal;
  min-height:46vh; max-height:60vh; box-sizing:border-box; }
.ed-layer { position:absolute; inset:0; overflow:auto; pointer-events:none;
  color:transparent; z-index:1; }
.ed-layer .ed-mark { pointer-events:auto; cursor:pointer; color:transparent;
  background:transparent; border-radius:2px; }
.ed-layer .ed-mark.ошибка   { border-bottom:2px wavy solid rgba(239,68,68,.95);
  text-decoration:underline wavy rgba(239,68,68,.95); text-decoration-skip-ink:none; }
.ed-layer .ed-mark.опечатка { text-decoration:underline wavy rgba(245,158,11,.95);
  text-decoration-skip-ink:none; }
.ed-layer .ed-mark.стиль    { text-decoration:underline wavy rgba(120,140,170,.7);
  text-decoration-skip-ink:none; }
#modal-body .ed-wrap .ed-input { position:relative; z-index:2; background:transparent !important;
  resize:vertical; }
.ed-wrap::before { content:""; position:absolute; inset:0; border-radius:9px;
  background:var(--surface2); border:1px solid var(--border); }
.ed-count { margin-left:12px; color:#ffb4ae; font-weight:600; }
/* Меню замены по клику на подчёркнутом слове */
.ed-pop { position:fixed; z-index:9999; min-width:190px; padding:6px;
  background:var(--surface3); border:1px solid var(--border-hi);
  border-radius:10px; box-shadow:var(--shadow-pop); font-size:13px; }
.ed-pop-what { padding:5px 8px 7px; color:var(--muted); font-size:12px;
  border-bottom:1px solid var(--border); margin-bottom:4px; }
.ed-pop-item { padding:7px 9px; border-radius:6px; cursor:pointer; color:var(--text); }
.ed-pop-item:hover { background:var(--accent); color:var(--accent-ink); }
.ed-pop-item.add { color:var(--accent); }
.ed-pop-item.skip { color:var(--muted); }

/* Краткая выжимка в подсказке к полю — первое, что читает человек */
.help-hint { background:rgba(var(--info-rgb),.10); border:1px solid rgba(var(--info-rgb),.28);
  color:#d4e8ff; line-height:1.55; }

/* ── Окно «Статистика из Авито» ───────────────────────────────────────── */
.st-list { max-height:52vh; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.st-group { margin-bottom:14px; }
.st-group-head { display:flex; align-items:center; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  padding:6px 0; border-bottom:1px solid var(--border); margin-bottom:6px; }
.st-all { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600;
  color:var(--accent); cursor:pointer; font-size:12px; }
.st-all:hover { text-decoration:underline; }
/* .st-item — это <label>, а у label глобально стоит uppercase и letter-spacing.
   Здесь это лезет капсом на названия и пояснения, поэтому сбрасываем. */
.st-item { display:grid; grid-template-columns:22px 1fr; gap:2px 8px; align-items:start;
  padding:7px 8px; border-radius:8px; cursor:pointer;
  text-transform:none; letter-spacing:normal; font-weight:400; }
.st-item:hover { background:var(--surface2); }
.st-item input { grid-row:span 2; width:16px; height:16px; margin-top:2px; }
.st-name { font-size:13.5px; font-weight:600; color:var(--text); }
.st-why { font-size:12px; color:var(--muted); line-height:1.45; }
/* Блок статистики Авито выделен светло-серым целиком — и шапка, и ячейки.
   Класс col-stat вешается на каждую колонку статистики, поэтому подсветка
   сама распространяется на вновь добавленные показатели. */
#grid .tabulator-col.col-stat,
#grid .tabulator-col.col-stat .tabulator-col-content { background:#2a303a !important; }
#grid .tabulator-cell.col-stat { background:#232830 !important; color:#e8edf5; }
#grid .tabulator-row.tabulator-row-even .tabulator-cell.col-stat { background:#262c35 !important; }
#grid .tabulator-cell.col-stat.tabulator-range-selected { background:#33405c !important; }
/* границы блока, чтобы было видно, где статистика начинается и кончается */
#grid .tabulator-col.col-stat.col-stat-first,
#grid .tabulator-cell.col-stat.col-stat-first { border-left:2px solid #3d4552; }

/* ── Форма «цена целевого действия» ───────────────────────────────────── */
.cd-head, .cd-row { display:grid; grid-template-columns:1fr 130px 150px 28px;
  gap:10px; align-items:center; }
.cd-head { font-size:12px; color:var(--muted); font-weight:600; padding:10px 0 6px;
  border-bottom:1px solid var(--border); margin-top:14px; }
.cd-row { padding:6px 0; }
#modal-body .cd-row input { min-height:40px; }
.cd-del { text-align:center; cursor:pointer; color:var(--danger); opacity:.6;
  font-weight:700; transition:opacity .12s; }
.cd-del:hover { opacity:1; }
.cd-preview { margin-top:12px; padding:10px 12px; border-radius:9px;
  background:var(--surface2); border:1px solid var(--border);
  font-size:13px; color:var(--muted); }
.cd-preview code { color:var(--accent); font-size:13px; }

/* Кнопка сохранения, пока форма заполнена неверно */
.btn.primary.disabled, .btn.primary:disabled { opacity:.45; cursor:not-allowed;
  filter:grayscale(.5); box-shadow:none; }

/* Подсветка строки, в которой стоит курсор: при полусотне колонок глазами
   вести взгляд по строке иначе тяжело. Слева — полоска-указатель. */
#grid .tabulator-row.row-active { background:#1b2230 !important; }
#grid .tabulator-row.row-active .tabulator-cell { background:transparent !important; }
#grid .tabulator-row.row-active .tabulator-cell.col-stat { background:rgba(42,48,58,.75) !important; }
#grid .tabulator-row.row-active .tabulator-cell.tabulator-range-only-cell-selected {
  background:rgba(var(--accent-rgb),.14) !important; }
#grid .tabulator-row.row-active::before { content:""; position:absolute; left:0; top:0;
  bottom:0; width:3px; background:var(--accent); opacity:.85; z-index:5; }
#grid .tabulator-row { position:relative; }

/* ── Множественный выбор значений характеристики ─────────────────────── */
.mv-head { display:flex; align-items:center; gap:12px; margin:14px 0 8px; }
.mv-all { color:var(--accent); cursor:pointer; font-size:13px; font-weight:600;
  white-space:nowrap; }
.mv-all:hover { text-decoration:underline; }
#modal-body .mv-head input { flex:1; min-height:38px; }
.mv-list { max-height:46vh; overflow-y:auto; border:1px solid var(--border);
  border-radius:10px; padding:6px; background:var(--surface2); }
.mv-item { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:7px; cursor:pointer; text-transform:none; letter-spacing:normal;
  font-weight:400; font-size:13.5px; color:var(--text); }
.mv-item:hover { background:var(--surface3); }
.mv-item input { width:16px; height:16px; }
/* Значения в ячейке — отдельными плашками, чтобы читались */
.mv-chip { display:inline-block; padding:1px 7px; margin:1px 3px 1px 0;
  border-radius:5px; background:var(--surface3); border:1px solid var(--border);
  font-size:12px; color:var(--text); }
#grid .tabulator-cell.col-multi { cursor:pointer; }

/* ── Группы колонок: обязательные / настройки / характеристики / доставка ── */
.col-h-grp { font-size:9.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted2);
  margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Отбивка перед первой колонкой группы — чтобы полсотни колонок читались */
#grid .tabulator-col.grp-start,
#grid .tabulator-cell.grp-start { border-left:2px solid var(--accent-hi); }
.ctx-head { padding:7px 12px 4px; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.ctx-note { margin-left:6px; font-size:11px; color:var(--muted); }

/* ── Календарь выбора даты размещения ──────────────────────────────────── */
.кал-корпус { display:flex; align-items:flex-start; gap:14px; padding:14px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface2); }
.кал-месяц { flex:1; min-width:0; }
.кал-имя { text-align:center; font-weight:600; font-size:14px; margin-bottom:10px; }
.кал-сетка { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.кал-шапка { text-align:center; font-size:11px; color:var(--muted2); padding:4px 0; }
.кал-день { height:32px; border:0; border-radius:8px; background:transparent;
  color:var(--text); font-size:13px; cursor:pointer; font-family:inherit; }
.кал-день:hover { background:var(--surface3); }
.кал-день.чужой { color:var(--muted2); opacity:.45; }
.кал-день.сегодня { background:var(--surface3); font-weight:600; }
.кал-день.выбран { background:var(--accent); color:#fff; font-weight:600; }
.кал-стрелка { width:30px; height:30px; flex:0 0 30px; margin-top:-2px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface);
  color:var(--text); font-size:17px; line-height:1; cursor:pointer; }
.кал-стрелка:hover { background:var(--surface3); }
.кал-время { margin-top:14px; }
.кал-время-поля { display:flex; align-items:center; gap:10px; margin-top:6px; }
.кал-время-поля select { min-height:38px; min-width:110px; }
.кал-итог { margin-top:12px; font-size:13px; color:var(--muted); }
.кал-итог code { color:var(--text); }
.кал-нет { color:var(--warn, #d98a3a); }
.btn.disabled, .btn:disabled { opacity:.45; cursor:not-allowed; }

/* ── Окно справочника Авито ─────────────────────────────────────────────── */
.sp-grid { display:flex; gap:12px; margin:14px 0; }
.sp-плитка { flex:1; padding:14px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface2); text-align:center; }
.sp-число { font-size:26px; font-weight:700; color:var(--text); line-height:1.1; }
.sp-подпись { font-size:12px; color:var(--muted); margin-top:4px; }

/* ── Библиотека сохранённых текстов ─────────────────────────────────────── */
.ред-шапка { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.бт-список { max-height:52vh; overflow-y:auto; border:1px solid var(--border);
  border-radius:10px; background:var(--surface2); }
.бт-строка { padding:11px 13px; border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:1fr auto auto; gap:8px 12px; align-items:center; }
.бт-строка:last-child { border-bottom:0; }
.бт-чек { display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; }
.бт-чек input { width:16px; height:16px; flex:0 0 16px; }
.бт-имя { font-weight:600; font-size:14px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.бт-сколько { font-size:12px; color:var(--muted); white-space:nowrap; }
.бт-кнопки { display:flex; gap:6px; }
.бт-кусок { grid-column:1 / -1; font-size:12.5px; color:var(--muted);
  line-height:1.45; max-height:38px; overflow:hidden; }
/* знак «?» у наших колонок — тем же цветом, что у полей Авито */
.col-h-q-своя { cursor:help; }

/* ── Рандомизатор титульного фото ───────────────────────────────────────── */
.тф-загрузка { display:flex; flex-direction:column; gap:3px; align-items:center;
  padding:14px; margin:12px 0; cursor:pointer; text-align:center;
  border:1px dashed var(--border); border-radius:10px; background:var(--surface2); }
.тф-загрузка:hover { border-color:var(--accent); background:var(--surface3); }
.тф-загрузка > span:first-of-type { font-weight:600; font-size:14px; color:var(--text); }
.тф-сетка { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px; max-height:46vh; overflow-y:auto; padding:2px; }
.тф-плитка { position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden;
  border:2px solid var(--border); cursor:pointer; background:var(--surface2); }
.тф-плитка img { width:100%; height:100%; object-fit:cover; display:block; }
.тф-плитка:hover { border-color:var(--muted); }
.тф-плитка.выбрана { border-color:var(--accent); }
.тф-угол { position:absolute; top:6px; left:6px; width:22px; height:22px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; opacity:0; }
.тф-плитка.выбрана .тф-угол { opacity:1; }
.тф-удалить { position:absolute; top:6px; right:6px; width:22px; height:22px;
  border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff;
  font-size:12px; line-height:1; cursor:pointer; opacity:0; }
.тф-плитка:hover .тф-удалить { opacity:1; }
.тф-вес { position:absolute; bottom:0; left:0; right:0; padding:3px 6px;
  background:rgba(0,0,0,.6); color:#fff; font-size:11px; }
.тф-метка { display:inline-block; padding:1px 8px; border-radius:5px;
  background:var(--surface3); border:1px solid var(--border); font-size:12px; }

/* ── Экран «не удалось открыть» ─────────────────────────────────────────── */
.пусто-ошибка { max-width:560px; margin:80px auto; padding:28px; text-align:center;
  border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.пусто-заголовок { font-size:18px; font-weight:700; margin-bottom:10px; }
.пусто-текст { color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:14px; }
.пусто-ошибка .btn { margin:0 5px; }

/* ══ Вход и регистрация ═══════════════════════════════════════════════════
   Тот же тёмный фон, тот же зелёный акцент, тот же знак — человек должен
   узнать сервис ещё до того, как вошёл. Две колонки: слева коротко о том,
   что сервис делает, справа форма. На узком экране колонки складываются.

   Пока не вошли, шапку прячем: в ней хлебные крошки и категории — всё, чего
   гостю видеть незачем. */
body.гость .header > *:not(.марка) { visibility: hidden; }

.вход-экран {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px;
  min-height: calc(100vh - 120px);
}

.вход-слева { color: var(--muted); }
.вход-знак { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.вход-знак img { height: 40px; width: auto; }
.вход-марка { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: var(--text);
  user-select: none; -webkit-user-select: none; }

.вход-слева h1 {
  font-size: 34px; line-height: 1.2; font-weight: 800;
  color: var(--text); margin: 0 0 22px;
}
.вход-список { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.вход-список li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; }
/* Галочка вместо маркера: перечисление возможностей, а не список дел */
.вход-список li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}

.вход-карта {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.вход-табы { margin-bottom: 18px; }
.вход-кнопка { width: 100%; justify-content: center; margin-top: 6px; padding: 11px 20px; font-size: 15px; }
.вход-карта .form-group { margin-bottom: 14px; }
.вход-карта input { width: 100%; }

/* Первому — объяснение, а не переключатель: входить ещё некуда */
.вход-первый {
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px; line-height: 1.5; color: #dff7d4;
}

.вход-ошибка { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* Кто вошёл — в правом углу шапки, рядом с категориями */
.кто-я {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  font-size: 12px; line-height: 1.2; transition: border-color .15s;
}
.кто-я:hover { border-color: rgba(var(--accent-rgb), .55); }
.кто-имя { color: var(--text); font-weight: 600; }
.кто-тариф { color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .вход-экран { grid-template-columns: 1fr; gap: 32px; padding: 32px 18px; }
  .вход-слева h1 { font-size: 26px; }
  .вход-карта { max-width: 420px; }
}

/* ══ Личный кабинет ═══════════════════════════════════════════════════════
   Шапка кабинета: кто вошёл, номер кабинета и на что израсходован тариф.
   Полоса заполнения нужна не ради красоты: клиент должен заметить, что
   упирается в предел, ДО того как сервис перестанет принимать новое. */
.кабинет {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 26px;
}
.кабинет-верх { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.кабинет-подпись { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.кабинет-имя { font-size: 24px; font-weight: 800; margin: 4px 0 0; color: var(--text); }
/* Номер кабинета выделяем моноширинным: его диктуют и переписывают */
.кабинет-номер {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.кабинет-плитки {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 18px;
}
.кабинет-плитка {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.кп-имя { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.кп-знач { color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.1; }
.кп-предел { color: var(--muted); font-size: 13px; font-weight: 500; }
.кп-безлимит { color: var(--accent); font-size: 11px; margin-top: 6px; }
.кп-полоса { height: 4px; border-radius: 999px; background: var(--border); margin-top: 9px; overflow: hidden; }
.кп-полоса i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.кп-полоса i.полно { background: var(--danger); }

h2.раздел { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); }

/* Согласие с офертой при регистрации.
   Это метка, а значит на неё падают общие правила label: капс, разрядка,
   мелкий кегль. Для строки в две строки текста они не годятся — сбрасываем. */
.вход-согласие {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; cursor: pointer;
  font-size: 13px; line-height: 1.45; color: var(--muted);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.вход-согласие input {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.вход-согласие span { flex: 1; }
.вход-согласие a { color: var(--accent); text-transform: none; }

/* ══ CRM ══════════════════════════════════════════════════════════════════ */
.crm-сводка { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.crm-таблица { width: 100%; border-collapse: collapse; font-size: 14px; }
.crm-таблица th, .crm-таблица td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.crm-таблица th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.crm-таблица tbody tr { cursor: pointer; }
.crm-таблица tbody tr:hover { background: var(--surface2); }
.crm-номер { font-family: ui-monospace, Consolas, monospace; color: var(--accent); }
.crm-роль { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.crm-роль.admin { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.crm-выкл { opacity: .45; }

/* ══ Управляющие элементы не выделяются ═══════════════════════════════════
   Правило владельца: названия, иконки, кнопки, вкладки и пункты меню — это то,
   на что наводят и нажимают, а не текст. Выделять их мышью нельзя: при двойном
   клике элемент управления подсвечивался синим и выглядел как сломанный абзац.

   Выделяемым остаётся то, что человек может захотеть скопировать: содержимое
   ячеек таблицы, тексты объявлений, номера, ключи и адреса. */
.btn, .icon-btn, .nt-tab, .cat-tab, .cat-tab-add, .tab-x, .del-x, .col-grip,
.breadcrumb, .breadcrumb a, .card-go, .logo, .logo-имя, .кто-я, .кабинет-подпись,
.avito-status, .ctx-item, .fp-item, .fp-sort-item, .cat-item, .chip,
.вход-табы, .вход-согласие, .вход-список, .док-назад, .кп-имя, .раздел,
h1, h2, h3, label, th, .page-head, .card-title, .card-meta {
  user-select: none;
  -webkit-user-select: none;
}

/* А это — данные, их копируют */
.кабинет-номер, .crm-номер, input, textarea, .tabulator-cell, .rnd-preview-item,
code, .док-лист p, .док-лист li, .док-таблица td {
  user-select: text;
  -webkit-user-select: text;
}