/* ══════════════════════════════════════════════════════════════════════════
   РОЗКОЧУВАННЯ — переведення наявних розділів на мову ui_kit
   ══════════════════════════════════════════════════════════════════════════

   Studio переробили першим, і в ньому з'явилась мова, якої не було більше
   ніде: дека замість коробок, свій випадайник, щільна вітрина, один рядок
   дії з ціною. Решта вкладок лишалась у старому шарі — тобто продукт
   розмовляв двома мовами, і перехід між розділами читався як перехід між
   двома різними програмами.

   Чому окремий файл, а не правки у восьми ux_*.css: рішення тут — про
   ВИГЛЯД, а не про поведінку, і їх треба вміти відкотити одним рядком у
   index.html, як і skin.css. Файли розділів лишаються базою.

   Вантажиться ПІСЛЯ ui_kit.css і skin.css. Селектори прив'язані до
   `section.view[data-view=…]` там, де клас спільний із іншими розділами.

   🛑 Правило, яке тут скрізь: **бурштин — це «сюди тиснути»**. Один суцільний
   бурштиновий елемент на екран. Другорядні дії — заливка без кольору, м'які
   акценти — бурштин на 14% під бурштиновим текстом. Коли кожна кнопка
   бурштинова, жодна з них не головна.

   🛑 І друге: **медіа-областей мало й дрібно**. Своїх роликів у нас поки
   одиниці, тож великі порожні кадри лише підкреслюють порожнечу. Дороге
   враження несуть кольорові площини — вони не потребують жодного відео.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── КОМПОЗЕР ─────────────────────────────────────────────────────────────
   Розмітка тепер та сама, що в композері Studio, і класи ті самі (`cmpz-*`),
   тож увесь вигляд приходить із studio_composer.css. Два екрани, які роблять
   по суті одне («опиши, що має вийти, і натисни одну кнопку»), не мають
   виглядати як два різні застосунки — а спільні класи роблять розходження
   між ними неможливим у принципі.

   Тут лишається тільки те, чого в Studio немає. */

/* Поле тексту тут ГЕРОЙ екрана (у Studio — лише короткий опис задуму), тож
   воно вище й має власну заливку. */
.cmpz .cmp-textarea {
  min-height: 168px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--fill-1);
  resize: vertical;
}
.cmpz .cmp-textarea:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.cmpz .cmp-under { display: flex; align-items: baseline; gap: var(--sp-10); }
.cmpz .cmp-under .cmp-tabs-hint { flex: 1 1 auto; min-width: 0; }
.cmpz .cmp-counter { position: static; flex: 0 0 auto; }
.cmpz .cmp-tabs { margin: 0 0 2px; }
.cmpz-cast .cmp-nets { flex-wrap: wrap; max-width: 200px; }

/* Чип-перемикач: та сама пігулка, але з галочкою всередині. Позначка
   AI-контенту — вимога закону, а не налаштування, тож вона стоїть на видноті
   в рядку чипів, а не в шухляді. */
.cmpz-chip-toggle { cursor: pointer; user-select: none; }
.cmpz-chip-toggle input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: var(--accent-solid);
  margin: 0;
}
.cmpz-chip-toggle:has(input:checked) {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}

/* Шухляди — той самий прийом, що в Studio. */
.cmpz-chip.on { background: var(--accent-wash-3); color: var(--accent-hi); }
.cmpz-chip.on .cmpz-chip-chev { transform: rotate(180deg); }
.cmpz-chip-chev { transition: transform var(--m-base, 160ms) var(--m-ease, ease); }

/* Рядок дії: дві тихі дії й одна головна. Підказка стану не має права
   переносити рядок — вона стоїть у тій самій смузі, що й кнопки. */
.cmpz-go .cmp-valid-hint {
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 400 var(--fs-11)/1.3 var(--sans);
  color: var(--text-mute);
}

/* 🛑 Картку AI-асистента фарбував ГРАДІЄНТ INSTAGRAM (`--ig-2-rgb` +
   `--li-soft-rgb`) — чужий бренд стояв на нашій головній творчій дії.
   Замінено власним переливом; рамку знято, форму тримає заливка. */
.cmp-ai-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 10px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(74% 120% at 6% 0%, rgba(var(--hue-amber), .13), transparent 100%),
    radial-gradient(70% 120% at 100% 100%, rgba(var(--hue-rose), .10), transparent 100%),
    var(--fill-1);
}
.cmp-ai-card .ca-assist-row { gap: var(--sp-8); margin-bottom: 10px; }
.cmp-ai-card .ca-assist-input {
  flex: 1 1 260px;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--fill-1);
}
.cmp-ai-card .ca-assist-input:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.cmp-ai-card .ui-sel { flex: 0 0 150px; }

/* Мʼякий акцент: дія головна ДЛЯ ЦІЄЇ шухляди, але не головна на екрані —
   суцільний бурштин лишається за «Опублікувати». */
#cmpAssistDraftBtn.btn-primary {
  background: var(--accent-wash-3);
  background-image: none;
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
#cmpAssistDraftBtn.btn-primary:hover:not(:disabled) {
  background: var(--accent-edge);
  transform: none;
}

.cmp-media-block { margin-top: 10px; padding: 14px; border-radius: var(--radius); background: var(--fill-1); }
.cmp-media-block .cmp-media-actions { margin-bottom: 0; }
.cmp-li-format { margin-top: 14px; }

/* Підказки — однаковий тихий голос, а не три різні. */
.cmp-tabs-hint, .cmp-media-hint, .cmp-net-hint, .cmp-hint {
  font: 400 var(--fs-10)/1.45 var(--sans);
  color: var(--text-mute);
}

@media (max-width: 900px) {
  .cmpz-cast .cmp-nets { max-width: none; }
}

/* ── ВІТРИНИ: БІБЛІОТЕКА Й ГАЛЕРЕЯ ────────────────────────────────────────
   ВИМІРЯНО: у Higgsfield на ширині 800px стрічка матеріалів тримає ЧОТИРИ
   колонки, і кожна плитка щось показує. У нас на 900px стояли ДВІ плитки по
   245px, з піктограмою 38px посеред квадратної порожнечі. Тобто на тій самій
   площі вони показують у чотири рази більше, а ми — нічого.

   Щільність тут не про естетику: вітрина існує, щоб ОКОМ знайти потрібне, а
   для цього треба бачити багато варіантів одночасно. І окремо важливо тепер,
   коли свого відео в нас одиниці: багато ДРІБНИХ областей виглядають як
   набір, одна велика порожня — як недороблений застосунок. */
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--sp-12); }
.gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-12); }
@media (max-width: 640px) {
  .lib-grid, .gal-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--sp-10); }
}
@media (max-width: 380px) {
  .lib-grid, .gal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Картка — заливка й радіус, без рамки. Рамка на кожній картці малює сітку
   з коробок; форму тримає сама плитка. */
.lp-card, .gal-item.gp-card {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.lp-card:hover, .gal-item.gp-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: none;
}
.lp-thumb, .gp-thumb {
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.lp-card:hover .lp-thumb,
.gal-item.gp-card:hover .gp-thumb { box-shadow: inset 0 0 0 1px var(--accent-edge-hi); }
.lp-body, .gp-body { padding: 8px 2px 0; }

/* Заглушка бібліотеки: кольоровий перелив замість сірої порожнечі.
   Розмітку дає library.js (`.ui-tile-ph` усередині `.lib-thumb`). */
.lib-thumb-ph.ui-tile-ph { font-size: inherit; opacity: 1; }
.lib-thumb-ph.ui-tile-ph .svg-ic svg { width: 20px; height: 20px; }

/* Відтінок бере плитка за порядком — п'ять кроків, тож сусідні ніколи не
   збігаються, а сітка заглушок читається як набір, а не як прогалина. */
.lib-grid > *:nth-child(5n + 1) { --hue: var(--hue-amber);  --hue2: var(--hue-rose); }
.lib-grid > *:nth-child(5n + 2) { --hue: var(--hue-cyan);   --hue2: var(--hue-violet); }
.lib-grid > *:nth-child(5n + 3) { --hue: var(--hue-violet); --hue2: var(--hue-rose); }
.lib-grid > *:nth-child(5n + 4) { --hue: var(--hue-green);  --hue2: var(--hue-cyan); }
.lib-grid > *:nth-child(5n + 5) { --hue: var(--hue-rose);   --hue2: var(--hue-amber); }

/* 🛑 Назва у ДВА рядки, а не один із трьома крапками. Назви товарів і
   персонажів стабільно довші за колонку, і обрізання посеред слова робить
   вітрину нечитабельною рівно там, де по ній шукають. */
.lp-name, .gp-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font: 600 var(--fs-12)/1.35 var(--sans);
  letter-spacing: -.012em;
}
.lp-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font: 400 var(--fs-10)/1.4 var(--sans);
  color: var(--text-mute);
}
.lp-meta, .gp-meta { font: 400 var(--fs-10)/1.3 var(--sans); color: var(--text-dim); }

/* Чипи на плитці — дрібніші: на 158px картці колишні 4px/9px з'їдали чверть
   ширини кадру. */
.lp-type-chip, .gp-kind, .lp-media-chip {
  padding: 3px 7px;
  font-size:  var(--fs-10);
  gap: var(--sp-4);
}

/* Панель тек/фільтрів над вітриною — один перемикач, а не ряд однакових
   кнопок, де активна відрізняється лише кольором.
   🛑 Ціль — саме група чипів (.gal-kinds), а НЕ обгортка .gal-filters: у ній
   лежить ще й поле пошуку, і пігулка навколо всього рядка малювала коробку
   в коробці. */
.gal-kinds, #cmpPickTabs {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-1);
  width: max-content;
}
.gal-kinds > .chip, #cmpPickTabs > .chip {
  border: 0;
  background: transparent;
  border-radius: 999px;
}
.gal-kinds > .chip.active, #cmpPickTabs > .chip.active {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}
/* Рядок фільтрів — просто рядок: поле пошуку тягнеться, перемикач праворуч
   від нього. Власного фону в нього немає. */
.gal-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
  background: none;
  border: 0;
  padding: 0;
}
.gal-search {
  flex: 1 1 220px;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--fill-1);
}
.gal-search:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

/* ── НАЛАШТУВАННЯ: підключення ────────────────────────────────────────────
   Було: чотири коробки з рамкою, у кожній суцільна бурштинова кнопка на всю
   ширину. Чотири однакові «головні дії» на одному екрані — це нуль головних
   дій: око не має за що зачепитись, а бурштин перестає означати «сюди
   тиснути». Стало: рядок на провайдера — піктограма, назва, тихий чіп
   стану, вторинна кнопка праворуч. Бурштин лишається за реально
   незворотними діями. */
#setProviders.conn-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
/* flex-direction: row задано ЯВНО. Базове правило робить картку колонкою, а
   я перевизначив лише display — успадкований `column` лишався й розкладав
   рядок у три поверхи. Успадкована половина правила — найтихіший спосіб
   зламати розкладку: виглядає, ніби твій селектор не спрацював. */
.prov-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  transition: background var(--t-fast) var(--ease);
}
.prov-card:hover { background: var(--fill-1); transform: none; box-shadow: none; }
.prov-card .pc-top {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin: 0;
}
.prov-card .pc-name { flex: 0 1 auto; font: 600 var(--fs-13)/1.3 var(--sans); letter-spacing: -.012em; }
.prov-card .pc-actions { margin-left: auto; flex: 0 0 auto; padding: 0; display: flex; gap: var(--sp-6); }
.prov-card .pc-actions .btn { width: auto; }
.prov-card .pc-ic { flex: 0 0 auto; }

/* 🛑 «Не підключено» було рожевим (badge-danger). Рожевий у нас не
   означає нічого — це залишок чужої палітри, і він же кричить про
   НЕПОЛАДКУ там, де просто ще не дійшли руки. Стан «ще не зроблено» —
   тихий сірий чіп, стан «зламано» лишається червоним. */
.prov-card .badge {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  font: 600 var(--fs-10)/1.5 var(--sans);
  letter-spacing: -.006em;
  text-transform: none;
}
.prov-card .badge-danger { background: var(--fill-1); color: var(--text-dim); }
/* Жорстко заданий зелений #5fd99a пережив би заміну токена --ok,
   тому прибирається окремо: колір, вписаний числом, не слухає
   жодного рішення про палітру. */
.prov-card .badge-ok { background: var(--fill-1); color: var(--text-dim); }

/* Кнопка підключення — вторинна: дія важлива, але не єдина на екрані. */
.prov-card .pc-connect.btn-primary {
  background: var(--fill-2);
  color: var(--text);
  box-shadow: none;
}
.prov-card .pc-connect.btn-primary:hover {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}

/* Картки сервісів — заливка замість рамки, як усе інше. */
.svc-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--fill-1);
  box-shadow: none;
}
.svc-card:hover { transform: none; box-shadow: none; border-color: transparent; }

/* Рядок «видати ключ»: поле тягнеться, випадайник фіксований, дія
   праворуч — той самий порядок, що й скрізь. */
.set-actions { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.set-actions > .inp { height: 36px; border: 0; border-radius: var(--radius-sm); background: var(--fill-1); }
.set-actions > #keyLabel { flex: 1 1 240px; min-width: 0; }
.set-actions > .ui-sel { flex: 0 0 220px; }
.set-actions > .ui-sel + .btn { margin-left: auto; }

/* ── ОГЛЯД ────────────────────────────────────────────────────────────────
   Розділ уже стояв на правильній ідеї («герой — число»), але заголовки
   всередині сторінки були звичайним жирним текстом — тобто те саме поняття
   («група») мало три різні вигляди в трьох розділах. Тут воно стає таким
   самим, як у деці Studio. */
/* ── 🛑 ЗАГОЛОВОК СЕКЦІЇ — ЗАГОЛОВОК, А НЕ АКЦЕНТ ────────────────────────
   П'ять правил у цьому файлі задають вигляд «назва секції»: .ov-row-head h2,
   .bl-card-head h3, .shead, .brand-card-title, .info-group-title. Усі були
   «700 10px бурштином», і кожен коментар поруч пояснював, що це «та сама
   смуга, що в деці» — конвенція трималась свідомо.

   Вона суперечила іншому правилу застосунку, записаному в ui_kit.css:
   бурштин належить ДВОМ речам — ціні й головній дії, і не більше ніж по
   одній на екран. Секцій на сторінці буває багато. Виміряно бурштинових
   підписів на екран: Менеджер 6, Бренд 4, Галерея 2, Аналітика 2 — правило
   порушувалось на восьми розділах із вісімнадцяти, і порушував його не
   недогляд, а сам рецепт.

   Друга біда того ж рецепта — розмір. 10px там, де текст під заголовком
   13px: назва секції була ДРІБНІШОЮ за те, що вона називає. Ієрархії це не
   давало жодної, лише колір, який нічого не значив.

   Тепер назву секції несуть вага й колір тексту, а не барва: 13px/700
   --text над 13px/400 --text-dim читається як заголовок з першого погляду.
   Бурштин звільнився й знову означає рівно одне.

   🛑 .shead серед них — базове правило, яке для ЗАГОЛОВКА СТОРІНКИ
   перебивається окремими селекторами нижче (21px). Після цієї правки
   заголовки сторінок звірено прогоном по всіх 18 розділах. */
.ov-row-head h2 {
  font: 700 var(--fs-13)/1.25 var(--sans);
  color: var(--text);
  letter-spacing: -.01em;
}
.ov-row-head { gap: var(--sp-8); align-items: center; }
.ov-row-head .n { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }
.ov-row-head a { font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute); cursor: pointer; }
.ov-row-head a:hover { color: var(--accent-hi); }

/* Привітання на кольоровій площині. 🛑 Це саме те місце, де «дорого»
   робиться БЕЗ жодного медіа: перелив, волосяна сітка й одне велике слово.
   Своїх роликів у нас поки одиниці, тож будувати перше враження на
   відеогерої означало б будувати його на порожньому кадрі. */
.ov-head {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 160% at 4% 0%, rgba(var(--hue-amber), .17), transparent 100%),
    radial-gradient(60% 150% at 96% 100%, rgba(var(--hue-rose), .11), transparent 100%),
    var(--panel);
}
.ov-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 0 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 0 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
}
.ov-head > * { position: relative; z-index: 1; }

/* Смуга показників: розділювачі-волосинки замість трьох окремих коробок. */
.ov-stats { gap: 0; }
.ov-stat { padding: 2px 20px; border-left: 1px solid var(--border-soft); }
.ov-stat:first-child { padding-left: 0; border-left: 0; }

/* ── ЧИСЛОВІ РОЗДІЛИ: Підписка, Собівартість, Аналітика, Активність ───────
   Скрізь та сама пара помилок: кожен показник узятий у рамку (екран
   читається як таблиця у формі), а групи однакових чипів-перемикачів
   виглядають як просто кнопки поспіль. */
.tiles > .tile, .card.bl-card, .an-card, .act-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--fill-1);
  box-shadow: none;
}
.tiles > .tile:hover, .card.bl-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.tl-lbl {
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-dim);
}
.tl-val { margin: 9px 0 6px; font: 300 30px/1 var(--sans); letter-spacing: -.03em; color: var(--text); }
.tl-sub { font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.bl-big { font: 300 40px/1 var(--sans); letter-spacing: -.03em; }
/* Переклад кредитів у результат — під самим числом, тим самим тихим
   голосом, що й решта пояснень. */
.bl-buys {
  margin: 6px 0 10px;
  font: 500 var(--fs-11)/1.4 var(--sans);
  color: var(--accent-hi);
}

/* Заголовки карток у Підписці — така сама смуга, як усюди. */
.bl-card-head h3, .bl-card h3 {
  font: 700 var(--fs-13)/1.25 var(--sans);
  color: var(--text);
  letter-spacing: -.01em;
}

/* Групи чипів-перемикачів — один сегментований контрол. */
.cst-periods, .an-range, .act-filters, .ana-chart-chips, .rs-tabs,
.po-filters, #cmpPreviewTabs, .cmp-pv-tabs {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-1);
  width: max-content;
}
.cst-periods > .chip, .an-range > .chip, .act-filters > .chip,
.ana-chart-chips > .chip, .rs-tabs > .chip, .po-filters > .chip,
#cmpPreviewTabs > .chip, .cmp-pv-tabs > .chip {
  border: 0;
  background: transparent;
  border-radius: 999px;
}
.cst-periods > .chip.active, .an-range > .chip.active, .act-filters > .chip.active,
.ana-chart-chips > .chip.active, .rs-tabs > .chip.active, .po-filters > .chip.active,
#cmpPreviewTabs > .chip.active, .cmp-pv-tabs > .chip.active {
  /* 🛑 Було бурштинове тло плюс бурштиновий напис — у ВОСЬМИ групах
     одразу: періоди в Грошах, діапазон Аналітики, фільтри дій, чипи
     графіка, вкладки Досліджень, фільтри Опублікованого й дві групи
     прев'ю Композера. Тобто на екрані з такою групою правило «один
     бурштин» було порушене завжди, ще до того, як на ньому з'явиться
     хоч одна кнопка з ціною.

     Закон один на всі перемикачі продукту: ВИБІР позначається
     яскравістю, ДІЯ — кольором. «7 днів» замість «30 днів» нічого не
     витрачає й нікуди не веде, тож кольору не заслуговує. */
  background: var(--fill-3);
  color: var(--text);
}

/* ── ЗАГОЛОВКИ СЕКЦІЙ ─────────────────────────────────────────────────────
   `.shead` обслуговує ДВА різні рівні одночасно: назву сторінки («Аналітика»)
   і назву секції всередині неї («Спільна статистика», «Динаміка»). Виглядали
   вони однаково, тож сторінка читалась як список рівноправних блоків без
   голови. Studio й Огляд тим часом уже позначають групу бурштиновим капсом.

   Тут рівні розведено: перший `.shead` у розділі лишається назвою сторінки,
   решта стають такими самими смугами-заголовками, як у деці.
   🛑 `:first-child`, а не `:first-of-type`: у частині шаблонів перед
   заголовком стоїть прихований div (банер, попередження), і `first-of-type`
   у такому разі помилявся б рівно на тих сторінках, де є що ховати. Тому
   перелічено всі три обгортки сторінки, а розмір першого заголовка окремо
   перевіряється прогоном по всіх 18 розділах. */
.shead {
  font: 700 var(--fs-13)/1.25 var(--sans);
  color: var(--text);
  letter-spacing: -.01em;
}
.shead > .n {
  font: 400 var(--fs-11)/1.3 var(--sans);
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: -.006em;
}
/* Перелік обгорток зміряно по всіх 18 розділах, а не вгадано. Два випадки
   довелось дописати окремо: `.cal-head`/`.ib-page` — власні обгортки
   сторінки, а в «Дослідженні» перед заголовком стоїть `.sr-only` для
   зчитувача екрана, тому `:first-child` там не спрацьовує в принципі.
   «Налаштування» свідомо лишились БЕЗ назви сторінки: там п'ять рівноправних
   секцій, а де ти є — каже підсвічений пункт навігації. */
section.view > .shead:first-child,
section.view > :is(.page-mid, .page-wide, .page-narrow, .gal-wrap, .ib-page) > .shead:first-child,
section.view > :is(.page-mid, .page-wide, .page-narrow) > .sr-only + .shead,
/* 🛑 `.cal-head-l` тут з'явився разом із запасом черги: заголовок
   переїхав на рівень глибше, і правило перестало його бачити — назва
   сторінки мовчки стала 10-піксельною бурштиновою міткою. Урок той
   самий, що з `:last-child` на «Одній годині»: додаючи обгортку, треба
   перевірити, хто на неї спирався. */
section.view > .cal-page > .cal-head > :is(.shead, .cal-head-l > .shead):first-child,
section.view > .cal-page > .cal-head > .cal-head-l > .shead,
/* «Інформація» ховає назву сторінки на два рівні глибше — у власному
   герої. Доти вона малювалась базовим правилом, тобто 10-піксельною
   бурштиновою міткою: та сама хвороба, що вже двічі траплялась із
   календарем, просто ніхто не дивився на цей розділ. */
section.view > .page-mid > .info-hero > .info-hero-main > .shead {
  /* ── ПЕРШИЙ ЗАГОЛОВОК СТОРІНКИ = ГЕРОЙ ─────────────────────────────
     Тут стояло 600 21px гротеском. Виміряно по всіх розділах: у застосунку
     жило ЧОТИРИ мови заголовка — цей `.shead`, `.view-head` у Грошах і
     Опублікованому, `.brand-hero` у Бренді з Галереєю та власний герой
     Інформації. Тобто назва розділу виглядала по-різному залежно від того,
     хто писав шаблон.

     Замість того, щоб правити дев'ять шаблонів (і забути десятий), піднято
     САМЕ ЦЕ правило: перелік обгорток нижче збирався довго й уже враховує
     всі пастки — календар із подвійною обгорткою, `.sr-only` у Дослідженні,
     власний герой Інформації.

     Набір той самий, що в `.brand-hero`: антиква 400, бо дизайн-код каже,
     що заголовок — не «жирний текст», а інша порода літери. Різниця між
     двома механізмами лишається одна: `.brand-hero` має праву половину під
     число, цей — ні. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  font: 400 clamp(26px, 3vw, 34px)/1.05 var(--serif);
  color: var(--text);
  text-transform: none;
  letter-spacing: -.015em;
  padding-bottom: var(--sp-12);
  margin-bottom: var(--sp-14);
  border-bottom: 1px solid var(--border);
}
section.view > .shead:first-child > .n,
section.view > :is(.page-mid, .page-wide, .page-narrow, .gal-wrap, .ib-page) > .shead:first-child > .n,
section.view > :is(.page-mid, .page-wide, .page-narrow) > .sr-only + .shead > .n,
section.view > .cal-page > .cal-head > .cal-head-l > .shead > .n,
section.view > .cal-page > .cal-head > .shead:first-child > .n,
section.view > .page-mid > .info-hero > .info-hero-main > .shead > .n {
  /* Підпис падає під назву власним рядком: у рядок із антиквою на 34px він
     не стає — або переповзає, або тисне заголовок. */
  font: 400 var(--fs-12)/1.45 var(--sans);
  color: var(--text-mute);
  max-width: 62ch;
}

/* ── ЧЕТВЕРТА МОВА ЗАГОЛОВКА: `.view-head` ──────────────────────────────
   Гроші й Опубліковане писали шапку по-своєму: `<h2>`/`<h1.view-title>`
   плюс `<p.view-sub>`. Виглядало пристойно й не збігалося ні з ким.

   Зводимо до того самого героя, що й `.shead` вище. Розмітку не чіпаємо:
   вона правильна семантично (заголовок і абзац), змінюється лише набір. */
section.view > :is(.page-mid, .page-wide, .page-narrow) > .view-head:first-child,
section.view > .view-head:first-child {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-14); flex-wrap: wrap;
  padding-bottom: var(--sp-12);
  margin-bottom: var(--sp-14);
  border-bottom: 1px solid var(--border);
}
section.view .view-head :is(h1, h2, .view-title) {
  margin: 0;
  font: 400 clamp(26px, 3vw, 34px)/1.05 var(--serif);
  letter-spacing: -.015em;
  color: var(--text);
}
section.view .view-head .view-sub {
  margin: var(--sp-4) 0 0;
  font: 400 var(--fs-12)/1.45 var(--sans);
  color: var(--text-mute);
  max-width: 62ch;
}
/* 🛑 У «Опублікованому» кнопка «Оновити статистику» лежить у тій самій
   шапці. `align-items: flex-end` тримає її на базовій лінії заголовка;
   без цього вона зависала посередині 34-піксельної антикви. */
section.view .view-head .view-actions { flex: none; align-self: center; }

/* ── ПОРОЖНІ СТАНИ ────────────────────────────────────────────────────────
   Пунктирна рамка означає «сюди можна перетягнути файл». Ми ж малювали нею
   будь-яке «поки нічого немає» — тобто застосунок двадцять разів пропонував
   дію, якої там немає. Плюс пунктир на темному тлі читається як недомальована
   коробка. Стало: тепла площина з ледь помітним переливом — місце зайняте й
   виглядає задуманим, а не поламаним.
   🛑 Помилка лишається З РАМКОЮ й червоною: різниця між «даних немає» і «не
   зміг спитати» мусить читатись із відстані, а не лише з формулювання. */
.empty {
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(70% 130% at 8% 0%, rgba(var(--hue, var(--hue-amber)), .09), transparent 100%),
    var(--fill-1);
  color: var(--text-mute);
}
.empty-state:not(.error-state) {
  border-radius: var(--radius);
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(var(--hue, var(--hue-amber)), .10), transparent 100%),
    radial-gradient(55% 120% at 92% 100%, rgba(var(--hue-violet), .07), transparent 100%),
    var(--fill-1);
}
.empty-state .es-icon { opacity: .5; }

/* 🛑 ВИМІРЯНО: в «Аналітиці» одночасно стояло п'ять однакових суцільно-
   бурштинових кнопок «Перейти в Налаштування» — по одній на кожен порожній
   блок. П'ять однакових головних дій — це нуль головних дій. Дія порожнього
   стану лишається помітною, але переходить у м'який акцент: бурштин на 16%
   під бурштиновим текстом. Те саме для «Зберегти» біля кожного сервісу. */
.empty-state .es-action.btn-primary,
.svc-card .btn-primary {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.empty-state .es-action.btn-primary:hover,
.svc-card .btn-primary:hover { background: var(--accent-edge); }

/* Попередження власника — тепла площина, а не червона коробка: це не
   помилка, а межа видимості. */
.cst-warn {
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 140% at 3% 0%, rgba(var(--hue-amber), .14), transparent 100%),
    var(--fill-1);
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   ЕРГОНОМІКА РЕШТИ РОЗДІЛІВ + рухомий градієнт на поверхнях
   ══════════════════════════════════════════════════════════════════════════
   Стилі вже спільні, але компонування лишалось старим. Нижче — правки, де
   проблема була в РОЗТАШУВАННІ, а не в кольорі. Механіка руху — ui_motion.css,
   тут лише вибір поверхонь, які його отримують: їх навмисно мало, бо рух на
   всьому одразу перестає бути акцентом і починає бути шумом. */

/* Рухомий градієнт — рівно там, де людина затримується поглядом. */
.ov-head, .cmp-ai-card, .cst-warn { position: relative; overflow: hidden; isolation: isolate; }
.ov-head::before, .cmp-ai-card::before, .cst-warn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(34% 34% at 28% 30%, rgba(var(--hue, var(--hue-amber)), .26), transparent 72%),
    radial-gradient(30% 30% at 72% 70%, rgba(var(--hue2, var(--hue-rose)), .18), transparent 72%);
  animation: uiDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
/* Порожні стани теж живі, але вдвічі повільніше: їх на екрані буває багато. */
.empty-state:not(.error-state) { position: relative; overflow: hidden; isolation: isolate; }
.empty-state:not(.error-state)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40%;
  pointer-events: none;
  background:
    radial-gradient(32% 32% at 26% 28%, rgba(var(--hue, var(--hue-amber)), .11), transparent 72%),
    radial-gradient(28% 28% at 74% 72%, rgba(var(--hue-violet), .08), transparent 72%);
  animation: uiDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}
/* Статичну заливку прибрано: колір тепер несе рухома пляма, і два шари
   разом давали кольорову стіну замість натяку. Лишається базовий fill. */
.empty-state:not(.error-state) { background: var(--fill-1); }

/* 🛑 ПОРОЖНІЙ СТАН УСЕРЕДИНІ СІТКИ мусить займати ВЕСЬ РЯД. Інакше він
   успадковує ширину картки: у «Дослідженні» повідомлення «ще немає жодного
   дослідження» стояло вузьким стовпчиком на 150px посеред екрана на 640px і
   читалось як зламана верстка. Це не косметика — людина бачить дефект там,
   де насправді просто немає даних. */
.lib-grid > .empty-state, .lib-grid > .empty,
.gal-grid > .empty-state, .gal-grid > .empty,
.tiles > .empty-state, .tiles > .empty,
.conn-grid > .empty-state, .conn-grid > .empty,
.rs-grid > .empty-state, .rs-grid > .empty,
.svc-grid > .empty-state, .svc-grid > .empty,
.ui-tiles > .empty-state, .ui-tiles > .empty { grid-column: 1 / -1; }

/* ── ЧАТ ──────────────────────────────────────────────────────────────────
   🛑 Головна ергономічна правка: перше повідомлення притиснуте до НИЗУ.
   Було ~200px мертвого простору між вітанням і полем вводу — око йшло
   згори вниз через порожнечу, а рука вже стояла внизу. `margin-top: auto`
   на першому елементі, а не `justify-content: flex-end` на контейнері:
   друге ламає прокрутку, коли повідомлень стає більше за екран. */
.chat-stream > *:first-child { margin-top: auto; }


/* ── ПОВІДОМЛЕННЯ ─────────────────────────────────────────────────────────
   🛑 Права колонка «Контекст/Нотатки» стояла ЗАВЖДИ — навіть коли чат не
   обрано. Тобто чверть екрана пропонувала написати нотатку про розмову,
   якої немає, а сама розмова тулилась у вужчій колонці. Тепер контекст
   з'являється разом із розмовою.
   `:has()` тут — прогресивне покращення: у браузері без нього колонка
   просто лишається видимою, тобто поведінка рівно та, що була. */
#ibMessenger:has(#ibChatActive[hidden]) #ibColContext { display: none; }

/* Панель фільтрів: три ряди керування над нулем результатів. Ущільнено —
   ряди тонші, групи читаються як перемикачі. */
.ib-list-toolbar { gap: var(--sp-6); padding-bottom: 8px; }
.ib-seg, .ib-plat {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-1);
}
.ib-seg > *, .ib-plat > * {
  border: 0;
  background: transparent;
  border-radius: 999px;
}
.ib-seg > .active, .ib-plat > .active {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
}
.ib-toolbar-row { display: flex; align-items: center; gap: var(--sp-6); }
.ib-toolbar-row .ib-poll-btn { margin-left: auto; }

/* Порожня середина — на всю колонку, а не коробочка посередині. */
.ib-chat-empty { display: flex; align-items: center; justify-content: center; height: 100%; }
.ib-chat-empty .empty-state { width: 100%; height: 100%; border-radius: var(--radius); }

/* ── ОПУБЛІКОВАНЕ ─────────────────────────────────────────────────────── */
.po-toolbar { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.po-toolbar .po-refresh { margin-left: auto; }

/* ── ДОСЛІДЖЕННЯ ──────────────────────────────────────────────────────────
   Рядок запиту — та сама пара, що й скрізь: поле тягнеться, дія праворуч. */
.rs-form, .rs-query-row { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.rs-form > input, .rs-query-row > input { flex: 1 1 260px; min-width: 0; }

/* ── КАЛЕНДАР ─────────────────────────────────────────────────────────────
   🛑 «+ додати» стояло в КОЖНІЙ клітинці одночасно — тридцять п'ять
   однакових запрошень на екрані, серед яких губились самі пости. Дія
   лишається на місці, але проявляється під курсором: сітка знову читається
   як план, а не як панель керування.
   На тач-пристроях наведення не існує в принципі, тому там кнопка видима
   завжди — інакше вона стала б недосяжною. */
@media (hover: hover) {
  .cal-day-add { opacity: 0; transition: opacity var(--m-base, 160ms) var(--m-ease, ease); }
  .cal-day:hover .cal-day-add,
  .cal-day:focus-within .cal-day-add { opacity: 1; }
}

/* ── ІНФОРМАЦІЯ (онбординг) ───────────────────────────────────────────────
   Довгий список кроків, де кожен крок був окремою коробкою з рамкою. Той
   самий рецепт, що й скрізь: заливка тримає форму, рамка зникає. */
.info-step, .ob-card, .info-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--fill-1);
  box-shadow: none;
}

/* ── МЕНЕДЖЕР І БРЕНД ─────────────────────────────────────────────────────
   `.brand-card` — картка-секція, спільна для Бренду й Менеджера. Заголовок
   у ній був звичайним жирним текстом, тобто те саме поняття «секція» мало
   в застосунку вже третій вигляд. Тепер — та сама смуга, що в деці. */
.brand-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--card-shadow);
}
.brand-card-title {
  font: 700 var(--fs-13)/1.25 var(--sans);
  color: var(--text);
  letter-spacing: -.01em;
}
.brand-card-head { align-items: center; gap: var(--sp-8); }
.brand-card-head .n, .brand-card-sub {
  font: 400 var(--fs-11)/1.4 var(--sans);
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: -.006em;
}

/* Групи взаємовиключних чипів у цих формах — сегментований перемикач. */
.mg-goal-row, .mg-goals, .brand-chip-row, .pw-chip-row {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-1);
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.mg-goal-row > .chip, .mg-goals > .chip, .brand-chip-row > .chip, .pw-chip-row > .chip {
  border: 0;
  background: transparent;
  border-radius: 999px;
}
/* 🛑 Друга група чипів із бурштиновим вибраним — після тієї, що вище.
   Ця обслуговує цілі менеджера, чипи бренду й опитувальник, тобто ще
   чотири екрани. Разом із першою групою це означало, що бурштиновий
   вибраний чип був НОРМОЮ застосунку, а правило «один бурштин на
   екран» — побажанням, яке не виконувалось ніде.

   Закон один: вибір — яскравість, дія — колір. Обрана ціль нічого не
   витрачає й нікуди не веде. */
.mg-goal-row > .chip.active, .mg-goals > .chip.active, .brand-chip-row > .chip.active, .pw-chip-row > .chip.active {
  background: var(--fill-3);
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   БРЕНД
   ══════════════════════════════════════════════════════════════════════════
   Було: одна вузька колонка на 700px посеред екрана на 1200 — половина
   сторінки порожня, а сама форма при цьому тісна. І три суцільно-бурштинові
   кнопки одночасно: «Обробити контекст», «Пройти опитування», «Зберегти».

   Стало: дві колонки — і поділ між ними двічі переписувався.

   🛑 Перша спроба ділила «руками» / «зібране само», і на ній опитування
   опинилось ПРАВОРУЧ — тобто найдовша ручна робота продукту стояла по той
   бік від власного сенсу, ще й карткою в кутку. Поділ, який доводиться
   пояснювати, поділом не є.

   Тепер колонки однієї природи: обидві — введення руками (форма й файли),
   а стан, головна дія та результат стоять на всю ширину над ними й під
   ними. Ширини через це зрівнялись: 1.25fr проти 1fr мало сенс, поки
   ліворуч була форма, а праворуч приписка; двом рівноправним колонкам
   потрібні рівні частки. */
.brand-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: start;
  margin-top: var(--sp-16);
}
.brand-col { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.brand-col > .brand-card { margin: 0; }
@media (max-width: 980px) { .brand-cols { grid-template-columns: 1fr; } }

/* ── СТАН ПЕРШИМ ПРЕДМЕТОМ ────────────────────────────────────────────────
   Блок «Слід у результаті» відкриває сторінку, тож він мусить читатись як
   зведення, а не як ще одна картка серед рівних: власна заливка замість
   панелі, і ніякого зайвого світла — це стан, а не дія. */
.brand-state{ background: var(--fill-1); box-shadow: none }
.brand-state + .bs-banner-card{ margin-top: var(--sp-16) }
/* Дію тримаємо на відстані від стану, а не впритул: між «ось як воно є»
   і «ось як це виправити» має бути пауза. */
.brand-cols + .brand-card{ margin-top: var(--sp-16) }

/* Кнопка перезбирання живе в шапці свого ж блоку — праворуч, разом зі
   значком роботи. `margin-left:auto` не потрібен: .brand-card-head уже
   розсуває краї. */
.brand-ctx-act{ display: flex; align-items: center; gap: var(--sp-8); flex: none }
@media (max-width: 620px){
  /* На вузькому шапка складається в стовпчик, і кнопка на всю ширину
     читається краще за кнопку, притиснуту до правого краю. */
  .brand-card-head:has(.brand-ctx-act){ flex-wrap: wrap }
  .brand-ctx-act{ width: 100%; justify-content: flex-end }
}

/* Опитування — рекомендований, швидший шлях. Вагу йому дає перелив, а не
   бурштинова кнопка: колір поверхні притягує погляд, не забираючи в
   «Зберегти» роль головної дії. */
#brSurveyCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background:
    radial-gradient(80% 130% at 4% 0%, rgba(var(--hue-amber), .15), transparent 100%),
    radial-gradient(70% 130% at 100% 100%, rgba(var(--hue-violet), .11), transparent 100%),
    var(--fill-1);
}
#brSurveyCard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(34% 34% at 28% 30%, rgba(var(--hue-amber), .22), transparent 72%),
    radial-gradient(30% 30% at 72% 70%, rgba(var(--hue-violet), .16), transparent 72%);
  animation: uiDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
#brSurveyBtn.btn-primary,
#brProcessBtn.btn-primary {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
#brSurveyBtn.btn-primary:hover,
#brProcessBtn.btn-primary:hover { background: var(--accent-edge); }

/* Зона перетягування: пунктир тут ДОРЕЧНИЙ — він і означає «кинь сюди
   файл». Але висота була як у порожньої галереї; вистачає смуги. */
.brand-dropzone {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-10);
  padding: 14px 16px;
  min-height: 0;
}
.brand-dropzone .bdz-icon { font-size: 16px; }
.brand-dropzone .bdz-text { font-size:  var(--fs-12); }
.brand-dropzone .bdz-sub { color: var(--text-mute); font-size:  var(--fs-11); }

/* ══════════════════════════════════════════════════════════════════════════
   ІНФОРМАЦІЯ
   ══════════════════════════════════════════════════════════════════════════
   🛑 Єдине число, заради якого сюди заходять («скільки ще?»), було
   найдрібнішим елементом екрана — відсоток дрібним шрифтом у кутку смуги.
   Тепер це герой: велика цифра «5 із 12». Відсоток лишився підписом, бо він
   не відповідає на питання «скільки ще»: 42% — це три кроки чи тринадцять? */
.info-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
  gap: var(--sp-20);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 18px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 150% at 3% 0%, rgba(var(--hue-amber), .15), transparent 100%),
    radial-gradient(60% 140% at 98% 100%, rgba(var(--hue-cyan), .10), transparent 100%),
    var(--panel);
}
.info-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(34% 34% at 26% 28%, rgba(var(--hue-amber), .20), transparent 72%),
    radial-gradient(30% 30% at 74% 72%, rgba(var(--hue-cyan), .14), transparent 72%);
  animation: uiDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.info-hero .info-intro { margin: 8px 0 0; max-width: 52ch; }
.info-hero .info-progress-card { margin: 0; padding: 0; border: 0; background: none; }
.info-hero .info-progress-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.info-hero .info-progress-pct {
  font: 300 34px/1 var(--sans);
  color: var(--accent);
  letter-spacing: -.03em;
}
.info-hero .info-progress-pct .of {
  font: 500 var(--fs-13)/1 var(--sans);
  color: var(--text-mute);
  letter-spacing: -.01em;
  margin-left: 6px;
}
.info-hero .info-progress-label { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }
@media (max-width: 860px) {
  .info-hero { grid-template-columns: 1fr; gap: var(--sp-14); }
}

/* Заголовок групи кроків — та сама смуга, що скрізь. */
.info-group-title {
  font: 700 var(--fs-13)/1.25 var(--sans);
  color: var(--text);
  letter-spacing: -.01em;
}
.info-group-head { align-items: center; gap: var(--sp-8); }
.info-group-head .n { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }

/* ── СТАН СЛУЖБ ───────────────────────────────────────────────────────────
   Не картка-завдання, а смуга-факт: жодних галочок, жодного «зроблено з»,
   бо робити тут нічого. Тому й вигляд інший — тихіша заливка, ніякого
   світла, дрібніший ритм. Предмет, який нічого не просить, не мусить
   виглядати як предмет, який просить. */
.info-services{
  margin-top: var(--sp-16); padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius); background: var(--fill-0);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.isv-head{ display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap }
.isv-dot{ width: 7px; height: 7px; border-radius: 50%; flex: none;
  align-self: center; background: var(--ok) }
.isv-dot.bad{ background: var(--warn) }
.isv-title{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text) }
/* Головне речення зони: воно знімає з людини провину за те, чого вона не
   може полагодити. Тому стоїть у шапці, а не дрібним рядком унизу. */
.isv-meta{ font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-mute) }
.isv-list{ display: flex; flex-direction: column; gap: var(--sp-2) }
.isv-row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-8); padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-control); background: var(--fill-1);
}
/* Наслідок — звичайним текстом, назва служби — приглушено й моношрифтом:
   перше читають, друге переписують нам у лист. */
.isv-what{ font: 500 var(--fs-12)/1.35 var(--sans); color: var(--text) }
.isv-key{ font: 400 var(--fs-11)/1.3 var(--mono); color: var(--text-mute); flex: none }
.isv-ok{ font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-mute) }
@media (max-width: 560px){
  .isv-row{ flex-direction: column; gap: var(--sp-1) }
}

/* Кроки — рядки без рамок; «обов'язково» тихим чипом, а не бурштиновою
   пігулкою на кожному рядку поспіль. */
.info-step {
  border: 0;
  border-radius: var(--radius);
  background: var(--fill-1);
}
.info-step .badge {
  border: 0;
  background: var(--fill-2);
  color: var(--text-mute);
  font: 600 var(--fs-10)/1.5 var(--sans);
  text-transform: none;
  letter-spacing: -.006em;
}

/* ── ОСТАННІ ПОРУШНИКИ ПРАВИЛА «ОДИН БУРШТИН НА ЕКРАН» ────────────────────
   Знайдено прогоном по всіх 18 розділах, а не оком.

   Галерея: «→ У композер» стоїть на КОЖНІЙ плитці. На миші вони проявляються
   під курсором по одній, але на тач-пристроях (@media hover:none) показуються
   всі одразу — і сітка перетворюється на стіну бурштину. Дія картки не може
   бути акцентом рівня «Опублікувати»: вона переводить в інший розділ, а не
   робить незворотне.

   Аналітика: три суцільні кнопки поспіль — «Оновити дані», «Зібрати
   коментаторів», «Згенерувати висновки». Головна з них одна (оновлення), дві
   інші запускають довгі фонові збори. */
.gal-use.btn-primary {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.gal-use.btn-primary:hover { background: var(--accent-edge); }

#audScrapeBtn.btn-primary,
#anaInsightsGenBtn.btn-primary {
  background: var(--accent-wash-3);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

/* ── РЕЙЛИ В РЕШТІ РОЗДІЛІВ ───────────────────────────────────────────────
   Тека бібліотеки, джерело галереї, режим переписки й тип дослідження — це
   той самий контрол, що вибір формату в Studio: взаємовиключно, 2-5
   варіантів, змінюють нечасто, піктограма несе сенс швидше за слово. Тому
   вони плитки, а не пігулки.

   Часті перемикання (періоди аналітики, фільтри статусів) свідомо лишились
   пігулками: там плитка з'їдала б висоту без користі. */
#libTabs, #galTabs, #ibModeToggle { --pick-w: 92px; }
#rsTypeChips { --pick-w: 88px; display: flex; flex-wrap: wrap; }
/* У вузькій лівій колонці Повідомлень дві плитки мусять ділити ширину. */
#ibModeToggle { width: 100%; }
#ibModeToggle > * { flex: 1 1 0; min-width: 0; }

/* ── БРУСОК ВВОДУ: ЧАТ І ПОВІДОМЛЕННЯ ─────────────────────────────────────
   Та сама форма, що в композерах Studio й поста: рядок тексту, під ним рядок
   чипів, праворуч одна акцентна кнопка на всю висоту. У всіх чотирьох місцях
   людина робить одне — пише текст і натискає одну кнопку; різна форма для
   однакової дії змушує щоразу перевчатись.

   Було в Чаті: піктограма скріпки, поле й кнопка в один ряд — тобто
   «прикріпити файл» важило стільки ж, скільки «надіслати». */
/* flex-direction: row ЯВНО. Той самий капкан, що вже ловив на .prov-card:
   `.rs-start-card` у своєму файлі описана колонкою, я перевизначив лише
   `display` — і успадкований `column` розклав брусок на три поверхи, поле
   вводу розтягнулось на 260px, а кнопка стала на всю ширину. Успадкована
   половина правила — найтихіший спосіб зламати розкладку: виглядає, ніби
   селектор не спрацював. */
.cmpz-inputbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--sp-10);
  padding: 10px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .045) inset, var(--card-shadow);
}
.cmpz-inputbar-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: 4px 4px 0;
}
.cmpz-inputbar-body > input,
.cmpz-inputbar-body > textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-13)/1.5 var(--sans);
  resize: none;
  padding: 0;
}
.cmpz-inputbar-body > textarea { min-height: 54px; }
.cmpz-inputbar-body > input:focus,
.cmpz-inputbar-body > textarea:focus { outline: none; }
.cmpz-inputbar-body > input::placeholder,
.cmpz-inputbar-body > textarea::placeholder { color: var(--text-mute); }
.cmpz-inputbar-chips { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

/* Кнопка дії — на всю висоту бруска, як «Створити» в Studio. */
.cmpz-inputbar .cmpz-go-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 72px;
  border-radius: calc(var(--radius-lg) - 6px);
}

/* Стартові підказки в Чаті — не текст, а дії: рівна висота, тихий вигляд. */
.chat-suggestions .cs-suggestion { font-weight: 500; }

/* Бічна колонка розмов: заголовок і дія в один рядок. Кнопка на всю ширину
   в порожній колонці читалась як головна дія екрана, хоча головна тут —
   «Надіслати». */
.cs-new { width: 100%; justify-content: center; }
.cs-list .empty-state { padding: 18px 12px; }
.cs-list .empty-state .es-icon { display: none; }

/* Статус генерації стоїть у рядку чипів, тож не має ламати його висоту. */
.ib-composer .ib-gen-status { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }

@media (max-width: 720px) {
  .cmpz-inputbar { flex-direction: column; }
  .cmpz-inputbar .cmpz-go-btn { align-self: stretch; min-height: 40px; }
}

/* ── STUDIO: ОДИН БУРШТИН НА ЕКРАН ────────────────────────────────────────
   Виміряно прогоном: у Studio одночасно стояли ТРИ суцільні кнопки —
   «Створити», «Запустити батч», «Запустити автопілот». Перша це головна дія
   екрана, дві інші — альтернативні пускачі у власних згортних коробках.
   Коли всі три однакові, екран не має головного: око перебирає їх по черзі
   замість того, щоб одразу знайти те, чим користуються щодня.

   Пускачі лишаються помітними — м'який акцент, — але суцільний бурштин
   зберігає за собою «Створити». */
#btStartBtn.btn-primary,
#apStartBtn.btn-primary {
  background: var(--accent-wash-3);
  background-image: none;
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
#btStartBtn.btn-primary:hover:not(:disabled),
#apStartBtn.btn-primary:hover:not(:disabled) {
  background: var(--accent-edge);
  transform: none;
}

/* ── КАЛЕНДАР ─────────────────────────────────────────────────────────────
   Виміряно: 42 клітинки по 128px = 873px сітки, і назва дня тижня в КОЖНІЙ
   із них. Сорок два рази те саме слово, яке насправді описує колонку.
   Тепер воно стоїть один раз шапкою над сіткою. */
.cal-wd-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-10);
  margin-bottom: 8px;
  padding: 0;
}
/* 🛑 Відступ живе на КОЛОНЦІ, а не на рядку. Рядок з `padding: 0 8px`
   звужувався на 16px, і його сім колонок ставали вужчими за сім колонок
   сітки: виміряно розбіг 10px між першою й останньою назвою. Тепер
   геометрія колонок збігається точно, а всередині колонки назва
   повторює внутрішній відступ клітинки. */
.cal-wd-row > span {
  font: 700 var(--fs-10)/1 var(--sans);
  color: var(--text-dim);
  padding-left: 8px;
}
/* Колонку називає шапка — у клітинці це дубль на всіх ширинах.
   🛑 Раніше тут стояла зворотна пара правил: нижче 860px шапка ховалась,
   бо сітка «спадала в одну колонку». Сітка більше не спадає (див.
   05_plan.css, «МІСЯЦЬ ЛИШАЄТЬСЯ МІСЯЦЕМ») — і шапка стала єдиним, що
   називає колонку. Ховати її тепер означає лишити тридцять безіменних
   квадратів. */
.cal-day-name { display: none; }
@media (max-width: 980px) {
  .cal-wd-row { gap: var(--sp-6); margin-bottom: 6px; }
  .cal-wd-row > span { padding-left: 6px; }   /* = .cal-day padding */
}
@media (max-width: 640px) {
  /* Шкала свідомо не має щабля нижче 10px (див. 00_theme.css), тож на
     39px колонці місце звільняє не кегль, а трекінг і вирівнювання. */
  .cal-wd-row > span { letter-spacing: 0; text-align: center; padding-left: 0; }
}

/* Клітинка: заливка замість рамки, як усе інше в застосунку. Порожній місяць
   більше не займає 873px — рядок стискається під вміст, але не нижче за
   висоту, на якій ще видно дату й кнопку. */
.cal-day {
  border: 0;
  background: var(--fill-1);
  min-height: 104px;
}
.cal-day.other-month { background: rgba(255, 255, 255, .022); }
/* 🛑 СЬОГОДНІ МАЛО П'ЯТЬ БУРШТИНОВИХ ПОЗНАЧОК ОДРАЗУ: градієнт-підсвітку,
   лінію тут, другу лінію в 05_plan.css, бурштиновий кружок навколо числа
   й бурштинову назву дня. П'ять сигналів про одне й те саме — і кожен із
   них конкурував із єдиною дією екрана.

   Сесія 3: «сьогоднішній день виділяє --fill-0 підкладка й підпис
   „Сьогодні"». Підкладка каже «ти тут», підпис це називає словом, і
   жодного кольору дії на день, який дією не є. */
.cal-day.today {
  border: 0;
  background: var(--fill-2);
  box-shadow: none;
}
/* 🛑 Ця лінія пережила прибирання рамок у 05_plan.css, бо живе в іншому
   файлі, який завантажується пізніше. Урок той самий, що з класом
   `.inp` і з капсами в nav.js: правка в одному файлі не лагодить
   правило, оголошене в іншому. П'ять ліній поперек сітки читались як
   частина того самого плетива — тижні вже розділені проміжком 10px. */
.cal-day-date { font: 600 var(--fs-14)/1 var(--sans); }

/* ── АНАЛІТИКА ────────────────────────────────────────────────────────────
   Порожні секції мереж ховає analytics.js (див. renderConnectNotice). Тут —
   решта: повідомлення про підключення стає теплою площиною, а не рядком
   тексту, який губиться між заголовком і показниками. */
.ana-connect-notice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(70% 140% at 4% 0%, rgba(var(--hue-amber), .13), transparent 100%),
    var(--fill-1);
  color: var(--text-dim);
}
.ana-connect-notice::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(32% 32% at 24% 30%, rgba(var(--hue-amber), .16), transparent 72%);
  animation: uiDrift 40s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── ОГЛЯД · ПІДПИСКА · СОБІВАРТІСТЬ: ширина не має пропадати ─────────────
   Виміряно: у всіх трьох сторінка 1206px, а вміст іде одним стовпцем, де
   кожен блок тягнеться на всю ширину незалежно від того, скільки в ньому
   вмісту. Смуга на 32px висоти й 1206px ширини — це рядок, який змусили
   виглядати блоком; поруч із таким самим сусідом він читається краще й
   економить прокрутку. */
.ov-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 22px;
  align-items: start;
}
.ov-pair-col { min-width: 0; }
@media (max-width: 900px) { .ov-pair { grid-template-columns: 1fr; } }

/* Підключення в Огляді — чипи стану, а не коробки з рамкою. */
.ov-conns > * {
  border: 0 !important;
  border-radius: var(--radius-sm);
  background: var(--fill-1);
}

/* Підписка: три нижні картки — «Ліміти», «Команда», «Рахунки» — стояли на
   всю ширину кожна, маючи вмісту на третину екрана. */
.bl-grid + .bl-card,
.bl-card ~ .bl-card { margin: 0; }
.bl-lower {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-16);
  align-items: start;
  margin-top: 16px;
}

/* Собівартість: пара колонок для коротких секцій. `.cst-two` вже існувала —
   тепер вона обслуговує три пари, а не одну. */
.cst-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 22px;
  align-items: start;
}
.cst-two > * { min-width: 0; }
@media (max-width: 900px) { .cst-two { grid-template-columns: 1fr; } }
/* Перший заголовок у колонці не має відступу згори: інакше дві колонки
   починаються на різній висоті через різні inline-стилі в розмітці. */
.cst-two > * > .shead:first-child { margin-top: 0 !important; }

/* ── МЕНЕДЖЕР ─────────────────────────────────────────────────────────── */
.mg-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: start;
}
.mg-col { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.mg-col > .brand-card { margin: 0; }
@media (max-width: 980px) { .mg-cols { grid-template-columns: 1fr; } }

/* ── АКТИВНІСТЬ ───────────────────────────────────────────────────────────
   Стрічка подій: дев'ять рядків, кожен у сірій рамці. На темному тлі рамка
   на кожному рядку малює таблицю — а це журнал, який читають зверху вниз, а
   не порівнюють по колонках. Форму тримає заливка. */
.act-feed > *, .act-item, .act-row {
  border: 0 !important;
  border-radius: var(--radius);
  background: var(--fill-1);
}
.act-intro { font: 400 var(--fs-11)/1.5 var(--sans); color: var(--text-mute); max-width: 72ch; }

/* ── ОПУБЛІКОВАНЕ ─────────────────────────────────────────────────────────
   Шапка на 128px над сторінкою, де вмісту на 250px. Заголовок і опис — це
   два рядки, а не блок на чверть екрана. */
/* 🛑 ОКРЕМІ ПРАВИЛА ДЛЯ «ОПУБЛІКОВАНОГО» ПРИБРАНО. Вони тиснули шапку
   (margin 10px, підпис 11px) з міркування «шапка на 128px над
   сторінкою, де вмісту на 250px». Міркування було слушне ПРОТИ старої
   шапки, яку ніхто більше не поділяв. Тепер герой — спільна мова всіх
   розділів, і виняток тут коштував би дорожче за виграні пікселі:
   «Опубліковане» виглядало б як чужий екран рівно тоді, коли воно
   порожнє, тобто в перший день роботи з продуктом. */
.pf-tabs { display: inline-flex; gap: var(--sp-2); padding: 3px; border-radius: 999px; background: var(--fill-1); width: max-content; }
.pf-tabs > .chip { border: 0; background: transparent; border-radius: 999px; }
.pf-tabs > .chip.active { background: var(--accent-wash-3); color: var(--accent-hi); }

/* ── ГАЛЕРЕЯ: одна смуга керування ────────────────────────────────────────
   Чотири окремі смуги одна під одною давали ~166px керування ДО першої
   картинки: перше, що бачила людина у вітрині, — панель приладів. */
.gal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gal-bar .gal-search { flex: 1 1 220px; min-width: 0; }
.gal-bar .gal-count { font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); white-space: nowrap; }
.gal-bar .cmp-upload-btn { margin-left: auto; }
.gal-report { margin-bottom: 12px; }

/* ── ДОСЛІДЖЕННЯ ─────────────────────────────────────────────────────────
   Картки звітів — заливка замість рамки, як усюди. */
.rs-grid > *, .rs-card, .ana-rs-card {
  border: 0 !important;
  border-radius: var(--radius);
  background: var(--fill-1);
}
.rs-start-card .rs-query-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-13)/1.5 var(--sans);
  padding: 0;
}
.rs-start-card .rs-query-input:focus { outline: none; }
.rs-start-card .rs-query-input::placeholder { color: var(--text-mute); }
.rs-start-err { font: 500 var(--fs-11)/1.4 var(--sans); color: var(--danger); }
.rs-hint { font: 400 var(--fs-11)/1.5 var(--sans); color: var(--text-mute); max-width: 84ch; }

/* ── ОГЛЯД: швидкий старт плитками ───────────────────────────────────── */
.ov-quick { --pick-w: 118px; flex-wrap: wrap; }

/* Поле запиту в Дослідженні: висоту задає вміст, а не розтягування у
   flex-контейнері. */
.rs-start-card .rs-query-input { height: auto; flex: 0 0 auto; min-height: 22px; }
.rs-start-card .cmpz-inputbar-body { gap: var(--sp-10); }

/* ── НАЛАШТУВАННЯ ─────────────────────────────────────────────────────────
   Двадцять три рамки на сторінці: чотирнадцять рядків автономії, шість
   полів вводу, поля лімітів. На темному тлі рамка на кожному рядку малює
   таблицю — а це список перемикачів, який читають зверху вниз. */
.autonomy-row, .au-cap-input, .onb-input, .key-row {
  border: 0 !important;
  border-radius: var(--radius-sm);
  background: var(--fill-1);
}
.autonomy-row { padding: 10px 12px; }
.autonomy-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.autonomy-row:hover { background: var(--fill-2); }
.onb-input:focus, .au-cap-input:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

/* ── STUDIO ───────────────────────────────────────────────────────────────
   Вітрина форматів — 2319px із 3125px сторінки, тобто 74% екрана під
   каталогом, який гортають раз на кілька сесій. Композер над ним
   використовують щоразу. */
.cmpz-gallery-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--sans);
}
.cmpz-gallery-chev {
  color: var(--text-mute);
  font-size:  var(--fs-11);
  transition: transform var(--m-base, 160ms) var(--m-ease, ease);
}
.cmpz-gallery.collapsed .cmpz-gallery-chev { transform: rotate(-90deg); }
.cmpz-gallery.collapsed .cmpz-gallery-grid,
.cmpz-gallery.collapsed .cat-tabs { display: none; }
.cmpz-gallery-toggle:hover .cmpz-gallery-title { color: var(--accent-hi); }

/* Картки інструментів — заливка замість рамки, як усюди. */
.st-pick-card {
  border: 0 !important;
  border-radius: var(--radius);
  background: var(--fill-1);
}
.st-pick-card:hover { background: var(--fill-2); }

/* Згорнута вітрина лишається зручною ціллю для кліку: 15px заголовка — це
   смуга, у яку треба цілитись, а не кнопка. */
.cmpz-gallery.collapsed { padding-bottom: 4px; }
.cmpz-gallery-toggle { min-height: 30px; padding: 0 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   ОСТАННІ РАМКИ
   ══════════════════════════════════════════════════════════════════════════
   Прогін по 18 розділах показав, що решта обведень — не розсип
   випадковостей, а ДВА класи: базова поверхня `.panel` і поля вводу.
   Принцип «форму тримає заливка, а не рамка» був записаний у skin.css ще на
   початку, але до самої основи так і не дійшов — я лікував наслідки по
   розділах: `.prov-card`, `.lib-card`, `.autonomy-row`, `.act-feed`,
   `.cal-day`, `.rs-grid`, `.info-step`… Кожен раз одне й те саме правило.

   🛑 `border-color: transparent`, а не `border: 0`: 1px лишається в моделі
   коробки, тож жодна розкладка не зсувається ні на піксель. Для суцільного
   проходу по всьому застосунку це важливіше за чистоту оголошення —
   помилку тут довелось би шукати на вісімнадцяти екранах одразу.

   Поверхня при цьому не зникає: `.panel` уже має заливку, тінь картки й
   світлу кромку по верхньому краю (див. шар лиску) — вона читається як
   пластина, що лежить зверху, а не як контур. */
.panel,
.card,
.chat-sidebar,
.chat-shell,
.msg,
.info-faq-item,
.info-guide-start,
.st-autopilot,
.st-recent-wrap,
.ana-chart-panel,
.ana-chart-card,
.ana-insights-panel,
.cmp-pv-panel {
  border-color: transparent;
}

/* Поля вводу — та сама логіка: заглиблення, а не контур. Рамка навколо
   кожного поля перетворює форму на бланк, який заповнюють ручкою. */
.lib-name-input,
.modal-textarea,
.aud-search-input,
.inp,
.gal-search,
input[type="text"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
textarea {
  border-color: transparent;
  background: var(--fill-1);
}
.lib-name-input:focus,
.modal-textarea:focus,
.aud-search-input:focus,
.inp:focus,
.gal-search:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
  outline: none;
  background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi);
}

/* Поля всередині бруска вводу власної заливки НЕ мають: там заливку несе
   сам брусок, і друга поверх неї малює коробку в коробці. */
.cmpz-inputbar-body > input,
.cmpz-inputbar-body > textarea,
.cmpz-input,
.rs-start-card .rs-query-input {
  background: transparent;
}
.cmpz-inputbar-body > input:focus,
.cmpz-inputbar-body > textarea:focus,
.cmpz-input:focus,
.rs-start-card .rs-query-input:focus {
  background: transparent;
  box-shadow: none;
}

/* Повідомлення в Чаті: репліка агента — поверхня, репліка людини лишається
   бурштиновою пігулкою (це вже задано в style.css). */
.msg.assistant { background: var(--fill-1); }

/* Останні десять — знайдені тим самим прогоном. Повідомлення-підказки
   (`.act-intro`, `.rs-hint`), смуга звіту галереї, чипи чернеток календаря,
   репліка агента: усе це поверхні, а не контури.
   Колонки Повідомлень — виняток у інший бік: там рамка була ПОВНОЮ, а
   потрібна лише розділова лінія між колонками, інакше три колонки читаються
   як три окремі вікна. */
.act-intro, .rs-hint, .gal-report, .cal-tray-item, .msg.assistant, .msg.user,
.ana-connect-notice, .cst-warn, .bl-banner {
  border-color: transparent !important;
}
.act-intro, .rs-hint, .gal-report, .cal-tray-item { background: var(--fill-1); }

.ib-col { border-color: transparent; }
.ib-col-list { border-right: 1px solid var(--border-soft); }
.ib-col-context { border-left: 1px solid var(--border-soft); }

/* Останній: рейл режиму в Повідомленнях ніс рамку від `.ib-mode-toggle`.
   Ванна рейла має власну внутрішню тінь — контур поверх неї малює коробку
   навколо коробки. */
#ibModeToggle { border-color: transparent; }

/* Модалка вибору медіа — той самий рейл; стара пігулка знята, інакше два
   несумісні описи форми на одному елементі. */
#cmpPickTabs { border-radius: calc(var(--radius-lg) - 6px); width: max-content; }
#cmpPickTabs > .chip { border-radius: calc(var(--radius) - 4px); }

/* Останні три — пояснення «навіщо цей крок» усередині кроків онбордингу.
   На десктопі вони не потрапляли під поріг виміру (нижчі за 36px), тож
   знайшлись лише на мобільній ширині, де текст переносить рядки. Волосінь
   на 4% усе одно контур, а сусідні блоки його вже не мають. */
.info-step-why { border-color: transparent; background: var(--fill-1); }

/* ══════════════════════════════════════════════════════════════════════════
   ГОТОВІ АВАТАРИ — 40 пресетів під власними персонажами
   ══════════════════════════════════════════════════════════════════════════
   Свої актори лишаються головними: готові стоять під ними й згорнуті, бо
   сорок портретів над сіткою власних перетворили б вибір на прокрутку.
   Сітка щільніша за загальну (100px проти 130px) — тут потрібне обличчя й
   імʼя, а не картка з описом. */
.st-avatars { margin: 12px 0 2px; }
.st-avatars-body { display: flex; flex-direction: column; gap: var(--sp-10); margin-top: 8px; }
.st-avatars-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.st-avatars-grid .st-pick-thumb { aspect-ratio: 3 / 4; }
.st-avatars-grid .st-pick-card.is-busy { opacity: .5; pointer-events: none; }
/* Підпис «у Бібліотеці» — щоб повторний клік не читався як єдиний спосіб
   дізнатись, що аватар уже скопійовано. */
.st-pick-sub {
  margin-top: 1px;
  color: var(--accent);
  font: 600 var(--fs-10)/1.3 var(--sans);
}

/* ── Менеджер: ціль на час відповіді ─────────────────────────────────── */
.mg-sla-row { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin: 10px 0 14px; }
.mg-sla-lbl { color: var(--text-dim); font: 500 var(--fs-13)/1 var(--sans); }
.mg-sla-input { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.mg-sla-unit { color: var(--text-dim); font: 500 var(--fs-13)/1 var(--sans); margin-right: 4px; }

/* П'ять чисел в один ряд: чекають / прострочено / скоро / агент / людина.
   Останні два свідомо стоять поруч, але окремими клітинками — злиття в одне
   середнє показувало б швидкість агента замість роботи людини. */
.mg-sla-stats { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.mg-sla-cell { padding: 10px 12px; border-radius: var(--ctl-radius-sm); background: var(--fill-1);
  border: 1px solid transparent; }
.mg-sla-cell.is-warn { border-color: rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .08); }
.mg-sla-cell.is-bad { border-color: rgba(var(--danger-rgb), .45); background: rgba(var(--danger-rgb), .08); }
.mg-sla-val { display: block; color: var(--text); font: 700 17px/1.15 var(--sans);
  font-variant-numeric: tabular-nums; }
.mg-sla-cap { display: block; margin-top: 3px; color: var(--text-dim); font: 500 var(--fs-11)/1.25 var(--sans); }
.mg-sla-cell.is-bad .mg-sla-val { color: var(--danger); }
.mg-sla-cell.is-warn .mg-sla-val { color: var(--warn); }
.brand-save-hint.err { color: var(--danger); }

/* ═══ НАСКІЛЬКИ МЕНЕДЖЕР ВІЛЬНИЙ ═════════════════════════════════════════
   Три рядки, а не повзунок: величина дискретна, і повзунок обіцяв би
   плавність, якої немає. Під кожним рівнем НАСЛІДОК, а не опис — що саме
   станеться завтра вранці. Форму тримає заливка; вибраний рядок світліший,
   без бурштину: це вибір, а не дія. */
.mg-lv{ display:flex; flex-direction:column; gap:var(--sp-6); margin-top:4px }
.mg-lv-row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-12);
  align-items:start; text-align:left; width:100%; cursor:pointer;
  padding:12px 14px; border:0; border-radius:var(--radius-md);
  background:var(--fill-0); color:inherit; font:inherit;
  transition:background var(--t-fast) var(--ease);
}
.mg-lv-row:hover{ background:var(--fill-1) }
.mg-lv-row.on{ background:var(--fill-2) }
.mg-lv-mark{
  width:15px; height:15px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--border-hover); flex:0 0 auto;
  transition:border-color var(--t-fast) var(--ease);
}
/* Позначка вибраного рівня — НЕ бурштинова. На цьому екрані бурштин
   належить єдиній дії, що коштує кредитів («Обробити в базу знань»),
   а вибір рівня довіри не коштує нічого. Той самий закон, що всюди:
   вибір — яскравість, дія — колір. */
.mg-lv-row.on .mg-lv-mark{
  border-color:var(--text);
  box-shadow:inset 0 0 0 3.5px var(--text);
}
.mg-lv-txt{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.mg-lv-txt b{ font-size: var(--fs-14); font-weight:600; color:var(--text); line-height:1.3 }
.mg-lv-txt i{ font-style:normal; font-size: var(--fs-12); color:var(--text-mute); line-height:1.45 }

/* ── повзунок цілі відповіді ─────────────────────────────────────────── */
.mg-sla-row{ display:flex; align-items:center; gap:14px }
/* Той самий доказ: повзунок ЦІЛІ — це вибір, а не витрата.
   accent-color бурштином робив його третім акцентом екрана. */
.mg-range{ flex:1; min-width:0; accent-color:var(--text-dim) }
.mg-range-out{
  flex:0 0 auto; min-width:76px; text-align:right;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-15); font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* Наслідок оновлюється на ПЕРЕТЯГУВАННІ — це єдиний спосіб показати, що
   налаштування взагалі на щось впливає. Порожній, коли даних немає:
   вигадане число на екрані про обіцянки клієнтам гірше за порожнє місце. */
.mg-conseq{ margin-top:8px; font-size: var(--fs-12); color:var(--text-dim); min-height:1em }

/* ═══ СЛІД У РЕЗУЛЬТАТІ ══════════════════════════════════════════════════
   Екран бренду читався як анкета: поля, які заповнюють раз і забувають.
   Забувають рівно тому, що не видно наслідку. Тут кожен параметр показує,
   де він уже спрацював, — і жанр екрана міняється з анкети на прилад.

   Незаповнене стоїть у тому ж списку, а не окремим блоком: список порожніх
   полів був би докором, дірка в списку слідів — видима ціна дірки. */
.br-trace{ display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2) }
/* Від власних правил лишилась РОЗКЛАДКА — те, чого в темі справді
   немає: підпис вузькою колонкою, значення широкою, підказка під
   значенням. Розміри, кольори, радіус і заливку дають t-row, t-lab,
   t-val і t-meta; було 7 власних правил, лишилось 3. */
.brt-row{ display:grid; grid-template-columns:minmax(0,104px) minmax(0,1fr);
  gap:var(--sp-1) var(--sp-7); align-items:start; background:var(--fill-0) }
.brt-hint{ grid-column:2 }
/* Порожнє поле приглушене й курсивом, БЕЗ --danger: це не поломка,
   а ще не зроблена робота. */
.brt-empty .brt-val{ color:var(--text-mute); font-style:italic }
/* 🛑 Рядок порожніх — ІНШОЇ ПРИРОДИ, ніж рядок поля: ліворуч у ньому не
   назва параметра, а назва цілої групи, і в 104px колонку вона не влазить
   («Ще не / заповнено» у два рядки). Тому підпис стоїть НАД переліком, а
   не збоку — перелік отримує всю ширину, якої він і потребує. */
.brt-empty{ grid-template-columns: minmax(0, 1fr) }
.brt-empty .brt-lab{ margin-bottom: var(--sp-1) }
.brt-note{ margin-top:var(--sp-4); padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-control); background:var(--fill-1);
  font:500 var(--fs-12)/var(--lh-base) var(--sans); color:var(--text-dim) }

.bs-banner-after{ margin-top:6px; font-size: var(--fs-12); color:var(--text-mute); line-height:1.45 }

/* ══ БРЕНД: ШАПКА-ПРЕДМЕТ ═══════════════════════════════════════════════
   Сесія 5 будує шапку розділу навколо числа, а не назви. Тут те саме:
   ліворуч назва тихо, праворуч велике число й підпис під ним, унизу —
   один рядок стану.

   Кегль числа взято з дизайн-коду сайту: там сказано, що заголовок — не
   «жирний текст», а інша порода літери, і вага завжди 400. Тому число
   набране антиквою 400 великим кеглем, а не гротеском 700 малим. */
.brand-hero{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-16); flex-wrap: wrap;
  padding-bottom: var(--sp-10);
}
.brand-hero-h{
  margin: 0; font: 400 clamp(30px, 3.4vw, 40px)/1 var(--serif);
  letter-spacing: -.015em; color: var(--text);
}
.brand-hero-sub{
  margin-top: var(--sp-4);
  font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-mute);
  max-width: 46ch;
}
/* Число праворуч і по нижньому краю назви: так дві половини шапки стоять
   на одній лінії, а не двома поверхами. */
.brand-hero-r{ display: flex; align-items: baseline; gap: var(--sp-6); flex: none }
.brand-hero-r[hidden]{ display: none }
.brand-hero-n{
  font: 400 clamp(34px, 4vw, 46px)/1 var(--serif);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.brand-hero-cap{
  font: 400 var(--fs-12)/1.3 var(--sans); color: var(--text-dim);
  max-width: 14ch;
}
/* Рядок стану — під усією шапкою й на всю ширину: він стосується
   й назви, і числа. Моноширинний, бо це показання приладу. */
.brand-hero-meta{
  font: 400 var(--fs-11)/1.4 var(--mono); color: var(--text-mute);
  padding-bottom: var(--sp-14);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-16);
}
.brand-hero-meta:empty{ display: none }

/* ── ДРУГИЙ ГОЛОС ──────────────────────────────────────────────────────
   🛑 Тут НЕ можна просто зробити тло темнішим: картки лежать на тлі
   сторінки, і «темніше за тло» означає діру. Тихість дають зняттям
   корпусу — блок лишається блоком за рахунок відступів і тонкої лінії,
   а не за рахунок заливки. */
.brand-quiet .brand-card,
.brand-card.brand-quiet{
  background: none; box-shadow: none;
  border: 1px solid var(--border);
}

/* ── ШАПКА, ЩО НЕСЕ ЩЕ Й ДІЮ ────────────────────────────────────────────
   У Бренді шапка має дві половини (назва / число), у Галереї — три:
   назва, число, кнопка. Простий `space-between` розкидав би їх на три
   кути, і число опинилось би посеред порожнечі.

   🛑 Кнопка НЕ лежить усередині `.brand-hero-r`: той блок ховається,
   коли предметів нема (`hidden`), і разом із ним зникла б єдина дія,
   якою порожню галерею можна наповнити. Тому вона сусідка, а тримає їх
   разом `margin-left: auto` на першому з правої пари. */
.brand-hero:has(.gal-hero-up){ gap: var(--sp-10) }
.brand-hero:has(.gal-hero-up) .brand-hero-l{ margin-right: auto }
.gal-hero-up{ flex: none; align-self: center }