/* Прототип раздела «ТВ-каналы» онлайн-кинотеатра Иви (десктоп).
   Значения цветов, отступов и типографики взяты из дизайна Paper. */

:root {
  --bg: #000000;
  --card: #141414;
  --card-2: #1f1f1f;
  --accent: #f30745;

  --tx: #ffffff;
  --tx-72: #ffffffb8; /* 72% */
  --tx-56: #ffffff8f; /* 56% */
  --tx-48: #ffffff7a; /* 48% */
  --tx-32: #ffffff52; /* 32% */
  --line-16: #ffffff29; /* 16% */
  --line-8: #ffffff14; /* 8% */

  --font: "IVI Sans Base", "IVISansBase-Rg", -apple-system, "Segoe UI", Roboto,
    system-ui, sans-serif;

  --maxw: 1512px;
  --gutter: 48px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

img { display: block; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Шапка ---------- */
.topbar {
  display: flex;
  align-items: center;
  height: 72px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line-16);
  gap: 32px;
}

.logo img { width: 66px; height: 48px; object-fit: contain; }

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav a {
  color: var(--tx-56);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  padding: 10px 0;
  transition: color .15s ease;
}
.nav a:hover { color: var(--tx); }
.nav a.is-current { color: var(--tx); }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-cta {
  height: 32px;
  padding: 0 11px;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: filter .15s ease;
}
.btn-cta:hover { filter: brightness(1.08); }

.ic { width: 16px; height: 16px; }

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-56);
  font-size: 15px;
  font-weight: 500;
}
.icon-text .ic { opacity: .56; }
.icon-text:hover { color: var(--tx); }

.icon-only { display: inline-flex; padding: 4px; }
.icon-only .ic { opacity: .48; }

.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px 0 4px;
  background: var(--card);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.btn-login .avatar {
  width: 32px; height: 32px;
  padding: 8px;
  background: var(--card-2);
  border-radius: 6px;
}

/* ---------- Заголовок + табы ---------- */
.intro { margin-top: 24px; }

.page-title {
  margin: 0;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tabs {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  position: relative;
  border-bottom: 1px solid var(--line-16);
}
.tab {
  position: relative;
  padding: 0 0 12px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--tx-72);
  transition: color .15s ease;
}
.tab:hover { color: var(--tx); }
.tab.is-active { color: var(--tx); }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- Панель ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}
.btn-tomorrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 15px;
  background: var(--card);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.btn-tomorrow:hover { background: #1b1b1b; }

.switch { display: inline-flex; align-items: center; gap: 12px; }
.switch-label { font-size: 16px; color: var(--tx); opacity: .72; }
.toggle {
  width: 32px; height: 20px;
  border-radius: 10px;
  background: #3a3a3a;
  position: relative;
  padding: 0;
  transition: background .18s ease;
}
.toggle.is-on { background: var(--accent); }
.toggle .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px #9e0b32a3;
  transition: transform .18s ease;
}
.toggle.is-on .knob { transform: translateX(12px); }

/* ---------- Секции ---------- */
.section { margin-top: 40px; }
.section-title {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}
.section-title .chev {
  color: var(--tx-48);
  font-weight: 400;
  margin-left: 2px;
}

/* ---------- Сетка каналов ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; /* все строки одинаковой высоты */
  gap: 24px;
}

.card {
  background: var(--card);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .16s ease;
}
/* подсвечивается немного вся карточка */
.card:hover { background: #1d1d1f; }

/* тело растягивается, чтобы футер всегда был у нижнего края карточки */
.card-body {
  display: block;
  padding: 12px 12px 8px;
  flex: 1 1 auto;
  color: inherit;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px; /* одинаковая шапка при 1 и 2 строках названия */
}
.card-logo {
  width: 85px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.card-logo img { width: 100%; height: 100%; object-fit: cover; }
.card-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.poster {
  position: relative;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
/* Макет XG4: карточка без шапки — постер во всю ширину карточки, вплотную сверху/слева/справа
   (отрицательные марджины гасят паддинг .card-body; верхние углы скругляет overflow карточки). */
.card-body > .poster:first-child { margin: -12px -12px 0; border-radius: 0; }
/* Чип «ещё N минут» до конца текущей передачи — тот же компонент, что в фокусе
   постеров ТВ-онлайн; тут в левом нижнем углу и всегда виден (только v1/v2). */
.poster-left { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .poster-left:not([hidden]) {
  display: block;
  position: absolute; right: 8px; top: 8px;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(60, 60, 66, 0.42); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  white-space: nowrap;
}
/* Вариант 3 — чип на постере программы (мета-чип .gm-mins) в правом НИЖНЕМ углу */
html[data-mode="v3"] .poster-left:not([hidden]) {
  top: auto; bottom: 8px; right: 8px;
  padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); line-height: 1.2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Текущая передача («сейчас») — белым и медиум (только v1/v2) */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .sched-row.is-now .sched-title,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .sched-row.is-now .sched-time {
  color: #fff; font-weight: 500;
}
/* Вариант 3 — уже прошедшие передачи сверху приглушены */
html[data-mode="v3"] .sched-row.is-past .sched-time,
html[data-mode="v3"] .sched-row.is-past .sched-title { color: var(--tx-32); }
/* Брендовый овальный чип «есть на Иви» справа от названия (v3) */
.sched-ivi {
  flex-shrink: 0; align-self: center;
  padding: 2px 8px; border-radius: 100px;
  background: #F30745; color: #fff;
  font-size: 11px; line-height: 15px; font-weight: 600; white-space: nowrap;
}
/* Вариант 3 — таймлайн эфира прямо на постере снизу: слева прошедшее (малиновым), справа остаток */
.prog-line { display: none; }
html[data-mode="v3"] .prog-line:not([hidden]) {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255, 255, 255, 0.28); overflow: hidden; z-index: 2;
}
.prog-fill { display: block; height: 100%; background: #F30745; }

/* Поповер-превью передачи при наведении (v3) */
.sched-pop {
  position: fixed; z-index: 120; width: 320px; display: none; flex-direction: column;
  background: #1c1c1e; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px #000a;
}
.sched-pop.is-open { display: flex; animation: schedPopIn 0.42s cubic-bezier(0.24, 1.34, 0.38, 1); }
/* Появление карточки — «rise + settle» с лёгким пружинным перелётом */
@keyframes schedPopIn {
  0%   { opacity: 0; transform: translateY(calc(-50% + 12px)) scale(0.96); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* Затемнение фона вокруг карточки, пока открыт поповер (без блюра);
   наведённая карточка канала и поповер не затемняются и выделяются. */
.sched-dim {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0, 0, 0, 0.55);
}
.sched-dim.is-open { display: block; animation: schedDimIn 0.26s ease; }
@keyframes schedDimIn { from { opacity: 0; } to { opacity: 1; } }
.card.is-raised { position: relative; z-index: 110; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); }
.sp-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.sp-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-ttl { font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; }
.sp-desc {
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tx-72);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-dur { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tx-56); }
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px;
  border-radius: 12px; background: #F30745; color: #fff; font-size: 15px; font-weight: 600;
}
.sp-btn:hover { background: #ff1f58; }
/* Серая кнопка «О программе» — для контента без Иви */
.sp-btn-gray { background: rgba(255, 255, 255, 0.1); color: #fff; border: none; cursor: pointer; }
.sp-btn-gray:hover { background: rgba(255, 255, 255, 0.16); }

.sched {
  margin-top: 8px;
  min-height: 120px;
}
.sched-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  transition: background .12s ease;
}
.sched-row:hover { background: #ffffff0a; }
/* Вариант 3 — подложка выделения при наведении: максимально скруглённая и чуть
   шире по бокам (текст остаётся на месте за счёт отрицательных margin). */
html[data-mode="v3"] .sched-row { padding: 7px 14px; border-radius: 999px; margin: 0 -10px; }
/* На главной конкретные передачи не выделяются — все строки одинаковые */
.sched-time {
  flex-shrink: 0;
  width: 48px; /* фиксированная ширина + табличные цифры — названия выравниваются слева */
  font-weight: 500;
  color: var(--tx-56);
  font-variant-numeric: tabular-nums;
}
.sched-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tx-72);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка «Вся телепрограмма» — серый овал, аккуратно вписан снизу в карточку */
.card-foot {
  position: relative;
  padding: 4px 16px 16px;
}
.allprog {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--tx-72);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.allprog:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* Канал, выбранный на плеере (Вариант 1): кнопка заметнее и чуть светлее остальных. */
.allprog.is-selected { background: rgba(255, 255, 255, 0.22); color: #fff; }
.allprog.is-selected:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- Горизонтальные ряды ---------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 7 * 24px) / 8);
  gap: 24px;
  overflow-x: auto;
  /* паддинги + отрицательные марджины дают место увеличению при наведении (не обрезается) */
  padding: 10px 12px 14px;
  margin: -10px -12px 0;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-wide { grid-auto-columns: calc((100% - 4 * 24px) / 5); }

.show {
  position: relative;
  aspect-ratio: 2 / 3;
  background: #141414;
  border-radius: 10px;
  overflow: hidden;
}
.badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #16c06a;
  color: #04120a;
  font-size: 11px;
  font-weight: 700;
}
.age {
  position: absolute;
  bottom: 8px; right: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-48);
}
.ivi-mark {
  position: absolute;
  bottom: 8px; left: 8px;
  width: 22px; height: 14px;
  background: var(--accent);
  border-radius: 3px;
}

.collection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.collection-art {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 20% 10%, #2a2a2a 0%, #121212 60%, #0a0a0a 100%);
  border: 1px solid #ffffff0f;
}
.collection-cap {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--tx-72);
}

/* ---------- SEO-текст ---------- */
.seo {
  margin-top: 40px;
  padding: 24px 0 40px;
  max-width: 75%;
}
.seo p {
  margin: 0;
  color: var(--tx-72);
  font-size: 15px;
  line-height: 22px;
}

/* ======================================================================
   Страница плеера (player.html)
   ====================================================================== */

/* Хлебные крошки */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 15px;
  color: var(--tx-56);
}
.crumbs a { color: var(--tx-56); }
.crumbs a:hover { color: var(--tx); }
.crumbs .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--tx-48); }
.crumbs-cur { color: var(--tx); }

/* Табы категорий */
.ptabs {
  display: flex;
  gap: 32px;
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-16);
  overflow-x: auto;
  scrollbar-width: none;
}
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
  position: relative;
  padding: 0 0 12px;
  margin-bottom: -13px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--tx-56);
  white-space: nowrap;
}
.ptab:hover { color: var(--tx); }
.ptab.is-active { color: var(--tx); }
.ptab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px; border-radius: 2px;
  background: var(--accent);
}

/* ======================================================================
   ВАРИАНТ 1 (data-mode="v1") — отличия от As is
   ====================================================================== */
/* без хлебных крошек */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .crumbs,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .crumbs-top { display: none; }

/* без заголовка категории над сеткой (он дублирует выбранный таб) */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .section-head:has(#gridTitle) { display: none; }

/* категорийные табы — пилюли (как табы дней, но чуть меньше) */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tabs,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptabs {
  gap: 8px;
  border-bottom: none;
  padding-bottom: 0;
}
/* Табы скроллятся по горизонтали, если не влезают (без видимого ползунка).
   Выпадающий список дат не обрезается — у него position: fixed. */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tabs,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptabs {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tabs::-webkit-scrollbar,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptabs::-webkit-scrollbar { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tab,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptab {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--tx-72);
  background: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tab::after,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptab::after { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tab:hover,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptab:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tab.is-active,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .ptab.is-active { color: #fff; background: rgba(255, 255, 255, 0.32); }

/* Вариант 3 — крупные «стеклянные» табы с мини-кластером обложек (макет L58) */
html[data-mode="v3"] .tabs { gap: 8px; align-items: center; }
html[data-mode="v3"] .tab {
  height: 46px; padding: 0 8px 0 16px; border-radius: 16px;
  font-size: 15px; line-height: 19px; font-weight: 500; letter-spacing: -.01em;
  color: var(--tx-56); /* невыбранный — текст с прозрачностью */
  /* невыбранный таб — темнее */
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff0d 32%, #ffffff0d 68%, #ffffff1f 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: clip;
}
html[data-mode="v3"] .tab:hover { color: #fff; background: linear-gradient(135deg, #ffffff38 0%, #ffffff1a 32%, #ffffff1a 68%, #ffffff38 100%); }
html[data-mode="v3"] .tab.is-active {
  /* выбранный — текст 100% белый, фон светлее (ширина не меняется) */
  color: #fff;
  background: linear-gradient(135deg, #ffffff5c 0%, #ffffff33 32%, #ffffff33 68%, #ffffff5c 100%);
}
/* Мини-кластер обложек: по центру таба по вертикали, 6px от правого края */
html[data-mode="v3"] .tab-thumbs {
  position: relative; width: 62px; height: 30px; margin-left: 8px; flex-shrink: 0;
}
html[data-mode="v3"] .tt-back,
html[data-mode="v3"] .tt-front {
  position: absolute; top: 50%; transform: translateY(-50%); object-fit: cover; display: block;
}
html[data-mode="v3"] .tt-back { width: 46px; height: 26px; right: 14px; border-radius: 5px; filter: brightness(.82); }
html[data-mode="v3"] .tt-front { width: 52px; height: 30px; right: 0; border-radius: 8px; }
html[data-mode="v3"] .tt-stub { background: #141414; /* постоянная заливка, без бликов */ }
/* Дата-таб (первый) в v3 — тех же размеров, что и табы категорий */
html[data-mode="v3"] .tab-date-btn {
  height: 46px; padding: 0 16px; border-radius: 16px; /* как у остальных табов, дефолтный вид */
  font-size: 15px; line-height: 19px; font-weight: 500; color: #fff;
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff0d 32%, #ffffff0d 68%, #ffffff1f 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-mode="v3"] .tab-date:hover .tab-date-btn,
html[data-mode="v3"] .tab-date:focus-within .tab-date-btn {
  background: linear-gradient(135deg, #ffffff30 0%, #ffffff17 32%, #ffffff17 68%, #ffffff30 100%);
}

/* Вариант 4 — «живые» эмодзи-табы (макет WBH): стеклянная пилюля + текст + 3D-эмодзи */
html:is([data-variant="v4"],[data-emojitabs]) .tabs { gap: 8px; align-items: center; border-bottom: none; }
html:is([data-variant="v4"],[data-emojitabs]) .tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 10px 0 14px; border-radius: 999px;
  font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(167deg, #ffffff38 -32%, #ffffff1a 20%, #ffffff1a 80%, #ffffff38 132%);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  overflow: visible;
}
html:is([data-variant="v4"],[data-emojitabs]) .tab:hover {
  background: linear-gradient(167deg, #ffffff52 -32%, #ffffff2b 20%, #ffffff2b 80%, #ffffff52 132%);
}
html:is([data-variant="v4"],[data-emojitabs]) .tab.is-active {
  background: linear-gradient(167deg, #ffffff66 -32%, #ffffff3d 20%, #ffffff3d 80%, #ffffff66 132%);
}
html:is([data-variant="v4"],[data-emojitabs]) .tab.is-active::after { display: none; } /* без подчёркивания — вид пилюли */
html:is([data-variant="v4"],[data-emojitabs]) .tab-emoji { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
html:is([data-variant="v4"],[data-emojitabs]) .tab-emoji img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* Таб выбора дня — в том же стиле стеклянной пилюли, по высоте как табы категорий */
html:is([data-variant="v4"],[data-emojitabs]) .tab-date-btn {
  height: 38px; padding: 0 16px; font-size: 14px; border-radius: 999px;
  background: linear-gradient(167deg, #ffffff38 -32%, #ffffff1a 20%, #ffffff1a 80%, #ffffff38 132%);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
/* Градиент-растворение по краям, когда табы можно скроллить (оверлеи на .tabs-bar,
   не маска на #tabs — иначе обрезался бы выпадающий список дат) */
.tabs-fade { position: absolute; top: 0; bottom: 0; width: 36px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.tabs-fade.l { left: 0; background: linear-gradient(90deg, var(--bg, #000) 20%, transparent); }
.tabs-fade.r { right: 0; background: linear-gradient(270deg, var(--bg, #000) 20%, transparent); }
.tabs-fade.is-on { opacity: 1; }

/* === Вариант 2: тот же макет, что Вариант 3, но простые табы + иконки секций (макет TPX) === */
html[data-variant="v2"] .tabs { gap: 8px; align-items: center; }
html[data-variant="v2"] .tab {
  height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0; color: var(--tx-72);
  background: rgba(255, 255, 255, 0.12); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-variant="v2"] .tab:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
html[data-variant="v2"] .tab.is-active { color: #fff; background: rgba(255, 255, 255, 0.32); }
html[data-variant="v2"] .tab-thumbs { display: none; }
html[data-variant="v2"] .tab-date-btn {
  height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px;
  background: rgba(255, 255, 255, 0.12); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-variant="v2"] .tab-date:hover .tab-date-btn,
html[data-variant="v2"] .tab-date:focus-within .tab-date-btn { background: rgba(255, 255, 255, 0.2); }

/* ---- Переключатель секций в шапке: «ТВ онлайн · Программа передач» (v1/v2) ---- */
.section-switch { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .page-title { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .section-switch {
  display: flex; align-items: center; gap: 36px;
}
/* По макету XQL: иконка 32px + текст 36/44 medium; активный — белый, неактивный — 0.3 */
.sw-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: -0.016em;
  color: #fff; opacity: 0.3; transition: opacity .15s ease;
}
.sw-item:hover { opacity: 0.6; }
.sw-item.is-active { opacity: 1; }
.sw-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; }
.sw-ic svg { width: 30px; height: auto; display: block; }

/* Блоки каналов/передач: отступы между карточками 8px, скругления 16px */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .grid { gap: 8px; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .card { border-radius: 16px; }
/* Больше воздуха от шапки до переключателя секций */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .intro { margin-top: 30px; }
/* Воздух между заголовками «ТВ онлайн / Программа передач» и табами */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tabs { margin-top: 28px; }
/* Расстояние от табов до первого контента — такое же, как верхние отступы шапки */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body > :first-child { margin-top: 32px; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .page:not(.home) .section:has(#channelGrid) { margin-top: 12px; }
/* ТВ онлайн — чуть меньше расстояние между блоками ленты */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body > .gal { margin-top: 32px; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body > .live-block,
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body > .topshows { margin-top: 40px; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body > :first-child { margin-top: 32px; }

/* Кнопка «Телепрограмма» (каталог) и панель дня (телепрограмма) убраны в v1/v2 —
   навигация через переключатель секций, дата — в дропдауне первого таба */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .toolbar { display: none; }

/* ---- Первый таб-дропдаун даты «Сегодня» (иконка слева + текст + каретка) ---- */
.tab-date { position: relative; display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .tab-date { display: inline-flex; flex: 0 0 auto; outline: none; }
.tab-date-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 10px;
  color: #fff; background: rgba(255, 255, 255, 0.12);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s ease;
}
.tab-date:hover .tab-date-btn, .tab-date:focus-within .tab-date-btn { background: rgba(255, 255, 255, 0.2); }
.tab-date-btn svg { flex-shrink: 0; color: var(--tx-72); }
/* фиксированная ширина под самую длинную подпись («Воскресенье»), чтобы таб
   не менял размер при выборе даты */
.tab-date-label { min-width: 108px; text-align: left; }
.tab-date-caret { font-size: 10px; color: var(--tx-56); margin-left: auto; padding-left: 4px; }
.tab-date-menu {
  position: fixed; z-index: 70; /* координаты top/left ставит JS по наведению */
  display: none; flex-direction: column; gap: 2px;
  min-width: 200px; padding: 6px;
  background: var(--card-2); border-radius: 14px;
  box-shadow: 0 20px 48px #000c, 0 0 0 1px #ffffff14;
}
.tab-date:hover .tab-date-menu, .tab-date:focus-within .tab-date-menu { display: flex; }
/* Невидимый «мостик» над меню, перекрывающий зазор до кнопки — чтобы при переходе
   курсора к списку он не исчезал и был сразу активен для нажатий. */
.tab-date-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
.td-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 12px; border-radius: 9px;
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
  background: transparent; transition: background .15s ease;
}
.td-item:hover { background: #ffffff14; }
.td-item.is-active { background: #ffffff26; }
.td-item .td-num { color: var(--tx-56); font-variant-numeric: tabular-nums; }

/* Вариант 2 — табы категорий закреплены сверху при скролле.
   Фон-полосу несёт обёртка .tabs-bar (у #tabs overflow-x:auto, который обрезал бы
   её), поэтому градиент не обрезается по бокам и доходит до краёв экрана. */
.tabs-bar { position: relative; }
html:is([data-mode="v2"],[data-mode="v3"]) .tabs-bar {
  position: sticky; top: 16px; z-index: 60;
  padding: 4px 0 16px;
}
/* фон-полоса на всю ширину экрана: плотная под табами, затем ПЛАВНО и высоко
   растворяется (заходит ниже полосы, чтобы переход был мягким, не резким) */
html:is([data-mode="v2"],[data-mode="v3"]) .tabs-bar::before {
  /* top: -16px — фон закрывает и отступ над залипшими табами */
  content: ""; position: absolute; top: -16px; bottom: -64px; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--bg) 0, var(--bg) 40%, transparent 100%);
  z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
/* показываем градиент только когда табы залипли у верха экрана */
html:is([data-mode="v2"],[data-mode="v3"]) .tabs-bar.is-stuck::before { opacity: 1; }
/* Вариант 2 — иконка-таб «Телепрограмма» первой в ряду табов */
.tab-tv { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .tab-tv {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; height: 34px; width: 42px; border-radius: 10px;
  color: var(--tx-72); background: rgba(255, 255, 255, 0.12);
  transition: color .15s ease, background .15s ease;
}
html:is([data-mode="v2"],[data-mode="v3"]) .tab-tv:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
html:is([data-mode="v2"],[data-mode="v3"]) .tab-tv.is-active { color: #fff; background: rgba(255, 255, 255, 0.32); }


/* Вариант 2 — без стрелки «вглубь подборки» в заголовках (переходов нет) */
html:is([data-mode="v2"],[data-mode="v3"]) .gal-head .chev { display: none; }
/* Вариант 2 — увеличенный отступ снизу (в 2 раза) после всей ленты */
html:is([data-mode="v2"],[data-mode="v3"]) #v1Body { padding-bottom: 88px; }

/* Переключатель каналов (чипсы) */
.chips {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  width: 232px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 12px;
  background: #ffffff14;
  transition: background .15s ease;
}
.chip:hover { background: #ffffff24; }
.chip.is-active { background: #ffffff33; }
.chip-logo {
  flex-shrink: 0;
  width: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
}
.chip-logo img { width: 100%; height: 100%; object-fit: cover; }
.chip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.chip-prog {
  font-size: 13px;
  line-height: 16px;
  color: #d9d7e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-bar {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: #ffffff3d;
}
.chip-bar-fill {
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: 1px;
  background: #fff;
}

/* Плеер + программа */
.watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 448px;
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}
/* Встроенный плеер ТВ онлайн (Вариант 2, макет 10W9) — плеер + список каналов. */
.v4b-player { margin-bottom: 28px; }
/* Плеер компактнее — размер задаём высотой, пропорции трансляции 16:9 сохраняем;
   список каналов занимает оставшуюся ширину. Первый экран помещается целиком. */
/* Плеер вписывается в один экран по высоте (снизу чуть выглядывает контент), сохраняя
   16:9. Ширину ограничиваем значением, выведенным из высоты вьюпорта: что меньше —
   доступная ширина (узкий экран) или высота экрана (широкий монитор), то и ограничивает.
   Правая колонка с программой — фикс-ширины; лишнее место уходит правее неё. */
.v4b-player .watch { display: flex; gap: 24px; align-items: stretch; margin-top: 10px; }
/* Пропорции как в макете 1440: колонка программы — 24.6% ширины контента (на 1440 это
   ровно 340px), плеер заполняет остаток (16:9). Доля сохраняется на любой ширине, так
   что вёрстка адаптивная. Мягкий кап по высоте срабатывает только на экстремально
   широких/низких экранах, на обычных 16:9 не влияет. */
.v4b-player .watch .player {
  aspect-ratio: 16 / 9; flex: 1 1 auto; min-width: 0;
  max-width: max(520px, calc((100vh - 120px) * 16 / 9));
}
.v4b-player .pv-side { position: relative; flex: 0 0 40%; min-width: 300px; }
/* Список и EPG занимают всю высоту; нижние строки угасают под плавающим тоглом. */
.pv-list, .pv-epg {
  position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent 100%);
}
.pv-list { display: flex; flex-direction: column; gap: 4px; }
.pv-list::-webkit-scrollbar, .pv-epg::-webkit-scrollbar { display: none; }
.pv-epg[hidden], .pv-list[hidden] { display: none; }
/* Плавающий тогл «Каналы / Телепрограмма» — стеклянная пилюля внизу блока (как «Вся
   телепрограмма»), со скользящим белым индикатором. */
.pv-switch {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  display: flex; padding: 4px; border-radius: 999px;
  /* подложка по цвету как неактивный таб категорий + лёгкий блюр */
  background: linear-gradient(167deg, #ffffff38 -32%, #ffffff1a 20%, #ffffff1a 80%, #ffffff38 132%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pv-seg { position: relative; z-index: 1; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.66); white-space: nowrap; transition: color .2s ease; }
.pv-seg.is-active { color: #fff; }
.pv-seg-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
}
.pv-ch { display: flex; align-items: center; gap: 11px; padding: 7px 14px 7px 7px; border-radius: 18px; transition: background .15s ease; }
.pv-ch:hover { background: rgba(255, 255, 255, 0.08); }
.pv-ch.is-active { background: rgba(255, 255, 255, 0.16); }
.pv-ch-logo { flex-shrink: 0; width: 107px; height: 67px; border-radius: 14px; overflow: hidden; background: #1c1c1e; }
.pv-ch-logo img { width: 100%; height: 100%; object-fit: cover; }
.pv-ch-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-ch-name { font-size: 13px; line-height: 16px; color: var(--tx-56); }
.pv-ch-prog { font-size: 15px; line-height: 19px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ch-genre { font-size: 13px; line-height: 16px; color: var(--tx-56); }

/* Варианты 2 и 3: равные и небольшие зазоры между шапкой · заголовком · табами · плеером (16px). */
html:is([data-copy="v4b"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .intro { margin-top: 16px; margin-bottom: 0; }
html:is([data-copy="v4b"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #tabs { margin-top: 0; }
/* padding-top даёт отступ над табами и в залипшем состоянии (не только в потоке). */
html:is([data-copy="v4b"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .tabs-bar { padding: 16px 0 16px; }
html:is([data-copy="v4b"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #v1Body > .v4b-player { margin-top: 0; }
html:is([data-copy="v4b"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .v4b-player .watch { margin-top: 0; }

/* Градиенты + стрелки по краям ленты каналов при скролле. */
/* Вариант 2 (v4f): без страницы «все каналы». Прячем сетку, галерею, тулбар, SEO —
   показываем только ленту каналов + фрейм программы выбранного канала. */
html[data-copy="v4f"] .section,
html[data-copy="v4f"] .toolbar,
html[data-copy="v4f"] .seo { display: none; }
html:not([data-copy="v4f"]) .v4f-strip-wrap { display: none; }
/* Лента каналов и фрейм — по левому краю, на одной линии с верхними табами (без отступа). */
.v4f-strip-wrap { margin: 0; }
/* Лента каналов залипает под категориями при скролле (top выставляет JS по высоте табов).
   2-й уровень табов показываем только при скролле вверх — вниз он прячется за категориями. */
.v4f-rail { position: sticky; top: 86px; z-index: 55; background: var(--bg); transition: transform .26s ease, opacity .26s ease; }
/* Единый общий фон липких табов — без градиентного затемнения между уровнями.
   Залипают вплотную к верху (top:0) и с минимальным отступом над пилюлями. */
html[data-copy="v4f"] .tabs-bar { background: var(--bg); top: 8px; padding-top: 6px; margin-top: 20px; }
/* Плавный градиент-растворение под липкими табами (и под лентой каналов) — чтобы
   контент уходил под них мягко, а не обрезался резкой линией. */
html[data-copy="v4f"] .v4f-rail::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 100vw; transform: translateX(-50%);
  height: 28px; background: linear-gradient(180deg, var(--bg), transparent); pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .2s ease;
}
/* Подножка-градиент — только когда табы залипли при скролле вниз (не в исходном положении). */
html[data-copy="v4f"]:has(.tabs-bar.is-stuck) .v4f-rail::after { opacity: 1; }
/* Наведение на верхние табы (категории) в залипшем состоянии показывает ленту каналов;
   уводим курсор — она снова прячется. */
/* Сплошной фон за табами и в 8px-зазоре над ними — чтобы сверху не проглядывал контент. */
html[data-copy="v4f"] .tabs-bar::before {
  content: ""; position: absolute; left: 50%; top: -8px; bottom: 0; width: 100vw; transform: translateX(-50%);
  background: var(--bg); z-index: -1; display: block; opacity: 1;
}
/* Стрелки прокрутки ленты каналов — заметно меньше. */
.v4f-rail .v4d-strip-arrow svg { width: 7px; height: 18px; }
.v4f-rail .v4d-strip-fade { width: 64px; }
.v4f-rail .v4f-strip { padding: 4px 0 12px; }
.v4f-epg { margin-top: 4px; }
.v4f-frame { width: 100%; min-height: 70vh; border: 0; display: block; background: var(--bg); }
/* PiP в Варианте 2 — в правом нижнем углу (не перекрывает левую программу). */
html[data-copy="v4f"] .v4b-pip { left: auto; right: 24px; }
/* Встроенная программа канала (schedule.html) в Варианте 2: без табов дней и имени
   канала сверху; все блоки выровнены по левому краю (без центрирования). */
html.is-v4f .sched-sticky { display: none; }
html.is-v4f .sched-col { max-width: none; margin: 0; padding: 0; }
html.is-v4f .sched-page { padding-top: 8px; }

.v4d-strip-wrap { position: relative; }
.v4d-strip-fade {
  position: absolute; top: 0; height: 48px; width: 96px; z-index: 5;
  display: flex; align-items: center; pointer-events: none; transition: opacity .2s ease;
}
.v4d-strip-fade.r { right: 0; justify-content: flex-end; background: linear-gradient(90deg, transparent, var(--bg) 82%); }
.v4d-strip-fade.l { left: 0; justify-content: flex-start; background: linear-gradient(270deg, transparent, var(--bg) 82%); }
.v4d-strip-fade.is-hidden { opacity: 0; }
.v4d-strip-arrow { pointer-events: auto; display: inline-flex; color: #fff; line-height: 0; cursor: pointer; opacity: .9; transition: transform .15s ease; }
.v4d-strip-fade.r .v4d-strip-arrow { margin-right: 8px; }
.v4d-strip-fade.l .v4d-strip-arrow { margin-left: 8px; }
.v4d-strip-arrow svg { display: block; }
.v4d-strip-arrow.is-left { transform: scaleX(-1); }
.v4d-strip-arrow:hover { transform: scale(1.12); opacity: 1; }
.v4d-strip-arrow.is-left:hover { transform: scaleX(-1) scale(1.12); }

/* Вариант 3 — горизонтальная лента каналов над плеером (макет 12QU). */
/* Ближе к фильтрам категорий — гасим общий отступ первого ребёнка #v1Body (32px). */
/* Отступ до ленты каналов = отступу от ленты до плеера (16px у ленты снизу). */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #v1Body > .v4d-strip-wrap { margin-top: 0; }
/* Табы категорий — без зазора между собой (0 вместо 8px). */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]):not([data-emojitabs]) .tabs { gap: 2px; }
/* «Покупки» — купленные спортивные трансляции (дата крупно + название). */
.buys-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, calc((100% - 4 * 8px) / 5)); gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.buys-row::-webkit-scrollbar { display: none; }
.buy-card { display: block; min-width: 0; }
.buy-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1c1c1e; }
.buy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.buy-badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.buy-date { margin-top: 10px; font-size: 19px; line-height: 23px; font-weight: 700; color: #fff; }
.buy-title { margin-top: 3px; font-size: 13px; line-height: 17px; color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Заголовки подборок — меньше шрифт и меньше отступ до постеров. */
html:is([data-copy="v3"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .gal-head { font-size: 20px; line-height: 24px; margin-bottom: 10px; }
.v4d-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 0 16px; }
.v4d-strip::-webkit-scrollbar { display: none; }
.v4d-chip {
  /* Фиксированная длина (= поповеру с метой, 234px); min-width:0 — чтобы длинное
     название программы не растягивало чип (а обрезалось по ellipsis). */
  flex: 0 0 234px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px;
  padding: 4px 12px 4px 4px; border-radius: 16px; background: #ffffff14;
  text-align: left; transition: background .15s ease;
}
.v4d-chip:hover { background: #ffffff1f; }
.v4d-chip.is-active { background: #ffffff33; }
.v4d-chip-logo { flex: 0 0 64px; width: 64px; height: 40px; border-radius: 12px; overflow: hidden; background: #1c1c1e; }
.v4d-chip-logo img { width: 100%; height: 100%; object-fit: cover; }
.v4d-chip-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.v4d-chip-name { font-size: 13px; line-height: 16px; color: #ffffffe0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4d-chip-bar { position: relative; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.24); }
.v4d-chip-bar i { position: absolute; left: 0; top: 0; height: 2px; border-radius: 1px; background: #fff; }
/* Сердечко «в избранное»: показываем только у уже залайканных каналов, а также при
   наведении на чип (чтобы можно было лайкнуть). Дефолт — контур, солид — малиновое. */
.v4d-chip-fav { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); cursor: pointer; opacity: 0; transition: color .15s ease, transform .12s ease, opacity .15s ease; }
.v4d-chip:hover .v4d-chip-fav, .v4d-chip-fav.is-fav { opacity: 1; }
.v4d-chip-fav svg { display: block; }
.v4d-chip-fav svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.v4d-chip-fav:hover { color: #fff; }
.v4d-chip-fav:active { transform: scale(.85); }
.v4d-chip-fav.is-fav { color: var(--accent); }
.v4d-chip-fav.is-fav svg path { fill: currentColor; stroke: none; }

/* Поповер при наведении на канал в ленте (макет 13BX): постер + 3 строки программы. */
.v4d-pop {
  position: fixed; z-index: 400; width: 234px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 4px 12px; border-radius: 20px; background: #303030;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.v4d-pop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.v4d-pop-poster { position: relative; height: 127px; border-radius: 16px; overflow: hidden; background: #1c1c1e; }
.v4d-pop-poster img { width: 100%; height: 100%; object-fit: cover; }
/* Видео эфира проявляется поверх постера через ~2 секунды наведения. */
.v4d-pop-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.v4d-pop-vid.is-on { opacity: 1; }
.v4d-pop-list { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 0 4px; }
.v4d-pop-row { display: flex; gap: 4px; font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, 0.72); }
.v4d-pop-row.is-now { color: #fff; }
.v4d-pop-time { flex: 0 0 52px; position: relative; padding-left: 16px; }
.v4d-pop-row.is-now .v4d-pop-time::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: #F30745; box-shadow: 0 0 0 3px rgba(243, 7, 69, 0.16);
}
.v4d-pop-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Вариант 3 (макет 12AX) — 1:1 с макетом: без «ТВ онлайн/Программа передач»,
   без тоггла «Каналы/Программа канала» в плеере, фильтры — стеклянные пилюли. */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .intro { display: none; }
html[data-v3prog] .intro { display: block; } /* Вариант 3: табы «ТВ онлайн / Программа передач» остаются */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .pv-switch { display: none; }
/* Без нижней кнопки — программе не нужен большой отступ снизу под тоггл. */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .pv-epg { padding-bottom: 12px; }
/* Правая колонка: только программа канала + «Вся телепрограмма» снизу. */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .pv-allprog {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease;
}
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .pv-allprog:hover { background: rgba(255, 255, 255, 0.2); }
/* Фильтры категорий — текст в стеклянной пилюле, активная залита (как на макете). */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]):not([data-emojitabs]) .tab-emoji { display: none; }
/* Текст — medium; у всех одинаковые (увеличенные) боковые отступы, чтобы активная
   пилюля не меняла размер на клике. Белый 100% — только у активной, у остальных — с прозрачностью. */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]):not([data-emojitabs]) .tab {
  gap: 0; height: 36px; padding: 0 20px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]):not([data-emojitabs]) .tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]):not([data-emojitabs]) .tab.is-active {
  color: #fff;
  background: linear-gradient(176deg, #ffffff26 -18%, #ffffff1a 9%, #ffffff1a 91%, #ffffff26 118%);
  backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px);
}
/* Меньше расстояние между подборками каналов под плеером. */
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #v4bFeed > .gal,
html:is([data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #v4bFeed > .topshows { margin-top: 20px; }
html[data-copy="v4b"] #v4bFeed > .gal:first-child { margin-top: 30px; }

/* PiP: плеер уходит в левый нижний угол при «Программе передач». */
.v4b-player.is-pip .pv-side { display: none; }
.v4b-player.is-pip .watch { display: block; margin-top: 0; }
.v4b-player.is-pip .watch .player {
  position: fixed; left: 24px; bottom: 24px; z-index: 300;
  width: 320px; height: 180px; aspect-ratio: 16 / 9; border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Плавающий PiP на странице «Программа передач» (Вариант 2) — не исчезает. */
.v4b-pip {
  position: fixed; left: 24px; bottom: 24px; z-index: 300;
  width: 320px; height: 180px; border-radius: 16px; overflow: hidden;
  background: #000; cursor: pointer;
  /* более заметная тень снизу, чтобы окошко выделялось на фоне */
  box-shadow: 0 28px 60px -8px rgba(0, 0, 0, 0.85), 0 10px 24px rgba(0, 0, 0, 0.6);
}
.v4b-pip-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4b-pip-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4b-pip-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 42%); pointer-events: none; }
.v4b-pip-title { position: absolute; left: 14px; right: 44px; bottom: 12px; color: #fff; font-size: 14px; font-weight: 600; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4b-pip-expand { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.v4b-pip:hover .v4b-pip-expand { background: rgba(0,0,0,.72); }

/* Вариант 3 — карточка канала на Программе передач (макет 1295): лого + название. */
.card-chan { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.card-chan-logo { flex-shrink: 0; width: 52px; height: 32px; border-radius: 8px; overflow: hidden; background: var(--card); }
.card-chan-logo img { width: 100%; height: 100%; object-fit: cover; }
.card-chan-name { font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; }
/* Видео-превью при наведении на постер (Программа передач) — над картинкой, под подписями. */
.poster .pg-hover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.poster .pg-hover-video.is-on { opacity: 1; }
/* Подписи на большом постере (Вариант 3): название слева снизу (как в PiP) — ТОЛЬКО при
   наведении; чипс «ещё N мин» справа снизу — всегда. */
.v4c-pgrad { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 42%, transparent 100%);
  opacity: 0; transition: opacity .25s ease; }
.v4c-pt { position: absolute; left: 14px; right: 96px; bottom: 12px; z-index: 2; color: #fff; font-size: 14px; font-weight: 600; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease; }
.poster:hover .v4c-pgrad, .poster:hover .v4c-pt { opacity: 1; }
/* По просьбе — при наведении на постер не показываем подпись/пояснение над ним. */
.v4c-pt, .v4c-pgrad { display: none; }

/* Лайк канала на постере (главная + программа передач): в правом верхнем углу, виден
   при наведении на карточку (и всегда у залайканных), с тенью, чтобы не сливался с фоном. */
.poster-like {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; opacity: 0;
  transition: opacity .15s ease, transform .12s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 9px rgba(0, 0, 0, 0.45));
}
.poster-like svg { width: 20px; height: 20px; display: block; }
.poster-like svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.poster-like:hover { transform: scale(1.12); }
.poster-like:active { transform: scale(.9); }
.poster-like.is-fav { color: var(--accent); opacity: 1; }
.poster-like.is-fav svg path { fill: currentColor; stroke: none; }
.v4c-cell:hover .poster-like, .card:hover .poster-like { opacity: 1; }
/* Платный канал — рубль вместо сердечка: виден всегда, в тёмной «таблетке». */
.poster-paid { opacity: 1; cursor: default; background: rgba(0, 0, 0, 0.5); border-radius: 50%; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.poster-paid svg { width: 16px; height: 16px; }
.poster-paid svg path { fill: currentColor; stroke: none; }
.poster-paid:hover { transform: none; }

/* Тултип «Лайк канала» (по макету 1HFN): тёмная пилюля + стрелка вниз, над иконкой. */
.like-tip {
  position: fixed; z-index: 600; transform: translate(-50%, calc(-100% - 8px));
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.like-tip.is-on { opacity: 1; }
.like-tip-box {
  position: relative; display: block; background: #191919; color: #fff;
  font-size: 13px; line-height: 16px; padding: 6px 8px; border-radius: 6px; white-space: nowrap;
  filter: drop-shadow(0 12px 18px rgba(8, 6, 14, 0.5));
}
.like-tip-box::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0; border-top-color: #191919;
}

/* Пульсирующая точка эфира слева от времени у текущей передачи в программе плеера. */
.v4c-pm { position: absolute; right: 12px; bottom: 11px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; line-height: 15px; font-weight: 600; white-space: nowrap; }
/* PiP меньше на небольших экранах; на больших — как сейчас (320×180). */
@media (max-width: 1280px) { .v4b-pip { width: 248px; height: 140px; } }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.player-bg { width: 100%; height: 100%; object-fit: cover; }
/* Заглушка платного спорта (макет Player 1JES) — поверх плеера. */
.sport-paywall { position: absolute; inset: 0; z-index: 20; }
.sport-paywall[hidden] { display: none; }
.sport-pw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sport-pw-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 42%, transparent 70%); }
.sport-pw-body { position: absolute; left: clamp(20px, 4%, 48px); right: 48px; bottom: clamp(20px, 7%, 56px); }
.sport-pw-title { margin: 0 0 12px; color: #fff; font-weight: 700; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.12; max-width: 15em; }
.sport-pw-sub { margin: 0 0 20px; color: rgba(255,255,255,.72); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.4; max-width: 34em; }
.sport-pw-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.sport-pw-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.sport-pw-btn.is-primary { background: var(--accent); color: #fff; } /* как .btn-cta в шапке */
.sport-pw-btn.is-primary:hover { filter: brightness(1.08); }
.sport-pw-btn.is-ghost { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.player::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #00000052 0%, #0000 22%),
    linear-gradient(0deg, #000000e0 0%, #0000 28%);
  pointer-events: none;
}
.player-top {
  position: absolute;
  top: 16px; left: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.player-title { font-size: 15px; font-weight: 700; line-height: 20px; }
.player-sub { font-size: 13px; line-height: 16px; opacity: .72; }

.player-controls {
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  display: flex;
  flex-direction: column;
}
.pc-row { display: flex; align-items: center; gap: 4px; order: 3; }
.pc-seek {
  order: 2;
  position: relative;
  height: 4px;
  margin: 0 0 14px;
  border-radius: 2px;
  background: #ffffff3d;
}
.pc-seek-buf { position: absolute; inset: 0 52% 0 0; border-radius: 2px; background: #ffffff3d; }
.pc-seek-fill { position: absolute; inset: 0 50% 0 0; border-radius: 2px; background: #fff; }
.pc-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pc-sm svg { opacity: .72; }
.pc-sm:hover svg { opacity: 1; }
.pc-vol { display: inline-flex; align-items: center; gap: 6px; opacity: .72; padding: 0 6px; }
.pc-vol-track { width: 48px; height: 4px; border-radius: 2px; background: #ffffff52; position: relative; }
.pc-vol-fill { position: absolute; inset: 0 50% 0 0; border-radius: 2px; background: #fff; }
.pc-time { font-size: 13px; margin-left: 4px; }
.pc-right {
  order: 1;
  position: absolute;
  right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
}

/* Программа передач (EPG) */
.epg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #000;
}
.epg-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  padding-bottom: 76px; /* место под плавающую кнопку */
  scrollbar-width: thin;
  scrollbar-color: #ffffff29 transparent;
  /* нижние строки плавно угасают под кнопкой */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent 100%);
}
.epg-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
  font-size: 15px;
  line-height: 20px;
  border-radius: 6px;
}
.epg-row:hover { background: #ffffff0a; }
.epg-time { flex-shrink: 0; min-width: 44px; color: var(--tx-56); }
.epg-title {
  flex: 1; min-width: 0;
  color: var(--tx-72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-row.is-now .epg-time,
.epg-row.is-now .epg-title { color: #fff; }
.epg-row.is-now .epg-time { color: var(--accent); }
.epg-underline {
  position: absolute;
  left: 60px; right: 4px; bottom: 4px;
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--accent) 50%, #ffffff29 50%);
}
.epg-live {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.epg-live.is-buy { background: #3E8E0B; }
/* Liquid Glass — плавающая стеклянная пилюля */
/* Крупная плавающая кнопка «Вся телепрограмма» в плеере — по макету 9OX-0:
   светлая полупрозрачная пилюля с blur. */
.epg-all {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #d9d7e0;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background .18s ease, color .18s ease;
}
.epg-all:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }

/* Информация о канале */
.chmeta { margin-top: 32px; max-width: 540px; }
.chmeta-about { margin-top: 40px; }
.chmeta-head { display: flex; align-items: center; gap: 12px; }
.chmeta-logo {
  width: 64px; height: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #141414;
}
.chmeta-logo img { width: 100%; height: 100%; object-fit: cover; }
.chmeta-name { font-size: 15px; font-weight: 500; line-height: 20px; }
.chmeta-live { font-size: 13px; line-height: 16px; color: #a5a1b2; }
.chmeta-prog { margin: 24px 0 8px; font-size: 18px; font-weight: 700; line-height: 22px; }
.chmeta-desc { margin: 0; font-size: 15px; line-height: 22px; color: var(--tx-72); }

/* Ряд постеров (реальные данные Иви) */
.rail-posters {
  grid-auto-columns: calc((100% - 6 * 24px) / 7);
}
.poster-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poster-img {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
  display: block;
  transition: transform .25s ease;
}
.poster-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Увеличиваем всю рамку постера целиком, а не картинку внутри */
.poster-card:hover .poster-img { transform: scale(1.04); }
.poster-name {
  font-size: 15px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poster-access { font-size: 13px; line-height: 16px; color: var(--tx-56); }
.poster-card.is-loading .poster-img {
  background: linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.reco-error { color: var(--tx-56); font-size: 14px; padding: 12px 0; }

/* Двойная галерея 1-в-1 с галереей шоу на ТВ-онлайн: 2 этажа 16:9, без подписей.
   Вертикальные/боковые паддинги + отрицательные марджины дают место увеличению. */
.rail-hgal {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 8px) / 5);
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 12px 14px;
  margin: -10px -12px 0;
}
.rail-hgal::-webkit-scrollbar { display: none; }
.hp-card { position: relative; display: block; }
.hp-img {
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #141414; display: block;
  transition: transform .2s ease;
}
.hp-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-card:hover { z-index: 30; }
.hp-card:hover .hp-img { transform: scale(1.09); } /* рамка увеличивается целиком, не обрезается */
.hp-card.is-loading .hp-img {
  background: linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

/* Футер */
.pfooter {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 32px;
  margin-top: 56px;
  padding: 40px 0 56px;
  border-top: 1px solid var(--line-16);
}
.pfooter-col { display: flex; flex-direction: column; gap: 8px; }
.pfooter-col a { font-size: 14px; color: var(--tx-72); }
.pfooter-col a:hover { color: #fff; }
.pf-phone { font-size: 18px; font-weight: 700; }
.pf-note { font-size: 13px; color: var(--tx-48); margin-bottom: 8px; }
.pf-h { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pfooter-promo {
  align-self: center;
  max-width: 220px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tx-72);
}

/* ======================================================================
   Реальные данные: статусы загрузки + подпись «вживую»
   ====================================================================== */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-head .section-title { margin: 0; }
.live-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--tx-48);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(243, 7, 69, 0.6);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 7, 69, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(243, 7, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 7, 69, 0); }
}
.grid-empty, .reco-error {
  grid-column: 1 / -1;
  color: var(--tx-56);
  font-size: 14px;
  padding: 24px 0;
}
.sched-title.muted { color: var(--tx-32); }

/* ======================================================================
   Liquid Glass — панель выбора режима прототипа
   ====================================================================== */
/* Слой режимов лежит ПОЗАДИ основного экрана; при свайпе вверх
   основной экран (app-shell) отъезжает вниз, скругляет углы и уменьшается,
   открывая этот слой (чуть светлее чёрного) с четырьмя табами. */
.mode-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #1a1a1d; /* чуть светлее — подложка режимов */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
html[data-shell-open] .mode-layer { opacity: 1; pointer-events: auto; }
/* Композиция настроек: слева — тоггл устройства, справа — режимы прототипа.
   Все сегменты одинакового размера. */
.mode-layer-inner {
  margin: 0 auto;
  padding: 34px 48px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity .3s ease;
}
html[data-shell-open] .mode-layer-inner { opacity: 1; }
.seg-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.seg {
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tx-56);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.seg:hover { color: #fff; }
.device-seg.is-active,
.nav-seg.is-active,
.mode-tab.is-active { background: #fff; color: #111; }
.mode-tab.is-disabled,
.device-seg.is-disabled { opacity: .35; pointer-events: none; cursor: default; }

/* Основной экран как лист поверх слоя режимов.
   При открытии просто съезжает вниз на всю ширину — без уменьшения. */
.app-shell {
  position: relative;
  z-index: 1;
  background: var(--bg);
  min-height: 100vh;
  /* will-change: transform убран — он создавал containing block и ломал
     position: sticky у табов категорий (анимация шторки остаётся плавной). */
  transition: transform .6s cubic-bezier(.32, .72, 0, 1),
              border-radius .6s cubic-bezier(.32, .72, 0, 1),
              box-shadow .6s ease;
}
html[data-shell-open] .app-shell {
  transform: translateY(120px);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

@media (max-width: 760px) {
  html[data-shell-open] .app-shell { transform: translateY(170px); }
}

/* ======================================================================
   Хлебные крошки на главной
   ====================================================================== */
.crumbs-top { margin-top: 20px; }
.crumbs-top .crumbs-strong { color: #fff; }
.crumbs-top .crumbs-strong:hover { color: #fff; }
.crumbs-top .crumbs-muted { color: var(--tx-56); }

/* ======================================================================
   Поповер канала при наведении (страница плеера)
   ====================================================================== */
.chip-pop {
  position: fixed;
  width: 300px;
  padding: 8px;
  border-radius: 16px;
  background: #1b1b1d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  z-index: 45;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.chip-pop.is-visible { opacity: 1; transform: translateY(0); }
.pop-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  margin-bottom: 6px;
}
.pop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pop-list { padding: 2px; }
.pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 18px;
}
.pop-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}
.pop-row.is-now .pop-dot { background: var(--accent); }
.pop-time { min-width: 42px; flex-shrink: 0; color: var(--tx-56); }
.pop-title {
  flex: 1; min-width: 0;
  color: var(--tx-72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop-row.is-now .pop-time, .pop-row.is-now .pop-title { color: #fff; }
.pop-empty { padding: 16px; color: var(--tx-56); font-size: 13px; text-align: center; }

/* ======================================================================
   Экран полной телепрограммы канала (schedule.html)
   ====================================================================== */
.sched-page { position: relative; padding-top: 40px; padding-bottom: 96px; }
.sched-col { max-width: 1216px; margin: 0 auto; }
.sched-close {
  position: fixed;
  top: 28px; right: 40px;
  width: 44px; height: 44px; z-index: 20;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tx-56);
  transition: color .15s ease;
}
.sched-close:hover { color: #fff; }
/* Шапка: маленький постер канала + название */
.sched-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding-right: 64px; /* чтобы не уходило под крестик */
}
.sched-ch-logo {
  flex-shrink: 0; width: 56px; height: 32px; border-radius: 8px;
  object-fit: cover; background: #1c1c1e;
}
.schedule-title {
  margin: 0;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Залипающая шапка экрана телепрограммы: название канала + табы дней.
   Градиент проходит через всю шторку: сверху плотный фон, снизу — в прозрачность. */
.sched-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) calc(100% - 44px), transparent 100%);
  padding-top: 24px;
  margin-top: -24px;
}
.day-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 8px;
}
.day-tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--tx-56); /* невыбранный — текст с прозрачностью */
  background: rgba(255, 255, 255, 0.12);
  transition: background .15s ease, color .15s ease;
}
.day-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
.day-tab.is-active { background: rgba(255, 255, 255, 0.32); color: #fff; }
.now-air { margin-top: 48px; }

.full-epg { max-width: 620px; }
.fe-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 10px 20px;
  font-size: 16px;
  line-height: 20px;
}
.fe-dot {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
}
.fe-row.is-now .fe-dot { background: var(--accent); }
.fe-time { min-width: 52px; flex-shrink: 0; color: var(--tx-56); }
.fe-title {
  flex: 1; min-width: 0;
  color: var(--tx-72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe-row.is-now .fe-time, .fe-row.is-now .fe-title { color: #fff; }
.fe-underline {
  position: absolute;
  left: 72px; right: 0; bottom: 2px;
  max-width: 440px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent) 55%, #ffffff29 55%);
}

/* --- Экран «Вся телепрограмма» по макету UCL: время + постер + мета + «Смотреть на Иви» --- */
.tz-filters { gap: 10px; }
.tz-list { max-width: none; display: flex; flex-direction: column; gap: 24px; }
/* Все постеры (включая «сейчас в эфире») на одной линии: единая ширина колонки времени. */
.fe-card { display: flex; align-items: flex-start; gap: 16px; }
.fe-timecol { flex-shrink: 0; width: 74px; min-width: 74px; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.fe-onair { white-space: nowrap; }
.fe-card .fe-time {
  padding: 0; font-size: 22px; line-height: 26px; font-weight: 700; color: #fff; /* время эфира — всегда белое */
  font-variant-numeric: tabular-nums;
}
.fe-onair { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #F10745; }
.fe-onair .oa-ic { flex-shrink: 0; }
/* Уже прошедшие передачи (выше текущей) — приглушены целиком (постер + время + мета) */
.fe-card.is-past { opacity: 0.45; }
.fe-poster {
  position: relative; flex-shrink: 0; width: 210px; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #1c1c1e;
}
.fe-poster img { width: 100%; height: 100%; object-fit: cover; }
/* Текущий эфир (макет ZGQ) — постер крупнее остальных, кнопка «В эфир» под описанием. */
.fe-card.is-now .fe-poster { width: 325px; border-radius: 22px; }
.fe-info .fe-watch { margin: 24px 0 0; align-self: flex-start; }
.fe-progline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.28); }
.fe-progfill { display: block; height: 100%; background: #F30745; }
.fe-mins {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fe-info { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.fe-ttl { font-size: 22px; line-height: 26px; font-weight: 600; color: #fff; }
.fe-genre { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tx-56); }
.fe-genre.is-blue { color: #3B82F6; }
.fe-desc {
  margin-top: 8px; color: var(--tx-56); font-size: 15px; line-height: 20px; max-width: 680px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fe-watch {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center; margin-left: auto;
  height: 40px; padding: 0 22px; border-radius: 99px;
  background: #F30745; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.fe-watch:hover { background: #ff1f58; }
.tz-about-title { font-size: 24px; font-weight: 700; margin: 0 0 12px; }

/* Блок «Все выпуски шоу» (макет V8K, шоу «Мама в 16») */
/* Блок выровнен по левому краю постеров (ширина таймкода 96px + gap 24px).
   Отрицательный верхний отступ компенсирует gap списка (24px) → 16px до обложки шоу. */
.fe-series { margin: 16px 0 32px 111px; }
.fe-series-wrap { position: relative; }
.fe-series-title { margin: 0 0 12px; font-size: 18px; line-height: 22px; font-weight: 700; color: #fff; }
.fe-series-row { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; margin-block: -10px; }
.fe-series-row::-webkit-scrollbar { display: none; }
/* Стрелки прокрутки серий влево/вправо — без подложки, только иконка */
.fe-ser-arrow {
  position: absolute; top: 59px; transform: translateY(-50%); z-index: 3;
  width: 22px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
  transition: opacity .15s ease;
}
.fe-ser-arrow svg { width: 7px; height: auto; }
.fe-ser-left { left: -6px; }
.fe-ser-left svg { transform: rotate(180deg); }
.fe-ser-right { right: -6px; }
.fe-ser-arrow.is-hidden { opacity: 0; pointer-events: none; }
/* Градиенты-затемнения по краям ленты серий (видны, когда есть куда скроллить) */
.fe-ser-fade {
  position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.fe-ser-fade.l { left: 0; background: linear-gradient(90deg, var(--bg) 12%, transparent); }
.fe-ser-fade.r { right: 0; background: linear-gradient(270deg, var(--bg) 12%, transparent); }
.fe-ser-fade.is-on { opacity: 1; }
.ep-card { flex: 0 0 210px; min-width: 210px; }
.ep-poster { position: relative; aspect-ratio: 210 / 118; border-radius: 16px; overflow: hidden; background: #1c1c1e; transition: transform .18s ease; }
.ep-poster img { width: 100%; height: 100%; object-fit: cover; }
.ep-card:hover .ep-poster { transform: scale(1.04); }
.ep-date {
  position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 18px;
  background: rgba(0, 0, 0, 0.48); color: #fff; font-size: 10px; line-height: 12px; font-weight: 700; white-space: nowrap;
}
.ep-ttl { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ep-num {
  font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-lock { flex-shrink: 0; color: rgba(255, 255, 255, 0.48); }
.ep-sub { margin-top: 2px; font-size: 13px; line-height: 16px; color: var(--tx-56); }
.ep-new { color: #00BF4C; font-weight: 500; }

.sched-about { max-width: 980px; margin-top: 52px; }
.sched-about-text {
  margin: 0;
  color: var(--tx-72);
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sched-about-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.sched-expand {
  margin-top: 10px;
  color: var(--tx-56);
  font-size: 15px;
  font-weight: 500;
}
.sched-expand:hover { color: #fff; }


/* ======================================================================
   Режим «Мобайл» — рамка iPhone 15 Pro Max + мобильная вёрстка главной
   ====================================================================== */
.m-cta, .m-tabbar { display: none; }

html[data-device="mobile"] body { background: #000; }
/* внешний скролл блокируем только на страницах с телефоном */
html[data-device="mobile"] body:has(.page.phone) { overflow: hidden; height: 100vh; }
/* В мобайле внешняя страница не скроллится — виден только телефон,
   прокручивается лишь его содержимое (.phone-scroll). */
html[data-device="mobile"] .app-shell.shell-phone {
  height: 100vh;
  min-height: 0;
  background: radial-gradient(120% 80% at 50% 0%, #1a1a1d 0%, #060607 70%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  overflow: hidden;
}
/* .phone-scroll прозрачен на десктопе и становится скролл-контейнером в мобайле */
.phone-scroll { display: contents; }

html[data-device="mobile"] .page.phone {
  width: 430px;
  min-width: 430px;
  max-width: 430px;
  height: 932px;
  margin: 0;
  padding: 0;
  background: #000;
  border-radius: 54px;
  box-shadow: 0 0 0 11px #141416, 0 0 0 13px #2c2c30, 0 40px 90px rgba(0,0,0,.7);
  overflow: hidden;
  position: relative;
  transform: scale(var(--phone-scale, 1));
  transform-origin: top center;
}
html[data-device="mobile"] .page.phone .phone-scroll {
  display: block;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 150px;
  scrollbar-width: none;
}
html[data-device="mobile"] .page.phone .phone-scroll::-webkit-scrollbar { display: none; }

/* --- горизонтальные отступы контента --- */
html[data-device="mobile"] .page.home .crumbs-top,
html[data-device="mobile"] .page.home .intro,
html[data-device="mobile"] .page.home .toolbar,
html[data-device="mobile"] .page.home .section-head,
html[data-device="mobile"] .page.home .seo { padding-left: 16px; padding-right: 16px; }

/* --- шапка --- */
html[data-device="mobile"] .page.home .topbar {
  height: auto;
  margin-top: 0;
  padding: 16px;
  border-bottom: none;
  gap: 12px;
  align-items: center;
}
html[data-device="mobile"] .page.home .nav,
html[data-device="mobile"] .page.home .icon-text,
html[data-device="mobile"] .page.home .icon-only,
html[data-device="mobile"] .page.home .btn-login { display: none; }
html[data-device="mobile"] .page.home .topbar-right { margin-left: auto; gap: 0; }
html[data-device="mobile"] .page.home .btn-cta {
  height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px;
}
html[data-device="mobile"] .page.home .logo img { width: 56px; height: 42px; }

/* --- заголовок и табы --- */
html[data-device="mobile"] .page.home .crumbs-top { margin-top: 8px; }
html[data-device="mobile"] .page.home .intro { margin-top: 8px; }
html[data-device="mobile"] .page.home .page-title { font-size: 28px; line-height: 32px; }
html[data-device="mobile"] .page.home .tabs {
  margin-top: 18px; gap: 20px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
html[data-device="mobile"] .page.home .tabs::-webkit-scrollbar { display: none; }
html[data-device="mobile"] .page.home .tab { flex: 0 0 auto; white-space: nowrap; }

/* --- панель «Телепрограмма» --- */
html[data-device="mobile"] .page.home .toolbar { margin-top: 14px; justify-content: flex-end; }
html[data-device="mobile"] .page.home .btn-tomorrow { display: none; }

/* --- секции --- */
html[data-device="mobile"] .page.home .section { margin-top: 22px; }
html[data-device="mobile"] .page.home .section-title { font-size: 20px; line-height: 24px; }
html[data-device="mobile"] .page.home .live-note { display: none; }

/* --- ряд каналов: горизонтальный скролл --- */
html[data-device="mobile"] .page.home .grid {
  display: flex;
  grid-template-columns: none;
  grid-auto-rows: initial;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px 4px;
  scrollbar-width: none;
}
html[data-device="mobile"] .page.home .grid::-webkit-scrollbar { display: none; }

/* --- карусели --- */
html[data-device="mobile"] .page.home .rail { grid-auto-columns: 42%; padding: 0 16px 8px; gap: 12px; }
html[data-device="mobile"] .page.home .rail-wide { grid-auto-columns: 72%; }
html[data-device="mobile"] .page.home .rail-posters { grid-auto-columns: 33%; }

/* --- SEO --- */
html[data-device="mobile"] .page.home .seo { margin-top: 20px; padding-top: 0; max-width: none; }
html[data-device="mobile"] .page.home .seo p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- мобильная карточка канала --- */
.mcard { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; }
.mcard-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
}
.mcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.mcard-name {
  margin-top: 8px;
  font-size: 14px; line-height: 18px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcard-access { margin-top: 2px; font-size: 13px; color: var(--tx-56); }

/* --- нижние кнопки телефона (фиксированы относительно .page) --- */
html[data-device="mobile"] .page.phone .m-cta {
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  left: 16px; right: 16px; bottom: 74px;
  height: 52px;
  border-radius: 16px;
  font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #8b3dff 0%, #f30745 100%);
  box-shadow: 0 10px 28px rgba(243, 7, 69, 0.35);
}
html[data-device="mobile"] .page.phone .m-tabbar {
  display: flex;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66px;
  padding-bottom: 6px;
  background: rgba(10, 10, 12, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 44px 44px;
}
.m-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--tx-48);
}
.m-tab.is-active { color: #fff; }

/* ======================================================================
   Каталог «ТВ онлайн» (index.html)
   ====================================================================== */
.ch-card { display: flex; flex-direction: column; }
.ch-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
  transition: transform .25s ease;
}
.ch-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ch-card:hover .ch-cover { transform: scale(1.04); }
.ch-name {
  margin-top: 8px;
  font-size: 15px; line-height: 19px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-access { margin-top: 2px; font-size: 13px; line-height: 16px; color: var(--tx-56); }
.ch-access.sub { color: var(--accent); }
.ch-cover.is-loading {
  background: linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

/* SEO-блок в каталоге */
.seo-block { max-width: 1040px; }
.seo-text {
  margin: 0;
  color: var(--tx-72);
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seo-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.seo-block .sched-expand { margin-top: 8px; }

/* Мобайл: карточки каталога в горизонтальных рядах */
html[data-device="mobile"] .page.home .ch-name { font-size: 14px; }
html[data-device="mobile"] .page.home .seo-block { padding: 0 16px; }

/* === Мобайл «ТВ онлайн» по макету AQ0: карточки каналов (asis) + подчёркнутые табы === */
html[data-device="mobile"] .page.home #v1Body { display: none; }
html[data-device="mobile"] .page.home #asisBody { display: block; }
html[data-device="mobile"] .page.home .page-title { display: block; }
html[data-device="mobile"] .page.home .section-switch { display: none; }
html[data-device="mobile"] .page.home .btn-tomorrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
html[data-device="mobile"] .page.home .btn-tomorrow .ic { width: 22px; height: 22px; }
html[data-device="mobile"] .page.home .tabs { gap: 20px; border-bottom: 1px solid #ffffff14; padding: 0 16px; }
html[data-device="mobile"] .page.home .tab {
  flex: 0 0 auto; height: auto; padding: 0 0 10px; border-radius: 0; background: none;
  color: var(--tx-56); font-size: 15px; font-weight: 600; letter-spacing: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
html[data-device="mobile"] .page.home .tab.is-active { background: none; color: #fff; border-bottom-color: #F30745; }
html[data-device="mobile"] .page.home .tab-thumbs { display: none; }

/* ======================================================================
   Мобильный плеер (player.html, .page.player-m) — макет D5M-0
   ====================================================================== */
/* шапка */
html[data-device="mobile"] .page.player-m .topbar {
  height: auto; margin-top: 0; padding: 16px; border-bottom: none; gap: 12px; align-items: center;
}
html[data-device="mobile"] .page.player-m .nav,
html[data-device="mobile"] .page.player-m .icon-text,
html[data-device="mobile"] .page.player-m .icon-only,
html[data-device="mobile"] .page.player-m .btn-login { display: none; }
html[data-device="mobile"] .page.player-m .topbar-right { margin-left: auto; gap: 0; }
html[data-device="mobile"] .page.player-m .btn-cta { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
html[data-device="mobile"] .page.player-m .logo img { width: 56px; height: 42px; }

/* крошки, табы, чипсы */
html[data-device="mobile"] .page.player-m .crumbs { padding: 0 16px; margin-top: 4px; font-size: 14px; flex-wrap: wrap; }
html[data-device="mobile"] .page.player-m .ptabs { padding: 12px 16px 0; gap: 20px; margin-top: 10px; border-bottom: 1px solid #ffffff14; overflow-x: auto; scrollbar-width: none; }
html[data-device="mobile"] .page.player-m .ptabs::-webkit-scrollbar { display: none; }
/* подчёркнутые табы как в макете SRL */
html[data-device="mobile"] .page.player-m .ptab {
  flex: 0 0 auto; height: auto; padding: 0 0 10px; border-radius: 0; background: none;
  color: var(--tx-56); font-size: 15px; font-weight: 600; letter-spacing: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
html[data-device="mobile"] .page.player-m .ptab.is-active { background: none; color: #fff; border-bottom-color: #F30745; }
html[data-device="mobile"] .page.player-m .chips { padding: 0 16px 4px; margin-top: 12px; }

/* плеер на всю ширину телефона */
html[data-device="mobile"] .page.player-m .watch { display: block; margin-top: 14px; }
html[data-device="mobile"] .page.player-m .player { border-radius: 0; }

/* инфо о канале и описание */
html[data-device="mobile"] .page.player-m .chmeta { padding: 0 16px; margin-top: 16px; max-width: none; }
html[data-device="mobile"] .page.player-m .chmeta-about { margin-top: 24px; }
/* «О канале» — заголовок вместо повторного лого+названия (макет SRL) */
html[data-device="mobile"] .page.player-m .chmeta-about .chmeta-head { display: none; }
html[data-device="mobile"] .page.player-m .chmeta-about::before {
  content: "О канале"; display: block; font-size: 20px; font-weight: 700; line-height: 24px; margin-bottom: 8px;
}

/* телепрограмма под плеером */
html[data-device="mobile"] .page.player-m .epg { height: auto !important; padding: 0 16px; margin-top: 12px; display: block; }
html[data-device="mobile"] .page.player-m .epg-scroll { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
/* Заголовок заменён кликабельной кнопкой .epg-head (открывает оверлей телепрограммы) */
html[data-device="mobile"] .page.player-m .epg::before { content: none; }
.epg-head { display: none; }
html[data-device="mobile"] .page.player-m .epg-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; padding: 0; margin-bottom: 8px; text-align: left; cursor: pointer;
  color: #fff; font-size: 20px; font-weight: 700; line-height: 24px;
}
html[data-device="mobile"] .page.player-m .epg-head .chev { color: var(--tx-48); font-weight: 400; }
html[data-device="mobile"] .page.player-m .epg-all { display: none; }

/* Полноэкранный оверлей «Программа передач канала» (мобайл, макет TCZ) */
.tvprog-overlay { position: absolute; inset: 0; z-index: 200; display: none; }
.tvprog-overlay.is-open { display: block; }
.tvprog-sheet {
  position: absolute; inset: 0; overflow-y: auto;
  background: var(--bg, #0b0b0d); padding: 24px 16px 40px;
}
.tvprog-close {
  position: absolute; top: 18px; right: 14px; width: 32px; height: 32px;
  border: none; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.tvprog-title { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; max-width: 82%; margin-bottom: 18px; }
.tvprog-dates { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #ffffff14; }
.tvprog-dates::-webkit-scrollbar { display: none; }
.tvp-date {
  flex: 0 0 auto; background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: 2px 0 10px; color: var(--tx-56); font-size: 15px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tvp-date.is-active { color: #fff; border-bottom-color: #F30745; }
.tvprog-list { margin-top: 6px; }
.tvp-row { display: flex; gap: 16px; align-items: flex-start; padding: 11px 0; }
.tvp-row.is-now { border-bottom: 2px solid #F30745; }
.tvp-time { flex: 0 0 46px; color: #fff; font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.tvp-main { flex: 1 1 auto; min-width: 0; }
.tvp-ttl { font-size: 14px; line-height: 18px; color: #fff; }
.tvp-sub { font-size: 13px; line-height: 16px; color: var(--tx-40); margin-top: 2px; }
.tvp-live { flex: 0 0 auto; color: #fff; }
.tvp-row:not(.is-now) .tvp-time, .tvp-row:not(.is-now) .tvp-ttl { color: var(--tx-40); }
.tvp-row:not(.is-now) .tvp-sub { color: var(--tx-32); }
.tvprog-about { margin-top: 26px; }
.tvprog-desc {
  font-size: 14px; line-height: 20px; color: var(--tx-72);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tvprog-desc.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.tvprog-expand { margin-top: 8px; background: none; border: none; padding: 0; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ряды «Сериалы и фильмы» */
html[data-device="mobile"] .page.player-m .section { padding: 0 16px; margin-top: 24px; }
html[data-device="mobile"] .page.player-m .section-title { font-size: 20px; }
html[data-device="mobile"] .page.player-m .rail { grid-auto-columns: 42%; padding: 0; gap: 12px; }
html[data-device="mobile"] .page.player-m .rail-posters { grid-auto-columns: 33%; }

/* футер скрыт — внизу таб-бар */
html[data-device="mobile"] .page.player-m .pfooter { display: none; }

/* ======================================================================
   Мобайл «Программа передач» по макету TQE: шапка + подчёркнутые табы +
   кнопка «Программа на завтра» + карточки каналов в одну колонку.
   ====================================================================== */
html[data-device="mobile"] .page.prog-m .topbar { display: flex; align-items: center; padding: 12px 16px; gap: 10px; }
html[data-device="mobile"] .page.prog-m .nav,
html[data-device="mobile"] .page.prog-m .icon-text,
html[data-device="mobile"] .page.prog-m .icon-only,
html[data-device="mobile"] .page.prog-m .btn-login { display: none; }
html[data-device="mobile"] .page.prog-m .topbar-right { margin-left: auto; gap: 0; }
html[data-device="mobile"] .page.prog-m .btn-cta { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
html[data-device="mobile"] .page.prog-m .logo img { width: 56px; height: 42px; }
html[data-device="mobile"] .page.prog-m .crumbs-top { display: flex; margin-top: 8px; padding: 0 16px; font-size: 14px; flex-wrap: wrap; }
html[data-device="mobile"] .page.prog-m .intro { margin-top: 8px; padding: 0 16px; }
html[data-device="mobile"] .page.prog-m .page-title { display: block; font-size: 28px; line-height: 32px; }
html[data-device="mobile"] .page.prog-m .section-switch { display: none; }
/* подчёркнутые табы */
html[data-device="mobile"] .page.prog-m .tabs { gap: 20px; border-bottom: 1px solid #ffffff14; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
html[data-device="mobile"] .page.prog-m .tabs::-webkit-scrollbar { display: none; }
html[data-device="mobile"] .page.prog-m .tab {
  flex: 0 0 auto; height: auto; padding: 0 0 10px; border-radius: 0; background: none;
  color: var(--tx-56); font-size: 15px; font-weight: 600; letter-spacing: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
html[data-device="mobile"] .page.prog-m .tab.is-active { background: none; color: #fff; border-bottom-color: #F30745; }
html[data-device="mobile"] .page.prog-m .tab-thumbs { display: none; }
/* панель «Программа на завтра» (тумблер скрыт) */
html[data-device="mobile"] .page.prog-m .toolbar { margin-top: 14px; padding: 0 16px; display: flex; justify-content: flex-end; }
html[data-device="mobile"] .page.prog-m .switch { display: none; }
html[data-device="mobile"] .page.prog-m .btn-tomorrow {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12);
  border: none; height: 40px; padding: 0 16px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600;
}
html[data-device="mobile"] .page.prog-m .btn-tomorrow .ic { width: 20px; height: 20px; }
/* сетка каналов — одна колонка */
html[data-device="mobile"] .page.prog-m .section { margin-top: 20px; padding: 0 16px; }
html[data-device="mobile"] .page.prog-m .section-title { font-size: 20px; }
html[data-device="mobile"] .page.prog-m .grid { display: flex; flex-direction: column; gap: 16px; }
html[data-device="mobile"] .page.prog-m .card { width: 100%; }
/* чище под макет: без ivi-чипов, таймлайна и прошедших строк */
html[data-device="mobile"] .page.prog-m .sched-ivi,
html[data-device="mobile"] .page.prog-m .prog-line,
html[data-device="mobile"] .page.prog-m .sched-row.is-past { display: none; }
/* ТВ-шоу и «Самое интересное» в макете отсутствуют */
html[data-device="mobile"] .page.prog-m #progShows,
html[data-device="mobile"] .page.prog-m .section:has(#collectionsRail) { display: none; }
html[data-device="mobile"] .page.prog-m .seo { margin-top: 20px; padding: 0 16px; max-width: none; }
html[data-device="mobile"] .page.prog-m .pfooter { display: none; }

/* ======================================================================
   Вариант 1 — лента «ТВ онлайн»: категорийные галереи + блок трансляций
   + галерея шоу. Всё скрыто вне v1; As is остаётся в #asisBody.
   ====================================================================== */
#v1Body { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #v1Body { display: block; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) #asisBody { display: none; }

/* --- Категорийная галерея (2 строки плиток по 5) --- */
.gal { margin-top: 44px; position: relative; }
.gal-head {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 16px;
  font-size: 24px; line-height: 28px; font-weight: 700; color: #fff;
  cursor: pointer;
}
.gal-head .chev { color: var(--tx-48); font-weight: 400; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.gal-cell { position: relative; }
.gal-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-meta { display: none; } /* показывается только в Варианте 2 при наведении */
.gal-cell:hover { z-index: 30; }
.gal-cell:hover .gal-thumb { transform: scale(1.09); }

/* Значок рубля (платный канал) — слева сверху; бесплатные без значка.
   Чип «осталось N минут» — справа снизу. Оба видны только при наведении. */
.gal-pay {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60, 60, 66, 0.4); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0; transition: opacity .16s ease;
}
.gal-left {
  position: absolute; right: 8px; bottom: 8px;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(60, 60, 66, 0.42); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  white-space: nowrap;
  opacity: 0; transition: opacity .16s ease;
}
.gal-cell:hover .gal-pay,
.gal-cell:hover .gal-left { opacity: 1; }

/* Поповер «сейчас в эфире»: скруглённая плашка под постером (композиция как
   раньше). Материал — стекло: полупрозрачная светлая заливка + backdrop-blur.
   Без тяжёлой тени от постера, падающей на плашку. */
.gal-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: rgba(44, 44, 50, 0.5);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 16px 40px #0009, 0 0 0 1px #ffffff14;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 31;
}
.gal-cell:hover .gal-pop { opacity: 1; transform: scale(1.09); }
.gal-pop-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; line-height: 16px; }
.gal-pop-row .gp-t { color: var(--tx-56); flex-shrink: 0; width: 34px; font-variant-numeric: tabular-nums; }
.gal-pop-row .gp-n { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-pop-row .gp-n.gp-dim { color: var(--tx-56); }
.gal-pop-row.is-now .gp-n { font-weight: 600; }
/* Время текущей передачи — такое же, как название: белое и жирное */
.gal-pop-row.is-now .gp-t { color: #fff; font-weight: 600; }
/* Время остаётся; у текущей передачи после времени — пульсирующая точка.
   Слот точки фиксированной ширины во всех строках, чтобы названия выравнивались. */
.gp-dot { flex-shrink: 0; width: 9px; height: 9px; }
.gal-pop-row.is-now .gp-dot {
  border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 0 0 #ff3b3099;
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 #ff3b3099; }
  70% { box-shadow: 0 0 0 7px #ff3b3000; }
  100% { box-shadow: 0 0 0 0 #ff3b3000; }
}

/* --- Вариант 2: галереи = горизонтальный скролл в 2 этажа (все каналы) --- */
/* Вертикальные паддинги + отрицательные марджины дают место увеличению и
   поповеру, не ломая горизонтальный скролл и не раздувая отступы. */
html:is([data-mode="v2"],[data-mode="v3"]) .gal-grid {
  grid-template-columns: none;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 8px) / 5);
  overflow-x: auto;
  scrollbar-width: none;
  /* паддинги + отрицательные марджины дают место увеличению плитки (не обрезается сверху/снизу/по бокам) */
  padding: 12px 12px 20px;
  margin: -12px -12px 0;
  scroll-padding-left: 2px;
}
html:is([data-mode="v2"],[data-mode="v3"]) .gal-grid::-webkit-scrollbar { display: none; }
/* «Любимые каналы» — один этаж (а не два) */
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .fav-gal .gal-grid { grid-template-rows: 1fr; }

/* ===== Вариант 3 (макет 125S) — одноряд «Сейчас в эфире»: постер эфира +
   мета снизу всегда, при наведении постер меняется на кадр текущего эфира. ===== */
html:is([data-copy="v3"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .gal-grid {
  grid-template-rows: 1fr;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  /* Запас по вертикали, чтобы увеличенный постер и его тень не обрезались
     overflow-скроллом ленты; отрицательные margin гасят сдвиг раскладки. */
  padding: 24px 12px 40px; margin: -20px -12px -30px;
}
.v4c-cell { display: flex; flex-direction: column; }
.v4c-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--card); transition: transform .25s ease, box-shadow .25s ease; transform-origin: bottom center; }
/* Постер при наведении растёт ВВЕРХ (origin снизу — не наезжает на мету под ним),
   чуть сильнее. Тень — мягкое тёмное гало по макету (0 2px 138px 105px #000000CF). */
.v4c-cell { position: relative; }
.v4c-cell:hover { z-index: 2; }
.v4c-cell:hover .v4c-thumb { transform: scale(1.07); box-shadow: 0 2px 138px 105px rgba(0, 0, 0, 0.81); }
.v4c-img, .v4c-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4c-video { z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.v4c-video.is-on { opacity: 1; }
.v4c-mins { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; line-height: 14px; font-weight: 600; white-space: nowrap; }
/* Мета (лого канала + подписи) — над тенью постера (z-index), чтобы тень её не накрывала. */
.v4c-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 10px; text-decoration: none; }
/* «Далее в HH:MM» на обороте — белым (как заголовок), название под ним — приглушённым. */
.v4c-back .v4c-when { color: #fff; }
.v4c-logo { flex-shrink: 0; width: 56px; height: 34px; border-radius: 7px; overflow: hidden; background: var(--card); }
.v4c-logo img { width: 100%; height: 100%; object-fit: cover; }
.v4c-txt { min-width: 0; display: flex; flex-direction: column; }
.v4c-name { font-size: 15px; line-height: 19px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4c-prog { font-size: 13px; line-height: 17px; color: var(--tx-56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rotating text на ховере: лента «лиц» прокручивается строго вверх (рулетка),
   показывая по кругу лицо (канал+эфир) и оборот («Далее в HH:MM» + след. передача). */
.v4c-flip { position: relative; min-width: 0; flex: 1 1 auto; overflow: hidden; height: 36px; }
.v4c-roll { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; }
.v4c-face { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 36px; flex: 0 0 36px; }

/* Вариант 2 — наведение: поверх постера проявляется мета-оверлей «сейчас в
   эфире». Постер не гаснет в ноль, а остаётся размытым под стеклом (материал
   в духе Apple: полупрозрачная заливка + backdrop-blur), без дропдауна. */
html:is([data-mode="v2"],[data-mode="v3"]) .gal-cell:hover .gal-thumb { transform: none; box-shadow: 0 10px 30px #0009; }
html:is([data-mode="v2"],[data-mode="v3"]) .gal-pop { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .gal-pay,
html:is([data-mode="v2"],[data-mode="v3"]) .gal-left { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .gal-meta {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  position: absolute; inset: 0; z-index: 2; padding: 13px 14px;
  box-sizing: border-box; overflow: hidden;
  background: rgba(32, 32, 38, 0.4);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out;
}
html:is([data-mode="v2"],[data-mode="v3"]) .gal-cell:hover .gal-meta { opacity: 1; }
.gm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tx-72); white-space: nowrap; }
.gm-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 #ff3b3099; animation: livePulse 1.6s ease-out infinite; }
.gm-pay { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
/* Минуты до конца — компактный чип в правом верхнем углу */
.gm-mins { flex-shrink: 0; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); }
.gm-mins:empty { display: none; }
.gm-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Вариант 3 — в оверлее канала не показываем название и кнопки «Смотреть»/«Купить подписку» */
html[data-mode="v3"] .gm-name,
html[data-mode="v3"] .gm-watch { display: none; }
.gm-prog { display: flex; flex-direction: column; gap: 3px; }
/* Таймлайн текущей передачи + «ещё 5 минут» справа (под названием в эфире) */
.gm-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; }
.gm-track { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.gm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; background: var(--accent, #F30745); border-radius: 2px; }
.gm-barleft { flex-shrink: 0; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; }
.gm-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 17px; }
.gm-row .gm-t { color: var(--tx-56); flex-shrink: 0; width: 34px; font-variant-numeric: tabular-nums; }
.gm-row .gm-ttl { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Время текущей передачи — такое же, как название: белое и жирное */
.gm-now .gm-t { color: #fff; font-weight: 600; }
.gm-now .gm-ttl { font-weight: 600; }
/* Следующие по расписанию передачи — medium (не regular) */
.gm-next { font-weight: 500; }
.gm-next .gm-ttl { color: var(--tx-72); font-weight: 500; }
.gm-dim { color: var(--tx-56); font-size: 12px; }
.gm-watch {
  align-self: flex-start; margin-top: 2px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  pointer-events: auto; cursor: pointer;
}

/* Подсказка о горизонтальном скролле: градиенты по краям + стрелки (только v2) */
.gal-more, .gal-less { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .gal-more,
html:is([data-mode="v2"],[data-mode="v3"]) .gal-less {
  position: absolute;
  width: 120px;
  display: flex; align-items: center;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 15;
}
/* Выравниваем градиенты по реальным краям ленты (grid выступает на 12px за .gal
   из-за отрицательных марджинов для ховера), иначе с краю остаётся незатемнённая полоска */
html:is([data-mode="v2"],[data-mode="v3"]) .gal-more {
  right: -12px; justify-content: flex-end; padding-right: 12px;
  background: linear-gradient(90deg, transparent 0%, var(--bg) 92%);
}
html:is([data-mode="v2"],[data-mode="v3"]) .gal-less {
  left: -12px; justify-content: flex-start; padding-left: 12px;
  background: linear-gradient(270deg, transparent 0%, var(--bg) 92%);
}
html:is([data-mode="v2"],[data-mode="v3"]) .gal-more.is-hidden,
html:is([data-mode="v2"],[data-mode="v3"]) .gal-less.is-hidden { opacity: 0; }
html:is([data-mode="v2"],[data-mode="v3"]) .gal-less .gal-more-arrow { margin-right: 0; margin-left: 14px; }
.gal-more-arrow {
  pointer-events: auto;
  margin-right: 16px;
  display: inline-flex; color: #fff; line-height: 0; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  opacity: .9;
}
.gal-more-arrow svg { display: block; }
.gal-arrow-left { transform: scaleX(-1); }
.gal-more-arrow:hover { transform: scale(1.12); opacity: 1; }
.gal-arrow-left:hover { transform: scaleX(-1) scale(1.12); }

/* --- «Любимые каналы» (v3): ряд карточек со скриншотом эфира (макет O7W) --- */
.fav { position: relative; margin-top: 44px; }
.fav .gal-head { margin-bottom: 16px; }
.fav-row {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; container-type: inline-size;
}
.fav-row::-webkit-scrollbar { display: none; }
.fav-card {
  flex: 0 0 calc((100cqw - 4 * 8px) / 5);
  min-width: 0; /* иначе карточка растягивается до натуральной ширины картинки */
  display: flex; flex-direction: column; gap: 8px;
}
.fav-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: var(--card);
  transition: transform .18s ease;
}
.fav-card:hover .fav-thumb { transform: scale(1.02); }
.fav-img { width: 100%; height: 100%; object-fit: cover; }
/* Чип «ещё N минут» — тот же компонент, что в мета-оверлее постеров ТВ-онлайн (.gm-mins) */
.fav-chip {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 11px; line-height: 1.2; font-weight: 600; color: #fff; white-space: nowrap;
}
.fav-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; min-width: 0; }
.fav-ch { font-size: 16px; line-height: 16px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-prog { font-size: 13px; line-height: 16px; color: var(--tx-56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Крупный спортивный блок (статичная вёрстка из макета H5Z-0 / IF4-0) --- */
/* Без overflow:hidden — размытая подложка должна мягко ложиться под шапку, не
   обрезаясь. Горизонтальный выезд гасится через overflow-x:clip у #v1Body. */
.live-block { position: relative; margin-top: 56px; }

/* Размытая цветная подложка под шапкой блока (мягко бледнеет, уходит за край экрана) */
.sb-backdrop {
  position: absolute; top: -30px;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); width: auto;
  height: 280px; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover, 100% 373%;
  background-position: 50%, 0 0;
  filter: blur(52px);
}

/* Шапка: лого FIFA слева + чипы категорий — один ряд, по центру по вертикали */
.sb-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 28px;
  height: 200px; padding-left: 2.2%;
}
.sb-fifa {
  width: 300px; height: 142px; flex-shrink: 0;
  background-repeat: no-repeat; background-size: contain; background-position: left center;
}
.sb-chips {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
}
.sb-chip {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center;
  height: 82px; padding-left: 24px;
  border-radius: 23px; overflow: hidden;
  background: linear-gradient(135deg, #ffffff38 0%, #ffffff1a 32%, #ffffff1a 68%, #ffffff38 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sb-chip.is-active {
  background: linear-gradient(135deg, #ffffff4a 0%, #ffffff24 32%, #ffffff24 68%, #ffffff4a 100%);
}
.sb-chip-txt { font-size: 16px; line-height: 20px; font-weight: 500; color: #fff; opacity: .8; white-space: nowrap; letter-spacing: -.01em; }
.sb-chip.is-active .sb-chip-txt { font-weight: 700; opacity: 1; }
.sb-chip-thumbs { position: relative; width: 104px; height: 82px; margin-left: 14px; flex-shrink: 0; }
.sb-th-back {
  position: absolute; width: 68px; height: 37px; right: 22px; top: 50%;
  margin-top: -26px; border-radius: 6px; object-fit: cover;
  filter: brightness(.82);
}
.sb-th-front {
  position: absolute; width: 80px; height: 43px; right: 8px; top: 50%;
  margin-top: -14px; border-radius: 10px; object-fit: cover;
}

/* Плеер — крупная 16:9-ишная карточка (счёт и логотип МАТЧ запечены в кадр) */
.sb-player {
  position: relative; z-index: 1;
  aspect-ratio: 1376 / 720;
  border-radius: 24px; overflow: hidden;
  background-repeat: no-repeat; background-size: cover; background-position: 50%;
}
.sb-controls {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
}
.sb-ctrl {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #ffffff3d; backdrop-filter: blur(8px);
}
.sb-pause { width: 96px; height: 96px; }
.sb-mute { width: 40px; height: 40px; }
.sb-foot {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; white-space: nowrap;
}
.sb-flags { display: inline-flex; align-items: center; }
.sb-flag { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sb-flag-a { outline: 6px solid #374A1A; position: relative; z-index: 2; }
.sb-flag-b { margin-left: -4px; z-index: 1; }
.sb-title { font-size: 24px; line-height: 1.2; font-weight: 500; color: #fff; }
.sb-online {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px 4px 10px; border-radius: 100px;
  background: #F30745; color: #fff; font-size: 20px; line-height: 1.2; font-weight: 500;
}
.sb-bolt { flex-shrink: 0; }

/* Вариант 3 — плеер слева + колонка справа (лого FIFA + 4 чипа), макет L58 */
html[data-mode="v3"] .live-block { display: flex; gap: 32px; align-items: stretch; }
/* Плеер — над размытой подложкой; подложка небольшая (меньше, чем в макете) */
html[data-mode="v3"] .live-block .sb-player { flex: 1 1 auto; min-width: 0; z-index: 2; }
html[data-mode="v3"] .live-block .sb-backdrop { top: 10px; height: 150px; }
/* Чипы сразу под лого FIFA, а не растянуты до низа экрана трансляции */
html[data-mode="v3"] .sb-side {
  flex: 0 0 340px; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px;
  position: relative; z-index: 2;
}
html[data-mode="v3"] .sb-fifa-lg {
  width: 199px; height: 94px; flex-shrink: 0;
  background-repeat: no-repeat; background-size: contain; background-position: left top;
}
html[data-mode="v3"] .sb-chips-v { display: flex; flex-direction: column; gap: 12px; }
html[data-mode="v3"] .sb-chips-v .sb-chip { width: 340px; height: 59px; padding-right: 10px; }
/* Один постер на чип: единый размер, прижат к правому краю */
html[data-mode="v3"] .sb-chips-v .sb-chip-txt { flex: 1 1 auto; }
html[data-mode="v3"] .sb-chips-v .sb-chip-thumbs { width: 68px; height: 40px; margin-left: 12px; }
html[data-mode="v3"] .sb-chips-v .sb-th-back { display: none; }
html[data-mode="v3"] .sb-chips-v .sb-th-front {
  width: 64px; height: 36px; right: 0; top: 50%; margin-top: -18px; border-radius: 8px;
}

/* --- Галерея шоу (иная вёрстка: крупный ряд + ряд поменьше) --- */
.show-gal .gal-head { margin-bottom: 16px; }
.show-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.show-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.show-big, .show-small {
  display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card);
  transition: transform .18s ease;
}
.show-big { border-radius: 24px; }
.show-small { border-radius: 14px; }
.show-big img, .show-small img { width: 100%; height: 100%; object-fit: cover; }
.show-big:hover, .show-small:hover { transform: scale(1.02); }
.show-big.is-loading, .show-small.is-loading {
  background: linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite;
}
/* Вариант 2 — оба этажа шоу прокручиваются ВМЕСТЕ одним блоком вправо */
html:is([data-mode="v2"],[data-mode="v3"]) .show-rows {
  overflow-x: auto; scrollbar-width: none;
  container-type: inline-size;
}
html:is([data-mode="v2"],[data-mode="v3"]) .show-rows::-webkit-scrollbar { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .show-hero,
html:is([data-mode="v2"],[data-mode="v3"]) .show-strip {
  display: flex; grid-template-columns: none; width: max-content;
}
html:is([data-mode="v2"],[data-mode="v3"]) .show-hero .show-big { flex: 0 0 calc((100cqw - 2 * 8px) / 3); }
html:is([data-mode="v2"],[data-mode="v3"]) .show-strip .show-small { flex: 0 0 calc((100cqw - 4 * 8px) / 5); }

/* --- Мобайл (iPhone): компактная лента --- */
html[data-device="mobile"] .page.home #v1Body { padding: 0 16px; }
html[data-device="mobile"] .page.home .gal-head { font-size: 20px; line-height: 24px; }
html[data-device="mobile"] .page.home .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
html[data-device="mobile"] .page.home .sb-top { height: 150px; }
html[data-device="mobile"] .page.home .sb-fifa { width: 160px; height: 76px; top: 20px; }
html[data-device="mobile"] .page.home .sb-chips { left: 180px; top: 20px; }
html[data-device="mobile"] .page.home .sb-chip { height: 60px; padding-left: 16px; }
html[data-device="mobile"] .page.home .sb-chip.is-active { height: 68px; }
html[data-device="mobile"] .page.home .sb-chip-txt { font-size: 13px; line-height: 16px; }
html[data-device="mobile"] .page.home .sb-title { font-size: 16px; }
html[data-device="mobile"] .page.home .sb-online { font-size: 14px; }
html[data-device="mobile"] .page.home .sb-pause { width: 64px; height: 64px; }
html[data-device="mobile"] .page.home .sb-backdrop { height: 170px; }
html[data-device="mobile"] .page.home .show-hero { grid-template-columns: 1fr; gap: 12px; }
html[data-device="mobile"] .page.home .show-strip { grid-template-columns: repeat(2, 1fr); }

/* --- Hero-карусель (билборды сверху во вкладках) --- */
.hero-car { position: relative; margin-top: 24px; }
.hero-track {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16%;
  scroll-padding: 0 16%;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative; flex: 0 0 68%;
  aspect-ratio: 3.3 / 1;
  border-radius: 24px; overflow: hidden;
  scroll-snap-align: center;
  background: var(--card);
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #000000c7 0%, #00000070 32%, #0000 60%);
}
.hero-meta { position: absolute; left: 36px; bottom: 32px; max-width: 60%; }
.hero-kicker { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-72); font-weight: 600; }
.hero-name { margin: 8px 0 16px; font-size: 32px; line-height: 36px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px #000a; }
.hero-btn {
  display: inline-block; padding: 11px 26px;
  border-radius: 12px; background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 700;
  transition: transform .14s ease, filter .14s ease;
}
.hero-slide:hover .hero-btn { filter: brightness(1.08); }
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1c1c1fcc; backdrop-filter: blur(8px);
  color: #fff; font-size: 26px; line-height: 1;
  transition: background .14s ease;
}
.hero-nav:hover { background: #2a2a2ee6; }
.hero-prev { left: calc(16% - 60px); }
.hero-next { right: calc(16% - 60px); }

/* Мобайл: hero занимает почти всю ширину, стрелки прячем */
html[data-device="mobile"] .page.home .hero-track { padding: 0; gap: 12px; scroll-padding: 0; }
html[data-device="mobile"] .page.home .hero-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; border-radius: 16px; }
html[data-device="mobile"] .page.home .hero-name { font-size: 22px; line-height: 26px; margin: 6px 0 12px; }
html[data-device="mobile"] .page.home .hero-meta { left: 20px; bottom: 20px; }
html[data-device="mobile"] .page.home .hero-nav { display: none; }

/* Мобайл + Вариант 2: 2-этажный горизонтальный скролл */
html:is([data-mode="v2"],[data-mode="v3"])[data-device="mobile"] .page.home .gal-grid {
  grid-template-columns: none;
  grid-auto-columns: 44%;
  padding-bottom: 2px;
}

/* ======================================================================
   Ховер-мета у карточек шоу (Вариант 2) — механика как у каналов
   ====================================================================== */
.show-card { position: relative; }
.show-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.show-ov { display: none; }
html:is([data-mode="v2"],[data-mode="v3"]) .show-ov {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  position: absolute; inset: 0; z-index: 2; padding: 16px 18px;
  box-sizing: border-box; overflow: hidden;
  background: rgba(16, 16, 20, 0.46);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out;
}
html:is([data-mode="v2"],[data-mode="v3"]) .show-card:hover .show-ov { opacity: 1; }
.sm-ttl { font-size: 17px; line-height: 20px; font-weight: 700; color: #fff; }
.sm-desc { font-size: 13px; line-height: 17px; color: var(--tx-72);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-72); }
.sm-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.sm-sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sm-sep { opacity: .5; }
.sm-watch { align-self: flex-start; margin-top: 4px; padding: 7px 16px; border-radius: 100px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; pointer-events: auto; cursor: pointer; }
/* в маленьких карточках показываем компактнее */
/* Мета показываем только у крупных карточек сверху; у мелких — ничего */
html:is([data-mode="v2"],[data-mode="v3"]) .show-small .show-ov { display: none; }

/* ======================================================================
   Мегаблок «Топовые шоу» (макет IV5-0)
   ====================================================================== */
/* Без overflow:hidden — фон-градиент мягко бледнеет по краям (логика как у
   спортивного блока), не обрезается жёстким прямоугольником. */
.topshows {
  position: relative; margin-top: 48px;
  padding: 36px 40px 28px;
}
.ts-bg { position: absolute; top: -150px; bottom: -40px;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); width: auto; z-index: 0;
  background: radial-gradient(80% 95% at 50% 16%, #9a1526 0%, #4e0d19 46%, #1a0509 84%, #0a0203 100%);
  /* размытый мягкий верх (по аналогии со спортивным блоком), без полосок; градиент
     тянется заметно выше и плавно проявляется, заходя под верхний ряд постеров */
  filter: blur(40px);
  -webkit-mask-image: linear-gradient(180deg, #0000 0, #000 200px, #000 calc(100% - 70px), #0000 100%);
  mask-image: linear-gradient(180deg, #0000 0, #000 200px, #000 calc(100% - 70px), #0000 100%); }
.topshows > *:not(.ts-bg) { position: relative; z-index: 1; }
.ts-title { margin: 0 0 16px; text-align: center; color: #fff;
  font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
/* Табы — состояния как в макете: активный — чёрная таблетка, неактивные —
   полупрозрачная чёрная таблетка; текст 20px, белый. */
.ts-tabs { display: flex; justify-content: center; flex-wrap: nowrap; gap: 8px; margin-bottom: 20px; }
.ts-tab {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 9px 16px; border-radius: 100px;
  font-size: 15px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em;
  color: #ffffffcc; background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .15s ease, color .15s ease;
}
/* Резервируем ширину под жирное начертание, чтобы при смене активного таба
   размеры не прыгали и табы не двигали друг друга. */
.ts-tab::after {
  content: attr(data-label); height: 0; overflow: hidden; visibility: hidden;
  font-weight: 700; pointer-events: none; white-space: nowrap;
}
.ts-tab:hover { color: #fff; background: rgba(0, 0, 0, 0.55); }
.ts-tab.is-active { background: #000; color: #fff; font-weight: 700; }
.ts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
.ts-card { display: flex; flex-direction: column; }
.ts-poster { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--card); transition: transform .25s ease; }
.ts-poster img { width: 100%; height: 100%; object-fit: cover; }
/* увеличивается вся рамка постера целиком, а не картинка внутри */
.ts-card:hover .ts-poster { transform: scale(1.03); }
.ts-desc { margin-top: 10px; font-size: 14px; line-height: 19px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-meta { margin-top: 10px; font-size: 14px; color: var(--tx-72); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ts-card.is-loading { height: 300px; border-radius: 16px;
  background: linear-gradient(100deg, #ffffff14 30%, #ffffff28 50%, #ffffff14 70%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite; }

/* Мобайл для мегаблока и меты */
html[data-device="mobile"] .page.home .topshows { padding: 32px 16px 28px; }
html[data-device="mobile"] .page.home .ts-title { font-size: 36px; margin-bottom: 20px; }
html[data-device="mobile"] .page.home .ts-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 0 16px; }
html[data-device="mobile"] .page.home .ts-tab { flex-shrink: 0; }
html[data-device="mobile"] .page.home .ts-grid { grid-template-columns: 1fr; gap: 20px; }

/* ======================================================================
   Переключатель дат эфира (program.html) — на всю ширину, даты по центру
   ====================================================================== */
.datebar { display: none; }
html:is([data-mode="v1"],[data-mode="v2"],[data-mode="v3"]) .datebar {
  display: flex; align-items: center;
  margin-top: 12px;
  padding: 6px 8px;
  border-radius: 14px;
  background: var(--card-2);
}
.date-nav {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #00000066; color: var(--tx-72);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.date-nav:hover { background: #000000a6; color: #fff; }
.date-days { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: stretch; gap: 2px; }
.date-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 14px; border-radius: 10px;
  background: transparent; cursor: pointer;
  transition: background .15s ease;
}
.date-item:hover { background: #ffffff0d; }
.date-item.is-active { background: #000; }
.date-wd { font-size: 12px; line-height: 15px; font-weight: 500; color: var(--tx-56); }
.date-item.is-active .date-wd { color: var(--tx-72); }
.date-num { font-size: 18px; line-height: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Мобайл: компактнее */
html[data-device="mobile"] .page .datebar { padding: 10px; border-radius: 18px; }
html[data-device="mobile"] .page .date-item { padding: 8px 12px; }
html[data-device="mobile"] .page .date-num { font-size: 24px; line-height: 28px; }
html[data-device="mobile"] .page .date-nav { width: 38px; height: 38px; }


/* ============================================================
   Новая главная сервиса (main.html) — по макету H5Z
   ============================================================ */
#homeFeed { padding-bottom: 72px; }
.mh-gal, .mh-continue, .mh-onb, .mh-promo, .mh-chsec { margin-top: 48px; }

/* ---- Заголовок секции (32px bold + шеврон) ---- */
.mh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mh-h2 { margin: 0; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.mh-chev, .mh-head .mh-chev { font-size: 28px; line-height: 1; color: var(--tx-48); font-weight: 400; }
.mh-promo-ic { font-size: 28px; }

/* ---- Ряды карточек 16:9 ---- */
.mh-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 8px) / 5);
  gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 8px 0; margin: -8px -8px 0;
}
.mh-row + .mh-row { margin-top: 8px; }
.mh-row::-webkit-scrollbar { display: none; }
.mh-c16, .mh-cbig {
  display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #141414 center / cover no-repeat; transition: transform .2s ease;
}
.mh-c16:hover, .mh-cbig:hover { transform: scale(1.04); z-index: 2; }
/* Крупный ряд — 3 карточки, скругление 32, мягкое внутреннее свечение */
.mh-row-big { grid-auto-columns: calc((100% - 2 * 8px) / 3); }
.mh-cbig { border-radius: 32px; box-shadow: inset 0 0 64px rgba(255,255,255,0.12); }

/* ---- Герой ---- */
.mh-hero {
  position: relative; margin: 12px calc(-1 * var(--gutter)) 0;
  height: 440px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mh-hero-stage {
  position: relative; z-index: 2; width: min(1113px, 80%); height: 440px;
  border-radius: 32px; background: #0e0e10 center / cover no-repeat;
  display: flex; align-items: center;
}
.mh-hero-stage::before {
  content: ""; position: absolute; inset: 0; border-radius: 32px;
  background: linear-gradient(90deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.55) 34%, transparent 62%);
}
.mh-hero-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; padding-left: 56px; width: 340px; }
.mh-hero-logo { width: 48px; height: auto; }
.mh-hero-title { width: 100%; max-height: 84px; object-fit: contain; object-position: left; }
.mh-hero-sub { margin-top: -8px; font-size: 18px; line-height: 1.2; color: #FFFFFFE0; }
.mh-hero-btn {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 36px; border-radius: 18px; background: #F30745; color: #fff;
  font-size: 18px; font-weight: 500;
}
.mh-hero-btn:hover { background: #ff1f58; }
.mh-hero-peek, .mh-hero-peeks-r .mh-hero-peek {
  position: absolute; border-radius: 32px; background: #141414 center / cover no-repeat;
  filter: brightness(.82); z-index: 1;
}
/* Боковые постеры примыкают к центральному с зазором 16px (постер центрирован,
   половина его ширины = min(556.5px, 40%) от центра). */
.mh-peek-l { left: auto; right: calc(50% + min(556.5px, 40%) + 16px); top: 80px; width: 190px; height: 280px; }
.mh-hero-peeks-r { position: absolute; right: auto; left: calc(50% + min(556.5px, 40%) + 16px); top: 92px; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.mh-hero-peeks-r .mh-hero-peek { position: relative; left: 0; top: 0; width: 262px; height: 142px; }

/* ---- Продолжить просмотр ---- */
.mh-continue { margin-top: 28px; }
.mh-continue + .gal { margin-top: 68px; }
.mh-pills {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5);
  gap: 12px; overflow-x: auto; scrollbar-width: none;
}
.mh-pills::-webkit-scrollbar { display: none; }
.mh-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 64px; padding: 0 8px 0 20px; border-radius: 18px; background: rgba(255,255,255,0.06);
}
.mh-pill-t { font-size: 15px; font-weight: 600; color: #fff; line-height: 18px; }
.mh-pill-img { flex-shrink: 0; width: 72px; height: 44px; border-radius: 10px; background: #141414 center / cover no-repeat; }
.mh-cwrow {
  margin-top: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 8px) / 5);
  gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.mh-cwrow::-webkit-scrollbar { display: none; }
.mh-cw { display: flex; flex-direction: column; }
.mh-cw-img {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #141414 center / cover no-repeat;
}
.mh-cw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.28); }
.mh-cw-bar span { display: block; height: 100%; background: #F30745; }
.mh-cw-ttl { margin-top: 10px; font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-cw-sub { margin-top: 2px; font-size: 14px; color: var(--tx-56); }
.mh-cw-new { color: #21D468; font-weight: 600; }

/* ---- Лента каналов ---- */
.mh-chrow {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 12px) / 8);
  gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; margin: -8px 0;
}
.mh-chrow::-webkit-scrollbar { display: none; }
.mh-ch { display: block; aspect-ratio: 16 / 9; border-radius: 14px; background: #141414 center / cover no-repeat; transition: transform .2s ease; }
.mh-ch:hover { transform: scale(1.05); z-index: 2; }

/* ---- Онбординг: стикеры ---- */
.mh-onb { text-align: center; padding: 24px 0 8px; }
.mh-onb-ttl { margin: 0; font-size: 36px; line-height: 40px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mh-onb-sub { margin-top: 10px; font-size: 16px; color: var(--tx-56); }
.mh-onb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: 36px; }
.mh-st {
  position: relative; height: 56px; padding: 0 26px; border-radius: 16px;
  font-size: 20px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em;
  color: var(--sc, #fff); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.mh-st:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }
.mh-st.is-on::after {
  content: "✓"; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%;
  background: #21D468; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mh-onb-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; height: 56px; padding: 0 32px;
  border-radius: 999px; background: #F30745; color: #fff; font-size: 17px; font-weight: 600; border: none; cursor: pointer;
}
.mh-onb-cta:hover { background: #ff1f58; }
.mh-onb-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 14px; }

/* ---- Промо: 3 вертикальных постера ---- */
.mh-promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-pcard {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 454 / 704; border-radius: 28px; overflow: hidden;
  background: #141414 center / cover no-repeat; transition: transform .2s ease;
}
.mh-pcard:hover { transform: scale(1.02); }
.mh-pcard-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 42%); }
.mh-pcard-ttl { position: relative; z-index: 1; padding: 0 20px 28px; font-size: 26px; line-height: 30px; font-weight: 800; color: #fff; text-align: center; }

/* ---- Топовые шоу: сетка 2×3 ---- */
.mh-grid23 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-grid23 .mh-cbig { aspect-ratio: 16 / 9; }

/* ---- Новое меню (main.html, макет IBW) ---- */
.mh-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; margin-top: 12px; gap: 16px;
}
.mh-nav-logo { justify-self: start; display: inline-flex; }
.mh-nav-logo img { height: 34px; width: auto; }
.mh-nav-center { justify-self: center; display: flex; align-items: center; gap: 12px; }
.mh-nav-search {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; border: none;
  transition: background .15s ease;
}
.mh-nav-search:hover { background: rgba(255,255,255,0.14); }
.mh-nav-pill {
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px;
  border-radius: 999px; background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mh-nav-pill a {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; transition: background .15s ease;
}
.mh-nav-pill a:hover { background: rgba(255,255,255,0.12); }
/* Selected — когда находимся в разделе (напр. ТВ). */
.mh-nav-pill a.is-current { background: rgba(255,255,255,0.18); color: #fff; }
.mh-nav-pill a.is-current:hover { background: rgba(255,255,255,0.22); }
.mh-nav-sport { position: relative; }
.mh-nav-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; font-size: 9px; line-height: 9px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #2b6cff, #7a3cff); text-align: center;
}
.mh-nav-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.mh-nav-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; border: none;
  transition: background .15s ease;
}
.mh-nav-icon:hover { background: rgba(255,255,255,0.14); }
.mh-nav-avatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; padding: 0; border: none; cursor: pointer;
  background: rgba(255,255,255,0.08);
}
.mh-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Новая навигация: старую шапку скрываем, показываем новое меню (вставляется shell.js) */
html[data-nav="new"] .topbar { display: none; }

/* ======================================================================
   Адаптивная плотная вёрстка: контейнер использует всю ширину экрана, карточки
   держат размер (НЕ увеличиваются), а на широких экранах их больше в ряд —
   показываем больше информации. Между постерами всегда 8px.
   ====================================================================== */
/* Брейкпоинты как на ivi.ru/tvchannels: контент до ~1880px (центрируется на широких
   экранах), боковые отступы ~48px ниже этого порога. */
:root { --maxw: 1976px; --gutter: 48px; }

/* Скролл-галереи (ТВ онлайн/главная, Варианты 2–3): карточка ≤272px, гап 8px.
   На обычном экране — ~5 в ряд, на широком их просто больше (а не крупнее). */
html:is([data-mode="v2"],[data-mode="v3"]) .gal-grid {
  grid-auto-columns: min(272px, calc((100% - 4 * 8px) / 5));
}
html:is([data-copy="v3"],[data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) .gal-grid {
  gap: 8px;
  grid-auto-columns: min(272px, calc((100% - 4 * 8px) / 5));
}

/* Сетка каналов (Программа передач) — доливаем колонки: 4 на обычном, 5+ на широком. */
.page .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }

/* Плотнее по вертикали — меньше пустого пространства между блоками. */
html:is([data-mode="v2"],[data-mode="v3"]) #v1Body > .gal { margin-top: 28px; }
html:is([data-copy="v4c"],[data-copy="v4d"],[data-copy="v4e"],[data-copy="v4f"]) #v4bFeed > .gal:first-child { margin-top: 18px; }

/* ===== Вариант 2 — шторка «Вся телепрограмма» канала (выезжает справа налево) ===== */
.sched-drawer-dim {
  position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.sched-drawer-dim.is-open { opacity: 1; pointer-events: auto; }
.sched-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 401;
  width: min(760px, 94vw); background: var(--bg, #0d0d0d);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.32, .72, 0, 1);
  display: flex;
}
.sched-drawer.is-open { transform: none; }
/* Левый край подложки не обрезается жёстко — уходит градиентом влево поверх
   размытого фона (растушёвка снаружи шторки). */
.sched-drawer::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 150px;
  background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.85) 22%, rgba(0, 0, 0, 0.4) 56%, transparent 100%);
  pointer-events: none;
}
.sched-drawer-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; }
.sched-drawer-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s ease;
}
.sched-drawer-close:hover { background: rgba(255, 255, 255, 0.2); }

/* ===== Шторка «Вся телепрограмма» (embed): компактнее текст и постеры, табы дат в одну строку ===== */
.is-embed .sched-page { padding-top: 22px; padding-bottom: 48px; }
.is-embed .sched-col { padding: 0 28px; }
.is-embed .schedule-title { font-size: 20px; line-height: 24px; }
/* Залипающая шапка — более элегантный, плавный градиент под табами дат (мягкий переход
   в прозрачность через промежуточную точку, длиннее по высоте). */
.is-embed .sched-sticky {
  padding-bottom: 52px;
  /* Фон под табами дат плотнее/темнее — почти сплошной чёрный, затем короткая растушёвка. */
  background: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}
/* Стрелки и градиенты-растушёвки по краям ленты дат при скролле. */
.day-tabs-wrap { position: relative; }
.dt-fade { position: absolute; top: 0; bottom: 16px; width: 76px; z-index: 3; display: flex; align-items: center; pointer-events: none; transition: opacity .2s ease; }
.dt-fade.is-hidden { opacity: 0; }
.dt-fade.r { right: 0; justify-content: flex-end; background: linear-gradient(90deg, transparent, #000 72%); }
.dt-fade.l { left: 0; justify-content: flex-start; background: linear-gradient(270deg, transparent, #000 72%); }
.dt-arrow { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; cursor: pointer; opacity: .9; }
.dt-fade.l .dt-arrow { margin-left: 2px; }
.dt-fade.r .dt-arrow { margin-right: 2px; }
/* Табы переключения дат — в одну линию со скроллом (без переноса). */
.is-embed .day-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin-bottom: 0; }
.is-embed .day-tabs::-webkit-scrollbar { display: none; }
.is-embed .day-tab { flex: 0 0 auto; height: 32px; padding: 0 13px; font-size: 14px; }
/* Карточка передачи — среднее по размеру (меньше исходного, но крупнее совсем мелкого). */
:is(.is-embed, .is-v4list) .tz-list { gap: 18px; }
:is(.is-embed, .is-v4list) .fe-card { gap: 12px; }
/* Вариант 1 (шторка): карточка текущего эфира выезжает влево (её время сдвигается к
   краю), у остальных строк время стоит в 12px от постера — без общего сдвига.
   Сдвиг = разнице постеров, слева добавляем столько же паддинга, чтобы время эфира
   не обрезалось. */
.is-embed:not(.is-v4f) .fe-card.is-now { margin-left: -56px; }
.is-embed:not(.is-v4f) .sched-col { padding-left: 56px; }
:is(.is-embed, .is-v4list) .fe-timecol { width: 66px; min-width: 66px; gap: 4px; }
:is(.is-embed, .is-v4list) .fe-card .fe-time { font-size: 17px; line-height: 21px; }
/* «в эфире» — в одну строку (без переноса). */
:is(.is-embed, .is-v4list) .fe-onair { font-size: 12px; white-space: nowrap; }
:is(.is-embed, .is-v4list) .fe-poster { width: 168px; border-radius: 12px; }
:is(.is-embed, .is-v4list) .fe-card:not(.is-now) .fe-poster { margin-left: 0; }
/* Вариант 1 (шторка): постер эфира крупнее (на величину сдвига 56px), правый край
   совпадает с остальными, сам постер выступает влево. */
.is-embed:not(.is-v4f) .fe-card.is-now .fe-poster { width: 224px; border-radius: 16px; }
/* Вариант 2 (v4f): все постеры одного размера и выровнены по левому краю (в т.ч. эфир). */
:is(.is-v4f, .is-v4list) .fe-card.is-now { margin-left: 0; }
:is(.is-v4f, .is-v4list) .fe-poster { width: 200px; border-radius: 14px; }
/* Эфир — постер крупнее; между блоками расписания +2px. */
:is(.is-v4f, .is-v4list) .fe-card.is-now .fe-poster { width: 288px; border-radius: 18px; }
:is(.is-v4f, .is-v4list) .tz-list { gap: 20px; }
/* Постер чуть увеличивается на наведении — только у прямого эфира и контента с Иви. */
:is(.is-embed, .is-v4list) .fe-card.is-now .fe-poster,
:is(.is-embed, .is-v4list) .fe-card.is-ivi .fe-poster { transition: transform .2s ease; }
:is(.is-embed, .is-v4list) .fe-card.is-now .fe-poster:hover,
:is(.is-embed, .is-v4list) .fe-card.is-ivi .fe-poster:hover { transform: scale(1.04); }
:is(.is-embed, .is-v4list) .fe-mins { font-size: 10px; padding: 2px 6px; }
:is(.is-embed, .is-v4list) .fe-ttl { font-size: 18px; line-height: 23px; }
:is(.is-embed, .is-v4list) .fe-genre { font-size: 13px; margin-top: 3px; }
:is(.is-embed, .is-v4list) .fe-desc { font-size: 13px; line-height: 18px; margin-top: 7px; -webkit-line-clamp: 2; }
:is(.is-embed, .is-v4list) .fe-info .fe-watch { margin-top: 14px; }
/* Кнопка «Смотреть на Иви» — заметно меньше. */
:is(.is-embed, .is-v4list) .fe-watch { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 99px; }
:is(.is-embed, .is-v4list) .tz-about-title { font-size: 20px; }
/* Постеры блока серий («Все выпуски шоу на Иви») — как у остальных + выравниваем
   левый край блока по постерам передач (ширина таймкода 70px + gap 14px). */
:is(.is-embed, .is-v4list) .ep-card { flex: 0 0 168px; min-width: 168px; }
/* Блок серий ближе к постеру сверху и с чуть меньшим заголовком. */
:is(.is-embed, .is-v4list) .fe-series { margin-left: 84px; margin-top: -2px; margin-bottom: 24px; }
:is(.is-embed, .is-v4list) .fe-series-title { font-size: 15px; line-height: 19px; margin-bottom: 10px; }
/* Блок «Сейчас в эфире» в шторке не показываем. */
.is-embed .now-air { display: none; }