/* Addict Film — премиум-редизайн. Фиксированная high-end тёмная тема. */
:root{
  color-scheme: dark;
  /* Верхний безопасный отступ: max(вырез устройства, панель Telegram из JS).
     В обычном режиме = notch; в полноэкранном — ещё и высота шапки Telegram. */
  --tg-inset-top:0px; --tg-inset-bottom:0px;
  --tg-safe-area-inset-bottom:0px; --tg-content-safe-area-inset-bottom:0px;
  --safe-top:max(env(safe-area-inset-top,0px), var(--tg-inset-top));
  --safe-bottom:max(env(safe-area-inset-bottom,0px), var(--tg-inset-bottom), var(--tg-safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom));
  /* Просвет под плавающей навигацией: её верхний край = 16px + высота 64px, плюс
     безопасная зона устройства и дыхание. Раньше экраны прибивали 124px без
     env(), и на iPhone таббар накрывал последнюю карточку. */
  --nav-clearance:calc(116px + var(--safe-bottom));
  /* С плашкой админ-режима (bottom:92px, высота 32px) просвет должен быть больше,
     иначе она ложится поверх карточки. */
  --nav-clearance-admin:calc(160px + var(--safe-bottom));
  /* ── Design Foundation: канон редизайна ────────────────────────────────────
     Контракт у этого слоя РАЗНЫЙ для структуры и для текста, и путать их
     нельзя:

     - структура (фон, поверхности, акценты) СОВПАДАЕТ со старыми значениями,
       поэтому legacy-переменные ниже просто ссылаются сюда. Это не перекраска:
       вычисленный цвет тот же до байта, но источник истины теперь один;
     - текстовая шкала --af-text-* НАМЕРЕННО другая. Это новая иерархия
       редизайна, и она не равна старым --ink / --ink-2. Поэтому --ink и
       --ink-2 НЕ алиасятся: экраны, ещё не прошедшие редизайн, обязаны
       выглядеть ровно так же, как выглядели, и переедут каждый в своей задаче.

     Семантика цвета, и никаких исключений «для красоты»:
       accent        — выбрано / интерактивно / в фокусе / важное непрочитанное
       accent-solid  — сильное залитое главное действие, когда оно есть
       rating        — ТОЛЬКО оценка фильма
       danger        — разрушительное и ошибки
       pair          — только отношения с партнёром
     Фиолетовый не наносится просто потому, что элементу нужно украшение.

     Пары *-rgb существуют, чтобы прозрачности писались через токен
     (rgba(var(--af-accent-rgb),.2)), а не копией чисел: копия расходится с
     оригиналом при первой же правке. */
  --af-bg:#050505;

  --af-surface-1:#0F1013;
  --af-surface-2:#15171B;
  --af-surface-3:#1C1F24;

  /* Текст обязан читаться на ЛЮБОЙ из четырёх поверхностей, а не только на
     той, где элемент оказался сегодня. Прежний #7E8490 давал на
     --af-surface-3 ровно 4.40:1 — ниже порога 4.5:1 для обычного мелкого
     текста. #858B97 даёт 4.83:1 там же и 5.96:1 на фоне, сохраняя иерархию
     primary > secondary > tertiary. */
  --af-text-primary:#F5F6F8;
  --af-text-secondary:#A4AAB5;
  --af-text-tertiary:#858B97;

  /* Монохром, как Apple TV: выбранное — светлое, главное действие — белая
     заливка с тёмным текстом. Цвет на экране даёт кадр фильма, а не кнопка. */
  --af-accent:#F2F3F5;
  --af-accent-rgb:242,243,245;

  --af-accent-solid:#FFFFFF;
  --af-accent-solid-rgb:255,255,255;
  /* Текст и значки на залитом акценте. */
  --af-on-accent:#0B0B0C;

  /* ДВЕ РАЗНЫЕ ОЦЕНКИ — ДВА РАЗНЫХ ЦВЕТА.
     Голубой — МОЯ оценка и аналитика моих оценок в профиле.
     Золотой — чужая: IMDb, Кинопоиск, публичный рейтинг каталога.
     Раньше токен был один, и любая правка «цвета рейтинга» красила и то и
     другое разом — то есть меняла смысл там, где его менять не собирались. */
  --af-rating:#69D5FF;
  --af-rating-rgb:105,213,255;
  --af-provider-rating:#FFC247;
  --af-danger:#FF6B6B;
  --af-pair:#E879A9;

  /* Одна кривая скорости на всю физику навигации. Раньше корпус линзы и её
     материал ехали по РАЗНЫМ кривым, хотя это один движущийся предмет: тело
     успевало замедлиться раньше собственной поверхности. */
  --af-nav-ease:cubic-bezier(.22,.80,.24,1);
  /* Невыбранная вкладка. Выделена в токен, потому что пружинный режим
     СМЕШИВАЕТ её с акцентом по ходу движения стекла: смешивать можно только
     то, что названо в одном месте, иначе два конца перехода разъедутся. */
  --af-nav-idle:rgba(222,225,234,.62);

  /* ── Legacy: те же цвета, но теперь из одного места ────────────────────── */
  --bg:var(--af-bg);
  --s1:var(--af-surface-1); --s2:var(--af-surface-2); --s3:var(--af-surface-3);
  --accent:var(--af-accent-solid); --accent-2:#D9DBE0;
  --accent-rgb:var(--af-accent-solid-rgb);
  /* Оптический акцент навигации и есть акцент взаимодействия основания. */
  --nav-accent:var(--af-accent);
  /* НЕ алиасятся намеренно — см. контракт выше. */
  --ink:#FFFFFF; --ink-2:#9CA3AF;
  --hair:rgba(255,255,255,.06); --hair-2:rgba(255,255,255,.09);
  --shadow:0 18px 40px -22px rgba(0,0,0,.9);
  --font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",sans-serif;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
html,body{background:var(--bg);}
/* touch-action убирает двойной тап = зум (viewport-мета глушит только pinch).

   overflow-x — про другое. Приложение никогда не панорамируется вбок, и это
   обязано быть СВОЙСТВОМ, а не везением: вход экрана при смене корневой
   вкладки сдвигает #screen на восемь пикселей по горизонтали, и на 320px этого
   хватало, чтобы документ на четверть секунды становился шире вьюпорта.

   Пара правил, и обе половины нужны. Само по себе значение на `body`
   пробросилось бы на вьюпорт, а `body` осталось бы `visible` — то есть
   сдвинутый потомок так и не был бы обрезан. Не-visible значение на корне
   отменяет этот проброс, и тогда `clip` на `body` действительно режет. Именно
   `clip`, а не `hidden`: `hidden` рядом с `visible` по второй оси превратил бы
   `body` в контейнер прокрутки, а на нём держится вся вертикальная механика —
   window.scrollY, слушатели прокрутки и клиренс под навигацией.

   Движок без `overflow:clip` (WebKit до 16) просто не поймёт вторую строку:
   вьюпорт всё равно обрезан корнем, вбок ничего не тянется, и разница остаётся
   лишь в числе scrollWidth. */
html{touch-action:manipulation;overflow-x:hidden;}
body{
  font-family:var(--font);color:var(--ink);letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:var(--nav-clearance);
  background:radial-gradient(120% 45% at 50% -8%, #0b0d11 0%, transparent 55%), var(--bg);
  min-height:100vh;
  overflow-x:clip;  /* см. комментарий у html: обрезает сдвиг экрана, не создавая контейнер прокрутки */
  overscroll-behavior-y:none;  /* iOS-стиль: без «резинового» оттягивания фона за края */
}
#screen{max-width:520px;margin:0 auto;}
/* Нижний отступ даёт body (клиренс плавающего таб-бара) — свой не добавляем,
   иначе получается двойной отступ и пустая прокрутка под последним блоком. */
#stats{scroll-padding-bottom:var(--nav-clearance);}

/* ── header ─────────────────────────────────── */
.app-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--safe-top) + 16px) 20px 0;}
.brand{min-width:0;flex:1;}
.brand h1{font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand p{margin-top:4px;font-size:14.5px;color:var(--ink-2);font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bell{flex:none;width:42px;height:42px;border-radius:50%;background:var(--s2);border:1px solid var(--hair);
  display:grid;place-items:center;position:relative;color:var(--ink);box-shadow:var(--shadow);}
.bell svg{width:20px;height:20px;}
.bell .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--s2);}

/* ── WATCHCAT: житель шапки вместо колокольчика ──────────────────────────────
   Кот и есть кнопка уведомлений, поэтому он на экране ВСЕГДА: при нуле спит,
   при непрочитанном сидит. Исчезающий кот забрал бы единственный вход.

   Живёт он редкими короткими выходками, которыми управляет один планировщик
   в js/notifications.js. Здесь только позы и сами движения; одновременно
   играет РОВНО одно действие. */
.notification-companion{position:relative;width:64px;height:50px;flex:none;border:0;padding:0;
  background:transparent;cursor:pointer;}
/* Полка почти исчезает: главный здесь зверь, а не стекло под ним. */
.notification-companion-stage{position:absolute;left:6px;bottom:1px;width:52px;height:10px;
  border-radius:7px 7px 11px 11px;
  background:linear-gradient(180deg,rgba(31,33,39,.5),rgba(14,15,19,.74));
  border:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 18px -16px rgba(0,0,0,.98);
  transition:transform 110ms ease;}
/* Холст персонажа лежит В ТЕХ ЖЕ границах кнопки: включение движка не двигает
   ни шапку, ни приветствие. Пока он не загрузился, холст прозрачен, а рисует
   запасной кот на SVG. */
.watchcat-rive{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;}
.has-rive-watchcat .watchcat-rive{opacity:1;}
.has-rive-watchcat .watchcat-svg-fallback{opacity:0;visibility:hidden;}
.watchcat{
  /* Шерсть НЕПРОЗРАЧНАЯ и холодно-серая: полупрозрачные голова и корпус
     складывались бы на груди светлым пятном, а белый зверь выпадал бы из
     графитовой шапки. */
  --watchcat-fur:#E2E5EC;
  --watchcat-detail:rgba(164,171,185,.72);
  --watchcat-face:rgba(18,19,24,.96);
  --watchcat-accent:rgba(242,243,245,.88);
  position:absolute;left:8px;bottom:2px;width:48px;height:48px;display:block;overflow:visible;
  transition:transform 110ms ease;}
.watchcat-fur{fill:var(--watchcat-fur);}
.watchcat-tail-stroke{stroke:var(--watchcat-fur);stroke-width:4px;}
/* Лапы — НАСТОЯЩИЕ фигуры, а не два штриха по животу: прежними их движение
   при умывании и чесании просто не было видно, оно тонуло в шерсти. Тон чуть
   темнее шерсти и тонкая тёмная кромка, поэтому поднятая к морде лапа
   читается поверх головы. */
.watchcat-paw-left path,.watchcat-paw-right path{fill:#CBD0DB;
  stroke:rgba(18,19,24,.28);stroke-width:.8px;}
.watchcat-ear-inner{fill:var(--watchcat-accent);opacity:.43;}
.watchcat-eyes{fill:var(--watchcat-face);}
.watchcat-nose{fill:var(--watchcat-accent);opacity:.9;}
.watchcat-mouth{stroke:rgba(143,149,164,.78);stroke-width:1.05px;}
.watchcat-whiskers path{fill:none;stroke:var(--watchcat-detail);stroke-width:.9px;
  stroke-linecap:round;opacity:.42;}
/* Ошейник — намёк на «домашнего», а не украшение: одна дуга и точка. */
.watchcat-collar path{stroke:var(--watchcat-accent);stroke-width:1.5px;opacity:.5;}
.watchcat-collar-tag{fill:var(--watchcat-accent);opacity:.75;}
/* transform-box:fill-box — иначе поворот считался бы от угла всего SVG, и
   части улетали бы вместо того, чтобы дрогнуть на месте. */
.watchcat-head{transform-box:fill-box;transform-origin:50% 78%;}
.watchcat-body{transform-box:fill-box;transform-origin:50% 100%;}
.watchcat-tail{transform-box:fill-box;transform-origin:18% 82%;}
.watchcat-eyes{transform-box:fill-box;transform-origin:center;}
.watchcat-ear-left,.watchcat-ear-right{transform-box:fill-box;transform-origin:50% 92%;}
.watchcat-paw-left,.watchcat-paw-right{transform-box:fill-box;transform-origin:50% 100%;}
.watchcat-head,.watchcat-body,.watchcat-tail,.watchcat-eyes,
.watchcat-ear-left,.watchcat-ear-right,.watchcat-paw-left,.watchcat-paw-right{
  transition:transform 260ms cubic-bezier(.22,.85,.26,1);}
/* ── Позы ──────────────────────────────────────────────────────────────────*/
.watchcat-state-sleep .watchcat-head{transform:translateY(3px) rotate(-4deg);}
.watchcat-state-sleep .watchcat-body{transform:translateY(2px) scaleY(.92);}
.watchcat-state-sleep .watchcat-eyes{transform:scaleY(.08);}
.watchcat-state-sleep .watchcat-tail{transform:translateX(-1px) rotate(-7deg);}
.watchcat-state-sleep .watchcat-ear-left{transform:rotate(-6deg);}
.watchcat-state-sleep .watchcat-ear-right{transform:rotate(6deg);}
/* Единственное долгое движение — дыхание спящего. Ничего не смещает. */
.notification-companion.has-rich-motion.watchcat-state-sleep .watchcat-body{
  animation:watchcat-breathe 3.9s ease-in-out infinite;}
@keyframes watchcat-breathe{
  0%,100%{transform:translateY(2px) scaleY(.92);}
  50%{transform:translateY(2px) scaleY(.936);}}
/* ── Разовые действия ──────────────────────────────────────────────────────
   Амплитуды подняты после просмотра записи с телефона: прежние доли градуса
   и полпикселя были честно анимированы и при этом НЕ ВИДНЫ. Кот по-прежнему
   почти всё время сидит неподвижно — но когда действует, это читается без
   вглядывания. Одновременно активен ровно один класс is-watchcat-*. */
.is-watchcat-blink .watchcat-eyes{animation:watchcat-blink 200ms linear;}
@keyframes watchcat-blink{
  0%,22%,44%,100%{transform:scaleY(1);}
  30%,36%{transform:scaleY(.05);}}
/* Иногда моргает дважды — но не каждый раз: постоянная двойка читается как тик. */
.is-watchcat-blink:nth-of-type(odd) .watchcat-eyes{animation-name:watchcat-blink;}
.is-watchcat-look .watchcat-head{animation:watchcat-look 860ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-look{
  0%{transform:none;}
  24%{transform:rotate(8deg) translateY(-1px);}
  58%{transform:rotate(8deg) translateY(-1px);}
  80%{transform:rotate(-3deg);}
  100%{transform:none;}}
.is-watchcat-look .watchcat-eyes{animation:watchcat-look-eyes 860ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-look-eyes{
  0%,100%{transform:none;}
  28%,60%{transform:translateX(2px);}}
.is-watchcat-look .watchcat-ear-left,
.is-watchcat-look .watchcat-ear-right{animation:watchcat-look-ear 860ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-look-ear{0%,100%{transform:none;}30%,60%{transform:rotate(2deg);}}
.is-watchcat-ear .watchcat-ear-right{animation:watchcat-ear 460ms cubic-bezier(.3,.8,.3,1);}
@keyframes watchcat-ear{
  0%,100%{transform:none;}
  28%{transform:rotate(12deg);}
  56%{transform:rotate(-5deg);}
  78%{transform:rotate(4deg);}}
.is-watchcat-tail .watchcat-tail{animation:watchcat-tail 800ms cubic-bezier(.3,.8,.3,1);}
@keyframes watchcat-tail{
  0%,100%{transform:none;}
  22%{transform:rotate(20deg);}
  50%{transform:rotate(-10deg);}
  74%{transform:rotate(8deg);}}
/* Тело чуть отзывается на взмах — иначе хвост живёт отдельно от кота. */
.is-watchcat-tail .watchcat-body{animation:watchcat-tail-body 800ms cubic-bezier(.3,.8,.3,1);}
@keyframes watchcat-tail-body{0%,100%{transform:none;}30%{transform:rotate(-1.5deg);}}
/* Умывается: лапа дважды проходит у морды, голова наклоняется ей навстречу.
   Это одна из подписных выходок — её обязано быть видно. */
.is-watchcat-groom .watchcat-paw-right{animation:watchcat-groom-paw 1450ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-groom-paw{
  0%,100%{transform:none;}
  18%,34%{transform:translate(3px,-13px) rotate(-22deg);}
  26%{transform:translate(3px,-8px) rotate(-14deg);}
  50%,66%{transform:translate(3px,-13px) rotate(-22deg);}
  58%{transform:translate(3px,-8px) rotate(-14deg);}
  84%{transform:translate(1px,-5px) rotate(-8deg);}}
.is-watchcat-groom .watchcat-head{animation:watchcat-groom-head 1450ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-groom-head{
  0%,100%{transform:none;}
  20%,70%{transform:translateY(1px) rotate(-6deg);}}
/* Чешется: три коротких удара лапой, ухо прижато. */
.is-watchcat-scratch .watchcat-paw-left{animation:watchcat-scratch-paw 1150ms ease-in-out;}
@keyframes watchcat-scratch-paw{
  0%,100%{transform:none;}
  18%,44%,70%{transform:translateY(-8px);}
  31%,57%{transform:translateY(-3px);}}
.is-watchcat-scratch .watchcat-head{animation:watchcat-scratch-head 1150ms ease-in-out;}
@keyframes watchcat-scratch-head{0%,100%{transform:none;}22%,74%{transform:rotate(5deg);}}
.is-watchcat-scratch .watchcat-ear-left{animation:watchcat-scratch-ear 1150ms ease-in-out;}
@keyframes watchcat-scratch-ear{0%,100%{transform:none;}22%,74%{transform:rotate(-9deg);}}
/* Потягивается: силуэт заметно вытягивается и спокойно возвращается. */
.is-watchcat-stretch .watchcat-body{animation:watchcat-stretch-body 1220ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-stretch-body{0%,100%{transform:none;}38%,62%{transform:scaleY(1.07);}}
.is-watchcat-stretch .watchcat-head{animation:watchcat-stretch-head 1220ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-stretch-head{0%,100%{transform:none;}38%,62%{transform:translateY(-4px);}}
.is-watchcat-stretch .watchcat-paw-left,
.is-watchcat-stretch .watchcat-paw-right{animation:watchcat-stretch-paws 1220ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-stretch-paws{0%,100%{transform:none;}38%,62%{transform:translateY(3px) scaleY(1.08);}}
.is-watchcat-stretch .watchcat-tail{animation:watchcat-stretch-tail 1220ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-stretch-tail{0%,100%{transform:none;}45%{transform:rotate(8deg);}}
/* Переступает: семь пикселей вбок и обратно, голова ведёт. В текст
   приветствия кот не заходит — шаг меньше свободного места у края кнопки. */
.is-watchcat-step .watchcat{animation:watchcat-step 1450ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-step{0%,100%{transform:none;}30%,70%{transform:translateX(7px);}}
.is-watchcat-step .watchcat-head{animation:watchcat-step-head 1450ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-step-head{0%,100%{transform:none;}22%{transform:translateX(2px) rotate(2deg);}
  72%{transform:translateX(-1px);}}
.is-watchcat-step .watchcat-paw-left{animation:watchcat-step-paw-a 1450ms ease-in-out;}
.is-watchcat-step .watchcat-paw-right{animation:watchcat-step-paw-b 1450ms ease-in-out;}
@keyframes watchcat-step-paw-a{0%,100%{transform:none;}22%{transform:translateY(-3px);}}
@keyframes watchcat-step-paw-b{0%,100%{transform:none;}62%{transform:translateY(-3px);}}
/* Полежать. НЕ сон: глаза открыты, непрочитанное никуда не делось. */
.is-watchcat-loaf .watchcat-body{animation:watchcat-loaf-body 3500ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-loaf-body{
  0%,100%{transform:none;}
  12%,88%{transform:translateY(4px) scaleY(.84);}}
.is-watchcat-loaf .watchcat-head{animation:watchcat-loaf-head 3500ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-loaf-head{0%,100%{transform:none;}12%,88%{transform:translateY(3px);}}
.is-watchcat-loaf .watchcat-paw-left,
.is-watchcat-loaf .watchcat-paw-right{animation:watchcat-loaf-paws 3500ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-loaf-paws{0%,100%{opacity:1;transform:none;}
  12%,88%{opacity:0;transform:translateY(5px);}}
.is-watchcat-loaf .watchcat-tail{animation:watchcat-loaf-tail 3500ms cubic-bezier(.3,.7,.3,1);}
@keyframes watchcat-loaf-tail{0%,100%{transform:none;}12%,88%{transform:rotate(-6deg) translateX(-1px);}}
.is-watchcat-loaf .watchcat-eyes{animation:watchcat-loaf-eyes 3500ms linear;}
@keyframes watchcat-loaf-eyes{0%,44%,54%,100%{transform:scaleY(1);}48%,50%{transform:scaleY(.12);}}
/* Заметил новое письмо — самое сильное движение из всех: его обязано быть
   видно сразу, без вглядывания. */
.is-watchcat-notice .watchcat{animation:watchcat-notice-lift 640ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-notice-lift{0%,100%{transform:none;}32%{transform:translateY(-3px);}}
.is-watchcat-notice .watchcat-head{animation:watchcat-notice-head 640ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-notice-head{
  0%{transform:none;}
  26%{transform:translateY(-4px) rotate(5deg);}
  62%{transform:translateY(-4px) rotate(5deg);}
  100%{transform:none;}}
.is-watchcat-notice .watchcat-ear-left{animation:watchcat-notice-ear-l 640ms cubic-bezier(.22,.85,.26,1);}
.is-watchcat-notice .watchcat-ear-right{animation:watchcat-notice-ear-r 640ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-notice-ear-l{0%,100%{transform:none;}28%,62%{transform:rotate(-10deg);}}
@keyframes watchcat-notice-ear-r{0%,100%{transform:none;}28%,62%{transform:rotate(10deg);}}
.is-watchcat-notice .watchcat-eyes{animation:watchcat-notice-eyes 640ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-notice-eyes{0%,100%{transform:none;}30%,62%{transform:scale(1.08);}}
.is-watchcat-notice .watchcat-tail{animation:watchcat-notice-tail 640ms cubic-bezier(.22,.85,.26,1);}
@keyframes watchcat-notice-tail{
  0%,100%{transform:none;}
  26%{transform:rotate(26deg);}
  60%{transform:rotate(-8deg);}}
/* Инбокс разобран: медленное моргание, голова опускается, кот укладывается. */
.is-watchcat-settling .watchcat-eyes{animation:watchcat-settle-eyes 880ms ease-in-out;}
@keyframes watchcat-settle-eyes{
  0%{transform:none;}
  16%,26%{transform:scaleY(.1);}
  42%{transform:none;}
  100%{transform:scaleY(.08);}}
.is-watchcat-settling .watchcat-head{animation:watchcat-settle-head 880ms ease-in-out;}
@keyframes watchcat-settle-head{0%{transform:none;}100%{transform:translateY(3px) rotate(-4deg);}}
.is-watchcat-settling .watchcat-body{animation:watchcat-settle-body 880ms ease-in-out;}
@keyframes watchcat-settle-body{0%{transform:none;}100%{transform:translateY(2px) scaleY(.92);}}
.is-watchcat-settling .watchcat-tail{animation:watchcat-settle-tail 880ms ease-in-out;}
@keyframes watchcat-settle-tail{0%{transform:none;}100%{transform:translateX(-1px) rotate(-7deg);}}
.notification-companion-count{position:absolute;top:-1px;right:1px;display:grid;place-items:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:linear-gradient(180deg,rgba(55,46,82,.94),rgba(31,27,47,.96));
  border:1px solid rgba(var(--af-accent-rgb),.16);color:var(--nav-accent);font:700 10px var(--font);
  box-shadow:0 4px 12px -8px #000;}
.notification-companion-count.is-changed{animation:watchcatCount 170ms cubic-bezier(.22,.85,.26,1) both;}
@keyframes watchcatCount{
  0%{opacity:.6;transform:translateY(2px) scale(.86);}
  65%{opacity:1;transform:translateY(-.5px) scale(1.08);}
  100%{opacity:1;transform:none;}}
/* Нажатие приминает кота и полку, но не саму кнопку: площадь попадания
   остаётся прежней, а переход в инбокс ничего не ждёт. */
.notification-companion:active .watchcat{transform:translateY(1px) scale(.94);}
.notification-companion:active .watchcat-head{transform:translateY(1px);}
.notification-companion:active .notification-companion-stage{transform:scaleX(.96);}
.notification-companion:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:2px;border-radius:18px;}
/* Жёсткая страховка поверх флага: отказ от движения снимает ВСЁ живое, но не
   позы — спящий кот остаётся спящим, сидящий сидящим. */
@media(prefers-reduced-motion:reduce){
  .watchcat,.watchcat-head,.watchcat-body,.watchcat-tail,.watchcat-eyes,
  .watchcat-ear-left,.watchcat-ear-right,.watchcat-paw-left,.watchcat-paw-right,
  .notification-companion,.notification-companion-count,.notification-companion-stage{
    animation:none !important;transition:none !important;}
  .notification-companion:active .watchcat,
  .notification-companion:active .watchcat-head,
  .notification-companion:active .notification-companion-stage{transform:none;}
  .watchcat-paw-left,.watchcat-paw-right{animation:none !important;}
}

/* ── Notification inbox ─────────────────────────────────────────────────── */
/* Шапка — сетка из трёх колонок, а не «всё в ряд»: длинная подпись «Отметить
   все как прочитанные» делила строку с заголовком и резала его до
   «Уведомлен...». Теперь действие — значок, а заголовку отдана вся середина. */
.notification-head{display:grid !important;grid-template-columns:42px minmax(0,1fr);
  align-items:center;gap:10px;padding-bottom:4px;}
.notification-head h1{min-width:0;margin:0;overflow:visible;text-overflow:clip;white-space:nowrap;
  font-size:clamp(23px,6.5vw,27px);font-weight:720;letter-spacing:-.035em;line-height:1.05;}
/* Значок панели, а не ещё одна плитка с рамкой: обведённая кнопка спорила с
   кнопкой «назад» за внимание. Материал появляется только под пальцем. */
/* Строка действия над фильтрами: справа, компактно, без своего материала. */
.notification-toolbar{display:flex;justify-content:flex-end;margin:0 -8px 6px;}
.notification-mark-all{min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:0;
  border-radius:14px;background:transparent;color:var(--nav-accent);cursor:pointer;
  font:600 15px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;
  transition:transform 110ms ease,opacity 150ms ease,background-color 150ms ease;}
.notification-mark-all svg{width:19px;height:19px;flex:none;}
.notification-mark-all:active:not(:disabled){background:rgba(255,255,255,.055);transform:scale(.94);}
.notification-mark-all:focus-visible{background:rgba(255,255,255,.055);outline:2px solid rgba(var(--af-accent-rgb),.5);
  outline-offset:-2px;}
.notification-mark-all:disabled{opacity:.3;color:rgba(150,156,168,.9);cursor:default;}
.notifications-page{padding:0 20px calc(132px + var(--safe-bottom));}
/* Фильтры говорят на языке навигации и «Обзора»: графитовый остров и ОДНА
   едущая поверхность. */
.notification-filters{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  height:50px;margin-bottom:18px;padding:4px;overflow:hidden;
  border:1px solid rgba(255,255,255,.075);border-radius:19px;
  background:linear-gradient(180deg,rgba(20,22,27,.62),rgba(9,10,13,.74));
  -webkit-backdrop-filter:blur(18px) saturate(1.22) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.22) brightness(.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.notification-filter-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);
  border-radius:15px;pointer-events:none;
  background:linear-gradient(180deg,rgba(41,42,49,.66),rgba(24,25,30,.74));
  border:1px solid rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateX(0);transition:transform 210ms cubic-bezier(.22,.85,.26,1);}
.notification-filters[data-active-index="1"] .notification-filter-indicator{transform:translateX(100%);}
.notification-filters[data-active-index="2"] .notification-filter-indicator{transform:translateX(200%);}
.notification-filters[data-active-index="3"] .notification-filter-indicator{transform:translateX(300%);}
.notification-filter{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:5px;min-width:0;height:42px;padding:0 5px;border:0;border-radius:15px;
  background:transparent !important;color:rgba(166,171,184,.86);
  font:610 clamp(11.5px,3.1vw,12.5px) var(--font);letter-spacing:-.012em;white-space:nowrap;
  cursor:pointer;transition:color 160ms ease,transform 100ms ease;}
.notification-filter.active{color:var(--nav-accent);}
.notification-filter:active{transform:scale(.97);}
.notification-filter-label{min-width:0;overflow:hidden;text-overflow:clip;}
/* Счёт стоит В ПОТОКЕ рядом с подписью: в углу он читался как случайно
   прилипшее число. */
.notification-filter-count{flex:none;display:grid;place-items:center;min-width:16px;height:16px;
  padding:0 4px;border-radius:8px;background:rgba(255,255,255,.055);color:rgba(166,171,184,.82);
  font:680 9px var(--font);line-height:1;}
.notification-filter.active .notification-filter-count{background:rgba(var(--af-accent-rgb),.11);color:var(--nav-accent);}
.notifications-content{min-height:240px;}
/* Смена категории объясняется ОДНИМ заходом контейнера: линза фильтра уже
   сказала, что выбор поменялся. */
.notifications-content.is-category-enter{animation:notificationCategoryEnter 150ms cubic-bezier(.22,.85,.26,1) both;}
@keyframes notificationCategoryEnter{from{opacity:.72;transform:translateY(3px);}to{opacity:1;transform:none;}}
/* ── Плашка даты ───────────────────────────────────────────────────────────
   Стена одинаковых карточек не давала иерархии: каждое письмо кричало о себе
   собственной тенью. Одна поверхность на дату, строки внутри неё. */
.notification-day-group + .notification-day-group{margin-top:19px;}
.notification-day-label{margin:0 4px 8px;color:rgba(142,148,160,.82);font:610 11.5px var(--font);
  letter-spacing:-.005em;}
.notification-sheet{position:relative;overflow:hidden;border-radius:22px;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(18,19,23,.92),rgba(11,12,15,.96));
  box-shadow:0 18px 42px -34px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.045);}
/* Появление — на уровне ПЛАШКИ, а не строки: лестница из полусотни писем
   превращала загрузку в волну. */
.notifications-content.is-first-paint .notification-day-group{
  animation:notificationGroupIn 170ms cubic-bezier(.22,.85,.26,1) both;
  animation-delay:var(--notification-group-reveal,0ms);}
@keyframes notificationGroupIn{from{opacity:.7;transform:translateY(5px);}to{opacity:1;transform:none;}}
.notification-row{position:relative;min-width:0;}
/* Разделитель — внутри плашки и с отступом под текст, а не рамка вокруг
   каждой строки. */
.notification-row + .notification-row::before{content:"";position:absolute;top:0;left:68px;right:14px;
  height:1px;background:rgba(255,255,255,.055);}
/* Непрочитанное — ФОРМА плюс цвет: полоса у края и едва заметная подложка.
   Точка на углу значка украшала каждую иконку и превращала список в ёлку. */
.notification-row.is-unread{background:linear-gradient(90deg,rgba(var(--af-accent-rgb),.035),transparent 40%);}
.notification-row.is-unread::after{content:"";position:absolute;left:0;top:17px;bottom:17px;width:2px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,rgba(var(--af-accent-rgb),.92),rgba(var(--af-accent-rgb),.42));}
.notification-row.is-unread .notification-copy b{color:rgba(245,246,250,.98);}
/* Одно действие на строку: вся строка и есть кнопка. */
.notification-primary{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 16px;
  align-items:start;gap:12px;padding:14px;border:0;background:transparent;color:inherit;
  text-align:left;cursor:pointer;transition:background-color 140ms ease;}
.notification-primary:active{background:rgba(255,255,255,.03);}
.notification-primary:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.notification-event-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:linear-gradient(180deg,rgba(var(--af-accent-rgb),.085),rgba(var(--af-accent-rgb),.035));
  border:1px solid rgba(var(--af-accent-rgb),.065);color:rgba(var(--af-accent-rgb),.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
/* Оптическая нормализация: одинаковые числа ширины НЕ дают одинакового веса.
   Звезда плотная и кажется крупнее, каретка разрыва — воздушная, три фигуры
   людей шире всех. Размеры подобраны по видимому весу, а не по атрибуту. */
.notification-event-icon svg{width:21px;height:21px;}
/* Лицо строки: постер фильма или лицо человека — того же размера, что значок,
   чтобы строки не прыгали. Постер — вертикальный, лицо — круг. */
.notification-visual{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;}
.notification-visual .notification-event-icon{position:absolute;inset:0;width:100%;height:100%;}
.notification-visual img{position:relative;z-index:1;display:block;object-fit:cover;
  background:var(--s2);box-shadow:0 0 0 1px rgba(255,255,255,.07);}
.notification-visual-poster img{width:30px;height:42px;border-radius:7px;}
.notification-visual-avatar img{width:40px;height:40px;border-radius:50%;}
.notification-event-rating svg{width:20px;height:20px;}
.notification-event-accepted svg{width:22px;height:22px;}
.notification-event-invite svg{width:21.5px;height:21.5px;transform:translateX(-.5px);}
.notification-event-declined svg{width:21.5px;height:21.5px;transform:translateX(-.5px);}
.notification-event-expired svg{width:21px;height:21px;}
.notification-event-ended svg{width:20.5px;height:20.5px;}
.notification-event-system svg{width:20.5px;height:20.5px;}
/* Системное — нейтральный графит: раскрашивать каждую категорию своим цветом
   значило бы объяснять цветом то, что уже сказано значком. */
.notification-event-system{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.05);
  color:rgba(174,180,191,.88);}
.notification-copy{display:flex;flex-direction:column;min-width:0;gap:3px;padding-top:1px;}
.notification-copy b{font-size:14.8px;font-weight:690;line-height:1.24;letter-spacing:-.018em;
  color:rgba(233,235,241,.94);}
.notification-body{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  color:rgba(160,166,178,.9);font-size:13.2px;line-height:1.42;}
/* Время и подпись действия — одна нижняя строка: раньше подпись была отдельной
   кнопкой и висела под карточкой отдельным блоком. */
.notification-meta{display:flex;align-items:center;min-width:0;margin-top:3px;gap:10px;}
.notification-meta time{color:rgba(124,130,142,.86);font-size:11.5px;}
.notification-action-label{margin-left:auto;display:inline-flex;align-items:center;gap:2px;
  color:rgba(var(--af-accent-rgb),.9);font:620 11.5px var(--font);white-space:nowrap;}
.notification-action-caret{width:11px;height:11px;}
.notification-chevron{display:grid;place-items:center;width:16px;height:26px;margin-top:5px;
  color:rgba(150,156,168,.62);}
.notification-chevron svg{width:15px;height:15px;}
/* Догрузка — тихая строка под плашками, а не ещё одна панель во всю ширину. */
.notifications-more{display:block;margin:16px auto 0;min-height:44px;padding:0 18px;border:0;
  border-radius:14px;background:transparent;color:var(--nav-accent);font:620 12.5px var(--font);
  cursor:pointer;transition:background-color 140ms ease;}
.notifications-more:active{background:rgba(255,255,255,.045);}
.notifications-empty{display:flex;flex-direction:column;align-items:center;padding:46px 20px 60px;
  text-align:center;}
.notifications-empty>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;
  border-radius:16px;background:rgba(255,255,255,.04);color:rgba(var(--af-accent-rgb),.86);}
.notifications-empty svg{width:23px;height:23px;}
.notifications-empty h2{font-size:16.5px;font-weight:680;letter-spacing:-.02em;
  color:rgba(233,235,241,.92);}
.notifications-empty p{max-width:262px;margin-top:7px;color:rgba(150,156,168,.86);font-size:13px;
  line-height:1.46;}
.notifications-error .notifications-more{margin-top:12px;}
/* Скелет повторяет анатомию плашки: иначе содержимое приезжает в другую
   геометрию, и экран прыгает. */
.notification-skeleton-label{width:64px;height:11px;border-radius:6px;background:#1a1c21;
  animation:notification-pulse 1.25s ease-in-out infinite;}
.notification-skeleton{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:14px;}
.notification-skeleton + .notification-skeleton{position:relative;}
.notification-skeleton + .notification-skeleton::before{content:"";position:absolute;top:0;left:54px;
  right:14px;height:1px;background:rgba(255,255,255,.055);}
.notification-skeleton>i,.notification-skeleton span>*{display:block;background:#1a1c21;
  animation:notification-pulse 1.25s ease-in-out infinite;}
.notification-skeleton>i{width:42px;height:42px;border-radius:13px;}
.notification-skeleton span{display:flex;flex-direction:column;gap:8px;padding-top:3px;}
.notification-skeleton b{width:58%;height:13px;border-radius:6px;}
.notification-skeleton em{width:92%;height:10px;border-radius:5px;}
.notification-skeleton small{width:32%;height:9px;border-radius:5px;}
@keyframes notification-pulse{50%{opacity:.48;}}
/* Отказ от движения снимает УКРАШЕНИЯ, а не работоспособность: фильтры
   переключаются, подсказка появляется, карточки открываются — просто сразу. */
@media(prefers-reduced-motion:reduce){
  .notification-skeleton>i,.notification-skeleton span>*{animation:none;}
  .notification-row,.notification-primary,.notification-filter,
  .notification-mark-all,.notification-companion,.notifications-more{transition:none;}
  .notification-filter-indicator{transition:none;}
  .notifications-content.is-category-enter,
  .notifications-content.is-first-paint .notification-day-group,
  .notification-companion.is-visible .watchcat-tail,
  .notification-companion-count.is-changed{animation:none;}
  .notification-primary:active,.notification-filter:active,
  .notification-companion:active,.notification-mark-all:active:not(:disabled){transform:none;}
}
/* ── search (home tile) — Graphite Search ────────────────────────────────────
   Родня нижней навигации по материалу, но не её копия: навигация — плавающая
   хромка, поиск — поле, в которое сейчас будут писать. Поэтому здесь стекло
   чуть светлее и прозрачнее, а размытие слабее (18px против 22px у острова).
   Размытие принадлежит ТОЛЬКО этому корпусу: у кнопки фильтра своего
   backdrop-filter нет намеренно — второй живой слой рядом с первым стоил бы
   кадров ровно там, где человек ждёт клавиатуру. */
.search{position:relative;margin:18px 20px 0;height:58px;border-radius:24px;
  display:flex;align-items:center;padding:0;
  background:linear-gradient(180deg,rgba(25,27,32,.60) 0%,rgba(12,13,17,.70) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 14px 34px -26px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.115),
             inset 0 -1px 0 rgba(0,0,0,.18);
  overflow:hidden;}
/* Запуск поиска — настоящая кнопка, а не кликабельный div: клавиатура,
   озвучивание и делегирование достаются от платформы, а не дописываются. */
/* Кнопка занимает поле целиком: соседнего управления рядом больше нет. */
.search .search-tap{width:100%;flex:1;min-width:0;height:100%;padding:0 18px;
  border:0;background:none;display:flex;align-items:center;gap:12px;border-radius:23px;
  color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;}
.search .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(222,225,234,.66);font-size:15.5px;font-weight:450;line-height:1;letter-spacing:-.012em;
  transition:opacity .16s ease;}
.search .search-tap:active .q{opacity:.80;}
.search .icn{flex:none;display:grid;place-items:center;width:22px;height:22px;
  color:rgba(222,225,234,.62);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), color .18s ease;}
.search .icn svg{width:21px;height:21px;display:block;}
.search .search-tap:active .icn{transform:scale(.92);}
.search .search-tap:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-3px;}

/* ── chips ──────────────────────────────────── */
.chips{display:flex;gap:8px;padding:18px 20px 4px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 15px 0 12px;
  border-radius:999px;border:1px solid var(--hair);background:var(--s2);color:#D7D9DE;cursor:pointer;
  font:550 13.5px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;scroll-snap-align:start;
  transition:transform .15s,background .16s,color .16s,border-color .16s;}
.chip:active{transform:scale(.95);}
.chip.active{background:rgba(var(--accent-rgb),.15);color:var(--accent-2);border-color:rgba(var(--accent-rgb),.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.chip:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
@media(max-width:370px){.chips{padding-left:16px;padding-right:16px;scroll-padding-inline:16px;}.chip{gap:7px;min-height:42px;padding-left:11px;padding-right:13px;font-size:13px;}}

/* ── section + rail ─────────────────────────── */
section{margin-top:30px;}
/* ── Каталог на главной ──────────────────────────────────────────────────────
   Родня поиску и навигации по материалу, но НАМЕРЕННО тише: это не третий
   стеклянный остров. Своего backdrop-filter здесь нет — размытие уже держат
   поле поиска и панель вкладок, а третий живой слой на том же экране платился
   бы кадрами при первой же прокрутке. */
.discovery-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  /* overflow:hidden СНЯТ: поднятая линза обязана выходить за оболочку, ровно
     как нижнее стекло выходит за свою панель. Резать было нечего и прежде —
     запасная капсула лежит с отступом 4px и наружу не просилась. */
  height:48px;margin:17px 20px 0;padding:4px;
  /* 24px — половина высоты: настоящая капсула, концентричная с запасной
     капсулой 40px/20px внутри и с нижним островом 68px/34px. */
  border:1px solid rgba(255,255,255,.082);border-radius:24px;
  /* Переключатель ближе к содержимому, чем плавающий остров, и обязан
     оставаться ТИШЕ него: backdrop-filter здесь не ставится намеренно —
     второй живой слой размытия в обычном потоке стоит дорого и оптически
     почти ничего не добавляет. */
  /* ТА ЖЕ оптическая логика, что у #tabbar — верхний блик, левый и правый рим,
     тёмная нижняя толщина, — но на ступень тише: это компактная навигация, а
     не главный остров. Фиолетового в материале нет: фиолетовый — это
     состояние, а не тело. */
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.068) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 66%),
             linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  box-shadow:0 14px 34px -29px rgba(0,0,0,.94),
             inset 0 1px 0 rgba(255,255,255,.155),
             inset 1px 0 0 rgba(255,255,255,.025),
             inset -1px 0 0 rgba(0,0,0,.14),
             inset 0 -1px 0 rgba(0,0,0,.25);
  isolation:isolate;}
/* Та же модель владения, что у нижнего острова: ВНЕШНИЙ узел держит позицию,
   ВНУТРЕННИЙ — материал. Раньше оба жили в одном узле, и растянуть материал
   было нельзя, не сдвинув заодно позицию. */
/* Сцена верхнего переключателя. По вертикали запас постоянный: подъём здесь
   приведён к его собственной высоте и добавляет около 8px, плюс внешняя тень.

   По горизонтали запас ОБРЕЗАН ПО ЭКРАНУ. Переключатель стоит в общем потоке и
   на узком телефоне подходит к краю вплотную: постоянные −18px создали бы
   горизонтальную прокрутку документа на 320px. `(100vw - 100%)/2` — это ровно
   собственное поле переключателя, поэтому сцена берёт всё поле минус два
   пикселя и никогда не выходит за экран. Глобальным overflow-x это не
   лечится: прокрутка документа — свойство продукта, а не заплатка. */
.discovery-tabs .discovery-liquid-stage{
  left:max(-18px,calc(2px - (100vw - 100%) / 2));
  right:max(-18px,calc(2px - (100vw - 100%) / 2));
  top:-14px;bottom:-14px;}
/* Богатый режим включается ТОЛЬКО после первого настоящего кадра, и до этого
   момента видна обычная подпись и запасная капсула. Прячется именно ПОДПИСЬ, а
   не кнопка: кнопка остаётся настоящей, фокусируемой и нажимаемой, иначе
   пропала бы и рамка фокуса. */
.discovery-tabs[data-liquid="on"] .discovery-label{opacity:0;}
.discovery-tabs[data-liquid="on"] .discovery-indicator{opacity:0;transition:none;}
.discovery-label{display:block;min-width:0;overflow:hidden;text-overflow:clip;
  white-space:nowrap;}
.discovery-indicator{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / 4);
  pointer-events:none;transform:translate3d(0,0,0);
  transition:transform .24s var(--af-nav-ease);}
/* Материал ЗАПАСНОЙ капсулы. Прежде внутри неё жили три оптических узла и
   анимировались через WAAPI — это была вторая система движения, и она снята
   целиком: теперь движением владеет тот же движок, что и внизу. Здесь остаётся
   статичный материал для случаев, когда богатый путь недоступен. */
.discovery-indicator{border-radius:20px;
  background:radial-gradient(110% 90% at 40% -20%,rgba(255,255,255,.14),rgba(255,255,255,.045) 45%,rgba(255,255,255,.018) 72%),
             linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 -1px 0 rgba(0,0,0,.22);}
.discovery-tabs[data-active-index="0"] .discovery-indicator{transform:translate3d(0,0,0);}
.discovery-tabs[data-active-index="1"] .discovery-indicator{transform:translate3d(100%,0,0);}
.discovery-tabs[data-active-index="2"] .discovery-indicator{transform:translate3d(200%,0,0);}
.discovery-tabs[data-active-index="3"] .discovery-indicator{transform:translate3d(300%,0,0);}
/* Выделение — материал, а не заливка цветом: фиолетовым остаётся только
   подпись выбранного раздела. */
.discovery-tab{position:relative;z-index:1;min-width:0;height:40px;padding:0 4px;
  border:0;border-radius:20px;background:transparent;overflow:hidden;
  color:rgba(190,195,205,.72);font:600 12.5px/1 var(--font);letter-spacing:-.018em;
  text-overflow:clip;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  /* Задержки оттенка больше НЕТ. Прежде подпись «ждала» приехавшую капсулу по
     таймеру — это была сценарность: цвет менялся по часам, а не по тому, накрыт
     ли раздел материалом. В богатом режиме подпись рисует холст, и решает маска
     силуэта; здесь остаётся мгновенный ответ на касание. */
  transition:color .18s ease, transform .14s cubic-bezier(.2,.8,.2,1);}
/* z-index:-1, а не 0: подпись раздела — голый текст без обёртки, и слой с
   z-index:0 лёг бы ПОВЕРХ неё. Кнопка создаёт свой контекст наложения
   (position:relative + z-index:1), поэтому отрицательный индекс остаётся
   внутри неё и уходит под текст, а не под сам переключатель. */
.discovery-tab::after{content:"";position:absolute;inset:3px;z-index:-1;
  border-radius:12px;pointer-events:none;opacity:0;transform:scale(.88);
  background:radial-gradient(75% 100% at 50% 0%,rgba(255,255,255,.105),rgba(255,255,255,.025) 45%,transparent 75%);
  transition:opacity .15s ease, transform .18s cubic-bezier(.2,.8,.2,1);}
.discovery-tab:active::after{opacity:.23;transform:scale(1);}
.discovery-tab[aria-selected="true"]{color:var(--nav-accent);}
.discovery-tab:active{transform:scale(.96);}
.discovery-tab:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.52);outline-offset:-3px;}
/* Узкие телефоны: подпись обязана помещаться сама, без обрезки и без
   горизонтальной прокрутки переключателя. */
@media(max-width:340px){
  /* На узком телефоне место берётся у полей, а не у читаемости шрифта. */
  .discovery-tabs{margin-left:16px;margin-right:16px;}
  .discovery-tab{font-size:11.4px;padding-inline:1px;letter-spacing:-.025em;}
}
.discovery-panel{margin-top:18px;min-height:248px;}
/* Подпись раздела вместо огромного H2: название уже сказано вкладкой, и
   повторять его крупным заголовком значит сказать одно и то же дважды. */
.discovery-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:32px;padding:0 20px 11px;}
.discovery-caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(182,187,198,.72);font-size:12.5px;font-weight:520;letter-spacing:-.01em;}
.discovery-panel-actions{flex:none;display:flex;align-items:center;gap:10px;}
.discovery-see-all{flex:none;min-height:32px;padding:0;border:0;background:transparent;
  color:var(--nav-accent);font:600 12.5px var(--font);cursor:pointer;}
.discovery-add{flex:none;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid rgba(255,255,255,.075);border-radius:11px;
  background:rgba(255,255,255,.045);color:rgba(222,225,234,.78);cursor:pointer;}
.discovery-add svg{width:17px;height:17px;}
/* Движения у панели разделов нет намеренно: единственный движущийся предмет
   в навигации — само стекло. */
/* ── Обзор: настоящая главная ────────────────────────────────────────────────
   Сфокусированные режимы остались, но по умолчанию человек снова видит весь
   каталог: у разделов здесь свои заголовки, а не одна общая подпись. */
.overview-section{margin-top:28px;}
.overview-section:first-child{margin-top:18px;}
.overview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 12px;}
.overview-head h2{min-width:0;font-size:19px;line-height:1.15;font-weight:680;letter-spacing:-.03em;}
.overview-more{flex:none;min-height:32px;padding:0;border:0;background:none;
  color:var(--nav-accent);font:600 12.5px var(--font);cursor:pointer;}
/* ── Появление один раз ──────────────────────────────────────────────────────
   Только прозрачность и сдвиг, только при первом попадании в экран. Ни одного
   кадра прокрутки в DOM: наблюдатель отпускает узел сразу после показа. */
.reveal-item{opacity:0;transform:translateY(7px) scale(.99);}
.reveal-item.is-revealed{opacity:1;transform:none;
  transition:opacity .2s cubic-bezier(.05,.7,.1,1) var(--reveal-delay,0ms),
             transform .22s cubic-bezier(.05,.7,.1,1) var(--reveal-delay,0ms);}
/* ── Жанры: одна плитка на все режимы ────────────────────────────────────────
   Колода во весь экран показывала по одному жанру за раз — каталог из
   семнадцати категорий так не просматривают. Ни фотографий, ни иконок: жанр
   узнаётся названием, счётом и еле заметным тинтом. */
/* Полка жанров: две строки, горизонтальный просмотр, ВСЕ категории. Колода из
   V2 показывала по одному жанру за раз, вертикальная сетка V3 листалась вниз —
   здесь и плотность, и жест. */
.genre-shelf{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
  scroll-padding-inline:20px;padding:3px 20px 10px;}
.genre-shelf::-webkit-scrollbar{display:none;}
.genre-shelf-focus{grid-template-rows:repeat(2,112px);grid-auto-columns:clamp(196px,54vw,224px);
  gap:12px;padding-top:4px;padding-bottom:14px;}
.genre-shelf-focus .genre-tile{border-radius:24px;padding:18px 16px;}
.genre-shelf-focus .genre-tile-copy b{font-size:17.5px;}
.genre-shelf-focus .genre-tile-index{font-size:47px;}
.genre-shelf-overview{grid-template-rows:repeat(2,80px);grid-auto-columns:168px;}
.genre-tile{position:relative;min-width:0;overflow:hidden;isolation:isolate;
  padding:14px 13px 13px;border:1px solid rgba(255,255,255,.070);border-radius:20px;
  background:radial-gradient(110% 145% at 100% -10%,var(--genre-glow,rgba(var(--af-accent-rgb),.14)),transparent 52%),
             linear-gradient(145deg,#14161A 0%,#0D0E11 68%,#090A0C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  color:#fff;text-align:left;cursor:pointer;touch-action:manipulation;scroll-snap-align:start;
  transition:transform .14s cubic-bezier(.2,.8,.2,1), border-color .16s ease;}
.genre-tile:active{transform:scale(.97);border-color:rgba(var(--af-accent-rgb),.24);}
/* Свайп вправо мягко поднимает следующую пару, предыдущая оседает. Наклон
   покоя намеренно крошечный: карточки меньше, чем колода V2. */
.genre-shelf-focus .genre-tile{opacity:.80;transform:scale(.975) rotate(var(--genre-rest-rotation,0deg));
  transition:transform .22s cubic-bezier(.22,.85,.26,1), opacity .18s ease, border-color .18s ease;}
.genre-shelf-focus .genre-tile.is-active-column{opacity:1;transform:translateY(-1px) scale(1.015) rotate(0deg);
  border-color:rgba(var(--af-accent-rgb),.13);}
/* На главной то же оживление, но тише: ни наклона, ни подъёма — там уже
   достаточно движущихся полос. */
.genre-shelf-overview .genre-tile{opacity:.90;transform:scale(.985);
  transition:transform .19s cubic-bezier(.22,.85,.26,1), opacity .16s ease, border-color .16s ease;}
.genre-shelf-overview .genre-tile.is-active-column{opacity:1;transform:scale(1);
  border-color:rgba(var(--af-accent-rgb),.11);}
.genre-shelf-focus .genre-tile:active{transform:scale(.965) rotate(0);}
/* Одна абстрактная фигура, не больше: плитка обязана остаться тихой. */
.genre-tile::before{content:"";position:absolute;width:88px;height:88px;right:-34px;bottom:-48px;
  border:1px solid rgba(255,255,255,.050);border-radius:50%;pointer-events:none;}
.genre-tile-index{position:absolute;top:5px;right:10px;color:rgba(255,255,255,.035);
  font-size:40px;line-height:1;font-weight:720;letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;pointer-events:none;}
.genre-tile-copy{position:absolute;left:14px;right:36px;bottom:13px;}
.genre-tile-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(249,249,251,.97);font-size:17px;line-height:1.05;font-weight:680;letter-spacing:-.025em;}
.genre-tile-copy small{display:block;margin-top:6px;color:rgba(190,195,205,.63);
  font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;}
.genre-tile-arrow{position:absolute;right:12px;bottom:13px;width:16px;height:16px;color:rgba(210,214,223,.48);}
.genre-tile-arrow svg{width:16px;height:16px;}
.genre-tile.is-compact .genre-tile-copy{left:12px;right:30px;bottom:10px;}
.genre-tile.is-compact .genre-tile-copy b{font-size:14.5px;}
.genre-tile.is-compact .genre-tile-copy small{margin-top:4px;font-size:10.5px;}
.genre-tile.is-compact .genre-tile-index{font-size:30px;}
/* Слабое устройство или запрет движения: полка стоит ровно, но листается и
   нажимается точно так же. */
.genre-shelf-motion-off .genre-tile{opacity:1;transform:none;transition:border-color .16s ease;}
/* ── Жанровый профиль ────────────────────────────────────────────────────────
   Одна тихая карточка на пять строк, а не пять крупных карточек: это справка о
   привычках, а не второй каталог. */
.genre-taste-card{margin:6px 20px 16px;border:1px solid rgba(255,255,255,.065);border-radius:22px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;}
.genre-taste-head{padding:15px 16px 11px;}
.genre-taste-head b{display:block;color:rgba(248,249,251,.96);font-size:15px;font-weight:660;letter-spacing:-.02em;}
.genre-taste-head small{display:block;margin-top:3px;color:rgba(181,186,198,.62);font-size:11.5px;}
.genre-taste-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;min-height:56px;padding:9px 16px;border:0;border-top:1px solid rgba(255,255,255,.055);
  background:transparent;color:inherit;text-align:left;cursor:pointer;
  transition:background .14s ease;}
.genre-taste-row:active{background:rgba(255,255,255,.035);}
.genre-taste-rank{color:var(--af-text-tertiary);font-size:14px;font-weight:680;font-variant-numeric:tabular-nums;}
.genre-taste-copy{min-width:0;}
.genre-taste-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(246,247,250,.94);font-size:14.5px;font-weight:600;letter-spacing:-.015em;}
.genre-taste-copy small{display:block;margin-top:2px;color:var(--af-text-secondary);font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.genre-taste-bar{display:block;margin-top:7px;height:4px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden;}
.genre-taste-bar i{display:block;height:100%;border-radius:99px;}
.genre-taste-pct{color:rgba(203,207,216,.72);font-size:12px;font-weight:620;font-variant-numeric:tabular-nums;}
.genre-taste-empty{padding:14px 16px 16px;color:rgba(181,186,198,.66);font-size:12.5px;line-height:1.4;}
/* ── Порядок «Топа» ──────────────────────────────────────────────────────────
   Четыре чипа занимали целую строку под заголовком ради выбора, который
   человек делает редко. Одна кнопка называет текущий порядок и открывает
   компактное меню. Меню всегда СВОЁ: родной попап Telegram рисует клиент, и
   системная панель выпадает из графитового материала приложения. */
/* Компактное стекло ДЕЙСТВИЯ: та же семья, что у навигации, но это кнопка, а
   не выбранный пункт — поэтому без фиолетового тела. 44px — полноценная
   цель пальца. */
.top-filter-trigger{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 13px;
  border:1px solid rgba(255,255,255,.082);border-radius:18px;
  background:radial-gradient(115% 100% at 28% -35%,rgba(255,255,255,.070),rgba(255,255,255,.014) 62%),
             linear-gradient(180deg,rgba(22,24,29,.44),rgba(9,10,13,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.145),
             inset 1px 0 0 rgba(255,255,255,.020),
             inset -1px 0 0 rgba(0,0,0,.12),
             inset 0 -1px 0 rgba(0,0,0,.24),
             0 10px 24px -22px rgba(0,0,0,.95);
  color:var(--ink-2);font:620 12.5px var(--font);letter-spacing:-.01em;white-space:nowrap;
  cursor:pointer;touch-action:manipulation;
  transition:border-color .16s ease, box-shadow .16s ease, transform .1s ease;}
/* Кнопка ПОРОДИЛА меню — это видно по чуть более живому стеклу, а не по цвету
   выбора. */
.top-filter-trigger[aria-expanded="true"]{border-color:rgba(255,255,255,.12);
  background:radial-gradient(115% 100% at 28% -35%,rgba(255,255,255,.090),rgba(255,255,255,.030) 62%),
             linear-gradient(180deg,rgba(26,28,33,.48),rgba(11,12,15,.54));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19),
             inset 1px 0 0 rgba(255,255,255,.025),
             inset -1px 0 0 rgba(0,0,0,.12),
             inset 0 -1px 0 rgba(0,0,0,.24),
             0 10px 24px -22px rgba(0,0,0,.95);}
.top-filter-trigger:active{transform:scale(.975);}
/* С классом кнопки: общее правило .top-ph-icon (16px) объявлено ниже и при
   равной специфичности перебивало размер — значок сортировки выходил 16px. */
.top-filter-trigger .top-filter-sort{width:18px;height:18px;color:rgba(220,224,232,.72);transition:color .16s ease;}
.top-filter-trigger[aria-expanded="true"] .top-filter-sort{color:rgba(220,224,232,.84);}
.top-filter-current{color:rgba(239,241,246,.90);font-weight:620;letter-spacing:-.01em;}
/* Официальные контуры Phosphor рисуются в поле 256×256 заливкой, а не обводкой
   24×24 общего набора ICONS — поэтому у них свой размерный блок. */
.top-ph-icon{display:block;flex:none;width:16px;height:16px;}
.top-filter-trigger .top-filter-caret{width:15px;height:15px;color:rgba(214,218,226,.70);
  transition:transform .16s cubic-bezier(.22,.85,.26,1);}
.top-filter-trigger[aria-expanded="true"] .top-filter-caret{transform:rotate(180deg);}
.top-filter-trigger:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-2px;}
/* Выше плавающей навигации (z-index 60): координаты задаёт JS от самой
   кнопки, и панель раскрывается вверх, когда снизу её накрыл бы остров. */
.top-filter-menu{position:fixed;z-index:70;
  width:min(248px,calc(100vw - 24px));padding:7px;border-radius:24px;
  /* Большая стеклянная поверхность: глубже тень, плотнее тело, та же семья
     римов. Цветного свечения нет. */
  background:radial-gradient(125% 85% at 24% -18%,rgba(255,255,255,.085) 0%,rgba(255,255,255,.022) 42%,rgba(255,255,255,0) 68%),
             linear-gradient(180deg,rgba(23,25,30,.78) 0%,rgba(11,12,15,.88) 100%);
  border:1px solid rgba(255,255,255,.095);
  -webkit-backdrop-filter:blur(24px) saturate(1.32) brightness(.95);
  backdrop-filter:blur(24px) saturate(1.32) brightness(.95);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.96),
             0 8px 22px -17px rgba(0,0,0,.82),
             inset 0 1px 0 rgba(255,255,255,.16),
             inset 1px 0 0 rgba(255,255,255,.025),
             inset -1px 0 0 rgba(0,0,0,.14),
             inset 0 -1px 0 rgba(0,0,0,.25);
  overflow:hidden;
  /* Панель растёт из угла у кнопки, а не из своей середины. */
  transform-origin:calc(100% - 26px) top;
  animation:topFilterMenuIn 175ms cubic-bezier(.22,.85,.26,1) both;}
.top-filter-menu.is-above{transform-origin:calc(100% - 26px) bottom;
  animation-name:topFilterMenuInAbove;}
/* Движутся ТОЛЬКО transform и opacity: анимация blur, ширины или координат
   заставила бы перерисовывать стекло каждый кадр. */
@keyframes topFilterMenuIn{
  0%{opacity:0;transform:translateY(-5px) scale(.975);}
  70%{opacity:1;transform:translateY(.5px) scale(1.003);}
  100%{opacity:1;transform:none;}}
@keyframes topFilterMenuInAbove{
  0%{opacity:0;transform:translateY(5px) scale(.975);}
  70%{opacity:1;transform:translateY(-.5px) scale(1.003);}
  100%{opacity:1;transform:none;}}
/* Уход короче прихода и НИЧЕГО не задерживает: выбор метрики уже ушёл в сеть,
   пока панель досматривает свои 120 мс. */
.top-filter-menu.is-closing{pointer-events:none;
  animation:topFilterMenuOut 115ms cubic-bezier(.4,0,1,1) both;}
.top-filter-menu.is-above.is-closing{animation-name:topFilterMenuOutAbove;}
@keyframes topFilterMenuOut{to{opacity:0;transform:translateY(-3px) scale(.985);}}
@keyframes topFilterMenuOutAbove{to{opacity:0;transform:translateY(3px) scale(.985);}}
.top-filter-item{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 20px;
  align-items:center;gap:11px;width:100%;height:50px;padding:0 12px;border:0;border-radius:16px;
  background:transparent;color:rgba(238,240,245,.90);font:610 13.5px var(--font);
  letter-spacing:-.012em;text-align:left;cursor:pointer;
  transition:background-color 130ms ease, color 130ms ease, transform 100ms ease;}
.top-filter-item:active{transform:scale(.985);}
/* Активная строка — НЕЙТРАЛЬНОЕ выбранное стекло. Прежняя лавандовая
   подложка была заливкой состояния на всю строку; теперь правило то же, что у
   навигации: материал нейтральный, а лавандовые только подпись, значок и
   галочка. */
.top-filter-item.is-active{color:var(--nav-accent);
  background:radial-gradient(100% 130% at 40% -25%,rgba(255,255,255,.105),rgba(255,255,255,.035) 52%,rgba(255,255,255,.018)),
             rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);}
@media (hover:hover) and (pointer:fine){
  .top-filter-item:not(.is-active):hover{background:rgba(255,255,255,.035);}
}
.top-filter-item:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.50);outline-offset:-2px;}
/* Обводка активной строки — псевдоэлементом: рамка на самой кнопке сдвинула бы
   её содержимое на пиксель относительно остальных трёх. */
.top-filter-item.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.075);pointer-events:none;}
.top-filter-item-icon .top-ph-icon{width:18px;height:18px;}
.top-filter-item-check .top-ph-icon{width:17px;height:17px;}
/* Оживает ТОЛЬКО значок текущего порядка: четыре одновременных подскока
   превратили бы открытие в мельтешение. */
.top-filter-menu:not(.is-closing) .top-filter-item.is-active .top-filter-item-icon .top-ph-icon,
.top-filter-menu:not(.is-closing) .top-filter-item.is-active .top-filter-item-check .top-ph-icon{
  animation:topActiveGlyphIn 150ms cubic-bezier(.22,.85,.26,1) both;}
/* Тише прежних .82 → 1.08: подскок на 8% читался игрушечно. */
@keyframes topActiveGlyphIn{
  0%{opacity:.6;transform:scale(.90);}
  65%{opacity:1;transform:scale(1.035);}
  100%{opacity:1;transform:scale(1);}}
.top-filter-menu:not(.is-closing) .top-filter-item.is-active .top-filter-item-check .top-ph-icon{
  animation-name:topCheckIn;}
@keyframes topCheckIn{
  0%{opacity:.2;transform:scale(.86);}
  100%{opacity:1;transform:scale(1);}}
.top-filter-item-icon{color:rgba(214,218,226,.65);}
.top-filter-item.is-active .top-filter-item-icon,
.top-filter-item.is-active .top-filter-item-check{color:var(--nav-accent);}
.top-ranked-metric-icon{display:grid;place-items:center;width:13px;height:13px;color:rgba(226,229,236,.72);}
.top-ranked-metric-icon .top-ph-icon{width:13px;height:13px;}
/* Золотой — рейтинг ПРОВАЙДЕРА, и только он. В списке по числу просмотров
   золотая звезда обещала бы рейтинг, которого там нет. */
.top-ranked-metric.is-rating .top-ranked-metric-icon{color:var(--af-provider-rating);}
/* Смена порядка — это новый список, а не прокрутка: один короткий заход
   объясняет, что строки пересобрались. */
/* Заходит СПИСОК целиком, а не сто строк по очереди: постраничный каскад на
   сотне элементов — это сотня анимаций ради одного объяснения. */
.top-ranked-list.is-metric-enter{animation:topMetricListIn 165ms cubic-bezier(.22,.85,.26,1) both;}
@keyframes topMetricListIn{from{opacity:.86;transform:translateY(4px);}to{opacity:1;transform:none;}}
.top-ranked-list.is-metric-enter .top-ranked-rating{
  animation:topMetricValueIn 165ms cubic-bezier(.22,.85,.26,1) both;}
@keyframes topMetricValueIn{from{opacity:.55;transform:scale(.94);}to{opacity:1;transform:none;}}
.discovery-count{flex:none;color:var(--af-text-secondary);font-size:11.5px;font-weight:600;
  font-variant-numeric:tabular-nums;}
/* ── «Топ»: порядок, а не витрина ────────────────────────────────────────────
   Горизонтальная лента постеров прятала главное свойство раздела — ранг. */
.top-ranked-list{overflow:hidden;margin:1px 20px 12px;
  border:1px solid rgba(255,255,255,.065);border-radius:22px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.top-ranked-row{display:grid;grid-template-columns:34px 54px minmax(0,1fr) auto;align-items:center;
  gap:11px;width:100%;min-height:98px;padding:8px 12px 8px 8px;border:0;
  border-bottom:1px solid rgba(255,255,255,.045);background:transparent;color:inherit;
  text-align:left;cursor:pointer;
  transition:background .14s ease, transform .13s cubic-bezier(.2,.8,.2,1);}
.top-ranked-row:last-child{border-bottom:0;}
.top-ranked-row:active{background:rgba(255,255,255,.035);transform:scale(.992);}
.top-rank{color:var(--af-text-tertiary);font-size:21px;line-height:1;font-weight:680;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;}
.top-ranked-art{position:relative;width:54px;aspect-ratio:2/3;overflow:hidden;
  border:1px solid rgba(255,255,255,.075);border-radius:10px;background:#111318;}
.top-ranked-art img{width:100%;height:100%;object-fit:cover;display:block;}
.top-ranked-copy{min-width:0;}
.top-ranked-copy b{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  color:rgba(248,249,251,.96);font-size:14.5px;line-height:1.22;font-weight:620;letter-spacing:-.018em;}
.top-ranked-original{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-top:3px;color:var(--af-text-secondary);font-size:11.5px;}
.top-ranked-year{display:block;margin-top:5px;color:var(--af-text-tertiary);font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.top-ranked-rating{display:inline-flex;align-items:center;gap:3px;min-width:42px;padding:5px 7px;
  border-radius:9px;background:rgba(255,255,255,.045);color:#fff;font-size:12px;font-weight:650;
  font-variant-numeric:tabular-nums;}
.top-ranked-rating .star{color:var(--af-provider-rating);}
/* Подборки: сетка вместо горизонтальной ленты — название получает две строки,
   и «для одиночного пр…» больше не обрезается на середине слова. */
/* Обзор показывает подборки целиком, поэтому у дорожки своя плотность и
   двухстрочный заголовок: «для одиночного пр…» обрывалось на середине слова. */
.featured-track.overview-featured-track{scroll-snap-type:x proximity;}
.featured-track.overview-featured-track .featured-slot{flex:0 0 min(88vw,430px);}
.overview-collection-rail > .poster{flex:0 0 132px;}
@media(min-width:430px){.overview-collection-rail > .poster{flex-basis:138px;}}
.overview-collection-rail .meta .t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;line-height:1.22;min-height:2.44em;}
.collection-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 12px;padding:2px 20px 12px;}
.collection-focus-grid .meta .t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;line-height:1.25;min-height:2.5em;}
.featured-slot{opacity:.82;transform:scale(.98);
  transition:opacity .2s ease, transform .22s cubic-bezier(.05,.7,.1,1);}
.featured-slot.is-active{opacity:1;transform:none;}
.discovery-subcaption{padding:0 20px 8px;color:rgba(182,187,198,.66);font-size:11.5px;font-weight:560;}
.discovery-collections{display:flex;flex-direction:column;gap:14px;}
.collection-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 12px;padding:0 20px;}
.collection-overview-grid .poster{min-width:0;}
@media(prefers-reduced-motion:reduce){
  .discovery-indicator,.discovery-tab{transition:none;}
  .discovery-tab:active,.top-ranked-row:active{transform:none;}
  /* Полка стоит ровно: ни наклона покоя, ни оживления колонки. */
  .genre-shelf-focus .genre-tile,.genre-shelf-overview .genre-tile,
  .genre-tile:active{opacity:1!important;transform:none!important;transition:none!important;}
  /* Меню открывается и закрывается сразу: снимаем движение, а не
     работоспособность. */
  .top-filter-menu,.top-filter-menu.is-closing{animation:none;}
  /* Специфичность под стать правилу каретки у кнопки: иначе переход каретки
     пережил бы отказ от движения. */
  .top-filter-trigger .top-filter-caret,.top-filter-trigger .top-filter-sort,
  .top-filter-trigger,.top-filter-item{transition:none;}
  .top-filter-trigger:active,.top-filter-item:active{transform:none;}
  .top-filter-menu:not(.is-closing) .top-filter-item.is-active .top-filter-item-icon .top-ph-icon,
  .top-filter-menu:not(.is-closing) .top-filter-item.is-active .top-filter-item-check .top-ph-icon,
  .top-ranked-list.is-metric-enter,
  .top-ranked-list.is-metric-enter .top-ranked-rating{animation:none;}
  /* Содержимое сразу на месте: снимаем движение, а не состояние. */
  .reveal-item{opacity:1!important;transform:none!important;transition:none!important;}
  .featured-slot{opacity:1;transform:none;transition:none;}
}
.head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 13px;}
.head h2{font-size:19px;font-weight:650;letter-spacing:-0.03em;}
.rail{display:flex;align-items:flex-start;gap:14px;padding:2px 20px 4px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{display:none;}
.rail-empty{color:var(--ink-2);font-size:14px;padding:14px 4px;}

/* ── poster ─────────────────────────────────── */
.poster{cursor:pointer;min-width:0;}
.poster .art{transition:transform 80ms cubic-bezier(.2,.8,.2,1);transform-origin:center;}
.poster:active .art,.poster.is-activating .art{transform:scale(.982);}
.rail > .poster{flex:0 0 148px;scroll-snap-align:start;}
.art{position:relative;width:100%;aspect-ratio:2/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:var(--shadow);border:1px solid var(--hair);}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.art::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);}
/* плейсхолдер всегда под постером: если постера нет или он не загрузился (img удаляется) — виден он */
.noposter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);}
.rate{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:9px;font-size:12px;font-weight:600;color:#fff;
  background:rgba(8,9,11,.6);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;}
.rate.mark{left:auto;right:9px;background:rgba(var(--af-accent-rgb),.9);border-color:transparent;color:var(--af-on-accent);}
.meta{padding:11px 2px 0;}
.meta .t{font-size:14px;font-weight:550;letter-spacing:-0.015em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta .title-alt{margin-top:3px;color:var(--ink-2);font-size:11.5px;font-weight:450;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.meta .y{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
/* компактная оценка в мета-строке (вынесена из-под постера): деликатная, не спорит с годом */
.rate-pill{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;
  font-size:12px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.rate-pill .s{color:#F4B740;font-size:11px;line-height:1;}
/* Источник оценки рядом с числом: тише числа, но всегда виден (КП / IMDb / TMDB). */
.rate-src{margin-left:3px;font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);}

/* ── grid (списки, поиск, жанр) ─────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px;}
.load-more{display:block;margin:22px auto 8px;min-height:44px;padding:0 20px;border:1px solid var(--hair-2);border-radius:14px;background:var(--s2);color:var(--ink);font:600 14px var(--font);cursor:pointer;}.load-more:disabled{opacity:.58;cursor:default;}

/* ── page heads / back ──────────────────────── */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--safe-top) + 16px) 20px 18px;}
.page-head h1{font-size:26px;font-weight:700;letter-spacing:-0.03em;}
.page-head-action{width:38px;height:38px;flex:none;border:1px solid var(--hair-2);border-radius:12px;background:var(--s2);color:var(--ink);font:600 20px/1 var(--font);cursor:pointer;box-shadow:var(--shadow);}
.sub-head{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-top) + 14px) 20px 18px;}
.sub-head h1{font-size:22px;font-weight:650;letter-spacing:-0.03em;}
.back{width:38px;height:38px;flex:none;border:none;border-radius:12px;background:var(--s2);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--hair);transition:transform .18s;}
.back:active{transform:scale(.9);}
.back svg{width:20px;height:20px;}

/* ── detail v2 (Quiet Luxury) ───────────────── */
.detail-v2{position:relative;}

/* sticky header — invisible until backdrop scrolls past */
.d-sticky{position:fixed;top:0;left:0;right:0;z-index:40;
  height:calc(52px + var(--safe-top));padding-top:var(--safe-top);
  display:flex;align-items:center;justify-content:space-between;padding-left:12px;padding-right:12px;
  background:rgba(5,5,5,0);opacity:0;pointer-events:none;
  transition:opacity .2s linear,background-color .2s linear;border-bottom:1px solid transparent;}
.d-sticky.show{opacity:1;pointer-events:auto;background:rgba(5,5,5,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:var(--hair);}
.d-sticky .t{flex:1;text-align:center;font-size:15px;font-weight:600;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;}
.d-sticky.show .t{opacity:1;transform:none;}

/* floating circular controls — backdrop + sticky share the same look */
.d-ctrl{width:36px;height:36px;flex:none;border:none;border-radius:50%;background:rgba(20,21,24,.55);
  color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);transition:transform .15s;}
/* Атрибут `hidden` обязан побеждать. У .d-ctrl собственный display, а он
   специфичнее правила [hidden]{display:none} из таблицы браузера — без этой
   строки скрытая кнопка оставалась на экране. */
.d-ctrl[hidden]{display:none;}
.d-ctrl:active{transform:scale(.88);}
.d-ctrl svg{width:19px;height:19px;}

/* Геометрия и слои героя карточки живут в одном месте — см. «Detail hero
   geometry» ниже. Здесь их намеренно нет: раньше .d-backdrop определялся в
   трёх местах, и какое правило работает, решал порядок строк в файле. */
.d-floatctrls{position:absolute;top:0;left:0;right:0;z-index:3;
  padding:calc(10px + var(--safe-top)) 14px 0;display:flex;align-items:center;justify-content:space-between;}

/* poster + identity block — overlaps backdrop bottom edge */
.d-poster-wrap{position:relative;width:fit-content;margin-inline:auto;display:flex;justify-content:center;will-change:transform;transform-origin:center top;}
.d-poster{position:relative;width:128px;aspect-ratio:2/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:0 20px 40px -16px rgba(0,0,0,.85);
  border:1px solid var(--hair);transition:opacity .1s;}
.d-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.d-poster .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--ink-2);}
.d-poster-admin-edit{position:absolute;right:8px;bottom:8px;z-index:3;width:30px;height:30px;
  padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;
  background:rgba(11,12,15,.78);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);}
.d-poster-admin-edit svg{width:15px;height:15px;}
.poster-curator-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.58);backdrop-filter:blur(8px);}
.poster-curator-sheet{width:100%;max-height:82vh;overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;background:#111;}
.poster-curator-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.poster-curator-close{width:32px;height:32px;border:0;border-radius:50%;color:var(--ink);background:var(--s2);font-size:24px;line-height:1;}
.poster-curator-current{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--ink-2);font-size:13px;}
.poster-curator-current img{display:block;width:44px;aspect-ratio:2/3;object-fit:cover;border-radius:7px;}
.poster-curator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.poster-curator-option{position:relative;padding:0;border:1px solid transparent;border-radius:12px;overflow:hidden;background:#181818;}
.poster-curator-option img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;}
.poster-curator-option span{position:absolute;right:5px;bottom:5px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;}
.poster-curator-option.is-selected{border-color:rgba(255,255,255,.9);}
.poster-curator-save{width:100%;min-height:48px;margin-top:16px;}
.poster-curator-empty{margin:8px 0 0;color:var(--ink-2);font-size:14px;}
.poster-curator-auto{width:100%;min-height:44px;margin-top:10px;background:var(--s2);color:var(--ink);border:0;border-radius:12px;}
/* Горизонтальный куратор: те же плитки, но 16:9 и по две в ряд — растягивать
   ландшафтный кадр в вертикальную ячейку значило бы показывать не то, что
   уедет в карточку. */
.poster-curator-overlay.is-backdrop .poster-curator-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.poster-curator-overlay.is-backdrop .poster-curator-option img{aspect-ratio:16/9;}
.poster-curator-overlay.is-backdrop .poster-curator-current img{width:96px;aspect-ratio:16/9;}
/* Стоит в ряду управлений hero, поэтому геометрию берёт у `.d-ctrl`; своя тут
   только иконка, чтобы карандаш не выглядел крупнее соседей. */
.d-backdrop-admin-edit{margin-left:auto;}
.d-backdrop-admin-edit svg{width:16px;height:16px;}

.d-title{text-align:center;font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.15;margin-top:16px;}
.d-original{text-align:center;font-size:15px;color:var(--ink-2);margin-top:3px;}
.d-meta{text-align:center;font-size:14px;color:var(--ink-2);font-weight:500;margin-top:8px;}
.d-genres{text-align:center;font-size:14px;color:var(--ink-2);margin-top:3px;}
.d-director{text-align:center;font-size:14px;color:var(--ink-2);margin-top:3px;}
.d-director b{color:var(--ink);font-weight:500;}

/* ratings — 3 unified pills, community visually promoted */
.d-ratings{display:flex;justify-content:center;gap:10px;margin-top:22px;}
.d-rpill{flex:0 0 92px;background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:11px 8px;text-align:center;}
.d-rpill .v{font-size:18px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.d-rpill .l{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.02em;}
.d-rpill .c{font-size:10.5px;color:var(--ink-2);margin-top:1px;}

.d-overview{font-size:15px;line-height:1.55;color:#D7D9DE;margin-top:22px;}

/* cast — портретные карточки, полное фото без обрезки (родное соотношение
   кинопоисковских actor-фото ≈ 360×549) — не круг, не кроп. */
.d-cast{margin-top:30px;}
.d-cast-h{margin-bottom:14px;}
.d-cast-h h2{font-size:17px;font-weight:600;letter-spacing:-0.01em;}
.d-cast-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:0 -20px;}
.d-cast-rail::-webkit-scrollbar{display:none;}
.d-cast-item{flex:0 0 84px;}
.d-avatar{position:relative;width:84px;aspect-ratio:360/549;border-radius:14px;background:var(--s2);
  overflow:hidden;border:1px solid var(--hair);}
.d-avatar .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;color:var(--ink-2);}
.d-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;}
.d-cast-item .n{font-size:12.5px;font-weight:500;margin-top:8px;line-height:1.25;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* hero transition ghost (catalogue poster → detail poster) */
.hero-ghost{position:fixed;z-index:100;border-radius:18px;overflow:hidden;pointer-events:none;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.85);top:0;left:0;}
.hero-ghost img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── search screen — Graphite Search ─────────────────────────────────────────
   Тот же материал, что у домашнего поля: человек нажал на поле и оказался в
   нём же, только крупнее. Логика поиска не тронута — здесь одна оболочка. */
.search-bar{position:relative;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-top) + 14px) 20px 14px;}
/* Кнопка «назад» подрастает ТОЛЬКО в поиске: рядом с полем 52px прежние 38px
   читались как недоделка. Глобальный .back не трогаем — он живёт на десятке
   других экранов. */
.search-bar > .back{flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(26,28,33,.58),rgba(12,13,17,.68));
  color:rgba(236,238,244,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 8px 20px -16px rgba(0,0,0,.92);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .18s ease;}
.search-bar > .back:active{transform:scale(.94);}
.search-field-shell{position:relative;flex:1;min-width:0;height:52px;
  display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:24px;
  background:linear-gradient(180deg,rgba(25,27,32,.64) 0%,rgba(12,13,17,.72) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 12px 30px -24px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.115),
             inset 0 -1px 0 rgba(0,0,0,.18);
  transition:border-color .18s ease, box-shadow .18s ease;
  animation:search-field-in .18s cubic-bezier(.32,.72,0,1) both;}
/* Фокус обязан быть заметен телом, а не глазом: это подсказка, что поле
   слушает, а не свечение. */
.search-field-shell:focus-within{border-color:rgba(var(--af-accent-rgb),.18);
  box-shadow:0 12px 30px -24px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -1px 0 rgba(0,0,0,.18),
             0 0 0 2px rgba(var(--af-accent-rgb),.035);}
@keyframes search-field-in{from{opacity:.88;transform:translateY(3px) scale(.985);}to{opacity:1;transform:none;}}
.search-field-icon{flex:none;display:grid;place-items:center;width:21px;height:21px;
  color:rgba(222,225,234,.62);}
.search-field-icon svg{display:block;width:20px;height:20px;}
#si{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;
  color:#fff;font-family:var(--font);
  /* 16px — не вкус, а условие: на меньшем кегле iOS зумит страницу под поле. */
  font-size:16px;font-weight:450;letter-spacing:-.012em;
  appearance:none;-webkit-appearance:none;}
/* Родная кнопка очистки WebKit остаётся ЖИВОЙ даже при appearance:none на
   самом поле: у псевдоэлемента своя «внешность». Без этих строк в поле стояли
   ДВЕ крестика разом — свой и системный, — и второй вёл себя по-разному от
   клиента к клиенту. */
#si::-webkit-search-cancel-button,
#si::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none;}
#si::placeholder{color:rgba(222,225,234,.52);opacity:1;}
/* Спиннер теперь принадлежит корпусу поля, а не полосе: привязка к safe-top
   разъезжалась бы при каждой смене инсетов Telegram. */
.search-loading{width:14px;height:14px;position:absolute;right:14px;top:50%;margin-top:-7px;
  border:2px solid rgba(255,255,255,.2);border-top-color:var(--af-accent);border-radius:50%;opacity:0;pointer-events:none;}
.search-bar.is-loading .search-loading{opacity:1;animation:search-spin .7s linear infinite;}
/* Очистка запроса. Хит-таргет 44px — палец, видимый символ 18px — глаз: если
   уравнять их, кнопка либо не попадается, либо начинает спорить с полем.
   Серый, а не лавандовый: очистка — не выбор и не состояние. */
.search-clear{position:absolute;right:4px;top:50%;margin-top:-22px;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:0;background:transparent;
  color:var(--af-text-tertiary);cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:color .16s ease;}
.search-clear[hidden]{display:none;}
.search-clear svg{display:block;width:18px;height:18px;}
.search-clear:active{color:var(--af-text-secondary);}
.search-clear:focus-visible{outline:2px solid var(--af-accent);outline-offset:-4px;border-radius:50%;}
/* Пока кнопка на месте, текст не заезжает под неё, а спиннер стоит левее:
   очищать запрос можно и во время полёта ответа. */
.search-field-shell.has-clear #si{padding-right:40px;}
.search-field-shell.has-clear .search-loading{right:54px;}
@keyframes search-spin{to{transform:rotate(360deg);}}
#sr{padding-top:2px;}

/* ── статистика ─────────────────────────────── */
/* «Я / Мы вместе» — тот же жидкий переключатель, что у библиотеки и настроек.
   Без WebGL остаётся честный сегмент: линзу заменяет индикатор под кнопками,
   состояние несут класс, aria-selected и цвет подписи, а не одно лишь стекло. */
.stats-switch{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--segments,2),minmax(0,1fr));
  height:44px;margin:0 20px 18px;border-radius:22px;
  border:1px solid rgba(255,255,255,.082);
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.068) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 66%),
             linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  box-shadow:0 14px 34px -29px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.155),inset 0 -1px 0 rgba(0,0,0,.25);}
.stats-switch-btn{position:relative;z-index:1;min-width:0;height:42px;padding:0 8px;border:0;border-radius:20px;
  background:transparent;color:var(--af-text-secondary,var(--ink-2));font:600 14px var(--font);letter-spacing:-.012em;
  cursor:pointer;touch-action:manipulation;transition:color .14s ease;}
.stats-switch-btn.active{color:var(--nav-accent,var(--af-accent));}
.stats-switch-btn:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.stats-switch-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;}
.stats-switch-indicator{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--segments,2));
  border-radius:19px;pointer-events:none;transform:translate3d(0,0,0);transition:transform .24s var(--af-nav-ease,ease);
  background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.22);}
.stats-switch[data-active-index="1"] .stats-switch-indicator{transform:translate3d(100%,0,0);}
.stats-switch[data-active-index="2"] .stats-switch-indicator{transform:translate3d(200%,0,0);}
.stats-switch[data-liquid="on"] .stats-switch-label{opacity:0;}
.stats-switch[data-liquid="on"] .stats-switch-indicator{opacity:0;transition:none;}
.stats-switch .stats-switch-liquid-stage{left:max(-18px,calc(2px - (100vw - 100%) / 2));
  right:max(-18px,calc(2px - (100vw - 100%) / 2));top:-14px;bottom:-14px;}
.stats-context{font-size:13px;font-weight:650;color:var(--ink-2);letter-spacing:-.01em;margin:0 20px 10px;}
.stats-intro{margin:0 20px 16px;padding:14px 16px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(var(--af-accent-rgb),.12),transparent);font-size:14px;line-height:1.45;color:var(--ink);}
.stats-intro .stats-context{margin:0 0 4px;color:var(--ink);}
.stats-hint{font-size:11.5px;line-height:1.4;color:var(--ink-2);margin:-4px 0 12px;}
.profile-card{display:flex;align-items:center;gap:12px;margin:0 20px 16px;padding:16px;border:1px solid var(--hair);border-radius:20px;background:linear-gradient(135deg,rgba(var(--af-accent-rgb),.18),var(--s1) 58%);box-shadow:0 14px 28px -24px rgba(var(--af-accent-rgb),.55);}
.profile-avatar{position:relative;display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--accent);color:var(--af-on-accent);font-size:20px;font-weight:700;letter-spacing:-.04em;}
.profile-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ── Профиль V4: кинолента цифрами и отпечаток оценок ──────────────────────
   ДВА СЛОЯ. Содержимое — спокойный графит: числа должны читаться, а не
   светиться. Стекло остаётся функциональному слою (переключатель режима,
   всплывающая подсказка), и стекло поверх стекла не делается нигде.
   Ни свечений, ни градиентных полос, ни прогресс-дорожек: у этих чисел нет
   «цели», которую можно заполнить. */
/* ОДИН отступ на весь профиль. До P7 их было пять: заголовок и шапка стояли
   на 20, карточки на 14, ряды жанров на 14, а лента людей вовсе на нуле —
   глаз читал это как четыре разных документа, положенных друг на друга.
   Значение живёт здесь и нигде больше; компактная ширина его не меняет, иначе
   содержимое снова разъехалось бы с заголовком страницы. */
#stats { --p4-inset:20px; }
/* МАТЕРИАЛ ОДИН НА ПРИЛОЖЕНИЕ. Профиль больше не заводит свою поверхность:
   рамка, радиус, градиент и внутренний блик — те же, что у `.top-ranked-list`
   и `.genre-taste-card` на главной. Отличать профиль от «Топа» должно
   содержимое, а не отдельный язык карточек. */
.p4-summary {
  margin:0 var(--p4-inset) 12px;
  padding:18px 16px 14px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* Три равные дорожки: `minmax(0,1fr)` даёт колонке право сжаться, а не
   вытолкнуть соседей. Содержимое при этом не переносится — за это отвечает
   `white-space:nowrap` у значения. */
.p5-summary-hero {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
  gap:14px;
}
.p5-hero-metric { min-width:0; font-variant-numeric:tabular-nums; }
.p5-hero-metric b {
  display:block;
  color:var(--ink);
  font-size:clamp(28px, 9vw, 36px);
  font-weight:640;
  letter-spacing:-.025em;
  line-height:1.04;
  white-space:nowrap;
}
/* «≈1234 ч» длиннее счётчика на шесть знаков; ужимается ОНО, а не оба числа. */
.p5-hero-metric.is-long b { font-size:clamp(21px, 6.6vw, 28px); }
.p5-hero-metric span {
  display:block;
  margin-top:6px;
  color:var(--ink-2);
  font-size:12.5px;
  line-height:1.3;
}
.p4-summary-primary {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  gap:8px;
}
/* Ширину задаёт СОДЕРЖИМОЕ, а не равная треть. При `flex:1` три колонки были
   одинаковыми, и «≈1234 ч» — единственное составное значение — не помещалось:
   единица измерения отрывалась от числа и падала на вторую строку, а вместе с
   ней уезжала и базовая линия. Счётчику из двух цифр лишняя треть экрана не
   нужна; отдать её длинному значению стоит ровно ничего. */
.p4-stat {
  min-width:0;
  text-align:center;
  /* Табличные цифры: иначе соседние числа «пляшут» при перерисовке. */
  font-variant-numeric:tabular-nums;
}
.p4-stat b {
  display:block;
  color:var(--ink);
  font-size:clamp(26px, 8.5vw, 34px);
  font-weight:640;
  letter-spacing:-.02em;
  line-height:1.05;
  /* Число и его единица — одна величина. Перенос между «1234» и «ч» читался
     как две строки данных там, где данные одни. */
  white-space:nowrap;
}
.p4-stat span {
  display:block;
  margin-top:5px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.25;
}
.p4-stat small {
  display:block;
  margin-top:1px;
  color:var(--af-text-tertiary, var(--ink-3, var(--ink-2)));
  font-size:11px;
  line-height:1.2;
}
.p4-stat b { font-size:clamp(23px, 7.2vw, 30px); }
/* Составное значение длиннее счётчика: «≈1234 ч» это восемь знаков против
   двух. Уменьшается ОНО одно — обычные числа остаются крупными. */
.p4-stat.is-long b { font-size:clamp(17px, 5.5vw, 24px); }
/* Одна тонкая линия отделяет главное от уточняющего — вертикальных границ
   между числами нет намеренно: это один объект, а не таблица. */
.p4-summary-meta {
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid var(--hair);
  color:var(--ink-2);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

/* РИТМ. Наверху идентичность и два факта о себе — это одна группа, и внутри
   неё воздух остаётся тесным (14). Дальше меняется РОД содержимого: карточки
   кончились, начались открытые строки и лента портретов. Такие границы держат
   28 — до P7 они держали те же 14, и жанры выглядели приклеенными к оценкам,
   тогда как актёры от жанров отстояли вдвое дальше. */
.p4-ratings {
  margin:0 var(--p4-inset) 26px;
  padding:15px 16px 11px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.p4-ratings-count {
  margin:4px 0 0;
  color:var(--ink-2);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.p4-hist {
  position:relative;
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  gap:4px;
  align-items:end;
}
/* Столбец целиком — цель для пальца; сама полоска для этого не раздувается. */
.p4-bin {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* 130px гистограммы делали блок оценок самым высоким на экране, хотя он там
   не главный. Ста хватает, чтобы разница между столбцами читалась. */
.p4-bin-track {
  display:flex;
  align-items:flex-end;
  width:100%;
  height:100px;
}
.p4-bin-track i {
  display:block;
  width:100%;
  min-height:0;
  border-radius:6px 6px 3px 3px;
  /* Обычный столбец — приглушённый холодный; акцент достаётся только тому,
     что бэкенд назвал самой частой оценкой. */
  background:rgba(var(--af-rating-rgb), .22);
}
.p4-bin.is-mode .p4-bin-track i { background:var(--af-rating); }
.p4-bin-x {
  color:var(--ink-2);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.p4-bin.is-active .p4-bin-x { color:var(--ink); }
.p4-bin:focus-visible { outline:2px solid var(--af-accent); outline-offset:2px; border-radius:8px; }

/* Подсказка — НАКЛАДКА, и это единственное место блока, где стекло уместно. */
.p4-tip {
  position:absolute;
  top:-6px;
  z-index:2;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(28,31,36,.92);
  backdrop-filter:blur(12px) saturate(1.2);
  color:var(--ink);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  line-height:1.35;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
}
.p4-tip[hidden] { display:none; }
.p4-tip.is-visible { opacity:1; }
.p4-tip b { color:var(--af-rating); font-weight:620; }
/* Крайние столбцы не имеют права вытолкнуть подсказку за карточку. */
.p4-tip.at-start { left:0; transform:none; }
.p4-tip.at-end { right:0; left:auto; transform:none; }

@media (max-width:359px) {
  /* Три колонки на 320px дают каждой ~77px. Составное значение вроде
     «≈173 ч» длиннее счётчика из двух цифр, а переносить его нельзя — это
     одна величина. Значит уменьшается кегль, а не ломается строка. */
  .p4-stat b { font-size:clamp(19px, 6.4vw, 25px); }
  .p4-stat.is-long b { font-size:clamp(15px, 5.2vw, 20px); }
  .p4-stat span { font-size:11px; }
  .p4-stat small { font-size:10.5px; }
  .p4-bin-track { height:88px; }
  .p4-hist { gap:3px; }
}

@media (prefers-reduced-motion:reduce) {
  .p4-tip { transition:none; }
}

/* ── Профиль V4: жанры и люди ──────────────────────────────────────────────
   Нижняя половина — продолжение того же документа. Внешних коробок у секций
   нет: заголовок, содержимое, воздух. Три вложенные рамки на странице в рамке
   читались как приборная панель, а не как рассказ о просмотренном. */
/* Заголовок ровно той же величины и веса, что `.overview-head h2` на главной.
   Прежние 16px были профильной иерархией, которой больше нигде нет: экран
   читался как чужая страница внутри приложения. */
.p5-section-head {
  margin:0 var(--p4-inset) 10px;
}
.p5-section-head h2 {
  min-width:0;
  margin:0;
  color:var(--ink);
  font-size:19px;
  line-height:1.15;
  font-weight:680;
  letter-spacing:-.03em;
}
.p5-section-head p {
  margin:4px 0 0;
  color:var(--ink-2);
  font-size:12.5px;
  line-height:1.35;
}
.p4-genres, .p4-people { margin:0 0 28px; }
/* Актёры и режиссёры — братья, а не две разные главы: между ними воздуха
   меньше, чем до жанров, иначе «Режиссёры» читаются как отдельная страница. */
.p4-people-actors { margin-bottom:22px; }

/* ЖАНРЫ — ОТКРЫТЫЙ СПИСОК, а не таблица и не карточка. Колонка с номерами
   ушла: порядок сверху вниз уже означает ранг, а цифра рядом превращала
   личный вкус в админскую аналитику. Профиль перестаёт быть стопкой
   прямоугольников — секции разделяет воздух и одна волосяная линия. */
.p5-genre-list { margin:0 var(--p4-inset); }
.p5-genre-row {
  padding:11px 0 13px;
  border-top:1px solid rgba(255,255,255,.055);
}
.p5-genre-row:first-child { border-top:0; padding-top:2px; }
.p5-genre-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.p5-genre-head b {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(246,247,250,.94);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.015em;
}
/* Верхний жанр чуть весомее — типографикой, без короны и без акцента. */
.p5-genre-row.is-lead .p5-genre-head b { font-size:16.5px; font-weight:640; }
/* Процент нейтрален: это величина, а не категория. */
.p5-genre-pct {
  flex:0 0 auto;
  color:rgba(203,207,216,.72);
  font-size:13px;
  font-weight:620;
  font-variant-numeric:tabular-nums;
}
.p5-genre-sub {
  display:block;
  margin-top:3px;
  color:var(--af-text-secondary, var(--ink-2));
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
/* Длина — это данные. Цвет жанра живёт ТОЛЬКО здесь; ни свечения, ни
   минимальной ширины: однопроцентный жанр обязан выглядеть однопроцентным. */
.p5-genre-bar {
  display:block;
  margin-top:8px;
  height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
}
.p5-genre-bar i { display:block; height:100%; border-radius:99px; opacity:.8; }
.p5-genre-more {
  display:block;
  margin:2px var(--p4-inset) 0;
  width:calc(100% - var(--p4-inset) * 2);
  min-height:44px;
  padding:12px 0;
  border:0;
  background:transparent;
  color:var(--af-accent);
  font-size:13.5px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.p5-genre-more:focus-visible { outline:2px solid var(--af-accent); outline-offset:2px; border-radius:10px; }

.p4-people-rail {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:2px var(--p4-inset) 4px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* Без этого `scroll-snap-align:start` равняет карточку по краю области
     прокрутки, а не по краю padding'а, и первый портрет упирается в экран. */
  scroll-padding-inline:var(--p4-inset);
}
.p4-people-rail::-webkit-scrollbar { display:none; }
.p4-person {
  flex:0 0 clamp(156px, 42vw, 166px);
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;
}
.p4-person:active { opacity:.86; }
.p4-person:focus-visible { outline:2px solid var(--af-accent); outline-offset:3px; border-radius:20px; }
/* Портрет несёт визуальный вес — как постер на главной: тот же радиус, та же
   рамка, тот же верхний блик. Отличается только пропорция: у человека 4:5. */
.p4-person-photo {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:4 / 5;
  border:1px solid var(--hair);
  border-radius:18px;
  background:linear-gradient(160deg,#15171b,#0a0b0d);
  overflow:hidden;
}
.p4-person-photo::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);
}
.p4-person-photo img {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Поясной кадр 2:3 в рамке 4:5 центром приходится на грудь: лицо уезжает
     под верхний край, если не поднять точку кадрирования. */
  object-position:50% 27%;
}
/* Нестандартный исходник (очень высокий или горизонтальный) показывается
   ЦЕЛИКОМ. Класс ставит app.js по настоящим naturalWidth/naturalHeight.
   Никакой размытой подложки: поля закрывает тот же графит, что и рамку. */
.p4-person-photo img.person-photo-safe-fit {
  object-fit:contain;
  object-position:center center;
}
/* Запасной вариант тише настоящего портрета и одинаков у актёров и
   режиссёров: отсутствие фотографии не должно выглядеть наряднее её наличия. */
.p4-person-photo .fb {
  z-index:1;
  color:var(--af-text-secondary, var(--ink-2));
  font-size:22px;
  font-weight:600;
  letter-spacing:.02em;
}
/* Инициалы уходят, как только портрет готов: с `contain` они иначе проступили
   бы в полях. Картинка в разметке стоит первой — назад соседним комбинатором
   не дотянуться. */
.p4-person-photo img.ready ~ .fb { opacity:0; }
/* Номер одинаков у всех мест: первый и так первый, красить его отдельно
   значило бы добавить утверждение поверх порядка. */
.p4-person-rank {
  position:absolute;
  z-index:3;
  top:8px;
  left:8px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.p4-person-name {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.015em;
  /* Две строки резервируются всегда: иначе карточки разной высоты и ряд
     «прыгает» на каждом длинном имени. */
  min-height:calc(2em * 1.24);
}
.p4-person-count {
  color:var(--ink-2);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
/* Имя и число фильмов — ОДНА подпись. Прежде имя всегда держало место под
   две строки, и у короткого «Роберт Дауни мл.» между именем и «11 фильмов»
   оставалась пустая строка плюс отступ карточки. Запас высоты по-прежнему
   есть — иначе лента прыгала бы от длинных имён, — но теперь он ПОД числом,
   а число стоит прямо под именем. */
.p4-person-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:calc(14.5px * 1.24 * 2 + 3px + 15px);
}
.p4-person-copy .p4-person-name { min-height:0; }
.p4-person-copy .p4-person-count { line-height:15px; }
.p4-people-empty {
  margin:0 var(--p4-inset);
  color:var(--ink-2);
  font-size:13px;
}

.chart-card {
  margin:0;
  min-width:0;
}

.profile-copy{min-width:0;}.profile-name{font-size:18px;font-weight:700;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-handle{font-size:12px;color:var(--ink-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-meta{font-size:11px;color:var(--ink-2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}.profile-mark{margin-left:auto;color:#8AB7FF;font-size:22px;opacity:.9;}
.profile-hero {
  margin:0 20px 14px;
  padding:0 0 12px;
  border-bottom:1px solid var(--hair);
}
.profile-main {
  display:flex;
  align-items:center;
  gap:14px;
}
.profile-main .profile-avatar {
  width:76px;
  height:76px;
  flex-basis:76px;
  font-size:26px;
}
.profile-main .profile-name {
  font-size:21px;
}
/* Звание: одна крупная строка-вывод и тихая ступень под ней. Ступень — семь
   штрихов, а не прогресс-бар: это путь по стадиям, а не процент. */
.profile-title { margin-top:7px; }
.profile-title-name {
  margin:0;
  color:var(--ink-2);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.3;
}
.profile-title-level {
  display:flex;
  align-items:center;
  gap:7px;
  margin:4px 0 0;
  color:rgba(150,156,168,.62);
  font-size:11px;
  line-height:1.2;
}
.profile-title-pips { display:inline-flex; gap:2px; flex:none; }
.profile-title-pips i {
  width:6px;
  height:2px;
  border-radius:1px;
  background:rgba(255,255,255,.09);
}
.profile-title-pips i.is-on { background:rgba(255,255,255,.42); }
.profile-taste {
  margin-top:8px;
  color:var(--ink);
  font-size:13px;
  line-height:1.4;
  max-width:280px;
}
.profile-facts {
  display:flex;
  gap:8px;
  margin-top:16px;
  padding:9px 10px;
  border:1px solid var(--hair);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.profile-facts span {
  flex:1;
  min-width:0;
  color:var(--ink-2);
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align:center;
}
.profile-facts b {
  color:var(--ink);
  font-size:12px;
}
.chart-card {
  position:relative;
}

.section-action {
  position:absolute;
  right:14px;
  top:14px;
  color:var(--accent);
  font-size:11px;
}
.person-pill {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 9px;
  border:1px solid var(--hair);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.person-avatar {
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--s3);
  color:var(--ink-2);
  font-size:10px;
  font-weight:700;
}
.person-avatar .fb {
  display:contents;
}
.person-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.person-pill > span:last-child {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.person-pill b {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.person-pill small {
  margin-top:2px;
  color:var(--ink-2);
  font-size:9px;
}
.chart-card:has(.person-pill) .stats-hint {
  max-width:80%;
}
.chart-card:has(.person-pill) .person-pill {
  display:inline-flex;
  width:calc(33.333% - 7px);
  margin:3px 3px 0 0;
  vertical-align:top;
}

.chart-card{background:var(--s1);border:1px solid var(--hair);border-radius:18px;padding:14px;margin:0 20px 12px;}
.chart-title{font-size:14px;font-weight:600;margin-bottom:12px;}

.hbar-row{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;}
.hbar-label{flex:0 0 34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbar-track{flex:1;height:8px;border-radius:6px;overflow:hidden;background:var(--s3);}
.hbar-fill{height:100%;border-radius:6px;background:var(--accent);}
.hbar-val{flex:0 0 auto;min-width:30px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;}

.person-films-intro {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:2px 20px 15px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.35;
}
.person-films-intro b {
  color:var(--ink);
  font-size:16px;
  font-weight:650;
}

/* ── Пара ───────────────────────────────────── */
.partner-sub{font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:12px;}
.compat{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px;}
.compat-num{font-size:34px;font-weight:750;letter-spacing:-0.03em;color:var(--accent);font-variant-numeric:tabular-nums;}
.compat-lbl{font-size:13px;color:var(--ink-2);}

.pbtn{width:100%;border:1px solid var(--hair);border-radius:14px;padding:13px 16px;font-size:15px;font-weight:550;
  background:var(--s2);color:var(--ink);cursor:pointer;font-family:var(--font);margin-top:10px;transition:transform .15s;}
.pbtn:active{transform:scale(.98);}
.pbtn.primary{background:var(--accent);color:var(--af-on-accent);border-color:transparent;}
.pbtn.danger{background:transparent;color:#F87171;}
.code-hint{font-size:12px;color:var(--ink-2);margin:10px 0 6px;}
.code-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;
  background:var(--s3);border:1px solid var(--hair);border-radius:12px;padding:11px 14px;color:var(--ink);
  text-align:center;cursor:pointer;user-select:all;-webkit-user-select:all;}
.code-input{width:100%;height:48px;border-radius:12px;border:1px solid var(--hair);background:var(--s3);
  color:var(--ink);font-size:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 14px;
  outline:none;margin:4px 0;letter-spacing:.03em;}
.code-input:focus{border-color:rgba(var(--af-accent-rgb),.5);}
.sec-label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.01em;padding:6px 4px 12px;margin-top:6px;}
/* The invite is its own small flow, so it balances inside the usable Telegram
   viewport rather than inheriting a desktop-sized top margin. */
.accept-screen{display:grid;min-width:0;min-height:calc(100dvh - var(--safe-top));padding:calc(var(--safe-top) + 18px) 20px calc(112px + var(--safe-bottom));place-items:center;}
.accept{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;min-width:0;min-height:min(610px,calc(100dvh - var(--safe-top) - 142px));padding:clamp(30px,7vh,56px) clamp(22px,6vw,42px) clamp(24px,5vh,40px);border:1px solid var(--hair-2);border-radius:26px;background:var(--s1);box-shadow:var(--shadow);text-align:center;}
.accept-illustration{display:grid;flex:none;width:clamp(132px,43vw,178px);height:clamp(100px,17vh,138px);place-items:center;}
.accept-illustration-img{display:block;width:100%;height:100%;object-fit:contain;}
.accept-illustration-img[hidden]{display:none;}
.accept-illustration-fallback{position:relative;width:74px;height:58px;border:1px solid rgba(var(--af-accent-rgb),.55);border-radius:36px 36px 26px 26px;transform:rotate(-15deg);opacity:.8;}
.accept-illustration-fallback::after{position:absolute;top:12px;left:32px;width:74px;height:58px;border:1px solid rgba(244,114,182,.65);border-radius:36px 36px 26px 26px;content:"";transform:rotate(30deg);}
.accept-title{width:100%;min-width:0;max-width:100%;margin-top:clamp(18px,4vh,34px);font-size:clamp(25px,7vw,34px);font-weight:680;letter-spacing:-.04em;line-height:1.12;overflow-wrap:anywhere;}
.accept-inviter-name{display:block;max-width:100%;margin:2px auto 0;overflow:hidden;color:var(--accent-2);text-overflow:ellipsis;white-space:nowrap;}
.accept-sub{max-width:330px;margin-top:18px;color:var(--ink-2);font-size:clamp(14px,4vw,16px);line-height:1.52;}
.accept-actions{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:auto;padding-top:clamp(34px,8vh,76px);}
.accept-btn{min-height:52px;border:1px solid var(--hair-2);border-radius:15px;background:var(--s2);color:var(--ink);font:600 16px var(--font);cursor:pointer;transition:transform .15s,border-color .15s;}
.accept-btn:active{transform:scale(.985);}
.accept-btn-primary{border-color:transparent;background:var(--accent);color:var(--af-on-accent);}
@media(max-width:360px),(max-height:680px){.accept-screen{padding-left:16px;padding-right:16px;padding-bottom:104px;}.accept{min-height:0;padding:16px;border-radius:22px;}.accept-illustration{width:120px;height:78px;}.accept-title{margin-top:12px;font-size:24px;}.accept-sub{margin-top:12px;font-size:14px;}.accept-actions{padding-top:18px;}.accept-btn{min-height:46px;}}

/* Верхний скрим: при скролле контент уходит под системную зону/шапку Telegram —
   мягкий градиент сохраняет читабельность и не даёт постерам «упираться» в верх. */
#top-scrim{position:fixed;top:0;left:0;right:0;z-index:25;pointer-events:none;
  height:calc(var(--safe-top) + 26px);
  background:linear-gradient(180deg,var(--bg) 38%,transparent);
  opacity:0;transition:opacity .2s ease;}
#top-scrim.show{opacity:1;}

/* ── floating tab bar — навигация V2 «Liquid Motion» ─────────────────────────
   Один постоянный функциональный слой: тёмный стеклянный остров над контентом.
   Размытие живёт ЗДЕСЬ и только здесь — экранное содержимое остаётся плоским,
   иначе WebKit заставляет GPU размывать половину документа. Второго живого
   backdrop-filter (например, у выделения) нет намеренно.

   Геометрия считается по border-box: 64px − 2×1px рамки − 2×3px padding = 56px
   внутренней высоты, ровно столько требует min-height кнопки.

   ВЫДЕЛЕНИЕ — ОДИН УЗЕЛ. В V1 капсула принадлежала каждой вкладке отдельно
   (`.tab::before`), поэтому при переключении она кроссфейдилась: гасла в одном
   месте и проявлялась в другом, вместо того чтобы переехать. Теперь линза одна
   и физически едет; какая вкладка выбрана, говорит data-active-index на самом
   #tabbar, а класс `active` и aria-current остаются авторитетом семантики. */
#tabbar{position:fixed;left:0;right:0;bottom:calc(16px + var(--safe-bottom));z-index:60;
  margin:0 auto;width:min(400px,calc(100% - 32px));height:68px;border-radius:34px;
  /* Материал, а не заливка. Верхний радиальный блик — падающий сверху-слева
     свет, линейный слой — само тело стекла. Тело стало прозрачнее (.46/.54
     против прежних .64/.72), поэтому постеры под панелью начинают
     просвечивать; читаемость держит не плотность фона, а усиленная диффузия
     и тяжёлый нижний рим. */
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.075) 0%,rgba(255,255,255,.020) 36%,rgba(255,255,255,0) 64%),
             linear-gradient(180deg,rgba(22,24,29,.46) 0%,rgba(9,10,13,.54) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.46) brightness(.94);
  backdrop-filter:blur(26px) saturate(1.46) brightness(.94);
  border:1px solid rgba(255,255,255,.085);
  /* Четыре внутренние грани вместо двух: стекло получает фаску, а не обводку.
     Верхняя светлая, боковые почти незаметные, нижняя тёмная — так рим читается
     как толщина материала, а сама панель НЕ становится светлее. */
  box-shadow:0 20px 46px -30px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.17),
             inset 1px 0 0 rgba(255,255,255,.030),
             inset -1px 0 0 rgba(0,0,0,.16),
             inset 0 -1px 0 rgba(0,0,0,.27);
  display:flex;align-items:stretch;padding:4px 5px;
  /* One delegated native click keeps every input method on the same navigation path. */
  isolation:isolate;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
/* ВЫДЕЛЕНИЕ — одна капсула.
   Прежде их было две: внешний узел держал позицию, внутренний — материал.
   Для морфа в духе App Store это лишнее разделение: там меняются НАСТОЯЩИЕ
   границы одной фигуры, а не масштаб маленькой пилюли внутри другой.

   ПОЗИЦИЯ ПОКОЯ принадлежит CSS (пять правил ниже). Это и запасной путь
   первой отрисовки — до того, как отработает JS, — и защита от устаревшей
   геометрии при смене ширины окна. JS пишет инлайновые left/width ТОЛЬКО на
   время морфа и снимает их в конце, поэтому в покое временной геометрии не
   остаётся.

   Высота: 4px сверху и снизу от 68px панели, то есть ~60px. Прежние 8px в
   64px давали 46px — «пилюлю внутри карточки», а не выделение, занимающее
   почти всю навигацию.

   contain: линза лежит абсолютом внутри панели фиксированного размера и в
   раскладке документа не участвует — значит анимация её границ не имеет
   права заставлять браузер пересчитывать что-то снаружи. */
#tabbar .tab-selection-lens{position:absolute;left:5px;top:4px;bottom:4px;
  width:calc((100% - 10px) / 5);z-index:0;pointer-events:none;
  border-radius:999px;overflow:hidden;isolation:isolate;
  contain:layout paint style;
  background:radial-gradient(110% 90% at 40% -20%,rgba(255,255,255,.18),rgba(255,255,255,.07) 42%,rgba(255,255,255,.025) 72%),
             linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             inset 0 -1px 0 rgba(0,0,0,.24),
             0 6px 16px -12px rgba(0,0,0,.85);
  /* Запасной путь: простой сдвиг фиксированной длительности. Переменной
     --tab-travel больше нет — её ставил прежний код, считавший длительность
     по числу пройденных ячеек. Здесь одна величина на любое расстояние,
     и она намеренно короче прежних 315мс: это резерв для слабого клиента,
     а не выразительное движение. */
  transition:transform .22s var(--af-nav-ease);}
/* Оптика капсулы. Тело остаётся НЕЙТРАЛЬНЫМ: лаванда принадлежит значку и
   подписи выбранной вкладки, а не заливке — иначе выделение читается
   «фиолетовой кнопкой», а не стеклом. */
.tab-selection-specular{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 54% at 34% -4%,rgba(255,255,255,.27) 0%,rgba(255,255,255,.105) 25%,rgba(255,255,255,.025) 52%,rgba(255,255,255,0) 74%);
  opacity:.72;}
/* Лавандовой каустики у нижней капсулы больше НЕТ. Она была последним местом,
   где само стекло несло цвет выбора, и из-за неё выделение читалось
   «фиолетовой кнопкой под значком». Лаванда остаётся семантикой выбора —
   значок, подпись, фокус, — а цвет внутри линзы теперь приходит только от
   того, что сквозь неё видно. У переключателя разделов своя каустика, и она
   этой правкой не затронута. */
/* ── Оптические слои линз ───────────────────────────────────────────────────
   Общие для нижнего острова и переключателя разделов: это одно физическое
   явление, и второй его реализации быть не должно. Оба слоя ТОЛЬКО рисуют —
   ни позиции, ни состояния они не держат и событий не принимают.

   Двигаются исключительно transform и opacity: это композитные свойства, и
   только они не заставляют страницу пересчитывать раскладку на каждом кадре.
   Ни тень, ни фон, ни backdrop-filter здесь не анимируются НИКОГДА. */
/* Пять явных правил вместо calc(var(--index) * 100%): переменная в множителе
   потребовала бы доказательств про конкретные сборки WebView, а пять строк
   работают везде и читаются с первого взгляда. */
#tabbar[data-active-index="0"] .tab-selection-lens{transform:translate3d(0%,0,0);}
#tabbar[data-active-index="1"] .tab-selection-lens{transform:translate3d(100%,0,0);}
#tabbar[data-active-index="2"] .tab-selection-lens{transform:translate3d(200%,0,0);}
#tabbar[data-active-index="3"] .tab-selection-lens{transform:translate3d(300%,0,0);}
#tabbar[data-active-index="4"] .tab-selection-lens{transform:translate3d(400%,0,0);}

/* ── Жидкая линза: один богатый отрисовщик ──────────────────────────────────
   Богатым выделением владеет холст WebGL2 (js/tab-liquid-webgl.js). Правила
   [data-active-index] выше остаются ЗАПАСНЫМ путём — первая отрисовка, нет
   WebGL2, слабый клиент, отказ от движения, потеря контекста.

   Признак data-liquid ставит движок ПОСЛЕ первого успешно нарисованного
   кадра. До этого — и в любой момент после потери контекста — видима обычная
   разметка. Прошлая ревизия вешала SVG-фильтр прямо на ряд вкладок, и в
   WebKit пустой результат фильтра стирал навигацию целиком; здесь такого
   обмена нет вовсе. */
#tabbar .tab-row-neutral{position:relative;z-index:1;flex:1;min-width:0;
  display:flex;align-items:stretch;}
/* Настоящие кнопки НЕ прячутся, а становятся визуально прозрачными: они
   остаются в дереве доступности и продолжают ловить нажатия. Это осознанный
   выбор в пользу opacity против visibility/display — те убрали бы кнопки и
   от скринридера, и от пальца. */
#tabbar[data-liquid="on"] .tab-row-neutral{opacity:0;}
/* Ряд прозрачен — значит его собственные переходы НИКТО не видит, а стоят они
   дорого: каждое переключение крутит 180мс анимаций цвета, прозрачности и
   масштаба ВНУТРИ узла с backdrop-filter, то есть ровно там, где любая
   перерисовка тянет за собой пересчёт размытия. Запись с устройства показала
   24% замерших кадров во время движения; это одна из статей расхода, и она
   отдаётся даром. В запасном режиме (холста нет) переходы остаются. */
#tabbar[data-liquid="on"] .tab,
#tabbar[data-liquid="on"] .tab-glyph,
#tabbar[data-liquid="on"] .tab > span,
#tabbar[data-liquid="on"] .tab-icon,
#tabbar[data-liquid="on"] .tab::after{transition:none;animation:none;}
/* Запасная капсула уступает место холсту: два выделения одновременно
   читались бы двумя выбранными вкладками. */
#tabbar[data-liquid="on"] .tab-selection-lens{opacity:0;transition:none;}
/* РАСШИРЕННАЯ СЦЕНА. Поднятая линза обязана выходить за обычную геометрию
   панели — на записи App Store её силуэт пересекает и верхний, и нижний край.
   Прежде холст лежал inset:0 со своим border-radius и всё лишнее срезал, то
   есть подъём физически было негде показать.

   Отрицательные отступы дают запас, а overflow:visible и отсутствие радиуса
   не дают этот запас обрезать. Сама панель ничего не обрезает: у неё нет ни
   overflow, ни contain — только скругление, а оно само по себе не режет. */
/* Сцена ШИРЕ панели: линзе есть куда подниматься и куда качаться. Отступы
   выросли с 12/16, потому что у поверхности появились собственные колебания:
   на пике мода 2 добавляет к полувысоте ещё около 5px сверх подъёма, и на
   прежней сцене эта прибавка срезалась бы кромкой холста — ровно тот дефект,
   который прежде не давал подъёму состояться вовсе. */
/* ОБЩАЯ оптическая сцена. Обе панели — нижняя и верхний переключатель — берут
   один и тот же движок, поэтому и узлы у них общие: различаются только
   отступы, потому что различается геометрия. Дублировать эти правила значило бы
   однажды поправить одно и забыть второе. */
.liquid-nav-stage{position:absolute;z-index:2;pointer-events:none;overflow:visible;}
.liquid-nav-canvas{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;display:block;}
#tabbar .tab-liquid-stage{left:-18px;right:-18px;top:-24px;bottom:-24px;}
.tab-liquid-canvas{position:absolute;inset:0;
  /* width/height ОБЯЗАТЕЛЬНЫ. <canvas> — заменяемый элемент: при auto он берёт
     размер из собственного буфера, и inset:0 его не переопределяет. Без этих
     двух строк CSS-бокс холста оказывался равен буферу, и вся геометрия
     шейдера ехала втрое. */
  width:100%;height:100%;
  pointer-events:none;display:block;}
#tabbar .tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--af-nav-idle);cursor:pointer;font-family:var(--font);
  /* Показ выбора ЗАПАСНОГО пути. В богатом режиме эти цвета не видны вовсе:
     ряд становится прозрачным, и всё рисует холст. */
  transition:color .18s ease;
  position:relative;z-index:1;min-width:44px;min-height:56px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
/* Отклик на нажатие принадлежит иконке, а не всей кнопке: линза выделения —
   отдельный слой, и масштабировать под ней ещё и кнопку значит двигать две
   вещи навстречу друг другу. */
#tabbar .tab-icon{position:relative;display:block;width:24px;height:24px;flex:0 0 24px;
  font-style:normal;transition:transform .15s cubic-bezier(.2,.8,.2,1);}
#tabbar .tab-glyph{position:absolute;inset:0;display:block;width:24px;height:24px;color:currentColor;
  transition:opacity .19s ease, transform .19s var(--af-nav-ease);}
/* Заливка приходит снизу и чуть подрастает, контур уходит наверх — обмен, а не
   две независимые вспышки. Полпикселя намеренно: сдвиг должен читаться телом,
   а не глазом. Свечения нет. */
#tabbar .tab-glyph-regular{opacity:1;transform:scale(1) translateY(0);}
#tabbar .tab-glyph-fill{opacity:0;transform:scale(.82) translateY(.5px);}
#tabbar .tab.active .tab-glyph-regular{opacity:0;transform:scale(.90) translateY(-.5px);}
#tabbar .tab.active .tab-glyph-fill{opacity:1;transform:scale(1) translateY(-.5px);}
/* Отклик на нажатие: .92 читался «кнопка провалилась», а цель здесь —
   системное интерактивное стекло, где палец лишь слегка придавливает
   материал. Сравнивалось на кадрах, а не выбрано по вкусу. */
#tabbar .tab:active .tab-icon{transform:scale(.965);}
/* Отклик на касание ДО выбора. Материал обязан просыпаться под пальцем, иначе
   стекло оживает только постфактум, когда решение уже принято. Это чистое
   украшение: событий не принимает, состояния не несёт, геометрию нажатия не
   меняет и исчезает вместе с отпусканием. Если читается как вторая выбранная
   пилюля — слишком сильно. */
#tabbar .tab::after{content:"";position:absolute;inset:5px 4px;z-index:0;
  border-radius:22px;pointer-events:none;opacity:0;transform:scale(.86);
  background:radial-gradient(75% 100% at 50% 0%,rgba(255,255,255,.105),rgba(255,255,255,.025) 45%,transparent 75%);
  transition:opacity .15s ease, transform .18s cubic-bezier(.2,.8,.2,1);}
#tabbar .tab:active::after{opacity:.30;transform:scale(1);}
/* Подпись — одна строка, по центру своей вкладки, без обрезки и многоточия.
   Обрезка здесь была бы не решением, а способом не заметить, что слово не
   влезло: контракт в том, что локализованное слово помещается САМО. За этим
   следит геометрический тест на ru/en и пяти ширинах. */
#tabbar .tab > span{position:relative;z-index:1;
  min-width:0;max-width:100%;white-space:nowrap;text-align:center;
  font-size:10.5px;font-weight:520;line-height:1;letter-spacing:-.01em;opacity:.92;
  transition:opacity .18s ease, color .18s ease;}
#tabbar .tab.active > span{opacity:1;}
#tabbar .tab.active{color:var(--nav-accent);}

/* Показ выбора при ЗАПАСНОМ пути — обычная ступенька по .active выше.
   Богатый путь не пользуется ни ею, ни переменной --tab-mix: там выбранным
   выглядит ровно то, что накрыто силуэтом линзы, и решает МАСКА, а не таймер.
   Переменная удалена, а не оставлена «на всякий случай»: неиспользуемый
   второй источник правды — это будущее расхождение. */
/* Фокус — это выделение, а не главное действие: он обязан приходить из
   --af-accent, как и у соседнего .discovery-tab. Через --accent-rgb сюда
   попадала заливка главного действия, и два соседних фокуса в одном
   интерфейсе рисовались из разных источников. */
#tabbar .tab:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.66);outline-offset:-3px;border-radius:22px;}
/* Без backdrop-filter стекло превращается в дыру: полупрозрачный фон поверх
   контента читается как грязь. Такой среде отдаём плотный фон. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #tabbar{background:rgba(15,16,20,.97);}
  .search,.search-field-shell{background:rgba(18,19,23,.97);}
}
/* Просьба уменьшить прозрачность — это не просьба «сделать некрасиво»: стекло
   заменяется плотным материалом, а оптические слои снимаются целиком, потому
   что без прозрачности им нечего преломлять. Геометрия не меняется. */
@media (prefers-reduced-transparency: reduce){
  #tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,16,20,.96);}
  .discovery-tabs{background:rgba(15,16,20,.96);}
  /* Просьба уменьшить прозрачность снимает и верхнее стекло: подпись обязана
     вернуться видимой, иначе переключатель остался бы пустым. */
  .discovery-tabs[data-liquid="on"] .discovery-label{opacity:1;}
  .discovery-tabs[data-liquid="on"] .discovery-indicator{opacity:1;}
  .discovery-liquid-stage{display:none;}
  /* Просьба уменьшить прозрачность снимает и жидкую линзу: её смысл целиком в
     оптике стекла. Ряд вкладок при этом обязан вернуться видимым, иначе
     навигация осталась бы пустой — поэтому правило перекрывает data-liquid. */
  .tab-liquid-stage{display:none;}
  #tabbar[data-liquid="on"] .tab-row-neutral{opacity:1;}
  #tabbar[data-liquid="on"] .tab-selection-lens{opacity:1;}
}

/* ── resilient poster and mobile navigation fallbacks ─────────────────────── */
.detail-preview .d-preview-lines{min-height:58px;padding-top:8px;}

/* ── скелетоны / пустое ─────────────────────── */
.sk{position:relative;overflow:hidden;background:var(--s2);border-radius:12px;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.2s infinite;}
.art.sk{aspect-ratio:2/3;border-radius:18px;}
.sk-line{height:12px;margin:8px 2px 0;}
.sk-line.wide{height:22px;max-width:60%;margin:14px auto;}
.d-poster.sk{position:relative;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.empty{text-align:center;padding:56px 24px;}
.empty-icon{font-size:44px;line-height:1;}
.empty-icon svg{display:block;width:40px;height:40px;margin:0 auto;color:var(--ink-2);}
.empty-text{font-size:16px;font-weight:600;margin-top:12px;}
.empty-sub{font-size:13px;color:var(--ink-2);margin-top:4px;}

/* Static first-paint shell: keeps the viewport composed while auth/data load. */
.startup-shell{display:grid;gap:22px;padding:calc(28px + var(--safe-top)) 16px 160px;opacity:.82;}
.startup-shell-head{display:grid;gap:10px;padding:4px 2px 0;}
.startup-shell-line,.startup-shell-search,.startup-shell-rail i{background:linear-gradient(90deg,#17191f,#20232b,#17191f);background-size:200% 100%;animation:startup-shimmer 1.35s ease-in-out infinite;border-radius:10px;}
.startup-shell-title{width:58%;height:28px}.startup-shell-subtitle{width:42%;height:14px;border-radius:7px}
.startup-shell-search{height:58px;border-radius:18px}.startup-shell-section{display:grid;gap:16px}.startup-shell-heading{width:34%;height:22px}
.startup-shell-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.startup-shell-rail i{display:block;height:222px;border-radius:18px;}
@keyframes startup-shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ── motion ─────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rise{animation:rise .24s cubic-bezier(.2,.8,.2,1) both;}
.d1{animation-delay:.01s;}.d2{animation-delay:.025s;}.d3{animation-delay:.05s;}.d4{animation-delay:.075s;}.d5{animation-delay:.10s;}
#tabbar{animation:rise .28s cubic-bezier(.2,.8,.2,1) .02s backwards;}
@media (prefers-reduced-motion:reduce){
  .rise,#tabbar{animation:none;}
  .startup-shell-line,.startup-shell-search,.startup-shell-rail i{animation:none;}
  .poster:active .art,.poster.is-activating .art,.genre:active,.chip:active,.back:active,.d-stars button:active,#tabbar .tab:active .tab-icon{transform:none;}
  /* Выделение и иконки меняют состояние мгновенно: состояние остаётся, движение
     уходит. Вход экрана при смене вкладки живёт в JS и там же и отключается —
     CSS не может выключить Element.animate(). */
  /* Сама кнопка тоже: у неё свой переход цвета в 180мс, и без этой строки
     выбранная вкладка при отказе от движения всё равно ПЕРЕЛИВАЛАСЬ. Дефект
     нашёлся проверкой, читающей цвет сразу после нажатия. */
  #tabbar .tab,
  #tabbar .tab-selection-lens,
  #tabbar .tab-icon,#tabbar .tab-glyph,#tabbar .tab > span{transition:none;}
  /* Переключатель разделов получил ту же модель, что и остров, — значит и
     отказ от движения обязан накрывать его так же. */
  .discovery-indicator{transition:none;}
  /* Энергия нажатия — тоже движение. Задержка показа снимается вместе с ней:
     ждать нечего, когда линза не едет. */
  #tabbar .tab::after,.discovery-tab::after{transition:none;opacity:0;}
  #tabbar .tab:active::after,.discovery-tab:active::after{opacity:0;}
  .search-field-shell{animation:none;}
  .search .search-tap,.search .icn,.search .q,
  .search-bar > .back,.search-field-shell{transition:none;}
  .sk::after{animation:none;}
  .d-backdrop img,.d-poster-wrap,.hero-ghost{transition:none!important;}
  .detail-v2 .d-backdrop-main,.detail-v2 .d-backdrop-ambient{transition:none!important;}
  .detail-hero-revealing .d-backdrop-main,
  .detail-hero-revealing .d-backdrop-ambient{opacity:1;}
}

/* Safari WebView can make several live backdrop-filter layers expensive on
   older phones. Motion-sensitive users get the same hierarchy without forcing
   the GPU to blur the whole page behind the fixed controls. */
@media (prefers-reduced-motion:reduce){
  #tabbar,.d-sticky.show,.d-ctrl{ -webkit-backdrop-filter:none;backdrop-filter:none; }
  #tabbar{background:rgba(18,20,24,.96);}
  .d-sticky.show{background:rgba(5,5,5,.96);}
}

/* ── Movie detail v2 ────────────────────────── */
/* The detail template uses d-* classes. Keep these styles with the template;
   without them the browser renders raw, unlaid-out HTML. */
.detail-v2{position:relative;}
.d-sticky{position:fixed;top:0;left:0;right:0;z-index:40;height:calc(52px + var(--safe-top));padding:var(--safe-top) 12px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(5,5,5,0);opacity:0;pointer-events:none;transition:opacity .2s,background-color .2s;border-bottom:1px solid transparent;}
.d-sticky.show{opacity:1;pointer-events:auto;background:rgba(5,5,5,.82);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border-bottom-color:var(--hair);}
.d-sticky .t{flex:1;text-align:center;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;opacity:0;transition:opacity .2s;}.d-sticky.show .t{opacity:1;}
.d-ctrl{width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,21,24,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}.d-ctrl svg{width:19px;height:19px;}
.d-floatctrls{position:absolute;inset:0 0 auto;z-index:3;padding:calc(10px + var(--safe-top)) 14px 0;display:flex;justify-content:space-between;}

/* ── Detail hero geometry — единственный источник правды ──────────────────
   Высота героя и наплыв тела под него заданы ОДНОЙ парой переменных на корне
   карточки. Разделять их нельзя: увеличишь высоту — постер уедет вниз и
   оторвётся от кадра. Три состояния приходят с сервера через hero_type, а не
   угадываются по наличию backdrop_url. */
/* Инвариант теперь не «наплыв», а ЯКОРЬ ПОСТЕРА: место, где начинается
   вертикальный постер, одинаково во всех трёх состояниях и почти не менялось
   с прошлой версии. Высота героя растёт отдельно, а наплыв ВЫЧИСЛЯЕТСЯ как
   разница — поэтому кадр уходит дальше ВНИЗ, ЗА постер, вместо того чтобы
   толкать постер вниз. Задавать высоту и наплыв двумя независимыми числами
   больше нельзя: рассинхрон между ними и есть «постер оторвался от кадра». */
.detail-v2{
  --detail-hero-height:clamp(300px,80vw,340px);
  --detail-poster-anchor:clamp(172px,45vw,195px);
  --detail-hero-overlap:calc(var(--detail-hero-height) - var(--detail-poster-anchor));
}
/* Запасные состояния остаются заметно ниже: за размытым постером и за пустым
   градиентом продолжать нечего, и высокая плита там читалась бы как дыра. */
.detail-v2.detail-hero-poster{--detail-hero-height:clamp(240px,62vw,285px);}
/* Пока карточка грузится, про кадр ещё ничего не известно: списки и поиск
   hero_* не отдают. Держим ту же высоту, что у запасного постера, — якорь
   постера от высоты героя не зависит (см. --detail-poster-anchor), поэтому ни
   заголовок, ни постер потом никуда не прыгнут. */
.detail-v2.detail-hero-loading{--detail-hero-height:clamp(240px,62vw,285px);}
/* Проявление настоящего кадра: короткая прозрачность и ничего больше — ни
   сдвига, ни масштаба, ни анимации размытия. */
.detail-v2 .d-backdrop-main,.detail-v2 .d-backdrop-ambient{transition:opacity .18s ease;}
.detail-hero-revealing .d-backdrop-main,.detail-hero-revealing .d-backdrop-ambient{opacity:0;}
.detail-v2.detail-hero-none{--detail-hero-height:clamp(205px,52vw,240px);}
/* Подложка — цвет СТРАНИЦЫ, а не --s1. Светлая плита имела смысл, пока герой
   был всегда заполненной картинкой 16/11; теперь под полупрозрачными слоями
   она давала еле заметную ступеньку светлее фона по всей нижней части блока. */
.d-backdrop{position:relative;width:100%;height:var(--detail-hero-height);aspect-ratio:auto;
  overflow:hidden;isolation:isolate;background:var(--bg);}
.d-backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center top;}
/* Подсказку компоновщику держим ТОЛЬКО на тех узлах, которые wireDetailScroll
   действительно двигает каждый кадр. Раньше `will-change` стоял на всех
   картинках блока разом — включая те, что никогда не анимируются, — и каждая
   из них получала собственный слой на устройстве, где слоёв и так мало. */
#d-backdrop-img,.d-backdrop-ambient{will-change:transform;}
.d-backdrop.sk{height:var(--detail-hero-height);aspect-ratio:auto;}
.d-body{position:relative;z-index:3;margin-top:calc(-1 * var(--detail-hero-overlap));padding:0 20px 8px;}
/* Ниже сгиба — считаем и рисуем по мере надобности. Это не ленивая загрузка
   данных: разметка на месте и доступна поиску по странице, просто браузер не
   обязан раскладывать её в том же кадре, что и первый экран. */
/* `content-visibility:auto` подразумевает `contain:paint`, а это ОБРЕЗАЕТ
   всплывающее меню комментария по границе секции: визуально оно есть, но
   клик по нему приходит в body. Поэтому у ленты комментариев containment нет
   — выигрыш в первом кадре не стоит неработающей кнопки. */
.d-rating-block,.d-cast{content-visibility:auto;}
.d-cast{contain-intrinsic-size:auto 220px;}

/* Размытая копия ТОГО ЖЕ файла. Нужна ровно за одним: убрать чёрные поля,
   которые contain оставляет вокруг широкого кадра. Тихая и тёмная — это фон
   сцены, а не эффект. */
/* Запас по вертикали больше, чем радиус размытия. blur размывает и СОБСТВЕННЫЙ
   край элемента: если он совпадает с краем блока, внутрь кадра уезжает тёмная
   виньетка. Замер на белой картинке: при width:100% рамка тёмная со всех
   четырёх сторон, при запасе — ровная заливка. Поэтому запас нужен и сверху,
   и по бокам; убрать горизонтальный, оставив вертикальный, нельзя. */
.d-backdrop .d-backdrop-ambient{position:absolute;z-index:0;top:-40px;left:-28px;right:auto;
  width:calc(100% + 56px);height:calc(100% + 80px);
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
  filter:blur(24px) saturate(.82) brightness(.58);opacity:.62;transform:scale(1.06);
  pointer-events:none;}
.d-backdrop-stage{position:absolute;z-index:1;inset:0;overflow:hidden;}
/* Никакого background у резкого кадра: пустое поле contain обязано открывать
   размытый слой под собой, а не чёрный прямоугольник. */
.d-backdrop .d-backdrop-main{position:absolute;inset:0;display:block;
  width:100%;height:100%;background:transparent;}
/* contain — для кинематографических 2.39:1. Кадр прижат к верху, свободное
   место остаётся СНИЗУ, где оно и растворяется в странице. Маска снимает
   резкую нижнюю границу изображения. */
/* height:auto — принципиально. При object-fit:contain картинка занимает лишь
   часть блока, а маска считается по БЛОКУ: у кадра 2.39:1 весь мягкий участок
   градиента попадал на пустоту под изображением, и снизу оставался резкий край.
   Сделав высоту элемента равной высоте самой картинки, мы кладём маску ровно на
   неё. Кадр по политике всегда шире 1.45:1, поэтому он гарантированно ниже
   блока и переполнить его не может. */
/* Отступ сверху растёт вместе с шириной экрана: под кнопками Telegram кадр
   начинался почти вплотную, и сцена читалась как прижатая к чрому. Опускаем
   ТОЛЬКО резкий кадр — фоновый слой, высота блока и наплыв тела не меняются. */
.d-backdrop[data-hero-fit="contain"] .d-backdrop-main{
  top:clamp(17px,4.8vw,20px);
  bottom:auto;left:0;right:auto;width:100%;height:auto;max-height:100%;
  object-fit:contain;object-position:var(--hero-focus-x,50%) top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.92) 87%,
    rgba(0,0,0,.55) 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.92) 87%,
    rgba(0,0,0,.55) 94%,transparent 100%);}
/* Чем шире кадр, тем меньше от него достаётся по высоте: 2.39:1 при ширине
   блока даёт всего ~163 px полезной сцены, и она вдобавок жмётся к верху, где
   её накрывают кнопки Telegram. Поэтому широкие кадры расширяем чуть за края
   блока и опускаем — не масштабом, а шириной и смещением.
   Масштаб трогать нельзя: transform на этом же элементе пишет wireDetailScroll,
   и статическая рамка подралась бы с эффектом прокрутки.
   Класс ставит JS по РЕАЛЬНЫМ naturalWidth/naturalHeight загруженного файла,
   а не по названию фильма и не по метаданным каталога. */
.d-backdrop[data-hero-fit="contain"].d-hero-wide .d-backdrop-main{
  top:clamp(22px,6vw,26px);left:-2.5%;width:105%;}
.d-backdrop[data-hero-fit="contain"].d-hero-ultrawide .d-backdrop-main{
  top:clamp(27px,7vw,31px);left:-6%;width:112%;}
/* cover уже заполняет блок целиком — ему хватает общего затемнения снизу. */
.d-backdrop[data-hero-fit="cover"] .d-backdrop-main{
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);}

/* Верхняя зона — управляемая, а не «как вышло». Кнопки Telegram стояли прямо на
   деталях кадра (снег «Интерстеллара», белый бокс F1, розовое мыло «Бойцовского
   клуба»), и там же проходит жёсткая верхняя граница резкого contain-кадра:
   маска гасит только низ. Плотная, но многоступенчатая шторка убирает и то, и
   другое, оставаясь кинематографичной, а не чёрной полосой. */
.d-scrim-t{position:absolute;inset:0 0 auto;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,5,5,.82) 0%,rgba(5,5,5,.74) 10%,
    rgba(5,5,5,.58) 20%,rgba(5,5,5,.36) 32%,rgba(5,5,5,.16) 46%,rgba(5,5,5,0) 60%);}
/* Многоступенчатый уход в фон страницы: последняя остановка — ровно var(--bg),
   поэтому видимой горизонтальной границы между героем и телом не остаётся. */
/* Последние 5% — уже сплошной var(--bg), а не «почти». Пока градиент добирал
   непрозрачность ровно к последнему пикселю, у cover-кадра снизу оставалась
   различимая ступенька: на 80% сквозь него ещё читались 18% яркой картинки, и
   весь остаток гасился на 40 пикселях. Замер: с этими стопами нижняя полоса
   героя совпадает с фоном страницы точно. */
.d-scrim-b{position:absolute;inset:auto 0 0;height:82%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.04) 16%,
    rgba(5,5,5,.18) 34%,rgba(5,5,5,.46) 54%,rgba(5,5,5,.74) 70%,
    rgba(5,5,5,.93) 86%,var(--bg) 95%,var(--bg) 100%);}

/* Запасной режим: вертикальный постер работает атмосферой, а не «широким
   кадром». Резкий постер 2:3 ниже остаётся главным изображением. */
/* Атмосфера запасного постера. Ровно та же обработка нужна и заглушке на время
   загрузки: без неё вертикальный постер растягивался на весь горизонтальный
   блок РЕЗКИМ — то есть ровно тем, что запасной режим и придуман скрывать.
   Настоящие слои кадра под это правило не попадают: они не заглушка. */
.detail-hero-poster .d-backdrop img:not(.d-backdrop-main):not(.d-backdrop-ambient),
.d-backdrop-placeholder{object-fit:cover;object-position:center 28%;
  filter:blur(26px) saturate(.82) brightness(.48);transform:scale(1.18);opacity:.72;}
/* Заглушка лежит ПОД настоящими слоями и живёт до успешного проявления. */
.d-backdrop-placeholder{z-index:0;}
.detail-hero-poster .d-scrim-t{height:88px;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent);}
/* Изображения нет вовсе — ничего не выдумываем, но и пустой плиты не оставляем:
   высота здесь не нулевая ради безопасной зоны Telegram и плавающих кнопок. */
.detail-hero-none .d-backdrop{
  background:radial-gradient(100% 130% at 50% 0%,#252932 0%,#111319 42%,var(--bg) 82%);}
.detail-hero-none .d-scrim-t{height:76px;
  background:linear-gradient(180deg,rgba(0,0,0,.38),transparent);}

.d-poster-wrap{position:relative;width:fit-content;margin-inline:auto;display:flex;justify-content:center;will-change:transform;transform-origin:center top;}.d-poster{position:relative;width:128px;aspect-ratio:2/3;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:0 20px 40px -16px rgba(0,0,0,.85);border:1px solid var(--hair);transition:opacity .1s;}.d-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}.d-poster .fb{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--ink-2);}
/* Канонический постер проявляется ПОВЕРХ превью, а не вместо него: замена «в
   лоб» показывала пустой кадр между двумя файлами. Только прозрачность — ни
   масштаба, ни сдвига. Правило стоит ЗДЕСЬ, после блока detail v2: объявление
   выше по файлу этот же селектор переопределяет. */
.d-poster img{transition:opacity .16s ease;}
.d-poster img.d-poster-incoming{opacity:0;z-index:2;}
.d-poster img.d-poster-incoming.is-visible{opacity:1;}
@media (prefers-reduced-motion:reduce){.d-poster img{transition:none;}}
.d-title{text-align:center;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:16px;}.d-original,.d-meta,.d-genres,.d-director{text-align:center;color:var(--ink-2);margin-top:3px;}.d-original{font-size:15px;}.d-meta,.d-genres,.d-director{font-size:14px;}.d-meta{font-weight:500;margin-top:8px;}.d-director b{color:var(--ink);font-weight:500;}
.d-ratings{display:flex;justify-content:center;gap:10px;margin-top:22px;}.d-rpill{flex:0 0 92px;background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:11px 8px;text-align:center;}.d-rpill .v{font-size:18px;font-weight:700;}.d-rpill .l{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:2px;text-transform:uppercase;}.d-rpill .c{font-size:10.5px;color:var(--ink-2);margin-top:1px;}

.d-overview{font-size:15px;line-height:1.55;color:#d7d9de;margin-top:22px;}

.d-rating-block .d-stars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:100%;min-width:0;}
.d-rating-block .d-rating-option{display:grid;place-items:center;width:100%;min-width:0;height:46px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#17181e;color:#a7aab4;font-family:var(--font);font-size:14px;font-weight:680;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,transform 120ms ease;}
.d-rating-block .d-rating-option.on{border-color:rgba(var(--af-accent-rgb),.62);background:var(--af-accent);color:var(--af-on-accent);}
.d-rating-block .d-rating-option:active{transform:scale(.96);}
.d-rating-block .d-rating-option:focus-visible,.d-comment-save:focus-visible,.d-comment-menu-trigger:focus-visible,.d-comment-menu button:focus-visible{outline:2px solid rgba(157,113,255,.82);outline-offset:2px;}
.d-comment-input{display:block;width:100%;min-height:100px;max-height:138px;padding:14px 15px;resize:none;overflow-y:auto;border:1px solid rgba(255,255,255,.09);border-radius:17px;outline:0;background:#16171c;color:#f0f0f3;font:14.5px/1.5 var(--font);transition:border-color .14s ease,box-shadow .14s ease;}
.d-comment-input::placeholder{color:#777a85;}
.d-comment-input:focus{border-color:rgba(var(--af-accent-rgb),.72);box-shadow:0 0 0 3px rgba(var(--af-accent-rgb),.1);}
.d-comment-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;}

.d-cast{margin-top:30px;}.d-cast-h{margin-bottom:14px;}.d-cast-h h2{font-size:17px;font-weight:600;}.d-cast-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:0 -20px;}.d-cast-rail::-webkit-scrollbar{display:none;}.d-cast-item{flex:0 0 84px;}.d-avatar{position:relative;width:84px;aspect-ratio:360/549;overflow:hidden;border-radius:14px;background:var(--s2);border:1px solid var(--hair);}.d-avatar .fb{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--ink-2);}.d-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;}.d-cast-item .n{font-size:12.5px;font-weight:500;margin-top:8px;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.d-comment-menu-wrap {
  position:relative;
  flex:0 0 auto;
  /* Меню всплывает НАД соседними строками. Без своего слоя следующий
     комментарий рисуется поверх него: в потоке он идёт позже, а прежняя
     раскладка держала меню в отдельном контексте карточки. */
  z-index:2;
}
.d-comment-menu-trigger {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#8f929d;
  cursor:pointer;
}
.d-comment-menu-trigger:active,
.d-comment-menu-trigger[aria-expanded=true] {
  background:rgba(255,255,255,.055);
  color:#e2e2e7;
}
.d-comment-menu-trigger svg {
  width:21px;
  height:21px;
}
.d-comment-menu.up {
  top:auto;
  bottom:42px;
}
.d-comment-menu {
  position:absolute;
  z-index:3;
  top:42px;
  right:0;
  width:max-content;
  min-width:190px;
  padding:6px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#191a20;
  box-shadow:0 16px 42px rgba(0,0,0,.48);
}
.d-comment-menu[hidden] {
  display:none;
}
.d-comment-menu button {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:0 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#efeff3;
  font:610 12.5px var(--font);
  text-align:left;
}
.d-comment-menu button.danger {
  color:#ff7e8c;
}
.d-comment-menu button:active {
  background:rgba(255,255,255,.055);
}
.d-comment-menu button svg {
  width:18px;
  height:18px;
}
@media(max-width:360px){.d-rating-block .d-stars{gap:3px;}.d-rating-block .d-rating-option{height:44px;border-radius:9px;font-size:12.5px;}}

@media(prefers-reduced-motion:reduce){.d-rating-block .d-rating-option,.d-comment-input{transition:none;}}
.hero-ghost{position:fixed;z-index:100;border-radius:18px;overflow:hidden;pointer-events:none;box-shadow:0 20px 40px -16px rgba(0,0,0,.85);top:0;left:0;}.hero-ghost img{width:100%;height:100%;object-fit:cover;display:block;}.d-poster.sk{position:relative;}

/* A loaded Kinopoisk person image is first checked for the provider's gray
   "K" placeholder. The initials remain visible until a real portrait passes
   that check, so users never see the broken card flash on screen. */
.d-avatar img[data-person-photo],.person-avatar img[data-person-photo]{opacity:0;transition:opacity .16s ease;}
.d-avatar img[data-person-photo].ready,.person-avatar img[data-person-photo].ready{opacity:1;}
.detail-v2{overflow-anchor:none;}

/* Character names are context, not a second actor heading. */
.d-cast-item .n{min-height:31px;}
.d-cast-item .role{margin-top:3px;color:var(--ink-2);font-size:11px;font-weight:450;
  line-height:1.25;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;}

/* ── home redesign: «Смотреть все», bookmark, CTA рекомендаций ── */
.head-actions{display:flex;align-items:center;gap:8px;flex:none;}
/* поиск = тап-зона (иконка+текст) + отдельная кнопка-фильтр */

/* «Смотреть все ›» — акцентная ссылка справа в заголовке секции */
.see-all{flex:none;display:inline-flex;align-items:center;gap:2px;background:none;border:0;cursor:pointer;
  color:var(--accent-2);font:600 13.5px var(--font);letter-spacing:-.01em;padding:2px 0 2px 8px;transition:opacity .15s;}
.see-all:active{opacity:.55;}
.see-all svg{width:15px;height:15px;}

/* bookmark на постере (верх-право). Заполнен = уже в списке «Хочу/Смотрел». */
.bm{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(8,9,11,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .14s,background .16s;}
.bm:active{transform:scale(.86);}
.bm svg{width:16px;height:16px;}
.bm.on{background:var(--accent);border-color:transparent;color:var(--af-on-accent);}

/* CTA «Оценивай и получай рекомендации» */
.reco{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;margin:18px 20px 4px;padding:16px;
  border:1px solid var(--hair);border-radius:20px;
  background:radial-gradient(130% 130% at 0 0,rgba(var(--accent-rgb),.13),transparent 55%),var(--s1);box-shadow:0 12px 30px -24px rgba(0,0,0,.85);}
.reco-icon{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--accent-2);
  background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.24);}
.reco-icon svg{width:23px;height:23px;}
.reco-copy{flex:1;min-width:0;}
.reco-copy h3{font-size:15px;font-weight:650;letter-spacing:-.02em;line-height:1.22;}
.reco-copy p{margin-top:5px;font-size:12px;line-height:1.42;color:var(--ink-2);}
.reco-btn{margin-top:12px;height:36px;padding:0 18px;border:0;border-radius:11px;background:var(--accent);color:var(--af-on-accent);
  font:600 13px var(--font);cursor:pointer;transition:transform .12s,opacity .12s;}
.reco-btn:active{transform:scale(.95);opacity:.9;}
/* веер из настоящих постеров подборки «Популярное» (декор справа) */
.reco-arts{flex:none;position:relative;width:112px;height:92px;align-self:center;margin:-2px -2px -2px 0;}
.reco-art{position:absolute;top:6px;width:56px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--hair-2);box-shadow:0 12px 24px -12px rgba(0,0,0,.9);background:var(--s3);}
.reco-art img{width:100%;height:100%;object-fit:cover;display:block;}
.reco-art:nth-child(1){right:52px;transform:rotate(-9deg);}
.reco-art:nth-child(2){right:26px;top:0;z-index:2;}
.reco-art:nth-child(3){right:0;transform:rotate(9deg);}
@media(max-width:360px){.reco-arts{display:none;}}

/* ── Подбор: два спокойных сценария вместо «магической» рекомендации ─────── */
.picker-head{padding-bottom:12px;}.picker-head h1{font-size:25px;}.picker-landing,.picker-result,.picker-results{padding:2px 20px var(--nav-clearance);}
body.admin-indicator-on .picker-landing,
body.admin-indicator-on .picker-result,
body.admin-indicator-on .picker-results {
  padding-bottom:var(--nav-clearance-admin);
}
.picker-option>i {
  color:var(--ink-2);
  font-size:24px;
  font-style:normal;
  font-weight:300;
  line-height:1;
}
/* Picker Landing V1: карточка сама — стеклянный элемент; главная — подбор по
   настроению, две быстрые — в ряд. Никаких подложек под иконки и общих панелей. */
.picker-landing-head{padding:calc(var(--safe-top) + 18px) 20px 0;}
.picker-landing-head h1{margin:0;color:var(--ink);font-size:34px;font-weight:720;line-height:1.08;letter-spacing:-.04em;}
.picker-landing-head p{max-width:390px;margin:12px 0 0;color:var(--ink-2);font-size:15px;line-height:1.45;letter-spacing:-.01em;}
.picker-landing{padding:22px 20px var(--nav-clearance);}
body.admin-indicator-on .picker-landing{padding-bottom:var(--nav-clearance-admin);}
.picker-mode-layout{display:grid;gap:12px;}
.picker-quick-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
/* «Спросить друзей» — на всю ширину под быстрыми способами: тот же материал, другое действие. */
.picker-mode-friends{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:14px;
  min-height:76px;padding:16px 18px;border-radius:24px;}
.picker-mode-friends b{font-size:16.5px;}
.picker-friends-status{display:flex;flex-direction:column;margin-top:-4px;padding:0 4px;}
.picker-friends-status[hidden]{display:none;}
.picker-mode-card{
  --press-x:50%;--press-y:50%;
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;margin:0;border:1px solid rgba(255,255,255,.095);color:var(--ink);
  font-family:var(--font);text-align:left;cursor:pointer;touch-action:manipulation;
  background:
    radial-gradient(125% 90% at 22% -30%,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 38%,rgba(255,255,255,0) 66%),
    linear-gradient(180deg,rgba(24,26,31,.56) 0%,rgba(10,11,15,.64) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(.96);
  backdrop-filter:blur(22px) saturate(1.35) brightness(.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.28),0 18px 42px -32px rgba(0,0,0,.95);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s ease;
}
.picker-mode-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110px 90px at var(--press-x) var(--press-y),rgba(255,255,255,.17),rgba(255,255,255,.055) 46%,transparent 76%);
  opacity:0;transform:scale(.94);
  transition:opacity .22s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.picker-mode-card:active{transform:scale(.985);}
.picker-mode-card:active::after{opacity:1;transform:none;transition:opacity .05s ease,transform .10s ease;}
.picker-mode-card.is-launching{cursor:progress;pointer-events:none;}
.picker-mode-card.is-launching::after{opacity:1;transform:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.1) 48%,transparent 68%);animation:picker-launch-sheen .75s ease-in-out infinite;}
@keyframes picker-launch-sheen{from{background-position:-120px 0;}to{background-position:260px 0;}}
.picker-mode-primary{
  display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:16px;
  min-height:136px;padding:22px 20px;border-radius:28px;
  background:
    radial-gradient(100% 150% at 88% -20%,rgba(var(--af-accent-rgb),.16) 0%,rgba(var(--af-accent-rgb),.035) 45%,transparent 68%),
    radial-gradient(125% 90% at 18% -30%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.025) 38%,transparent 66%),
    linear-gradient(180deg,rgba(26,27,33,.58),rgba(10,11,15,.66));
}
.picker-mode-quick{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:15px;
  min-height:142px;padding:18px;border-radius:24px;
}
.picker-mode-copy{display:flex;flex-direction:column;gap:5px;min-width:0;}
.picker-mode-primary .picker-mode-copy{gap:7px;}
.picker-mode-card b{display:block;color:var(--ink);font-weight:680;line-height:1.18;letter-spacing:-.025em;}
.picker-mode-primary b{font-size:21px;}
.picker-mode-quick b{font-size:16.5px;}
.picker-mode-card small{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.35;letter-spacing:-.01em;}
.picker-mode-primary small{font-size:14px;}
.picker-mode-icon{display:grid;place-items:center;flex:none;color:rgba(224,227,235,.72);}
.picker-mode-primary .picker-mode-icon{color:var(--nav-accent);}
.picker-mode-icon svg{display:block;width:30px;height:30px;}
.picker-mode-primary .picker-mode-icon svg{width:34px;height:34px;}
.picker-mode-arrow{color:rgba(210,214,223,.48);font-size:26px;font-style:normal;font-weight:300;line-height:1;}
.picker-mode-quick .picker-mode-arrow{position:absolute;top:16px;right:17px;}
@media(max-width:340px){
  .picker-landing-head{padding-left:16px;padding-right:16px;}
  .picker-landing{padding-left:16px;padding-right:16px;}
  .picker-landing-head h1{font-size:30px;}
  .picker-quick-grid{grid-template-columns:1fr;}
  .picker-mode-quick{min-height:112px;}
}
@media(prefers-reduced-motion:reduce){
  .picker-mode-card,.picker-mode-card::after{transition:none;animation:none;}
  .picker-mode-card:active{transform:none;}
}
@media(prefers-reduced-transparency:reduce){
  .picker-mode-card,.picker-mode-primary{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(17,18,22,.98);}
}
.picker-loading {
  display:grid;
  min-height:210px;
  place-items:center;
  color:var(--ink-2);
  font-size:14px;
}
.picker-error {
  padding:14px;
  border:1px solid rgba(248,113,113,.3);
  border-radius:14px;
  background:rgba(248,113,113,.06);
  color:#fca5a5;
  font-size:13px;
  line-height:1.4;
}
.picker-empty-copy {
  margin-top:10px;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.45;
}
.picker-result-label {
  margin:4px 0 12px;
  color:var(--accent-2);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.recommendation-film {
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  column-gap:14px;
  row-gap:14px;
  padding:14px;
  border:1px solid var(--hair);
  border-radius:20px;
  background:var(--s1);
  box-shadow:var(--shadow);
}
.recommendation-poster {
  position:relative;
  display:grid;
  place-items:center;
  align-self:start;
  width:118px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:13px;
  background:var(--s2);
  color:var(--ink-2);
  cursor:pointer;
}
.recommendation-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.picker-poster-fallback {
  padding:12px;
  font-size:24px;
  font-weight:700;
}
.recommendation-film-copy {
  min-width:0;
  padding-top:1px;
}
.recommendation-film-copy h2 {
  font-size:18px;
  line-height:1.17;
  letter-spacing:-.025em;
}
.recommendation-original,
.recommendation-meta {
  margin-top:5px;
  overflow:hidden;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recommendation-rating {
  display:inline-block;
  margin-top:9px;
  padding:4px 7px;
  border-radius:8px;
  background:rgba(244,183,64,.1);
  color:#f4b942;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.recommendation-explanation {
  grid-column:1/-1;
  margin-top:-4px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.45;
}
.recommendation-actions {
  display:grid;
  grid-column:1/-1;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.picker-primary,
.picker-secondary,
.picker-restart {
  min-height:42px;
  border-radius:12px;
  font:600 13px var(--font);
  cursor:pointer;
}
.picker-primary {
  border:0;
  background:var(--accent);
  color:var(--af-on-accent);
}
.picker-secondary,
.picker-restart {
  border:1px solid var(--hair-2);
  background:transparent;
  color:var(--ink);
}
.picker-text {
  min-height:34px;
  border:0;
  background:transparent;
  color:var(--accent-2);
  font:600 12px var(--font);
  cursor:pointer;
}
.picker-text.danger {
  color:#f58b94;
}
.picker-primary:disabled,
.picker-secondary:disabled,
.picker-text:disabled {
  opacity:.55;
}
.picker-quiz {
  min-height:calc(100vh - var(--safe-top));
  padding:calc(var(--safe-top) + 16px) 20px calc(28px + env(safe-area-inset-bottom));
}
.picker-quiz-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.picker-quiz-head>span {
  color:var(--ink-2);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.picker-progress {
  height:3px;
  overflow:hidden;
  margin:18px 0 42px;
  border-radius:99px;
  background:var(--s2);
}
.picker-progress i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
  transition:width .25s ease;
}
.picker-question h1 {
  max-width:430px;
  font-size:28px;
  line-height:1.14;
  letter-spacing:-.04em;
}
.picker-options {
  display:grid;
  gap:10px;
  margin-top:32px;
}
.picker-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:58px;
  padding:13px 14px 13px 16px;
  border:1px solid var(--hair);
  border-radius:16px;
  background:var(--s1);
  color:var(--ink);
  font:550 15px/1.32 var(--font);
  text-align:left;
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;
}
.picker-option:active,
.picker-option.selected {
  border-color:rgba(var(--accent-rgb),.65);
  background:rgba(var(--accent-rgb),.1);
  transform:scale(.988);
}
.picker-option:disabled {
  cursor:default;
}
/* V3 is an independently versioned, server-selected decision flow.  These
   rules must never restyle V1/V2 while its shell is being refined in phases. */
.picker-quiz-v3 {
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  padding:calc(var(--safe-top) + 24px) 20px calc(28px + var(--safe-bottom));
  overscroll-behavior-y:contain;
  background:#060607;
}
.picker-quiz-v3-ambient {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(82% 38% at calc(76% + var(--v3-ambient-shift,0px)) -4%,rgba(var(--accent-rgb),.055),transparent 68%),radial-gradient(78% 24% at 30% 0,rgba(255,255,255,.025),transparent 72%);
  opacity:.45;
}
.picker-quiz-v3-chrome {
  position:relative;
  z-index:1;
  display:flex;
  min-height:42px;
  align-items:flex-start;
  justify-content:center;
}
.picker-quiz-v3 .picker-quiz-v3-fallback-back {
  position:absolute; left:-10px; top:-8px;
  width:44px; height:44px;
  border:0;
  background:transparent;
  color:var(--ink-2);
  font:400 30px/1 var(--font);
}
.picker-quiz-progress { display:flex; justify-content:center; }
/* Тихая пауза после 429. Места в раскладке не занимает: строка ложится в
   зазор над вопросом, и вопрос не прыгает, когда она появляется и гаснет. */
.picker-quiz-v3 .picker-quiz-notice {
  position:relative; z-index:2; height:0; margin:0; overflow:visible; text-align:center;
  color:var(--ink-2); font:500 12px/16px var(--font); pointer-events:none;
}
/* Пока запись в полёте, нажатия не доходят — но решает JS-замок, не CSS. */
.picker-quiz-v3[data-mutation-busy="true"] .picker-option,
.picker-quiz-v3[data-mutation-busy="true"] .picker-quiz-v3-fallback-back { pointer-events:none; }
/* ── Liquid Bead progress (js/liquid-progress.js) ────────────────────────────
   Shared by every step-by-step flow. Visible: a thin rail, one glass bead from
   the shared liquid engine and the current number as crisp DOM above it.
   Invisible: one overlapping slot per step (the bead's rest width). Display-only. */
.af-liquid-progress { display:flex; justify-content:center; pointer-events:none; user-select:none;
  --af-progress-rail-active:var(--af-accent); --af-progress-rail-idle:#8A8E99; }
.af-liquid-progress-track { position:relative; width:204px; height:60px; }
/* Запасная дорожка: без движения, без WebGL2, при потере контекста. Пока жива
   оптическая сцена, ту же дорожку рисует она — внутри стекла она преломляется. */
.af-liquid-progress-rail { position:absolute; left:24px; right:24px; top:50%; height:2px; margin-top:-1px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.10); }
.af-liquid-progress.is-liquid-live .af-liquid-progress-rail { opacity:0; }
.af-liquid-progress-fill { position:absolute; inset:0; border-radius:inherit; background:rgba(var(--accent-rgb),.32); transform:scaleX(0); transform-origin:left center; }
/* Ось одна: дорожка (30), центр капли (6 + 24) и центр номера (30). */
.af-liquid-progress-liquid-root { position:absolute; left:0; right:0; top:6px; height:48px; display:flex; align-items:center; }
.af-liquid-progress-slot { position:relative; flex:0 0 var(--af-bead-width,48px); width:var(--af-bead-width,48px); height:48px; }
.af-liquid-progress-slot + .af-liquid-progress-slot { margin-left:calc((100% - var(--af-bead-width,48px)) / var(--af-progress-steps,1) - var(--af-bead-width,48px)); }
.af-liquid-progress-slot-mark { display:block; width:100%; height:100%; opacity:0; }
.af-liquid-progress-stage { inset:-20px -24px; }
.af-liquid-progress-canvas { width:100%; height:100%; }
.af-liquid-progress-value { position:absolute; left:0; top:0; z-index:3; width:0; height:60px; will-change:transform; }
/* Запасная бусина. Без неё отказ от движения, отсутствие WebGL2 или отказ в
   контексте оставляли от трекера одну цифру на рейке с прозрачностью .10 —
   на телефоне это читалось как «трекера нет вовсе». Статичное стекло без
   backdrop-filter: запасной путь не имеет права стоить GPU. */
.af-liquid-progress:not(.is-liquid-live) .af-liquid-progress-value::before {
  content:""; position:absolute; left:-22px; top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.30), rgba(255,255,255,.06) 42%, rgba(12,12,16,.92) 72%),
             radial-gradient(circle at 40% 82%, rgba(var(--accent-rgb),.22), transparent 46%), #101014;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.af-liquid-progress:not(.is-liquid-live) .af-liquid-progress-rail { background:rgba(255,255,255,.22); }
.af-liquid-progress:not(.is-liquid-live) .af-liquid-progress-fill { background:rgba(var(--accent-rgb),.75); }
.af-liquid-progress-number {
  position:absolute; left:-21px; top:50%; width:42px; height:22px; margin-top:-11px; text-align:center;
  color:rgba(255,255,255,.94); font:600 17px/22px var(--font); font-variant-numeric:tabular-nums; letter-spacing:.005em;
}
/* Horizontal page movement is clipped at the screen edge only while it runs:
   the viewport extends into the page gutter, so option borders never get cut. */
.picker-quiz-v3 .picker-quiz-stage-viewport { position:relative; z-index:1; margin-inline:-20px; padding-inline:20px; }
.picker-quiz-v3 .picker-quiz-stage-viewport.is-transitioning { overflow:hidden; }
/* Both the stage and the question are <section>s: the global `section{margin-top:30px}`
   used to add 60px of dead air between the tracker and the question. */
.picker-quiz-v3 .picker-quiz-stage { display:grid; position:relative; z-index:1; max-width:440px; margin-top:0; transition:none; }
.picker-quiz-v3 .picker-quiz-stage > .picker-question { grid-area:1 / 1; width:100%; }
.picker-quiz-v3 .picker-question { max-width:440px; margin-top:0; padding-top:28px; }
.picker-quiz-v3 .picker-question-kicker {
  margin:0 0 10px; color:rgba(var(--accent-rgb),.68); font:650 10px/1 var(--font); letter-spacing:.13em; text-transform:uppercase;
}
.picker-quiz-v3 .picker-question h1 {
  max-width:440px;
  font-size:clamp(31px,8.45vw,35px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:700;
}
/* Answers are content controls, not glass: five independent quiet rows, each
   its own separator, all text on one left edge. No icons, chevrons or radios. */
.picker-quiz-v3 .picker-options {
  display:grid;
  gap:8px;
  margin-top:26px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.picker-quiz-v3 .picker-option {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:flex-start;
  width:100%; min-height:58px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.07); border-radius:16px;
  background:rgba(255,255,255,.028); color:rgba(255,255,255,.95);
  font:600 16px/1.24 var(--font); letter-spacing:-.014em; text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s ease,background .16s ease,opacity .16s ease;
}
.picker-quiz-v3 .picker-option::after { content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(120px circle at var(--press-x,50%) var(--press-y,50%),rgba(var(--accent-rgb),.16),transparent 65%); transition:opacity .16s ease; }
.picker-quiz-v3 .picker-option.is-pressing::after { opacity:.6; }
.picker-quiz-v3 .picker-option-label { position:relative; z-index:1; }
.picker-quiz-v3 .picker-option:active {
  transform:scale(.992);
}
.picker-quiz-v3 .picker-option.selected,
/* Прежний ответ после «назад» в классическом опросе — тихая рамка. */
.picker-quiz .picker-option.is-previous { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.08); }
.picker-quiz-v3 .picker-option[aria-pressed="true"] {
  border-color:rgba(var(--accent-rgb),.22);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.065),rgba(var(--accent-rgb),.025));
  color:#fff; box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),.07);
  transform:scale(.994);
}
.picker-quiz-v3 .picker-option:disabled:not(.selected) {
  opacity:.7;
}
.picker-question-outgoing { pointer-events:none; }
@media(max-width:360px) {
  .picker-quiz-v3 { padding-inline:16px; padding-top:calc(var(--safe-top) + 20px); }
  .picker-quiz-v3 .picker-quiz-stage-viewport { margin-inline:-16px; padding-inline:16px; }
  .picker-quiz-v3 .picker-question { padding-top:22px; }
  .picker-quiz-v3 .picker-options { margin-top:23px; }
  .picker-quiz-v3 .picker-option { min-height:58px; padding-inline:15px; font-size:15.5px; }
}
@media(prefers-reduced-motion:reduce) {
  .picker-quiz-v3 .picker-option,.picker-quiz-v3-ambient { transition:none; animation:none; }
}
.picker-results {
  padding-top:2px;
}
.picker-role {
  margin:0 0 18px;
}
.picker-role>header {
  margin:0 0 9px;
  padding:0 2px;
}
.picker-role>header span {
  display:block;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
}
.picker-role>header small {
  display:block;
  margin-top:4px;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.35;
}
.picker-restart {
  display:block;
  width:100%;
  margin-top:2px;
}
body.picker-quiz-active #tabbar {
  display:none;
}
.picker-quiz-active {
  padding-bottom:0;
}
@media(max-width:360px) {
  .picker-landing,.picker-result,.picker-results {
    padding-left:16px;
    padding-right:16px;
  }
  .recommendation-film {
    grid-template-columns:102px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }
  .recommendation-poster {
    width:102px;
  }
  .recommendation-film-copy h2 {
    font-size:16px;
  }
  .picker-question h1 {
    font-size:25px;
  }
  .picker-quiz {
    padding-left:16px;
    padding-right:16px;
  }
}

/* ── Итог опроса: «Decision Stack» (js/picker.js · quizResultCardHTML) ───────
   Одна сильнейшая рекомендация и две осознанные альтернативы — не рейтинг.
   Карточки — КОНТЕНТ: тёмная поверхность без backdrop-filter; слой стекла
   принадлежит навигации. Акцент — только «лучший выбор», открытие и выбранное. */
.quiz-results-summary { margin:4px 2px 18px; }
.quiz-results-summary > span {
  display:block; color:var(--accent-2);
  font-size:10px; font-weight:720; line-height:1.2; letter-spacing:.13em; text-transform:uppercase;
}
.quiz-results-summary > p {
  max-width:360px; margin:7px 0 0; color:var(--ink-2);
  font-size:13.5px; line-height:1.42; letter-spacing:-.01em;
}
.quiz-results-stack { display:grid; gap:12px; }
.picker-results .quiz-results-stack .picker-role { margin:0; }
.picker-results .quiz-result-card {
  display:block; position:relative; overflow:hidden;
  padding:14px;
  border:1px solid rgba(255,255,255,.075); border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.picker-results .quiz-result-card.is-featured {
  border-color:rgba(var(--accent-rgb),.19);
  background:
    radial-gradient(115% 90% at 92% -12%,rgba(var(--accent-rgb),.10),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.023));
}
.quiz-result-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.quiz-result-role-copy { min-width:0; }
.quiz-result-role-copy > span {
  display:block; color:var(--ink);
  font-size:15px; font-weight:700; line-height:1.18; letter-spacing:-.02em;
}
.quiz-result-card.is-featured .quiz-result-role-copy > span { color:var(--accent-2); }
.quiz-result-role-copy > small { display:block; margin-top:3px; color:var(--ink-2); font-size:11.5px; line-height:1.32; }
.quiz-result-not-fit {
  flex:0 0 auto; min-height:44px; margin:-13px -7px -8px 0; padding:0 7px;
  border:0; background:transparent; color:rgba(238,150,160,.72);
  font:600 11.5px/1 var(--font); cursor:pointer; white-space:nowrap;
  transition:transform .13s ease, opacity .13s ease;
}
.quiz-result-not-fit:disabled { opacity:.45; }
.quiz-result-card-body { display:grid; grid-template-columns:96px minmax(0,1fr); gap:13px; align-items:start; }
.quiz-result-card.is-featured .quiz-result-card-body { grid-template-columns:110px minmax(0,1fr); gap:14px; }
.picker-results .quiz-result-poster { width:96px; border-radius:14px; }
.picker-results .quiz-result-card.is-featured .quiz-result-poster { width:110px; border-radius:15px; }
.quiz-result-card .recommendation-film-copy h2 {
  display:-webkit-box; overflow:hidden;
  font-size:16px; font-weight:680; line-height:1.2; letter-spacing:-.022em;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere;
}
.quiz-result-card.is-featured .recommendation-film-copy h2 { font-size:17px; }
.quiz-result-card .recommendation-original { margin-top:4px; font-size:11px; }
.quiz-result-card .recommendation-meta { margin-top:4px; font-size:11.5px; }
.picker-results .quiz-result-card .recommendation-rating {
  display:block; margin-top:7px; padding:0; border-radius:0; background:transparent;
  color:#e5b650; font-size:11.5px;
}
.quiz-result-card .recommendation-explanation {
  display:-webkit-box; overflow:hidden; margin-top:7px;
  color:var(--ink-2); font-size:11.5px; line-height:1.38;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.quiz-result-open {
  display:inline-flex; align-items:center; gap:5px; min-height:44px; margin:4px 0 -7px; padding:0;
  border:0; background:transparent; color:var(--accent-2);
  font:650 12.5px/1 var(--font); cursor:pointer;
  transition:transform .13s ease;
}
.quiz-result-open > span:last-child { font-size:19px; font-weight:300; transform:translateY(-.5px); }
.quiz-result-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.quiz-result-action {
  display:flex; align-items:center; justify-content:center; gap:7px; min-width:0;
  min-height:44px; padding:8px 10px;
  border:1px solid rgba(255,255,255,.085); border-radius:13px; background:rgba(255,255,255,.026);
  color:rgba(245,245,249,.91); font:620 12.5px/1.1 var(--font); cursor:pointer;
  transition:transform .13s ease, background-color .13s ease, border-color .13s ease;
}
.quiz-result-action > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-result-action svg { flex:none; width:18px; height:18px; color:var(--ink-2); }
.quiz-result-action.is-selected,
.quiz-result-action.is-selected:disabled {
  border-color:rgba(var(--accent-rgb),.23); background:rgba(var(--accent-rgb),.085);
  color:var(--accent-2); opacity:1;
}
.quiz-result-action.is-selected svg { color:var(--accent-2); }
.quiz-result-action:active,.quiz-result-open:active,.quiz-result-not-fit:active,
.quiz-results-footer button:active { transform:scale(.985); }
.quiz-results-footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.quiz-results-footer button { min-height:44px; transition:transform .13s ease; }
/* Появление — один раз, тихо: только прозрачность и 6px. Замена — лёгкий fade. */
.quiz-results-stack.is-entering > .picker-role {
  animation:quiz-result-in 250ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--quiz-result-index,0) * 48ms);
}
.quiz-results-stack > .picker-role.is-replaced { animation:quiz-result-fade 200ms ease-out both; }
@keyframes quiz-result-in { from { opacity:0; transform:translate3d(0,6px,0); } to { opacity:1; transform:none; } }
@keyframes quiz-result-fade { from { opacity:0; } to { opacity:1; } }
/* Заглушки загрузки повторяют геометрию карточек — без мерцающих полос. */
.quiz-result-placeholder {
  padding:14px; border:1px solid rgba(255,255,255,.06); border-radius:22px; background:rgba(255,255,255,.025);
}
.quiz-result-placeholder-body { display:grid; grid-template-columns:96px minmax(0,1fr); gap:13px; margin-top:12px; }
.quiz-result-placeholder.is-featured .quiz-result-placeholder-body { grid-template-columns:110px minmax(0,1fr); }
.quiz-result-placeholder-poster { display:block; aspect-ratio:2/3; border-radius:14px; background:rgba(255,255,255,.045); }
.quiz-result-placeholder-copy { display:grid; align-content:start; gap:9px; padding-top:2px; }
.quiz-result-placeholder-line { display:block; width:72%; height:11px; border-radius:6px; background:rgba(255,255,255,.055); }
.quiz-result-placeholder-line.is-role { width:38%; height:12px; }
.quiz-result-placeholder-line.is-short { width:46%; }
.quiz-results-placeholders { animation:quiz-result-breathe 1.6s ease-in-out infinite alternate; }
@keyframes quiz-result-breathe { from { opacity:1; } to { opacity:.62; } }
@media(max-width:360px) {
  .picker-results .quiz-result-card { padding:12px; }
  .quiz-result-card-body { grid-template-columns:88px minmax(0,1fr); gap:11px; }
  .quiz-result-card.is-featured .quiz-result-card-body { grid-template-columns:96px minmax(0,1fr); gap:12px; }
  .picker-results .quiz-result-poster { width:88px; }
  .picker-results .quiz-result-card.is-featured .quiz-result-poster { width:96px; }
  .quiz-result-action { gap:5px; padding-inline:6px; font-size:12px; }
}
@media(max-width:340px) {
  .quiz-results-footer { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .quiz-results-stack.is-entering > .picker-role,
  .quiz-results-stack > .picker-role.is-replaced,
  .quiz-results-placeholders { animation:none; }
  .quiz-result-action,.quiz-result-open,.quiz-result-not-fit,.quiz-results-footer button { transition:none; }
}

/* ── V3: итог опроса — один слайд (js/picker.js · mountV3Results) ────────────
   Три слоя, каждый своим материалом: жидкий переключатель ролей — навигация;
   постер — медиа; действия — обычные контролы. Внешней карточки нет.
   Экран не прокручивается: высота — стабильный вьюпорт Telegram, нижняя
   навигация остаётся на месте, и слайд кончается ДО неё. */
body.quiz-deck-open{
  /* Собственный нижний зазор слайда, а не общий --nav-clearance: тот держит
     ПРОКРУЧИВАЕМЫЕ экраны с запасом, из-за чего здесь под действиями оставалась
     мёртвая полоса. Здесь величина точная — ровно панель, её отступ от низа,
     безопасная зона и 14px воздуха между последними кнопками и стеклом. */
  --quiz-tabbar-height:68px;
  --quiz-tabbar-bottom:16px;
  --quiz-action-gap:14px;
  --quiz-bottom-clearance:calc(var(--quiz-tabbar-height) + var(--quiz-tabbar-bottom) + var(--quiz-action-gap) + var(--safe-bottom));
  height:var(--tg-viewport-stable-height,100dvh);min-height:0;padding-bottom:0;
  overflow:hidden;overscroll-behavior:none;
}
body.quiz-deck-open #screen{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  width:100%;max-width:520px;height:var(--tg-viewport-stable-height,100dvh);min-height:0;overflow:hidden;
}
.quiz-deck-head{display:block;}
body.quiz-deck-open .quiz-deck-head{padding:calc(var(--safe-top) + 10px) 20px 8px;}
.quiz-deck-title-row{display:flex;align-items:center;gap:12px;min-width:0;}
body.quiz-deck-open .quiz-deck-head h1{font-size:30px;font-weight:720;line-height:1.05;letter-spacing:-.04em;}
.quiz-deck-head .quiz-deck-fallback-back {
  width:44px; height:44px; margin:0 2px 0 -12px; border:0; background:transparent;
  color:var(--ink-2); font:400 30px/1 var(--font); cursor:pointer;
}
.quiz-deck-kicker-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:-6px;}
.quiz-deck-kicker {
  margin:0 2px; color:var(--accent-2);
  font:720 10px/1.2 var(--font); letter-spacing:.13em; text-transform:uppercase;
}
/* Третичное действие: не соревнуется с фильмом, но цель касания — 44px и
   намеренная, а не случайная полоска текста. */
.quiz-deck-adjust{
  position:relative;min-height:44px;padding:0 2px 0 12px;border:0;background:none;
  color:rgba(207,211,221,.54);font:590 12.5px/1 var(--font);cursor:pointer;
  transition:color .15s ease, transform .12s ease;
}
.quiz-deck-adjust::before{content:"";position:absolute;inset:0 -8px;}
.quiz-deck-adjust:active{color:rgba(225,228,235,.80);transform:scale(.97);}
.quiz-deck-adjust[aria-expanded="true"]{color:rgba(235,236,240,.86);}
/* Меню растёт из триггера: тот же принцип, что у Why-панели — прозрачный
   материал, а не общий чёрный прямоугольник. */
.quiz-deck-adjust-menu{
  position:absolute;z-index:30;top:calc(100% + 4px);right:0;display:grid;width:186px;padding:6px;
  border:1px solid rgba(255,255,255,.075);border-radius:18px;
  background:radial-gradient(120% 90% at 25% -20%,rgba(255,255,255,.075),rgba(255,255,255,.015) 58%,transparent 72%),
             rgba(16,17,21,.94);
  -webkit-backdrop-filter:blur(20px) saturate(1.18);backdrop-filter:blur(20px) saturate(1.18);
  box-shadow:0 20px 46px -28px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.075);
  transform-origin:calc(100% - 26px) 0;
  opacity:0;transform:translateY(-4px) scale(.96);pointer-events:none;
  transition:opacity .18s cubic-bezier(.2,.82,.22,1), transform .18s cubic-bezier(.2,.82,.22,1), visibility 0s linear .18s;
  visibility:hidden;
}
.quiz-deck-adjust-menu:not([hidden]){opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s;}
.quiz-deck-adjust-menu[hidden]{display:grid;}
.quiz-deck-adjust-item{
  display:flex;align-items:center;gap:9px;min-height:44px;padding:0 10px;
  border:0;border-radius:12px;background:transparent;
  color:rgba(236,238,244,.86);font:590 13px/1 var(--font);text-align:left;cursor:pointer;
  transition:background-color .13s ease;
}
.quiz-deck-adjust-item svg{flex:none;width:17px;height:17px;color:rgba(205,210,221,.60);}
.quiz-deck-adjust-item:active,.quiz-deck-adjust-item:focus-visible{background:rgba(255,255,255,.045);outline:none;}
.quiz-deck { max-width:470px; margin-inline:auto; }
body.quiz-deck-open .quiz-deck{
  display:flex;flex-direction:column;width:100%;min-height:0;margin:0 auto;
  padding:4px 20px var(--quiz-bottom-clearance);overflow:hidden;
}
.quiz-decision-tabs {
  position:relative; display:grid; grid-template-columns:repeat(var(--quiz-deck-count,3),minmax(0,1fr));
  flex:none; width:100%; max-width:390px; height:46px; margin:0 auto; padding:4px;
  border:1px solid rgba(255,255,255,.075); border-radius:23px;
  background:rgba(255,255,255,.032);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;
  --af-nav-idle:rgba(208,212,222,.72);
}
.quiz-decision-tabs .quiz-decision-liquid-stage {
  left:max(-18px,calc(2px - (100vw - 100%) / 2));
  right:max(-18px,calc(2px - (100vw - 100%) / 2));
  top:-14px; bottom:-14px;
}
.quiz-decision-fallback-lens {
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / var(--quiz-deck-count,3)); border-radius:19px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .24s cubic-bezier(.16,1,.3,1);
}
.quiz-decision-tabs[data-active-index="1"] .quiz-decision-fallback-lens { transform:translate3d(100%,0,0); }
.quiz-decision-tabs[data-active-index="2"] .quiz-decision-fallback-lens { transform:translate3d(200%,0,0); }
/* Пока живёт материал движка — запасной капсулы и видимых подписей нет:
   выбор рисует холст. Кнопки остаются настоящими и фокусируемыми. */
.quiz-decision-tabs[data-liquid="on"] .quiz-decision-fallback-lens { opacity:0; transition:none; }
.quiz-decision-tabs[data-liquid="on"] .quiz-decision-tab-label { opacity:0; }
.quiz-decision-tab {
  position:relative; z-index:1; min-width:0; height:38px; min-height:38px; padding:0 4px;
  border:0; border-radius:19px; background:transparent;
  color:rgba(208,212,222,.72); font:610 13px/1 var(--font); letter-spacing:-.015em;
  white-space:nowrap; cursor:pointer; touch-action:manipulation;
  transition:color .18s ease, transform .14s cubic-bezier(.2,.8,.2,1);
}
/* Цель касания — 44px по высоте: невидимое поле за пределами капсулы. */
.quiz-decision-tab::before { content:""; position:absolute; inset:-4px 0; }
.quiz-decision-tab[aria-selected="true"] { color:var(--nav-accent); }
.quiz-decision-tab:active { transform:scale(.97); }
.quiz-decision-tab:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.52); outline-offset:-3px; }
.quiz-decision-tab-label { display:block; overflow:hidden; text-overflow:clip; }
.quiz-deck-partial { flex:none; margin:8px 2px 0; color:var(--ink-2); font-size:11.5px; line-height:1.3; text-align:center; }
.quiz-deck-partial-short { display:none; }
.quiz-decision-role-note {
  flex:none; min-height:16px; margin:9px 0 12px; color:rgba(174,178,190,.72);
  font-size:12px; line-height:1.3; text-align:center;
}
.quiz-decision-viewport { position:relative; flex:1 1 0; min-height:0; margin-inline:-20px; padding-inline:20px; }
body.quiz-deck-open .quiz-decision-viewport, body.quiz-deck-open .quiz-deck-placeholder { container-type:size; }
.quiz-decision-viewport.is-transitioning { overflow:hidden; }
/* Сцена — <section>: глобальный section{margin-top:30px} съедал у слайда 30px. */
.quiz-decision-stage { display:grid; width:100%; height:100%; min-height:0; margin:0; }
.quiz-decision-stage > .quiz-decision-movie { grid-area:1 / 1; min-width:0; }
.quiz-decision-movie { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
/* Медиа забирает ВСЮ свободную высоту слайда, а постер вписывается в неё
   2:3. Прежний расчёт «высота сцены минус запас под две строки названия»
   ошибался на каждом однострочном названии — ровно на строку пустоты между
   причинами и кнопкой. Теперь название и причины стоят сразу под постером,
   а до кнопки — постоянный продуманный зазор, какой бы длины ни было название.
   Излишек (постер упёрся в предел ширины) уходит НАД постер, не в середину. */
.quiz-decision-media, .quiz-deck-placeholder-media {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:none; min-height:0;
  --deck-poster-max:min(58vw,248px); --deck-media-min:144px;
}
.quiz-decision-poster {
  position:relative; display:grid; place-items:center; flex:none;
  --deck-poster:clamp(126px,min(42vw,21.5dvh),184px);
  width:var(--deck-poster); aspect-ratio:2/3; overflow:hidden; padding:0;
  border:0; border-radius:18px; background:var(--s2); color:var(--ink-2); cursor:pointer;
  box-shadow:0 18px 44px -24px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07);
  transition:transform .14s ease;
}
.quiz-decision-poster:active { transform:scale(.99); }
.quiz-decision-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.quiz-decision-copy { min-width:0; margin-top:16px; }
.quiz-decision-copy h2 {
  display:-webkit-box; overflow:hidden; margin:0;
  font-size:23px; font-weight:700; line-height:1.08; letter-spacing:-.032em;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere;
}
.quiz-decision-meta {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:6px 0 0; color:var(--ink-2); font-size:12.5px; line-height:1.3;
}
.quiz-decision-meta-copy { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-decision-rating {
  display:inline-flex; align-items:center; gap:4px; flex:none; min-height:28px; padding:0 8px;
  border:1px solid rgba(255,255,255,.06); border-radius:10px; background:rgba(255,255,255,.02);
  color:#e5b650; font-weight:650; font-variant-numeric:tabular-nums;
}
.quiz-decision-rating-star { font-size:11px; line-height:1; }
/* «Почему подходит» — тихая строка, ещё тише прежней: без верхнего блика,
   тоньше рамка. Раскрытие — всплывающая панель НАД ней: слайд без прокрутки
   не имеет права расти. */
.quiz-decision-why { position:relative; flex:none; margin-top:12px; }
/* Компактная пилюля по ширине содержимого, а не полоса во всю ширину: строка
   причин — подсказка к фильму, не второй раздел. Видимая высота 36px, цель
   касания — 44px невидимым полем, как у вкладок ролей. */
.quiz-decision-why-toggle {
  position:relative; display:inline-grid; grid-template-columns:16px auto 13px; align-items:center; gap:8px;
  width:auto; max-width:100%; min-height:36px; height:36px; padding:0 12px 0 11px;
  border:1px solid rgba(255,255,255,.06); border-radius:18px; background:rgba(255,255,255,.022);
  color:rgba(228,231,238,.78); font:590 13px/1 var(--font); text-align:left; cursor:pointer;
}
.quiz-decision-why-toggle::before { content:""; position:absolute; inset:-4px -4px; }
.quiz-decision-why-icon { display:grid; place-items:center; width:16px; height:16px; color:rgba(201,206,218,.58); }
.quiz-decision-why-icon svg { display:block; width:16px; height:16px; }
.quiz-decision-why-caret { display:grid; place-items:center; color:rgba(194,199,211,.52); transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.quiz-decision-why-caret svg { display:block; width:14px; height:14px; }
.quiz-decision-why-label { min-width:0; }
.quiz-decision-why-toggle[aria-expanded="true"] .quiz-decision-why-caret { transform:rotate(180deg); }
/* Тихий якорный материал: панель растёт из строки-триггера. */
.quiz-decision-why-panel {
  position:absolute; z-index:8; left:0; right:0; bottom:calc(100% + 8px);
  padding:11px 13px;
  /* Сплошной фон: панель ложится поверх названия, и даже 1.5% прозрачности
     на тёмном фоне проявляли белый заголовок призраком (видно на устройстве).
     Размытие за непрозрачной панелью ничего не даёт — его и нет. */
  border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgb(19,20,25);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.055);
  transform-origin:36px bottom;
  opacity:0; transform:translateY(4px) scale(.975); pointer-events:none;
  transition:opacity .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s linear .18s;
  visibility:hidden;
}
.quiz-decision-why-panel ul {
  list-style:none; display:grid; gap:7px; margin:0; padding:0;
}
.quiz-decision-why-panel li {
  position:relative; padding-left:12px;
  color:rgba(220,224,233,.74); font:450 12.5px/1.35 var(--font);
}
.quiz-decision-why-panel li::before {
  content:""; position:absolute; left:1px; top:.58em; width:3px; height:3px; border-radius:50%;
  background:rgba(194,199,211,.48);
}
.quiz-decision-movie.is-why-open .quiz-decision-why-panel {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; transition-delay:0s;
}
/* Зона действий — единый нижний блок. Вся свободная вертикаль копится ПЕРЕД
   ней (margin-top:auto), поэтому постер, заголовок, метаданные и строка причин
   остаются одним плотным информационным блоком, а кнопки садятся к навигации.
   Никакого absolute: блок остаётся частью потока и не может залезть под панель. */
/* --title-slack: строка, которой этому фильму не хватило до самого длинного
   названия подборки (js · measureV3TitleLines). Она уходит в зазор перед
   кнопкой, а не в постер — постер одинаков на всех вкладках. */
.quiz-decision-action-zone { flex:none; margin-top:auto; padding-top:calc(20px + var(--title-slack, 0px)); }
.quiz-decision-title-probe {
  position:absolute; top:0; left:20px; right:20px; margin:0;
  visibility:hidden; pointer-events:none; contain:layout style;
}
/* Единственное заметное действие: тёплый окрашенный материал со стеклянным
   бликом сверху и мимолётным светом под пальцем — не второе стекло WebGL.
   Без иконки воспроизведения: кнопка открывает карточку, не запускает показ. */
.quiz-decision-open {
  --press-x:50%; --press-y:50%;
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center;
  flex:none; width:100%; min-height:52px; margin-top:0; padding:0 18px;
  border:1px solid rgba(255,255,255,.16); border-radius:18px;
  background:
    radial-gradient(120% 115% at 50% -35%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 40%, transparent 68%),
    linear-gradient(180deg, rgba(var(--af-accent-rgb),.90) 0%, rgba(var(--af-accent-rgb),.78) 100%);
  color:var(--af-on-accent); font:660 15.5px/1 var(--font); letter-spacing:-.015em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.16), 0 12px 28px -24px rgba(var(--af-accent-rgb),.58);
  cursor:pointer; touch-action:manipulation; transform:translateZ(0);
  transition:transform .14s cubic-bezier(.2,.8,.2,1), border-color .16s ease, filter .16s ease;
}
.quiz-decision-open::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(100px 70px at var(--press-x) var(--press-y), rgba(255,255,255,.20), rgba(255,255,255,.05) 48%, transparent 76%);
  opacity:0; transform:scale(.94);
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.quiz-decision-open.is-pressing::after { opacity:.78; transform:none; }
/* Нажатие слышно телом кнопки, а не только бликом: прежние .991 на 52px давали
   полпикселя — движение, которого фактически не было. */
.quiz-decision-open:active, .quiz-decision-open.is-pressing { transform:scale(.975); filter:brightness(.98); }
.quiz-decision-open:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.7); outline-offset:2px; }
.quiz-decision-actions { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
/* Три тихих контрола: заметно легче primary CTA, но касание читается сразу
   благодаря собственному блику и мимолётному свету под пальцем. */
.quiz-decision-action {
  --press-x:50%; --press-y:50%;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-width:0; min-height:48px; padding:0 10px;
  border:1px solid rgba(255,255,255,.075); border-radius:16px;
  background:
    radial-gradient(115% 100% at 30% -35%, rgba(255,255,255,.075), rgba(255,255,255,.018) 52%, transparent 72%),
    linear-gradient(180deg, rgba(24,26,31,.42), rgba(10,11,14,.52));
  color:rgba(233,236,243,.83); font:610 13.5px/1 var(--font); letter-spacing:-.012em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085), inset 0 -1px 0 rgba(0,0,0,.22);
  cursor:pointer; touch-action:manipulation;
  transition:transform .13s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease, color .16s ease;
}
.quiz-decision-action::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(74px 54px at var(--press-x) var(--press-y), rgba(255,255,255,.12), rgba(255,255,255,.025) 55%, transparent 80%);
  opacity:0; transform:scale(.93);
  transition:opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.quiz-decision-action.is-pressing::after { opacity:1; transform:none; }
.quiz-decision-action > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-decision-action svg { flex:none; width:20px; height:20px; color:rgba(218,222,232,.72); }
.quiz-decision-action:active { transform:scale(.985); }
/* Выбранный личный статус — та же лавандовая семья, что у «Открыть фильм»,
   но тише: CTA — .90/.78 и сильнее блик, статус — .74/.56. Прежние .085
   на реальном экране читались как «почти ничего не случилось». Цветом
   окрашен ТОЛЬКО выбор; простаивающие действия остаются графитом. */
.quiz-decision-action.is-selected, .quiz-decision-action.is-selected:disabled {
  opacity:1;
  border-color:rgba(255,255,255,.15);
  background:
    radial-gradient(120% 115% at 50% -35%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.045) 42%, transparent 68%),
    linear-gradient(180deg, rgba(var(--af-accent-rgb),.74) 0%, rgba(var(--af-accent-rgb),.56) 100%);
  color:var(--af-on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.15), 0 9px 22px -19px rgba(var(--af-accent-rgb),.55);
}
.quiz-decision-action.is-selected svg { color:#fff; }
/* Материал переключается мгновенно; завершение отмечает только значок. */
.quiz-decision-action.is-just-selected svg { animation:quiz-decision-selected-icon .26s cubic-bezier(.16,1,.3,1); }
@keyframes quiz-decision-selected-icon {
  0% { transform:scale(.86); }
  52% { transform:scale(1.14); }
  100% { transform:scale(1); }
}
/* Запись в сеть — ОДИН проход блика, без спиннера и без цикла: выбор уже
   виден, долгий ответ сервера не превращается в бесконечную загрузку. */
.quiz-decision-action.is-saving::before {
  content:""; position:absolute; z-index:0; top:0; bottom:0; left:-42%; width:36%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform:skewX(-18deg);
  animation:quiz-decision-save-sheen .52s ease-out 1 both;
}
@keyframes quiz-decision-save-sheen { from { left:-42%; } to { left:112%; } }
.quiz-decision-action > svg, .quiz-decision-action > span { position:relative; z-index:1; }
/* «Не моё» — единственный мимолётный смысловой цвет (320мс): красноватый
   акцент в момент касания, дальше — анимация замены фильма. Постоянно
   красным не бывает. */
.quiz-decision-action svg { transition:transform .18s cubic-bezier(.16,1,.3,1), color .18s ease; }
.quiz-decision-action.is-feedback-reject {
  border-color:rgba(255,107,107,.28); background:rgba(255,107,107,.075); color:rgba(255,150,150,.96);
}
.quiz-decision-action.is-feedback-reject svg { color:rgba(255,130,130,.95); }
.quiz-decision-action.is-feedback-reject { animation:quiz-decision-confirm .28s cubic-bezier(.16,1,.3,1); }
@keyframes quiz-decision-confirm {
  0% { transform:scale(.985); }
  45% { transform:scale(1.018); }
  100% { transform:scale(1); }
}
.quiz-deck.is-entering .quiz-decision-tabs { animation:quiz-deck-fade 160ms ease-out both; }
@keyframes quiz-deck-fade { from { opacity:0; } to { opacity:1; } }
/* Загрузка повторяет геометрию слайда: переключатель, подпись, постер, строки,
   строка причин, кнопка и три действия — ничто не прыгает при подмене. */
.quiz-deck-placeholder-tabs { flex:none; width:100%; max-width:390px; height:46px; margin:0 auto; border-radius:23px; background:rgba(255,255,255,.035); }
.quiz-deck-placeholder { display:flex; flex-direction:column; height:100%; min-height:0; animation:quiz-result-breathe 1.6s ease-in-out infinite alternate; }
.quiz-deck-placeholder-action-zone { display:block; flex:none; margin-top:auto; padding-top:20px; }
.quiz-deck-placeholder-poster { --deck-poster:clamp(126px,min(42vw,21.5dvh),184px); flex:none; width:var(--deck-poster); aspect-ratio:2/3; border-radius:18px; background:rgba(255,255,255,.045); }
.quiz-deck-placeholder-line { display:block; flex:none; width:68%; height:20px; margin-top:17px; border-radius:8px; background:rgba(255,255,255,.055); }
.quiz-deck-placeholder-line.is-short { width:42%; height:13px; margin-top:11px; }
.quiz-deck-placeholder-why { display:block; flex:none; width:46%; height:36px; margin-top:16px; border-radius:18px; background:rgba(255,255,255,.02); }
.quiz-deck-placeholder-cta { display:block; flex:none; height:52px; margin-top:0; border-radius:18px; background:rgba(255,255,255,.045); }
.quiz-deck-placeholder-actions { display:grid; flex:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.quiz-deck-placeholder-actions > span { height:48px; border-radius:16px; background:rgba(255,255,255,.03); }
/* Постер растёт от РЕАЛЬНОЙ высоты, оставшейся ему в слайде, а не от
   медиазапросов по окну: внутри Telegram окно не совпадает с экраном.
   Коробка медиа — flex:1 и контейнер размера; постер вписывается в неё по
   высоте (2:3), по ширине и по пределу --deck-poster-max. Длинное название,
   пометка о неполном подборе — всё это просто оставляет медиа меньше места.
   Нижний предел — --deck-media-min: ниже него слайд честно переполнится, а не
   спрячет действия молча (тест это ловит). Запросы по высоте выше — запасной
   путь для движков без cqh. */
@supports (height:1cqh) {
  body.quiz-deck-open .quiz-decision-media,
  body.quiz-deck-open .quiz-deck-placeholder-media {
    flex:1 1 0; min-height:var(--deck-media-min); container-type:size;
  }
  body.quiz-deck-open .quiz-decision-poster,
  body.quiz-deck-open .quiz-deck-placeholder-poster {
    width:min(var(--deck-poster-max), calc(100cqh * 2 / 3), 100cqw);
  }
}
@media(max-width:360px) {
  body.quiz-deck-open .quiz-deck-head h1 { font-size:28px; }
  .quiz-decision-tab { font-size:12.5px; padding-inline:2px; }
  .quiz-decision-copy h2 { font-size:21px; }
  .quiz-decision-actions, .quiz-deck-placeholder-actions { gap:6px; }
  .quiz-decision-action { gap:5px; font-size:11.5px; }
}
@media(max-height:820px) {
  .quiz-decision-role-note { margin-bottom:9px; }
  .quiz-decision-poster, .quiz-deck-placeholder-poster { --deck-poster:clamp(118px,min(40vw,20dvh),164px); }
  .quiz-decision-copy { margin-top:16px; }
}
@media(max-height:740px) {
  .quiz-decision-poster, .quiz-deck-placeholder-poster { --deck-poster:clamp(104px,min(36vw,17.5dvh),136px); }
}
/* Короткий экран (iPhone SE 2/3 — 667px): постер уже на нижнем пределе, и
   одного его ужатия не хватало — слайд обрезал три действия на 15px. Отдают
   воздух промежутки, а не цели касания: CTA остаётся 52px, строка причин —
   44px, действия — 48px. */
@media(max-height:700px) {
  body.quiz-deck-open .quiz-deck-head { padding-bottom:4px; }
  body.quiz-deck-open .quiz-deck-head h1 { font-size:26px; }
  .quiz-decision-role-note { margin:7px 0 8px; }
  .quiz-decision-copy { margin-top:10px; }
  .quiz-decision-why { margin-top:8px; }
  .quiz-decision-action-zone { padding-top:calc(12px + var(--title-slack, 0px)); }
  .quiz-deck-placeholder-action-zone { padding-top:12px; }
  /* iPhone 13 внутри Telegram (390×664) — самый частый реальный вьюпорт.
     Уступает постер (нижний предел 80×120), а не цели касания. */
  .quiz-decision-media, .quiz-deck-placeholder-media { --deck-media-min:120px; }
}
/* 320×568 (iPhone SE первого поколения): утверждённая композиция не
   помещается. Уходят две подсказки, без которых фильм выбирается: причины и
   подпись роли (имя роли уже на выбранной вкладке). Постер и действия важнее. */
@media(max-height:600px) {
  .quiz-decision-why, .quiz-deck-placeholder-why { display:none; }
  .quiz-decision-role-note { display:none; }
  .quiz-deck-partial-full { display:none; }
  .quiz-deck-partial-short { display:inline; }
  body.quiz-deck-open .quiz-deck-head h1 { font-size:22px; }
  .quiz-deck-partial { margin-top:4px; }
  /* Неполный подбор добавляет строку пояснения — её оплачивает постер. */
  .quiz-deck:has(.quiz-deck-partial) .quiz-decision-media { --deck-media-min:90px; }
  body.quiz-deck-open .quiz-decision-tabs, body.quiz-deck-open .quiz-deck-placeholder-tabs { margin-bottom:10px; }
  .quiz-decision-media, .quiz-deck-placeholder-media { --deck-media-min:108px; }
  .quiz-decision-action-zone { padding-top:calc(10px + var(--title-slack, 0px)); }
  .quiz-deck-placeholder-action-zone { padding-top:10px; }
  .quiz-decision-copy { margin-top:8px; }
}
/* 361–380px: «Смотрел» не помещался на 2px (59 в 57). Отдают промежуток и
   поля, а не кегль — подпись остаётся 13.5px. */
@media(max-width:380px) {
  .quiz-decision-action { gap:5px; padding-inline:8px; }
}
/* 320px: «Смотрел» (51px) не помещался в 46px. Значок 18px и поля 6px — кегль тот же. */
@media(max-width:340px) {
  .quiz-decision-action { gap:4px; padding-inline:6px; }
  .quiz-decision-action svg { width:18px; height:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .quiz-decision-why-panel, .quiz-decision-why-caret, .quiz-decision-fallback-lens,
  .quiz-decision-tab, .quiz-decision-action, .quiz-decision-open, .quiz-decision-poster,
  .quiz-decision-why-toggle, .quiz-deck-adjust-menu, .quiz-deck-adjust { transition:none; }
  .quiz-decision-why-panel, .quiz-deck-adjust-menu { transform:none; }
  .quiz-decision-open::after, .quiz-decision-action::after { transition:opacity .12s ease; transform:none; }
  .quiz-deck.is-entering .quiz-decision-tabs, .quiz-deck-placeholder { animation:none; }
  /* Смысловой отклик остаётся ЦВЕТОМ — исчезает только движение. */
  .quiz-decision-action.is-feedback-reject,
  .quiz-decision-action.is-just-selected svg,
  .quiz-decision-action.is-saving::before { animation:none; }
  .quiz-decision-action svg { transition:none; }
  .quiz-decision-open:active, .quiz-decision-open.is-pressing,
  .quiz-decision-action:active, .quiz-decision-action.is-pressing { transform:none; }
}

/* кнопка «+» в заголовке «Подборки» — в стиле системы (не квадрат .back) */
.icon-add{flex:none;width:32px;height:32px;border:1px solid var(--hair);border-radius:10px;background:var(--s2);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .15s;}
.icon-add:active{transform:scale(.9);}
.icon-add svg{width:18px;height:18px;}

/* ── Profile settings ─────────────────────────────────────────────────────── */
.page-head-action{display:grid;place-items:center;padding:0;}
.page-head-action svg{width:20px;height:20px;}
/* ── Настройки V2 (js/settings.js) ──────────────────────────────────────────
   Экран настроек системы, а не стопка карточек с кнопками: тихий заголовок
   раздела → одна сгруппированная поверхность → строки через тонкий
   разделитель.

   МАТЕРИАЛ — РОВНО ТОТ ЖЕ, что у поля поиска на главной (.search /
   .search-field-shell): тот же градиент графита, тот же рим, тот же верхний
   блик и то же живое стекло. Поле поиска — источник истины; если положить
   его и эти поверхности рядом, они обязаны читаться как один продукт.
   Прежний вариант обходился без backdrop-filter (прокручиваемое содержимое),
   но тогда тело было плотнее; теперь оно такое же прозрачное, как у поиска,
   и без размытия выглядело бы плоской заливкой.

   ЦВЕТ. Внутри настроек лаванды НЕТ: включённое и выбранное показывает
   материал (стекло ярче, линза на месте), а не оттенок. Лаванда остаётся
   опознавательным знаком нижней навигации — на неё эта правка не смотрит.
   Красный — только удаление аккаунта, и только значок с заголовком.

   Токены ниже — ЛОКАЛЬНЫЕ для настроек: --af-accent / --nav-accent не
   трогаем. Лист удаления живёт в document.body, поэтому токены объявлены и
   на нём: иначе его кнопки остались бы без значений. */
.settings-v2,.settings-delete-layer{
  --settings-material-top:rgba(25,27,32,.62);
  --settings-material-bottom:rgba(12,13,17,.71);
  --settings-material-top-strong:rgba(29,31,36,.70);
  --settings-material-bottom-strong:rgba(13,14,18,.78);
  --settings-border:rgba(255,255,255,.085);
  --settings-border-active:rgba(255,255,255,.14);
  --settings-highlight:rgba(255,255,255,.115);
  --settings-highlight-strong:rgba(255,255,255,.16);
  --settings-control-text:#F5F6F8;
  --settings-control-muted:#A4AAB5;
  --settings-focus:rgba(230,233,240,.44);
}
.settings-v2-head{padding:calc(var(--safe-top) + 14px) 16px 2px;}
.settings-v2-head h1{margin:0;font-size:30px;font-weight:710;line-height:1.05;letter-spacing:-.038em;}
.settings-page.settings-v2{padding:12px 16px calc(112px + var(--safe-bottom));}
@media(min-width:561px){
  .settings-v2-head{padding-left:20px;padding-right:20px;}
  .settings-page.settings-v2{padding-left:20px;padding-right:20px;}
}
/* Вход уровня — одно движение всей вьюхи, а не каскад строк. */
.settings-v2-view[data-motion="enter"]{animation:settings-v2-enter .2s cubic-bezier(.2,.8,.2,1) both;}
.settings-v2-view[data-motion="push"]{animation:settings-v2-push .2s cubic-bezier(.2,.8,.2,1) both;}
.settings-v2-view[data-motion="pop"]{animation:settings-v2-pop .2s cubic-bezier(.2,.8,.2,1) both;}
.settings-v2-view[data-motion="morph"] .settings-v2-panel{animation:settings-v2-morph .22s cubic-bezier(.2,.8,.2,1) both;}
@keyframes settings-v2-enter{from{opacity:0;transform:translate3d(0,7px,0);}to{opacity:1;transform:none;}}
@keyframes settings-v2-push{from{opacity:0;transform:translate3d(14px,0,0);}to{opacity:1;transform:none;}}
@keyframes settings-v2-pop{from{opacity:0;transform:translate3d(-14px,0,0);}to{opacity:1;transform:none;}}
@keyframes settings-v2-morph{from{opacity:.4;transform:scale(.985);}to{opacity:1;transform:none;}}

.settings-v2-section{margin:0 0 22px;}
.settings-v2-section-title{margin:0 7px 8px;color:rgba(164,170,181,.72);font:620 11px/1.2 var(--font);letter-spacing:.075em;text-transform:uppercase;}
/* Тело поверхности = .search-field-shell. Декоративных радиальных бликов
   здесь нет: материала достаточно, а второй слой делал карточку тяжелее. */
.settings-v2-card{position:relative;border:1px solid var(--settings-border);border-radius:21px;
  background:linear-gradient(180deg,var(--settings-material-top) 0%,var(--settings-material-bottom) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.30) brightness(.94);
  box-shadow:0 12px 30px -26px rgba(0,0,0,.95),inset 0 1px 0 var(--settings-highlight),inset 0 -1px 0 rgba(0,0,0,.18);}
/* Поверхность ничего не обрезает: линза языка во время хода выходит за свою
   капсулу. Скругление свет под пальцем берёт у самой строки. */
.settings-v2-row{--press-x:50%;--press-y:50%;position:relative;isolation:isolate;display:flex;align-items:center;gap:13px;
  width:100%;min-height:58px;margin:0;padding:10px 14px;border:0;border-radius:0;background:transparent;
  color:var(--af-text-primary);font:inherit;text-align:left;}
.settings-v2-card > .settings-v2-row:first-child{border-top-left-radius:21px;border-top-right-radius:21px;}
.settings-v2-card > .settings-v2-row:last-child{border-bottom-left-radius:21px;border-bottom-right-radius:21px;}
/* Разделитель — от текста, а не от края: так читается, какая строка чья. */
.settings-v2-row + .settings-v2-row::before{content:"";position:absolute;top:0;left:55px;right:14px;height:1px;background:rgba(255,255,255,.055);pointer-events:none;}
/* Значок — подпись к строке, а не вторая карточка внутри карточки: тише
   подложка, тише рим, меньше размер. */
.settings-v2-row-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);color:rgba(210,214,224,.72);}
.settings-v2-row-icon svg{display:block;width:17px;height:17px;}
.settings-v2-row-copy{display:flex;flex:1;flex-direction:column;gap:0;min-width:0;}
.settings-v2-row-title{font-size:15px;font-weight:600;line-height:1.24;letter-spacing:-.012em;}
.settings-v2-row-sub{margin-top:1px;color:rgba(164,170,181,.84);font-size:12.5px;line-height:1.34;}
.settings-v2-row-trailing{display:flex;align-items:center;flex:none;}
.settings-v2-chevron{display:block;width:16px;height:16px;color:rgba(164,170,181,.66);}
/* Строка-переход: касание — чуть вглубь и свет под пальцем. 100мс на нажатие,
   180мс на отпускание, только transform и opacity. */
.settings-v2-row--nav{cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
.settings-v2-row--nav::after,.settings-v2-button::after,.settings-partner-code::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(105px 68px at var(--press-x) var(--press-y),rgba(255,255,255,.07),rgba(255,255,255,.018) 55%,transparent 80%);
  opacity:0;transition:opacity .17s ease;}
.settings-v2-row--nav:active{transform:scale(.988);transition-duration:.1s;}
.settings-v2-row--nav:active::after,.settings-v2-button:active::after,.settings-partner-code:active::after{opacity:1;transition-duration:.09s;}
/* Фокус внутри настроек — нейтральный свет, а не акцент приложения. */
.settings-v2 .settings-v2-row--nav:focus-visible,.settings-v2 .settings-v2-button:focus-visible,
.settings-v2 .settings-partner-code:focus-visible,.settings-v2 .settings-liquid-toggle:focus-visible,
.settings-v2 .settings-language-option:focus-visible,.settings-delete-layer .settings-v2-button:focus-visible{
  outline:2px solid var(--settings-focus);outline-offset:-2px;}
.settings-danger-row .settings-v2-row-title{color:var(--af-danger);}
/* Красным только значок и заголовок: подзаголовок и шеврон остаются
   нейтральными — иначе строка кричит целиком. */
.settings-danger-row .settings-v2-row-icon{background:rgba(255,107,107,.07);border-color:rgba(255,107,107,.08);color:var(--af-danger);}
/* Администрирование тише ПЛОТНОСТЬЮ материала, а не серой типографикой:
   раздел остаётся того же семейства, просто прозрачнее. */
.settings-v2-section--quiet .settings-v2-card{
  background:linear-gradient(180deg,rgba(22,24,29,.46),rgba(10,11,14,.54));
  border-color:rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.18);}
.settings-v2-section--quiet .settings-v2-row{min-height:52px;}
/* Разделы Telegram — продолжение главного выключателя, а не отдельные
   настройки: отступ и тише значок. */
.settings-v2-row--nested{padding-left:30px;}
.settings-v2-row--nested .settings-v2-row-icon{opacity:.7;}
.settings-admin-note{margin:10px 2px 0;color:var(--ink-2);font-size:12px;line-height:1.4;}
.settings-v2-section--quiet .settings-v2-row-title{font-size:14.5px;color:var(--af-text-primary);}

/* ── Переключатель: состояние — ПОЛОЖЕНИЕ и МАТЕРИАЛ, а не цвет ──────────
   Включённый тумблер не заливается лавандой: стекло становится светлее и
   морознее, верхний блик — сильнее, ползунок уезжает вправо. Цветом состояние
   здесь не показывается вовсе. */
.settings-liquid-toggle{position:relative;isolation:isolate;flex:none;width:52px;height:32px;padding:0;
  border:1px solid rgba(255,255,255,.095);border-radius:16px;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(180deg,rgba(20,22,27,.62),rgba(8,9,12,.72));
  -webkit-backdrop-filter:blur(14px) saturate(1.20);backdrop-filter:blur(14px) saturate(1.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.24);
  transition:border-color .20s ease, background-color .20s ease, box-shadow .20s ease;}
/* Включённая дорожка — отдельный слой, чтобы менялась прозрачность, а не
   градиент (его браузер не анимирует). */
.settings-liquid-toggle::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,41,48,.74),rgba(18,20,25,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.20);
  opacity:0;transition:opacity .20s ease;}
/* Цель касания — 46px невидимым полем. */
.settings-liquid-toggle::after{content:"";position:absolute;inset:-7px -5px;}
.settings-toggle-thumb{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(95% 95% at 34% 24%,#FFFFFF 0%,#EFF1F5 54%,#C9CDD6 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 2px 7px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 1px rgba(0,0,0,.14);
  opacity:.82;transform:translate3d(0,0,0);
  transition:transform .26s var(--af-nav-ease),opacity .18s ease,scale .12s ease;}
.settings-liquid-toggle[aria-checked="true"]{border-color:rgba(255,255,255,.16);}
.settings-liquid-toggle[aria-checked="true"]::before{opacity:1;}
.settings-liquid-toggle[aria-checked="true"] .settings-toggle-thumb{opacity:1;transform:translate3d(20px,0,0);}
.settings-liquid-toggle:active .settings-toggle-thumb{scale:1.08 .94;}
.settings-liquid-toggle:disabled{cursor:not-allowed;opacity:.42;}

/* ── Язык: та же модель, что у .search-scope — выделением владеет общий
   AddictLiquidNav, здесь только запасная капсула и отступы оптической сцены.

   ЛИНЗА НЕЙТРАЛЬНА. Движок берёт цвета из computed style ТОГО узла, на
   котором создан (tab-liquid-webgl.js: getComputedStyle(state.tabbar)),
   поэтому достаточно переопределить --nav-accent и --af-nav-idle ЗДЕСЬ:
   шейдер не трогаем, нижняя навигация со своей лавандой не меняется. */
.settings-language-options{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  --nav-accent:var(--settings-control-text);
  --af-nav-idle:rgba(164,170,181,.86);
  width:176px;height:40px;border:1px solid var(--settings-border);border-radius:20px;
  background:linear-gradient(180deg,rgba(25,27,32,.52),rgba(12,13,17,.60));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.095),inset 0 -1px 0 rgba(0,0,0,.18);}
.settings-language-option{position:relative;z-index:1;min-width:0;height:38px;padding:0 6px;border:0;border-radius:18px;
  background:transparent;color:rgba(164,170,181,.86);font:600 13px var(--font);letter-spacing:-.012em;
  white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:color .14s ease;}
/* Цель касания — 44px по высоте. */
.settings-language-option::before{content:"";position:absolute;inset:-3px 0;}
.settings-language-label{display:block;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap;}
/* Выбранный язык читается ЛИНЗОЙ, а не цветом подписи. */
.settings-language-option.is-active{color:var(--settings-control-text);}
.settings-language-indicator{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 2);border-radius:17px;
  pointer-events:none;transform:translate3d(0,0,0);transition:transform .24s var(--af-nav-ease);
  background:linear-gradient(180deg,rgba(31,33,39,.78) 0%,rgba(17,18,22,.84) 100%);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.20),0 7px 20px -18px rgba(0,0,0,.95);}
.settings-language-options[data-active-index="1"] .settings-language-indicator{transform:translate3d(100%,0,0);}
.settings-language-options[data-liquid="on"] .settings-language-label{opacity:0;}
.settings-language-options[data-liquid="on"] .settings-language-indicator{opacity:0;transition:none;}
.settings-language-options .settings-language-liquid-stage{left:-14px;right:-14px;top:-14px;bottom:-14px;}
@media(max-width:360px){
  .settings-language-options{width:150px;}
  .settings-language-option{font-size:12.5px;padding:0 3px;}
  .settings-v2-row{gap:11px;padding-left:12px;padding-right:12px;}
  .settings-v2-row + .settings-v2-row::before{left:53px;}
}

/* ── Кнопки уровней ─────────────────────────────────────────────────────── */
.settings-v2-button{--press-x:50%;--press-y:50%;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;padding:0 16px;border:1px solid rgba(255,255,255,.075);border-radius:16px;
  background:rgba(255,255,255,.04);color:var(--af-text-primary);font:620 15px/1 var(--font);letter-spacing:-.012em;
  cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .16s ease;}
.settings-v2-button svg{flex:none;width:18px;height:18px;}
.settings-v2-button:active{transform:scale(.985);transition-duration:.1s;}
.settings-v2-button:disabled{cursor:default;opacity:.55;}
/* Главное действие уровня — та же светлая семья, что «Открыть фильм». */
.settings-v2-button--primary{border-color:rgba(255,255,255,.16);color:var(--af-on-accent);
  background:radial-gradient(120% 115% at 50% -35%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 40%,transparent 68%),
             linear-gradient(180deg,rgba(var(--af-accent-rgb),.88) 0%,rgba(var(--af-accent-rgb),.74) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.16),0 12px 28px -24px rgba(var(--af-accent-rgb),.58);}
.settings-v2-button--quiet{min-height:46px;border-color:transparent;background:transparent;color:var(--af-text-secondary);font-size:14.5px;}
.settings-v2-button--danger{border-color:rgba(255,107,107,.24);background:rgba(255,107,107,.06);color:var(--af-danger);}
.settings-v2-button--danger-solid{border-color:rgba(255,255,255,.14);color:#fff;
  background:linear-gradient(180deg,rgba(255,107,107,.88),rgba(236,84,94,.80));box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}

.settings-v2-panel{display:flex;flex-direction:column;gap:12px;padding:22px 18px 16px;}
.settings-v2-hero-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 4px;border-radius:17px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:rgba(214,218,228,.82);}
.settings-v2-hero-icon svg{width:24px;height:24px;}

/* ── Импорт ─────────────────────────────────────────────────────────────── */
.settings-import-intro{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:4px;text-align:center;}
.settings-import-intro p{max-width:30ch;margin:0;color:var(--af-text-primary);font-size:15px;line-height:1.4;}
.settings-import-sources{color:var(--af-text-tertiary);font-size:12px;letter-spacing:.01em;}
.settings-import-state:empty{display:none;}
.settings-import-state{display:flex;flex-direction:column;gap:12px;}
.settings-import-file{display:flex;align-items:center;gap:12px;min-width:0;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(0,0,0,.18);}
.settings-import-file-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);color:var(--af-text-secondary);}
.settings-import-file-icon svg{width:18px;height:18px;}
.settings-import-file-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.settings-import-file-copy b{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
.settings-import-file-copy small{color:var(--af-text-secondary);font-size:12px;}
/* Неопределённый прогресс: сервер отвечает одним ответом, процентов нет. */
.settings-import-progress{display:flex;flex-direction:column;gap:8px;color:var(--af-text-secondary);font-size:13px;text-align:center;}
.settings-import-progress-track{position:relative;display:block;height:4px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.08);}
.settings-import-progress-bar{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:inherit;
  background:linear-gradient(90deg,rgba(var(--af-accent-rgb),0),rgba(var(--af-accent-rgb),.9),rgba(var(--af-accent-rgb),0));
  animation:settings-import-indeterminate 1.15s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes settings-import-indeterminate{from{transform:translate3d(-100%,0,0);}to{transform:translate3d(265%,0,0);}}
.settings-import-result{display:flex;flex-direction:column;gap:12px;}
.settings-import-result.is-empty{align-items:center;gap:4px;text-align:center;}
.settings-import-result.is-empty small,.settings-import-result-head small{color:var(--af-text-secondary);font-size:12px;}
.settings-import-result-head{display:flex;align-items:center;gap:12px;}
.settings-import-result-head > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.settings-import-result-head b{font-size:16px;font-weight:660;}
.settings-import-check{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(var(--af-accent-rgb),.16);color:var(--nav-accent);animation:settings-import-check .28s cubic-bezier(.2,.8,.2,1) both;}
.settings-import-check svg{width:18px;height:18px;}
@keyframes settings-import-check{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}
.settings-import-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;}
.settings-import-stat{display:flex;flex-direction:column-reverse;gap:3px;padding:11px 10px;border-radius:14px;background:rgba(255,255,255,.035);text-align:center;}
.settings-import-stat dd{margin:0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.settings-import-stat dt{color:var(--af-text-secondary);font-size:11.5px;}
.settings-import-stat.is-muted dd{color:var(--af-text-secondary);}
.settings-import-missed{border-top:1px solid rgba(255,255,255,.06);}
.settings-import-missed summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
  color:var(--af-text-secondary);font-size:13px;cursor:pointer;list-style:none;}
.settings-import-missed summary::-webkit-details-marker{display:none;}
.settings-import-missed-caret{width:14px;height:14px;transition:transform .18s ease;}
.settings-import-missed[open] .settings-import-missed-caret{transform:rotate(180deg);}
.settings-import-missed ul{display:grid;gap:6px;max-height:200px;margin:0 0 6px;padding:0;overflow:auto;list-style:none;}
.settings-import-missed li{overflow:hidden;color:var(--af-text-secondary);font-size:13px;text-overflow:ellipsis;white-space:nowrap;}
.settings-import-missed li.is-more{color:var(--af-text-tertiary);}
.settings-import-error{margin:0;color:var(--af-danger);font-size:13px;line-height:1.4;text-align:center;}

/* ── Статистика бота (администратор) ────────────────────────────────────
   Четыре агрегата 2×2 в том же тихом материале настроек, а не цветной
   дашборд. Цифры — содержание, поэтому белые, не лавандовые. Кегль числа
   подстраивается под ширину плитки (cqi): «1 000 000» помещается и на 320px. */
.settings-admin-analytics{display:flex;flex-direction:column;gap:12px;}
.settings-admin-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.settings-admin-metric{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:104px;padding:14px;
  border:1px solid rgba(255,255,255,.07);border-radius:18px;container-type:inline-size;
  background:radial-gradient(110% 100% at 22% -25%,rgba(255,255,255,.055),transparent 64%),rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075);}
.settings-admin-metric strong{display:block;max-width:100%;overflow:hidden;color:var(--af-text-primary);
  font-size:min(28px,20cqi);font-weight:720;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;}
.settings-admin-metric span{margin-top:7px;color:var(--af-text-secondary);font-size:12px;line-height:1.3;}
/* Числа одного ряда стоят на одной линии: в узкой плитке (маленький
   телефон) подпись может уйти в две строки, поэтому там КАЖДАЯ подпись
   резервирует две — и число соседа не прыгает вверх. */
@container (max-width:140px){
  .settings-admin-metric span{min-height:calc(2em * 1.3);}
}
.settings-admin-metric.is-loading::before{content:"";display:block;width:48%;height:26px;border-radius:8px;background:rgba(255,255,255,.07);}
.settings-admin-metric.is-loading::after{content:"";display:block;width:72%;height:10px;margin-top:9px;border-radius:5px;background:rgba(255,255,255,.045);}
.settings-admin-analytics[aria-busy="true"] .settings-admin-metrics{animation:quiz-result-breathe 1.6s ease-in-out infinite alternate;}
.settings-admin-error{align-items:center;text-align:center;}
.settings-admin-subtitle{margin:6px 2px 0;color:var(--af-text-secondary);font-size:13px;font-weight:600;}
.settings-admin-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-radius:16px;background:rgba(255,255,255,.035);}
.settings-admin-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;padding:11px 14px;font-size:14px;}
.settings-admin-list li + li{border-top:1px solid rgba(255,255,255,.06);}
.settings-admin-list span{min-width:0;overflow:hidden;color:var(--af-text-primary);text-overflow:ellipsis;white-space:nowrap;}
.settings-admin-list b{flex:none;color:var(--af-text-secondary);font-weight:600;font-variant-numeric:tabular-nums;}
.settings-admin-tech{display:flex;flex-direction:column;gap:12px;}
.settings-admin-tech > summary{min-height:44px;display:flex;align-items:center;padding:0 2px;color:var(--af-text-secondary);font-size:14px;cursor:pointer;}
.settings-admin-error p{margin:0;color:var(--af-text-secondary);font-size:14px;}

/* ── Партнёр ────────────────────────────────────────────────────────────── */
.settings-partner-hero{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;text-align:center;}
.settings-partner-hero b{font-size:18px;font-weight:680;letter-spacing:-.02em;}
.settings-partner-hero p{max-width:32ch;margin:0;color:var(--af-text-secondary);font-size:13.5px;line-height:1.45;}
.settings-partner-avatar{position:relative;display:grid;place-items:center;width:68px;height:68px;margin-bottom:4px;overflow:hidden;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  color:var(--af-text-primary);font-size:26px;font-weight:650;}
.settings-partner-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.settings-partner-name{font-size:19px;}
.settings-partner-username{color:var(--af-text-secondary);font-size:13px;}
.settings-partner-badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:5px 10px;border-radius:999px;
  background:rgba(var(--af-accent-rgb),.12);color:var(--nav-accent);font-size:12px;font-weight:620;}
.settings-partner-badge svg{width:14px;height:14px;}
.settings-partner-code{--press-x:50%;--press-y:50%;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:56px;padding:0 16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(0,0,0,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:var(--af-text-primary);cursor:pointer;touch-action:manipulation;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);}
.settings-partner-code:active{transform:scale(.985);transition-duration:.1s;}
.settings-partner-code-value{min-width:0;overflow:hidden;font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;}
.settings-partner-code-icon{display:grid;place-items:center;flex:none;color:var(--af-text-tertiary);}
.settings-partner-code-icon svg{width:18px;height:18px;}
.settings-partner-copied{min-height:16px;margin:-6px 0 0;color:var(--af-text-secondary);font-size:12px;text-align:center;}
.settings-partner-form{display:grid;gap:10px;animation:settings-v2-enter .18s cubic-bezier(.2,.8,.2,1) both;}
.settings-partner-input{width:100%;min-height:50px;padding:0 14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;
  background:rgba(0,0,0,.26);color:var(--af-text-primary);font:500 16px var(--font);outline:none;transition:border-color .16s ease;}
.settings-partner-input::placeholder{color:var(--af-text-tertiary);}
.settings-partner-input:focus{border-color:rgba(var(--af-accent-rgb),.55);}

/* ── Удаление аккаунта: лист над всем приложением (навигация — z-index 60) ── */
.settings-delete-layer{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  padding:0 12px calc(12px + var(--safe-bottom));}
.settings-delete-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);}
.settings-delete-sheet{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(440px,100%);
  max-height:calc(100% - var(--safe-top) - 24px);overflow:auto;padding:24px 18px 16px;border:1px solid rgba(255,255,255,.09);border-radius:28px;
  background:radial-gradient(120% 80% at 30% -20%,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),rgb(19,20,25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.9);text-align:center;}
.settings-delete-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:rgba(255,107,107,.11);color:var(--af-danger);}
.settings-delete-icon svg{width:24px;height:24px;}
.settings-delete-sheet h2{margin:4px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;}
.settings-delete-sheet p{max-width:34ch;margin:0;color:var(--af-text-secondary);font-size:14px;line-height:1.45;}
.settings-delete-list{display:grid;gap:7px;width:100%;margin:6px 0 8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);list-style:none;text-align:left;}
.settings-delete-list li{position:relative;padding-left:14px;color:var(--af-text-primary);font-size:13.5px;line-height:1.35;}
.settings-delete-list li::before{content:"";position:absolute;top:.55em;left:2px;width:4px;height:4px;border-radius:50%;background:var(--af-danger);}
.settings-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.settings-delete-actions .settings-v2-button--quiet{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--af-text-primary);}
.settings-delete-layer[data-motion="in"] .settings-delete-backdrop{animation:settings-fade-in .18s ease both;}
.settings-delete-layer[data-motion="in"] .settings-delete-sheet{animation:settings-sheet-in .2s cubic-bezier(.2,.8,.2,1) both;}
.settings-delete-layer[data-motion="out"]{pointer-events:none;}
.settings-delete-layer[data-motion="out"] .settings-delete-backdrop{animation:settings-fade-in .16s ease reverse both;}
.settings-delete-layer[data-motion="out"] .settings-delete-sheet{animation:settings-sheet-in .16s ease reverse both;}
@keyframes settings-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes settings-sheet-in{from{opacity:0;transform:translate3d(0,12px,0) scale(.98);}to{opacity:1;transform:none;}}

/* Загрузка повторяет геометрию корня: заголовок раздела и строки. */
.settings-v2-skeleton-title{display:block;width:92px;height:10px;margin:0 6px 10px;border-radius:5px;background:rgba(255,255,255,.06);}
.settings-v2-skeleton-row{display:block;height:58px;}
.settings-v2-skeleton-row + .settings-v2-skeleton-row{border-top:1px solid rgba(255,255,255,.05);}
.settings-v2-loading .settings-v2-card{animation:quiz-result-breathe 1.6s ease-in-out infinite alternate;}

@media(prefers-reduced-motion:reduce){
  .settings-v2-view,.settings-v2-view .settings-v2-panel,.settings-partner-form,.settings-import-check,
  .settings-delete-layer .settings-delete-backdrop,.settings-delete-layer .settings-delete-sheet,
  .settings-v2-loading .settings-v2-card{animation:none!important;}
  .settings-admin-analytics[aria-busy="true"] .settings-admin-metrics{animation:none;}
  .settings-v2-row--nav,.settings-v2-button,.settings-partner-code,.settings-toggle-thumb,.settings-liquid-toggle,
  .settings-language-indicator,.settings-language-option,.settings-import-missed-caret{transition:none;}
  .settings-v2-row--nav:active,.settings-v2-button:active,.settings-partner-code:active{transform:none;}
  .settings-liquid-toggle:active .settings-toggle-thumb{scale:none;}
  .settings-import-progress-bar{left:0;width:100%;animation:none;opacity:.55;}
}
/* Меньше прозрачности — плотный графит вместо полупрозрачного материала;
   подписи языка и запасная капсула возвращаются поверх снятой жидкой сцены. */
@media(prefers-reduced-transparency:reduce){
  .settings-v2-card,.settings-v2-section--quiet .settings-v2-card,.settings-admin-metric,
  .settings-language-options,.settings-liquid-toggle{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(19,21,25);}
  .settings-liquid-toggle::before{background:rgb(41,44,51);}
  .settings-language-indicator{background:rgb(34,36,42);}
  .settings-language-liquid-stage{display:none;}
  .settings-language-options[data-liquid="on"] .settings-language-label{opacity:1;}
  .settings-language-options[data-liquid="on"] .settings-language-indicator{opacity:1;}
  .settings-delete-backdrop{background:rgba(0,0,0,.86);}
}
@media(max-width:560px){.notifications-page{padding-left:16px;padding-right:16px;}.notification-head{padding-left:16px;padding-right:16px;}}
/* Узкий экран: строка и плашка не меняют устройства — только плотность.
   Прежние правила здесь переопределяли grid у .notification-card, которой
   больше нет; они удалены, а не дополнены. */
@media(max-width:360px){
  .notification-head{gap:8px;}
  .notification-primary{grid-template-columns:38px minmax(0,1fr) 14px;gap:10px;padding:12px;}
  .notification-event-icon{width:38px;height:38px;border-radius:12px;}
  .notification-row + .notification-row::before{left:60px;}
  .notification-copy b{font-size:14px;}
  .notification-body{font-size:12.6px;}
  /* Число категории превращается в точку: подпись важнее счёта, а вместе они
     на 320px уже не помещаются. «Все» счёт сохраняет. */
  .notification-filter-count{min-width:6px;width:6px;height:6px;padding:0;border-radius:50%;
    color:transparent;overflow:hidden;}
  .notification-filter[data-notification-filter="all"] .notification-filter-count{
    min-width:16px;width:auto;height:16px;padding:0 4px;border-radius:8px;color:rgba(166,171,184,.82);}
  .notification-filter[data-notification-filter="all"].active .notification-filter-count{color:var(--nav-accent);}
}

/* ── Режим администратора ────────────────────────────────────────────────────
   Никаких «панелей разработчика»: те же карточки/радиусы/акцент, что и везде.
   Элементы редактирования видны только когда режим включён (рендерятся условно,
   не прячутся CSS-ом), а цели нажатия — не меньше 44px. */
.admin-indicator{position:fixed;left:50%;transform:translateX(-50%);z-index:35;
  bottom:calc(92px + var(--safe-bottom));display:flex;align-items:center;gap:8px;
  height:32px;padding:0 5px 0 12px;border:1px solid rgba(var(--accent-rgb),.38);
  border-radius:99px;background:rgba(10,10,12,.82);color:var(--accent-2);white-space:nowrap;
  font:600 11.5px var(--font);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.admin-indicator i{padding:5px 9px;border-radius:99px;background:rgba(var(--accent-rgb),.22);
  font-style:normal;font-size:11px;font-weight:650;}
.admin-panel{margin:0 20px 14px;padding:14px;border:1px solid var(--hair);border-radius:18px;background:var(--s1);}
.admin-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.admin-panel-head small{color:var(--ink-2);font-size:11px;}
.admin-badge{padding:5px 10px;border-radius:99px;font:650 11px var(--font);letter-spacing:.02em;}
.admin-badge-draft{background:rgba(255,255,255,.08);color:var(--ink-2);}
.admin-badge-published{background:rgba(var(--accent-rgb),.18);color:var(--accent-2);}
.admin-badge-archived{background:rgba(248,113,113,.14);color:#fca5a5;}
.admin-field{display:block;margin-bottom:12px;}
.admin-field>span{display:block;margin-bottom:6px;color:var(--ink-2);font-size:12px;}
.admin-textarea{width:100%;padding:11px 12px;border:1px solid var(--hair-2);border-radius:12px;
  background:var(--s2);color:var(--ink);font:400 14px/1.4 var(--font);resize:vertical;}
.admin-textarea:focus{outline:none;border-color:rgba(var(--accent-rgb),.55);}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 4px;}
.admin-actions .pbtn{flex:1 1 46%;min-height:44px;}
.admin-hint{margin:8px 20px 0;color:var(--ink-2);font-size:11px;}
.admin-item-list{display:flex;flex-direction:column;gap:8px;padding:0 20px;}
.admin-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--hair);
  border-radius:14px;background:var(--s1);}
.admin-item-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;
  background:none;color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;}
.admin-item-art{display:block;flex:none;width:40px;height:60px;overflow:hidden;border-radius:8px;background:var(--s3);}
.admin-item-art img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-item-copy{min-width:0;}
.admin-item-copy b{display:block;overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
.admin-item-copy small{display:block;margin-top:3px;color:var(--ink-2);font-size:11px;}
.admin-item-controls{display:flex;gap:2px;flex:none;}
.admin-icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s;}
.admin-icon-btn:active{background:rgba(255,255,255,.06);}
.admin-icon-btn:disabled{opacity:.3;cursor:default;}
.admin-icon-btn.danger{color:#f58b94;}
.admin-icon-btn svg{width:20px;height:20px;display:block;}

/* ── Крупная редакционная подборка ───────────────────────────────────────────
   Кинематографичный ландшафтный блок: тот же тёмный язык, что и везде, без
   неона и «админского» вида. Соотношение задано заранее — картинка не двигает
   лейаут при загрузке. */
.featured-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(88vw,420px);gap:12px;
  padding:0 20px 2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.featured-track::-webkit-scrollbar{display:none;}
.featured-slot{scroll-snap-align:start;min-width:0;}
.featured-card{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  border:1px solid var(--hair);border-radius:20px;background:var(--s2);cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);}
.featured-card:active{transform:scale(.985);}
.featured-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.featured-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.featured-card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,0,0,.12) 18%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.88) 100%);}
.featured-card-body{position:absolute;inset-inline:18px;bottom:15px;z-index:1;}
.featured-card-eyebrow{display:block;margin-bottom:6px;color:var(--accent-2);font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.featured-card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:21px;font-weight:700;line-height:1.16;letter-spacing:-.025em;color:#fff;}
.featured-card-desc{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  margin-top:5px;color:rgba(255,255,255,.72);font-size:12.5px;line-height:1.35;}
.featured-card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  color:rgba(255,255,255,.82);font-size:12px;font-variant-numeric:tabular-nums;}
.featured-card-meta i{font-style:normal;font-size:20px;line-height:1;color:rgba(255,255,255,.6);}
/* Вселенная Marvel на главной: знак студии и отсчёт сверху, крупное имя снизу.
   Кадр «Судного дня» тонируется сверху и снизу — текст читается на любом кадре. */
.franchise-card .featured-card-img{object-position:50% 38%;}
.franchise-card .featured-card-scrim{background:
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%),
  linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 100%),
  radial-gradient(90% 70% at 0% 100%,rgba(0,0,0,.45),transparent 70%);}
/* Красный блок MARVEL — левая половина официального логотипа Marvel Studios. */
.franchise-brand{position:absolute;top:16px;left:18px;z-index:1;display:block;width:54px;height:24px;overflow:hidden;
  border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,.45);}
.franchise-brand img{display:block;height:24px;width:auto;max-width:none;}
.franchise-card .featured-card-title{font-size:24px;letter-spacing:-.03em;}
.franchise-card .featured-card-meta{margin-top:6px;}
/* Свечение Дума: зелень плаща снаружи, жар магии у самой кромки и нить
   старого золота внутри — палитра его маршрута. Дышит медленно и только
   прозрачностью слоя: композитор, без перерисовки кадра. */
.franchise-card{border-color:rgba(127,211,162,.42);
  box-shadow:0 0 0 1px rgba(47,94,71,.55),0 0 14px rgba(62,160,110,.34),0 0 36px rgba(46,120,84,.24),
    0 20px 44px -22px rgba(0,0,0,.85);}
.franchise-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(185,151,95,.24),inset 0 0 26px rgba(62,160,110,.30),inset 0 -34px 48px -30px rgba(127,211,162,.28);
  animation:franchise-doom-breathe 5.5s ease-in-out infinite alternate;}
@keyframes franchise-doom-breathe{from{opacity:.62;}to{opacity:1;}}
/* Стрічка прокручується вбік і обрізала б сяйво зверху та знизу: поле — лише
   навколо картки Marvel, і від'ємним відступом макет головної не зсувається. */
.featured-track:has(.franchise-card){padding-top:18px;padding-bottom:20px;margin-top:-18px;margin-bottom:-18px;}
@media (prefers-reduced-motion:reduce){.franchise-card::after{animation:none;}}
/* Разрешение писать в Telegram — тихая карточка под поиском, не popup. */
.write-access-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon copy" "actions actions";
  gap:12px 14px;margin:2px 20px 14px;padding:16px;border-radius:20px;border:1px solid var(--hair);background:var(--s2);
  transition:opacity .26s ease,transform .26s ease;}
.write-access-card.is-leaving{opacity:0;transform:translateY(-6px);}
.write-access-card.is-done{grid-template-areas:"icon copy";align-items:center;}
.write-access-icon{grid-area:icon;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.86);}
.write-access-glyph{width:20px;height:20px;}
.write-access-copy{grid-area:copy;display:flex;flex-direction:column;gap:3px;min-width:0;align-self:center;}
.write-access-copy b{font-size:15px;font-weight:650;color:#fff;letter-spacing:-.01em;}
.write-access-copy span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.62);}
.write-access-actions{grid-area:actions;display:flex;gap:8px;}
.write-access-actions button{flex:1;min-height:44px;border-radius:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  touch-action:manipulation;border:0;}
.write-access-allow{background:#F2F3F5;color:#0b0b0c;}
.write-access-later{background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);}
.write-access-actions button:disabled{opacity:.55;}
@media (prefers-reduced-motion:reduce){.write-access-card{transition:none;}}
.featured-admin{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
.featured-admin-controls{display:flex;gap:2px;}
@media(max-width:360px){.featured-track{grid-auto-columns:min(90vw,420px);padding-left:16px;padding-right:16px;}
  .featured-card-title{font-size:19px;} .franchise-card .featured-card-title{font-size:21px;}}

/* Селектор формата и выбор фона в редакторе */
.admin-segments{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.admin-segment{padding:11px 12px;border:1px solid var(--hair-2);border-radius:14px;background:var(--s2);
  color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;transition:border-color .16s,background .16s;}
.admin-segment b{display:block;font-size:14px;font-weight:650;}
.admin-segment small{display:block;margin-top:3px;color:var(--ink-2);font-size:10.5px;line-height:1.3;}
.admin-segment.on{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.12);}
.admin-segment.on b{color:var(--accent-2);}
.admin-backdrops{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px;scrollbar-width:none;}
.admin-backdrops::-webkit-scrollbar{display:none;}
.admin-backdrop{flex:none;width:96px;height:60px;overflow:hidden;padding:0;border:2px solid transparent;
  border-radius:10px;background:var(--s3);cursor:pointer;}
.admin-backdrop img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-backdrop.on{border-color:var(--accent);}
.admin-preview{margin-top:2px;}

/* ── Полноэкранный редактор подборки ─────────────────────────────────────────
   Пока он открыт, глобальные плавающие элементы убираются: они перекрывали
   поля и кнопки сохранения. Состояние показывает собственный заголовок. */
body.collection-editor-open{padding-bottom:0;}
body.collection-editor-open #tabbar,
body.collection-editor-open .admin-indicator{display:none;}
.editor-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-top) + 10px) 20px 12px;background:linear-gradient(180deg,var(--bg) 76%,transparent);}
.editor-head h1{flex:1;min-width:0;overflow:hidden;font-size:19px;font-weight:700;
  letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap;}
.collection-editor{padding:2px 20px calc(28px + var(--safe-bottom));}

/* Fullscreen picker content still respects the same Telegram/browser bottom inset. */
.picker-quiz{padding-bottom:calc(28px + var(--safe-bottom));}
.collection-editor .admin-field{margin-bottom:18px;}
/* Кнопки сохранения остаются в потоке документа: фиксированная панель на iOS
   уезжает под клавиатуру. */
.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
.editor-actions.secondary{grid-template-columns:1fr 1fr;margin-top:10px;}
.editor-actions .pbtn{min-height:48px;}
.editor-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent-2);
  font:600 13px var(--font);cursor:pointer;}
.editor-films-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.editor-films-head>span{color:var(--ink-2);font-size:12px;}
.editor-error{display:block;margin-top:6px;color:#fca5a5;font-size:12px;font-style:normal;}
.collection-editor button,.collection-editor [role="button"]{min-height:44px;}
.collection-editor .admin-backdrop{min-height:60px;}
.collection-editor .admin-segment{min-height:64px;}
@media(max-width:360px){.editor-head,.collection-editor{padding-left:16px;padding-right:16px;}}

/* Профиль больше не несёт дублирующую строку цифр — убираем её отступ. */
.profile-hero .profile-main{margin-bottom:0;}
/* Кнопка настроек: видимый размер прежний, но цель нажатия — не меньше 44px. */
.page-head-action{width:44px;height:44px;border-radius:14px;color:var(--ink-2);}
.page-head-action:active{color:var(--ink);background:var(--s3);transform:scale(.97);}

/* Значок обкатки нового движка. Виден только администратору и только по
   данным сервера; вторичен по весу и не должен ломать раскладку вопроса на
   узких экранах Telegram. */
.picker-quiz-head-meta,.picker-title-meta{display:flex;align-items:center;gap:8px;min-width:0;}
.picker-title-meta h1{margin:0;}
.picker-preview-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:20px;padding:3px 7px;border:1px solid rgba(var(--af-accent-rgb),.42);border-radius:999px;
  background:rgba(var(--af-accent-rgb),.12);color:rgba(245,246,248,.96);font-size:10px;font-weight:700;
  line-height:1;letter-spacing:.08em;white-space:nowrap;}
@media(max-width:360px){.picker-preview-badge{padding-inline:6px;font-size:9px;}}

/* ── Fullscreen single pick ─────────────────────────────────────────────── */
/* Один фильм — одно решение. Кадр во всю ширину сверху, сведения под ним,
   действия в зоне большого пальца. Экран привязан к высоте вьюпорта: кадр
   получает то, что осталось после текста и кнопок, и никогда их не прячет. */
body.single-pick-open{
  height:100vh;height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:0;
  overscroll-behavior:none;
}
body.single-pick-open #tabbar,
body.single-pick-open #top-scrim,
body.single-pick-open .admin-indicator{display:none!important;}
body.single-pick-open #screen{
  width:100%;max-width:520px;height:100vh;height:100dvh;min-height:0;overflow:hidden;
}
.single-pick-screen{
  position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;
  width:100%;height:100vh;height:100dvh;min-width:0;min-height:0;
  padding:0 0 calc(var(--safe-bottom) + 12px);overflow:hidden;background:var(--af-bg);
}
body.single-pick-open .single-pick-screen.rise{animation:single-pick-fade .24s ease both;}
/* Следующий фильм приходит сбоку — короткий сдвиг, как в анкете подбора. */
body.single-pick-open .single-pick-screen.is-next .single-pick-card{
  animation:single-pick-next .28s var(--af-nav-ease) both;
}
@keyframes single-pick-fade{from{opacity:0;}to{opacity:1;}}
@keyframes single-pick-next{from{opacity:0;transform:translateX(22px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  body.single-pick-open .single-pick-screen.rise,
  body.single-pick-open .single-pick-screen.is-next .single-pick-card{animation:none;}
}
.single-pick-card{
  position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;
  min-width:0;min-height:0;touch-action:pan-y;transition:transform .18s ease;
}
.single-pick-visual{position:relative;isolation:isolate;min-height:0;overflow:hidden;}
.single-pick-media{position:absolute;inset:0;overflow:hidden;background:var(--af-bg);}
.single-pick-backdrop-ambient{
  position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
  filter:blur(34px) saturate(.8);opacity:.5;transform:scale(1.06);
}
.single-pick-backdrop-stage{position:absolute;z-index:1;inset:0;display:grid;place-items:center;}
/* contain: кадр во всю ширину и целиком, без обрезки; фон — его же размытие. */
.single-pick-media-backdrop[data-hero-fit="contain"] .single-pick-backdrop-stage{
  inset:calc(var(--safe-top) + 44px) 0 0;
}
.single-pick-media-backdrop[data-hero-fit="contain"] .single-pick-backdrop{
  display:block;width:100%;height:auto;max-height:100%;object-fit:contain;
}
.single-pick-media-backdrop[data-hero-fit="cover"] .single-pick-backdrop{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
}
.single-pick-media-shade,.single-pick-poster-shade{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 22%,
    rgba(5,5,5,0) 58%,rgba(5,5,5,.72) 86%,var(--af-bg) 100%);
}
.single-pick-media-poster{display:grid;place-items:center;padding:calc(var(--safe-top) + 52px) 0 18px;}
.single-pick-poster-blur{
  position:absolute;inset:-48px;width:calc(100% + 96px);height:calc(100% + 96px);
  object-fit:cover;filter:blur(36px) saturate(.75);opacity:.42;transform:scale(1.08);
}
.single-pick-poster{
  position:relative;z-index:3;display:block;height:100%;max-height:420px;max-width:62%;
  aspect-ratio:2/3;object-fit:cover;border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.single-pick-media-empty{display:grid;place-items:center;color:var(--af-text-tertiary);font-size:13px;}
.single-pick-media-empty>span{position:relative;z-index:1;}
.single-pick-back-slot{position:absolute;z-index:5;top:calc(var(--safe-top) + 8px);left:12px;}
.single-pick-back-slot .back{
  width:40px;height:40px;margin:0;border:0;border-radius:999px;
  background:rgba(5,5,5,.46);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.single-pick-corner{
  position:absolute;z-index:6;top:calc(var(--safe-top) + 8px);right:12px;
  display:flex;gap:8px;
}
.single-pick-icon,.single-pick-art-open{
  display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;
  background:rgba(5,5,5,.46);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.single-pick-icon svg,.single-pick-art-open svg{width:20px;height:20px;}
.single-pick-want[aria-pressed="true"]{background:var(--af-accent-solid);color:var(--af-on-accent);}
.single-pick-want[aria-pressed="true"] svg{fill:currentColor;}
/* Инструмент редакции — в углу кадра, рядом с «Хочу», и только у админа. */
.single-pick-art-open{position:absolute;z-index:7;top:calc(var(--safe-top) + 8px);right:60px;}
.single-pick-visual:not(:has(.single-pick-want)) .single-pick-art-open{right:12px;}
.single-pick-art-panel{
  position:absolute;z-index:8;right:10px;bottom:10px;left:10px;display:grid;gap:10px;
  padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:17px;
  background:rgba(14,15,21,.96);color:#fff;text-align:left;
  box-shadow:0 18px 42px rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.single-pick-art-panel[hidden]{display:none;}
.single-pick-art-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.single-pick-art-head b{font-size:13px;}
.single-pick-art-head button{
  width:30px;height:30px;border:0;background:transparent;color:var(--ink-2);font-size:22px;
}
.single-pick-art-segments{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.single-pick-art-segments button,.single-pick-art-actions button,
.single-pick-art-poster-panel>button{
  min-height:38px;padding:7px 9px;border:1px solid rgba(255,255,255,.11);
  border-radius:11px;background:rgba(255,255,255,.04);color:#fff;
  font:620 11.5px/1.2 var(--font);
}
.single-pick-art-segments button[aria-pressed="true"]{
  border-color:rgba(var(--af-accent-rgb),.65);background:rgba(var(--af-accent-rgb),.18);color:var(--af-text-primary);
}
.single-pick-art-panel label{display:grid;gap:4px;color:var(--ink-2);font-size:10.5px;}
.single-pick-art-panel input[type="range"]{width:100%;accent-color:var(--accent);}
.single-pick-art-panel input:disabled{opacity:.38;}
.single-pick-art-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.single-pick-art-poster-panel>button:first-of-type{color:#ff8aa0;}
.single-pick-hero-content{
  position:relative;z-index:3;min-width:0;margin-top:-28px;padding:0 20px 14px;
}
.single-pick-label{
  display:flex;gap:8px;align-items:baseline;min-width:0;margin:0 0 8px;overflow:hidden;
  color:var(--af-text-tertiary);font-size:11px;font-weight:650;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.single-pick-label>span:first-child{overflow:hidden;text-overflow:ellipsis;}
.single-pick-progress{flex:none;color:var(--af-text-secondary);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.single-pick-progress::before{content:"·";margin-right:8px;color:var(--af-text-tertiary);}
.single-pick-title{
  display:-webkit-box;overflow:hidden;margin:0;color:var(--af-text-primary);
  font-size:clamp(26px,7.6vw,34px);font-weight:700;line-height:1.05;letter-spacing:-.03em;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.single-pick-original{
  overflow:hidden;margin:4px 0 0;color:var(--af-text-tertiary);
  font-size:13.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;
}
.single-pick-meta{
  display:flex;flex-wrap:wrap;gap:4px 7px;align-items:baseline;margin:10px 0 0;
  color:var(--af-text-secondary);font-size:13.5px;line-height:1.35;
}
.single-pick-meta i{font-style:normal;color:var(--af-text-tertiary);}
.single-pick-rating{color:var(--af-provider-rating);font-weight:650;font-variant-numeric:tabular-nums;}
.single-pick-reason{
  overflow:hidden;margin:8px 0 0;color:var(--af-text-primary);opacity:.82;
  font-size:13px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap;
}
.single-pick-plot{
  display:-webkit-box;overflow:hidden;margin:10px 0 0;color:var(--af-text-secondary);
  font-size:14px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:3;
}
.single-pick-plot.is-open{display:block;max-height:34dvh;overflow:auto;}
.single-pick-more{
  margin:2px 0 0;padding:4px 0;border:0;background:none;color:var(--af-text-primary);
  font:600 13.5px/1.2 var(--font);cursor:pointer;
}
.single-pick-more[hidden]{display:none;}
.single-pick-actions{display:grid;gap:4px;min-width:0;margin:0;padding:0 16px;}
.single-pick-main-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:10px;}
.single-pick-main-row>:only-child{grid-column:1 / -1;}
.single-pick-primary,.single-pick-alternate{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:0;min-height:52px;margin:0;padding:0 14px;border-radius:16px;
  font:650 15px/1.1 var(--font);cursor:pointer;
}
.single-pick-primary{border:0;background:var(--af-accent-solid);color:var(--af-on-accent);}
.single-pick-alternate{border:0;background:var(--s2);color:var(--af-text-primary);}
.single-pick-alternate svg{flex:none;width:19px;height:19px;}
.single-pick-quiet-row{
  display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;
}
.single-pick-quiet-row i{font-style:normal;color:var(--af-text-tertiary);}
.single-pick-secondary,.single-pick-danger{
  min-height:40px;padding:0 8px;border:0;background:none;
  color:var(--af-text-secondary);font:560 14px/1.2 var(--font);cursor:pointer;
}
.single-pick-primary:disabled,.single-pick-alternate:disabled,
.single-pick-secondary:disabled,.single-pick-danger:disabled{opacity:.5;}
.single-pick-card.is-refreshing{cursor:progress;opacity:.72;transition:opacity .15s ease;}
/* Подтверждение с «Вернуть»: над кнопками, одной строкой, пропадает само. */
.single-pick-toast{
  position:fixed;z-index:40;left:50%;bottom:calc(var(--safe-bottom) + 126px);
  display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);
  padding:11px 12px 11px 16px;border-radius:14px;background:var(--s3);
  color:var(--af-text-primary);font:560 14px/1.25 var(--font);
  box-shadow:0 12px 32px rgba(0,0,0,.45);transform:translateX(-50%);
  animation:single-pick-fade .2s ease both;
}
.single-pick-toast button{
  flex:none;min-height:32px;padding:0 6px;border:0;background:none;
  color:var(--af-text-primary);font:700 14px/1 var(--font);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}
/* Загрузка — тот же макет. */
.single-pick-skeleton{grid-template-rows:minmax(0,1fr) auto auto;}
.single-pick-skeleton-media{background:var(--s1);}
.single-pick-skeleton .single-pick-hero-content{display:grid;gap:10px;margin-top:18px;}
.single-pick-skeleton .sk-line{display:block;height:13px;margin:0;border-radius:7px;background:var(--s2);width:70%;}
.single-pick-skeleton .sk-line.is-short{width:34%;height:10px;}
.single-pick-skeleton .sk-line.is-title{width:82%;height:28px;}
.single-pick-skeleton .sk-line.is-button{width:100%;height:52px;border-radius:16px;}
.single-pick-skeleton-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.single-pick-state-screen{display:grid;grid-template-rows:1fr;place-items:center;padding:0 20px;}
.single-pick-state-wrap{display:grid;justify-items:center;gap:18px;width:min(100%,320px);}
.single-pick-state-copy{color:var(--af-text-secondary);font-size:14px;text-align:center;}
.single-pick-state-copy.is-error{max-width:300px;color:var(--af-danger);line-height:1.45;}
.single-pick-recovery-copy{display:grid;gap:8px;text-align:center;}
.single-pick-recovery-copy h1{margin:0;color:var(--af-text-primary);font-size:22px;line-height:1.18;}
.single-pick-recovery-copy p{margin:0;color:var(--af-text-secondary);font-size:14px;line-height:1.45;}
.single-pick-recovery{display:grid;gap:9px;width:min(100%,260px);}
.single-pick-recovery button{width:100%;min-height:50px;border-radius:16px;}
.single-pick-recovery .single-pick-secondary{background:var(--s2);color:var(--af-text-primary);}
.picker-empty-actions{display:grid;gap:9px;margin-top:18px;}
.single-pick-flow-controls{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);}
.single-pick-flow-controls>b{font-size:12px;color:var(--ink-2);}
@media(max-width:360px){
  .single-pick-hero-content{padding:0 16px 12px;}
  .single-pick-actions{padding:0 12px;}
  .single-pick-primary,.single-pick-alternate{font-size:14px;}
}
@media(max-height:700px){
  .single-pick-original{display:none;}
  .single-pick-plot{-webkit-line-clamp:2;}
  .single-pick-primary,.single-pick-alternate{min-height:48px;}
}
@media(max-height:620px){
  .single-pick-reason{display:none;}
  .single-pick-plot{-webkit-line-clamp:1;}
  .single-pick-title{font-size:24px;}
}
.settings-attribution{margin:4px 6px 0;color:var(--ink-2);opacity:.5;}
.settings-attribution-link{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;font-size:10.5px;line-height:1.25;text-decoration:none;}
.settings-attribution-link img{display:block;flex:none;width:50px;height:auto;}
.settings-attribution-link span{min-width:0;}
.account-deleted-screen{display:grid;min-height:calc(100vh - 80px);place-items:center;padding:24px;}
.account-deleted-screen .empty{max-width:320px;text-align:center;}
.account-deleted-screen .empty-icon{display:grid;width:52px;height:52px;margin:0 auto 14px;place-items:center;border-radius:50%;background:rgba(var(--accent-rgb),.15);color:var(--accent-2);font-size:28px;}

/* ── Режим подборки: превью и явное «показать все» ──────────────────────────
   Обычный поиск этих узлов больше не использует: у него одна поверхность
   результатов ниже. Здесь остаётся ровно то, что рисует режим подборки. */
.sg-surface{border:1px solid var(--hair-2);border-radius:16px;background:var(--s1);
  overflow:hidden;}
.sg-all{display:block;width:100%;min-height:48px;border:0;border-top:1px solid var(--hair-2);
  background:transparent;color:var(--accent-2);font:600 14px var(--font);cursor:pointer;}
.sg-all:active{background:var(--s2);}
/* Скелетон превью режима подборки. */
.sr-list{border:1px solid var(--hair-2);border-radius:16px;background:var(--s1);
  overflow:hidden;}
.sr-row{display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;
  border-bottom:1px solid var(--hair);}
.sr-row:last-child{border-bottom:0;}

/* ── Обычный поиск: одна непрерывная поверхность ─────────────────────────────
   СТЕКЛО — это управление: поле, тип, сортировка, вид. СОДЕРЖИМОЕ — это
   содержимое: постеры, названия, тонкие разделители. Ни карточки вокруг всего
   списка, ни стекла у каждой строки: иначе выдача читалась бы ещё одним
   элементом управления. Материал тише навигации — эти элементы живут в
   прокручиваемом содержимом, и размытия у них нет. */
.search-controls{margin:12px 20px 12px;display:flex;flex-direction:column;gap:8px;}
.search-scope{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  height:44px;border:1px solid rgba(255,255,255,.070);border-radius:22px;
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.055),rgba(255,255,255,.012) 60%,rgba(255,255,255,0) 72%),
             linear-gradient(180deg,rgba(22,24,29,.37),rgba(9,10,13,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.115),inset 0 -1px 0 rgba(0,0,0,.22);}
.search-scope-option{position:relative;z-index:1;min-width:0;height:42px;padding:0 6px;border:0;
  border-radius:20px;background:transparent;color:var(--af-text-secondary);
  font:600 13px var(--font);letter-spacing:-.012em;white-space:nowrap;cursor:pointer;
  touch-action:manipulation;transition:color .14s ease;}
.search-scope-label{display:block;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap;}
.search-scope-option.is-active{color:var(--nav-accent);}
/* ── Жидкое выделение типа и вида ────────────────────────────────────────────
   Та же модель, что у .discovery-tabs: выделением владеет общий движок
   AddictLiquidNav, а здесь — только ЗАПАСНАЯ капсула (первый кадр, нет WebGL2,
   отказ от движения, слабый клиент) и отступы оптической сцены. Кнопки
   остаются настоящими: в богатом режиме прячутся лишь подпись и значок, которые
   рисует холст. */
.search-scope-indicator,.search-view-indicator{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  pointer-events:none;transform:translate3d(0,0,0);transition:transform .24s var(--af-nav-ease);
  background:radial-gradient(110% 90% at 40% -20%,rgba(255,255,255,.14),rgba(255,255,255,.045) 45%,rgba(255,255,255,.018) 72%),
             linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.22);}
.search-scope-indicator{width:calc((100% - 6px) / 3);border-radius:19px;}
.search-scope[data-active-index="1"] .search-scope-indicator{transform:translate3d(100%,0,0);}
.search-scope[data-active-index="2"] .search-scope-indicator{transform:translate3d(200%,0,0);}
.search-view-indicator{width:calc((100% - 6px) / 2);border-radius:15px;}
.search-view-toggle[data-active-index="1"] .search-view-indicator{transform:translate3d(100%,0,0);}
.search-scope[data-liquid="on"] .search-scope-label,
.search-view-toggle[data-liquid="on"] .search-view-icon{opacity:0;}
.search-scope[data-liquid="on"] .search-scope-indicator,
.search-view-toggle[data-liquid="on"] .search-view-indicator{opacity:0;transition:none;}
/* Сцена типа — как у разделов главной: по вертикали постоянный запас под
   подъём, по горизонтали запас обрезан собственным полем переключателя, чтобы
   на 320px не появилась прокрутка документа. */
.search-scope .search-scope-liquid-stage{
  left:max(-18px,calc(2px - (100vw - 100%) / 2));
  right:max(-18px,calc(2px - (100vw - 100%) / 2));
  top:-14px;bottom:-14px;}
/* Вид — узкая капсула у правого поля: запас под подъём и колебание есть, а
   холст прозрачен всюду, кроме линзы, которая в покое лежит в своём слоте. */
.search-view-toggle .search-view-liquid-stage{left:-12px;right:-14px;top:-14px;bottom:-14px;}
.search-scope-option:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.50);outline-offset:-3px;}
.search-tools-row{display:flex;gap:8px;height:44px;}
/* Сортировка — ОДНО действие, поэтому движущейся линзы в ней нет: только тот
   же материал, что у острова и разделов главной (верхний блик, тихие римы,
   тёмная нижняя толщина, нейтральное тело), и касание, которое будит стекло. */
.search-sort-trigger{position:relative;isolation:isolate;overflow:hidden;
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;
  border:1px solid rgba(255,255,255,.082);border-radius:18px;
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.068) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 66%),
             linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:0 14px 34px -29px rgba(0,0,0,.94),
             inset 0 1px 0 rgba(255,255,255,.155),inset 1px 0 0 rgba(255,255,255,.025),
             inset -1px 0 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.25);
  color:rgba(239,241,246,.90);font:620 13px var(--font);letter-spacing:-.01em;
  cursor:pointer;touch-action:manipulation;transition:border-color .16s ease,transform .12s cubic-bezier(.2,.8,.2,1);}
/* Энергия касания: одна радиальная засветка в точке нажатия. Двигаются только
   opacity и transform — ни размытия, ни тени в кадре. */
.search-sort-trigger::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transform:scale(.92);
  background:radial-gradient(70px 56px at var(--press-x,50%) var(--press-y,50%),rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,transparent 80%);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1);}
.search-sort-trigger:active::after{opacity:1;transform:none;transition:opacity .06s ease,transform .12s cubic-bezier(.2,.8,.2,1);}
.search-sort-trigger[aria-expanded="true"]{border-color:rgba(255,255,255,.12);}
.search-sort-trigger:active{transform:scale(.988);}
.search-sort-trigger:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-2px;}
.search-sort-icon{flex:none;width:18px;height:18px;color:rgba(220,224,232,.72);}
.search-sort-current{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.search-sort-caret{flex:none;width:15px;height:15px;color:rgba(214,218,226,.70);transition:transform .16s cubic-bezier(.22,.85,.26,1);}
.search-sort-trigger[aria-expanded="true"] .search-sort-caret{transform:rotate(180deg);}
/* Меню сортировки берёт материал меню «Топа», но растёт от ЛЕВОГО края кнопки
   и без колонки значка: у сортировок значков нет. */
/* Меню поиска — больший кусок того же материала, что и кнопка: тело мягче и
   прозрачнее, чем у «Топа», римы те же. Правила — только для поиска: меню
   «Топа» принято и не меняется. Движутся лишь transform и opacity. */
.top-filter-menu.search-sort-menu{transform-origin:26px top;
  background:radial-gradient(125% 85% at 24% -18%,rgba(255,255,255,.080) 0%,rgba(255,255,255,.020) 42%,rgba(255,255,255,0) 68%),
             linear-gradient(180deg,rgba(22,24,29,.66) 0%,rgba(10,11,14,.78) 100%);
  border-color:rgba(255,255,255,.090);
  animation:searchSortMenuIn 200ms cubic-bezier(.20,.82,.22,1) both;}
.top-filter-menu.search-sort-menu.is-above{transform-origin:26px bottom;animation-name:searchSortMenuInAbove;}
.top-filter-menu.search-sort-menu.is-closing{animation:searchSortMenuOut 120ms cubic-bezier(.4,0,1,1) both;}
.top-filter-menu.search-sort-menu.is-above.is-closing{animation-name:searchSortMenuOutAbove;}
@keyframes searchSortMenuIn{
  0%{opacity:.72;transform:translateY(-3px) scale(.975);}
  68%{opacity:1;transform:translateY(0) scale(1.004);}
  100%{opacity:1;transform:none;}}
@keyframes searchSortMenuInAbove{
  0%{opacity:.72;transform:translateY(3px) scale(.975);}
  68%{opacity:1;transform:translateY(0) scale(1.004);}
  100%{opacity:1;transform:none;}}
@keyframes searchSortMenuOut{to{opacity:0;transform:translateY(-2px) scale(.985);}}
@keyframes searchSortMenuOutAbove{to{opacity:0;transform:translateY(2px) scale(.985);}}
.search-sort-menu .top-filter-item{grid-template-columns:minmax(0,1fr) 20px;}
/* Вид — два значка в одной капсуле: 92px вместо двух текстовых пилюль. */
.search-view-toggle{position:relative;isolation:isolate;flex:0 0 92px;display:grid;grid-template-columns:1fr 1fr;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.070);border-radius:18px;
  background:linear-gradient(180deg,rgba(22,24,29,.37),rgba(9,10,13,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.115),inset 0 -1px 0 rgba(0,0,0,.22);}
.search-view-option{position:relative;z-index:1;display:grid;place-items:center;height:42px;border:0;
  border-radius:17px;background:transparent;color:rgba(214,218,226,.62);cursor:pointer;
  touch-action:manipulation;transition:color .14s ease;}
.search-view-option.is-active{color:var(--nav-accent);}
.search-view-option:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.50);outline-offset:-3px;}
.search-view-icon{width:19px;height:19px;display:block;}

.search-content{min-height:0;}
.search-status-note{margin:0 20px 10px;color:rgba(181,186,198,.78);font-size:12.5px;line-height:1.35;}
.search-result-list{margin:0 20px;}
.search-result-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;min-height:88px;padding:8px 0;border:0;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;position:relative;}
/* Разделитель начинается после постера: линия отделяет тексты, а не картинки. */
.search-result-row::after{content:"";position:absolute;left:60px;right:0;bottom:0;height:1px;
  background:rgba(255,255,255,.050);}
.search-result-row:last-child::after{display:none;}
.search-result-row:active{opacity:.82;}
.search-result-row:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.50);outline-offset:2px;border-radius:12px;}
.search-result-poster{width:48px;aspect-ratio:2/3;border-radius:9px;overflow:hidden;
  border:1px solid rgba(255,255,255,.065);background:var(--s2);}
.search-result-poster img{display:block;width:100%;height:100%;object-fit:cover;}
.search-result-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
/* Длинное название переносится на вторую строку, а не режется многоточием. */
.search-result-title{color:rgba(247,248,251,.96);font-size:16px;line-height:1.22;font-weight:610;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;}
/* Набранный кусок — весом, без цветного маркера. */
.search-hit{background:none;padding:0;border-radius:0;color:inherit;font-weight:700;}
.search-result-meta{color:var(--af-text-secondary);font-size:12.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-result-aside{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;
  max-width:82px;}
/* «Просмотрено» — самый длинный статус — обязан помещаться целиком в 82px:
   при 10.5px и полях 7px он резался до «Просмотр…». */
.search-result-status{max-width:82px;padding:3px 6px;border:1px solid rgba(255,255,255,.10);border-radius:999px;
  color:rgba(214,218,226,.78);font-size:10px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-result-rating{display:inline-flex;align-items:center;gap:3px;color:rgba(214,218,226,.80);
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.search-result-rating .s{color:var(--af-provider-rating);}
.search-result-grid{padding:0;margin:0 20px;gap:20px 12px;}
/* 320px: три постера по ~85px делают названия нечитаемыми — две колонки. И
   самая длинная сортировка обязана поместиться в кнопку без многоточия. */
@media(max-width:340px){
  .search-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .search-sort-trigger{gap:6px;padding:0 10px;font-size:12.5px;letter-spacing:-.02em;}
}
.search-empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:28px 20px 0;text-align:center;}
.search-empty-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;
  color:rgba(214,218,226,.55);}
.search-empty-icon svg{width:22px;height:22px;}
.search-empty b{color:rgba(247,248,251,.94);font-size:15px;font-weight:600;}
.search-empty small{color:var(--af-text-secondary);font-size:12.5px;line-height:1.35;}
.search-skeleton-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;min-height:88px;}
.search-skeleton-thumb{width:48px;aspect-ratio:2/3;border-radius:9px;background:rgba(255,255,255,.045);}
.search-skeleton-lines{display:flex;flex-direction:column;gap:8px;}
.search-skeleton-lines i{display:block;width:70%;height:11px;border-radius:6px;background:rgba(255,255,255,.045);}
.search-skeleton-lines i:last-child{width:40%;height:9px;}
.search-skeleton-poster{display:block;aspect-ratio:2/3;border-radius:12px;background:rgba(255,255,255,.045);}
/* Пагинация — «показать ещё», а не новый поиск: нейтральное стекло, без
   фиолетового тела. */
.search-results .load-more{min-height:48px;margin:22px auto 8px;padding:0 22px;border:1px solid rgba(255,255,255,.082);
  border-radius:18px;background:linear-gradient(180deg,rgba(22,24,29,.44),rgba(9,10,13,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:var(--nav-accent);font:620 14px var(--font);}
@media (prefers-reduced-motion:reduce){
  .search-scope-option,.search-view-option,.search-scope-indicator,.search-view-indicator,
  .search-sort-trigger,.search-sort-trigger::after,.search-sort-caret{transition:none;}
  .search-sort-trigger:active{transform:none;}
  .search-sort-trigger:active::after{opacity:0;}
  .top-filter-menu.search-sort-menu,.top-filter-menu.search-sort-menu.is-closing{animation:none;}
}
/* Меньше прозрачности — плотный материал вместо оптики; подписи и значки
   обязаны вернуться видимыми поверх снятой жидкой сцены. */
@media (prefers-reduced-transparency: reduce){
  .search-scope,.search-view-toggle{background:rgba(15,16,20,.96);}
  .search-sort-trigger{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,19,23,.97);}
  .top-filter-menu.search-sort-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,16,20,.98);}
  .search-scope-liquid-stage,.search-view-liquid-stage{display:none;}
  .search-scope[data-liquid="on"] .search-scope-label,
  .search-view-toggle[data-liquid="on"] .search-view-icon{opacity:1;}
  .search-scope[data-liquid="on"] .search-scope-indicator,
  .search-view-toggle[data-liquid="on"] .search-view-indicator{opacity:1;}
}
/* Недавние запросы — посадочный экран поиска, а не приписка снизу. Поверхность
   одна, строки внутри неё; своего backdrop-filter здесь НЕТ намеренно: стекло
   уже держит поле ввода, а второй живой слой стоил бы кадров ровно во время
   набора текста. */
.search-recent{margin:16px 20px 0;animation:search-landing-in .18s cubic-bezier(.32,.72,0,1) both;}
.search-recent-head{display:flex;align-items:center;justify-content:space-between;min-height:38px;
  margin:0 2px 7px;color:rgba(222,225,234,.66);font-size:13px;font-weight:620;letter-spacing:-.01em;}
.search-recent-clear{min-height:38px;padding:0 2px;border:0;background:none;
  color:var(--nav-accent);font:600 13px var(--font);cursor:pointer;}
.search-recent-list{overflow:hidden;border:1px solid rgba(255,255,255,.065);border-radius:18px;
  background:linear-gradient(180deg,rgba(24,26,31,.42),rgba(11,12,16,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
             0 14px 30px -28px rgba(0,0,0,.95);}
.search-recent-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;
  padding:0 14px;border:0;border-bottom:1px solid rgba(255,255,255,.045);border-radius:0;
  background:transparent;color:rgba(246,247,250,.94);
  font:450 15px/1.2 var(--font);letter-spacing:-.01em;text-align:left;cursor:pointer;
  transition:background .14s ease, transform .12s cubic-bezier(.2,.8,.2,1);}
.search-recent-row:last-child{border-bottom:0;}
.search-recent-row:active{background:rgba(255,255,255,.045);transform:scale(.995);}
.search-recent-icon{flex:none;display:grid;place-items:center;width:20px;height:20px;
  color:rgba(222,225,234,.52);}
.search-recent-icon svg{display:block;width:18px;height:18px;}
.search-recent-query{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Подсказка вместо героя: человек уже нажал поиск, объяснять ему поиск во весь
   экран — значит занять место, на котором должна быть клавиатура. */
.search-start-compact{display:flex;align-items:center;gap:12px;margin:20px 20px 0;padding:13px 14px;
  border:1px solid rgba(255,255,255,.055);border-radius:18px;background:rgba(255,255,255,.018);
  animation:search-landing-in .18s cubic-bezier(.32,.72,0,1) both;}
.search-start-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:14px;
  background:rgba(var(--af-accent-rgb),.075);color:rgba(200,184,255,.82);}
.search-start-icon svg{width:18px;height:18px;}
.search-start-copy{display:flex;flex-direction:column;min-width:0;gap:3px;}
.search-start-copy b{color:rgba(247,248,251,.94);font-size:14px;font-weight:600;}
.search-start-copy small{color:rgba(181,186,198,.72);font-size:12px;line-height:1.35;}
.search-min-hint{margin:14px 20px 0;color:rgba(181,186,198,.70);font-size:12.5px;font-weight:450;
  animation:search-hint-in .14s ease both;}
/* Оживает только посадочный экран. Обновления подсказок и результатов идут
   часто, и анимировать каждое значило бы дёргать экран на каждой букве. */
@keyframes search-landing-in{from{opacity:.82;transform:translateY(4px);}to{opacity:1;transform:none;}}
@keyframes search-hint-in{from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:none;}}
/* Правило обязано стоять ПОСЛЕ объявлений выше: одинаковая специфичность
   решается порядком, и блок, стоящий раньше, просто проигрывал бы. */
@media (prefers-reduced-motion:reduce){
  .search-recent,.search-start-compact,.search-min-hint{animation:none;}
  .search-recent-row{transition:none;}
}
.search-loading-list{opacity:.72;}
.search-loading-row{cursor:default;}
.search-loading-poster{width:42px;aspect-ratio:2/3;border-radius:6px;background:var(--s2);}
.search-loading-lines{display:flex;flex:1;flex-direction:column;gap:8px;}
.search-loading-lines i{display:block;width:72%;height:10px;border-radius:6px;background:var(--s2);}
.search-loading-lines i:last-child{width:42%;height:8px;}

/* Набор КОММЕНТАРИЯ прячет панель вкладок: на iOS фиксированная панель не
   остаётся под клавиатурой, а всплывает НАД ней и съедает те самые полсотни
   пикселей, где человек и пишет. Прятать через transform/opacity нельзя:
   #tabbar проигрывает `rise` с fill-mode:both, и конечный кадр перебивает
   обычный каскад — поэтому display.

   ПОИСК это правило больше не разделяет. Навигация, исчезавшая на фокусе и
   возвращавшаяся по «Найти», была самым заметным скачком экрана, а уйти на
   вкладку прямо из набора человек хочет. Поиск живёт с обычным отступом. */
body.comment-typing #tabbar{display:none;}
body.comment-typing{--nav-clearance:16px;}
/* Значок режима администратора висит на bottom:92px — в той же зоне, что и
   панель, и всплывает над клавиатурой ровно так же. */
body.comment-typing .admin-indicator{display:none;}

/* ── Переход навигации в карточку фильма и обратно ───────────────────────────
   Здесь только МОТОРИКА: ни размеров, ни цветов, ни раскладки.

   Сцена приложения и постоянные элементы интерфейса получают собственные имена
   намеренно. Без них браузер кроссфейдит документ целиком — и панель вкладок,
   которая никуда не девается, мигала бы на каждом открытии карточки. С именем
   она становится собственной группой; анимацию у неё снимаем, и она просто
   стоит на месте.

   Общий постер имя получает временно, из JS, и только у того фильма, по
   которому человек нажал. */
#screen{view-transition-name:app-scene;}
#tabbar{view-transition-name:app-chrome;}
#top-scrim{view-transition-name:app-scrim;}

::view-transition-group(app-chrome),::view-transition-group(app-scrim){animation:none;}
::view-transition-old(app-chrome),::view-transition-new(app-chrome),
::view-transition-old(app-scrim),::view-transition-new(app-scrim){animation:none;mix-blend-mode:normal;}

/* Сцена: короткая смена с крошечным сдвигом. Не зум, не размытие, не пружина —
   ощущение перехода даёт общий постер, а сцена лишь не мешает ему. */
@keyframes vt-scene-forward-out{to{opacity:0;transform:translateY(-2px);}}
@keyframes vt-scene-forward-in{from{opacity:0;transform:translateY(4px);}}
@keyframes vt-scene-backward-out{to{opacity:0;transform:translateY(4px);}}
@keyframes vt-scene-backward-in{from{opacity:0;transform:translateY(-2px);}}
::view-transition-old(app-scene),::view-transition-new(app-scene){animation:none;}
html[data-nav-direction="forward"]::view-transition-old(app-scene){animation:vt-scene-forward-out .12s ease-in both;}
html[data-nav-direction="forward"]::view-transition-new(app-scene){animation:vt-scene-forward-in .18s cubic-bezier(.2,.8,.2,1) both;}
html[data-nav-direction="backward"]::view-transition-old(app-scene){animation:vt-scene-backward-out .14s ease-in both;}
html[data-nav-direction="backward"]::view-transition-new(app-scene){animation:vt-scene-backward-in .18s cubic-bezier(.2,.8,.2,1) both;}
/* Обложка летит одна поверх обеих сцен. */
::view-transition-group(movie-poster){z-index:5;animation-duration:.25s;
  animation-timing-function:cubic-bezier(.22,.8,.2,1);}
::view-transition-image-pair(movie-poster){isolation:auto;}
::view-transition-old(movie-poster),::view-transition-new(movie-poster){
  animation:none;mix-blend-mode:normal;height:100%;object-fit:cover;}

@media (prefers-reduced-motion:reduce){
  /* Движение отключено — переход не запускается вовсе (см. runNavTransition),
     но если браузер начнёт его по своей инициативе, анимации быть не должно. */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}

/* ── Комментарии ──────────────────────────────────────────────────────────
   Плоско и компактно, как в привычных лентах: ни карточки вокруг каждой
   реплики, ни оценки внутри неё, ни постоянных кнопок «Пожаловаться». Всё
   вторичное живёт в меню `⋯`. Только существующие токены темы. */
.d-comments{margin-top:30px;}
.d-comments-head{margin-bottom:14px;}
.d-comments-head h2{font-size:17px;font-weight:600;}
.d-comments-count{color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;}

.d-comment-form{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px;}
.d-comment-input-wrap{position:relative;flex:1 1 auto;min-width:0;}
.d-comment-input{
  width:100%;box-sizing:border-box;resize:none;
  min-height:44px;max-height:108px;padding:11px 14px;
  border:1px solid var(--hair);border-radius:22px;background:var(--s1);
  color:var(--ink);font:inherit;font-size:15px;line-height:1.35;
}
.d-comment-input::placeholder{color:var(--ink-2);}
.d-comment-input:focus{outline:none;border-color:var(--accent);}
.d-comment-limit{
  position:absolute;right:14px;bottom:-16px;
  font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.d-comment-send{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;
}
.d-comment-send svg{width:20px;height:20px;}
.d-comment-send:disabled{opacity:.38;cursor:default;}
.d-comment-error{margin:-8px 0 14px 54px;font-size:13px;color:#ff6b6b;}

.d-comments-list{display:flex;flex-direction:column;gap:18px;}
.d-comments-state{padding:18px 0;color:var(--ink-2);font-size:14px;}
.d-comments-state.error{color:#ff6b6b;}
.d-comments-more{
  align-self:flex-start;margin-top:2px;padding:10px 16px;min-height:44px;
  border:1px solid var(--hair);border-radius:14px;background:var(--s1);
  color:var(--ink);font:inherit;font-size:14px;cursor:pointer;
}

.d-comment-row{display:flex;align-items:flex-start;gap:10px;}
.d-comment-avatar{
  position:relative;flex:0 0 auto;width:36px;height:36px;overflow:hidden;
  border-radius:50%;background:var(--s2);display:grid;place-items:center;
  color:var(--ink-2);font-size:14px;font-weight:600;
}
.d-comment-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.d-comment-body{flex:1 1 auto;min-width:0;}
.d-comment-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;}
.d-comment-author{
  font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.d-comment-time{flex:0 0 auto;font-size:12px;color:var(--ink-2);}
/* Длинное слово без пробелов не имеет права растянуть карточку. */
.d-comment-text{
  font-size:14.5px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ── Страница персоны ───────────────────────────────────────────────────────
   Компактная шапка и сетка постеров. Никакой новой палитры: те же токены, что
   и у карточки фильма. Портрет НЕ растягивается в фон — у провайдера это
   маленькое изображение, и полноэкранная подложка из него выглядела бы
   размытым пятном. */
/* Верх страницы начинается ПОД системной областью и панелью Telegram. Экран
   просто не пользовался общим договором приложения: `--safe-top` уже собирает
   вырез устройства и высоту хромки Telegram (см. js/telegram.js), и все
   остальные экраны считают отступ от неё. Константы под конкретный iPhone
   здесь не нужны и были бы неверны на следующей модели. */
.person-v2{padding:calc(var(--safe-top) + 10px) 20px var(--nav-clearance);}
.p-hero{display:flex;gap:16px;align-items:flex-start;}
.p-portrait{position:relative;flex:0 0 132px;width:132px;aspect-ratio:360/549;
  overflow:hidden;border-radius:18px;background:var(--s2);border:1px solid var(--hair);}
.p-portrait .fb{position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;font-weight:600;color:var(--ink-2);}
.p-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.p-ident{min-width:0;flex:1;padding-top:2px;}
.p-ident h1{font-size:22px;font-weight:650;line-height:1.2;overflow-wrap:anywhere;}
.p-original{margin-top:4px;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere;}
.p-desc{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.p-facts{margin-top:10px;display:flex;flex-direction:column;gap:3px;}
.p-fact{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;}

.p-progress{margin-top:18px;}
.p-progress-label{font-size:13px;color:var(--ink-2);margin-bottom:7px;}
.p-progress-bar{height:4px;border-radius:99px;background:var(--s2);overflow:hidden;}
.p-progress-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.p-progress-note{margin-top:7px;font-size:12px;color:var(--ink-2);}

.p-films{margin-top:26px;}
.p-films-h h2{font-size:17px;font-weight:600;}
.p-films-h h2 span{color:var(--ink-2);font-weight:500;}
/* Ряд чипов прокручивается горизонтально: на 320px четыре подписи в строку не
   помещаются ни при каком размере шрифта, а перенос ломает ритм. */
.p-chips{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;
  padding:2px 20px;margin-left:-20px;margin-right:-20px;}
.p-chips::-webkit-scrollbar{display:none;}
.p-chip{flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:99px;
  border:1px solid var(--hair);background:var(--s1);color:var(--ink-2);
  font:500 13px var(--font);cursor:pointer;white-space:nowrap;}
.p-chip.is-on{background:var(--accent);border-color:transparent;color:var(--af-on-accent);}
.p-menus{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.p-select{display:inline-flex;min-width:0;}
.p-select select{max-width:100%;min-height:34px;padding:0 26px 0 12px;border-radius:10px;
  border:1px solid var(--hair);background:var(--s1);color:var(--ink);
  font:500 13px var(--font);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

.p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;margin-top:16px;}
.p-card{display:block;min-width:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;}
.p-card:active{transform:scale(.97);}
.p-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:12px;
  overflow:hidden;background:var(--s2);border:1px solid var(--hair);}
.p-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.p-rating{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:6px;
  background:rgba(10,10,12,.78);color:var(--ink);font:600 11px var(--font);}
.p-mark{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:99px;
  display:grid;place-items:center;font-size:11px;line-height:1;
  background:rgba(10,10,12,.78);color:var(--ink);}
.p-mark.is-watched{color:var(--accent);}
/* «Хочу» было белым и читалось как случайный значок. Тот же акцент, что и у
   просмотренного, только приглушённый: это отметка, а не предупреждение. */
.p-mark.is-want{color:var(--accent-2);opacity:.92;}
.p-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px;}
.p-chip:focus-visible,.p-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.p-title{margin-top:7px;font-size:12.5px;line-height:1.25;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.p-year{margin-top:2px;font-size:11.5px;color:var(--ink-2);}
.p-card.is-skeleton{pointer-events:none;}
.p-card.is-skeleton .p-poster{opacity:.5;}
.p-empty{grid-column:1/-1;padding:26px 0;text-align:center;font-size:13.5px;color:var(--ink-2);}
.p-more-wrap{display:flex;justify-content:center;margin-top:18px;}
.p-more{min-height:44px;padding:0 22px;border-radius:12px;border:1px solid var(--hair);
  background:var(--s1);color:var(--ink);font:500 14px var(--font);cursor:pointer;}

/* Карточка актёра стала кнопкой — сбрасываем родное оформление, чтобы рельс
   выглядел ровно так же, как раньше. */
/* `min-width:0` здесь обязателен. У flex-элемента `min-width` по умолчанию
   `auto`, то есть «не уже своего содержимого». У <div> внутренний
   `overflow:hidden` обнулял этот вклад, а <button> — независимый контекст
   форматирования и считает свой минимум сам: карточка переставала быть ровно
   84px и разъезжалась на доли пикселя. */
.d-cast-item.is-linked{padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:inherit;cursor:pointer;min-width:0;}
.d-cast-item.is-linked:active{transform:scale(.96);}
@media (prefers-reduced-motion:reduce){
  .p-card:active,.d-cast-item.is-linked:active{transform:none;}
}
@media(max-width:360px){
  .p-portrait{flex-basis:110px;width:110px;}
  .p-ident h1{font-size:20px;}
  .p-grid{gap:12px 8px;}
}

/* Метка развёртывания. Присутствует только на небоевых средах: её задача —
   чтобы снимок экрана нельзя было спутать с боевым (DEV-предпросмотр и staging
   ходят через один и тот же бот и внешне неотличимы). Не перехватывает
   касания: диагностика не имеет права мешать пользоваться приложением. */
#env-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: 6px;
  z-index: 9999;
  padding: 2px 7px;
  border-radius: 6px;
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(196, 38, 38, .92);
  pointer-events: none;
  user-select: none;
}

/* ── Поиск: один снимок выдачи ───────────────────────────────────────────────
   Первый окончательный ответ на запрос входит ОДИН раз и едва заметно; смена
   сортировки и типа переставляет живые узлы без анимации всей выдачи; при
   догрузке мягко проявляются только новые узлы. */
@keyframes search-commit-enter{from{opacity:.94;transform:translateY(2px);}to{opacity:1;transform:none;}}
@keyframes search-node-enter{from{opacity:.4;}to{opacity:1;}}
.search-commit-enter{animation:search-commit-enter 130ms cubic-bezier(.2,.7,.2,1) both;}
.search-node-enter{animation:search-node-enter 100ms ease-out both;}
@media (prefers-reduced-motion:reduce){.search-commit-enter,.search-node-enter{animation:none;}}

/* ── Личная библиотека: «Хочу посмотреть» и «Смотрел» ──────────────────────
   Содержимое — постеры и строки — остаётся тихим; стекло только у управления.
   Выделение типа и вида ведёт общий движок AddictLiquidNav: здесь лишь
   запасные капсулы, отступы оптической сцены и материал кнопок, меню и листа
   фильтров. Движутся только transform и opacity. */
.library-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;
  padding-top:calc(var(--safe-top) + 8px);padding-bottom:8px;}
.library-count{color:var(--ink-2);font-size:13px;font-weight:500;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;min-height:17px;}
.library-controls{margin:0 20px 12px;display:flex;flex-direction:column;gap:7px;}
.library-type,.library-view-toggle{position:relative;isolation:isolate;display:grid;height:44px;
  border:1px solid rgba(255,255,255,.082);
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.068) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 66%),
             linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  box-shadow:0 14px 34px -29px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.155),
             inset 1px 0 0 rgba(255,255,255,.025),inset -1px 0 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.25);}
.library-type{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:22px;}
.library-type-option,.library-view-option{position:relative;z-index:1;min-width:0;height:42px;border:0;
  background:transparent;cursor:pointer;touch-action:manipulation;transition:color .14s ease;}
.library-type-option{padding:0 6px;border-radius:20px;color:var(--af-text-secondary);
  font:600 13px var(--font);letter-spacing:-.012em;white-space:nowrap;}
.library-type-label{display:block;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap;}
.library-type-option.is-active,.library-view-option.is-active{color:var(--nav-accent);}
.library-type-option:focus-visible,.library-view-option:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.50);outline-offset:-3px;}
.library-type-indicator,.library-view-indicator{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  pointer-events:none;transform:translate3d(0,0,0);transition:transform .24s var(--af-nav-ease);
  background:radial-gradient(110% 90% at 40% -20%,rgba(255,255,255,.14),rgba(255,255,255,.045) 45%,rgba(255,255,255,.018) 72%),
             linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.22);}
.library-type-indicator{width:calc((100% - 6px) / 3);border-radius:19px;}
.library-type[data-active-index="1"] .library-type-indicator{transform:translate3d(100%,0,0);}
.library-type[data-active-index="2"] .library-type-indicator{transform:translate3d(200%,0,0);}
.library-view-toggle{flex:0 0 92px;grid-template-columns:1fr 1fr;border-radius:18px;}
.library-view-option{display:grid;place-items:center;border-radius:17px;color:rgba(214,218,226,.62);}
.library-view-icon{width:19px;height:19px;display:block;}
.library-view-indicator{width:calc((100% - 6px) / 2);border-radius:15px;}
.library-view-toggle[data-active-index="1"] .library-view-indicator{transform:translate3d(100%,0,0);}
.library-type[data-liquid="on"] .library-type-label,
.library-view-toggle[data-liquid="on"] .library-view-icon{opacity:0;}
.library-type[data-liquid="on"] .library-type-indicator,
.library-view-toggle[data-liquid="on"] .library-view-indicator{opacity:0;transition:none;}
.library-type .library-type-liquid-stage{
  left:max(-18px,calc(2px - (100vw - 100%) / 2));
  right:max(-18px,calc(2px - (100vw - 100%) / 2));
  top:-14px;bottom:-14px;}
.library-view-toggle .library-view-liquid-stage{left:-12px;right:-14px;top:-14px;bottom:-14px;}
.library-tools-row{display:flex;gap:8px;height:44px;min-width:0;}
.library-sort-trigger,.library-filter-trigger{position:relative;isolation:isolate;overflow:hidden;height:44px;
  border:1px solid rgba(255,255,255,.082);
  background:radial-gradient(120% 90% at 24% -35%,rgba(255,255,255,.068) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 66%),
             linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:0 14px 34px -29px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.155),
             inset 1px 0 0 rgba(255,255,255,.025),inset -1px 0 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.25);
  color:rgba(239,241,246,.90);cursor:pointer;touch-action:manipulation;
  transition:border-color .16s ease,transform .12s cubic-bezier(.2,.8,.2,1);}
.library-sort-trigger{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 13px;border-radius:18px;
  font:620 13px var(--font);letter-spacing:-.01em;}
.library-sort-trigger::after,.library-filter-trigger::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transform:scale(.92);
  background:radial-gradient(70px 56px at var(--press-x,50%) var(--press-y,50%),rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,transparent 80%);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1);}
.library-sort-trigger:active::after,.library-filter-trigger:active::after{opacity:1;transform:none;transition:opacity .06s ease,transform .12s ease;}
.library-sort-trigger:active,.library-filter-trigger:active{transform:scale(.988);}
.library-sort-trigger[aria-expanded="true"]{border-color:rgba(255,255,255,.12);}
.library-sort-trigger:focus-visible,.library-filter-trigger:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-2px;}
.library-sort-icon{flex:none;width:18px;height:18px;color:rgba(220,224,232,.72);}
.library-sort-current{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.library-sort-caret{flex:none;width:15px;height:15px;color:rgba(214,218,226,.70);transition:transform .16s cubic-bezier(.22,.85,.26,1);}
.library-sort-trigger[aria-expanded="true"] .library-sort-caret{transform:rotate(180deg);}
.library-filter-trigger{flex:0 0 44px;width:44px;display:grid;place-items:center;padding:0;border-radius:16px;overflow:visible;}
.library-filter-icon{width:20px;height:20px;display:block;color:rgba(226,230,238,.80);}
.library-filter-trigger.has-filters .library-filter-icon{color:var(--nav-accent);}
/* Активные фильтры — маленький счётчик, а не фиолетовая кнопка. */
.library-filter-badge{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  display:grid;place-items:center;background:var(--nav-accent);color:#0d0e12;font:700 9.5px/1 var(--font);
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px rgba(10,11,14,.9);}
.library-filter-badge[hidden]{display:none;}
/* Меню сортировки — больший кусок того же материала. Меню «Топа» и поиска не
   трогаются: правила только для библиотеки. */
.top-filter-menu.library-sort-menu{transform-origin:26px top;
  background:radial-gradient(125% 85% at 24% -18%,rgba(255,255,255,.080) 0%,rgba(255,255,255,.020) 42%,rgba(255,255,255,0) 68%),
             linear-gradient(180deg,rgba(22,24,29,.66) 0%,rgba(10,11,14,.78) 100%);
  border-color:rgba(255,255,255,.090);
  animation:librarySortMenuIn 200ms cubic-bezier(.20,.82,.22,1) both;}
.top-filter-menu.library-sort-menu.is-above{transform-origin:26px bottom;animation-name:librarySortMenuInAbove;}
.top-filter-menu.library-sort-menu.is-closing{animation:librarySortMenuOut 120ms cubic-bezier(.4,0,1,1) both;}
.library-sort-menu .top-filter-item{grid-template-columns:minmax(0,1fr) 20px;}
@keyframes librarySortMenuIn{0%{opacity:.72;transform:translateY(-3px) scale(.975);}
  68%{opacity:1;transform:translateY(0) scale(1.004);}100%{opacity:1;transform:none;}}
@keyframes librarySortMenuInAbove{0%{opacity:.72;transform:translateY(3px) scale(.975);}
  68%{opacity:1;transform:translateY(0) scale(1.004);}100%{opacity:1;transform:none;}}
@keyframes librarySortMenuOut{to{opacity:0;transform:translateY(-2px) scale(.985);}}
/* Лист фильтров — модальная поверхность того же стекла. Сеть — только по
   «Применить». */
.library-filter-overlay{position:fixed;inset:0;z-index:80;}
.library-filter-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52);
  animation:libraryFade .18s ease both;}
/* Лист фильтров V3: СТЕКЛО — только сам лист. Внутри обычное сгруппированное
   содержимое: одна тихая подложка группы, волосяные разделители, без карточек и
   размытия у строк. Шапка — навигация «Сбросить · Фильтры · Готово»; большой
   кнопки применения нет. Высота — по содержимому; только жанры могут вырасти. */
.library-filter-sheet{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;max-height:calc(100% - 48px);overflow:hidden;
  padding:0 20px calc(16px + var(--safe-bottom));border-radius:28px 28px 0 0;
  border:1px solid rgba(255,255,255,.09);border-bottom:0;
  background:radial-gradient(125% 60% at 24% -12%,rgba(255,255,255,.075) 0%,rgba(255,255,255,.018) 40%,rgba(255,255,255,0) 64%),
             linear-gradient(180deg,rgba(22,24,29,.84) 0%,rgba(10,11,14,.92) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.16);
  animation:librarySheetIn 240ms cubic-bezier(.20,.82,.22,1) both;}
.library-filter-sheet[data-page="genre"]{max-height:min(72dvh,680px,calc(100% - 48px));}
.library-filter-overlay.is-closing .library-filter-sheet{animation:librarySheetOut 170ms cubic-bezier(.4,0,1,1) both;}
.library-filter-overlay.is-closing .library-filter-backdrop{animation:libraryFadeOut 170ms ease both;}
@keyframes librarySheetIn{from{opacity:.85;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes librarySheetOut{to{opacity:0;transform:translateY(28px);}}
@keyframes libraryFade{from{opacity:0;}to{opacity:1;}}
@keyframes libraryFadeOut{to{opacity:0;}}
body.library-filter-lock{overflow:hidden;}
.library-filter-page{display:flex;flex-direction:column;min-height:0;}
.library-filter-page[hidden]{display:none;}
.library-filter-nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:52px;margin-top:4px;}
.library-filter-nav h2{margin:0;min-width:0;font-size:16px;font-weight:680;letter-spacing:-.015em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-filter-action{min-width:44px;height:44px;padding:0 4px;border:0;background:none;color:var(--nav-accent);
  font:600 15px var(--font);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
.library-filter-action.is-start{justify-self:start;text-align:left;}
.library-filter-action.is-end{justify-self:end;text-align:right;font-weight:680;}
.library-filter-action:disabled{color:rgba(200,205,215,.36);cursor:default;}
.library-filter-back{display:grid;place-items:center;width:44px;margin-left:-10px;color:rgba(232,235,242,.88);}
.library-filter-back-icon{width:18px;height:18px;display:block;transform:rotate(180deg);}
.library-filter-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 0 2px;}
/* Группа — одна тихая подложка и одна волосяная рамка. Строки прозрачные. */
.library-filter-group,.library-filter-choice-group{margin:0;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);}
.library-filter-row,.library-filter-choice{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;
  transition:background-color .12s ease;}
.library-filter-row{min-height:56px;padding:0 14px 0 16px;}
.library-filter-choice{min-height:50px;padding:0 16px;}
.library-filter-row + .library-filter-row::before,.library-filter-choice + .library-filter-choice::before{content:"";position:absolute;
  top:0;left:16px;right:16px;height:1px;background:rgba(255,255,255,.065);pointer-events:none;}
.library-filter-choice.is-lead + .library-filter-choice::before{left:0;right:0;background:rgba(255,255,255,.10);}
.library-filter-row:active,.library-filter-choice:active{background:rgba(255,255,255,.045);}
.library-filter-row:focus-visible,.library-filter-choice:focus-visible,.library-filter-action:focus-visible{
  outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-2px;border-radius:12px;}
.library-filter-row-label{flex:none;max-width:60%;font-size:15px;font-weight:600;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-filter-row-tail{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.library-filter-row-value{min-width:0;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-filter-row.is-active .library-filter-row-value{color:var(--nav-accent);}
.library-filter-row-chevron{flex:none;display:grid;place-items:center;color:rgba(200,205,215,.46);}
.library-filter-row-chevron svg{width:14px;height:14px;display:block;}
.library-filter-choice-label{flex:1;min-width:0;font-size:15px;font-weight:560;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-filter-choice[aria-checked="true"] .library-filter-choice-label{color:var(--nav-accent);font-weight:620;}
.library-filter-choice-check{flex:none;width:18px;height:18px;color:var(--nav-accent);}
.library-filter-choice-check svg{width:18px;height:18px;display:block;}
/* V4: жанры — флажки в том же плоском списке. Флажок — замыкающий маленький
   индикатор; заливка акцентом допустима только у него, строка не тонируется. */
.library-filter-hint{margin:0 4px 10px;color:var(--ink-2);font-size:12.5px;line-height:1.3;}
.library-filter-checkbox-row{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:50px;
  padding:0 16px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;
  touch-action:manipulation;transition:background-color .12s ease;}
.library-filter-checkbox-row + .library-filter-checkbox-row::before{content:"";position:absolute;top:0;left:16px;right:49px;
  height:1px;background:rgba(255,255,255,.065);pointer-events:none;}
.library-filter-checkbox-row:active{background:rgba(255,255,255,.045);}
.library-filter-checkbox-row:focus-visible,.library-month-cell:focus-visible,.library-month-year-button:focus-visible{
  outline:2px solid rgba(var(--af-accent-rgb),.55);outline-offset:-2px;border-radius:12px;}
.library-filter-checkbox{flex:none;margin-left:auto;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.02);color:#0d0e12;
  transition:background-color .12s ease,border-color .12s ease;}
.library-filter-checkbox svg{width:13px;height:13px;display:block;}
.library-filter-checkbox-row[aria-checked="true"] .library-filter-checkbox{background:var(--nav-accent);border-color:var(--nav-accent);}
.library-filter-checkbox-label{flex:1;min-width:0;font-size:15px;font-weight:560;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Строка «Другой месяц…» — переход внутри группы выбора. */
.library-filter-choice-route .library-filter-row-tail{flex:1;}
.library-filter-choice-route .library-filter-choice-label{flex:none;max-width:60%;}
.library-filter-choice-route.is-active .library-filter-row-value{color:var(--nav-accent);}
/* Выбор месяца: навигатор года и одна сетка 3×4 в одной группе. */
.library-month-picker{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);}
.library-month-year-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:48px;padding:2px 6px;
  border-bottom:1px solid rgba(255,255,255,.065);}
.library-month-year-button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;
  background:none;color:rgba(232,235,242,.88);cursor:pointer;}
.library-month-year-button svg{width:16px;height:16px;display:block;}
.library-month-year-button:disabled{color:rgba(200,205,215,.28);cursor:default;}
.library-month-year-label{text-align:center;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
.library-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.library-month-cell{position:relative;min-width:0;min-height:48px;padding:0 4px;border:0;background:transparent;
  color:var(--ink);font:560 14.5px var(--font);letter-spacing:-.01em;cursor:pointer;touch-action:manipulation;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .12s ease,color .12s ease;}
.library-month-cell:not(:nth-child(3n))::after{content:"";position:absolute;top:10px;bottom:10px;right:0;width:1px;
  background:rgba(255,255,255,.055);pointer-events:none;}
.library-month-cell:nth-child(n+4)::before{content:"";position:absolute;top:0;left:10px;right:10px;height:1px;
  background:rgba(255,255,255,.055);pointer-events:none;}
.library-month-cell:active:not(:disabled){background:rgba(255,255,255,.045);}
.library-month-cell[aria-checked="true"]{color:var(--nav-accent);font-weight:650;background:rgba(255,255,255,.055);}
.library-month-cell.is-current:not([aria-checked="true"]){color:rgba(239,241,246,.96);font-weight:620;}
.library-month-cell:disabled{color:rgba(200,205,215,.28);cursor:default;}
/* Переход между страницами одного листа: сдвиг и прозрачность. */
.library-filter-page.is-entering{animation:libraryPageIn 180ms cubic-bezier(.20,.82,.22,1) both;}
.library-filter-page.is-entering.is-back{animation-name:libraryPageBack;}
@keyframes libraryPageIn{from{opacity:.55;transform:translateX(16px);}to{opacity:1;transform:none;}}
@keyframes libraryPageBack{from{opacity:.55;transform:translateX(-16px);}to{opacity:1;transform:none;}}
/* Вид «Список»: плоское содержимое, разделитель начинается после постера. */
.library-results[aria-busy="true"] .load-more{opacity:.58;}
.library-list{margin:0 20px;}
.library-row{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:13px;
  width:100%;min-height:92px;padding:6px 0;border:0;background:none;color:var(--ink);text-align:left;
  cursor:pointer;touch-action:manipulation;}
.library-row::after{content:"";position:absolute;left:67px;right:0;bottom:0;height:1px;background:var(--hair);}
.library-row:last-child::after{display:none;}
.library-row:active .library-row-poster{transform:scale(.97);}
.library-row:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:2px;border-radius:12px;}
.library-row-poster{position:relative;display:block;width:54px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0a0b0d);border:1px solid var(--hair);transition:transform .1s ease;}
.library-row-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.library-row-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.library-row-title{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.library-row-alt,.library-row-meta{color:var(--ink-2);font-size:12.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-row-meta{font-variant-numeric:tabular-nums;}
.library-row-aside{align-self:center;}
.library-row-rating{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;
  font-size:12.5px;font-weight:650;color:var(--ink);background:rgba(255,255,255,.05);font-variant-numeric:tabular-nums;}
.library-row-rating .s{color:#F4B740;font-size:11px;line-height:1;}
@media(max-width:340px){
  .library-controls{margin-left:16px;margin-right:16px;}
  .library-list{margin-left:16px;margin-right:16px;}
  .library-type-option{font-size:12px;padding-inline:2px;}
  .library-sort-trigger{gap:6px;padding:0 10px;font-size:12.5px;letter-spacing:-.02em;}
  .library-sort-icon{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .library-type-option,.library-view-option,.library-type-indicator,.library-view-indicator,
  .library-sort-trigger,.library-filter-trigger,.library-sort-trigger::after,.library-filter-trigger::after,
  .library-sort-caret,.library-row-poster,.library-filter-row,.library-filter-choice,
  .library-filter-checkbox-row,.library-filter-checkbox,.library-month-cell{transition:none;}
  .library-filter-page.is-entering{animation:none;}
  .library-sort-trigger:active,.library-filter-trigger:active,.library-row:active .library-row-poster{transform:none;}
  .top-filter-menu.library-sort-menu,.top-filter-menu.library-sort-menu.is-closing,
  .library-filter-sheet,.library-filter-backdrop,.library-filter-overlay.is-closing .library-filter-sheet,
  .library-filter-overlay.is-closing .library-filter-backdrop{animation:none;}
}
@media (prefers-reduced-transparency: reduce){
  .library-type,.library-view-toggle{background:rgba(15,16,20,.96);}
  .library-sort-trigger,.library-filter-trigger{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,19,23,.97);}
  .top-filter-menu.library-sort-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,16,20,.98);}
  .library-filter-sheet{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,16,20,.99);}
  .library-type-liquid-stage,.library-view-liquid-stage{display:none;}
  .library-type[data-liquid="on"] .library-type-label,
  .library-view-toggle[data-liquid="on"] .library-view-icon{opacity:1;}
  .library-type[data-liquid="on"] .library-type-indicator,
  .library-view-toggle[data-liquid="on"] .library-view-indicator{opacity:1;}
}

/* ── Профиль V5: «Все» и полный рейтинг людей ────────────────────────────────
   Витрина показывает двенадцать крупных портретов — этого достаточно, чтобы
   увидеть своё кино, и мало, чтобы считать это пределом. Полный список живёт
   отдельным экраном: там важен ПОРЯДОК и доступность любого места, поэтому
   строка, а не плитка. Сто тридцать семь карточек по 160px не листает никто. */
.p5-section-head-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.p5-section-head-row > div { min-width:0; }
.p5-people-all {
  flex:0 0 auto;
  min-height:32px;
  margin-top:2px;
  padding:6px 2px;
  border:0;
  background:transparent;
  color:var(--af-accent);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}
.p5-people-all:focus-visible { outline:2px solid var(--af-accent); outline-offset:2px; border-radius:8px; }

.p5-people-list { margin:4px var(--p4-inset) 0; }
.p5-people-row {
  display:grid;
  grid-template-columns:26px 64px minmax(0, 1fr) 14px;
  align-items:center;
  gap:12px;
  width:100%;
  padding:8px 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.055);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.p5-people-row:first-child { border-top:0; }
.p5-people-row:active { opacity:.85; }
.p5-people-row:focus-visible { outline:2px solid var(--af-accent); outline-offset:-2px; border-radius:12px; }
.p5-people-rank {
  color:var(--af-text-tertiary, var(--ink-2));
  font-size:14px;
  font-weight:680;
  font-variant-numeric:tabular-nums;
}
/* Портрет здесь меньше, чем в витрине, и это осознанно: в списке он опознаёт
   человека, а не несёт секцию. */
.p5-people-photo {
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  aspect-ratio:4 / 5;
  border:1px solid var(--hair);
  border-radius:12px;
  background:linear-gradient(160deg,#15171b,#0a0b0d);
  overflow:hidden;
}
.p5-people-photo img {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 27%;
}
.p5-people-photo img.person-photo-safe-fit { object-fit:contain; object-position:center center; }
.p5-people-photo .fb {
  color:var(--af-text-secondary, var(--ink-2));
  font-size:15px;
  font-weight:600;
}
.p5-people-photo img.ready ~ .fb { opacity:0; }
.p5-people-copy { min-width:0; }
.p5-people-copy b {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.015em;
}
.p5-people-copy small {
  display:block;
  margin-top:3px;
  color:var(--ink-2);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.p5-people-chevron { color:var(--af-text-tertiary, var(--ink-2)); font-size:18px; }
.p5-people-more {
  margin:14px var(--p4-inset) 0;
  color:var(--ink-2);
  font-size:12.5px;
  text-align:center;
}

/* ── Профиль V6: живая витрина ──────────────────────────────────────────────
   ОДИН ЯЗЫК С ГЛАВНОЙ. Фон — почти чёрный, содержимое — тихий графит, границы
   — волосяные. Лавандовый — только состояние и навигация, голубой — оценки,
   цвет жанра — только знак и полоса своего жанра. Визуальное богатство дают
   постеры и лица, а не подсветка: свечений, цветных стёкол и размытых ореолов
   здесь нет. Живое стекло — ровно у двух переключателей разделов. */

/* История: каждая величина — отдельная карточка одного материала.
   Одна большая поверхность с внутренними линиями читалась как таблица, и было
   непонятно, что из четырёх чисел нажимается. Теперь это одна сетка 2×2 из
   законченных блоков: верхняя пара — прожитое крупно, нижняя — действия.
   Материал тот же, что у карточек вкуса, — профиль не заводит второй язык
   поверхностей. Нажимаемое отличается СТРЕЛКОЙ и откликом, а не цветом. */
.profile-life { margin:0 0 28px; }
.profile-life .p5-section-head { margin-bottom:10px; }
.profile-life-grid,
.profile-life-extra {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;
  margin:0 var(--p4-inset);
}
.profile-life-extra { margin-top:8px; }
.profile-life-card {
  position:relative; min-width:0; margin:0;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(19,21,25,.6),rgba(10,11,14,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:inherit; font:inherit; text-align:left;
  -webkit-tap-highlight-color:transparent;
}
button.profile-life-card {
  cursor:pointer; touch-action:manipulation;
  transition:transform .1s ease, background-color .12s ease, border-color .12s ease;
}
/* Отклик — чуть светлее и чуть меньше под пальцем. Никакого свечения. */
button.profile-life-card:active {
  transform:scale(.985);
  background-color:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.1);
}
button.profile-life-card:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; }

/* Верхняя пара: одинаковые ширина и высота, число сверху, подпись сразу под
   ним. Подписи начинаются на одной линии, даже если одна переносится. */
.profile-life-card.is-primary {
  display:flex; flex-direction:column; align-items:flex-start;
  min-height:112px; padding:19px 18px 16px; border-radius:22px;
}
.profile-life-value {
  display:block; color:var(--ink); font-size:clamp(30px, 10vw, 42px); font-weight:640;
  letter-spacing:-.03em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* Четырёхзначные часы («≈1234 ч») — единственное длинное значение: ужимается
   ОНО, а не пара целиком. */
.profile-life-card.is-long .profile-life-value { font-size:clamp(24px, 7.6vw, 34px); }
.profile-life-label {
  display:block; margin-top:8px; padding-right:4px; color:var(--ink-2);
  font-size:13px; line-height:1.3;
}

/* Нижняя пара: значок, число и подпись в одну строку-кнопку. */
.profile-life-card.is-secondary {
  display:flex; align-items:center; gap:11px;
  min-height:72px; padding:14px 26px 14px 16px; border-radius:18px;
}
.profile-life-icon { flex:0 0 20px; width:20px; height:20px; color:var(--ink-2); }
.profile-life-icon svg { display:block; width:20px; height:20px; }
.profile-life-copy { display:flex; flex-direction:column; min-width:0; font-variant-numeric:tabular-nums; }
.profile-life-copy b { color:var(--ink); font-size:19px; font-weight:640; letter-spacing:-.02em; line-height:1.1; }
.profile-life-copy span {
  margin-top:3px; overflow:hidden; color:var(--ink-2); font-size:12.5px;
  line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
}

/* Стрелка — единственный признак «это ведёт дальше», и живёт она в ОДНОМ
   месте у всех карточек: в правом верхнем углу. По центру справа она съедала
   у узкой карточки ширину подписи («пересм…» на 320px). У часов её нет вовсе:
   рядом с нажимаемой карточкой статичная выглядит спокойной, а не сломанной. */
.profile-life-chevron {
  display:block; width:16px; height:16px; color:var(--af-text-tertiary, rgba(235,238,245,.36));
}
.profile-life-chevron svg { display:block; width:16px; height:16px; }
.profile-life-card .profile-life-chevron { position:absolute; top:16px; right:13px; }
.profile-life-card.is-secondary .profile-life-chevron { top:12px; right:11px; width:14px; height:14px; }
.profile-life-card.is-secondary .profile-life-chevron svg { width:14px; height:14px; }

/* Твои фильмы: та же лента и та же карточка, что на главной. */
.profile-films { margin:0 0 26px; }
.profile-films .p5-section-head { margin-bottom:8px; }
/* ОДИН СЕГМЕНТ НА ВЕСЬ ПРОФИЛЬ. «Лучшие / Недавние / Пересмотры» и
   «Жанры / Эпохи» — один и тот же элемент: живое стекло поверх настоящих
   кнопок, и честный индикатор под ними, когда стекла нет. Ширина следует за
   числом сегментов и упирается в поля страницы, а не выходит за них. */
.profile-segment {
  --segments:2;
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:repeat(var(--segments), minmax(0,1fr));
  width:min(calc(var(--segments) * 118px), calc(100% - var(--p4-inset) * 2));
  height:40px; margin:0 var(--p4-inset) 12px; border-radius:20px;
  border:1px solid rgba(255,255,255,.082);
  background:linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.25);
}
.profile-segment-option {
  position:relative; z-index:1; min-width:0; height:38px; padding:0 6px; border:0; border-radius:18px;
  background:transparent; color:var(--af-text-secondary,var(--ink-2)); font:600 13.5px var(--font);
  letter-spacing:-.01em; cursor:pointer; touch-action:manipulation; transition:color .14s ease;
}
.profile-segment-option.is-active { color:var(--nav-accent,var(--af-accent)); }
.profile-segment-option:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.5); outline-offset:-3px; }
.profile-segment-label { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip; }
.profile-segment-indicator {
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--segments));
  border-radius:17px; pointer-events:none; transform:translate3d(0,0,0);
  transition:transform .24s var(--af-nav-ease,ease);
  background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.22);
}
.profile-segment[data-active-index="1"] .profile-segment-indicator { transform:translate3d(100%,0,0); }
.profile-segment[data-active-index="2"] .profile-segment-indicator { transform:translate3d(200%,0,0); }
.profile-segment[data-liquid="on"] .profile-segment-label { opacity:0; }
.profile-segment[data-liquid="on"] .profile-segment-indicator { opacity:0; transition:none; }
.profile-segment .liquid-nav-stage { left:-14px; right:-14px; top:-14px; bottom:-14px; }
.profile-film-rail { min-height:282px; scroll-padding-inline:var(--p4-inset); }
.profile-film-rail > .poster { flex:0 0 132px; }
@media (min-width:390px) { .profile-film-rail > .poster { flex-basis:140px; } }
.profile-film-ghost .art { background:linear-gradient(160deg,#15171b,#0b0c0f); border:1px solid rgba(255,255,255,.04); }
.profile-film-ghost .meta .t { width:70%; height:12px; margin-top:4px; border-radius:6px; background:rgba(255,255,255,.04); }
/* Смена вкладки: старое чуть гаснет, новое проявляется снизу на 4px. */
.profile-film-rail { transition:opacity .16s ease, transform .16s ease; }
.profile-film-rail.is-leaving { opacity:.7; transform:translateY(2px); }
.profile-film-rail.is-entering,
.profile-taste-rail.is-entering { animation:profile-rail-in .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes profile-rail-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Оценки: прибор, а не картинка. Вся площадь — цель для пальца; вертикальный
   жест отдаётся прокрутке страницы, горизонтальный — осмотру. */
.profile-rating-plot {
  touch-action:pan-y; cursor:pointer; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  /* Своя полоса под подсказку. Раньше её подтягивал отрицательный отступ —
     прямо на строку заголовка, и «8/10 · 19 фильмов» ложилось поверх «из 10»
     и «87 оценок». Подсказка теперь живёт над столбцами, а не над текстом. */
  padding-top:30px; margin-top:-4px;
}
.profile-rating-plot .p4-bin { cursor:inherit; pointer-events:none; }
.profile-rating-plot .p4-bin-track { height:96px; }
.profile-rating-plot .p4-bin.is-active .p4-bin-track i { background:var(--af-rating); }
.profile-rating-plot:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:4px; border-radius:12px; }
.profile-rating-inspector { top:0; background:rgba(26,28,33,.9); }
/* «Как ты оцениваешь»: вывод словами, число над столбцом, пояса и подсказка. */
.profile-ratings-head { margin-bottom:6px; }
.profile-ratings-head h2 { margin:0; color:var(--ink); font-size:17px; font-weight:650; letter-spacing:-.02em; }
.profile-ratings-summary { margin:6px 0 0; color:var(--ink); font-size:14.5px; line-height:1.35; font-variant-numeric:tabular-nums; }
/* Средняя — единственное место, где она есть, и того же голубого, что «моя оценка». */
.profile-ratings-summary b { color:var(--af-rating); font-weight:640; }
.profile-ratings-head .p4-ratings-count { margin-top:2px; }
/* Число — прямо над своим столбцом. Стоит над вершиной, а не занимает место
   в дорожке: высоты столбцов остаются честными долями. Самому высокому хватает
   верхнего поля прибора (оно же — полоса подсказки). */
.profile-rating-plot .p4-bin-track { position:relative; }
.p4-bin-n { position:absolute; left:0; right:0; margin-bottom:3px; color:var(--ink-2); font-size:11px;
  line-height:14px; text-align:center; font-variant-numeric:tabular-nums; pointer-events:none; }
.p4-bin.is-mode .p4-bin-n, .p4-bin.is-active .p4-bin-n { color:var(--ink); font-weight:620; }
.profile-ratings-hint { margin:10px 0 0; color:var(--af-text-tertiary, rgba(235,238,245,.46)); font-size:12px; }
.profile-bands { display:flex; flex-direction:column; margin-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.profile-band {
  display:grid; grid-template-columns:40px minmax(0,92px) minmax(0,1fr) 42px 14px; align-items:center; gap:10px;
  width:100%; min-height:42px; margin:0; padding:0; border:0; background:transparent;
  color:inherit; font:inherit; text-align:left; font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent;
}
.profile-band + .profile-band { border-top:1px solid rgba(255,255,255,.045); }
button.profile-band { cursor:pointer; touch-action:manipulation; transition:opacity .12s ease; }
button.profile-band:active { opacity:.72; }
button.profile-band:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; border-radius:10px; }
.profile-band-range { color:var(--ink-2); font-size:13px; }
.profile-band-name { overflow:hidden; color:var(--ink); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.profile-band.is-empty .profile-band-name, .profile-band.is-empty .profile-band-pct { color:var(--ink-2); }
.profile-band-track { display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.profile-band-track i { display:block; height:100%; border-radius:inherit; background:rgba(var(--af-rating-rgb),.5); }
.profile-band.is-masterpiece .profile-band-track i { background:var(--af-rating); }
.profile-band-pct { color:var(--ink); font-size:14px; font-weight:620; text-align:right; }
.profile-band-chevron { display:block; width:14px; height:14px; color:var(--af-text-tertiary, rgba(235,238,245,.36)); }
.profile-band-chevron svg { display:block; width:14px; height:14px; }

/* Вкус: заголовок, один жидкий сегмент, горизонтальная полка. */
.profile-taste-section { margin:0 0 28px; }
.profile-taste-section .p5-section-head { margin-bottom:10px; }
.profile-taste-rail {
  display:flex; gap:10px; padding:2px var(--p4-inset) 4px; overflow-x:auto;
  scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:var(--p4-inset);
  overscroll-behavior-x:contain;
}
.profile-taste-rail::-webkit-scrollbar { display:none; }
/* Карточка вкуса без знаков. Якорь — само название, набранное крупно; число
   фильмов и доля — одной тихой строкой под ним; цвет жанра — ТОЛЬКО в полосе,
   где он означает «вот эта доля». У эпохи цвета нет вовсе: десятилетие — не
   категория с характером, и полоса у него нейтральная. */
.profile-taste-card {
  --taste-accent:var(--ink-2);
  flex:0 0 clamp(150px, 42vw, 170px); height:104px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:14px 14px 13px;
  border:1px solid rgba(255,255,255,.065); border-radius:18px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease;
}
.profile-taste-card:active { transform:scale(.98); }
.profile-taste-card:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; }
.profile-taste-name {
  display:block; overflow:hidden; color:var(--ink); font-size:17px; font-weight:650;
  letter-spacing:-.022em; line-height:1.18; text-overflow:ellipsis; white-space:nowrap;
}
.profile-taste-card.is-decade { --taste-accent:rgba(226,230,238,.46); }
.profile-taste-card.is-decade .profile-taste-name { font-size:20px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.profile-taste-meta {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:auto;
  font-variant-numeric:tabular-nums;
}
.profile-taste-count { min-width:0; overflow:hidden; color:var(--ink-2); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.profile-taste-pct { flex:0 0 auto; color:var(--ink); font-size:13px; font-weight:620; }
.profile-taste-bar { display:block; height:3px; margin-top:8px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
.profile-taste-bar i { display:block; height:100%; border-radius:inherit; background:var(--taste-accent); opacity:.9; }

/* Раскрытие цифры: сетка постеров под подзаголовком со счётом. */
.profile-explorer-count { margin:-10px 20px 12px; min-height:17px; color:var(--ink-2);
  font-size:13px; font-variant-numeric:tabular-nums; }
.profile-explorer-more { margin-left:20px; margin-right:20px; }

/* «Все» люди: подзаголовок, двузначный ранг, строка ≥ 92px. */
.p5-people-subtitle { margin:-10px 20px 8px; color:var(--ink-2); font-size:13px; }
.p5-people-list { margin-left:20px; margin-right:20px; }
.p5-people-row { grid-template-columns:28px 64px minmax(0,1fr) 14px; min-height:92px; }
.p5-people-row.is-top .p5-people-rank { color:var(--ink); font-size:15px; }
.p5-people-row:active .p5-people-photo { transform:scale(.98); }
.p5-people-photo { transition:transform .12s ease; }

@media (max-width:340px) {
  /* 320: поля карточек чуть уже — иначе «≈169 ч» упирается в край. */
  .profile-life-card.is-primary { padding:18px 14px 14px; }
  .profile-life-card.is-primary .profile-life-chevron { top:14px; right:11px; }
  .profile-life-card.is-secondary { gap:8px; padding:12px 16px 12px 12px; }
  .profile-life-card.is-secondary .profile-life-chevron { top:10px; right:9px; }
  .profile-life-icon, .profile-life-icon svg { flex-basis:18px; width:18px; height:18px; }
  .profile-life-copy b { font-size:18px; }
  .profile-life-copy span { font-size:12px; letter-spacing:-.01em; }
  .profile-rating-plot .p4-bin-track { height:88px; }
  /* Три сегмента обязаны помещаться целиком: обрезанная «Пересмотры» читалась бы как ошибка. */
  .profile-segment-option { padding:0 3px; font-size:12.5px; letter-spacing:-.02em; }
}
@media (prefers-reduced-motion:reduce) {
  button.profile-life-card, .profile-film-rail, .profile-taste-card, .profile-segment-option,
  .profile-segment-indicator, .stats-switch-btn, .stats-switch-indicator, .p5-people-photo { transition:none; }
  .profile-film-rail.is-leaving { opacity:1; transform:none; }
  .profile-film-rail.is-entering, .profile-taste-rail.is-entering { animation:none; }
  button.profile-life-card:active, .profile-taste-card:active, .p5-people-row:active .p5-people-photo { transform:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .stats-switch, .profile-segment { background:rgba(15,16,20,.96); }
  .stats-switch-liquid-stage, .profile-segment .liquid-nav-stage { display:none; }
  .stats-switch[data-liquid="on"] .stats-switch-label,
  .profile-segment[data-liquid="on"] .profile-segment-label { opacity:1; }
  .stats-switch[data-liquid="on"] .stats-switch-indicator,
  .profile-segment[data-liquid="on"] .profile-segment-indicator { opacity:1; }
}

/* ── Person V2: человек в одной роли ────────────────────────────────────────
   Язык тот же, что у профиля: чёрный фон, тихий графит, волосяные рамки,
   лаванда — только состояние. Цвет экрану дают постеры и портрет. Живое
   стекло — ровно у двух переключателей: роль и тип работ; всё остальное —
   содержимое без стекла, свечений и градиентных ореолов.
   Своей кнопки «назад» у экрана нет — только родная кнопка Telegram. */

/* Герой без собственной карточки: портрет слева, личность справа, и никакого
   пустого воздуха над ними — раньше здесь стояла своя стрелка назад. */
.person-v2 .person-v2-hero { display:flex; gap:16px; align-items:flex-start; }
.person-v2 .person-v2-portrait {
  flex:0 0 124px; width:124px; aspect-ratio:3 / 4; border-radius:18px;
  border:1px solid rgba(255,255,255,.08); background:linear-gradient(160deg,#15171b,#0a0b0d);
  overflow:hidden;
}
.person-v2 .person-v2-portrait img { object-position:50% 22%; }
.person-v2 .person-v2-identity { flex:1; min-width:0; padding-top:4px; }
.person-v2 .person-v2-identity h1 {
  font-size:28px; font-weight:680; line-height:1.08; letter-spacing:-.03em; overflow-wrap:anywhere;
}
.person-v2 .person-v2-role {
  margin-top:7px; color:var(--ink-2); font-size:14.5px; font-weight:560; letter-spacing:-.01em;
}
.person-v2 .p-desc { margin-top:8px; font-size:14px; }
.person-v2 .p-facts { margin-top:10px; gap:4px; }
.person-v2 .p-fact { font-size:14px; line-height:1.35; }

/* Живой сегмент: настоящие кнопки и честный индикатор под ними, когда стекла
   нет. Та же материя, что у переключателей профиля и библиотеки. */
.person-v2-segment {
  --segments:2;
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:repeat(var(--segments), minmax(0,1fr));
  height:42px; border-radius:21px;
  border:1px solid rgba(255,255,255,.082);
  background:linear-gradient(180deg,rgba(22,24,29,.43) 0%,rgba(9,10,13,.51) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.25);
}
.person-v2-segment-option {
  position:relative; z-index:1; min-width:0; height:40px; padding:0 6px; border:0; border-radius:19px;
  background:transparent; color:var(--af-text-secondary,var(--ink-2)); font:600 14px var(--font);
  letter-spacing:-.01em; cursor:pointer; touch-action:manipulation; transition:color .14s ease;
}
.person-v2-segment-option.is-active { color:var(--nav-accent,var(--af-accent)); }
.person-v2-segment-option:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.5); outline-offset:-3px; }
.person-v2-segment-label { display:block; min-width:0; overflow:hidden; white-space:nowrap; }
.person-v2-segment-indicator {
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--segments));
  border-radius:17px; pointer-events:none; transform:translate3d(0,0,0);
  transition:transform .24s var(--af-nav-ease,ease);
  background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.22);
}
.person-v2-segment[data-active-index="1"] .person-v2-segment-indicator { transform:translate3d(100%,0,0); }
.person-v2-segment[data-active-index="2"] .person-v2-segment-indicator { transform:translate3d(200%,0,0); }
.person-v2-segment[data-liquid="on"] .person-v2-segment-label { opacity:0; }
.person-v2-segment[data-liquid="on"] .person-v2-segment-indicator { opacity:0; transition:none; }
.person-v2-segment .liquid-nav-stage { left:-14px; right:-14px; top:-14px; bottom:-14px; }
.person-v2-role-slot:not(:empty) { margin-top:18px; }
.person-v2-media-slot:not(:empty) { margin-top:12px; }
.person-v2-media-switch { width:min(calc(var(--segments) * 112px), 100%); }

/* О человеке: три строки и «Ещё» — раскрытие на месте, без модального окна. */
.person-v2 .person-v2-bio { margin-top:22px; }
.person-v2 .person-v2-bio h2 { font-size:17px; font-weight:650; letter-spacing:-.02em; }
.person-v2-bio-text { margin-top:7px; color:var(--ink-2); font-size:15px; line-height:1.54; overflow-wrap:anywhere; }
.person-v2-bio-text p { margin:0; }
.person-v2-bio-text p + p { margin-top:.6em; }
.person-v2-bio-text:not(.is-open) p {
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.person-v2-bio-toggle {
  min-height:36px; margin-top:2px; padding:0; border:0; background:transparent;
  color:var(--nav-accent,var(--af-accent)); font:600 14px var(--font); cursor:pointer;
}
.person-v2-bio-toggle[hidden] { display:none; }

/* Личный прогресс — одна спокойная поверхность, без процентов ради процентов. */
.person-v2 .person-v2-progress {
  margin-top:20px; padding:14px 16px 15px; border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(19,21,25,.6),rgba(10,11,14,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.person-v2 .person-v2-progress-value { display:flex; align-items:baseline; gap:7px; margin:0 0 10px; }
.person-v2 .person-v2-progress-value b {
  color:var(--ink); font-size:22px; font-weight:660; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.person-v2 .person-v2-progress-value span { color:var(--ink-2); font-size:13.5px; }
.person-v2 .person-v2-progress-bar { height:4px; background:rgba(255,255,255,.07); }
.person-v2 .person-v2-progress-bar i { background:var(--nav-accent,var(--af-accent)); }
.person-v2-progress-want { margin-top:9px; color:var(--ink-2); font-size:13px; }

/* Фильмография: заголовок и точное число работ ТЕКУЩЕЙ роли. */
.person-v2 .person-v2-films { margin-top:28px; }
.person-v2 .person-v2-filmography-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.person-v2 .person-v2-filmography-head h2 { font-size:19px; font-weight:680; letter-spacing:-.03em; }
.person-v2-count { color:var(--ink-2); font-size:15px; font-weight:560; font-variant-numeric:tabular-nums; }

/* Фильтры — одна строка, листается вбок, не переносится на второй ряд.
   Каждый — таблетка с подписью выбранного и родным системным выбором под
   ней: ни нового листа, ни второй системы меню. */
.person-v2 .person-v2-filter-rail {
  display:flex; gap:8px; margin:12px -20px 0; padding:0 20px 2px;
  overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
.person-v2 .person-v2-filter-rail::-webkit-scrollbar { display:none; }
.person-v2 .person-v2-filter-rail[hidden] { display:none; }
.person-v2-filter {
  position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  height:42px; padding:0 14px 0 15px; border-radius:21px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(22,24,29,.6),rgba(10,11,14,.72));
  color:var(--ink); font:600 13.5px var(--font); white-space:nowrap;
}
.person-v2-filter.is-set { border-color:rgba(var(--af-accent-rgb),.34); color:var(--nav-accent,var(--af-accent)); }
.person-v2-filter-caret {
  width:7px; height:7px; margin-top:-3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); opacity:.6;
}
.person-v2-filter select {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:16px; /* iOS не увеличивает экран при выборе */
}
.person-v2-filter:focus-within { outline:2px solid rgba(var(--af-accent-rgb),.5); outline-offset:2px; }

/* Сетка постеров: три колонки, отметка — маленький знак, не значок-плашка. */
.person-v2 .person-v2-grid { gap:16px 10px; margin-top:14px; }
.person-v2 .person-v2-card .p-poster {
  border-radius:14px; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(160deg,#15171b,#0a0b0d);
}
.person-v2 .p-poster-title {
  position:absolute; inset:0; display:grid; place-items:center; padding:8px; text-align:center;
  color:var(--ink-2); font-size:11.5px; line-height:1.25; overflow:hidden;
}
.person-v2 .p-mark {
  width:22px; height:22px; right:6px; top:6px; background:rgba(10,11,14,.72);
  border:1px solid rgba(255,255,255,.12); font-size:11px;
}
.person-v2 .p-title { font-size:13px; font-weight:560; }
.person-v2 .p-year { font-size:12px; font-variant-numeric:tabular-nums; }
.person-v2 .person-v2-more { border-radius:21px; min-height:44px; background:rgba(255,255,255,.04); }

/* Режиссёр в карточке фильма — настоящая ссылка на человека. */
.d-director-link {
  padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:500;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.28); text-underline-offset:3px;
  cursor:pointer; min-height:28px;
}
.d-director-link:active { opacity:.72; }
.d-director-link:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; border-radius:4px; }
.d-director-sep { color:var(--ink); }

@media (max-width:340px) {
  .person-v2 .person-v2-hero { gap:13px; }
  .person-v2 .person-v2-portrait { flex-basis:104px; width:104px; }
  .person-v2 .person-v2-identity h1 { font-size:24px; }
  .person-v2 .p-fact { font-size:13px; }
  .person-v2 .person-v2-grid { gap:14px 8px; }
  .person-v2 .p-title { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .person-v2-segment-option, .person-v2-segment-indicator { transition:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .person-v2-segment { background:rgba(15,16,20,.96); }
  .person-v2-segment .liquid-nav-stage { display:none; }
  .person-v2-segment[data-liquid="on"] .person-v2-segment-label { opacity:1; }
  .person-v2-segment[data-liquid="on"] .person-v2-segment-indicator { opacity:1; }
}

/* ── «Мы вместе» V2 ─────────────────────────────────────────────────────────
   Тот же язык, что у личного профиля V6: чёрная страница, тихий графит,
   волосяные границы, лавандовый — только состояние. Розовый пары больше не
   фон и не свечение. Карточки истории, полки, вкус и лица — те же узлы, что у
   личного профиля; здесь — только то, чего у личного нет: пара лиц,
   совместимость, полоса совпадений и карточки расхождений. */
.pair-v2-identity {
  display:flex; align-items:center; gap:14px; min-width:0;
  margin:2px var(--p4-inset) 18px;
}
.pair-v2-avatars { display:flex; flex:0 0 auto; align-items:center; }
.pair-v2-avatar {
  position:relative; display:grid; place-items:center; width:52px; height:52px;
  border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px var(--bg, #000), 0 0 0 2.5px rgba(255,255,255,.08);
  background:#2a2c33; color:var(--ink); font-size:18px; font-weight:650; letter-spacing:-.03em;
}
.pair-v2-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pair-v2-avatar.is-me { background:rgba(var(--af-accent-rgb),.42); }
.pair-v2-avatar.is-partner { margin-left:-12px; background:#3a3440; }
.pair-v2-names { min-width:0; flex:1; }
/* Имена переносятся, а не режутся: длинное имя партнёра не имеет права
   сжать твоё до «D…». Две строки — предел, дальше честное многоточие. */
.pair-v2-title {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; color:var(--ink); font-size:21px; font-weight:680; letter-spacing:-.03em; line-height:1.18;
  overflow-wrap:anywhere;
}
.pair-v2-title i { margin:0 .28em; color:var(--ink-2); font-style:normal; font-weight:500; }
.pair-v2-subtitle {
  margin:4px 0 0; overflow:hidden; color:var(--ink-2); font-size:13px; line-height:1.35;
  text-overflow:ellipsis; white-space:nowrap;
}
.pair-v2-handles { color:var(--af-text-tertiary, rgba(235,238,245,.42)); }

/* Совместимость: одна тихая поверхность, одно большое число. */
.pair-v2-compat {
  margin:0 var(--p4-inset) 28px; padding:18px 18px 16px; border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(19,21,25,.6),rgba(10,11,14,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pair-v2-kicker { margin:0; color:var(--ink-2); font-size:13px; font-weight:560; }
.pair-v2-score {
  display:block; margin-top:6px; color:var(--ink); font-size:clamp(44px, 14vw, 56px); font-weight:660;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.pair-v2-caption { margin:8px 0 0; color:var(--ink-2); font-size:13px; line-height:1.35; font-variant-numeric:tabular-nums; }
.pair-v2-low-title { display:block; margin-top:6px; color:var(--ink); font-size:20px; font-weight:650; letter-spacing:-.025em; line-height:1.2; }
.pair-v2-progress { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:5px; margin-top:14px; max-width:220px; }
.pair-v2-progress i { display:block; height:4px; border-radius:2px; background:rgba(255,255,255,.08); }
.pair-v2-progress i.is-on { background:var(--nav-accent, var(--af-accent)); }
.pair-v2-averages {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:16px 0 0; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.pair-v2-averages div { min-width:0; }
.pair-v2-averages dt { overflow:hidden; color:var(--ink-2); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.pair-v2-averages dd { margin:3px 0 0; color:var(--ink); font-size:19px; font-weight:640; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* Ваше кино: четыре одинаковые карточки, геометрия личной истории. */
.pair-v2-life { margin:0 0 28px; }
.pair-v2-life .p5-section-head { margin-bottom:10px; }

/* Ленты пары: «Хотите оба» и «Ваши фильмы». */
.pair-v2-wishlist { margin:0 0 26px; }
.pair-v2-wishlist .p5-section-head { margin-bottom:10px; }
.pair-v2-rail { min-height:0; }

/* Как совпадают оценки: одна полоса, подпись под ней, расхождения лентой. */
.pair-v2-rating { margin:0 0 28px; }
.pair-v2-rating .p5-section-head { margin-bottom:10px; }
.pair-v2-rating-card {
  margin:0 var(--p4-inset); padding:6px 16px 14px; border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* Ступеньки: слово — полоса — число — ›. Строка целиком — цель для пальца. */
.pair-v2-steps { display:flex; flex-direction:column; }
.pair-v2-step {
  display:grid; grid-template-columns:minmax(0,112px) minmax(0,1fr) 34px 14px; align-items:center; gap:10px;
  width:100%; min-height:44px; margin:0; padding:0; border:0; background:transparent;
  color:inherit; font:inherit; text-align:left; -webkit-tap-highlight-color:transparent;
}
.pair-v2-step + .pair-v2-step { border-top:1px solid rgba(255,255,255,.05); }
button.pair-v2-step { cursor:pointer; touch-action:manipulation; transition:opacity .12s ease; }
button.pair-v2-step:active { opacity:.72; }
button.pair-v2-step:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; border-radius:10px; }
.pair-v2-step-name { overflow:hidden; color:var(--ink); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.pair-v2-step.is-empty .pair-v2-step-name, .pair-v2-step.is-empty .pair-v2-step-count { color:var(--ink-2); }
.pair-v2-step-track { display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.pair-v2-step-track i { display:block; height:100%; border-radius:inherit; background:rgba(var(--af-accent-rgb),.42); }
.pair-v2-step.is-exact .pair-v2-step-track i { background:var(--nav-accent, var(--af-accent)); }
.pair-v2-step-count { color:var(--ink); font-size:15px; font-weight:640; text-align:right; font-variant-numeric:tabular-nums; }
.pair-v2-step-chevron { display:block; width:14px; height:14px; color:var(--af-text-tertiary, rgba(235,238,245,.36)); }
.pair-v2-step-chevron svg { display:block; width:14px; height:14px; }
.pair-v2-gap { margin:6px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); color:var(--ink-2); font-size:13px; font-variant-numeric:tabular-nums; }
.pair-v2-disagreements { margin:0 0 28px; }
.pair-v2-disagreements .p5-section-head { margin-bottom:10px; }
.pair-v2-dispute-rail {
  display:flex; gap:10px; padding:2px var(--p4-inset) 4px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; scroll-padding-inline:var(--p4-inset); overscroll-behavior-x:contain;
}
.pair-v2-dispute-rail::-webkit-scrollbar { display:none; }
.pair-v2-dispute {
  flex:0 0 clamp(240px, 72vw, 280px); display:flex; gap:12px; min-width:0; padding:12px; scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.065); border-radius:18px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease;
}
.pair-v2-dispute:active { transform:scale(.985); }
.pair-v2-dispute:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.55); outline-offset:2px; }
.pair-v2-dispute-art {
  position:relative; flex:0 0 58px; width:58px; height:87px; border-radius:10px; overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0b0c0f);
}
.pair-v2-dispute-art img { width:100%; height:100%; object-fit:cover; display:block; }
.pair-v2-dispute-copy { display:flex; flex-direction:column; min-width:0; flex:1; }
.pair-v2-dispute-copy b {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--ink); font-size:14.5px; font-weight:640; letter-spacing:-.015em; line-height:1.22;
}
.pair-v2-dispute-row {
  display:flex; justify-content:space-between; gap:8px; margin-top:5px;
  color:var(--ink-2); font-size:12.5px; font-variant-numeric:tabular-nums;
}
.pair-v2-dispute-row:first-of-type { margin-top:auto; }
.pair-v2-dispute-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pair-v2-dispute-row em { flex:0 0 auto; color:var(--af-rating); font-style:normal; font-weight:620; }
.pair-v2-dispute-copy small { margin-top:6px; color:var(--ink); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }

/* Пустая пара: лица и одна тихая заглушка — без пустых рамок разделов. */
.pair-v2-empty { margin:6px var(--p4-inset) 0; }

@media (max-width:340px) {
  .pair-v2-avatar { width:46px; height:46px; font-size:16px; }
  .pair-v2-title { font-size:19px; }
  .pair-v2-compat { padding:16px 14px 14px; }
  .pair-v2-rating-card { padding:4px 13px 12px; }
  /* 320: подпись ступеньки целиком («На 3 и больше»), сжимается полоса. */
  .pair-v2-step { grid-template-columns:116px minmax(24px,1fr) 26px 12px; gap:8px; }
  .profile-band { grid-template-columns:36px 84px minmax(24px,1fr) 38px 12px; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .pair-v2-dispute, button.pair-v2-step, button.profile-band { transition:none; }
  .pair-v2-dispute:active { transform:none; }
}

/* ── Карточка фильма V3 ─────────────────────────────────────────────────────
   Герой остаётся прежним — он хорош. Ниже него — один документ того же языка,
   что профиль V6 и страница человека: заголовки разделов одной величины,
   тихий графит, волосяные границы, лаванда — только состояние. Стекло — только
   у управлений над кадром и в липкой шапке. */

/* Управления над кадром: слева «назад» (только без родной), справа история и
   «поделиться». Кнопка видна 40px, а цель пальца — 48px. */
.detail-v2 .d-floatctrls { justify-content:space-between; align-items:flex-start; }
.detail-v2 .d-floatctrls-side { display:flex; align-items:center; gap:10px; }
.detail-v2 .d-floatctrls-side.is-trail { margin-left:auto; }
.detail-v2 .d-ctrl { position:relative; width:40px; height:40px; }
.detail-v2 .d-ctrl::before { content:""; position:absolute; inset:-4px; border-radius:50%; }
.detail-v2 .d-ctrl svg { width:20px; height:20px; }
/* Липкая шапка: название строго по центру, по бокам — равные поля. */
.detail-v2 .d-sticky { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr); gap:8px; }
.detail-v2 .d-sticky-side { display:flex; align-items:center; gap:8px; min-width:0; }
.detail-v2 .d-sticky-side.is-trail { justify-content:flex-end; }
.detail-v2 .d-sticky .t { max-width:calc(100vw - 232px); padding:0; }

/* Рейтинги — одна полоса метаданных, а не три KPI-плитки. */
.detail-v2 .d-ratings {
  display:flex; justify-content:center; gap:0; width:fit-content; max-width:100%;
  margin:20px auto 0; padding:10px 2px;
  border:1px solid rgba(255,255,255,.07); border-radius:18px;
  background:linear-gradient(180deg,rgba(19,21,25,.55),rgba(10,11,14,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.detail-v2 .d-rpill {
  flex:0 1 auto; min-width:76px; padding:2px 16px; border:0; border-radius:0;
  background:none; text-align:center;
}
.detail-v2 .d-rpill + .d-rpill { border-left:1px solid rgba(255,255,255,.07); }
.detail-v2 .d-rpill .v { color:var(--ink); font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.detail-v2 .d-rpill .l { margin-top:3px; color:var(--ink-2); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.detail-v2 .d-rpill .c { margin-top:1px; color:var(--af-text-tertiary, rgba(235,238,245,.42)); font-size:11px; }
.detail-v2 .d-rpill.is-community .v { color:var(--nav-accent, var(--af-accent)); }

/* Разделы документа: заголовки одной величины с профилем. */
.detail-v2 .d-about h2,
.detail-v2 .d-rating-block h2,
.detail-v2 .d-cast-h h2,
.detail-v2 .d-comments-head h2 {
  margin:0; color:var(--ink); font-size:19px; font-weight:680; letter-spacing:-.03em; line-height:1.15;
}
.detail-v2 .d-about { margin-top:30px; }
.detail-v2 .d-about h2 { margin-bottom:10px; }
.detail-v2 .d-overview {
  margin:0; color:#d7d9de; font-size:15.5px; line-height:1.56;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.detail-v2 .d-overview.is-open { display:block; -webkit-line-clamp:unset; overflow:visible; }
.d-about-toggle {
  min-height:40px; margin-top:2px; padding:0; border:0; background:none;
  color:var(--nav-accent, var(--af-accent)); font:600 14.5px var(--font); cursor:pointer;
}
.d-about-toggle[hidden] { display:none; }

/* Актёры: весь состав одним рельсом, край в край, как лица профиля. */
.detail-v2 .d-cast { margin-top:32px; }
.detail-v2 .d-cast-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.d-cast-count { color:var(--ink-2); font-size:15px; font-weight:560; font-variant-numeric:tabular-nums; }
.detail-v2 .d-cast-rail {
  gap:12px; padding:2px 20px 4px; margin:0 -20px;
  scroll-snap-type:x proximity; scroll-padding-inline:20px; overscroll-behavior-x:contain;
}
.detail-v2 .d-cast-item { flex:0 0 100px; min-width:0; scroll-snap-align:start; text-align:left; }
.detail-v2 .d-avatar {
  width:100px; aspect-ratio:4/5; border-radius:16px; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(160deg,#16181c,#0c0d10);
}
.detail-v2 .d-avatar img { object-fit:cover; object-position:50% 18%; }
.detail-v2 .d-cast-item .n {
  min-height:0; margin-top:8px; text-align:left; color:var(--ink); font-size:13px; font-weight:560; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.detail-v2 .d-cast-item .role {
  margin-top:3px; text-align:left; color:var(--ink-2); font-size:12px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.detail-v2 .d-cast-item.is-linked { transition:transform .1s ease; }
.detail-v2 .d-cast-item.is-linked:active { transform:scale(.985); }

/* Комментарии: тот же заголовок раздела, плоские строки. */
.detail-v2 .d-comments { margin-top:34px; }
.detail-v2 .d-comments-head { margin-bottom:14px; }
.detail-v2 .d-comments-count { margin-left:4px; color:var(--ink-2); font-weight:560; }
.detail-v2 .d-comments-state { padding:6px 0 12px; }

@media (prefers-reduced-motion:reduce) {
  .detail-v2 .d-cast-item.is-linked { transition:none; }
  .detail-v2 .d-cast-item.is-linked:active { transform:none; }
}
/* Место под следующую порцию состава: карточка-призрак той же ширины. */
.detail-v2 .d-cast-more { flex:0 0 100px; aspect-ratio:4/5; border-radius:16px; align-self:flex-start;
  background:linear-gradient(160deg,#131519,#0b0c0f); border:1px solid rgba(255,255,255,.04); }

/* ── Карточка фильма V5: монохром, шкала под пальцем, честная шапка ────────
   Цвет на странице даёт кадр фильма. Управление — графитовое стекло;
   выбранное — светлая заливка с тёмной подписью, как в Apple TV. Оценка —
   одна шкала сразу под действиями: тап или протяжка, крупная цифра над ней. */

/* Кадр не обрезается сверху: при резинке iOS он растягивается вверх (см.
   wireDetailScroll), а по бокам и снизу по-прежнему режется ровно по блоку. */
.detail-v2 .d-backdrop { overflow:visible; clip-path:inset(-100vh 0 0 0); }

/* Липкая шапка — плотное стекло. Прежняя подложка .82 без работающего
   размытия пропускала текст описания прямо под названием. */
.detail-v2 .d-sticky.show {
  background:linear-gradient(180deg,rgba(7,7,8,.95),rgba(7,7,8,.88));
  -webkit-backdrop-filter:blur(28px) saturate(1.6); backdrop-filter:blur(28px) saturate(1.6);
  border-bottom-color:rgba(255,255,255,.06);
}
/* В шапке одно действие — «поделиться». История остаётся над кадром. */
.detail-v2 #d-story-sticky { display:none; }

/* Действия: две равные таблетки, иконка рядом с подписью. */
.detail-v2 .d-actions-slot { position:relative; margin-top:20px; }
.d-actionbar { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.d-act {
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  min-width:0; height:50px; padding:0 12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.09); border-radius:16px;
  background:linear-gradient(180deg,rgba(44,46,53,.55),rgba(24,25,30,.62));
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.22);
  color:var(--af-text-primary); font:600 15px var(--font); letter-spacing:-.01em; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.2,.9,.25,1), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.d-act svg { flex:0 0 auto; width:20px; height:20px; color:currentColor; transition:transform .24s cubic-bezier(.2,.9,.25,1); }
.d-act span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-act::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.14), transparent 62%);
  transition:opacity .22s ease;
}
.d-act:active { transform:scale(.97); }
.d-act:active::after { opacity:1; }
.d-act.is-on {
  border-color:transparent; background:var(--af-accent); color:var(--af-on-accent);
  box-shadow:0 10px 26px -16px rgba(255,255,255,.35);
}
.d-act.is-on::after { background:radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.08), transparent 62%); }
.d-act.is-on svg { animation:d-act-pop .32s cubic-bezier(.2,.9,.25,1); }
@keyframes d-act-pop { 0% { transform:scale(.7); } 60% { transform:scale(1.12); } 100% { transform:none; } }
.d-act:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.6); outline-offset:2px; }

/* «Для кого» — стеклянное меню, которое вырастает из кнопки «Хочу». Внизу
   экрана оно открывается вверх: под ним нижняя панель. */
.d-wish-menu {
  position:absolute; z-index:6; top:58px; left:0; width:min(252px, calc(100% - 20px)); padding:6px;
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  background:rgba(26,27,31,.97);
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -18px rgba(0,0,0,.85);
  transform-origin:22% 0; transform:scale(.9) translateY(-6px); opacity:0;
  transition:transform .22s cubic-bezier(.2,.9,.25,1), opacity .16s ease;
}
.d-wish-menu[hidden] { display:none; }
.d-wish-menu.is-open { transform:none; opacity:1; }
.d-wish-menu.is-above { top:auto; bottom:58px; transform-origin:22% 100%; transform:scale(.9) translateY(6px); }
.d-wish-menu.is-above.is-open { transform:none; }
.d-wish-option {
  display:grid; grid-template-columns:22px minmax(0,1fr) 18px; align-items:center; gap:10px;
  width:100%; min-height:46px; padding:0 10px; border:0; border-radius:12px; background:none;
  color:var(--af-text-primary); font:500 15px var(--font); text-align:left; cursor:pointer;
}
.d-wish-option + .d-wish-option { margin-top:2px; }
.d-wish-option svg { width:20px; height:20px; color:var(--af-text-secondary); }
.d-wish-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-wish-option:active, .d-wish-option:focus-visible { background:rgba(255,255,255,.07); outline:none; }
.d-wish-check { display:block; width:18px; height:18px; color:var(--af-text-primary); opacity:0; }
.d-wish-check svg { width:18px; height:18px; color:inherit; }
.d-wish-option[aria-checked="true"] .d-wish-check { opacity:1; }

/* Оценка: крупная цифра справа от заголовка, под ней — шкала. */
.detail-v2 .d-rating-block { margin-top:26px; content-visibility:visible; }
.d-rate-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:34px; margin-bottom:10px; }
.d-rate-value { display:flex; align-items:baseline; gap:2px; color:var(--af-text-primary); font-variant-numeric:tabular-nums; transform-origin:100% 70%; }
.d-rate-value b { font-size:30px; font-weight:720; letter-spacing:-.03em; line-height:1; }
.d-rate-value span { color:var(--af-text-tertiary); font-size:15px; font-weight:600; }
.d-rate-value .d-rate-hint { color:var(--af-text-tertiary); font-size:13.5px; font-weight:500; }
.d-rate-value.is-ticking { animation:d-rate-tick .2s cubic-bezier(.2,.9,.25,1); }
@keyframes d-rate-tick { from { transform:scale(1.14); } to { transform:none; } }

/* Шкала — жидкая капля подбора на всю ширину. Дорожка и капля рисуются
   рушием; над ними — прозрачные цели касания по центрам делений, под
   дорожкой — тихие цифры 1…10 (они же подписи этих целей). */
.detail-v2 .d-rating-block .d-stars {
  position:relative; display:block; height:80px; margin:0 -2px;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.d-rate-liquid { position:absolute; left:0; right:0; top:0; height:60px; }
.d-rate-liquid.af-liquid-progress { display:block; }
.d-rate-liquid .af-liquid-progress-track { width:100%; }
.d-rate-liquid .af-liquid-progress-number { font-size:18px; font-weight:700; }
/* Пока оценки нет — только дорожка, капли нет. Первое касание «роняет» её
   прямо в точку: появление, а не переезд от единицы. */
.d-stars.is-empty .d-rate-liquid .af-liquid-progress-rail { opacity:1; background:rgba(255,255,255,.14); }
.d-stars.is-empty .d-rate-liquid .af-liquid-progress-fill { opacity:0; }
/* Только прозрачность: рушій меряет холст по getBoundingClientRect, и
   масштаб на слое сцены исказил бы и размер капли, и её место. */
.d-rate-liquid .af-liquid-progress-stage,
.d-rate-liquid .af-liquid-progress-value { transition:opacity .22s ease; }
.d-stars.is-empty .d-rate-liquid .af-liquid-progress-stage { opacity:0; }
.d-stars.is-empty .d-rate-liquid .af-liquid-progress-value { opacity:0; }
.detail-v2 .d-rating-block .d-rating-option {
  position:absolute; top:0; bottom:auto; height:100%; min-height:0; display:block; min-width:0; padding:0;
  border:0; border-radius:0; background:none; color:var(--af-text-tertiary);
  -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.detail-v2 .d-rating-block .d-rating-option span {
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  font:600 11.5px/16px var(--font); font-variant-numeric:tabular-nums; transition:color .15s ease;
}
/* Крайние цели дотянуты до края, а подпись стоит по центру деления. */
.detail-v2 .d-rating-block .d-rating-option[data-n="1"] span { right:auto; width:48px; }
.detail-v2 .d-rating-block .d-rating-option[data-n="10"] span { left:auto; width:48px; }
.detail-v2 .d-rating-block .d-rating-option.on span { color:var(--af-text-primary); font-weight:760; }
.detail-v2 .d-rating-block .d-rating-option:focus-visible { outline:2px solid rgba(var(--af-accent-rgb),.7); outline-offset:-2px; border-radius:12px; }

/* Партнёр — одна строка под шкалой: скрыто / ещё нет / её число. */
.d-rating-pair { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); }
.d-rating-pair[hidden] { display:none; }
.d-pair { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; column-gap:12px; }
.d-pair-avatar {
  position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; overflow:hidden;
  background:#2a2c33; color:var(--af-text-primary); font-size:12.5px; font-weight:650;
}
.d-pair-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.d-pair-text { display:flex; flex-direction:column; min-width:0; }
.d-pair-name { overflow:hidden; color:var(--af-text-primary); font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.d-pair-caption { overflow:hidden; color:var(--af-text-tertiary); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.d-pair-value { color:var(--af-text-primary); font-size:24px; font-weight:720; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.d-pair-value[hidden] { display:none; }
.d-pair-lock {
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  background:rgba(255,255,255,.075); color:var(--af-text-secondary);
}
.d-pair-lock svg { width:17px; height:17px; }
.d-pair-value.is-revealing { animation:d-reveal .34s cubic-bezier(.2,.9,.25,1) both; }
@keyframes d-reveal { from { filter:blur(8px); transform:scale(.8); opacity:.3; } to { filter:none; transform:none; opacity:1; } }
.d-pair-recommend {
  grid-column:2 / -1; justify-self:start;
  display:inline-flex; align-items:center; gap:7px; min-height:36px; margin-top:6px; padding:0 14px;
  border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.05);
  color:var(--af-text-primary); font:600 13.5px var(--font); cursor:pointer;
  transition:transform .14s ease, background-color .16s ease;
}
.d-pair-recommend:active { transform:scale(.97); }
.d-pair-recommend svg { width:16px; height:16px; }
.d-pair-recommend:disabled { border-color:transparent; background:none; color:var(--af-text-tertiary); cursor:default; padding-left:0; }

/* Актёры: карточки выровнены по верху, фото проявляется, пока — мерцание. */
.detail-v2 .d-cast-rail { align-items:flex-start; }
.detail-v2 .d-cast-item { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; align-self:flex-start; }
.detail-v2 .d-avatar { background:linear-gradient(160deg,#23252b,#131417); }
.detail-v2 .d-avatar .fb {
  z-index:0; color:rgba(236,238,243,.5); font-size:24px; font-weight:620; letter-spacing:.02em;
  transition:opacity .2s ease;
}
.detail-v2 .d-avatar img[data-person-photo] { transform:scale(1.03); transition:opacity .32s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
.detail-v2 .d-avatar img[data-person-photo].ready { transform:none; }
.detail-v2 .d-avatar:has(img[data-person-photo]:not(.ready)) .fb { opacity:0; }
.detail-v2 .d-avatar:has(img[data-person-photo]:not(.ready))::after {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%) 0 0/250% 100%;
  animation:d-shimmer 1.3s linear infinite;
}
@keyframes d-shimmer { from { background-position:125% 0; } to { background-position:-125% 0; } }

@media (prefers-reduced-motion:reduce) {
  .d-act, .d-act svg, .d-act::after, .d-wish-menu, .d-stars, .d-rating-option { transition:none; }
  .d-act:active, .detail-v2 .d-rating-block .d-stars.is-sliding { transform:none; }
  .d-act.is-on svg, .d-rate-value.is-ticking, .d-pair-value.is-revealing { animation:none; }
  .detail-v2 .d-avatar:has(img[data-person-photo]:not(.ready))::after { animation:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .d-act, .d-wish-menu, .detail-v2 .d-sticky.show { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .d-act:not(.is-on) { background:rgba(30,31,36,.98); }
  .d-wish-menu, .detail-v2 .d-sticky.show { background:rgba(12,12,14,.99); }
}

/* ── Комментарии V2: язык карточки ─────────────────────────────────────────
   Поле — тихое графитовое стекло, фокус — светлее кромка, без кольца.
   Отправка — белый круг с ТЁМНОЙ стрелкой (монохромный акцент), пока нечего
   отправлять — графит с приглушённой стрелкой. Строка: имя · время в одну
   линию, текст под ним. Меню «⋯» — то же стекло, что меню «Для кого». */
.detail-v2 .d-comment-form { align-items:center; gap:10px; margin-bottom:22px; }
.detail-v2 .d-comment-input {
  min-height:44px; padding:11px 16px; border:1px solid rgba(255,255,255,.08); border-radius:22px;
  background:rgba(255,255,255,.055); color:var(--af-text-primary); font-size:15px;
  transition:border-color .18s ease, background-color .18s ease;
}
.detail-v2 .d-comment-input::placeholder { color:var(--af-text-tertiary); }
.detail-v2 .d-comment-input:focus { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.075); box-shadow:none; }
.detail-v2 .d-comment-send {
  width:40px; height:40px; background:var(--af-accent); color:var(--af-on-accent);
  transition:transform .14s cubic-bezier(.2,.9,.25,1), background-color .18s ease, color .18s ease;
}
.detail-v2 .d-comment-send svg { width:19px; height:19px; stroke-width:2.4; }
.detail-v2 .d-comment-send:active:not(:disabled) { transform:scale(.92); }
.detail-v2 .d-comment-send:disabled { opacity:1; background:rgba(255,255,255,.08); color:var(--af-text-tertiary); }
.detail-v2 .d-comments-list { gap:20px; }
.detail-v2 .d-comment-row { gap:12px; }
.detail-v2 .d-comment-avatar { width:36px; height:36px; background:#2a2c33; color:var(--af-text-primary); font-size:13px; }
.detail-v2 .d-comment-meta { justify-content:flex-start; align-items:baseline; gap:6px; margin:1px 0 3px; }
.detail-v2 .d-comment-author { max-width:65%; color:var(--af-text-primary); font-size:14.5px; font-weight:620; }
.detail-v2 .d-comment-time { color:var(--af-text-tertiary); font-size:12.5px; }
.detail-v2 .d-comment-time::before { content:"·"; margin-right:6px; }
.detail-v2 .d-comment-text { color:#d7d9de; font-size:15px; line-height:1.45; }
/* Без выноса вправо: на 320px вынос делал строку шире колонки. */
.detail-v2 .d-comment-menu-trigger { width:36px; height:36px; margin:-6px 0 0 0; border-radius:50%; color:var(--af-text-tertiary); }
.detail-v2 .d-comment-menu-trigger svg { width:19px; height:19px; }
.detail-v2 .d-comment-menu {
  top:36px; min-width:212px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  background:rgba(26,27,31,.97);
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -18px rgba(0,0,0,.85);
  transform-origin:100% 0; animation:d-menu-in .2s cubic-bezier(.2,.9,.25,1);
}
.detail-v2 .d-comment-menu.up { top:auto; bottom:36px; transform-origin:100% 100%; }
@keyframes d-menu-in { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
.detail-v2 .d-comment-menu button {
  gap:12px; min-height:46px; padding:0 12px; border-radius:12px;
  color:var(--af-text-primary); font:500 15px var(--font);
}
.detail-v2 .d-comment-menu button svg { width:19px; height:19px; color:var(--af-text-secondary); }
.detail-v2 .d-comment-menu button.danger, .detail-v2 .d-comment-menu button.danger svg { color:var(--af-danger); }
.detail-v2 .d-comment-menu button:active, .detail-v2 .d-comment-menu button:focus-visible { background:rgba(255,255,255,.07); outline:none; }
@media (prefers-reduced-motion:reduce) {
  .detail-v2 .d-comment-menu { animation:none; }
  .detail-v2 .d-comment-send, .detail-v2 .d-comment-input { transition:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .detail-v2 .d-comment-menu { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(12,12,14,.99); }
}

/* ── Друзья v1: хаб, профиль друга, листы, ряд на карточке фильма ──────────
   Тот же язык, что профиль: документ из секций без внешних коробок, графит,
   монохромный акцент только у состояния и главного действия. Стекло — у
   листов (они поверх экрана) и у переключателя, больше нигде. */
.page-head-actions { display:flex; align-items:center; gap:8px; }
/* Настройки профиля — навигация, поэтому говорит на языке навигации: тот же
   графитовый остров, что у таббара и фильтров инбокса, круг вместо плитки.
   Символ — Phosphor GearSix, как весь остальной интерфейс. */
.page-head-action.profile-settings-button {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(20,22,27,.62),rgba(9,10,13,.74));
  -webkit-backdrop-filter:blur(18px) saturate(1.22) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.22) brightness(.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -18px rgba(0,0,0,.9);
  color:var(--ink-2);
  transition:color .16s ease,transform .16s ease;
}
.page-head-action.profile-settings-button svg {
  width:22px;
  height:22px;
  transition:transform .32s cubic-bezier(.22,.85,.26,1);
}
.page-head-action.profile-settings-button:active {
  color:var(--ink);
  background:linear-gradient(180deg,rgba(41,42,49,.66),rgba(24,25,30,.74));
  transform:scale(.95);
}
.page-head-action.profile-settings-button:active svg { transform:rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .page-head-action.profile-settings-button:active svg { transform:none; }
}
.friends-head, .friend-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; }
.friends-head h1, .friend-head h1 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friends-head-add { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.1);
  border-radius:50%; background:rgba(255,255,255,.06); color:var(--af-text-primary); cursor:pointer;
  transition:transform .14s ease, background-color .16s ease; }
.friends-head-add svg { width:21px; height:21px; }
.friends-head-add:active { transform:scale(.94); }
.friends-page, .friend-page { padding:4px 20px var(--nav-clearance); }

.friends-section { margin-top:26px; }
.friends-section:first-child { margin-top:8px; }
.friends-section > h2, .friends-section .p5-section-head h2 { display:flex; align-items:baseline; gap:8px; margin:0 0 12px;
  color:var(--af-text-primary); font-size:19px; font-weight:680; letter-spacing:-.03em; }
.friends-section .p5-section-head p { margin:2px 0 12px; color:var(--af-text-tertiary); font-size:13px; }
.friends-count { color:var(--af-text-tertiary); font-size:15px; font-weight:560; font-variant-numeric:tabular-nums; }
.friends-section.is-quiet > h2 { font-size:15px; color:var(--af-text-secondary); }

.friends-list { display:flex; flex-direction:column; }
.friend-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; align-items:center; gap:12px;
  width:100%; min-height:64px; padding:10px 0; border:0; border-bottom:1px solid rgba(255,255,255,.06);
  background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.friend-row:last-child { border-bottom:0; }
button.friend-row:active { background:rgba(255,255,255,.03); }
.friend-row.is-request, .friend-row.is-muted { cursor:default; grid-template-columns:44px minmax(0,1fr) auto; }
/* Заявка, к которой привело уведомление: короткая мягкая подсветка, не рамка. */
.friend-row.is-request.is-focused { background:rgba(255,255,255,.06); border-radius:14px; transition:background .4s ease; }
.friend-avatar { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; overflow:hidden;
  border-radius:50%; background:#2a2c33; color:var(--af-text-primary); font-size:15px; font-weight:650; }
.friend-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.friend-avatar.is-mini { width:20px; height:20px; font-size:9px; }
.friend-avatar.is-hero { width:88px; height:88px; font-size:28px; }
.friend-avatar.is-stack { width:28px; height:28px; font-size:11px; margin-left:-8px; box-shadow:0 0 0 2px var(--af-bg); }
.friend-avatar.is-stack:first-child { margin-left:0; }
.friend-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
.friend-copy b { overflow:hidden; color:var(--af-text-primary); font-size:16px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.friend-copy span { overflow:hidden; color:var(--af-text-tertiary); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.friend-score { color:var(--af-text-primary); font-size:22px; font-weight:720; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.friend-score small { margin-left:1px; color:var(--af-text-tertiary); font-size:13px; font-weight:600; }
.friend-chevron { color:var(--af-text-tertiary); }
.friend-chevron svg { width:16px; height:16px; }
.friend-row.is-ghost { cursor:default; }
.friend-row.is-ghost .friend-avatar, .friend-ghost-line { background:linear-gradient(100deg,#1c1d22 30%,#26282e 50%,#1c1d22 70%) 0 0/250% 100%;
  animation:d-shimmer 1.3s linear infinite; }
.friend-ghost-line { display:block; width:60%; height:14px; border-radius:7px; }

.friend-request-actions, .friend-rec-actions { display:flex; align-items:center; gap:6px; }
.friend-pill { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid rgba(255,255,255,.1);
  border-radius:999px; background:rgba(255,255,255,.06); color:var(--af-text-primary); font:600 14px var(--font); cursor:pointer;
  transition:transform .14s ease; }
.friend-pill svg { width:16px; height:16px; }
.friend-pill.is-primary { border-color:transparent; background:var(--af-accent); color:var(--af-on-accent); }
.friend-pill:active { transform:scale(.96); }
.friend-pill:disabled { opacity:.5; }
.friend-icon-btn { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--af-text-tertiary); cursor:pointer; }
.friend-icon-btn svg { width:18px; height:18px; }
.friend-link { padding:8px 0 8px 8px; border:0; background:none; color:var(--af-text-secondary); font:600 14px var(--font); cursor:pointer; }

.friend-rec-list { display:flex; flex-direction:column; gap:12px; }
/* Совет: карточка-поверхность, постер и текст сверху, два равных действия снизу. */
.friend-rec { display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-areas:"art copy" "actions actions";
  gap:12px 14px; padding:12px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.035); }
.friend-rec-art { grid-area:art; position:relative; aspect-ratio:2/3; overflow:hidden; padding:0; border:0; border-radius:12px;
  background:var(--af-surface-2); cursor:pointer; }
.friend-rec-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.friend-rec-art .noposter { display:grid; place-items:center; height:100%; padding:6px; color:var(--af-text-tertiary); font-size:11px; }
.friend-rec-copy { grid-area:copy; display:flex; flex-direction:column; min-width:0; gap:6px; }
.friend-rec-from { display:flex; align-items:center; gap:6px; color:var(--af-text-tertiary); font-size:12.5px; }
.friend-rec-title { padding:0; border:0; background:none; color:var(--af-text-primary); font:650 16.5px/1.25 var(--font);
  letter-spacing:-.01em; text-align:left; cursor:pointer; }
.friend-rec-year { color:var(--af-text-tertiary); font-weight:500; }
.friend-rec-note { margin:0; padding:6px 0 6px 10px; border-left:2px solid rgba(255,255,255,.22); color:#d7d9de;
  font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.friend-rec-actions { grid-area:actions; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.friend-rec-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.1); border-radius:14px; background:none; color:var(--af-text-secondary);
  font:600 14.5px var(--font); cursor:pointer; }
.friend-rec-btn.is-main { border-color:transparent; background:rgba(255,255,255,.1); color:var(--af-text-primary); }
.friend-rec-btn svg { width:17px; height:17px; }
.friend-rec-btn:active { transform:scale(.97); }
.friend-rec-btn:disabled { opacity:.5; }
.friend-rec-done { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
  color:var(--af-text-secondary); font-size:14px; }
.friend-rec-done svg { width:16px; height:16px; }

.friends-empty { display:flex; flex-direction:column; align-items:center; padding:48px 12px 24px; text-align:center; }
.friends-empty-mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:16px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--af-text-primary); }
.friends-empty-mark svg { width:30px; height:30px; }
.friends-empty h2 { margin:0 0 8px; color:var(--af-text-primary); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.friends-empty p { max-width:300px; margin:0 0 20px; color:var(--af-text-secondary); font-size:15px; line-height:1.45; }
.friend-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px;
  border:0; border-radius:16px; background:var(--af-accent); color:var(--af-on-accent); font:650 15.5px var(--font); cursor:pointer;
  transition:transform .14s ease; }
.friend-cta svg { width:19px; height:19px; }
.friend-cta:active { transform:scale(.97); }
.friend-cta:disabled { opacity:.45; cursor:default; }
.friends-error { padding:24px 0; color:var(--af-text-secondary); }

/* Листы: поверх экрана, стекло здесь уместно. */
.friends-sheet-backdrop { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,0); transition:background-color .2s ease; }
.friends-sheet-backdrop.is-open { background:rgba(0,0,0,.5); }
.friends-sheet { width:min(520px,100%); max-height:86vh; overflow:auto; padding:10px 20px calc(20px + var(--safe-bottom));
  border:1px solid rgba(255,255,255,.1); border-bottom:0; border-radius:26px 26px 0 0;
  background:rgba(22,23,27,.97); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.8); transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.9,.25,1); }
.friends-sheet-backdrop.is-open .friends-sheet { transform:none; }
.friends-sheet-backdrop.is-closing { background:rgba(0,0,0,0); }
.friends-sheet-backdrop.is-closing .friends-sheet { transform:translateY(100%); }
.friends-sheet-grip { display:block; width:38px; height:5px; margin:0 auto 14px; border-radius:3px; background:rgba(255,255,255,.18); }
.friends-sheet h2 { margin:0 0 14px; color:var(--af-text-primary); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.friends-options { display:flex; flex-direction:column; gap:8px; }
.friends-option { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:14px; width:100%; min-height:64px;
  padding:10px 14px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.045);
  color:var(--af-text-primary); font:inherit; text-align:left; cursor:pointer; }
.friends-option svg { width:22px; height:22px; color:var(--af-text-secondary); }
.friends-option span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.friends-option b { font-size:15.5px; font-weight:620; }
.friends-option small { color:var(--af-text-tertiary); font-size:13px; }
.friends-option:active { background:rgba(255,255,255,.08); }
.friends-option.is-danger b, .friends-option.is-danger svg { color:var(--af-danger); }
.friends-sheet-note { min-height:20px; margin:12px 0 0; color:var(--af-text-secondary); font-size:14px; line-height:1.4; }
.friends-sheet-film { margin:-8px 0 14px; color:var(--af-text-secondary); font-size:14.5px; }
.friends-pick { display:flex; flex-direction:column; max-height:40vh; overflow:auto; margin:0 -4px 14px; }
.friends-pick-item { display:grid; grid-template-columns:40px minmax(0,1fr) 22px; align-items:center; gap:12px; min-height:56px;
  padding:6px 4px; border:0; border-radius:12px; background:none; color:var(--af-text-primary); font:600 15px var(--font); text-align:left; cursor:pointer; }
.friends-pick-item .friend-avatar { width:40px; height:40px; }
.friends-pick-item i { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid rgba(255,255,255,.25); border-radius:50%; color:transparent; }
.friends-pick-item i svg { width:14px; height:14px; }
.friends-pick-item[aria-pressed="true"] i { border-color:transparent; background:var(--af-accent); color:var(--af-on-accent); }
.friends-note { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; color:var(--af-text-tertiary); font-size:13px; }
.friends-note textarea { width:100%; box-sizing:border-box; resize:none; padding:12px 14px; border:1px solid rgba(255,255,255,.08);
  border-radius:16px; background:rgba(255,255,255,.055); color:var(--af-text-primary); font:15px/1.4 var(--font); }
.friends-note textarea:focus { outline:none; border-color:rgba(255,255,255,.24); }
.friends-sheet .friend-cta { width:100%; }

/* ── Киновечер (друзья, этап 2) ─────────────────────────────────────────────
   Тот же тихий язык, что у друзей: монохром, плотные строки, один акцент на
   действии. Голос — три тихие кнопки, а не звёзды: это выбор, не оценка. */
.mn-page { padding:4px 20px var(--nav-clearance); }
.mn-lead { margin:6px 0 16px; color:var(--af-text-secondary); font-size:15px; line-height:1.45; }
.mn-note { min-height:18px; margin:8px 0 0; color:var(--af-text-tertiary); font-size:13.5px; line-height:1.4; }
.mn-status { margin:4px 0 14px; color:var(--af-text-tertiary); font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.mn-skeleton { display:flex; flex-direction:column; gap:12px; padding-top:12px; }
.mn-skeleton span { display:block; height:56px; border-radius:14px;
  background:linear-gradient(100deg,#1c1d22 30%,#26282e 50%,#1c1d22 70%) 0 0/250% 100%; animation:d-shimmer 1.3s linear infinite; }
.mn-members { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.mn-members p { margin:0; color:var(--af-text-secondary); font-size:14px; }
.mn-faces { display:flex; flex:none; }
.mn-face { position:relative; margin-left:-8px; }
.mn-face:first-child { margin-left:0; }
.mn-face .friend-avatar { width:34px; height:34px; font-size:12px; box-shadow:0 0 0 2px var(--af-bg); }
.mn-face.is-waiting .friend-avatar { opacity:.45; }
.mn-face i { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:transparent; }
.mn-face.is-done i { background:var(--af-accent); color:var(--af-on-accent); box-shadow:0 0 0 2px var(--af-bg); }
.mn-face i svg { width:10px; height:10px; }
.mn-pick { display:flex; flex-direction:column; margin:0 -4px; }
.mn-pick-item { display:grid; grid-template-columns:44px minmax(0,1fr) 22px; align-items:center; gap:12px; min-height:60px;
  padding:6px 4px; border:0; border-radius:12px; background:none; color:var(--af-text-primary); font:600 15.5px var(--font); text-align:left; cursor:pointer; }
.mn-pick-item i { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid rgba(255,255,255,.25); border-radius:50%; color:transparent; }
.mn-pick-item i svg { width:14px; height:14px; }
.mn-pick-item[aria-pressed="true"] i { border-color:transparent; background:var(--af-accent); color:var(--af-on-accent); }
.mn-footer { display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-top:24px; text-align:center; }
.mn-footer .friend-link { align-self:center; padding:10px 12px; }
.friend-link.is-danger { color:var(--af-danger); }
.mn-cta { width:100%; }
.mn-invite { padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:rgba(255,255,255,.04); }
.mn-invite h2 { margin:0 0 6px; color:var(--af-text-primary); font-size:19px; font-weight:680; letter-spacing:-.02em; }
.mn-invite p { margin:0 0 16px; color:var(--af-text-secondary); font-size:14.5px; line-height:1.45; }
.mn-actions { display:flex; align-items:center; gap:12px; }
.mn-actions .friend-cta { flex:1; }
.mn-candidates, .mn-suggestions, .mn-search-results { display:flex; flex-direction:column; }
.mn-candidate { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-height:68px;
  border-bottom:1px solid rgba(255,255,255,.06); }
.mn-candidate:last-child { border-bottom:0; }
.mn-candidate-open { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; min-width:0; padding:8px 0;
  border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.mn-candidate-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mn-candidate-copy b { overflow:hidden; color:var(--af-text-primary); font-size:15.5px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.mn-candidate-copy span { color:var(--af-text-tertiary); font-size:13px; }
.mn-badge { align-self:flex-start; margin-top:2px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.07);
  color:var(--af-text-secondary); font-size:11.5px; font-weight:600; }
.mn-poster { position:relative; display:grid; place-items:center; width:44px; aspect-ratio:2/3; overflow:hidden; border-radius:8px;
  background:var(--af-surface-2); color:var(--af-text-tertiary); font-size:14px; font-weight:650; }
.mn-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mn-poster.is-large { width:56px; border-radius:10px; }
.mn-poster.is-hero { width:132px; border-radius:16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.9); }
.mn-icon-btn { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--af-text-tertiary); cursor:pointer; }
.mn-icon-btn.is-add { background:rgba(255,255,255,.07); color:var(--af-text-primary); }
.mn-icon-btn svg { width:18px; height:18px; }
.mn-icon-btn:disabled { opacity:.4; }
.mn-search { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; background:rgba(255,255,255,.05); color:var(--af-text-tertiary); }
.mn-search svg { width:18px; height:18px; flex:none; }
.mn-search input { flex:1; min-width:0; border:0; outline:none; background:none; color:var(--af-text-primary); font:15.5px var(--font); }
.mn-search:focus-within { border-color:rgba(255,255,255,.22); }
.mn-ballot { display:flex; flex-direction:column; gap:12px; }
.mn-vote-card { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.07);
  border-radius:18px; background:rgba(255,255,255,.035); }
.mn-vote-card .mn-candidate-open { grid-template-columns:56px minmax(0,1fr); padding:0; }
.mn-vote { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.mn-vote-option { min-height:44px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:none;
  color:var(--af-text-secondary); font:600 14.5px var(--font); cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.mn-vote-option[aria-checked="true"] { border-color:transparent; background:var(--af-accent); color:var(--af-on-accent); }
.mn-vote-option:active { transform:scale(.97); }
.mn-submitted { display:flex; flex-direction:column; align-items:center; padding:36px 12px 8px; text-align:center; }
.mn-submitted h2 { margin:0 0 6px; color:var(--af-text-primary); font-size:20px; font-weight:700; }
.mn-submitted p { margin:0; color:var(--af-text-secondary); font-size:15px; }
.mn-winner { display:flex; flex-direction:column; align-items:center; padding:6px 0 4px; text-align:center; }
.mn-kicker { margin:0 0 14px; color:var(--af-text-tertiary); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.mn-winner-card { display:flex; flex-direction:column; align-items:center; gap:14px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.mn-winner-card .mn-candidate-copy { align-items:center; }
.mn-winner-card .mn-candidate-copy b { max-width:280px; font-size:22px; font-weight:720; letter-spacing:-.02em; white-space:normal; text-align:center; }
.mn-winner-card .mn-candidate-copy span { font-size:15px; color:var(--af-text-secondary); }
.mn-reveal-list { display:flex; flex-direction:column; margin-top:10px; }
.mn-reveal-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:52px;
  border-bottom:1px solid rgba(255,255,255,.06); }
.mn-reveal-row:last-child { border-bottom:0; }
.mn-reveal-row .friend-avatar { width:34px; height:34px; font-size:12px; }
.mn-reveal-name { overflow:hidden; color:var(--af-text-primary); font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.mn-reveal-score { color:var(--af-text-primary); font-size:20px; font-weight:720; font-variant-numeric:tabular-nums; }
.mn-reveal-wait { color:var(--af-text-tertiary); font-size:13px; }
.mn-reveal-average { display:flex; align-items:baseline; gap:8px; margin:4px 0 0; }
.mn-reveal-average b { color:var(--af-text-primary); font-size:40px; font-weight:760; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.mn-reveal-average span { color:var(--af-text-tertiary); font-size:14px; }
/* Отправка всегда под рукой: длинный «Хочу» не должен уносить её вниз. Бар
   садится над навигацией; под ним — тот же фон страницы, без стекла. */
.gp-send-bar { position:sticky; bottom:calc(var(--nav-clearance) - 24px); z-index:5; margin:24px -20px 0;
  padding:12px 20px 10px; background:linear-gradient(to bottom, rgba(0,0,0,0), var(--af-bg) 28%); }
.gp-vote { display:inline-flex; align-items:center; gap:6px; min-width:64px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; background:none; color:var(--af-text-secondary);
  font:650 14px var(--font); font-variant-numeric:tabular-nums; cursor:pointer; }
.gp-vote svg { width:16px; height:16px; opacity:.35; }
.gp-vote[aria-pressed="true"] { border-color:transparent; background:var(--af-accent); color:var(--af-on-accent); }
.gp-vote[aria-pressed="true"] svg { opacity:1; }
.gp-vote:disabled { opacity:.5; }
/* «Спросить друзей» 2.0: сборщик сеткой постеров. Касание — выбор, номер в
   углу — порядок в карточке. Монохром: выбранный — светлая рамка и белая метка. */
.gp-search { margin:4px 0 8px; }
.gp-grid-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 10px; }
.gp-grid-head h2 { margin:0; color:var(--af-text-primary); font-size:18px; font-weight:700; letter-spacing:-.02em; }
.gp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; }
.gp-more { display:block; min-height:44px; margin:12px auto 0; }
.mn-icon-btn.is-busy, .frp-row.is-busy, .gp-find.is-busy { opacity:.5; pointer-events:none; }
/* Найденное в «Спросить друзей»: ряд целиком — кнопка, «+» справа. */
/* Неактивная отправка — суцільна: сквозь полупрозрачную просвечивали постеры. */
.gp-send-bar .friend-cta:disabled { opacity:1; background:#1f2024; color:var(--af-text-tertiary); }
.gp-find { display:grid; grid-template-columns:44px minmax(0,1fr) 36px; align-items:center; gap:12px; width:100%; min-height:72px;
  padding:6px 0; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.gp-find:last-child { border-bottom:0; }
.gp-find:active { background:rgba(255,255,255,.04); }
.gp-find-add { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  color:var(--af-text-primary); }
.gp-find-add svg { width:18px; height:18px; }
[data-gp-search-results] { margin-bottom:6px; }
.gp-tile { position:relative; display:flex; flex-direction:column; gap:3px; min-width:0; padding:0; border:0; background:none;
  color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.gp-tile-poster { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:2/3; overflow:hidden; border-radius:14px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .14s ease, box-shadow .14s ease; }
.gp-tile-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gp-tile-poster > span { color:var(--af-text-tertiary); font-size:22px; font-weight:700; }
.gp-tile:active .gp-tile-poster { transform:scale(.97); }
.gp-tile.is-on .gp-tile-poster { box-shadow:0 0 0 2px var(--af-text-primary); }
.gp-tile[aria-disabled="true"] .gp-tile-poster { opacity:.45; }
.gp-tile-mark { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; font-weight:750; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.gp-tile-mark svg { width:14px; height:14px; }
.gp-tile.is-on .gp-tile-mark { background:var(--af-text-primary); color:var(--af-bg); }
.gp-tile-title { margin-top:5px; overflow:hidden; color:var(--af-text-primary); font-size:13.5px; font-weight:620; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gp-tile-sub { color:var(--af-text-tertiary); font-size:12px; }
/* Экран вопроса: строка — постер + совет. Полоса — доля от лидера. */
.gp-rows { display:flex; flex-direction:column; gap:8px; }
.gp-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:8px; border-radius:18px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); }
.gp-row.is-leader { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
.gp-row-poster { padding:0; border:0; background:none; cursor:pointer; }
.gp-row-poster .mn-poster { width:48px; }
.gp-row-vote { display:grid; grid-template-columns:minmax(0,1fr) auto 30px; grid-template-areas:"copy count check" "bar bar check";
  align-items:center; gap:6px 10px; min-height:56px; padding:0; border:0; background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer; }
.gp-row-copy { grid-area:copy; display:flex; align-items:baseline; gap:8px; min-width:0; }
.gp-row-copy b { overflow:hidden; color:var(--af-text-primary); font-size:15.5px; font-weight:640; text-overflow:ellipsis; white-space:nowrap; }
.gp-row-copy small { flex:none; color:var(--af-text-secondary); font-size:12px; font-weight:600; text-transform:lowercase; }
.gp-row-bar { grid-area:bar; height:4px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.08); }
.gp-row-bar i { display:block; height:100%; border-radius:inherit; background:rgba(255,255,255,.55); transition:width .3s ease; }
.gp-row.is-leader .gp-row-bar i { background:var(--af-text-primary); }
.gp-count { grid-area:count; color:var(--af-text-secondary); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.gp-row-check { grid-area:check; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2); color:transparent; }
.gp-row-check svg { width:15px; height:15px; }
.gp-row-vote[aria-pressed="true"] .gp-row-check { border-color:transparent; background:var(--af-text-primary); color:var(--af-bg); }
.gp-row-vote:disabled { opacity:.5; }
.gp-secondary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.gp-secondary .friend-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.gp-secondary .friend-link svg { width:16px; height:16px; }
/* Статус открытого вопроса под плиткой «Спросить друзей». */
.gp-status-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; min-height:64px;
  padding:8px 6px; border:0; border-radius:14px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.gp-status-row:active { background:rgba(255,255,255,.05); }
.gp-stack { display:flex; padding-left:10px; }
.gp-stack-poster { position:relative; display:grid; place-items:center; width:34px; aspect-ratio:2/3; margin-left:-10px; overflow:hidden;
  border-radius:7px; background:rgba(255,255,255,.08); box-shadow:0 0 0 2px var(--af-bg); }
.gp-stack-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gp-stack-poster.is-empty svg { width:16px; height:16px; color:var(--af-text-tertiary); }
.gp-status-copy { overflow:hidden; color:var(--af-text-primary); font-size:15px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mn-hub .mn-hub-row.is-attention .friend-copy span { color:var(--af-text-primary); }
.mn-hub-mark { background:rgba(255,255,255,.07); }
.mn-hub-mark svg { width:20px; height:20px; }
.mn-hub-create { width:100%; margin:4px 0 8px; background:rgba(255,255,255,.07); color:var(--af-text-primary); }
.mn-together { width:100%; margin-top:16px; }
@media (prefers-reduced-motion: reduce) {
  .mn-vote-option, .mn-skeleton span { transition:none; animation:none; }
}

/* Шапка экрана друга без экранной «назад» (есть родная): меню — справа. */
.friend-head .friends-head-add { margin-left:auto; }
/* Вкладка «Друзья» кинопрофиля: карточки друзей сеткой. */
.friends-tab { padding:0 20px var(--nav-clearance); }
.friends-tab-actions { display:flex; margin:2px 0 6px; }
.friends-add-cta { width:100%; min-height:48px; background:rgba(255,255,255,.07); color:var(--af-text-primary); }
.friends-embed { padding:0; }
.friend-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
/* Карточка вкуса: полоса общих постеров сверху, лицо на её краю, ниже — имя,
   совпадение и одна строка связи. Постеры — то, что связывает двоих. */
.friend-card { position:relative; display:grid; grid-template-rows:auto 1fr; min-width:0; padding:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(255,255,255,.04);
  color:inherit; font:inherit; text-align:left; cursor:pointer; transition:transform .14s ease;
  -webkit-tap-highlight-color:transparent; }
.friend-card:active { transform:scale(.97); }
.friend-card-strip { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; height:92px;
  background:rgba(255,255,255,.03); }
.friend-card-strip img, .friend-card-noposter { display:block; width:100%; height:100%; object-fit:cover; background:rgba(255,255,255,.06); }
.friend-card-strip::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,12,14,0) 20%, rgba(18,18,21,.94) 100%); }
.friend-card-strip.is-empty { background:radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 70%); }
.friend-card-strip.is-empty::after { display:none; }
.friend-card-body { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0;
  padding:0 14px 14px; margin-top:-28px; }
.friend-avatar.is-card { width:56px; height:56px; margin-bottom:8px; font-size:19px; box-shadow:0 0 0 3px rgba(18,18,21,1); }
.friend-card-who { display:flex; flex-direction:column; min-width:0; max-width:100%; }
.friend-card-name { max-width:100%; overflow:hidden; color:var(--af-text-primary); font-size:15.5px; font-weight:650;
  text-overflow:ellipsis; white-space:nowrap; }
.friend-card-handle { max-width:100%; overflow:hidden; color:var(--af-text-tertiary); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.friend-card-match { display:flex; flex-direction:column; gap:3px; margin-top:10px; }
.friend-card-score { color:var(--af-text-primary); font-size:26px; font-weight:740; letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums; }
.friend-card-score small { margin-left:1px; color:var(--af-text-tertiary); font-size:14px; font-weight:600; }
.friend-card-note { color:var(--af-text-tertiary); font-size:12.5px; line-height:1.3; }
.friend-card-signal { margin-top:auto; padding-top:6px; color:var(--af-text-secondary); font-size:12.5px; line-height:1.3; }
/* Нечётная последняя — на всю ширину и своей раскладкой: лицо и цифры
   слева, полоса постеров справа. Один друг — задуманная карточка, а не
   половина пропавшей пары. */
.friend-cards > .friend-card:last-child:nth-child(odd) { grid-column:1 / -1; grid-template-rows:none;
  grid-template-columns:minmax(0,1fr) minmax(0,44%); min-height:148px; }
.friend-cards > .friend-card:last-child:nth-child(odd) .friend-card-strip { grid-column:2; grid-row:1; height:auto; }
.friend-cards > .friend-card:last-child:nth-child(odd) .friend-card-strip::after {
  background:linear-gradient(90deg, rgba(18,18,21,.96) 0%, rgba(12,12,14,0) 45%); }
.friend-cards > .friend-card:last-child:nth-child(odd) .friend-card-strip.is-empty { background:radial-gradient(100% 120% at 100% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); }
.friend-cards > .friend-card:last-child:nth-child(odd) .friend-card-body { grid-column:1; grid-row:1; margin-top:0; padding:16px; }

/* Профиль друга: одно главное действие над вкладками. */
.friend-primary-actions { display:flex; margin:0 0 14px; }
.friend-recommend-cta { width:100%; min-height:48px; background:rgba(255,255,255,.07); color:var(--af-text-primary); }

/* Лист «Предложить фильм». Скрытое скрыто, даже если у блока свой display. */
.frp [hidden] { display:none !important; }
.frp-to { display:flex; align-items:center; gap:8px; }
.frp-to .friend-avatar { width:22px; height:22px; font-size:10px; }
.frp-search { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.055); color:var(--af-text-tertiary); }
.frp-search svg { flex:none; width:18px; height:18px; }
.frp-search input { flex:1; min-width:0; height:44px; border:0; background:none; color:var(--af-text-primary); font:16px var(--font); outline:none; }
.frp-search input::-webkit-search-cancel-button { display:none; }
.frp-suggested { margin-bottom:16px; }
.frp-suggested h3 { margin:0; color:var(--af-text-primary); font-size:16px; font-weight:680; letter-spacing:-.01em; }
.frp-suggested p { margin:2px 0 10px; color:var(--af-text-tertiary); font-size:13px; line-height:1.35; }
.frp-shelf { display:flex; gap:8px; margin:0 -20px; padding:0 20px 2px; overflow-x:auto; scrollbar-width:none; }
.frp-shelf::-webkit-scrollbar { display:none; }
.frp-shelf-item { position:relative; flex:none; width:78px; padding:0; border:0; background:none; cursor:pointer; }
.frp-shelf-poster { position:relative; display:block; width:78px; aspect-ratio:2/3; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.06); }
.frp-shelf-poster img { width:100%; height:100%; object-fit:cover; }
.frp-shelf-rating { position:absolute; top:6px; right:6px; min-width:22px; padding:2px 6px; border-radius:9px;
  background:rgba(0,0,0,.66); color:#fff; font-size:12px; font-weight:700; text-align:center; }
.frp-switch { margin-bottom:10px; }
.frp-switch[data-active-index="1"] .stats-switch-indicator { transform:translateX(100%); }
.frp-list, .frp-results { display:flex; flex-direction:column; min-height:60px; }
.frp-results { margin-bottom:6px; }
.frp-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:72px;
  padding:6px 4px; border:0; border-radius:12px; background:none; color:var(--af-text-primary); font:inherit; text-align:left; cursor:pointer; }
.frp-row:active { background:rgba(255,255,255,.06); }
.frp-poster { position:relative; display:block; width:44px; aspect-ratio:2/3; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.06); }
.frp-poster img { width:100%; height:100%; object-fit:cover; }
.frp-poster .noposter, .frp-shelf-poster .noposter { display:grid; place-items:center; height:100%; padding:4px;
  color:var(--af-text-tertiary); font-size:9px; text-align:center; overflow:hidden; }
.frp-poster.is-large { width:72px; border-radius:12px; }
.frp-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.frp-copy b { overflow:hidden; font-size:15px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.frp-copy span { color:var(--af-text-tertiary); font-size:13px; }
.frp-rating { display:inline-flex; align-items:center; gap:4px; color:var(--af-text-secondary); font-size:14px; font-weight:650;
  font-variant-numeric:tabular-nums; }
.frp-rating svg { width:14px; height:14px; }
.frp-more { align-self:center; min-height:44px; margin-top:6px; }
.frp-note { margin:14px 4px; color:var(--af-text-tertiary); font-size:14px; line-height:1.4; }
.frp-chosen { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:14px; margin-bottom:16px; }
.frp-chosen .frp-copy b { white-space:normal; font-size:17px; }
.frp-change { display:block; min-height:44px; margin:6px auto 0; }
.friend-cta.is-done { background:rgba(255,255,255,.1); color:var(--af-text-primary); }

/* Экран друга. */
.friend-hero { display:flex; align-items:center; gap:16px; margin:6px 0 18px; }
.friend-hero-copy { min-width:0; }
.friend-hero-copy h2 { margin:0; overflow:hidden; color:var(--af-text-primary); font-size:24px; font-weight:720; letter-spacing:-.03em;
  text-overflow:ellipsis; white-space:nowrap; }
.friend-hero-copy span { color:var(--af-text-tertiary); font-size:14px; }
.friend-switch { margin-bottom:6px; }
.friend-switch[data-active-index="1"] .stats-switch-indicator { transform:translateX(100%); }
.friend-life-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.friend-life { min-height:0; }
/* Нечётная последняя карточка — на всю ширину, а не сиротой в полрядка. */
.friend-life-grid > .friend-life:last-child:nth-child(odd) { grid-column:1 / -1; }
.friend-rail { margin:0 -20px; padding:0 20px; }
.friend-rail-empty { margin:0; color:var(--af-text-tertiary); font-size:14px; }
.profile-taste-card.is-static { cursor:default; }
.friend-compat { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:18px; padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.06); }
.friend-compat.is-empty p { margin:0; color:var(--af-text-secondary); font-size:15px; line-height:1.45; }
.friend-compat-score { color:var(--af-text-primary); font-size:52px; font-weight:760; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.friend-compat-score small { margin-left:2px; color:var(--af-text-tertiary); font-size:22px; font-weight:650; }
.friend-compat-score.is-tentative { font-size:26px; letter-spacing:-.02em; }
.friend-compat > span { color:var(--af-text-tertiary); font-size:13.5px; }
.friend-gaps { display:flex; flex-direction:column; gap:8px; width:100%; margin-top:14px; }
.friend-gap { display:grid; grid-template-columns:96px minmax(0,1fr) 28px; align-items:center; gap:10px; color:var(--af-text-secondary); font-size:13px; }
.friend-gap b { color:var(--af-text-primary); font-variant-numeric:tabular-nums; text-align:right; }
.friend-gap-bar { height:6px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.07); }
.friend-gap-bar i { display:block; height:100%; border-radius:inherit; background:var(--af-accent); }
.friend-disagree-list { display:flex; flex-direction:column; }
.friend-disagree { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 0; border:0;
  border-bottom:1px solid rgba(255,255,255,.06); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.friend-disagree-title { min-width:0; overflow:hidden; color:var(--af-text-primary); font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.friend-disagree-scores { display:flex; gap:12px; flex:none; color:var(--af-text-tertiary); font-size:13px; }
.friend-disagree-scores b { color:var(--af-text-primary); font-size:15px; font-variant-numeric:tabular-nums; }
.friend-tile-action { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:6px 10px; border:1px solid rgba(255,255,255,.1);
  border-radius:999px; background:rgba(255,255,255,.05); color:var(--af-text-primary); font:600 12.5px var(--font); cursor:pointer; }
.friend-tile-action svg { width:14px; height:14px; }
.friend-tile-action.is-done { border-color:transparent; background:none; color:var(--af-text-tertiary); }

/* Ряд «Друзья» на карточке фильма. */
.detail-v2 .d-friends { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
.detail-v2 .d-friends[hidden] { display:none; }
.d-friends-head h2 { margin:0 0 10px; color:var(--af-text-primary); font-size:19px; font-weight:680; letter-spacing:-.03em; }
.d-friends-row { display:flex; align-items:center; gap:12px; }
.d-friends-faces { display:flex; flex:none; }
.d-friends-copy { display:flex; flex-direction:column; gap:3px; min-width:0; color:var(--af-text-secondary); font-size:14px; line-height:1.35; }
.d-friends-copy b { color:var(--af-text-primary); font-variant-numeric:tabular-nums; }
.d-friends-copy small { color:var(--af-text-tertiary); font-size:12.5px; }
.d-friends-heart svg { width:13px; height:13px; vertical-align:-2px; color:var(--af-text-primary); }
.d-friends-recommend { display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-top:12px; padding:0 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.05); color:var(--af-text-primary);
  font:600 14px var(--font); cursor:pointer; transition:transform .14s ease; }
.d-friends-recommend svg { width:17px; height:17px; }
.d-friends-recommend:active { transform:scale(.97); }

.friend-invite .accept { align-items:center; text-align:center; }

@media (max-width:360px) {
  .friend-row { grid-template-columns:40px minmax(0,1fr) auto auto; gap:10px; }
  .friend-avatar { width:40px; height:40px; }
  .friend-avatar.is-hero { width:72px; height:72px; }
  .friend-compat-score { font-size:44px; }
  .friend-gap { grid-template-columns:84px minmax(0,1fr) 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .friends-sheet, .friends-sheet-backdrop, .friend-pill, .friend-cta, .friends-head-add, .d-friends-recommend { transition:none; }
  .friend-row.is-ghost .friend-avatar, .friend-ghost-line { animation:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .friends-sheet { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgb(20,21,25); }
}

/* Постер выдачи заменён каноническим — мягко, без мигания пустоты. */
.search-content.search-stale { opacity:.45; pointer-events:none; transition:opacity .15s ease; }

/* ── Рівень пристрою: скло постійно видимих поверхонь ──────────────────────
   Високий рівень не змінюється. Середній Android — трохи легший blur таббару.
   Слабкий Telegram-Android (LOW) — щільний фон без backdrop-filter: blur, що
   живе поверх прокрутки в кожному кадрі, там дорожчий за весь інший екран.
   Рівень ставить js/performance-policy.js на <html>. */
html[data-performance-tier="medium"] #tabbar{
  -webkit-backdrop-filter:blur(18px) saturate(1.4) brightness(.94);
  backdrop-filter:blur(18px) saturate(1.4) brightness(.94);
}
html[data-performance-tier="low"] #tabbar{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,18,20,.96);
}
html[data-performance-tier="low"] .d-sticky.show{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,5,5,.96);
}

/* ── Колокольчик уведомлений (временно вместо кота) ─────────────────────────
   Тихая круглая кнопка на поверхности, монохромный счётчик — как остальные
   контролы шапки. Кот и его движок остаются в коде, но не рисуются. */
.notification-companion.notification-bell{
  display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  background:var(--s2);border:1px solid rgba(255,255,255,.06);color:var(--af-text-primary);
  transition:transform .12s ease,background-color .12s ease;
}
.notification-bell .notification-bell-glyph{width:22px;height:22px;}
.notification-bell:active{transform:scale(.94);background:var(--s3);}
.notification-bell .notification-companion-count{
  top:-3px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--af-accent-solid);color:var(--af-on-accent);border:2px solid var(--af-bg);
  box-shadow:none;font:700 10.5px/1 var(--font);
}
.notification-bell .watchcat,.notification-bell .watchcat-rive,
.notification-bell .notification-companion-stage{display:none;}

/* Ошибка открытия карточки — одна, внутри карточки, с «Повторить». */
.d-load-error{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:32px 24px 8px;}
.d-load-error h2{font-size:19px;font-weight:650;letter-spacing:-0.01em;color:var(--af-text-primary);}
.d-load-error p{font-size:15px;line-height:1.4;color:var(--af-text-secondary);max-width:30ch;}
.d-load-error-retry{margin-top:10px;min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--af-surface-2, var(--s2));color:var(--af-text-primary);font:600 15px/1 var(--font);
  border:1px solid rgba(255,255,255,.08);}
.d-load-error-retry:active{transform:scale(.97);}
.d-load-error-retry[aria-busy="true"]{opacity:.6;}

/* ── Вселенная Marvel (js/franchise.js) ───────────────────────────────────────
   Материал — фильмографии человека: строка спокойных таблеток для маршрутов
   и её жидкие сегменты для уточнений; строки — «Топа». Здесь только раскладка
   и то, чего у этих компонентов нет.

   ШКАЛА — текстовые стили iOS (HIG, размер по умолчанию): headline 17/600,
   subhead 15, footnote 13, caption 12; меньше 11pt текста нет. Веса — только
   400/600/700. Зоны касания — не меньше 44pt. Один фокус на экране —
   карточка «Дальше»; всё остальное тише её. */
.fr-page{--fr-headline:17px;--fr-subhead:15px;--fr-footnote:13px;--fr-caption:12px;}
/* Маршруты — тихие текстовые капсулы, как категории в Apple TV: у невыбранных
   нет рамки и фона, выбранная — одна мягкая заливка. Справа строка
   растворяется — видно, что её можно листать. */
.fr-rail{display:flex;gap:2px;margin:4px 0 0;padding:0 20px 2px;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
.fr-rail::-webkit-scrollbar{display:none;}
.fr-rail .fr-lens{flex:none;height:44px;padding:0 15px;border:0;border-radius:22px;background:transparent;box-shadow:none;
  color:var(--af-text-secondary);font:600 var(--fr-subhead) var(--font);letter-spacing:-.015em;white-space:nowrap;
  cursor:pointer;touch-action:manipulation;transition:background .18s ease,color .18s ease;}
.fr-rail .fr-lens.is-set{background:rgba(255,255,255,.12);color:var(--af-text-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.fr-rail .fr-lens:active{transform:scale(.97);}
.fr-rail .fr-lens:last-child{margin-right:24px;}
.fr-lens:focus-within{outline:none;}
.fr-lens:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.fr-refine{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:10px 20px 0;}
.fr-refine[hidden]{display:none;}
.fr-segment .person-v2-segment-option{font-size:14px;}
.fr-segment[style*="--segments:4"] .person-v2-segment-option{font-size:13px;padding:0 2px;}
/* Пояснение уровня — одна тихая строка-подпись под сегментом. */
.fr-caption{margin:10px 20px 0;color:var(--af-text-tertiary);font-size:var(--fr-footnote);line-height:1.38;}
.fr-caption[hidden]{display:none;}

/* «Дальше» — единственный фокус экрана, как «Далее» в Apple TV: постер, что
   смотреть, сколько займёт, где ты на всём маршруте и одно действие. */
.fr-next-slot{margin:16px 20px 16px;}
.fr-next-slot:empty{display:none;}
.fr-next{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"metric metric" "art copy" "progress progress" "action action" "find find";
  column-gap:14px;padding:16px;border:1px solid rgba(255,255,255,.075);border-radius:22px;cursor:pointer;
  background:linear-gradient(180deg,rgba(19,21,25,.62),rgba(10,11,14,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.fr-next-art{grid-area:art;align-self:start;width:64px;}
.fr-next-copy{grid-area:copy;min-width:0;align-self:center;display:flex;flex-direction:column;gap:3px;}
.fr-next-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--af-text-tertiary);
  font-size:var(--fr-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.fr-next-copy b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--af-text-primary);
  font-size:var(--fr-headline);font-weight:600;line-height:1.25;letter-spacing:-.02em;}
.fr-next-meta{color:var(--af-text-secondary);font-size:var(--fr-footnote);font-variant-numeric:tabular-nums;}
/* Прогресс маршрута — одна строка и одна полоска внутри карточки. */
.fr-next-progress{grid-area:progress;display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.fr-progress-text{color:var(--af-text-secondary);font-size:var(--fr-footnote);font-variant-numeric:tabular-nums;}
.fr-next-step-bar{position:relative;display:block;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.fr-next-step-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--nav-accent);transition:width .35s var(--af-nav-ease);}
/* Одно действие на всю ширину. Открыть карточку — касание по самой карточке. */
.fr-next-watched{grid-area:action;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:14px;
  padding:0 16px;border:0;border-radius:999px;background:var(--nav-accent);color:#0b0b0c;font:600 var(--fr-subhead) var(--font);
  white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .12s ease;}
.fr-next-watched:active{transform:scale(.97);}
.fr-next-watched:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:2px;}
.fr-next-watched-icon{width:15px;height:15px;display:block;}
/* Название — кнопка: карточку можно открыть и с клавиатуры, не задевая «Смотрел». */
.fr-next-open{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;
  cursor:pointer;touch-action:manipulation;}
.fr-next-open:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:2px;border-radius:6px;}
/* «К месту в списке» — тихая вторая строка под действием. */
.fr-next-find{grid-area:find;justify-self:center;min-height:44px;margin-top:2px;padding:0 12px;border:0;background:none;
  color:var(--af-text-secondary);font:600 var(--fr-footnote) var(--font);cursor:pointer;touch-action:manipulation;}
.fr-next-find:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-4px;border-radius:10px;}
/* Фильтр типа — маленькое жидкое стекло, не во всю ширину: отбор по формату,
   а не ещё один главный выбор. Зона касания — 44pt за счёт невидимого поля. */
.fr-segment.is-mini{width:min(100%,252px);height:34px;border-radius:17px;justify-self:start;}
.fr-segment.is-mini .person-v2-segment-option{height:32px;font-size:13px;border-radius:15px;}
.fr-segment.is-mini .person-v2-segment-option::after{content:"";position:absolute;inset:-5px 0;}
.fr-segment.is-mini .person-v2-segment-indicator{border-radius:14px;}
/* «Судный день»: отсчёт — цифрой, как в виджетах iOS, а не абзацем. */
.fr-metric{grid-area:metric;display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);}
.fr-metric-value{flex:none;color:var(--af-text-primary);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.fr-metric-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.fr-metric-label{color:var(--af-text-primary);font-size:var(--fr-subhead);font-weight:600;}
.fr-metric-where,.fr-metric-pace{color:var(--af-text-secondary);font-size:var(--fr-footnote);line-height:1.3;}
/* Маршрут пройден — завершение и следующий шаг, а не тупик. */
.fr-next.is-done{display:flex;flex-direction:column;align-items:stretch;gap:4px;cursor:default;}
.fr-next.is-done .fr-metric{margin-bottom:12px;}
.fr-next.is-done > b{color:var(--af-text-primary);font-size:var(--fr-subhead);font-weight:600;}
.fr-next.is-done > span:not(.fr-metric){color:var(--af-text-secondary);font-size:var(--fr-footnote);line-height:1.38;}
.fr-done-head{display:flex;align-items:center;gap:8px;}
.fr-done-head b{color:var(--af-text-primary);font-size:var(--fr-headline);font-weight:600;}
.fr-done-icon{flex:none;width:18px;height:18px;padding:3px;border-radius:999px;background:var(--nav-accent);color:#0b0b0c;box-sizing:content-box;}
.fr-done-meta{font-variant-numeric:tabular-nums;}
.fr-goto{margin-top:12px;}
/* «Анонсы»: ближайшая премьера — та же цифра; касание открывает тайтл. */
.fr-next.fr-ann{cursor:pointer;}
.fr-next.fr-ann .fr-metric{margin:0;padding:0;border-bottom:0;}

/* Сага — тихий секционный заголовок над фазами, без складки. */
.fr-saga{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:20px 14px 4px;}
.fr-saga:first-child{padding-top:14px;}
.fr-saga b{color:var(--af-text-tertiary);font-size:var(--fr-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.fr-saga span{color:var(--af-text-tertiary);font-size:var(--fr-caption);}
/* Заголовок блока — история, мир или фаза; подпись — годы и принцип порядка. */
.fr-block{display:flex;align-items:baseline;gap:8px;padding:14px 14px 6px;border-bottom:1px solid rgba(255,255,255,.045);}
.fr-block b{min-width:0;color:var(--af-text-primary);font-size:var(--fr-subhead);font-weight:600;letter-spacing:-.01em;}
.fr-block-order{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;
  color:var(--af-text-tertiary);font-size:var(--fr-footnote);font-variant-numeric:tabular-nums;}
/* Складка: строка-кнопка со счётом, шевроном и тонкой полоской прогресса.
   Закрытая — одна строка; пройденная — с галочкой. */
.fr-block.is-toggle{display:block;padding:0;}
.fr-block-button{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:12px 14px 14px;
  border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation;}
.fr-block-button:active{background:rgba(255,255,255,.035);}
.fr-block-button:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.fr-block-title{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;}
.fr-block-title .fr-block-order{flex:none;}
.fr-block-title b{flex:0 1 auto;min-width:0;color:var(--af-text-primary);font-size:var(--fr-headline);font-weight:600;letter-spacing:-.015em;}
.fr-block-count{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--af-text-tertiary);font-size:var(--fr-footnote);
  font-variant-numeric:tabular-nums;}
.fr-block-check{width:12px;height:12px;display:block;}
.fr-block.is-done .fr-block-count{color:var(--af-text-secondary);}
.fr-block-chevron{flex:none;width:14px;height:14px;display:block;color:var(--af-text-tertiary);transition:transform .2s var(--af-nav-ease);}
.fr-block-button[aria-expanded="true"] .fr-block-chevron{transform:rotate(180deg);}
.fr-block-bar{position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;}
.fr-block-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--nav-accent);opacity:.75;}
.fr-block.is-folded .fr-block-title b{color:var(--af-text-secondary);}
.fr-block.is-soon{align-items:center;padding:16px 14px 10px;}
.fr-block.is-soon .fr-block-title b{font-size:var(--fr-headline);}
/* «Просмотрено · N» — свёрнутое просмотренное одной строкой в начале списка. */
.fr-fold{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:0 14px;
  border:0;border-bottom:1px solid rgba(255,255,255,.045);background:transparent;color:var(--af-text-secondary);
  font:600 var(--fr-footnote) var(--font);text-align:left;cursor:pointer;touch-action:manipulation;}
.fr-fold:active{background:rgba(255,255,255,.035);}
.fr-fold:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.fr-fold-icon{flex:none;width:14px;height:14px;display:block;transition:transform .2s var(--af-nav-ease);}
.fr-fold[aria-expanded="true"] .fr-fold-icon{transform:rotate(180deg);}

/* Строка — как трек в Apple Music: номер тихий, название — главное, одна строка
   сведений (год · формат · длительность), примечания — маленькими метками. */
.fr-list{margin-bottom:var(--nav-clearance);}
.fr-list.is-empty,.fr-list:has(> .grid){border:0;background:none;box-shadow:none;}
.fr-row{grid-template-columns:24px 46px minmax(0,1fr) auto;column-gap:12px;min-height:84px;}
.fr-row:focus{scroll-margin:120px 0;}
.fr-row:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-3px;}
.fr-row .fr-num{font-size:var(--fr-footnote);font-weight:600;text-align:center;font-variant-numeric:tabular-nums;}
.fr-row .top-ranked-art{width:46px;}
.fr-row .top-ranked-copy b{font-size:var(--fr-subhead);font-weight:600;line-height:1.25;}
.fr-row .top-ranked-original{font-size:var(--fr-footnote);}
/* Сведения переносятся на вторую строку, а не теряются за многоточием. */
.fr-meta{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;
  font-size:var(--fr-footnote) !important;line-height:1.3;color:var(--af-text-secondary) !important;}
.fr-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.fr-tags i{font-style:normal;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.055);
  color:var(--af-text-secondary);font-size:11px;font-weight:600;line-height:1.35;}
/* «Вне основного сюжета» — контуром и пунктиром, как ответвление временной
   линии: видно сразу, но не кричит. */
.fr-tags i.fr-tag-branch{background:transparent;border:1px dashed rgba(255,255,255,.26);padding:1px 7px;color:rgba(255,255,255,.7);}
/* Отметка «смотрел» — круглая кнопка в строке. Видимый круг 28px, зона
   касания 44px: строка рядом открывает карточку, промахнуться нельзя. */
.fr-mark{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-8px -6px -8px 0;
  padding:0;border:0;background:transparent;color:rgba(255,255,255,.0);cursor:pointer;touch-action:manipulation;}
/* box-sizing — явно: `*` не задевает псевдоэлементы, и рамка раздувала круг до
   31px, сдвигая его на 1.5px вправо-вниз от галочки. */
.fr-mark::before{content:"";position:absolute;left:8px;top:8px;width:28px;height:28px;box-sizing:border-box;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.22);background:transparent;transition:background .16s ease,border-color .16s ease;}
.fr-mark-icon{position:relative;width:14px;height:14px;display:block;transition:color .16s ease,transform .18s var(--af-nav-ease);}
.fr-mark.is-watched{color:#0b0b0c;}
.fr-mark.is-watched::before{background:var(--nav-accent);border-color:var(--nav-accent);}
.fr-mark:active .fr-mark-icon{transform:scale(.86);}
.fr-mark:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:-4px;border-radius:999px;}
.fr-date{white-space:nowrap;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.045);
  color:var(--af-text-secondary);font-size:var(--fr-caption);font-weight:600;line-height:1.2;text-align:center;}
.fr-row.is-done .top-ranked-copy b{color:var(--af-text-secondary);}
.fr-row.is-done .top-ranked-art img{opacity:.55;}
/* Открытая складка: строки появляются коротким движением, а не возникают. */
.fr-row.is-entering{animation:fr-row-in .18s var(--af-nav-ease) both;}
@keyframes fr-row-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media(max-width:370px){
  .fr-rail{padding:0 16px 2px;scroll-padding-inline:16px;}
  .fr-refine,.fr-caption,.fr-next-slot{margin-left:16px;margin-right:16px;}
  .fr-segment .person-v2-segment-option{font-size:13px;padding:0 4px;}
  /* Четыре полки на 320px: отступ не съедает место у «Анимации». */
  .fr-segment[style*="--segments:4"] .person-v2-segment-option{font-size:12.5px;padding:0 1px;letter-spacing:-.02em;}
  .fr-row{grid-template-columns:22px 42px minmax(0,1fr) auto;column-gap:10px;}
  .fr-row .top-ranked-art{width:42px;}
  .fr-next{grid-template-columns:56px minmax(0,1fr);column-gap:12px;padding:14px;}
  .fr-next-art{width:56px;}
  .fr-metric-value{font-size:38px;}
}
@media (prefers-reduced-motion:reduce){
  .fr-lens,.fr-fold-icon,.fr-block-chevron,.fr-next-step-bar i{transition:none;}
  .fr-row.is-entering{animation:none;}
}

/* ── Тема Дума: маршрут «Перед «Судным днём»» ─────────────────────────────────
   Тронный зал Латверии из маркетинга фильма: кадр в монохромной зелени постеров,
   свет стрельчатого витража с розой, флаг Латверии, металл маски и старое
   золото зала, руны в камне. Тема живёт на всём маршруте, но фоном: текст и
   действия главнее. Шрифты и фактура — готовые ресурсы из assets/doom; кадр и
   официальный логотип фильма — из TMDB через прокси картинок, как постеры; без backdrop-filter и без циклических анимаций. */
/* Готовые ресурсы темы (assets/doom, лицензии там же): Forum — римские капители
   с кириллицей, одинаково гармоничные по-русски и по-английски; Noto Sans Runic —
   настоящие руны; стена замка Poly Haven (CC0) — фактура фона. */
@font-face{font-family:"Doom Forum";src:url("assets/doom/forum-cyrillic.woff2") format("woff2");font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Doom Forum";src:url("assets/doom/forum-latin.woff2") format("woff2");font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:"Doom Runic";src:url("assets/doom/noto-sans-runic-subset.woff2") format("woff2");font-display:swap;}
.fr-page[data-lens="doomsday"]{--doom-cloak:#3E7A5C;--doom-cloak-deep:#2F5E47;--doom-cloak-soft:rgba(62,122,92,.30);
  --doom-gold:#B9975F;--doom-gold-soft:rgba(185,151,95,.30);--doom-thread:#7A2323;--nav-accent:var(--doom-cloak);
  --doom-engraved:"Doom Forum",ui-serif,Georgia,serif;
  --doom-numeral:"Doom Forum",ui-serif,Georgia,serif;
  position:relative;isolation:isolate;}
/* Фон всего маршрута: свет зала сверху, стена замка — едва различима. Слои
   закреплены за окном: зал не кончается под коротким списком и не едет при прокрутке. */
.fr-page[data-lens="doomsday"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 460px at 50% -80px,rgba(70,125,92,.20),transparent 72%),
    radial-gradient(90% 500px at 50% 100%,rgba(48,92,68,.14),transparent 70%),
    linear-gradient(180deg,#0B120E 0px,#090D0B 600px,#080B09 100%);
  animation:fr-doom-in .6s ease both;}
/* Стена замка — едва заметной фактурой, в тон зала. */
.fr-page[data-lens="doomsday"]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/doom/castle-wall-slates.jpg") center top/320px auto repeat;opacity:.05;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 18%,#000 82%,rgba(0,0,0,.55));
  mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 18%,#000 82%,rgba(0,0,0,.55));}
.fr-doom[hidden]{display:none;}
.fr-doom{margin:12px 14px 0;}
.fr-doom-hero{position:relative;z-index:1;display:block;height:312px;overflow:hidden;border-radius:26px;background:#0A0F0C;
  box-shadow:0 14px 34px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);animation:fr-doom-in .6s ease both;}
/* Кадр — как на постерах: почти монохром, тени уходят в зелень плаща. */
.fr-doom-photo{position:absolute;inset:0;overflow:hidden;transform:translateZ(0);}
.fr-doom-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  filter:grayscale(.92) contrast(1.18) brightness(.82);}
.fr-doom-photo::after{content:"";position:absolute;inset:0;background:#2A5C42;mix-blend-mode:color;opacity:.85;}
.fr-doom-tone{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% 110%,rgba(5,8,6,.96) 0%,rgba(5,8,6,.55) 45%,transparent 75%),
  linear-gradient(180deg,rgba(6,10,8,.55) 0%,transparent 26%,transparent 50%,rgba(6,9,7,.88) 100%);}
.fr-doom-frame{position:absolute;inset:9px;border:1px solid var(--doom-gold-soft);border-radius:19px;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.22);}
/* Верх: официальный логотип фильма (TMDB) и дата премьеры римскими цифрами. */
.fr-doom-top{position:absolute;left:22px;right:22px;top:20px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.fr-doom-logo{display:block;width:min(74%,280px);height:auto;max-height:96px;object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(70,160,110,.18));}
.fr-doom-logo.is-text{width:auto;color:#E9ECE8;font:400 24px var(--doom-engraved);letter-spacing:.08em;text-transform:uppercase;text-align:center;}
.fr-doom-tag{color:#D9BE8A;font:400 13px var(--doom-engraved);letter-spacing:.32em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7);}
.fr-doom-bottom{position:absolute;left:22px;right:20px;bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.fr-doom-count{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fr-doom-kicker{color:var(--doom-gold);font:400 11px var(--doom-engraved);letter-spacing:.2em;text-transform:uppercase;}
/* Отсчёт — металл маски: светлая сталь сверху, тусклая снизу. */
.fr-doom-days{font:400 76px/0.9 var(--doom-numeral);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;
  color:#E9ECE8;background:linear-gradient(180deg,#FBFCF9 0%,#D9DDD8 48%,#8E9893 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));}
.fr-doom-label{color:#C2CAC5;font:400 12px var(--doom-engraved);letter-spacing:.14em;text-transform:uppercase;}
.fr-doom-live{display:flex;min-width:0;}
/* Трейлер — тихая плашка: волосяная рамка, маленький треугольник, гравированная
   надпись. Видимая высота 34px, зона касания — 44. */
.fr-doom-trailer{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 13px;
  border-radius:999px;border:1px solid rgba(233,226,210,.3);background:rgba(6,9,7,.42);color:#EDE6D6;cursor:pointer;
  touch-action:manipulation;font:400 12px/1 var(--doom-engraved);letter-spacing:.2em;text-transform:uppercase;
  transition:transform .15s ease,border-color .15s ease;}
.fr-doom-trailer::after{content:"";position:absolute;inset:-5px;}
.fr-doom-trailer svg{width:10px;height:10px;fill:var(--doom-gold);}
.fr-doom-trailer:active{transform:scale(.96);border-color:rgba(185,151,95,.6);}
.fr-doom-trailer:focus-visible{outline:2px solid rgba(185,151,95,.7);outline-offset:3px;}
/* Руны, высеченные в камне: полоса стены замка проступает из темноты шапки и
   растворяется в зале; знаки вырезаны — тень сверху, отблеск снизу, искра золота. */
.fr-runes{position:relative;display:flex;align-items:center;gap:12px;height:108px;margin:-34px 0 -8px;padding:28px 26px 0;}
/* Камень начинается под нижним краем шапки и тает книзу и к краям — без шва. */
.fr-runes::before{content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,62,44,.55),rgba(14,26,19,.35)),url("assets/doom/castle-wall-slates.jpg") center 30%/240px auto repeat;
  background-blend-mode:multiply;opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 62%,transparent 100%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 62%,transparent 100%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-composite:intersect;}
.fr-runes i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(185,151,95,.45));box-shadow:0 1px 0 rgba(0,0,0,.6);}
.fr-runes i:last-child{background:linear-gradient(90deg,rgba(185,151,95,.45),transparent);}
.fr-runes-glyphs{flex:none;display:flex;gap:9px;font:400 18px/1 "Doom Runic",serif;}
/* Не зажжённая руна — просто высечена: тень сверху, отблеск снизу. */
.fr-runes-glyphs b{font-weight:400;color:#24332A;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(222,198,146,.35);
  transition:color .4s ease,text-shadow .4s ease;}
/* Зажжённая — светится зеленью магии Дума изнутри камня. */
.fr-runes-glyphs b.is-lit{color:#6FBF8E;text-shadow:0 0 6px rgba(111,191,142,.55),0 0 14px rgba(62,122,92,.6);}
.fr-runes-glyphs b.is-lead{color:#B8F0CC;text-shadow:0 0 4px #7FD3A2,0 0 12px rgba(127,211,162,.85),0 0 26px rgba(62,122,92,.8);}
.fr-runes-ready{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:var(--doom-gold);font:400 11px var(--doom-engraved);
  font-style:normal;letter-spacing:.24em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.9);}
/* Ниже шапки — та же тема: тонированное стекло, гравированные заголовки, железо карточек. */
.fr-page[data-lens="doomsday"] .fr-refine{margin-top:12px;}
.fr-page[data-lens="doomsday"] .fr-segment{border-color:rgba(185,151,95,.16);}
.fr-page[data-lens="doomsday"] .fr-segment .person-v2-segment-indicator{background:var(--doom-cloak-soft);box-shadow:inset 0 0 0 1px var(--doom-gold-soft);}
.fr-page[data-lens="doomsday"] .fr-caption{color:#9AA59F;}
.fr-page[data-lens="doomsday"] .fr-next,.fr-page[data-lens="doomsday"] .fr-list{
  background:linear-gradient(180deg,rgba(16,24,19,.78),rgba(8,10,9,.86));border-color:rgba(185,151,95,.16);
  box-shadow:inset 0 1px 0 rgba(185,151,95,.14);}
.fr-page[data-lens="doomsday"] .fr-next-label{color:var(--doom-gold);font-family:var(--doom-engraved);letter-spacing:.12em;}
.fr-page[data-lens="doomsday"] .fr-block-title b{font-family:var(--doom-engraved);font-weight:400;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;}
.fr-page[data-lens="doomsday"] .fr-block-title b::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 2px 0;
  transform:rotate(45deg);background:var(--doom-gold);opacity:.75;vertical-align:middle;}
.fr-page[data-lens="doomsday"] .fr-fold{font-family:var(--doom-engraved);font-weight:400;letter-spacing:.06em;}
.fr-page[data-lens="doomsday"] .fr-mark.is-watched{color:#F1EFE8;}
.fr-page[data-lens="doomsday"] .fr-next-watched{background:var(--doom-cloak-deep);color:#F1EFE8;box-shadow:inset 0 0 0 1px rgba(185,151,95,.38);}
.fr-caption-pace{display:block;margin-top:4px;color:#B9C2BC;}
/* Цель маршрута — сам «Судный день»: тот же кадр, золотая рамка, гравированное имя. */
.fr-goal{position:relative;display:block;margin:12px 10px 10px;min-height:168px;overflow:hidden;border-radius:20px;cursor:pointer;
  border:1px solid rgba(185,151,95,.42);background:#0B110D;touch-action:manipulation;}
.fr-goal:focus-visible{outline:2px solid rgba(var(--af-accent-rgb),.5);outline-offset:2px;}
.fr-goal:active{transform:scale(.99);}
.fr-goal-photo img{object-position:50% 22%;filter:grayscale(.9) contrast(1.15) brightness(.9);}
.fr-goal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,8,.94) 0%,rgba(6,10,8,.62) 55%,rgba(6,10,8,.25) 100%);}
.fr-goal-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:20px;max-width:78%;}
.fr-goal-label{display:flex;align-items:center;gap:8px;color:var(--doom-gold);font:400 11px var(--doom-engraved);letter-spacing:.2em;text-transform:uppercase;}
.fr-goal-logo{display:block;width:min(100%,230px);height:auto;max-height:80px;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.7));}
.fr-goal-logo.is-text{color:#F1EFE8;font:400 22px/1.15 var(--doom-engraved);letter-spacing:.05em;text-transform:uppercase;}
.fr-goal-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#C2CAC5;font-size:13px;}
.fr-goal-when i{font-style:normal;padding:3px 9px;border-radius:999px;border:1px solid var(--doom-gold-soft);color:#E9E2D2;font-size:12px;}
@keyframes fr-doom-in{from{opacity:0;}to{opacity:1;}}
@media(max-width:370px){
  .fr-doom{margin-left:10px;margin-right:10px;}
  .fr-doom-hero{height:284px;}
  .fr-doom-days{font-size:64px;}
  .fr-doom-trailer{padding:0 12px 0 11px;letter-spacing:.14em;}
  .fr-runes-glyphs{gap:7px;}
}
@media (prefers-reduced-motion:reduce){
  .fr-page[data-lens="doomsday"]::before,.fr-doom-hero{animation:none;}
}

.playback-embed{position:fixed;inset:0;width:100%;height:100dvh;border:0;z-index:10000;background:#09090c;}
.d-watch-action{width:100%;min-height:50px;margin-bottom:10px;border:0;border-radius:16px;font:600 15px var(--font);cursor:pointer;}

/* ── «Кто в кадре?» (js/cast-game.js) ────────────────────────────────────────
   Материал «Подбора»: стекло карточек, монохром, белое главное действие.
   Своих цветов у игры нет — очки и баланс белые, как любая главная цифра
   приложения; функциональный красный остаётся только у промаха.
   Колонка не шире 560px: на планшете и в десктопном Telegram игра выглядит
   так же, как на телефоне, а не растягивается во всю ширину. */
.cg-page{
  --cg-ease:cubic-bezier(.22,.8,.24,1);
  --cg-glass:linear-gradient(180deg,rgba(24,26,31,.56) 0%,rgba(10,11,15,.64) 100%);
  --cg-edge:rgba(255,255,255,.095);
  --cg-soft:rgba(255,255,255,.06);
  --cg-right:#F5F6F8;
  --cg-miss:var(--af-danger);
  position:relative;max-width:560px;margin:0 auto;padding:0 20px var(--nav-clearance);
  /* Игра — не текст: длинное нажатие и «выделить всё» не должны красить экран. */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body.admin-indicator-on .cg-page{padding-bottom:var(--nav-clearance-admin);}
.cg-page > *{animation:cg-rise .42s var(--cg-ease) both;}
.cg-page > :nth-child(2){animation-delay:.04s;}.cg-page > :nth-child(3){animation-delay:.08s;}
.cg-page > :nth-child(4){animation-delay:.12s;}.cg-page > :nth-child(5){animation-delay:.16s;}
@keyframes cg-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* Шапка: только название. Пояснений здесь нет — экран объясняет себя сам. */
.cg-head{margin:0 -20px;padding-left:20px;padding-right:20px;}
.cg-head h1{font-size:30px;font-weight:720;letter-spacing:-.04em;line-height:1.08;}

/* Кнопки. Главное действие — белая заливка, как во всём приложении. */
.cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;
  padding:0 18px;border:0;border-radius:18px;font:650 16px/1.15 var(--font);letter-spacing:-.015em;
  cursor:pointer;touch-action:manipulation;
  transition:transform .16s var(--cg-ease),opacity .16s ease,background .16s ease;}
.cg-btn svg{width:19px;height:19px;flex:none;}
.cg-btn:active{transform:scale(.975);}
.cg-btn:disabled{opacity:.4;cursor:default;transform:none;}
.cg-btn-primary{background:var(--af-accent-solid);color:var(--af-on-accent);
  box-shadow:0 14px 34px -18px rgba(255,255,255,.5);}
.cg-btn-glass{background:var(--cg-glass);color:var(--ink);border:1px solid var(--cg-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);}
.cg-btn-quiet{background:transparent;color:var(--ink-2);min-height:46px;}
.cg-btn.is-pending{opacity:.6;pointer-events:none;}

/* ── Рейтинг дня: одна карточка, одно действие. ── */
.cg-today{position:relative;overflow:hidden;isolation:isolate;margin-top:6px;padding:20px 20px 18px;
  border-radius:28px;border:1px solid var(--cg-edge);
  background:
    radial-gradient(120% 140% at 92% -30%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 45%,transparent 70%),
    var(--cg-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 48px -34px rgba(0,0,0,.95);}
.cg-today h2{margin:0;color:var(--ink);font-size:23px;font-weight:700;letter-spacing:-.035em;line-height:1.15;}
.cg-today .cg-btn{margin-top:20px;}
.cg-today-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.cg-today-rank{flex:none;color:var(--ink);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
.cg-today-sub{margin-top:6px;color:var(--ink-2);font-size:14.5px;letter-spacing:-.01em;}
.cg-today-score{display:flex;align-items:baseline;gap:8px;margin-top:10px;}
.cg-today-score b{color:var(--ink);font-size:44px;font-weight:780;letter-spacing:-.055em;line-height:1;
  font-variant-numeric:tabular-nums;}
.cg-today-score span{color:var(--ink-2);font-size:15px;}
.cg-today .cg-dots{margin-top:18px;}
.cg-next-day{margin-top:14px;color:var(--ink-2);font-size:13.5px;font-variant-numeric:tabular-nums;}
.cg-skeleton{min-height:176px;}
.cg-skeleton::before{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.05) 48%,transparent 66%);
  background-size:260% 100%;animation:cg-shimmer 1.3s ease-in-out infinite;}
@keyframes cg-shimmer{from{background-position:120% 0;}to{background-position:-60% 0;}}

/* Пять точек дня. Белая — угадал рано, серая — поздно, красная — мимо,
   обведённая — следующий фильм. Читается без подписей. */
.cg-dots{display:flex;gap:10px;}
.cg-dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.1);
  animation:cg-pop .45s var(--cg-ease) both;animation-delay:calc(var(--i) * 45ms);}
.cg-dots i.is-early{background:var(--cg-right);box-shadow:0 0 12px -2px rgba(255,255,255,.55);}
.cg-dots i.is-late{background:rgba(255,255,255,.45);}
.cg-dots i.is-miss{background:rgba(255,107,107,.75);}
.cg-dots i.is-next{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.cg-progress .cg-dots{gap:6px;}
.cg-progress .cg-dots i{width:9px;height:9px;}
.cg-summary-card .cg-dots{justify-content:center;margin-top:20px;}

/* Капсула-факт в разборе: откуда очки, заслуги, «Из «Смотрел»». */
.cg-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 11px 4px 9px;border-radius:999px;
  background:var(--cg-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--ink);
  font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;}
.cg-chip svg{width:14px;height:14px;flex:none;color:var(--ink);}
.cg-chip > span{color:var(--ink-2);}
.cg-chip b{font-weight:700;font-variant-numeric:tabular-nums;}
.cg-chip.is-merit{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
.cg-chip.is-merit > span{color:var(--ink);}

/* Свободная игра — вторая по важности карточка: крупная, с плиткой-значком. */
.cg-free{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:16px;width:100%;
  margin-top:12px;min-height:88px;padding:16px 18px;border-radius:26px;border:1px solid var(--cg-edge);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.07),transparent 60%),var(--cg-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 48px -34px rgba(0,0,0,.95);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:transform .16s var(--cg-ease);}
.cg-free:active{transform:scale(.985);}
.cg-free-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--ink);}
.cg-free-icon svg{width:26px;height:26px;}
.cg-free-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cg-free-copy b{font-size:17px;font-weight:700;letter-spacing:-.025em;}
.cg-free-copy small{color:var(--ink-2);font-size:13.5px;}
.cg-free i{display:grid;place-items:center;color:var(--ink-2);}
.cg-free i svg{width:16px;height:16px;}

/* ── Таблица ── */
.cg-board{margin-top:32px;}
.cg-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cg-board-head h2{font-size:21px;font-weight:700;letter-spacing:-.03em;}
.cg-periods{display:flex;gap:2px;}
.cg-period{height:30px;padding:0 11px;border:0;border-radius:15px;background:transparent;color:var(--af-text-secondary);
  font:600 13px var(--font);letter-spacing:-.01em;cursor:pointer;touch-action:manipulation;
  transition:background .18s ease,color .18s ease;}
.cg-period.is-set{background:rgba(255,255,255,.11);color:var(--ink);}
.cg-board-note{margin:6px 2px 0;color:var(--ink-2);font-size:13px;}
.cg-board-list{margin-top:8px;transition:opacity .2s ease;}
.cg-board-list.is-loading{opacity:.45;}
.cg-row{display:grid;grid-template-columns:30px 38px minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:58px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.045);
  animation:cg-rise .38s var(--cg-ease) both;animation-delay:calc(min(var(--i), 12) * 28ms);}
.cg-row:last-child{border-bottom:0;}
.cg-rank{color:var(--ink-2);font-size:15px;font-weight:650;text-align:center;font-variant-numeric:tabular-nums;}
.cg-row.is-top .cg-rank{color:var(--ink);}
.cg-avatar{position:relative;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:50%;
  background:var(--af-surface-3);color:var(--ink-2);font-size:13px;font-weight:650;}
.cg-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cg-row.is-top-1 .cg-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.85);}
.cg-name{min-width:0;overflow:hidden;color:var(--ink);font-size:15.5px;font-weight:560;white-space:nowrap;text-overflow:ellipsis;}
.cg-points b{color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cg-row.is-me{margin:0 -10px;padding-left:16px;padding-right:16px;border-radius:16px;border-bottom-color:transparent;
  background:var(--cg-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.cg-row-gap{padding:4px 0;color:var(--ink-2);text-align:center;letter-spacing:.3em;}
.cg-board-empty{padding:22px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.45;text-align:center;}

.cg-rules{margin-top:26px;padding:4px 2px;color:var(--ink-2);}
.cg-rules ul{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none;}
.cg-rules li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;}
.cg-rule-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--cg-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--ink);}
.cg-rule-icon svg{width:17px;height:17px;}
.cg-rules li p{margin:0;padding-top:1px;}
.cg-rules summary{list-style:none;cursor:pointer;color:var(--af-text-secondary);font-size:14px;font-weight:600;}
.cg-rules summary::-webkit-details-marker{display:none;}
.cg-rules summary::after{content:" ›";display:inline-block;transition:transform .2s var(--cg-ease);}
.cg-rules[open] summary::after{transform:rotate(90deg);}
.cg-rules p{margin-top:10px;font-size:13.5px;line-height:1.5;}
.cg-error{color:var(--ink-2);font-size:15px;line-height:1.45;text-align:center;}

/* ── Раунд ── */
.cg-round,.cg-verdict{padding-top:calc(var(--safe-top) + 12px);}
.cg-round-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;}
.cg-progress{display:flex;flex-direction:column;gap:7px;min-width:0;}
.cg-progress b{color:var(--ink);font-size:15px;font-weight:650;letter-spacing:-.015em;}
.cg-progress.is-free span{color:var(--ink-2);font-size:13px;}

.cg-stage{position:relative;margin-top:14px;padding:16px 16px 14px;border-radius:30px;border:1px solid var(--cg-edge);
  background:radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.07),transparent 70%),var(--cg-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -36px rgba(0,0,0,1);}
.cg-stage.cg-skeleton{min-height:300px;overflow:hidden;}
.cg-stage-error{display:grid;gap:14px;justify-items:center;padding:36px 20px;}
.cg-stage-error .cg-btn{width:auto;}

/* Очки, которые даст ответ сейчас: белая крупная цифра, тает с подсказкой. */
.cg-potential{position:absolute;top:14px;right:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;}
.cg-potential b{color:var(--ink);font-size:30px;font-weight:760;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;}
.cg-potential > span{margin-top:3px;color:var(--ink-2);font-size:11.5px;font-weight:550;}
.cg-potential b.is-drop{animation:cg-drop .42s var(--cg-ease);}
@keyframes cg-drop{0%{transform:none;}35%{transform:translateY(3px) scale(.94);opacity:.7;}100%{transform:none;opacity:1;}}
/* Полоса времени: полная, пока очки держатся, дальше тает до отметки 40%. */
.cg-timer{position:relative;height:3px;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;}
.cg-timer i{position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.7);transform-origin:left center;
  transition:transform .2s linear,background .3s ease;}
.cg-timer.is-grace i{background:var(--af-accent-solid);box-shadow:0 0 10px rgba(255,255,255,.45);}
.cg-timer.is-floor i{background:rgba(255,255,255,.32);}
.cg-delta{position:absolute;top:-6px;right:0;color:var(--ink-2);font-size:14px;font-weight:700;
  pointer-events:none;animation:cg-float 1s var(--cg-ease) forwards;}
@keyframes cg-float{0%{opacity:0;transform:translateY(6px);}20%{opacity:1;}100%{opacity:0;transform:translateY(-22px);}}
@keyframes cg-pop{0%{opacity:0;transform:scale(.6);}60%{transform:scale(1.06);}100%{opacity:1;transform:none;}}

/* Портреты: пока грузятся — мерцание, инициалы — только если фото нет вовсе. */
.cg-photo{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--af-surface-3);
  color:var(--ink-2);font-weight:650;}
.cg-photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;transition:opacity .3s ease;}
.cg-photo img.ready{opacity:1;}
.cg-photo:has(img) .fb{opacity:0;}
.cg-photo:has(img:not(.ready))::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 66%);
  background-size:260% 100%;animation:cg-shimmer 1.2s ease-in-out infinite;}

/* Прожектор: портрет слева, имя справа внизу. */
.cg-spot-wrap{min-height:168px;perspective:900px;}
.cg-spot{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:end;gap:16px;margin:0;width:100%;}
.cg-spot-photo{width:112px;aspect-ratio:2/3;border-radius:18px;font-size:26px;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);}
.cg-spot figcaption{display:flex;flex-direction:column;gap:4px;min-width:0;padding-bottom:4px;}
.cg-spot-step{color:var(--ink-2);font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;}
.cg-spot figcaption b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--ink);font-size:21px;font-weight:720;letter-spacing:-.03em;line-height:1.15;}
.cg-spot figcaption small{overflow:hidden;color:var(--ink-2);font-size:13px;white-space:nowrap;text-overflow:ellipsis;}
.cg-spot.is-new .cg-spot-photo{animation:cg-reveal .7s var(--cg-ease) both;}
.cg-spot.is-new figcaption{animation:cg-rise .5s var(--cg-ease) .18s both;}
.cg-spot.is-swap .cg-spot-photo{animation:cg-swap .32s var(--cg-ease) both;}
.cg-spot.is-swap figcaption{animation:cg-rise .3s var(--cg-ease) both;}
@keyframes cg-reveal{
  0%{opacity:0;transform:rotateY(-70deg) scale(.86);filter:blur(10px) brightness(1.6);}
  60%{opacity:1;filter:blur(0) brightness(1.15);}
  100%{opacity:1;transform:none;filter:none;}}
@keyframes cg-swap{from{opacity:.4;transform:scale(.94);}to{opacity:1;transform:none;}}

/* Лестница подсказок: открытые — портреты, закрытые — «?». */
.cg-ladder{display:flex;justify-content:space-between;gap:8px;margin-top:16px;}
.cg-rung{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;overflow:hidden;
  border-radius:50%;border:0;background:var(--af-surface-3);color:var(--ink-2);cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .2s var(--cg-ease),box-shadow .2s ease;}
.cg-rung.is-new{animation:cg-pop .45s var(--cg-ease) both;}
.cg-rung:active{transform:scale(.94);}
.cg-rung.is-selected{box-shadow:0 0 0 2px var(--af-accent-solid);}
.cg-rung.is-hidden{cursor:default;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.cg-rung.is-hidden i{font-style:normal;font-size:17px;font-weight:650;color:rgba(255,255,255,.28);}
.cg-rung-photo{position:absolute;inset:0;font-size:13px;}

.cg-question{margin:20px 2px 12px;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.03em;}

/* Четыре постера-варианта — одной строкой. */
.cg-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.cg-option{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0;border:0;background:transparent;
  color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;
  animation:cg-rise .44s var(--cg-ease) both;animation-delay:calc(.12s + var(--i) * 55ms);
  transition:opacity .3s ease,transform .2s var(--cg-ease),filter .3s ease;}
.cg-option:active{transform:scale(.97);}
.cg-option-art{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:14px;
  background:var(--af-surface-2);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 16px 30px -22px rgba(0,0,0,.9);}
.cg-option-art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;}
.cg-option-noposter{position:absolute;inset:0;display:grid;place-items:center;padding:6px;color:var(--ink-2);
  font-size:11px;text-align:center;}
.cg-option-ring{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .25s ease;}
.cg-option-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;}
.cg-option.is-removed{opacity:.18;filter:grayscale(1);transform:scale(.96);pointer-events:none;}
.cg-option.is-removing{animation:cg-remove .5s var(--cg-ease) both;}
@keyframes cg-remove{from{opacity:1;filter:none;transform:none;}to{opacity:.18;filter:grayscale(1);transform:scale(.96);}}
.cg-round.is-answering .cg-option:not(.is-chosen):not(.is-right){opacity:.35;}
.cg-option.is-chosen .cg-option-ring{box-shadow:inset 0 0 0 3px rgba(255,255,255,.75);}
.cg-option.is-right{opacity:1;}
.cg-option.is-right .cg-option-ring{box-shadow:inset 0 0 0 3px var(--cg-right);}
.cg-option.is-right .cg-option-art{animation:cg-right .7s var(--cg-ease) both;
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 28px -6px rgba(255,255,255,.55);}
.cg-option.is-wrong .cg-option-ring{box-shadow:inset 0 0 0 3px var(--cg-miss);}
.cg-option.is-wrong{animation:cg-shake .42s ease both;}
@keyframes cg-right{0%{transform:none;}40%{transform:scale(1.05);}100%{transform:none;}}
@keyframes cg-shake{0%,100%{transform:none;}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(2px);}}

/* Подсказки за очки: тихие капсулы, цена — приглушённой цифрой. */
.cg-actions{display:grid;gap:10px;margin-top:18px;}
.cg-hint-btn{justify-content:space-between;}
.cg-hint-btn small{color:var(--ink-2);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.cg-helps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.cg-helps.is-single{grid-template-columns:minmax(0,1fr);}
.cg-help{display:flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;border-radius:15px;
  border:1px solid var(--cg-edge);background:rgba(255,255,255,.035);color:var(--ink);
  font:600 14px var(--font);cursor:pointer;touch-action:manipulation;transition:transform .16s var(--cg-ease),opacity .16s ease;}
.cg-help > svg{width:17px;height:17px;flex:none;color:var(--ink-2);}
.cg-help span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cg-help small{display:inline-flex;align-items:center;gap:3px;margin-left:auto;color:var(--ink-2);font-size:13px;font-weight:650;}
.cg-help small svg{width:12px;height:12px;}
.cg-help:active{transform:scale(.97);}
.cg-help:disabled{opacity:.38;cursor:default;transform:none;}
.cg-help.is-used{background:var(--cg-soft);}
.cg-help.is-used span{color:var(--ink);font-weight:650;}
.cg-help.is-new{animation:cg-pop .5s var(--cg-ease) both;}

.cg-toast{position:fixed;left:50%;bottom:calc(var(--nav-clearance) + 8px);z-index:60;max-width:calc(100% - 40px);
  padding:12px 18px;border-radius:16px;background:rgba(28,30,35,.94);color:var(--ink);font-size:14px;font-weight:550;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transform:translateX(-50%);animation:cg-toast-in .34s var(--cg-ease) both;transition:opacity .3s ease,transform .3s ease;}
.cg-toast.is-leaving{opacity:0;transform:translate(-50%,8px);}
@keyframes cg-toast-in{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* ── Разбор ответа: всё главное — в первом экране, состав — лентой ниже. ── */
.cg-verdict-card{position:relative;overflow:hidden;isolation:isolate;
  margin-top:14px;padding:20px 16px 16px;border-radius:30px;border:1px solid var(--cg-edge);
  background:radial-gradient(100% 80% at 50% -10%,rgba(255,255,255,.09),transparent 62%),var(--cg-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -36px rgba(0,0,0,1);}
.cg-verdict.is-miss .cg-verdict-card{background:
  radial-gradient(100% 80% at 50% -10%,rgba(255,107,107,.13),transparent 62%),var(--cg-glass);}
/* Кадр из фильма — сверху карточки, растворяется в стекле. Только
   проверенный кадр: непроверенная ссылка могла бы не открыться. */
.cg-verdict-frame{position:absolute;inset:0 0 auto;z-index:-1;height:190px;pointer-events:none;}
.cg-verdict-frame img{width:100%;height:100%;object-fit:cover;opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  animation:cg-frame .9s var(--cg-ease) both;}
.cg-verdict-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.1) 0%,rgba(8,9,12,.55) 70%,transparent 100%);}
@keyframes cg-frame{from{opacity:0;transform:scale(1.06);}to{opacity:.62;transform:none;}}
.cg-verdict-card.has-frame{padding-top:118px;}
.cg-verdict-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px;}
.cg-verdict-title{color:var(--ink);font-size:28px;font-weight:760;letter-spacing:-.045em;animation:cg-pop .55s var(--cg-ease) both;}
.cg-verdict.is-miss .cg-verdict-title{color:#FF9A9A;}
.cg-verdict-points{display:flex;align-items:baseline;gap:6px;}
.cg-verdict-points b{color:var(--ink);font-size:40px;font-weight:780;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;}
.cg-verdict.is-miss .cg-verdict-points b{color:var(--ink-2);}
.cg-verdict-points span{color:var(--ink-2);font-size:14px;}
.cg-breakdown{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0 4px;}
.cg-today .cg-breakdown{margin-top:14px;padding:0;}
.cg-breakdown.is-centered{justify-content:center;margin-top:16px;}
.cg-breakdown .cg-chip{animation:cg-pop .45s var(--cg-ease) both;animation-delay:calc(.25s + var(--i) * 110ms);}
.cg-verdict-label{margin:14px 4px -6px;color:var(--af-text-secondary);font-size:12px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;}
.cg-answer{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;margin-top:16px;
  padding:8px;border-radius:20px;border:1px solid var(--cg-edge);background:rgba(255,255,255,.035);
  animation:cg-rise .45s var(--cg-ease) .12s both;}
.cg-answer-open{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:12px;min-width:0;
  padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;}
.cg-answer-art{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:11px;background:var(--af-surface-2);}
.cg-answer-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cg-answer-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cg-answer-copy b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:16.5px;font-weight:700;letter-spacing:-.025em;line-height:1.2;}
.cg-answer-copy > span:not(.cg-chip){overflow:hidden;color:var(--ink-2);font-size:13px;white-space:nowrap;text-overflow:ellipsis;}
.cg-answer-copy .cg-chip{align-self:flex-start;max-width:100%;margin-top:6px;min-height:24px;padding:2px 9px 2px 7px;font-size:12px;}
.cg-want{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;
  background:var(--cg-soft);color:var(--ink);cursor:pointer;transition:transform .16s var(--cg-ease),background .2s ease;}
.cg-want svg{width:21px;height:21px;}
.cg-want:active{transform:scale(.92);}
.cg-want.is-pending{opacity:.5;}
.cg-want.is-done{background:var(--af-accent-solid);color:var(--af-on-accent);animation:cg-pop .45s var(--cg-ease) both;}
.cg-verdict-actions{display:grid;gap:10px;margin-top:14px;}
.cg-cast-wrap{margin-top:22px;}
.cg-cast-wrap h3{margin:0 2px 12px;color:var(--af-text-secondary);font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;}
.cg-cast{display:flex;gap:12px;margin:0 -20px;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none;}
.cg-cast::-webkit-scrollbar{display:none;}
.cg-cast-item{display:flex;flex-direction:column;flex:0 0 84px;min-width:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;animation:cg-rise .4s var(--cg-ease) both;
  animation-delay:calc(.15s + var(--i) * 45ms);}
.cg-cast-photo{width:84px;aspect-ratio:3/4;border-radius:14px;font-size:18px;box-shadow:0 0 0 1px rgba(255,255,255,.07);}
.cg-cast-item b{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.25;}
button.cg-cast-item{cursor:pointer;touch-action:manipulation;transition:transform .16s var(--cg-ease);}
button.cg-cast-item:active{transform:scale(.96);}
.cg-cast-item small{margin-top:2px;overflow:hidden;color:var(--ink-2);font-size:11.5px;white-space:nowrap;text-overflow:ellipsis;}

/* Просьба разрешить сообщения — тот же материал, что у карточки на главной. */
.cg-notify{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px 14px;margin-top:14px;padding:16px;
  border-radius:24px;border:1px solid var(--cg-edge);background:var(--cg-glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  animation:cg-rise .42s var(--cg-ease) .2s both;transition:opacity .26s ease,transform .26s ease;}
.cg-notify[hidden]{display:none;}
.cg-notify.is-leaving{opacity:0;transform:translateY(6px);}
.cg-notify-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.08);color:var(--ink);}
.cg-notify-icon svg{width:20px;height:20px;}
.cg-notify-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cg-notify-copy b{font-size:15.5px;font-weight:680;letter-spacing:-.02em;}
.cg-notify-copy span{color:var(--ink-2);font-size:13.5px;line-height:1.4;}
.cg-notify-actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:8px;}
.cg-notify-allow,.cg-notify-later{min-height:44px;padding:0 16px;border:0;border-radius:14px;font:650 15px var(--font);cursor:pointer;touch-action:manipulation;}
.cg-notify-allow{background:var(--af-accent-solid);color:var(--af-on-accent);}
.cg-notify-later{background:transparent;color:var(--ink-2);}
.cg-notify-allow:disabled,.cg-notify-later:disabled{opacity:.5;}

/* ── Итоги дня ── */
.cg-summary{padding-top:calc(var(--safe-top) + 18px);}
.cg-summary-head h1{font-size:32px;font-weight:740;letter-spacing:-.045em;}
.cg-summary-card{margin-top:18px;padding:26px 20px 22px;border-radius:30px;border:1px solid var(--cg-edge);
  background:radial-gradient(100% 90% at 50% -20%,rgba(255,255,255,.12),transparent 62%),var(--cg-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);text-align:center;}
.cg-summary-score{display:flex;align-items:baseline;justify-content:center;gap:8px;}
.cg-summary-score b{color:var(--ink);font-size:64px;font-weight:800;letter-spacing:-.06em;line-height:1;
  font-variant-numeric:tabular-nums;}
.cg-summary-score span{color:var(--ink-2);font-size:16px;}
.cg-summary-right{margin-top:14px;color:var(--ink-2);font-size:14px;}

/* Карточка входа на «Подборе» — тот же материал и цвет значка, что у соседей. */
.picker-mode-game{display:grid;grid-template-columns:30px minmax(0,1fr) auto 18px;align-items:center;gap:14px;
  min-height:84px;padding:16px 18px;border-radius:24px;}
.picker-mode-game b{font-size:16.5px;}
.picker-mode-badge{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:11.5px;font-weight:650;letter-spacing:.02em;}

/* Узкие экраны (SE, mini). */
@media(max-width:360px){
  .picker-mode-badge{display:none;}
  .picker-mode-game{grid-template-columns:30px minmax(0,1fr) 18px;}
  .cg-page{padding-left:16px;padding-right:16px;}
  .cg-head{margin:0 -16px;padding-left:16px;padding-right:16px;}
  .cg-head h1{font-size:26px;}
  .cg-spot{grid-template-columns:96px minmax(0,1fr);gap:14px;}
  .cg-spot-photo{width:96px;}
  .cg-spot-wrap{min-height:144px;}
  .cg-spot figcaption b{font-size:18px;}
  .cg-rung{width:40px;height:40px;}
  .cg-potential b{font-size:26px;}
  .cg-today-score b{font-size:40px;}
  .cg-board-head{flex-wrap:wrap;}
  .cg-options{gap:8px;}
  .cg-option-title{font-size:11.5px;}
  .cg-help{padding:0 11px;font-size:13.5px;}
  .cg-cast{margin:0 -16px;padding:0 16px 4px;}
}
/* Низкие экраны (iPhone SE, клавиатура, Telegram в половину экрана):
   раунд обязан помещаться целиком, вместе с подсказками. */
@media(max-height:720px){
  .cg-round,.cg-verdict{padding-top:calc(var(--safe-top) + 6px);}
  .cg-stage{margin-top:10px;padding:12px 14px 12px;}
  .cg-spot{grid-template-columns:84px minmax(0,1fr);}
  .cg-spot-photo{width:84px;border-radius:15px;}
  .cg-spot-wrap{min-height:126px;}
  .cg-ladder{margin-top:12px;}
  .cg-rung{width:38px;height:38px;}
  .cg-question{margin:14px 2px 10px;font-size:16.5px;}
  .cg-actions{margin-top:12px;gap:8px;}
  .cg-btn{min-height:46px;}
  .cg-help{min-height:42px;}
}
/* Планшет и десктопный Telegram: колонка не растягивается, постеры крупнее. */
@media(min-width:600px){
  .cg-options{gap:14px;}
  .cg-spot{grid-template-columns:132px minmax(0,1fr);}
  .cg-spot-photo{width:132px;}
}
@media(prefers-reduced-motion:reduce){
  .cg-page *,.cg-page > *{animation:none !important;transition:none !important;}
}
@media(prefers-reduced-transparency:reduce){
  .cg-btn-glass,.cg-toast{-webkit-backdrop-filter:none;backdrop-filter:none;}
}