/* Elsa Media System — общие стили (все режимы). GENERATED из старых style.css; дальше правьте руками. */

/* ===================================================================
   1. ШРИФТЫ (лежат локально в assets/fonts, работают без интернета)
   =================================================================== */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/montserrat-cyrillic-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/montserrat-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Montserrat Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Playfair Display Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Playfair Display Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"JetBrains Mono Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),url("../assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}



/* ===================================================================
   2. ПЕРЕМЕННЫЕ И РАЗМЕРЫ
   =================================================================== */
:root {
  /* Ползунки из меню настроек (JS меняет эти значения) */
  --ui-scale: 1;          /* общий размер интерфейса */
  --ctl-scale: 1;         /* размер элементов внутри плеера */
  --bg-opacity: .6;       /* видимость фоновой картинки */
  --panel-alpha: .72;     /* непрозрачность панелей */
  --blur: 14px;           /* размытие под панелями */

  /* Шрифт (переключается атрибутом data-font, см. раздел 3) */
  --font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Геометрия */
  --radius: 1rem;
  --gap: .9rem;
  --list-w: 26rem;        /* ширина колонки со списком каналов */
  --topbar-h: 3.6rem;
  --epg-reserve: 16rem;   /* сколько высоты оставить под блок EPG рядом с плеером */

  /* Цвета: тема по умолчанию (Аврора). Остальные темы — в разделе 3. */
  --bg-rgb: 8, 12, 24;          /* фон страницы */
  --panel-rgb: 18, 26, 46;      /* панели */
  --text-rgb: 232, 238, 250;    /* текст */
  --accent-rgb: 90, 200, 250;   /* акцент: кнопки, полоски, выделение */
  --accent2-rgb: 124, 92, 255;  /* второй акцент (градиенты) */
  --on-accent-rgb: 6, 16, 30;   /* цвет текста НА акценте */
  --logo-bg: rgba(255, 255, 255, .94);  /* подложка под логотипами каналов */

  /* Производные — их обычно не трогают */
  --text: rgb(var(--text-rgb));
  --muted: rgba(var(--text-rgb), .62);
  --faint: rgba(var(--text-rgb), .38);
  --line: rgba(var(--text-rgb), .12);
  --hover: rgba(var(--text-rgb), .07);
  --panel: rgba(var(--panel-rgb), var(--panel-alpha));
  --panel-solid: rgb(var(--panel-rgb));
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgba(var(--accent-rgb), .16);
  --on-accent: rgb(var(--on-accent-rgb));
}



/* ===================================================================
   3. ТЕМЫ
   Чтобы добавить свою: скопируйте любой блок, поменяйте имя и цвета,
   затем добавьте строку в список THEMES в начале js/app.js.
   =================================================================== */
html[data-theme="ember"] {      /* Янтарь: тёплая тёмная */
  --bg-rgb: 20, 11, 8; --panel-rgb: 40, 24, 18; --text-rgb: 250, 238, 228;
  --accent-rgb: 255, 150, 70; --accent2-rgb: 255, 90, 90; --on-accent-rgb: 30, 14, 4;
}
html[data-theme="emerald"] {    /* Изумруд */
  --bg-rgb: 5, 18, 16; --panel-rgb: 12, 36, 31; --text-rgb: 226, 246, 240;
  --accent-rgb: 52, 211, 153; --accent2-rgb: 45, 170, 220; --on-accent-rgb: 3, 24, 18;
}
html[data-theme="violet"] {     /* Аметист */
  --bg-rgb: 14, 8, 26; --panel-rgb: 31, 20, 54; --text-rgb: 240, 232, 252;
  --accent-rgb: 192, 132, 252; --accent2-rgb: 244, 114, 182; --on-accent-rgb: 26, 8, 44;
}
html[data-theme="rose"] {       /* Роза */
  --bg-rgb: 22, 8, 16; --panel-rgb: 46, 18, 34; --text-rgb: 252, 232, 240;
  --accent-rgb: 251, 113, 133; --accent2-rgb: 251, 191, 36; --on-accent-rgb: 40, 6, 16;
}
html[data-theme="mono"] {       /* Моно: чисто чёрная, для OLED-экранов */
  --bg-rgb: 0, 0, 0; --panel-rgb: 20, 20, 20; --text-rgb: 240, 240, 240;
  --accent-rgb: 255, 255, 255; --accent2-rgb: 160, 160, 160; --on-accent-rgb: 10, 10, 10;
}
html[data-theme="daylight"] {   /* День: светлая */
  --bg-rgb: 236, 241, 248; --panel-rgb: 255, 255, 255; --text-rgb: 18, 27, 44;
  --accent-rgb: 37, 99, 235; --accent2-rgb: 124, 58, 237; --on-accent-rgb: 255, 255, 255;
  --logo-bg: rgb(244, 247, 252);
}

/* Шрифты. Список для меню — в js/app.js (FONTS). */
html[data-font="manrope"]    { --font: "Manrope Variable", system-ui, sans-serif; }
html[data-font="montserrat"] { --font: "Montserrat Variable", system-ui, sans-serif; }
html[data-font="playfair"]   { --font: "Playfair Display Variable", Georgia, serif; }
html[data-font="jetbrains"]  { --font: "JetBrains Mono Variable", ui-monospace, Menlo, monospace; }
html[data-font="system"]     { --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }



/* ===================================================================
   4. ОСНОВА СТРАНИЦЫ И ФОН
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* Базовый размер текста растёт вместе с экраном:
     телефон ≈ 15px, ноутбук ≈ 18px, телевизор 4K ≈ 29px.
     Все размеры ниже в rem, поэтому интерфейс сам масштабируется. */
  font-size: calc((10px + .5vw) * var(--ui-scale));                    /* запасной вариант для старых браузеров */
  font-size: calc(clamp(15px, .5vw + 10px, 40px) * var(--ui-scale));
  -webkit-text-size-adjust: 100%;
  background: rgb(var(--bg-rgb));
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: rgb(var(--bg-rgb));
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.ico {
  width: 1.3em; height: 1.3em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Обводка при выборе с клавиатуры или пульта */
:focus { outline: .2rem solid var(--accent); outline-offset: .15rem; }
/* Новые браузеры не рисуют обводку при клике мышью. Старые (телевизоры) не знают
   :focus-visible, пропускают следующее правило и показывают обводку всегда —
   так на ТВ видно, где стоит выбор. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: .2rem solid var(--accent); outline-offset: .15rem; }

/* Фон: картинка на всю страницу + слой затемнения */
.bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; }
.bg__img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: var(--bg-opacity);       /* ползунок «Видимость фона» */
  transition: opacity .3s;
}
.bg__shade {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), .25), rgba(var(--bg-rgb), .75));
}

.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Общий вид панелей (стекло) */
.panel {
  background: var(--panel);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}



/* ===================================================================
   5. ШАПКА
   =================================================================== */
.topbar {
  flex: none;
  display: flex; align-items: center; grid-gap: 1rem; gap: 1rem;
  height: var(--topbar-h);
  padding: 0 var(--gap);
}
.brand { display: flex; align-items: center; grid-gap: .7rem; gap: .7rem; min-width: 0; }
.brand__logo {
  width: 2.3rem; height: 2.3rem; object-fit: contain; border-radius: .6rem; flex: none;
}
.brand__name {
  font-weight: 800; letter-spacing: .02em; font-size: 1.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand.no-name .brand__name { display: none; }
.brand.no-logo .brand__logo { display: none; }

.search {
  flex: 1; max-width: 30rem; margin-left: auto; margin-right: auto;
  display: flex; align-items: center; grid-gap: .6rem; gap: .6rem;
  padding: 0 .9rem; height: 2.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  color: var(--muted);
}
.search:focus-within { border-color: rgba(var(--accent-rgb), .7); color: var(--text); }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text);
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

.topbar__right { display: flex; align-items: center; grid-gap: .8rem; gap: .8rem; margin-left: auto; }
.topclock { font-weight: 600; font-size: 1.05rem; color: var(--muted); }

.iconbtn {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  transition: background .15s, transform .15s;
}
.iconbtn:hover { background: var(--accent-soft); }
.iconbtn:active { transform: scale(.94); }



/* ===================================================================
   6. РАСКЛАДКА
   Три блока: stage (плеер), side (EPG сбоку), list (каналы).
   Положение задают атрибуты на <html>:
     data-channels = list-right | list-left | grid
     data-epg      = below | side | strip | off
   =================================================================== */
.layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-gap: var(--gap); gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
}
.stage {
  grid-area: stage;
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column; grid-gap: var(--gap); gap: var(--gap);
  overflow-y: auto; scrollbar-width: none;
}
.stage::-webkit-scrollbar { display: none; }
.side { grid-area: side; min-width: 0; }
.list { grid-area: list; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* --- Список справа от плеера --- */
.mod[data-epg="strip"] { --epg-reserve: 6rem; }
.mod[data-epg="side"], .mod[data-epg="off"] { --epg-reserve: 1rem; }

/* В режимах «список справа/слева» плеер подгоняется по высоте так, чтобы
   вместе с EPG под ним всё помещалось на экран без прокрутки */
.mod[data-channels="list-right"] .stage,
.mod[data-channels="list-left"] .stage {
  width: calc((100vh - var(--topbar-h) - var(--epg-reserve) - 2 * var(--gap)) * 16 / 9);   /* запасной вариант (без min()) */
  max-width: 100%;
  min-width: 24rem;
  width: min(100%, calc((100vh - var(--topbar-h) - var(--epg-reserve) - 2 * var(--gap)) * 16 / 9));
  width: min(100%, calc((100dvh - var(--topbar-h) - var(--epg-reserve) - 2 * var(--gap)) * 16 / 9));
  min-width: min(100%, 24rem);
  margin-left: auto; margin-right: auto;
}

.mod[data-channels="list-right"] .layout {
  grid-template-columns: minmax(0, 1fr) var(--list-w);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "stage side" "stage list";
}
/* --- Список слева от плеера --- */
.mod[data-channels="list-left"] .layout {
  grid-template-columns: var(--list-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "side stage" "list stage";
}
/* --- Сетка с логотипами под плеером --- */
.mod[data-channels="grid"] .layout {
  grid-template-columns: minmax(0, 1fr) var(--list-w);
  grid-template-rows: auto minmax(16rem, 1fr);
  grid-template-areas: "stage side" "list list";
  overflow-y: auto;
}
.mod[data-channels="grid"]:not([data-epg="side"]) .layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "list";
}
/* В режиме сетки плеер не растягивается на всю ширину,
   иначе на широком экране он съест всю высоту */
.mod[data-channels="grid"] .stage {
  width: calc((100vh - var(--topbar-h) - var(--epg-reserve) - 16rem) * 16 / 9);             /* запасной вариант (без min()/max()) */
  min-width: 26rem; max-width: 100%;
  width: min(100%, max(26rem, calc((100vh - var(--topbar-h) - var(--epg-reserve) - 16rem) * 16 / 9)));
  width: min(100%, max(26rem, calc((100dvh - var(--topbar-h) - var(--epg-reserve) - 16rem) * 16 / 9)));
  margin-left: auto; margin-right: auto;
  overflow: visible;
  min-height: auto;
}
.mod[data-channels="grid"][data-epg="side"] .stage { margin-left: 0; margin-right: auto; }



/* ===================================================================
   8. ТЕЛЕПРОГРАММА (EPG) ВНЕ ПЛЕЕРА
   Один и тот же блок может стоять в трёх местах (data-epg):
     below — карточка под плеером
     side  — карточка над списком каналов (или справа от плеера в «сетке»)
     strip — одна тонкая строка под плеером
   =================================================================== */
.epg-slot { min-width: 0; }
.epg-card, .epg-strip {
  background: var(--panel);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.epg-card { padding: 1rem 1.2rem; }
.epg-card__head { display: flex; align-items: center; grid-gap: .7rem; gap: .7rem; margin-bottom: .7rem; }
.epg-card__logo { width: 3.2rem; height: 2.4rem; padding: .25rem; object-fit: contain; background: var(--logo-bg); border-radius: .5rem; flex: none; }
.epg-card__chname { font-weight: 700; color: var(--muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag {
  display: inline-block; padding: .12rem .55rem; border-radius: .4rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--hover); color: var(--muted);
}
.tag--live { background: var(--accent); color: var(--on-accent); }

.epg-now__title { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin: .4rem 0 .2rem; }
.epg-now__meta { color: var(--muted); font-size: .95rem; }
.epg-now .bar { margin-top: .7rem; }
.epg-now__desc {
  margin: .8rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.epg-card.is-open .epg-now__desc { -webkit-line-clamp: unset; }

.epg-next { list-style: none; margin: .9rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; grid-gap: .1rem; gap: .1rem; }
.epg-next li { display: grid; grid-template-columns: 3.4rem 1fr; grid-gap: .6rem; gap: .6rem; padding: .3rem 0; font-size: .95rem; }
.epg-next time { color: var(--accent); font-weight: 700; }
.epg-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epg-more {
  margin-top: .5rem; padding: .3rem .9rem; border-radius: 99px; font-size: .85rem;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.epg-more:hover { background: var(--hover); color: var(--text); }
.epg-empty { padding: 1rem 1.2rem; color: var(--muted); font-size: .95rem; }

/* Компактная карточка (сбоку): без описания, короче */
.side .epg-now__desc { display: none; }
.side .epg-now__title { font-size: 1.15rem; }

/* Тонкая строка */
.epg-strip { display: flex; align-items: center; grid-gap: 1rem; gap: 1rem; padding: .7rem 1.1rem; min-width: 0; }
.epg-strip__now { flex: 1; min-width: 0; display: flex; align-items: baseline; grid-gap: .7rem; gap: .7rem; }
.epg-strip__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg-strip__time { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.epg-strip .bar { width: 8rem; flex: none; }
.epg-strip__next { color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }

/* Полоска прогресса (везде одинаковая) */
.bar { height: .3rem; border-radius: 99px; background: rgba(var(--text-rgb), .16); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), rgb(var(--accent2-rgb))); }



/* ===================================================================
   10. МЕНЮ НАСТРОЕК
   Панель выезжает справа. Содержимое строит js/app.js (SCHEMA).
   =================================================================== */
.scrim {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .25s;
}
.scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0;
  width: 30rem; max-width: 100vw;
  width: min(30rem, 100vw);
  display: flex; flex-direction: column;
  background: rgba(var(--panel-rgb), .97);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  border-left: 1px solid var(--line);
  box-shadow: -1rem 0 3rem rgba(0, 0, 0, .4);
  transform: translateX(105%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.drawer__head h2 { margin: 0; font-size: 1.2rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: .4rem 1.1rem 2rem; overscroll-behavior: contain; scrollbar-width: thin; }

.set-group { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.set-group > summary {
  list-style: none; cursor: pointer; padding: .8rem 0; font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between;
}
.set-group > summary::-webkit-details-marker { display: none; }
.set-group > summary::after { content: "▾"; transition: transform .2s; color: var(--muted); }
.set-group:not([open]) > summary::after { transform: rotate(-90deg); }

.set-row { display: grid; grid-gap: .45rem; gap: .45rem; padding: .55rem 0; }
.set-row--inline { grid-template-columns: 1fr auto; align-items: center; }
.set-label { font-size: .95rem; display: flex; justify-content: space-between; grid-gap: .8rem; gap: .8rem; }
.set-label output { color: var(--muted); font-variant-numeric: tabular-nums; }
.set-hint { color: var(--muted); font-size: .82rem; line-height: 1.4; }

.set-row select, .set-row input[type="text"] {
  width: 100%; padding: .6rem .75rem; border-radius: .65rem;
  background: rgba(var(--text-rgb), .07); border: 1px solid var(--line); color: var(--text); min-width: 0;
}
.set-row select option { background: var(--panel-solid); color: var(--text); }
.set-row input[type="text"]::placeholder { color: var(--faint); }
.set-row select:focus, .set-row input[type="text"]:focus { border-color: rgba(var(--accent-rgb), .8); outline: 0; }

/* Выбор темы */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .55rem; gap: .55rem; }
.tile {
  display: grid; grid-gap: .4rem; gap: .4rem; padding: .5rem; border-radius: .8rem; text-align: center; font-size: .82rem;
  background: rgba(var(--text-rgb), .05); border: 2px solid transparent; color: var(--text);
}
.tile:hover { background: var(--hover); }
.tile[aria-pressed="true"] { border-color: var(--accent); }
.tile__sw {
  height: 2.4rem; border-radius: .55rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c1) 0 55%, var(--c2) 55%);
  border: 1px solid rgba(128, 128, 128, .3);
}
.tile__sw::after { content: ""; position: absolute; right: .35rem; bottom: .35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--c3); }
.tile__bg { height: 2.8rem; border-radius: .55rem; background: #111 center / cover; border: 1px solid rgba(128, 128, 128, .3); display: grid; place-items: center; font-size: 1.4rem; color: var(--muted); }

/* Переключатель */
.switch { position: relative; width: 2.9rem; height: 1.6rem; flex: none; }
.switch input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 99px; background: rgba(var(--text-rgb), .22); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(1.3rem); }
.switch input:focus + span { outline: .2rem solid var(--accent); outline-offset: .15rem; }
.switch input:focus:not(:focus-visible) + span { outline: none; }
.switch input:focus-visible + span { outline: .2rem solid var(--accent); outline-offset: .15rem; }

.color-row { display: flex; align-items: center; grid-gap: .6rem; gap: .6rem; }
.color-row input[type="color"] { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--line); border-radius: .5rem; background: none; cursor: pointer; }



/* ===================================================================
   11. МЕЛОЧИ: кнопки, подсказка, ползунки
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; grid-gap: .5rem; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: .7rem; font-weight: 700;
  background: rgba(var(--text-rgb), .1); border: 1px solid var(--line); color: var(--text);
}
.btn:hover { background: rgba(var(--text-rgb), .16); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { filter: brightness(1.08); background: var(--accent); }
.btn--danger { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); }
.btn--block { width: 100%; }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  max-width: 32rem; max-width: min(32rem, 92vw); padding: .7rem 1.1rem; border-radius: .8rem; text-align: center;
  background: rgba(14, 16, 28, .95); color: #fff; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .5); font-size: .95rem;
}

/* Ползунки (громкость, настройки). Заполненную часть рисует переменная --p,
   её выставляет JS. */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: .45rem; margin: .5rem 0;
  border-radius: 99px; outline: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), rgba(var(--text-rgb), .22) var(--p, 50%));
}
.player__ui input[type="range"] {
  height: .4em;
  background: linear-gradient(90deg, #fff var(--p, 50%), rgba(255, 255, 255, .3) var(--p, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #fff; border: .2rem solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
input[type="range"]::-moz-range-thumb {
  width: .9rem; height: .9rem; border-radius: 50%; background: #fff; border: .2rem solid var(--accent);
}
.player__ui input[type="range"]::-webkit-slider-thumb { width: 1em; height: 1em; border-width: 0; }
.player__ui input[type="range"]::-moz-range-thumb { width: .8em; height: .8em; border-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}



/* ===================================================================
   12. АДАПТИВ (общая часть)
   =================================================================== */

/* ===================================================================
   12. АДАПТИВ
   =================================================================== */
/* --- Вертикальные и узкие экраны (телефон стоя, планшет стоя): всё в одну колонку.
       Сверху плеер, ниже EPG, ниже список каналов, он прокручивается. --- */
@media (max-aspect-ratio: 5/4), (max-width: 599px) {
  :root { --gap: .6rem; --topbar-h: 3.3rem; }
  .mod[data-channels] .layout {
    display: flex; flex-direction: column; overflow: hidden; padding-left: 0; padding-right: 0; grid-gap: .5rem; gap: .5rem;
  }
  .mod[data-channels] .stage { width: auto; min-width: 0; margin: 0; flex: none; overflow: visible; grid-gap: .5rem; gap: .5rem; }
  .mod[data-channels] .side { flex: none; }
  .mod[data-channels] .list { flex: 1; min-height: 0; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
  .epg-slot { padding-left: .6rem; padding-right: .6rem; }
  .brand__name { display: none; }
  .topclock { display: none; }
  .search { margin-left: 0; margin-right: 0; }
  .epg-card { padding: .8rem .9rem; }
  .epg-now__title { font-size: 1.15rem; }
  .epg-now__desc { display: none; }
  .epg-card.is-open .epg-now__desc { display: -webkit-box; }
  .epg-strip__next,
.epg-strip .bar { display: none; }
  .drawer { width: 100vw; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
/* --- Устройства без мыши (телефон, планшет): ползунок громкости не нужен,
       громкость — кнопками телефона --- */
/* --- Низкие экраны (телефон горизонтально): плеер ограничен по высоте --- */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) and (min-width: 600px) {
  :root { --list-w: 22rem; --topbar-h: 3rem; }
  .mod[data-epg] { --epg-reserve: 1rem; }
  .epg-slot[data-slot="below"] .epg-now__desc { display: none; }
}
/* --- Очень большие экраны (ТВ 4K): шире список, крупнее скругления --- */
@media (min-width: 2400px) {
  :root { --list-w: 30rem; --radius: 1.1rem; }
}
/* --- Режим «ТВ»: когда указатель — только пульт, фокусную рамку делаем толще --- */
@media (hover: none) and (pointer: coarse) and (min-width: 1200px) {
  :focus-visible { outline-width: .3rem; }
}
/* ===================================================================
   13. ВИРТУАЛЬНЫЙ ПУЛЬТ (сам пульт — в remote/remote.css)
   =================================================================== */
/* Чтобы плавающая кнопка не закрывала последние каналы в списке */
.list__scroll { padding-bottom: 5.5rem; }
/* Пока открыто меню настроек, кнопку пульта прячем */
.drawer.is-open ~ .ers-float { display: none; }



/* =====================================================================
   14. БОЛЬШИЕ ЧАСЫ (по команде пульта)
   Лежит в <body> поверх всего; в полноэкранном режиме app.js переносит внутрь плеера.
   ===================================================================== */
.bigclock {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); color: #fff; text-align: center; cursor: pointer;
  text-shadow: 0 .05em .3em rgba(0, 0, 0, .7);
}
.player > .bigclock { position: absolute; }
.bigclock__time { font-size: 22vmin; font-weight: 800; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bigclock__week { font-size: 7vmin; font-weight: 700; margin-top: 3vmin; text-transform: capitalize; color: var(--accent); }
.bigclock__date { font-size: 5vmin; margin-top: 1vmin; color: rgba(255, 255, 255, .88); }