/* ══════════════════════════════════════════════════════════════════════════
   СКІН «ПУЛЬТ» — шар зовнішнього вигляду поверх style.css
   ══════════════════════════════════════════════════════════════════════════

   Навіщо окремий файл, а не правки в 3400 рядках style.css: рішення тут —
   про ВИГЛЯД, а не про поведінку, і їх треба вміти відкотити одним рядком у
   index.html. style.css лишається базою (розкладка, стани, компоненти), цей
   файл задає матеріал: форму, товщину ліній, висоту керування, вагу тексту.

   Рецепт зміряний з живих сторінок Higgsfield (не на око):
     · керування — висота 40px, радіус 12px, заливка #222, рамка
       rgba(акцент,.05) — тобто МАЙЖЕ НЕВИДИМА;
     · контейнер форми — радіус 24px, padding 22px, фон .96 непрозорості;
     · головна дія — суцільний акцент, темний текст, 144×84, без градієнта;
     · навігація — активний пункт кольором, БЕЗ підкладки й смужки;
     · вторинна кнопка — rgba(255,255,255,.05) і ЖОДНОЇ рамки.

   Головний висновок: дешевий вигляд давали не кольори, а ОБВЕДЕННЯ. Коли
   кожен блок узятий у сіру рамку 1px, екран читається як таблиця у формі,
   а не як прилад. Тому нижче рамки не прибрано геть — їх переведено в
   напівпрозорі волосяні лінії, а форму тримає заливка. */

/* ── 1. Токени ──────────────────────────────────────────────────────────── */
:root{
  /* Форма (--radius-sm/--radius/--radius-lg) ЗВІДСИ ПРИБРАНА: ті самі три
     щаблі з тими самими значеннями стояли ще й у core/01_base.css. Власник
     тепер один, разом із поясненням. */

  /* 🛑 --border, --border-soft, --border-hover і --fill-1..3 ЗВІДСИ ПРИБРАНО.
     Вони були оголошені і тут, і в core/01_base.css. Цей файл вантажиться
     останнім, тож вигравав він — а виглядало це так, ніби правка кольору
     у файлі кольору не діє. Значення (саме ці, напівпрозорі) переїхали
     туди, разом із поясненням чому вони такі.

     Правило для цього файлу: тут лежать ПРАВИЛА вигляду, а не оголошення
     токенів. Виняток нижче — --border-warm, --card-shadow, --nav-w,
     --topbar-bg, --accent-solid: вони більше ніде не оголошені, тож двох
     власників не мають. */
  --border-warm: var(--accent-wash-2);   /* тепла рамка ключових поверхонь */

  /* --card-shadow, --nav-w і --topbar-bg ЗВІДСИ ПРИБРАНО — усі три
     дублювали core/01_base.css і вигравали в нього. Чинні значення (саме
     ці) переїхали туди разом із поясненнями. */

  /* Бурштин як ЗАЛИВКА — однаковий в обох темах (див. .btn-primary). */
  --accent-solid: #f0a500;
  /* Підкладки (активний пункт меню, вибраний крок, теплі рамки) беруть саме
     цей rgb. У світлій темі --accent-rgb навмисно затемнений під текст на
     білому — як 10-відсоткова підкладка він дає брудно-брунатний, а не
     бурштин: колір бренду мусить лишатись тим самим у обох темах. */
  --accent-solid-rgb: 240, 165, 0;
}

:root[data-theme="light"]{
  /* Лінії й заливки — див. коментар у темному :root вище: єдиний власник
     тепер core/01_base.css. */
  --border-warm: var(--accent-t-wash-3);
  --accent-solid: #f0a500;
  /* Підкладки (активний пункт меню, вибраний крок, теплі рамки) беруть саме
     цей rgb. У світлій темі --accent-rgb навмисно затемнений під текст на
     білому — як 10-відсоткова підкладка він дає брудно-брунатний, а не
     бурштин: колір бренду мусить лишатись тим самим у обох темах. */
  --accent-solid-rgb: 240, 165, 0;
}

:root{
  /* --sans ЗВІДСИ ПРИБРАНО: він був оголошений і тут, і в core/01_base.css,
     і вигравав цей файл. Тепер власник один — файл типографіки. Пояснення,
     чому саме Geologica, переїхало туди разом зі значенням. */

  /* --ease ЗВІДСИ ПРИБРАНО: власник — core/00_theme.css, де вже стоїть та
     сама крива. */
}

body{
  font-family: var(--sans);
  letter-spacing: -.006em;
}

/* Geologica ширша за Inter на однаковому кеглі — щоб щільні місця (навігація,
   підписи полів, чипи) не почали переносити рядки, вони трохи тісніші. */
.nav-item, .chip, .badge, .ov-stat .k, .modal-label{ letter-spacing: -.012em; }

/* ── 2. Хром: шапка й навігація ─────────────────────────────────────────── */
.topbar{
  border-bottom: 1px solid var(--border-soft);
  gap: var(--sp-12);
}
.icon-btn{ width: 34px; height: 34px; border-radius: var(--ctl-radius-sm); border-color: transparent; }
.icon-btn:hover{ background: var(--fill-1); border-color: transparent; }

/* Пігулки в шапці — однакова геометрія, заливка замість рамки. */
.runs-chip, .conn-pill, .user-pill, .credits-chip, .brand-switch, .palette-open{
  border: 1px solid transparent !important;
  background: var(--fill-1) !important;
  border-radius: 999px;
  height: 34px;
}
.palette-open{ border-radius: 10px !important; }
.runs-chip:hover, .credits-chip:hover, .brand-switch:hover, .palette-open:hover{
  background: var(--fill-2) !important;
}
.conn-pill.on{ background: rgba(var(--ok-rgb),.10) !important; }
.conn-pill.off{ background: rgba(var(--danger-rgb),.10) !important; }

.nav{
  width: var(--nav-w);
  padding: 14px 12px;
  border-right: 1px solid var(--border-soft);
  background: transparent;   /* окремий відтінок сайдбару читався як друга сторінка */
}
/* Радіус 12 = 16 (рейка) − 4 (відступ): концентрично, а не «на око». */
.nav-item{
  padding: 9px 11px; border-radius: var(--radius-sm);
  font: 500 var(--fs-13)/1 var(--sans); letter-spacing: -.01em;
  color: var(--text-mute);
}
.nav-item:hover{ background: var(--fill-1); color: var(--text); }
/* Активний пункт: ЯСКРАВІСТЬ, а не колір.
   Попередня правка вже прибрала звідси градієнтну плашку зі смужкою — три
   сигнали замість одного. Але лишила бурштин, і саме він тепер заважає:
   бурштин у застосунку означає «дія, яка щось коштує», а пункт меню не
   коштує нічого. Поки ним світився напис «Чат», головна кнопка екрана
   ділила з ним увагу.

   Кольором активний пункт і не читався б: прийом із п'ятипунктової рейки
   не переноситься на 12 пунктів у 4 групах. Читається щільність. */
.nav-item.active{
  color: var(--text);
  background: var(--fill-2);
  font-weight: 600;
  box-shadow: none;
}
.nav-item.active::before{ display: none; }

.workspace{ padding: 24px 32px 72px; }
.page-mid{ max-width: 1280px; }
/* Ширший захват для екранів, де головне — медіа, а не текст: 1280 задає
   комфортну довжину РЯДКА, але сітку зображень воно штучно тримає вужчою за
   екран, і права третина монітора лишається порожньою. */
.page-wide{ max-width: 1520px; margin: 0 auto; }

/* Смуга онбордингу. Була підкладка кольору попередження на всю ширину з
   жирним текстом того ж кольору — вона читалась як АВАРІЯ, хоча повідомляє
   лише «є ще кроки». Тепер: нейтральна заливка, крапка акценту, звичайна вага. */
.onb-banner{
  background: var(--fill-1); border-bottom: 1px solid var(--border-soft);
  padding: 8px 32px;
}
.onb-banner-text{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }

/* ── 3. Керування ──────────────────────────────────────────────────────
   🛑 ЗВІДСИ ПРИБРАНО ВСЕ ПРО КНОПКИ. Тут стояло друге визначення `.btn`,
   `.btn-sm`, `.btn-ghost`, `.btn-primary`, `.btn-danger` і
   `.btn-outline` — і воно сперечалося з тим, що в core/02_shell.css:
   висота 38 проти 36, суцільна заливка проти градієнта, ховер #ffbc38
   проти brightness(1.08). Вигравало це, бо skin.css вантажиться
   останнім, — тобто правило працювало не там, де його шукали.

   Тепер кнопка описана ОДИН раз у core/02_shell.css, а її значення
   лежать токенами в core/01_base.css. Виміряний вигляд збережено до
   пікселя: у токени пішли саме ті числа, що перемагали тут.

   Якщо кортить дописати сюди правило для кнопки — це знак, що бракує
   токена. Додайте токен. */


/* 🛑 ЧИП ЗВІДСИ ПРИБРАНО — та сама історія, що з кнопкою. Тут стояло
   друге визначення `.chip`, `.chip:hover` і `.chip.active`, і воно
   сперечалося з core/02_shell.css: 34px проти 32, вага 500 проти 600,
   активний нейтральний проти бурштинового. Вигравало це, бо skin.css
   вантажиться останнім, — тобто правило працювало не там, де його
   шукали.

   Аргумент про «активний чип більше не бурштиновий» нікуди не подівся:
   він переїхав у core/01_base.css до токена --chip-active-bg разом із
   поясненням. Виміряний вигляд збережено до пікселя. */


/* Бейдж. Було 10.5px МОНО КАПСОМ із трекінгом — набір, який у 2015-му означав
   «технологічно», а сьогодні означає «шаблон»: дрібні капси мономаркою вимагають
   зусилля на прочитання й кричать там, де мали б підказувати. Стало звичайний
   регістр, той самий шрифт, що й решта інтерфейсу. */
.badge{
  border: 1px solid transparent; background: var(--fill-1);
  font: 600 var(--fs-11)/1.4 var(--sans); letter-spacing: 0; text-transform: none;
  padding: 4px 10px;
}
.badge-ok{ background: var(--fill-1); border-color: transparent; }
.badge-warn{ background: var(--accent-wash-2); border-color: transparent; color: var(--accent); }
.badge-danger{ background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: transparent; }

/* Поле й селект — 40px, як у конкурентів. 34px читається як «форма в
   налаштуваннях», 40px — як прилад, у який щось вводять по ділу. */
.inp{
  min-height: 40px; padding: 10px 13px;
  background: var(--fill-1); border-color: transparent;
  font: 500 var(--fs-13)/1.4 var(--sans);
  border-radius: var(--radius-sm);
}
.inp:hover{ background: var(--fill-2); border-color: transparent; }
.inp:focus{ background: var(--fill-1); border-color: var(--accent); }
select.inp{ padding-right: 34px; }
textarea.inp{ min-height: 92px; line-height: 1.55; }

/* ── 4. Поверхні ───────────────────────────────────────────────────────── */
/* 🛑 ЦЕЙ РЯДОК І ДАВАВ 202 РАМКИ В ОДНОМУ КАДРІ.
   Одне оголошення на п'ять класів — і кожна панель, картка, плитка й
   модалка в застосунку отримували лінію по колу. Разом виходила сітка
   ліній поверх усього, де кожна однаково гучна, а отже жодна нічого не
   розділяє: рамка перестає бути межею, коли межа всюди.

   Заливка `--panel` уже світліша за тло — вона й тримає форму. Рамка
   навколо неї лише повторювала сказане.

   Лінія лишається там, де справді РОЗДІЛЯЄ рівні: під шапкою, між
   рядками таблиці, на оправі сцени. Ці правила живуть окремо й тут не
   зачеплені. */
.panel{ border: 0; border-radius: var(--radius-lg); padding: 18px 20px; }
.card, .tile, .conn-card, .st-recent-card{ border: 0; }
/* Модалка — єдиний виняток, і не через смак. Вона лежить поверх розмитого
   тла того ж сімейства кольорів, і без власного краю її верхня межа
   зливається з розмиттям. Тінь окреслює низ, тонка тепла лінія — верх. */
.modal-card{
  border: 1px solid var(--border-warm); border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
}
.modal-overlay{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Плитка з медіа не має власної коробки: рамка навколо картинки з'їдає
   картинку. Форму тримає сама мініатюра.

   Специфічність тут навмисна: cards_premium.css оголошує `.gal-item.gp-card`
   (0,2,0), тож простий `.gal-item` програвав би йому навіть із пізнішого
   файлу — і галерея лишалась би єдиним розділом зі старим виглядом. */
.gal-item, .lib-media-tile, .mp-item{ background: none; border: 0; border-radius: 0; }
.gal-item.gp-card, .lp-card{
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.gal-item.gp-card:hover, .lp-card:hover{
  transform: translateY(-2px); border-color: transparent; box-shadow: none;
}
/* 4:5 замість квадрата — та сама пропорція, що в Instagram і в «Огляді»:
   мініатюра мусить показувати кадр так, як його побачить аудиторія. */
.gp-thumb, .lp-thumb{ aspect-ratio: 4/5; border-radius: var(--radius-sm); }
.gal-item.gp-card .gal-body, .lp-body{ padding: 9px 2px 0; }
.gal-thumb, .mp-thumb{ border-radius: var(--radius-sm); overflow: hidden; }
.gal-grid{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-14); }

.empty{ border: 1px dashed var(--border); background: var(--fill-1); border-radius: var(--radius); }

/* ── 5. Огляд ──────────────────────────────────────────────────────────────
   Було: вітальна плашка з годинником, три картки стану, чотири картки
   підключень, дві картки швидкого старту — дев'ять майже однакових
   прямокутників і жодного домінантного елемента. Стало: один рядок шапки,
   три числа без коробок, сітка того, що продукт зробив, і рядок підключень. */
.ov-head{
  display: flex; align-items: flex-end; gap: var(--sp-16); flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.ov-head h1{
  margin: 0; font: 700 30px/1.1 var(--sans); letter-spacing: -.03em;
}
.ov-head .ov-date{ color: var(--text-mute); font-size:  var(--fs-13); margin-bottom: 5px; }
.ov-head .ov-sp{ flex: 1 1 auto; }
.ov-head-acts{ display: flex; gap: var(--sp-8); align-items: center; }

.ov-stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 30px;
}
.ov-stat{ padding: 22px 26px 22px 0; border-right: 1px solid var(--border-soft); min-width: 0; }
.ov-stat:last-child{ border-right: 0; }
.ov-stat .k{
  display: block; margin-bottom: 12px;
  font: 500 var(--fs-11)/1 var(--sans); letter-spacing: .06em;  color: var(--text-mute);
}
.ov-stat .v{
  font-family: var(--mono); font-weight: 600; font-size: 38px; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 7px; min-height: 38px;
}
.ov-stat .v.acc{ color: var(--accent); }
.ov-stat .v .u{ font: 600 var(--fs-12)/1 var(--sans); color: var(--text-mute); letter-spacing: 0; }
.ov-stat .t{ margin-top: 10px; font-size:  var(--fs-12); color: var(--text-dim); }
.ov-stat .t .dt{
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  margin-right: 7px; vertical-align: middle; background: var(--text-mute);
}
.ov-stat .t .dt.ok{ background: var(--ok); }
.ov-stat .t .dt.warn{ background: var(--accent); }
.ov-stat .t .dt.bad{ background: var(--danger); }

/* Заголовок ряду: підпис, а не другий заголовок сторінки. */
.ov-row-head{
  display: flex; align-items: baseline; gap: var(--sp-12);
  margin: 34px 0 14px;
}
.ov-row-head h2{
  margin: 0; font: 600 var(--fs-15)/1 var(--sans);  color: var(--text);
}
.ov-row-head .n{ font: 400 var(--fs-12)/1 var(--sans); color: var(--text-mute); }
.ov-row-head .sp{ flex: 1; }
.ov-row-head a{
  font: 500 var(--fs-12)/1 var(--sans); color: var(--text-dim); text-decoration: none;
  cursor: pointer;
}
.ov-row-head a:hover{ color: var(--accent); }

/* ОДИН ряд, завжди повний. Два підходи, які я відкинув, і чому:
   `auto-fill` клав вісім плиток як 6 + 2 — обірваний другий ряд читається як
   «не догрузилось»; фіксовані 4 колонки на 1900px роздували плитку до 300px,
   і «останнє зроблене» починало важити більше за все інше на екрані.
   Тут ряд один, ширина ділиться порівну, а зайві плитки ховаються за
   шириною екрана — тож ряд рівний на будь-якому моніторі. */
.ov-media{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-14);
}
@media (max-width: 1560px){ .ov-tile:nth-child(n+7){ display: none; } }
@media (max-width: 1240px){ .ov-tile:nth-child(n+6){ display: none; } }
@media (max-width: 1000px){ .ov-tile:nth-child(n+5){ display: none; } }
@media (max-width: 820px){ .ov-tile:nth-child(n+4){ display: none; } }
@media (max-width: 560px){ .ov-tile:nth-child(n+3){ display: none; } }
/* Порожній стан — не колонка сітки, а повноширинний блок. */
.ov-media:has(.ov-media-empty){ display: block; }
.ov-tile{ display: flex; flex-direction: column; gap: var(--sp-8); cursor: pointer; min-width: 0; }
.ov-tile .th{
  aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden; position: relative;
  background: var(--fill-1);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ov-tile .th img, .ov-tile .th video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-tile:hover .th{ filter: brightness(1.07); transform: translateY(-2px); }
.ov-tile .kind{
  position: absolute; left: 8px; bottom: 8px;
  font: 600 var(--fs-10)/1 var(--sans);  background: rgba(0,0,0,.62); color: #fff; padding: 4px 7px; border-radius: var(--radius-xs);
}
.ov-tile .nm{
  font: 400 var(--fs-13)/1.35 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-tile .dt{ font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }

/* Порожньо — не «сумна коробка», а запрошення зробити перше. */
.ov-media-empty{
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; background: var(--fill-1);
}
.ov-media-empty .t{ font: 600 var(--fs-14)/1.4 var(--sans); }
.ov-media-empty .s{ margin: 6px 0 14px; font-size:  var(--fs-13); color: var(--text-dim); }

/* Підключення — рядок, а не чотири картки на всю ширину. */
.ov-conns{ display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.ov-conn{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--fill-1); border: 1px solid transparent;
  font: 500 var(--fs-13)/1 var(--sans); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.ov-conn:hover{ background: var(--fill-2); }
.ov-conn .ic{ width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.ov-conn .ic svg{ width: 18px; height: 18px; display: block; }
.ov-conn .st{ color: var(--text-mute); font-size:  var(--fs-12); }
.ov-conn .st.ok{ color: var(--ok); }

/* Швидкий старт — рядок дій, а не картки. */
.ov-quick{ display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* ── 6. Studio: кроки й вибір формату ─────────────────────────────────────
   Крок-лічильник був градієнтною плашкою кольору бренду з внутрішньою
   рамкою й другим градієнтом на кружечку — дві заливки на елементі, який
   лише каже «ви тут». Стало: тепла заливка й акцентний номер. */
.st-step{
  background: var(--fill-1); border-color: transparent;
  font: 500 var(--fs-11)/1.2 var(--sans); padding: 11px 8px;
}
.st-step:hover{ background: var(--fill-2); }
.st-step-num{
  background: var(--fill-2); border-color: transparent;
  font: 600 var(--fs-11)/1 var(--mono); color: var(--text-dim);
}
.st-step.active{
  background: var(--accent-wash-2); color: var(--accent);
  box-shadow: none; border-color: transparent;
}
.st-step.active .st-step-num{
  background: var(--accent-solid); background-image: none; color: #17140c;
}
.st-step.done{ color: var(--ok); background: var(--fill-1); }

/* Вибір формату — головна розвилка всього продукту. Була рамка 1.5px і
   градієнтний бордер у вибраного; тепер форму тримає заливка, а вибір
   позначає теплий фон і акцентна іконка. */
.st-format-card{
  background: var(--fill-1); border: 1px solid transparent; padding: 28px 18px;
}
.st-format-card:hover{ background: var(--fill-2); border-color: transparent; }
.st-format-card.selected{
  background: var(--accent-wash-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi);
}
.st-format-card.selected .st-format-ic{ color: var(--accent); }
.st-format-label{ font: 600 var(--fs-15)/1.3 var(--sans); letter-spacing: -.01em; }
.st-format-desc{ font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-mute); }
/* Крок 1: панель навколо трьох карток — коробка в коробці. Прибрана. */
#stPanel1{ background: none; border: 0; padding: 0; box-shadow: none; }

/* ── СЦЕНА: вкладений корпус ───────────────────────────────────────────────
   Виміряно в них: оболонка з відступом 4px, всередині панель радіус 16.
   Робить це не зайвий <div>, а кільце тіні: spread 4px малює оправу, і її
   радіус автоматично дорівнює 16+4=20 — тобто криві концентричні за
   побудовою, а не «на око». */
#stPanel2, #stPanel3, #stPanel4, #stPanel5, #stPanel6, .bt-box{
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 0 0 4px var(--fill-1);
}

/* ── Крокомір ──────────────────────────────────────────────────────────────
   Було шість блоків по 63px заввишки — смуга службової навігації, вища за
   деякі кроки, які вона підписує. Стало один рядок 34px: крок — це «де я»,
   а не окремий екран. */
.st-stepper{ gap: var(--sp-4); margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; }
.st-step{
  flex: 1 1 0; min-width: 0;
  flex-direction: row; justify-content: center; gap: var(--sp-8);
  height: 34px; padding: 0 10px; border-radius: var(--ctl-radius-sm);
  font: 500 var(--fs-12)/1 var(--sans); white-space: nowrap;
}
.st-step > span:last-child{ overflow: hidden; text-overflow: ellipsis; }
.st-step-num{ width: 18px; height: 18px; font-size:  var(--fs-10); }
@media (max-width: 900px){
  .st-step{ flex: 0 0 auto; }
  .st-step > span:last-child{ display: none; }
  .st-step.active > span:last-child{ display: inline; }
}

/* ── Дека налаштувань ──────────────────────────────────────────────────────
   Було: сітка 2×N, у кожній клітинці підпис зверху й контрол знизу. Це
   ФОРМА — читається згори вниз, і щоб знайти «Модель», треба обійти очима
   всю площину.

   Стало: рядки «підпис ліворуч — значення праворуч», розділені волосяними
   лініями. Це та сама пара «Підпис: Значення», що в них у чипах, але
   вибудувана в колонку. Чому не чипами, як у них: у них 4 налаштування, у
   нас 8-14 — чотирнадцять пігулок складаються в хмару, у якій нічого не
   знайти, а вирівняні рядки скануються за один прохід. Зручність вища за
   схожість. */
#stPanel3 .st-settings-grid, #stPanel3 .st-adv-grid{ display: block; }
#stPanel3 .st-settings-grid > .st-field,
#stPanel3 .st-adv-grid > .st-field{
  display: grid; grid-template-columns: 176px minmax(0, 1fr);
  align-items: center; gap: 10px 18px;
  padding: 10px 0; margin: 0;
  border-bottom: 1px solid var(--border-soft);
}
#stPanel3 .st-settings-grid > .st-field:last-child,
#stPanel3 .st-adv-grid > .st-field:last-child{ border-bottom: 0; }
/* Поля з вільним текстом — підпис вирівняний по верху, а не по центру
   двохсотпіксельної області. */
#stPanel3 .st-field:has(textarea), #stPanel3 .st-field:has(.cmp-nets){ align-items: start; }
#stPanel3 .st-field:has(textarea) > .modal-label{ padding-top: 9px; }
#stPanel3 .st-field > .modal-label{ margin: 0; font: 500 var(--fs-13)/1.35 var(--sans); color: var(--text-dim); }
@media (max-width: 720px){
  #stPanel3 .st-settings-grid > .st-field,
  #stPanel3 .st-adv-grid > .st-field{ grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* Позначка «вартість». Була 10px МОНО КАПСОМ у рамці — кричала так само
   голосно, як сама назва поля. Тепер тихий бурштиновий натяк: вона мусить
   попереджати, а не змагатись за увагу з підписом. */
.st-opt-tag{
  font: 500 var(--fs-11)/1 var(--sans); text-transform: none; letter-spacing: 0;
  color: var(--accent); background: var(--accent-wash-2);
  border: 0; padding: 3px 8px;
}

/* Чипи вибору. Активний був залитий СИНІМ градієнтом LinkedIn (--grad-li) —
   тобто найчастіший елемент вибору в застосунку носив колір чужої платформи.
   І моношрифт на словах («Кінематографічний») читається гірше за звичайний;
   табличні цифри лишаємо, бо серед варіантів є числа. */
.st-aspect-btn{
  height: 34px; padding: 0 14px;
  background: var(--fill-1); border: 1px solid transparent;
  font: 500 var(--fs-12)/normal var(--sans); font-variant-numeric: tabular-nums;
}
.st-aspect-btn:hover{ background: var(--fill-2); border-color: transparent; color: var(--text); }
.st-aspect-btn.active{
  background: var(--accent-wash-2); color: var(--accent);
  border-color: transparent;
}
.st-count-btn{
  border: 1px solid transparent; background: var(--fill-1); border-radius: var(--ctl-radius-sm);
}
.st-count-btn:hover{ background: var(--fill-2); border-color: transparent; }
.st-count-val{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Картка вибору продукту (крок 2) — рамка 2px зникає. */
.st-pick-card{ background: var(--fill-1); border: 1px solid transparent; }
.st-pick-card:hover{ background: var(--fill-2); border-color: transparent; }
.st-pick-card.selected{
  background: var(--accent-wash-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi);
}

/* Розширені — та сама мова: заливка замість коробки. */
.st-advanced{ background: var(--fill-1); border: 0; border-radius: var(--radius); }
.st-advanced > summary:hover{ background: var(--fill-1); }
.st-advanced-summary-text .lbl{ font-weight: 600; }
.st-advanced-badge{
  font: 500 var(--fs-11)/1 var(--sans); text-transform: none; letter-spacing: 0;
  background: var(--fill-2); border: 0; padding: 4px 9px;
}
.st-adv-strip-head{
  font: 600 var(--fs-12)/1 var(--sans); text-transform: none;  color: var(--text-dim);
}

/* ── 8. Studio: панель дій ──────────────────────────────────────────────────

/* ── 7. Studio: панель дій ──────────────────────────────────────────────────
   Патерн, який у конкурентів робить сторінку «дорогою»: усе рішення зібране
   в одну плаваючу поверхню з великим радіусом і теплою рамкою, ціна й
   головна кнопка — праворуч, великі. */
/* Липка панель дій. Класи `.st-foot` і `.st-actions-sticky`, які я тут писав
   раніше, у розмітці не існують — реальний елемент один: `.st-panel-foot
   .st-foot-cost`. Правило, націлене в порожнечу, нічого не ламає й тому не
   помічається; знайдено при звірці зі шаблоном.

   Відступи від'ємні рівно на padding сцени (20/22) — панель має впиратись у
   її краї, інакше під нею лишається смужка фону й «липкість» видно як шов. */
.st-foot-cost{
  margin: 20px -22px -20px; padding: 14px 22px;
  border-top: 1px solid var(--border-warm);
  border-radius: 0 0 15px 15px;
  background: rgba(var(--bg-rgb), .93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* «Назад» ліворуч, усе інше праворуч — і коли ціна показана, і коли ні.
   Через margin-right:auto на першому елементі, а не через justify-content:
   ціна теж має margin-left:auto, і два «auto» поділили б вільне місце
   навпіл — головна кнопка опинилась би посеред підвалу. */
.st-foot-cost > :first-child{ margin-right: auto; }
/* Головна дія — великий суцільний блок праворуч, як у них (144×84). У нас
   пропорції екрана інші, тож 46px заввишки: помітно більша за «Назад», але
   не блок на пів підвалу. */
.st-foot-cost .btn-primary{
  height: 46px; padding: 0 22px; border-radius: var(--radius-sm); font-size:  var(--fs-14);
}
/* Ціна — герой підвалу, а не примітка коло кнопки. */
.st-cost-inline-est{ font-size: 26px; }
.st-cost-inline-est .lbl{ font-size:  var(--fs-14); }

.st-balance-pill, .st-run-chip{
  background: var(--fill-1); border-color: transparent; font-weight: 600;
}

/* ── 8. Studio, кроки 4-6 ─────────────────────────────────────────────────
   Виміряно на стенді (`frontend/_st456.html`): три кроки хворіли на те саме —
   коробки навколо кожного елемента, центрування замість вирівнювання, і ДВІ
   різні мови медіа в одному кроці (відео 260px у рамці 2px проти квадратних
   мініатюр 90px). Продукт, у якого медіа виглядає по-різному на сусідніх
   екранах, читається як зібраний із кількох. */

/* ── Крок 4: ворота розкадровки ──────────────────────────────────────────
   Було суцільне обведення кольором акценту на всю висоту блоку — це кричить
   «аварія», хоча повідомляє «подивись і вирішуй». Тепла оправа замість
   рамки: помітно, але спокійно. */
.st-review{
  border: 1px solid var(--border-warm);
  box-shadow: 0 0 0 4px var(--accent-wash-1);
  border-radius: var(--radius); padding: 18px 20px;
}
.st-rev-title{ font: 600 var(--fs-15)/1.3 var(--sans); letter-spacing: -.01em; }
.st-rev-round, .st-rev-badge{
  font: 500 var(--fs-11)/1 var(--sans); text-transform: none; letter-spacing: 0;
  border: 0; background: var(--fill-1); padding: 5px 10px; color: var(--text-dim);
}
.st-rev-badge.v-ok{ background: rgba(var(--ok-rgb),.12); }
.st-rev-badge.v-warn{ background: var(--accent-wash-2); }
.st-rev-badge.v-fail{ background: rgba(var(--danger-rgb),.12); }
.st-rev-summary{ font: 400 var(--fs-13)/1.55 var(--sans); color: var(--text-dim); }

/* Кадр — це кадр, а не картка з кадром. Стан кодує КРАПКА й текст зауваження,
   а не рамка навколо зображення: рамка кольору попередження навколо картинки
   змінює саму картинку, а судити треба її. */
.st-rev-frame{
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.st-rev-frame-img img{ border-radius: var(--radius-sm); }
.st-rev-frame.v-warn .st-rev-frame-img img{ box-shadow: 0 0 0 2px var(--accent-glow); }
.st-rev-frame.v-fail .st-rev-frame-img img{ box-shadow: 0 0 0 2px var(--danger); }
.st-rev-frame-body{ padding: 9px 2px 0; }
.st-rev-frame-head{ font: 600 var(--fs-13)/1 var(--sans); }
.st-rev-scene{ font: 400 var(--fs-12)/1.45 var(--sans); }
.st-rev-issues li{ font: 400 var(--fs-12)/1.45 var(--sans); }
.st-rev-sheet img{ border: 0; border-radius: var(--radius-sm); }

/* Кнопки воріт — та сама геометрія, що в решти застосунку. Три різні види
   кнопок на одному екрані («Перемалювати», «Так, рендерити», «Обрати») були
   з трьох різних наборів. */
.st-rev-regen, .st-rev-regen-go, .st-rev-opt, .st-ctl-btn, .st-vid-act{
  height: 34px; padding: 0 14px; border-radius: var(--ctl-radius-sm);
  border: 1px solid transparent; background: var(--fill-1);
  font: 600 var(--fs-12)/1 var(--sans); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.st-rev-regen:hover, .st-rev-regen-go:hover, .st-ctl-btn:hover:not(:disabled),
.st-vid-act:hover, .st-rev-opt:hover:not(:disabled){
  background: var(--fill-2); border-color: transparent;
}
.st-rev-opt.primary, .st-ctl-btn.primary{
  background: var(--accent-solid); color: #17140c; border-color: transparent;
}
.st-rev-opt.primary:hover, .st-ctl-btn.primary:hover{ background: #ffbc38; }
/* Ціна всередині кнопки — числом, а не пігулкою в рамці. */
.st-rev-price{
  border: 0; background: none; padding: 0; margin-left: 8px;
  font: 600 var(--fs-12)/1 var(--mono); color: inherit; opacity: .72;
}
.st-rev-price.short{ color: var(--danger); opacity: 1; }
.st-ctl-input{
  height: 34px; padding: 0 14px; border-radius: var(--ctl-radius-sm);
  border: 1px solid transparent; background: var(--fill-1);
  font: 500 var(--fs-12)/1 var(--sans);
}
.st-ctl-input:focus{ border-color: var(--accent); }

/* Живий прогін */
.st-story{ background: var(--fill-1); border: 0; border-radius: var(--radius); }
.st-story h4{ font: 600 var(--fs-12)/1 var(--sans); text-transform: none; letter-spacing: .01em; }
.st-story .k{ font: 500 var(--fs-11)/1 var(--sans); letter-spacing: .05em; }
.st-story .v{ font-weight: 500; }
.st-story .hook-type{
  border: 0; background: var(--accent-wash-2); color: var(--accent);
  font: 500 var(--fs-11)/1.5 var(--sans);
}
.st-ladder li{
  border: 0; background: var(--fill-1); font: 500 var(--fs-11)/1 var(--sans); padding: 6px 11px;
}
.st-ladder li.now{ background: var(--accent-wash-2); color: var(--accent); }
.st-strip-item img{ border: 0; border-radius: var(--ctl-radius-sm); }
.st-strip-item .cap{ font: 400 var(--fs-11)/1.25 var(--sans); }
.st-concept{ background: var(--fill-1); border: 0; }
.st-concept-head{ font: 600 var(--fs-12)/1 var(--sans); text-transform: none; letter-spacing: .01em; }
.skill-log{ background: var(--fill-1); border-radius: var(--radius); }
.skill-log .ln{ border-bottom: 1px solid var(--border-soft); }

/* ── Крок 5: вибір ────────────────────────────────────────────────────────
   `justify-content: center` лишав два ролики висіти посеред порожнечі —
   вирівняний ряд читається як «стільки є», центрований як «щось не
   догрузилось». І плитка більше не коробка: рамка 2px навколо кадру змінює
   кадр, який саме зараз оцінюють. */
/* Та сама сітка, що й у сітки зображень нижче: два ряди варіантів з різною
   шириною колонок читаються як два різні екрани, поставлені один на одного. */
.st-video-list{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-16); justify-content: start;
}
.st-video-tile{
  width: auto; background: none; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.st-video-tile:hover{ transform: translateY(-2px); box-shadow: none; }
.st-video-tile video, .st-video-tile img{
  height: auto; aspect-ratio: 9/16; max-height: none;
  border-radius: var(--radius-sm); object-fit: cover;
}
.st-video-tile.selected{ box-shadow: none; }
.st-video-tile.selected video, .st-video-tile.selected img{
  box-shadow: 0 0 0 2px var(--accent-solid);
}
.st-video-tile-label{ padding: 9px 2px 6px; text-align: left; font: 400 var(--fs-12)/1.35 var(--sans); }
.st-video-actions{ padding: 0 0 2px; }
.st-video-tile.selected .st-vid-act.pick{
  background: var(--accent-solid); color: #17140c; border-color: transparent;
}
.st-vid-act.trash{ flex: 0 0 auto; min-width: 38px; padding: 0 10px; }
.st-video-pick{ background: var(--accent-solid); color: #17140c; font-weight: 600; box-shadow: none; }
/* Підказка — рядок, а не пунктирна коробка на всю ширину. */
.st-video-hint{
  border: 0; background: none; border-left: 2px solid var(--border-warm);
  border-radius: 0; padding: 2px 0 2px 12px; text-align: left; margin-bottom: 16px;
}

/* Одна мова медіа на весь застосунок: 4:5, без рамки. Квадрат 1:1 у
   варіантах суперечив і «Огляду», і Галереї, і самим роликам поруч. */
.media-item{ aspect-ratio: 4/5; border: 0; border-radius: var(--radius-sm); background: var(--fill-1); }
.st-variant-grid{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-16); }
.st-variant-action{
  aspect-ratio: 4/5; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  font: 500 var(--fs-12)/1.35 var(--sans);
}
.st-variant-action:hover{ border-color: var(--accent); background: var(--fill-1); }
.st-carousel-group{ border: 0; background: var(--fill-1); }
.st-carousel-group.selected{
  background: var(--accent-wash-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi);
}
.st-carousel-tile{ border: 0; border-radius: var(--radius-sm); }

/* ── Крок 6: публікація ──────────────────────────────────────────────────
   Було: форма на дві третини, а те, ЩО саме піде в соцмережу, — двома
   квадратиками по 90px збоку. На екрані публікації герой — сам пост. */
#stPanel6 .st-ready-grid, .st-ready-grid{ grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-28); }
.st-ready-side .media-grid{ grid-template-columns: 1fr; gap: var(--sp-10); margin-bottom: 0; }
.st-ready-side .media-item{ aspect-ratio: 4/5; }
/* Карусель на десять слайдів зробила б цю колонку вищою за екран і виштовхнула
   б форму нагору. Колонка липка — тож обмежуємо її висотою вікна й гортаємо
   всередині, а не сторінкою. */
.st-ready-side{
  max-height: calc(100vh - var(--topbar-h) - 48px); overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 900px){
  #stPanel6 .st-ready-grid, .st-ready-grid{ grid-template-columns: 1fr; }
  .st-ready-side .media-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Липкий підвал на кроках, де внизу стоїть рішення. Той самий елемент, що на
   кроці 3: людина, яка догорнула до кінця списку варіантів, не має шукати
   кнопку назад угорі. */
#stPanel5 .st-panel-foot, #stPanel6 .st-ready-main .st-panel-foot{
  position: sticky; bottom: 0; z-index: 3;
  margin: 20px -22px -20px; padding: 14px 22px;
  border-top: 1px solid var(--border-warm);
  border-radius: 0 0 15px 15px;
  background: rgba(var(--bg-rgb), .93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#stPanel5 .st-panel-foot .btn-primary, #stPanel6 .st-panel-foot .btn-primary{
  height: 46px; padding: 0 22px; border-radius: var(--radius-sm); font-size:  var(--fs-14);
}

/* ── 9. Дрібне, що дає «дорого» ────────────────────────────────────────────
   Смуга прокрутки, виділення, фокус — три місця, які зазвичай лишають
   типовими й де інтерфейс видає, що його не доводили. */
*::selection{ background: var(--accent-t-edge); color: var(--text); }
*{ scrollbar-width: thin; scrollbar-color: var(--fill-3) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: var(--fill-2); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--fill-3); background-clip: content-box; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 10. Крок 4: вибір ідеї (Фаза 1e) ──────────────────────────────────────
   Та сама тепла оправа, що у воріт розкадровки: обидва чекпоінти — «подивись
   і вирішуй», і читатись вони мусять як один тип моменту, а не як два різні
   застосунки. Різниця лише в тому, що цей коштує нуль, і про це сказано
   словом, а не кольором. */
.st-ideas{
  border: 1px solid var(--border-warm);
  box-shadow: 0 0 0 4px var(--accent-wash-1);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.st-ideas-head{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.st-ideas-title{ font: 600 var(--fs-15)/1.3 var(--sans); letter-spacing: -.01em; }
.st-ideas-round{
  font: 500 var(--fs-11)/1 var(--sans); background: var(--fill-1);
  padding: 5px 10px; border-radius: var(--radius); color: var(--text-dim);
}
.st-ideas-free{
  margin-left: auto; font: 500 var(--fs-11)/1 var(--sans);
  background: var(--accent-wash-2); color: var(--accent);
  padding: 5px 10px; border-radius: var(--radius);
}
.st-ideas-note{
  font: 400 var(--fs-13)/1.55 var(--sans); color: var(--text-dim); margin-top: 8px;
}

/* Картка — це і є кнопка. Окрема кнопка «обрати» під карткою подвоювала б
   ціль і змушувала цілитись у маленьке, коли велике вже під курсором. */
.st-idea-list{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--sp-14); margin: 14px 0 4px;
}
.st-idea{
  appearance: none; font: inherit; color: inherit; text-align: left;
  width: 100%; display: block; border: 0; border-radius: var(--radius-sm);
  background: var(--fill-1); padding: 15px 16px;
  transition: background .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
button.st-idea{ cursor: pointer; }
button.st-idea:hover{ background: var(--fill-2); transform: translateY(-2px); }
button.st-idea:active{ transform: translateY(0); }
.st-idea.chosen{ box-shadow: 0 0 0 2px var(--accent-solid); }

/* Заголовок отримує ВЕСЬ рядок, чипи стоять над ним. Коли номер, чип носія
   й позначка «обрано» ділили рядок із назвою, назва з трьох слів ламалась на
   три рядки — герой картки програвав метаданим. */
.st-idea-head{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.st-idea-n{
  font: 600 var(--fs-11)/1 var(--mono, var(--sans)); color: var(--text-mute);
  min-width: 16px;
}
.st-idea-title{
  flex: 1 1 100%; order: 2; margin-top: 7px;
  font: 600 var(--fs-15)/1.25 var(--sans); letter-spacing: -.012em;
}
/* Аргумент — головний вимір різності набору, тому він пофарбований і стоїть
   попереду назви. Носій лишається приглушеним праворуч: він уточнює, ХТО
   демонструє, а не ЧИМ ідея бере. */
.st-idea-arg{
  font: 600 var(--fs-10)/1 var(--sans); letter-spacing: .02em; color: var(--accent);
  background: var(--accent-wash-2); padding: 4px 8px;
  border-radius: var(--radius);
}
.st-idea-carrier{
  margin-left: auto; font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute);
  background: var(--fill-2); padding: 4px 8px; border-radius: var(--radius);
}
.st-idea-chosen{
  font: 500 var(--fs-11)/1 var(--sans); color: var(--accent);
  background: var(--accent-wash-2); padding: 4px 8px;
  border-radius: var(--radius);
}

/* Речення про зміну — герой картки: саме воно, а не назва прийому, каже
   людині, ПРО ЩО буде ролик. */
.st-idea-change{
  font: 500 var(--fs-13)/1.5 var(--sans); margin-top: 10px; letter-spacing: -.006em;
}
/* Підпис над значенням, а не збоку. У колонці 269px бічний підпис забирав
   88px — третину ширини картки — і текст ішов по 25 символів у рядок. */
.st-idea-rows{ margin: 11px 0 0; display: grid; gap: 9px; }
.st-idea-rows dt{
  font: 500 var(--fs-10)/1 var(--sans); color: var(--text-mute);
  letter-spacing: .01em; margin-bottom: 3px;
}
.st-idea-rows dd{ font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); margin: 0; }
.st-idea-foot{
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border-soft);
  font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute);
}

.st-ideas-gate{ margin-top: 14px; }
.st-idea-alt{
  height: 34px; padding: 0 14px; border-radius: var(--ctl-radius-sm); border: 0;
  background: var(--fill-1); color: var(--text-dim); cursor: pointer;
  font: 500 var(--fs-12)/1 var(--sans); margin-top: 8px;
  transition: background .22s var(--ease);
}
.st-idea-alt:hover:not(:disabled){ background: var(--fill-2); color: var(--text); }
.st-ideas-hint{
  font: 400 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); margin-top: 9px;
}

/* ── 11. Вузькі екрани ──────────────────────────────────────────────────── */
@media (max-width: 860px){
  .st-idea-list{ grid-template-columns: 1fr; }
  .st-ideas-free{ margin-left: 0; }
  .workspace{ padding: 18px 16px 64px; }
  .ov-head h1{ font-size:  var(--fs-24); }
  .ov-stats{ grid-template-columns: 1fr; border-bottom: 0; }
  .ov-stat{
    padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--border-soft);
  }
  .ov-stat .v{ font-size: 30px; }
  .ov-media{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-10); }
}