/* ── НишФайндер: вёрстка приложения ──────────────────────────────────────────
   Собран из шести кусков прототипа Finaldesign/project/NicheFinder v2.dc.html.
   В прототипе стилей как таковых нет — всё оформление лежит в атрибутах style=;
   здесь оно вытащено в классы, числа перенесены дословно.

   Токены и кейфреймы — в tokens.css, этот файл их только использует.
   Порядок блоков: каркас → экраны → оверлеи (оверлеи последними, они всё перекрывают).
   ──────────────────────────────────────────────────────────────────────────── */


/* ═══ общее ═══════════════════════════════════════════════════════════════
   То, что нужно больше чем одному экрану. Живёт ДО секций, чтобы секции могли
   переопределять точечно. Каждый пункт здесь появился из настоящего расхождения
   между шестью кусками, а не из желания причесать. */

:root{
  /* Подложка бейджей поверх превью. Одно значение на три экрана: три разных
     круга закладки под одной иконкой читались бы как разные состояния. */
  --nf-scrim:rgba(0,0,0,.72);
  /* Плашка пейволла поверх карточки — плотнее, чем бейдж: под ней текст, а не цифра. */
  --nf-lock-plate:rgba(0,0,0,.84);
  /* Вуаль пейволла в модалке — легче: там содержимое видно, скрыта только личность. */
  --nf-lock-veil:rgba(0,0,0,.5);
  /* Тень выпадающих панелей, спецификация 3.6. */
  --nf-shadow-pop:0 22px 54px rgba(0,0,0,.5);
  /* Тень крупных панелей (шапка, палитра, модалка). Отдельно от --nf-scrim: тот
     задаёт ПОДЛОЖКУ бейджей (.72), и подставлять его в тень значило красить два
     разных явления одним числом — в эталоне здесь .55. */
  --nf-shadow-panel:0 24px 60px rgba(0,0,0,.55);
  --nf-shadow-modal:0 30px 80px rgba(0,0,0,.55);
  /* Текст на жёлтом. Тот же, что --tier-b-ink, но у него своё назначение:
     совпадение значений не должно читаться как связь. */
  --warnInk:#241C05;
}

/* Иконка Material Symbols — ОДНО объявление на весь файл.
   Было четыре, с разными наборами: font-size:22px из каркаса протекал во все
   иконки без контекстного размера, а display:inline-block из витрины ломал
   place-items:center там, где иконка — единственный ребёнок сетки.
   Поэтому здесь нет ни font-size, ни display: их задаёт место применения. */
.nf-i{
  font-family:'Material Symbols Rounded';font-style:normal;font-weight:300;
  line-height:1;letter-spacing:normal;white-space:nowrap;direction:ltr;
  flex:none;user-select:none;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  font-feature-settings:'liga';
}
.nf-i--fill{font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24}

/* Сброс базовой кнопки внутри приложения.
   В tokens.css кнопка — это CTA страницы входа: своя заливка, скругление и padding
   12/18 и подсветка на ховере. Внутри приложения кнопок сотни, и почти каждая
   рисует себя сама — раньше каждый экран отменял базовые свойства по-своему:
   поиск расписывал filter:none в пятнадцати правилах, витрина одним секционным,
   а избранное не отменяло вовсе, и его кнопки светлели на ховере в одиночку.
   Плюс избранное не гасило padding у иконочных кнопок: на кнопке 40px под
   иконку 19px оставалось бы 4px. Один сброс снимает все три расхождения. */
/* :where() ВАЖЕН и не для красоты. Без него селектор весит больше, чем классы
   самих кнопок (.nf-subs__btn, .nf-sortbar__seg), и сброс побеждает их оформление
   независимо от порядка в файле. Это было видно глазами: кнопка «Подписаться»
   теряла заливку и превращалась в голый текст, а сегменты сортировки — капсулу и
   белую пилюлю активного. :where() не добавляет веса вовсе, поэтому сброс гасит
   только базовые стили из tokens.css, а любой класс компонента его перекрывает. */
.nf-app :where(button),.nf-modal :where(button),.nf-cmd :where(button){
  padding:0;margin:0;background:none;color:inherit;border:0;border-radius:0;
  font:inherit;
}
.nf-app :where(button:hover),.nf-modal :where(button:hover),
.nf-cmd :where(button:hover){filter:none}
/* То же для полей ввода: базовый input несёт width:100% и margin-bottom:16px
   под форму входа — внутри приложения это фантомный отступ под каждым полем. */
.nf-app :where(input),.nf-modal :where(input),.nf-cmd :where(input){width:auto;margin:0}

/* Обрезка длинного текста многоточием — встречалась около тридцати раз. */
/* ⚠️ Иконку возвращаем ПОСЛЕ сброса кнопок и с той же специфичностью.
   Сброс выше ставит кнопкам font:inherit — а он бьёт .nf-i, потому что
   «.nf-app button» весомее одиночного класса. Следствие было видно глазами:
   вместо иконки закладки на карточке печаталось слово «bookmark_add», обрезанное
   шириной кнопки до «bookm», а переключатель вида показывал «grid_ view_agenda».
   Правило-близнец, а не !important: !important тут выиграл бы, но следующий такой
   же случай уже нечем было бы перебить. */
.nf-app .nf-i,.nf-modal .nf-i,.nf-cmd .nf-i{
  font-family:'Material Symbols Rounded';font-style:normal;font-weight:300;
  line-height:1;letter-spacing:normal;white-space:nowrap;direction:ltr;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  font-feature-settings:'liga';
}
/* Залитый вариант глифа. Класс существовал с самого начала, но одиночным селектором
   и потому не действовал НИКОГДА: правило-близнец выше весит больше и возвращало
   'FILL' 0. Повторяем ту же форму селектора — иначе залить иконку нечем.
   В эталоне залиты два глифа: колокольчик включённой подписки (строка 222) и
   закладка сохранённого канала (bmFill, строка 1596). */
.nf-app .nf-i--fill,.nf-modal .nf-i--fill,.nf-cmd .nf-i--fill{
  font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24;
}

.nf-ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ссылки внутри приложения не подчёркиваются на наведении: в tokens.css это правило
   для текстовых страниц входа, а здесь ссылками сделаны пункты навигации и имена
   каналов — подчёркивание под пунктом меню читается как опечатка вёрстки. */
.nf-app a:hover,.nf-modal a:hover{text-decoration:none}

/* Пейволл: ОДИН маркер на всё.
   Скрывается личность канала — имя, аватар, превью; метрики остаются видны.
   Раньше витрина перечисляла по три селектора на каждый вид карточки, а поиск
   пейволл не переносил вовсе. Общий маркер закрывает и то и другое.
   ⚠️ Блюр — оформление, а не защита: значения остаются в разметке. Настоящее
   ограничение обязано резать поля на сервере (product/search.py). */
.nf-locked .nf-id{filter:blur(8px);user-select:none;pointer-events:none}


/* ═══ _shell ═══════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════════
   Каркас приложения: боковая панель + липкая шапка.
   Источник чисел — прототип «NicheFinder v2.dc.html», строки 107–210.
   ═════════════════════════════════════════════════════════════════════════ */

/* Режим панели задан НАБОРОМ ПЕРЕМЕННЫХ, а не отдельной разметкой: смена
   режима не перемонтирует ни один список и ни один график (приём прототипа,
   sbVars() на строке 1310). Класс-переключатель — nf-rail на <html>. */
:root{
  --nf-sb-w:264px; --nf-sb-pos:static; --nf-sb-gap:0px; --nf-sb-shadow:none;
  --nf-sb-lbl:inline; --nf-sb-hd:block; --nf-sb-div:none; --nf-sb-just:flex-start;
  --nf-sb-btnpad:11px 14px; --nf-sb-cmdpad:10px 12px; --nf-sb-logopad:22px;
  --nf-sb-side:14px; --nf-sb-full:block; --nf-sb-mini:none;
  --nf-pin-on:grid; --nf-pin-off:none;
  --nf-pin-lbl-on:var(--nf-sb-lbl); --nf-pin-lbl-off:none;

  /* Огненная обводка топ-3 (спецификация 3.6). Короткий вариант — для
     мини-превью 60×34 в уведомлениях, там длинный ореол не помещается. */
  --nf-fire:0 0 0 1.5px rgba(255,59,31,.85),0 0 20px rgba(255,145,0,.35),0 0 44px rgba(255,59,31,.18);
  --nf-fire-sm:0 0 0 1.5px rgba(255,59,31,.85),0 0 14px rgba(255,145,0,.35);
  /* Полоса топ-3 в строчном виде — тот же оранжевый, что в ореоле --nf-fire, но в
     полную непрозрачность. --cta сюда брать нельзя: это красный «главного действия»,
     и от него подсветка топ-3 читалась красной вместо огня (замечание владельца 18.08). */
  --nf-fire-bar:#FF9100;
}
:root.nf-rail{
  --nf-sb-w:72px; --nf-sb-pos:absolute; --nf-sb-gap:72px;
  --nf-sb-lbl:none; --nf-sb-hd:none; --nf-sb-div:block; --nf-sb-just:center;
  --nf-sb-btnpad:11px 0; --nf-sb-cmdpad:10px 0; --nf-sb-logopad:0px;
  --nf-sb-side:11px; --nf-sb-full:none; --nf-sb-mini:grid;
  --nf-pin-on:none; --nf-pin-off:grid;
  --nf-pin-lbl-on:none; --nf-pin-lbl-off:var(--nf-sb-lbl);
}

/* Телефон: панель ВСЕГДА полосой, разворот недоступен.
   На 375px развёрнутая панель занимала 264px — две трети экрана под меню, контенту
   оставалось 111px, и карточки уходили за край. Отдельной мобильной раскладки у
   приложения нет, но режим полосы у панели уже есть: на узком экране он просто
   становится единственным (72 + 303 вместо 264 + 111).
   Дублируем и для `:root.nf-rail` — иначе класс на <html> с той же
   специфичностью перебивал бы это правило порядком в файле. */
@media (max-width: 700px){
  :root, :root.nf-rail{
    --nf-sb-w:72px; --nf-sb-pos:absolute; --nf-sb-gap:72px;
    --nf-sb-lbl:none; --nf-sb-hd:none; --nf-sb-div:block; --nf-sb-just:center;
    --nf-sb-btnpad:11px 0; --nf-sb-cmdpad:10px 0; --nf-sb-logopad:0px;
    --nf-sb-side:11px; --nf-sb-full:none; --nf-sb-mini:grid;
  }
}

/* Иконка Material Symbols. Размер задаёт компонент — он везде разный. */

/* ── Оболочка ─────────────────────────────────────────────────────────────
   Скролл живёт внутри <main>, поэтому оболочка ровно во весь экран и не
   прокручивается сама: липкая шапка иначе прилипала бы к окну, а не к контенту. */
.nf-app{
  /* 100dvh со страховкой 100vh строкой выше: 100vh на телефоне считается БЕЗ
     панели браузера, и нижние 60–115 px приложения уезжали под неё. Достать их
     было нечем — прокрутка живёт внутри <main>, а сама оболочка заперта в
     overflow:hidden. Порядок строк важен: браузер без dvh возьмёт первую. */
  height:100vh;height:100dvh;display:flex;min-height:0;position:relative;
  background:var(--bg);overflow:hidden;
}
/* Распорка под панель: в свёрнутом режиме панель абсолютная и выпадает
   из потока — эти 72px держат контент на месте, пока она разворачивается. */
.nf-sb-gap{width:var(--nf-sb-gap);flex:none}

/* ── Боковая панель ───────────────────────────────────────────────────────
   z-index 70: в незакреплённом режиме панель разворачивается ПОВЕРХ контента
   и должна перекрывать липкую шапку (30). Единственный переход в интерфейсе. */
.nf-sb{
  position:var(--nf-sb-pos);left:0;top:0;bottom:0;z-index:70;
  width:var(--nf-sb-w);flex:none;
  background:var(--bg);border-right:1px solid var(--bd);
  padding:0 var(--nf-sb-side) 14px;
  display:flex;flex-direction:column;gap:3px;
  overflow-x:hidden;overflow-y:auto;
  box-shadow:var(--nf-sb-shadow);
  transition:width .17s cubic-bezier(.4,0,.2,1);
}
/* Скроллбар панели скрыт: в полосе 72px он съедал треть ширины. */
.nf-sb::-webkit-scrollbar{width:0;height:0}

/* Разворот по наведению — только в режиме полосы и только там, где курсор
   действительно есть; на тач-экране «ховер» залипает после тапа. */
@media (hover:hover){
  /* :not(.is-held) — то, чего не хватало. Кнопка «Свернуть панель» стоит ВНУТРИ
     панели, поэтому сразу после клика :hover остаётся истинным и продолжал держать
     264px: контент уже уехал влево, а панель «зависала» широкой до тех пор, пока
     курсор с неё не уводили. Это и есть жалоба «сворачивается с задержкой».
     В эталоне разворот висит на СОБЫТИИ onMouseEnter (стр.111, 1685) и после клика
     повторно не срабатывает; класс-блокировку снимает первый же уход курсора. */
  :root.nf-rail .nf-sb:not(.is-held):hover{
    --nf-sb-w:264px;
    --nf-sb-lbl:inline; --nf-sb-hd:block; --nf-sb-div:none; --nf-sb-just:flex-start;
    --nf-sb-btnpad:11px 14px; --nf-sb-cmdpad:10px 12px; --nf-sb-logopad:22px;
    --nf-sb-side:14px; --nf-sb-full:block; --nf-sb-mini:none;
    --nf-sb-shadow:0 26px 70px rgba(0,0,0,.5);
  }
}

/* Логотип. Высота строки 65px совпадает с липкой шапкой — линии границ
   сходятся в одну через всю ширину экрана. Отрицательные поля тянут границу
   на всю ширину панели, минуя её боковой отступ. */
.nf-sb__logo{
  display:flex;align-items:center;justify-content:var(--nf-sb-just);gap:11px;
  margin:0 calc(-1 * var(--nf-sb-side)) 16px;
  padding:0 var(--nf-sb-logopad);
  height:65px;flex:none;border-bottom:1px solid var(--bd);
}
.nf-sb__mark{width:27px;height:27px;flex:none;filter:drop-shadow(0 0 9px rgba(0,230,118,.45))}
/* Четыре грани алмаза — фиксированные цвета марки (спецификация 3.5). */
.nf-sb__mark-top{fill:#7CFFC4}
.nf-sb__mark-body{fill:var(--gem)}
.nf-sb__mark-shade{fill:#00A855}
.nf-sb__mark-left{fill:#3DF39A}
.nf-sb__wordmark{
  display:var(--nf-sb-lbl);font:800 19px/1 var(--ff);
  letter-spacing:-.6px;white-space:nowrap;
}

/* Поле «Найти… ⌘K» */
.nf-sb__cmd{
  display:flex;align-items:center;justify-content:var(--nf-sb-just);gap:10px;
  width:100%;text-align:left;
  background:var(--sunk);border:1px solid var(--bd);border-radius:12px;
  padding:var(--nf-sb-cmdpad);margin-bottom:16px;cursor:pointer;
}
.nf-sb__cmd .nf-i{font-size:19px;color:var(--tx2)}
.nf-sb__cmd-lbl{
  display:var(--nf-sb-lbl);font:600 13.5px/1 var(--ff);color:var(--tx2);
  flex:1;white-space:nowrap;
}
.nf-sb__cmd-key{display:var(--nf-sb-lbl);font:600 10.5px/1 var(--ff);color:var(--tx2)}

/* Рубрикаторы и заменяющая их в полосе линия */
.nf-sb__head{display:var(--nf-sb-hd);font:600 12.5px/1 var(--ff);color:var(--tx2);padding:0 14px 11px}
.nf-sb__head--second{padding:22px 14px 11px}
.nf-sb__div{display:var(--nf-sb-div);height:1px;background:var(--bd);margin:11px 14px}
.nf-sb__div--bottom{margin:0 14px 11px}

/* Пункты навигации */
.nf-sb__nav{
  display:flex;align-items:center;justify-content:var(--nf-sb-just);gap:14px;
  text-align:left;border:0;border-radius:14px;padding:var(--nf-sb-btnpad);
  cursor:pointer;font:600 15.5px/1.2 var(--ff);
  background:transparent;color:var(--tx);
}
.nf-sb__nav:hover{background:var(--surf);color:var(--tx)}
.nf-sb__nav.is-active{background:var(--surf2)}
.nf-sb__nav-lbl{display:var(--nf-sb-lbl);white-space:nowrap}
.nf-sb__spacer{flex:1;min-height:24px}

/* Свернуть / закрепить панель */
.nf-sb__pin{margin-bottom:12px;
  display:flex;align-items:center;justify-content:var(--nf-sb-just);gap:14px;
  text-align:left;border:0;background:transparent;color:var(--tx2);
  border-radius:14px;padding:var(--nf-sb-btnpad);margin-bottom:6px;
  cursor:pointer;font:600 13px/1.2 var(--ff);white-space:nowrap;
}
.nf-sb__pin:hover{background:var(--surf);color:var(--tx)}
/* 22px — как в эталоне (стр. 135-136 прототипа). Без font-size обе стрелки
   наследовали 13px от подписи кнопки и были заметно мельче остальных иконок. */
.nf-sb__pin-on{display:var(--nf-pin-on);place-items:center;width:22px;font-size:22px}
.nf-sb__pin-off{display:var(--nf-pin-off);place-items:center;width:22px;font-size:22px}
/* Подпись видна, только если совпали два условия: нужное состояние и
   развёрнутая панель. Второе условие приезжает подстановкой --nf-sb-lbl. */
.nf-sb__pin-lbl-on{display:var(--nf-pin-lbl-on)}
.nf-sb__pin-lbl-off{display:var(--nf-pin-lbl-off)}

/* Остаток доступа. Обёртка display:contents — она только несёт цвет полосы
   обоим видам карточки (полной и кружку), но не участвует в раскладке. */
.nf-access-slot{display:contents}
.nf-access-slot--calm{--nf-access-c:var(--pos)}
.nf-access-slot--warn{--nf-access-c:var(--warn)}
.nf-access-slot--soon{--nf-access-c:var(--cta)}
.nf-access{
  display:var(--nf-sb-full);width:100%;text-align:left;
  border:1px solid var(--bd);border-radius:var(--r);padding:14px;
  background:var(--surf);
}
/* Подпись тарифа (владелец 05.10.2026): «Ниши месяца · сентябрь», «Месяц · до 04.11».
   Имя тарифа белым, срок вторым цветом. Переносится, а не режется: два выпуска
   («сентябрь, октябрь») в 236 px одной строкой не встают. Ведёт в «Подписку и продление». */
.nf-access__txt{display:block;font:600 12.5px/1.35 var(--ff);color:var(--tx2);
  text-decoration:none}
.nf-access__txt b{color:var(--tx);font-weight:700}
.nf-access__txt:hover{color:var(--tx);text-decoration:none}
.nf-access__bar{height:5px;border-radius:99px;background:var(--surf2);overflow:hidden;margin-top:9px}
.nf-access__fill{height:100%;border-radius:99px;width:var(--nf-access-w,0%);background:var(--nf-access-c)}
/* «Расширить подписку» — у бесплатного, «Ниш месяца» и месяца; открывает окно тарифов.
   Кнопкой панели, а не рекламным баннером: тихий контур, красный — только значок. */
.nf-access__up{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  height:36px;margin-top:11px;padding:0 12px;border:1px solid rgba(255,0,51,.45);
  border-radius:10px;background:rgba(255,0,51,.08);color:var(--tx);cursor:pointer;
  font:700 12.5px/1 var(--ff);white-space:nowrap;transition:background .15s,border-color .15s}
.nf-access__up .nf-i{font-size:17px;color:var(--cta)}
.nf-access__up:hover{background:rgba(255,0,51,.16);border-color:var(--cta)}
.nf-access-mini{
  display:var(--nf-sb-mini);place-items:center;width:40px;height:40px;margin:0 auto;
  border:1px solid var(--bd);border-radius:13px;background:var(--surf);
  position:relative;color:var(--tx2);padding:0;cursor:pointer;text-decoration:none;
}
.nf-access-mini .nf-i{font-size:20px}
.nf-access-mini:hover{color:var(--tx);text-decoration:none}
.nf-access-mini--up{color:var(--cta);border-color:rgba(255,0,51,.45);background:rgba(255,0,51,.08)}
.nf-access-mini--up:hover{color:var(--cta);border-color:var(--cta)}
.nf-access-mini__dot{
  position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:99px;
  border:2px solid var(--bg);background:var(--nf-access-c);
}

/* ── Контент и липкая шапка ───────────────────────────────────────────────
   Скролл у <main>, шапка липнет к нему (z 30 — над контентом, под панелью). */
/* scroll-padding-top — под липкую шапку (65 px) с запасом: переход к якорю
   (/account#tariffs, #radar, #payments, «Подписка и продление» из меню профиля) ставит
   раздел ПОД шапкой, а не под неё (владелец 05.10.2026: «открывается чуть выше, чем
   нужно»). Прокрутка живёт в <main>, поэтому отступ — здесь, а не у html. */
.nf-main{flex:1;min-width:0;overflow-y:auto;scroll-padding-top:81px}
.nf-topbar{
  /* z-index 30, как в прототипе (стр.147) и спецификации: панель (70) обязана
     разворачиваться ПОВЕРХ шапки. Стояло 80, и в режиме полосы непрозрачная шапка
     накрывала верхние 65px раскрытой панели — ровно ту строку, где логотип. Отсюда
     жалоба «логотип NicheFinder пропадает при сворачивании панели». */
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;height:65px;padding:0 34px;
  background:var(--bg);border-bottom:1px solid var(--bd);
}
/* Всё содержимое шапки прижато вправо: слева намеренно пусто. */
.nf-topbar__slot{position:relative}
.nf-topbar__slot--first{margin-left:auto}

.nf-bell{
  position:relative;border:0;background:transparent;color:var(--tx);
  width:38px;height:38px;border-radius:99px;cursor:pointer;
  display:grid;place-items:center;
}
/* Размер иконки задаёт место применения (см. правило .nf-i) — здесь его забыли,
   и колокольчик наследовал 14px от шапки вместо эталонных 22px. */
.nf-bell .nf-i{font-size:22px}
.nf-bell:hover{background:var(--surf)}
/* Число непрочитанных вместо точки (15.09.2026): точка говорила «что-то есть»,
   число говорит сколько. Обводка цветом фона отделяет его от колокольчика. */
.nf-bell__n{
  position:absolute;top:1px;right:-1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--cta);color:#fff;font:800 10px/16px var(--ff);
  text-align:center;border:2px solid var(--bg);box-sizing:content-box;
}
.nf-bell__n[hidden]{display:none}

/* ── Лента новых каналов в шапке (владелец 15.09.2026, канвас Л2) ─────────
   Занимает пустое место между панелью и колокольчиком. Одна строка за раз,
   смену раз в 5 с делает app.js классами is-in/is-out; на ховере смена стоит.
   «НОВЫЙ КАНАЛ» ярче остального (белым капсом), ниша — цветом её буквы, имя
   белым, просмотры синим (как везде числа «данных»), доход зелёным, оценка —
   тем же чипом «N из 10», что на карточке канала. Слов «сильный/средний» нет. */
.nf-lenta{flex:1;min-width:0;height:38px;position:relative;overflow:hidden;
  display:flex;align-items:center}
.nf-lenta[hidden]{display:none}
/* Капсула — ПО ЦЕНТРУ полосы (владелец 16.09.2026: «отцентрована влево, а хочу в
   середине»). Сетка из трёх колонок: боковые делят свободное место поровну, средняя
   — по капсуле, поэтому центр капсулы = центр полосы; счётчик «1 / 5» и «×» стоят в
   правой колонке сразу за капсулой и на центровку не влияют. Правая колонка не уже
   своего содержимого — на тесной полосе капсула сдвинется, но хвост не обрежется. */
.nf-lenta__line{position:absolute;left:0;right:0;top:0;height:38px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(max-content,1fr);
  align-items:center;column-gap:12px;white-space:nowrap;min-width:0;
  opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease;
  pointer-events:none}
.nf-lenta__line.is-in{opacity:1;transform:none;pointer-events:auto}
.nf-lenta__line.is-out{opacity:0;transform:translateY(-8px)}
/* Одна капсула на всю строку (владелец 15.09.2026, канвас Л-А): раньше строка
   читалась как шесть разрозненных надписей. Капсула целиком — кнопка: наведение
   подсвечивает её как «Все ниши», клик открывает карточку канала; «Открыть» внутри
   — та же кнопка, только со своей подсветкой. */
.nf-lenta__cap{grid-column:2;display:inline-flex;align-items:center;gap:10px;height:38px;
  padding:0 5px 0 14px;border-radius:999px;min-width:0;max-width:100%;
  background:var(--surf);border:1px solid var(--bd);color:var(--tx);cursor:pointer;
  font:600 12.5px/1 var(--ff);transition:background .14s,border-color .14s}
.nf-lenta__cap:hover{background:var(--surf2);border-color:var(--bdS);filter:none}
.nf-lenta__tag{font:800 10px/1 var(--ff);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx);display:inline-flex;align-items:center;gap:7px;flex:none}
.nf-lenta__tag::before{content:"";width:7px;height:7px;border-radius:99px;
  background:var(--cta);animation:nfPulse 2s ease-in-out infinite}
.nf-lenta__sep{width:1px;height:16px;background:var(--bdS);flex:none}
/* На тесной полосе (ноутбук 1366 px) капсула не влезала в свою колонку и «Цифры канала»
   ложились поверх счётчика «1 / 30» (17.10.2026): ни один кусок капсулы не сжимался.
   Теперь уступает название ниши — многоточием; цифры, оценка и кнопка остаются целыми,
   а капсула обрезает, а не вылезает. */
.nf-lenta__cap{overflow:hidden}
.nf-lenta__niche{font-weight:700;color:var(--nf-tier,var(--tx));flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.nf-lenta__name{color:var(--tx);overflow:hidden;text-overflow:ellipsis;max-width:220px}
.nf-lenta__views{color:var(--data);flex:none}
.nf-lenta__money{color:var(--pos);flex:none}
.nf-lenta__grade{font:800 10px/1 var(--ff);color:var(--nf-vg,var(--tx));
  background:color-mix(in srgb,var(--nf-vg,var(--tx2)) 16%,transparent);
  border-radius:6px;padding:4px 6px;white-space:nowrap;flex:none}
.nf-lenta__open{display:inline-flex;align-items:center;height:28px;padding:0 12px;
  border-radius:999px;background:var(--surf2);color:var(--tx);
  font:700 12px/1 var(--ff);flex:none;transition:background .14s}
.nf-lenta__cap:hover .nf-lenta__open{background:#3D3D3D}
.nf-lenta__open:hover{background:#4A4A4A}
.nf-lenta__cnt{grid-column:3;justify-self:start;display:inline-flex;align-items:center;gap:8px;
  font:600 11.5px/1 var(--ff);color:var(--tx2);flex:none;padding-right:2px}
/* Стрелки листают ленту руками (владелец 29.09.2026): сама она меняет строку раз в
   пять секунд, этого хватает прочитать, но не хватает вернуться к мелькнувшему.
   Выглядят как крестик и стоят слева от него — крестик это выход, он последний. */
.nf-lenta__nav{border:0;background:transparent;padding:0;width:24px;height:26px;
  border-radius:99px;display:grid;place-items:center;color:var(--tx2);cursor:pointer}
.nf-lenta__nav .nf-i{font-size:18px}
.nf-lenta__nav:hover{color:var(--tx);background:var(--surf)}
.nf-lenta__x{border:0;background:transparent;padding:0;width:26px;height:26px;
  border-radius:99px;display:grid;place-items:center;color:var(--tx2);cursor:pointer}
.nf-lenta__x .nf-i{font-size:18px}
.nf-lenta__x:hover{color:var(--tx);background:var(--surf)}
/* Ниже 1100px строке негде поместиться рядом с колокольчиком и профилем — колокольчик
   всё равно показывает то же самое. */
@media (max-width:1100px){.nf-lenta{display:none}}
/* Уже 1440 одной уступки ниши мало: на ноутбучных 1366 от названия оставалось «Тексто…», а ещё
   уже кнопку «Цифры канала» отрезало бы. Тогда капсула теряет второстепенное по ступеням:
   сначала «в нише» и просмотры (они есть в карточке канала), потом доход.
   Ниша, оценка и кнопка остаются всегда (17.10.2026). */
@media (max-width:1439px){.nf-lenta__views,.nf-lenta__in{display:none}}
@media (max-width:1240px){.nf-lenta__money{display:none}}
/* Главная на ноутбуке (экран ниже 900 px) — плотнее, порядок тот же (владелец 17.10.2026, п. 16,
   вариант Б): на 1366×768 первая карточка «Каналов на взлёте» начиналась с 603 px, и первого ряда
   было видно 57 %. Подписка — в одну строку (без пояснения), карусель ниш и отступы плотнее,
   запас под тень карусели меньше — первого ряда видно 99 %. На больших мониторах всё как было. */
@media (max-height:900px) and (min-width:1100px){
  .nf-showcase--home{padding-top:14px}
  .nf-showcase--home .nf-subs{padding:7px 12px 7px 14px}
  .nf-showcase--home .nf-subs__icon{width:28px;height:28px;border-radius:9px}
  .nf-showcase--home .nf-subs__hint{display:none}
  .nf-showcase--home .nf-subs__title{font-size:14px;margin:0}
  .nf-showcase--home .nf-subs__cta{height:32px;padding-top:0;padding-bottom:0}
  .nf-showcase--home .nf-showcase__head{margin-top:14px;margin-bottom:10px}
  .nf-showcase--home .nf-viral{padding-bottom:16px;margin-bottom:10px}
  .nf-showcase--home .nf-viral .nf-niche__body{padding:10px 14px 9px}
  .nf-showcase--home .nf-viral .nf-niche__top{margin-bottom:4px}
  .nf-showcase--home .nf-viral .nf-niche__namebox{padding-bottom:6px}
  .nf-showcase--home .nf-viral .nf-niche__name{font-size:15px}
  .nf-showcase--home .nf-viral .nf-niche__foot{padding-top:7px}
  .nf-showcase--home .nf-viral-bar{margin-top:8px}
}

/* Выпадающие панели шапки. z 50 — внутри липкой шапки, над её соседями. */
.nf-panel{
  display:none;position:absolute;right:0;top:52px;flex-direction:column;
  background:var(--surf);border:1px solid var(--bdS);border-radius:18px;padding:8px;
  box-shadow:var(--nf-shadow-panel);animation:nfRise .16s ease-out;z-index:50;
}
.nf-panel.is-open{display:flex}
.nf-panel--profile{width:286px}

.nf-panel--notif{width:500px;max-height:min(72vh,660px)}
.nf-notif__head{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;flex:none}
.nf-notif__ttl{font:700 14px/1 var(--ff)}
.nf-notif__count{
  /* Чернила тёмные (#1A0B04), как в эталоне: белым по --cta счётчик читается
     хуже, а на светлых гаммах перестаёт читаться вовсе. */
  font:700 10px/1 var(--ff);color:#1A0B04;background:var(--cta);
  border-radius:999px;padding:4px 7px;
}
.nf-notif__read{
  margin-left:auto;border:0;background:transparent;padding:0;
  font:600 12px/1 var(--ff);color:var(--tx2);cursor:pointer;
}
.nf-notif__read:hover{color:var(--tx)}
/* Колонки (владелец 15.09.2026): канал | просмотры | доход | оценка. Одна сетка
   на шапку колонок и на строки — иначе цифры не встанут друг под другом. */
/* Колонка просмотров 126px, а не 98: заголовок «ПРОСМОТРЫ / МЕС» в 98 ломался на две
   строки (владелец 16.09.2026: «очень некрасиво»). Заголовки не переносятся вовсе —
   если колонка станет уже текста, он обрежется, а не поедет вниз. */
.nf-panel--notif{--nf-notif-cols:minmax(0,1fr) 126px 114px 54px}
.nf-notif__cols{display:grid;grid-template-columns:var(--nf-notif-cols);gap:10px;
  padding:0 12px 6px;font:800 9px/1.3 var(--ff);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx2);flex:none}
.nf-notif__cols span{white-space:nowrap;overflow:hidden}
.nf-notif__cols span:first-child{padding-left:14px}
.nf-notif__cols span:not(:first-child){text-align:right}
/* Список прокручивается внутри панели: три десятка каналов не должны выталкивать
   подвал «Настроить подписку» за край экрана. */
.nf-notif__list{overflow-y:auto;min-height:0;flex:1}
/* Группа — ниша; имя цветом её буквы (насколько ниша топовая), как на карточке. */
.nf-notif__group{display:flex;align-items:center;gap:7px;padding:10px 12px 4px;
  font:800 9.5px/1 var(--ff);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.nf-notif__gdot{width:7px;height:7px;border-radius:99px;background:var(--nf-tier,var(--tx2));flex:none}
.nf-notif__gname{color:var(--nf-tier,var(--tx));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-notif__item{
  display:grid;grid-template-columns:var(--nf-notif-cols);gap:10px;align-items:center;
  width:100%;text-align:left;border:0;background:transparent;border-radius:12px;
  padding:8px 12px;cursor:pointer;color:var(--tx);
}
.nf-notif__item:hover{background:var(--surf2)}
/* Точка непрочитанного стоит в поле слева (14px), а имя канала, «только что» под ним,
   имя ниши и заголовок «КАНАЛ» начинаются с ОДНОЙ вертикали — владелец 16.09.2026:
   «только что» под точкой, а должно начинаться там, где имя. Прочитанные без точки
   получают тот же отступ, иначе их имена уезжали бы левее свежих. */
.nf-notif__name{min-width:0;display:flex;flex-direction:column;gap:3px;position:relative;padding-left:14px}
.nf-notif__title{display:block;font:600 13px/1.3 var(--ff);color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nf-notif__when{font:600 10.5px/1 var(--ff);color:var(--tx2);white-space:nowrap}
/* Просмотры синим, доход зелёным — как везде в продукте; по правому краю, под
   заголовком своей колонки. */
.nf-notif__views{font:600 12px/1.2 var(--ff);color:var(--data);text-align:right;white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.nf-notif__sub{font:600 10px/1 var(--ff);color:var(--tx2)}
.nf-notif__money{font:600 12px/1.2 var(--ff);color:var(--pos);text-align:right;white-space:nowrap}
.nf-notif__money--none{color:var(--tx2)}
.nf-notif__gradecell{text-align:right;font:600 12px/1 var(--ff);color:var(--tx2);white-space:nowrap}
/* Оценка — тот же чип «N из 10», что на карточке канала в нише (.nf-ch__grade). */
.nf-notif__grade{display:inline-block;font:800 10px/1 var(--ff);color:var(--nf-vg,var(--tx));
  background:color-mix(in srgb,var(--nf-vg,var(--tx2)) 16%,transparent);
  border-radius:6px;padding:4px 6px;white-space:nowrap;cursor:help}
.nf-notif__dot{position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:99px;background:var(--cta)}
.nf-notif__item:not(.is-fresh){opacity:.62}
.nf-notif__item:not(.is-fresh):hover{opacity:1}
.nf-notif__empty{padding:12px;font:600 12.5px/1.5 var(--ff);color:var(--tx2)}
/* «Выбрать ниши» в пустом колокольчике без подписок (13.10.2026): ведёт к плашке подписки
   на главной — тем же адресом, что «Настроить подписку» в подвале панели. */
.nf-notif__cta{display:inline-block;margin-top:10px;padding:7px 12px;border-radius:8px;
  background:var(--cta);color:var(--ctaTx);font:700 12.5px/1 var(--ff);text-decoration:none}
.nf-notif__cta:hover{filter:brightness(1.08)}
.nf-notif__foot{border-top:1px solid var(--bd);margin:6px 6px 0;padding-top:6px;flex:none}
.nf-notif__rules{display:block;padding:2px 10px 6px;font:600 11.5px/1.4 var(--ff);color:var(--tx3)}
.nf-notif__rules:hover{color:var(--tx2)}
.nf-notif__tune{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--tx);border-radius:12px;padding:12px;
  cursor:pointer;font:700 12.5px/1 var(--ff);
}
.nf-notif__tune:hover{background:var(--surf2);color:var(--tx)}
.nf-notif__tune .nf-i{font-size:19px;color:var(--tx2)}
/* font-size повторён в более весомом селекторе: одиночный класс проигрывал
   правилу «.nf-notif__tune .nf-i» (19px), и стрелка выходила на пиксель крупнее. */
.nf-notif__tune .nf-notif__tune-arrow{margin-left:auto;font-size:18px}

.nf-prof{
  display:flex;align-items:center;gap:10px;border:0;background:transparent;
  cursor:pointer;padding:5px 6px 5px 5px;border-radius:999px;
}
.nf-prof:hover{background:var(--surf)}
.nf-prof__ava{
  width:34px;height:34px;border-radius:99px;background:var(--surf2);
  display:grid;place-items:center;font:600 13px/1 var(--ff);color:var(--tx);
}
.nf-prof__name{font:600 13.5px/1 var(--ff);color:var(--tx)}
.nf-prof .nf-i{font-size:20px;color:var(--tx2)}
.nf-prof__head{display:flex;align-items:center;gap:12px;padding:12px 12px 14px}
.nf-prof__ava--big{
  width:42px;height:42px;border-radius:99px;background:var(--surf2);
  display:grid;place-items:center;font:700 16px/1 var(--ff);flex:none;
}
.nf-prof__who{min-width:0}
.nf-prof__who-name{font:700 14.5px/1.2 var(--ff)}
.nf-prof__who-mail{
  font:600 12px/1.3 var(--ff);color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nf-seg{
  display:flex;gap:3px;background:var(--sunk);border:1px solid var(--bd);
  border-radius:999px;padding:3px;
}
.nf-seg__btn{
  flex:1;text-align:center;border:0;background:transparent;color:var(--tx2);
  border-radius:999px;padding:8px 0;font:600 12px/1 var(--ff);cursor:pointer;
}
.nf-seg__btn.is-active{background:var(--surf2);color:var(--tx);font-weight:700}
.nf-prof__div{height:1px;background:var(--bd);margin:0 6px 6px}
.nf-prof__item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--tx);border-radius:12px;
  padding:11px 12px;cursor:pointer;font:600 13.5px/1 var(--ff);
}
.nf-prof__item:hover{background:var(--surf2);color:var(--tx)}
.nf-prof__item .nf-i{font-size:20px;color:var(--tx2)}
.nf-prof__logout{margin:0}
/* Единственное место, где иконке нужен 22px (пункты навигации). */
.nf-sb__nav .nf-i{font-size:22px}


/* ═══ showcase ═══════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════════════
   ЭКРАН «ВИТРИНА» — плашка подписки, карусель ниш, каналы на взлёте
   Источник: NicheFinder v2.dc.html, строки 211–349; спецификация, раздел 8.
   Все размеры/шрифты/отступы перенесены дословно из прототипа.
   ═════════════════════════════════════════════════════════════════════════ */

/* Огненная обводка топ-3. Единственный цвет вне токенов — он назван в
   спецификации 3.6 как фиксированный. Держим переменной, чтобы обводка была
   одна и та же на карточке и в строке списка. */
.nf-showcase{
  --nf-badge-scrim:rgba(0,0,0,.72);  /* подложка бейджей на превью, спец. 3.5 */
  --nf-lock-plate:rgba(0,0,0,.84);   /* плашка пейволла поверх карточки       */
  /* Боковое поле экрана переменной, а не числом: по нему выравнивается карусель
     ниш, и разъехаться эти два числа не должны (см. .nf-viral). */
  --nf-pad-x:34px;
  padding:26px var(--nf-pad-x) 70px;
}

/* Иконка Material Symbols. Общий примитив: если такой же класс придёт из
   соседнего куска — правила идентичны, дубль безвреден. */

/* Базовая кнопка из tokens.css осветляется на ховере — в витрине кнопки
   плоские, подсветку гасим один раз на всю секцию. */


/* ── Шапки блоков ──────────────────────────────────────────────────────────── */
.nf-showcase__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px}
/* у «Каналов на взлёте» шапка прижата к сегментам: 8px здесь + 22px сверху у
   .nf-rise дают ту же распорку, что в прототипе отдельным пустым блоком */
.nf-showcase__head--tight{margin-bottom:8px}
.nf-showcase__h2{margin:0;font:700 25px/1.2 var(--ff);letter-spacing:-.7px}
.nf-showcase__info{font-size:19px;color:var(--tx2);cursor:help}
.nf-showcase__spacer{flex:1}

/* ══ ОДНА КНОПКА НАВИГАЦИИ ═══════════════════════════════════════════════════
   «Все ниши →» на главной, «← На главную» на странице ниш, крошки на странице
   ниши — раньше три разных вида: пилюля, голый серый текст со стрелкой и синие
   ссылки. Владелец 14.09.2026: кнопки, которые ведут между экранами, обязаны
   выглядеть одинаково, одинаково загораться и одинаково двигать стрелку.
   Эталон — пилюля «Все ниши»; остальные приведены к ней.
   Направление задаётся модификатором, а не положением иконки в разметке: в
   «Все ниши<span>» иконка — и первый, и последний элемент-ребёнок, и правило по
   :first-child/:last-child выбирало бы направление наугад. */
.nf-navbtn{display:inline-flex;align-items:center;gap:8px;
  background:var(--sunk);border:1px solid var(--bd);color:var(--tx);
  border-radius:var(--rchip);padding:0 17px;height:38px;
  font:600 12.5px/1 var(--ff);white-space:nowrap;text-decoration:none;
  cursor:pointer;transition:background .14s,border-color .14s}
/* filter:none — базовый button:hover из tokens.css (brightness 1.12) весит больше
   сброса `.nf-app :where(button:hover)`, и пилюля-кнопка иначе светлела бы чуть
   иначе, чем пилюля-ссылка рядом. */
.nf-navbtn:hover{color:var(--tx);text-decoration:none;filter:none;
  background:var(--surf2);border-color:var(--bdS)}
/* Стрелка отъезжает на 4px — направление кнопки читается движением, а не цветом.
   Именно transform, а не gap: кнопка «Все ниши» стоит в правом конце строки за
   спейсером, правый край у неё прибит, и от gap росла ширина — лишние 4px уходили
   влево, уезжала подпись, а стрелка стояла (владелец 14.09.2026). Transform
   коробку не трогает: подпись на месте, едет только стрелка. */
.nf-navbtn .nf-i{font-size:18px;transition:transform .14s}
.nf-navbtn--fwd:hover .nf-i{transform:translateX(4px)}
.nf-navbtn--back:hover .nf-i{transform:translateX(-4px)}
@media (prefers-reduced-motion: reduce){
  .nf-navbtn .nf-i{transition:none}
  .nf-navbtn--fwd:hover .nf-i,.nf-navbtn--back:hover .nf-i{transform:none}
}

/* ── 1. Плашка «Подписка на новые каналы» ─────────────────────────────────
   Скрыть плашку нельзя — она всегда первая на витрине (спец. 8.1). Три состояния
   (off / on / muted) переключает один data-state на корне, без перерисовки;
   список ниш — data-list. Перерисована 15.09.2026 по канвасу (плашка A). */
.nf-subs{background:var(--surf);border-radius:var(--r);padding:20px 22px;
  margin-bottom:34px;border:1px solid transparent;
  transition:border-color .14s,background .14s}
/* Плашка отзывается на курсор целиком (владелец 04.09.2026): подсветка говорит
   «блок живой, внутри есть что нажать». Кнопки на подсветке не пропадают: у
   «Подписаться» свой белый цвет, у пилюль — чёрный. */
.nf-subs:hover{border-color:var(--bdS);background:var(--surf2)}
.nf-subs__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer}
/* Заголовок с иконкой — одна из трёх «шапок», видна та, что по состоянию. Она же
   кнопка: клик сворачивает и раскрывает список (вся полоса живая). */
.nf-subs__who{display:none;flex:1;min-width:240px;align-items:center;gap:12px;
  cursor:pointer;user-select:none;animation:nfRise .2s ease-out}
.nf-subs[data-state="off"] .nf-subs__who--off,
.nf-subs[data-state="on"] .nf-subs__who--on,
.nf-subs[data-state="muted"] .nf-subs__who--muted{display:flex}
.nf-subs__acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nf-subs__acts>*{display:none}
.nf-subs[data-state="off"] .nf-subs__act--off,
.nf-subs[data-state="on"] .nf-subs__act--on,
.nf-subs[data-state="muted"] .nf-subs__act--muted{display:inline-flex}

.nf-subs__icon{width:38px;height:38px;flex:none;border-radius:12px;
  background:var(--surf2);color:var(--tx2);display:grid;place-items:center;
  font-size:21px;transition:background .14s,color .14s}
.nf-subs:hover .nf-subs__icon{background:#3A3A3A;color:var(--tx)}
/* Включённая подписка — ЖЁЛТАЯ, тем же цветом, что закладка в избранном
   (владелец 04.09.2026). Зелёный здесь спорил с гем-зелёным логотипа и читался
   как «всё хорошо», а не как «вы на это подписаны». */
.nf-subs__icon--on{position:relative;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 16%,transparent);
  font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24}
.nf-subs:hover .nf-subs__icon--on{color:var(--warn);
  background:color-mix(in srgb,var(--warn) 26%,transparent)}
.nf-subs__dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;
  border-radius:99px;background:var(--warn);border:2px solid var(--surf);
  animation:nfPulse 2s ease-in-out infinite}
/* Выключено — серый перечёркнутый колокольчик: выбор цел, уведомлений нет. */
.nf-subs__icon--muted{color:var(--tx2)}

.nf-subs__body{flex:1;min-width:200px}
.nf-subs__title{font:700 19px/1.2 var(--ff);letter-spacing:-.4px;margin-bottom:5px}
.nf-subs__hint{font:600 13px/1.3 var(--ff);color:var(--tx2)}
.nf-subs__meta{display:flex;align-items:center;gap:9px;font:600 13px/1.3 var(--ff);
  color:var(--tx2);flex-wrap:wrap}
.nf-subs__picked{font-weight:500;color:var(--tx);white-space:nowrap}
.nf-subs__count{font-weight:800;color:var(--gem);border-bottom:2px solid var(--gem);
  padding-bottom:1px;white-space:nowrap}
.nf-subs__tail{min-width:0}

/* «Подписаться» / «Включить» — белая, самая заметная кнопка плашки (владелец
   15.09.2026): серая на серой подсветке плашки пропадала. */
.nf-subs__cta{border:0;background:var(--tx);color:var(--bg);
  border-radius:var(--rchip);padding:0 18px;height:40px;font:700 13px/1 var(--ff);
  cursor:pointer;white-space:nowrap;transition:filter .14s,transform .14s;
  align-items:center}
.nf-subs__cta:hover{filter:brightness(.88);transform:translateY(-1px)}
.nf-subs__cta:active{transform:translateY(0)}
.nf-subs__more{align-items:center;gap:8px;
  border:1px solid var(--bdS);background:transparent;color:var(--tx);
  border-radius:var(--rchip);padding:0 16px;height:40px;font:700 12.5px/1 var(--ff);
  cursor:pointer;white-space:nowrap;transition:background .14s,border-color .14s}
.nf-subs__more .nf-i{font-size:18px}
.nf-subs__more:hover{background:var(--surf2)}
.nf-subs:hover .nf-subs__more:hover{background:#3D3D3D}
.nf-subs__stop{align-items:center;gap:7px;
  border:1px solid var(--bdS);background:transparent;color:var(--tx2);
  border-radius:var(--rchip);padding:0 16px;height:40px;font:700 12.5px/1 var(--ff);
  cursor:pointer;white-space:nowrap;transition:background .14s,border-color .14s,color .14s}
.nf-subs__stop .nf-i{font-size:17px}
/* «Сбросить» — красная только на ховере; «Отключить» — красная всегда, но тихо:
   красный текст и рамка вполсилы, без заливки (владелец 15.09.2026: «горит красным,
   но не забирает всё внимание»). */
.nf-subs__stop:hover{color:var(--tier-a);
  border-color:color-mix(in srgb,var(--tier-a) 65%,transparent);
  background:color-mix(in srgb,var(--tier-a) 10%,transparent)}
.nf-subs__stop[data-act="subs-off"]{color:var(--tier-a);
  border-color:color-mix(in srgb,var(--tier-a) 45%,transparent)}
.nf-subs__stop[data-act="subs-off"]:hover{background:var(--tier-a);border-color:var(--tier-a);
  color:var(--tx)}
.nf-subs__stop:disabled,.nf-subs__cta:disabled{opacity:.6;cursor:progress}

.nf-subs__pills{display:none;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;
  animation:nfRise .18s ease-out}
.nf-subs[data-list="1"] .nf-subs__pills{display:flex}
/* Пилюля ниши — как кнопки главной (.nf-navbtn): чёрная с тонкой рамкой, не серая
   на сером пунктире (владелец 15.09.2026). Отмеченная — тон буквы ниши и рамка в
   её цвет. Счётчиков новых каналов на пилюлях нет. */
.nf-subs__pill{display:inline-flex;align-items:center;height:38px;padding:0 15px;
  border-radius:var(--rchip);background:var(--sunk);border:1px solid var(--bd);
  color:var(--tx);font:600 12.5px/1 var(--ff);cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,filter .14s}
.nf-subs__pill:hover{background:var(--surf2);border-color:var(--bdS);filter:none}
.nf-subs:hover .nf-subs__pill:hover{background:#3D3D3D}
.nf-subs__pill[aria-pressed="true"]{color:var(--tx);
  background:color-mix(in srgb,var(--nf-tier,var(--tx2)) 16%,transparent);
  border-color:color-mix(in srgb,var(--nf-tier,var(--tx2)) 70%,transparent)}
.nf-subs__pill[aria-pressed="true"]:hover{filter:brightness(1.12);
  background:color-mix(in srgb,var(--nf-tier,var(--tx2)) 16%,transparent)}
.nf-subs__pill:disabled{opacity:.6;cursor:progress}
.nf-subs__empty{font:600 13px/1.4 var(--ff);color:var(--tx2)}

/* ── 2. Карусель «Самые виральные ниши» ────────────────────────────────────
   Одна строка карточек с собственным горизонтальным скроллом: страница вбок
   не едет, а список ниш заведомо длиннее экрана. */
/* Пока ниш нет, карусель схлопывается в ноль, и между двумя заголовками
   оставалась голая дыра — вёрстка читалась как поломка. */
.nf-viral:empty{display:none}
.nf-viral-empty{
  background:var(--surf);border:1px solid var(--bd);border-radius:var(--r);
  padding:18px 20px;margin-bottom:30px;max-width:760px;
  font:600 13.5px/1.5 var(--ff);color:var(--tx2);
}
/* overflow-x:auto по спецификации делает и overflow-y НЕ visible: карточка, которая
   на ховере приподнимается, обрезалась бы сверху вместе со свечением. Отступы дают
   ей место, отрицательные поля возвращают вёрстку на прежнее место.
   Боковой отступ равен полю экрана (--nf-pad-x) — и это не «с запасом», а условие
   выравнивания: контейнер прокрутки растягивается от края до края, а первая
   карточка встаёт ровно под заголовком и плашкой подписки. Меньшее значение
   двигало карточки левее остального экрана, большее — правее.
   Заодно 34px с запасом вмещают свечение ховера (20px наружу + 1px кольца),
   поэтому у крайней карточки оно больше не срезается прямой линией. */
/* Поля увеличены до 34/30 под голубое свечение наведения (16.08): оно уходит
   наружу на 46px, а контейнер с прокруткой режет всё, что вылезло за его край.
   Отрицательные поля скомпенсированы, чтобы карточки не сдвинулись ни на пиксель. */
.nf-viral{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(236px,1fr);
  gap:14px;overflow-x:auto;
  padding:34px var(--nf-pad-x) 30px;
  margin:-34px calc(-1 * var(--nf-pad-x)) 26px}
.nf-niche{background:var(--surf);border-radius:var(--r);overflow:hidden}
/* Только карусель главной: карточка тянется на всю высоту ряда и распределяет
   лишнее место сама. На странице ниш у карточки своя раскладка (nichecard.css),
   и общий flex там всё бы сдвинул. */
.nf-viral .nf-niche{display:flex;flex-direction:column}
.nf-viral .nf-niche__body{flex:1;display:flex;flex-direction:column}
.nf-niche__strip{height:4px;background:var(--nf-tier,var(--tx2))}
/* Снизу 13, а не 18: под цифрами дохода оставалось пустое поле (владелец 05.09.2026). */
.nf-niche__body{padding:16px 18px 13px}
.nf-niche__top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
/* Буква тира — один вид везде, см. .nf-niche__mark в nichecard.css. */
.nf-niche__badge{font:800 11px/1 var(--ff);border-radius:6px;padding:5px 7px;
  background:color-mix(in srgb,var(--nf-tier,var(--tx2)) 18%,transparent);
  color:var(--nf-tier,var(--tx));
  box-shadow:inset 0 0 0 1.5px var(--nf-tier,var(--bdS))}
.nf-niche__verdict{font:600 11.5px/1 var(--ff);color:var(--nf-tier,var(--tx2))}
.nf-niche__bm{margin-left:auto;border:0;background:transparent;padding:0;
  color:var(--tx2);cursor:pointer;font-size:19px;flex:none}
.nf-niche__bm[aria-pressed="true"]{color:var(--warn)}
/* Обёртка забирает всё свободное место и держит имя по центру. Резерв под две
   строки (min-height:42px) снят: он и создавал дыру — у однострочного названия
   пустота собиралась одним куском прямо под ним. Теперь она делится пополам и
   читается как поля вокруг имени, а не как пропуск.
   Отступ снизу — расстояние до чёрточки подвала, оно же было в margin имени. */
.nf-niche__namebox{flex:1;display:flex;align-items:center;padding-bottom:12px}
.nf-niche__name{font:700 17px/1.25 var(--ff);letter-spacing:-.4px;
  display:-webkit-box;-webkit-line-clamp:2;
  line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Заглушка показателя снята (владелец 04.09.2026): пунктирная рамка обещала
   будущий показатель, а какой — не решено. Пустое обещание на каждой карточке
   хуже отсутствия строки; вернём, когда показатель выберем. */
/* Подвал карточки: каналы | заработок, чёрточка между ними стоит ВСЕГДА и у всех
   карточек на одной вертикали — оттого колонка каналов и фиксирована по ширине.
   Раньше здесь была одна строка, где число каналов и заработок делили место, и
   пятизначная вилка в неё не влезала: её пришлось сокращать до тысяч. Теперь у
   заработка своя колонка с подписью, и сумма идёт целиком. */
.nf-niche__foot{display:flex;align-items:stretch;
  border-top:1px solid var(--bd);padding-top:12px}
/* ТОЛЬКО под .nf-niche__foot. Класс .nf-niche__cell общий с карточкой страницы
   «Ниши» (nichecard.css — решётка «Каналов | Новичок ниши»), и голое
   .nf-niche__cell{width:56px} утекало туда: в решётке 0.72fr/1.28fr ячейка
   сжималась до 56px, «8 мес → 207,5 млн за месяц» переносилось по слову, а
   подпись «КАНАЛОВ» вылезала за левый край карточки (скрин владельца 14.09.2026).
   Подвал карусели — единственное место, где ячейка обязана быть 56px. */
.nf-niche__foot .nf-niche__cell{width:56px;flex:none;min-width:0;text-align:center}
.nf-niche__foot .nf-niche__cell--money{flex:1;width:auto;
  border-left:1px solid var(--bd);padding-left:11px;margin-left:11px}
.nf-niche__cap{font:800 9px/1 var(--ff);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx2);white-space:nowrap}
.nf-niche__val{font:700 12.5px/1.2 var(--ff);color:var(--tx);margin-top:6px;white-space:nowrap}
.nf-niche__val--money{color:var(--pos)}

/* ── 3. «Каналы на взлёте» ─────────────────────────────────────────────────── */
.nf-rise{margin-top:22px}
/* flex-wrap — то же решение, что у капсулы поиска: на узком экране она
   складывается внутри себя, а не выдавливает себя за правый край. Радиус при
   переносе перестаёт быть пилюлей, поэтому он завязан на высоту одной строки. */
.nf-sortbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%;
  background:var(--sunk);border:1px solid var(--bd);border-radius:22px;padding:4px}
/* Кнопка-раскрывашка сортировки внутри капсулы. Не .nf-sort__btn из поиска:
   там кегль и раскладка своей панели (шеврон абсолютом, текст по центру), а
   здесь строка капсулы — иконка, подпись, шеврон в один ряд. */
.nf-sortbar__pick{display:flex;align-items:center;gap:8px;border:0;
  background:transparent;color:var(--tx2);border-radius:var(--rchip);
  padding:8px 12px;font:600 12px/1 var(--ff);cursor:pointer;white-space:nowrap}
.nf-sortbar__pick:hover{background:var(--surf2)}
.nf-sortbar__pick .nf-i{font-size:18px;color:var(--tx2)}
.nf-sortbar__pick-lbl{font-weight:700;color:var(--tx)}
.nf-sortbar__div{width:1px;height:20px;background:var(--bd);margin:0 7px;
  flex:none}
.nf-sortbar__view{display:grid;place-items:center;width:34px;height:28px;
  border:0;border-radius:var(--rchip);cursor:pointer;font-size:18px;padding:0;
  background:transparent;color:var(--tx2)}
.nf-sortbar__view{transition:background .14s,color .14s}
.nf-sortbar__view:hover:not([aria-pressed="true"]){background:var(--surf2);color:var(--tx)}
.nf-sortbar__view[aria-pressed="true"]{background:var(--tx);color:var(--bg)}
.nf-sortbar__view[aria-pressed="true"]:hover{filter:brightness(.92)}

/* Сортировка сегментами — развёрнутый вид той же капсулы. По умолчанию скрыта:
   если браузер не знает @container (и не может решить, помещается ли она),
   остаётся выпадающий список, который помещается всегда. */
.nf-sortbar__segs{display:none;align-items:center;gap:2px}
.nf-sortbar__seg{border:0;background:transparent;color:var(--tx2);
  border-radius:var(--rchip);padding:8px 13px;cursor:pointer;
  font:700 12px/1 var(--ff);white-space:nowrap}
.nf-sortbar__seg:hover{background:var(--surf2);color:var(--tx)}
.nf-sortbar__seg[aria-selected="true"]{background:var(--tx);color:var(--bg)}
/* Подпись группы окон вирусности. Слово стоит один раз перед тремя кнопками окон —
   на каждой кнопке оно занимало бы 210 px повтора и выталкивало капсулу на вторую
   строку. Не кнопка: кликать здесь нечему. */
/* Оценка вирусности цветом. Группы 10–9 / 8–7 / 6–5 / 4–3 / 2–1 (решение владельца
   18.08) красятся палитрой тиров: тот же цвет, что у буквы ниши той же силы, — иначе
   «сильный» на соседних экранах выглядел бы по-разному. Цвет приходит переменной
   --nf-vg из разметки: в CSS его выбрать нечем, оценка это данные. */
.nf-vgrade{color:var(--nf-vg,var(--tx));border-color:var(--nf-vg,var(--bd))}
.nf-vgrade .nf-modal__ratio-num{color:var(--nf-vg,var(--tx))}
/* В СПИСКЕ та же оценка — голая ячейка колонки: ни полей, ни скругления у неё нет,
   и заливка растекалась на всю колонку прямоугольным следом с обрезанным краем
   (скрин владельца 18.08). Здесь тир даёт только цвет цифры. Двойной класс
   обязателен: .nf-np__lratio идёт в файле ниже и при равной специфичности перебил бы
   одиночный .nf-vgrade своим color:var(--data). */
.nf-np__lratio.nf-vgrade{color:var(--nf-vg,var(--tx))}
/* Живой поиск каналов в палитре: контейнер сам по себе ничего не рисует — строки
   внутри те же .nf-cmd__row, что и у статических разделов, чтобы клавиатурная
   навигация и подсветка работали для них без единой оговорки. */
.nf-cmd__live{display:contents}
.nf-sortbar__cap{color:var(--tx2);font:700 12px/1 var(--ff);padding:0 6px 0 8px;
  white-space:nowrap;flex:none}

/* Шапка блока — контейнер измерения: решает не ширина ОКНА, а сколько места
   осталось в самой строке (панель слева сворачивается, окно при этом не меняется).
   С именем (17.10.2026): контейнерами стали и строки с полем поиска (.nf-nichebar,
   .nf-np__head, ниже), и безымянный запрос ниже прятал бы выпадающую сортировку и там —
   у них сегментов нет, сортировка остаётся только списком.
   z-index — та же мина, что у строки поиска ниже: в части браузеров контейнер делает
   шапку отдельным слоем, и меню «Подборки» (z-index 60 внутри) ложилось ПОД карточки
   каналов — жалоба покупателя 29.10.2026. В свежих Chromium/Firefox/WebKit не видно. */
.nf-showcase__head{container:nf-showhead / inline-size;position:relative;z-index:4}
/* Порог 1240px, а не 900: с 17.08.2026 сортировок шесть, а не четыре — вирусность
   стоит тремя пунктами (окна 7/28/90). Замер 17.08 по самой длинной подписи, какая
   бывает («28 дней (пока 6)»): капсула 957 px + заголовок блока 206 px + зазоры. На
   1200 ряд ещё переносился под заголовок, на 1240 стоит одной строкой — проверено
   глазами на стенде, а не выведено из арифметики. Когда окна дорастут и приставка
   «(пока N)» уйдёт, тому же ряду хватит 1086 px, и порог можно будет опустить —
   но раньше времени этого делать нельзя.
   Ниже порога остаётся выпадающий список: он помещается всегда и несёт те же пункты
   с полными подписями. */
@container nf-showhead (min-width: 1240px){
  .nf-sortbar__segs{display:flex}
  .nf-sortbar .nf-sort{display:none}
}

/* ── Поиск по названию: ниша на «Нишах», канал на странице ниши (17.10.2026) ──────
   Капсула того же рода, что .nf-sortbar рядом: утопленный фон, тонкая граница, пилюля
   той же высоты (44px = 4 + 34 + 4 + рамка). В строке заголовка стоят две капсулы одного
   вида, а не поле формы рядом с кнопками. Обёртка — <label>: нажатие в любую её точку
   ставит курсор в поле; базовые стили label из tokens.css (капс 9px, отступ снизу)
   здесь сняты целиком.
   Длинной полоской на ВСЁ свободное место строки между счётчиком и сортировкой (владелец
   17.10.2026: «не отцентровано… поле ездит туда-сюда; сделай длинной полоской, чтобы
   забирала всё свободное место и уменьшалась и разворачивалась с экраном»). До того поле
   стояло 250px у правого края, а свободное место забирала распорка перед ним — и поле
   ездило вместе с ней. База — ноль, рост — весь остаток: поле сжимается и растёт вместе
   со строкой. Когда места на одну строку нет, поле уходит строкой ниже во всю ширину — это
   решает ширина самой строки (@container nf-findrow ниже), а не длина подписи слева:
   «Каналы ниши 285» и «Найдено 3» разной ширины, и перенос по подписи дёргал бы поле
   между строками прямо во время набора. */
.nf-find{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:200px;
  position:relative;height:44px;margin:0;padding:0 42px;box-sizing:border-box;
  background:var(--sunk);border:1px solid var(--bd);border-radius:22px;
  font:600 12px/1 var(--ff);letter-spacing:normal;text-transform:none;color:var(--tx2);
  cursor:text;transition:border-color .14s}
.nf-find:hover{border-color:var(--bdS)}
/* Фокус — границей цвета данных, как у полей ввода продукта (tokens.css, input:focus). */
.nf-find:focus-within{border-color:var(--data)}
/* Значок и фраза — одной группой ПО ЦЕНТРУ полосы (владелец 17.10.2026: «сама фраза должна
   быть в середине строки поиска, а не клеем к краю прижата»). Поле не тянется на всю
   полосу, а растёт по своему тексту: ширину держит невидимая копия текста (::after из
   data-value — набранное или подсказка, её подставляет app.js), поле лежит в той же клетке
   сетки поверх неё. Длинный текст упирается в края полосы: колонка minmax(0,…) сжимается,
   и поле прокручивает его само. Отступы полосы по 42px с ОБЕИХ сторон — под крестиком
   справа и симметрично слева, иначе середина группы съезжала бы от середины полосы. */
.nf-find__grp{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;height:100%}
.nf-find__grp > .nf-i{font-size:18px;color:var(--tx2);flex:none}
.nf-find__box{display:inline-grid;grid-template-columns:minmax(0,auto);align-items:center;
  min-width:0;height:100%;font:700 12.5px/1 var(--ff)}
.nf-find__box::after{content:attr(data-value) " ";grid-area:1/1;visibility:hidden;
  white-space:pre;overflow:hidden;font:inherit}
.nf-find__input{grid-area:1/1;width:100%;min-width:1ch;height:100%;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;
  font:inherit;color:var(--tx)}
.nf-find__input::placeholder{color:var(--tx2);font-weight:600;opacity:1}
/* Крестик — только когда есть что сбрасывать; по виду — кнопка вида из капсулы рядом.
   Стоит у правого края поверх отступа полосы, а не в потоке: в потоке он сдвигал бы
   группу с середины, как только появляется. */
.nf-find__clear{display:grid;place-items:center;width:30px;height:30px;flex:none;
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border-radius:var(--rchip);color:var(--tx2);font-size:18px;cursor:pointer;
  transition:background .14s,color .14s}
.nf-find__clear:hover{background:var(--surf2);color:var(--tx)}
.nf-find:has(.nf-find__input:placeholder-shown) .nf-find__clear{display:none}

/* Строка с полем поиска — «Всего ниш N» на «Нишах» и «Каналы ниши N» на странице ниши —
   контейнер измерения: раскладку решает ширина САМОЙ строки, а не окна — панель слева
   сворачивается и разворачивается, а окно при этом не меняется.
   z-index — из-за контейнера: он делает строку отдельным слоем, и выпадающее меню
   сортировки (z-index 60 внутри неё) иначе ложилось бы ПОД карточки ниже по странице —
   у их закладки и обводки свои z-index 2–3. */
.nf-nichebar,.nf-np__head{container:nf-findrow / inline-size;position:relative;z-index:4}
/* «Всего ниш 36» и LIVE — одним блоком, как «Каналы ниши 285» (.nf-np__total): место
   блока держит app.js, и пустота на время поиска встаёт после LIVE, а не между ним и числом. */
.nf-nichebar__lead{display:flex;align-items:center;gap:12px;flex:none}
/* Места на одну строку нет — поле своей строкой во всю ширину под заголовком и
   сортировкой, а сортировка прижимается вправо, в строку заголовка. Пороги — по самой
   широкой строке каждой страницы плюс поле от 200px (замер 17.10.2026 на боевых данных):
   страница ниши — «Каналы ниши 1 234» и капсула с «Вирусность · 28 дней» и тремя
   размерами страницы, 717 + 200 = 917px; «Ниши» — «Всего ниш 1 234», LIVE и капсула с
   «Доходу лучшего канала», 616 + 200 = 816px. Окном это при развёрнутой панели — ниже
   1252 и 1152px, при свёрнутой — ниже 1060 и 960px.
   На телефоне — своё правило ниже: поле сразу под заголовком, сортировка строкой ниже. */
@media (min-width:641px){
  @container nf-findrow (max-width: 919px){
    .nf-np__head > .nf-find{order:1;flex-basis:100%;min-width:0}
    .nf-np__head > .nf-sortbar{margin-left:auto}
  }
  @container nf-findrow (max-width: 819px){
    .nf-nichebar > .nf-find{order:1;flex-basis:100%;min-width:0}
    .nf-nichebar > .nf-sortbar{margin-left:auto}
  }
}

/* Поиск ничего не нашёл — одна строка вместо пустой сетки: «Ниша не найдена»,
   «Канал не найден». Плашкой того же вида, что пустая карусель на главной. */
.nf-find-none{display:flex;align-items:center;gap:10px;margin:0 0 30px;
  padding:16px 20px;background:var(--surf);border:1px solid var(--bd);
  border-radius:var(--r);font:600 13.5px/1.5 var(--ff);color:var(--tx2)}
.nf-find-none[hidden]{display:none}
.nf-find-none > .nf-i{font-size:20px}
/* Бесплатный: «Среди открытых каналов не нашлось — остальные откроются с доступом» и
   кнопка окна тарифов у правого края — красная, как «Открыть доступ» везде. */
.nf-find-none__go{margin-left:auto;flex:none;border:0;border-radius:999px;
  background:var(--cta);color:var(--ctaTx);padding:10px 18px;
  font:700 12.5px/1 var(--ff);cursor:pointer}
.nf-find-none__go:hover{filter:brightness(1.08)}
/* Ниша, не подошедшая под поиск: display у карточек свой (flex/block в nichecard.css),
   и голый [hidden] браузера они перебивали бы — отсюда вес селектора. */
.nf-nichegrid > .nf-niche[hidden]{display:none}

/* Телефон: поиск — своей строкой во всю ширину, сразу под заголовком (ради него на
   страницу и приходят), сортировка — строкой ниже. Кегль 16px: меньше — и iOS
   увеличивает страницу при нажатии в поле. */
@media (max-width:640px){
  .nf-find{flex:1 1 100%;min-width:0}
  .nf-find__box{font-size:16px}
  .nf-find-none{flex-wrap:wrap}
}

/* переключение вида — атрибутом на контейнере, оба списка уже в разметке */
.nf-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:22px}
.nf-rise[data-view="list"] .nf-ch-grid{display:none}
.nf-rise[data-view="grid"] .nf-ch-list{display:none}

/* ── 3.1. Вид «сетка» ──────────────────────────────────────────────────────
   Карточка — ОДНА панель (16.08): тёмный фон, на нём лента, чипы и подпись.
   Фон темнее поля страницы (--sunk против --bg), поэтому карточки выступают
   сами — ни рамок, ни разделителей между ними не нужно. */
.nf-ch{position:relative;cursor:pointer;background:var(--sunk);
  border-radius:var(--r);padding:9px 9px 0}
.nf-ch__thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
/* Огненная обводка топ-3 переехала с ленты на всю карточку: обводить внутреннюю
   плашку, когда карточка стала одной панелью, значит рисовать рамку внутри рамки.
   С 14.10.2026 она «живая» (владелец: «огненную обводку нужно как-то красивее»): ровное
   кольцо с ореолом читалось аварийной лампой. Теперь тонкая кайма — градиент огня
   (красный → оранжевый → жёлтый), который медленно обходит карточку, и мягкий тёплый
   ореол под ней. Кайма — псевдоэлементом с маской: border-image скруглений не держит.
   Угол — зарегистрированное свойство: без @property браузер градиент не анимирует, и
   кайма просто стоит на месте — тоже красиво, ничего не ломается. */
@property --nf-fire-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.nf-ch--top{box-shadow:0 0 26px rgba(255,120,0,.22),0 0 60px rgba(255,59,31,.12)}
.nf-ch--top::after{content:"";position:absolute;inset:-1.5px;border-radius:calc(var(--r) + 1.5px);
  padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--nf-fire-a),#FF3B1F,#FF9100 22%,#FFD24D 38%,#FF9100 54%,
             #FF3B1F 72%,#FF2D78 88%,#FF3B1F);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:nfFireRun 7s linear infinite}
@keyframes nfFireRun{to{--nf-fire-a:360deg}}
@media (prefers-reduced-motion: reduce){.nf-ch--top::after{animation:none}}
/* картинок нет ни одной: честная полоска вместо превью (спец. 1.3) */
.nf-ch__stub{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,var(--surf2) 0 10px,var(--surf) 10px 20px)}
.nf-ch__stub-cap{position:absolute;top:12px;left:14px;
  font:600 10px/1 var(--mono);color:var(--tx2)}
/* Отсчёт от края КАРТОЧКИ, а не ленты: 9px поля панели + 8px до кадра.
   z-index обязателен: кнопка стоит в разметке ПЕРЕД лентой, обе позиционированы,
   и без слоя лента рисуется поверх — кнопка видна, но клик забирает картинка. */
.nf-ch__bm{position:absolute;top:17px;right:17px;width:34px;height:34px;
  border:0;border-radius:99px;background:var(--nf-scrim);color:var(--tx);
  display:grid;place-items:center;cursor:pointer;font-size:20px;padding:0;z-index:2}
.nf-ch__bm[aria-pressed="true"]{color:var(--warn)}
/* Чипы вышли из кадра в поток карточки: лёжа поверх ленты они закрывали нижнюю
   треть кадров, а прятать товар под подписями к нему — плохой размен. */
.nf-ch__badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 2px 0}
.nf-ch__badge{font:600 11px/1 var(--ff);color:var(--tx);
  background:var(--surf);border-radius:8px;padding:5px 8px}
.nf-ch__badge--strong{font-weight:700}
.nf-ch__badge--money{font-weight:700;color:var(--pos)}
.nf-ch__badge--right{margin-left:auto}
/* Подпись — внутри карточки, отделена волоском: без него имя липло к чипам. */
.nf-ch__meta{display:flex;align-items:flex-start;gap:11px;
  margin-top:9px;padding:10px 2px 12px;border-top:1px solid rgba(255,255,255,.06)}
.nf-ch__ava{width:36px;height:36px;flex:none;border-radius:99px;
  background:var(--surf2);display:grid;place-items:center;
  font:700 14px/1 var(--ff);color:var(--tx2)}
.nf-ch__line{flex:1;min-width:0}
/* Первая строка подписи: имя тянется, «дни в базе» прижаты вправо. */
.nf-ch__row{display:flex;align-items:baseline;gap:11px;min-width:0}
.nf-ch__name{font:700 16.5px/1.2 var(--ff);letter-spacing:-.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;
  min-width:0}
/* Ниша — своя строка под именем (владелец 04.09.2026), до двух строк текста.
   Раньше она делила строку с именем через flex:0 3 auto и при длинном имени
   сжималась до многоточия: место под неё было, а названия видно не было.
   Цвет свой у каждой ниши: тон приходит переменной --nf-niche из разметки
   (niches.hue), серый остаётся тем, кого ещё не разметили. */
.nf-ch__niche{font:600 12.5px/1.3 var(--ff);color:var(--nf-niche,var(--tx2));
  margin-top:4px;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* дни в базе — всегда один синий, без градаций (спец. 3.5) */
.nf-ch__found{margin-left:auto;font:600 12.5px/1 var(--ff);color:var(--data);
  white-space:nowrap;flex:none}
/* Плашка ПО ЦЕНТРУ обложки (владелец 03.09), а не прижата к её верхнему краю:
   у верхнего края она читается как бейдж поверх картинки, по центру — как
   единственное, что тут можно сделать. Ширину держим по содержимому, иначе на
   узкой карточке текст переносится в три строки.
   Плашка — НАДПИСЬ, а не кнопка (юзер-тест 21.10.2026). С 03.10 по 21.10 она открывала окно
   тарифов, а остальная плитка — карточку канала, и самый естественный клик, в центр плитки,
   уводил в тарифы. Теперь клик по любому месту плитки открывает карточку канала (в ней своё
   «Открыть доступ»): pointer-events:none пропускает нажатие сквозь плашку к плитке. Пока в
   разметке это ещё <button>, клавиатура ведёт так же: Enter на плитке открывает карточку
   (app.js, «Карточка канала — не ссылка»). */
.nf-ch__lock{display:none;flex-direction:column;align-items:center;text-align:center;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:calc(100% - 24px);background:var(--nf-lock-plate);
  border:1px solid var(--bdS);border-radius:14px;padding:12px 16px;
  backdrop-filter:blur(2px);
  margin:0;font:inherit;color:var(--tx);pointer-events:none;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,
             box-shadow .16s ease}
.nf-ch--locked .nf-ch__lock{display:flex}
/* Наведение на закрытую карточку подсвечивает и плашку (владелец 03.10.2026, вечер: на
   наведении подсвечивалась одна карточка, а надпись на ней — нет) — белой рамкой: карточка
   светится голубым, а топ-3 оранжевым, и плашке нужен свой отклик, который не спорит ни с
   тем, ни с другим. Своего красного отклика у плашки больше нет: нажимается вся плитка. */
.nf-ch--locked:hover .nf-ch__lock{border-color:rgba(255,255,255,.75);background:rgba(18,18,18,.94);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  transform:translate(-50%,-50%) scale(1.04)}
.nf-ch__lock:focus-visible{outline:2px solid var(--data);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .nf-ch__lock{transition:none}
  .nf-ch--locked:hover .nf-ch__lock{transform:translate(-50%,-50%)}
}
/* под пейволлом прячем личность канала, метрики остаются открытыми */
.nf-ch--locked .nf-ch__stub,
.nf-ch--locked .nf-ch__ava,
.nf-ch--locked .nf-ch__name{filter:blur(8px)}
.nf-ch__lock-t{font:700 12.5px/1.3 var(--ff);color:var(--tx)}
.nf-ch__lock-s{font:600 11px/1.3 var(--ff);color:var(--tx2);margin-top:4px}

/* ── 3.2. Вид «список» ─────────────────────────────────────────────────────
   Колонки заданы один раз переменной: шапка и строки обязаны совпадать. */
/* Колонки «Ниша» больше нет: ниша переехала под имя канала, в первую колонку.
   Освободившуюся ширину забрал сам канал — там теперь две строки текста. */
.nf-ch-list{--nf-cols:minmax(0,2.2fr) 78px 86px 96px 96px minmax(0,120px) minmax(0,110px)}
.nf-ch-list__head{display:grid;grid-template-columns:var(--nf-cols);gap:16px;
  padding:0 20px 12px;font:800 9.5px/1 var(--ff);letter-spacing:.1em;
  color:var(--tx2);text-transform:uppercase}
.nf-ch-list__body{display:flex;flex-direction:column;gap:8px}
.nf-ch-list__r{text-align:right}
.nf-riserow{display:grid;grid-template-columns:var(--nf-cols);gap:16px;
  align-items:center;border-radius:var(--r);padding:14px 20px;cursor:pointer;
  background:var(--surf)}
.nf-riserow:hover{background:var(--surf2)}
/* Топ-3 в СТРОКЕ — полосой слева, как на странице ниши (единое правило с 19.08):
   строки — полоса, карточки — огненная обводка. Обводка вокруг строки рисовалась
   поверх краёв соседних и на списке из трёх каналов подсвечивала разом все три. */
.nf-riserow--top{box-shadow:inset 3px 0 0 var(--nf-fire-bar)}
.nf-riserow__who{display:flex;align-items:center;gap:13px;min-width:0}
.nf-riserow__txt{min-width:0}
.nf-riserow__ava{width:38px;height:38px;flex:none;border-radius:99px;
  background:var(--surf2);display:grid;place-items:center;
  font:700 14px/1 var(--ff);color:var(--tx2)}
.nf-riserow__name{font:700 15px/1.3 var(--ff);letter-spacing:-.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nf-riserow--locked .nf-riserow__ava,
.nf-riserow--locked .nf-riserow__name{filter:blur(8px)}
/* Под именем, до двух строк, своим цветом — см. .nf-ch__niche в сетке. */
.nf-riserow__niche{font:600 12px/1.3 var(--ff);color:var(--nf-niche,var(--tx2));
  margin-top:3px;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.nf-riserow__life{text-align:right;font:600 13px/1 var(--ff);color:var(--tx2)}
/* Оценка «N из 10» — как в списке страницы ниши (.nf-np__lratio), цветом группы. */
.nf-riserow__ratio{text-align:right;font:700 14px/1 var(--ff);color:var(--tx2);
  white-space:nowrap}
.nf-riserow__ratio.nf-vgrade{color:var(--nf-vg,var(--tx))}
.nf-riserow__watch{text-align:right;font:600 13px/1 var(--ff);color:var(--data)}
.nf-riserow__trend{text-align:right;font:600 13px/1 var(--ff);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;cursor:help}
.nf-riserow__income{text-align:right;font:600 13px/1 var(--ff);color:var(--pos);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-riserow__views{text-align:right;font:600 13px/1 var(--ff);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ── 3.3. Скелетоны и хвост списка ─────────────────────────────────────────
   Два мерцающих ряда + подпись: список бесконечный, и это честно видно. */
.nf-sk{background:var(--surf);border-radius:var(--r);padding:14px 20px;
  height:66px;display:flex;align-items:center;gap:13px}
.nf-sk__ava,.nf-sk__bar{
  background:linear-gradient(90deg,var(--surf2) 25%,var(--bdS) 50%,var(--surf2) 75%);
  background-size:340px 100%;animation:nfShimmer 1.4s linear infinite}
.nf-sk__ava{width:38px;height:38px;border-radius:99px;flex:none}
.nf-sk__bar{height:13px;border-radius:6px}
.nf-sk__bar--a{width:46%}
.nf-sk__bar--b{width:32%}
.nf-more{text-align:center;font:600 12px/1 var(--ff);color:var(--tx2);
  padding:14px}

/* ═══ search ═══════════════════════════════════════════════════ */
/* ══ Экран «Поиск» ═══════════════════════════════════════════════════════════
   Прототип: Finaldesign/project/NicheFinder v2.dc.html, строки 351–610.
   Спецификация, раздел 9. Все размеры перенесены дословно.

   Локальные переменные блока: только те, для которых в токенах нет имени, но
   значение зафиксировано спецификацией (раздел 3.5). Цвета сюда не заводим. */
.nf-search{
  --nf-scrim:rgba(0,0,0,.72);   /* подложки бейджей на превью, спека 3.5 */
  /* --nf-shadow-pop здесь НЕ переобъявляем. Стояло `--nf-shadow-pop:var(--nf-shadow-pop)`
     — самоссылка, а такое объявление по спецификации CSS недействительно на этапе
     вычисления, и значение становится «guaranteed-invalid». Следствие: у подсказки
     фильтра, меню сортировки и полки пресетов тень пропадала совсем — только на
     этом экране. Значение живёт в :root и наследуется. */
  padding:26px 34px 70px;
}
.nf-search__title{font:800 34px/1.1 var(--ff);letter-spacing:-1.2px;margin:0 0 8px}
.nf-search__lead{font:400 14px/1.5 var(--ff);color:var(--tx2);margin:0 0 24px}

/* Иконки. Базовое правило может быть уже объявлено соседним блоком app.css —
   оно идентично, дубль безвреден. Размер всегда задаёт контекстный класс. */

/* ── Тональные кнопки ──────────────────────────────────────────────────────
   Тон (цвет, граница, ховер) отдельно от размера: одна и та же красная кнопка
   встречается в четырёх размерах, а зелёная и нейтральная — в двух. */
.nf-btn-danger{background:transparent;color:var(--tier-a);
  border:1px solid color-mix(in srgb,var(--tier-a) 45%,transparent);
  border-radius:999px;cursor:pointer;white-space:nowrap}
.nf-btn-danger:hover{background:var(--tier-a);border-color:var(--tier-a);
  color:var(--tx)}
.nf-btn-outline{background:transparent;color:var(--tx);border:1px solid var(--bdS);
  border-radius:999px;cursor:pointer;white-space:nowrap}
.nf-btn-outline:hover{background:var(--surf2)}
.nf-btn-go{background:transparent;color:var(--gem);
  border:1px solid color-mix(in srgb,var(--gem) 45%,transparent);
  border-radius:999px;cursor:pointer;white-space:nowrap}
.nf-btn-go:hover{background:var(--gem);border-color:var(--gem);
  color:var(--gem-ink)}

/* ── Панель «Спросите словами» ─────────────────────────────────────────────
   Три состояния (пусто / думаю / результат) живут в разметке одновременно,
   показывает их атрибут data-state — так переключение не перерисовывает поле
   ввода и не сбрасывает набранный текст. Запись голоса — отдельный data-rec,
   она может быть включена в любом из трёх состояний. */
.nf-ask{background:var(--surf);border-radius:var(--r);padding:24px;margin-bottom:20px}
.nf-ask__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.nf-ask__eyebrow{font:800 9.5px/1 var(--ff);letter-spacing:.1em;color:var(--tx2);
  text-transform:uppercase}
.nf-ask__ai{font:700 9px/1 var(--ff);color:var(--dataTx);background:var(--data);
  border-radius:999px;padding:4px 7px}

.nf-ask__bar{display:flex;align-items:center;gap:6px;background:var(--sunk);
  border:1px solid var(--bd);border-radius:999px;padding:6px 6px 6px 24px}
.nf-ask__input{flex:1;min-width:120px;width:auto;margin:0;background:transparent;
  border:0;border-radius:0;padding:12px 0;color:var(--tx);font:500 16.5px/1.2 var(--ff)}
.nf-ask__input:focus{border:0}
.nf-ask__input::placeholder{color:var(--tx2)}
.nf-ask__mic{flex:none;border:0;background:transparent;color:var(--tx2);width:44px;
  height:44px;padding:0;border-radius:99px;cursor:pointer;display:grid;place-items:center}
.nf-ask__mic .nf-i{font-size:23px}
.nf-ask__mic{transition:background .14s,color .14s}
.nf-ask__mic:hover{filter:none;background:var(--surf2);color:var(--tx)}
.nf-ask__go{flex:none;border:0;background:var(--cta);color:var(--ctaTx);
  border-radius:999px;padding:0 26px;height:44px;font:700 14px/1 var(--ff);cursor:pointer;
  transition:filter .14s}

.nf-ask__rec{display:none;align-items:center;gap:12px;margin-top:14px;
  animation:nfRise .18s ease-out}
.nf-ask[data-rec="on"] .nf-ask__rec{display:flex}
.nf-ask[data-rec="on"] .nf-ask__mic{color:var(--tier-a);
  background:color-mix(in srgb,var(--tier-a) 14%,transparent)}
.nf-ask__rec-txt{font:600 13px/1 var(--ff);color:var(--tx2)}
.nf-eq{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.nf-eq span{width:3px;border-radius:99px;background:var(--tier-a);
  animation:nfWave .9s ease-in-out infinite}
.nf-eq span:nth-child(1){height:8px}
.nf-eq span:nth-child(2){height:16px;animation-delay:.12s}
.nf-eq span:nth-child(3){height:20px;animation-delay:.24s}
.nf-eq span:nth-child(4){height:13px;animation-delay:.36s}
.nf-eq span:nth-child(5){height:7px;animation-delay:.48s}

/* Одна строка: чипы не переносятся, лишние прячет укладка в app.js; overflow:hidden —
   чтобы до неё хвост не торчал. Поля 2px сверху/снизу — под подъём чипа на ховере,
   иначе overflow срезал бы его верхний пиксель. */
.nf-ask__empty{display:none;gap:9px;flex-wrap:nowrap;align-items:center;margin-top:14px;
  padding:2px 0;overflow:hidden}
.nf-ask[data-state="empty"] .nf-ask__empty{display:flex}
/* Ховер кнопок этого экрана — как у пилюль навигации на главной и в нишах
   (владелец 15.09.2026): поверхность светлеет до surf2/bd, граница — до bdS, и
   что-то ДВИЖЕТСЯ: подсказка приподнимается на пиксель, стрелка «другие»
   поворачивается. Рамку на ховере даём inset-тенью, а не border: граница меняла
   бы размер чипа, и соседи дёргались бы. filter:none везде — иначе поверх
   ложится brightness(1.12) из tokens.css, и оттенок у соседних кнопок разный. */
.nf-ask__example{display:inline-flex;align-items:center;gap:9px;border:0;flex:none;
  background:var(--surf2);color:var(--tx);border-radius:999px;padding:11px 17px;
  font:600 13px/1 var(--ff);cursor:pointer;white-space:nowrap;
  transition:background .14s,box-shadow .14s,transform .14s}
/* Светлее surf2, а не var(--bd): тот на панели темнее покоя и читался как «нажато». */
.nf-ask__example:hover{filter:none;background:color-mix(in srgb,var(--surf2) 90%,#fff);
  box-shadow:inset 0 0 0 1px var(--bdS);transform:translateY(-1px)}
.nf-ask__example .nf-i{font-size:18px;color:var(--tx2);transition:color .14s}
.nf-ask__example:hover .nf-i{color:var(--tx)}
/* Подсказки не из показанной четвёрки: display:inline-flex выше перебил бы
   браузерное [hidden], и «спрятанные» чипы стояли бы на виду. */
.nf-ask__example[hidden]{display:none}
/* «Другие» — кнопка, а не серая надпись: тёмная пилюля как .nf-navbtn (фон sunk,
   граница bd), в строке подсказок у правого края — под «Найти» (владелец 15.09.2026);
   6px справа — поле капсулы .nf-ask__bar, чтобы правые края кнопок совпали.
   Высота та же, что у чипов-подсказок: значок 18px задаёт строку, 10+18+10 плюс
   граница = 40px, как 11+18+11 у чипа. */
.nf-ask__more{display:inline-flex;align-items:center;gap:7px;flex:none;
  margin-left:auto;margin-right:6px;
  background:var(--sunk);border:1px solid var(--bd);color:var(--tx);border-radius:999px;
  padding:10px 16px;font:600 13px/1 var(--ff);cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s}
.nf-ask__more:hover{filter:none;color:var(--tx);background:var(--surf2);
  border-color:var(--bdS)}
.nf-ask__more .nf-i{font-size:18px;color:var(--tx2);transition:transform .2s,color .14s}
.nf-ask__more:hover .nf-i{transform:rotate(180deg);color:var(--tx)}
@media (prefers-reduced-motion: reduce){
  .nf-ask__example,.nf-ask__more .nf-i{transition:none}
  .nf-ask__example:hover{transform:none}
  .nf-ask__more:hover .nf-i{transform:none}
}

.nf-ask__think{display:none;align-items:center;gap:12px;margin-top:16px}
.nf-ask[data-state="think"] .nf-ask__think{display:flex}
.nf-ask__think-txt{font:600 13px/1 var(--ff);color:var(--tx2)}
.nf-dots{display:inline-flex;gap:4px}
.nf-dots span{width:5px;height:5px;border-radius:99px;background:var(--data);
  animation:nfDots 1s infinite}
.nf-dots span:nth-child(2){animation-delay:.15s}
.nf-dots span:nth-child(3){animation-delay:.3s}
/* Полоса именно заполняется (nfFill), а не бесконечно шиммерит: разбор запроса
   конечен, и человек должен видеть прогресс, а не «вечную загрузку». */
.nf-ask__progress{flex:1;height:8px;border-radius:99px;background:var(--surf2);
  overflow:hidden}
.nf-ask__progress span{display:block;height:100%;border-radius:99px;
  background:var(--data);animation:nfFill 1.1s cubic-bezier(.3,.8,.4,1) forwards}

.nf-ask__res{display:none;flex-direction:column;margin-top:14px;
  animation:nfRise .25s ease-out}
.nf-ask[data-state="res"] .nf-ask__res{display:flex}
/* Отступ справа 120px — им кончик стрелки наводится ровно на микрофон. */
.nf-ask__redo{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;
  margin:-4px 120px 10px 0}
.nf-ask__redo-txt{font:600 11.5px/1.3 var(--ff);color:var(--tx2);text-align:right;
  padding-top:7px}
.nf-ask__redo-arrow{width:44px;height:34px;flex:none;color:var(--tx2);opacity:.75}
.nf-ask__res-title{font:600 12px/1 var(--ff);color:var(--tx2);margin-bottom:11px}
.nf-ask__chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.nf-chip{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 var(--ff);
  color:var(--data);background:var(--dataSoft);border-radius:999px;padding:9px 13px;
  white-space:nowrap}
.nf-chip__x{border:0;background:transparent;color:var(--tx2);font:600 12.5px/1 var(--ff);
  padding:0;cursor:pointer;border-radius:0}
.nf-chip__x:hover{color:var(--tx)}
.nf-ask__found{font:600 12.5px/1 var(--ff);color:var(--tx2);margin-left:4px;
  white-space:nowrap}
.nf-ask__found b{color:var(--tx);font-weight:700}
/* Кнопки прижаты вправо через auto-отступ, а не распоркой: при переносе строки
   распорка занимала бы отдельную строку. */
.nf-ask__save{margin-left:auto;padding:9px 14px;font:600 12px/1 var(--ff)}
.nf-ask__reset{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  font:600 12px/1 var(--ff)}
.nf-ask__reset .nf-i{font-size:16px}

/* ── Раскладка: фильтры слева, результаты по всей оставшейся ширине ───────── */
.nf-search__layout{display:grid;grid-template-columns:274px minmax(0,1fr);gap:24px;
  align-items:start}

/* ── Колонка фильтров ──────────────────────────────────────────────────────
   top:81px — высота липкой шапки контента плюс воздух; max-height считается от
   неё же, чтобы длинный список фильтров скроллился внутри себя, а не уезжал. */
.nf-filters{position:sticky;top:81px;max-height:calc(100vh - 101px);overflow-y:auto;
  background:var(--surf);border-radius:var(--r);padding:20px;display:flex;
  flex-direction:column;gap:20px}
/* В колонке 274px системный скроллбар съедал заметную часть ширины. */
.nf-filters::-webkit-scrollbar{width:0;height:0}
.nf-filters__head{display:flex;align-items:center;gap:10px}
.nf-filters__title{font:700 16px/1 var(--ff);letter-spacing:-.3px}
.nf-filters__count{font:600 10.5px/1 var(--ff);color:var(--dataTx);background:var(--data);
  border-radius:999px;padding:5px 8px}
.nf-filters__clear{margin-left:auto;padding:8px 14px;font:600 11.5px/1 var(--ff)}

.nf-gem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--gem-rest-bd);background:var(--gem-rest-bg);
  color:var(--gem-rest-tx);border-radius:999px;padding:12px 16px;
  font:700 13px/1.25 var(--ff);letter-spacing:-.1px;cursor:pointer}
.nf-gem{transition:background .14s,border-color .14s,color .14s}
.nf-gem:hover{filter:none;border-color:var(--gem);color:var(--gem)}
.nf-gem[aria-pressed="true"]{background:var(--gem);border-color:var(--gem);
  color:var(--gem-ink)}
/* Нажатая остаётся зелёной, но отзывается: чуть светлее, как .nf-per. */
.nf-gem[aria-pressed="true"]:hover{color:var(--gem-ink);filter:brightness(1.12)}
.nf-gem .nf-i{font-size:19px}
.nf-gem .nf-gem__info{margin-left:auto;font-size:16px;opacity:.6;cursor:help}

.nf-presets__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.nf-presets__title{font:700 13px/1 var(--ff);letter-spacing:-.2px}
.nf-presets__toggle{display:inline-flex;align-items:center;gap:4px;margin-left:auto;
  border:0;background:transparent;color:var(--tx2);font:600 11.5px/1 var(--ff);
  cursor:pointer;padding:0;white-space:nowrap;border-radius:0}
.nf-presets__toggle:hover{color:var(--tx)}
.nf-presets__toggle .nf-i{font-size:16px}
.nf-presets__list{display:flex;flex-direction:column;gap:6px}
.nf-presets__rest{display:none;flex-direction:column;gap:6px;margin-top:6px;
  animation:nfRise .16s ease-out}
.nf-presets[data-open="true"] .nf-presets__rest{display:flex}
.nf-preset{display:flex;align-items:center;gap:8px;border:1px solid var(--bd);
  background:var(--sunk);color:var(--tx);border-radius:999px;padding:9px 11px 9px 14px;
  font:600 12px/1 var(--ff);cursor:pointer}
.nf-preset{transition:background .14s,border-color .14s}
.nf-preset:hover{filter:none;background:var(--surf2);border-color:var(--bdS)}
.nf-preset__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.nf-preset__count{color:var(--gem);font-weight:700;flex:none}
.nf-preset__del{border:0;background:transparent;color:var(--tx2);padding:0;
  border-radius:0;cursor:pointer;flex:none}
.nf-preset__del:hover{color:var(--tx)}
.nf-preset__del .nf-i{font-size:15px}
.nf-presets__foot{display:flex;align-items:center;gap:9px;margin-top:2px}
.nf-presets__note{font:600 11px/1.4 var(--ff);color:var(--tx2);flex:1;min-width:0}
.nf-presets__wipe{flex:none;padding:8px 13px;font:500 11.5px/1 var(--ff)}

.nf-lbl{font:800 9.5px/1.3 var(--ff);letter-spacing:.09em;color:var(--tx2);
  text-transform:uppercase}
.nf-lbl--block{display:block;margin-bottom:9px}
.nf-group{border-top:1px solid var(--bd);padding-top:17px}
.nf-group__head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.nf-info{font-size:15px;color:var(--tx2);cursor:help}

.nf-fresh__head{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.nf-fresh__val{margin-left:auto;font:700 12px/1 var(--ff);color:var(--data)}
.nf-range{width:100%;margin:0;padding:0;border:0;background:transparent;
  accent-color:var(--data);cursor:pointer}
.nf-fresh__ends{display:flex;justify-content:space-between;font:600 10px/1 var(--ff);
  color:var(--tx2);margin-top:2px}

/* Языки и ниши — списком (владелец 15.09.2026): строка на значение — флаг или
   цветная точка ниши, имя, число каналов справа. Нажатая строка — голубая подложка
   и голубое имя (--data, как раньше у нажатой пилюли языка); кружков-галочек нет. */
.nf-list{display:flex;flex-direction:column;gap:2px}
.nf-list__row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--tx);border-radius:10px;padding:8px 10px;
  font:600 12.5px/1 var(--ff);cursor:pointer;transition:background .14s,color .14s}
.nf-list__row:hover{filter:none;background:var(--surf2)}
.nf-list__row[aria-pressed="true"]{background:color-mix(in srgb,var(--data) 14%,transparent);
  color:var(--data)}
.nf-list__row[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--data) 22%,transparent)}
.nf-list__row[aria-pressed="true"] .nf-list__count{color:var(--data)}
.nf-list__flag{font-size:13px;flex:none;width:18px;text-align:center}
.nf-list__dot{width:8px;height:8px;border-radius:99px;flex:none;margin:0 5px;
  background:var(--nf-niche,var(--tx2))}
.nf-list__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-list__count{font:600 11.5px/1 var(--ff);color:var(--tx2);flex:none;
  font-variant-numeric:tabular-nums}
/* Строки за пределами первых трёх — под «все языки» / «все ниши» (data-all на группе). */
.nf-list__row--more{display:none}
.nf-group[data-all="true"] .nf-list__row--more{display:flex}
.nf-list__more{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  margin:4px 0 0 6px;border:0;background:transparent;color:var(--tx2);
  font:600 11.5px/1 var(--ff);cursor:pointer;padding:4px 0;border-radius:0}
.nf-list__more:hover{filter:none;color:var(--tx)}
.nf-list__more .nf-i{font-size:16px}
.nf-list__more-on{display:none}
.nf-group[data-all="true"] .nf-list__more-on{display:inline-flex;align-items:center;gap:4px}
.nf-group[data-all="true"] .nf-list__more-off{display:none}
.nf-list__more-off{display:inline-flex;align-items:center;gap:4px}

.nf-fgroup{border-top:1px solid var(--bd);padding-top:17px}
.nf-fgroup__title{font:700 11px/1 var(--ff);letter-spacing:-.1px;margin-bottom:13px}
.nf-fgroup__items{display:flex;flex-direction:column;gap:14px}
.nf-field__head{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.nf-field__label{font:600 12px/1.3 var(--ff);color:var(--tx2);min-width:0}
.nf-nums{display:flex;align-items:center;gap:6px}
/* Кегль полей «от — до» — 13px, как у остального текста панели: при 16px слова
   «от»/«до» стояли крупнее подписей над ними (владелец 15.09.2026). */
.nf-num{flex:1;min-width:0;width:auto;margin:0;background:var(--sunk);
  border:1px solid var(--bd);border-radius:11px;padding:9px 10px;color:var(--tx);
  font:500 13px/1 var(--ff)}
.nf-num::placeholder{color:var(--tx2);font-weight:500}
.nf-num:focus{border-color:var(--bdS)}
/* Верхняя граница диапазона глушится цветом: «до» почти всегда пустое. */
.nf-num--hi{color:var(--tx2)}
.nf-nums__dash{color:var(--tx2);font:600 12px/1 var(--ff);flex:none}
.nf-nums__unit{font:600 11px/1 var(--ff);color:var(--tx2);flex:none;white-space:nowrap;
  width:34px}
.nf-tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.nf-tone{min-width:0;border-radius:999px;padding:10px 6px;font:700 12px/1 var(--ff);
  white-space:nowrap;cursor:pointer;background:transparent;color:var(--tone);
  border:1px solid color-mix(in srgb,var(--tone) 34%,transparent)}
.nf-tone{transition:background .14s,border-color .14s}
.nf-tone:hover{filter:none;background:color-mix(in srgb,var(--tone) 14%,transparent);
  border-color:var(--tone)}
.nf-tone[aria-pressed="true"]{background:var(--tone);border-color:var(--tone);
  color:var(--tone-fg)}
.nf-tone[aria-pressed="true"]:hover{background:var(--tone);filter:brightness(1.12)}

.nf-filters__actions{display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--bd);padding-top:16px}
.nf-fbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 12px;font:600 12px/1 var(--ff)}
.nf-fbtn .nf-i{font-size:17px}

/* Подсказка. z-index 205: ВЫШЕ модалки канала (200) — значки «i» живут и внутри
   неё, а на 120 плашка ложилась под карточку и была невидима; ниже палитры (210).
   Координаты ставит JS в --nf-hint-x/--nf-hint-y от иконки info, с зажимом в окно.
   max-width — страховка на узком экране: ширину плашки JS меряет по факту, так что
   зажим остаётся верным и после сжатия. */
.nf-hint{display:none;position:fixed;left:var(--nf-hint-x,0);top:var(--nf-hint-y,0);
  z-index:205;width:290px;max-width:calc(100vw - 32px);
  background:var(--surf);border:1px solid var(--bdS);
  border-radius:14px;padding:13px 15px;box-shadow:var(--nf-shadow-pop);
  font:600 12px/1.55 var(--ff);color:var(--tx2);pointer-events:none}
.nf-hint[data-open="true"]{display:block}

/* ── Колонка результатов ───────────────────────────────────────────────────── */
/* Колонка выдачи — контейнер измерения для СТРОК списка. Решает не ширина окна:
   при развёрнутой панели и колонке фильтров 274px на окне 1100px этой колонке
   достаётся 459px, и пять колонок строки (сумма фиксированных треков 496px) в неё
   не влезали — треки наезжали друг на друга, и число печаталось поверх названия
   канала. Прежнее правило мерило ОКНО и на узкой колонке не срабатывало вовсе. */
.nf-results{min-width:0;container-type:inline-size}
/* Селекторы из двух классов: базовые .nf-resrow/.nf-reshead объявлены НИЖЕ по файлу
   и при равной специфичности перебили бы эти пороги. */
@container (max-width:820px){
  .nf-results .nf-resrow,.nf-results .nf-reshead{
    grid-template-columns:minmax(0,1.4fr) minmax(0,92px) minmax(0,84px)
      minmax(0,64px) minmax(0,96px);gap:9px}
  .nf-results .nf-resrow{padding:12px 14px}
  .nf-results .nf-reshead{padding:2px 14px 8px}
}
@container (max-width:620px){
  /* Две колонки уходят целиком: ужимать дальше — значит печатать нечитаемое.
     Сортировка по ним остаётся в капсуле «Сортировать по». */
  .nf-results .nf-resrow,.nf-results .nf-reshead{
    grid-template-columns:minmax(0,1fr) minmax(0,92px) minmax(0,96px);gap:9px}
  .nf-resrow__subs,.nf-resrow__age,
  .nf-reshead__c[data-val="subscriber_count"],
  .nf-reshead__c[data-val="tenure"]{display:none}
}
/* Шапка выдачи — контейнер измерения: решает не ширина ОКНА, а сколько места
   осталось этой строке. Слева от выдачи стоит колонка фильтров 274px, а панель
   приложения сворачивается в полосу — при одном и том же окне здесь бывает то 600,
   то 900 px. Тот же приём, что у шапки витрины ниже по файлу.
   z-index — как у шапки витрины: иначе в части браузеров меню «Сортировать по»
   ложится под карточки выдачи (29.10.2026). */
.nf-results__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:flex-end;margin-bottom:16px;container-type:inline-size;
  position:relative;z-index:4}
/* В дефиците ширины уступает ПОДПИСЬ, а не орган управления (решение владельца
   18.08): счётчик схлопывается до числа, капсула сортировки остаётся в одну строку. */
@container (max-width:840px){
  /* «54 915» — это ответ, «каналов по фильтрам» — подпись, её читают один раз. */
  .nf-count__unit{display:none}
}
@container (max-width:700px){
  /* Чем сортируем, написано на самой кнопке — отдельная подпись её дублирует.
     Селектор из двух классов обязателен: правило .nf-toolbar__label{display:flex}
     стоит НИЖЕ по файлу и при равной специфичности выигрывало бы. */
  .nf-toolbar .nf-toolbar__label{display:none}
  /* 25/50/100 никуда не деваются: те же кнопки стоят в листалке под выдачей. */
  .nf-toolbar .nf-per,.nf-toolbar .nf-toolbar__div--near{display:none}
}
.nf-count{margin-right:auto;display:flex;align-items:center;gap:12px;min-width:0}
.nf-count__label{font:600 12px/1 var(--ff);color:var(--tx2);margin-bottom:6px}
.nf-count__value{font:700 19px/1.2 var(--ff);letter-spacing:-.5px;white-space:nowrap}
.nf-count__unit{font:500 14px/1 var(--ff);color:var(--tx2)}
.nf-spinner{display:none;width:17px;height:17px;flex:none;border-radius:99px;
  border:2px solid var(--bd);border-top-color:var(--data);
  animation:nfSpin .7s linear infinite}
.nf-results[data-busy="true"] .nf-spinner{display:block}

/* Капсула не сжимается (flex:none) — место ей уступает счётчик, см. пороги выше.
   flex-wrap остаётся последней страховкой на телефоне, а не штатным режимом:
   раньше капсула складывалась в две-три строки уже на 1250 px окна. */
.nf-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  flex:none;gap:4px;max-width:100%;background:var(--sunk);border:1px solid var(--bd);
  border-radius:22px;padding:4px}
.nf-toolbar__label{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--ff);
  color:var(--tx2);padding:0 2px 0 10px}
.nf-toolbar__label .nf-i{font-size:18px}
.nf-toolbar__div{width:1px;height:20px;background:var(--bd);margin:0 7px;flex:none}
.nf-toolbar__div--near{margin:0 6px}
.nf-sort{position:relative}
.nf-sort__btn{display:flex;align-items:center;gap:7px;border:0;background:transparent;
  color:var(--tx);border-radius:999px;padding:8px 10px;font:700 12px/1 var(--ff);
  cursor:pointer;white-space:nowrap}
.nf-sort__btn{transition:background .14s}
.nf-sort__btn:hover{filter:none;background:var(--surf2)}
.nf-sort__btn .nf-i{font-size:17px;color:var(--tx2)}
/* Своё меню вместо нативного select: нужны галочка, ширина 274px и своя типографика.
   z-index 60 — над карточками результатов, под подсказкой фильтра (120). */
.nf-sort__menu{display:none;position:absolute;right:0;top:40px;z-index:60;width:274px;
  flex-direction:column;gap:1px;background:var(--surf);border:1px solid var(--bdS);
  border-radius:16px;padding:6px;box-shadow:var(--nf-shadow-pop);
  animation:nfRise .14s ease-out}
.nf-sort[data-open="true"] .nf-sort__menu{display:flex}
.nf-sort__item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--tx);border-radius:11px;padding:10px 11px;
  font:600 12.5px/1.3 var(--ff);cursor:pointer}
.nf-sort__item:hover{background:var(--surf2)}
.nf-sort__item[aria-selected="true"]{background:var(--sunk);font-weight:700}
.nf-sort__item .nf-i{font-size:16px;color:transparent}
.nf-sort__item[aria-selected="true"] .nf-i{color:var(--data)}

.nf-vbtn{display:grid;place-items:center;width:34px;height:28px;border:0;padding:0;
  border-radius:999px;cursor:pointer;background:transparent;color:var(--tx2)}
.nf-vbtn{transition:background .14s,color .14s}
.nf-vbtn:hover{filter:none;background:var(--surf2);color:var(--tx)}
.nf-vbtn .nf-i{font-size:18px}
.nf-vbtn[aria-pressed="true"]{background:var(--data);color:var(--dataTx)}
/* Нажатый (синий) тоже отзывается на курсор — чуть светлее, как .nf-per
   (владелец 15.09.2026: «то, что горит синим, не подсвечивается»). */
.nf-vbtn[aria-pressed="true"]:hover{background:var(--data);color:var(--dataTx);
  filter:brightness(1.12)}
.nf-per{border:0;border-radius:999px;padding:8px 11px;font:700 12px/1 var(--ff);
  cursor:pointer;background:transparent;color:var(--tx)}
.nf-per{transition:background .14s,color .14s}
.nf-per:hover{filter:none;background:var(--surf2)}
.nf-per[aria-pressed="true"]:hover{background:var(--data);filter:brightness(1.12)}
.nf-per[aria-pressed="true"]{background:var(--data);color:var(--dataTx)}
.nf-per--wide{padding:8px 12px}

/* ── Результаты: сетка и список ────────────────────────────────────────────── */
.nf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:18px 16px}
.nf-resrows{display:none;flex-direction:column;gap:8px}
.nf-results[data-view="list"] .nf-cards{display:none}
.nf-results[data-view="list"] .nf-resrows{display:flex}
/* Шапка колонок — принадлежность СПИСКА: в виде «сетка» она висела над карточками,
   подписывая колонки, которых там нет. */
.nf-results[data-view="grid"] .nf-reshead{display:none}

/* Одна панель — как на витрине (16.08), только узкая и в один кадр: в поиск
   приходят перебирать много каналов, поэтому в ряд их должно помещаться больше. */
/* container-type — строки под кадром выбирают раскладку по ШИРИНЕ КАРТОЧКИ
   (см. .nf-card__row ниже), а она зависит от окна: 177px при пяти колонках, 271 при двух. */
.nf-card{cursor:pointer;min-width:0;position:relative;background:var(--sunk);
  border-radius:14px;padding:8px 8px 0;container-type:inline-size}
/* Рамка превью. Контейнер называется __frame, картинка внутри — __shot: так же,
   как у карточки витрины (__thumb + __shot), чтобы правило было одно на оба экрана. */
.nf-card__frame{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:9/16}
/* Полоска лежит ПОД картинкой и видна, когда картинки нет или она не загрузилась. */
.nf-card__stub{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,var(--surf2) 0 10px,var(--surf) 10px 20px)}
.nf-card__stub-cap{position:absolute;top:10px;left:11px;
  font:600 9.5px/1 var(--mono);color:var(--tx2)}
/* Почему кадра нет — словами посередине плитки (у канала с 0 роликов на YouTube: «ролики канала
   скрыты или удалены», 28.10.2026). Тем же шрифтом, что пустая лента обложки (.nf-cover__empty). */
.nf-card__stub-note{position:absolute;inset:0;display:grid;place-items:center;padding:0 14px;
  text-align:center;font:600 12px/1.35 var(--ff);color:var(--tx2)}
.nf-card__shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit}
/* Отсчёт от края карточки: 8px поля панели + 7px до кадра. */
.nf-card__bm{position:absolute;top:15px;right:15px;width:30px;height:30px;padding:0;
  border:0;border-radius:99px;background:var(--nf-scrim);color:var(--tx);display:grid;
  place-items:center;cursor:pointer;z-index:2}
.nf-card__bm:hover{filter:none}
.nf-card__bm .nf-i{font-size:18px}
/* Под замком (бесплатный аккаунт, 17.10.2026) закрытый канал в выдаче поиска — та же
   карточка без кадра, имени и аватара (их нет в данных, viewdata.закрыть_личность), а
   посреди кадра — надпись «Откройте доступ» (до 21.10.2026 — кнопка в окно тарифов). Вид —
   ОДИН с закрытым каналом на странице ниши и на главной (.nf-ch--locked, .nf-ch__lock;
   владелец 17.10.2026: «в одной гамме, как
   закрытые в нише»): полоски кадра размыты в тёмный фон, подписи «скрыто» нет, плашка без
   значка, со скруглением и откликом плашки ниши, текст — те же две строки. Ширина — почти
   весь кадр, а не по содержимому, как в нише: кадр поиска узкий (161–255px), и плашка «по
   содержимому» у абсолютного блока со сдвигом left:50% получает лишь половину кадра — текст
   рассыпался в пять строк (снимок 18.10). Шрифт на пол-пикселя мельче, чем в нише, по той же
   причине. Подложка — переменной экрана главной, а вне её — тем же числом: поиск живёт в
   .nf-search. */
.nf-card--locked .nf-card__stub{filter:blur(8px)}
.nf-card--locked .nf-card__stub-cap{display:none}
.nf-card__lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 20px);max-width:200px;display:flex;flex-direction:column;align-items:center;
  margin:0;padding:12px 10px;border:1px solid var(--bdS);border-radius:14px;
  background:var(--nf-lock-plate,rgba(0,0,0,.84));color:var(--tx);font:inherit;
  text-align:center;pointer-events:none;backdrop-filter:blur(2px);
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,
             box-shadow .16s ease}
.nf-card__lock-t{font:700 11.5px/1.3 var(--ff);color:var(--tx)}
/* Отклик — как у плашки ниши: наведение на карточку — белая рамка и чуть крупнее. Плашка —
   надпись, нажатие проходит сквозь неё к карточке канала (юзер-тест 21.10.2026, см.
   .nf-ch__lock); своего красного отклика у неё больше нет. */
.nf-card--locked:hover .nf-card__lock{border-color:rgba(255,255,255,.75);
  background:rgba(18,18,18,.94);box-shadow:0 10px 26px rgba(0,0,0,.55);
  transform:translate(-50%,-50%) scale(1.04)}
.nf-card__lock:focus-visible{outline:2px solid var(--data);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .nf-card__lock{transition:none}
  .nf-card--locked:hover .nf-card__lock{transform:translate(-50%,-50%)}
}
/* Три подписанные строки под кадром (вариант B с канваса + строка языка, владелец
   15.09.2026): доход, просмотры, язык. Чипы с полной вилкой дохода на карточке
   176–200px переносились вразнобой, строки же всегда стоят на своих местах.
   Раскладка строки — по ширине карточки (container query на .nf-card):
     • от 200px содержимого (карточка от 216: query меряет content-box, без полей
       по 8px) — как на канвасе: подпись слева, значение справа, одной строчкой;
       200 = самое длинное бок о бок, «Просмотры за 20 дней» + «265,5 млн»;
     • уже — подпись над значением, столбиком, как плитки карточки в избранном:
       в сетке карточка бывает 177px (внутри 165), бок о бок там не помещаются даже
       «Доход / мес» с суммой целиком (181px; замер 15.09.2026).
   Ряды у соседних карточек одной высоты: карточки в сетке одной ширины, значит и
   раскладка у них одна. Ни число, ни подпись не режем: в столбике самое длинное 135px,
   бок о бок — по замеру выше. */
/* Между строками — воздух, а не линии: тонкие разделители владелец прочитал как
   «недополоски» табличной разметки (скрин 15.09.2026). Линия остаётся одна — над
   подписью канала, как было до строк. */
.nf-card__rows{display:flex;flex-direction:column;gap:9px;padding:9px 1px 4px}
.nf-card__row{display:flex;flex-direction:column;gap:4px}
.nf-card__cap{font:800 9px/1 var(--ff);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-card__val{font:700 12px/1 var(--ff);color:var(--tx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nf-card__val--money{color:var(--pos)}
@container (min-width: 200px){
  .nf-card__row{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:10px}
  .nf-card__cap{min-width:0}
  .nf-card__val{flex:none;overflow:visible}
}
/* Под последней строкой столько же места, сколько между строками: у .nf-card__meta
   свой margin-top 8px, и под «языком» выходило вдвое больше, чем над ним (скрин
   владельца 15.09.2026). */
.nf-card__rows + .nf-card__meta{margin-top:0}
/* Просмотры — голубые всегда, как «дни в базе»: это «данные» (владелец 15.09.2026:
   «просто просмотры голубые и всё», а не по наведению). */
.nf-card__val--views{color:var(--data)}
/* Подпись — внутри карточки: аватар, рядом имя и ниша в две строки. «Дней в базе»
   здесь больше нет (владелец 15.09.2026). */
.nf-card__meta{display:flex;align-items:center;gap:8px;min-width:0;
  margin-top:8px;padding:9px 1px 10px;border-top:1px solid rgba(255,255,255,.06)}
.nf-card__ava{width:26px;height:26px;flex:none;border-radius:99px;
  background:var(--surf2);display:grid;place-items:center;
  font:700 10.5px/1 var(--ff);color:var(--tx2)}
.nf-card__who{min-width:0;flex:1}
.nf-card__name{display:block;font:700 13px/1.2 var(--ff);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;
  text-decoration:none}
/* Цвет ниши приходит переменной --nf-niche из разметки; --nf-tier тут стоял
   исторически и не заполнялся ничем, то есть подпись всегда была серой. */
.nf-card__niche{display:block;font:600 12px/1.25 var(--ff);letter-spacing:-.1px;min-width:0;margin-top:3px;
  color:var(--nf-niche,var(--tx2));
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

.nf-resrow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,150px)
  minmax(0,120px) minmax(0,96px) minmax(0,130px);gap:14px;align-items:center;
  background:var(--surf);border-radius:var(--r);padding:14px 18px;cursor:pointer}
.nf-resrow:hover{background:var(--surf2)}
/* Шапка списка выдачи. Сетка колонок ТА ЖЕ, что у строк (иначе подписи разъедутся с
   числами), но это не строка: своего фона нет, наведение её не подсвечивает, карточку
   она не открывает. Каждая подпись — кнопка сортировки: клик сортирует выдачу по этой
   колонке, и подпись в «Сортировать по» меняется вместе с ней.
   Цвет белый, а не приглушённый (владелец 18.08): подпись столбца человек читает
   один раз и должен прочитать сразу. */
.nf-reshead{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,150px)
  minmax(0,120px) minmax(0,96px) minmax(0,130px);gap:14px;align-items:end;
  padding:2px 18px 8px}
.nf-reshead__c{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;
  font:700 11px/1.2 var(--ff);letter-spacing:.04em;color:var(--tx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nf-reshead__c--r{text-align:right}
.nf-reshead__c:hover{color:var(--data)}
/* Под замком «Канал» и «Подписчиков» не сортируют (search.СОРТИРОВКИ_ПОД_ЗАМКОМ): подпись
   та же, но это не кнопка — ни руки, ни подсветки. */
.nf-reshead__c--off{cursor:default}
.nf-reshead__c--off:hover{color:var(--tx)}
/* Стрелка у активной колонки — на псевдоэлементе: отдельный span в разметке пришлось бы
   держать в пяти местах и не забыть переключать. */
.nf-reshead__c[aria-sort="descending"]::after{content:" ↓";color:var(--data)}
.nf-reshead__c[aria-sort="ascending"]::after{content:" ↑";color:var(--data)}
.nf-resrow__id{display:flex;align-items:center;gap:12px;min-width:0}
.nf-resrow__who{min-width:0}
.nf-resrow__ava{width:34px;height:34px;flex:none;border-radius:99px;background:var(--surf2);
  display:grid;place-items:center;font:700 13px/1 var(--ff);color:var(--tx2)}
.nf-resrow__name{font:700 14.5px/1.3 var(--ff);letter-spacing:-.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Подрезаем так же, как имя канала: без этого «без ниши» вылезало из своей колонки
   и печаталось под числом соседней. */
.nf-resrow__niche{font:600 11.5px/1.4 var(--ff);color:var(--nf-niche,var(--tx2));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-resrow__med{text-align:right;font:700 13.5px/1 var(--ff);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nf-resrow__subs{text-align:right;font:600 13px/1 var(--ff);color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-resrow__age{text-align:right;font:400 13px/1 var(--ff);white-space:nowrap}
.nf-resrow__found{text-align:right;font:600 12.5px/1 var(--ff);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--data)}

/* ── Постраничность ────────────────────────────────────────────────────────
   Распорки по краям держат листалку ровно по центру, а нижний выбор «на
   странице» — на одной вертикали с верхним. */
.nf-pager{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--bd)}
.nf-pager__side{flex:1 1 0;min-width:0}
.nf-pager__side--right{display:flex;justify-content:flex-end}
.nf-pager__nums{display:flex;align-items:center;gap:5px;flex:none}
.nf-pager__arrow{display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid var(--bd);background:transparent;color:var(--tx);border-radius:999px;
  cursor:pointer}
.nf-pager__arrow:hover{border-color:var(--bdS)}
.nf-pager__arrow[disabled]{color:var(--tx2);cursor:default}
.nf-pager__arrow .nf-i{font-size:19px}
.nf-pager__page{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--bd);
  background:transparent;color:var(--tx);border-radius:999px;cursor:pointer;
  font:700 12.5px/1 var(--ff)}
/* filter:none снимает подсветку из базовой кнопки; свою реакцию даём отдельно. */
.nf-pager__page{transition:background .14s,border-color .14s}
.nf-pager__page:hover{filter:none;background:var(--surf2);border-color:var(--bdS)}
.nf-pager__page[aria-current="page"]:hover{background:var(--data);filter:brightness(1.08)}
.nf-pager__page[aria-current="page"]{border:0;background:var(--data);color:var(--dataTx)}
.nf-pager__gap{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;
  color:var(--tx2);font:600 12.5px/1 var(--ff)}
.nf-perbox{display:flex;align-items:center;gap:4px;background:var(--sunk);
  border:1px solid var(--bd);border-radius:999px;padding:4px 4px 4px 13px}
.nf-perbox__label{font:600 12px/1 var(--ff);color:var(--tx2);white-space:nowrap;
  margin-right:3px}

/* Кнопка «Фильтры · N» над выдачей (юзер-тест 21.10.2026; разметка и причина — search.html).
   На широком экране её нет: панель стоит колонкой слева. */
.nf-ftoggle{display:none}

/* ── Узкий экран ───────────────────────────────────────────────────────────
   Колонка в 274px + сетка карточек на телефоне не помещаются; фильтры уходят
   наверх и перестают липнуть, иначе они съедали бы весь экран. */
@media (max-width:900px){
  .nf-search{padding:20px 16px 56px}
  .nf-search__layout{grid-template-columns:minmax(0,1fr)}
  .nf-filters{position:static;max-height:none}
  /* Наверху панель длиной в четыре экрана заслоняла выдачу — она спрятана за кнопкой
     «Фильтры · N» и раскрывается блоком под ней (data-fopen ставит app.js). Без скрипта
     (.nf-js нет) панель видна, как раньше: кнопка без скрипта не откроет её. */
  /* Вид — пилюли .nf-navbtn и капсулы сортировки рядом (тёмная, тонкая рамка), только во
     всю ширину и выше: это главный вход в фильтры на телефоне. */
  .nf-ftoggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    height:44px;padding:0 18px;border:1px solid var(--bd);border-radius:999px;
    background:var(--sunk);color:var(--tx);font:700 13.5px/1 var(--ff);cursor:pointer;
    transition:background .14s,border-color .14s}
  .nf-ftoggle:hover{filter:none;background:var(--surf2);border-color:var(--bdS)}
  .nf-ftoggle .nf-i{font-size:19px;color:var(--tx2)}
  .nf-ftoggle__n{color:var(--tx2)}
  .nf-ftoggle__n[hidden]{display:none}
  .nf-ftoggle__arrow{transition:transform .16s ease}
  .nf-search__layout[data-fopen="true"] .nf-ftoggle__arrow{transform:rotate(180deg)}
  .nf-js .nf-search__layout[data-fopen="false"] > .nf-filters{display:none}
  @media (prefers-reduced-motion:reduce){.nf-ftoggle,.nf-ftoggle__arrow{transition:none}}
  .nf-ask__redo{margin-right:0}
  /* Колонок строки здесь НЕ трогаем: на этой ширине панель фильтров уезжает наверх,
     и колонка выдачи становится во всю страницу — резать её именно тут было
     ошибкой. Ширину строки решают контейнерные пороги выше по файлу. */
}

/* ═══ saved ═══════════════════════════════════════════════════ */
/* ═══ Экран «Избранное» ═══════════════════════════════════════════════════
   Перенос из прототипа NicheFinder v2.dc.html, строки 611–803.
   Состояние экрана живёт в data-атрибутах на корне секции и на карточках:
   так один клик в app.js переключает вид, не трогая разметку. */

.nf-saved{padding:26px 34px 70px}

.nf-saved__head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.nf-saved__title{margin:0 0 8px;font:800 34px/1.1 var(--ff);letter-spacing:-1.2px}
.nf-saved__sub{font:400 14px/1.5 var(--ff);color:var(--tx2)}

/* ── Табы «Ниши · N» / «Каналы · N» ─────────────────────────────────────── */
.nf-saved__tabs{display:flex;gap:4px;background:var(--sunk);border:1px solid var(--bd);border-radius:999px;padding:4px;margin-bottom:22px;width:fit-content}
.nf-saved__tab{border:0;border-radius:999px;padding:10px 18px;font:700 13px/1 var(--ff);cursor:pointer;background:transparent;color:var(--tx2)}
/* Активность таба и панели выводится из одного data-tab на секции — источник
   правды один, рассинхрона «подсвечен таб A, открыта панель B» быть не может. */
.nf-saved[data-tab="niches"] .nf-saved__tab[data-val="niches"],
.nf-saved[data-tab="channels"] .nf-saved__tab[data-val="channels"]{background:var(--tx);color:var(--bg)}

.nf-saved__pane{display:none}
/* Вкладка ниш — обычный блок: сетку внутри держит .nf-nichegrid, та же, что на
   странице всех ниш. Пока здесь была своя сетка из широких карточек «ниша в
   работе», внутренняя сетка попадала в одну её ячейку и вырождалась в колонку. */
.nf-saved[data-tab="niches"] .nf-saved__pane--niches{display:block}
.nf-saved[data-tab="channels"] .nf-saved__pane--channels{display:flex}
.nf-saved__pane--channels{flex-direction:column}

/* Карточка ниши в избранном раньше была СВОЯ — широкая, с «взять в работу»,
   счётчиком «сколько человек уже делают эту нишу» и обсуждением. Ни одна из этих
   кнопок реализована не была: все отвечали «скоро». С 17.08.2026 таб «Ниши»
   рисует ту же карточку, что и страница «Ниши» (_niche_card.html, .nf-niche), и
   правила .nf-nichef*, .nf-chat*, .nf-msg* удалены — ни одного обращения к ним
   не осталось ни в продукте, ни на кухне. Вернётся обсуждение — вернётся и своя
   вёрстка, но уже под живую разметку, а не под макет двухлетней давности. */

/* ═══ Таб «Каналы»: строка управления ════════════════════════════════════ */
/* ОДНА строка: лента каталогов слева, «Добавить каналы» + сортировка + переключатель
   вида — СПРАВА. Правый край им отдан не по вкусу: ровно там же они стоят на витрине,
   на странице ниши и в поиске, и капсула, уехавшая влево, читается как другой экран.
   Каталоги стояли отдельным этажом, и вдвоём эти строки съедали ~120 px до первой
   карточки — на ноутбуке полка начиналась под сгибом. Тесноту разбирает сама лента:
   сперва ужимает имена каталогов, и только потом прокручивается (см. .nf-cats).
   nowrap здесь принципиален: с flex-wrap ручки при нехватке места срывались вниз —
   то есть строка снова становилась двумя. */
.nf-saved__bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:nowrap}
/* Правая группа единым блоком, а не тремя ручками: рядом с ужимающейся лентой ей
   нельзя ни сжиматься, ни разъезжаться. */
.nf-saved__tools{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
/* Телефонное правило лежит НЕ здесь, а следом за .nf-cats (секция «Каталоги полки»):
   медиазапрос не добавляет веса селектору, и стоящее ниже по файлу базовое правило
   .nf-cats его перебивало — строка так и оставалась одной на 360 px. */

.nf-colls{display:flex;gap:4px;background:var(--sunk);border:1px solid var(--bd);border-radius:999px;padding:4px;flex-wrap:wrap}
.nf-colls__btn{border:0;border-radius:999px;padding:10px 16px;font:700 12.5px/1 var(--ff);cursor:pointer;background:transparent;color:var(--tx2)}
.nf-colls__btn--on{background:var(--tx);color:var(--bg)}
.nf-colls__edit{display:none;background:var(--surf);border:1px solid var(--data);border-radius:999px;padding:10px 14px;color:var(--tx);font:600 12.5px/1 var(--ff);outline:none;width:170px}
.nf-colls[data-editing="1"] .nf-colls__edit{display:block}
.nf-colls__add{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--tx2);cursor:pointer}
.nf-colls__add:hover{background:var(--surf2);color:var(--tx)}
.nf-colls__add .nf-i{font-size:20px}

.nf-addch{position:relative}
.nf-addch__btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bdS);background:transparent;color:var(--tx);border-radius:999px;padding:10px 15px;font:700 12px/1 var(--ff);cursor:pointer;white-space:nowrap}
.nf-addch__btn:hover{background:var(--surf2)}
.nf-addch__btn .nf-i{font-size:17px}
/* z-index 70 — слой боковой панели: выпадашка обязана лечь поверх карточек
   и поверх развёрнутой панели, иначе её край срезается. */
/* z70 — как в прототипе (стр.695). На 60 меню уходило под липкую шапку. */
.nf-addch__menu{position:absolute;right:0;top:46px;z-index:70;width:300px;display:none;flex-direction:column;gap:2px;background:var(--surf);border:1px solid var(--bdS);border-radius:16px;padding:7px;box-shadow:var(--nf-shadow-pop);animation:nfRise .14s ease-out}
.nf-addch[data-open="1"] .nf-addch__menu{display:flex}
.nf-addch__cap{font:800 10px/1 var(--ff);letter-spacing:.08em;color:var(--tx2);text-transform:uppercase;padding:8px 10px 10px}
.nf-addch__item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--tx);border-radius:11px;padding:9px 10px;font:600 12.5px/1.3 var(--ff);cursor:pointer}
.nf-addch__item:hover{background:var(--surf2)}
.nf-addch__ava{width:26px;height:26px;flex:none;border-radius:99px;background:var(--surf2);display:grid;place-items:center;font:700 11px/1 var(--ff);color:var(--tx2)}
.nf-addch__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-addch__item .nf-i{font-size:18px;color:var(--tx2);flex:none}

.nf-viewsw{display:flex;align-items:center;gap:4px;background:var(--sunk);border:1px solid var(--bd);border-radius:999px;padding:4px}
.nf-viewsw__btn{display:grid;place-items:center;width:34px;height:28px;border:0;border-radius:999px;cursor:pointer;background:transparent;color:var(--tx2)}
.nf-viewsw__btn .nf-i{font-size:18px}
.nf-saved__pane--channels[data-view="grid"] .nf-viewsw__btn[data-val="grid"],
.nf-saved__pane--channels[data-view="list"] .nf-viewsw__btn[data-val="list"]{background:var(--tx);color:var(--bg)}

.nf-saved__coll{display:grid;gap:14px}
/* Минимум 420px, а не 290: четыре ячейки цифр одной строкой с вилкой дохода
   целиком просят ~370px содержимого (владелец 15.09.2026: «в одну строчку»). */
.nf-chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.nf-chlist{display:flex;flex-direction:column;gap:8px}
.nf-saved__pane--channels[data-view="grid"] .nf-chlist{display:none}
.nf-saved__pane--channels[data-view="list"] .nf-chgrid{display:none}
/* Пустая коллекция подменяет обе раскладки, но не строку управления:
   создать/переключить коллекцию надо уметь и из пустого состояния. */
.nf-saved__pane--channels[data-empty="1"] .nf-saved__coll{display:none}

/* ═══ Карточка канала ════════════════════════════════════════════════════ */
/* container-type — строка цифр выбирает раскладку по ширине карточки (см. .nf-chcard__cols). */
.nf-chcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surf);cursor:pointer;container-type:inline-size}
.nf-chcard:hover{background:var(--surf2)}
.nf-chcard__shot{position:relative;height:132px;overflow:hidden}
/* Скриншота канала у нас нет — честная полоска-заглушка под блюром работает
   как «отпечаток» карточки; inset:-12px, чтобы блюр не оголил края. */
.nf-chcard__shot-bg{position:absolute;inset:-12px;background:repeating-linear-gradient(135deg,var(--surf2) 0 14px,var(--sunk) 14px 28px);filter:blur(7px) saturate(.7);opacity:.85}
/* Кадр лучшего шортса на месте полоски. Размытие и приглушение те же, что у неё:
   это «отпечаток» карточки, поверх которого читаются имя и цифры. */
/* Без размытия (владелец 15.09.2026: и здесь «без блюра») — имя и цифры держит
   затемнение снизу. */
.nf-chcard__shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.nf-chcard__shot-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.35) 45%,var(--surf) 100%)}
.nf-chcard__shot-cap{position:absolute;top:11px;left:13px;font:600 10px/1 var(--mono);color:var(--tx2)}

.nf-chcard__bm{position:absolute;top:9px;right:9px;width:34px;height:34px;border:0;border-radius:99px;background:var(--nf-scrim);color:var(--tx2);display:grid;place-items:center;cursor:pointer}
.nf-chcard__bm .nf-i{font-size:20px;font-variation-settings:'FILL' 0}
.nf-chcard__bm--on{color:var(--warn)}
.nf-chcard__bm--on .nf-i{font-variation-settings:'FILL' 1}

.nf-chcard__id{position:absolute;left:14px;right:14px;bottom:11px;display:flex;align-items:center;gap:11px}
.nf-chcard__ava{width:42px;height:42px;flex:none;border-radius:99px;background:var(--surf2);border:2px solid var(--surf);display:grid;place-items:center;font:700 15px/1 var(--ff);color:var(--tx2)}
.nf-chcard__idtext{min-width:0;flex:1}
.nf-chcard__name{display:block;font:700 15.5px/1.25 var(--ff);letter-spacing:-.3px;color:var(--tx);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-chcard__name:hover{color:var(--tx);text-decoration:underline}
/* Та же гарнитура и вес, что у подписи ниши на карточках выдачи (.nf-card__niche):
   500 читалось как чужой шрифт рядом с жирным именем (владелец 15.09.2026). */
.nf-chcard__niche{font:600 12.5px/1.3 var(--ff);letter-spacing:-.1px;color:var(--nf-tier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

.nf-chcard__body{padding:13px 16px 15px}
.nf-spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-bottom:10px}
.nf-spark__bar{flex:1;min-width:0;border-radius:2px 2px 0 0;background:var(--data);height:var(--nf-bar-h)}

.nf-chcard__v48row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nf-chcard__v48{font:700 13px/1 var(--ff)}
.nf-chcard__v48lbl{font:600 10.5px/1 var(--ff);color:var(--tx2)}
.nf-delta{display:inline-flex;align-items:center;gap:3px;font:700 11.5px/1 var(--ff);color:var(--pos);margin-left:auto}
.nf-delta .nf-i{font-size:15px}
.nf-delta--down{color:var(--tone-bad)}

/* Четыре ячейки ОДНОЙ строкой, всё по центру (владелец 15.09.2026: «в одну строчку
   красивее»): подпись над числом. Доли колонок ЖЁСТКИЕ, одни у всех карточек — иначе
   «Стаж» и «За 48 часов» гуляли влево-вправо от карточки к карточке (колонки по
   содержимому меняли ширину от длины чисел). Доли — под самое длинное: подпись
   «Просмотры / 20 дн.», число «≈31,1 млн», «74 мес», вилка «$137 140–160 000».
   Чтобы строка помещалась, у сетки полки минимум карточки 420px (см. .nf-chgrid);
   на узкой карточке (телефон) — 2×2 по container query, а не многоточие. */
.nf-chcard__cols{display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) minmax(0,.6fr) minmax(0,1.2fr);
  gap:10px 8px;border-top:1px solid var(--bd);padding-top:12px}
@container (max-width: 359px){
  .nf-chcard__cols{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
}
.nf-chcard__col{min-width:0;text-align:center}
.nf-chcard__cap{font:800 9px/1 var(--ff);letter-spacing:.06em;color:var(--tx2);text-transform:uppercase;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-chcard__val{font:700 13.5px/1 var(--ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Просмотры — цветом данных: число это ответ карточки, и оно выделяется так же,
   как на карточке канала (владелец 19.08; 15.09 — «просмотры голубые всегда»). */
.nf-chcard__val--data{color:var(--data)}
.nf-chcard__val--money{color:var(--pos)}

/* ═══ Строка списка ══════════════════════════════════════════════════════
   Колонки заданы жёстко, чтобы строки читались как таблица; последняя — 66px
   под две круглые кнопки. */
.nf-chrow{position:relative;display:grid;grid-template-columns:minmax(130px,1.4fr) minmax(66px,.8fr) minmax(66px,96px) minmax(58px,72px) minmax(84px,104px) 66px;gap:10px;align-items:center;border-radius:var(--r);overflow:hidden;background:var(--surf);padding:13px 14px;cursor:pointer}
.nf-chrow:hover{background:var(--surf2)}
.nf-chrow__shot{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--surf2) 0 14px,var(--sunk) 14px 28px);filter:blur(9px) saturate(.6);opacity:.32}
.nf-chrow__shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(9px) saturate(.6);opacity:.32}
.nf-chrow__fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),var(--surf) 62%)}

.nf-chrow__id{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
.nf-chrow__ava{width:38px;height:38px;flex:none;border-radius:99px;background:var(--surf2);display:grid;place-items:center;font:700 14px/1 var(--ff);color:var(--tx2)}
.nf-chrow__idtext{min-width:0}
.nf-chrow__name{display:block;font:700 14.5px/1.3 var(--ff);letter-spacing:-.3px;color:var(--tx);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-chrow__name:hover{color:var(--tx);text-decoration:underline}
.nf-chrow__found{font:600 11px/1.4 var(--ff);color:var(--data);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-chrow__niche{position:relative;font:600 12.5px/1.3 var(--ff);color:var(--nf-tier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* «За 48 часов» — число той же породы, что соседние «просмотров» и «в месяц»:
   по точкам с временем «+2,1 млн», по суточным снимкам «≈2,1 млн», откат — прочерк. */
.nf-chrow__trend{position:relative;min-width:0;text-align:right;font:600 13px/1 var(--ff);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}

.nf-chrow__num{position:relative;min-width:0;text-align:right;font:600 13px/1 var(--ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-chrow__num--money{font-weight:700;color:var(--pos)}
.nf-chrow__sub{display:block;font:600 9.5px/1 var(--ff);color:var(--tx2);margin-top:5px}

.nf-chrow__acts{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.nf-chrow__btn{width:34px;height:34px;border:0;border-radius:99px;background:transparent;color:var(--tx2);display:grid;place-items:center;cursor:pointer}
.nf-chrow__btn .nf-i{font-size:20px;font-variation-settings:'FILL' 0}
.nf-chrow__btn:hover{background:var(--sunk)}
.nf-chrow__btn--open:hover{color:var(--tx)}
.nf-chrow__btn--on{color:var(--warn)}
.nf-chrow__btn--on .nf-i{font-variation-settings:'FILL' 1}

/* ═══ Пустая коллекция ═══════════════════════════════════════════════════ */
.nf-collempty{display:none;background:var(--surf);border-radius:var(--r);padding:64px 24px;text-align:center}
.nf-saved__pane--channels[data-empty="1"] .nf-collempty{display:block}
/* Вкладка «Ниши»: «Сохранённых ниш пока нет» не показывалось никогда — правило выше было
   только у каналов (юзер-тест 21.10.2026). Сервер рисует этот блок, лишь когда ниш на
   полке нет (saved.html), поэтому без data-empty он виден; data-empty="0" (app.js, полка
   пересчитана) — прячет. */
.nf-saved__pane--niches:not([data-empty="0"]) .nf-collempty{display:block}
.nf-collempty__icon{width:52px;height:52px;margin:0 auto 18px;border-radius:99px;background:var(--surf2);display:grid;place-items:center;color:var(--tx2)}
.nf-collempty__icon .nf-i{font-size:26px}
.nf-collempty__title{font:700 19px/1.3 var(--ff);letter-spacing:-.4px;margin-bottom:9px}
.nf-collempty__text{font:600 13.5px/1.65 var(--ff);color:var(--tx2);max-width:440px;margin:0 auto 22px}
.nf-collempty__cta{border:0;background:var(--cta);color:var(--ctaTx);border-radius:999px;padding:14px 24px;font:700 13.5px/1 var(--ff);cursor:pointer}

/* ═══ guide ═══════════════════════════════════════════════════════════════════
   Экран «Как это работает» (владелец 14.10.2026, вариант A с канваса): практический
   гайд на НАСТОЯЩИХ снимках бесплатной версии — /static/guide/free/, пересъёмка
   scripts/guide_shots_render.py + guide_shots_shoot.py. Выделение в тексте — жирным и
   цветом продукта: жёлтый маркер и красное подчёркивание владелец забраковал.
   Цвет блока — переменная --gd-c из разметки (токены гаммы и шкалы, своих нет).
   Раскладка — по ширине самого экрана (container), а не окна: панель слева
   сворачивается, и места бывает то больше, то меньше при том же окне. Шире 1180 px
   страница стоит посередине (владелец 17.10.2026: прижатая к левому краю, она оставляла
   справа пустой столбец). */
.nf-gd{container-type:inline-size;padding:34px 34px 90px;max-width:1180px;margin-inline:auto;
  display:flex;flex-direction:column;gap:84px}
.nf-gd b{font-weight:700;color:var(--tx)}
.nf-gd__hero,.nf-gd__col,.nf-gd__block{display:flex;flex-direction:column;gap:16px;min-width:0}
.nf-gd__block{gap:24px}
.nf-gd__col--narrow{max-width:820px}
.nf-gd__col--pad{padding-top:10px}
.nf-gd__h1{margin:0;font:800 52px/1.05 var(--ff);letter-spacing:-.02em}
.nf-gd__lead{margin:0;max-width:720px;font:500 18px/1.6 var(--ff);color:var(--tx2)}
.nf-gd__h2{margin:0;font:800 32px/1.15 var(--ff);letter-spacing:-.01em}
.nf-gd__txt{margin:0;font:500 16px/1.7 var(--ff);color:#D6D6D6}
.nf-gd__txt--dim{font-size:15px;color:var(--tx2)}
.nf-gd__small{margin:0;font:500 15px/1.6 var(--ff);color:var(--tx2)}
.nf-gd__ttl{font:800 19px/1.25 var(--ff);letter-spacing:-.01em}
/* Метка шага: цвет блока текстом и им же, приглушённым, — фон. */
.nf-gd__tag{align-self:flex-start;padding:6px 12px;border-radius:999px;
  font:700 13px/1 var(--ff);color:var(--gd-c);
  background:color-mix(in srgb,var(--gd-c) 16%,transparent)}
.nf-gd__badge{align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:999px;
  font:700 13px/1 var(--ff);background:var(--cta);color:var(--ctaTx)}
/* Снимок экрана: рамка и тень, чтобы тёмный снимок не сливался с тёмным фоном. */
.nf-gd__shot{display:block;width:100%;height:auto;border-radius:18px;background:var(--sunk);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.nf-gd__shot--strip{max-width:900px;border-radius:14px}
.nf-gd__fig{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.nf-gd__cap{font:500 13.5px/1.5 var(--ff);color:var(--tx2)}
.nf-gd__where{display:grid;grid-template-columns:264px minmax(0,1fr);gap:28px;align-items:start}
.nf-gd__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nf-gd__tile{background:var(--surf);border-radius:22px;padding:22px;display:flex;
  flex-direction:column;gap:12px;border-top:4px solid var(--gd-c)}
.nf-gd__intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:end}
.nf-gd__split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:start}
.nf-gd__split--mid{align-items:center}
.nf-gd__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.nf-gd__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.nf-gd__list li{position:relative;padding-left:22px;font:500 16px/1.7 var(--ff);color:#D6D6D6}
.nf-gd__list li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;
  border-radius:50%;background:var(--gd-c)}
/* Буква ниши в тексте — тем же цветом шкалы, что на карточках ниш. */
.nf-gd__lt{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;margin:0 2px;vertical-align:-5px;font:800 15px/1 var(--ff);
  background:var(--gd-c);color:var(--gd-i)}
.nf-gd__tricks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.nf-gd__stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.nf-gd__card{background:var(--surf);border-radius:22px;padding:22px;display:flex;
  flex-direction:column;gap:14px}
.nf-gd__card--line{background:var(--panel);border:1px solid var(--bdS)}
.nf-gd__filt{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start}
.nf-gd__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@container (max-width: 880px){
  .nf-gd__h1{font-size:40px}
  .nf-gd__where,.nf-gd__intro,.nf-gd__split,.nf-gd__pair,.nf-gd__tricks,.nf-gd__more{
    grid-template-columns:minmax(0,1fr)}
  .nf-gd__fig--side{max-width:264px}
}
@container (max-width: 520px){
  .nf-gd__tiles,.nf-gd__filt{grid-template-columns:minmax(0,1fr)}
  .nf-gd__filt .nf-gd__shot{max-width:220px}
}
@media (max-width: 700px){ .nf-gd{padding:22px 16px 70px} }

/* ═══ _overlays ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   ОВЕРЛЕЙ 1 — карточка канала (спецификация 12, прототип 975–1096)
   ═══════════════════════════════════════════════════════════════════════════ */

/* z-index 200 — обязательно выше боковой панели (70): в незакреплённом режиме
   она разворачивается поверх контента и без этого накрыла бы карточку.
   Скролл у оверлея свой: карточка длинная, страница под ней остаётся на месте. */
.nf-modal{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.76);
  align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow:auto;
}
.nf-modal--open{display:flex}

.nf-modal__card{
  position:relative;width:100%;max-width:920px;
  background:var(--surf);border-radius:26px;
  animation:nfRise .22s ease-out;overflow:hidden;
}

/* Пейволл прячет только личность канала — имя, аватар, превью.
   Метрики видны всегда: человек должен убедиться в данных до оплаты. */
.nf-modal--locked .nf-id{filter:blur(8px)}

/* ── Шапка канала — картинка своей полосой ─────────────────────────────────
   Владелец 16.09.2026, вариант B: картинка ЧИСТАЯ, без затемнения и без текста
   поверх — имя, хендл и пилюли стоят строкой под ней, и контраст больше не
   зависит от того, какая у канала шапка (зелёная пилюля дохода на светлой шапке
   не читалась вовсе). До этого полоса лежала под шапкой абсолютом (320, потом
   260px) и держала имя затемнением. */
.nf-modal__bg{
  position:relative;height:200px;overflow:hidden;background:var(--surf2);
  pointer-events:none;
}
/* Полоски — подпись «превью канала», когда кадра нет, и то, что видно, пока
   картинка едет или если она не загрузилась. */
.nf-modal__bg-stripes{
  position:absolute;inset:-20px;
  background:repeating-linear-gradient(135deg,var(--surf2) 0 18px,var(--sunk) 18px 36px);
  filter:blur(16px) saturate(.6);opacity:.9;
}
/* Картинка в шапке карточки — шапка канала или, если её нет, кадр шортса — БЕЗ
   размытия (владелец 15.09.2026: «вообще без блюра»). */
.nf-modal__bg-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
}
.nf-modal__bg-shot--banner{}

/* Крестик — на картинке, в правом верхнем углу карточки, на тёмной подложке:
   на светлой шапке контурная кнопка терялась. */
.nf-modal__close{
  position:absolute;top:18px;right:18px;z-index:2;
  border:0;background:rgba(0,0,0,.45);color:var(--tx);
  border-radius:99px;width:34px;height:34px;padding:0;
  cursor:pointer;font-size:15px;line-height:1;
}
.nf-modal__close:hover{background:rgba(0,0,0,.7);filter:none}

/* ── Под шапкой ────────────────────────────────────────────────────────────
   Аватар наполовину на картинке (margin-top отрицательный); справа имя, под
   ним строка хендла с пилюлями. Хендл сидит на НИЖНЕМ крае аватара (владелец
   16.09.2026: «текст к нижнему краю строки»), пилюли — в его строке, справа
   («на уровне хендла»), пустой полосы под ними нет.

   Геометрия: заезд аватара на картинку 32px = отступ блока имени сверху, так
   что имя начинается ровно у края картинки, а не на ней. Ниже: имя 31 + зазор
   4 + строка хендла 40 (высота пилюли, текст по её середине) = 75; низ текста
   хендла приходится на низ аватара (96 − 32 = 64 = 75 − 11), пилюля выступает
   под него на 11px. Выравнивание по ВЕРХУ, а не по низу: если пилюлям всё же
   не хватит места и они уйдут строкой ниже, блок вырастет вниз, а не задерёт
   имя на картинку.
   position:relative — чтобы аватар лёг ПОВЕРХ картинки, у которой absolute. */
.nf-modal__card{container-type:inline-size}
.nf-modal__head{
  position:relative;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:0 28px 12px;margin-top:-32px;
}
.nf-modal__avatar{
  width:96px;height:96px;flex:none;border-radius:99px;background:var(--surf2);
  border:4px solid var(--surf);box-sizing:border-box;
  display:grid;place-items:center;font:700 28px/1 var(--ff);color:var(--tx2);
}
.nf-modal__ident{flex:1 1 0;min-width:0;padding-top:32px}
/* Имя одной строкой с многоточием: вторая строка сдвинула бы хендл с пилюлями. */
.nf-modal__title{
  display:block;min-width:0;
  font:800 27px/1.15 var(--ff);letter-spacing:-.9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Строка хендла: текст слева, пилюли справа, по одной середине. Пилюли шире
   половины карточки, а хендл с языком и нишей — до 400px, на 920px они вдвоём в
   одну строку не встают; поэтому хендл может лечь в две строки (по 18px, внутри
   40px пилюли), ломаясь только на точках-разделителях — куски не рвутся. */
.nf-modal__metarow{
  display:flex;align-items:center;gap:8px 16px;margin-top:4px;min-height:40px;min-width:0;
}
.nf-modal__meta{flex:1 1 0;min-width:0;font:600 13px/1.4 var(--ff);color:var(--tx2)}
.nf-modal__meta > *{white-space:nowrap}

/* ── Две главные пилюли ────────────────────────────────────────────────────
   Обе на ТЁМНОЙ непрозрачной подложке (владелец 16.09.2026: доход был на 16 %
   зелёного и на светлой шапке пропадал). */
.nf-modal__pills{
  display:flex;align-items:center;gap:12px;flex:none;margin-left:auto;
}
/* Узкая карточка (телефон, половина экрана): блок имени уходит под аватар на всю
   ширину, пилюли — под хендл, от левого края. По ширине карточки, а не окна:
   карточка сама решает, тесно ли ей. */
@container (max-width:760px){
  .nf-modal__ident{flex-basis:100%;padding-top:0}
  .nf-modal__metarow{flex-wrap:wrap}
  .nf-modal__pills{flex:1 1 100%;min-width:0;margin-left:0;flex-wrap:wrap;gap:8px}
}
.nf-modal__ratio{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sunk);border-radius:999px;padding:12px 18px;white-space:nowrap;
}
.nf-modal__ratio-num{font:800 15px/1 var(--ff);color:var(--data)}
.nf-modal__ratio-txt{font:600 13px/1 var(--ff);color:var(--tx2)}
.nf-modal__money{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font:700 15px/1 var(--ff);color:var(--pos);background:var(--sunk);
  border-radius:999px;padding:12px 17px;
}
.nf-modal__info{
  width:16px;height:16px;border-radius:99px;border:1px solid var(--pos);
  display:grid;place-items:center;font:800 9.5px/1 var(--ff);cursor:help;
}

/* ── Шесть чисел на утопленной полосе ────────────────────────────────────── */
.nf-modal__stats{
  position:relative;
  /* Ровно шесть колонок, а не auto-fit: при auto-fit число колонок плавало от
     ширины, и стоило сузить окно — полоса ломалась на 5+1, шестая плитка уезжала
     одна во второй ряд, а справа от неё зияла пустота. Ступени ниже переводят её
     в ровные 3×2 и 2×3, а не в рваный ряд.
     Ширина колонки — по содержимому (auto), а не шесть равных долей (юзер-тест
     21.10.2026): в равной доле 132 px «115 дн. назад» (139 px) уходило на две строки,
     хотя рядом «0» и «3 мес» стояли в просторных колонках. Так каждое значение стоит
     в одну строку, пока полоса его вмещает, а остаток ширины делится поровну. */
  display:grid;grid-template-columns:repeat(6,auto);gap:14px;
  align-items:start;
  padding:22px 28px;background:var(--sunk);
}
@media (max-width:900px){
  .nf-modal__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
}
.nf-modal__stat-label{
  display:flex;align-items:center;
  font:800 9px/1 var(--ff);letter-spacing:.08em;color:var(--tx2);
  text-transform:uppercase;margin-bottom:8px;
}
/* Значок «i» в подписи плитки — сейчас только у стажа, где под ним «был перерыв
   N месяцев». Зеркально значку в карточке ниши (nichecard.css). */
.nf-modal__stat-label .nf-i{font-size:12px;cursor:help;margin-left:4px;color:var(--tx2)}
.nf-modal__stat-label .nf-i[hidden]{display:none}
.nf-modal__stat-val{font:600 21px/1 var(--ff)}
.nf-modal__stat-val--strong{font-weight:700}
.nf-modal__stat-val--dim{color:var(--tx2)}
.nf-modal__stat-val--data{color:var(--data)}   /* дни в базе — всегда синий, без градаций */

/* ── График ───────────────────────────────────────────────────────────────── */
.nf-modal__grow{padding:24px 28px 26px;position:relative}
.nf-modal__h3{font:700 15px/1 var(--ff);letter-spacing:-.3px}

/* Справа у графика — поле под числа сетки (как ось значений в YouTube Studio). */
.nf-modal__chart-box{--nf-grid-gutter:56px;padding-right:var(--nf-grid-gutter)}
.nf-modal__chart{width:100%;height:210px;display:block;position:relative}
/* right — ширина поля под числа: линии кончаются там, где кончается кривая. */
.nf-modal__chart-grid{position:absolute;left:0;right:var(--nf-grid-gutter);top:0;height:210px;
  pointer-events:none}
.nf-modal__chart-gridline{position:absolute;left:0;right:0;height:0;
  border-top:1px solid rgba(255,255,255,.08)}
.nf-modal__chart-gridval{position:absolute;right:calc(-1 * var(--nf-grid-gutter) + 8px);
  top:-6px;font:600 11px/1 var(--ff);color:var(--tx2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* Подписи дат: app.js ставит каждой left в долях ширины кривой — ровно под её
   точкой (раскладка поровну сдвигала их на сутки от точек). Ширина строки —
   ширина кривой: справа то же поле под числа сетки. */
.nf-modal__chart-axis{
  position:relative;height:11px;margin-top:10px;margin-right:var(--nf-grid-gutter,56px);
  font:600 11px/1 var(--ff);color:var(--tx2);
}

.nf-modal__lowdata{
  background:var(--sunk);border-radius:var(--r);padding:34px 24px;text-align:center;
}
.nf-modal__lowdata-head{
  display:inline-flex;align-items:center;gap:10px;
  font:700 13.5px/1 var(--ff);color:var(--warn);margin-bottom:10px;
}
.nf-modal__lowdata-mark{
  width:18px;height:18px;border-radius:99px;background:var(--warn);
  color:var(--warnInk);display:grid;place-items:center;font:800 11px/1 var(--ff);
}
.nf-modal__lowdata-txt{
  font:600 13px/1.65 var(--ff);color:var(--tx2);max-width:440px;margin:0 auto;
}

/* ── Топ-3 шортса ────────────────────────────────────────────────────────── */
/* Своим утопленным блоком, как «Формат» (владелец 15.09.2026: «отделить фоном»). */
.nf-modal__tops{margin:0 28px 14px;padding:18px 20px 20px;background:var(--sunk);
  border-radius:var(--r)}
.nf-modal__tops-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.nf-modal__tops-note{font:600 11.5px/1 var(--ff);color:var(--tx2)}
/* position:relative — под пейволльную шторку, она кладётся inset:0 на всю тройку */
.nf-modal__tops-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;
}
.nf-modal__thumb{
  aspect-ratio:9/16;border-radius:16px;
  background:repeating-linear-gradient(135deg,var(--surf2) 0 9px,var(--bg) 9px 18px);
  display:grid;place-items:end start;padding:11px;margin-bottom:10px;position:relative;
}
.nf-modal__thumb-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}
.nf-modal__thumb-views{
  font:700 12px/1 var(--ff);color:var(--tx);
  background:var(--nf-scrim);border-radius:8px;padding:5px 8px;
}
/* Дата — плашкой в верхнем углу кадра, как просмотры в нижнем; под кадром —
   кнопка «Открыть» во всю ширину (владелец 15.09.2026). */
.nf-modal__thumb-date{position:absolute;top:11px;left:11px;
  font:600 11px/1 var(--ff);color:var(--tx2);background:var(--nf-scrim);
  border-radius:8px;padding:5px 8px}
.nf-modal__thumb-btn{display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;border:1px solid var(--bd);background:var(--sunk);color:var(--tx);
  border-radius:999px;padding:10px 12px;font:600 12.5px/1 var(--ff);
  text-decoration:none;transition:background .14s,border-color .14s}
.nf-modal__thumb-btn:hover{background:var(--surf2);border-color:var(--bdS);color:var(--tx);
  text-decoration:none}
.nf-modal__thumb-btn .nf-i{font-size:18px;color:var(--tx2);font-variation-settings:'FILL' 1}
.nf-modal__thumb-btn:hover .nf-i{color:var(--tx)}
.nf-modal__lock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border-radius:16px;
}
.nf-modal__lock-plate{
  background:var(--surf2);border:1px solid var(--bdS);border-radius:999px;
  padding:12px 18px;font:700 13px/1 var(--ff);align-self:center;
}

/* ── Формат ──────────────────────────────────────────────────────────────── */
/* Своим блоком, отделённым от шортсов (владелец 15.09.2026): утопленная плашка
   с полями, а не абзац под плитками. */
.nf-modal__fmt{margin:2px 28px 26px;padding:18px 20px;background:var(--sunk);
  border-radius:var(--r)}
.nf-modal__eyebrow{
  font:800 9.5px/1 var(--ff);letter-spacing:.1em;color:var(--tx2);
  text-transform:uppercase;margin-bottom:10px;
}
.nf-modal__fmt-txt{font:600 16px/1.5 var(--ff)}
.nf-modal__fmt-empty{font:600 13px/1.6 var(--ff);color:var(--tx2)}

/* ── Подвал ──────────────────────────────────────────────────────────────── */
.nf-modal__foot{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:20px 28px 26px;border-top:1px solid var(--bd);
}
.nf-modal__btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bdS);background:transparent;color:var(--tx);
  border-radius:999px;padding:12px 18px;font:700 12.5px/1 var(--ff);
  cursor:pointer;text-decoration:none;
}
.nf-modal__btn:hover{background:var(--surf2);color:var(--tx);filter:none;text-decoration:none}
.nf-modal__btn--icon{font-weight:600}
/* Иконка «В избранное» — 19px, как в эталоне; наследовала 12,5px от подписи кнопки. */
.nf-modal__btn--icon .nf-i{font-size:19px}
/* Предложение доступа под замком — первой строкой подвала, во всю ширину (владелец
   03.10.2026, вечер: «Похожие каналы» и «Открыть доступ» ломали вёрстку — кнопка уезжала
   на свою строку одна). Раньше блок стоял пятым в ряду после четырёх кнопок с
   margin-left:auto, и места ему не хватало ни на одной ширине. Теперь он order:-1 и
   flex-basis 100%: перенос под ним — задуманный, кнопки действий идут второй строкой. */
.nf-modal__pw{order:-1;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 18px;padding:12px 12px 12px 16px;border-radius:16px;
  background:var(--sunk);border:1px solid var(--bdS)}
.nf-modal__pw-note{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0;
  font:600 13px/1.4 var(--ff);color:var(--tx)}
.nf-modal__pw-note .nf-i{flex:none;font-size:18px;color:var(--tx2)}
.nf-modal__cta{
  flex:none;border:0;background:var(--cta);color:var(--ctaTx);border-radius:999px;
  padding:12px 20px;font:700 12.5px/1 var(--ff);cursor:pointer;
}
.nf-modal__cta:hover{filter:brightness(1.08)}
/* Канал открыт купленным выпуском (nf-modal--chopen ставит app.js по ответу сервера) —
   плашки и замка на YouTube нет, ссылка настоящая; закрыт — наоборот. */
.nf-modal--chopen .nf-modal__pw,
.nf-modal--chopen .nf-modal__yt-lock,
.nf-modal--locked:not(.nf-modal--chopen) .nf-modal__yt{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   ОВЕРЛЕЙ 2 — командная палитра ⌘K (спецификация 13, прототип 1101–1141)
   ═══════════════════════════════════════════════════════════════════════════ */

/* z-index 210 — самый верх: палитра вызывается из любого состояния,
   в том числе поверх открытой карточки канала (200). */
.nf-cmd{
  display:none;position:fixed;inset:0;z-index:210;
  background:rgba(0,0,0,.62);
  align-items:flex-start;justify-content:center;
  padding:90px 20px 40px;
}
.nf-cmd--open{display:flex}

.nf-cmd__panel{
  width:100%;max-width:760px;background:var(--surf);border:1px solid var(--bdS);
  border-radius:20px;overflow:hidden;box-shadow:var(--nf-shadow-modal);
  animation:nfRise .18s ease-out;
}
.nf-cmd__head{
  display:flex;align-items:center;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--bd);
}
.nf-cmd__head .nf-i{font-size:22px;color:var(--tx2)}
/* поле полностью переопределяет базовый input из tokens.css: оно тут не «поле», а строка шапки */
.nf-cmd__input{
  flex:1;min-width:0;width:auto;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;
  font:400 17px/1 var(--ff);color:var(--tx);
}
.nf-cmd__input::placeholder{color:var(--tx2)}
.nf-cmd__input:focus{border:0}
.nf-cmd__esc{
  font:600 10.5px/1 var(--ff);color:var(--tx2);
  border:1px solid var(--bdS);border-radius:6px;padding:4px 6px;
}

/* 52vh — палитра не должна выталкивать себя за экран на ноутбуке */
/* dvh: палитра открывается с полем ввода, и клавиатура съедает половину
   экрана — 52vh считались бы от большого вьюпорта, вместе с ней. */
.nf-cmd__body{max-height:52vh;max-height:52dvh;overflow:auto;padding:10px}
.nf-cmd__group{
  font:800 9.5px/1 var(--ff);letter-spacing:.11em;color:var(--tx2);
  text-transform:uppercase;padding:18px 14px 10px;
}
.nf-cmd__group--first{padding-top:12px}

.nf-cmd__row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--tx);border-radius:12px;
  padding:13px 14px;cursor:pointer;font:600 14.5px/1 var(--ff);
  text-decoration:none;
}
.nf-cmd__row:hover{background:var(--surf2);color:var(--tx);text-decoration:none;filter:none}
.nf-cmd__row .nf-i{font-size:21px;color:var(--tx2)}
.nf-cmd__name{font-weight:600}
.nf-cmd__hint{
  color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nf-cmd__arrow{margin-left:auto}
.nf-cmd__arrow.nf-i{font-size:19px}
.nf-cmd__count{
  margin-left:auto;font:600 11.5px/1 var(--ff);color:var(--data);
  background:var(--dataSoft);border-radius:999px;padding:5px 9px;
}
/* букву тира красит переменная --tier, её проставляет разметка */
/* Вердикт ниши в палитре — словами, поэтому кегль как у подписи, а не как у буквы. */
.nf-cmd__tier{margin-left:auto;font:700 11.5px/1 var(--ff);color:var(--nf-tier);
  white-space:nowrap;flex:none}
/* Гем-фильтр — единственная зелёная строка палитры: это тот же вход, что зелёная
   кнопка панели поиска, и цвет обязан их связывать (владелец 19.08). */
.nf-cmd__row--gem .nf-i,
.nf-cmd__row--gem .nf-cmd__name{color:var(--gem)}


/* ── Узкий экран ─────────────────────────────────────────────────────────
   В прототипе телефон нарисован отдельным макетом; здесь минимум, чтобы
   карточка на 920px не рвала вёрстку на 390px. Числа десктопа не тронуты. */
@media (max-width:640px){
  .nf-modal{padding:20px 12px}
  .nf-modal__head,.nf-modal__stats,
  .nf-modal__grow,.nf-modal__foot{
    padding-left:18px;padding-right:18px;
  }
  .nf-modal__fmt,.nf-modal__tops{margin-left:18px;margin-right:18px}
  .nf-modal__stats{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .nf-modal__title{font-size:23px}
  /* Шапка ниже, аватар меньше; блок имени и так под аватаром (см. @container). */
  .nf-modal__bg{height:150px}
  .nf-modal__avatar{width:76px;height:76px;font-size:22px}
  .nf-modal__head{margin-top:-28px;gap:12px}
  .nf-cmd{padding:60px 12px 24px}
}


/* ── Правки переноса: то, чего вёрстка ждала, а её не было ────────────────── */

/* Фильтрация командной палитры ⌘K. Скрытая строка не должна ловить фокус. */
.nf-cmd__row[data-hidden="true"],
.nf-cmd__group[data-hidden="true"],
.nf-cmd__empty[data-hidden="true"]{display:none}
.nf-cmd__row.is-cursor{background:var(--surf2);border-radius:12px}
.nf-cmd__empty{
  padding:22px 14px;text-align:center;
  font:600 13px/1.5 var(--ff);color:var(--tx2);
}

/* Ответ кнопке, под которой данных ещё нет. Раньше такие кнопки молчали, и
   человек не мог отличить «не сделано» от «сломалось». */
.nf-soon{
  position:fixed;z-index:300;max-width:250px;
  background:var(--surf);border:1px solid var(--bdS);border-radius:12px;
  padding:9px 12px;box-shadow:var(--nf-shadow-pop);
  font:600 12px/1.45 var(--ff);color:var(--tx2);
  animation:nfRise .14s ease-out;pointer-events:none;
}

/* Кружок закладки на превью: в эталоне подложка .6, у нас была .72 — на светлом
   кадре кнопка выглядела темнее макета. */
.nf-ch__bm{background:rgba(0,0,0,.6)}

/* Топ-3 шортса: превью приходит 16:9 (hqdefault), рамка держит 9:16 — кроп по
   центру делает background-size/position, без второй картинки и без <img>. */
a.nf-modal__thumb{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  text-decoration:none;cursor:pointer;
}
a.nf-modal__thumb:hover{filter:brightness(1.08)}
.nf-modal__tops-empty{
  grid-column:1/-1;padding:18px 4px;
  font:600 13px/1.5 var(--ff);color:var(--tx2);
}

/* Колонка спарклайна, пока истории просмотров нет: место держим, кривую не рисуем. */

/* Пустая выдача и ошибка: раньше первая была голой дырой, вторая — текстом без
   оформления, который к тому же не убирался после удачного запроса. */
/* Бесплатный искал по закрытому полю (название, подписчики) — выдача только из открытых
   ему каналов (main._поиск_под_замком), и строка над ней говорит это словами (_cards.html).
   Плашка вместо выдачи под замком (до 17.10.2026) снята вместе с замком на поиске. */
.nf-results__only{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  padding:12px 16px;background:var(--surf);border:1px solid var(--bd);
  border-radius:var(--r);font:600 13px/1.45 var(--ff);color:var(--tx2)}
.nf-results__only > .nf-i{font-size:18px;flex:none}
.nf-results__only-go{margin-left:auto;flex:none;border:0;border-radius:999px;
  background:var(--cta);color:var(--ctaTx);padding:9px 16px;
  font:700 12.5px/1 var(--ff);cursor:pointer}
.nf-results__only-go:hover{filter:brightness(1.08)}
@media (max-width:640px){.nf-results__only{flex-wrap:wrap}}
.nf-results__empty{
  padding:48px 24px;text-align:center;max-width:520px;margin:0 auto;
  font:400 14px/1.6 var(--ff);color:var(--tx2);
}
.nf-results__error{
  margin:0 0 16px;padding:13px 16px;border-radius:14px;
  background:var(--ctaSoft,rgba(255,0,51,.12));
  border:1px solid var(--cta);
  font:500 13px/1.45 var(--ff);color:var(--tx);
}

/* Пока карточка канала грузится, старые цифры не показываем. */
.nf-modal__card[data-loading="true"] .nf-modal__stats,
.nf-modal__card[data-loading="true"] .nf-modal__pills,
.nf-modal__card[data-loading="true"] .nf-modal__tops-grid{opacity:.25}


/* ── Витрина: превью, закладка, подписка ─────────────────────────────────── */

/* Кадр шортса под рамкой карточки. Приходит 16:9 — кроп до 9:16 по центру делает
   background-size:cover, поэтому второй картинки и обрезки на сервере не нужно. */
/* Кадр шортса. <img>, а не фоновая картинка: у фоновой нет события ошибки, и
   подменить её запасным адресом нечем — не загрузилась, и осталось пустое место.
   object-fit:cover даёт тот же кроп, что давал background-size:cover. */
.nf-ch__shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}

/* ── Аватар канала ──────────────────────────────────────────────────────────
   Один слой поверх буквы, общий для всех четырёх мест, где стоит аватар.
   Размер и скругление берём у той рамки, в которую он вложен: у строки списка
   они одни, у шапки карточки другие, а правило здесь одно. */
.nf-ava{position:relative;overflow:hidden}
.nf-ava__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block}
/* Кружок-ссылка на YouTube (_bits.html, `ссылка`): голубое кольцо и лёгкий рост — как у
   авторов на карточках ниш (.nf-niche__author), чтобы «наведи — откроется канал» читалось
   одинаково на всех экранах (владелец 15.10.2026: на главной аватар не подсвечивался). */
a.nf-ava{text-decoration:none;transition:box-shadow .14s ease,transform .14s ease}
a.nf-ava:hover{box-shadow:0 0 0 2px var(--data);transform:scale(1.14)}
@media (prefers-reduced-motion: reduce){
  a.nf-ava{transition:box-shadow .14s ease}
  a.nf-ava:hover{transform:none}
}

/* Закладка «в избранное». Жёлтый — цвет отметки во всём интерфейсе (--warn), тот же,
   что у закладки ниши. При наведении наливается, в нажатом состоянии горит. */
.nf-ch__bm{transition:color .12s ease, background-color .12s ease}
.nf-ch__bm:hover{color:var(--warn);background:rgba(0,0,0,.78)}
.nf-ch__bm[aria-pressed="true"]{color:var(--warn)}
.nf-ch__bm[aria-pressed="true"]:hover{color:var(--warn);background:rgba(0,0,0,.78)}
.nf-ch__bm:disabled{opacity:.5;cursor:progress}
.nf-card__bm:hover,.nf-chcard__bm:hover,.nf-chrow__btn--save:hover{color:var(--warn)}
.nf-card__bm[aria-pressed="true"],.nf-chcard__bm[aria-pressed="true"]{color:var(--warn)}

/* «Отключить» подписку: при наведении наливается красным — действие снимающее. */
.nf-subs__stop{transition:color .12s ease, border-color .12s ease, background-color .12s ease}
.nf-subs__stop:hover{
  color:var(--cta);border-color:rgba(255,0,51,.65);background:rgba(255,0,51,.1);
}

/* Пока лента пересортировывается, гасим её — но не убираем: прыжок высоты на
   полсекунды хуже, чем приглушённый список. */
.nf-rise[data-busy="true"]{opacity:.45;pointer-events:none;transition:opacity .12s ease}

/* Имя канала — ссылка, но выглядит как заголовок: подчёркивание под именем в
   карточке читается как опечатка. Цвет меняем только на наведении. */
a.nf-ch__name,a.nf-riserow__name{color:inherit;text-decoration:none}
a.nf-ch__name:hover,a.nf-riserow__name:hover{color:var(--data)}

.nf-subs__empty{font:600 13px/1.5 var(--ff);color:var(--tx2);max-width:640px}


/* Бейджи на превью: четыре чипа (Shorts, язык, деньги, просмотры) не помещались в
   строку и переносились — деньги улетали вверх, просмотры вниз. Владелец просил
   сохранить все четыре, поэтому ужимаем сами чипы, а не выкидываем их:
   кегль 11 → 10, паддинги и промежуток уже, и запрет переноса на самой строке.
   Слева пара «Shorts · язык», справа пара «деньги · просмотры» — flex их разводит. */
.nf-ch__badges{flex-wrap:nowrap;gap:5px}
.nf-ch__badge{
  font-size:10px;padding:4px 6px;border-radius:7px;
  white-space:nowrap;flex:none;min-width:0;
}
/* Деньгам и просмотрам разрешаем сжаться и обрезаться многоточием: если карточка
   совсем узкая, лучше «$810–1 6…», чем вторая строка. */
.nf-ch__badge--money,.nf-ch__badge--right{
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;
}
/* Просмотры — голубые, как «дни в базе» (владелец 15.09.2026): на карточках витрины
   и ниши и в строках витрины (в списке ниши колонки просмотров нет). */
.nf-ch__badge--right,.nf-riserow__views{color:var(--data)}


/* Кнопка сортировки в поиске: текст стоял левее середины — из-за шеврона справа,
   который забирал место, а само поле выравнивалось по началу. Раскладываем как
   «текст по центру, шеврон прижат к краю». */
.nf-sort__btn{justify-content:center;position:relative;padding-right:34px}
.nf-sort__btn .nf-i{position:absolute;right:12px;top:50%;transform:translateY(-50%)}


/* ── Пометки «здесь не доделано» ───────────────────────────────────────────
   Видны только нам (NF_DRAFT_NOTES), поэтому и выглядят нарочито служебно:
   пунктир, моноширинный, приглушённый янтарь. Спутать с содержимым продукта
   невозможно — и это единственное требование к их виду. */
.nf-todo{display:inline-flex;align-items:center;gap:6px;
  border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent);
  border-radius:8px;padding:5px 8px;
  font:600 10.5px/1.25 var(--mono);color:color-mix(in srgb,var(--warn) 78%,var(--tx2));
  background:color-mix(in srgb,var(--warn) 7%,transparent);
  white-space:normal;text-align:left}
.nf-todo__i{font-size:14px;flex:none;opacity:.85}

/* ── Страницы ниш ─────────────────────────────────────────────────────────── */

/* Карточка ниши кликабельна — снимаем оформление ссылки и возвращаем отклик.
   Тег из селектора убран НАМЕРЕННО: в карусели витрины карточка осталась
   ссылкой (<a>), а на странице «Ниши» и в избранном стала div[role="button"] —
   внутри неё живут ссылки на авторов, а вложенный <a> парсер закрывает наружным
   тегом, и карточка теряет всё содержимое, кроме цветной полосы. С `a.` в
   селекторе новая карточка молча теряла бы отклик на наведение. */
.nf-niche--link{text-decoration:none;color:inherit;display:block;cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease}
.nf-niche--link:hover{text-decoration:none}

/* Отклик на наведение даёт КАРТОЧКА, а не подпись внутри неё.
   Раньше на ховере перекрашивалось только название — кликают-то по всей карточке,
   и она на курсор никак не отзывалась.
   Обводку берём цветом самой ниши (--nf-tier, тот же, что в полоске сверху и в
   бейдже «супер гем»/«топ ниша»): серая одинаково гасила бы S и B, а вся карусель
   на том и держится, что карточки разного достоинства выглядят по-разному.
   Тень отдельной строкой от обводки: обводка — цвет ниши, тень — только подъём. */
/* Двойной класс не для красоты: ниже по файлу стоит общее голубое свечение
   карточек продукта (`.nf-niche:hover`, «Три состояния тремя цветами»), и весит
   оно ровно столько же, сколько одиночный `.nf-niche--link:hover`, — то есть при
   равном весе побеждает то, что ниже, и обводка ниши стала бы голубой вместо
   цвета тира. Раньше вес добирался тегом (`a.nf-niche--link`), но карточка
   перестала быть ссылкой. */
.nf-niche.nf-niche--link:hover{
  background:var(--surf2);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.45),
             0 0 0 1px color-mix(in srgb,var(--nf-tier,var(--bdS)) 75%,transparent),
             0 0 26px -6px color-mix(in srgb,var(--nf-tier,var(--bdS)) 55%,transparent);
}
/* Закладку подъём не трогает — она своя кнопка со своим ховером. */
.nf-niche--link:hover .nf-niche__bm{color:var(--tx)}
.nf-niche--link:hover .nf-niche__bm[aria-pressed="true"]{color:var(--warn)}
/* А вот наведение на САМУ закладку красит её жёлтым — как у всех остальных
   закладок продукта. Правило выше весит больше, чем `.nf-niche__bm:hover`
   (три класса против двух), и без этой строки перебивало его белым: курсор
   стоит на закладке, но он же стоит и на карточке. Из-за этого закладка ниш
   была единственной из шести, которая на наведение не отзывалась вовсе. */
.nf-niche--link:hover .nf-niche__bm:hover{color:var(--warn)}

/* Кому движение мешает — остаётся подсветка без подъёма. */
@media (prefers-reduced-motion: reduce){
  .nf-niche--link{transition:none}
  .nf-niche--link:hover{transform:none}
}

/* «← На главную» над заголовком страницы ниш. Вид даёт .nf-navbtn (одна кнопка
   навигации на весь продукт); здесь только место в потоке. */
.nf-back{margin-bottom:18px}

/* ═══ Страница одной ниши ══════════════════════════════════════════════════
   Перенос из nichecard/project/«Страница ниши.dc.html» (вариант «Обложка ниши»)
   по «Страница ниши - спецификация.md». Все числа — дословно из прототипа.
   Цвет тира приходит переменными --nf-tier / --nf-tier-ink с корня секции. */

.nf-np{padding:26px 34px 70px;display:flex;flex-direction:column;gap:22px}

/* ── Крошки ── дерево «Главная / Все ниши / имя»: ссылки — пилюли .nf-navbtn,
   как «Все ниши» на главной (владелец 14.09.2026: один стиль у всех кнопок
   между экранами). Отдельной стрелки «назад» больше нет — она на «Главная». */
.nf-np__crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:600 12.5px/1 var(--ff);color:var(--tx2)}
.nf-np__crumb-sep{color:var(--tx2);opacity:.6}
/* Текущая ниша — «нажатая» пилюля: светлее, с сильной рамкой, не ссылка. */
.nf-navbtn--here,.nf-navbtn--here:hover{background:var(--surf2);
  border-color:var(--bdS);cursor:default}

/* ── Обложка: цветная полоса, тело, полоса шести цифр ── */
/* Обложка — контейнер измерения для полосы цифр ниже (юзер-тест 21.10.2026): сколько цифр
   встаёт в ряд, решает её собственная ширина, а не окно — рядом бывает развёрнутая панель. */
.nf-np__cover{background:var(--surf);border-radius:var(--r);overflow:hidden;
  container:nf-npcover / inline-size}
.nf-np__strip{height:4px;background:var(--nf-tier,var(--surf2))}
.nf-np__cover-body{padding:26px 28px;display:flex;gap:26px;
  align-items:flex-start;flex-wrap:wrap}
/* Буква тира — один вид везде, см. .nf-niche__mark в nichecard.css. Кольцо здесь
   толще: квадрат 78 px, полуторапиксельное на нём выглядело бы царапиной. */
.nf-np__badge{width:78px;height:78px;flex:none;border-radius:16px;
  display:grid;place-items:center;font:800 40px/1 var(--ff);
  background:color-mix(in srgb,var(--nf-tier,var(--tx2)) 18%,transparent);
  color:var(--nf-tier,var(--tx));
  box-shadow:inset 0 0 0 2px var(--nf-tier,var(--bdS))}
.nf-np__title{flex:1;min-width:340px}
.nf-np__name{margin:0 0 9px;font:800 40px/1.05 var(--ff);letter-spacing:-1.6px}
/* Строка под названием — чипы, а не серая строка (владелец 14.09.2026: «серая
   каша в одном регистре, не виднеется»). Вердикт — чип цветом тира, той же
   породы, что квадрат с буквой рядом; оценка — чип на утопленном фоне, где само
   число белое и крупнее расшифровки. Между чипами зазор, точка-разделитель снята. */
.nf-np__scoreline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px}
.nf-np__verdict{display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:999px;font:700 12px/1 var(--ff);color:var(--nf-tier,var(--tx));
  background:color-mix(in srgb,var(--nf-tier,var(--tx2)) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nf-tier,var(--bdS)) 55%,transparent)}
/* min-height, а не height, и без nowrap: на телефоне «по сильной четверти
   каналов» переносится внутри чипа на вторую строку, а не вылезает за обложку. */
.nf-np__score{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 6px;
  min-height:26px;padding:4px 11px;border-radius:999px;background:var(--sunk);
  border:1px solid var(--bd);font:600 12px/1.3 var(--ff);color:var(--tx2)}
.nf-np__score b{font-weight:800;font-size:13px;color:var(--tx)}
.nf-np__info{font-size:17px;color:var(--tx2);cursor:help}
/* Описание — белым и крупнее подписи, это текст для чтения, а не подпись к цифре. */
.nf-np__desc{font:500 15px/1.6 var(--ff);color:var(--tx);max-width:640px}

/* ── Действия (правая колонка). Две кнопки в ряд — «Подписаться на новые каналы»
   и закладка. «Взять в работу» снята 14.09.2026: статуса на сервере нет,
   а по смыслу это то же избранное. Красного CTA тоже нет: кнопка подписки —
   та же пилюля .nf-navbtn, что и навигация (владелец: один стиль у всех кнопок).
   Состояние подписки живёт на aria-pressed кнопки: включено — зелёная мягкая
   заливка и подпись «Уведомления включены». ── */
/* Ширина колонки — по ряду кнопок, без потолка (юзер-тест 21.10.2026): потолок 250 px остался
   от прототипа, а ряд «Подписаться на новые каналы» + закладка — около 290 px. Ряд, прижатый
   вправо, вылезал из колонки ВЛЕВО, и на планшете, где колонка уходит под заголовок, начало
   кнопки срезал край обложки. На телефоне переносится подпись кнопки (ниже, ≤640 px). */
.nf-np__acts{display:flex;flex-direction:column;gap:9px;flex:none;
  align-items:flex-end;max-width:100%}
.nf-np__acts-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;max-width:100%}
.nf-np__sub .nf-i{font-size:18px}
.nf-np__sub-off,.nf-np__sub-on{display:inline-flex;align-items:center;gap:8px}
.nf-np__sub .nf-np__sub-on{display:none}
.nf-np__sub[aria-pressed="true"]{background:var(--posSoft);color:var(--pos);
  border-color:color-mix(in srgb,var(--pos) 40%,transparent)}
/* Включённая тоже отзывается на наведение (владелец 14.09.2026): заливка и рамка
   заметно гуще — как у любой пилюли, только в своём зелёном, чтобы было видно,
   что кнопка живая и её можно нажать ещё раз. */
.nf-np__sub[aria-pressed="true"]:hover{color:var(--pos);
  background:color-mix(in srgb,var(--pos) 28%,transparent);
  border-color:color-mix(in srgb,var(--pos) 75%,transparent)}
.nf-np__sub[aria-pressed="true"] .nf-np__sub-off{display:none}
.nf-np__sub[aria-pressed="true"] .nf-np__sub-on{display:inline-flex}
/* Закладка обложки — та же кнопка, что на карточках (см. «ЗАКЛАДКА — ОДНА
   КНОПКА НА ВЕСЬ ПРОДУКТ»): кружок на утопленной подложке, глиф жёлтый на
   наведении и залитый в избранном. Здесь только размер — под высоту пилюли рядом. */
.nf-np__acts .nf-np__bmk{width:38px;height:38px}

/* ── Полоса шести цифр. Ячейка — колонка с justify-content:space-between и
   min-height 94px: подпись прижата к верху, значение к низу, и все шесть цифр
   стоят в один ряд, сколько бы строк ни заняла подпись. border-left у всех
   шести, включая первую, — полоса читается одной решёткой. ── */
.nf-np__stats{background:var(--sunk);display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.nf-np__stat{padding:16px 20px;border-left:1px solid var(--bd);min-height:94px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.nf-np__stat-head{display:flex;align-items:flex-start;gap:6px}
.nf-np__stat-label{font:800 9px/1.3 var(--ff);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2)}
.nf-np__stat-info{font-size:14px;line-height:1.3;color:var(--tx2);cursor:help;flex:none}
.nf-np__stat-val{font:700 21px/1 var(--ff);letter-spacing:-.4px;
  white-space:nowrap;color:var(--tx)}
.nf-np__stat-val--pos{color:var(--pos)}
.nf-np__stat-val--tier{color:var(--nf-tier,var(--tx))}
/* Месяц ещё не накоплен (viewdata._месяц_ниши) — на месте цифры фраза, а фразе
   нужен свой кегль и перенос: у значения стоит nowrap и 21 px. */
.nf-np__stat-val--wait{font:600 11px/1.35 var(--ff);letter-spacing:0;
  color:var(--tx2);white-space:normal}
/* Шесть в ряд — только пока каждой ячейке хватает места на самое длинное значение
   («$158–184 тыс.» с полями — около 190 px; юзер-тест 21.10.2026). Уже — ровная решётка
   3×2, на телефоне 2×3, а не рваный ряд: до этого шесть колонок не сжимались уже своих
   цифр, полоса шла шире обложки, и её край срезал последние цифры (на 768 px «Медиану
   возраста» и «Просмотров ниши за месяц» не было видно вовсе). Ступени — по ширине обложки
   (контейнер выше), во втором ряду — линия сверху: решётка остаётся решёткой. Правила стоят
   ПОСЛЕ основных: вес у них тот же, и выше по файлу они бы проиграли. */
@container nf-npcover (max-width:1139px){
  .nf-np__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nf-np__stat{border-top:1px solid var(--bd)}
}
@container nf-npcover (max-width:599px){
  .nf-np__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nf-np__stat{padding:13px 14px;min-height:80px}
  /* В ячейке 120–150 px вилка дохода целиком не встаёт и в 18 px: значение переносится по
     пробелу («$158–184 / тыс.»), а не срезается краем. Фразу «копим историю» не трогаем. */
  .nf-np__stat-val:not(.nf-np__stat-val--wait){font-size:18px;white-space:normal}
}

/* ── «Ниша разогревается»: вывод, а не название графика ── */
.nf-np__heat{background:var(--surf);border-radius:var(--r);padding:18px 22px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* Пол 300 px — не шире самой плашки (юзер-тест 21.10.2026): на телефоне внутри неё 240–270 px,
   и голые 300 вытаскивали текст «Ниша держится…» за край экрана. */
.nf-np__heat-lead{flex:1;min-width:min(300px,100%)}
.nf-np__heat-title{font:700 15px/1.2 var(--ff);margin-bottom:6px}
.nf-np__heat-text{font:600 12.5px/1.5 var(--ff);color:var(--tx2)}
.nf-np__heat-n{font-weight:700;color:var(--nf-tier,var(--tx))}
.nf-np__heat-n--down{color:var(--tier-a)}
.nf-np__heat-bars{display:flex;align-items:flex-end;gap:5px;height:58px;flex:none}
.nf-np__heat-bars span{width:14px;border-radius:3px 3px 0 0}
.nf-np__heat-cap{font:800 9px/1.3 var(--ff);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2);flex:none}

/* ── Заголовок и капсула сортировки. Счётчик — тем же кеглем, что заголовок,
   но цветом tx2: читается частью заголовка, а не метрикой. ── */
.nf-np__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
/* Подпись с числом — одним блоком (17.10.2026): его место держит app.js, и поле поиска
   справа не ездит, когда «Каналы ниши 285» на время поиска становится «Найдено 3». */
.nf-np__total{display:flex;align-items:center;gap:12px;flex:none}
.nf-np__h2{margin:0;font:700 25px/1.2 var(--ff);letter-spacing:-.7px}
.nf-np__count{font:700 25px/1.2 var(--ff);letter-spacing:-.7px;color:var(--tx2)}
/* Активный вид — белой пилюлей, как в прототипе страницы (в поиске он синий:
   там пилюля соседствует с числами, здесь — с сортировкой). */
.nf-np .nf-vbtn[aria-pressed="true"]{background:var(--tx);color:var(--bg)}
.nf-np .nf-vbtn[aria-pressed="true"]:hover{background:var(--tx);color:var(--bg);
  filter:brightness(.9)}

/* ── Каналы: переключение сетка/список одним data-view на контейнере ── */
.nf-np__feed[data-view="list"] .nf-np__grid{display:none}
.nf-np__feed[data-view="grid"] .nf-np__listwrap{display:none}

/* Те же minmax и зазор, что у .nf-ch-grid на главной: карточка одна — и сетка одна. */
.nf-np__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:22px}
/* Каналов меньше четырёх — карточки не растягиваются во всю ширину. */
.nf-np__grid--few{grid-template-columns:repeat(auto-fill,minmax(330px,360px))}
/* Карточка канала здесь — ТА ЖЕ .nf-ch, что «Каналы на взлёте» на главной
   (владелец 14.09.2026: один стиль у всех карточек). Своя копия с классами
   .nf-np__* снята: за месяц она разошлась с главной (чипы поверх скрима,
   «миллионники» под именем, appearance-анимация с fill-mode:both, глушившая
   подъём на наведении). Ниже — только два отличия по смыслу страницы. */
/* Две строки подписи: имя + «дни в базе», под ними подписчики + оценка вирусности
   справа, под днями (владелец 14.09.2026). Аватар 44px — вровень двум строкам,
   текст стоит по центру кружка. */
.nf-ch__ava--lg{width:44px;height:44px;font-size:16px}
.nf-ch--niche .nf-ch__meta{align-items:center}
.nf-ch__row--sub{margin-top:5px;align-items:center}
/* Вместо ниши под именем — подписчики: число белым, слово серым, значок группы
   перед числом. Не «тупо серым» (владелец 14.09.2026). */
.nf-ch__subs{display:flex;align-items:center;gap:5px;min-width:0;
  font:600 12.5px/1.3 var(--ff);color:var(--tx2)}
.nf-ch__subs .nf-i{font-size:15px;color:var(--tx2)}
.nf-ch__subs b{font-weight:700;color:var(--tx);white-space:nowrap}
/* Узкая карточка (телефон до 420 px): «80,8 тыс. подписчиков» и «10 из 10» в строку не встают
   и наезжали друг на друга (юзер-тест 21.10.2026) — слово уходит, значок группы и подсказка
   «подписчиков» у числа остаются. */
@media (max-width:420px){.nf-ch__subs-w{display:none}}
/* «N из 10» — чип цветом оценки, прижат вправо, как «дни в базе» строкой выше. */
.nf-ch__grade{margin-left:auto;flex:none;font:800 10px/1 var(--ff);
  color:var(--nf-vg,var(--tx));
  background:color-mix(in srgb,var(--nf-vg,var(--tx2)) 16%,transparent);
  border-radius:6px;padding:4px 6px;white-space:nowrap;cursor:help}
/* Главная: ниша слева (до двух строк), оценка — справа, под «днями в базе»
   (владелец 03.10.2026: оценку вернуть на главную). */
.nf-ch__row--niche{margin-top:4px;align-items:flex-start}
.nf-ch__row--niche .nf-ch__niche{margin-top:0;flex:0 1 auto}
.nf-ch__row--niche .nf-ch__grade{margin-top:1px}

/* ── Вид «список». Шапка и строки — одна сетка колонок; min-width на обеих,
   поэтому ниже ~1150px контейнер скроллится вбок целиком, и колонки не
   прячутся. У имени пол 220px — без него список сжимается до «L…». ── */
/* Колонки тянутся, а не стоят фиксированными: раньше сумма фиксированных ширин плюс
   min-width:1000px заставляла горизонтальный скролл почти всегда, и правый столбец
   («$ / мес») уезжал за край — на скрине это читалось как обрезанная таблица. */
.nf-np__listwrap{--nf-np-cols:minmax(200px,1.7fr) minmax(84px,.7fr) minmax(84px,.8fr)
  minmax(84px,.8fr) minmax(96px,.9fr) minmax(76px,.7fr) minmax(96px,1fr);
  display:flex;flex-direction:column;overflow-x:auto}
.nf-np__lhead{display:grid;grid-template-columns:var(--nf-np-cols);gap:14px;
  min-width:820px;padding:0 20px 12px;font:800 9.5px/1.3 var(--ff);
  letter-spacing:.1em;color:var(--tx);text-transform:uppercase}
.nf-np__r{text-align:right}
.nf-np__lrows{display:flex;flex-direction:column;gap:8px}
.nf-np__lrow{display:grid;grid-template-columns:var(--nf-np-cols);gap:14px;
  min-width:820px;align-items:center;background:var(--surf);
  border-radius:var(--r);padding:12px 20px;cursor:pointer}
.nf-np__lrow:hover{background:var(--surf2)}
/* Топ-3 в СПИСКЕ — узкой полосой слева, а не огненной обводкой вокруг всей строки.
   Обводка рисовалась поверх краёв соседних строк и на нише из трёх каналов
   подсвечивала разом все три: экран выглядел сломанным (скрин владельца 18.08).
   В сетке карточек обводка остаётся — там она обрамляет отдельную карточку.

   Внутренняя тень, а не псевдоэлемент. Псевдоэлемент шириной 3 px не может нести
   радиус 18 px: браузер ужимает все его радиусы в шесть раз, полоса вырождается в
   «линзу» и вдобавок висит рядом со строкой — фон строки у скруглённых концов
   уходит вправо, и между ними зияет до 15 px (скрин владельца 19.08). Inset-тень
   обрезается собственным border-radius строки, то есть полоса физически становится
   её левым краем: ни зазора, ни линзы. У краёв она повторяет изгиб строки — это не
   дефект, а форма самой карточки; ровной во всю высоту полоса станет, только если
   у топ-3 срезать левое скругление, и это отдельное решение владельца. */
.nf-np__lrow--fire{box-shadow:inset 3px 0 0 var(--nf-fire-bar)}
.nf-np__lid{display:flex;align-items:center;gap:11px;min-width:0}
.nf-np__lava{width:36px;height:36px;flex:none;border-radius:99px;
  background:var(--surf2);display:grid;place-items:center;
  font:700 13.5px/1 var(--ff);color:var(--tx2)}
.nf-np__lwho{min-width:0}
.nf-np__lname{font:700 14px/1.25 var(--ff);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nf-np__lhandle{display:block;font:600 11.5px/1.3 var(--ff);color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.nf-np__lhandle:hover{color:var(--tx)}
.nf-np__lratio{font:700 14px/1 var(--ff);color:var(--data);text-align:right}
.nf-np__lnum{font:600 13.5px/1 var(--ff);text-align:right}
/* По правому краю, как медиана и подписчики рядом: число, прижатое к левому краю
   колонки, липло к медиане (скрин владельца 14.09.2026). */
.nf-np__ltrend{font:600 13px/1 var(--ff);cursor:help;white-space:nowrap;text-align:right}
.nf-np__lfound{font:600 13px/1 var(--ff);color:var(--data);text-align:right}
.nf-np__lmoney{font:700 13px/1 var(--ff);color:var(--pos);text-align:right;
  white-space:nowrap}

/* ── Ниша без каналов ── */
.nf-np__empty{background:var(--surf);border-radius:var(--r);
  padding:64px 24px;text-align:center}
.nf-np__empty-i{display:grid;place-items:center;width:52px;height:52px;
  margin:0 auto 18px;border-radius:99px;background:var(--surf2);
  color:var(--tx2);font-size:26px}
.nf-np__empty-t{font:700 19px/1.3 var(--ff);letter-spacing:-.4px;margin-bottom:9px}
.nf-np__empty-s{font:600 13.5px/1.65 var(--ff);color:var(--tx2);
  max-width:440px;margin:0 auto 22px}
.nf-np__sub--solo{padding:0 24px}

/* Узкий экран: обложка переносится сама (flex-wrap), полосу цифр раскладывают ступени по
   ширине обложки (выше), секциям достаточно ужать поля. */
@media (max-width:640px){
  .nf-np{padding:20px 16px 56px}
  /* Телефон (юзер-тест 21.10.2026): квадрат 78 px и название 40 px оставляли заголовку
     120–150 px, и «Руками / в / кадре» шло по слову в строку. */
  .nf-np__cover-body{padding:20px 18px;gap:16px}
  .nf-np__badge{width:56px;height:56px;border-radius:13px;font-size:28px}
  .nf-np__name{font-size:28px;letter-spacing:-1px}
  .nf-np__title{min-width:0}
  .nf-np__acts{max-width:none;width:100%;align-items:flex-start}
  /* «Подписаться на новые каналы» шире строки телефона: подпись переносится внутри кнопки,
     закладка остаётся рядом, а не вылезает за обложку. */
  .nf-np__acts-row{width:100%;flex-wrap:nowrap}
  .nf-np__acts .nf-np__sub{flex:1 1 auto;min-width:0;height:auto;min-height:38px;
    padding:8px 15px;white-space:normal;line-height:1.3;text-align:left}
  /* Двенадцать столбиков с зазором 5 px — 223 px, на 360 px внутри плашки 220. */
  .nf-np__heat{padding:16px 18px;gap:16px}
  .nf-np__heat-bars{gap:4px}
}

/* Сетка всех ниш — та же карточка, но плиткой, а не лентой. */
.nf-nichegrid{
  display:grid;gap:14px;margin-bottom:30px;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
}


/* Карусель ниш: подсказываем, что она прокручивается.
   scroll-padding равен полю экрана: без него scroll-snap подводил карточку к самому
   краю контейнера, то есть на 34px левее того места, где карточки стоят в покое. */
.nf-viral{overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding-left:var(--nf-pad-x)}
.nf-viral > *{scroll-snap-align:start}

/* Системную полосу прокрутки прячем и рисуем свою (.nf-viral-bar ниже).
   Причина не в красоте: контейнер прокрутки растянут от края до края экрана
   (отрицательные поля выше), и системная полоса живёт по его краям — то есть
   заметно левее первой карточки. Поджать её margin'ом у дорожки нельзя, WebKit
   этот margin применяет непредсказуемо, а Firefox дорожку не стилизует вовсе.
   Своя полоса — единственный способ пройти ровно по краям карточек. */
.nf-viral{scrollbar-width:none}
.nf-viral::-webkit-scrollbar{width:0;height:0}

/* Полоса стоит В ПОТОКЕ, внутри поля экрана: её левый край — левый край первой
   карточки, правый — правый край последней. Ползунок = видимая доля ленты. */
.nf-viral-bar{
  height:8px;border-radius:99px;background:var(--sunk);
  margin:-22px 0 30px;position:relative;cursor:pointer;overflow:hidden;
}
.nf-viral-bar[hidden]{display:none}
.nf-viral-bar__thumb{
  position:absolute;top:0;bottom:0;left:0;width:30%;
  border-radius:99px;background:rgba(255,255,255,.24);
}
.nf-viral-bar:hover .nf-viral-bar__thumb{background:rgba(255,255,255,.34)}
.nf-viral-bar.is-drag .nf-viral-bar__thumb{background:rgba(255,255,255,.44)}


/* ══ ЗАКЛАДКА — ОДНА КНОПКА НА ВЕСЬ ПРОДУКТ ═════════════════════════════════
   Раньше она была четырьмя разными кнопками: на карточке ниши — голая иконка без
   подложки, на карточке поиска — кружок без отклика, в избранном — кружок, который
   после нажатия выглядел точно так же, как до. Человек не понимал, сработало ли.
   Теперь везде одно: кружок с подложкой, а нажатая — залита жёлтым. Заливка
   именно фоном, а не только цветом глифа: цвет глифа на мелкой иконке читается
   как «чуть другой оттенок», а залитый кружок видно с другого конца экрана. */
.nf-niche__bm,.nf-card__bm,.nf-chcard__bm,.nf-chrow__btn,.nf-ch__bm,.nf-np__bmk{
  width:32px;height:32px;padding:0;border:0;border-radius:99px;
  display:grid;place-items:center;cursor:pointer;flex:none;
  background:var(--nf-scrim,rgba(0,0,0,.55));color:var(--tx);
  transition:background-color .12s ease, color .12s ease;
}
/* Часть этих кнопок — сама иконка (класс nf-i на кнопке), часть носит иконку
   внутри. Кегль задаём обоим видам, иначе половина закладок мельче остальных. */
.nf-niche__bm .nf-i,.nf-card__bm .nf-i,.nf-chcard__bm .nf-i,
.nf-chrow__btn .nf-i,.nf-ch__bm.nf-i,.nf-niche__bm.nf-i,.nf-np__bmk.nf-i{font-size:19px}
/* Закладка на карточке ниши лежит не на картинке, а на поверхности карточки —
   чёрная полупрозрачная подложка там читалась бы как дырка. */
.nf-niche__bm,.nf-np__bmk{background:var(--sunk);color:var(--tx2)}
.nf-niche__bm{margin-left:auto}
/* Наведение красит глиф ЖЁЛТЫМ — как у всех остальных закладок продукта.
   Своё правило у неё только из-за подложки (см. выше), а цвет отклика был белым,
   и одна закладка из шести отзывалась не так, как пять других: на витрине контур
   загорается жёлтым, а в карусели ниш не загорался вовсе. */
.nf-niche__bm:hover,.nf-np__bmk:hover{background:var(--surf2);color:var(--warn)}
/* «В коллекцию» стоит рядом с закладкой и выглядит так же, но жёлтой не бывает:
   это не отметка состояния, а действие. */
.nf-niche__coll{width:32px;height:32px;padding:0;border:0;border-radius:99px;
  display:grid;place-items:center;cursor:pointer;flex:none;font-size:19px;
  background:var(--sunk);color:var(--tx2);margin-left:auto}
.nf-niche__coll + .nf-niche__bm{margin-left:6px}
.nf-niche__coll:hover{background:var(--surf2);color:var(--tx)}
.nf-card__bm:hover,.nf-chcard__bm:hover,.nf-chrow__btn:hover,
.nf-ch__bm:hover{background:rgba(0,0,0,.78);color:var(--warn)}

/* Нажата: залит ТОЛЬКО ГЛИФ, кружок остаётся тёмным (решение владельца 16.08.2026,
   отменяет заливку кружка от 15.08). Прежний вариант — жёлтый круг целиком — читался
   не как «канал в избранном», а как «здесь горит кнопка»: на карточке это самое яркое
   пятно, и глаз ловил его раньше самого канала. Залитая закладка на тёмном кружке
   говорит то же самое ровно там, где человек её и ищет.
   Кольца снаружи тоже нет: отметка не должна выделять карточку — для этого есть
   наведение, и цвет у него другой. */
.nf-niche__bm[aria-pressed="true"],.nf-card__bm[aria-pressed="true"],
.nf-chcard__bm[aria-pressed="true"],.nf-chcard__bm--on,
.nf-chrow__btn[aria-pressed="true"],.nf-chrow__btn--on,
.nf-ch__bm[aria-pressed="true"],.nf-np__bmk[aria-pressed="true"]{
  background:var(--nf-scrim,rgba(0,0,0,.55));color:var(--warn);box-shadow:none;
}
/* Закладка ниши лежит не на кадре, а на поверхности карточки: чёрная полупрозрачная
   подложка читалась бы там дыркой, поэтому у неё своя — и в нажатом виде тоже. */
.nf-niche__bm[aria-pressed="true"],.nf-np__bmk[aria-pressed="true"]{background:var(--sunk)}
.nf-niche__bm[aria-pressed="true"]:hover,.nf-np__bmk[aria-pressed="true"]:hover{background:var(--surf2)}
/* Залитый глиф. Список длинный намеренно: у части кнопок иконка — это САМ элемент
   (класс nf-i на кнопке), у части она лежит внутри в <span class="nf-i">, и правило
   обязано попасть в оба вида. Раньше здесь не хватало закладки на странице ниши
   (тогдашней .nf-np__bm) — она красилась в жёлтый, но оставалась контуром, и «в избранном»
   выглядело как незакрашенный периметр.
   Заливка держится на aria-pressed, а не на классе nf-i--fill: класс навешивает
   скрипт, и до его ответа состояние было бы нарисовано наполовину.
   Оси wght/GRAD/opsz повторяем: font-variation-settings заменяет свойство целиком,
   и одинокий 'FILL' 1 сбрасывал бы толщину глифа к умолчанию шрифта. */
.nf-niche__bm[aria-pressed="true"],.nf-card__bm[aria-pressed="true"],
.nf-chcard__bm[aria-pressed="true"],.nf-chcard__bm--on,
.nf-chrow__btn[aria-pressed="true"],.nf-chrow__btn--on,
.nf-ch__bm[aria-pressed="true"],
.nf-niche__bm[aria-pressed="true"] .nf-i,.nf-card__bm[aria-pressed="true"] .nf-i,
.nf-chcard__bm[aria-pressed="true"] .nf-i,.nf-chcard__bm--on .nf-i,
.nf-chrow__btn[aria-pressed="true"] .nf-i,.nf-chrow__btn--on .nf-i,
.nf-ch__bm[aria-pressed="true"] .nf-i,.nf-np__bmk[aria-pressed="true"]{
  font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24;
}
.nf-niche__bm[aria-pressed="true"]:hover,.nf-card__bm[aria-pressed="true"]:hover,
.nf-chcard__bm[aria-pressed="true"]:hover,.nf-chcard__bm--on:hover,
.nf-chrow__btn[aria-pressed="true"]:hover,.nf-chrow__btn--on:hover,
.nf-ch__bm[aria-pressed="true"]:hover{
  background:rgba(0,0,0,.8);color:var(--warn);
}
/* «Раскрыть карточку» в строке избранного — та же кнопка, но не закладка:
   жёлтой она не бывает никогда. */
.nf-chrow__btn--open,.nf-chrow__btn--open:hover{background:transparent;color:var(--tx2)}
.nf-chrow__btn--open:hover{background:var(--sunk);color:var(--tx)}
.nf-ch__bm:disabled,.nf-card__bm:disabled,.nf-niche__bm:disabled{opacity:.5;cursor:progress}


/* ══ ОДИН ОТКЛИК НА НАВЕДЕНИЕ ═══════════════════════════════════════════════
   Решение владельца 16.08.2026 (отменяет нейтральное кольцо от 15.08).

   Кольцо без цвета человек просто не замечал: «я не вижу, что такое нейтральное
   кольцо». Берём приём, который в этом интерфейсе УЖЕ читается — огненное свечение
   топ-3, — и повторяем его голубым. Тогда отклик один на весь продукт, отличается
   только цвет, и цвет этот означает ровно одно:

     оранжевое  — место в подборке (топ-3), горит всегда, наведение его усиливает;
     голубое    — «сюда наведена мышь», бывает только у обычных карточек;
     жёлтое     — «в избранном», и это ТОЛЬКО значок закладки, карточку не трогает.

   Три состояния тремя цветами не спорят между собой: у одной карточки одновременно
   могут гореть оранжевое и жёлтая закладка, но голубое к оранжевой не примешивается. */
.nf-card,.nf-resrow,.nf-chcard,.nf-chrow,a.nf-modal__thumb,.nf-ch,.nf-niche{
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
/* Голубое свечение — той же породы, что огненное: кольцо + два ореола. */
.nf-card:hover,.nf-chcard:hover,.nf-ch:hover,.nf-niche:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1.5px rgba(62,166,255,.85),0 0 20px rgba(62,166,255,.32),
             0 0 46px rgba(62,166,255,.16);
}
/* Топ-3 горят оранжевым постоянно; наведение делает то же свечение толще и ярче,
   а не подменяет цвет — иначе «моргает» смысл: был топ-3, стал обычным. */
.nf-ch--top:hover{
  box-shadow:0 0 34px rgba(255,120,0,.38),0 0 80px rgba(255,59,31,.2);
}
/* Строки (список, избранное) — не карточки каналов: им остаётся прежний нейтральный
   отклик, свечение на строке смотрелось бы аварийной лампой. */
.nf-resrow:hover,.nf-chrow:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.42),0 0 0 1px var(--bdS);
}
a.nf-modal__thumb:hover{filter:none}
/* Шортсы в карточке канала — голубым кольцом, как шортсы «Ниш месяца» (a.nf-monthly__shot):
   тёмная тень на утопленном блоке не читалась вовсе, и владелец 15.10.2026 увидел «не
   подсвечиваются». Только у плитки с адресом: без него она никуда не ведёт. */
a.nf-modal__thumb[href]:hover,a.nf-modal__thumb[href]:focus-visible{
  transform:translateY(-3px);outline:none;
  box-shadow:0 0 0 2px var(--data),0 0 20px rgba(62,166,255,.32),0 0 46px rgba(62,166,255,.16);
}
@media (prefers-reduced-motion: reduce){
  .nf-card,.nf-resrow,.nf-chcard,.nf-chrow,a.nf-modal__thumb,.nf-ch,
  .nf-niche{transition:none}
  .nf-card:hover,.nf-resrow:hover,.nf-chcard:hover,.nf-chrow:hover,
  a.nf-modal__thumb:hover,.nf-ch:hover,.nf-niche:hover,
  a.nf-modal__thumb[href]:hover,a.nf-modal__thumb[href]:focus-visible{transform:none}
}



/* ══ СВЁРНУТАЯ ПАНЕЛЬ: ПОДПИСЬ У КНОПКИ ═════════════════════════════════════
   В полосе 72px подпись «Закрепить панель» не помещается, и кнопка оставалась
   голой иконкой — что она делает, знал только тот, кто её уже нажимал. Ставим
   короткое слово под иконкой: места ровно на него, а смысл возвращается.
   Подпись переносится на вторую строку сама (flex-wrap + width:100%), а в
   развёрнутой панели её просто нет — и переносить нечего. Так не приходится
   переключать раскладку кнопки отдельным правилом на каждое состояние. */
.nf-sb__pin{flex-wrap:wrap;row-gap:4px}
.nf-sb__pin-mini{display:var(--nf-sb-mini);width:100%;text-align:center;
  font:600 9.5px/1 var(--ff);color:var(--tx2);letter-spacing:.1px}

/* ══ ТЕЛЕФОН ═══════════════════════════════════════════════════════════════
   Правила стоят в конце файла, а не рядом с медиазапросом панели в начале:
   селекторы здесь однотипны с обычными, а при равной специфичности выигрывает
   тот, что ниже. В начале файла они молча проигрывали бы.

   Панель заперта в режиме полосы, поэтому кнопка «свернуть» ничего не меняет —
   мёртвая кнопка хуже её отсутствия. */
@media (max-width: 700px){
  .nf-sb__pin{display:none}

  /* Строка запроса переносится. На 375px в неё не влезали поле (минимум 120px),
     микрофон (44px) и «Найти» (~100px) — кнопка уезжала за край, и нажать её
     можно было только горизонтальной прокруткой внутри страницы. Радиус со
     скруглённой «таблетки» снимаем: на двух строках она выглядит бочкой. */
  .nf-ask{padding:16px}
  .nf-ask__bar{flex-wrap:wrap;border-radius:22px;padding:8px 8px 8px 16px}
  .nf-ask__input{flex:1 1 100%;min-width:0}
  .nf-ask__go{flex:1}

  /* Примеры запросов длиннее экрана. Многоточие тут не годится — обрезанный
     пример перестаёт быть примером, поэтому пускаем текст в две строки. Укладка
     покажет один чип во всю ширину, «другие» переносится под него — на телефоне
     строке разрешён перенос, правило «одной строкой» — для широких экранов. */
  .nf-ask__empty{flex-wrap:wrap}
  .nf-ask__example{white-space:normal;text-align:left;max-width:100%}

  /* Сетки карточек: жёсткий минимум колонки (330px и 290px) шире, чем весь
     контент на телефоне (292px), — колонка не сжималась, и витрина ехала
     вбок на 72px. На узком экране колонка одна и тянется по месту.
     Сетку страницы ниши (та же карточка .nf-ch) правило обходило до юзер-теста
     21.10.2026: «Каналы ниши» ехали вбок на 28–58 px и срезали «дн. в базе» и оценку. */
  .nf-ch-grid,.nf-chgrid,.nf-np__grid{grid-template-columns:minmax(0,1fr)}

  /* Та же болезнь в мелком: min-width подсказки на четыре пикселя шире места,
     и из-за них появлялась полоса прокрутки. Отдаём подсказке отдельную строку
     целиком: голого min-width:0 мало — в переносящейся строке она схлопывалась
     до самого длинного слова и читалась столбиком. */
  .nf-subs__hint{flex:1 1 100%;min-width:0}
  /* Та же болезнь в шапке плашки: пол 240 px у шапки и 200 px у текста на 360 px шире
     места, и главная ехала вбок на пиксель (замер юзер-теста 21.10.2026). Пол шапки — не
     шире строки, а не ноль: именно он уводит «Подписаться» на строку ниже, иначе кнопка
     сжимает заголовок в столбик. */
  .nf-subs__who{min-width:min(240px,100%)}
  .nf-subs__body{min-width:0}
}


/* ══ ИМЯ КАНАЛА — ВЕЗДЕ ДВЕРЬ НА YOUTUBE ════════════════════════════════════
   На витрине имя уже вело на канал, в поиске и в карточке — нет: там клик по
   имени открывал нашу же модалку, то есть делал то же, что клик по пустому месту
   рядом. Выглядит имя по-прежнему заголовком: подчёркивание под именем канала
   читается как опечатка. */
a.nf-card__name,a.nf-resrow__name{display:block;color:inherit;text-decoration:none}
a.nf-card__name:hover,a.nf-resrow__name:hover{color:var(--data)}
/* Имя канала в списке ниши — ссылка на YouTube (в сетке ниши — общая a.nf-ch__name). */
a.nf-np__lname{color:inherit;text-decoration:none}
a.nf-np__lname:hover{color:var(--data)}
a.nf-modal__title{color:inherit;text-decoration:none}
a.nf-modal__title:hover{color:var(--data)}
.nf-modal__handle{color:inherit;text-decoration:none}
.nf-modal__handle:hover{color:var(--data)}

/* Закладка в карточке канала — та же жёлтая заливка, что на карточках: кнопка
   с подписью, поэтому не кружок, но состояние читается тем же цветом. */
.nf-modal__bm[aria-pressed="true"]{
  background:var(--warn);color:#1a1400;border-color:transparent;
}
.nf-modal__bm[aria-pressed="true"] .nf-i{font-variation-settings:'FILL' 1}


/* ══ ОБЛОЖКА КАРТОЧКИ = ЛЕНТА ШОРТСОВ ══════════════════════════════════════
   Разметка и причина — в _cover.html. Шапки с именем здесь больше нет (16.08),
   поэтому лента занимает рамку целиком, а зазор снизу не нужен: бейджи уехали
   из кадра в поток карточки и на ленту больше не наезжают. */
.nf-cover{position:absolute;inset:0;display:flex;overflow:hidden}
.nf-cover__strip{display:flex;gap:5px;flex:1;min-height:0}
.nf-cover__tile{flex:1;min-width:0;border-radius:8px;overflow:hidden;
  background:var(--surf2);display:block}
.nf-cover__shot{width:100%;height:100%;object-fit:cover;display:block}
.nf-cover__empty{flex:1;display:grid;place-items:center;
  font:600 11px/1.3 var(--ff);color:var(--tx2)}
/* Под замком размыты только имя и аватар (.nf-ch--locked .nf-ch__name выше):
   ниша, «дни в базе» и оценка — цифры, их видно (владелец 02.10.2026). До 03.10
   здесь размывалась вся подпись целиком, вместе с нишей и оценкой. */


/* ══ ОКНО «В КОЛЛЕКЦИЮ» ═════════════════════════════════════════════════════
   Маленькое окно поверх всего: список коллекций с отметками и строка «создать».
   z-index выше модалки канала (200) — оно открывается ИЗ неё. */
.nf-collbox{position:fixed;inset:0;z-index:220;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.62)}
.nf-collbox.is-open{display:flex}
.nf-collbox__card{width:min(420px,100%);max-height:80vh;max-height:80dvh;overflow:auto;
  background:var(--panel,var(--surf));border:1px solid var(--bd);
  border-radius:var(--r);padding:18px 20px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.nf-collbox__head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.nf-collbox__title{font:800 18px/1.2 var(--ff);letter-spacing:-.3px}
.nf-collbox__close{margin-left:auto;border:0;background:transparent;color:var(--tx2);
  font:600 24px/1 var(--ff);cursor:pointer;padding:0 4px}
.nf-collbox__close:hover{color:var(--tx)}
.nf-collbox__what{font:600 13px/1.4 var(--ff);color:var(--tx2);margin-bottom:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-collbox__list{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;
  font:600 13px/1.4 var(--ff);color:var(--tx2)}
.nf-collbox__row{display:flex;align-items:center;gap:10px;width:100%;
  border:0;background:var(--sunk);border-radius:12px;padding:10px 12px;
  cursor:pointer;color:var(--tx);font:600 13.5px/1 var(--ff);text-align:left}
.nf-collbox__row:hover{background:var(--surf2)}
.nf-collbox__row[aria-pressed="true"]{background:color-mix(in srgb,var(--pos) 14%,var(--sunk))}
.nf-collbox__tick{font-size:19px;color:var(--tx2);flex:none}
.nf-collbox__row[aria-pressed="true"] .nf-collbox__tick{color:var(--pos);
  font-variation-settings:'FILL' 1}
.nf-collbox__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.nf-collbox__count{font:600 12px/1 var(--ff);color:var(--tx2);flex:none}
.nf-collbox__empty{font:600 13px/1.5 var(--ff);color:var(--tx2);padding:2px 2px 6px}
.nf-collbox__new{display:flex;gap:8px}
.nf-collbox__input{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--bd);
  border-radius:12px;padding:10px 12px;color:var(--tx);font:400 16px/1 var(--ff)}
.nf-collbox__input:focus{outline:none;border-color:var(--bdS)}
.nf-collbox__add{border:0;border-radius:12px;padding:0 16px;cursor:pointer;
  background:var(--tx);color:var(--bg);font:700 13px/1 var(--ff);white-space:nowrap}
.nf-collbox__add:hover{filter:brightness(.92)}
.nf-collbox__note{font:600 12px/1.4 var(--ff);color:var(--warn);margin-top:10px;
  min-height:0}
.nf-collbox__note:empty{display:none}


/* ══ ПРЕСЕТЫ ФИЛЬТРОВ ═══════════════════════════════════════════════════════
   Строка сохранения показывается только когда её позвали кнопкой внизу панели:
   постоянное поле ввода в панели фильтров читается как ещё один фильтр. */
.nf-presets__save{display:none;gap:6px;margin:8px 0 4px}
.nf-presets[data-saving="true"] .nf-presets__save{display:flex}
.nf-presets__input{flex:1;min-width:0;background:var(--sunk);
  border:1px solid var(--bd);border-radius:10px;padding:8px 10px;color:var(--tx);
  font:400 16px/1 var(--ff)}
.nf-presets__input:focus{outline:none;border-color:var(--bdS)}
.nf-presets__ok{border:0;border-radius:10px;padding:0 12px;cursor:pointer;
  background:var(--tx);color:var(--bg);font:700 12px/1 var(--ff);white-space:nowrap}
.nf-presets__note{font:600 11.5px/1.4 var(--ff);color:var(--warn);margin:2px 0 4px}
.nf-presets__note:empty{display:none}
.nf-presets__empty{font:600 12px/1.45 var(--ff);color:var(--tx2);margin:6px 0 2px}
.nf-presets__empty[hidden]{display:none}
.nf-presets__hint{font:600 11.5px/1.4 var(--ff);color:var(--tx2)}

/* Бейдж страны аудитории на обложке (до 17.10.2026 — языка) — только флаг: четыре
   чипа с полными подписями в строку не помещались, и правый («520 млн/мес»)
   обрезался многоточием на самом числе. Название страны живёт в карточке канала. */
.nf-ch__badge--flag{padding-left:7px;padding-right:7px;font-size:12px;
  line-height:1;cursor:help}


/* ═══ КАТАЛОГИ ПОЛКИ ══════════════════════════════════════════════════════
   Каталог — метка, а не папка: канал лежит сразу в нескольких, «Все» — вся полка.
   Карточкой, а не капсулой (решение владельца 19.08): капсула не показывала ни
   размера подборки, ни того, что в неё можно что-то положить. */
/* Лента, а не сетка: каталоги делят строку с сортировкой (.nf-saved__bar), и переносить
   их вниз нельзя — это и была та самая вторая строка. Порядок уступок: сначала карточки
   ужимаются (имя режется многоточием) до пола в 128 px, и лишь когда каталогов столько,
   что и пола мало, лента едет вбок. Пол не «на глаз»: ниже 128 px под имя остаётся
   меньше семи знаков, а «Спорт-гов…» и «Спорт-люб…» с одинаковым хвостом различить
   уже нельзя — тогда прокрутка честнее сжатия.
   Вертикальные padding/margin — не отступ, а запас под крестик удаления: он висит на
   -7 px от карточки, а overflow-x:auto делает обрезающей и вертикальную ось, так что
   без запаса крестик срезало бы. Полосу прокрутки прячем: о хвосте говорит затухание
   края (data-more), а системная полоса в тёмной панели читается как мусор. */
.nf-cats{display:flex;flex-wrap:nowrap;gap:10px;flex:0 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:8px 8px 8px 0;margin:-8px 0}
.nf-cats::-webkit-scrollbar{display:none}
/* Затухание края ставит app.js замером scrollWidth: CSS не умеет спросить, влезло ли
   содержимое, а каталог, молча ушедший за обрез, для человека просто не существует. */
.nf-cats[data-more="right"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.nf-cats[data-more="left"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent)}
.nf-cats[data-more="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.nf-cat{position:relative;display:flex;align-items:center;gap:10px;flex:0 1 auto;
  min-width:128px;
  padding:13px 16px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--surf);color:var(--tx);cursor:pointer;text-align:left;
  font:700 13px/1 var(--ff);transition:background .12s ease,border-color .12s ease}
/* «Все» и «Новый каталог» не ужимаем: первая — вход на всю полку, вторая — единственный
   способ завести каталог, и обрезанное многоточием «Новый ката…» выглядит поломкой.
   «Все» при этом КОМПАКТНАЯ — по содержимому, без общего минимума 128px (владелец
   15.09.2026: «слишком длинная»). */
.nf-cat--all,.nf-cat--form{flex:none}
.nf-cat--all{min-width:0}

.nf-cat:hover{background:var(--surf2);border-color:var(--bdS)}
/* Выбранный каталог — ТОЛЬКО обводка (владелец 15.09.2026): карточка остаётся такой
   же, как в покое (её вид ему нравится), меняется лишь рамка — белая, заметная.
   Заливки не было ни белой (некрасиво), ни голубой («как будто уверенная»).
   По наведению не сереет: рамка та же, фон тот же. */
.nf-cat--on{background:var(--surf);color:var(--tx);border-color:var(--tx)}
.nf-cat--on:hover{background:var(--surf);border-color:var(--tx)}
/* `flex:1 1 auto`, а НЕ `flex:1`: у `flex:1` база нулевая, и карточка не знает
   собственной ширины — имя резалось многоточием даже там, где половина строки пустая.
   С базой по содержимому карточка занимает столько, сколько нужно имени, и ужимается
   только когда строке действительно тесно. Расти имя всё так же умеет: без этого
   счётчик не прижимался бы к правому краю карточки. */
.nf-cat__name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-cat__count{flex:none;font:700 12px/1 var(--ff);color:var(--tx2)}
.nf-cat--on .nf-cat__count{color:var(--tx2)}
.nf-cat--new{border-style:dashed;color:var(--tx2);min-width:0;flex:none}
.nf-cat--new:hover{color:var(--tx)}
/* Крестик появляется по наведению: постоянный призывал бы удалить, а каталог
   собирают руками и терять его случайным кликом нельзя. */
.nf-cat__del{position:absolute;top:-7px;right:-7px;width:20px;height:20px;
  border-radius:99px;background:var(--surf2);color:var(--tx2);font-size:13px;
  display:none;place-items:center;border:1px solid var(--bd)}
.nf-cat:hover .nf-cat__del{display:grid}
.nf-cat__del:hover{background:var(--cta);color:#fff;border-color:var(--cta)}

/* Галочка выбора на карточке канала. Видна при наведении и всегда — когда отмечена. */
.nf-chcard__tick{position:absolute;z-index:3;top:9px;left:9px;width:26px;height:26px;
  border-radius:8px;border:1.5px solid var(--bdS);background:var(--nf-scrim);
  display:grid;place-items:center;cursor:pointer;opacity:0;color:transparent;
  transition:opacity .12s ease}
.nf-chcard__tick .nf-i{font-size:17px}
.nf-chcard:hover .nf-chcard__tick,.nf-chcard__tick:focus-visible{opacity:1}
.nf-chcard__tick[aria-checked="true"]{opacity:1;background:var(--data);
  border-color:var(--data);color:var(--bg)}

/* Полоса действий над выделенным. Появляется только когда что-то выбрано. */
.nf-pickbar{display:none;align-items:center;gap:12px;margin-bottom:14px;
  padding:10px 14px;border-radius:var(--r);background:var(--sunk);
  border:1px solid var(--bd);font:600 12.5px/1 var(--ff)}
.nf-pickbar[data-open="1"]{display:flex}
.nf-pickbar__n{color:var(--tx2)}
.nf-pickbar__n b{color:var(--tx)}
.nf-pickbar__to{margin-left:auto}
.nf-pickbar__btn{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;
  padding:9px 14px;font:700 12.5px/1 var(--ff);cursor:pointer;
  background:var(--data);color:var(--bg)}
.nf-pickbar__btn--out{background:var(--surf2);color:var(--tx)}
.nf-pickbar__btn--plain{background:transparent;color:var(--tx2)}
.nf-pickbar__btn--plain:hover{color:var(--tx)}

/* Выпадашка «В каталог» — СВОЙ замок, не общий с сортировкой. Пока она была
   .nf-sort, нажатие «В каталог» открывало заодно и меню сортировки: замок ищет все
   .nf-sort на странице разом. */
.nf-pickbar__to{position:relative}
.nf-pickbar__to[data-open="true"] .nf-sort__menu{display:flex}

/* Карточка создания каталога. Своя, а не prompt() браузера: чужое окно на этом
   экране выглядит вставным зубом и не умеет ни отмены по Escape в нашем стиле,
   ни подсказки про длину имени. */
/* Замок на строке, а не на ленте: кнопка и форма стоят РЯДОМ с лентой, вне прокрутки
   (см. .nf-cats), и переключатель обязан быть их общим предком. */
.nf-cat--form{display:none;gap:8px;padding:9px 10px}
.nf-saved__bar[data-newopen="1"] .nf-cat--form{display:flex}
.nf-saved__bar[data-newopen="1"] .nf-cat--new{display:none}
.nf-cat__input{flex:1;min-width:120px;background:var(--sunk);border:1px solid var(--bdS);
  border-radius:10px;padding:9px 11px;color:var(--tx);font:600 16px/1 var(--ff);
  outline:none}
.nf-cat__input:focus{border-color:var(--data)}
.nf-cat__ok{flex:none;border:0;border-radius:10px;padding:9px 13px;cursor:pointer;
  background:var(--data);color:var(--bg);font:700 12.5px/1 var(--ff)}
.nf-cat__no{flex:none;border:0;border-radius:10px;width:32px;height:32px;cursor:pointer;
  background:transparent;color:var(--tx2);display:grid;place-items:center}
.nf-cat__no:hover{color:var(--tx)}

/* Телефон: строка честно расходится на две. Ленте, кнопке «Новый каталог» и ручкам
   вместе на 360 px не встать, а ужать каталоги до нечитаемого хуже, чем перенести.
   Правило стоит ПОСЛЕ .nf-cats намеренно: медиазапрос не добавляет веса селектору, и
   выше по файлу его перебило бы базовое объявление. */
@media (max-width:700px){
  .nf-saved__bar{flex-wrap:wrap}
  .nf-cats{flex:1 1 100%}
}

/* ── Страница ошибки внутри продукта ───────────────────────────────────────
   404 и 422 для вошедшего. Одна колонка по центру рабочей области: ошибка не
   должна выглядеть как экран с данными, где просто не приехали данные.
   Кода ошибки цифрой нет: «422» покупателю не говорит ничего, а фраза говорит. */
.nf-err{max-width:520px;margin:14vh auto 0;text-align:center}
.nf-err__title{font:800 26px/1.2 var(--ff);color:var(--tx)}
.nf-err__text{margin-top:12px;font:400 14px/1.6 var(--ff);color:var(--tx2)}
.nf-err__acts{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nf-err__btn{border:1px solid var(--bdS);border-radius:12px;padding:10px 16px;
  background:transparent;color:var(--tx);font:700 13px/1 var(--ff);
  text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.nf-err__btn:hover{background:var(--surf2)}
.nf-err__btn--main{background:var(--cta);border-color:var(--cta);color:var(--ctaTx)}
.nf-err__btn--main:hover{background:var(--cta);filter:brightness(1.08)}

/* ── Замок: истёкший доступ ────────────────────────────────────────────────
   Размытие здесь — ТОЛЬКО оформление. Ни одного имени, хендла, аватара или
   адреса кадра в разметке запертого продукта уже нет: их вырезает сервер
   (product/viewdata.py::закрыть_личность). Если убрать этот CSS, страница не
   «раскроется» — на ней просто станет видно, что показывать нечего.
   Отсюда и правило: сюда нельзя добавлять ничего, что ЗАВИСИТ от размытия. */
/* Имена каналов на всех четырёх экранах. Классы перечислены поимённо, а не одним
   маской-селектором: имя ниши (.nf-niche__name) размывать НЕЛЬЗЯ — закрыто «чей
   канал», а не «что за ниша», и ниша как раз и есть то, ради чего продлевают. */
[data-locked="true"] .nf-ch__name,        /* витрина, сетка   */
[data-locked="true"] .nf-riserow__name,   /* витрина, список  */
[data-locked="true"] .nf-card__name,      /* поиск, сетка     */
[data-locked="true"] .nf-resrow__name,    /* поиск, список    */
[data-locked="true"] .nf-np__lname,       /* страница ниши, список (сетка — .nf-ch__name) */
[data-locked="true"] .nf-chcard__name,   /* полка, сетка    */
[data-locked="true"] .nf-chrow__name{filter:blur(6px);user-select:none}  /* полка, список */
/* Кружок аватара: картинки и буквы под ним уже нет, размытие убирает ровный край,
   чтобы место читалось как «скрыто», а не как «не загрузилось». */
[data-locked="true"] .nf-ava,
[data-locked="true"] .nf-niche__author{color:transparent;filter:blur(3px)}
/* Каналы купленного выпуска «Ниш месяца» под замком ОТКРЫТЫ (сервер отдаёт их имена,
   аватары и ссылки), а правила выше размывали имя и аватар на всей странице подряд — и
   купивший выпуск видел свои девять каналов размытыми (сверка 03.10.2026, вечер). У
   закрытых карточек свой класс замка, у открытых его нет — по нему и снимаем размытие. */
[data-locked="true"] .nf-ch:not(.nf-ch--locked) .nf-ch__name,
[data-locked="true"] .nf-riserow:not(.nf-riserow--locked) .nf-riserow__name,
[data-locked="true"] .nf-np__lrow:not(.nf-np__lrow--locked) .nf-np__lname,
[data-locked="true"] .nf-chcard:not(.nf-chcard--locked) .nf-chcard__name,
[data-locked="true"] .nf-chrow:not(.nf-chrow--locked) .nf-chrow__name,
[data-locked="true"] .nf-card:not(.nf-card--locked) .nf-card__name,      /* поиск (17.10) */
[data-locked="true"] .nf-resrow:not(.nf-resrow--locked) .nf-resrow__name{filter:none;user-select:auto}
[data-locked="true"] .nf-ch:not(.nf-ch--locked) .nf-ava,
[data-locked="true"] .nf-riserow:not(.nf-riserow--locked) .nf-ava,
[data-locked="true"] .nf-np__lrow:not(.nf-np__lrow--locked) .nf-ava,
[data-locked="true"] .nf-chcard:not(.nf-chcard--locked) .nf-ava,
[data-locked="true"] .nf-chrow:not(.nf-chrow--locked) .nf-ava,
[data-locked="true"] .nf-card:not(.nf-card--locked) .nf-ava,
[data-locked="true"] .nf-resrow:not(.nf-resrow--locked) .nf-ava{color:var(--tx2);filter:none}
/* Автор на карточке ниши: закрытый — кружок без адреса (<span>), открытый — засвеченный или
   из купленного выпуска — ссылка с аватаром (<a>, viewdata._автор_ниши). Правило выше
   размывало оба (владелец 16.10.2026: «мы же открыли этот канал, аватарки должны быть видны»). */
[data-locked="true"] a.nf-niche__author{color:var(--tx);filter:none}
/* Ссылки, у которых сервер забрал адрес, не должны выглядеть кликабельными:
   пустой href ведёт на саму страницу — и это единственный способ «сломать» экран,
   оставшийся после вырезания данных. */
[data-locked="true"] a[href=""]{pointer-events:none;cursor:default}
/* Карточка целиком под замком кликается в одно место — в закрытую карточку канала. */
[data-locked="true"] .nf-ch,
[data-locked="true"] .nf-riserow,
[data-locked="true"] .nf-card,
[data-locked="true"] .nf-resrow{cursor:pointer}
/* Число подписчиков под замком: в данных его нет, на месте числа — размытая
   заглушка, чтобы место читалось «скрыто», а не «нет данных» (владелец 03.10.2026). */
.nf-blurnum{filter:blur(5px);user-select:none}

/* Карточка канала под замком (владелец 02.10.2026). Вместо названия — «Канал
   закрыт» без размытия, в кружке — замок: размытая точка читалась «не загрузилось».
   Название, шторка топ-3 и «Открыть на YouTube» ведут в окно тарифов. Эти правила
   стоят ПОСЛЕ .nf-modal--locked .nf-id и [data-locked] .nf-ava и перебивают их. */
/* Серым и с курсором — только закрытый канал: у канала купленного выпуска название
   настоящее и ведёт на YouTube (nf-modal--chopen ставит app.js, 03.10.2026). */
.nf-modal--locked .nf-modal__title{filter:none}
.nf-modal--locked:not(.nf-modal--chopen) .nf-modal__title{color:var(--tx2);cursor:pointer}
.nf-modal--locked .nf-modal__avatar{filter:none;color:var(--tx2)}
.nf-modal--locked .nf-modal__avatar .nf-i{font-size:34px}
button.nf-modal__lock{border:0;padding:0;margin:0;cursor:pointer;color:var(--tx);font:inherit}
/* Плиток под замком пять — без «Подписчиков»: ряд из пяти колонок, а не шесть с
   пустой шестой. Ступени ниже — те же, что у шести (3 и 2 колонки). */
.nf-modal--locked .nf-modal__stats{grid-template-columns:repeat(5,auto)}
@media (max-width:900px){
  .nf-modal--locked .nf-modal__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .nf-modal--locked .nf-modal__stats{grid-template-columns:repeat(2,1fr)}
}
.nf-modal__foot .nf-modal__btn .nf-i{font-size:16px;color:var(--tx2)}

/* Строка ленты под замком: «Новый канал · в нише Мемы · …» — без имени. */
.nf-lenta__in{color:var(--tx2);font-weight:600;flex:none}

/* Фильтр с замком в панели поиска (подписчики, число роликов): поле видно,
   ввода нет, нажатие — окно тарифов. */
.nf-field__lock{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;
  padding:0 12px;border:1px dashed var(--bdS);border-radius:10px;background:transparent;
  color:var(--tx2);font:600 12.5px/1.3 var(--ff);cursor:pointer;text-align:left}
.nf-field__lock:hover{color:var(--tx);border-color:var(--tx2)}
.nf-field__lock .nf-i{font-size:16px}

/* ── Окно «Продлите подписку» ──────────────────────────────────────────────
   z-index 220 — выше модалки канала (200) и палитры (210): это последнее окно,
   которое человек должен увидеть, и накрывать его нечему.

   Шире прежнего (1256 против 860) и на тёмной подложке лендинга (#0F0F0F) с 03.10.2026,
   вечер: тарифы внутри теперь один в один лендинговые, и место под них — ровно контейнер
   лендинга (1200 = 1256 − поля 27 − рамка): три карточки по 388 px, строки списков
   переносятся там же, где на лендинге. Карточки цвета --surf на --surf не отделялись бы
   от окна вовсе — отсюда подложка. */
.nf-pw{position:fixed;inset:0;z-index:220;display:none;
  background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
  padding:24px;overflow-y:auto}
.nf-pw--open{display:grid;place-items:center}
.nf-pw__card{position:relative;width:min(1256px,100%);
  background:#0F0F0F;border:1px solid var(--bdS);border-radius:24px;
  padding:34px 27px 28px}
/* Крестик РОВНО по центру кнопки. Без grid/place-items его сажает базовая линия
   шрифта: символ «×» у Golos Text выше середины, и в квадрате 34×34 он вставал
   заметно вверх и влево. line-height:1 этого не лечит — лечит центрирование. */
.nf-pw__x{position:absolute;top:14px;right:14px;width:34px;height:34px;
  display:grid;place-items:center;padding:0;
  border:1px solid var(--bd);border-radius:10px;background:transparent;
  color:var(--tx2);font:600 22px/1 var(--ff);cursor:pointer}
/* Красным на наведении: закрыть окно — единственное действие, которое здесь
   можно сделать мимо кнопки, и оно должно отзываться. */
.nf-pw__x:hover{color:var(--cta);border-color:var(--cta);background:transparent}
/* Шапка окна (владелец 05.10.2026: «текст слишком серый, таким же белым делать нельзя, и
   как-то его распределить получше»). Три ступени: плашка тарифа — где человек сейчас;
   заголовок — белым; строка под ним — вторым цветом, ключевое в ней — белым (<b> из
   *звёздочек* viewdata.слова_окна). Каждая фраза — своей строкой («|» в словах), и
   строка шире заголовка (700 px), чтобы фраза на компьютере не ломалась посередине. */
.nf-pw__head{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:760px;margin:0 auto}
.nf-pw__status{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:6px 12px;border-radius:999px;background:var(--surf);border:1px solid var(--bdS);
  font:600 12.5px/1.2 var(--ff);color:var(--tx2)}
.nf-pw__status b{color:var(--tx);font-weight:700}
.nf-pw__status[hidden]{display:none}
.nf-pw__title{margin:0;font:800 30px/1.15 var(--ff);letter-spacing:-.03em;color:var(--tx)}
.nf-pw__sub{margin:12px 0 0;max-width:700px;font:400 16px/1.55 var(--ff);color:var(--tx2);
  text-wrap:balance}
.nf-pw__sub b{color:var(--tx);font-weight:600}

/* ── Тарифы как на лендинге (владелец 03.10.2026, вечер; сверено с лендингом 05.10.2026) ──
   «Сделай тарифы точно как на лендинге — сейчас они другие, не такие крутые». Правила —
   перенос landing/site/css/landing.css §5.9 (и .card, .btn, .lv оттуда же) с приставкой
   nf-: у продукта свои .card и .btn. Правишь там — правь здесь: сторож
   tests/test_product_trial.py сверяет и слова, и эти правила с лендингом. Один набор на
   окно тарифов и на экран «Аккаунт» (_tariffs.html).

   С 05.10.2026 — иерархия лендинга (владелец про окно: «текст слишком серый, таким же
   белым делать нельзя, распределить получше»): цена белая, условия под ценой и описание —
   вторым цветом, у «Года» условия обычной строкой без плашки, выгода — красным словом;
   строки списка с воздухом, галочки — зелёные знаки по маске SVG, минусы приглушены;
   эксклюзивы «Года» — красным бренда, созвон — оранжевым. Ряд «Только в «Годе»» лендинга
   в окно не переносим: в продукте эксклюзивы видны строками в карточке «Года».

   Уровни трёх карточек ровные, как на лендинге: карточка — подсетка на шесть строк, её
   шапка — на четыре (имя, цена, условия, описание), дальше список и кнопка. У продукта в
   шапке бывают и свои строки — зачёт под ценой, выпуск в продаже под условиями: они
   стоят в тех же ячейках (nf-plan__cost, nf-plan__terms), строк подсетки не прибавляя.

   Цифры — тем же начертанием, что на лендинге: цену и имя тарифа там набирает шорткат
   font, а он сбрасывает font-variant-numeric в normal — цифры пропорциональные. У
   продукта на body табличные, и «1 900 ₽» с font-variant-numeric:tabular-nums читалось
   другим шрифтом (владелец: «цифры как будто другим шрифтом»). Числа белым, не синим
   (владелец 14.09.2026).

   Ширина колонок — по ширине самого блока, а не экрана (container query): на «Аккаунте»
   блок уже окна, и три колонки там встают позже, чем на лендинге. */
.nf-tfwrap{container-type:inline-size}
.nf-plans{--nf-tx3:#7A7A7A;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(6,auto);gap:0 16px;margin-top:22px;text-align:left}
.nf-plans--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
.nf-plan{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;gap:0;
  padding:22px 24px;background:var(--surf);border:1px solid var(--bd);border-radius:20px;
  overflow:hidden;color:var(--tx);font-size:17px;line-height:1.6;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
/* Свечение под курсором — как .card лендинга; координаты ставит app.js. */
.nf-plan::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 60%)}
@media (hover:hover){.nf-plan:hover::before{opacity:1}}
.nf-plan--hot{border-color:var(--cta);
  box-shadow:0 0 0 1px rgba(255,0,51,.4),0 30px 70px -30px rgba(255,0,51,.6)}
/* Сброс полей абзацев — без веса (:where): отступы строк ниже задают классы, и
   «.nf-plan p» не должен их перебивать. */
:where(.nf-plan) p{margin:0}
.nf-plan__top{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
.nf-plan__name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:22px;
  font:700 12px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.nf-plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:12px;
  font:800 clamp(30px,2.7vw,40px)/1 var(--ff);letter-spacing:-.03em;white-space:nowrap;color:var(--tx)}
.nf-plan__meta{margin-top:10px;font:500 14px/1.4 var(--ff);color:var(--tx2)}
.nf-plan__meta--win b{font-weight:700;color:#FF7A90}
.nf-plan__tag{padding:5px 10px;border-radius:999px;background:var(--cta);color:#fff;letter-spacing:.06em}
.nf-plan__ribbon{position:absolute;top:20px;right:-46px;width:176px;padding:10px 0;
  transform:rotate(45deg);text-align:center;
  background:linear-gradient(90deg,#FF0033,#FF3B5C);color:#fff;font:900 18px/1 var(--ff);
  letter-spacing:.02em;box-shadow:0 10px 26px -6px rgba(255,0,51,.9),inset 0 1px 0 rgba(255,255,255,.35);
  z-index:2}
/* Описание тарифа — светлее второго цвета (владелец 06.10: «серым, хочу, чтобы больше
   выделялось»), как и на лендинге (.plan__what). */
.nf-plan__what{margin-top:16px;padding-top:14px;border-top:1px solid var(--bd);
  font:400 14.5px/1.5 var(--ff);color:#D4D4D4}
.nf-plan__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;align-content:start}
.nf-plan__list li{position:relative;padding-left:30px;font:500 14.5px/1.45 var(--ff);color:var(--tx)}
/* кружок и знак — два слоя одного размера ровно по центру первой строки: (1lh − 18px) / 2 */
.nf-plan__list li::before,.nf-plan__list li::after{content:"";position:absolute;left:0;
  top:calc((1lh - 18px) / 2);width:18px;height:18px}
.nf-plan__list li::before{border-radius:50%;background:rgba(43,166,64,.2)}
.nf-plan__list li::after{background:#46D371;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.4l2.5 2.4 5.1-5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.4l2.5 2.4 5.1-5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat}
.nf-plan__list li.is-no{color:var(--nf-tx3);font-weight:400}
.nf-plan__list li.is-no .nf-lv b{color:var(--nf-tx3)}
.nf-plan__list li.is-no .nf-lv::before{display:none}
.nf-plan__list li.is-no::before{background:rgba(255,255,255,.06)}
.nf-plan__list li.is-no::after{background:var(--nf-tx3);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9h7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9h7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* «только в «Годе»»: в годе — подсвеченные строки цвета бренда, созвон — оранжевым; в
   остальных тарифах — те же строки минусами */
.nf-plan--hot .nf-plan__ex{--ex-pad:7px;margin-inline:-10px;padding:var(--ex-pad) 10px var(--ex-pad) 40px;
  border-radius:10px;background:rgba(255,0,51,.1);border:1px solid rgba(255,0,51,.34);font-weight:600}
.nf-plan--hot .nf-plan__ex::before,.nf-plan--hot .nf-plan__ex::after{left:10px;
  top:calc(var(--ex-pad) + (1lh - 18px) / 2)}
.nf-plan--hot .nf-plan__ex::before{background:var(--cta)}
.nf-plan--hot .nf-plan__ex::after{background:#fff}
.nf-plan--hot .nf-plan__ex.is-hot{background:rgba(255,145,0,.12);border-color:rgba(255,145,0,.5)}
.nf-plan--hot .nf-plan__ex.is-hot::before{background:#FF9100}
.nf-plan--hot .nf-plan__ex.is-hot::after{background:#1D0F00}
/* Живое число — .lv лендинга: мигающая красная точка ПЕРЕД числом (владелец: «точка
   перед значением, не после»); число стоит по базовой линии строки, точка — по центру. */
.nf-lv{position:relative;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.nf-lv::before{content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;
  background:var(--cta);animation:nf-live-red 1.6s ease-out infinite}
.nf-lv b{font-weight:800;color:var(--tx)}
@keyframes nf-live-red{0%{box-shadow:0 0 0 0 rgba(255,0,51,.65)}
  70%{box-shadow:0 0 0 7px rgba(255,0,51,0)}100%{box-shadow:0 0 0 0 rgba(255,0,51,0)}}
@media (prefers-reduced-motion:reduce){.nf-lv::before{animation:none}.nf-plan{transition:none}}
/* Кнопка — .btn лендинга (в тарифах — 46 px): «Выбрать» контуром, год — красной. */
.nf-plan__btn{align-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;margin-top:20px;padding:0 22px;border-radius:12px;font:600 16px/1 var(--ff);color:var(--tx);
  background:transparent;border:1px solid var(--bdS);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .2s,background .2s,box-shadow .2s}
.nf-plan__btn:hover{background:var(--surf2)}
.nf-plan__btn--cta{background:var(--cta);border-color:transparent;color:#fff}
.nf-plan__btn--cta:hover{background:var(--cta);filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 12px 40px -8px rgba(255,0,51,.18)}
.nf-plan__btn--cta:active{transform:scale(.98)}
/* Своё продукта, на лендинге этого нет: доплата по зачёту (полная цена зачёркнута, зачёт —
   строкой под ценой, в той же ячейке подсетки), выпуск в продаже (под условиями) и тариф,
   который купить нельзя. */
.nf-plan__was{font:600 15px/1 var(--ff);letter-spacing:0;color:var(--nf-tx3)}
.nf-plan__credit{margin-top:8px;font:600 13.5px/1.4 var(--ff);color:#4CD964}
/* Выпуск в продаже — справа в шапке «Ниш месяца» (владелец 23.10.2026): справа от названия и
   цены место пустует, а капсула под условиями растягивала шапки всех трёх тарифов. Подпись —
   в строке названия, кнопка выпуска — в строке цены; не влезают рядом (узкая карточка) —
   переносятся строкой ниже, а не наезжают. Гем марки и стрелка — то, на что наводят:
   всплывают ниши выпуска простым списком, без цвета; с клавиатуры — фокусом, на телефоне —
   нажатием (app.js, issue-peek). */
/* Одна линия (владелец 23.10.2026: «на одной строке, сейчас как будто на разных»): подпись —
   тем же шрифтом, что название тарифа; кнопка выпуска — по центру цифр цены («центровать
   плашку к надписи»), не по базовой линии: по ней кнопка садилась ниже цифр. */
.nf-plan__name .nf-plan__sale-k{margin-left:auto;font:inherit;letter-spacing:inherit}
.nf-plan__sale-k{margin:0;font:700 12px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;
  color:#46D371}
.nf-plan__cost--sale{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 10px;margin-top:12px}
.nf-plan__cost--sale .nf-plan__price{margin-top:0}
.nf-plan__sale-btn{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;
  cursor:pointer}
.nf-plan__sale-v{display:inline-flex;align-items:center;gap:6px;margin:0;font:700 14px/1.2 var(--ff);
  color:var(--tx)}
.nf-plan__gem{flex:none;width:18px;height:18px;filter:drop-shadow(0 0 6px rgba(0,230,118,.5));
  transition:transform .2s,filter .2s}
.nf-plan__sale--peek:hover .nf-plan__gem,.nf-plan__sale--peek.is-open .nf-plan__gem{transform:scale(1.15);
  filter:drop-shadow(0 0 9px rgba(0,230,118,.8))}
/* Выпуск с нишами — кнопкой раскрывающегося списка: тонкая рамка и стрелка ▾ (владелец
   23.10.2026: пунктир «точно не то», а раскрывающийся список понятен без подсказок). Открыт —
   рамка зелёная, стрелка смотрит вверх. */
.nf-plan__sale-btn .nf-plan__sale-v{padding:5px 8px 5px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:background .2s,box-shadow .2s}
.nf-plan__sale--peek:hover .nf-plan__sale-v,.nf-plan__sale--peek.is-open .nf-plan__sale-v{
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(70,211,113,.6)}
.nf-plan__chev{flex:none;width:11px;height:11px;margin-left:-2px;color:var(--tx2);transition:transform .2s}
.nf-plan__sale--peek:hover .nf-plan__chev,.nf-plan__sale--peek.is-open .nf-plan__chev{transform:rotate(180deg)}
/* Размер кнопки выбран так, чтобы рядом с ценой в 40 px она влезала и на 1512–1728 (макбуки):
   на 15 px текста она уходила под цену. Телефон — ещё компактнее. */
@container (max-width:400px){
  .nf-plan__sale-v{font-size:13.5px;gap:5px}
  .nf-plan__sale-btn .nf-plan__sale-v{padding:4px 7px 4px 10px}
  .nf-plan__gem{width:17px;height:17px}
}
.nf-plan__pop{position:absolute;right:-8px;top:calc(100% + 10px);z-index:5;
  width:min(236px,calc(100% + 16px));padding:12px 14px 6px;
  border-radius:12px;background:#161616;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px -12px rgba(0,0,0,.85);text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s}
.nf-plan__pop::before{content:"";position:absolute;right:15px;top:-6px;width:10px;height:10px;
  transform:rotate(45deg);background:#161616;
  border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
@media (hover:hover){.nf-plan__sale--peek:hover .nf-plan__pop{opacity:1;visibility:visible;transform:none}}
.nf-plan__sale--peek.is-open .nf-plan__pop,.nf-plan__sale--peek:has(:focus-visible) .nf-plan__pop{
  opacity:1;visibility:visible;transform:none}
.nf-plan__pop-t{margin:0 0 4px;font:700 11px/1.3 var(--ff);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx2)}
.nf-plan__pop-list{margin:0;padding:0;list-style:none}
.nf-plan__pop-list li{padding:9px 0;border-top:1px solid rgba(255,255,255,.08);
  font:600 15px/1.3 var(--ff);color:var(--tx)}
.nf-plan__pop-list li:first-child{border-top:0}
@media (prefers-reduced-motion:reduce){.nf-plan__gem,.nf-plan__pop,.nf-plan__chev{transition:none}}
.nf-plan__state{align-self:end;min-height:46px;margin-top:20px;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:0 4px;padding:8px 14px;border:1px dashed var(--bdS);
  border-radius:12px;font:600 15px/1.35 var(--ff);color:var(--tx2);text-align:center}
/* Свой выпуск (владелец 05.10.2026: «уже ваш — открыть», без «Выбрать») — спокойной
   зелёной строкой-ссылкой в «Ниши месяца» на месте кнопки. */
.nf-plan__mine{align-self:end;min-height:46px;margin-top:20px;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:4px 8px;padding:8px 14px;
  border:1px solid rgba(0,230,118,.32);border-radius:12px;background:rgba(0,230,118,.07);
  color:var(--tx);font:600 15px/1.3 var(--ff);text-decoration:none}
.nf-plan__mine .nf-i{font-size:19px;color:var(--pos)}
.nf-plan__mine b{font-weight:700;color:var(--pos)}
.nf-plan__mine b::after{content:" →"}
.nf-plan__mine:hover{background:rgba(0,230,118,.13);color:var(--tx);text-decoration:none}
.nf-plan--off{opacity:.82}
.nf-plans__hint{margin:0;margin-top:16px;text-align:center;font-size:14px;line-height:1.5;color:var(--tx2)}
/* Ссылка «Радара» на экране «Аккаунт» ведёт на #tariff-year: год вспыхивает. Отступ под
   липкую шапку уже даёт прокрутке .nf-main (scroll-padding-top) — здесь только воздух. */
.nf-plan{scroll-margin-top:16px}
.nf-plan:target{animation:nf-plan-flash 1.6s ease-out 2}
@keyframes nf-plan-flash{0%,100%{box-shadow:0 0 0 1px rgba(255,0,51,.4),0 30px 70px -30px rgba(255,0,51,.6)}
  50%{box-shadow:0 0 0 3px rgba(255,0,51,.95),0 0 60px rgba(255,0,51,.55)}}
@media (prefers-reduced-motion:reduce){.nf-plan:target{animation:none}}
@container (max-width:860px){
  .nf-plans,.nf-plans--two{grid-template-columns:1fr;grid-template-rows:none;gap:16px;max-width:none}
  .nf-plan{grid-row:auto;grid-template-rows:none}
  .nf-plan__top{grid-row:auto;display:flex;flex-direction:column}
}
/* Невысокий экран: окно тарифов встаёт целиком (владелец 03.10: «в одну страницу не
   влезает», «не хочу листать»; 18.10: «кнопки подрезаны, надо листать — во всех браузерах»).
   Ступени — свои, продуктовые: у окна сверху своя шапка, у лендинга — ряд «Только в «Годе»».
   К 18.10 в окне прибавились строки (страны, поиск, выпуск в продаже) — оно выросло до 879 px
   на этой ступени и 1059 px без неё, и не влезало нигде, даже в 1920×1080 (≈950 px окна
   браузера). Три ступени по высоте окна браузера, замер Chromium на окне «Открыть доступ»:
   ≤1100 — 879 px; ≤900 — 733 px (MacBook Air 13 в Safari — 772 px); ≤760 — 617–651 px
   (1536×864 Windows, 1366×768, 1280×800). */
@media (min-width:1024px) and (max-height:1100px){
  .nf-pw{padding-block:12px}
  .nf-pw__card{padding-top:24px;padding-bottom:18px}
  .nf-pw__title{font-size:26px}
  .nf-pw__sub{margin-top:6px}
  .nf-plans{margin-top:14px}
  .nf-plan{padding:18px 20px}
  .nf-plan__price{margin-top:10px}
  .nf-plan__meta{margin-top:8px}
  .nf-plan__what{margin-top:12px;padding-top:10px;font-size:14px;line-height:1.45}
  .nf-plan__list{margin-top:14px;gap:6px}
  .nf-plan__list li{padding-left:28px;font-size:13.5px;line-height:1.4}
  .nf-plan--hot .nf-plan__ex{--ex-pad:5px;padding-left:38px}
  .nf-plan__btn{height:42px;margin-top:16px}
  .nf-plan__state,.nf-plan__mine{min-height:42px;margin-top:16px}
  .nf-plans__hint{margin-top:10px}
}
@media (min-width:1024px) and (max-height:900px){
  .nf-pw{padding-block:10px}
  .nf-pw__card{padding-top:16px;padding-bottom:12px}
  .nf-pw__x{top:10px;right:10px;width:30px;height:30px;font-size:20px}
  .nf-pw__title{font-size:22px}
  .nf-pw__sub{margin-top:4px;font-size:14.5px;line-height:1.4}
  .nf-plans{margin-top:10px}
  .nf-plan{padding:14px 18px}
  .nf-plan__price{margin-top:8px;font-size:32px}
  .nf-plan__meta{margin-top:6px;font-size:13px;line-height:1.35}
  .nf-plan__credit{margin-top:6px;font-size:12.5px}
  .nf-plan__what{margin-top:8px;padding-top:8px;font-size:13.5px;line-height:1.38}
  .nf-plan__list{margin-top:10px;gap:4px}
  .nf-plan__list li{font-size:13px;line-height:1.32}
  .nf-plan--hot .nf-plan__ex{--ex-pad:3px}
  .nf-plan__btn{height:38px;margin-top:12px;font-size:15px}
  .nf-plan__state,.nf-plan__mine{min-height:38px;margin-top:12px}
  .nf-plans__hint{margin-top:6px;font-size:13px}
}
/* Совсем невысокий: строка «Доступ открывается сразу после оплаты…» под карточками
   уходит — то же самое человек видит на шаге оплаты, под кнопками способа. */
@media (min-width:1024px) and (max-height:760px){
  .nf-pw__card{padding-top:14px;padding-bottom:12px}
  .nf-pw__title{font-size:20px}
  .nf-pw__sub{font-size:14px;line-height:1.35}
  .nf-plan{padding:12px 16px}
  .nf-plan__price{font-size:28px}
  .nf-plan__what{font-size:13px;line-height:1.35}
  .nf-plan__list{gap:3px}
  .nf-plan__list li{font-size:12.5px;line-height:1.3}
  .nf-plans__hint{display:none}
}

.nf-tf__note{margin:18px 0 0;font:600 12.5px/1.45 var(--ff);color:var(--tx2);max-width:60ch}

/* ── Шаг оплаты (владелец 05.10.2026) ──────────────────────────────────────
   «Когда я нажимаю «Выбрать», я не хочу, чтобы что-то снизу открывалось — хочу, чтобы
   сверху появлялось на этом окошке: экран оплаты». Слой над окном тарифов (z 230 > 220)
   и над экраном «Аккаунт»: карточка выбранного тарифа наплывает снизу вверх, под ней
   окно тарифов остаётся как было — «Все тарифы» возвращает к нему. На телефоне —
   шторкой от нижнего края, во всю ширину. Карточка спрятана атрибутом [hidden] —
   display у неё НЕ задаём, иначе своё правило спорило бы с [hidden] за приоритет. */
.nf-paystep{position:fixed;inset:0;z-index:230;display:none;place-items:center;padding:24px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(2px);overflow-y:auto}
.nf-paystep--open{display:grid}
.nf-paystep__card{position:relative;width:min(480px,100%);padding:16px 24px 22px;
  background:#141414;border:1px solid var(--bdS);border-radius:22px;text-align:left;
  box-shadow:0 40px 120px -24px rgba(0,0,0,.85)}
.nf-paystep--open .nf-paystep__card{animation:nf-paystep-in .3s cubic-bezier(.2,.7,.2,1)}
.nf-paystep__card--hot{border-color:rgba(255,0,51,.55)}
@keyframes nf-paystep-in{from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:none}}
.nf-paystep__top{display:flex;align-items:center;justify-content:space-between;margin:0 -10px 12px}
.nf-paystep__back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;
  border:0;border-radius:10px;background:transparent;color:var(--tx2);cursor:pointer;
  font:600 13.5px/1 var(--ff)}
.nf-paystep__back .nf-i{font-size:18px}
.nf-paystep__back:hover{color:var(--tx);background:var(--surf)}
.nf-paystep__x{width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--tx2);
  font:600 22px/1 var(--ff);cursor:pointer}
.nf-paystep__x:hover{color:var(--cta);border-color:var(--cta)}
.nf-paystep__eyebrow{font:700 11.5px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx2)}
.nf-paystep__eyebrow--ways{margin-top:20px}
.nf-paystep__title{margin:8px 0 0;font:800 28px/1.15 var(--ff);letter-spacing:-.02em;color:var(--tx)}
.nf-paystep__what{margin:8px 0 0;font:500 14px/1.45 var(--ff);color:var(--tx2)}
.nf-paystep__sum{margin:18px 0 0;padding:2px 16px;border-radius:14px;background:var(--surf);
  border:1px solid var(--bd)}
.nf-paystep__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid var(--bd)}
.nf-paystep__row:first-child{border-top:0}
.nf-paystep__row dt{font:500 13.5px/1.35 var(--ff);color:var(--tx2)}
.nf-paystep__row dd{margin:0;font:600 13.5px/1.35 var(--ff);color:var(--tx);text-align:right}
.nf-paystep__row--credit dd{color:#4CD964}
.nf-paystep__row--total dt{font-weight:700;font-size:15px;color:var(--tx)}
.nf-paystep__row--total dd{font:800 24px/1.1 var(--ff);letter-spacing:-.02em;white-space:nowrap}
.nf-paystep__ways{display:grid;gap:8px;margin-top:10px}
.nf-paystep__form{margin:0}
/* Способ — кнопка формы POST (платёж создаёт сервер). Первый — красный, остальные —
   контуром; вторая строка — через кого идут деньги. */
.nf-paystep__way{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:10px 16px;border:1px solid var(--bdS);border-radius:14px;background:transparent;
  color:var(--tx);text-align:left;cursor:pointer;
  transition:background .15s,filter .15s,transform .15s}
.nf-paystep__way-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.nf-paystep__way-t{font:700 15px/1.2 var(--ff)}
.nf-paystep__way-s{font:500 12.5px/1.2 var(--ff);color:var(--tx2)}
.nf-paystep__way-i{flex:none;font-size:20px;color:var(--tx2)}
.nf-paystep__way:hover{background:var(--surf2)}
.nf-paystep__way--main{background:var(--cta);border-color:transparent;color:#fff}
.nf-paystep__way--main .nf-paystep__way-s,
.nf-paystep__way--main .nf-paystep__way-i{color:rgba(255,255,255,.85)}
.nf-paystep__way--main:hover{background:var(--cta);filter:brightness(1.08);transform:translateY(-1px)}
.nf-paystep__way[aria-busy="true"]{opacity:.7;pointer-events:none}
.nf-paystep__err{margin:12px 0 0;padding:10px 12px;border:1px solid var(--cta);border-radius:12px;
  background:var(--sunk);font:600 13px/1.45 var(--ff);color:var(--tx)}
.nf-paystep__after{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  font:600 13px/1.5 var(--ff);color:var(--tx2)}
.nf-paystep__after .nf-i{flex:none;margin-top:1px;font-size:17px;color:var(--pos)}
.nf-paystep__legal{margin:10px 0 0;font:500 12px/1.5 var(--ff);color:var(--tx2)}
.nf-paystep__legal a{color:var(--tx2);text-decoration:underline;text-underline-offset:2px}
.nf-paystep__legal a:hover{color:var(--tx)}
@media (max-width:560px){
  .nf-paystep{padding:0;place-items:end stretch}
  .nf-paystep__card{width:100%;padding:12px 18px 20px;border-radius:22px 22px 0 0;
    border-bottom:0}
  .nf-paystep__title{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.nf-paystep--open .nf-paystep__card{animation:none}}
/* Тестовая «платёжка» стенда — та же карточка, просто страницей. */
.nf-paytest .nf-paytest__card{margin:32px auto 0}

/* ── Окно после оплаты (владелец 05.10.2026) ───────────────────────────────
   «После оплаты должна появляться красивая всплывашка: вам открыто — и кратенько, что за
   что отвечает; благодарность; и про тарифы выше и срок, чтобы повысить». Слой выше всех
   окон (z 240): человек вернулся с платёжки, и это первое, что он должен увидеть. */
.nf-paid{position:fixed;inset:0;z-index:240;display:none;place-items:center;padding:24px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(3px);overflow-y:auto}
.nf-paid--open{display:grid}
.nf-paid__card{position:relative;width:min(560px,100%);padding:30px 28px 24px;
  background:#0F0F0F;border:1px solid var(--bdS);border-radius:24px;text-align:left;
  box-shadow:0 40px 120px -24px rgba(0,0,0,.85)}
.nf-paid--open .nf-paid__card{animation:nf-paystep-in .35s cubic-bezier(.2,.7,.2,1)}
.nf-paid__card--ok{border-color:rgba(0,230,118,.35);
  background:radial-gradient(520px 200px at 50% -60px,rgba(0,230,118,.14),transparent 70%),#0F0F0F}
.nf-paid__x{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;
  place-items:center;padding:0;border:1px solid var(--bd);border-radius:10px;
  background:transparent;color:var(--tx2);font:600 22px/1 var(--ff);cursor:pointer}
.nf-paid__x:hover{color:var(--cta);border-color:var(--cta)}
.nf-paid__icon .nf-i{font-size:44px;color:var(--tx2)}
.nf-paid__card--ok .nf-paid__icon .nf-i{color:var(--pos)}
.nf-paid__card--fail .nf-paid__icon .nf-i{color:var(--cta)}
.nf-paid__icon--spin .nf-i{display:inline-block;animation:nf-paydone-spin 1.2s linear infinite}
.nf-paid__eyebrow{margin-top:10px;font:700 12px/1 var(--ff);letter-spacing:.08em;
  text-transform:uppercase;color:var(--pos)}
.nf-paid__title{margin:8px 40px 0 0;font:800 26px/1.2 var(--ff);letter-spacing:-.02em;color:var(--tx)}
.nf-paid__lead{margin:8px 0 0;font:500 15px/1.5 var(--ff);color:var(--tx2)}
.nf-paid__lead[hidden]{display:none}
.nf-paid__receipt{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:12px 14px;
  border-radius:14px;background:var(--surf);border:1px solid var(--bd)}
.nf-paid__receipt-img{flex:none;display:block;border-radius:8px;overflow:hidden;background:#fff;
  line-height:0;border:1px solid var(--bd)}
.nf-paid__receipt-img img{display:block;width:110px;height:auto}
.nf-paid__receipt-t{display:grid;gap:6px;min-width:0;font:500 13.5px/1.45 var(--ff);color:var(--tx2)}
.nf-paid__receipt-t b{color:var(--tx);font-weight:700;font-size:14.5px}
.nf-paid__receipt-t a{color:var(--tx);font-weight:700;text-decoration:underline}
.nf-paid__receipt-t [hidden]{display:none}
.nf-paid__receipt-note{font-size:12.5px}
.nf-paid__receipt-spin .nf-i{display:inline-block;margin-right:6px;font-size:16px;
  vertical-align:-3px;animation:nf-paydone-spin 1.2s linear infinite}
.nf-paid__h{margin-top:20px;font:700 11.5px/1 var(--ff);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2)}
.nf-paid__where{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.nf-paid__row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;
  background:var(--surf);border:1px solid var(--bd);font:500 13.5px/1.45 var(--ff);color:var(--tx2)}
.nf-paid__row b{color:var(--tx);font-weight:700}
.nf-paid__row-i{flex:none;margin-top:1px;font-size:19px;color:var(--tx)}
.nf-paid__up{margin-top:16px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,0,51,.42);background:linear-gradient(135deg,rgba(255,0,51,.13),rgba(255,0,51,.03))}
.nf-paid__up-h{display:flex;align-items:center;gap:8px;font:800 15px/1.2 var(--ff);color:var(--tx)}
.nf-paid__up-h .nf-i{font-size:19px;color:var(--cta)}
.nf-paid__up-t{margin:6px 0 0;font:500 13.5px/1.5 var(--ff);color:var(--tx2)}
.nf-paid__credit{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;
  font:600 13.5px/1.45 var(--ff);color:var(--tx)}
.nf-paid__credit .nf-i{flex:none;margin-top:1px;font-size:17px;color:#FF9100}
.nf-paid__more{margin-top:12px;height:38px;padding:0 16px;border:1px solid var(--bdS);
  border-radius:10px;background:transparent;color:var(--tx);font:700 13px/1 var(--ff);cursor:pointer}
.nf-paid__more:hover{background:var(--surf2)}
.nf-paid__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.nf-paid__go{display:inline-flex;align-items:center;justify-content:center;height:46px;
  padding:0 24px;border:0;border-radius:12px;background:var(--cta);color:#fff;
  font:700 15px/1 var(--ff);text-decoration:none;cursor:pointer}
.nf-paid__go:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
@media (max-width:560px){
  .nf-paid{padding:12px}
  .nf-paid__card{padding:24px 18px 18px;border-radius:20px}
  .nf-paid__title{font-size:22px}
  .nf-paid__go{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .nf-paid--open .nf-paid__card{animation:none}
  .nf-paid__icon--spin .nf-i{animation:none}
  .nf-paid__receipt-spin .nf-i{animation:none}
}

/* Телефон: окно с меньшими полями. Карточки встают столбиком сами (container query). */
@media (max-width:700px){
  .nf-pw{padding:12px}
  .nf-pw__card{padding:26px 16px 18px;border-radius:20px}
  .nf-pw__title{font-size:23px;padding:0 30px}
  .nf-plan{padding:22px 18px}
}

/* Плашка ошибки внутри карточки канала. Ставится первым элементом карточки, чтобы
   её нельзя было не заметить: до этого сбой запроса не показывался вовсе — на
   экране просто оставался предыдущий канал. */
.nf-modal__err{margin:0 0 14px;padding:11px 14px;border-radius:12px;
  background:var(--sunk);border:1px solid var(--cta);
  font:600 13px/1.4 var(--ff);color:var(--tx)}

/* Подпись под кривой «Рост»: что именно на ней и за какой период. Без неё плоская
   линия читается как «канал встал», хотя это накопленные просмотры — встал не
   канал, а их прирост. */
.nf-modal__chart-note{margin-top:8px;font:600 12px/1.4 var(--ff);color:var(--tx2)}

/* ── Экран «Аккаунт» ───────────────────────────────────────────────────────
   Переехал на общий каркас 02.09.2026: до этого был единственным экраном на
   старом base.html — без панели, без шапки, без ⌘K, — и четыре пункта меню
   профиля вели именно сюда. */
.nf-acc{max-width:1308px;margin:0 auto;padding:8px 34px 40px}
/* Колонка экрана — по-прежнему 620; шире неё только тарифы (03.10.2026, вечер): они один
   в один лендинговые и встают тремя карточками, как в окне тарифов. */
.nf-acc > :not(.nf-acc__plans){max-width:620px;margin-inline:auto}
.nf-acc__plans{margin:0 0 16px;padding:24px 26px 28px;background:#0F0F0F;
  border:1px solid var(--bd);border-radius:24px}
.nf-acc__plans > .nf-acc__card-h{font-size:17px}
.nf-acc__plans .nf-plans{margin-top:18px}
@media (max-width:700px){.nf-acc__plans{padding:20px 12px 22px;border-radius:20px}}
.nf-acc__h1{font:800 24px/1.2 var(--ff);color:var(--tx);margin:0 0 20px}
/* Шапка экрана: заголовок и логин в одну строку. */
.nf-acc__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 16px;margin-bottom:20px}
.nf-acc__head .nf-acc__h1{margin:0}
.nf-acc__who{font:600 13px/1.3 var(--ff);color:var(--tx2)}
.nf-acc__who b{margin-left:4px;color:var(--tx);font-weight:700}
/* Разделы экрана (05.10.2026): «Подписка и продление» — тариф, тарифы, оплаты, «Радар»;
   «Вход и безопасность» — пароль, запасной код, удаление. */
.nf-acc__h2{margin:30px 0 12px;font:800 18px/1.2 var(--ff);letter-spacing:-.01em;color:var(--tx)}
.nf-acc__head + .nf-acc__h2,.nf-acc__err + .nf-acc__h2,.nf-acc__ok + .nf-acc__h2{margin-top:6px}
/* Что у человека сейчас — та же подпись, что внизу панели, крупно; полоса — своего срока. */
.nf-acc__now-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:14px 18px}
.nf-acc__eyebrow{font:700 11px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.nf-acc__now-name{margin-top:8px;font:800 26px/1.1 var(--ff);letter-spacing:-.02em;color:var(--tx)}
.nf-acc__now-term{margin-top:6px;font:600 13.5px/1.4 var(--ff);color:var(--tx2)}
.nf-acc__now-term .nf-acc__num{color:var(--tx)}
.nf-acc__now-acts{display:flex;flex-wrap:wrap;gap:8px}
.nf-acc__now-acts .nf-acc__btn{margin-top:0}
.nf-acc__bar{margin-top:16px}
.nf-acc__now-open{margin:14px 0 0;font:500 13.5px/1.5 var(--ff);color:var(--tx2)}
.nf-acc__now-hint{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:10px 12px;
  border:1px solid rgba(255,145,0,.35);border-radius:12px;background:rgba(255,145,0,.08);
  font:600 13px/1.45 var(--ff);color:var(--tx)}
.nf-acc__now-hint .nf-i{flex:none;margin-top:1px;font-size:17px;color:#FF9100}
.nf-acc__card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r);
  padding:22px 24px;margin-bottom:16px}
.nf-acc__card-h{font:700 15px/1.2 var(--ff);color:var(--tx);margin-bottom:14px}
.nf-acc__rows{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0 0 18px}
.nf-acc__rows dt{font:600 13px/1.3 var(--ff);color:var(--tx2)}
.nf-acc__rows dd{margin:0;font:600 13px/1.3 var(--ff);color:var(--tx)}
.nf-acc__num{font-variant-numeric:tabular-nums}
.nf-acc__note{margin-top:14px;font:600 12.5px/1.5 var(--ff);color:var(--tx2)}
.nf-acc__note--flat{margin-top:0}
.nf-acc__form{display:grid;gap:8px;max-width:340px}
.nf-acc__form label{font:600 12.5px/1 var(--ff);color:var(--tx2);margin-top:6px}
/* 16px, а не 15: ниже шестнадцати iOS зумит страницу на тапе по полю. Смена
   пароля — не то место, где человека стоит выбрасывать в двукратный зум. */
.nf-acc__form input{background:var(--sunk);border:1px solid var(--bdS);border-radius:10px;
  padding:11px 12px;color:var(--tx);font:400 16px/1.2 var(--ff);outline:none}
.nf-acc__form input:focus{border-color:var(--data)}
.nf-acc__cta,.nf-acc__btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 20px;border:0;border-radius:12px;cursor:pointer;
  background:var(--cta);color:var(--ctaTx);font:700 13.5px/1 var(--ff);
  text-decoration:none;margin-top:8px;width:fit-content}
.nf-acc__cta:hover,.nf-acc__btn:hover{filter:brightness(1.08)}
.nf-acc__btn--quiet{background:transparent;color:var(--tx);border:1px solid var(--bdS)}
.nf-acc__btn--quiet:hover{background:var(--surf2);filter:none}
/* удаление аккаунта и ссылки на документы (юр. проверка 03.10.2026) */
.nf-acc__btn--danger{background:transparent;color:var(--cta);border:1px solid rgba(255,0,51,.55)}
.nf-acc__btn--danger:hover{background:rgba(255,0,51,.1);filter:none}
/* подпись галочки — обычным регистром: общая подпись поля (tokens.css, label) капсом */
.nf-acc__form .nf-acc__check{display:flex;gap:8px;align-items:flex-start;margin-top:4px;font:600 12.5px/1.45 var(--ff);letter-spacing:normal;text-transform:none;color:var(--tx2);cursor:pointer}
.nf-acc__check input{margin-top:2px;accent-color:var(--cta)}
.nf-acc__docs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font:600 12.5px/1.5 var(--ff)}
.nf-acc .nf-acc__docs a{color:var(--tx3);font-weight:600}
.nf-acc .nf-acc__docs a:hover{color:var(--tx)}
.nf-acc__err,.nf-acc__ok{border-radius:12px;padding:11px 14px;margin-bottom:16px;
  font:600 13px/1.4 var(--ff);color:var(--tx);background:var(--sunk)}
.nf-acc__err{border:1px solid var(--cta)}
.nf-acc__ok{border:1px solid var(--pos)}
/* Лендинг v2 (03.10.2026): оплаты, «Радар», итог оплаты и «Ниши месяца». Значок в
   кнопке «Вступить» — со своим отступом: у кнопки нет gap. */
.nf-acc__btn .nf-i{font-size:18px;margin-right:8px}
.nf-acc__pays{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nf-acc__pay{padding:12px 14px;border-radius:12px;background:var(--sunk);border:1px solid var(--bd)}
.nf-acc__pay-main{font:600 13.5px/1.4 var(--ff);color:var(--tx)}
.nf-acc__pay-main b{font-weight:700}
.nf-acc__pay-sub{margin-top:4px;font:600 12.5px/1.5 var(--ff);color:var(--tx2)}
.nf-acc__radar--locked{opacity:.92}
.nf-acc__radar form{margin:0}
.nf-paydone__card{text-align:center;padding:32px 24px}
.nf-paydone__icon{font-size:44px;color:var(--tx2)}
.nf-paydone__card--ok .nf-paydone__icon{color:var(--pos)}
.nf-paydone__card--fail .nf-paydone__icon{color:var(--cta)}
.nf-paydone__icon--spin{animation:nf-paydone-spin 1.2s linear infinite}
@keyframes nf-paydone-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nf-paydone__icon--spin{animation:none}}
.nf-paydone__title{margin-top:10px;font:800 21px/1.25 var(--ff);color:var(--tx)}
.nf-paydone__text{margin:10px auto 0;max-width:46ch;font:600 13.5px/1.55 var(--ff);color:var(--tx2)}
.nf-paydone__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.nf-paydone__actions .nf-acc__btn{margin-top:0}

/* ══ ТЕЛЕФОН, ЧАСТЬ 2: зоны нажатия и списочные виды ════════════════════════
   Шаг 4 плана к релизу, 02.09.2026. Стоит в самом конце файла по той же причине,
   что и блок выше: при равной специфичности выигрывает правило ниже.

   (hover:none) вместо ширины экрана — там, где дело не в размере, а в том, что
   у пальца нет наведения: планшет с мышью должен вести себя как десктоп, а
   широкий телефон — как телефон. */

/* --- 1. Крестик удаления каталога -----------------------------------------
   Он появлялся ТОЛЬКО по наведению, а на телефоне наведения нет: удалить
   каталог было нельзя вовсе — первый тап уходил в саму карточку и перезагружал
   страницу с выбранным каталогом. Постоянно видимый крестик на десктопе
   отвергнут отдельно (комментарий у .nf-cat__del), поэтому показываем его
   только там, где иначе никак. */
@media (hover:none){
  .nf-cat:hover .nf-cat__del,.nf-cat .nf-cat__del{display:grid}
  .nf-cat__del{width:26px;height:26px;top:-9px;right:-9px}
  /* Палец толще курсора: расширяем саму зону попадания, не трогая рисунок. */
  .nf-cat__del::after{content:"";position:absolute;inset:-9px}

  /* --- 2. Галочка выбора на полке --------------------------------------
     Была opacity:0 и проявлялась по наведению — то есть невидима, но нажимаема:
     палец попадал в неё случайно и не понимал, что произошло. А весь сценарий
     «отметить пачку → В каталог» на телефоне был недоступен вовсе. */
  .nf-chcard__tick{opacity:1;width:30px;height:30px}
  .nf-chcard__tick::after{content:"";position:absolute;inset:-7px}

  /* --- 3. Полоса под каруселью ниш --------------------------------------
     Восемь пикселей по вертикали — не зона нажатия, а ловушка: pointerdown на
     ней сразу телепортирует ленту, то есть случайное касание при вертикальной
     прокрутке перематывало карусель. Пальцу она и не нужна — карусель уже
     листается свайпом (overflow-x:auto + scroll-snap). Прячем вместе с её
     отрицательным полем, иначе на месте полосы останется дыра в 22px. */
  .nf-viral-bar{display:none}
  .nf-viral{margin-bottom:8px}

  /* --- 4. Мелкие ручки --------------------------------------------------
     Все были меньше 44×44. Самая опасная — крестик удаления пресета: зона
     примерно 15×15 вплотную к имени, и промах означал ПРИМЕНЕНИЕ пресета
     вместо удаления. Рисунок не трогаем, расширяем область попадания. */
  /* Крестик карточки канала в этот список НЕ входит: он и так position:absolute (в
     правом верхнем углу), и relative здесь выдёргивал его в поток — на телефоне он
     вставал у левого края наполовину за экраном (найдено 03.10.2026). Для ::after
     абсолютный родитель годится так же, как относительный. */
  .nf-preset__del,.nf-vbtn,.nf-viewsw__btn,.nf-cat__no{
    position:relative}
  .nf-preset__del::after,.nf-vbtn::after,.nf-viewsw__btn::after,
  .nf-cat__no::after,.nf-modal__close::after{
    content:"";position:absolute;inset:-8px}
}

@media (max-width:700px){
  /* --- 5. Списочный вид не уезжает вбок ---------------------------------
     Строка витрины требовала минимум 414px, строка полки — 548px, а на 375px
     под контент остаётся около 235. Уезжал при этом не список, а ВЕСЬ main
     вместе с липкой шапкой: у .nf-main overflow-y:auto, значит overflow-x
     вычисляется в auto.

     Лечим тем же приёмом, что уже применён на странице ниши (.nf-np__listwrap):
     список получает СВОЮ горизонтальную прокрутку и минимальную ширину. Список
     листается вбок сам, страница стоит на месте. Резать колонки нельзя: списочный
     вид и существует ради сравнения по колонкам, без них он просто хуже сетки.

     Почему это надо чинить, а не «просто не показывать список на телефоне»: вид
     ЗАПОМИНАЕТСЯ (localStorage, nf2.view / nf2.svview). Человек выбрал список на
     компьютере — на телефоне он получит его же. */
  .nf-ch-list,.nf-chlist{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nf-ch-list__head,.nf-riserow{min-width:720px}
  .nf-chrow{min-width:560px}

  /* Поля экрана. 34px с каждой стороны — это 68px из 375, почти четверть ширины
     на поля. У поиска и страницы ниши на телефоне уже 16px, витрину, шапку и
     полку просто забыли. Меняем переменную, а не padding: на неё завязано
     выравнивание карусели с заголовком. */
  .nf-showcase{--nf-pad-x:16px;padding-bottom:56px}
  .nf-topbar{padding:0 16px}
  .nf-saved{padding:22px 16px 56px}
}

/* --- 6. Ещё уже: 420px и меньше -------------------------------------------
   На 375px в строке поиска имени канала оставалось около 37px, из которых 34
   занимает аватар — имя схлопывалось в ноль. Аватар в узкой строке убираем:
   он и так повторён в сетке, а имя без аватара читается, аватар без имени нет. */
@media (max-width:420px){
  .nf-resrow__ava{display:none}
  .nf-results .nf-resrow,.nf-results .nf-reshead{gap:8px}
}

/* Кнопка карточки, за которой пока ничего нет. Отличается от рабочих приглушением,
   а не отсутствием: место под фичу видно, а готовой она не выглядит. */
.nf-modal__btn--soon{opacity:.55}

/* Листалка на телефоне. Три блока в строку (пустая распорка, номера, «каналов на
   странице») требуют около 560 px — на 375 их не собрать, и строка уносила вбок
   ВЕСЬ main вместе с липкой шапкой: у .nf-main overflow-y:auto, значит overflow-x
   вычисляется в auto. Разводим по строкам, номера пускаем своей прокруткой. */
@media (max-width:700px){
  .nf-pager{flex-direction:column;align-items:stretch;gap:14px}
  .nf-pager__side{display:none}
  .nf-pager__side--right{display:flex;justify-content:center;flex:none}
  .nf-pager__nums{overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  /* Новые экраны тоже получают поля: без них «Аккаунт» и страница ошибки
     упираются текстом в края телефона. */
  .nf-acc{padding-left:16px;padding-right:16px}
  .nf-err{margin-top:8vh;padding:0 16px}
}

/* Подзаголовок блока «Рост»: на кривой прирост за сутки, а не накопленная сумма.
   Без подписи её читают как «всего просмотров», и тогда падение темпа выглядит
   ростом — ради этой разницы график и переделан. */

/* Плитка со СКРЫТЫМ кадром. Отличается от пустой намеренно: пустая значит «мы
   ещё не собрали ролики», скрытая — «откройте доступ». До этого под замком
   обложка уходила в первую, и закрытое читалось как отсутствующее.
   Внутри неё пусто: адреса кадра нет вовсе, в нём сидит настоящий id ролика. */
/* Плитка со СКРЫТЫМ кадром: сама она НЕ размывается — размывается вся лента
   целиком (.nf-cover--locked ниже). Четыре отдельно размытых прямоугольника
   читались как четыре сломанных картинки; одна размытая лента читается как одна
   закрытая вещь. Внутри плитки пусто: адреса кадра нет вовсе, в нём сидит
   настоящий id ролика. */
.nf-cover__tile--hidden{
  background:linear-gradient(135deg,var(--surf2) 0%,var(--sunk) 55%,var(--surf2) 100%);
}
/* Один блюр на всю ленту. Зазоры между плитками он размывает заодно — и это как
   раз то, что превращает три прямоугольника в одну поверхность. */
.nf-cover--locked .nf-cover__strip{filter:blur(7px);transform:scale(1.04)}
/* Топ-3 ролика в карточке канала — то же самое. */
.nf-modal__thumb--hidden{
  background:linear-gradient(135deg,var(--surf2) 0%,var(--sunk) 55%,var(--surf2) 100%);
  filter:blur(2px);
}

/* ── График: число за 48 часов ─────────────────────────────────────────────
   ПЛАШКОЙ, со своим фоном, справа, отдельной строкой над кривой. Три попытки до
   этого: одной строкой девятизначных чисел (не читались — владелец прочёл хвост
   как «5 805»), двумя ячейками своей строкой слева (просил вправо), двумя
   ячейками в шапке справа (пропали из виду совсем). С 16.09.2026 плашка одна:
   «за неделю» снята вместе с шапкой «Рост» и переключателем метрики.
   Плашка со своим фоном не зависит от того, что происходит в соседней строке:
   её видно всегда, чем бы ни был занят остальной ряд. */
.nf-modal__now{display:flex;gap:10px;justify-content:flex-end;
  margin:0 0 16px;flex-wrap:wrap}
.nf-modal__now-one{display:flex;align-items:baseline;gap:7px;
  background:var(--dataSoft);border:1px solid var(--data);border-radius:999px;
  padding:7px 14px}
/* Белым, не голубым (владелец 14.09.2026): это просмотры, а не «данные-ссылка». */
.nf-modal__now-val{font:800 18px/1 var(--ff);color:var(--tx);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nf-modal__now-cap{font:600 11.5px/1 var(--ff);color:var(--tx2);white-space:nowrap}

/* Слой наведения поверх кривой. Ловит мышь сам: попасть курсором в polyline
   толщиной 2,6 px невозможно. */
.nf-modal__chart-box{position:relative}
.nf-modal__chart-hit{position:absolute;inset:0;right:var(--nf-grid-gutter);cursor:crosshair}
.nf-modal__chart-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--data);box-shadow:0 0 0 3px var(--dataSoft);
  pointer-events:none}
.nf-modal__chart-tip{position:absolute;transform:translate(-50%,-100%);
  background:var(--sunk);border:1px solid var(--bdS);border-radius:9px;
  padding:6px 10px;font:600 12px/1 var(--ff);color:var(--tx);white-space:nowrap;
  pointer-events:none;z-index:2}
.nf-modal__chart-tip[data-side="right"]{transform:translate(0,-100%)}
.nf-modal__chart-tip[data-side="left"]{transform:translate(-100%,-100%)}

/* Подпись центрируется на своей точке; крайние прижаты к краю, чтобы не
   уезжать за обрез карточки. */
.nf-modal__chart-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.nf-modal__chart-axis span[data-edge="start"]{transform:none}
.nf-modal__chart-axis span[data-edge="end"]{transform:translateX(-100%)}

@media (max-width:700px){
  /* На узком экране шапка переносится, и «правый угол» теряет смысл: числа
     встают своей строкой слева, иначе они прижались бы к краю в одиночестве. */
  .nf-modal__now{gap:8px;justify-content:flex-start}
  .nf-modal__now-val{font-size:16px}
}


/* ══ НИШИ МЕСЯЦА — ПОЛКА МЕСЯЦЕВ ═══════════════════════════════════════════
   Вход в раздел (владелец 11.10.2026, макет .superpowers/mockups/months/v1gem-noaccess.png):
   плитки месяцев, новые первыми. Плитка — три слота-шортса СТРОГО 9:16 в ряд, одинаковых, с
   равными промежутками и скруглениями; её высоту задают сами слоты, поэтому плитка горизонтальная
   (три кадра 9:16 и поля — около 1,69 : 1) и ничто не вылезает за край. Статус слева сверху,
   «Месяц год» крупно внизу слева над мягким затемнением — и больше ничего (владелец 12.10.2026:
   кадры «срезаны» и «вылезают» — у прежней плитки слоты тянулись на всю её высоту).
   Открытая — кадры шортсов каналов выпуска; закрытая и «в разработке» — гем марки в каждом слоте
   по нарастающей, тонкая сетка и стеклянный блик. Разметка — monthly.html.
   По две плитки в ряд на компьютере (по три кадры мелкие), по одной на телефоне.
   Тяжёлого нет: ни backdrop-filter, ни теней-свечений, ни анимаций — свечение гема нарисовано
   градиентом, наведение — кольцо, как у карточек продукта. */
/* Ряд — во всю ширину страницы, но не больше двух плиток: колонка не уже половины ряда.
   До 23.10.2026 ряд стоял шириной 1180 у левого края, и на полном экране справа оставалась
   полоса пустоты (владелец о выпуске: «по-ублюдски ацентрировано»). Страница — с потолком
   выпуска и по центру (.nf-showcase.nf-monthly ниже). Кадрам растянутых плиток — крупная
   копия по srcset (monthly.html). */
.nf-showcase.nf-months{max-width:1668px;margin-inline:auto}
.nf-months__grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,max(400px,calc((100% - 22px) / 2))),1fr));
  gap:22px}
.nf-month{position:relative;display:block;width:100%;margin:0;padding:9px;border:0;box-sizing:border-box;
  border-radius:var(--r);background:var(--sunk);color:var(--tx);font:inherit;text-align:left;
  text-decoration:none;overflow:hidden}
a.nf-month:hover,a.nf-month:focus{color:var(--tx);text-decoration:none}
button.nf-month,button.nf-month:hover{filter:none}
.nf-month--open,.nf-month--closed{cursor:pointer}
.nf-month--open:hover,.nf-month--closed:hover,.nf-month:focus-visible{outline:none;
  box-shadow:0 0 0 1.5px rgba(62,166,255,.85)}
.nf-month__slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* Кадр лежит в слоте абсолютно: размер слота задаёт только aspect-ratio, картинка на него не влияет. */
.nf-month__slot{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;
  background:linear-gradient(170deg,var(--surf2) 0%,var(--surf) 70%)}
.nf-month__slot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* Слот без кадра: тонкая сетка и стеклянный блик, в середине — гем со свечением. Размер гема — доля
   ширины слота: на телефоне слот вдвое уже, и гемы уменьшаются вместе с ним. */
.nf-month__slot--gem{background-color:#121212;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(170deg,#1C1C1C 0%,#111 60%);
  background-size:16px 16px,16px 16px,100% 100%;background-position:-1px -1px,-1px -1px,0 0}
.nf-month__slot--gem::before{content:"";position:absolute;left:50%;top:44%;
  width:calc(var(--nf-gem) * 2.6);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,230,118,.24) 0%,rgba(0,230,118,.07) 40%,transparent 68%)}
.nf-month__slot--gem::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 41%,
    rgba(255,255,255,0) 52%,rgba(255,255,255,.04) 60%,rgba(255,255,255,0) 66%)}
.nf-month__slot--s{--nf-gem:20%}
.nf-month__slot--m{--nf-gem:30%}
.nf-month__slot--l{--nf-gem:44%}
.nf-month__gem{position:absolute;left:50%;top:44%;z-index:1;width:var(--nf-gem);height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%)}
/* Мягкое затемнение снизу — под «Месяц год», поверх кадров; по краям повторяет скругление слотов. */
.nf-month__shade{position:absolute;left:9px;right:9px;bottom:9px;height:52%;border-radius:0 0 10px 10px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(13,13,13,.5) 45%,rgba(13,13,13,.86) 100%)}
.nf-month__status{position:absolute;left:21px;top:21px;z-index:2;display:inline-flex;align-items:center;
  gap:7px;height:34px;padding:0 15px 0 12px;border-radius:999px;font:700 14px/1 var(--ff);
  white-space:nowrap}
.nf-month__status .nf-i{font-size:18px}
.nf-month__status--open{background:#173B21;color:#6FE08A}
.nf-month__status--closed{background:rgba(0,0,0,.78);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bdS)}
.nf-month__status--closed .nf-i{color:var(--tx2)}
.nf-month__status--dev{background:#3A3216;color:var(--warn)}
.nf-month__dot{width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}
/* Слот с нишей выпуска у закрытой плитки (владелец 20–22.10.2026): тёмный слот со свечением
   цвета ниши — как плашка замка на карточке ниши («тёмная со свечением цвета ниши», 17.10.2026) —
   и название крупно. Цвет — niches.hue, тот же, что у ниши на карточках канала. Гема здесь нет:
   место занимает ниша. */
.nf-month__slot--named{--nf-niche:var(--tx2)}
.nf-month__slot--named::before{top:44%;width:180%;
  background:radial-gradient(circle,color-mix(in srgb,var(--nf-niche) 46%,transparent) 0%,
    color-mix(in srgb,var(--nf-niche) 14%,transparent) 36%,transparent 64%)}
.nf-month__niche{position:absolute;left:10px;right:10px;top:44%;z-index:1;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.nf-month__niche-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;font:800 24px/1.06 var(--ff);letter-spacing:-.8px;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.5)}
/* На телефоне слот вдвое уже и чуть выше обычного. */
@media (max-width:480px){
  .nf-month--closed[data-named] .nf-month__slot{aspect-ratio:9/18}
  .nf-month__niche{left:4px;right:4px;top:46%}
  .nf-month__niche-name{font-size:13.5px;letter-spacing:-.4px}
}
/* Призыв купить у плитки с нишами не ложится на середину — там названия: на наведении он
   в правом нижнем углу, а без наведения (телефон) — строкой под слотами. */
.nf-month--closed[data-named] .nf-month__ask{top:auto;bottom:18px;left:auto;right:18px;transform:none;
  padding:0;border:0;background:none}
.nf-month--closed[data-named] .nf-month__ask-t{display:none}
@media (hover:none){
  .nf-month--closed[data-named] .nf-month__ask{position:static;align-items:stretch;width:auto;max-width:none;
    margin-top:8px}
  .nf-month--closed[data-named] .nf-month__buy{justify-content:center}
  .nf-month--closed[data-named] .nf-month__shade{bottom:53px}
  .nf-month--closed[data-named] .nf-month__name{bottom:61px}
}
.nf-month__name{position:absolute;left:25px;right:25px;bottom:23px;z-index:2;display:flex;
  align-items:baseline;gap:10px;min-width:0}
.nf-month__name b{font:800 40px/1 var(--ff);letter-spacing:-1.6px;color:#fff;white-space:nowrap}
.nf-month__name span{font:600 16px/1 var(--ff);color:var(--tx2)}
@media (max-width:480px){
  .nf-months__grid{gap:16px}
  .nf-month__status{left:17px;top:17px;height:30px;padding:0 12px 0 10px;font-size:13px}
  .nf-month__status .nf-i{font-size:16px}
  .nf-month__name{left:19px;right:19px;bottom:17px;gap:8px}
  .nf-month__name b{font-size:28px;letter-spacing:-1px}
  .nf-month__name span{font-size:14px}
}
/* Призыв у закрытой — на наведении и фокусе; на экране без наведения (телефон) — всегда: иначе
   не понять, что плитка нажимается. */
.nf-month__ask{position:absolute;left:50%;top:48%;z-index:3;display:none;flex-direction:column;
  align-items:center;gap:12px;width:max-content;max-width:calc(100% - 42px);padding:16px 18px 18px;
  transform:translate(-50%,-50%);border-radius:16px;background:rgba(10,10,10,.92);
  border:1px solid rgba(255,255,255,.22)}
.nf-month--closed:hover .nf-month__ask,.nf-month--closed:focus-visible .nf-month__ask{display:flex}
@media (hover:none){
  .nf-month--closed .nf-month__ask{display:flex;padding:0;border:0;background:none}
  .nf-month--closed .nf-month__ask-t{display:none}
  .nf-month--closed .nf-month__buy{height:36px;padding:0 16px;font-size:13px}
}
.nf-month__ask-t{display:flex;align-items:center;gap:7px;font:700 15px/1.2 var(--ff);color:var(--tx)}
.nf-month__ask-t .nf-i{font-size:19px;color:var(--tx2)}
.nf-month__buy{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;
  background:var(--cta);color:var(--ctaTx);font:700 14px/1 var(--ff);white-space:nowrap}
/* Над выпуском — назад на полку. */
.nf-monthly__back{margin-bottom:4px}


/* ══ НИШИ МЕСЯЦА — ВАРИАНТ C ═══════════════════════════════════════════════
   Выпуск листается по нишам: одна ниша на экране, листалка продукта сверху и снизу справа;
   слева канал ниши, справа сама ниша (владелец 11.10.2026, спека
   docs/superpowers/specs/2026-10-11-issue-page-c.md). Эталон вида — макет variant-C2 в
   .superpowers/mockups воркtree выпусков: размеры, отступы и цвета ниже перенесены с него числами,
   замеренными в браузере. Разметка — _monthly_issue.html, листание — monthly.js. Этот же раздел
   берёт вид покупателя в кухне (там ни .nf-app, ни app.js: кнопки здесь одеты своими правилами
   целиком, а не сбросом приложения).

   Тяжёлого для прокрутки нет и не добавлять (владелец 11.10.2026, замер в Firefox с окном на
   120 кадрах): ни backdrop-filter, ни анимаций на прокрутке, ни теней в тысячи пикселей —
   свечение только на наведении, и только у шортса и аватара. */

/* Цвет просмотров YouTube Studio: снят пипеткой со скриншотов «Аналитики» (светлая тема
   #2EA6CB, тёмная светлее — этот). Кривая, капсула «за 48 часов» и крупные числа «почему
   сейчас»; --data (#3EA6FF) — голубой ссылок и наведения, это другое. */
:root{--views:#4EB4DA;--viewsSoft:rgba(78,180,218,.16)}

/* Выпуск — контейнер измерения: две колонки или одна решает ЕГО ширина, а не окна. Рядом с
   панелью в 264 px окно на 1100 px оставляет выпуску 770 — две колонки там уже давят; в кухне
   же рамка «Компьютер» — 1280 px без панели. Выпуск тянется вместе с окном: до 23.10.2026 он
   стоял шириной макета (1264) у левого края, и на полном экране справа оставалась полоса
   пустоты (владелец: «по-ублюдски ацентрировано»). Потолок — у всей страницы, и она стоит по
   центру: «Все месяцы» и выпуск не расходятся, а на большом мониторе выпуск не растягивается
   в нитку текста. Базовый кегль — как у текста макета; font сбрасывает табличные цифры body. */
.nf-showcase.nf-monthly{max-width:1668px;margin-inline:auto}
.nf-monthly__issue{container:nf-issue / inline-size;margin-top:28px;
  font:400 15px/1.55 var(--ff);color:var(--tx)}
.nf-monthly__issue+.nf-monthly__issue{margin-top:48px}
.nf-monthly__draft{margin-bottom:14px;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--warn) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  font:700 13px/1.4 var(--ff);color:var(--tx)}

/* ── Шапка выпуска и листалка ── */
/* Заголовок и листалка — на одной линии, по центру. По макету название сидело чуть выше центра
   листалки (нижнее поле 12, как у h2 в tokens.css), и владелец прочёл это как две разные строки
   (23.10.2026). Поле до ниши теперь у самой полосы. */
.nf-monthly__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 20px;margin-bottom:12px}
.nf-monthly__bar--bottom{justify-content:flex-end;margin-top:18px;margin-bottom:0}
.nf-monthly__head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;min-width:0}
.nf-monthly__title{margin:0;font:800 22px/1.2 var(--ff);letter-spacing:-.7px;color:var(--tx)}
.nf-monthly__when{font-size:14px;color:var(--tx2)}
.nf-monthly__mark{padding:5px 9px;border-radius:999px;font:700 11px/1 var(--ff);color:var(--pos);
  background:color-mix(in srgb,var(--pos) 16%,transparent)}
/* Сама листалка — правила «Постраничности» выше; здесь только место и то, чего вне .nf-app
   (вид в кухне) нет: стрелка не светлеет фильтром базовой кнопки. Погасшая стрелка на мышь
   не отвечает вовсе. Телефонное правило листалки (своя прокрутка номеров) здесь не нужно:
   кнопок пять. */
.nf-monthly__pager{display:flex;flex:none;margin-left:auto}
.nf-monthly__pager .nf-pager__nums{overflow:visible;padding-bottom:0}
.nf-monthly__pager .nf-pager__arrow:hover{filter:none}
.nf-monthly__pager .nf-pager__arrow[disabled]{pointer-events:none}
/* Без скрипта листать нечем: листалки нет, ниши стоят столбиком. Атрибут data-js ставит
   строчка скрипта в самом начале выпуска — тогда остаётся видна только текущая ниша. */
.nf-monthly__issue:not([data-js]) .nf-monthly__pager,
.nf-monthly__issue:not([data-js]) .nf-monthly__bar--bottom{display:none}
.nf-monthly__issue[data-js] .nf-monthly__niche:not([data-current]){display:none}

/* ── Разворот ниши. Колонки — в пропорции макета (540 : 648): уже окно — уже обе, ширина
   1264 px даёт ровно макет. Справа два куска сетки: верх ниши (intro) и то, за что платят
   (more), — на узком экране между ними встаёт канал. ── */
.nf-monthly__niche{display:grid;grid-template-columns:minmax(0,540fr) minmax(0,648fr);
  grid-template-rows:auto 1fr;grid-template-areas:"chan intro" "chan more";column-gap:30px;
  align-items:start;margin-top:20px;padding:22px;border-radius:28px;background:var(--surf);
  border:1px solid var(--bd)}
.nf-monthly__niche--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "more"}
.nf-monthly__intro{grid-area:intro;min-width:0;padding:8px 8px 0 4px}
.nf-monthly__more{grid-area:more;min-width:0;padding:0 8px 6px 4px}
/* :where — без веса: поля абзацев снимаем, но классы блоков (.nf-monthly__tip) их ставят сами. */
:where(.nf-monthly__niche) p{margin:0}

/* ── Ниша: буква, вердикт, имя, «что за ниша» ── */
.nf-monthly__kicker{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx2)}
.nf-monthly__tier{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;
  border-radius:11px;font:800 19px/1 var(--ff);color:var(--nf-tier,var(--tx2));
  border:2px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.nf-monthly__nichename{margin:12px 0 14px;font:800 52px/1 var(--ff);letter-spacing:-.025em;
  color:var(--tx);overflow-wrap:break-word}
.nf-monthly__about p{max-width:62ch}
.nf-monthly__about p+p{margin-top:4px}
/* Пункты «что за ниша» / «что делает канал» (вариант 3 оформления, 11.10.2026): эмодзи в плитке,
   жирная метка, текст. Главная фраза (первая строка без метки) — крупнее. */
.nf-monthly__about>*+.nf-monthly__pt,.nf-monthly__does>*+.nf-monthly__pt,
.nf-monthly__pt+p{margin-top:10px}
.nf-monthly__lead{font:500 16px/1.5 var(--ff);color:var(--tx)}
.nf-monthly__pt{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.nf-monthly__pt>i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--surf2);font-style:normal;font-size:15px;line-height:1}
.nf-monthly__pt>p{margin:0;padding-top:4px;font-size:14.5px;line-height:1.5;color:var(--tx);max-width:62ch}
.nf-monthly__pt>p>b:first-child{font-weight:700}
.nf-monthly__does .nf-monthly__pt>i{background:var(--bg)}
.nf-monthly__does .nf-monthly__lead{font:inherit;font-size:15px}
.nf-monthly__sect{margin:28px 0 12px;font:800 17px/1.2 var(--ff);color:var(--tx)}

/* ── «Почему сейчас»: плитки на обычном тёмном фоне, число — цветом просмотров, деньги —
   зелёным. Одна плитка — во всю ширину, а не половиной. ── */
.nf-monthly__why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nf-monthly__plus{min-width:0;padding:17px 18px 16px;border-radius:18px;background:var(--bg);
  border:1px solid var(--bd)}
.nf-monthly__plus:only-child{grid-column:1/-1}
.nf-monthly__plus-big{display:block;font:800 32px/1.05 var(--ff);letter-spacing:-.015em;
  color:var(--views);font-variant-numeric:tabular-nums}
.nf-monthly__plus-cap{display:flex;align-items:flex-start;gap:9px;margin-top:11px}
.nf-monthly__plus-ico{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--views);color:var(--bg)}
.nf-monthly__plus-ico svg{display:block;width:13px;height:13px}
.nf-monthly__plus-small{padding-top:1px;font-size:13.5px;line-height:1.45;color:var(--tx2)}
.nf-monthly__plus--money .nf-monthly__plus-big{color:var(--pos)}
.nf-monthly__plus--money .nf-monthly__plus-ico{background:var(--pos)}

/* ── «Как создаётся контент»: эмодзи в плитке, название, инструменты плашками, строка — что
   делает. Блок растёт и сжимается по числу пунктов. ── */
.nf-monthly__make{padding:4px 18px;border-radius:18px;background:var(--bg)}
.nf-monthly__step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:3px 14px;
  align-items:center;padding:12px 0;border-top:1px solid var(--bd)}
.nf-monthly__step:first-child{border-top:0}
.nf-monthly__step-ico{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;
  border-radius:12px;background:var(--surf2);font-size:19px}
.nf-monthly__step-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.nf-monthly__step-t b{margin-right:4px;font:700 15px/1.2 var(--ff)}
.nf-monthly__tool{padding:4px 9px;border-radius:999px;background:var(--surf2);
  border:1px solid var(--bd);font:600 12.5px/1.2 var(--ff);color:var(--tx)}
.nf-monthly__step-text{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--tx2)}
/* Прежний черновик: «Как это повторить» одной простынёй, переносы — как набрал владелец. */
.nf-monthly__how{padding:16px 18px;border-radius:18px;background:var(--bg);white-space:pre-line;
  overflow-wrap:anywhere}
.nf-monthly__tip{margin-top:14px;padding:13px 16px;border-radius:16px;font-size:14.5px;
  background:color-mix(in srgb,var(--warn) 9%,var(--bg));
  border:1px solid color-mix(in srgb,var(--warn) 24%,transparent)}
.nf-monthly__tip-h{color:var(--warn)}
/* Совет строками, как его пишет ИИ и владелец: точек в конце строк нет, новая строка — новая мысль;
   без переноса строки склеивались («…охотнее всего Собери шаблон…»). */
.nf-monthly__tip{white-space:pre-line}
/* Совет без блоков над ним — отступ от описания ниши как у заголовка блока. */
.nf-monthly__more>.nf-monthly__tip:first-child{margin-top:28px}

/* ── Канал: три шортса, карточка, «что делает», четыре числа, кривая ── */
.nf-monthly__chan{grid-area:chan;min-width:0;padding:14px;border-radius:22px;background:var(--bg)}
.nf-monthly__shots{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px}
/* Плитка держит форму сама (9:16), картинка лежит в ней: не загрузился кадр — остаётся плитка. */
.nf-monthly__shot{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;
  background:var(--surf2);transition:transform .16s ease,box-shadow .16s ease}
.nf-monthly__shot img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;border-radius:inherit}
/* «Голубое — сюда наведена мышь» (ОДИН ОТКЛИК НА НАВЕДЕНИЕ выше): кольцо с ореолом и подъём. */
a.nf-monthly__shot:hover,a.nf-monthly__shot:focus-visible{transform:translateY(-3px);outline:none;
  box-shadow:0 0 0 2px var(--data),0 0 20px rgba(62,166,255,.32),0 0 46px rgba(62,166,255,.16)}
/* Карточка канала: сама не горит — ссылка только аватар и имя с хэндлом (как a.nf-modal__title
   и .nf-modal__handle). Рамка и поле снизу — как в макете (там их дал .card из tokens.css). */
.nf-monthly__card{display:flex;align-items:center;gap:12px;margin:14px 0 18px;padding:12px 14px;
  border-radius:16px;background:var(--surf);border:1px solid var(--bd)}
.nf-monthly__who{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;
  text-decoration:none}
a.nf-monthly__who:hover{color:inherit}
.nf-monthly__ava{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--surf2);font:700 16px/1 var(--ff);color:var(--tx2);
  transition:box-shadow .16s ease}
.nf-monthly__ident{min-width:0}
.nf-monthly__name{display:block;overflow:hidden;font-size:16px;white-space:nowrap;
  text-overflow:ellipsis;transition:color .16s ease}
.nf-monthly__handle{display:block;overflow:hidden;font-size:13px;line-height:23.25px;
  color:var(--tx2);white-space:nowrap;text-overflow:ellipsis;transition:color .16s ease}
a.nf-monthly__who:hover .nf-monthly__ava,a.nf-monthly__who:focus-visible .nf-monthly__ava{
  box-shadow:0 0 0 2px var(--data),0 0 16px rgba(62,166,255,.35)}
a.nf-monthly__who:hover .nf-monthly__name,a.nf-monthly__who:hover .nf-monthly__handle,
a.nf-monthly__who:focus-visible .nf-monthly__name{color:var(--data)}
a.nf-monthly__who:focus-visible{outline:none}
.nf-monthly__reach{flex:none;margin-left:auto;text-align:right}
.nf-monthly__reach b{display:block;font-size:15px}
.nf-monthly__reach span{font-size:13px;color:var(--tx2)}
.nf-monthly__does{margin-top:10px;padding:13px 16px 14px;border-radius:14px;background:var(--surf)}
.nf-monthly__does-h{display:block;margin-bottom:7px;font:700 15px/1.2 var(--ff)}
.nf-monthly__does p+p{margin-top:4px}
.nf-monthly__nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
.nf-monthly__nums>div{min-width:0;padding:11px 14px;border-radius:14px;background:var(--surf)}
.nf-monthly__nums dt{font-size:12.5px;color:var(--tx2)}
.nf-monthly__nums dd{margin:3px 0 0;font:700 17px/1.3 var(--ff)}
.nf-monthly__money{color:var(--pos)}

/* Кривая: как график карточки канала (.nf-modal__chart-*), но цветом просмотров. Справа —
   поле под числа сетки; линии кончаются там, где кончается кривая. */
.nf-monthly__chart{margin-top:10px;padding:13px 14px 12px;border-radius:14px;background:var(--surf);
  --nf-mi-gut:46px}
/* Капсула не влезла рядом с заголовком — встаёт своей строкой под ним (как .nf-modal__now на
   узком экране). Зазор по горизонтали — меньший из возможных: в строку их разводит
   space-between, а 6 px оставляют капсулу в строке у выпуска рядом с раскрытой панелью на
   1440 px. */
.nf-monthly__chart-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 6px;margin-bottom:14px}
.nf-monthly__chart-head>b{font:700 14px/1 var(--ff)}
/* Капсула «за 48 часов» — как .nf-modal__now: число белым, подпись серым. */
.nf-monthly__now{display:flex;align-items:baseline;gap:7px;padding:7px 14px;border-radius:999px;
  background:var(--viewsSoft);border:1px solid var(--views)}
.nf-monthly__now b{font:800 18px/1 var(--ff);color:var(--tx);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.nf-monthly__now span{font:600 11.5px/1 var(--ff);color:var(--tx2);white-space:nowrap}
.nf-monthly__chart-box{position:relative;height:150px;margin-right:var(--nf-mi-gut)}
.nf-monthly__chart-grid>span{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.08)}
.nf-monthly__chart-grid>span>span{position:absolute;top:-7px;right:calc(-1 * var(--nf-mi-gut));
  font:600 11px/1 var(--ff);color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.nf-monthly__chart-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Слой наведения ловит мышь сам: попасть курсором в линию толщиной 2,6 px невозможно. */
.nf-monthly__chart-hit{position:absolute;inset:0;cursor:crosshair}
.nf-monthly__chart-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--views);box-shadow:0 0 0 3px var(--viewsSoft);pointer-events:none}
.nf-monthly__chart-tip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 12px));
  padding:6px 10px;border-radius:9px;background:var(--sunk);border:1px solid var(--bdS);
  font:600 12px/1 var(--ff);color:var(--tx);white-space:nowrap;pointer-events:none}
/* У краёв плашка уезжала бы за обрез — прижимается к своей стороне (как app.js). */
.nf-monthly__chart-tip[data-side="left"]{transform:translate(-100%,calc(-100% - 12px))}
.nf-monthly__chart-tip[data-side="right"]{transform:translate(0,calc(-100% - 12px))}
.nf-monthly__chart-dot[hidden],.nf-monthly__chart-tip[hidden]{display:none}
.nf-monthly__chart-axis{position:relative;height:11px;margin:9px var(--nf-mi-gut) 0 0;
  font:600 11px/1 var(--ff);color:var(--tx2)}
.nf-monthly__chart-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.nf-monthly__chart-axis span[data-edge="start"]{transform:none}
.nf-monthly__chart-axis span[data-edge="end"]{transform:translateX(-100%)}

/* ── Тизер: плитки без кадров, замок и «Открыть выпуск» ── */
.nf-monthly__shot--stub{background:linear-gradient(135deg,var(--surf2) 0%,var(--sunk) 55%,var(--surf2) 100%)}
.nf-monthly__lockmark{position:absolute;left:50%;top:50%;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--nf-lock-plate);border:1px solid var(--bdS);color:var(--tx)}
.nf-monthly__lockmark .nf-i{font-size:26px}
.nf-monthly__lock{margin-top:14px;padding:16px 18px 18px;border-radius:16px;background:var(--surf);
  border:1px solid var(--bd)}
.nf-monthly__lock-text{font:600 13.5px/1.55 var(--ff);color:var(--tx2)}
.nf-monthly__lock-text b{color:var(--tx)}
.nf-monthly__buy{margin-top:14px;min-height:42px;padding:0 20px;border:0;border-radius:999px;
  cursor:pointer;background:var(--cta);color:var(--ctaTx);font:700 13.5px/1 var(--ff)}
.nf-monthly__buy:hover{filter:brightness(1.08)}

@media (prefers-reduced-motion:reduce){
  .nf-monthly__shot,.nf-monthly__ava,.nf-monthly__name,.nf-monthly__handle{transition:none}
  a.nf-monthly__shot:hover,a.nf-monthly__shot:focus-visible{transform:none}
}

/* ── Узко: одна колонка — ниша, канал, почему сейчас, контент, совет (спека §3). Порог —
   ширина выпуска, а не окна: телефон сюда попадает всегда, ноутбук — нет. До 23.10.2026 порог
   стоял на 940, и с открытыми панелями браузера и продукта (выпуску остаётся 938) ноутбук
   владельца собирал выпуск в одну колонку не шире 640, а справа оставалась пустота — «очень
   узкая тонкая карточка, справа куча места». Теперь две колонки держатся до 800; уже — одна
   колонка во всю ширину выпуска, без потолка: с ним рядом снова была бы пустота. ── */
@container nf-issue (max-width:799px){
  .nf-monthly__niche{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"intro" "chan" "more"}
  .nf-monthly__niche--solo{grid-template-areas:"intro" "more"}
  .nf-monthly__intro{padding:4px 4px 0}
  .nf-monthly__chan{margin-top:18px}
  .nf-monthly__more{padding:0 4px 4px}
}
@container nf-issue (max-width:560px){
  .nf-monthly__niche{margin-top:16px;padding:12px;border-radius:22px}
  .nf-monthly__nichename{margin:10px 0 12px;font-size:34px}
  .nf-monthly__chan{padding:10px;border-radius:18px}
  .nf-monthly__shots{gap:6px}
  .nf-monthly__shot{border-radius:12px}
  .nf-monthly__card{flex-wrap:wrap;row-gap:6px;padding:10px 12px}
  .nf-monthly__reach{flex:1 1 100%;display:flex;align-items:baseline;gap:6px;margin-left:0;
    text-align:left}
  .nf-monthly__reach b{display:inline}
  .nf-monthly__does{padding:12px 14px 13px}
  .nf-monthly__chart{--nf-mi-gut:40px}
  .nf-monthly__chart-axis span:nth-child(even){display:none}
  .nf-monthly__why{grid-template-columns:minmax(0,1fr)}
  .nf-monthly__plus-big{font-size:28px}
  .nf-monthly__make{padding:2px 14px}
  .nf-monthly__step{grid-template-columns:36px minmax(0,1fr);column-gap:12px}
  .nf-monthly__step-ico{width:36px;height:36px;border-radius:11px;font-size:17px}
  .nf-monthly__how{padding:14px}
}
/* Телефон: «$10 640–12 420» в половину ряда не входит — числа столбиком. */
@container nf-issue (max-width:400px){
  .nf-monthly__nums{grid-template-columns:minmax(0,1fr)}
}
/* Самый узкий: капсула «за 48 часов» без слова «просмотров» — заголовок «Просмотры по дням»
   стоит над ней, а целиком она шире карточки. */
@container nf-issue (max-width:340px){
  .nf-monthly__now-w{display:none}
}


/* ═══ Тур по продукту ═══════════════════════════════════════════════════════════════
   Владелец 17.10.2026, вариант «A»: страница затемнена, вокруг того, о чём шаг, — вырезы
   с голубым кольцом (--data, цвет «смотри сюда»), рядом окно с текстом и кнопками.
   Затемнение — куски вокруг вырезов и уголки-скругления, их место и размер ставит
   product/static/tour.js в каждом кадре перехода (почему не холст — в шапке tour.js); здесь
   их вид, кольца, пульс выреза-кнопки, щиты, окно и номера. Слой — прямой ребёнок <body> с
   z-index 400: выше карточки канала (200),
   быстрого поиска (210), окон тарифов и оплаты (220–240) и подсказки (300). Внутрь .nf-app
   его класть нельзя: там контейнеры с container-type, и fixed отсчитывался бы от них. */

/* Между страницами тура: затемнение встаёт ДО первой отрисовки — класс ставит скрипт в
   <head> app_shell.html, пока в localStorage лежит nf2.tour, и страница не мигает светлой
   между двумя шагами. Снимает класс tour.js, подняв свой слой; не поднял за 5 секунд
   (скрипт не доехал, упал) — класс снимает тот же скрипт в <head>: застрявшая тёмная
   страница хуже мигания. Клики сквозь затемнение проходят по той же причине. */
html.nf-tour-pending body::after{
  content:'';position:fixed;inset:0;z-index:400;background:rgba(8,9,12,.62);pointer-events:none}

/* Сам слой нажатий не ловит — их ловят щиты (четыре прозрачных куска, вместе — весь экран),
   кнопка поверх выреза шага-перехода и окно. Страница под туром не нажимается; насквозь
   открыт только вырез формы «Новый каталог» — там щиты расходятся вокруг неё. */
.nf-tour{position:fixed;inset:0;z-index:400;pointer-events:none;cursor:default;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.nf-tour--fade{transition:opacity .24s ease}
.nf-tour--hidden{opacity:0}
.nf-tour__dim,.nf-tour__rings{position:absolute;inset:0;pointer-events:none}
/* Куски затемнения и уголки: место — transform, размер — width/height от tour.js. Цвет тот
   же, что у затемнения ожидания выше: между страницами тур не меняет тон. */
.nf-tour__shade,.nf-tour__corner,.nf-tour__ring,.nf-tour__shield{position:absolute;left:0;top:0}
.nf-tour__shade{background:rgba(8,9,12,.62)}
/* Кольцо 2 px снаружи выреза и мягкое свечение — тенью узла, без перерисовки экрана. */
.nf-tour__ring{box-sizing:border-box;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 2px var(--data,#3EA6FF),0 0 22px 3px color-mix(in srgb,var(--data,#3EA6FF) 30%,transparent);
  transition:box-shadow .16s ease}
/* Вырез-кнопка под курсором — свечение ярче: «сюда можно нажать». */
.nf-tour.is-aim .nf-tour__ring.is-click{
  box-shadow:0 0 0 2px var(--data,#3EA6FF),0 0 30px 7px color-mix(in srgb,var(--data,#3EA6FF) 48%,transparent)}
/* Пульс выреза-кнопки: кольцо расходится на 12 px и гаснет. Размах по осям (--nf-tour-sx/-sy)
   ставит tour.js — у узкого пункта меню и большой карточки он один и тот же в точках. */
.nf-tour__pulse{position:absolute;left:0;top:0;pointer-events:none;opacity:0;border-radius:12px;
  box-shadow:0 0 0 2px var(--data,#3EA6FF)}
.nf-tour__pulse.is-on{animation:nfTourPulse 1.6s cubic-bezier(.2,.8,.2,1) .2s infinite}
@keyframes nfTourPulse{
  0%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(var(--nf-tour-sx,1.05),var(--nf-tour-sy,1.05))}
}
.nf-tour__shield{pointer-events:auto;touch-action:none}
.nf-tour__hit{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:transparent;
  border-radius:12px;cursor:pointer;pointer-events:auto;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.nf-tour__hit:focus{outline:none}
/* Под туром замирает огненная обводка топ-3: её градиент перерисовывается в каждом кадре и
   отнимал кадры у переходов тура. Обводка остаётся — стоит на месте. */
html.nf-tour-on .nf-ch--top::after{animation-play-state:paused}

/* Номер у левого верхнего угла выреза — когда вырезов на шаге два и больше; в окне те
   же номера у строк. Место ставит tour.js (transform), здесь — центровка на точку угла. */
.nf-tour__num{position:absolute;left:0;top:0;z-index:1;width:22px;height:22px;
  margin:-11px 0 0 -11px;border-radius:50%;background:var(--data,#3EA6FF);color:#06121d;
  font:700 12px/22px var(--ff);text-align:center;pointer-events:none;
  box-shadow:0 0 0 2px rgba(8,9,12,.6);opacity:0;transition:opacity .16s ease}
.nf-tour__num.is-on{opacity:1}

/* Окно. Место — transform от tour.js: едет той же кривой и тем же временем, что вырезы
   (длительность ставит скрипт, переход «перевода» короче обычного). */
.nf-tour__win{position:absolute;left:0;top:0;z-index:2;box-sizing:border-box;pointer-events:auto;
  width:360px;max-width:calc(100vw - 32px);padding:18px 20px 16px;
  background:var(--surf,#1c1c20);border:1px solid var(--bd);border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.55);color:var(--tx);font-family:var(--ff);
  transition-property:transform,opacity;transition-duration:.42s,.2s;
  transition-timing-function:cubic-bezier(.2,.8,.2,1),ease;will-change:transform}
.nf-tour__win.is-leaving{opacity:0}
.nf-tour__win:focus{outline:none}
/* Уже 700 px — окно у нижнего края, во всю ширину с полями 16 px, без хвостика. */
.nf-tour__win--dock{left:calc(16px + env(safe-area-inset-left,0px));
  right:calc(16px + env(safe-area-inset-right,0px));top:auto;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;
  transform:none!important}

/* Хвостик — квадрат 16 px на ребре окна, обращённом к вырезам: фон окна, рамка только на
   двух наружных сторонах. Центр ставит tour.js (--nf-tour-cx/-cy, от внутреннего края рамки:
   квадрат стоит absolute внутри окна); пока окно едет, хвостика нет — он появляется, когда
   окно встало. */
.nf-tour__caret{position:absolute;left:0;top:0;width:16px;height:16px;box-sizing:border-box;
  background:var(--surf,#1c1c20);border:1px solid transparent;pointer-events:none;
  opacity:0;transition:opacity .12s ease;
  transform:translate(calc(var(--nf-tour-cx,0px) - 8px),calc(var(--nf-tour-cy,0px) - 8px)) rotate(45deg)}
.nf-tour__win[data-side] .nf-tour__caret{opacity:1}
.nf-tour__win[data-side="right"] .nf-tour__caret{border-left-color:var(--bd);border-bottom-color:var(--bd)}
.nf-tour__win[data-side="left"] .nf-tour__caret{border-top-color:var(--bd);border-right-color:var(--bd)}
.nf-tour__win[data-side="bottom"] .nf-tour__caret{border-left-color:var(--bd);border-top-color:var(--bd)}
.nf-tour__win[data-side="top"] .nf-tour__caret{border-bottom-color:var(--bd);border-right-color:var(--bd)}

.nf-tour__eyebrow{font:600 12px/1.3 var(--ff);color:var(--tx2);margin:0 0 6px;padding-right:150px}
/* «Пропустить обучение» (владелец 22.10.2026): серая подпись в правом верхнем углу окна, не
   кнопка-пилюля — главное действие шага остаётся «Вперёд». Место под неё держит отступ справа
   у строки «Главная · 3 из 32». */
.nf-tour__skip{position:absolute;top:14px;right:16px;margin:0;padding:4px 6px;border:0;
  border-radius:8px;background:transparent;color:var(--tx3,#7A7A7A);font:600 12px/1.3 var(--ff);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bdS)}
.nf-tour__skip:hover{color:var(--tx2);background:var(--surf2)}
.nf-tour__skip:focus-visible{outline:2px solid var(--data,#3EA6FF);outline-offset:2px}
.nf-tour__skip[hidden]{display:none}
/* h2 из tokens.css (25 px, отступ 12) окну не подходит — свои размеры. */
.nf-tour__title{font:700 18px/1.3 var(--ff);letter-spacing:-.2px;color:var(--tx);margin:0 0 8px}
.nf-tour__text{font:400 14.5px/1.5 var(--ff);color:var(--tx);margin:0 0 10px}
.nf-tour__text:last-child{margin-bottom:0}
.nf-tour__text[hidden],.nf-tour__items[hidden]{display:none}
.nf-tour__items{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.nf-tour__items:last-child{margin-bottom:0}
.nf-tour__item{display:flex;align-items:flex-start;gap:10px;font:400 14.5px/1.45 var(--ff);color:var(--tx)}
.nf-tour__inum{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--data,#3EA6FF);color:#06121d;font:700 12px/20px var(--ff);text-align:center}
/* Пункты одного выреза — точкой, без номера: номер звал бы искать второй вырез. */
.nf-tour__item--dot::before{content:'';flex:none;width:6px;height:6px;margin:8px 4px 0 7px;
  border-radius:50%;background:var(--data,#3EA6FF)}

/* Подвал: полоса хода тура, «Назад» и «Вперёд». Полоса растёт transform-ом — без перекладки. */
.nf-tour__foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.nf-tour__bar{flex:1;min-width:40px;height:4px;border-radius:99px;background:var(--surf2);overflow:hidden}
.nf-tour__fill{height:100%;background:var(--data,#3EA6FF);transform-origin:0 50%;
  transform:scaleX(0);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.nf-tour__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;
  height:36px;margin:0;padding:0 16px;border-radius:999px;font:700 13px/1 var(--ff);
  cursor:pointer;white-space:nowrap;filter:none;transition:background .14s,border-color .14s,filter .14s}
/* Фокус виден: в tokens.css у кнопок outline снят целиком, а здесь фокус — главный путь. */
.nf-tour__btn:focus-visible{outline:2px solid var(--data,#3EA6FF);outline-offset:2px}
.nf-tour__back{background:transparent;border:1px solid var(--bdS);color:var(--tx)}
.nf-tour__back:hover{background:var(--surf2);filter:none}
.nf-tour__back:disabled{opacity:.38;cursor:default;background:transparent}
.nf-tour__next{background:var(--data,#3EA6FF);border:0;color:#06121d;padding:0 16px 0 14px}
.nf-tour__next:hover{filter:brightness(1.08)}
.nf-tour__next svg{width:16px;height:16px;flex:none}
/* На шаге-переходе «Вперёд» нет (tour.js ставит hidden): display кнопки перебил бы скрытие. */
.nf-tour__btn[hidden],.nf-tour__hit[hidden],.nf-tour__pulse[hidden]{display:none}
.nf-tour__win[aria-busy="true"] .nf-tour__next{opacity:.6;cursor:progress}

/* «Пройти тур заново» на экране «Как это работает»: шапка гайда — колонка, и пилюля без
   этого растянулась бы во всю её ширину. */
.nf-gd__restart{align-self:flex-start}

@media (prefers-reduced-motion:reduce){
  .nf-tour--fade,.nf-tour__win,.nf-tour__fill,.nf-tour__caret,.nf-tour__num,.nf-tour__ring{transition:none}
  .nf-tour__pulse.is-on{animation:none}
}

/* ── Кадры: экран целиком (21.10.2026) ──────────────────────────────────────
   «Открыл — бам — всё готово» (владелец). Экран под шапкой ждёт кадры, которые на нём
   видны: класс nf-hold ставит скрипт в <head>, снимают ворота в конце страницы, как только
   эти кадры скачаны и разжаты, — и не дольше секунды. Каждая картинка показывается целиком:
   Gecko рисует webp сверху вниз, и недокачанный низ кадра был белой шторкой. Оба класса
   ставит скрипт — без скриптов всё видно сразу, как раньше. */
.nf-hold .nf-main > :not(.nf-topbar){visibility:hidden}
.nf-js .nf-main img:not([data-ready]){opacity:0}
/* Полоски значат «кадра нет». Пока кадр едет, под ним ровный фон: полоска на миг сказала бы
   «кадра нет» про кадр, который вот-вот встанет. Не загрузился — картинку убирает app.js
   (отступить), и полоски снова на месте. */
.nf-js .nf-niche__shot:has(> img){background:var(--surf2)}
.nf-js .nf-card__frame:has(> img) .nf-card__stub{background:var(--surf2)}
.nf-js .nf-card__frame:has(> img) .nf-card__stub-cap{visibility:hidden}
/* Карточка канала — тем же правилом: аватар, шапка и топ-3 встают целиком. Качаются они
   ещё на наведении (app.js, картинки_канала), так что обычно уже готовы к открытию. */
.nf-js .nf-modal img:not([data-ready]){opacity:0}