/* ══ Studio: композер, каталоги, інструменти ══════════════════════════════
 *
 * Ергономіка знята з Higgsfield Marketing Studio (розбір —
 * docs/research/2026-08-07_higgsfield_marketing_studio.md), вигляд наш:
 * бурштин замість салатового, фактура «Пульта» замість глянцю.
 *
 * Три правила, які тут тримаються скрізь:
 *   1. Форму несе ЗАЛИВКА (--fill-1/2/3), а не рамка. Рамки читаються дешево.
 *   2. Вкладена оболонка: зовнішня панель із малою заливкою, всередині —
 *      власний корпус із власним радіусом (r_внутр = r_зовн − padding).
 *   3. Герой — не заголовок, а число й дія. Ціна стоїть впритул до кнопки.
 *
 * Вантажиться ПЕРЕД skin.css, тому skin.css лишається останнім словом щодо
 * токенів форми — навмисно.
 */

/* ── Брусок ──────────────────────────────────────────────────────────────── */

/* 🛑 ОДНА КОЛОНКА, А НЕ `auto 1fr`. Знайдено вимірюванням 2026-09-05:
   `.cmpz` була сіткою на два стовпці під рейку формату зліва й корпус
   справа. Рейку сховали (`#stFormatGrid[hidden]`) — а елемент із
   `display:none` СІТКА ВИКИДАЄ, тобто корпус з'їхав у перший стовпець
   (`auto`), і другий (`1fr`) лишився порожнім назавжди.

   Виміряно на 1440px: панель 1134px, з них корпус 805px і 269px порожнечі
   праворуч. Саме її й видно на екрані як «справа велика частина пуста».
   Це не косметика: чверть найдорожчого екрана продукту нічого не робила. */
.cmpz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  padding: 10px;
  align-items: stretch;
  background: var(--panel);
  border-radius: var(--radius-lg);
}

/* Рейл формату переїхав на спільний `.ui-pick` (css/ui_kit.css): той самий
   контрол стоїть у Композері, у блоці соцмереж і тут, тож реалізація мусить
   бути одна. Лишається тільки те, що стосується саме цього місця. */
.cmpz-rail { align-self: flex-start; }
@media (max-width: 720px) { .cmpz-rail { width: 100%; } }

/* Корпус: те, у що людина пише й чим керує. */
.cmpz-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
  padding: 12px;
  background: var(--bg-soft);
  border-radius: calc(var(--radius-lg) - 6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* ── ПОРЯДОК НАМІРУ, А НЕ СІТКА 2×2 ────────────────────────────────────
   Сесія 2: «Сцена йде згори вниз порядком наміру: що зняти → хто в кадрі
   → як зняти → скільки коштує → зняти; п'ять кроків більше не важать
   однаково».

   Було дві сітки по дві колонки одна під одною:
       [ що зняти ][ хто в кадрі ]
       [ як зняти ][ скільки коштує · зняти ]
   Око читає це зигзагом — праворуч, ліворуч, праворуч, — і кроки, які
   мусять іти один за одним, стоять пліч-о-пліч, тобто важать однаково.

   Тепер один стовпець. Це дорожче на висоту (виміряно: панель 294px ->
   ~400px), і ця ціна свідома: Studio щойно схудло з 9390px до 3408, тож
   сотня пікселів на зрозумілий порядок — вигідний обмін. */
.cmpz-top { display: flex; flex-direction: column; gap: var(--sp-12); align-items: stretch; }

.cmpz-write { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; padding-top: 2px; }

.cmpz-input {
  width: 100%;
  height: 62px;
  /* resize:none навмисно: ручка розтягування в кутку поля читалась як
     артефакт форми посеред складеного бруска, а висоти й так вистачає на
     два рядки — довший бриф іде в «Побажання» розширених налаштувань. */
  resize: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-15)/1.5 var(--sans);
  letter-spacing: -.008em;
}
.cmpz-input::placeholder { color: var(--text-mute); }
.cmpz-input:focus { outline: none; }
.cmpz-hint { min-height: 14px; font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }

/* Слоти — один іменований набір, а не три кнопки, що висять у порожнечі. */
.cmpz-cast { display: flex; flex-direction: column; gap: 7px; }
.cmpz-cast-head {
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-mute);
  padding-left: 2px;
}

/* Персонаж без фото-референсів — попередження до запуску, не після рендеру. */
.cmpz-cast-warn {
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  max-width: 340px;
  font: 500 var(--fs-11)/1.45 var(--sans); color: var(--warn);
  background: rgba(245,185,66,.08); border: 1px solid rgba(245,185,66,.28);
  border-radius: var(--radius-sm); padding: 8px 10px;
}

/* ── Слоти ───────────────────────────────────────────────────────────────── */

.cmpz-slots { display: flex; gap: var(--sp-8); }
.cmpz-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.cmpz-slot-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--fill-1);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmpz-slot:hover .cmpz-slot-face { background: var(--fill-2); }
.cmpz-slot-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmpz-slot-face .svg-ic svg { width: 20px; height: 20px; }
.cmpz-slot-plus { font: 300 22px/1 var(--sans); color: var(--text-mute); }
.cmpz-slot.filled .cmpz-slot-face { box-shadow: inset 0 0 0 1.5px var(--accent-glow); }
/* Товар — єдине обов'язкове поле. Позначаємо його ДО кліку по «Створити»,
   а не помилкою після. */
.cmpz-slot.required .cmpz-slot-face {
  box-shadow: inset 0 0 0 1.5px var(--accent-edge);
  background: var(--accent-wash-1);
}
.cmpz-slot.required .cmpz-slot-plus { color: var(--accent); }
.cmpz-slot-label {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 var(--fs-11)/1.2 var(--sans);
  color: var(--text-mute);
  letter-spacing: -.01em;
}
.cmpz-slot.filled .cmpz-slot-label { color: var(--text-dim); }

/* ── Рядок керування ─────────────────────────────────────────────────────── */

/* Один рядок: чіпи ліворуч, ціна й дія праворуч, усе на спільній осі.
   Два окремі рядки (як було) читались як два незв'язані блоки — саме на це
   й вказало «вирівняй їх». Wrap лишається аварійним виходом на вузькому
   екрані, і тоді ціна з кнопкою просто з'їжджають під чіпи, не втрачаючи
   правого краю. */
/* Сітка, а не flex-wrap. У flex із переносом елемент, що не влазить, їде на
   НАСТУПНИЙ рядок цілком — тому ціна з кнопкою зривалась униз, щойно назви
   заготовок ставали довшими за «Стиль/Хук/Сцена». У двох колонках чіпи
   переносяться ВСЕРЕДИНІ своєї колонки, а дія лишається праворуч на тій
   самій висоті. Це і є «вирівняй їх». */
.cmpz-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-12);
  padding-top: 11px;
  border-top: 1px solid var(--border-soft);
}
.cmpz-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  min-width: 0;
}

.cmpz-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  /* Довга назва заготовки («Таблиця порівняння») розпихала рядок так, що
     шестерня зривалась на другий рядок сама-одна й читалась як збій. Ріжемо
     мітку — повна назва лишається в title і в самій модалці.

     🛑 Було 158px і цього перестало вистачати, щойно чип став казати
     «Підпис: Значення» замість самого значення: обрізалось саме ЗНАЧЕННЯ
     («Стиль: будь-я…»), тобто та половина, заради якої на чип і дивляться.
     212px вистачає на «Структура: соціальний доказ» без обрізання; чотири
     чипи по 212 плюс шестерня вкладаються в 940px рядка. */
  max-width: 212px;
  padding: 7px 11px;
  border: 0;
  background: var(--fill-1);
  color: var(--text-dim);
  border-radius: 999px;
  font: 600 var(--fs-12)/1 var(--sans);
  letter-spacing: -.012em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmpz-chip:hover { background: var(--fill-2); color: var(--text); }
/* 🛑 Ці капсули стоять у нижньому рядку чату, тобто на КОЖНОМУ розділі
   застосунку й на кожній ширині. При 12.5 px тексту й 7 px відступу вони
   дають 28 px висоти: миша влучає, палець — з другого разу. Курсора на
   тач-пристрої немає взагалі, тож там ростуть до 40 px, а на десктопі
   щільність лишається тією, під яку рисувався рядок. */
@media (hover: none), (max-width: 900px) {
  .cmpz-chip { padding: 12px 14px; }
}
.cmpz-chip-ic { display: inline-flex; width: 14px; height: 14px; color: var(--text-mute); }
.cmpz-chip-ic svg { width: 14px; height: 14px; }
.cmpz-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpz-chip-chev { font-size: var(--fs-10); opacity: .5; }
.cmpz-chip.picked {
  background: var(--accent-wash-2);
  color: var(--accent-hi);
}
.cmpz-chip.picked .cmpz-chip-ic { color: var(--accent); }

/* Обов'язкове, поки не заповнене, — так само як слот товару. */
.cmpz-chip.required {
  background: var(--accent-wash-1);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.cmpz-chip.required .cmpz-chip-ic { color: var(--accent); }

.cmpz-chip-gear { position: relative; padding: 7px 10px; }
.cmpz-chip-gear.on { background: var(--fill-3); color: var(--text); }
.cmpz-chip-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  padding: 0 3px;
  background: var(--accent);
  color: var(--on-brand);
  border-radius: 999px;
  font: 700 var(--fs-10)/15px var(--sans);
  text-align: center;
}

/* Ціна впритул до дії. Це не декор: рішення «запускати чи ні» ухвалюється в
   цій точці, і число має бути тут, а не в підвалі сторінки. */
/* `flex-end`, а не `center`: ціна тепер колонка з чотирьох рядків, і по
   центру кнопка опинялась би навпроти середини рахунку. Вирівнюємо по
   низу — кнопка стоїть на одній лінії з рядком «лишиться». */
/* ── ЧИП ТИПУ КАДРУ ──────────────────────────────────────────────────────
   Це той самий випадайник SocialOS.Select, вбудований у чип. Дві правки
   вигляду, обидві не косметичні:

   1) Опис («Ролик 9:16 з озвученням і субтитрами») сховано В ЧИПІ, але не
      в меню. У меню він і потрібен — там обирають, і другий поверх рядка
      пояснює, за що беруть той чи інший тип. У чипі ж він перетворював
      контрол на речення завширшки пів ряду.
   2) Підпис «Тип:» стоїть окремим вузлом ПОЗА випадайником, бо Select
      перемальовує свій вміст цілком — і напис, покладений усередину, зник
      би при першому ж виборі. Заразом його бачить перекладач: атрибути
      i18n не читає, текстові вузли читає. */
.cmpz-chip-fmt{ padding-left: 11px; max-width: none; }
.cmpz-chip-lbl{
  font-style: normal; font-weight: 500; color: var(--text-mute);
  white-space: nowrap;
}
.cmpz-chip-sel .ui-sel-btn{
  height: auto; min-height: 0; padding: 0; border: 0; background: none;
  gap: 5px; color: inherit; font: inherit;
}
.cmpz-chip-sel .ui-sel-cur .h{ display: none; }
.cmpz-chip-sel .ui-sel-cur .n{ font: 600 var(--fs-12)/1 var(--sans); color: var(--text); }
.cmpz-chip-sel .ui-sel-chev{ font-size: var(--fs-10); color: var(--text-mute); }

/* Підпис усередині чипа тихіший за значення: разом вони один предмет, і
   якщо набрати їх однаково, око читає два слова замість пари «поле —
   вибір». Різниця робиться вагою й кольором, не кеглем: різний кегль у
   32px-контролі дав би дві базові лінії. */
.cmpz-chip-txt em{
  font-style: normal; font-weight: 500; color: var(--text-mute);
  margin-right: 2px;
}
.cmpz-chip.picked .cmpz-chip-txt{ font-weight: 600; }

/* Останній крок — ціна й дія — лежить на всю ширину під рештою, а не
   збоку від чипів: це підсумок того, що вибрано вище, і читатись мусить
   після нього, а не паралельно з ним. */
.cmpz-go {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-14); width: 100%;
  padding-top: var(--sp-10); border-top: 1px solid var(--border-soft);
}
/* 🛑 `margin-left: auto` звідси прибрано. Він тиснув блок до правого краю,
   що було правильно, поки блок стояв ДРУГОЮ КОЛОНКОЮ поруч із чипами. У
   стовпці той самий рядок займає всю ширину, і притиснутий праворуч він
   лишав half-рядка порожнім, а ціна з дією злипались у кут. Тепер ціна
   ліворуч, дія праворуч — рядок читається «скільки коштує → зняти». */



/* 🛑 Своє `margin-left: auto` має ще й сам блок ціни (`.st-cost-inline`
   у core/06_studio.css) — і поки воно є, `space-between` вище нічого не
   робить: автовідступ з'їдає весь вільний простір ДО того, як розкладка
   встигає його розділити. Знімаємо лише в цьому місці: той самий блок
   стоїть ще в підвалі Studio, де притиснутий праворуч він доречний.

   Заразом розвертаємо вміст: у правому куті розкладка ціни читалась
   справа наліво, а ліворуч їй природніше рівнятись по лівому краю. */
.cmpz-go > .st-cost-inline{ margin-left: 0; align-items: flex-start; }
.cmpz-go > .st-cost-inline .cmpz-cost{ align-items: flex-start; }
.cmpz-cost { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); line-height: 1.15; }
.cmpz-cost-line { display: flex; align-items: baseline; gap: 7px; }
.cmpz-cost .st-cost-inline-est { font: 700 16px/1 var(--sans); color: var(--text); letter-spacing: -.02em; }
/* Наша закупівельна ціна — тихіша за кредити й видима лише власнику. */
.cmpz-cost-usd { font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute); }
.cmpz-cost .st-cost-inline-note { font: 500 var(--fs-10)/1.25 var(--sans); color: var(--text-mute); max-width: 190px; text-align: right; }

/* Подвійний селектор навмисно: skin.css вантажиться ПІСЛЯ цього файлу і
   задає .btn { border-radius: var(--radius-sm) }. За рівної ваги перемагає
   він, тож головна дія композера лишалась прямокутною. Це єдині три місця,
   де ми свідомо сперечаємось зі скіном — і тільки заради форми кнопки-дії. */
.cmpz .cmpz-go-btn { padding: 11px 20px; font-size:  var(--fs-14); border-radius: 999px; }
.cmpz-err { margin: 8px 2px 0; }

/* ── Шухляда налаштувань ─────────────────────────────────────────────────── */

/* #cmpzDrawer, а не .cmpz-drawer: шухляда має ще й клас .panel, а skin.css
   вантажиться ПІСЛЯ цього файлу й задає `.panel { padding: 18px 20px }`. За
   рівної ваги селекторів перемагав він, і мій відступ просто не діяв. Id
   (1,0,0) знімає це питання назавжди. */
/* 18px 20px — рівно як у композера над нею: обидві панелі стоять одна під
   одною, і різниця у 2px читалась як зсув усієї деки. */
/* ── ОДИН КОРПУС, ДВІ КОЛОНКИ (2026-09-05) ───────────────────────────────
   Було дві біди одразу, і вони пов'язані.

   1. Налаштування жили в ОКРЕМІЙ панелі, яка ВИПАДАЛА по шестерні: дві
      рамки, два фони, стрибок висоти — а керує все це одним кадром.
   2. Композер стояв вузьким стовпцем, і права половина широкого екрана
      була просто порожня.

   Одне лікує друге. Налаштування переїжджають у другу колонку того самого
   корпусу: панель одна, нічого не випадає, і порожнє місце зайняте тим,
   що там і мало бути. Шестерні більше немає — нічого відкривати. */
.cmpz-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--sp-16);
  align-items: start;
}

/* Ліва колонка — усе, що було раніше: письмо, каст, чипи, ціна, кнопка. */
.cmpz-main { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }

/* Права — налаштування. Вертикальна лінія замість другої рамки: колонки
   треба РОЗДІЛИТИ, а не обвести кожну. */
#cmpzDrawer {
  margin: 0;
  padding: 0 0 0 var(--sp-16);
  border: 0;
  border-left: 1px solid var(--border-soft);
  border-radius: 0;
  background: none;
  box-shadow: none;
  align-self: stretch;
}
.cmpz-deck-head {
  margin-bottom: var(--sp-10);
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-mute);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Одна колонка полів: у 300px їх двоє не поставиш, а розтягнуті на всю
   ширину випадайники читаються рівно так само. */
.cmpz-deck-grid { display: grid; gap: var(--sp-12); }
.cmpz-deck-grid > .st-settings-grid { display: contents; }

/* 🛑 ПОРІГ 1180, А НЕ 980. Виміряно 2026-09-05 на живих ширинах:
   при вікні 1100px колонки виходили 338px на письмо і 360px на
   налаштування — тобто дека ставала ШИРШОЮ за поле, у яке пишуть бриф.
   Це не тіснота, це перевернута ієрархія: головна дія екрана виглядала
   меншою за свої налаштування.

   Число виведене, а не підібране: бічна панель плюс відступи з'їдають
   близько 400px, деці треба 340, письму — не менше 420, плюс проміжок.
   400+340+420+16 = 1176. Нижче цього дека йде вниз, а не вужчає. */
@media (max-width: 1180px) {
  .cmpz-bar { grid-template-columns: minmax(0, 1fr); }
  #cmpzDrawer {
    padding: var(--sp-12) 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
  .cmpz-deck-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: var(--sp-10) var(--sp-12);
  }
}
.cmpz-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-mute);
}
.cmpz-drawer-close {
  border: 0;
  background: var(--fill-1);
  color: var(--text-mute);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size:  var(--fs-11);
}
.cmpz-drawer-close:hover { background: var(--fill-2); color: var(--text); }

/* ── Поля всередині шухляди ──────────────────────────────────────────────
   Усе тут scoped на #cmpzDrawer навмисно: ті самі класи (.st-field,
   .modal-label, .st-aspect-btn) обслуговують ще й Автопілот і Батч, і
   глобальна правка поїхала б у розділи, яких ми не чіпаємо. */

/* 170px, а не 230: у вузькій колонці мінімум у 230 не влізав, і замість
   переносу поле просто вилазило за край — підпис обрізало посеред слова
   («РЕФЕРЕНС-ВІДЕО КОН»). Тепер сітка чесно спадає до однієї колонки. */
#cmpzDrawer .st-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
}
#cmpzDrawer .st-field { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
#cmpzDrawer .st-field-wide { grid-column: 1 / -1; }

#cmpzDrawer .modal-label {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  min-width: 0;
  /* Переносимо, а не ріжемо: обрізаний підпис налаштування не зменшує
     висоту, зате робить поле безіменним. */
  overflow-wrap: anywhere;
  font: 700 var(--fs-10)/1.35 var(--sans);
  color: var(--text-mute);
}
#cmpzDrawer .modal-label .svg-ic svg { width: 12px; height: 12px; }
#cmpzDrawer .st-opt-tag {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-wash-2);
  color: var(--accent-hi);
  font: 700 8.5px/1.4 var(--sans);
}

#cmpzDrawer .st-aspect-grid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#cmpzDrawer .st-aspect-btn {
  padding: 7px 12px;
  border: 0;
  background: var(--fill-1);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  font: 600 var(--fs-12)/1 var(--sans);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#cmpzDrawer .st-aspect-btn:hover:not(:disabled) { background: var(--fill-2); color: var(--text); }
#cmpzDrawer .st-aspect-btn.active {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi);
}
#cmpzDrawer .st-aspect-btn:disabled { opacity: .45; cursor: default; }
#cmpzDrawer .st-field-note { font: 400 var(--fs-10)/1.3 var(--sans); color: var(--text-mute); align-self: center; }

#cmpzDrawer .st-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  padding: 3px;
  background: var(--fill-1);
  border-radius: var(--radius-sm);
}
#cmpzDrawer .st-count-btn {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-xs);
  font: 600 var(--fs-15)/1 var(--sans);
  cursor: pointer;
}
#cmpzDrawer .st-count-btn:hover { background: var(--fill-2); color: var(--text); }
#cmpzDrawer .st-count-val { min-width: 26px; text-align: center; font: 700 var(--fs-13)/1 var(--sans); color: var(--text); }

#cmpzDrawer .lib-name-input,
#cmpzDrawer .modal-textarea,
#cmpzDrawer input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  border: 0;
  background: var(--fill-1);
  color: var(--text);
  border-radius: var(--radius-sm);
  font: 400 var(--fs-12)/1.45 var(--sans);
}
#cmpzDrawer .lib-name-input:focus,
#cmpzDrawer .modal-textarea:focus,
#cmpzDrawer input[type="text"]:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
#cmpzDrawer .cmp-net-hint { margin: 0; font: 400 var(--fs-10)/1.4 var(--sans); color: var(--text-mute); }

/* Смуги «Розширених»: заголовок-мітка, а не рамка навколо групи. */
/* Смуги головної деки — той самий об'єкт, що й смуги «Розширених»: заголовок
   групи + сітка полів. Спільний вигляд навмисний: людина вчиться читати цю
   форму один раз. */
.cmpz-deck-strip:first-of-type { padding-top: 0; border-top: 0; }
#cmpzDrawer .st-adv-strip-head .st-opt-tag { margin-left: 7px; }

/* «Розширені» — така сама смуга, як ВИГЛЯД/ТЕКСТ/ЗВУК, просто клікабельна.
   Пігулкою із власним внутрішнім відступом вона починалась на 38px правіше
   за решту деки, і одна колонка перетворювалась на дві сходинки. Тепер у
   всієї деки РІВНО ОДИН лівий край. */
/* 🛑 ЗАЛИВКА БЕЗ БОКОВОГО ВІДСТУПУ — саме це й читалось як «зламаний
   відступ». `ux_studio.css` і `skin.css` малюють .st-advanced коробкою з
   фоном (`background: var(--fill-1)`), а тут вона стоїть із нульовим
   горизонтальним padding — тобто текст приклеєний до самого краю заливки з
   обох боків. Вихід не «додати padding» (це знову зсунуло б групу правіше за
   решту деки), а зняти коробку: всередині шухляди «Розширені» — така сама
   смуга, як ВИГЛЯД/ТЕКСТ/ЗВУК. */
#cmpzDrawer .st-advanced {
  margin: 0;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: none;
  overflow: visible;
}
#cmpzDrawer .st-advanced > summary:hover { background: none; }
#cmpzDrawer .st-advanced[open] > summary { border-bottom: 0; }
#cmpzDrawer .st-advanced-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
  list-style: none;
}
#cmpzDrawer .st-advanced-summary::-webkit-details-marker { display: none; }
#cmpzDrawer .st-advanced-summary:hover .lbl { color: var(--accent-hi); }
/* Піктограма повзунків прибрана: вона зсувала підпис на 26px правіше за
   ВИГЛЯД/ТЕКСТ/ЗВУК — тобто рівно та сама сходинка, тільки менша. Роль
   «розгортається» несе шеврон праворуч, а сама піктограма вже стоїть на
   чіпі-шестерні, який цю шухляду й відкриває. */
#cmpzDrawer .st-advanced-summary > .ic { display: none; }
#cmpzDrawer .st-advanced-summary .lbl {
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--accent);
  transition: color var(--t-fast) var(--ease);
}
#cmpzDrawer .st-advanced-summary .sub { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }
#cmpzDrawer .st-advanced-summary-text { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; }
#cmpzDrawer .st-advanced-summary .chev { margin-left: auto; color: var(--text-mute); font-size:  var(--fs-11); transition: transform var(--t-fast) var(--ease); }
#cmpzDrawer .st-advanced[open] .st-advanced-summary .chev { transform: rotate(180deg); }
#cmpzDrawer .st-advanced-badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-brand);
  font: 700 var(--fs-10)/1.5 var(--sans);
}
#cmpzDrawer .st-advanced-card { margin-top: 4px; padding: 0; background: none; box-shadow: none; border: 0; }
#cmpzDrawer .st-adv-strip { padding: 14px 0; border-top: 1px solid var(--border-soft); }
#cmpzDrawer .st-adv-strip:first-child { padding-top: 10px; border-top: 0; }
#cmpzDrawer .st-adv-strip-head {
  margin-bottom: 10px;
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--accent);
}
#cmpzDrawer .st-adv-reset-row { padding-top: 14px; border-top: 1px solid var(--border-soft); }
#cmpzDrawer .st-adv-reset-btn {
  padding: 7px 13px;
  border: 0;
  background: var(--fill-1);
  color: var(--text-dim);
  border-radius: 999px;
  font: 600 var(--fs-11)/1 var(--sans);
  cursor: pointer;
}
#cmpzDrawer .st-adv-reset-btn:hover { background: var(--fill-2); color: var(--text); }

/* Випадайник переїхав у css/ui_kit.css (`.ui-sel*`) разом із логікою в
   js/ui_select.js: тепер це спільний компонент усього застосунку, а не
   власність Studio. Правки вигляду — там. */

/* ── Прогін ──────────────────────────────────────────────────────────────
   Продовження композера, а не окремий екран. Тонка бурштинова лінія ліворуч
   зшиває всі три панелі прогону в один об'єкт і відділяє його від того, що
   стоїть НАД ним (сам композер) і ПІД ним (вітрина форматів). */

.cmpz-run {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-edge-hi);
}
.cmpz-run-head {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmpz-run-title { font: 700 var(--fs-14)/1 var(--sans); color: var(--text); letter-spacing: -.02em; }

/* Крокомір тут — індикатор, а не навігація: клікати нема куди, бо нікуди й
   не переходимо. Тому це компактна стрічка, а не чотири широкі вкладки. */
.cmpz-run-head .st-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
}
.cmpz-run-head .st-step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  /* Базовий .st-step у style.css — комірка сітки з обрізанням тексту: він
     писався під крокомір на всю ширину. Тут смуга компактна, тож ширину
     знімаємо повністю, інакше «Генерація» перетворюється на «Генера…». */
  min-width: 0;
  max-width: none;
  width: auto;
  flex: 0 0 auto;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  padding: 5px 11px;
  background: var(--fill-1);
  border: 0;
  border-radius: 999px;
  font: 600 var(--fs-11)/1 var(--sans);
  color: var(--text-mute);
  letter-spacing: -.01em;
}
.cmpz-run-head .st-step > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
.cmpz-run-head .st-step-num {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--fill-3);
  color: var(--text-mute);
  font: 700 var(--fs-10)/1 var(--sans);
}
.cmpz-run-head .st-step.done { color: var(--text-dim); }
.cmpz-run-head .st-step.done .st-step-num { background: var(--accent-edge); color: var(--accent-hi); }
.cmpz-run-head .st-step.active {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}
.cmpz-run-head .st-step.active .st-step-num { background: var(--accent); color: var(--on-brand); }

.cmpz-run .st-panel { margin-top: 0; }

/* Кнопка дії, поки прогін живий. Не сірий «disabled»: він читається як
   «зламалось». Читається як «зайнято». */
.cmpz .cmpz-go-btn.is-busy {
  background: var(--fill-2);
  color: var(--text-mute);
  box-shadow: none;
  cursor: default;
}

/* ── Інструменти-входи ───────────────────────────────────────────────────── */

/* ── БІЧНІ ШЛЯХИ ────────────────────────────────────────────────────────
   Було: сітка з двох карток на всю ширину, кожна з кольоровою іконкою в
   градієнті, назвою 13px/700, поясненням і стрілкою. Дві такі картки
   поспіль важать більше, ніж головна дія над ними, — а це бічні шляхи.

   Стало: один рядок тексту. Кнопки лишились кнопками (клавіатура,
   фокус, aria), але перестали виглядати як вхід у розділ.

   🛑 Фіолетовий градієнт іконки `tone-ref` (#7c5cff → #b14bd8) зник
   разом із карткою. Це був єдиний фіолетовий у Studio й другий колір
   бренду, який ніде більше не траплявся. */
.cmpz-tools{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-12);
}
.cmpz-tools-lab{ font: 400 var(--fs-12)/1.4 var(--sans); color: var(--text-mute) }
.cmpz-tool{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 3px 2px; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cmpz-tool:hover{ color: var(--text); border-bottom-color: var(--text-mute) }
.cmpz-tool:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px }
.cmpz-tool-name{ font: inherit; color: inherit }
.cmpz-tool-go{ color: var(--text-mute); font-size: var(--fs-11) }

/* ── Галерея форматів ────────────────────────────────────────────────────── */

.cmpz-gallery { margin-top: 22px; }
.cmpz-gallery-head { display: flex; align-items: center; gap: var(--sp-14); flex-wrap: wrap; margin-bottom: 12px; }
.cmpz-gallery-title { font: 700 var(--fs-15)/1 var(--sans); color: var(--text); letter-spacing: -.02em; }

/* ── ЩІЛЬНІСТЬ ВІТРИНИ ──────────────────────────────────────────────────
   Виміряно на живій сторінці: сітка займала 8426px із 9390px усього
   розділу — 90% Studio під каталогом, який гортають раз на кілька
   сесій. Причина арифметична: колонка 300px при `aspect-ratio: 3/4` дає
   превʼю 400px, дві колонки на 885px ширини — тринадцять рядів.

   Тут стояло пояснення, чому саме 300, а не 268: при вужчій колонці
   назву з'їдала кнопка «Спробувати». Воно було правильне, поки кнопка
   стояла в підвалі картки поряд із назвою. Вона більше там не стоїть —
   пішла на превʼю (див. `.cmpz-card-try` нижче), і місце під назву
   звільнилось. Тому обмеження знято разом із його причиною, а не всупереч
   їй: 196px дає чотири колонки замість двох. Число підібрано не на
   око — виміряно ширину робочої зони (865px) і поділено з урахуванням
   проміжку: 4×196 + 3×10 = 814, вміщається; 212 давало лише три. */
.cmpz-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--sp-10);
}
.cmpz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--panel);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform var(--t-med) var(--ease);
}
.cmpz-card:hover { background: var(--panel-2); transform: translateY(-2px); }
.cmpz-card:hover .cat-prev::after { opacity: 1; }
.cmpz-card:active { transform: translateY(0); }
.cmpz-card.picked { box-shadow: inset 0 0 0 1.5px var(--accent-glow); }

/* Галочка обраного — у кутку самої картки, а не всередині превʼю: превʼю
   колись стане відео, і мітка стану має пережити цю підміну. */
.cmpz-card-mark {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-brand);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cmpz-card.picked .cmpz-card-mark { opacity: 1; transform: scale(1); }
.cmpz-card-mark svg { width: 12px; height: 12px; }

.cmpz-card-foot { display: flex; align-items: center; gap: var(--sp-10); padding: 11px 4px 3px; }
.cmpz-card-ic {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--fill-2);
  border-radius: var(--radius-sm);
  /* 🛑 ЗНАЧОК НЕЙТРАЛЬНИЙ, А НЕ БУРШТИНОВИЙ. Тут стояв --accent, і на
     екрані виходило 26 бурштинових значків — по одному на кожну картку
     вітрини. Акцент, який стоїть на всьому, не позначає нічого: він
     перестає бути наголосом і стає тлом.

     Бурштин у вітрині лишається рівно один — на ОБРАНІЙ картці (нижче,
     `.cmpz-card.picked`). Тоді погляд одразу знаходить те, що вже
     вибрано, замість читати 26 однакових спалахів. */
  color: var(--text-mute);
}
.cmpz-card.picked .cmpz-card-ic{ color: var(--accent); background: var(--accent-wash-2) }
.cmpz-card-ic svg { width: 14px; height: 14px; }
.cmpz-card-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cmpz-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cmpz-card-name {
  font: 700 var(--fs-12)/1.2 var(--sans);
  color: var(--text);
  letter-spacing: -.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmpz-card-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--fill-2);
  color: var(--text-mute);
  font: 700 8.5px/1.45 var(--sans);
}
.cmpz-card-desc {
  font: 400 var(--fs-11)/1.35 var(--sans);
  color: var(--text-mute);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── КНОПКА «СПРОБУВАТИ» ПЕРЕЇХАЛА НА ПРЕВʼЮ ────────────────────────────
   Вона стояла в підвалі картки поруч із назвою й забирала половину
   рядка — саме через неї колонка мусила бути 300px завширшки, інакше
   назва оберталась на «Ця штука мене вр…». Тобто одна кнопка диктувала
   ширину всієї вітрини, а вітрина — висоту всього розділу.

   Тепер вона лежить поверх превʼю в нижньому куті й проявляється на
   наведенні. Картка й так уся клікабельна (`card.onclick`), тож кнопка
   тут — не єдиний шлях, а підпис до дії.

   🛑 Але вона лишається СПРАВЖНЬОЮ кнопкою й не ховається від клавіатури:
   `opacity` замість `display:none`, і `:focus-visible` показує її так
   само, як наведення. Ефект, який видно лише мишею, для клавіатури
   означав би зниклу дію. */
.cmpz-card .cmpz-card-try {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmpz-card:hover .cmpz-card-try,
.cmpz-card .cmpz-card-try:focus-visible,
.cmpz-card.picked .cmpz-card-try {
  opacity: 1; transform: none;
}
@media (hover: none) {
  /* На дотику наведення не існує — кнопка мусить бути видима одразу. */
  .cmpz-card .cmpz-card-try { opacity: 1; transform: none; }
}

.cmpz-card .cmpz-card-try {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  flex: 0 0 auto;
  padding: 5px 5px 5px 13px;
  border: 0;
  background: var(--fill-2);
  color: var(--text-dim);
  border-radius: 999px;
  font: 600 var(--fs-11)/1 var(--sans);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmpz-card:hover .cmpz-card-try { background: var(--accent); color: var(--on-brand); }
.cmpz-card.picked .cmpz-card-try { background: var(--accent-wash-3); color: var(--accent-hi); }
.cmpz-card-try .a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .14);
  font-size:  var(--fs-11);
  transition: transform var(--t-med) var(--ease);
}
.cmpz-card:hover .cmpz-card-try .a { transform: translateX(2px); }

/* ── Превʼю ──────────────────────────────────────────────────────────────
   Відео в нас іще нема. Порожній прямокутник читається як «зламалось», тому
   плитка показує формат кадру і те, ЩО в ролику відбувається. Місце під
   <video> уже готове — див. CatalogPicker.previewHtml. */

/* Три поверхи в потоці: шапка (формат + місця під ролики) → опис → підпис.
   Жоден не позиціонується абсолютом, тому налізти один на одного вони
   фізично не можуть. min-height замість aspect-ratio: жорстка пропорція
   різала опис, щойно колонка ставала вужчою. */
.cat-prev {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-height: 168px;
  padding: 12px 14px 11px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--accent-wash-2) 0%, transparent 58%),
    var(--fill-1);
  border-radius: calc(var(--radius) - 4px);
}
/* М'яке підсвічування на наведенні картки — вмикається з .cmpz-card:hover. */
.cat-prev::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 110%, var(--accent-wash-3) 0%, transparent 65%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
/* Ролики вертикальні, але коробка під них — 3:4, а не 9:16. При ширині
   колонки 210px повна вертикаль дає 475px висоти, і на екран влазить три
   картки: каталог із 26 позицій перетворюється на стіну. Кадр ріжеться
   зверху й знизу (object-fit: cover) — у вертикальному кадрі дія завжди в
   центрі, а повну пропорцію показує розгортання. */
.cat-prev.has-video { min-height: 0; padding: 0; aspect-ratio: 3 / 4; }
.cat-prev.has-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-prev.has-video .cat-prev-top,
.cat-prev.has-video .cat-prev-foot { display: none; }
/* Бейдж у текстовому превʼю лежить у потоці, всередині .cat-prev-top. Тут
   .cat-prev-top немає, а сама коробка — flex-колонка: без абсолюта бейдж
   став би другим поверхом під відео й розтягнув пропорцію. */
/* Кнопки поверх ролика: звук і розгортання. Проявляються на наведенні, але
   на закріпленій картці стоять завжди — інакше єдиний спосіб вимкнути звук
   зникав би разом із курсором. */
.cat-prev-acts {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cat-card:hover .cat-prev-acts,
.cmpz-card:hover .cat-prev-acts,
.cat-prev:hover .cat-prev-acts,
.cat-prev.is-pinned .cat-prev-acts { opacity: 1; transform: none; }
/* На дотику наведення не існує — сховані за hover кнопки означали б, що з
   телефона ролик не послухати й не розгорнути взагалі. */
@media (hover: none) {
  .cat-prev-acts { opacity: 1; transform: none; }
}
.cat-prev-act {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .52);
  color: #fff;
  cursor: pointer;
  font-size:  var(--fs-12);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .45);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cat-prev-act:hover { background: rgba(0, 0, 0, .72); transform: scale(1.07); }
.cat-prev-act:active { transform: scale(.94); }
.cat-prev.is-pinned .cat-prev-act[data-act="sound"] {
  background: var(--accent-glow-hi);
  color: #16110a;
}
.cat-prev.is-pinned { box-shadow: inset 0 0 0 2px var(--accent-glow-hi); }

/* Розгорнутий ролик. Вертикальне відео на весь екран не розтягуємо — воно
   від того тільки мутніє; висота обмежена, ширину задає пропорція. */
.cat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(8px);
  animation: uiViewIn var(--m-base, 160ms) var(--m-ease, ease) both;
}
.cat-lightbox[hidden] { display: none; }
.cat-lightbox video {
  /* Ширину задаємо, а не тільки обмежуємо: власна ширина файлу — 360px, і з
     самим max-width ролик лишався б розміром зі свій вихідний кадр. */
  width: min(92vw, 420px);
  height: auto;
  max-height: min(78vh, 720px);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
  background: #000;
}

.cat-prev-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }

/* Три вузькі рамки — стільки роликів стоїть на картці у джерела, і саме
   туди вони й ляжуть. Розмічене місце читається як «ще не знято», порожній
   прямокутник читався б як «зламалось». */
.cat-prev-frames { display: flex; gap: 3px; opacity: .45; flex: 0 0 auto; }
.cat-prev-frames i {
  display: block;
  width: 8px;
  height: 14px;
  border-radius: 2.5px;
  background: var(--accent-edge-hi);
}
.cat-prev-frames i:nth-child(2) { height: 18px; margin-top: -2px; }

.cat-prev-badge {
  padding: 3px 7px;
  background: rgba(0, 0, 0, .28);
  color: var(--text-dim);
  border-radius: var(--radius-xs);
  font: 700 var(--fs-10)/1.4 var(--sans);
}
/* Займає весь вільний простір між шапкою й підписом — саме тому опису нема
   куди «вилізти»: більше за цю коробку він просто не показується. */
.cat-prev-mid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.cat-prev-play {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-wash-3);
  color: var(--accent);
}
.cat-prev-play svg { width: 12px; height: 12px; }
.cat-prev-text {
  font: 500 var(--fs-12)/1.45 var(--sans);
  color: var(--text-dim);
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.cat-prev-foot {
  flex: 0 0 auto;
  font: 400 var(--fs-10)/1.3 var(--sans);
  color: var(--text-mute);
  opacity: .7;
}

/* ── Модалка каталогу ────────────────────────────────────────────────────── */

.cat-overlay { align-items: flex-start; padding: 4vh 16px; overflow-y: auto; }
.cat-modal {
  width: min(1080px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.cat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.cat-topbar-title { font: 700 var(--fs-13)/1 var(--sans); color: var(--text-dim); letter-spacing: -.01em; }
.cat-close, .ent-close {
  border: 0;
  background: var(--fill-1);
  color: var(--text-mute);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size:  var(--fs-12);
}
.cat-close:hover, .ent-close:hover { background: var(--fill-2); color: var(--text); }

/* Герой-смуга. У них тут колаж із відео; у нас — типографіка й бурштиновий
   градієнт, бо чесних кадрів для колажу ще нема. */
.cat-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-20);
  align-items: center;
  padding: 22px 24px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--accent-wash-3) 0%, var(--accent-wash-1) 55%, transparent 100%);
}
.cat-hero-tagline {
  font: 800 25px/1.08 var(--sans);
  color: var(--text);
  letter-spacing: -.03em;
}
.cat-hero-sub { margin-top: 7px; max-width: 54ch; font: 400 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); }
.cat-hero-art { display: flex; gap: 7px; align-items: flex-end; }
.cat-hero-card {
  display: block;
  width: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--accent-edge-hi), var(--accent-wash-1));
}
.cat-hero-card.c1 { height: 52px; }
.cat-hero-card.c2 { height: 74px; }
.cat-hero-card.c3 { height: 60px; }

.cat-controls {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
}
.cat-tabs, .ent-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.cat-tab {
  padding: 6px 13px;
  border: 0;
  background: var(--fill-1);
  color: var(--text-dim);
  border-radius: 999px;
  font: 600 var(--fs-12)/1 var(--sans);
  letter-spacing: -.012em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cat-tab:hover { background: var(--fill-2); }
.cat-tab.active { background: var(--fill-3); color: var(--text); }

.cat-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 210px;
  min-width: 0;
  padding: 0 11px;
  background: var(--fill-1);
  border-radius: 999px;
  color: var(--text-mute);
}
.cat-search svg { width: 14px; height: 14px; }
.cat-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-12)/1 var(--sans);
}
.cat-search input:focus { outline: none; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: var(--sp-10);
  max-height: 60vh;
  padding: 14px 16px;
  overflow-y: auto;
}
.cat-card {
  display: flex;
  flex-direction: column;
  padding: 7px;
  border: 0;
  text-align: left;
  background: var(--bg-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cat-card:hover { background: var(--panel-2); }
.cat-card.selected { box-shadow: inset 0 0 0 1.5px var(--accent-glow); }
.cat-card-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 3px 3px; }
.cat-card-head { display: flex; align-items: center; gap: var(--sp-6); }
.cat-card-name { font: 700 var(--fs-12)/1.2 var(--sans); color: var(--text); letter-spacing: -.012em; }
.cat-card-tag {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--fill-2);
  color: var(--text-mute);
  font: 600 9px/1.35 var(--sans);
}
.cat-card-tag.t-stunt, .cat-card-tag.t-unrealistic {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}
.cat-card-desc { font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-dim); }
.cat-card-fits { font: 400 var(--fs-10)/1.35 var(--sans); color: var(--text-mute); font-style: italic; }

.cat-foot { display: flex; justify-content: flex-end; padding: 11px 16px; border-top: 1px solid var(--border-soft); }

/* ── Модалка сутностей ───────────────────────────────────────────────────── */

.ent-overlay, .tool-overlay { align-items: flex-start; padding: 5vh 16px; overflow-y: auto; }
.ent-modal {
  width: min(900px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.ent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.ent-title { font: 700 var(--fs-15)/1 var(--sans); color: var(--text); letter-spacing: -.02em; }
.ent-tabs { padding: 0 16px 12px; }
.ent-body { max-height: 58vh; padding: 4px 16px 14px; overflow-y: auto; }
/* Підвал ПРИКЛЕЄНИЙ до низу модалки, а не їде разом зі списком. Сорок
   аватарів під сіткою персонажів зробили тіло довгим, і «Готово» опинялось
   аж за ними: щоб закрити вибір, доводилось прокрутити весь каталог. */
.ent-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: 12px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border-soft);
  /* Тінь угору — щоб було видно, що під підвалом ще є вміст. */
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .8);
}

/* Рядок швидкого створення — під сіткою, у ширину поля вводу плюс кнопка. */
.st-quick-create {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 10px 0 2px;
}
.st-quick-input { flex: 1 1 auto; min-width: 0; }

/* ── Модалка інструмента ─────────────────────────────────────────────────── */

.tool-modal {
  width: min(880px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.tool-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 0; }
.tool-left { display: flex; flex-direction: column; gap: 11px; padding: 4px 20px 22px; }
.tool-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--on-brand);
}
.tool-ic svg { width: 19px; height: 19px; }
.tool-ic.tone-link { background: var(--grad-brand); }
.tool-ic.tone-ref { background: linear-gradient(135deg, #7c5cff 0%, #b14bd8 100%); color: #fff; }
.tool-tagline { font: 800 21px/1.15 var(--sans); color: var(--text); letter-spacing: -.028em;}
.tool-sub { font: 400 var(--fs-12)/1.55 var(--sans); color: var(--text-dim); }
.tool-field { display: flex; flex-direction: column; gap: 5px; }
.tool-left .tool-go { margin-top: 2px; align-self: flex-start; border-radius: 999px; padding: 10px 20px; }
.tool-err { margin: 0; }

.tool-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: 22px 20px;
  background: var(--bg-soft);
}
.tool-fact { display: flex; flex-direction: column; gap: 3px; }
.tool-fact-k {
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-mute);
}
.tool-fact-v { font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); }

.tool-result { display: flex; flex-direction: column; gap: var(--sp-10); padding-top: 4px; }
.tool-res-head { font: 700 var(--fs-11)/1.3 var(--sans); color: var(--accent-hi); }
.tool-res-note { font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.tool-shots { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.tool-shot { display: block; width: 54px; height: 54px; overflow: hidden; background: var(--fill-1); border-radius: var(--radius-sm); }
.tool-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cmpz-tools { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-right { padding: 16px 20px 20px; }
}

@media (max-width: 720px) {
  /* Рейл формату лягає горизонтально над полем: на вузькому екрані
     вертикальна колонка з'їдає третину ширини, у якій і так тісно. */
  .cmpz { grid-template-columns: 1fr; }
  .cmpz-top { grid-template-columns: 1fr; }
  .cmpz-slots { justify-content: flex-start; }
  /* На вузькому дія отримує власний рядок на всю ширину: тиснути її треба
     великим пальцем, а не цілитись у кут. */
  .cmpz-bottom { grid-template-columns: minmax(0, 1fr); }
  .cmpz-go { justify-content: space-between; }
  .cmpz .cmpz-go-btn { flex: 1; justify-content: center; }
  .cat-hero { grid-template-columns: 1fr; padding: 18px 16px; }
  .cat-hero-art { display: none; }
  .cat-hero-tagline { font-size: 20px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 50vh; }
  .cmpz-gallery-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ЩІЛЬНІСТЬ ДЕКИ Й БЛОК СОЦМЕРЕЖ
   ══════════════════════════════════════════════════════════════════════════

   Дека виросла до семи груп, і на дефолтних відступах відкрита шухляда
   займала півтора екрана: щоб дійти від «Кадру» до «Звуку», доводилось
   гортати. А гортати налаштування — це щоразу губити з очей те, що вже
   змінив. Тому нижче все стиснуто до щільності приладової панелі: смуги
   тонші, сітка вужча, поля тісніші. Читабельність тримають не відступи, а
   заголовки груп і волосяні лінії між ними. */
#cmpzDrawer .st-adv-strip { padding: 11px 0; }
#cmpzDrawer .st-adv-strip:first-child { padding-top: 8px; }
#cmpzDrawer .st-adv-strip + .st-adv-strip { margin-top: 0; }
#cmpzDrawer .cmpz-deck-strip + .cmpz-deck-strip { margin-top: 0; }
#cmpzDrawer .st-adv-strip-head { margin-bottom: 8px; }
#cmpzDrawer .st-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px 14px;
}
#cmpzDrawer .st-field { gap: 5px; }
#cmpzDrawer .modal-label { font-size: 9px; }
#cmpzDrawer .st-advanced { padding-top: 9px; }
#cmpzDrawer .st-advanced-summary { padding: 5px 0; }
#cmpzDrawer .st-adv-reset-row { padding-top: 11px; }

/* 🛑 Підпис «ПЛАТФОРМИ» під заголовком «КУДИ ПУБЛІКУЄМО» — це те саме
   слово двічі поспіль. Один із них зайвий, і зайвий саме нижній: заголовок
   групи вже сказав усе. */
#cmpzDrawer #stProvidersRowLbl { display: none; }

/* Блок соцмереж — той самий рейл плиток, що й формат: правила живуть у
   css/ui_kit.css (`.ui-pick > .net-toggle`), клас додано в розмітці. Тут
   лишається лише те, що стосується саме шухляди. */
#cmpzDrawer #stProvidersRow { --pick-w: 84px; max-width: 100%; flex-wrap: wrap; }

/* Повзунок тривалості стоїть у сітці нарівні з полями — але йому потрібна
   вся ширина комірки, інакше шкала виходить коротшою за підпис. */
#cmpzDrawer .ui-range { width: 100%; }
#cmpzDrawer .ui-range-val { font-size: 19px; }

/* Макет — статика, і коробка під нього квадратна: джерело 1:1, а вертикаль
   3:4 різала б композицію саме там, де вона й живе — по краях кадру. */
.cat-prev.has-video.is-still { aspect-ratio: 1 / 1; }
.cat-prev.has-video.is-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-lightbox img {
  width: min(92vw, 560px);
  height: auto;
  max-height: min(78vh, 720px);
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
}
.cat-lightbox img[hidden], .cat-lightbox video[hidden] { display: none; }

/* Чіп, чий вибір перебитий сильнішою сутністю (сцена проти локації з
   Бібліотеки). Не ховаємо: зникла заготовка читалась би як збій, а тут
   треба показати саме те, що вибір ЗРОБЛЕНО і його перекрито. */
.cmpz-chip.muted { opacity: .5; }
.cmpz-chip.muted .cmpz-chip-txt { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ── ДВІ ОСІ ФІЛЬТРА ВІТРИНИ ────────────────────────────────────────────
   Кожна вісь підписана, бо без підпису два ряди однакових пігулок
   читаються як один довгий ряд, у якому «Без обличчя» стоїть поруч із
   «Схоже на рекламу» без жодного зв'язку. Підпис коштує одне слово й
   робить із ряду питання. */
.cat-axis{ display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap }
.cat-axis + .cat-axis{ margin-left: var(--sp-14) }
.cat-axis-lab{
  font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute);
  margin-right: var(--sp-2);
}
@media (max-width: 720px){
  /* На вузькому дві осі стають двома рядками — інакше друга переповзає
     впереміш із першою, і підписи перестають щось означати. */
  .cat-axis{ display: flex; width: 100% }
  .cat-axis + .cat-axis{ margin-left: 0; margin-top: var(--sp-6) }
}

/* ── КЕГЛЬ ТАМ, ДЕ ЙОГО НЕ ЗАДАЛИ ───────────────────────────────────────
   Слоти «В кадрі» й перемикач вітрини — це <button>, і без власного
   `font` вони набирались дефолтом браузера 13.3333px/400. Виміряно: сім
   таких елементів у Studio, найбільше в застосунку. */
.cmpz-slot{ font: 600 var(--fs-11)/1.25 var(--sans) }
.cmpz-slot-face{ font: 400 var(--fs-14)/1 var(--sans) }
.cmpz-gallery-toggle{ font: 600 var(--fs-13)/1.2 var(--sans) }