:root{
  --bg:#0a0a0d; --surface:#141319; --surface-2:#1d1c24;
  --accent:#e2a545; --accent-2:#9c5a2e;
  --text:#f4efe6; --text-dim:#a39b8c;
  /* Тонкий современный шрифт вместо тяжёлого антиквенного: названия читаются на кадре, а
     описания и цифры не спорят с картинкой (просьба 13.09.2026). */
  --display-font: "Segoe UI Semilight", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-font: "Segoe UI Light", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono-font: "SF Mono", "Cascadia Code", Consolas, monospace;
  --radius: 14px;
  /* Карточки горизонтальные, 16:9 — как в Okko и Кинопоиске: в ряд их видно больше, и кадр
     лучше передаёт фильм, чем вертикальный постер (просьба 13.09.2026). */
  /* Замеры сняты с Okko на 1920×1080: карточка 425×244 точки. В долях экрана это
     22.1vw в ширину и 12.7vw в высоту — соотношение 16:9 сохраняется. */
  --card-w: 22.1vw;
  --card-h: 12.7vw;
  --glass-opacity: 0; /* переопределяется темой "Стекло" */
}
/* Тема Б — «Пульс»: неон/HUD, ретрофутуризм */
:root[data-theme="pulse"]{
  --bg:#07070b; --surface:#111018; --surface-2:#191826;
  --accent:#7c5cff; --accent-2:#22d3ee;
  --text:#eef0ff; --text-dim:#8a8aa3;
  --display-font: "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --body-font: "Century Gothic", Futura, "Trebuchet MS", sans-serif;
}
/* Тема В — «Тишина»: минимал, люксовое спокойствие */
:root[data-theme="calm"]{
  --bg:#0c0d10; --surface:#16171b; --surface-2:#1f2025;
  --accent:#33c19b; --accent-2:#1f8f6f;
  --text:#f0efe9; --text-dim:#93958f;
  --display-font: "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --body-font: Georgia, Charter, "Times New Roman", serif;
}
/* Тема Г — «Стекло»: матовое полупрозрачное 3D-стекло */
:root[data-theme="glass"]{
  --bg:#0a0d12; --surface:#12161d; --surface-2:#1a212b;
  --accent:#bfe3ff; --accent-2:#6fa8d8;
  --text:#eef4fa; --text-dim:#8fa0b3;
  --display-font: "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --body-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --glass-opacity: 1;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg); color:var(--text); font-family:var(--body-font);
  overflow:hidden; user-select:none;
}
#app{ position:relative; width:100%; height:100vh; overflow-y:auto; overflow-x:hidden; }
/* Подсветку фокуса везде рисует свой .focused (см. nav.js) — нативную рамку браузера (обычно
   прямоугольную, не следующую border-radius круглых кнопок) глушим у любого [data-nav] разом,
   а не точечно по классам. Стало заметно только после того, как .focus() на элементах стал
   настоящим (раньше фокус был чисто CSS-классом, нативная рамка никогда не рисовалась). */
[data-nav]{ outline:none; }
button{ font-family:inherit; }
::-webkit-scrollbar{ width:0; height:0; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between;
  padding:1.1em 3.4vw;
  /* В разделах-списках (загрузки, закладки, история) под шапку уезжает прокручиваемое
     содержимое, и сквозь полупрозрачную полоску просвечивали чужие строки. */
  background:linear-gradient(180deg, rgba(10,10,13,0.92), rgba(10,10,13,0));
}
.topbar .logo{ font-family:var(--display-font); font-size:1.3em; letter-spacing:0.02em; display:flex; align-items:center; gap:0.5em; }
.topbar .logo .dot{ color:var(--accent); }
.topbar-left{ display:flex; align-items:center; gap:0.9em; }
.topbar .actions{ display:flex; gap:0.6em; }
.icon-btn{
  width:2.5em; height:2.5em; border-radius:50%; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1em; transition:background .2s ease, transform .15s ease, border-color .2s ease;
}
.icon-btn:hover, .icon-btn.focused{ background:var(--accent); color:#0a0a0a; border-color:transparent; transform:translateY(-1px); }

/* ---------- hero ---------- */
/* .hero-inner раньше держался на position:absolute + bottom:8% внутри родителя, чья высота сама
   считается из vw и зажата max-height — на приставке (слабый/старый System WebView) эта
   комбинация давала сломанный расчёт: текст рендерился у ВЕРХА hero вместо низа, наплывая на
   шапку. Flexbox с justify-content:flex-end надёжнее — прижимает контент к низу без процентного
   позиционирования относительно потенциально неверно посчитанной высоты. Подтверждено вживую на
   приставке 04.08.2026. */
.hero{
  position:relative; height:36vw; max-height:440px; min-height:260px; margin:0 3.4vw 1.6em;
  border-radius:18px; overflow:hidden; background:var(--surface-2);
  display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 8% 4%; box-sizing:border-box;
}
/* Блок шапки очень широкий и низкий (~4:1), а фон обычно 16:9 — cover обрезает больше половины
   высоты фото. Точка привязки "сверху" (не center 20%) — чтобы не резать головы персонажей,
   раз уж чем-то приходится жертвовать, жертвуем низом кадра, а не лицами (жалоба 04.08.2026:
   голов не видно на промо-кадрах крупным планом). */
.hero .backdrop{ position:absolute; inset:0; background-size:cover; background-position:center top; }
/* Шапка «оживает» без видео: медленный наезд кадра и плавная смена тайтла. YouTube-эмбед
   отсюда убран намеренно — в WebView приставки (Chromium 88) он не выводит картинку и
   перехватывает фокус пульта. Не возвращать iframe в шапку. */
/* Наезд идёт НЕПРЕРЫВНО и туда-обратно, и его НЕ перезапускают при смене тайтла. Раньше на
   каждую новую карточку анимацию запускали заново: кадр пару секунд наезжал, а потом резко
   прыгал в исходный масштаб — заметный рывок (жалоба 21.09.2026). Теперь движение плавное и
   непрерывное, в момент смены фильма ничего не дёргается. */
.hero .backdrop.kenburns{ animation:hero-zoom 26s ease-in-out infinite alternate; }
@keyframes hero-zoom{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.hero .backdrop, .hero-inner h2, .hero-inner p{ transition:opacity .45s ease; }
.hero.swapping .backdrop, .hero.swapping .hero-inner h2, .hero.swapping .hero-inner p{ opacity:0; }
:root.reduce-motion .hero .backdrop.kenburns{ animation:none; }
.hero::after{ z-index:1; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--bg) 4%, rgba(10,10,13,0.35) 42%, transparent 75%), linear-gradient(90deg, rgba(10,10,13,0.75), transparent 60%); }
.hero-inner{ position:relative; max-width:46%; z-index:2; }
.hero-eyebrow{ font-family:var(--mono-font); text-transform:uppercase; letter-spacing:0.16em; font-size:0.72em; color:var(--accent); margin:0 0 0.6em; }
.hero-inner h2{ font-family:var(--display-font); font-size:clamp(1.5em,2.6vw,2.3em); margin:0 0 0.35em; text-wrap:balance; }
.hero-inner p{ color:var(--text-dim); font-size:0.92em; line-height:1.55; margin:0 0 1.1em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-actions{ display:flex; gap:0.7em; }
.btn{ font-size:0.9em; font-weight:600; padding:0.7em 1.4em; border-radius:9px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.5em; transition:transform .15s ease, background .2s ease; }
.btn.primary{ background:var(--text); color:#0a0a0a; }
.btn.ghost{ background:rgba(255,255,255,0.1); color:var(--text); border:1px solid rgba(255,255,255,0.18); }
.btn.focused, .btn:hover{ transform:translateY(-2px) scale(1.03); }
.btn.primary.focused{ background:var(--accent); }
/* .btn.ghost.focused раньше получал только transform (лёгкий подъём/масштаб) — на TV с пульта
   почти незаметно, читалось как "фокус не двигается" (баг 04.08.2026: пользователь решил, что
   после кнопки "Смотреть" переключение на Трейлер/Скачать/В закладки не работает — на самом
   деле фокус двигался, просто не было видно). Явная золотая рамка + светлее фон — как у всех
   остальных фокусируемых элементов в приложении (иконки, поля ввода, карточки). */
.btn.ghost.focused, .btn.ghost:hover{ border-color:var(--accent); background:rgba(255,255,255,0.18); }

/* ---------- rows ---------- */
.row{ padding:0 3.4vw 0.4em; }
/* Заголовок ряда никогда не должен наезжать на сведения в шапке: у него собственный отступ
   сверху, а область рядов начинается ниже блока сведений (жалоба 14.09.2026). */
.rows-scroll .row:first-child .row-title{ margin-top:0.2em; }
.row-title{ font-family:var(--display-font); font-size:1.1em; margin:0 0 0.8em; color:var(--text); }
/* overflow-x:auto — КЛЮЧЕВОЕ: без своего скролл-контейнера у ряда браузер при scrollIntoView()
   на карточке за пределами экрана прокручивал ближайшего скроллящегося предка — а им оказывался
   #app (у него overflow-x:hidden, но это всё ещё валидный скролл-контейнер). Прокручивался ВЕСЬ
   #app по горизонтали, утаскивая за собой и шапку (.topbar) — при движении пультом вправо она
   уезжала за левый край экрана. Подтверждено вживую на приставке 04.08.2026. */
.cards{ display:flex; gap:1.1vw; padding:1.2em 0 2.6em; overflow-x:auto; overflow-y:hidden; }
.card{
  position:relative; width:var(--card-w); height:var(--card-h); min-width:210px; min-height:118px;
  border-radius:var(--radius); flex:0 0 auto; cursor:pointer; outline:none; background:var(--surface);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), z-index 0s; overflow:visible;
  /* will-change:transform убран: увеличения при фокусе больше нет (выделяем рамкой), а этот
     признак держал отдельный графический слой на каждую карточку — лишняя нагрузка. Старое
     пояснение: пересоздание
    слоя при каждой смене фокуса пультом и было основной причиной рывков при перемещении */
}
.card .poster{ position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; padding:0.9em; }
/* Затемнение низа постера нужно ТОЛЬКО когда поверх него реально показывается подпись (в фокусе).
   Постоянная тёмная полоса на чистом постере выглядела как брак печати. */
/* Карточка горизонтальная. Если кадра из фильма нет и подставлен вертикальный постер, обрезаем
   его не по центру, а ближе к верху: по центру героям срезало головы (жалоба 15.09.2026). */
.card .poster.from-poster{ background-position:center 22%; }
.card .poster::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .2s ease; background:linear-gradient(0deg, rgba(0,0,0,0.82) 0%, transparent 58%); }
.card.focused .poster::before, .card:hover .poster::before{ opacity:1; }
/* Название/год/рейтинг поверх постера — только в фокусе. Постеры TMDB почти всегда УЖЕ содержат
   название фильма нарисованным в самой картинке, поэтому наша подпись поверх давала второй,
   дублирующий текст на каждой карточке (жалоба 05.08.2026). В спокойном состоянии показываем
   чистую афишу, как в Netflix/Кинопоиске; вся текстовая информация появляется при наведении. */
/* Подпись на карточке лежит на собственной затемняющей подложке: карточки теперь горизонтальные
   и показывают кадр из фильма, а он бывает светлым — на нём белый текст без подложки не читался
   (проверено на приставке 13.09.2026). */
/* Подпись карточки: название крупно и всегда видно (человек должен понимать, что за фильм, не
   наводя на него), сверху — тонкая строка жанра и года. Описание убрано совсем: на горизонтальной
   карточке оно не помещается и обрезается на полуслове (просьба 13.09.2026). */
.card .meta{
  position:relative; z-index:2; opacity:1;
  margin:-0.9em; padding:1.6em 0.9em 0.75em;
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.80) 52%, rgba(0,0,0,0) 100%);
}
.card .meta h3{
  font-family:var(--display-font); font-weight:400; font-size:1.02em; line-height:1.2;
  margin:0; color:#fff;
  /* Длинное название переносится на вторую строку и обрезается многоточием, а не уезжает
     за край карточки, как раньше. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  white-space:normal; word-break:break-word;
}
.card .meta .kicker{
  font-family:var(--body-font); font-weight:300; font-size:0.72em; letter-spacing:0.05em;
  color:rgba(255,255,255,0.55); margin:0.2em 0 0;
}
.card .meta .rating{
  font-family:var(--body-font); font-weight:300; font-size:0.74em;
  color:rgba(255,255,255,0.7); margin-top:0.2em;
}
.card.focused .meta, .card:hover .meta{ opacity:1; }
/* Если на карточке рекламный баннер, в котором название уже нарисовано (см. loadTitleArt),
   своя подпись не нужна — иначе название печатается дважды. Год оставляем строкой без подложки. */
/* И года тоже не нужно: он читается поверх яркого баннера плохо, а в Okko на карточках вообще
   нет никаких подписей — вся информация в шапке у тайтла под фокусом. */
/* Название уже нарисовано в самой картинке (баннер или логотип) — своей подписи не ставим ни
   при каком языке. Английский баннер раньше подписывался по-русски снизу, и два названия
   наезжали друг на друга (владелец, 25.09.2026). Русское название человек видит в шапке над
   рядами и в самой карточке фильма. */
.card .poster.drawn-title .meta{ display:none; }
/* Исключение — на время фокуса в разделах без шапки («История просмотра», «Закладки»): под фокусом
   карточка показывает чёткий кадр без нарисованного названия, а названия над рядами там нет, поэтому
   своя русская подпись возвращается (класс ставит sharpenCard и снимает restoreCard; 04.10.2026).
   Логотип и его подложка на это время прячем, чтобы два названия не наезжали друг на друга. */
.card .poster.drawn-title.show-title .meta{ display:block; }
.card .poster.show-title .card-logo{ display:none; }
.card .poster.has-logo.show-title::after{ display:none; }
/* Нарисованное название отдельной картинкой — кладём поверх кадра слева снизу, над подложкой.
   Так карточка выглядит как баннер даже там, где готового баннера у TMDB нет. */
.card .poster .card-logo{
  position:absolute; left:6%; bottom:14%; z-index:2;
  max-width:62%; max-height:34%; object-fit:contain;
  /* БЕЗ filter: drop-shadow. На приставке этот фильтр заводит отдельный графический слой на
     КАЖДУЮ карточку, и при быстрой прокрутке графический поток Chromium падал с SIGSEGV —
     приложение просто закрывалось (поймано в логе 22.09.2026). Читаемость даёт подложка ниже. */
}
.card .poster.has-logo::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:var(--radius);
  background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%);
}
.card .kicker{ font-family:var(--mono-font); font-size:0.62em; color:var(--text-dim); letter-spacing:0.06em; }
.card h3{ font-family:var(--display-font); font-size:0.94em; margin:0.2em 0; line-height:1.25; text-wrap:balance; }
.card .rating{ font-family:var(--mono-font); font-size:0.68em; color:var(--accent); font-weight:700; }
:root.hide-rating .card .rating, :root.hide-rating .detail-tags .rating{ display:none; }
/* Уменьшить анимации (доступность/предпочтение) — гасим переходы и анимации почти везде, кроме
   тех, что несут смысл состояния (открытие/закрытие оверлеев остаётся мгновенным вместо плавного). */
:root.reduce-motion *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
.card .synopsis{ max-height:0; overflow:hidden; opacity:0; font-size:0.7em; color:var(--text-dim); line-height:1.45; transition:max-height .35s ease .1s, opacity .3s ease .1s; }
/* Полоска прогресса на карточке в «Истории»/«Продолжить просмотр» */
.card-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.2); z-index:2; }
.card-progress-fill{ height:100%; background:var(--accent); }
/* Подпись «сколько посмотрено» в «Продолжить просмотр»: время для фильма, сезон и серия —
   для сериала. Лежит над полосой прогресса, поверх любой картинки карточки. */
.card-watched{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.6em 0.9em 0.55em;
  font-family:var(--body-font); font-weight:300; font-size:0.78em; color:rgba(255,255,255,0.92);
  background:linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.card:nth-child(3n+1){ transform-origin:20% 50%; }
.card:nth-child(3n+2){ transform-origin:50% 100%; }
.card:nth-child(3n){ transform-origin:80% 50%; }
/* Небольшой наклон (rotate) на фокусе убран — при быстрой пультовой навигации между карточками
   с разным transform-origin он читался как "дёрганое шатание", а не оформление. Один и тот же
   scale+translateY для всех карточек — спокойнее и дешевле по перерасчёту слоя. */
/* ФОКУС НЕ МЕНЯЕТ РАЗМЕР КАРТОЧКИ. Увеличение в 1.14 раза выводило карточку за верхнюю границу
   области рядов — верх геометрии срезался о шапку, а края наезжали на соседние карточки
   (жалоба 15.09.2026). В Okko этого эффекта нет вовсе: выделение — только рамка. */
.card.focused, .card:hover{ z-index:5; }
.card.focused .synopsis, .card:hover .synopsis{ max-height:5em; opacity:1; margin-top:0.3em; }
.card.focused, .card:focus-visible{ box-shadow:0 0 0 3px var(--accent), 0 14px 34px rgba(0,0,0,0.55); }
/* Лёгкая подсветка исходной карточки, пока с неё «вылетело» плавающее окно превью (см. .preview-stage) */
.card.previewing{ box-shadow:0 0 0 2px var(--accent); }

/* ---------- единое плавающее окно предпросмотра (Netflix-style) ----------
   Одно на всё приложение (см. app.js showPreviewStage) — широкоформатный (16:9) блок в 2.5 раза
   шире исходной карточки. Появление — FLIP-морф: окно стартует ровно в размере/позиции карточки
   (мгновенно, без перехода), а затем CSS-transition тянет left/top/width/height к финальному
   кадру — визуально карточка «перетекает» в большой экран. Играть может только одно превью
   одновременно: наведение на новую карточку сразу останавливает предыдущее окно. */
/* Подложка тоже переключается через display, без анимации прозрачности: полупрозрачный слой
   с меняющейся opacity прямо под окном превью — ещё один композитный слой, из-за которого
   WebView приставки не отдаёт видео аппаратную плоскость (та же причина, что описана ниже
   для самого окна). */
.preview-backdrop{
  position:fixed; inset:0; z-index:99; background:rgba(4,4,6,0.78); pointer-events:none; display:none;
}
.preview-backdrop.open{ display:block; }
/* Чистое активное видео без рамки/виньетки/подписей поверх — по прямой просьбе пользователя
   (04.08.2026): раньше золотая обводка + затемнение по краям читались как "чёрная рамка вокруг
   окна". Тень оставлена только чтобы окно визуально отделялось от фона каталога за ним. */
/* Позиция/размер ставятся сразу в финальные (см. openStageVisuals в app.js) — анимируется
   только прозрачность, чтобы не ресайзить блок с уже играющим внутри видео. */
/* НАСТОЯЩАЯ причина чёрного кадра при живом звуке на приставке (найдена 10.09.2026):
   окно превью показывалось через opacity 0 -> 1 с transition. Элемент с непостоянной
   прозрачностью WebView композитит отдельным слоем с альфа-смешиванием, а видео в таком
   слое не получает аппаратную плоскость вывода — она пробивается чёрным. Рабочий
   полноэкранный плеер трейлера (.player-view) всё это время переключался через
   display:none/block и всегда был непрозрачным — единственное структурное отличие,
   которое оставалось непроверенным после восьми других гипотез (размер, ресайз во время
   игры, способ вставки iframe, YT API против голого iframe, звук, пересоздание элемента).
   Поэтому здесь ровно та же схема, что у .player-view: display + полная непрозрачность.
   Скруглений и тени тоже нет — border-radius с overflow:hidden добавляет слой-маску,
   которая ломает вывод видео тем же способом. */
/* Шапка закреплена наверху и не уезжает: под ней листаются ряды карточек, а сама она служит
   местом показа превью — так это устроено у больших стриминговых сервисов. Раньше шапка уходила
   вверх вместе с прокруткой, и превью показывать было негде (переделка 12.09.2026). */
/* ВИТРИНА «Главной» — как у больших сервисов (Okko, Кинопоиск, Netflix).
   Верх экрана — не окно и не блок, а ФОН: кадр того тайтла, на котором сейчас фокус, а поверх
   него играет короткий ролик-превью. Ряды карточек лежат поверх фона в нижней половине и
   прокручиваются, сам фон при этом неподвижен. Видно текущий ряд и половину следующего —
   так понятно, что каталог продолжается (просьба 13.09.2026). */
#app.home-layout{ position:relative; height:100vh; overflow:hidden; }

.hero{
  position:absolute; inset:0; z-index:0; margin:0;
  height:auto; min-height:0; max-height:none; border-radius:0;
}
.hero .backdrop{
  position:absolute; inset:0; background-size:cover; background-position:center top;
  border-radius:0;
}
/* Ролик занимает тот же прямоугольник, что и кадр: подменяет его, а не всплывает поверх. */
.hero .hero-preview{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease; background:#000;
}
.hero .hero-preview.playing{ opacity:1; }
/* Две шторки: слева — чтобы читался текст, снизу — чтобы ряды не спорили с картинкой. */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Затемняем ТОЛЬКО те места, где лежит текст и ряды, — сам кадр остаётся чистым и ярким.
     Раньше плотная пелена накрывала всю картинку, и тёмные сцены превращались в чёрный экран
     (жалоба 13.09.2026). Левая полоса узкая, нижняя начинается там, где идут карточки. */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 16%, rgba(0,0,0,0) 34%),
    linear-gradient(0deg, var(--bg) 6%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0) 36%);
}
/* Сведения о тайтле под фокусом: название крупно и тонко, факты строкой, описание в две строки.
   Кнопок здесь нет — фильм открывается нажатием на самой карточке. */
/* Блок сведений жёстко ограничен по высоте: у длинных названий он раньше сползал вниз и наезжал
   на заголовок первого ряда (проверено на приставке 13.09.2026). */
.hero-inner{
  position:absolute; left:4vw; top:11vh; max-width:40vw; z-index:2; padding:0;
  /* Жёсткий потолок: у длинного названия в две строки описание съезжало вниз и наезжало на
     заголовок первого ряда (проверено 14.09.2026). Лишнее просто обрезается. */
  max-height:36vh; overflow:hidden;
}
.hero-inner h2{
  font-family:var(--display-font); font-weight:300; font-size:2.7em; line-height:1.08;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0 0 0.35em; color:#fff; letter-spacing:-0.01em;
  text-shadow:0 2px 18px rgba(0,0,0,0.75);
}
/* Сведения о тайтле — двумя строками, как в Okko: оценка ярким бейджем, дальше год, страна,
   жанр; ниже — сезоны, язык, возраст. Всё тонким шрифтом приглушённого цвета. */
.hero-facts{
  display:flex; align-items:center; gap:1.1em; flex-wrap:wrap;
  font-family:var(--body-font); font-weight:300; font-size:0.92em; letter-spacing:0.02em;
  color:rgba(255,255,255,0.72); margin:0 0 0.35em;
}
.hero-facts.second{ font-size:0.86em; color:rgba(255,255,255,0.55); margin-bottom:0.8em; }
.hero-facts .rate{
  font-weight:500; font-size:0.92em; letter-spacing:0;
  padding:0.12em 0.45em; border-radius:0.35em; color:#08130d;
}
.hero-facts .rate.good{ background:#4ec97f; }
.hero-facts .rate.mid{ background:#e3c05a; }
.hero-facts .rate.low{ background:rgba(255,255,255,0.35); color:#12131a; }
.hero-inner p{
  font-family:var(--body-font); font-weight:300; font-size:1.0em; line-height:1.45;
  color:rgba(255,255,255,0.72); margin:0; max-width:34vw;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Ряды начинаются ниже середины, и в оставшуюся высоту помещается полтора ряда: текущий целиком
   и половина следующего — видно, что каталог продолжается (просьба 13.09.2026).
   scroll-behavior:smooth — та самая плавная прокрутка вместо рывка. */
#app.home-layout .rows-scroll{
  /* 58vh — из тех же замеров Okko: заголовок первого ряда там на 59% высоты экрана, и от
     второго ряда видно ровно треть карточки. Раньше ряды начинались на 46vh, второй ряд
     был виден почти целиком, а шапке не хватало места на описание (жалоба 15.09.2026). */
  position:absolute; left:0; right:0; top:55vh; bottom:0; z-index:2;
  overflow-y:auto; overflow-x:hidden;
  /* Запас снизу нужен, чтобы ЛЮБОЙ ряд, включая последний, мог встать верхом к верхнему краю
     области — иначе на последних рядах сверху опять оставалась полоска предыдущего. */
  padding:0 0 32vh;
  scroll-behavior:smooth;
}
/* У горизонтальной ленты плавную прокрутку убрали: на приставке она не успевала за пультом —
   после пятой-шестой карточки движение «зависало» и продолжалось рывком (жалоба 14.09.2026).
   Вертикальная прокрутка рядов плавной осталась. */
.cards{ scroll-behavior:auto; }
/* Прокрутку рядов делает сама навигация (nav.js): верх ряда совмещается с верхом области рядов,
   поэтому полоски обрезанного ряда сверху больше не остаётся. scroll-margin тут не нужен. */
/* Ролик поверх афиши. Появляется плавно, когда реально пошёл — до этого видна афиша. */
.hero-preview{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.hero-preview.playing{ opacity:1; }

/* ПРЕВЬЮ НА ВЕСЬ ЭКРАН (эксперимент 04.10.2026, см. блок immersive в app.js). Класс #app.immersive
   плавно убирает слои поверх ролика: карточки уезжают вниз и гаснут, верхняя и боковая панели уходят за
   свои края, сведения о тайтле и затемняющие шторки гаснут - остаётся один ролик. Только opacity и
   transform: backdrop-filter и filter поверх видео на приставке дают чёрный экран. pointer-events:none -
   чтобы невидимые слои не ловили курсор. Без класса стоит обычное состояние, переходы работают в обе стороны. */
#app.home-layout .rows-scroll{ transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
#app.home-layout .topbar{ transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
#app.home-layout .rail{ transition:width .22s ease, background .22s ease, opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
#app.home-layout .hero-inner{ transition:opacity .6s ease; }
#app.home-layout .hero::after{ transition:opacity .6s ease; }
#app.immersive .rows-scroll{ opacity:0; transform:translateY(16vh); pointer-events:none; }
#app.immersive .topbar{ opacity:0; transform:translateY(-100%); pointer-events:none; }
#app.immersive .rail{ opacity:0; transform:translateX(-100%); pointer-events:none; }
#app.immersive .hero-inner{ opacity:0; }
#app.immersive .hero::after{ opacity:0; }

.preview-stage{
  position:absolute; z-index:100; background:#000; display:none; cursor:pointer; overflow:hidden;
}
.preview-stage.open{ display:block; pointer-events:all; }
/* Кадр без интерфейса плеера. YouTube рисует поверх видео свою обвязку — название ролика,
   название канала, кнопки паузы/перемотки, шильдик YouTube, «Другие видео» — и убрать её
   параметрами эмбеда (controls=0, modestbranding, showinfo, iv_load_policy) до конца нельзя.
   Поэтому iframe делаем ЗАМЕТНО БОЛЬШЕ окна и центрируем: вся обвязка, которая живёт у верхней
   и нижней кромок кадра, уезжает за границы окна, а overflow:hidden её срезает. В окне остаётся
   только само изображение (по просьбе 10.09.2026). Цена — кроп кадра по краям, это осознанно. */
/* Обрезка НЕсимметричная: снизу у ютюбовского плеера полоса с кнопками и прогрессом заметно
   выше, чем плашка с названием сверху, поэтому снизу срезаем больше. Проверено на приставке —
   при равномерной обрезке снизу оставались видны края кнопок (жалоба 10.09.2026). */
/* Размер и смещение плеера считает JS в пикселях (см. showPreviewStage): ютюб верстает ролик по
   размеру, полученному при создании, и на проценты в CSS не реагирует. Здесь остаётся только то,
   что от разметки не зависит. */
.preview-zoom{ position:absolute; overflow:hidden; }
.preview-stage iframe, .preview-stage .preview-host{
  position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none;
}
/* Обложка карточки поверх окна, пока ролик не начал играть: скрывает и заставку ютюба, и его
   кнопку паузы посреди кадра. Убирается по событию PLAYING (см. showPreviewStage). */
/* Второй вид окна — во весь экран без рамок. Изображение остаётся овалом в середине, а к краям
   и углам плавно уходит в чёрное: несколько остановок градиента дают ту самую «дымку», чтобы
   границы овала не читались чёткой линией (просьба 10.09.2026). В обычном окне виньетки нет. */
.preview-vignette{ display:none; }
/* Виньетка полноэкранного вида рисуется на подложке: само окно теперь узкое (в пропорции кадра),
   а затемнять нужно весь экран вокруг него, иначе видны границы полосы с видео. */
.preview-backdrop.oval{
  background:radial-gradient(ellipse 62% 70% at 50% 50%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.10) 42%,
    rgba(0,0,0,0.32) 54%,
    rgba(0,0,0,0.60) 65%,
    rgba(0,0,0,0.84) 76%,
    rgba(0,0,0,0.95) 86%,
    #000 96%);
}
/* Во весь экран рамка и скругления не нужны, а кромки закрывает сама виньетка. */
/* Большое окно — в рамке акцентного цвета, как и было раньше. Рамка нарисована через outline,
   а не border: outline не входит в поток и не создаёт слой-маску, из-за которой на приставке
   ломается вывод видео (этим уже обжигались на border-radius + overflow). */
/* Рамка идёт не по краю окна, а по краю КАРТИНКИ. Ютюб вписывает кинематографический ролик
   (2.39:1) в свою сетку 16:9, оставляя сверху и снизу по 12.75% высоты чёрного поля; убрать эти
   поля на приставке нельзя — видео выводится аппаратным слоем, который не подчиняется ни CSS
   transform, ни overflow, ни смене размера плеера. Зато рамку можно провести ровно по границам
   изображения: тогда в окне видно только видео, а поля остаются снаружи рамки и сливаются с
   чёрным фоном (просьба 11.09.2026 — «рамок быть в окне не должно»). */
.preview-stage:not(.oval){ box-shadow:0 26px 64px rgba(0,0,0,0.65); }
.preview-stage:not(.oval)::after{
  content:""; position:absolute; left:0; right:0; top:12.75%; bottom:12.75%;
  border:3px solid var(--accent); pointer-events:none; z-index:4;
}
.preview-stage.oval{ border-radius:0; }
/* Полноэкранный вид показывает ТОЛЬКО картину, без чёрных полей самого ролика. Трейлеры чаще
   всего кинематографические (2.39:1) и внутри кадра 16:9 идут с полосами сверху и снизу — в окне
   с затемнёнными краями они читались как рамка (просьба 11.09.2026). Увеличиваем кадр ровно
   настолько, чтобы полосы ушли за края экрана: 2.39/1.78 ≈ 1.34, берём 136% с равным смещением.
   У обычных 16:9 роликов при этом срезаются края — в овале это незаметно. */
.preview-mask{ display:none; }
/* Обложка занимает ровно ту же область, что и будущая картинка ролика (см. рамку выше) —
   иначе при старте она растягивается на всё окно и «дёргается» в момент появления видео. */
.preview-cover{
  position:absolute; left:0; right:0; top:12.75%; bottom:12.75%;
  background-size:cover; background-position:center;
  background-color:#000; transition:opacity .25s ease; z-index:2;
}
.preview-cover.gone{ opacity:0; pointer-events:none; }

/* ---------- detail overlay ---------- */
.detail{
  position:fixed; inset:0; z-index:40; background:rgba(6,6,8,0.7); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.detail.open{ opacity:1; pointer-events:all; }
.detail-panel{
  width:min(920px, 92vw); max-height:88vh; overflow-y:auto; background:var(--surface); border-radius:20px 20px 0 0;
  padding:0; transform:translateY(3%); transition:transform .3s ease;
}
.detail.open .detail-panel{ transform:translateY(0); }
/* max-height — защитный потолок (как у .hero) на случай, если 38vh на слабом WebView посчитается
   некорректно и раздует блок, утащив кнопки действий за нижний край экрана недостижимо пультом. */
.detail-hero{ position:relative; height:38vh; min-height:220px; max-height:380px; background-size:cover; background-position:center top; border-radius:20px 20px 0 0; }
.detail-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--surface), transparent 60%); }
.detail-close{ position:absolute; top:1em; right:1em; z-index:2; }
.detail-body{ padding:0 2.4em 2.4em; margin-top:-3.5em; position:relative; z-index:2; }
/* Карточка сериала онлайн-библиотеки без TMDB: кадра нет, поэтому вместо шапки с картинкой - спокойный фон, а постер стоит слева от текста. */
.kp-hero{ background:linear-gradient(135deg,var(--surface-2),var(--surface)); height:16vh; min-height:110px; max-height:170px; }
.kp-layout{ display:flex; gap:1.8em; align-items:flex-start; }
.kp-poster{ flex:0 0 11em; height:16.5em; border-radius:0.8em; background:var(--surface-2) center top/cover no-repeat; box-shadow:0 6px 24px rgba(0,0,0,0.5); }
.kp-info{ flex:1; min-width:0; padding-top:2.6em; }
.detail-body h2{ font-family:var(--display-font); font-size:1.9em; margin:0 0 0.3em; text-wrap:balance; }
.detail-tags{ font-family:var(--mono-font); font-size:0.78em; color:var(--text-dim); margin-bottom:1em; }
.detail-tags .rating{ color:var(--accent); font-weight:700; }
/* Кнопки стоят ВЫШЕ описания и видны сразу при открытии карточки. Раньше они шли после
   описания, и у фильмов с длинной аннотацией («Бегущая») уезжали за нижний край экрана —
   посмотреть фильм было нечем нажать (жалоба 04.09.2026). Само описание ограничено по высоте
   и прокручивается внутри себя, чтобы длина текста больше никогда не ломала разметку. */
.detail-body p.overview{
  color:var(--text-dim); line-height:1.65; max-width:70ch; margin-bottom:1.4em;
  max-height:7.5em; overflow-y:auto;
}
.detail-actions{ display:flex; gap:0.8em; margin:0 0 1.4em; flex-wrap:wrap; }
/* Ряд «Все части серии» в карточке фильма: кадр, под ним всегда видны год и название (просьба
   04.10.2026). scroll-behavior:auto — плавная прокрутка в скрытой панели приставки не доезжает. */
.coll-row{ display:flex; gap:1em; overflow-x:auto; padding:0.5em 0.4em 1.1em; margin:0 -0.4em 0.6em; scroll-behavior:auto; }
.coll-card{ flex:0 0 auto; width:8.6em; cursor:pointer; outline:none; }
.coll-card .coll-img{ position:relative; width:100%; height:12.9em; border-radius:var(--radius); background:var(--surface-2) center top/cover; border:2px solid transparent; box-sizing:border-box; }
.coll-card.focused .coll-img, .coll-card:hover .coll-img{ border-color:var(--accent); box-shadow:0 10px 26px rgba(0,0,0,0.5); }
.coll-card.coll-current{ cursor:default; }
.coll-card.coll-current .coll-img{ border-color:var(--text-dim); }
.coll-badge{ position:absolute; left:0.5em; top:0.5em; font-family:var(--mono-font); font-size:0.62em; letter-spacing:0.06em; text-transform:uppercase; background:var(--accent); color:#000; padding:0.25em 0.6em; border-radius:999px; font-weight:700; }
.coll-cap{ display:flex; flex-direction:column; gap:0.15em; padding:0.5em 0.1em 0; }
.coll-year{ font-family:var(--mono-font); font-size:0.72em; color:var(--accent); font-weight:700; letter-spacing:0.04em; }
.coll-title{ font-size:0.76em; line-height:1.3; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.coll-card.focused .coll-title{ color:var(--text); }
.detail.under{ visibility:hidden; }
.cast-row{ display:flex; gap:1em; overflow-x:auto; padding-bottom:0.6em; }
.cast-card{ flex:0 0 auto; width:100px; text-align:center; cursor:pointer; }
.cast-card .avatar{ width:100px; height:100px; border-radius:50%; background:var(--surface-2) center top/cover; margin-bottom:0.5em; border:2px solid transparent; }
.cast-card.focused .avatar, .cast-card:hover .avatar{ border-color:var(--accent); }


/* ---------- «Продолжить просмотр»: список строк сверху вниз ---------- */
/* Каждая строка — карточка слева, шкала просмотра и тайминг справа (просьба 18.09.2026).
   Лентой вбок это не читается: не видно, сколько досмотрено у каждого тайтла. */
.watch-wrap{ padding:0 3.4vw 22vh; }
.watch-list{ display:flex; flex-direction:column; gap:1em; }
.watch-item{
  display:flex; align-items:center; gap:1.6em;
  padding:0.8em; border-radius:14px; cursor:pointer;
  background:var(--surface-2); border:2px solid transparent;
}
.watch-item.focused, .watch-item:hover{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
.watch-thumb{
  position:relative; flex:0 0 auto;
  width:16vw; height:9vw; min-width:190px; min-height:107px;
  border-radius:10px; overflow:hidden; background:var(--surface);
}
.watch-thumb .poster{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.watch-thumb .poster.from-poster{ background-position:center 22%; }
.watch-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0.5em; }
.watch-title{
  font-family:var(--display-font); font-weight:400; font-size:1.25em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.watch-sub{
  font-family:var(--body-font); font-weight:300; font-size:0.92em; color:rgba(255,255,255,0.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Шкала: просмотренное — сочно-зелёным, остаток — приглушённой полосой. */
.watch-bar{
  position:relative; height:6px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,0.18);
}
.watch-bar-fill{ height:100%; border-radius:3px; background:#3ddc84; }
.watch-times{
  display:flex; justify-content:space-between; align-items:center; gap:1em;
  font-family:var(--body-font); font-weight:300; font-size:0.86em; color:rgba(255,255,255,0.7);
}
.watch-times .left{ color:rgba(255,255,255,0.45); }
/* Кнопка «убрать из списка» — справа в той же строке. В спокойном состоянии это бледная корзина,
   под фокусом появляется подпись, а после первого нажатия она краснеет и просит подтвердить. */
.watch-remove{
  flex:0 0 auto; display:flex; align-items:center; gap:0.6em;
  padding:0.7em 1em; border:1px solid rgba(255,255,255,0.14); border-radius:10px;
  background:transparent; color:rgba(255,255,255,0.5); cursor:pointer;
  font-family:var(--body-font); font-weight:300; font-size:0.9em;
}
.watch-remove .label{ opacity:0; transition:opacity .18s ease; white-space:nowrap; }
.watch-remove.focused, .watch-remove:hover{
  color:#fff; border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.08);
}
.watch-remove.focused .label, .watch-remove:hover .label{ opacity:1; }
.watch-remove.confirm{
  color:#ff6b6b; border-color:#ff6b6b; background:rgba(255,107,107,0.12);
}
.watch-remove.confirm .label{ opacity:1; }



/* Галочка у серии при выборе, что скачивать. В спокойном виде — пустая рамка, отмеченная —
   залита акцентом (просьба 22.09.2026). */
.download-check{
  flex:0 0 auto; width:1.9em; height:1.9em; border-radius:6px;
  border:2px solid rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.download-item.picked .download-check{ background:var(--accent); border-color:var(--accent); color:#0a0a0a; }
.download-item.picked{ background:rgba(255,255,255,0.06); }

/* ---------- выбор сезона ---------- */
/* Крупные плитки сезонов: пультом по ним попадать проще, чем по узким вкладкам под описанием. */
.season-grid{ display:flex; flex-wrap:wrap; gap:1em; padding:0.4em 0 1em; }
.season-card{
  position:relative; width:13.5em; height:7.6em; border-radius:12px; cursor:pointer;
  border:2px solid transparent; background:var(--surface-2) center/cover no-repeat; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:0.8em; gap:0.15em; text-align:left; overflow:hidden;
}
.season-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.05) 100%);
}
.season-card.all{ background:var(--surface-2); }
.season-card-name{ position:relative; font-family:var(--display-font); font-size:1.1em; }
.season-card-sub{ position:relative; font-family:var(--body-font); font-weight:300; font-size:0.82em; color:rgba(255,255,255,0.7); }
.season-card.focused, .season-card:hover{ border-color:var(--accent); }

/* ---------- поиск ---------- */
/* Окно поиска стоит вверху и не двигается: строка ввода закреплена, а список найденного
   прокручивается под ней сам. Раньше панель прижималась к низу экрана и подскакивала на каждой
   букве вместе с числом карточек (жалоба 25.09.2026). */
.detail.search-mode{ align-items:flex-start; }
.search-panel{
  padding:1.6em 1.8em 1.2em; margin-top:3vh; height:90vh; max-height:90vh;
  display:flex; flex-direction:column; border-radius:20px;
}
.search-panel .search-bar{ flex:0 0 auto; }
/* В строке поиска крестик закрытия стоит В ПОТОКЕ, справа от микрофона: общий .detail-close абсолютный (угол панели) и наезжал на значок микрофона -
   нажатие уходило в крестик, голосовой ввод не включался (жалоба 07.10.2026). */
.search-panel .search-bar .detail-close{ position:static; flex:0 0 auto; }
.search-panel .search-bar .icon-btn{ flex:0 0 auto; }
.search-panel .search-results{ flex:1 1 auto; overflow-y:auto; min-height:0; }
.search-bar{ display:flex; align-items:center; justify-content:space-between; gap:0.7em; margin-bottom:1.4em; }
.sources-panel{ padding:1.6em 1.8em 2.2em; }
.search-input{
  flex:1 1 auto; font-family:var(--body-font); font-size:1.1em; background:var(--surface-2); color:var(--text);
  border:2px solid rgba(255,255,255,0.14); border-radius:12px; padding:0.7em 1.1em; outline:none;
}
.search-input.focused, .search-input:focus{ border-color:var(--accent); }
.search-results .cards{ flex-wrap:wrap; padding:0.4em 0; }
/* Фильмография человека — сетка с переносом и вертикальной прокруткой внутри панели, а не одна
   горизонтальная лента: в ленту на экран влезало ~6 карточек, и полный список (у актёра их
   бывает 40+) выглядел обрезанным (жалоба 10.09.2026). */
.film-grid{ flex-wrap:wrap; overflow:visible; padding:0.4em 0 1.2em; }
/* В сетке фильмографии карточки заметно мельче каталожных: у актёра их бывает под сорок, и
   карточкой в 15.5vw на экран влезал один ряд из пяти — человек снова видел «всего несколько
   фильмов». Мельче — семь в ряд, и весь список виден прокруткой панели. */
.film-grid .card{ width:10.5vw; height:15.5vw; min-width:104px; min-height:154px; }
.film-grid /* На горизонтальной карточке описание не нужно: оно не помещается и обрезается на полуслове.
   Название, год и оценка — этого достаточно, подробности человек видит в шапке, когда наводится. */
.card .synopsis{ display:none !important; }
/* Окно фильмографии открывается сверху и во всю высоту (в отличие от карточки фильма, которая
   выезжает снизу): здесь главное — сам список, а не афиша человека. */
.detail.person{ align-items:flex-start; }
.detail.person .detail-panel{ margin-top:2vh; max-height:96vh; border-radius:20px; }
.detail.person .detail-hero{ height:20vh; min-height:130px; max-height:220px; }
.search-history{ display:flex; flex-wrap:wrap; gap:0.6em; }
.search-chip{
  font-family:var(--body-font); font-size:0.88em; color:var(--text); cursor:pointer;
  background:var(--surface-2); border:2px solid transparent; border-radius:999px; padding:0.5em 1.1em;
}
.search-chip.focused, .search-chip:hover{ border-color:var(--accent); }
.cast-card .name{ font-size:0.76em; color:var(--text-dim); line-height:1.3; }
.section-label{ font-family:var(--mono-font); text-transform:uppercase; letter-spacing:0.1em; font-size:0.7em; color:var(--text-dim); margin:0 0 0.8em; }

/* ---------- player ---------- */
.player-view{ position:fixed; inset:0; z-index:60; background:#000; display:none; }
.player-view.open{ display:block; }
/* pointer-events:none — обязательно. Любое движение курсора (а на приставке он всё равно где-то
   есть) заставляет YouTube показать свою обвязку поверх кадра: название, канал, кнопки. У окна
   превью в шапке это сделано с самого начала, у окна трейлера не было — отсюда «хвостик
   интерфейса» на старте (жалоба 25.09.2026). Управление всё равно пультом, попадать по плееру
   мышью не нужно. */
.player-view iframe, .player-view video{
  position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none;
}
/* Место под встроенный плеер трейлера с YouTube (когда своего ролика ещё нет) и строка
   состояния поверх чёрного экрана — чтобы человек не смотрел в пустоту, пока идёт поиск. */
.player-view .player-yt{ position:absolute; inset:0; }
/* Обложка поверх плеера на первые секунды: YouTube в начале рисует поверх кадра своё название,
   канал и крупную кнопку, и параметрами эмбеда это не убирается. Кадр фильма закрывает её, а
   потом плавно уходит (правило «никаких чужих интерфейсов», 25.09.2026). */
.player-view .player-cover{
  position:absolute; inset:0; z-index:3; display:none;
  background:#000 center/cover no-repeat; transition:opacity .6s ease;
}
.player-view .player-cover.on{ display:block; opacity:1; }
.player-view .player-cover.gone{ opacity:0; pointer-events:none; }
.player-view .player-note{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; font-family:var(--display-font); font-size:1.1em; color:var(--text-dim);
  pointer-events:none;
}
/* БЕЗ backdrop-filter. Видео на приставке выводится отдельным аппаратным слоем ПОД веб-страницей
   (z=-2 в SurfaceFlinger), а страница пробивает под него прозрачное окно. Любой элемент поверх
   видео, который читает фон (backdrop-filter), эту дыру отменяет: звук идёт, а на экране чёрное
   поле и одна эта панель — ровно то, что было видно на трейлерах (25.09.2026). У окна превью в
   шапке такой панели нет, поэтому там видео всегда показывалось. Непрозрачная подложка даёт тот
   же вид без фильтра. */
.player-toolbar{
  position:absolute; left:50%; bottom:1.8em; transform:translateX(-50%); display:flex; align-items:center; gap:0.4em;
  padding:0.6em 0.8em; border-radius:999px; background:rgba(20,19,25,0.92);
  border:1px solid rgba(255,255,255,0.14); box-shadow:0 18px 50px rgba(0,0,0,0.5);
}
.player-toolbar button{ width:2.6em; height:2.6em; border-radius:50%; border:none; background:transparent; color:#fff; cursor:pointer; font-size:1.05em; }
.player-toolbar button.focused, .player-toolbar button:hover{ background:var(--accent); color:#0a0a0a; }

/* ---------- login ---------- */
.login-screen{ position:fixed; inset:0; z-index:80; background:radial-gradient(140% 100% at 50% 0%, #1d1c24, var(--bg) 60%); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:2em; }
.login-screen .logo{ font-family:var(--display-font); font-size:2.4em; margin-bottom:0.2em; }
.login-screen .logo .dot{ color:var(--accent); }
.login-screen p{ color:var(--text-dim); margin:0 0 1.6em; }
.login-input{
  font-family:var(--mono-font); font-size:1.3em; letter-spacing:0.15em; text-align:center;
  background:var(--surface-2); border:2px solid rgba(255,255,255,0.14); color:var(--text); padding:0.6em 1em; border-radius:12px;
  width:min(90vw, 340px); outline:none;
}
.login-input.focused, .login-input:focus{ border-color:var(--accent); }
.login-error{ color:#e2645a; margin-top:1em; font-size:0.9em; min-height:1.3em; }
.login-hint{ margin-top:1.4em; font-size:0.78em; color:var(--text-dim); opacity:0.7; }

/* ---------- всплывающее сообщение (ошибки и подтверждения) ----------
   Раньше любой сбой (нет трейлера, недоступен индексер, отвалился запрос) заканчивался тем,
   что «просто ничего не происходит» — по такому поведению невозможно понять, что сломалось. */
.toast{
  position:fixed; left:50%; bottom:3.5vh; transform:translateX(-50%); z-index:130;
  max-width:min(70vw,760px); padding:0.9em 1.4em; border-radius:12px;
  background:rgba(28,26,34,0.96); color:var(--text); border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 18px 50px rgba(0,0,0,0.55); font-size:0.9em; line-height:1.45;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.toast.show{ opacity:1; }

/* ---------- loading / empty ---------- */
.state-msg{ padding:4em 3.4vw; color:var(--text-dim); font-family:var(--display-font); font-size:1.1em; text-align:center; }

/* ---------- тема «Стекло»: матовое 3D-стекло с объёмными краями ---------- */
:root[data-theme="glass"] body{
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(191,227,255,0.10), transparent 60%),
    radial-gradient(50% 40% at 100% 30%, rgba(111,168,216,0.10), transparent 60%),
    var(--bg);
}
:root[data-theme="glass"] .card{ background:transparent; transition:transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
:root[data-theme="glass"] .card .poster{
  background-color:rgba(255,255,255,0.06);
  backdrop-filter: blur(11px) saturate(150%) contrast(105%);
  -webkit-backdrop-filter: blur(11px) saturate(150%) contrast(105%);
  border:1px solid rgba(220,240,255,0.32);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.85),      /* резкий блик по верхнему ребру — свет, отражённый от кромки льда */
    inset 0 -1px 0 rgba(255,255,255,0.12),
    inset 0 -18px 26px rgba(70,130,185,0.35),    /* холодная тень в глубине — ощущение толщины */
    inset 16px 0 22px -16px rgba(255,255,255,0.3),
    inset -16px 0 22px -16px rgba(120,185,235,0.28),
    0 0 0 1px rgba(191,227,255,0.35),            /* тонкий чёткий кант */
    0 0 28px rgba(140,200,255,0.32),             /* мягкое свечение вокруг всей карточки */
    0 24px 46px rgba(0,0,0,0.5);
  transition:box-shadow .35s ease;
}
:root[data-theme="glass"] .card .poster::before{
  background:linear-gradient(0deg, rgba(6,9,13,0.82) 0%, rgba(6,9,13,0.12) 55%, rgba(210,235,255,0.10) 100%);
}
:root[data-theme="glass"] .card .poster::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.08) 53%, transparent 66%);
  mix-blend-mode:screen; opacity:0.85;
}
:root[data-theme="glass"] .card:hover .poster, :root[data-theme="glass"] .card.focused .poster, :root[data-theme="glass"] .card:focus-visible .poster{
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    inset 0 -18px 26px rgba(70,130,185,0.35),
    inset 16px 0 22px -16px rgba(255,255,255,0.35),
    inset -16px 0 22px -16px rgba(120,185,235,0.3),
    0 0 0 1.5px rgba(210,235,255,0.75),
    0 0 20px rgba(160,210,255,0.55),
    0 0 60px rgba(120,190,255,0.4),              /* усиленное свечение в фокусе */
    0 30px 60px rgba(0,0,0,0.55);
}
:root[data-theme="glass"] .card.focused, :root[data-theme="glass"] .card:focus-visible{ box-shadow:none; }
/* Шапку стеклянной пластиной НЕ делаем: рамка и тень превращали её в отдельную полосу поверх
   заголовка, которой нет ни в одном другом оформлении (жалоба 22.09.2026). Плавающие панельки
   (.toolbar, .player-toolbar) — другое дело, они и задуманы как пластины. */
:root[data-theme="glass"] .toolbar, :root[data-theme="glass"] .player-toolbar{
  background:rgba(20,26,34,0.42); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 18px 40px rgba(0,0,0,0.4);
}
:root[data-theme="glass"] .icon-btn, :root[data-theme="glass"] .btn.ghost{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
}
:root[data-theme="glass"] .detail-panel{
  background:rgba(18,22,29,0.72); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-top:1px solid rgba(255,255,255,0.18);
}
:root[data-theme="glass"] .login-input{
  background:rgba(255,255,255,0.06); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ---------- настройки (переключатель темы) ---------- */
.settings-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(6,6,8,0.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.settings-overlay.open{ opacity:1; pointer-events:all; }
.settings-panel{
  width:min(680px, 90vw); background:var(--surface); border-radius:18px; padding:2em 2.2em 2.4em;
  transform:translateY(2%); transition:transform .25s ease;
}
.settings-overlay.open .settings-panel{ transform:translateY(0); }
.settings-panel h2{ font-family:var(--display-font); font-size:1.3em; margin:0 0 0.2em; }
.settings-panel .sub{ color:var(--text-dim); font-size:0.86em; margin:0 0 1.4em; }
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0.9em; }
.theme-option{
  border-radius:12px; padding:1em; cursor:pointer; border:2px solid rgba(255,255,255,0.1);
  background:var(--surface-2); text-align:left; color:var(--text);
}
.theme-option .swatch{ height:2.6em; border-radius:8px; margin-bottom:0.7em; }
.theme-option .name{ font-family:var(--display-font); font-size:0.98em; }
.theme-option .desc{ font-size:0.74em; color:var(--text-dim); margin-top:0.15em; }
.theme-option.selected, .theme-option.focused{ border-color:var(--accent); }

/* ---------- расширенные настройки: настоящие разделы (категории слева, контент справа) ---------- */
.settings-panel-wide{ max-height:84vh; width:min(900px, 92vw); display:flex; flex-direction:column; }
.settings-body{ display:flex; gap:1.6em; overflow:hidden; flex:1 1 auto; min-height:0; }
.settings-categories{ display:flex; flex-direction:column; gap:0.25em; flex:0 0 auto; width:11em; overflow-y:auto; }
.settings-cat{
  text-align:left; padding:0.7em 0.9em; border-radius:10px; border:none; background:transparent;
  color:var(--text-dim); font-family:var(--body-font); font-size:0.92em; cursor:pointer;
}
.settings-cat.active{ background:var(--surface-2); color:var(--text); }
.settings-cat.focused, .settings-cat:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
/* Высота фиксирована: раздел переключается уже при переводе фокуса, и если бы панель меняла
   размер под содержимое, список разделов слева ездил бы под фокусом — навигация «зависала» и
   прыгала (жалоба 04.09.2026). */
.settings-content{ flex:1 1 auto; overflow-y:auto; padding:0 0.4em; min-width:0; height:62vh; }
.settings-categories{ height:62vh; }
.settings-pane{ display:none; }
.settings-pane.active{ display:block; }
.settings-group-title{ font-family:var(--display-font); font-size:1.05em; margin-bottom:0.6em; }
.settings-toggles{ display:flex; flex-direction:column; gap:0.5em; }
.settings-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:1em; padding:0.85em 1em;
  border-radius:12px; background:var(--surface-2); cursor:pointer; border:2px solid transparent;
}
.settings-toggle-row.focused, .settings-toggle-row:hover{ border-color:var(--accent); }
.settings-toggle-label{ font-size:0.94em; }
.settings-toggle-sub{ font-size:0.74em; color:var(--text-dim); margin-top:0.15em; }
.toggle{ width:2.6em; height:1.5em; border-radius:999px; background:rgba(255,255,255,0.15); flex:0 0 auto; position:relative; transition:background .2s ease; }
.toggle .toggle-knob{ position:absolute; top:0.15em; left:0.15em; width:1.2em; height:1.2em; border-radius:50%; background:var(--text); transition:transform .2s ease; }
.toggle.on{ background:var(--accent); }
.toggle.on .toggle-knob{ transform:translateX(1.1em); background:#0a0a0a; }
.storage-info{ color:var(--text-dim); font-size:0.86em; margin-bottom:1em; }
.storage-buttons{ display:flex; gap:0.7em; flex-wrap:wrap; }
.smb-form{ display:flex; flex-direction:column; gap:0.6em; margin-top:1em; }
.settings-input{
  font-family:var(--body-font); font-size:0.94em; background:var(--surface-2); color:var(--text);
  border:2px solid rgba(255,255,255,0.12); border-radius:10px; padding:0.7em 1em; outline:none;
}
.settings-input.focused, .settings-input:focus{ border-color:var(--accent); }
.smb-form-actions{ display:flex; gap:0.7em; }
.smb-result{ font-size:0.82em; color:var(--text-dim); min-height:1.2em; }

/* Полоса занятости памяти в настройках: вся ширина — весь диск, тёмное — занято чем угодно,
   зелёное — сколько ещё можно отдать под загрузки. Текстом это читалось плохо (25.09.2026). */
.storage-bar{
  position:relative; height:0.85em; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,0.10); margin:0.4em 0 0.6em;
}
.storage-bar-used{ position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,0.35); }
.storage-bar-limit{ position:absolute; right:0; top:0; bottom:0; background:#3ddc84; opacity:0.75; }
.storage-legend{ display:flex; flex-wrap:wrap; gap:0 1.4em; margin-bottom:0.8em; }
.storage-legend .dot{ display:inline-block; width:0.6em; height:0.6em; border-radius:50%; margin-right:0.45em; }
.storage-legend .dot.busy{ background:rgba(255,255,255,0.35); }
.storage-legend .dot.free{ background:#3ddc84; }
.storage-legend .dot.mine{ background:var(--accent); }

/* Строка загрузки — карточка: слева обложка, справа название, состояние и полоса. Цвет полосы
   и есть состояние: жёлтая — качается, красная — сбой, зелёная — файл на диске (25.09.2026). */
.download-card{ align-items:center; gap:1em; }
.download-poster{
  flex:0 0 auto; width:5.2em; height:7.4em; border-radius:10px;
  background:var(--surface-2) center/cover no-repeat; box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.download-progress-fill.going{ background:#e2a545; }
.download-progress-fill.fail{ background:#e2645a; }
.download-progress-fill.done{ background:#3ddc84; }

/* Серия, которая уже лежит на диске или стоит в очереди: галочка зелёная, строка приглушена и
   не выбирается. Без этого можно было отметить и скачать заново то, что уже скачано. */
.download-item.have{ opacity:0.62; cursor:default; }
.download-item.have .download-check{ border-color:#3ddc84; background:rgba(61,220,132,0.18); color:#3ddc84; opacity:1; }
.download-item.have.active .download-check{ border-color:#e2a545; background:rgba(226,165,69,0.18); color:#e2a545; }

/* Окно подключения к раздаче: состояние, полоса буфера и три числа — раздающие, участники,
   скорость. По ним человек сам видит, живая раздача или мёртвая (25.09.2026). */
.torr-panel{ text-align:center; padding:2.4em 2.4em 2em; }
.torr-head{ font-family:var(--display-font); font-size:1.25em; margin-bottom:0.5em; }
.torr-state{ color:var(--text-dim); margin-bottom:1em; font-size:0.95em; }
.torr-bar{ height:0.7em; border-radius:999px; background:rgba(255,255,255,0.10); overflow:hidden; }
.torr-bar-fill{ height:100%; width:0; background:#3ddc84; transition:width .4s ease; }
.torr-eta{ margin:0.55em 0 1.2em; }
.torr-grid{ display:flex; justify-content:center; gap:2.6em; }
.torr-cell{ min-width:5em; }
.torr-num{ font-family:var(--display-font); font-size:1.7em; line-height:1.1; }
.torr-cap{ font-size:0.72em; color:var(--text-dim); letter-spacing:0.04em; margin-top:0.15em; }
.torr-hint{ margin-top:1.2em; font-size:0.88em; min-height:1.2em; }
.torr-hint.warn{ color:#e2a545; }
.torr-hint.bad{ color:#e2645a; }

/* Строка серии в списке «Смотреть». Зелёная — файл на диске, жёлтая заливка по левому краю —
   ровно столько, сколько уже скачано. Так видно состояние всей строкой, от названия до кнопки
   «смотреть» (просьба 25.09.2026). */
.ep-row{ position:relative; overflow:hidden; }
.ep-row.ep-done{
  border-color:rgba(61,220,132,0.55);
  background:linear-gradient(90deg, rgba(61,220,132,0.20), rgba(61,220,132,0.08));
}
.ep-row.ep-loading{
  border-color:rgba(226,165,69,0.45);
  background:linear-gradient(90deg, rgba(226,165,69,0.28) var(--dl, 0%), rgba(255,255,255,0.05) var(--dl, 0%));
}
.ep-row.ep-done .download-sub{ color:#3ddc84; }
.ep-row.ep-loading .download-sub{ color:#e2a545; }

/* ---------- очередь загрузок ---------- */
/* Запас снизу — чтобы последняя строка списка могла целиком подняться над нижним краем
   экрана: без него самая нижняя загрузка оставалась наполовину срезанной (15.09.2026). */
.downloads-wrap{ padding:0 3.4vw 22vh; }
.downloads-list{ display:flex; flex-direction:column; gap:0.8em; }
.download-item{ display:flex; align-items:center; gap:1em; padding:1em 1.2em; border-radius:12px; background:var(--surface-2); border:2px solid transparent; }
/* Строка раздачи/файла сама является кнопкой (data-nav) — фокус рисуем рамкой, как везде */
.download-item.focused, .download-item[data-nav]:hover{ border-color:var(--accent); background:rgba(255,255,255,0.08); cursor:pointer; }
.download-info{ flex:1 1 auto; min-width:0; }
.download-title{ font-size:0.96em; margin-bottom:0.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.download-sub{ font-size:0.74em; color:var(--text-dim); margin-bottom:0.5em; }
.download-progress{ height:5px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; }
.download-progress-fill{ height:100%; background:var(--accent); transition:width .3s ease; }
.download-actions{ display:flex; gap:0.5em; flex:0 0 auto; }

/* ---------- выезжающая панель разделов (категории) ---------- */
.drawer-overlay{
  position:fixed; inset:0; z-index:65; background:rgba(4,5,7,0.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:all; }
.drawer{
  position:absolute; left:0; top:0; bottom:0; width:min(280px, 78vw); overflow-y:auto;
  display:flex; flex-direction:column; gap:0.4em; padding:6.5em 1em 2em;
  background:rgba(18,18,24,0.55); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-right:1px solid rgba(255,255,255,0.12); box-shadow:24px 0 60px rgba(0,0,0,0.35);
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.drawer-overlay.open .drawer{ transform:translateX(0); }
.drawer-item{
  display:flex; align-items:center; gap:0.9em; padding:0.85em 1em; border-radius:12px; border:none;
  background:transparent; color:var(--text-dim); font-family:var(--body-font); font-size:0.98em; cursor:pointer; text-align:left;
  transition:background .18s ease, color .18s ease;
}
.drawer-icon{ display:flex; color:inherit; }
.drawer-item.active{ color:var(--text); }
.drawer-item.active .drawer-icon{ color:var(--accent); }
.drawer-item.focused, .drawer-item:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
:root[data-theme="glass"] .drawer{
  background:rgba(20,26,34,0.4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 24px 0 60px rgba(0,0,0,0.4);
}

/* ---------- своя экранная клавиатура (D-pad, RU/EN) — см. js/keyboard.js ---------- */
.kb-overlay{
  position:fixed; inset:0; z-index:120; background:rgba(6,6,8,0.82); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:2em;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.kb-overlay.open{ opacity:1; pointer-events:all; }
.kb-panel{ width:min(860px, 96vw); background:var(--surface); border-radius:18px; padding:1.6em 1.8em 1.8em; }
.kb-title{ font-family:var(--display-font); font-size:1.1em; margin-bottom:0.8em; color:var(--text-dim); }
.kb-value{
  display:flex; align-items:center; min-height:2.2em; font-family:var(--mono-font); font-size:1.5em;
  background:var(--surface-2); border:2px solid var(--accent); border-radius:12px; padding:0.45em 0.8em; margin-bottom:1.2em;
  word-break:break-all;
}
.kb-caret{ width:2px; height:1.1em; background:var(--accent); margin-left:2px; animation:kb-blink 1s steps(1) infinite; }
@keyframes kb-blink{ 50%{ opacity:0; } }
.kb-keys{ display:flex; flex-direction:column; gap:0.5em; }
.kb-row{ display:flex; gap:0.5em; justify-content:center; flex-wrap:wrap; }
.kb-key{
  min-width:2.6em; height:2.6em; padding:0 0.6em; border-radius:10px; cursor:pointer;
  background:var(--surface-2); color:var(--text); border:2px solid transparent;
  font-family:var(--body-font); font-size:1.05em; display:inline-flex; align-items:center; justify-content:center; gap:0.35em;
}
.kb-key.focused, .kb-key:hover{ border-color:var(--accent); background:rgba(255,255,255,0.08); }
.kb-key-wide{ min-width:6em; font-size:0.95em; }
.kb-key-primary{ background:var(--accent); color:#0a0a0a; font-weight:600; }
.kb-actions{ margin-top:0.5em; }

/* ---------- раскладка ТВ vs смартфон (переключатель в настройках, см. Settings.tvLayout) ----------
   На ТВ закрытие окон/карточек — кнопкой Назад пульта (см. MainActivity.kt onBackPressedDispatcher
   + nav.js backHandlers), крестики только путают и занимают место на пульте недостижимой мышью
   зоны. На смартфоне BACK не всегда физическая кнопка — крестики оставляем. */
:root[data-layout="tv"] .detail-close{ display:none; }

@media (max-width: 860px){
  :root{ --card-w:44vw; --card-h:24.8vw; }
  .cards{ overflow-x:auto; }
  .hero-inner{ max-width:80%; }

  /* Настройки на телефоне: боковая колонка категорий шириной 11em съедала весь узкий экран,
     контент справа сжимался до нечитаемой полоски. На узком экране категории — горизонтальная
     лента сверху, контент — на всю ширину под ней. */
  .settings-panel-wide{ width:96vw; max-height:92vh; }
  .settings-body{ flex-direction:column; gap:0.8em; }
  .settings-categories{
    flex-direction:row; width:100%; overflow-x:auto; overflow-y:visible; gap:0.4em; padding-bottom:0.3em;
  }
  .settings-cat{ flex:0 0 auto; white-space:nowrap; }
  .settings-content{ padding:0; }
  .smb-form-actions{ flex-wrap:wrap; }
}

/* Кнопка «В начало» в конце каждой ленты. */
.row-rewind{
  flex:0 0 auto; align-self:center; margin-left:0.6em;
  display:flex; align-items:center; gap:0.5em;
  height:var(--card-h); min-width:9em; padding:0 1.2em;
  border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius);
  background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.75); cursor:pointer;
  font-family:var(--body-font); font-weight:300; font-size:0.92em;
}
.row-rewind.focused, .row-rewind:hover{
  border-color:var(--accent); color:#fff; background:rgba(255,255,255,0.12);
}
.row-rewind svg{ transform:rotate(180deg); }

/* ---------- боковая панель разделов (рельс) ----------
   Всегда на экране узкой полоской с иконками; когда фокус переходит на неё, разворачивается и
   показывает названия разделов. Так устроено в Okko (просьба 14.09.2026). Содержимое витрины
   сдвинуто правее на ширину свёрнутой полосы, поэтому панель ничего не перекрывает. */
:root{ --rail-w: 4.6em; --rail-w-open: 15em; }
.rail{
  /* Выше шапки (z-index:15). В разделах-списках шапка непрозрачная, и при z-index:6 она
     накрывала два верхних пункта полосы — «Главная» и «Продолжить просмотр» просто не были
     видны и до них нельзя было дойти (жалоба 17.09.2026). Развёрнутая полоса должна
     перекрывать всё, как в Okko. */
  position:absolute; left:0; top:0; bottom:0; z-index:20;
  width:var(--rail-w); overflow:hidden;
  display:flex; flex-direction:column; gap:0.15em; justify-content:center;
  padding:1em 0.7em; box-sizing:border-box;
  background:linear-gradient(90deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.6) 72%, rgba(8,9,12,0) 100%);
  transition:width .22s ease, background .22s ease;
}
/* Развёрнутая панель НЕПРОЗРАЧНА: сквозь полупрозрачную просвечивали кадр и описание из шапки,
   и названия разделов было не прочесть (замечено 14.09.2026). */
.rail.expanded{
  width:var(--rail-w-open);
  background:#0b0c10;
  box-shadow:18px 0 48px rgba(0,0,0,0.55);
}
.rail-item{
  display:flex; align-items:center; gap:1em; white-space:nowrap;
  padding:0.6em 0.75em; border:0; border-radius:0.6em; cursor:pointer;
  background:transparent; color:rgba(255,255,255,0.62);
  font-family:var(--body-font); font-weight:300; font-size:0.95em;
}
.rail-icon{ display:flex; flex:0 0 auto; }
.rail-label{ opacity:0; transition:opacity .18s ease; }
.rail.expanded .rail-label{ opacity:1; }
.rail-item.active{ color:#fff; }
.rail-item.active .rail-icon{ color:var(--accent); }
.rail-item.focused, .rail-item:hover{ background:rgba(255,255,255,0.14); color:#fff; }

/* Разделы БЕЗ витрины (Загрузки, Закладки, История, Моя библиотека) тоже сдвигаем правее полосы.
   Без этого их содержимое лежало ПОД ней: строки списка начинались у самого левого края, их левая
   часть была не видна, а пультовая навигация «вниз» находила по координатам пункт меню вместо
   следующей строки списка — фокус проваливался в боковую полосу и выйти из неё было нельзя
   (проверено на приставке 15.09.2026, раздел «Загрузки»). */
#app:not(.home-layout) > *:not(.rail):not(.topbar){ margin-left: var(--rail-w); }

/* Витрина сдвинута правее полосы, чтобы панель ничего не закрывала. */
#app.home-layout .rows-scroll{ left:var(--rail-w); }
/* Ряды плотнее: заголовок ближе к своим карточкам, между рядами меньше воздуха — тогда снизу
   помещается половина следующего ряда, а сверху ничего не наезжает на описание. */
.rows-scroll .row{ margin-bottom:0.7em; }
.rows-scroll .row-title{ margin:0 0 0.6em; font-size:1.05em; }
.rows-scroll .cards{ padding:0.4em 0 0.4em; }
.hero-inner{ left:calc(var(--rail-w) + 2.4vw); max-width:34vw; }
.topbar{ padding-left:calc(var(--rail-w) + 1vw); }
#app:not(.home-layout) .topbar{ background:var(--bg); }

/* ВЕРХНЯЯ КАРТОЧКА НЕ ДОЛЖНА ОСТАВАТЬСЯ ПОД ШАПКОЙ. Шапка липкая (position:sticky), и когда
   фокус возвращается к самому верхнему элементу списка, браузер подтягивает его ровно к краю
   экрана — то есть наполовину под шапку (жалоба 27.09.2026 про «Продолжить смотреть»).
   scroll-margin-top говорит прокрутке оставить сверху место под шапку. */
#app:not(.home-layout) [data-nav]{ scroll-margin-top:5.2em; }

/* Обзор сетевых устройств открывается ИЗ настроек, а у них z-index 70 — значит окну нужен
   свой, выше. Иначе оно появляется под панелью настроек: на экране ничего не меняется, а
   фокус уже в невидимом окне, и пульт перестаёт слушаться — со стороны выглядит как зависшее
   приложение (поймано на приставке 26.09.2026). */
.detail.smb-browser{ z-index:90; }

/* Заглушка «Скоро» — вместо сухого «ничего не найдено» там, где раздач физически нет. */
.soon-stub{ padding:3.2em 2.4em; text-align:center; max-width:38em; margin:0 auto; }
.soon-stub-badge{ width:6.2em; height:6.2em; margin:0 auto 1.2em; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); }
.soon-stub-title{ font-family:var(--display-font); font-size:1.9em; margin:0 0 0.4em; }
.soon-stub-text{ color:var(--text-dim); line-height:1.5; }
.soon-stub-hint{ margin-top:1.2em; opacity:0.7; }

/* Список сетевых устройств: заголовок с адресом, под ним — компактные строки общих папок. */
.smb-host-title{ font-family:var(--display-font); font-size:0.92em; color:var(--text-dim);
  margin:1.1em 0 0.5em; letter-spacing:0.02em; }
.smb-host-title:first-child{ margin-top:0.2em; }
.smb-row{ display:flex; align-items:center; padding:0.7em 1em; border-radius:10px;
  background:var(--surface-2); border:2px solid transparent; cursor:pointer; margin-bottom:0.4em; }
.smb-row.focused, .smb-row:hover{ border-color:var(--accent); }
.smb-row-name{ display:flex; align-items:center; gap:0.6em; font-size:0.96em; }

/* ---------- окно «Выйти из приложения?» (просьба владельца 04.10.2026) ----------
   Небольшая прямоугольная плашка (почти не вытянутая) с большими скруглениями: полупрозрачная, с объёмом (светлая кромка сверху,
   тёмный низ, глубокая тень). backdrop-filter НЕ используем - поверх видео он даёт чёрный экран. */
.exit-dialog{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,8,0.5); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.exit-dialog.open{ opacity:1; pointer-events:all; }
.exit-card{
  width:min(16em, 72vw); box-sizing:border-box; padding:1.5em 1.4em 1.3em;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25em; text-align:center;
  border-radius:1.5em;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, rgba(70,72,86,0.62), rgba(20,20,30,0.58));
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.6),
    0 8px 22px rgba(0,0,0,0.42),
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -18px 36px rgba(0,0,0,0.36);
  transform:scale(.92) translateY(10px); transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.exit-dialog.open .exit-card{ transform:none; }
.exit-title{
  font-family:var(--display-font); font-size:1.3em; font-weight:700; line-height:1.25; text-wrap:balance;
  color:rgba(229,9,20,0.86); text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.exit-actions{ display:flex; gap:0.9em; justify-content:center; width:100%; }
.exit-btn{
  flex:1 1 0; max-width:7em; padding:0.62em 0.4em; font-family:var(--body-font); font-size:0.92em; font-weight:700;
  color:rgba(229,9,20,0.95); cursor:pointer; outline:none; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 5px 14px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.28);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Фокус - красный, но полупрозрачный: заметен, не слепит (замечание владельца 05.10.2026: бордовый не подошёл, яркий выжигал глаза). */
.exit-btn.focused, .exit-btn:hover{
  color:#fff; background:linear-gradient(180deg, rgba(238,38,48,0.52), rgba(196,16,28,0.52));
  border-color:rgba(255,140,146,0.5);
  box-shadow:0 5px 14px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.26);
}


/* ---------- Pro-версия ----------
   Золото одно на все темы: Pro должен узнаваться независимо от выбранного оформления. Анимируются только
   transform и opacity (на слабых приставках остальное рвёт кадры); «Уменьшить анимации» гасит их глобальным правилом. */
:root{ --pro:#f2c46b; --pro-2:#c98a2b; }
.pro-chip{ display:inline-block; margin-left:0.55em; padding:0.12em 0.5em; border-radius:0.4em; font-family:var(--mono-font); font-size:0.5em; font-weight:700;
  letter-spacing:0.14em; color:#2a1a02; background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); vertical-align:middle; position:relative; top:-0.12em; }

.btn.pro-cta{ position:relative; overflow:hidden; color:#2a1a02; font-weight:700; border:1px solid rgba(255,230,160,0.65);
  background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); }
.btn.pro-cta svg{ stroke:#2a1a02; }
.btn.pro-cta::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.6),transparent); transform:translateX(0) skewX(-18deg); animation:pro-shine 3.6s ease-in-out infinite; }
@keyframes pro-shine{ 0%,55%{ transform:translateX(0) skewX(-18deg); } 100%{ transform:translateX(430%) skewX(-18deg); } }
.btn.pro-cta.focused, .btn.pro-cta:hover{ box-shadow:0 0 0 2px #fff, 0 0 1.2em rgba(242,196,107,0.65); filter:brightness(1.07); background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); }

.settings-cat.pro-cat{ color:var(--pro); font-weight:700; }

.pro-card{ display:flex; gap:1.4em; align-items:center; padding:1.3em 1.5em; border-radius:1.1em; margin:0.2em 0 1em; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1); background:var(--surface-2); }
.pro-card.active{ border-color:rgba(242,196,107,0.55); background:linear-gradient(135deg,rgba(242,196,107,0.18),rgba(201,138,43,0.07) 60%,var(--surface-2)); }
.pro-card.active::after{ content:""; position:absolute; inset:0; pointer-events:none; transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%); animation:pro-sheen 6.5s ease-in-out infinite; }
@keyframes pro-sheen{ 0%,62%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.pro-card-body{ min-width:0; flex:1; }
.pro-card-title{ font-family:var(--display-font); font-size:1.5em; letter-spacing:0.06em; }
.pro-card.active .pro-card-title{ color:var(--pro); }
.pro-card-title span{ font-size:0.6em; letter-spacing:0.03em; margin-left:0.45em; color:var(--text); opacity:0.85; }
.pro-card-sub{ color:var(--text-dim); margin:0.2em 0 0.7em; }
.pro-meter{ height:0.4em; border-radius:99px; background:rgba(255,255,255,0.1); overflow:hidden; max-width:22em; margin-bottom:0.8em; }
.pro-meter i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--pro-2),var(--pro)); }
.pro-slot-line{ color:var(--text-dim); font-size:0.9em; display:flex; align-items:center; gap:0.6em; flex-wrap:wrap; line-height:1.4; }
.pro-pips{ display:inline-flex; gap:0.3em; }
.pro-pips i{ width:0.7em; height:0.7em; border-radius:50%; background:rgba(255,255,255,0.18); }
.pro-pips i.on{ background:var(--pro); box-shadow:0 0 0.6em rgba(242,196,107,0.75); }
.pro-actions{ margin-bottom:0.6em; }
.pro-check{ min-height:1.4em; margin-bottom:1.4em; }
.pro-check.bad{ color:#ff7b7b; }

.pro-emblem{ position:relative; width:5.4em; height:5.4em; flex:0 0 auto; display:grid; place-items:center; }
.pro-emblem-core{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,0.18);
  color:var(--text-dim); background:rgba(255,255,255,0.04); }
.pro-emblem-core svg{ width:46%; height:46%; }
.pro-emblem.on .pro-emblem-core{ color:#2a1a02; border-color:transparent; background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); }
.pro-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--pro); opacity:0; pointer-events:none; }
.pro-emblem.on .pro-ring{ animation:pro-ring 3.2s ease-out infinite; }
.pro-emblem.on .pro-ring.r2{ animation-delay:1.6s; }
@keyframes pro-ring{ 0%{ transform:scale(1); opacity:0.7; } 100%{ transform:scale(1.7); opacity:0; } }

.pro-benefits{ display:flex; flex-direction:column; gap:0.75em; }
.pro-benefit{ display:flex; gap:0.8em; align-items:flex-start; }
.pro-benefit-mark{ width:1.7em; height:1.7em; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:rgba(242,196,107,0.16); color:var(--pro); }
.pro-benefit.soon .pro-benefit-mark{ background:rgba(255,255,255,0.08); color:var(--text-dim); }
.pro-benefit-title{ font-weight:600; }
.pro-benefit-title em{ font-style:normal; font-size:0.72em; color:var(--pro); border:1px solid rgba(242,196,107,0.45); border-radius:99px; padding:0.05em 0.55em; margin-left:0.45em; }
.pro-benefit-sub{ color:var(--text-dim); font-size:0.88em; line-height:1.4; }

/* Экран активации: эмблема «выпрыгивает», строки поднимаются по очереди. */
.pro-activate{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:rgba(6,4,2,0.9); opacity:0; pointer-events:none; transition:opacity 0.35s; }
.pro-activate.open{ opacity:1; pointer-events:all; }
.pro-activate-box{ text-align:center; padding:2em 1em; width:min(34em, 94vw); }
.pro-activate .pro-emblem{ width:9em; height:9em; margin:0 auto 1.3em; transform:scale(0.4); opacity:0; }
.pro-activate.open .pro-emblem{ animation:pro-pop 0.9s cubic-bezier(.2,1.4,.4,1) 0.15s forwards; }
@keyframes pro-pop{ 0%{ transform:scale(0.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.pro-activate-title,.pro-activate-sub,.pro-activate-line,.pro-activate .btn{ opacity:0; transform:translateY(0.7em); }
.pro-activate-title{ font-family:var(--display-font); font-size:clamp(1.5em, 6vw, 2.7em); letter-spacing:0.06em; color:var(--pro); overflow-wrap:anywhere; }
.pro-activate-sub{ color:var(--text); font-size:1.15em; margin:0.2em 0 1em; }
.pro-activate-line{ display:flex; align-items:center; justify-content:center; gap:0.6em; color:var(--text-dim); margin-bottom:1.6em; flex-wrap:wrap; text-align:center; padding:0 0.5em; }
.pro-activate.open .pro-activate-title{ animation:pro-rise 0.6s ease 0.55s forwards; }
.pro-activate.open .pro-activate-sub{ animation:pro-rise 0.6s ease 0.78s forwards; }
.pro-activate.open .pro-activate-line{ animation:pro-rise 0.6s ease 1s forwards; }
.pro-activate.open .btn{ animation:pro-rise 0.6s ease 1.25s forwards; }
@keyframes pro-rise{ to{ opacity:1; transform:none; } }

/* Окно «Смотреть в 60 кадрах» для тех, у кого нет Pro. */
.pro-pitch{ text-align:center; padding:2em 1.6em; max-width:36em; margin:0 auto; }
.pro-pitch .pro-emblem{ width:6.6em; height:6.6em; margin:0 auto 1em; }
.pro-pitch-title{ font-family:var(--display-font); font-size:1.7em; margin-bottom:0.4em; }
.pro-pitch-sub{ color:var(--text-dim); line-height:1.5; margin-bottom:1.1em; }
.pro-pitch-status{ padding:0.8em 1em; border-radius:0.8em; background:rgba(242,196,107,0.12); border:1px solid rgba(242,196,107,0.35); margin-bottom:0.8em; line-height:1.45; }
.pro-pitch-note{ color:var(--text-dim); font-size:0.85em; margin-bottom:1.4em; line-height:1.4; }
.season-card.pro-best{ border-color:rgba(242,196,107,0.75); background-color:rgba(242,196,107,0.2); }

/* ---------- Pro: индикатор онлайн просмотра, тест, фильтры поиска ---------- */
.pro-online{ display:inline-flex; align-items:center; gap:0.55em; font-size:0.9em; color:var(--text-dim); }
.pro-online i{ width:0.65em; height:0.65em; border-radius:50%; background:rgba(255,255,255,0.25); flex:0 0 auto; }
.pro-online.on{ color:#9be7b0; }
.pro-online.on i{ background:#4cd37a; box-shadow:0 0 0.7em rgba(76,211,122,0.75); animation:pro-live 2.4s ease-in-out infinite; }
@keyframes pro-live{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
.pro-trial{ margin:0 0 0.9em; }
.pro-trial .btn{ margin-bottom:0.5em; }
.pro-trial-note{ color:var(--text-dim); font-size:0.82em; line-height:1.4; margin-top:0.35em; }
.pro-trial-sent{ display:flex; align-items:flex-start; gap:0.6em; padding:0.8em 1em; border-radius:0.8em; background:rgba(242,196,107,0.12);
  border:1px solid rgba(242,196,107,0.35); line-height:1.45; }
.pro-trial-sent svg{ flex:0 0 auto; margin-top:0.15em; color:var(--pro); }
.pro-pitch .pro-trial-note{ margin-top:0.9em; }
.pro-benefit{ padding:0.5em 0.6em; border-radius:0.8em; border:2px solid transparent; }
.pro-benefit.focused{ border-color:rgba(242,196,107,0.55); background:rgba(242,196,107,0.07); }
.online-only-note{ margin:0.6em 0 0; }

.search-filters{ display:flex; gap:0.6em; flex-wrap:wrap; margin:0.2em 0 0.9em; }
.search-chip.filter{ display:inline-flex; align-items:center; gap:0.4em; }
.search-chip.filter.on{ background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); color:#2a1a02; border-color:transparent; font-weight:700; }
.search-chip.filter.on svg{ stroke:#2a1a02; }
.online-badge, .fmt-badge{ position:absolute; top:0.5em; z-index:3; display:inline-flex; align-items:center; justify-content:center; border-radius:0.5em;
  background:linear-gradient(135deg,#f8d98c,var(--pro) 45%,var(--pro-2)); color:#2a1a02; box-shadow:0 2px 8px rgba(0,0,0,0.5); }
.online-badge{ right:0.5em; width:1.9em; height:1.9em; }
.online-badge svg{ stroke:#2a1a02; }
.fmt-badge{ left:0.5em; padding:0.1em 0.55em; font-size:0.78em; font-weight:700; letter-spacing:0.06em; font-family:var(--mono-font); }

/* Пометки формата в поиске (3D, 60 кадров) - светлые, чтобы не путаться с золотой короной онлайн просмотра. */
.fmt-badges{ position:absolute; top:0.5em; left:0.5em; z-index:3; display:flex; gap:0.3em; }
.fmt-badges i{ font-style:normal; padding:0.1em 0.5em; font-size:0.78em; font-weight:700; letter-spacing:0.06em; font-family:var(--mono-font);
  border-radius:0.5em; background:#f4efe6; color:#15110a; box-shadow:0 2px 8px rgba(0,0,0,0.5); }

/* ---------- ТЕЛЕФОН: узкий экран (09.10.2026) ----------
   Раскладка для ТВ рассчитана на 1920 точек: боковая полоса 4.6em, заголовок 2.7em, карточки в долях ширины. На телефоне (390 точек) шапка наезжала на
   значки, название обрезалось, а настройки превращались в узкую колонку вкладок на всю высоту (62vh) с выжатым содержимым. Всё ниже действует ТОЛЬКО на
   узком экране и стоит в самом конце файла, чтобы перекрыть прежние правила. Раскладку ТВ (ширина больше 700) этот блок не затрагивает. */
.settings-panel-wide{ position:relative; }
@media (max-width: 700px){
  :root{ --rail-w:3.1em; --card-w:42vw; --card-h:23.6vw; }

  /* шапка: компактнее, ничего не наезжает и не режется */
  .topbar{ padding:0.55em 3vw 0.35em calc(var(--rail-w) + 2vw); gap:0.5em; }
  .topbar-left{ min-width:0; gap:0.5em; }
  .topbar .logo{ font-size:1.05em; white-space:nowrap; gap:0.35em; }
  .topbar .actions{ gap:0.35em; flex:0 0 auto; }
  .icon-btn{ width:2.3em; height:2.3em; }

  /* боковая полоса: уже, значки ближе друг к другу */
  .rail{ padding:0.6em 0.3em; gap:0.05em; }
  .rail-item{ padding:0.5em 0.55em; border-radius:0.5em; }

  /* сведения о тайтле: на всю ширину правее полосы, название поменьше */
  .hero-inner{ left:calc(var(--rail-w) + 3vw); right:4vw; max-width:none; top:max(4.2em, 8vh); max-height:36vh; }
  .hero-inner h2{ font-size:1.9em; line-height:1.1; }
  .hero-inner p{ max-width:none; font-size:0.95em; -webkit-line-clamp:3; }
  .hero-facts{ gap:0.7em; font-size:0.88em; }
  .hero::after{
    background:
      linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.12) 100%),
      linear-gradient(0deg, var(--bg) 6%, rgba(0,0,0,0.6) 22%, rgba(0,0,0,0) 40%);
  }

  /* ряды чуть выше: на узком экране вертикальный запас дороже */
  #app.home-layout .rows-scroll{ top:51vh; padding-bottom:24vh; }
  .rows-scroll .row-title{ font-size:1em; }
  .cards{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* удержание пальца на карточке запускает превью: системное меню и подсветка нажатия не нужны */
  .card{ -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }

  /* настройки: панель во весь экран, вкладки лентой СВЕРХУ, содержимое под ними на всю оставшуюся высоту */
  .settings-overlay{ align-items:stretch; }
  .settings-panel-wide{
    width:100vw; max-width:none; height:100vh; max-height:none; border-radius:0; padding:0.9em 0.9em 0.7em;
    transform:none;
  }
  .settings-panel-wide h2{ margin:0 0 0.6em; padding-right:3em; }
  .settings-panel-wide .detail-close{ top:0.6em; right:0.7em; }
  .settings-body{ flex-direction:column; gap:0.6em; overflow:hidden; }
  .settings-categories{
    flex-direction:row; flex:0 0 auto; width:100%; height:auto; gap:0.3em; padding:0 0 0.5em;
    overflow-x:auto; overflow-y:hidden; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .settings-cat{ flex:0 0 auto; white-space:nowrap; padding:0.55em 0.95em; border-radius:999px; }
  .settings-content{ flex:1 1 auto; height:auto; min-height:0; padding:0 0.1em 1em; }
}

/* ТЕЛЕФОН В ГОРИЗОНТАЛЬНОМ ПОЛОЖЕНИИ (просьба владельца 10.10.2026): настройки на весь экран, вкладки СЛЕВА колонкой, как на ТВ, а справа прокручивается содержимое.
   Лента вкладок сверху годится только для узкого вертикального экрана; в горизонтальном она съедала высоту, и работать с ней было нельзя. Блок стоит ПОСЛЕ телефонного,
   чтобы перекрыть его там, где ширина телефона в горизонтали ещё не больше 700 точек. */
@media (orientation:landscape) and (max-height:500px){
  .settings-overlay{ align-items:stretch; }
  .settings-panel-wide{
    width:100vw; max-width:none; height:100vh; max-height:none; border-radius:0; padding:0.6em 1em 0.5em; transform:none;
  }
  .settings-panel-wide h2{ margin:0 0 0.4em; padding-right:3em; font-size:1.1em; }
  .settings-panel-wide .detail-close{ top:0.35em; right:0.8em; }
  .settings-body{ flex-direction:row; gap:1em; overflow:hidden; }
  .settings-categories{
    flex-direction:column; flex:0 0 11em; width:11em; height:auto; gap:0.2em; padding:0 0.3em 0 0;
    overflow-x:hidden; overflow-y:auto; border-bottom:0;
  }
  .settings-cat{ flex:0 0 auto; white-space:normal; padding:0.6em 0.85em; border-radius:10px; }
  .settings-content{ flex:1 1 auto; height:auto; min-height:0; padding:0 0.4em 1em; }
}

/* ШЛЕМ OCULUS / META QUEST (data-device ставит app.js по сведениям оболочки): раскладка «смартфон», но управление указкой контроллера - она не так точна,
   как палец, поэтому кнопки и строки настроек крупнее. Удержание на карточке = превью, нажатие на ролик = на весь экран, двойное = назад (как на телефоне). */
:root[data-device="quest"] .icon-btn{ width:3.1em; height:3.1em; }
:root[data-device="quest"] .btn{ padding:0.9em 1.6em; }
:root[data-device="quest"] .settings-cat{ padding:0.85em 1.1em; }
:root[data-device="quest"] .settings-toggle-row{ padding:1.1em 1.2em; }
:root[data-device="quest"] .card{ -webkit-touch-callout:none; }


/* ПРЕВЬЮ ПО СХЕМЕ «A» (выбор владельца 17.10.2026 на тест-странице из шести вариантов): ролик чистый -
   без плавного появления (opacity), без затемняющей шторки поверх, без скруглений. На приставке H.265
   с opacity/скруглением в оболочке даёт чёрный экран, а плавный переход и шторка темнят картинку.
   Прячем/показываем только visibility; текст шапки читается за счёт тени. */
.hero .hero-preview, .hero-preview{ opacity:1 !important; transition:none !important; visibility:hidden; background:transparent; border-radius:0; }
.hero .hero-preview.playing, .hero-preview.playing{ visibility:visible; }
.hero.vid-on::after{ display:none !important; }
.hero.vid-on .hero-inner{ text-shadow:0 2px 12px rgba(0,0,0,.85); }

/* Идёт внешний плеер (см. window.__mkAway в app.js): страница прячется целиком, чтобы освободить память и слои отрисовки. */
html.mk-away body > * { display:none !important; }


/* БОКОВАЯ ПОЛОСА: прокрутка и телефон (21.10.2026). В горизонтальном положении телефона экран низкий,
   а полоса длинная - она не прокручивалась и нижние разделы были недоступны. Центровка пустым
   пространством сверху и снизу (а не justify-content:center): когда места хватает, полоса по центру,
   когда нет - прокручивается от первого пункта. */
.rail{ overflow-y:auto; overflow-x:hidden; justify-content:flex-start; scrollbar-width:none;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.rail::-webkit-scrollbar{ display:none; }
.rail::before, .rail::after{ content:''; flex:1 0 0; }
.rail-item{ flex:0 0 auto; }

/* Окно выбора языка: кнопки колонкой, чтобы три названия не ломали вёрстку на узком экране */
.lang-list{ flex-direction:column; align-items:stretch; }
.lang-list .exit-btn{ width:100%; max-width:none; flex:0 0 auto; text-align:center; padding:0.7em 0.5em; }
.lang-list .exit-btn.lang-current{ border-color:var(--accent); }


/* Окно выхода и окно выбора языка в цветах выбранной темы (22.10.2026): раньше были красными при любой теме. */
.exit-card{
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 28px 64px rgba(0,0,0,0.6), 0 8px 22px rgba(0,0,0,0.42);
}
.exit-title{ color:var(--text); text-shadow:none; font-family:var(--display-font); }
.exit-btn{
  color:var(--text); font-family:var(--body-font);
  background:var(--surface); border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
}
.exit-btn.focused, .exit-btn:hover{
  color:var(--bg); background:var(--accent); border-color:var(--accent);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.lang-list .exit-btn.lang-current{ border-color:var(--accent); }
:root[data-theme="glass"] .exit-card{
  background:linear-gradient(165deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)), var(--surface);
  border-color:rgba(255,255,255,0.28);
}
:root[data-theme="glass"] .exit-btn{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.24); }