/* Админка «Стратега» — те же токены, что в cp.css, но плотнее: это
   рабочий инструмент, а не витрина. --rhythm здесь не нужен, отступы
   16–24px, строки таблиц 44px. */

:root{
  --bg:#0A0C0F; --card:#12151A; --line:#1E232B; --line2:#2A313B;
  --tx:#F4F6FA; --dim:#8A93A3; --dim2:#5E6673;
  --card-on:#161A20;
  --teal:#2AE8C6; --violet:#DC5BF2;
  --teal-deep:#10A38A; --violet-deep:#CA48E0;
  --r:4px;
  --pad:20px;
  --fs-body:15px;
  --fs-micro:12px;
  --maxw:1408px;
  --row:44px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:400 var(--fs-body)/1.45 -apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1{font:600 22px/1.2 -apple-system,Segoe UI,Roboto,sans-serif;margin:0 0 16px}

/* ── шапка ─────────────────────────────────────────────────────── */
.a-head{border-bottom:1px solid var(--line);background:var(--card)}
.a-head-wrap{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:24px;height:56px;
}
.a-logo{font-weight:600;color:var(--tx)}
.a-nav{display:flex;gap:16px;flex:1}
.a-nav a{color:var(--dim);font-size:14px}
.a-nav a:hover{color:var(--tx)}
.a-user{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}
.a-user button{
  background:none;border:1px solid var(--line2);color:var(--dim);
  border-radius:var(--r);padding:6px 10px;font:inherit;cursor:pointer;
}
.a-user button:hover{color:var(--tx);border-color:var(--dim)}

.a-main{max-width:var(--maxw);margin:0 auto;padding:24px var(--pad) 64px}

/* ── форма входа ───────────────────────────────────────────────── */
.a-login{max-width:320px;margin:64px auto}
.a-error{color:var(--violet);font-size:14px;margin:0 0 12px}

/* ── формы ─────────────────────────────────────────────────────── */
form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim);margin-bottom:12px}
input,select,button{font:inherit}
input[type=text],input[type=password],input[type=url]{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--tx);padding:9px 10px;
}
input:focus,select:focus{outline:1px solid var(--teal);border-color:var(--teal)}
select{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--tx);padding:9px 10px;
}
button{
  background:var(--teal-deep);border:0;border-radius:var(--r);color:#04120E;
  padding:9px 14px;font-weight:600;cursor:pointer;
}
button:hover{background:var(--teal)}

/* ── реестр ────────────────────────────────────────────────────── */
.a-new{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:20px}
.a-new summary{cursor:pointer;font-weight:600;color:var(--tx)}
.a-new-form{display:flex;gap:16px;align-items:flex-end;margin-top:14px;flex-wrap:wrap}
.a-new-form label{margin-bottom:0;min-width:180px}
.quick-create{margin-top:16px;padding:18px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg)}
.quick-create-copy{max-width:720px}.quick-create-kicker{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.quick-create h2{margin:6px 0 4px;font-size:19px;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.quick-create p{margin:0;color:var(--dim);max-width:68ch;font-size:13px;line-height:1.5}
.quick-create-form{display:grid;grid-template-columns:minmax(260px,1.45fr) minmax(180px,1fr) minmax(220px,1fr) auto;gap:12px;align-items:end}
.quick-create-form label{min-width:0}.quick-create-form input,.quick-create-form select{width:100%;min-height:40px}
.quick-create-form button{min-height:40px;white-space:nowrap;transition:background .2s ease,transform .12s ease}
.quick-create-form button:active{transform:translateY(1px)}
.blank-create{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.blank-create>summary{color:var(--dim);font-size:13px;font-weight:400}
@media (max-width:980px){.quick-create-form{grid-template-columns:1fr 1fr}.quick-create-form button{width:100%}}
@media (max-width:620px){.a-main{padding-inline:14px}.quick-create{padding:14px}.quick-create-form{grid-template-columns:1fr}.a-new-form label{width:100%;min-width:0}.a-new-form button{width:100%}}
/* Чекбокс «рекомендуем» формы добавления блока (Задача 5 фазы 3) — общее
   правило form label{flex-direction:column} выше кладёт подпись НАД полем,
   для галочки с текстом рядом нужен обычный ряд. */
.a-new-form label.a-check{flex-direction:row;align-items:center;gap:6px;min-width:0}
.a-empty{color:var(--dim)}
.offer-tools{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.offer-tools label{margin:0;min-width:220px}.offer-tools label+label{min-width:170px}
.offer-tools input,.offer-tools select{min-height:40px}.offer-count{margin:0 0 10px;color:var(--dim);font-size:13px}
.a-table-wrap{overflow-x:auto}.lead-signals{min-width:155px}.lead-signals>span{display:block;font-size:12px;line-height:1.45;color:var(--dim)}
.lead-signals b{color:var(--tx)}.lead-pending{color:#d79542!important}.lead-signals form{display:inline-block;margin:4px 3px 0 0}
.a-actions .retry-lead,.retry-lead{padding:4px 7px;border:1px solid var(--line2);border-radius:var(--r);background:transparent;color:var(--dim);font-size:11px}
.check-offer{display:inline-block;padding:7px 9px;border:1px solid var(--line2);border-radius:var(--r);white-space:nowrap}

.a-table{width:100%;border-collapse:collapse;font-size:14px}
.a-table th{
  text-align:left;color:var(--dim2);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;padding:0 10px 8px;border-bottom:1px solid var(--line2);
}
.a-table td{
  padding:0 10px;height:var(--row);border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.offer-table th,.offer-table td{padding-inline:5px}
.offer-client{min-width:120px}.offer-title{min-width:220px}
.offer-state{min-width:118px}.offer-date{white-space:nowrap}
.a-table tr:hover td{background:var(--card-on)}

.a-status{
  font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;
  padding:4px 8px;border-radius:var(--r);border:1px solid var(--line2);color:var(--dim);
}
.a-status-published{color:var(--teal);border-color:var(--teal-deep)}
.a-status-draft{color:var(--dim)}
.a-status-archived{color:var(--dim2)}

.a-badge{
  display:inline-block;font-size:11px;font-weight:500;padding:2px 7px;
  border-radius:var(--r);margin-left:8px;white-space:nowrap;
}
.a-badge-warn{background:rgba(220,91,242,.15);color:var(--violet)}
.a-badge-stale{background:rgba(90,100,115,.25);color:var(--dim)}
.a-badge-template{background:rgba(42,232,198,.12);color:var(--teal);border:1px solid var(--teal-deep)}

.a-actions{display:flex;gap:10px;align-items:center;white-space:nowrap}
.a-actions form{display:inline}
.a-actions button{
  background:none;border:1px solid var(--line2);color:var(--dim);
  padding:6px 10px;font-size:13px;font-weight:400;border-radius:var(--r);
}
.a-actions button:hover{color:var(--tx);border-color:var(--dim)}
.template-toggle{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;
  color:var(--dim);font-size:12px;cursor:pointer}
.offer-state .template-toggle-form{margin-top:7px}
.template-toggle input{margin:0;accent-color:var(--teal)}
.template-toggle:has(input:checked){color:var(--teal)}

/* ── конструктор секций (Задача 12) ───────────────────────────────
   Сплит-экран: слева дерево секций, справа iframe с тем же шаблоном
   kp.html, что видит клиент — предпросмотр обновляется перезагрузкой
   страницы после каждого сохранения, отдельного JS на это не нужно. */
.dim{color:var(--dim)}

.split{display:flex;gap:20px;align-items:flex-start;height:calc(100vh - 56px - 48px)}
.tree{
  flex:0 0 460px;max-width:460px;height:100%;overflow-y:auto;
  padding-right:4px;
  transition:flex-basis .18s ease,max-width .18s ease;
}
/* Дима 09.09: «при наведении курсора на редактируемую область раскрывать её
   до половины экрана за счёт правой части, как левое меню Битрикс24».
   Ширина 460px хороша, чтобы видеть макет, и тесна, чтобы в нём писать.
   :focus-within здесь не украшение, а условие пригодности: на одном
   :hover панель схлопывалась бы, стоит увести мышь к клавиатуре или к
   краю экрана, — то есть ровно посреди набора текста, вместе с полем,
   в котором стоит курсор. Поэтому раскрыто, пока мышь над панелью ИЛИ
   фокус внутри неё. Предпросмотр ужимается сам (flex:1) и переверстает
   документ по своей же клиентской сетке. */
.tree:hover,
.tree:focus-within,
.split.pinned .tree{flex-basis:50vw;max-width:50vw}
@media (prefers-reduced-motion:reduce){.tree{transition:none}}

/* Булавка: тот же фирменный градиент, что у «добавить позицию» (.btn-grad),
   но переливающийся — обводка нарисована вторым слоем background в
   border-box, поэтому «перелив» делается сдвигом background-position, а не
   перекраской рамки. Пятистопный повтор и 200% ширины — как у textsheen в
   cp.css: с двумя стопами шов был бы виден на каждом обороте. */
@keyframes pinsheen{from{background-position:0 0,0 0}to{background-position:0 0,200% 0}}
.pinbtn{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;color:var(--dim);font-size:13px;line-height:1;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(90deg,#DC5BF2,#2AE8C6,#DC5BF2,#2AE8C6,#DC5BF2) border-box;
  background-size:auto,200% 100%;
  animation:pinsheen 9s linear infinite;
}
.pinbtn:hover{color:var(--tx)}
.pinbtn[aria-pressed="true"]{
  color:var(--tx);font-weight:500;
  background:linear-gradient(var(--card-on),var(--card-on)) padding-box,
             linear-gradient(90deg,#DC5BF2,#2AE8C6,#DC5BF2,#2AE8C6,#DC5BF2) border-box;
  background-size:auto,200% 100%;
  animation:pinsheen 3.5s linear infinite;
}
@media (prefers-reduced-motion:reduce){.pinbtn{animation:none}}
.preview{
  flex:1;height:100%;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;
}

.treehead{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:10px;
}
.treehead-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.treehead-row form{display:inline}
.warn{
  font-size:11px;font-weight:500;padding:2px 7px;border-radius:var(--r);
  background:rgba(220,91,242,.15);color:var(--violet);
}
.ghost-link{margin-left:auto;color:var(--dim);font-size:13px}

button.primary{background:var(--teal-deep);color:#04120E}
button.primary:hover{background:var(--teal)}
button.ghost{
  background:none;border:1px solid var(--line2);color:var(--dim);
  padding:9px 14px;border-radius:var(--r);font-weight:400;
}
button.ghost:hover{color:var(--tx);border-color:var(--dim)}

/* Дима 09.09 на показе: «добавь немного воздуха между секциями и сами
   заголовки секций чуть крупнее». Класс .sec живёт только в editor.html
   (сверено), поэтому правка никуда больше не протекает. */
.sec{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:20px;
}
.sec[data-hidden="1"]{opacity:.55}
.sec summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 18px;user-select:none;
}
.sec summary::-webkit-details-marker{display:none}
.secname{font-weight:600;font-size:18px;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sectype{color:var(--dim2);font-size:13px}
.tools{display:flex;gap:4px;align-items:center}
.tools form{display:inline}
.tools button{
  background:none;border:1px solid transparent;color:var(--dim);
  padding:4px 7px;font-size:13px;border-radius:var(--r);line-height:1;
}
.tools button:hover:not(:disabled){color:var(--tx);border-color:var(--line2)}
.tools button:disabled{opacity:.3;cursor:default}

/* Дима 09.09: «поле для текста чуть шире и сам шрифт в конструкторе крупнее,
   чтобы удобнее вводить информацию». Ширину дают две вещи: панель, которая
   раскрывается до пол-экрана (см. .tree выше), и уменьшенные боковые поля
   секции — сами поля тянутся на всю ширину сами (form label{display:flex;
   flex-direction:column} растягивает детей). Кегль поднят только у полей
   ВВОДА: подписи остаются мельче, иначе форма превращается в стену текста
   и глазу не за что зацепиться. */
.secform{padding:0 10px 14px;display:flex;flex-direction:column;gap:0}
.secform label{margin-bottom:12px}
.secform input:not([type=checkbox]):not([type=radio]),
.secform select,
.secform textarea,
.items input,
.itemrow input,
.itemrow textarea{font-size:16px;line-height:1.45}
.secform textarea{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--tx);padding:11px 12px;font:inherit;resize:vertical;
}
.secform > .primary,.secform > .ghost{align-self:flex-start;margin-bottom:12px}

.items{
  display:flex;flex-direction:column;gap:6px;margin-bottom:14px;
  font-size:13px;color:var(--dim);
}
/* Загруженный файл виден и после перезагрузки (Дима 09.09): подпись под
   превью — единственное, что отличает «логотип сохранён» от «я его выбрал,
   а форма не ушла». Раньше форма отправлялась ТОЛЬКО перетаскиванием, и
   выбор файла через диалог не давал вообще ничего. */
.uploadok{display:block;margin-top:6px;font-size:12px;color:var(--teal)}
.uploadfield form{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fieldlabel{font-size:13px;color:var(--dim)}
.itemrow{display:flex;gap:6px;align-items:center}
.itemrow input{flex:1;min-width:0}
.rmitem,.rmgroup{
  background:none;border:1px solid var(--line2);color:var(--dim);
  border-radius:var(--r);width:28px;height:28px;flex:0 0 auto;
  font-size:14px;line-height:1;padding:0;
}
.rmitem:hover,.rmgroup:hover{color:var(--violet);border-color:var(--violet)}
.additem,.addgroup{
  align-self:flex-start;background:none;border:1px dashed var(--line2);
  color:var(--dim);font-size:13px;font-weight:400;padding:6px 12px;
}
.additem:hover,.addgroup:hover{color:var(--tx);border-color:var(--dim)}

/* Состав работ этапа группами (Задача 4 фазы 3): fieldset на группу, внутри —
   обычные .items/.itemrow, но у строки, кроме текста, ещё чекбокс «под
   клиента» — ему нельзя тянуться на всю ширину вместе с input (правило
   .itemrow input{flex:1} выше), поэтому обёртка .clientflag выведена из-под
   него отдельным правилом. */
.groups{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.groupblock{border:1px solid var(--line2);border-radius:var(--r);padding:10px}
.groupblock .items{margin-bottom:0}
.grouphead{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.grouphead input{flex:1;min-width:0}
.itemrow .clientflag{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--dim);white-space:nowrap;
}
.itemrow .clientflag input{flex:0 0 auto}

/* Чекбокс «рекомендуем» этапа-опции (Задача 5 фазы 3) — тот же приём, что
   у .clientflag выше, только вне .itemrow (строка с ним лежит прямо в
   .itemrow-main, не в списке .items). */
.itemrow-main .optflag{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--dim);white-space:nowrap;
}
.itemrow-main .optflag input{flex:0 0 auto}

/* Маршрут «Что дальше» (Задача 13 фазы 3 — не путать с «Задачей 13» фазы 2
   ниже, у неё то же число, но другая фаза): строка шага несёт заголовок,
   срок И текст разом, а обычный .itemrow — однострочный flex без переноса
   (.itemrow input{flex:1} тянет ЛЮБОЙ input внутри). .steprow остаётся
   .itemrow — иначе .additem/.rmitem её не найдут (static/admin.js ищет
   именно этот класс) — но переносит textarea текста на свою строку. */
.itemrow.steprow{flex-wrap:wrap}
.itemrow.steprow .steplen{flex:0 1 140px}
.itemrow.steprow textarea{flex:1 1 100%;min-width:0}

/* Панель «текст второго шага под план» (находка 2 финального обзора фазы 3).
   Своих правил у неё не было, и оба поля с подписями схлопывались в одну
   строку: .items — колонка, но внутри самой панели <span> и <label> идут
   строчными. Читалась она хуже некуда — а именно неразличимость и делала
   незаметной подмену шага, от которой теперь сторожит step_pos[]. Пунктир
   вместо сплошной рамки — панель принадлежит соседней строке сверху, а не
   стоит наравне с шагами. */
.steprow2note{
  display:flex;flex-direction:column;gap:6px;
  border:1px dashed var(--line2);border-radius:var(--r);
  padding:8px 10px;margin:0 0 2px;
}
.steprow2note label{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
}
.steprow2note label input{flex:1;min-width:0}

.addsec{display:flex;gap:10px}
.addsec select{flex:1}

/* ── элементы внутри секций-слотов (Задача 13) ────────────────────
   Этапы дорожной карты, лицензии, карточки «почему мы», цели — каждый
   элемент своя маленькая форма (adressуется slot+index, а не uid), плюс
   ряд с move/delete (и «в библиотеку» для этапов, только у админа). */
.slotitems{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
.itemblock{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  background:var(--card-on);
}
.itemform{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.itemform > .primary{align-self:flex-start}
.itemrow-main{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Название этапа не должно схлопываться: код, часы и вид блока съедают всю
   ширину узкой панели, и поле с min-width:0 ужималось в полоску, куда
   не помещалось даже «ТЗ». Даём ему читаемый минимум и разрешаем строке
   переноситься. */
.itemrow-main .grow{flex:1 1 180px;min-width:180px}
.slotitems input,.slotitems select,.slotitems textarea{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--tx);padding:8px 9px;font:inherit;
}
.slotitems textarea{resize:vertical}
.tools.itemtools{flex:0 0 auto;flex-direction:column;gap:4px}
.additem-form{
  border:1px dashed var(--line2);border-radius:var(--r);padding:10px 12px;
}
/* Раунд правок Задачи 13, находка 1: секции works_list/works/timeline
   смотрят в тот же слот stages, что и roadmap — полный блок правки
   рисуется только у первой из них по порядку документа, здесь — только
   короткая подсказка вместо повторного списка этапов и формы. */
.slotnote{
  margin:0 14px 14px;padding:8px 12px;font-size:13px;color:var(--dim);
  border:1px dashed var(--line2);border-radius:var(--r);
}

/* ── перетаскивание секций и загрузка картинок (Задача 14) ─────────── */
.grip{
  cursor:grab;color:var(--dim2);user-select:none;flex:0 0 auto;
  font-size:15px;line-height:1;
}
.grip:active{cursor:grabbing}

.uploadbox,.uploadfield{
  padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;
}
.uploadfield + .uploadfield{border-top:1px solid var(--line);padding-top:14px}
.uploadbox form[data-drop-upload],.uploadfield form[data-drop-upload]{margin:0}

.dropzone{
  border:1px dashed var(--line2);border-radius:var(--r);padding:14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.dropzone.dropping{border-color:var(--teal);background:var(--card-on)}
.dropzone .hint{color:var(--dim);font-size:12px}
.dropzone input[type=file]{
  color:var(--dim);font-size:12px;max-width:100%;
}

/* Логотип показываем на настоящем фоне обложки КП: тёмный логотип на
   белом поле формы выглядит прекрасно ровно до отправки клиенту, а на
   тёмной подложке «логотип пропал» ловится глазом сразу, на месте. */
.logopreview{
  background:#0A0C0F;padding:10px 14px;border-radius:var(--r);
  display:inline-flex;align-items:center;margin:0;
}
.figmedia.mini,.logopreview.mini{max-width:140px}
.figmedia.mini img,.logopreview.mini img{width:100%;height:auto;display:block}

/* ── пользователи (Задача 17) ─────────────────────────────────────── */
.u-table td{vertical-align:top;padding-top:8px;padding-bottom:8px}
.u-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;
}
.u-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:var(--card-on);border:1px solid var(--line2);color:var(--dim);
  font-size:13px;font-weight:600;
}
.u-form{display:flex;flex-direction:column;gap:6px;min-width:180px}
.u-form input,.u-form select{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--tx);padding:6px 8px;font:inherit;font-size:13px;
}
.u-form button{align-self:flex-start}

/* Три фото автора (Задача 10 фазы 3) — три формы .u-form подряд в одной
   ячейке, разделитель только МЕЖДУ ними (form + form — не задевает форму
   контактов или пароля в соседних ячейках той же строки). Превью — тот же
   .u-avatar, что у аватарки в первой колонке, но мельче и не круглое:
   кадр письма — портретный, а не квадратный для кружка. */
.u-photos{display:flex;flex-direction:column;gap:10px;min-width:180px}
.u-photos form + form{border-top:1px solid var(--line);padding-top:10px}
.u-photo-row{display:flex;align-items:center;gap:6px}
.u-photo-row .u-avatar{width:24px;height:24px;border-radius:4px}

/* ── справочник цен (Дима, 07.09: «сплошная стена») ─────────────── */
.cat-tools{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.cat-tools input{
  flex:0 1 420px;min-width:220px;padding:9px 12px;background:var(--bg);
  border:1px solid var(--line2);border-radius:var(--r);color:var(--tx);font-size:14px;
}
.cat-tools input:focus{outline:none;border-color:var(--dim)}
.cat-vendor{margin:0 0 36px}
.cat-vendor h2{font:600 18px/1.2 -apple-system,Segoe UI,Roboto,sans-serif;margin:0 0 12px}
.cat-vendor h2 .dim{font-weight:400;font-size:14px}
.cat-table{table-layout:fixed;margin:0 0 18px}
.cat-table th.num,.cat-table td.num{text-align:right}
/* Дима, 07.09: «первую строку закрепи при прокрутке» — липкая шапка таблицы на весь вендор. */
.cat-table thead{position:sticky;top:0;z-index:2}
.cat-table thead th{position:sticky;top:0;background:var(--bg);z-index:2;box-shadow:0 1px 0 var(--line2)}
/* Дима, 07.09: «названия разделов крупнее и выделить, пробелы между разделами» — заголовок группы
   как плашка: крупнее, с бирюзовой меткой слева и воздухом сверху; после последней строки группы — отступ. */
.cat-grouphead th{
  text-align:left;text-transform:none;letter-spacing:0;color:var(--tx);
  font:600 16px/1.25 -apple-system,Segoe UI,Roboto,sans-serif;
  padding:34px 10px 12px 18px;border-bottom:1px solid var(--line2);
  position:relative;
}
.cat-grouphead th::before{
  content:"";position:absolute;left:0;bottom:12px;width:4px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal),var(--violet));
}
.cat-grouphead th .dim{font-weight:400;font-size:13px;margin-left:6px}
.cat-table tbody.cat-rows tr:last-child td{padding-bottom:14px}
/* «заголовки тоже выровняй в ценах»: подписи числовых колонок в одну строку, по правому краю поля ввода
   (у поля внутренний отступ 8px + отступ ячейки 10px). */
.cat-table th.num{padding-right:18px}
/* Дима, 07.09: «заголовок по верхнему краю, в одну линию» — все подписи шапки без переносов, по верху. */
.cat-table thead th{vertical-align:top;white-space:nowrap;font-size:11px;letter-spacing:.02em;padding-top:2px}
/* Подпись шире колонки не уедет правее чисел: при переполнении текст в rtl-блоке вылезает влево. */
.cat-table thead th.num{direction:rtl}
.cat-table td{height:auto;padding:8px 10px;vertical-align:middle}
.cat-table tbody.cat-rows tr.cat-item.even td{background:rgba(255,255,255,.03)}
.cat-table tbody.cat-rows tr.cat-item:hover td{background:var(--card-on)}
.cat-title b{display:block;font-weight:500}
.cat-note{
  display:block;font-size:12px;line-height:1.35;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Задача 12: пометка «правлено руками» — в справочнике цен, в умолчаниях
   текстов и в библиотеках кейсов и команды. Без неё единственный способ узнать,
   приедет ли в строку новая цена при следующей выкладке, — лезть в базу. Цвет
   тот же, что у «опубликовано» (--teal): это не тревога, а «здесь хозяин
   человек, сид не тронет». Правила те же, что у .cat-note выше: длинный
   перечень полей режем многоточием, а не ломаем им ширину колонки. */
.cat-hand{
  display:block;font-size:12px;line-height:1.35;margin-top:3px;color:var(--teal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-table input{
  width:100%;box-sizing:border-box;padding:6px 8px;background:var(--bg);
  border:1px solid var(--line2);border-radius:var(--r);color:var(--tx);
  font-size:14px;text-align:right;font-variant-numeric:tabular-nums;
}
.cat-table input::placeholder{color:var(--dim)}
.cat-table input:focus{outline:none;border-color:var(--dim)}
.cat-act{text-align:right}
.cat-act form{margin:0}
.cat-act button.ghost{padding:6px 10px;font-size:13px}
.cat-table tr[hidden],.cat-table tbody[hidden],.cat-vendor[hidden]{display:none}

/* добавить / удалить позицию (Дима, 07.09): градиентная обводка и красная кнопка */
.btn-grad{
  display:inline-block;padding:9px 16px;border-radius:var(--r);cursor:pointer;
  border:1px solid transparent;color:var(--tx);font-size:14px;font-weight:500;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,#DC5BF2,#2AE8C6) border-box;
}
.btn-grad:hover{background:linear-gradient(var(--card-on),var(--card-on)) padding-box,linear-gradient(90deg,#DC5BF2,#2AE8C6) border-box}
.btn-danger{
  padding:6px 10px;border-radius:var(--r);cursor:pointer;font-size:13px;
  background:none;border:1px solid rgba(255,96,96,.55);color:#FF6B6B;
}
.btn-danger:hover{background:rgba(255,96,96,.12);border-color:#FF6B6B}
/* Действия в строке — как в Таймвебе (Дима, 07.09): иконки проявляются при наведении,
   в режиме правки видны всегда; карандаш становится крестиком «отменить», галочка «Сохранить»
   получает градиентную обводку. Формы в ячейке несут только скрытые поля. */
.cat-act{text-align:right;white-space:nowrap;padding-right:6px}
.cat-act form{display:none}
.rowact{display:inline-flex;gap:2px;opacity:1;transition:opacity .15s}
.a-table tr:hover .rowact,.cat-rows tr.editing .rowact,.rowact:focus-within{opacity:1}
.a-actions .rowact{margin-left:auto}
.a-actions form:empty{display:none}
a.ico{text-decoration:none;line-height:0}
/* внутри .a-actions у кнопок свой стиль (рамка, отступы, шрифт) — иконкам он не нужен */
.a-actions button.ico,.a-actions a.ico{padding:0;width:30px;height:30px;border:1px solid transparent;background:none;font-size:0;line-height:0}
.a-actions button.ico:hover,.a-actions a.ico:hover{color:var(--tx);background:var(--card);border-color:var(--line2)}
.a-actions button.ico-danger:hover{color:#FF6B6B;background:rgba(255,96,96,.12);border-color:rgba(255,96,96,.55)}
.a-table td.a-sum{white-space:nowrap}
.ico{
  width:30px;height:30px;padding:0;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico:hover{color:var(--tx);background:var(--card);border-color:var(--line2)}
.ico-danger:hover{color:#FF6B6B;background:rgba(255,96,96,.12);border-color:rgba(255,96,96,.55)}
.ico-save{color:var(--teal)}
.ico-edit .i-x{display:none}
tr.editing .ico-edit .i-pen{display:none}
tr.editing .ico-edit .i-x{display:block}
tr.editing .ico-save{
  color:var(--tx);border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(90deg,#DC5BF2,#2AE8C6) border-box;
}
/* Строка — текст; по «Редактировать» под ней раскрывается панель правки на всю ширину
   (Дима, 07.09: «чтобы был виден весь товар сразу в одном поле»). */
.cat-rows tr.cat-item.editing td{background:var(--card-on)}
.cat-rows tr.cat-editrow td{padding:0 0 16px;background:var(--card-on)}
.cat-rows tr.cat-editrow[hidden]{display:none}
.cat-editform{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px 14px;margin:0;padding:14px 16px 16px;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
}
.cat-editform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);margin:0;min-width:0}
.cat-editform label.wide{grid-column:1/-1}
.cat-editform input,.cat-editform select,.cat-editform textarea{
  width:100%;box-sizing:border-box;padding:7px 9px;background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r);color:var(--tx);font:inherit;font-size:14px;
}
.cat-editform input,.cat-editform textarea{text-align:left}
.cat-editform input[inputmode=numeric]{text-align:right}
.cat-editform textarea{resize:none;overflow:hidden;line-height:1.35;font-size:15px;min-height:36px}
.cat-editform input:focus,.cat-editform select:focus,.cat-editform textarea:focus{outline:none;border-color:var(--dim)}
.cat-editform .cat-addbtns{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:4px}
.cat-rows tr[id]{scroll-margin-top:56px}
.cat-addwrap{margin:6px 0 0}
.cat-addform{margin:14px 0 0}
.cat-addform[hidden]{display:none}

/* ── умолчания текстов, группы по блокам документа (Задача 11 фазы 3) ─── */
/* Поиск сверху — тот же .cat-tools, что у справочника цен (см. выше),
   разметку и приём не дублируем — только группы под ним другие: не строки
   в одной таблице, а свёрнутые details, по одному на блок документа. */
.defgroup{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin:0 0 10px;
}
.defgroup[hidden]{display:none}
.defgroup summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:12px 16px;user-select:none;font:600 15px/1.3 -apple-system,Segoe UI,Roboto,sans-serif;
}
.defgroup summary::-webkit-details-marker{display:none}
.defgroup .a-table{margin:0 0 4px}
.defgroup .a-table tr[hidden]{display:none}

/* ── галерея схем /admin/illustrations (Задача 14 фазы 3) ─────────────
   Карточка рисует РОВНО то, что увидит Клиент в блоке 02 (тот же viewBox
   и обводка currentColor, что в .oill из cp.css) — иначе выбор схемы «на
   глаз» показывал бы не ту картинку, что в итоге ляжет в документ. */
.ill-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.ill-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
}
.ill-card svg{width:100%;height:72px;overflow:visible;color:var(--dim2)}
.ill-card svg .a{stroke:var(--teal-deep)}
.ill-card svg .v{stroke:var(--violet-deep)}
.ill-card svg circle.a,.ill-card svg circle.v{fill:currentColor}
.ill-key{font:12px/1.3 var(--mono);color:var(--dim2)}

/* ── готовность КП к публикации ─────────────────────────────────────── */
.preflight{margin:12px 0 2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.preflight.ready{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.preflight.blocked{border-color:color-mix(in srgb,#c24d58 55%,var(--line))}
.preflight-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.preflight-head strong{font:700 13px/1 var(--mono);color:var(--teal-deep)}
.preflight p{margin:7px 0;color:var(--dim);font-size:13px;line-height:1.4}
.preflight ul{margin:8px 0;padding-left:19px;font-size:13px;line-height:1.45}
.preflight a{color:inherit;text-underline-offset:2px}.preflight-link{display:inline-block;margin-top:4px;color:var(--teal-deep)!important;font-size:12px}
.publish-confirm{display:flex;gap:7px;align-items:flex-start;max-width:230px;margin:0 0 8px;color:var(--dim);font-size:12px;line-height:1.3}
.treehead button:disabled{opacity:.45;cursor:not-allowed}
.dirty-indicator{padding:3px 7px;border-radius:var(--r);background:rgba(215,149,66,.14);color:#d79542;font-size:11px}.dirty-indicator[hidden]{display:none}