/* ═══════════════════════════════════════════════════════════════════════════
   lolq.ai — ЛЕНТА РАЗДЕЛОВ, АКАДЕМИЯ И КАТАЛОГ ПРИЁМОВ

   Подключается ПОСЛЕ style.css: здесь только новое и ровно те правки шапки,
   которые нужны ленте. Ни один существующий селектор не переопределяется без
   класса .has-sections на шапке — без sections.js вёрстка обязана остаться
   ровно такой, какой была.

   ═══════════════════════════ РЕЖИМ МИНИМАЛИЗМА ═══════════════════════════
   Требование владельца, и оно про экономию внимания, а не про вкус:

     1. ОГОНЬ В НАВИГАЦИИ — ОДИН И ТОЛЬКО ПОД АКТИВНЫМ ПУНКТОМ. Правка
        27.08.2026 по прямому решению владельца: разделы стали единым
        сегмент-тумблером, и активный пункт залит огнём. Прежнее правило
        («огня в навигации нет») отменено ИМЕННО для этой подложки —
        одна ездящая пилюля на всю ленту, а не заливка на каждой кнопке.
        Везде остальное в шапке огня по-прежнему нет.
     2. ПЕРЕКЛЮЧЕНИЕ ВИДНО ДВИЖЕНИЕМ. Подложка едет под новый пункт
        (transform + transition), а не гаснет в одном месте и вспыхивает в
        другом: мигание глаз не связывает в одно событие.
     3. ТОНКИЕ ОБВОДКИ. У студии обводка 2–2.5px и «подушка» снизу — это язык
        рабочих карточек, объектов, которые двигают. Навигация ничего не
        двигает, ей хватает 1px.
     4. СПОКОЙНЫЕ ФОНЫ. Никакого второго стекла поверх стекла шапки.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── лента разделов ─────────────────────────── */

.tb-sections {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  /* Лента НЕ ПЕРЕНОСИТСЯ и не растёт: она прокручивается. Перенос второй
     строкой ломает требование «шапка в одну строку», а сжатие подписей
     превращает разделы в нечитаемые огрызки. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tb-sections::-webkit-scrollbar { display: none; }

/* Кнопка раздела. Одинаковая и для своих кнопок, и для перенесённых
   (#chat-btn, #music-btn, #account-btn, #admin-btn): у них остался класс
   .account-btn, поэтому обводку и тень студийной кнопки надо снять явно. */
.topbar.has-sections .tb-sec {
  flex: none;
  scroll-snap-align: start;
  height: var(--tb-h);
  min-height: var(--tb-h);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: none;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.topbar.has-sections .tb-sec:hover:not(:disabled) {
  color: var(--text);
  background: transparent;
  border-color: rgba(var(--ink-rgb), .16);
}
/* Нажатие не «проваливает» кнопку: у студийных кнопок это подушка объекта,
   а вкладка — не объект, её не вдавливают. */
.topbar.has-sections .tb-sec:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}
.topbar.has-sections .tb-sec.on {
  color: var(--text);
  font-weight: 800;
  border-color: rgba(var(--ink-rgb), .55);
  background: transparent;
}
/* «Тренды» писались строчными — единственный пункт с чужим регистром. */
.topbar.has-sections .tb-sec:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

/* Шапка с лентой: одна полоса — марка, разделы, режим и проект, личное.
   Второй ряд убран 27.08.2026: он занимал высоту ради двух контролов, а
   свободного места в строке на широком экране хватает с запасом. */
.topbar.has-sections {
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 10px;
}
.topbar.has-sections > #brand { order: 1; }
.topbar.has-sections > .tb-sections { order: 2; flex: 1 1 auto; }
/* Без margin-left:auto: автоотступ съедает ВСЁ свободное место, и лента
   разделов, честно объявленная гибкой, схлопывается до 29 пикселей. Правый
   край и так за ней — ленты достаточно, чтобы прижать личный блок. */
.topbar.has-sections > .tb-user { order: 4; }
/* Режим и проект — В ТОЙ ЖЕ строке меню (второй этаж добит 28.08: базовый
   flex 1 1 100% и был тем «условием», на котором вторая строка выживала
   между 701 и 900px). */
.topbar.has-sections > .tb-modeline { order: 3; flex: 0 1 auto; min-width: 0; }

/* Разделитель-линию перед личным блоком УБРАЛИ: рядом со стеклянными
   капсулами она читалась не как разделитель, а как обрезок чужой рамки —
   те самые «линии-артефакты» со скрина владельца. Капсулы разделяют себя
   сами. Туда же — рамка второго ряда у .tb-project (style.css оставляет ей
   border-top + padding-top от старой двухэтажной шапки). */
.topbar.has-sections > .tb-user::before { content: none; }
.topbar.has-sections .tb-project {
  border-top: none; padding-top: 0; margin: 0;
}
.topbar.has-sections > .tb-modeline { padding: 0; margin: 0; border: none; }


/* ─────── СЕГМЕНТ-ТУМБЛЕР РАЗДЕЛОВ: капсула с ездящей подложкой ─────── */
/* Капсула — ЖИДКОЕ СТЕКЛО, а не белая плашка: непрозрачная заливка поверх
   стеклянной шапки читается как чужая наклейка. Полупрозрачный фон, blur и
   светлая кромка сверху (внутренний блик) дают ту самую выпуклость. */
.topbar.has-sections .tb-sections {
  position: relative;
  align-self: center;
  height: var(--cap-h);
  padding: 4px;
  gap: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-solid) 42%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(var(--ink-rgb), .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 2px 10px rgba(var(--ink-rgb), .07);
}
:root[data-theme="dark"] .topbar.has-sections .tb-sections,
:root:not([data-theme="light"]).os-dark .topbar.has-sections .tb-sections {
  background: color-mix(in srgb, var(--card-solid) 55%, transparent);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 2px 12px rgba(0, 0, 0, .35);
}

/* ─────── ПРАВЫЙ КРАЙ ШАПКИ: ОДИН РОСТ, ОДНО СТЕКЛО ───────
   На тёмной теме он расползался: капсулы разной высоты, EN/RU в толстой
   белой обводке (border: 1px solid var(--ink) — а --ink в ночи светлый),
   бейдж токенов своей заливки, шестерёнка отдельной кнопкой. Приводим всё
   к одному: высота 34, стеклянный фон, волосяная рамка, один радиус. */
.topbar.has-sections .tb-user { gap: 8px; align-items: center; flex-wrap: nowrap; }
/* ЕДИНЫЙ РОСТ ВСЕЙ СТРОКИ. Все капсулы — 40px, как пилюля навигации:
   строка из блоков трёх разных высот читалась лесенкой (скрин владельца
   27.08). Ось задаёт align-items: center на самой шапке. */
.topbar.has-sections { --cap-h: 40px; align-items: center; }
.topbar.has-sections .tb-user > .theme-switch,
.topbar.has-sections .tb-user > .lang-switch,
.topbar.has-sections .tb-user > .points-badge,
.topbar.has-sections .tb-user > .account-btn,
.topbar.has-sections .tb-modeline .mode-badge,
.topbar.has-sections .tb-modeline .project-select,
.topbar.has-sections .tb-modeline .tb-new,
.topbar.has-sections .tb-modeline .tb-copy {
  height: var(--cap-h); min-height: var(--cap-h); padding: 0 12px;
  margin: 0; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; corner-shape: squircle;
  border: 1px solid rgba(var(--ink-rgb), .12);
  background: color-mix(in srgb, var(--card-solid) 52%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.topbar.has-sections .tb-user > .theme-switch,
.topbar.has-sections .tb-user > .lang-switch { padding: 0 3px; gap: 1px; }
.topbar.has-sections .tb-user .theme-switch button,
.topbar.has-sections .tb-user .lang-switch button {
  height: calc(var(--cap-h) - 10px); border: none; box-shadow: none; background: transparent;
  border-radius: 999px; color: var(--ink-muted);
}
/* Активный язык и тема — мягкая подложка, а НЕ чёрная/белая обводка. */
.topbar.has-sections .tb-user .theme-switch button.on,
.topbar.has-sections .tb-user .lang-switch button.on,
.topbar.has-sections .tb-user .lang-switch button.on:hover:not(:disabled) {
  background: rgba(var(--ink-rgb), .12); color: var(--text);
  border: none; box-shadow: none;
}
.topbar.has-sections .tb-user > .points-badge { padding-left: 30px; }
/* ⧉ и ＋ — круглые иконки одного размера. Прямоугольные капсулы без gap
   слипались в комок и наезжали на тему (скрин владельца 28.08). */
.topbar.has-sections .tb-modeline .tb-new,
.topbar.has-sections .tb-modeline .tb-copy {
  width: var(--cap-h); min-width: var(--cap-h); padding: 0; flex: none;
  /* font-size: 0 гасит ТЕКСТ «+ проект» из data-i18n — рисуется только знак
     из ::after; 15px здесь возвращали подпись, и рядом со знаком выходила
     каша «проект+» (скрин владельца). */
  border-radius: 50%; font-size: 0;
}
.topbar.has-sections .tb-modeline .tb-copy { font-size: 15px; }
.topbar.has-sections .tb-modeline .tb-new::after {
  content: "+"; font-size: 17px; font-weight: 800; line-height: 1;
}
.topbar.has-sections .tb-modeline .tb-project { gap: 8px; }
.topbar.has-sections .tb-modeline { gap: 8px; }

/* Меню профиля: «выйти» и «админка» ушли с правого края шапки сюда. */
.tb-user { position: relative; }
.tb-pmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  border-radius: 18px; corner-shape: squircle;
  background: color-mix(in srgb, var(--card-solid) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
              0 14px 34px rgba(var(--ink-rgb), .20);
  overflow: hidden; resize: none;
}
.tb-phead {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 8px;
  font-size: 11px; letter-spacing: .06em; text-transform: lowercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tb-pava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: var(--ink-muted); background: var(--inset) center / cover no-repeat;
  border: 1px solid var(--border); text-transform: none;
}
/* Пункт — ИМЕННО пункт меню: без рамок, без теней, без вида инпута и без
   resize-уголка (наследованный appearance у кнопок в тёмной теме давал
   «белое поле с плейсхолдером»). */
.tb-pmenu .tb-pitem {
  appearance: none; -webkit-appearance: none; resize: none; width: 100%;
  text-align: left; padding: 9px 12px; font-size: 13px; font-weight: 600;
  color: var(--ink); background: transparent; border: none; box-shadow: none;
  border-radius: 11px; corner-shape: squircle; cursor: pointer; min-height: 0;
}
.tb-pmenu .tb-pitem:hover { background: var(--inset); transform: none; }
.tb-pmenu .tb-pitem.danger { color: var(--danger-ink); }
/* Кнопка выхода и «сохранить аккаунт» живут в меню, а не в строке. */
.topbar.has-sections #logout-btn,
.topbar.has-sections #save-account-btn,
.topbar.has-sections #admin-btn,
/* Тема живёт ТОЛЬКО в меню профиля — из шапки убрана и на десктопе:
   капсула наезжала на EN/RU, а щёлкают её раз в неделю. */
.topbar.has-sections .theme-switch,
/* «Призрак-надпись» под капсулами — легаси-бейдж вида проекта. */
.topbar.has-sections #project-kind { display: none !important; }
/* Подложку двигает sections.js (moveIndicator). Она под кнопками, поэтому
   z-index у неё 0, а у кнопок — 1: без этого огонь накрыл бы подпись. */
.tb-seg-ind {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 0; height: 0; border-radius: 999px; corner-shape: squircle;
  background: var(--fire-ink);
  box-shadow: 0 1px 8px rgba(200, 96, 20, .28);
  opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.22, .9, .28, 1),
              width .26s cubic-bezier(.22, .9, .28, 1), opacity .16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tb-seg-ind { transition: opacity .16s ease; }
}
.topbar.has-sections .tb-sec {
  position: relative; z-index: 1;
  height: calc(var(--tb-h) - 4px); min-height: 0;
  padding: 0 14px; font-size: 13.5px;
  border-radius: 999px;
}
.topbar.has-sections .tb-sec.on {
  color: var(--on-fire);
  border-color: transparent;
  background: transparent;
}
.topbar.has-sections .tb-sec:hover:not(:disabled):not(.on) {
  border-color: transparent;
  background: rgba(var(--ink-rgb), .05);
}
/* «Студия» — главный вход, и он читается первым: чуть жирнее соседей. */
.topbar.has-sections .tb-sec[data-sec="studio"] { font-weight: 800; }

/* Режим и проект переехали в общую полосу: компактно и без своей плашки. */
.topbar.has-sections > .tb-modeline {
  order: 3; flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.topbar.has-sections .tb-project { gap: 6px; min-width: 0; }
.topbar.has-sections .tb-project .project-cover { display: none; }
.topbar.has-sections .project-select { max-width: 170px; }
/* «Новый проект» и «копия» — иконки: слово в общей полосе съедает место,
   которое нужнее разделам, а действие опознаётся значком. */
.topbar.has-sections .tb-new {
  font-size: 0; width: 30px; padding: 0; justify-content: center;
}
.topbar.has-sections .tb-new::after { content: "+"; font-size: 17px; font-weight: 800; }
.topbar.has-sections > .tb-user { order: 5; margin-left: auto; }

/* ОДНА СТРОКА НА ДЕСКТОПЕ, БЕЗ ВТОРОГО ЭТАЖА. Перенос был разрешён
   (flex-wrap: wrap) — и личный блок уезжал под капсулу режима, ровно тот
   второй ярус, который убирали. Теперь строка не переносится: сжимается
   лента разделов (она умеет прокручиваться), а не ломается раскладка. */
@media (min-width: 701px) {
  .topbar.has-sections { flex-wrap: nowrap; }
  /* Разделы НЕ сжимаются первыми: это главная навигация, и обрезанная лента
     («Студия · Генератор ›») — худшее, чем можно заплатить за место.
     Сжимается середина: селект проекта. */
  .topbar.has-sections > .tb-sections { flex: 0 0 auto; }
  .topbar.has-sections > .tb-modeline { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .topbar.has-sections > .tb-user { flex: 0 0 auto; margin-left: 0; }
}
/* Средние ширины: жмём личный блок, а не разделы — «выйти» есть в кабинете,
   а тема и язык переключаются значками. */
@media (max-width: 1500px) {
  .topbar.has-sections .theme-switch { transform: scale(.9); transform-origin: right center; }
  .topbar.has-sections .lang-switch button { padding: 0 6px; }
  .topbar.has-sections .profile-btn .profile-cap { display: none; }
  /* Капсула режима — значок и короткая подпись: полное «🎬 RAP CLIPS ▾»
     на средней ширине выталкивает личный блок за правый край. */
  .topbar.has-sections .mode-badge {
    max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar.has-sections .project-select { max-width: 120px; }
}
/* Лента режимов — третий ярус; в одной полосе для неё места нет, а режим уже
   назван капсулой рядом с проектом. */
.topbar.has-sections .mode-seg { display: none; }

/* Узкий десктоп: разделы сжимаются в значок с подписью, но полоса одна. */
@media (max-width: 1400px) {
  .topbar.has-sections .tb-sec { padding: 0 9px; font-size: 12.5px; gap: 5px; }
  .topbar.has-sections .tb-sec[data-ico]::before {
    content: attr(data-ico); font-size: 13px; margin-right: 5px;
  }
  .topbar.has-sections .project-select { max-width: 130px; }
}
@media (max-width: 1150px) {
  /* Ещё уже — только значки: подпись раздела здесь уже нечитаемый огрызок. */
  .topbar.has-sections .tb-sec { font-size: 0; padding: 0 10px; }
  .topbar.has-sections .tb-sec[data-ico]::before { font-size: 15px; margin: 0; }
}

/* ═══════ ТЕЛЕФОН: ГЛАВНАЯ НАВИГАЦИЯ — НИЖНИЙ ДОК ═══════
   Разделы уходят из шапки в закреплённую капсулу у нижнего края: так их
   достаёт большой палец, и так устроено любое мобильное приложение. Внизу
   был тумблер этапов — он меняется с ними местами и возвращается наверх
   липким степпером под шапкой (см. style.css, .stage-jump ≤700px): этапы
   принадлежат одному треку, а разделы — всему сервису, и постоянное место
   у экрана заслуживает второе, а не первое. */
@media (max-width: 700px) {
  /* БЕЗ backdrop-filter У ШАПКИ. Любой backdrop-filter у предка делает его
     containing block для position:fixed — с ним нижний док прилипал бы к
     низу ШАПКИ, а не экрана (на этом уже попался тумблер этапов). На
     телефоне шапка и так плотная, стекло ей ничего не добавляет. */
  .topbar.has-sections {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--card-solid);
  }
  .topbar.has-sections > .tb-sections {
    position: fixed; left: 50%; right: auto; top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 24px);
    z-index: 60; order: 0; flex: none; height: auto;
    justify-content: center; gap: 0; padding: 5px 6px;
    border-radius: 22px; corner-shape: squircle;
    background: color-mix(in srgb, var(--card-solid) 82%, transparent);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border: 1px solid rgba(var(--ink-rgb), .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                0 8px 24px rgba(var(--ink-rgb), .14);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar.has-sections > .tb-sections::-webkit-scrollbar { display: none; }
  /* Над доком стоит ряд этапов (#stage-jump, style.css): одна плашка —
     у дока нет верхнего скругления, ширина та же. */
  body:has(#stage-jump:not(:empty)) .topbar.has-sections > .tb-sections {
    left: 12px; right: 12px; transform: none; width: auto; max-width: none;
    border-radius: 0 0 18px 18px; border-top: 1px solid rgba(var(--ink-rgb), .08);
    justify-content: space-around;
  }
  .topbar.has-sections .tb-sec {
    flex-direction: column; gap: 2px; height: auto; padding: 5px 9px;
    font-size: 9px; font-weight: 700; line-height: 1.1;
  }
  .topbar.has-sections .tb-sec[data-ico]::before {
    content: attr(data-ico); font-size: 17px; margin: 0;
  }
  /* Подложка ездит и здесь — она считается по offsetLeft/Top кнопки. */
  #app { padding-bottom: 86px; }
  /* Шапка на телефоне — ОДНА строка: [лого][режим][проект][+] … [тема][ава].
     Вторая строка исчезает: между логотипом и правым блоком было пусто,
     а режим и проект жили этажом ниже. Копия проекта (⧉) на мобилке
     скрыта совсем — редкое действие не заслуживает места в строке. */
  .topbar.has-sections { flex-wrap: nowrap; --cap-h: 36px; gap: 6px; }
  .topbar.has-sections > .tb-modeline {
    order: 2; flex: 1 1 auto; min-width: 0; margin: 0;
    display: flex; justify-content: flex-start;
  }
  .topbar.has-sections .tb-project { gap: 6px; min-width: 0; }
  /* Специфичность не ниже, чем у общего правила капсул (.tb-modeline
     .tb-copy) — иначе display:inline-flex оттуда молча возвращает кнопку. */
  .topbar.has-sections .tb-modeline .tb-copy { display: none; }
  .topbar.has-sections .tb-modeline .mode-badge { max-width: 64px; padding: 0 8px; }
  .topbar.has-sections .project-select {
    max-width: 34vw; overflow: hidden; text-overflow: ellipsis;
  }
  /* Токены остаются у авы: ⚡N (текст ужимает renderUserBar), клик — кабинет. */
  .topbar.has-sections .tb-user > .points-badge {
    padding: 0 9px !important; font-size: 11px; letter-spacing: 0;
    background-image: none !important;   /* монетка-фон наезжала бы на ⚡N */
  }
  .topbar.has-sections .tb-user > .theme-switch { display: none; }
  .topbar.has-sections > .tb-user { order: 3; margin-left: auto; flex: none; }
  .topbar.has-sections #admin-btn { display: none; }
  .topbar.has-sections .profile-btn .profile-cap { display: none; }
  .topbar.has-sections .profile-btn {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    justify-content: center; overflow: hidden;
  }
  .tb-pmenu { right: 0; left: auto; min-width: 190px; }
}

/* Мобильная раскладка шапки и нижний док живут ВЫШЕ, в одном блоке 700px.
   Прежний дубль-блок (три строки, лента в шапке) удалён: он стоял ПОЗЖЕ по
   файлу и молча перебивал доку flex и кегль. */
@media (max-width: 560px) {
  /* Совсем узкий экран: марка сжимается до знака, чтобы разделам осталось
     место. Слово «lolq.ai» на 360px съедает треть строки и не сообщает
     ничего — человек уже внутри приложения. */
  .topbar.has-sections > #brand .brand-word { display: none; }
}

/* Тост: единственный в обычной студии (тост верстака живёт под ?nav=1). */
.sec-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 12px);
  z-index: 300;
  max-width: min(440px, 92vw);
  padding: 10px 16px;
  border: 1px solid rgba(var(--ink-rgb), .10);
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 6px 24px rgba(var(--ink-rgb), .12);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.sec-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Тренды — самостоятельная страница внутри SPA. Шапка остаётся общей, а
   рабочие панели студии уступают место полноширинной визуальной витрине. */
#app.trends-view > :not(.topbar):not(.trends-page) { display: none !important; }
#app.trends-view .topbar > .tb-modeline { display: none; }
.trends-page {
  width: 100%; min-height: calc(100vh - 84px); padding: clamp(20px, 3vw, 36px) 0 88px;
  color: var(--text);
}
.trends-loading { margin: 0; text-align: center; text-transform: lowercase; }
.trends-hero { text-align: left; width: 100%; max-width: none; box-sizing: border-box; margin: 0 auto 18px; padding: 0 18px; }
.trends-kicker {
  display: inline-block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 800; letter-spacing: .18em; color: var(--fire-ink); text-transform: lowercase;
}
.trends-hero h1 { margin: 0; font: 800 22px/1.1 var(--font-head); letter-spacing: -.03em; text-transform: none; }
.trends-hero p { max-width: 650px; margin: 22px auto 28px; color: var(--ink-muted); font-size: clamp(14px, 1.5vw, 18px); }
/* Фильтры — ОДНА прокручиваемая строка пилюль: перенос на 50 названий давал
   блок в пол-экрана на телефоне, а ширина по контенту уезжала за край. */
.trends-filters {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  width: 100%; max-width: 100%; box-sizing: border-box; margin: 12px 0 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px 0 6px;
}
.trends-filters::-webkit-scrollbar { display: none; }
.trends-filter {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 0 14px; border: 1px solid rgba(var(--ink-rgb), .10); border-radius: 999px;
  background: var(--panel); color: var(--ink-muted); box-shadow: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.trends-filter:hover:not(:disabled), .trends-filter:focus-visible { color: var(--text); background: var(--card-solid); border-color: rgba(var(--ink-rgb), .10); box-shadow: none; }
.trends-filter.on { color: var(--text); background: var(--card-solid); box-shadow: 0 0 0 1.5px rgba(var(--ink-rgb), .55); }
.trends-catalog { width: 100%; max-width: none; margin: 0; }
.trends-page .trend-grid {
  display: block; column-count: 5; column-gap: 8px;
}
.trends-page .trend-card {
  position: relative; display: inline-block; width: 100%; aspect-ratio: 4 / 5;
  margin: 0 0 8px; padding: 0; overflow: hidden; break-inside: avoid;
  border-radius: 20px; background: var(--surface-2); border: 0; box-shadow: none; cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.trends-page .trend-card:hover { transform: translateY(-2px); filter: brightness(1.12); }
.trends-page .trend-card:focus-visible { outline: 2px solid rgba(var(--ink-rgb), .55); outline-offset: -2px; }
/* Разная высота создаёт вертикальную masonry-ленту, а не горизонтальные
   ряды. Все варианты остаются вертикальными или квадратными. */
.trends-page .trend-card.trend-tile-1,
.trends-page .trend-card.trend-tile-6,
.trends-page .trend-card.trend-tile-10 { aspect-ratio: 3 / 4; }
.trends-page .trend-card.trend-tile-2,
.trends-page .trend-card.trend-tile-7 { aspect-ratio: 1 / 1; }
.trends-page .trend-card.trend-tile-3,
.trends-page .trend-card.trend-tile-8,
.trends-page .trend-card.trend-tile-11 { aspect-ratio: 4 / 6; }
.trends-page .trend-card.trend-tile-4,
.trends-page .trend-card.trend-tile-9 { aspect-ratio: 5 / 6; }
.trends-page .trend-card > video, .trends-page .trend-card > img, .trends-page .trend-card > .trend-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; object-fit: cover;
}
/* ИМЯ ТРЕНДА ВИДНО ВСЕГДА. Раньше оно пряталось по ховеру, а кнопка по
   ховеру появлялась: на тач-устройстве, где ховера нет вовсе, карточка
   оставалась немой картинкой без названия и без действия. Теперь имя —
   постоянная плашка на градиенте по нижней кромке. */
.trend-card-name {
  /* Выше оверлея действия (z-index 6): иначе на ховере имя уходило под
     затемняющую плёнку и всё равно пропадало — ровно то, от чего ушли.
     Кликам не мешает: pointer-events отключены. */
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  /* Справа оставлено место под постоянную пилюлю «Сгенерить». */
  padding: 30px 110px 14px 14px; color: #fff;
  font: 900 clamp(15px,1.6vw,23px)/1.05 var(--font-head); letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); text-transform: lowercase;
  background: linear-gradient(transparent, rgba(14, 8, 4, .8));
  pointer-events: none;
}
/* КНОПКА ВИДНА ВСЕГДА — и на десктопе тоже. Раньше пилюля жила в
   полноэкранном оверлее с opacity:0 до ховера, и на десктопе карточка
   выглядела некликабельной. Теперь это постоянная огненная пилюля в нижнем
   правом углу, рядом с именем; ховер лишь добавляет акцент. */
.trend-card-action {
  position: absolute; z-index: 8; right: 12px; bottom: 12px;
  display: flex; cursor: pointer; color: #fff;
}
.trend-card-action span {
  padding: 10px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  /* Фирменный огонь вместо чёрной пилюли: это главное действие витрины,
     а оно выглядело как служебная подпись. */
  background: var(--fire-ink); color: var(--on-fire);
  box-shadow: 0 6px 20px rgba(20, 10, 5, .35);
  font: 800 12px/1 var(--font-head); text-transform: lowercase; letter-spacing: .04em;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trend-card:hover .trend-card-action span, .trend-card:focus-within .trend-card-action span {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(20, 10, 5, .5);
}
@media (hover: none) {
  .trend-card-action span { padding: 9px 15px; font-size: 11px; }
}
.trends-page .trend-state { position: absolute; z-index: 8; inset: 0; padding: 14px; background: var(--card-solid); overflow: auto; }

/* До загрузки настоящего ролика карточка не пустая: это самостоятельная
   процедурная заставка, собранная из CSS-слоёв. Цвет и геометрия вычисляются
   из названия — поэтому каталог живой, но не копирует чужие превью. */
.trend-visual { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-2); }
.trend-visual::before, .trend-visual::after, .trend-visual i { content: ""; position: absolute; display: block; }
.trend-visual::before { inset: -35%; background: repeating-conic-gradient(from 20deg, transparent 0 12deg, hsla(var(--th2), 100%, 88%, .3) 13deg 15deg); animation: tv-spin 12s linear infinite; animation-delay: var(--td); }
.trend-visual::after { inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.33) 48%, transparent 66%); transform: translateX(-120%); animation: tv-scan 3.8s ease-in-out infinite; animation-delay: var(--td); }
.trend-visual i { width: 54%; aspect-ratio: 1; left: 23%; top: 22%; border: 1px solid rgba(255,255,255,.62); border-radius: 42% 58% 64% 36%; backdrop-filter: blur(7px); animation: tv-float 4.4s ease-in-out infinite alternate; animation-delay: var(--td); }
.trend-visual i:nth-child(2) { width: 30%; left: 8%; top: 60%; border-radius: 50%; animation-duration: 3.1s; }
.trend-visual i:nth-child(3) { width: 24%; left: 70%; top: 9%; border-radius: 20%; animation-duration: 5.2s; }
.trend-visual[data-visual="1"] i { border-radius: 4px; transform: rotate(35deg); }
.trend-visual[data-visual="2"] { background: repeating-linear-gradient(125deg, hsl(var(--th),75%,15%) 0 18px, hsl(var(--th2),75%,48%) 19px 35px); }
.trend-visual[data-visual="3"] i { border-radius: 50% 8% 50% 8%; }
.trend-visual[data-visual="4"]::before { background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255,255,255,.25) 24px 26px); }
.trend-visual[data-visual="5"] i { width: 78%; left: 11%; border-radius: 50%; }
.trend-visual[data-visual="6"] { filter: saturate(.25) contrast(1.35); }
.trend-visual[data-visual="7"]::before { background: linear-gradient(90deg, transparent 48%, rgba(255,255,255,.35) 49% 51%, transparent 52%); animation: tv-scan 2.8s ease-in-out infinite; }
/* ЗАГЛУШКА ВМЕСТО ЧЁРНОГО ПРЯМОУГОЛЬНИКА. Пресет без готового превью
   заливался сплошным #070707: ряд чёрных плиток читается как упавшая
   витрина, а не как «превью ещё рисуется». Теперь это тёплая стеклянная
   карточка — оттенок считается из названия, поэтому каталог живой и
   неповторяющийся, а имя тренда и его метка видны сразу. Анимацию на
   странице каталога по-прежнему не крутим: полсотни плиток разом. */
.trends-page .trend-card[class*="trend-tile-"] .trend-visual::after,
.trends-page .trend-card[class*="trend-tile-"] .trend-visual i { display: none; animation: none; }
.trends-page .trend-card[class*="trend-tile-"] .trend-visual::before {
  display: block; inset: -20%; opacity: .5; animation: none;
  background: repeating-conic-gradient(from 20deg, transparent 0 14deg,
              hsla(var(--th2), 100%, 88%, .14) 15deg 17deg);
}
.trends-page .trend-card .trend-visual {
  /* Нижний слой НЕПРОЗРАЧНЫЙ и тёплый: под полупрозрачными слоями светился
     чёрный фон карточки, и «стекло» выходило почти угольным. */
  background:
    radial-gradient(120% 90% at 20% 12%, hsla(var(--th), 68%, 66%, .40), transparent 64%),
    radial-gradient(100% 80% at 85% 88%, hsla(var(--th2), 72%, 60%, .34), transparent 62%),
    linear-gradient(165deg, #4a3a2c 0%, #2e2319 55%, #241b13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Метка заглушки: длительность и цена — то немногое, что о пресете уже
   известно без картинки. */
.trend-ph-meta {
  position: absolute; left: 12px; top: 12px; z-index: 5;
  padding: 4px 9px; border-radius: 999px; font-style: normal;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .94); font: 800 10px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: lowercase; backdrop-filter: blur(6px);
}
.trends-page .trend-card .trend-card-name { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.75); }

/* Страница одного тренда: короткое объяснение, три примера и одно ясное
   действие. Заголовки и кнопки наследуют нижний регистр от самой витрины. */
.trend-detail {
  width: min(1500px, calc(100vw - 40px)); margin: 0 auto;
}
.trend-detail-back {
  margin: 0 0 clamp(34px, 5vw, 70px); padding: 0; border: 0; background: transparent;
  color: var(--ink-muted); box-shadow: none; font-size: 14px; font-weight: 800; text-transform: lowercase;
}
.trend-detail-back:hover { color: var(--text); background: transparent; border: 0; box-shadow: none; }
.trend-detail-head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: end; gap: 32px; margin-bottom: 22px;
}
.trend-detail-head h1 {
  margin: 0; font: 800 clamp(22px, 3vw, 28px)/1.1 var(--font-head); letter-spacing: -.03em;
}
.trend-detail-head p {
  max-width: 54ch; margin: 0 0 5px; color: var(--ink-muted); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.48;
}
.trend-detail h2 {
  margin: 0 0 18px; font: 900 15px/1 var(--font-head); letter-spacing: .01em; text-transform: lowercase;
}
.trend-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trend-example {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--surface-2);
}
.trend-example > video, .trend-example > img, .trend-example > .trend-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.trend-example > span {
  position: absolute; z-index: 3; left: 16px; bottom: 14px; color: rgba(255,255,255,.78);
  font: 800 11px/1 var(--font-mono); letter-spacing: .08em;
}
.trend-detail-generate.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  margin: 14px 0 0; padding: 16px 18px; border-radius: 20px;
}
.trend-detail-meta { font: 700 12px/1 var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; }
.trend-card-action.trend-detail-action {
  position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 190px;
  cursor: pointer; opacity: 1; border-radius: 999px; background: var(--fire-ink); color: var(--on-fire);
}
.trend-card-action.trend-detail-action span {
  padding: 12px 22px; font: 800 13px/1 var(--font-head); letter-spacing: .02em; background: transparent; border: 0; box-shadow: none;
}
.trend-detail .trend-state {
  grid-column: 1 / -1; position: static; padding: 12px 0 0; background: transparent; color: var(--text); overflow: visible;
}
.trend-detail .trend-state video { display: block; width: min(420px, 100%); margin-bottom: 12px; border-radius: 14px; }
.trend-detail .trend-dl, .trend-detail .trend-share { margin-right: 8px; }
@keyframes tv-spin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes tv-scan { 45%,100% { transform: translateX(120%); } }
@keyframes tv-float { to { transform: translateY(-12%) rotate(12deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .trend-visual::before, .trend-visual::after, .trend-visual i { animation: none; } }
@media (max-width: 620px) {
  .trends-page { padding-top: 30px; }
  .trends-page .trend-grid { column-count: 2; column-gap: 6px; }
  .trends-page .trend-card { margin-bottom: 6px; border-radius: 14px; }
  .trend-card-name { left: 10px; right: 10px; bottom: 10px; font-size: 14px; }
  .trend-detail { width: calc(100vw - 24px); }
  .trend-detail-head { display: block; }
  .trend-detail-head h1 { margin-bottom: 22px; }
  .trend-example-grid { grid-template-columns: 1fr; }
  .trend-detail-generate.panel { grid-template-columns: 1fr; }
  .trend-card-action.trend-detail-action { width: 100%; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .trends-page .trend-grid { column-count: 4; }
}

/* ═══════════════════════════════ АКАДЕМИЯ ═══════════════════════════════ */

.ac-head { margin-bottom: 18px; }
.ac-lead { margin: 0 0 12px; color: var(--ink-muted); font-size: 13.5px; max-width: 70ch; }

/* Полоса прогресса — линия, а не «заряженная батарея»: цвет здесь означает
   факт («прочитано столько»), а не призыв. */
.ac-bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(var(--ink-rgb), .12);
  overflow: hidden;
}
.ac-bar span {
  display: block;
  height: 100%;
  background: var(--accent-2-ink);
  transition: width .3s ease;
}
.ac-bar.sm { height: 3px; margin: 8px 0 10px; }
.ac-prog {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-muted);
}

.ac-courses { display: grid; gap: 14px; }
@media (min-width: 860px) {
  .ac-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ac-course {
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 16px;
  padding: 15px 16px;
  background: var(--surface);
}
.ac-course header { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ac-course h3 { margin: 0; font-size: 16px; font-weight: 800; flex: 1; }
/* Номер уровня — цифра в кружке, а не бейдж с заливкой. */
.ac-course-num {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--ink-rgb), .3);
  border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
}
.ac-lock {
  flex: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: lowercase; color: var(--gold-ink);
  border: 1px solid rgba(138, 90, 43, .4);
  border-radius: 7px; padding: 2px 6px;
}
.ac-course-lead { margin: 0 0 6px; font-size: 13px; color: var(--ink-muted); }
.ac-course-meta {
  margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--muted);
}
.ac-outcome { margin: 0 0 10px; font-size: 12.5px; }
.ac-outcome b {
  display: block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink-muted); font-weight: 700;
}
.ac-outcome ul { margin: 0; padding-left: 17px; color: var(--text); }
.ac-outcome li { margin-bottom: 2px; }

.ac-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ac-lesson {
  width: 100%;
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 8px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 600;
  cursor: pointer;
}
.ac-lesson:hover:not(:disabled) { background: transparent; border-color: rgba(var(--ink-rgb), .18); }
.ac-lesson:active:not(:disabled) { transform: none; box-shadow: none; }
.ac-lesson-t { flex: 1; font-size: 13.5px; }
.ac-lesson-m {
  flex: none;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted);
}
/* Прочитанный урок — галочка и приглушённый текст. Зачёркивать нельзя:
   к урокам возвращаются, а зачёркнутое читается как «больше не нужно». */
.ac-lesson.done .ac-lesson-t { color: var(--ink-muted); font-weight: 500; }
.ac-lesson.done .ac-lesson-t::after { content: " ✓"; color: var(--ok-ink); }

/* ── страница урока ── */
.ac-lesson-page { max-width: 74ch; }
.ac-back { padding-left: 0; margin-bottom: 4px; }
.ac-text { font-size: 14.5px; line-height: 1.62; }
.ac-text h1 { font-size: 22px; margin: 0 0 12px; }
.ac-text h2 { font-size: 17px; margin: 22px 0 8px; }
.ac-text h3 { font-size: 14.5px; margin: 18px 0 6px; }
.ac-text p { margin: 0 0 12px; }
.ac-text ul, .ac-text ol { margin: 0 0 12px; padding-left: 20px; }
.ac-text li { margin-bottom: 4px; }
.ac-text code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); border-radius: 5px; padding: 1px 5px;
}
.ac-text hr { border: none; border-top: 1px solid rgba(var(--ink-rgb), .16); margin: 20px 0; }
.ac-text table { border-collapse: collapse; font-size: 13px; }
.ac-text th, .ac-text td {
  border: 1px solid rgba(var(--ink-rgb), .18); padding: 6px 9px; text-align: left;
}
.ac-foot { margin-top: 16px; align-items: center; gap: 12px; }
.ac-perma { font-size: 12px; color: var(--ink-muted); }

/* ── артефакт урока ── */
/* Единственное место урока с огнём — кнопка «применить». Это и есть главное
   действие страницы: урок, после которого нечего нажать, — статья. */
.ac-art {
  margin: 22px 0 0;
  padding: 15px 16px;
  border: 1px solid rgba(var(--ink-rgb), .28);
  border-radius: 16px;
  background: var(--surface);
}
.ac-art-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: lowercase; color: var(--accent-2-ink);
}
.ac-art h4 { margin: 6px 0 4px; font-size: 15.5px; }
.ac-art p { margin: 0 0 8px; font-size: 13px; }
.ac-art-shots {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ac-art-shots li {
  font-size: 11.5px; color: var(--ink-muted);
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 8px; padding: 2px 8px;
}
.ac-art-preset { font-size: 12.5px; color: var(--ink-muted); }
.ac-art-note { font-size: 12px; }

/* ── диалог применения ── */
.ac-slot { display: block; margin-bottom: 10px; }
.ac-slot > span {
  display: block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: lowercase; color: var(--ink-muted);
}
.ac-slot input, .ac-slot select { width: 100%; }
.ac-slots { display: grid; gap: 8px; }
@media (min-width: 620px) {
  .ac-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ac-slot-note { font-size: 12px; margin: 4px 0 12px; }

/* ═════════════════════════ КАТАЛОГ ПРИЁМОВ ═════════════════════════ */

.lb-top { position: sticky; top: 0; z-index: 2; background: var(--inset); padding-bottom: 10px; }
.lb-search {
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  border: 1px solid rgba(var(--ink-rgb), .3);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.lb-search:focus { outline: none; border-color: rgba(var(--ink-rgb), .6); }

.lb-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-cat {
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 999px;
  box-shadow: none;
}
.lb-cat:hover:not(:disabled) { background: transparent; color: var(--text); }
.lb-cat:active:not(:disabled) { transform: none; box-shadow: none; }
.lb-cat.on { color: var(--text); font-weight: 800; border-color: rgba(var(--ink-rgb), .55); }

.lb-list { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 900px) {
  .lb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lb-card {
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 16px;
  padding: 14px 15px;
  background: var(--surface);
}
.lb-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.lb-card h4 { margin: 0; flex: 1; font-size: 15px; font-weight: 800; }
.lb-tier {
  flex: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--gold-ink);
  border: 1px solid rgba(138, 90, 43, .4);
  border-radius: 7px; padding: 2px 6px;
}
.lb-desc { margin: 0 0 6px; font-size: 13px; }
.lb-gain { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-muted); }
.lb-gain b { color: var(--text); }

/* Текст промпта — моноширинный и в утопленной полке: это данные, которые
   копируют, а не проза, которую читают. */
.lb-prompts { margin: 0 0 10px; }
.lb-prompts dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink-muted); margin-top: 8px;
}
.lb-prompts dd {
  margin: 3px 0 0;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  background: var(--surface-2);
  border-radius: 9px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.lb-slots { margin: 0 0 8px; font-size: 12px; color: var(--ink-muted); }
.lb-slots code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface-2); border-radius: 5px; padding: 1px 5px;
}
.lb-result { margin: 0 0 10px; font-size: 12.5px; font-style: italic; }
.lb-locked {
  margin: 0 0 10px; padding: 10px;
  font-size: 12.5px; color: var(--gold-ink);
  border: 1px dashed rgba(138, 90, 43, .4);
  border-radius: 10px;
}
.lb-actions { gap: 8px; align-items: center; }
.lb-styles { margin-top: 18px; font-size: 12px; }

/* ═════════════════ очередь генераций в витрине тарифа ═════════════════ */

.pl-parallel {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.pl-queue {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(var(--ink-rgb), .2);
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--ink-muted);
  background: var(--surface);
}
.pl-queue b { color: var(--text); }

/* ─────────────── промокод в витрине тарифов (лендинг) ─────────────── */
/* Поле, а не баннер: промокод — это ввод, и выглядеть он должен как ввод.
   Никакой заливки и никакого огня: скидку продаёт код, а не подсветка. */
.ld-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px auto 0;
  max-width: 520px;
}
.ld-promo label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--ink-muted);
}
.ld-promo-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb), .3);
  border-radius: 11px;
}
.ld-promo-input:focus { outline: none; border-color: rgba(var(--ink-rgb), .6); }
.ld-promo-msg { flex-basis: 100%; font-size: 12px; }

/* Прямая цена одного токена в шкале докупки. */
.ld-readout-per {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ───────── второй ярус: тумблер режимов в том же минимализме ─────────
   Активный сегмент режима заливался огнём (--fire-ink). В строке навигации
   это второй огонь рядом с первым — а огонь в сервисе один и стоит на главном
   действии экрана. Правило то же, что и у разделов: активное состояние —
   кольцо и вес текста.

   Переопределяем ТОЛЬКО под .has-sections: без sections.js шапка обязана
   остаться прежней, вплоть до заливки. */
.topbar.has-sections .mode-seg {
  border-width: 1px;
  border-color: rgba(var(--ink-rgb), .28);
  box-shadow: none;
}
.topbar.has-sections .mode-seg-btn { color: var(--ink-muted); }
.topbar.has-sections .mode-seg-btn:hover {
  background: transparent;
  color: var(--text);
}
.topbar.has-sections .mode-seg-btn.on {
  color: var(--text);
  background: transparent;
  /* Кольцо внутренней тенью, а не border: у кнопки border:0, и добавление
     рамки сдвинуло бы соседей на два пикселя при каждом переключении. */
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .55);
}
/* Схлопнутая капсула режима (узкий экран) — тем же языком. */
.topbar.has-sections .mode-switch {
  border-width: 1px;
  box-shadow: none;
}

/* ───────── переключатель языка возвращается в шапку студии ─────────
   Его прятали (style.css: «.topbar .lang-switch { display: none }») не из
   принципа, а потому что семь сегментов режимов и пять кнопок не помещались в
   одну строку. Строк теперь две, место есть — и человек, переключивший язык
   внутри студии, снова может переключить его обратно, не уходя на лендинг.
   На телефоне он по-прежнему не нужен: язык меняют раз в жизни. */
.topbar.has-sections .lang-switch { display: inline-flex; }
@media (max-width: 700px) {
  .topbar.has-sections .lang-switch { display: none; }
}

/* Кнопки действия в карточке каталога — тонкая обводка, без «подушки»:
   они повторяются полсотни раз, и объёмная кнопка на каждой превращает
   список в лоток с кнопками. */
.lb-actions .lb-apply,
.lb-actions .lb-apply-pack,
.lb-actions .lb-plans {
  padding: 6px 12px;
  font-size: 12.5px;
  border: 1px solid rgba(var(--ink-rgb), .45);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
.lb-actions .lb-apply:hover:not(:disabled),
.lb-actions .lb-apply-pack:hover:not(:disabled),
.lb-actions .lb-plans:hover:not(:disabled) { background: var(--card-solid); }
.lb-actions .lb-apply:active:not(:disabled),
.lb-actions .lb-apply-pack:active:not(:disabled),
.lb-actions .lb-plans:active:not(:disabled) { transform: none; box-shadow: none; }

/* ─────────── разделы остаются ПОДПИСЯМИ на любой ширине ───────────
   style.css с 1150px гасит текст у #chat-btn/#music-btn/#account-btn/
   #admin-btn и подставляет значки через ::before. Это было верное решение,
   пока кнопки стояли в одной строке с проектом и лентой режимов: места не
   было, и значок спасал строку. Теперь у разделов СВОЙ ряд, который умеет
   прокручиваться, — и половина ленты значками, а половина словами читается
   как две разные навигации. Возвращаем подписи и снимаем значки; тесно не
   станет, лента просто прокрутится.

   Кнопки вне ленты (#logout-btn) значками и остаются: они не разделы. */
/* Кнопки перечислены ПОИМЁННО, и иначе нельзя: правило в style.css написано
   через id (`.topbar #chat-btn`), а идентификатор сильнее любого числа
   классов. Селектор из четырёх классов проиграл бы ему молча — текст остался
   бы погашенным, и полбеды выглядело бы как «просто не сработало». */
.topbar.has-sections .tb-sections #chat-btn,
.topbar.has-sections .tb-sections #music-btn,
.topbar.has-sections .tb-sections #account-btn,
.topbar.has-sections .tb-sections #admin-btn,
.topbar.has-sections .tb-sections .tb-sec {
  font-size: 13px;
  gap: 0;
  padding: 0 11px;
}
/* «Профиль» с авой: зазор между кружком и подписью возвращаем поверх gap:0. */
.topbar.has-sections .tb-sections #account-btn.profile-btn {
  gap: 6px;
  padding: 0 11px 0 7px;
}
.topbar.has-sections .tb-sections #chat-btn::before,
.topbar.has-sections .tb-sections #music-btn::before,
.topbar.has-sections .tb-sections #account-btn::before,
.topbar.has-sections .tb-sections #admin-btn::before,
.topbar.has-sections .tb-sections .tb-sec::before { content: none; }

/* Прежний трёхрядный блок 900px удалён 28.08: он стоял ПОЗЖЕ однорядного
   и молча перебивал порядок строк (личное прыгало влево от режима),
   а копию проекта возвращал на экран. Однорядная мобильная шапка и нижний
   док заданы одним блоком 700px выше. */

/* «Админка» больше НЕ кнопка в строке — ни на телефоне, ни на десктопе:
   она пункт меню профиля (см. profileMenu в sections.js). Отдельная
   шестерёнка ела место в правом краю ради входа, которым пользуются раз в
   день, и ломала общий ряд капсул. */

/* ═══════════ БАЗА ПРОМТОВ: сценарии · сцены · движение · свет ═══════════
   Четыре вкладки, поиск, группы, карточки и полоса сборки внизу листа.
   Разметку рисует frontend/library.js.

   ОГОНЬ ЗДЕСЬ ОДИН и стоит на подтверждении применения — в диалоге и на
   кнопке полосы сборки. В самом каталоге сотня карточек: .primary на каждой
   превратила бы лист в сотню одинаково «главных» кнопок, то есть ни в одну.
   Вкладка, группа и выбранная карточка показаны ВЕСОМ и волосяной рамкой. */

.pb-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--inset);
  padding-bottom: 10px;
}

/* Вкладки — верхний ярус каталога: четыре РАЗНЫЕ сущности, а не четыре
   фильтра одного списка. Поэтому подпись, а не иконка, и цифра рядом: до
   нажатия видно, сколько там карточек. */
.pb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}
.pb-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  box-shadow: none;
}
.pb-tab:hover:not(:disabled) { background: transparent; color: var(--text); }
.pb-tab:active:not(:disabled) { transform: none; box-shadow: none; }
.pb-tab.on {
  color: var(--text);
  font-weight: 800;
  border-color: rgba(var(--ink-rgb), .55);
}
.pb-tab:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }
.pb-n {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pb-tabhint { margin: 0 0 8px; font-size: 12.5px; max-width: 72ch; }

/* Откуда пришли: «применить» с карточки кадра и «применить» из мастерской
   означают разное, и сказать это надо ДО нажатия, а не тостом после. */
.pb-ctx {
  margin: 0 0 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--gold-ink);
  background: var(--gold-wash);
  border-radius: 8px;
}

.pb-search {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 10px;
  background: var(--inset);
  font-size: 13.5px;
  color: var(--text);
}
.pb-search:focus { outline: none; border-color: rgba(var(--ink-rgb), .6); }

.pb-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-group {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--ink-muted);
  box-shadow: none;
}
.pb-group:hover:not(:disabled) { background: transparent; color: var(--text); }
.pb-group:active:not(:disabled) { transform: none; box-shadow: none; }
.pb-group.on {
  color: var(--text);
  font-weight: 800;
  border-color: rgba(var(--ink-rgb), .45);
}
/* Хвостовой чип уводит в ПРЕЖНИЙ слой (приёмы, наборы) — волосяная линия
   слева отделяет «другую сущность» от групп текущей. */
/* Линия рисуется псевдоэлементом, а НЕ border-left самого чипа: у чипа
   радиус 999px, и левая граница на нём выходит не волоском, а полумесяцем,
   обнимающим слово, — на скриншоте это читалось как открытая скобка. */
.pb-group.tail { position: relative; margin-left: 13px; }
.pb-group.tail::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  width: 1px; height: 14px;
  transform: translateY(-50%);
  background: rgba(var(--ink-rgb), .16);
}

/* УЗКИЙ ЭКРАН: вкладки и группы едут В ОДНУ СТРОКУ, как лента разделов в
   шапке, а не переносятся. На 375px четыре вкладки и двенадцать групп в
   перенос занимали больше полутора экранов — до первой карточки нужно было
   листать, то есть каталог открывался пустым. Идиома та же, что у
   .tb-sections: прокрутка, без полосы, со снапом. */
@media (max-width: 560px) {
  .pb-tabs, .pb-groups {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .pb-tabs::-webkit-scrollbar, .pb-groups::-webkit-scrollbar { display: none; }
  .pb-tab, .pb-group { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .pb-tabhint { margin-bottom: 6px; }
}

.pb-list { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 900px) {
  .pb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Сценарий — карточка на весь клип: у неё четыре акта и список
     заготовок, и во вторую колонку она не влезает, не превращаясь в столбик. */
  .pb-list .pb-script { grid-column: 1 / -1; }
}

.pb-card { scroll-margin-top: 90px; }
/* Пришли по ссылке на карточку — она подсвечена рамкой, а не заливкой:
   заливка здесь означала бы «выбрано», а это всего лишь «вот она». */
.pb-card.hit { border-color: rgba(var(--ink-rgb), .55); }

.pb-meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pb-picked {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--text);
  border: 0; box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .45);
  border-radius: 999px;
  padding: 1px 7px;
}
.pb-traits { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.pb-trait {
  font-size: 11px;
  color: var(--ink-muted);
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ── сценарий: акты долями хронометража ── */
.pb-script-facts { margin-bottom: 8px; }
.pb-acts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.pb-acts li { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; }
.pb-act-share {
  flex: 0 0 40px;
  text-align: right;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pb-act-t { flex: 1; color: var(--text); }
.pb-act-t b { font-weight: 700; }

/* ── кнопки карточки: тонкая обводка, без «подушки» объекта ── */
.lb-actions .pb-apply,
.lb-actions .pb-pick,
.lb-actions .pb-plans {
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .28);
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  box-shadow: none;
}
.lb-actions .pb-apply:hover:not(:disabled),
.lb-actions .pb-pick:hover:not(:disabled),
.lb-actions .pb-plans:hover:not(:disabled) { background: var(--card-solid); }
.lb-actions .pb-apply:active:not(:disabled),
.lb-actions .pb-pick:active:not(:disabled),
.lb-actions .pb-plans:active:not(:disabled) { transform: none; box-shadow: none; }
.lb-actions .pb-pick.on {
  border-color: rgba(193, 64, 27, .45);
  color: var(--accent-2-ink);
}

/* ── полоса сборки ──
   Липкая внизу листа и появляется, только когда в сборке что-то есть. Пустая
   полоса на всех экранах была бы пятой строкой шапки, которая ничего не
   говорит; см. правило «сброс появляется, когда есть что сбрасывать». */
.pb-mix { display: none; }
.pb-mix.on {
  display: block;
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--inset);
  border: 1px solid rgba(var(--ink-rgb), .22);
  border-radius: 12px;
}
.pb-mix-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pb-mix-head b { font-size: 13px; }
.pb-mix-head .muted { font-size: 11.5px; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pb-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--card);
  border: 1px solid rgba(var(--ink-rgb), .2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--text);
  box-shadow: none;
}
.pb-chip:hover:not(:disabled) { background: var(--card-solid); }
.pb-chip:active:not(:disabled) { transform: none; box-shadow: none; }
.pb-chip-k {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-muted);
}
.pb-chip-x { color: var(--ink-muted); font-size: 11px; }
.pb-mix-actions { gap: 8px; align-items: center; }

/* Конфликт — это ПРЕДУПРЕЖДЕНИЕ, а не ошибка: применить всё равно можно, и
   красная плашка тут врала бы. Золотая подложка и чернильный текст. */
.pb-conf {
  list-style: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--gold-wash);
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--gold-ink);
  display: grid;
  gap: 4px;
}
.pb-conf li::before { content: "△ "; }

/* ── «было → станет» ── */
.pb-diff { margin: 12px 0; }
.pb-diff-in {
  border: 1px solid rgba(var(--ink-rgb), .16);
  border-radius: 11px;
  padding: 10px 12px;
  background: var(--inset);
}
.pb-diff-head { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; }
.pb-row { margin-bottom: 9px; font-size: 12.5px; }
.pb-row-f {
  display: block;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
/* Прежнее значение — зачёркнутым и приглушённым, новое обычным. Показывать их
   одинаково значило бы заставить человека сверять две простыни глазами. */
.pb-was {
  display: block;
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(111, 95, 82, .5);
  margin-bottom: 2px;
}
.pb-now { display: block; color: var(--text); }
.pb-row.same .pb-row-f { opacity: .65; }
.pb-row-same { font-size: 12px; }

.pb-neg {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--ink-rgb), .14);
  font-size: 12.5px;
}
.pb-neg b { font-size: 11px; letter-spacing: .04em; text-transform: lowercase; }
.pb-neg p { margin: 4px 0; }

.pb-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 12.5px;
}
.pb-check input { margin-top: 2px; }

.pb-styles { margin-top: 18px; font-size: 12px; }

/* «Здесь нет, но есть на вкладке» — ответ на пустой список. Пустой список без
   этой строки врёт: карточка почти всегда есть, просто в соседнем слое, и
   контровой свет ищут в сценах ровно так же часто, как наезд — в свете. */
.pb-else { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.pb-else-go {
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .28);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 4px;
  font-size: 12px;
  color: var(--text);
  box-shadow: none;
}
.pb-else-go:hover:not(:disabled) { background: var(--card-solid); }
.pb-else-go:active:not(:disabled) { transform: none; box-shadow: none; }

/* ─────────────────────────── маркетинг: хаб ─────────────────────────── */
/* Три стеклянные карточки в ряд; на телефоне — колонкой. Огня нет: карточки
   — навигация, а не главное действие экрана. */
.mk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  /* max-width вместо width: 94vw не знает про паддинги родителя, и на 375px
     сетка уезжала за правый край на 6px с перекошенными полями. */
  width: 100%; max-width: 1080px; box-sizing: border-box;
  margin: 0 auto; padding: 0 4px;
}
.mk-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px 16px 14px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid rgba(var(--ink-rgb), .10);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-radius: 20px; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 6px 24px rgba(var(--ink-rgb), .07);
  transition: transform .16s ease, border-color .16s ease;
}
.mk-card:hover:not(:disabled) { background: var(--panel); }
.mk-hero h1 { font-size: 22px; }
.mk-card:hover { transform: translateY(-2px); border-color: rgba(var(--ink-rgb), .22); }
/* Иконки карточек — моно-SVG маской в цвет марки, не эмодзи. */
.mk-ico {
  width: 26px; height: 26px; display: inline-block;
  background: var(--accent-ink);
  -webkit-mask: var(--mkico) center / contain no-repeat;
  mask: var(--mkico) center / contain no-repeat;
}
.mk-ico-mockups { --mkico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l9-4 9 4-9 4-9-4z'/><path d='M3 8v8l9 4 9-4V8'/><path d='M12 12v8'/></svg>"); }
.mk-ico-ugc { --mkico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2.5' width='10' height='19' rx='2.5'/><circle cx='12' cy='9' r='2.4'/><path d='M8.5 16c.8-1.6 2-2.4 3.5-2.4s2.7.8 3.5 2.4'/></svg>"); }
.mk-ico-earn { --mkico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v10M15 9.2c-.6-1-1.7-1.5-3-1.5-1.6 0-2.9.9-2.9 2.2 0 2.9 6 1.5 6 4.3 0 1.3-1.3 2.2-3.1 2.2-1.4 0-2.6-.6-3.2-1.6'/></svg>"); }
.mk-ico-items { --mkico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6v3.5l1.8 2A3 3 0 0 1 17.5 10v9a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-9a3 3 0 0 1 .7-1.5L9 6.5V3z'/><path d='M6.5 13h11'/></svg>"); }
.mk-ico-chars { --mkico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.2'/><path d='M3.5 20c.9-3 3-4.7 5.5-4.7s4.6 1.7 5.5 4.7'/><circle cx='16.8' cy='9.5' r='2.6'/><path d='M15.5 15.6c2.3.2 4.1 1.7 4.9 4.4'/></svg>"); }

/* Живые галереи-примеры в карточках. */
.mk-card-gallery { display: flex; gap: 5px; width: 100%; min-height: 74px; }
.mk-card-gallery:empty { display: none; }
.mk-card-gallery img {
  flex: 1; min-width: 0; height: 88px; object-fit: cover;
  border-radius: 12px; corner-shape: squircle; border: 1px solid var(--border);
}
.mk-card b {
  font-family: var(--font-head); font-size: 16px;
  line-height: 1.1; letter-spacing: -.02em; text-transform: none;
}
.mk-note { display: none; }
@media (max-width: 700px) {
  .mk-grid { grid-template-columns: 1fr; }
  /* Симметрия на телефоне: базовый мобильный #app даёт left 28 / right 8
     (28px — под боковую капсулу этапов, которой на хабе маркетинга нет),
     и сетка стояла с перекошенными полями, вылезая за экран. */
  #app:has(#marketing-page) { padding-left: 8px; padding-right: 8px; }
}

/* ─────────── Шапка v131: профиль в правом углу, огонь на активном ─────────── */
/* Активный раздел — заливка пастельным огнём (как .stage-tab.on), а не рамка. */
.topbar.has-sections .tb-sec.on {
  background: var(--fire-ink);
  color: var(--on-fire);
  border-color: rgba(var(--ink-rgb), .12);
}
/* «Профиль» — капсула на стекле в правом углу, ава покрупнее. */
.topbar #account-btn.profile-btn {
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 3px 12px 3px 4px;
  box-shadow: none;
}
.topbar .profile-ava { width: 28px; height: 28px; font-size: 12px; }
/* «Админка» — компактная шестерёнка рядом с профилем. */
.topbar #admin-btn.admin-gear {
  font-size: 15px; line-height: 1; padding: 0 9px;
  border-radius: 999px;
}

@media (max-width: 700px) {
  /* Строка 1: лого · тема · токены · ава-профиль. Язык, выход и «сохранить
     аккаунт» уезжают в кабинет — в шапке им тесно и делать нечего. */
  .topbar .lang-switch,
  .topbar #logout-btn,
  .topbar #save-account-btn { display: none !important; }
  .topbar .theme-switch { transform: scale(.92); transform-origin: right center; }
  /* Ава вместо «👤»-заглушки из style.css: у профиля есть настоящее лицо. */
  .topbar #account-btn::before { content: none !important; }
  .topbar #account-btn.profile-btn { padding: 2px; }
  .topbar #account-btn .profile-ava { width: 30px; height: 30px; }
  .topbar #account-btn .profile-ava-ini { font-size: 12px; }
  .topbar #account-btn .profile-cap { display: none; }

  /* Строка 2: навигация — сегмент-капсула со скроллом, значок + мелкая
     подпись. content: attr(data-ico) отменяет "content: none" выше по файлу —
     каскад по порядку в файле, специфичность одинаковая. */
  .topbar.has-sections > .tb-sections {
    background: var(--inset);
    border: 1px solid rgba(var(--ink-rgb), .12);
    border-radius: 16px;
    padding: 3px;
    gap: 2px;
  }
  .topbar.has-sections .tb-sections .tb-sec {
    flex-direction: column;
    gap: 1px;
    height: auto;
    min-height: 40px;
    padding: 3px 10px;
    font-size: 9.5px;
    border-radius: 12px;
  }
  .topbar.has-sections .tb-sections .tb-sec[data-ico]::before {
    content: attr(data-ico);
    font-size: 14px;
    line-height: 1.15;
  }
  /* Перенесённые кнопки (Генератор/Музыка): вернуть подпись поверх
     font-size:0 из style.css и убрать их старые эмодзи-псевдоэлементы. */
  .topbar.has-sections .tb-sections #chat-btn,
  .topbar.has-sections .tb-sections #music-btn { font-size: 9.5px; padding: 3px 10px; }
}

/* ─────────── «Заработок»: товарные карточки, а не masonry-плитки ─────────── */
.earn-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.earn-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 22px; background: var(--card);
  box-shadow: 0 4px 16px rgba(var(--ink-rgb), .08);
}
.earn-shot {
  position: relative; height: 200px; flex: none; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.earn-shot img, .earn-shot video { width: 100%; height: 100%; object-fit: cover; }
.earn-ph { font-size: 2.4rem; opacity: .5; }
.earn-reward {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  color: var(--on-fire); background: var(--fire-ink);
}
.earn-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.earn-name { font-size: 15px; line-height: 1.2; }
.earn-meta { font-size: 12px; }
.earn-style {
  width: 100%; padding: 7px 11px; font: inherit; font-size: 13px;
  border: 1px solid rgba(var(--ink-rgb), .14); border-radius: 12px;
  background: var(--inset); color: var(--text);
}
.earn-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.earn-acts .earn-go {
  flex: 1 1 auto; justify-content: center; cursor: pointer; text-align: center;
  padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700;
  color: var(--on-fire); background: var(--fire-ink);
  border: 1px solid rgba(var(--ink-rgb), .12);
}
.earn-acts .earn-link { flex: 0 0 auto; font-size: 12px; padding: 8px 12px; }
@media (max-width: 560px) {
  .earn-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .earn-shot { height: 150px; }
}

/* ─────────── Общие базы (предметы / персонажи) из маркетинга ─────────── */
.base-search {
  width: 100%; margin-bottom: 12px; padding: 9px 13px; font: inherit;
  border: 1px solid rgba(var(--ink-rgb), .14); border-radius: 14px;
  background: var(--inset); color: var(--text);
}
.base-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.base-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--card);
  cursor: pointer; text-align: left;
}
.base-card img, .base-card .base-ph {
  width: 100%; height: 120px; object-fit: cover; display: block;
}
.base-card .base-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: var(--surface-2);
}
.base-cap { padding: 8px 10px; font-size: 12.5px; font-weight: 700; }

/* ═══════════ ИКОНКИ РАЗДЕЛОВ — СВОИ SVG, НЕ ЭМОДЗИ ═══════════
   Эмодзи в навигации отдавали чат-мессенджером и красились платформой, а не
   темой. Моно-иконки тонкой линией (1.7px) рисуются маской и берут
   currentColor — активный пункт на огне сам становится тёмным по --on-fire.
   Правила стоят В КОНЦЕ файла: каскад по порядку добивает все прежние
   content: attr(data-ico). */
.topbar.has-sections .tb-sec[data-ico]::before,
.topbar.has-sections .tb-sections .tb-sec[data-ico]::before {
  content: "" !important;
  display: inline-block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--secico) center / contain no-repeat;
  mask: var(--secico) center / contain no-repeat;
}
.tb-sec[data-sec="studio"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='11' rx='2'/><path d='M3 9l2-4h16l-2 4'/><path d='M8 5l2 4'/><path d='M13 5l2 4'/></svg>"); }
.tb-sec[data-sec="make"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z'/></svg>"); }
.tb-sec[data-sec="trends"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3c.8 2.6-.5 4.2-2 5.8C8.5 10.4 7 12.2 7 14.4a5 5 0 0 0 10 0c0-2.2-1.1-3.7-2.1-5.1-.4 1-1 1.7-1.9 2.2.5-2.4.2-5.6-1-8.5z'/></svg>"); }
.tb-sec[data-sec="marketing"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l9-4 9 4-9 4-9-4z'/><path d='M3 8v8l9 4 9-4V8'/><path d='M12 12v8'/></svg>"); }
.tb-sec[data-sec="academy"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9l10-4 10 4-10 4L2 9z'/><path d='M6 11.5V15c0 1.4 2.7 2.8 6 2.8s6-1.4 6-2.8v-3.5'/><path d='M22 9v5'/></svg>"); }
.tb-sec[data-sec="music"] { --secico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='18' r='2.6'/><circle cx='17' cy='15' r='2.6'/><path d='M9.6 18V6.5l10-2.2V15'/></svg>"); }

/* Нижний док: компактная стеклянная капсула 54px, всё влезает без скролла. */
@media (max-width: 700px) {
  .topbar.has-sections > .tb-sections {
    height: 54px; padding: 4px 5px; gap: 0;
    /* ЛЕНТА ПРОКРУЧИВАЕТСЯ ПАЛЬЦЕМ. Здесь стояло overflow: visible — оно
       перебивало overflow-x: auto базового правила, и лента, упёршись в
       max-width: calc(100vw - 24px), просто ОБРЕЗАЛАСЬ краем экрана:
       последний раздел («Музыка») с телефона был недостижим вообще.
       justify-content: space-between при max-content-ширине всё равно
       ничего не раздвигал, а при переполнении мешает докрутить до начала. */
    justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: color-mix(in srgb, var(--card-solid) 78%, transparent);
    border: 1px solid rgba(var(--ink-rgb), .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
                0 8px 24px rgba(var(--ink-rgb), .16);
  }
  .topbar.has-sections > .tb-sections::-webkit-scrollbar { display: none; }
  /* Над доком стоит ряд этапов (#stage-jump, style.css): одна плашка —
     у дока нет верхнего скругления, ширина та же. */
  body:has(#stage-jump:not(:empty)) .topbar.has-sections > .tb-sections {
    left: 12px; right: 12px; transform: none; width: auto; max-width: none;
    border-radius: 0 0 18px 18px; border-top: 1px solid rgba(var(--ink-rgb), .08);
    justify-content: space-around;
  }
  .topbar.has-sections .tb-sec { min-height: 0; padding: 4px 7px; gap: 2px; flex: none; }
  .topbar.has-sections .tb-sec[data-ico]::before,
  .topbar.has-sections .tb-sections .tb-sec[data-ico]::before {
    width: 19px; height: 19px;
  }
}


/* Тренды: бейдж «новое» — отдельная пилюля, а не хвост слова; кнопка
   «Сгенерить» — палец должен попадать (было 22px). Пустое превью — тёплая
   заглушка вместо сломанной картинки. */
.trend-new {
  display: inline-flex; align-items: center; flex: none; margin: 0; padding: 2px 7px; line-height: 1;
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: lowercase; border-radius: 999px;
  color: var(--gold-ink); background: var(--gold-wash);
}
.trend-card-action { min-height: 32px; display: inline-flex; align-items: center; }
.trend-card img[src=""] { visibility: hidden; }
.trend-card img[src=""]::after { content: none; }
.trend-card { background: var(--surface-2); }

/* Селект проекта — пилюля, как соседние капсулы (у select свой UA-вид). */
.topbar.has-sections .project-select {
  appearance: none; -webkit-appearance: none;
  border-radius: 999px !important; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}


/* ⓘ на карточке тренда — вход на страницу промта. */
.trend-info {
  /* Выше .trend-card-action (z-index 6): оверлей «сгенерить» растянут на всю
     карточку и перехватывал клик по ⓘ — кнопка выглядела сломанной. */
  position: absolute; right: 8px; top: 8px; z-index: 8;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: rgba(20, 12, 6, .55); color: #fff; font-size: 13px;
  box-shadow: none; cursor: pointer;
}
.trend-card { position: relative; }

/* ═══════════ ВИТРИНА ТРЕНДОВ: АНИМАЦИЯ ЖИВЁТ, ПОДПИСЬ — ПОД КУРСОРОМ ═══════════
   Карточка сама играет свой ролик (autoplay); имя и «сгенерировать»
   проявляются только на ховере. На тач-устройствах ховера нет — там
   оверлей виден всегда, иначе карточка немая. */
.trend-card { cursor: pointer; }
.trend-card-hover {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px; padding: 14px;
  opacity: 0; transition: opacity .22s ease;
  background: linear-gradient(transparent 55%, rgba(14, 8, 4, .78));
  pointer-events: none;
}
.trend-card:hover .trend-card-hover,
.trend-card:focus-visible .trend-card-hover,
.trend-card:focus-within .trend-card-hover { opacity: 1; }
@media (hover: none) { .trend-card-hover { opacity: 1; } }
.trend-card-hover .trend-card-name {
  position: static; padding: 0; background: none; pointer-events: none;
}
.trend-card-hover .trend-card-action {
  position: static; align-self: flex-start; pointer-events: auto;
  background: none; border: none; padding: 0;
}

/* ═══════════ РЕДАКТОР ТРЕНДА: СЛЕВА ГЕНЕРАЦИЯ, СПРАВА ИСТОРИЯ ═══════════ */
.trend-editor { max-width: 1100px; margin: 0 auto; padding: 18px; }
.trend-editor-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px;
  align-items: start;
}
.trend-editor-main h1 { margin: 8px 0 14px; }
.trend-upload {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; border: 1.5px dashed rgba(var(--ink-rgb), .3);
  border-radius: 18px; cursor: pointer; position: relative; overflow: hidden;
}
.trend-upload:hover { border-color: rgba(var(--ink-rgb), .55); }
.trend-upload-hint { opacity: .65; font-weight: 700; text-transform: lowercase; }
.trend-upload-preview { max-width: 100%; max-height: 420px; object-fit: contain; }
.trend-editor-opts { display: flex; gap: 16px; margin: 14px 0; }
.trend-editor-opts label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: lowercase; opacity: .85;
}
.trend-editor-opts select {
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(var(--ink-rgb), .25);
  background: var(--card-solid); color: inherit; font: inherit;
}
.trend-editor-go { margin-top: 4px; }
.trend-editor-go[disabled] { opacity: .4; pointer-events: none; }
.trend-history {
  border: 1px solid rgba(var(--ink-rgb), .14); border-radius: 18px;
  padding: 14px; max-height: 78vh; overflow-y: auto;
}
.trend-history h2 {
  font-size: 14px; text-transform: lowercase; margin: 0 0 10px; opacity: .8;
}
.trend-history-list { display: flex; flex-direction: column; gap: 12px; }
.trend-history-item {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), .1);
}
.trend-history-item video, .trend-history-item img {
  width: 100%; aspect-ratio: 9 / 16; max-height: 240px; object-fit: cover; display: block;
}
.trend-history-wait {
  width: 100%; height: 90px;
  background: repeating-linear-gradient(120deg,
    rgba(var(--ink-rgb), .05), rgba(var(--ink-rgb), .12) 12px, rgba(var(--ink-rgb), .05) 24px);
}
.trend-history-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; font-size: 12px;
}
.trend-history-meta b { text-transform: lowercase; }
.trend-history-status { opacity: .7; text-transform: lowercase; }
.trend-history-status[data-st="error"] { color: #c0392b; opacity: 1; }
@media (max-width: 900px) {
  .trend-editor-cols { grid-template-columns: 1fr; }
  .trend-history { max-height: none; }
}

/* ═══════════ НАВИГАЦИЯ: НА КОМПЕ И ПЛАНШЕТЕ — ТОЛЬКО НАДПИСИ ═══════════
   Иконки разделов остаются мобильному доку (≤700px), где они и нужны
   большому пальцу. Выше — чистые слова, с маленькой буквы. */
.topbar.has-sections .tb-sec { text-transform: none; }
@media (min-width: 701px) {
  .topbar.has-sections .tb-sec[data-ico]::before,
  .topbar.has-sections .tb-sections .tb-sec[data-ico]::before {
    display: none !important;
  }
  /* Брейкпоинт «только значки» больше не имеет смысла — возвращаем подписи. */
  .topbar.has-sections .tb-sec { font-size: 12.5px; }
}

/* ─────────── страница промта /p/{layer}/{key}: заголовок 22px, промпт стеклом ─────────── */
.pp-page .pp-head h1 { font-size: 22px; line-height: 1.1; }
.pp-page .pp-desc { font-size: 13.5px; }
.pp-page .pp-hint { width: 100%; margin: 0; color: var(--ink-muted); font-size: 12.5px; }
.pp-page .pp-prompt { padding: 14px 16px; border: 1px solid rgba(var(--ink-rgb), .10); border-radius: 20px; background: var(--panel); }
.pp-page .pp-pre { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.pp-page .pp-gallery video, .pp-page .pp-gallery img { background: var(--surface-2); }
/* Цена на витрине трендов — у КАЖДОЙ карточки, не только у заглушки. */
.trends-page .trend-card > .trend-card-meta { position: absolute; z-index: 8; left: 12px; top: 12px; }