/* =====================================================================
   ЭТВ — единая дизайн-система (публичная страница + админка)
   Файл: /opt/tv/www/assets/etv.css  →  https://<домен>/tv/assets/etv.css
   Чтобы сменить фирменный цвет — правьте только блок «ФИРМЕННЫЕ ЦВЕТА».
   ===================================================================== */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/tv/fonts/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/tv/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
 /* ===== ФИРМЕННЫЕ ЦВЕТА (под логотип ЭТВ: оранжевый → янтарный) ===== */
 --a1:#ff7a00;            /* основной акцент: кнопки, прогресс, активные пункты */
 --a2:#ffc233;            /* второй цвет градиента (янтарь) */
 --a1-rgb:255,122,0;      /* основной акцент в R,G,B — для полупрозрачных подсветок */
 --on-acc:#1d1204;        /* цвет текста/иконок поверх акцентного градиента */
 /* ==================================================================== */
 --live:#ff3b30; --live-rgb:255,59,48;          /* «В ЭФИРЕ» — красный (семантика прямого эфира) */
 --ok:#35d07f; --warn:#ffb020; --bad:#ff5a52;
 --bg:#0b0c10; --bg2:#12141a; --card:#16181f; --card2:#1d2029; --input:#0e1016;
 --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
 --text:#eef0f5; --mut:#9098aa;
 --grad:linear-gradient(135deg,var(--a1),var(--a2));
 --r:18px; --r-sm:12px; --r-xs:8px;
 --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-sm:0 6px 20px rgba(0,0,0,.35);
 --font:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --pad:clamp(14px,2.6vw,48px);   /* боковые поля — растут вместе с экраном */
 --maxw:2240px;                  /* максимальная ширина контента на больших мониторах */
 --hdr:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--a2);text-decoration:none}a:hover{color:#ffd77a}
::selection{background:rgba(var(--a1-rgb),.35)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:#2c303a transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2c303a;border-radius:9px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
.etv-glow{position:fixed;inset:-20% -10% auto;height:70vh;pointer-events:none;z-index:-1;
 background:radial-gradient(55% 60% at 18% 18%,rgba(var(--a1-rgb),.16),transparent 70%),radial-gradient(45% 50% at 88% 8%,rgba(255,194,51,.07),transparent 70%)}
.etv-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* ---------- шапка ---------- */
.etv-header{position:sticky;top:0;z-index:30;height:var(--hdr);background:rgba(11,12,16,.74);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.etv-header .etv-wrap{height:100%;display:flex;align-items:center;gap:14px}
.etv-brand{display:flex;align-items:center;gap:12px;color:var(--text);min-width:0}
.etv-brand img{height:42px;width:auto;display:block;filter:drop-shadow(0 3px 10px rgba(var(--a1-rgb),.25))}
.etv-brand .t{font-weight:800;font-size:17px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- карточки ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}
.card-h .ln{flex:1;height:1px;background:var(--line)}
.mut{color:var(--mut)}.small{font-size:12.5px}
/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;max-width:100%;border:1px solid var(--line2);background:var(--card2);color:var(--text);padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;font:600 14px/1.2 var(--font);white-space:nowrap;text-decoration:none;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn:hover{border-color:rgba(var(--a1-rgb),.5);background:#242834;color:var(--text)}.btn:active{transform:scale(.97)}
.btn.p,.btn-p{background:var(--grad);border-color:transparent;color:var(--on-acc);font-weight:800;box-shadow:0 6px 18px rgba(var(--a1-rgb),.28)}
.btn.p:hover,.btn-p:hover{filter:brightness(1.07);color:var(--on-acc);background:var(--grad)}
.btn.d{color:var(--bad)}.btn.d:hover{border-color:rgba(255,90,82,.5)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn:focus-visible,.ib:focus-visible,input:focus-visible{outline:2px solid rgba(var(--a1-rgb),.7);outline-offset:2px}
/* ---------- бейджи ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--card2);border:1px solid var(--line2);white-space:nowrap;vertical-align:middle}
.badge.ok{color:var(--ok);border-color:rgba(53,208,127,.35);background:rgba(53,208,127,.08)}
.badge.bad{color:var(--bad);border-color:rgba(255,90,82,.35);background:rgba(255,90,82,.08)}
.badge.warn{color:var(--warn);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.08)}
.badge.acc{color:var(--a2);border-color:rgba(var(--a1-rgb),.4);background:rgba(var(--a1-rgb),.1)}
.badge.ok::before,.badge.bad::before,.badge.warn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.live,.badge-live{display:inline-flex;align-items:center;gap:7px;background:var(--live);border:0;color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;padding:5px 10px;border-radius:7px;box-shadow:0 4px 14px rgba(var(--live-rgb),.45)}
.live-pill{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.8px;padding:6px 12px;border-radius:99px;background:rgba(var(--live-rgb),.12);color:#ff6b61;border:1px solid rgba(var(--live-rgb),.32);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:etv-pulse 1.6s infinite;flex:none}
@keyframes etv-pulse{0%{box-shadow:0 0 0 0 rgba(var(--live-rgb),.65)}70%{box-shadow:0 0 0 9px rgba(var(--live-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--live-rgb),0)}}
/* ---------- прогресс ---------- */
.bar{height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;transition:width .8s linear}
/* ---------- поля ввода ---------- */
input,select,textarea{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 12px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(var(--a1-rgb),.65);box-shadow:0 0 0 3px rgba(var(--a1-rgb),.15)}
input[type=checkbox],input[type=range]{accent-color:var(--a1)}
input[type=range]{padding:0;border:0;background:none;box-shadow:none}
/* ---------- уведомления ---------- */
.etv-toast{background:#20232c;color:var(--text);border:1px solid var(--line2);border-left:4px solid var(--a1);font-weight:700;padding:11px 16px;border-radius:var(--r-sm);box-shadow:0 12px 30px rgba(0,0,0,.45);max-width:min(420px,90vw)}
.etv-toast.err{border-left-color:var(--bad)}
/* ---------- миниатюры ---------- */
.th{position:relative;aspect-ratio:16/9;border-radius:10px;background:#1a1c22 center/cover no-repeat;overflow:hidden}
.th.ph{background:linear-gradient(135deg,rgba(var(--a1-rgb),.35),rgba(255,194,51,.18))}
.th .d,.dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Android TV / 10-foot / пульт ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--a1);outline-offset:3px;border-radius:10px}
a:focus-visible,button:focus-visible,.btn:focus-visible,.ib:focus-visible,
[tabindex="0"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--a1);outline-offset:3px
}
.btn,.ib{min-height:44px}
.btn{padding:11px 16px;font-size:15px}
.btn.sm{min-height:40px;padding:8px 12px}
/* крупнее кликабельные зоны на ТВ / без мыши */
@media (hover:none), (pointer:coarse){
  .btn{min-height:48px;padding:12px 18px;font-size:16px}
  .btn.sm{min-height:44px}
}
/* очень большие экраны / Android TV — усиливаем меню и карточки */
@media (min-width:1280px) and (min-height:700px){
  :root{--pad:clamp(18px,2.2vw,40px)}
}
.tv-focusable:focus-visible{outline:3px solid var(--a1);outline-offset:4px;box-shadow:0 0 0 1px rgba(var(--a1-rgb),.35)}

/* ---------- Левое меню (горизонтальные пункты: иконка слева + текст справа) ---------- */
.sidenav{background:linear-gradient(185deg,#14161c 0%,#0f1115 100%);border-right:1px solid var(--line);padding:14px 10px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;z-index:40;overflow:auto}
.sidenav .brand{display:flex;align-items:center;justify-content:flex-start;gap:0;padding:4px 10px 14px;color:var(--text);text-decoration:none;border-radius:14px}
.sidenav .brand img{height:40px;width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(var(--a1-rgb),.3))}
.sidenav .brand span,.sidenav .brand .t{display:none!important} /* только логотип «Э», без текста ETV */
/* 3D-кнопки меню: bevel сверху-слева, тень снизу-справа */
.sidenav a.nav,.sidenav details.nav-group>summary.nav{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
  padding:10px 12px;min-height:44px;border-radius:12px;text-align:left;
  color:var(--mut);font-weight:700;font-size:14.5px;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;
  background:linear-gradient(165deg,#1e222c 0%,#161920 48%,#12151b 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 3px 0 rgba(0,0,0,.38),
    0 6px 14px rgba(0,0,0,.28);
  transition:background .15s,color .15s,box-shadow .15s,transform .12s,border-color .15s
}
.sidenav a.nav .ic,.sidenav details.nav-group>summary.nav .ic{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  text-align:center;font-size:16px;line-height:1;opacity:.95;flex:none;margin:0
}
.sidenav a.nav .ic svg,.sidenav details.nav-group>summary.nav .ic svg,
.mobdrawer .p a .ic svg{width:18px;height:18px;display:block;fill:currentColor}
.sidenav a.nav:hover,.sidenav details.nav-group>summary.nav:hover{
  color:var(--text);
  background:linear-gradient(165deg,#262b38 0%,#1c202a 48%,#171a22 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 1px 0 0 rgba(255,255,255,.08),
    0 4px 0 rgba(0,0,0,.32),
    0 10px 20px rgba(0,0,0,.34);
  transform:translateY(-1px)
}
.sidenav a.nav.on,.sidenav details.nav-group>summary.nav.on,
.sidenav a.nav:active,.sidenav details.nav-group>summary.nav:active{
  color:#fff;
  background:linear-gradient(180deg,#101218 0%,#181b24 55%,#1a1e28 100%);
  border-color:rgba(var(--a1-rgb),.4);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(var(--a1-rgb),.22);
  transform:translateY(1px)
}
.sidenav a.nav.on:hover,.sidenav details.nav-group>summary.nav.on:hover{
  color:#fff;
  background:linear-gradient(180deg,#12141c 0%,#1a1e28 55%,#1c2030 100%);
  border-color:rgba(var(--a1-rgb),.45);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(0,0,0,.3),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--a1-rgb),.28);
  transform:translateY(1px)
}
.sidenav a.nav:focus-visible,.sidenav details.nav-group>summary.nav:focus-visible{
  outline:3px solid var(--a1);outline-offset:2px;color:#fff;
  background:linear-gradient(165deg,#242833 0%,#1a1d27 55%,#151820 100%)
}
.sidenav .sp{flex:1;min-height:8px}
.sidenav .side-foot{padding:12px 10px 4px;color:var(--mut);font-size:12px;border-top:1px solid var(--line);margin-top:10px;text-align:left}

/* ---------- раскрывающееся «Видео» в сайдбаре ---------- */
.sidenav details.nav-group{margin:0;border:0;padding:0}
.sidenav details.nav-group>summary.nav{list-style:none;cursor:pointer;user-select:none}
.sidenav details.nav-group>summary.nav::-webkit-details-marker{display:none}
.sidenav details.nav-group>summary.nav::after{content:"▸";margin-left:auto;opacity:.55;font-size:12px;transition:transform .15s}
.sidenav details.nav-group[open]>summary.nav::after{transform:rotate(90deg)}
.sidenav a.nav.sub{padding-left:28px;min-height:40px;font-size:14px;opacity:.95}

/* Mobile drawer: те же 3D-кнопки, иконка+текст в ряд */
.mobdrawer .p a{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  padding:12px 14px;min-height:44px;border-radius:12px;
  color:var(--mut);font-weight:700;text-decoration:none;font-size:15px;
  background:linear-gradient(165deg,#1e222c 0%,#161920 48%,#12151b 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 3px 0 rgba(0,0,0,.38),
    0 6px 14px rgba(0,0,0,.28);
  transition:background .15s,color .15s,box-shadow .15s,transform .12s,border-color .15s;
  margin:4px 0
}
.mobdrawer .p a .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:16px;line-height:1}
.mobdrawer .p a:hover{
  color:#fff;
  background:linear-gradient(165deg,#262b38 0%,#1c202a 48%,#171a22 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 1px 0 0 rgba(255,255,255,.08),
    0 4px 0 rgba(0,0,0,.32),
    0 10px 20px rgba(0,0,0,.34);
  transform:translateY(-1px)
}
.mobdrawer .p a.on,.mobdrawer .p a:active{
  color:#fff;
  background:linear-gradient(180deg,#101218 0%,#181b24 55%,#1a1e28 100%);
  border-color:rgba(var(--a1-rgb),.4);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(var(--a1-rgb),.22);
  transform:translateY(1px)
}
.mobdrawer .p a:focus-visible{
  outline:3px solid var(--a1);outline-offset:2px;color:#fff;
  background:linear-gradient(165deg,#242833 0%,#1a1d27 55%,#151820 100%)
}

/* Mobile helpers for /tv/ pages */
@media(max-width:860px){
  .sidenav{display:none!important}
}

/* === etv mobile polish 2026-09 === */
@media (max-width:860px){
  .sidenav{display:none!important}
  .shell,.layout{grid-template-columns:1fr!important}
  .main-area,.main,.content{padding-left:12px!important;padding-right:12px!important}
  .player-shell,.player-wrap,#playerWrap{max-width:none!important}
  .nov-grid,.v-grid,.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
}
@media (max-width:420px){
  .nov-grid,.v-grid,.grid.cards{grid-template-columns:1fr!important}
  /* sc-grid stays 3-col via mobile music rules below */
}

/* ========== Тема: светлая (тёмная = :root по умолчанию) ========== */
html[data-theme="light"]{
  --bg:#f3f4f8; --bg2:#ffffff; --card:#ffffff; --card2:#eef0f5; --input:#ffffff;
  --line:rgba(15,18,28,.08); --line2:rgba(15,18,28,.14);
  --text:#1a1d26; --mut:#5c6578;
  --shadow:0 18px 50px rgba(20,24,40,.1); --shadow-sm:0 6px 20px rgba(20,24,40,.07);
  --on-acc:#1d1204;
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] a:hover{color:#c45e00}
html[data-theme="light"] .etv-glow{
  background:radial-gradient(55% 60% at 18% 18%,rgba(var(--a1-rgb),.1),transparent 70%),radial-gradient(45% 50% at 88% 8%,rgba(255,194,51,.06),transparent 70%)
}
html[data-theme="light"] .etv-header{background:rgba(255,255,255,.82);border-bottom-color:var(--line)}
html[data-theme="light"] .sidenav{
  background:linear-gradient(185deg,#f7f8fb 0%,#eef0f5 100%);
  border-right-color:var(--line)
}
html[data-theme="light"] .sidenav a.nav,
html[data-theme="light"] .sidenav details.nav-group>summary.nav,
html[data-theme="light"] .mobdrawer .p a{
  color:var(--mut);
  background:linear-gradient(165deg,#ffffff 0%,#f3f5f9 48%,#e9ecf3 100%);
  border-color:rgba(15,18,28,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 1px 0 0 rgba(255,255,255,.6),
    0 2px 0 rgba(15,18,28,.08),
    0 4px 10px rgba(15,18,28,.06)
}
html[data-theme="light"] .sidenav a.nav:hover,
html[data-theme="light"] .sidenav details.nav-group>summary.nav:hover,
html[data-theme="light"] .mobdrawer .p a:hover{
  color:var(--text);
  background:linear-gradient(165deg,#fff 0%,#f7f8fc 48%,#eef1f7 100%);
  border-color:rgba(var(--a1-rgb),.35);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 rgba(15,18,28,.08),
    0 8px 16px rgba(15,18,28,.08)
}
html[data-theme="light"] .sidenav a.nav.on,
html[data-theme="light"] .sidenav details.nav-group>summary.nav.on,
html[data-theme="light"] .sidenav a.nav:active,
html[data-theme="light"] .sidenav details.nav-group>summary.nav:active,
html[data-theme="light"] .mobdrawer .p a.on,
html[data-theme="light"] .mobdrawer .p a:active{
  color:#1a1d26;
  background:linear-gradient(180deg,#ffe8cc 0%,#ffd7a8 55%,#ffc98a 100%);
  border-color:rgba(var(--a1-rgb),.45);
  box-shadow:
    inset 0 2px 6px rgba(180,80,0,.12),
    0 0 0 1px rgba(var(--a1-rgb),.2)
}
html[data-theme="light"] .mobdrawer .p{background:#f5f6fa;border-right-color:var(--line)}
html[data-theme="light"] .mobdrawer{background:rgba(20,24,40,.35)}
html[data-theme="light"] .side-foot{border-top-color:var(--line);color:var(--mut)}
html[data-theme="light"] .btn:hover{background:#e6e9f0;color:var(--text)}
html[data-theme="light"] .card{box-shadow:var(--shadow-sm)}
html[data-theme="light"] .sc-player{
  background:#fff;border-color:var(--line);
  box-shadow:0 18px 50px rgba(20,24,40,.1)
}
html[data-theme="light"] .sc-player .sc-bg{filter:blur(56px) saturate(1.2) brightness(.85);opacity:.55}
html[data-theme="light"] .sc-player .sc-bg::after{
  background:linear-gradient(105deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.88) 100%)
}
html[data-theme="light"] code{background:rgba(0,0,0,.06)}
html[data-theme="light"] *{scrollbar-color:#c5cad6 transparent}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c5cad6;border-color:var(--bg)}

/* Переключатель темы */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;padding:10px 12px;margin:4px 0;
  border-radius:12px;cursor:pointer;font:700 14px/1.2 var(--font);color:var(--text);
  background:linear-gradient(165deg,#1e222c 0%,#161920 48%,#12151b 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 rgba(0,0,0,.38),0 6px 14px rgba(0,0,0,.28);
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s
}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(var(--a1-rgb),.4)}
.theme-toggle:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.theme-toggle .theme-ic{font-size:18px;line-height:1}
.theme-toggle .theme-ic-sun{display:none}
html[data-theme="light"] .theme-toggle{
  background:linear-gradient(165deg,#fff 0%,#f3f5f9 48%,#e9ecf3 100%);
  border-color:rgba(15,18,28,.1);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(15,18,28,.08),0 4px 10px rgba(15,18,28,.06)
}
html[data-theme="dark"] .theme-toggle .theme-ic-moon,
html:not([data-theme]) .theme-toggle .theme-ic-moon,
html:not([data-theme="light"]) .theme-toggle .theme-ic-moon{display:inline}
html:not([data-theme="light"]) .theme-toggle .theme-ic-sun{display:none}
html[data-theme="light"] .theme-toggle .theme-ic-moon{display:none}
html[data-theme="light"] .theme-toggle .theme-ic-sun{display:inline}
.theme-toggle-lab{font-size:13.5px}
.topbar .theme-toggle{
  width:48px;height:48px;min-height:48px;padding:0;margin:0;margin-left:auto;flex:none;border-radius:14px
}
.topbar .theme-toggle .theme-toggle-lab{display:none}
.etv-header .theme-toggle{
  width:42px;height:42px;min-height:42px;padding:0;margin-left:8px;border-radius:12px;flex:none
}
.etv-header .theme-toggle .theme-toggle-lab{display:none}

/* Нравится / не нравится — компактные 3D-кнопки */
.etv-react{
  display:flex;flex-wrap:nowrap;gap:8px;align-items:center;
  margin:10px 0 2px
}
.etv-react-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:36px;padding:6px 10px;
  border-radius:12px;cursor:pointer;font:700 13px/1.2 var(--font);color:var(--mut);white-space:nowrap;
  background:linear-gradient(165deg,#1e222c 0%,#161920 48%,#12151b 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.05),0 2px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.2);
  transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .15s
}
.etv-react-btn:hover{
  color:var(--text);border-color:rgba(var(--a1-rgb),.45);transform:translateY(-1px);
  background:linear-gradient(165deg,#262b38 0%,#1c202a 48%,#171a22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.08),0 3px 0 rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.28)
}
.etv-react-btn:active{transform:translateY(1px);box-shadow:inset 0 3px 8px rgba(0,0,0,.42),inset 0 1px 0 rgba(0,0,0,.3),0 0 0 1px rgba(var(--a1-rgb),.2)}
.etv-react-btn:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.etv-react-btn.on{
  color:var(--on-acc);background:var(--grad);border-color:transparent;transform:translateY(1px);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.2),inset 0 -1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(var(--a1-rgb),.25),0 4px 12px rgba(var(--a1-rgb),.25)
}
.etv-react-btn.on:hover{color:var(--on-acc);filter:brightness(1.06)}
.etv-react-btn.on.down{
  color:#e8ebf1;background:linear-gradient(165deg,#424958 0%,#303641 48%,#252b35 100%);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(148,158,178,.16),0 4px 12px rgba(0,0,0,.22)
}
.etv-react-ic{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;color:var(--a2);line-height:0;flex:none}
.etv-react-ic svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.etv-react-btn.on .etv-react-ic{color:currentColor}
.etv-react-btn.on.down .etv-react-ic{color:#c7cedb}
.etv-react-n{min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums;padding:1px 5px;border-radius:99px;background:rgba(255,255,255,.1);font-size:12px}
html[data-theme="light"] .etv-react-btn{
  color:#596273;background:linear-gradient(165deg,#fff 0%,#f1f3f7 48%,#e7eaf0 100%);border-color:rgba(15,18,28,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.7),0 2px 0 rgba(15,18,28,.12),0 4px 10px rgba(20,24,40,.08)
}
html[data-theme="light"] .etv-react-btn:hover{color:var(--text);background:linear-gradient(165deg,#fff 0%,#f7f8fa 48%,#e8ebf1 100%);border-color:rgba(var(--a1-rgb),.45)}
html[data-theme="light"] .etv-react-btn.on{color:var(--on-acc);background:var(--grad);border-color:transparent}
html[data-theme="light"] .etv-react-btn.on.down{color:#fff;background:linear-gradient(165deg,#6b7280,#4b5563);border-color:transparent}
html[data-theme="light"] .etv-react-n{background:rgba(15,18,28,.08)}
.etv-react-btn.on .etv-react-n{background:rgba(0,0,0,.12)}
@media (max-width:520px){
  .etv-react{gap:6px;margin-top:8px}
  .etv-react-btn{min-height:34px;padding:5px 9px;gap:5px}
  .etv-react-lab{display:none}
}
.sc-card .etv-react{margin:2px 0 0;gap:6px}
.sc-card .etv-react-btn{min-height:36px;padding:5px 10px;font-size:12.5px;gap:5px}
.sc-card .etv-react-lab{display:none}

/* ========== Download / topbar polish (mobile + light) ========== */
.topbar{display:none;align-items:center;gap:10px;margin-bottom:14px}
.topbar .brand-only{display:flex;align-items:center;min-width:0}
.topbar .theme-toggle{
  width:48px;height:48px;min-height:48px;padding:0;margin:0 0 0 auto;flex:none;
  border-radius:14px
}
@media(max-width:860px){
  .topbar{display:flex!important}
}
/* light: download cards & chrome */
html[data-theme="light"] .sc-card{
  background:#fff;border-color:rgba(15,18,28,.1);
  box-shadow:0 8px 24px rgba(20,24,40,.06);color:var(--text)
}
html[data-theme="light"] .sc-card:hover,
html[data-theme="light"] .sc-card:focus-visible{
  border-color:rgba(var(--a1-rgb),.45);
  box-shadow:0 12px 28px rgba(20,24,40,.1)
}
html[data-theme="light"] .sc-ttl{color:var(--text)}
html[data-theme="light"] .sc-artst,
html[data-theme="light"] .sc-meta .dur{color:var(--mut)}
html[data-theme="light"] .sc-dl{
  background:#f0f2f7;border-color:rgba(15,18,28,.12);color:var(--text)
}
html[data-theme="light"] .sc-dl:hover,
html[data-theme="light"] .sc-dl:focus-visible{
  background:var(--grad);border-color:transparent;color:var(--on-acc)
}
html[data-theme="light"] .burger{
  background:var(--card2);border-color:var(--line2);color:var(--text)
}
html[data-theme="light"] .sc-head .lead,
html[data-theme="light"] .lead{color:var(--mut)}
html[data-theme="light"] .nowbar,
html[data-theme="light"] .sc-now{
  background:var(--card);border-color:var(--line);color:var(--text)
}
/* like row under MP3 — full width, no overlap with art/play */
.sc-card .etv-react{
  margin:6px 0 0;padding-top:8px;border-top:1px solid var(--line);
  width:100%;justify-content:stretch;gap:8px
}
.sc-card .etv-react-btn{flex:1;justify-content:center;min-height:40px}
.sc-card .etv-react-lab{display:inline}
@media(max-width:380px){
  .sc-card .etv-react-lab{display:none}
}

/* Светлая тема: мобильная шапка и компактные карточки */
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.92);border-bottom-color:var(--line);color:var(--text)
}
html[data-theme="light"] .topbar .live-pill{color:#c84f22;background:rgba(var(--a1-rgb),.1);border-color:rgba(var(--a1-rgb),.28)}
html[data-theme="light"] .mobdrawer .p{background:#f5f6fa;border-right-color:var(--line)}
html[data-theme="light"] .mobdrawer .p a.on,
html[data-theme="light"] .mobdrawer .p a:hover,
html[data-theme="light"] .mobdrawer .p a:focus-visible{color:var(--text)}

/* Музыка на телефоне: три компактные карточки в ряд */
@media (max-width:860px){
  .sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .sc-card{display:flex!important;flex-direction:column!important;gap:5px!important;padding:7px!important;border-radius:11px!important;align-items:stretch!important}
  .sc-card:hover,.sc-card:focus-visible{transform:none!important}
  .sc-art{width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:8px!important}
  .sc-play{width:32px!important;height:32px!important}
  .sc-play svg{width:14px!important;height:14px!important}
  .sc-ttl{font-size:11.5px!important;line-height:1.2!important;min-height:0!important;-webkit-line-clamp:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sc-artst{font-size:10.5px!important;line-height:1.2!important}
  .sc-meta{gap:3px!important;margin-top:0!important;min-width:0}
  .sc-meta .dur{font-size:9px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .sc-dl{min-height:25px!important;padding:3px 5px!important;border-radius:7px!important;font-size:0!important;gap:0!important}
  .sc-dl::before{content:"↓";font:800 14px/1 var(--font)}
  .sc-card .etv-react{margin:1px 0 0!important;padding-top:4px!important;border-top:1px solid var(--line)!important;gap:3px!important;width:100%!important}
  .sc-card .etv-react-btn{flex:1;min-width:0;min-height:25px!important;padding:2px 3px!important;border-radius:7px!important;font-size:10px!important;gap:2px!important}
  .sc-card .etv-react-ic,.sc-card .etv-react-ic svg{width:13px!important;height:13px!important}
  .sc-card .etv-react-lab{display:none!important}
  .sc-card .etv-react-n{font-size:9px!important;padding:1px 3px!important;min-width:1em}
}
@media (max-width:360px){
  .sc-grid{gap:5px!important}
  .sc-card{padding:5px!important}
  .sc-card .etv-react-btn{padding-left:2px!important;padding-right:2px!important}
}


/* ========== ETV polish: light theme chrome must beat page-local dark styles ========== */
html[data-theme="light"] .etv-header{
  background:rgba(255,255,255,.92)!important;border-bottom-color:var(--line)!important;color:var(--text)
}
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.94)!important;border-bottom-color:var(--line)!important;color:var(--text)!important
}
html[data-theme="light"] .sidenav{
  background:linear-gradient(185deg,#f7f8fb 0%,#eef0f5 100%)!important;border-right-color:var(--line)!important
}
html[data-theme="light"] .mobdrawer{
  background:rgba(20,24,40,.32)!important
}
html[data-theme="light"] .mobdrawer .p{
  background:#f5f6fa!important;border-right-color:var(--line)!important;color:var(--text)
}
html[data-theme="light"] .mobdrawer .p a,
html[data-theme="light"] .sidenav a.nav,
html[data-theme="light"] .sidenav details.nav-group>summary.nav{
  color:var(--mut)!important;
  background:linear-gradient(165deg,#ffffff 0%,#f3f5f9 48%,#e9ecf3 100%)!important;
  border:1px solid rgba(15,18,28,.1)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,255,255,.6),0 2px 0 rgba(15,18,28,.08),0 4px 10px rgba(15,18,28,.06)!important
}
html[data-theme="light"] .mobdrawer .p a:hover,
html[data-theme="light"] .sidenav a.nav:hover,
html[data-theme="light"] .sidenav details.nav-group>summary.nav:hover{
  color:var(--text)!important;
  background:linear-gradient(165deg,#fff 0%,#f7f8fc 48%,#eef1f7 100%)!important;
  border-color:rgba(var(--a1-rgb),.35)!important
}
html[data-theme="light"] .mobdrawer .p a.on,
html[data-theme="light"] .mobdrawer .p a:active,
html[data-theme="light"] .sidenav a.nav.on,
html[data-theme="light"] .sidenav a.nav:active,
html[data-theme="light"] .sidenav details.nav-group>summary.nav.on,
html[data-theme="light"] .sidenav details.nav-group>summary.nav:active{
  color:#1a1d26!important;
  background:linear-gradient(180deg,#ffe8cc 0%,#ffd7a8 55%,#ffc98a 100%)!important;
  border-color:rgba(var(--a1-rgb),.45)!important
}
html[data-theme="light"] .theme-toggle{
  background:linear-gradient(165deg,#fff 0%,#f3f5f9 48%,#e9ecf3 100%)!important;
  border-color:rgba(15,18,28,.1)!important;color:var(--text)!important;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(15,18,28,.08),0 4px 10px rgba(15,18,28,.06)!important
}
html[data-theme="light"] .card,
html[data-theme="light"] .gi,
html[data-theme="light"] .lc,
html[data-theme="light"] .nov-card,
html[data-theme="light"] .empty{
  background:var(--card)!important;border-color:var(--line)!important;color:var(--text)!important
}
html[data-theme="light"] .btn{background:var(--card2);color:var(--text);border-color:var(--line2)}
html[data-theme="light"] .btn:hover{background:#e6e9f0!important;color:var(--text)!important}
html[data-theme="light"] .bar{background:rgba(15,18,28,.08)}
html[data-theme="light"] .sc-player .sc-bg::after{
  background:linear-gradient(105deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 48%,rgba(255,255,255,.88) 100%)!important
}
html[data-theme="light"] .sc-dock{
  background:rgba(255,255,255,.96)!important;border-top-color:var(--line)!important;color:var(--text)!important
}

/* Likes: compact 3D, icons only on narrow screens */
.etv-react{gap:6px;margin:8px 0 0}
.etv-react-btn{
  min-height:34px;padding:5px 9px;gap:5px;font-size:12.5px;
}
.etv-react-lab{font-size:12.5px}
.etv-react-ic{color:var(--a1)}
.etv-react-ic svg{stroke:currentColor;fill:none}
@media (max-width:860px){
  .etv-react-lab{display:none!important}
  .etv-react-btn{min-width:44px;padding:5px 8px}
}
/* Music mobile: force 3 columns even vs older page CSS */
@media (max-width:860px){
  .sc-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important
  }
}