*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--txt);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.topbar{position:sticky;top:0;z-index:50;display:flex;gap:var(--s-4);align-items:center;
padding:12px max(var(--pad),env(safe-area-inset-right)) 12px max(var(--pad),env(safe-area-inset-left));backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{letter-spacing:.3px;color:var(--accent)}
.brand span{color:var(--txt)}
.topbar .search{flex:1;max-width:560px}
.topbar input[type=search]{width:100%;padding:10px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
background:var(--bg2);color:var(--txt);outline:none;font-size:14px}
.topbar nav{display:flex;gap:var(--s-4);font-size:14px;color:var(--muted)}
.topbar nav a:hover{color:var(--txt)}
/* viewport-fit=cover пускает страницу под вырез: в ландшафте на iPhone левое и
правое поле должны быть не меньше системной safe-area, иначе текст уезжает
под чёлку. Снизу это уже учтено в .botnav. */
main{padding:22px max(var(--pad),env(safe-area-inset-right)) 60px max(var(--pad),env(safe-area-inset-left));max-width:1400px;margin:0 auto}
h2.rail-title{margin:var(--s-6) 0 var(--s-3)}
.rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:var(--s-2);scroll-snap-type:x proximity}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-4)}
.card{scroll-snap-align:start;flex:0 0 160px;width:160px;cursor:pointer;transition:transform .15s}
.grid .card{width:auto;flex:none}
.card:hover{transform:translateY(-4px)}
.poster{position:relative;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:var(--f-sm);padding:10px;text-align:center}
.badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:var(--f-xs);font-weight:700;padding:3px 7px;border-radius:6px}
/* height, а не max-height: у карточек с одно- и двухстрочным названием была
разная высота, и низ ленты «плясал». Место под две строки резервируем всегда. */
.card .t{margin-top:var(--s-2);font-size:var(--f-sm);font-weight:600;line-height:1.3;height:2.6em;overflow:hidden}
.card .y{color:var(--muted);font-size:12px;min-height:1.25em} /* подпись есть не у всех — держим строку всегда */
/* item page */
.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;min-height:340px;
display:flex;gap:26px;padding:26px;box-shadow:var(--shadow)}
.hero .backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;filter:blur(24px) brightness(.35);transform:scale(1.1)}
.hero .poster{position:relative;flex:0 0 220px;width:220px;z-index:2}
.hero .info{position:relative;z-index:2;flex:1;min-width:0}
.hero h1{margin:0 0 var(--s-2);font-size:26px}
.meta{color:var(--muted);font-size:14px;margin-bottom:var(--s-3);display:flex;gap:14px;flex-wrap:wrap}
.plot{color:var(--txt2);max-width:70ch;margin-bottom:var(--s-4)}
.btns{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-bottom:10px}
.btn{border:none;cursor:pointer;font-weight:700;font-size:var(--f-md);padding:12px 20px;border-radius:var(--r-md);background:var(--accent);color:var(--ink);transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--bg2);color:var(--txt);border:1px solid var(--line-strong)}
.btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--txt)}
select,.sel{background:var(--bg2);color:var(--txt);border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;font-size:14px}
.player{width:100%;background:#000;border-radius:var(--r-lg);overflow:hidden;margin:8px 0 20px;box-shadow:var(--shadow)}
.player video{width:100%;max-height:78vh;display:block;background:#000;aspect-ratio:16/9}
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.ep{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;background:var(--card)}
.ep .n{font-weight:700;min-width:44px}
.ep.watched{opacity:.55}
/* misc */
.chip{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;font-size:12px;color:var(--muted);margin:0 6px 6px 0}
.dl-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;background:var(--card)}
.dl-row .grow{flex:1;min-width:0}
.bar{height:7px;background:var(--bg2);border-radius:6px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;background:var(--accent);width:0}
.center{max-width:380px;margin:12vh auto;padding:30px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.center h1{color:var(--accent);margin:0 0 6px}
.center input{width:100%;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--bg2);color:var(--txt);margin:var(--s-2) 0;font-size:var(--f-md)}
.err{color:var(--accent);font-size:14px;margin:6px 0}
.muted{color:var(--muted)}
.notice{background:linear-gradient(90deg,rgba(255,107,94,.15),transparent);border:1px solid var(--accent);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:18px}
.loading{color:var(--muted);padding:40px;text-align:center}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--shadow);z-index:100}
.burger{display:none;background:var(--bg2);border:1px solid var(--line-strong);color:var(--txt);font-size:20px;border-radius:10px;min-width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-4)}
.chips .chip{cursor:pointer}
.chips .chip.act{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.skel{background:linear-gradient(90deg,var(--card),var(--bg2),var(--card));background-size:200% 100%;animation:sh 1.2s infinite;border-radius:10px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.chip.chipon{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.chip[onclick]{cursor:pointer}
.ctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ctab{background:var(--bg2);border:1px solid var(--line-strong);color:var(--muted);padding:8px 15px;border-radius:var(--r-pill);cursor:pointer;font-size:14px;font-weight:600}
.ctab.on{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.gchip{white-space:nowrap;background:var(--bg2);border:1px solid var(--line-strong);color:var(--txt);padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;font-size:var(--f-sm);transition:all .12s}
.frow{gap:7px;flex-wrap:wrap;margin-bottom:6px}
.fchip.on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.frow .sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.frow .sel{padding:7px 10px;font-size:var(--f-sm)}
.achip.on{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.linkbtn{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:var(--f-sm);padding:4px 6px}
.seeall{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);background:var(--bg2);border:1px solid var(--line-strong);color:var(--muted);font-size:var(--f-sm);font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.seeall:hover{border-color:var(--accent2);color:var(--txt);background:var(--card2)}
.seeall .arw{color:var(--accent2);transition:transform .15s}
.seeall:hover .arw{transform:translateX(3px)}
.seeall.sm{padding:4px 10px;font-size:12px}
.rail-title .seeall{margin-left:auto;flex:none}
/* mobile-overrides-end */
/* DS-v2 — design-system foundation (audit fixes) */
:root{
--bg:#08090d; --bg2:#101219; --card:#151823; --card2:#1b1f2c; --line:#242938;
--txt:#f2f4fa; --muted:#9aa3b8;
--accent:#ff6a5d; --accent-ink:#1a0d0b; --accent2:#7c93ff;
--ok:#4ade80; --warn:#ffd166;
/* Две линии вместо одной. --line (1.37:1 к фону) — разделители и рамки
контейнеров: им положено быть тихими. --line-strong (3.07:1) — рамки того,
что нажимают и во что печатают: чипы, кнопки, инпуты, селекты, тумблеры.
3:1 — ориентир контраста для нетекстовых элементов интерфейса; на тихой
рамке край кнопки на телефоне в светлой комнате просто не читался. */
--line-strong:#525d80;
--ink:#1a0f0d; --txt2:#cbd2e0;
--radius:14px; --radius-lg:18px;
/* Поле страницы. Одно число на main, шапку и вылет лент за край: раньше 20px
были захардкожены в пяти местах и расходились при правках. На телефоне
20+20 съедали ~9% ширины 430px-экрана — на узком экране это полкарточки. */
--pad:20px;
/* Шкалы. Аудит дизайна 25.07 насчитал в файле 20 разных радиусов, 35 размеров
шрифта и 24 отступа при 14 токенах палитры: система описана, но её обходят.
Ниже — целевая шкала: всё НОВОЕ берём отсюда, старое переезжает по мере
правок. Схлопывать разом не стал — часть чисел отличается на пиксель-два, и
слепая массовая замена сдвинула бы вёрстку там, где проверить её на всех
пяти раскладках нечем. */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
--f-xs:11px; --f-sm:13px; --f-md:15px; --f-lg:18px; --f-xl:24px;
/* Лестница слоёв. Раньше в файле было 19 разных z-index от -1 до 1200,
розданных по месту; здесь названы те, что реально образуют этажи, с
зазорами — чтобы новый слой было куда вставить, не сдвигая соседей.
Модалка сознательно ВЫШЕ титров: диалог — передний план, титры — фон.
Раньше было наоборот (120 против 210), и открытая поверх титров модалка
ушла бы под них. */
--z-pop:60; --z-nav:60; --z-credits:210; --z-modal:220;
--z-overlay:500; --z-saver:1000; --z-picker:1200;
--shadow:0 12px 36px rgba(0,0,0,.52); --shadow-sm:0 4px 16px rgba(0,0,0,.42);
--ring:0 0 0 3px rgba(124,147,255,.55);
}
/* На телефоне поле режем: 20px на десктопе — воздух, на 390-430px — потеря
~9% ширины. 12px хватает, чтобы текст не лип к кромке, а карточка получает
16-20px реальной ширины. Ленты и шапка едут за --pad автоматически. */
@media(max-width:640px){:root{--pad:12px}}
@media(max-width:360px){:root{--pad:10px}}
body{background:
radial-gradient(1100px 540px at 84% -12%, rgba(255,106,93,.10), transparent 60%),
radial-gradient(780px 520px at -8% -6%, rgba(124,147,255,.07), transparent 55%),
var(--bg);background-attachment:fixed}
.topbar{background:rgba(8,9,13,.82)}
.card .poster{box-shadow:var(--shadow-sm)}
.card:hover .poster{box-shadow:0 16px 44px rgba(0,0,0,.62)}
.hero{background:linear-gradient(180deg,var(--card2),var(--card))}
.gchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.gchip:hover{border-color:var(--accent)}
.ep:hover{border-color:var(--accent)}
.ep .n{color:var(--accent)}
.topbar input[type=search]:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,147,255,.18)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}
.topbar nav a.active{color:var(--accent);font-weight:700}
.ctab,.gchip,.fchip,.chip,.achip{min-height:34px;display:inline-flex;align-items:center}
/* DS-v2 icons */
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:none}
.btn{display:inline-flex;align-items:center;gap:var(--s-2);justify-content:center}
.btn .ic{width:1.15em;height:1.15em;vertical-align:-.18em}
.rail-title{display:flex;align-items:center;gap:var(--s-2)}
.rail-title .ic{width:20px;height:20px;color:var(--accent);flex:none}
.trackbar label .ic{color:var(--accent2)}
.brand{display:inline-flex;align-items:center}
.brand-ic{width:22px;height:22px;color:var(--accent);margin-right:6px;flex:none}
.burger .ic{width:22px;height:22px}
/* DS-v2 placeholder + spotlight */
.poster .ph{flex-direction:column;gap:var(--s-2);background:linear-gradient(160deg,var(--card2),#0f1220)}
.poster .ph svg{width:34px;height:34px;color:rgba(154,163,184,.45)}
.poster .ph span{font-size:12px;line-height:1.3;max-height:3.6em;overflow:hidden}
.spot{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(300px,40vh,430px);margin:var(--s-1) 0 var(--s-3);cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:flex-end}
.spot-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transform:scale(1.03)}
.spot-bg::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(8,9,13,.94),rgba(8,9,13,.55) 46%,rgba(8,9,13,.1) 82%),linear-gradient(0deg,rgba(8,9,13,.85),transparent 55%)}
.spot-in{position:relative;z-index:2;padding:30px;max-width:640px}
.spot-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-2)}
.spot-title{margin:0 0 var(--s-2);line-height:1.04}
.spot-meta{color:var(--txt2);font-size:14px;margin-bottom:18px}
/* Подсветка кадром — то же, что Ambilight у телевизора. Карточка остаётся
карточкой: те же скругления, та же раскладка. Меняется то, что вокруг — за
ней лежит её же кадр, растянутый и размытый, и светит наружу. Рамка никуда
не делась, но перестала быть краем: свет уходит из-под неё на страницу и
гаснет сам, а ленты внизу оказываются внутри этого света.
Тень у .spot при этом снимаем: она была имитацией ровно того, что теперь
происходит по-настоящему, и вдвоём они спорят.
Живёт на #herohost, а не внутри .spot, по двум причинам: у .spot стоит
overflow:hidden и он обрезал бы свечение, и потому что содержимое хоста
подменяется целиком (герой -> пульт «играет на телевизоре»), а подсветка
должна пережить подмену. */
#herohost{position:relative}
#herohost>*{position:relative;z-index:1}
#herohost.hasaura::before{content:"";position:absolute;left:-8%;right:-8%;top:-12%;bottom:-30%;
z-index:0;pointer-events:none;background-image:var(--aura);background-size:cover;
background-position:center;filter:blur(44px) saturate(2.2) brightness(1.15);opacity:.82;
-webkit-mask-image:radial-gradient(72% 66% at 50% 52%,#000 26%,rgba(0,0,0,.35) 60%,transparent 84%);
mask-image:radial-gradient(72% 66% at 50% 52%,#000 26%,rgba(0,0,0,.35) 60%,transparent 84%);
animation:auraBreath 26s ease-in-out infinite alternate}
@keyframes auraBreath{ from{transform:scale(1);opacity:.74}
to{transform:scale(1.05) translate3d(0,-1%,0);opacity:.9} }
#herohost.hasaura .spot{box-shadow:none}
/* DS-v2 empty states */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;text-align:center}
.empty svg{width:46px;height:46px;color:var(--line)}
.empty-t{font-size:17px;font-weight:600;color:var(--txt)}
/* DS-v2 next-episode card */
.nextep{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);margin:0 0 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:border-color .15s}
.nextep:hover{border-color:var(--accent)}
.nextep svg{width:26px;height:26px;color:var(--accent);flex:none}
.nextep-in{display:flex;flex-direction:column;line-height:1.35}
.nextep-in .muted{font-size:12px}
.nextep-in b{font-size:14px}
/* DS-v2 password toggle */
.pw-wrap{position:relative;margin:var(--s-2) 0}
.pw-wrap input{margin:0!important;width:100%;padding-right:46px}
.pw-toggle{position:absolute;right:8px;top:0;bottom:0;margin:auto 0;height:28px;width:28px;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pw-toggle.on{color:var(--accent)}
.pw-toggle .ic{width:20px;height:20px}
/* DS-v2 mobile bottom tab bar */
.botnav{display:none}
/* DS-v2 airplay hint + next-episode pill */
.airhint{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(124,147,255,.16),transparent);border:1px solid var(--accent2);border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;font-size:14px}
.airhint svg{width:24px;height:24px;color:var(--accent2);flex:none}
.airhint b{color:var(--txt)}
.airhint-x{margin-left:auto;background:var(--accent2);color:#0b0d12;border:none;border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;font-weight:600;font-size:var(--f-sm);flex:none}
.player{position:relative}
.nextpill{position:absolute;right:14px;bottom:70px;background:rgba(8,9,13,.86);border:1px solid var(--line);color:var(--txt);padding:9px 15px;border-radius:var(--r-pill);cursor:pointer;font-size:var(--f-sm);font-weight:600;display:flex;align-items:center;gap:6px;z-index:5;backdrop-filter:blur(6px)}
.nextpill svg{width:16px;height:16px;color:var(--accent)}
/* DS-v2 catalog progressive disclosure */
.morefilters.on{border-color:var(--accent2);background:rgba(108,140,255,.14)}
/* DS-v2 surprise / random */
/* DS-v2 downloads: richer state */
.cachebar{margin-bottom:var(--s-4)}
.cachebar-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-2);font-size:14px}
.cachebar-top b{color:var(--txt)}
.dl-head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:5px}
.dlq{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.dlchip{font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:2px 10px}
.dlchip.on{background:rgba(255,107,94,.16);color:var(--accent)}
.dlchip.done{background:rgba(63,191,127,.16);color:#5fd39b}
.dlchip.stop{background:rgba(255,90,90,.18);color:#ff8080}
.dl-meta{font-size:var(--f-sm);margin-bottom:var(--s-2)}
.dl-actions{display:flex;gap:var(--s-2);align-items:flex-start;flex:none}
.bar.stop i{background:#ff7a6b}
.bar.indet>i{width:38%;background:var(--accent);animation:indet 1.15s ease-in-out infinite}
@keyframes indet{0%{margin-left:-38%}100%{margin-left:100%}}
/* DS-v2 player error overlay */
.playerr{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(8,9,13,.93);color:var(--txt);text-align:center;padding:var(--s-5);z-index:6}
.playerr svg{width:38px;height:38px;color:var(--muted)}
.playerr .btn{margin-top:var(--s-1)}
/* DS-v2 proactive warning banner */
.warnbar{display:flex;align-items:center;gap:10px;background:rgba(255,90,90,.14);border:1px solid #ff8080;color:#ffb3b3;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:14px}
.warnbar svg{width:20px;height:20px;color:#ff8080;flex:none}
/* DS-v2 usability: quick browse + clickable genres + plot clamp + compact quality + mobile search */
.chip.gchip-link{cursor:pointer}
.chip.gchip-link:hover{border-color:var(--accent2)}
.sel.qsel{max-width:120px}
/* DS-v2 rating badge on cards */
.rbadge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:3px;background:rgba(8,9,13,.82);font-size:12px;font-weight:700;padding:3px 7px;border-radius:var(--r-sm);z-index:2;line-height:1;backdrop-filter:blur(4px)}
.rbadge.g{color:#6ee7a8}
.rbadge.m{color:#ffd24d}
.rbadge.l{color:#9aa3b5}
/* dual rating badges: КП + IMDb stacked top-left; quality moved top-right */
.rstack{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:var(--s-1);z-index:2;align-items:flex-start}
.rstack .rbadge{position:static}
.rbadge i{font-style:normal;font-weight:600;font-size:9px;color:#9aa3b5;letter-spacing:.3px;margin-left:var(--s-1)}
/* home v2: hero progress, new-episode rows, mood picker, showcase tabs */
.hero2-prog{height:4px;background:rgba(255,255,255,.18);border-radius:2px;max-width:420px;margin:2px 0 6px}
.hero2-prog i{display:block;height:4px;background:var(--accent);border-radius:2px}
.hero2-left{font-size:12px;color:var(--txt2);margin-bottom:14px}
.cardprog{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);z-index:2}
.nep-t .muted{font-size:12px}
.moodbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:var(--s-5)}
.moodchips{margin-bottom:var(--s-1)}
.mood3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:10px}
.mood3 .card{width:auto}
.mood-more{margin-top:var(--s-3);font-size:var(--f-sm);text-align:center}
.showhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 var(--s-3);flex-wrap:wrap}
.showhead .ctabs{margin:0}
/* «Я смотрю»: счётчик в навигации + бейдж новых серий на карточках */
.navcnt{display:inline-block;margin-left:6px;background:var(--accent);color:#0b0d12;font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-pill);vertical-align:1px}
.botnav a{position:relative}
.botnav a .navcnt{position:absolute;top:1px;left:calc(50% + 2px);margin:0}
.nbadge{position:absolute;right:8px;bottom:8px;background:var(--accent);color:#0b0d12;font-size:var(--f-xs);font-weight:700;padding:2px 7px;border-radius:var(--r-sm);z-index:2}
/* пинч над плеером не должен зумить страницу (Android/Chrome); iOS ловим gesture-события в JS */
.player{touch-action:pan-y}
/* страница просмотра v2: секция серий + селектор озвучки */
.eps2{display:flex;flex-direction:column;margin-top:10px}
.ep2{display:flex;gap:var(--s-3);align-items:center;padding:10px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.ep2 .n{font-weight:700;color:var(--accent);min-width:28px;text-align:right;flex:none}
.ep2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ep2.done .ep2-t>span{opacity:.6}
.ep2.playing{border-left:2px solid var(--accent);background:rgba(255,107,94,.06);border-radius:0 var(--r-sm) var(--r-sm) 0}
.epbar{height:3px;background:var(--line);border-radius:2px;max-width:220px}
.epbar i{display:block;height:3px;background:var(--accent);border-radius:2px}
.epmeta{font-size:12px;flex:none}
.epnow{color:var(--accent);font-size:12px;font-weight:600;flex:none}
.epdl{background:none;border:1px solid var(--line-strong);color:var(--muted);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;flex:none;display:inline-flex}
.epdl:hover{color:var(--accent);border-color:var(--accent)}
#voicesel{max-width:230px}
/* панель параметров просмотра: единый стиль с ghost-кнопками */
.opts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s-3)}
.opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 6px 0 12px;background:transparent}
.opt .ic{color:var(--accent2);flex:none;width:16px;height:16px}
.opt select{border:none;background:transparent;padding:12px 6px;font-size:14px;color:var(--txt);max-width:230px}
/* Кольцо фокуса гасилось целиком — с клавиатуры и с пульта не было видно, на
каком селекте стоишь. Кольцо не убираем, а переносим на рамку .opt: вокруг
самого select оно рисовалось поверх бордера обёртки и мылило углы. */
.opt select:focus-visible{outline:none}
.opt:has(select:focus-visible){box-shadow:var(--ring);border-color:var(--accent2)}
@supports not selector(:has(*)){
.opt select:focus-visible{box-shadow:inset 0 0 0 2px var(--accent2);border-radius:8px}
}
/* UX-аудит 2026-07-10: мобильное меню-бургер не дублирует нижние табы */
/* кинозал /watch */
.wtop{display:grid;grid-template-columns:auto 1fr;gap:14px;margin:10px 0 12px;align-items:center}
.wtitle{font-size:var(--f-xl);margin:0;line-height:1.2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtitle .muted{font-size:var(--f-md);font-weight:400}
.epsum{margin:var(--s-1) 0 0;font-size:var(--f-sm)}
/* UX-итерация 2: кнопка «О сериале» + логические блоки на /item */
.backbtn{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line-strong);color:var(--txt);border-radius:10px;padding:8px 14px;font-size:var(--f-sm);font-weight:600;transition:border-color .15s}
.backbtn:hover{border-color:var(--accent)}
.iblock{border-top:1px solid var(--line);margin-top:var(--s-4);padding-top:14px}
.ilab{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:var(--s-2)}
.ifact .chip{margin-bottom:0}
.ifchips{display:flex;flex-wrap:wrap;gap:6px}
.ifchips .chip{margin:0}
.info .plot{margin:0}
.info .btns{margin-bottom:0}
.info .epsum{margin-top:10px}
/* UX-итерация 3: включённые тумблеры зелёные с галкой */
.btn.tgl.on{border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.10);color:var(--ok)}
.btn.tgl.on:hover{filter:none;border-color:var(--ok);background:rgba(74,222,128,.16)}
/* UX-итерация 4: тумблер «просмотрено» у серии */
.epwbtn{background:none;border:1px solid var(--line-strong);color:var(--muted);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;flex:none;display:inline-flex}
.epwbtn:hover{color:var(--ok);border-color:var(--ok)}
.epwbtn.on{color:var(--ok);border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.10)}
/* умный CDN: статус в настройках */
.cdnbox{margin:14px 0 4px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;max-width:720px;line-height:1.5}
.cdnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:9px}
.cdnloc{border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--f-sm);color:var(--muted)}
.cdnloc.on{border-color:rgba(74,222,128,.55);color:var(--ok);background:rgba(74,222,128,.08)}
.cdnbtn{padding:7px 12px;font-size:var(--f-sm);min-height:0}
/* прокачка карточки: рейтинги-ссылки, статус сериала, трейлеры, в ролях */
.castp{margin:0;color:var(--txt2);font-size:14px}
.castp.muted{color:var(--muted);margin-top:var(--s-1);font-size:var(--f-sm)}
.tmodal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);background:rgba(4,5,8,.88);display:flex;align-items:center;justify-content:center;padding:var(--s-5);backdrop-filter:blur(6px)}
.tmodal-in{position:relative;width:min(1100px,96vw)}
.tmodal-in video{width:100%;max-height:82vh;background:#000;border-radius:var(--radius);display:block}
.tmodal-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--txt);font-size:var(--f-md);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tmodal-x:hover{border-color:var(--accent);color:var(--accent)}
.trerr{text-align:center;padding:10px}
/* превью серий, страна-ссылка, список озвучек */
.epthumb{width:92px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;flex:none;background:var(--card2)}
.epthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mlink{color:inherit}
.mlink:hover{color:var(--txt);text-decoration:underline}
/* актёры с фото (kinopoisk.dev) */
.prow{display:flex;padding:2px 0 8px}
.prow::-webkit-scrollbar{height:6px}
.prow::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.pcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;scroll-snap-align:start}
.pcard img,.pcard-ph{background:var(--card2);border:1px solid var(--line)}
.pcard-ph{align-items:center;justify-content:center;color:var(--muted)}
.pcard-ph svg{width:22px;height:22px}
.pcard b{font-weight:600;line-height:1.25;max-height:2.5em;overflow:hidden}
.pcard span{font-size:var(--f-xs);color:var(--muted);line-height:1.2;max-height:2.4em;overflow:hidden}
/* страница персоны */
.phead{display:flex;gap:20px;align-items:center;margin:10px 0 20px}
.pphoto{width:110px;height:110px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.phead h1{margin:0;font-size:26px}
a.pcard{color:inherit}
a.pcard:hover img,a.pcard:hover .pcard-ph{border-color:var(--accent)}
/* съёмочная группа кликабельна */
.plink{color:inherit;border-bottom:1px dotted rgba(154,163,184,.5)}
.plink:hover{color:var(--txt);border-bottom-style:solid}
/* редизайн карточки: hero с широким кадром + полноширинные блоки */
.hero3{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:2px 0 16px;box-shadow:var(--shadow);background:var(--card)}
.hero3-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center 22%;transition:background-image .3s}
.hero3-bg::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(8,9,13,.94),rgba(8,9,13,.78) 42%,rgba(8,9,13,.38) 78%,rgba(8,9,13,.25)),linear-gradient(0deg,rgba(8,9,13,.86),transparent 50%)}
.hero3-in{position:relative;z-index:2;display:flex;gap:26px;padding:26px 28px}
.hero3 .poster{position:relative;flex:0 0 190px;width:190px}
.hero3 .info{flex:1;min-width:0}
.hero3 h1{margin:0 0 6px;font-size:27px;line-height:1.15;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero3 .meta{margin-bottom:14px}
.hero3 .btns{margin-bottom:var(--s-3)}
.hero3 .plot{margin:var(--s-3) 0 0;max-width:75ch}
.iblock2{margin:0 0 14px;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.iblock2 .prow{padding-bottom:var(--s-1)}
/* факты v3: спецификация в две смысловые колонки, лейбл и значение на одной строке */
.facts3{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.frow{display:flex;align-items:flex-start;padding:var(--s-2) 0}
.flab{flex:0 0 122px;color:var(--muted);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding-top:var(--s-1);white-space:nowrap}
.fval{flex:1;font-size:14px;line-height:1.55;color:var(--txt2);min-width:0}
.fval.ifchips{display:flex;flex-wrap:wrap;margin:-2px 0}
.fval .mlink{color:inherit}
.tvmode .facts3{gap:0 34px}
.f13{font-size:var(--f-sm);line-height:1.5}
/* актёры переносятся на новые строки — без горизонтального скролла */
.prow{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;gap:var(--s-4) var(--s-3)}
/* актёры: полноценные портреты 2:3 вместо аватарок */
.pcard{flex:0 0 108px}
.pcard img,.pcard-ph{width:108px;height:162px;border-radius:10px;object-fit:cover;object-position:center top}
.pcard-ph{display:flex}
.pcard b{font-size:12.5px}
/* заглушка «играет на телевизоре» на месте плеера */
.tvpark{text-align:center;padding:34px 20px}
.tvpark p{font-size:17px;margin:0 0 var(--s-4);display:flex;align-items:center;justify-content:center;gap:var(--s-2)}
.tvpark .btns{justify-content:center}
/* ссылка «все» в заголовке ряда */
/* railmore -> .seeall */
.epsallwrap{display:flex;justify-content:center;align-items:center;margin:14px 0 4px}
.epsstat{color:var(--muted);font-size:13.5px;margin-right:var(--s-4)}
.sprog{height:5px;border-radius:var(--r-pill);background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.sprog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ff8d7a);border-radius:var(--r-pill);transition:width .4s ease}
.sprog.seasonline{margin:2px 0 14px}
.serprog{display:flex;align-items:center;margin-top:var(--s-3);max-width:520px}
.serprog .sprog{flex:1;margin-right:var(--s-3)}
.serprog span{color:var(--muted);font-size:var(--f-sm);white-space:nowrap}
.epsall{color:var(--muted)}
/* был var(--text) — такого токена нет, ховер молча не срабатывал */
.epsall:hover{color:var(--txt)}
.tvmode .epsallwrap{justify-content:flex-start}
/* ---------- catalog v2: полки ---------- */
.cv2-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:2px 0 4px}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:var(--s-1);gap:2px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:700;padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;min-height:0}
.seg button.on{background:var(--accent);color:var(--ink)}
.seg button.more{font-weight:500}
.seg button.more.on{background:var(--accent2);color:#0b0d12}
.seg.mini button{padding:7px 14px;font-size:var(--f-sm);font-weight:600}
.morewrap{position:relative;display:inline-flex}
.morepop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-pop);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow);padding:6px;min-width:170px}
.morepop.open{display:block}
.morepop-i{padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;white-space:nowrap}
.morepop-i:hover{background:var(--bg2)}
.morepop-i.on{color:var(--accent2);font-weight:700}
.gtiles{display:flex;gap:10px;overflow-x:auto;padding:12px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gtiles::-webkit-scrollbar{display:none}
.gtiles.wrap{flex-wrap:wrap;overflow:visible}
.gtile{flex:0 0 auto;padding:13px 18px;border-radius:var(--r-md);cursor:pointer;font-weight:700;font-size:14px;color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);transition:filter .12s,transform .12s;min-height:0}
.gtile:hover{filter:brightness(1.18);transform:translateY(-1px)}
.gtile.gdice{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line-strong);color:var(--txt)}
.gtile.gdice .ic{width:15px;height:15px;margin-right:var(--s-2)}
.gtile.gdice:hover{border-color:var(--accent2);filter:none;transform:translateY(-1px)}
.gtile.gdice.rolling{opacity:.55}
.gtile.gtall{background:var(--bg2);border-color:var(--line);color:var(--muted);text-shadow:none;font-weight:600}
.gtile.skel{color:transparent}
.shelf-h{display:flex;align-items:baseline;gap:10px;margin:var(--s-5) 0 var(--s-3);min-width:0}
.shelf-h h2.rail-title{margin:0;white-space:nowrap}
.shelf-h .why{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-h .shmore{margin-left:auto;font-size:var(--f-sm);color:var(--accent2);white-space:nowrap}
.shelf-h .shmore:hover{text-decoration:underline}
.railerr{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:20px 4px}
.alllink{margin:30px 0 14px;text-align:center}
.cv2-back{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--bg2);border:1px solid var(--line-strong);color:var(--txt);
border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);cursor:pointer;font:inherit;font-size:14px;margin-bottom:var(--s-3)}
.cv2-back:hover{border-color:var(--accent2)}
.cv2-title{font-size:var(--f-xl);line-height:1.2;margin:0 0 2px}
.cv2-sub{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.cv2-tools{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-2)}
.tool{background:var(--bg2);border:1px solid var(--line-strong);color:var(--muted);padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:var(--f-sm);white-space:nowrap;min-height:34px;display:inline-flex;align-items:center}
.tool:hover{border-color:var(--accent2)}
.tool.on{background:var(--accent2);border-color:var(--accent2);color:#0b0d12;font-weight:600}
/* жанровые чипы «Уточнить» — приглушённые двери витрины (тот же hueFor);
выбранный — дверь в полную яркость, а не красный accent (цвет жанра = смысл) */
.tool.gchip{background:linear-gradient(150deg,hsl(var(--gh),30%,22%),hsl(var(--gh),34%,12%));border-color:rgba(255,255,255,.07);color:#ded9ec;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:filter .12s,transform .12s,border-color .12s}
.tool.gchip:hover{border-color:rgba(255,255,255,.25);filter:brightness(1.2);transform:translateY(-1px)}
.tool.gchip.on{background:linear-gradient(150deg,hsl(var(--gh),52%,36%),hsl(var(--gh),58%,18%));border-color:rgba(255,255,255,.45);color:#fff;font-weight:700}
.cv2-refine{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:4px 0 10px}
.cv2-lab{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-right:2px}
.vsep{width:1px;height:22px;background:var(--line);margin:0 6px;flex:0 0 auto}
#cv2grid{margin-top:14px}
/* ленты: скроллбар скрыт, листается свайпом/трекпадом/драгом мыши;
о продолжении говорят полукарточка у края (peek) и фейд */
.rail{scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none;height:0}
.gtiles.wrap{cursor:default}
.rail.dragging,.gtiles.dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.railwrap,.gtwrap{position:relative}
.railfade{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;opacity:0;transition:opacity .18s;z-index:2}
.railfade.r{right:0;background:linear-gradient(to left,var(--bg),rgba(11,13,18,0))}
.railfade.l{left:0;background:linear-gradient(to right,var(--bg),rgba(11,13,18,0))}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.railfade{background:rgba(11,13,18,.22);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.railfade.r{-webkit-mask-image:linear-gradient(to right,transparent,#000 72%);mask-image:linear-gradient(to right,transparent,#000 72%)}
.railfade.l{-webkit-mask-image:linear-gradient(to left,transparent,#000 72%);mask-image:linear-gradient(to left,transparent,#000 72%)}
}
.railfade.show{opacity:1}
.rail.peek .card{flex:0 0 var(--cw,160px);width:var(--cw,160px)}
/* десктоп: вторичные типы видны сразу тихим рядом, «Ещё» — только мобильный компромисс */
.typerow{display:flex;gap:var(--s-1);flex-wrap:wrap;align-items:center}
.ttab{background:transparent;border:1px solid transparent;color:var(--muted);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:13.5px;white-space:nowrap}
.ttab:hover{color:var(--txt);border-color:var(--line)}
.ttab.on{background:var(--accent2);border-color:var(--accent2);color:#0b0d12;font-weight:600}
@media(min-width:641px){.morewrap{display:none}}
/* ленты во всю ширину экрана: контент стартует с обычного отступа,
скролл-полоса уходит под кромку; левый фейд убран (мылил первый элемент) */
.railwrap,.gtwrap.bleed{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
.railwrap .rail{padding-left:var(--pad);padding-right:var(--pad);scroll-padding-left:var(--pad)}
.gtwrap.bleed .gtiles{padding-left:var(--pad);padding-right:var(--pad);scroll-padding-left:var(--pad)}
.railfade.l{display:none}
/* заголовок полки = ссылка в полку (шеврон вместо «вся полка») */
.sh-link{display:inline-flex;align-items:baseline;gap:7px;min-width:0;padding:9px 10px 9px 0;margin:-9px -10px -9px 0}
.sh-chev{color:var(--muted);font-size:20px;line-height:1;font-weight:700;transition:transform .15s,color .15s}
.sh-link:hover .sh-chev{color:var(--accent2);transform:translateX(3px)}
/* каст: один ряд, хвост за блюр-карточкой «показать всех» */
.pmore{cursor:pointer}
.pmore-w{position:relative;display:block;border-radius:10px;overflow:hidden}
.pmore-w img,.pmore-w .pcard-ph{filter:blur(9px) brightness(.5);transform:scale(1.06)}
.pmore-ol{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff}
.pmore-ol em{font-style:normal;font-weight:800;font-size:19px}
.pmore-ol u{text-decoration:none;font-size:var(--f-xs);color:rgba(255,255,255,.78)}
.pmore:hover .pmore-ol em{color:var(--accent)}
/* «и ещё N» в фактах — кликабельное раскрытие */
.morelink{background:none;border:0;padding:0;color:var(--accent2);cursor:pointer;font:inherit;font-size:inherit}
.morelink:hover{text-decoration:underline}
.dicebtn .ic{width:17px;height:17px}
.tool .ic{width:15px;height:15px}
/* жанры: без скролла вовсе — одна строка + «Все жанры (N)» в конце, раскрытие на месте */
.gtiles{flex-wrap:wrap;overflow:visible;cursor:default;padding-left:0;padding-right:0}
/* ---------- ТВ-раздел (каналы: Пятница и др.) ----------
Обложки выпусков у телеканалов горизонтальные (16:9), а не 2:3 как постеры
фильмов, поэтому у ТВ своя сетка, а не .grid/.card. */
.tvhead{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin:4px 0 18px}
.tvhead h1{margin:0;font-size:var(--f-xl)}
.tvrefresh{margin-left:auto;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
background:var(--bg2);color:var(--muted);cursor:pointer;font-size:var(--f-sm)}
.tvrefresh:hover{color:var(--txt);border-color:var(--accent2)}
.tvsec{margin:0 0 30px}
.tvsec h2{display:flex;align-items:center;gap:var(--s-2);font-size:var(--f-lg);margin:0 0 var(--s-3)}
.tvsec h2 .ic{width:18px;height:18px;color:var(--accent)}
.tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-4)}
.tvcard{display:block;cursor:pointer;transition:transform .15s}
.tvcard:hover{transform:translateY(-4px)}
.tvcard-img{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
background:var(--card);box-shadow:var(--shadow)}
.tvcard-img img{width:100%;height:100%;object-fit:cover}
.tvcard-t{margin-top:var(--s-2);font-size:14px;font-weight:600;line-height:1.3;
max-height:2.6em;overflow:hidden}
.tvcard-s{font-size:12px;margin-top:2px;max-height:1.4em;overflow:hidden}
.tvbar{left:0;right:0;bottom:0;background:rgba(0,0,0,.55)}
.tvbar i{display:block;background:var(--accent)}
.tvdone{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;
border-radius:50%;background:rgba(11,13,18,.8);color:#5ad18b}
.tvdone .ic{width:16px;height:16px}
.tvtabs{display:flex;gap:var(--s-2);overflow-x:auto;margin:0 0 var(--s-4);padding-bottom:var(--s-1)}
.tvtab{flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
background:var(--bg2);color:var(--muted);cursor:pointer;font-size:var(--f-sm)}
.tvtab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tvsrc{font-size:12px;margin-top:14px}
.tvsrc a{color:var(--accent2);text-decoration:underline}
/* Выпуск, которого канал не выложил: видно, что он есть, но кликать некуда. */
.tvcard._off{cursor:default;opacity:.45}
.tvcard._off:hover{transform:none}
.tvna{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
padding:4px 10px;border-radius:var(--r-pill);background:rgba(11,13,18,.85);
font-size:12px;color:var(--muted);white-space:nowrap}
/* ==================== TV MODE ==================== */
.tvmode .tvfocus{ outline:3px solid var(--accent) !important; outline-offset:3px; border-radius:var(--r-md); position:relative; z-index:6; }
.tvmode .botnav{ display:none !important; }
.tvmode ::-webkit-scrollbar{ display:none; }
.tvmode .airhint{ display:none !important; }
/* Устройства (сессии) */
.sessrow{ display:flex; align-items:center; gap:var(--s-3); padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); margin-top:var(--s-2); }
.sessrow.cur{ border-color:rgba(255,106,93,.45); }
.sess-i{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.sess-cur{ color:var(--accent); font-size:12px; margin-left:var(--s-2); }
/* ===== TV MODE v2: 10-foot (вьюпорт ТВ всегда 960x540 css) ===== */
.tvmode body{ font-size:17px; }
.tvmode .topbar{ padding-left:4vw; padding-right:4vw; }
.tvmode h1{ font-size:1.85em; }
.tvmode .rail-title{ font-size:1.3em; }
.tvmode .card .t{ font-size:14.5px; }
.tvmode .card .y{ font-size:12.5px; }
.tvmode .btn{ font-size:1.05em; padding:12px 20px; }
.tvmode .chip{ font-size:1.02em; padding:9px 16px; }
.tvmode .rail{ scroll-padding-left:4vw; padding-top:6px; padding-bottom:10px;
/* Ряды идут ОТ КРАЯ ДО КРАЯ. main держит безопасное поле 4vw для текста, а лента
вылезает из него отрицательными полями и возвращает отступ себе внутрь: первая
карточка остаётся ровно под заголовком, а дальние уезжают под край экрана
(паттерн Netflix/YouTube на ТВ). Раньше лента обрезалась по полю main — по бокам
стояли чёрные полосы, и карточка резалась за 4vw до края.
padding-right НЕ ставим: старый Chromium теряет его в flex-скроллере — хвост
ленты даёт последняя карточка (правило ниже). */
margin-left:-4vw; margin-right:-4vw; padding-left:4vw; }
.tvmode .rail>*:last-child{ margin-right:4vw; }
/* Десктопный main{max-width:1400px} на ТВ сейчас не мешает (вьюпорт 960), но если
панель когда-нибудь отдаст css-вьюпорт шире 1400 — он молча съест четверть
ширины. Снимаем явно. */
.tvmode main{ max-width:none; }
/* .warnbar на ТВ больше не прячем — см. блок «АУДИТ ГЛАВНОЙ» в конце файла */
/* ===== TV MODE v3: старые WebView (Chromium<84, POLARLINE и её друзья) не знают
flex gap — на ТВ дублируем margin'ами (gap:0 → вид одинаков на любом движке). ===== */
/* Шапка: бренд+поиск первой строкой, навигация — вторym рядом на всю ширину */
.tvmode .topbar{gap:0;row-gap:0}
.tvmode .topbar .brand{margin-right:18px}
.tvmode .topbar .search{margin-right:0}
.tvmode .burger{display:none !important}
.tvmode .topbar nav{margin-top:var(--s-2);gap:0}
.tvmode .topbar nav a.active,.tvmode .topbar nav a:hover{color:var(--txt)}
.tvmode .navbadge{margin-left:6px}
/* Мета карточки: «2023 США 3 сезона…» — отступы margin'ами, бейдж в потоке */
.tvmode .meta{gap:0}
.tvmode .meta>*{margin:0 12px 6px 0}
/* Кнопки действий и чипы */
.tvmode .btns{gap:0}
.tvmode .btns>*{margin:0 10px 10px 0}
.tvmode .chips{gap:0}
.tvmode .chips>*{margin:0 var(--s-2) var(--s-2) 0}
.tvmode .ctabs{gap:0}
.tvmode .ctabs>*{margin:0 var(--s-2) var(--s-2) 0}
.tvmode .typerow{gap:0}
.tvmode .typerow>*{margin:0 var(--s-2) 0 0}
.tvmode .gtiles{gap:0}
.tvmode .gtiles>*{margin:0 10px 10px 0}
/* Ленты и сетки */
.tvmode .rail{gap:0}
.tvmode .rail>*{margin-right:14px}
.tvmode .hero3-in{gap:0}
.tvmode .hero3-in>*{margin-right:var(--s-5)}
.tvmode .hero3-in>*:last-child{margin-right:0}
/* Серии */
.tvmode .eps2{gap:0}
.tvmode .eps2>*{margin-bottom:var(--s-2)}
.tvmode .ep2{gap:0}
.tvmode .ep2>*{margin-right:10px}
.tvmode .ep2-t{gap:0}
.tvmode .ep2-t>*{margin-right:var(--s-2)}
/* Плеер: селекторы и следующая серия */
.tvmode .opts{gap:0}
.tvmode .opts>*{margin:0 10px 10px 0}
.tvmode .opt{gap:0}
.tvmode .opt>*{margin-right:var(--s-2)}
.tvmode .nextep{gap:0}
.tvmode .nextep>*{margin-right:10px}
/* Каталог: голова и уточнение */
.tvmode .cv2-head{gap:0}
.tvmode .cv2-head>*{margin-bottom:var(--s-2)}
.tvmode .cv2-tools{gap:0}
.tvmode .cv2-tools>*{margin:0 var(--s-2) var(--s-2) 0}
.tvmode .cv2-refine{gap:0}
.tvmode .cv2-refine>*{margin:0 var(--s-2) var(--s-2) 0}
/* Настройки, загрузки, устройства, факты */
.tvmode .ifacts{gap:0}
.tvmode .ifacts>*{margin:0 var(--s-3) var(--s-2) 0}
.tvmode .dl-row{gap:0}
.tvmode .dl-row>*{margin-right:10px}
.tvmode .dl-head{gap:0}
.tvmode .dl-head>*{margin-right:10px}
.tvmode .cdnrow{gap:0}
.tvmode .cdnrow>*{margin-right:10px}
.tvmode .sessrow{gap:0}
.tvmode .sessrow>*{margin-right:var(--s-3)}
.tvmode .frow{gap:0}
.tvmode .frow>*{margin-right:var(--s-2)}
.tvmode .filters{gap:0}
.tvmode .filters>*{margin:0 var(--s-2) var(--s-2) 0}
.tvmode .empty{gap:0}
.tvmode .empty>*{margin-bottom:var(--s-2)}
/* ===== TV LITE: слабое железо — без дорогих эффектов ===== */
.tvmode body{ background:var(--bg) !important; background-image:none !important; }
.tvmode *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.tvmode .railfade{ display:none !important; }
.tvmode .tvfocus{ transform:none; transition:none; box-shadow:0 0 0 6px rgba(255,106,93,.30); }
.tvmode .skel{ animation:none !important; }
.tvmode .card, .tvmode .poster, .tvmode .btn{ transition:none !important; }
.tvmode .hero3-bg{ filter:none !important; }
/* ===== TV MODE v4: добивка gap-фолбэков по аудиту всех страниц ===== */
.tvmode .rstack{ gap:0 } .tvmode .rstack>*{ margin-bottom:var(--s-1) }
.tvmode .neps{ gap:0 } .tvmode .neps>*{ margin-bottom:var(--s-2) }
.tvmode .nep{ gap:0 } .tvmode .nep>*{ margin-right:10px }
.tvmode .nep-t{ gap:0 } .tvmode .nep-t>*{ margin-right:var(--s-2) }
.tvmode .showhead{ gap:0 } .tvmode .showhead>*{ margin-right:var(--s-3) }
.tvmode .shelf-h{ gap:0 } .tvmode .shelf-h>*{ margin-right:10px }
.tvmode .sh-link{ gap:0 } .tvmode .sh-link>*{ margin-right:var(--s-2) }
.tvmode .dicebtn{ gap:0 } .tvmode .dicebtn>*{ margin-right:6px }
.tvmode .prow{ gap:0 } .tvmode .prow>*{ margin:0 10px 10px 0 }
.tvmode .pcard{ gap:0 } .tvmode .pcard>*{ margin-bottom:6px }
.tvmode .ifchips{ gap:0 } .tvmode .ifchips>*{ margin:0 var(--s-2) var(--s-2) 0 }
.tvmode .wtop{ gap:0 } .tvmode .wtop>*{ margin-right:var(--s-3) }
.tvmode .tvtabs{ gap:0 } .tvmode .tvtabs>*{ margin:0 var(--s-2) var(--s-2) 0 }
.tvmode label{ gap:0 } .tvmode label>*{ margin:0 8px 6px 0 }
.tvmode .activerow{ gap:0 } .tvmode .activerow>*{ margin-right:var(--s-2) }
.tvmode .alpharow,.tvmode .alpharow2{ gap:0 } .tvmode .alpharow>*,.tvmode .alpharow2>*{ margin:0 6px 6px 0 }
.tvmode .cachebar-top{ gap:0 } .tvmode .cachebar-top>*{ margin-right:10px }
.tvmode .cntrow{ gap:0 } .tvmode .cntrow>*{ margin-right:var(--s-2) }
.tvmode .chiprow{ gap:0 } .tvmode .chiprow>*{ margin:0 var(--s-2) var(--s-2) 0 }
.tvmode .advgroup,.tvmode .advpanel{ gap:0 } .tvmode .advgroup>*,.tvmode .advpanel>*{ margin:0 var(--s-2) var(--s-2) 0 }
.tvmode .dl-actions{ gap:0 } .tvmode .dl-actions>*{ margin-right:var(--s-2) }
.tvmode .phead{ gap:0 } .tvmode .phead>*{ margin-right:var(--s-3) }
.tvmode .cdnbox .frow>*{ margin-right:var(--s-2) }
/* ТВ-заставка v4 «Окно»: небо по реальному времени суток и реальная погода.
Раскладка, слои и движение — здесь; сами градиенты, кегль часов и всё, что
зависит от высоты солнца, задаёт static/saver.js.
Кинозал из v3 никуда не делся — он уехал в Атмосферу, блок ниже. */
#tvsaver{ position:fixed; top:0;right:0;bottom:0;left:0; background:#03050a; z-index:var(--z-saver); overflow:hidden; opacity:0; transition:opacity 1.4s ease; }
#tvsaver.on{ opacity:1; }
/* «отпустить экран»: гаснем за 0.9 с и отдаём телику право уснуть.
Раньше заставка исчезала в один кадр — ночью это была вспышка. */
#tvsaver.sk-released{ opacity:0; transition:opacity .9s ease; }
#tvsaver .sk-sky,#tvsaver .sk-glow,#tvsaver .sk-clouds,#tvsaver .sk-haze,
#tvsaver .sk-fx,#tvsaver .sk-vig,#tvsaver .sk-dither,#tvsaver .sk-flash{
position:absolute; top:0;right:0;bottom:0;left:0; }
#tvsaver .sk-sky{ z-index:1 }
#tvsaver .sk-glow{ z-index:2 }
#tvsaver .sk-clouds{ z-index:3 }
#tvsaver .sk-haze{ z-index:4 }
#tvsaver .sk-fx{ z-index:5 }
#tvsaver .sk-vig{ z-index:6 }
#tvsaver .sk-dither{ z-index:7 }
#tvsaver .saver-chip{ z-index:8 }
#tvsaver .sk-flash{ z-index:9 }
#tvsaver .sk-cloud{ position:absolute; display:block; border-radius:50%;
will-change:transform; animation:skcloud 600s ease-in-out infinite alternate; }
@keyframes skcloud{ from{ transform:translate3d(-6vw,1vh,0) scale(1); }
to { transform:translate3d(9vw,-2vh,0) scale(1.12); } }
#tvsaver .sk-haze{ background:linear-gradient(0deg,rgba(150,165,190,.11) 0%,
rgba(150,165,190,.05) 26%,transparent 52%); opacity:0;
transition:opacity 2s ease; animation:skhaze 26s ease-in-out infinite alternate; }
@keyframes skhaze{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,-2vh,0) } }
#tvsaver .sk-vig{ background:radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0,0,0,.6) 100%); }
/* не плёночное зерно, а дизеринг: восьмибитная ТВ-панель полосит на больших
плавных градиентах, слабый шум эти полосы разбивает */
#tvsaver .sk-dither{ background-repeat:repeat; pointer-events:none; }
#tvsaver .sk-flash{ background:#dfe8ff; opacity:0; transition:opacity 60ms linear; pointer-events:none; }
#tvsaver .saver-chip{ position:absolute; text-align:center;
transition:left 6s ease-in-out, top 6s ease-in-out, opacity 1.2s ease; }
#tvsaver .saver-chip.sk-dip{ opacity:0; }
/* большие и тусклые: так часы читаются как свет в комнате, а не как табло,
и при той же площади светят вчетверо слабее — выгоранию заметно легче */
#tvsaver .sk-clock{ font-weight:200; font-family:'Roboto','Segoe UI',sans-serif;
letter-spacing:.03em; line-height:1; font-variant-numeric:tabular-nums;
color:rgba(232,238,245,.38); white-space:nowrap; }
#tvsaver .sk-colon{ animation:skbreath 4s ease-in-out infinite; }
@keyframes skbreath{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
#tvsaver .sk-l2{ margin-top:var(--s-4); letter-spacing:.08em; color:rgba(232,238,245,.30); }
#tvsaver .sk-l3{ margin-top:var(--s-3); letter-spacing:.04em; color:rgba(232,238,245,.26); }
/* Янтарный кинозал: был заставкой v3, теперь живёт только сценой «Кинозал»
в Атмосфере. Селекторы здесь общими с #tvsaver больше не бывают — именно
из-за общих правил правка одного молча уезжала в другое. */
.amb-hall .sv-au{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.amb-hall .sv-au1{ width:72vmax;height:72vmax; left:-26vmax;top:-30vmax; background:radial-gradient(closest-side,rgba(255,138,88,.20),transparent 70%); animation:svau1 90s ease-in-out infinite alternate; }
.amb-hall .sv-au2{ width:64vmax;height:64vmax; right:-24vmax;bottom:-28vmax; background:radial-gradient(closest-side,rgba(255,96,72,.15),transparent 70%); animation:svau2 110s ease-in-out infinite alternate; }
.amb-hall .sv-au3{ width:52vmax;height:52vmax; left:30vw;top:20vh; background:radial-gradient(closest-side,rgba(255,196,124,.11),transparent 72%); animation:svau3 74s ease-in-out infinite alternate; }
@keyframes svau1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(14vw,10vh,0) scale(1.18); } }
@keyframes svau2{ from{ transform:translate3d(0,0,0) scale(1.12); } to{ transform:translate3d(-12vw,-9vh,0) scale(.94); } }
@keyframes svau3{ from{ transform:translate3d(-6vw,4vh,0) scale(.9); } to{ transform:translate3d(10vw,-8vh,0) scale(1.15); } }
.amb-hall .sv-bk{ position:absolute; display:block; border-radius:50%; opacity:var(--o,.07); background:radial-gradient(circle at 36% 36%, rgba(255,196,148,.55), rgba(255,148,104,.14) 55%, transparent 72%); animation:svbk 36s ease-in-out infinite alternate; will-change:transform,opacity; }
@keyframes svbk{ from{ transform:translate3d(0,0,0) scale(.92); opacity:calc(var(--o,.07)*.45); } 50%{ opacity:var(--o,.07); } to{ transform:translate3d(3vw,-13vh,0) scale(1.1); opacity:calc(var(--o,.07)*.6); } }
.amb-layer .sv-vig{ position:absolute; top:0;right:0;bottom:0;left:0; background:radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0,0,0,.6) 100%); }
.amb-layer .sv-grain{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:3; background-repeat:repeat; animation:svgrain .9s steps(5) infinite; pointer-events:none; }
@keyframes svgrain{ 0%{background-position:0 0} 20%{background-position:-37px 19px} 40%{background-position:23px -41px} 60%{background-position:-11px 33px} 80%{background-position:41px -7px} 100%{background-position:0 0} }
/* Пульт v2 */
.rc{ max-width:460px; margin:0 auto; }
.rc-off{ background:rgba(255,106,93,.13); border:1px solid rgba(255,106,93,.4); border-radius:var(--radius); padding:var(--s-3) var(--s-4); margin-bottom:14px; text-align:center; }
.rc-hero{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); min-height:118px; box-shadow:var(--shadow); }
.rc-bg{ position:absolute; top:-24px;right:-24px;bottom:-24px;left:-24px; background-size:cover; background-position:center 25%; filter:blur(22px) saturate(1.1) brightness(.45); }
.rc-hero.noposter .rc-bg{ background:linear-gradient(135deg,#171a24,#0b0d14); filter:none; }
.rc-hero-in{ position:relative; display:flex; align-items:center; padding:var(--s-4); }
.rc-poster{ width:64px; height:96px; border-radius:10px; background:#20242f center/cover no-repeat; box-shadow:0 6px 18px rgba(0,0,0,.5); flex:none; margin-right:14px; }
.rc-hero.noposter .rc-poster{ display:none; }
.rc-meta{ min-width:0; }
.rc-title{ font-size:17px; font-weight:700; line-height:1.25; max-height:2.6em; overflow:hidden; }
.rc-sub{ display:flex; align-items:center; margin-top:6px; color:var(--muted); font-size:var(--f-sm); }
.rc-dot{ width:9px; height:9px; border-radius:50%; margin-right:7px; background:#666; flex:none; }
.rc-dot.on{ background:#3ddc84; box-shadow:0 0 8px rgba(61,220,132,.7); }
.rc-dot.pause{ background:var(--warn); }
.rc-dot.off{ background:#ff5d5d; }
.rc-barwrap{ margin:18px 4px 0; }
.rc-bar{ position:relative; height:10px; border-radius:var(--r-pill); background:var(--bg2); border:1px solid var(--line); cursor:pointer; }
.rc-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--accent),#ff8d7a); border-radius:var(--r-pill); transition:width .5s linear; }
.rc-bar b{ position:absolute; top:50%; left:0; width:18px; height:18px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.55); transition:left .5s linear; }
.rc-bar{ touch-action:none; }
.rc-bar::before{ content:''; position:absolute; top:-12px; right:0; bottom:-12px; left:0; }
.rc-time{ display:flex; justify-content:space-between; color:var(--muted); font-size:12.5px; margin:8px 2px 0; }
.rc-row{ display:flex; justify-content:center; align-items:center; margin-top:22px; }
.rc-b{ width:58px; height:58px; margin:0 6px; border-radius:50%; border:1px solid var(--line-strong); background:var(--card); color:var(--txt); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:transform .08s ease, background .15s; }
.rc-b:active{ transform:scale(.92); background:var(--bg2); }
.rc-num{ font-size:var(--f-md); font-weight:700; line-height:1; }
.rc-cap{ font-size:8.5px; color:var(--muted); margin-top:2px; letter-spacing:.4px; }
.rc-main{ width:78px; height:78px; margin:0 var(--s-3); background:linear-gradient(160deg,var(--accent),#e5503f); border:none; color:#fff; box-shadow:0 8px 26px rgba(255,106,93,.4); }
.rc-main svg,.rc-main .ic{ width:30px; height:30px; }
.rc-main:active{ transform:scale(.94); }
.rc-vol{ display:flex; justify-content:center; align-items:center; margin-top:18px; }
.rc-vol .rc-b{ width:54px; height:54px; font-size:var(--f-xl); font-weight:600; }
.rc-volmid{ flex:1; max-width:190px; margin:0 14px; }
.rc-volbar{ position:relative; height:8px; border-radius:var(--r-pill); background:var(--bg2); border:1px solid var(--line); cursor:pointer; }
.rc-volbar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#5a6376,#9aa4bb); border-radius:var(--r-pill); transition:width .3s ease; }
.rc-vol-lab{ display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; margin-top:6px; letter-spacing:.4px; }
.rc-vol-lab b{ margin-left:var(--s-1); color:var(--txt); font-weight:600; }
.rc-vol-lab .ic{ width:16px; height:16px; margin-right:6px; }
.rc-sels{ display:grid; gap:10px; margin-top:var(--s-5); }
.rc-sels label{ display:flex; align-items:center; background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius); padding:10px 14px; }
.rc-sels label .ic{ width:18px; height:18px; color:var(--muted); flex:none; margin-right:10px; }
.rc-sel-lab{ color:var(--muted); font-size:var(--f-sm); flex:none; margin-right:var(--s-3); min-width:70px; }
.rc-sels label{ width:100%; box-sizing:border-box; }
.rc-sels select.sel{ width:1% !important; max-width:none; flex:1 1 0%; min-width:0; background:transparent; border:none; }
.rc-hint{ margin-top:var(--s-4); text-align:center; font-size:12.5px; }
@media(max-width:430px){
.rc-b{ width:50px; height:50px; margin:0 var(--s-1); }
.rc-main{ width:66px; height:66px; margin:0 var(--s-2); }
.rc-main svg,.rc-main .ic{ width:26px; height:26px; }
.rc-num{ font-size:14px; }
.rc-vol .rc-b{ width:48px; height:48px; font-size:21px; }
}
.tvmode #navremote{ display:none !important; }
/* Пульт: несколько ТВ + серии */
.rc-tvchips{ display:flex; flex-wrap:wrap; margin-bottom:var(--s-3); }
.rc-tvchip{ border:1px solid var(--line-strong); background:var(--card); color:var(--muted); border-radius:var(--r-pill); padding:8px 14px; margin:0 var(--s-2) var(--s-2) 0; font-size:var(--f-sm); cursor:pointer; }
.rc-tvchip.act{ border-color:var(--accent); color:var(--txt); background:rgba(255,106,93,.12); }
.rc-tvchip.off{ opacity:.45; }
.rc-eps{ display:flex; justify-content:center; align-items:center; margin-top:var(--s-4); }
.rc-ep{ width:64px; }
.rc-epmid{ width:auto; min-width:110px; border-radius:var(--r-pill); padding:0 20px; font-size:14px; font-weight:600; height:52px; }
.tvpick{ position:fixed; top:0;right:0;bottom:0;left:0; background:rgba(4,5,9,.72); z-index:var(--z-picker); display:flex; align-items:flex-end; justify-content:center; }
.tvpick-in{ background:var(--bg2); border:1px solid var(--line); border-radius:20px 20px 0 0; padding:18px; width:100%; max-width:480px; display:flex; flex-direction:column; }
.tvpick-in>b{ text-align:center; margin-bottom:var(--s-3); }
.tvpick-in .btn{ margin-bottom:var(--s-2); }
.eps-in{ max-height:72vh; }
.eps-list{ overflow:auto; margin:10px 0; }
.eps-row{ display:flex; align-items:center; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--txt); padding:12px 6px; cursor:pointer; }
.eps-row b{ min-width:34px; color:var(--muted); }
.eps-row.cur{ color:var(--accent); }
.eps-row.cur b{ color:var(--accent); }
.tvmode .eptv{ display:none !important; } /* на самом телике кнопка каста не нужна */
/* «На ТВ» в шапке просмотра */
.opts.pbar{ background:var(--card); border:1px solid var(--line); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:10px 14px; margin:var(--s-3) 0 0; }
.opts.pbar .wcast{ margin-left:auto; flex:none; padding:var(--s-2) var(--s-4); }
.opts.pbar + #playerwrap .player{ border-radius:0 0 var(--r-lg) var(--r-lg); margin-top:0; }
.ep2{ transition:background .12s; border-radius:10px; }
.ep2:hover{ background:rgba(255,255,255,.035); }
.tvmode .wcast,.tvmode .btv{ display:none !important; }
/* ===== hero-A2: стекло, группы, статус в углу (2026-07-14) ===== */
.rate2{color:var(--muted)}
.rate2 b{color:var(--txt);font-weight:600}
.rate2 a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(139,147,167,.5)}
.rate2 a:hover{border-bottom-style:solid}
.btns.g{gap:26px;row-gap:var(--s-3)}
.grp{display:flex;gap:var(--s-2);flex-wrap:wrap;row-gap:var(--s-3);align-items:center}
.btn.glass{background:rgba(16,19,27,.5);border:1px solid rgba(255,255,255,.13);color:var(--txt);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn.glass:hover{filter:none;background:rgba(34,40,54,.6);border-color:rgba(255,255,255,.24)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.btn.glass{background:rgba(16,19,27,.85)}}
.btn.glass.tgl.on{border-color:rgba(255,255,255,.13);background:rgba(16,19,27,.5);color:var(--txt)}
.btn.glass.tgl.on:hover{filter:none;border-color:rgba(255,255,255,.24);background:rgba(34,40,54,.6)}
.btn.glass.tgl.on .ic{color:var(--ok)}
.stbadge{position:absolute;top:14px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#c9cfdd;padding:5px 12px;border-radius:var(--r-pill);background:rgba(11,13,18,.45);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stbadge .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}
.stbadge.ok .dot{background:var(--ok)}
.sprog.quiet i{background:rgba(238,241,247,.38)}
/* ===== hero-A2.1: подзаголовок + фейд бэкдропа (2026-07-14) ===== */
.hero3 .sub2{margin:-3px 0 10px;color:var(--muted);font-size:13.5px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.herofade{opacity:0;transition:opacity .35s ease}
.herofade.on{opacity:1}
.tvmode .sub2{font-size:var(--f-md)}
/* ===== hero-A2.2: вторичные действия в блоке характеристик (2026-07-14) ===== */
.factsact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4);padding-top:14px;border-top:1px solid var(--line)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn.sm .ic{width:1.05em;height:1.05em}
/* ===== hero-A2.3: трейлер-ссылка под описанием (2026-07-14) ===== */
.hero3 .trlink{display:inline-flex;align-items:center;gap:7px;margin:var(--s-3) 0 0;padding:0;background:none;border:none;cursor:pointer;color:var(--txt2);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(203,210,224,.4)}
.hero3 .trlink:hover{color:var(--txt);text-decoration-color:currentColor}
.hero3 .trlink .ic{width:1.1em;height:1.1em}
.tvmode .hero3 .trlink{font-size:var(--f-md)}
/* ===== главная: живой пульт в hero (2026-07-14) ===== */
.tvhero{cursor:default}
.tvhero .tvtag{display:inline-flex;align-items:center;gap:var(--s-2)}
.tvlive{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.85);animation:tvpulse 1.6s ease-in-out infinite}
@keyframes tvpulse{0%,100%{opacity:1}50%{opacity:.35}}
.tvbar{position:relative;height:8px;background:rgba(255,255,255,.18);border-radius:var(--r-pill);max-width:520px;margin:6px 0 8px;cursor:pointer;touch-action:none}
.tvbar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff8d7a);border-radius:var(--r-pill);transition:width .5s linear}
.tvbar b{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.55);transition:left .5s linear}
.tvbar::before{content:"";position:absolute;top:-13px;right:0;bottom:-13px;left:0}
.tvbar.dragging i,.tvbar.dragging b{transition:none}
.tvbtns .btn{padding:11px 16px}
/* ===== live-hero: громкость ===== */
.tvvol{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:transparent}
.tvvol-ic{display:inline-flex;align-items:center;padding:0 4px 0 11px;color:var(--muted)}
.tvvol-ic .ic{width:16px;height:16px}
.tvvol-b{border:none;background:transparent;color:var(--txt);font-weight:700;font-size:17px;line-height:1;cursor:pointer;padding:12px 14px}
.tvvol-b:hover{background:rgba(255,255,255,.09)}
.tvvol-n{min-width:44px;text-align:center;color:var(--muted);font-size:var(--f-sm);font-weight:600}
.tvtitle{color:inherit;text-decoration:none}
.tvtitle:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* ===== live-hero: медиаплеерный блок управления ===== */
.tvctrl{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:6px}
.tvcbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background .15s,border-color .15s,filter .15s,box-shadow .15s}
.tvcbtn:active{transform:scale(.92)}
.tvcbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(108,140,255,.6)}
.tvskip{width:52px;height:52px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#eef1f7}
.tvskip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.tvskip .ic{width:27px;height:27px}
.tvplay{width:64px;height:64px;background:var(--accent);border:none;color:var(--ink);box-shadow:0 10px 26px rgba(255,107,94,.42)}
.tvplay:hover{filter:brightness(1.06)}
.tvplay .ic{width:28px;height:28px}
.tvctrl-sec{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}
.tvpult{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;padding:var(--s-2) var(--s-1)}
.tvpult:hover{color:var(--txt)}
.tvpult .ic{width:18px;height:18px}
/* возможности устройства в списке сессий (Настройки → Устройства) */
.sess-caps{font-size:12.5px;opacity:.85}
/* ==================== SOUL 2026-07-17: художественная часть ==================== */
/* Дисплей-шрифт заголовков — Unbounded 600, локальные woff2 (33 КБ на оба сабсета).
На ТВ вебшрифты запрещены (слабое железо) — html.tvmode откатывает на системный. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/unbounded-600-cyr.woff2?v=1') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/unbounded-600-lat.woff2?v=1') 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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
h1,.spot-title,.cv2-title,h2.rail-title,.center h1,.wtitle,.brand,.cred-snyato{font-family:'Unbounded','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
h2.rail-title{font-size:16px;font-weight:600}
/* Было два размера в разных концах файла: 24px в мобильном блоке и 33px здесь.
Этот стоял ниже и молча выигрывал — мобильный размер не работал вообще, и
длинный заголовок на телефоне разъезжался в четыре строки. Вместо двух
хардкодов одна формула: 24px на самых узких, 33px начиная примерно с 508px
ширины. Десктоп не изменился. */
.spot-title{font-weight:600;font-size:clamp(24px,6.5vw,33px)}
.brand{font-weight:600;font-size:17px}
.cv2-title{font-weight:600}
html.tvmode h1,html.tvmode .spot-title,html.tvmode .cv2-title,html.tvmode h2.rail-title,html.tvmode .wtitle,html.tvmode .brand{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
/* Подкраска hero доминантным цветом постера (tint c сервера) */
.spot .tintwash,.hero3 .tintwash{position:absolute;left:0;top:0;right:0;bottom:0;opacity:.16;pointer-events:none;z-index:1}
/* Пустые состояния: фирменные иллюстрации (зал / билет / попкорн) */
.empty svg.illus{width:172px;height:auto;color:#414a63}
.empty .illus .acc{stroke:var(--accent);opacity:.92}
/* История: сводка месяца */
.histsum{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-2);font-size:14.5px;color:var(--muted)}
.histsum .ic{width:20px;height:20px;color:var(--accent);flex:none}
.histsum b{color:var(--txt)}
/* Логин: blur-коллаж постеров под карточкой (первый экран пахнет кино) */
.loginbg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;background:#08090d url('loginbg.jpg?v=2') center/cover no-repeat;opacity:.5}
.loginbg:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(120% 90% at 50% 8%,rgba(8,9,13,.06) 0%,rgba(8,9,13,.9) 84%)}
/* Рулетка крутится, пока выбирает */
.rolling svg{animation:diceroll .55s linear infinite}
@keyframes diceroll{to{transform:rotate(360deg)}}
/* Сезон закрыт: полоска сезона коротко светится */
.seasonline.glow{animation:seasglow 1.2s ease-in-out 2}
@keyframes seasglow{0%,100%{box-shadow:0 0 0 rgba(255,106,93,0)}50%{box-shadow:0 0 18px rgba(255,106,93,.6)}}
/* Титры при досмотре сериала */
.credits{position:fixed;left:0;top:0;right:0;bottom:0;z-index:var(--z-credits);background:rgba(6,7,11,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:auto;display:flex;align-items:flex-start;justify-content:center}
.cred-roll{max-width:780px;width:100%;padding:9vh 22px 42px;text-align:center;animation:credup 1.5s cubic-bezier(.2,.7,.2,1)}
@keyframes credup{from{transform:translateY(34vh);opacity:0}to{transform:translateY(0);opacity:1}}
.cred-mark .ic{width:56px;height:56px;color:var(--accent)}
.cred-snyato{font-size:42px;font-weight:600;margin:var(--s-3) 0 var(--s-1);color:var(--txt)}
.cred-title{font-size:20px;font-weight:700;color:var(--accent);margin-bottom:var(--s-3)}
.cred-meta{font-size:var(--f-md);color:var(--txt);opacity:.92}
.cred-thanks{margin-top:var(--s-2)}
.cred-next{margin-top:28px;text-align:left}
.cred-what{font-size:12.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--accent2);margin:0 0 10px}
.credits .cred-x{margin-top:20px}
/* Настройки: правый край не пустует — собранность тоже часть характера */
#setroot{max-width:1060px}
/* (цитата заставки: стили переехали в блок v3) */
/* Пульт: иконка в плашке «не в сети» */
.rc-off .ic{width:19px;height:19px;vertical-align:-4px;margin-right:6px;color:var(--accent)}
/* Страница «Сеанс не найден» (404) и «киномеханик бежит» (502 в Caddy) */
.oops{max-width:560px;margin:15vh auto 0;padding:0 22px;text-align:center}
.oops-mark{width:66px;height:66px;color:var(--accent);margin-bottom:14px}
.oops h1{margin:0 0 10px}
.oops p{margin:0}
.oops a.btn{display:inline-block;margin-top:20px;text-decoration:none;color:var(--ink)}
/* ==================== Настройки v2: профиль + карточки + сайднав ====================
Разметка целиком в initSettings (app.js). Автосохранение: подтверждение — .savedmark
в шапке карточки; кнопки «Сохранить настройки» больше нет. Сайднав липкий, на мобиле
превращается в горизонтальные чипы, на ТВ скрыт (D-pad ходит по контролам). */
h1.set2-title{font-size:22px;margin:2px 0 16px}
.setprof{display:flex;align-items:center;gap:var(--s-4);padding:18px 22px;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(120deg,rgba(255,106,93,.15),rgba(124,147,255,.09) 55%,rgba(21,24,35,.65));position:relative;overflow:hidden;max-width:1080px;margin-bottom:18px}
.setprof-av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--accent),#b8483d);color:#fff;font-family:'Unbounded','Segoe UI',system-ui,sans-serif;font-size:21px}
.setprof-i{display:flex;flex-direction:column;gap:7px;min-width:0}
.setprof-i b{font-family:'Unbounded','Segoe UI',system-ui,sans-serif;font-size:17px;letter-spacing:.2px}
.setprof-brand{margin-left:auto}
.setprof-brand .ic{width:60px;height:60px;color:var(--accent);opacity:.14}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;width:max-content;border:1px solid var(--line);color:var(--muted)}
.pill .ic{width:13px;height:13px}
.pill.ok{border-color:rgba(74,222,128,.5);color:var(--ok);background:rgba(74,222,128,.08)}
.pill.bad{border-color:rgba(255,106,93,.55);color:var(--accent);background:rgba(255,106,93,.08)}
.set2{display:grid;grid-template-columns:212px minmax(0,1fr);gap:var(--s-5);align-items:start;max-width:1080px}
.set2-nav{position:sticky;top:calc(var(--tbh,64px) + 14px);display:flex;flex-direction:column;gap:2px}
.set2-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--muted);font-size:14px;border:1px solid transparent;transition:color .15s,background .15s}
.set2-nav a .ic{width:17px;height:17px;flex:none}
.set2-nav a:hover{color:var(--txt);background:var(--card)}
.set2-nav a.on{color:var(--txt);background:var(--card);border-color:var(--line)}
.set2-nav a.on .ic{color:var(--accent)}
.set2-m{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.setcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px 20px 16px;box-shadow:var(--shadow-sm);scroll-margin-top:76px}
.setcard-h{display:flex;align-items:center;gap:var(--s-3);padding:14px 0 8px}
.setcard-h h3{margin:0;font-size:14.5px;font-weight:600;font-family:'Unbounded','Segoe UI',system-ui,sans-serif;letter-spacing:.2px}
.setcard-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.setcard-ic .ic{width:18px;height:18px}
.setcard-sub{margin:2px 0 10px;font-size:var(--f-sm)}
.t-red{background:rgba(255,106,93,.13);color:var(--accent)}
.t-blue{background:rgba(124,147,255,.13);color:var(--accent2)}
.t-green{background:rgba(74,222,128,.11);color:var(--ok)}
.t-yellow{background:rgba(255,209,102,.12);color:var(--warn)}
.savedmark{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ok);opacity:0;transition:opacity .3s}
.savedmark.show{opacity:1}
.savedmark .ic{width:14px;height:14px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;padding:13px 0;border-top:1px solid rgba(255,255,255,.055);flex-wrap:wrap}
.setcard-h+.srow{border-top:none}
.srow-t{display:flex;flex-direction:column;gap:3px;font-size:14px;min-width:0;flex:1 1 auto}
.srow-t .hint{font-size:12px;color:var(--muted);opacity:.9;max-width:430px;line-height:1.45}
.srow-c{display:flex;align-items:center;gap:var(--s-2);flex:0 1 auto;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.srow-c select.sel{min-width:190px}
.srow-c input.sel.num{width:88px;text-align:center}
.srow-c input.sel.key{width:300px;max-width:100%}
.unit{color:var(--muted);font-size:var(--f-sm)}
.srow-c .tgl{width:48px;height:27px;border-radius:var(--r-pill);background:var(--bg2);border:1px solid var(--line-strong);position:relative;cursor:pointer;transition:background .18s,border-color .18s;padding:0;flex:none}
.srow-c .tgl i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.srow-c .tgl[aria-checked="true"]{background:rgba(255,106,93,.22);border-color:var(--accent)}
.srow-c .tgl[aria-checked="true"] i{transform:translateX(21px);background:var(--accent)}
.srow-c .tgl:focus-visible{box-shadow:var(--ring);outline:none}
.setcard .cdnbox{max-width:none;background:var(--bg2);margin:12px 0 2px}
.cdnbox .hint{font-size:12px;color:var(--muted)}
.apkrow{display:flex;gap:13px;align-items:center;background:var(--bg2);border-radius:var(--r-md);padding:12px 14px;margin:12px 0 2px;font-size:13.5px;color:var(--muted);line-height:1.5}
.apkrow>.ic{width:22px;height:22px;color:var(--accent2);flex:none}
.apkrow b{color:var(--txt)}
.apkrow .btn{margin-left:auto;flex:none}
#reauthbox .notice{margin:0;font-size:13.5px}
@media(max-width:900px){
.set2{display:block}
.set2-nav{flex-direction:row;overflow-x:auto;top:var(--tbh,58px);z-index:6;background:rgba(8,9,13,.9);backdrop-filter:blur(10px);margin:0 calc(-1 * var(--pad)) 14px;padding:8px var(--pad);border-bottom:1px solid var(--line);gap:6px;scrollbar-width:none}
.set2-nav::-webkit-scrollbar{display:none}
.set2-nav a{flex:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 13px;font-size:13px}
.set2-nav a .ic{display:none}
.set2-nav a.on{border-color:var(--accent);background:rgba(255,106,93,.1)}
.setprof{padding:14px 16px}
.setprof-brand{display:none}
.setcard{padding:2px 14px 12px}
.srow-c select.sel{min-width:150px;max-width:60vw}
.srow-c input.sel.key{flex:1 1 100%;width:auto}
}
/* ТВ-режим: без сайднава и дисплей-шрифта, карточки в столбик */
.tvmode .set2{display:block}
.tvmode .set2-nav{display:none}
.tvmode .setcard{margin-bottom:14px}
.tvmode .setcard-h h3,.tvmode .setprof-i b,.tvmode .setprof-av{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
.tvmode .srow-c select.sel{min-width:220px}
/* ==== Пульт: запуск приложения с телефона (фоновый агент, v1.17) ==== */
.rc-launch{display:block;margin:2px auto 14px;}
.rc-warn{margin:0 auto var(--s-3);max-width:520px;text-align:center;color:#d9a441;font-size:.86em;line-height:1.45;}
/* --- клик-зоны (аудит UX 2026-07-17) --- */
.card .t.tlink:hover{text-decoration:underline}
.hero3 .poster.clickable{cursor:pointer}
.hero3 .poster.clickable:hover img{filter:brightness(1.08)}
.rc-tlink{color:inherit;text-decoration:none}
.rc-tlink:hover{text-decoration:underline}
/* --- мини-пульт в парковке /watch + веса названий (аудит UX ч.2, 2026-07-17) --- */
.tvorig{color:var(--muted);font-size:var(--f-md);margin:-4px 0 10px}
.tvpark-remote{max-width:560px;margin:2px auto 10px;text-align:left}
.tvpark-remote .tvbar{margin:var(--s-3) 0 var(--s-2)}
.tvpark .tvctrl{justify-content:center}
.tvpark .tvctrl-sec{margin-left:0}
.tvpark .btns{margin-top:6px;align-items:center}
.wtt{min-width:0}
.wt-orig{font-size:var(--f-sm);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== TV MODE v5: левый рейл (идея Николая, 2026-07-18) =====
Меню и поиск — вертикальной колонкой слева, контент на всю остальную ширину.
Пульт: вверх/вниз — по меню и по контенту, вправо — в контент, влево — в меню.
Chromium 83: никакого flex-gap и inset — только margin и longhand. */
.tvmode .topbar{position:fixed;top:0;left:0;bottom:0;width:216px;
flex-direction:column;align-items:stretch;flex-wrap:nowrap;
padding:20px 12px 16px 24px;border-bottom:0;border-right:1px solid var(--line);
overflow-y:auto;overflow-x:hidden}
.tvmode .topbar .brand{margin:0 0 16px 6px;font-size:var(--f-lg)}
.tvmode .topbar .search{flex:0 0 auto;width:100%;min-width:0;max-width:none;margin:0 0 14px}
.tvmode .topbar input[type=search]{padding:9px 13px;font-size:14px}
.tvmode .topbar nav{position:static;display:flex;flex-direction:column;flex-wrap:nowrap;
width:auto;order:0;margin:0;background:transparent;max-height:none;overflow:visible;border:0}
.tvmode .topbar nav a{display:block;padding:9px 13px;margin:0 0 var(--s-1) 0;border:0;border-radius:10px;
font-size:var(--f-md);color:var(--muted);background:transparent}
.tvmode .topbar nav a.active{color:var(--txt);background:rgba(255,255,255,.07)}
/* gap-фолбэки контейнеров, появившихся после v4 (hero-A2, настройки v2) — Chromium 83 */
.tvmode .btns.g{gap:0;row-gap:0}
.tvmode .grp{gap:0;row-gap:0}
.tvmode .grp>*{margin:0 var(--s-2) var(--s-2) 0}
.tvmode .setprof-i{gap:0;row-gap:0}
.tvmode .setprof-i>*{margin:0 0 7px 0}
.tvmode .srow{gap:0;row-gap:0}
.tvmode .srow>*{margin:0 10px 0 0}
.tvmode .srow-c{gap:0;row-gap:0}
.tvmode .srow-c>*{margin:0 var(--s-2) 0 0}
.tvmode .apkrow{gap:0;row-gap:0}
.tvmode .apkrow>*{margin:0 13px 0 0}
.tvmode .factsact{gap:0;row-gap:0}
.tvmode .factsact>*{margin:0 var(--s-2) var(--s-2) 0}
/* ===== TV MODE v5.1: рейл скрыт по умолчанию (запрос Николая) =====
Контент на весь экран; «влево» открывает меню оверлеем поверх,
«вправо»/Back закрывают. Скрим — box-shadow, без лишних слоёв. */
.tvmode .topbar{display:none}
.tvmode.railopen .topbar{display:flex;background:#0d0f15;box-shadow:24px 0 60px rgba(0,0,0,.55),0 0 0 200vw rgba(0,0,0,.40)}
.tvmode main{margin-left:0;padding-left:4vw !important;padding-right:4vw !important;padding-top:14px}
/* ==================== АТМОСФЕРА (/ambient) ==================== */
body.ambpage .topbar,body.ambpage .botnav{display:none}
body.ambpage main{padding:0;max-width:none}
.amb-stage{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;overflow:hidden;z-index:var(--z-overlay)}
.amb-layer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 1.2s ease;will-change:opacity;background:#000}
.amb-layer.on{opacity:1}
.amb-layer video{width:100%;height:100%;object-fit:cover}
.amb-vig{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(0,0,0,.55) 100%)}
.amb-dust{position:absolute;top:0;left:0;width:100%;height:100%}
.amb-hall{background:linear-gradient(180deg,#0b0709 0%,#120a08 55%,#160b07 100%)}
.amb-space{background:radial-gradient(1100px 720px at 72% 18%,#0d1130 0%,#070812 55%,#040509 100%)}
.amb-space canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.amb-clock{position:fixed;right:38px;top:30px;z-index:515;font-family:'Roboto','Segoe UI',sans-serif;font-weight:200;font-size:46px;letter-spacing:2px;line-height:1;color:rgba(242,234,217,.82);font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(0,0,0,.65);pointer-events:none}
.amb-chip{position:fixed;left:36px;bottom:36px;z-index:520;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;max-width:70vw}
.amb-chip.on{opacity:1;transform:none}
.amb-chip-sc{font-family:'Unbounded','Roboto',sans-serif;font-weight:600;font-size:27px;letter-spacing:1px;color:#f2ead9;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.amb-chip-st{margin-top:7px;font-size:var(--f-md);color:#d8d0c0;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.amb-chip-st span{color:#98917f;margin-left:var(--s-2);font-size:var(--f-sm)}
.amb-chip-hint{margin-top:10px;font-size:12.5px;color:#847b6b;letter-spacing:.4px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.amb-gest{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);z-index:530;background:rgba(12,12,16,.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);padding:13px 22px;border-radius:var(--radius);font-size:16px;color:#f0ede6;box-shadow:0 10px 34px rgba(0,0,0,.5)}
/* карточка-вход в ТВ-каталоге */
.ambcard{position:relative;display:flex;align-items:center;overflow:hidden;border-radius:var(--radius-lg);padding:22px 24px;background:linear-gradient(120deg,#1c1210 0%,#241410 55%,#181019 100%);border:1px solid #2e2018;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s}
.ambcard:hover{transform:translateY(-3px);border-color:#4a3020}
.ambcard-au{position:absolute;border-radius:50%;pointer-events:none}
.ambcard-au.a1{width:340px;height:340px;left:-80px;top:-160px;background:radial-gradient(closest-side,rgba(255,138,88,.22),transparent 70%);animation:svau3 24s ease-in-out infinite alternate}
.ambcard-au.a2{width:300px;height:300px;right:-60px;bottom:-170px;background:radial-gradient(closest-side,rgba(124,147,255,.16),transparent 70%);animation:svau1 30s ease-in-out infinite alternate}
.ambcard-in{position:relative;flex:1;min-width:0;display:block}
.ambcard-t{display:block;font-family:'Unbounded','Roboto',sans-serif;font-weight:600;font-size:19px;letter-spacing:.6px;color:#f4ead8}
.ambcard-s{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
.ambcard-ch{display:flex;margin-top:var(--s-3);flex-wrap:wrap}
.ambcard-ch i{margin:0 8px 6px 0;font-style:normal;font-size:12.5px;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#cfc7b8}
.ambcard-go{position:relative;flex:0 0 auto;margin-left:18px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--ink)}
.ambcard-go .ic{width:20px;height:20px}
.ambbar{position:relative;display:flex;align-items:center;margin:var(--s-6) 0 var(--s-2);padding:13px 18px;border-radius:var(--radius);background:linear-gradient(100deg,#1c1210,#22140f 60%,#171019);border:1px solid #2e2018;overflow:hidden;transition:border-color .15s,transform .15s}
.ambbar:hover{border-color:#4a3020;transform:translateY(-2px)}
.ambbar-au{position:absolute;width:260px;height:260px;left:-40px;top:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,88,.18),transparent 70%);animation:svau3 26s ease-in-out infinite alternate;pointer-events:none}
.ambbar-t{position:relative;display:flex;align-items:center;font-family:'Unbounded','Roboto',sans-serif;font-weight:600;font-size:var(--f-md);color:#f4ead8;white-space:nowrap}
.ambbar-t .ic{width:17px;height:17px;margin-right:9px}
.ambbar-s{position:relative;flex:1;min-width:0;margin-left:14px;color:var(--muted);font-size:var(--f-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ambbar-go{position:relative;margin-left:14px;color:#cfa06a;font-size:var(--f-lg)}
/* ===== мобильные правила, один блок =====
Раньше @media(max-width:640px) встречался в файле 28 раз, от
начала до конца: чтобы понять поведение элемента на телефоне,
приходилось обойти все. Блоки склеены в исходном порядке и
поставлены на место последнего из них — каскад не изменился
(проверено сверкой выигрывающих объявлений до и после).
Новые мобильные правила добавляем СЮДА, а не 29-м блоком.
Отдельно живут: :root{--pad} выше (его перебивает 360px),
а также блоки 430px, 360px, 900px и min-width:641px. */
@media(max-width:640px){
.hero{flex-direction:column}.hero .poster{width:150px;flex-basis:auto}
.topbar{position:sticky}
.burger{display:flex}
.topbar nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg2);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .22s ease;z-index:55}
body.menuopen .topbar nav{max-height:84vh;overflow:auto}
.topbar nav a{padding:14px 20px;border-bottom:1px solid var(--line);font-size:16px;color:var(--txt)}
.ctab{flex:0 0 auto}
.gchip,.fchip,.ctab,.achip,.chip{padding-top:9px;padding-bottom:9px}
.ctabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctabs::-webkit-scrollbar{height:0}
.frow{gap:6px}
.frow .sel{flex:1 1 46%;min-width:0}
.gchip,.fchip,.ctab,.achip{padding-top:9px;padding-bottom:9px}
.grid{grid-template-columns:repeat(2,1fr);gap:12px}
/* Ленты на телефоне идут ОТ КРАЯ ДО КРАЯ: main держит поле 20px для текста, а
лента вылезает из него отрицательными полями и возвращает отступ себе внутрь.
Раньше лента обрезалась по полю main — карточка резалась за 20px до края,
и справа стояла чёрная полоса (то же чинили для ТВ, до мобильных не дошло). */
.rail{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);scroll-padding-left:var(--pad)}
.rail>*:last-child{margin-right:var(--pad)}
/* Шапка уезжает при прокрутке вниз и возвращается при прокрутке вверх — на
телефоне она занимала полосу на КАЖДОМ экране. */
.topbar{transition:transform .22s ease}
.topbar.tbhide{transform:translateY(-100%)}
/* Поиск нужен редко, а занимал целую полосу: прячем и открываем кнопкой из
нижней панели, до неё ближе большим пальцем. */
.topbar .search{display:none}
body.searchopen .topbar .search{display:flex}
/* «вся история →» не помещалась в строку с заголовком, и заголовок переносился
на две строки — на узком экране оставляем только стрелку. */
.rail-title .seeall{font-size:0;padding:6px 11px}
.rail-title .seeall span{font-size:13px}
.ctab,.gchip,.fchip,.chip{min-height:42px}.btn{min-height:46px}
.spot{min-height:230px}/* .spot-title — размер уехал в clamp() у самого правила, здесь ему делать нечего */.spot-in{padding:18px}
.botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);background:rgba(10,12,17,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px max(2px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left))}
.botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10px;text-decoration:none;padding:4px 2px}
.botnav a svg{width:22px;height:22px}
.botnav a.active{color:var(--accent)}
main{padding-bottom:82px}
/* Внутренние поля карточек тоже едут за --pad: иначе страничное поле 12px и
собственное 20px складываются, и лента внутри блока стартует в 32px от
кромки — ровно та потеря ширины, ради которой поле и сужали. */
.iblock2,.setcard{padding-left:var(--pad);padding-right:var(--pad)}
.topbar{flex-wrap:wrap}
.topbar .search{order:5;flex:1 1 100%;margin-top:8px}
.topbar .search input[type=search]{width:100%}
.opts{gap:8px}.opt{flex:1 1 calc(50% - 4px);min-width:0}.opt:first-child{flex-basis:100%}.opt select{width:100%;flex:1;max-width:none}
body .topbar nav a.intabs{display:none}
.tmodal{padding:10px}.tmodal-x{top:-8px;right:-4px}
.epthumb{width:70px}
.phead{gap:14px}.pphoto{width:84px;height:84px}
.facts3{grid-template-columns:1fr}.flab{flex-basis:104px}
.hero3-in{flex-direction:column;padding:18px;gap:14px}
.hero3 .poster{width:136px;flex-basis:auto}
.hero3 h1{font-size:22px}
.pcard{flex:0 0 96px}.pcard img,.pcard-ph{width:96px;height:144px}
.epsallwrap{flex-direction:column}.epsstat{margin:0 0 8px}
.seg button{padding:8px 13px;font-size:13px}
.gtile{padding:12px 15px;font-size:13.5px}
.cv2-title{font-size:20px}
.tool{min-height:40px}
.cv2-refine .vsep{display:none}
.cv2-refine .cv2-lab{width:100%;margin-top:4px}
.rail.peek .card{flex:0 0 var(--cw,124px);width:var(--cw,124px)}
.typerow{display:none}
.railfade{display:none}
.tvgrid{grid-template-columns:repeat(2,1fr);gap:12px}
.tvcard-t{font-size:13px}
.wtop{ grid-template-columns:1fr; gap:var(--s-2); }
.wtop .backbtn{ justify-self:start; }
.wtitle{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:20px; }
.opts.pbar .wcast{ margin-left:0; width:100%; justify-content:center; display:flex; }
.btns.g{gap:16px;row-gap:10px}
.btn.btv{padding:12px 14px}.btn.btv .bl{display:none}
.factsact{margin-top:14px}
.tvctrl-sec{margin-left:0}.tvplay{width:58px;height:58px}.tvskip{width:48px;height:48px}
.cred-snyato{font-size:30px}.cred-roll{padding-top:7vh}
.amb-chip{left:20px;bottom:20px} .amb-clock{right:20px;top:18px;font-size:32px} .ambcard{padding:18px} .ambbar-s{display:none}
}
/* ambient photo scenes (генерённые сцены) */
.amb-photo{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;animation:ambKen 46s ease-in-out infinite alternate}
@keyframes ambKen{from{transform:scale(1.05)}to{transform:scale(1.14) translate(-1.5%,-1.5%)}}
.tvmode .amb-photo{animation:none;transform:scale(1.02)}
/* ==================== АУДИТ ГЛАВНОЙ 2026-07-27 ====================
Полки главной жили без обёртки .railwrap: не работали ни половинка карточки
у края, ни затухание — на 1440px из восемнадцати карточек «Продолжить
смотреть» было видно семь, а остальные 1758px прятались без единого намёка
(скроллбар в лентах скрыт намеренно). Теперь у главной та же обёртка, что у
каталога, и bleed считается ОДИН раз — на обёртке, а не на самой ленте. */
.railwrap .rail{margin-left:0;margin-right:0}
.railwrap .rail>*:last-child{margin-right:0}
/* ТВ: своё безопасное поле 4vw вместо страничного --pad */
.tvmode .railwrap{margin-left:-4vw;margin-right:-4vw}
.tvmode .railwrap .rail{padding-left:4vw;padding-right:0}
.tvmode .railwrap .rail>*:last-child{margin-right:4vw}
/* Клавиатура и пульт: карточка — div с role="button", ей нужно видимое кольцо
фокуса по радиусу постера (общее правило даёт 10px и мылит угол). */
.card:focus-visible,.card .t.tlink:focus-visible,.chip:focus-visible,.seeall:focus-visible{
outline:none;box-shadow:var(--ring);border-radius:var(--radius)}
.card .t.tlink{cursor:pointer}
.card .t.tlink:hover{color:var(--accent2)}
/* Решатель «Что включить сегодня?»: было три карточки сеткой 1fr 1fr 1fr —
на 1440px постер раздувало до 450px (блок 838px, почти треть страницы),
на 400px сжимало до 110px. Теперь обычная полка обычными карточками. */
.moodrail{margin-top:10px}
.moodrail .railwrap{margin-left:0;margin-right:0}
.moodrail .rail{padding-left:0;padding-right:0}
/* Плашка предупреждений на ТВ: показываем (раньше display:none). Подписка
кончилась — узнать об этом важнее всего именно на телевизоре. */
.tvmode .warnbar{font-size:1em;padding:var(--s-4) var(--s-5)}
.tvmode .warnbar svg{width:26px;height:26px}
/* ТВ, первый экран 960x540: герой занимал 300px из 540 и вместе с баннером
«Атмосфера» не оставлял места ни одной карточке — до первой полки нужно было
пролистать экран. 250px + баннер, уехавший вниз, показывают верх постеров. */
.tvmode .spot{min-height:250px}
.tvmode .spot-in{padding:22px 30px}
.tvmode h2.rail-title{margin:var(--s-5) 0 var(--s-2)}
.tvmode .showhead{margin-bottom:var(--s-2)}
/* «вся история →» и вкладки витрины — 28-34px на десятифутовом экране. */
.tvmode .seeall{padding:8px 16px;font-size:var(--f-md)}
.tvmode .ctab{padding:10px 18px;font-size:var(--f-md)}
/* Кольцо фокуса на ТВ рисовалось цветом --accent — тем же, которым залита
главная кнопка: на «Продолжить» оно почти сливалось с самой кнопкой.
На залитых акцентом элементах ринг белый. */
.tvmode .btn.tvfocus,.tvmode .ctab.on.tvfocus,.tvmode .chip.act.tvfocus{
outline-color:#fff !important;box-shadow:0 0 0 6px rgba(0,0,0,.45)}
/* Узкий экран: горизонтальный градиент героя рассчитан на широкий кадр — на
телефоне текст занимает всю ширину и правым краем уезжает на светлую часть.
Там затемнение должно идти снизу вверх, а не слева направо.
Вкладки витрины на телефоне обрезались посреди слова прямо внутри поля
страницы — читалось как поломка, а не как «листается». Ряд едет до кромки. */
@media(max-width:640px){
.spot-bg::after{background:linear-gradient(0deg,rgba(8,9,13,.95),rgba(8,9,13,.6) 52%,rgba(8,9,13,.18) 92%)}
.showhead{margin-bottom:var(--s-2)}
.showhead .ctabs{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
padding-left:var(--pad);padding-right:var(--pad)}
}
/* Пустое состояние и ошибка — не тупик: из них есть куда нажать. */
.btns.btns-c{justify-content:center;margin-top:var(--s-3);margin-bottom:0}
.empty .btns{flex-wrap:wrap}
/* Ссылка «к содержимому»: до первой карточки на десктопе было 13 нажатий Tab
(бренд + поиск + одиннадцать пунктов меню). */
.skiplink{position:absolute;left:var(--s-3);top:-60px;z-index:100;padding:10px 16px;border-radius:var(--r-md);
background:var(--accent);color:var(--ink);font-weight:700;transition:top .15s}
.skiplink:focus{top:var(--s-2)}
.tvmode .skiplink{display:none}
/* Служебная строка для скринридера: смена витрины и результаты поиска
происходили молча (aria-live на странице не было ни одного). */
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ===== prefers-reduced-motion =====
В файле 18 анимаций, и половина бесконечные: скелетоны, индикатор загрузки,
заставка ТВ, Ken Burns в ambient. Для человека с вестибулярным расстройством
это не украшение, а помеха. Блок идёт последним, чтобы перебивать всё
объявленное выше. Анимации не выключаются, а схлопываются в один кадр —
элемент остаётся в конечном состоянии, ничего не «пропадает». */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
animation-delay:0s !important;
transition-duration:.01ms !important;
transition-delay:0s !important;
scroll-behavior:auto !important}
/* заставка живёт вечным дыханием слоёв — гасим само движение, картинка
остаётся на месте, а не мигает раз в кадр */
#tvsaver .sk-cloud,#tvsaver .sk-haze,#tvsaver .sk-colon,
.amb-hall .sv-au,.amb-hall .sv-au1,.amb-hall .sv-au2,.amb-hall .sv-au3,
.amb-hall .sv-bk,.amb-layer .sv-grain,.amb-photo{animation:none !important}
}
/* ============================================================================
Скелетоны загрузки v3 (префикс .ld-*) + «Загрузки» v2 (.dl2-*)
----------------------------------------------------------------------------
Было: на двенадцати страницах первый экран — серый текст «Загрузка…» по
центру пустого поля (.loading, 40px паддинга). Он не врёт, но и не работает:
человек не понимает, СКОЛЬКО ждать и ЧТО появится, а потом контент возникает
рывком и сдвигает всё, что успели прочитать. Дёшево выглядит не потому, что
серо, а потому что не обещает форму.
Стало: страница сразу рисует свой будущий каркас в натуральную величину —
те же 190px постера у карточки фильма, те же 2:3 у плиток, та же сетка 16:9
у ТВ. Сдвига при подстановке контента нет: каркас занимает столько же места.
Префикс .ld-, а не .sk-: .sk-* в этом файле уже занят ТВ-заставкой
(.sk-clock, .sk-cloud, .sk-sky … — saver.js). Две разные системы под одним
префиксом в файле на 108 КБ — это будущая правка не в том месте.
Три решения, которые стоит объяснить:
1) Каркас появляется НЕ мгновенно, а через 120 мс (ldFade, delay .12s both).
Быстрый ответ (кэш, локальная сеть) успевает отрисоваться раньше — и
человек не видит вспышку серых прямоугольников на треть секунды. Мигание
каркаса читается хуже, чем его отсутствие.
2) Блик греется акцентом (#37293d против базового #212537), а не уходит в
чистый серый. Разница почти неразличима, но каркас перестаёт выглядеть
чужой заготовкой из UI-кита. Скорость 1.9s вместо 1.2s у старого .skel:
медленный блик читается как «работаем», быстрый — как «нервничаем».
3) Строка .ld-hint проявляется только на 2.6-й секунде. Это чистый CSS без
единой строки JS: opacity:0 + animation с задержкой. Молчим, пока всё
нормально; объясняемся, когда человек уже начал сомневаться.
========================================================================== */
/* База светлее --card (#151823) намеренно: каркас лежит и на фоне страницы
(#08090d), и внутри панелей того же --card. Взяли бы цвет карточки — на
странице фильма и в настройках каркас слился бы с панелью, и остался бы
виден только бегущий блик: пустая панель с бликом читается как поломка. */
.ld{
background:linear-gradient(100deg,#212537 34%,#37293d 50%,#212537 66%);
background-size:280% 100%;
animation:ldSweep 1.9s cubic-bezier(.45,0,.55,1) infinite;
border-radius:var(--r-sm);
}
@keyframes ldSweep{0%{background-position:180% 0}100%{background-position:-80% 0}}
/* Обёртка каркаса. Пауза перед показом — см. пункт 1 в шапке. */
.ldw{animation:ldFade .3s ease-out .12s both}
@keyframes ldFade{from{opacity:0}to{opacity:1}}
/* Плавная подстановка готового контента: страницы-SPA меняют innerHTML корня
целиком, и новые дети получают анимацию сами по себе — трогать двадцать
вызовов render не нужно.
Только opacity, без transform: transform на предке делает его containing
block для position:fixed внутри, и модалка с заставкой на время анимации
уехали бы не туда. */
.pgroot>*:not(.ldw){animation:ldIn .26s ease-out both}
@keyframes ldIn{from{opacity:0}to{opacity:1}}
/* --- примитивы ----------------------------------------------------------- */
.ld-l{height:13px;border-radius:6px}
.ld-l+.ld-l{margin-top:9px}
.ld-t{height:21px;border-radius:7px;width:190px}
.ld-h1{height:31px;border-radius:8px;width:58%;max-width:420px}
.ld-btn{height:44px;width:158px;border-radius:var(--r-md)}
.ld-btn.sm{width:118px}
.ld-pill{height:27px;width:92px;border-radius:var(--r-pill)}
.ld-poster{aspect-ratio:2/3;border-radius:var(--radius);width:100%}
.ld-w30{width:30%}.ld-w45{width:45%}.ld-w60{width:60%}.ld-w75{width:75%}
.ld-w88{width:88%}.ld-w100{width:100%}
/* margin, а не gap: в ТВ-вебвью gap местами не поддержан — по всему файлу для
ТВ раздаются такие же фолбэки. Здесь сразу на margin, чтобы не плодить их. */
.ld-row{display:flex;flex-wrap:wrap;margin:0 0 var(--s-3)}
.ld-row>*{margin:0 10px 10px 0}
/* --- лента и сетка карточек ---------------------------------------------- */
.ld-rail{display:flex;overflow:hidden;padding-bottom:var(--s-2);
-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
mask-image:linear-gradient(90deg,#000 86%,transparent)}
.ld-rail>.ld-card{flex:0 0 160px;width:160px;margin-right:14px}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-4)}
.ld-card .ld-l{margin-top:var(--s-2)}
/* --- крупные блоки ------------------------------------------------------- */
/* Витрина на главной — те же clamp-размеры, что у .spot. Не сплошной блик на
пол-экрана (он гипнотизирует), а тёмное поле с каркасом подписи внизу слева,
ровно там, где потом окажется настоящий заголовок. */
.ld-spot{min-height:clamp(300px,40vh,430px);border-radius:var(--radius-lg);margin:var(--s-1) 0 var(--s-3);
background:linear-gradient(100deg,var(--card) 0%,var(--bg2) 62%);
display:flex;align-items:flex-end;padding:30px;overflow:hidden}
.ld-spot>div{max-width:640px;width:100%}
/* Карточка фильма: постер 190px + колонка текста — геометрия .hero3-in.
flex-start обязателен: без него постер растягивается по высоте колонки с
текстом, aspect-ratio 2/3 перебивается, и вместо постера — узкая полоса. */
.ld-hero{display:flex;align-items:flex-start;padding:26px 28px;border-radius:var(--radius-lg);
background:var(--card);margin:2px 0 16px}
.ld-hero>.ld-hp{flex:0 0 190px;width:190px;margin-right:26px}
.ld-hero>.ld-hi{flex:1;min-width:0}
.ld-panel{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 20px;
margin:0 0 14px;background:var(--card)}
/* Плеер — единственное место, где каркас НЕ должен светиться: настоящий плеер
чёрный, и светлый слэб в пол-экрана вместо него читается как вспышка перед
тем, как экран погаснет. Тот же блик, но по тёмному и медленнее. */
.ld-player{aspect-ratio:16/9;border-radius:var(--r-lg);max-height:78vh;margin:8px 0 20px;
background:linear-gradient(100deg,#0c0e15 40%,#1a1526 50%,#0c0e15 60%);background-size:280% 100%;
animation:ldSweep 2.4s cubic-bezier(.45,0,.55,1) infinite;border:1px solid var(--line)}
.ld-tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-4)}
.ld-tv{aspect-ratio:16/9;border-radius:var(--r-md)}
.ld-set{display:grid;grid-template-columns:212px minmax(0,1fr);gap:var(--s-5);max-width:1080px}
.ld-setprof{height:92px;border-radius:var(--radius-lg);max-width:1080px;margin-bottom:18px}
.ld-navline{height:36px;border-radius:10px}
.ld-navline+.ld-navline{margin-top:2px}
/* --- строка «долго ждём» -------------------------------------------------- */
.ld-hint{display:block;text-align:center;color:var(--muted);font-size:var(--f-sm);
padding:26px 20px 4px;opacity:0;animation:ldHint .55s ease-out 2.6s forwards}
@keyframes ldHint{from{opacity:0}to{opacity:.85}}
/* --- слабое железо и вестибулярный аппарат -------------------------------- */
/* ТВ: бесконечный градиентный блик на 55" — это перерисовка всего экрана
каждый кадр при одном ядре. Каркас остаётся, движение уходит. */
.tvmode .ld,.tvmode .ld-player{animation:none;background:var(--card)}
.tvmode .ldw{animation:none}
.tvmode .pgroot>*:not(.ldw){animation:none}
@media (prefers-reduced-motion:reduce){
/* Глобальный блок выше схлопывает анимации в один кадр — подсказка про
«дольше обычного» выскочила бы сразу и на каждой загрузке. Она про долгое
ожидание, а не про загрузку вообще: без анимации ей нечего сообщать. */
.ld-hint{display:none}
.ld,.ld-player{background:var(--card)}
}
/* ============================================================================
«Загрузки» v2
----------------------------------------------------------------------------
Было: плоский список серых строк — название, чипы, четыре метрики в одну
строку мелким шрифтом, тонкая полоска. Всё одного веса, глазу не за что
зацепиться, и полка офлайна ничем не отличалась от таблицы в админке.
Стало: постер (лежит в БД с момента постановки в очередь — не стоит ни
одного запроса на отрисовку, а страница опрашивает API раз в 3 секунды),
крупный процент как главная цифра строки, метрики под ним, и группировка по
состоянию: сначала то, что происходит прямо сейчас, потом полка готового.
Имя .dlshelf, а не .shelf: .shelf/.shelf-h уже заняты полкой на главной.
========================================================================== */
.dlshelf{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:18px 22px;margin-bottom:var(--s-5);
background:linear-gradient(120deg,rgba(255,106,93,.13),rgba(124,147,255,.08) 58%,rgba(21,24,35,.7))}
.dlshelf-top{display:flex;align-items:baseline;flex-wrap:wrap;margin-bottom:12px}
.dlshelf-top>*{margin-right:14px}
.dlshelf-n{font-size:var(--f-xl);font-weight:700;line-height:1;letter-spacing:-.5px}
.dlshelf-n small{font-size:var(--f-md);font-weight:600;color:var(--muted);margin-left:5px}
.dlshelf-free{margin-left:auto;margin-right:0;color:var(--muted);font-size:var(--f-sm)}
.dlshelf-bar{position:relative;height:9px;border-radius:6px;background:rgba(8,9,13,.55);overflow:hidden}
.dlshelf-bar>i{display:block;height:100%;width:0;border-radius:6px;
background:linear-gradient(90deg,var(--accent),#ff9a72);transition:width .6s cubic-bezier(.3,.8,.4,1)}
.dlshelf-bar.hot>i{background:linear-gradient(90deg,#ff8a5c,#ff5b5b)}
.dlshelf-cap{margin-top:9px;font-size:var(--f-sm);color:var(--muted)}
/* Группа состояния: «Качается сейчас» / «На полке» / «Прервано» */
.dlgrp{display:flex;align-items:center;margin:var(--s-5) 0 var(--s-3)}
.dlgrp>*{margin-right:10px}
.dlgrp h3{margin:0;font-size:var(--f-md);font-weight:600;letter-spacing:.2px}
.dlgrp .cnt{font-size:12px;color:var(--muted);border:1px solid var(--line);
border-radius:var(--r-pill);padding:1px 9px}
.dl2{display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--line);
border-radius:var(--radius);background:var(--card);margin-bottom:10px;transition:border-color .15s}
.dl2:hover{border-color:var(--line-strong)}
.dl2-p{position:relative;flex:0 0 78px;width:78px;background:var(--bg2);overflow:hidden}
.dl2-p img{width:100%;height:100%;object-fit:cover;display:block}
.dl2-p .ph{display:grid;place-items:center;height:100%;color:var(--line-strong)}
.dl2-p .ph .ic{width:26px;height:26px}
.dl2-b{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
.dl2-h{display:flex;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.dl2-h>*{margin-right:9px}
.dl2-h b{font-size:var(--f-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:100%}
.dl2-m{color:var(--muted);font-size:var(--f-sm);line-height:1.45}
.dl2-m b{color:var(--txt2);font-weight:600}
/* Главная цифра строки. Раньше процент был четвёртым значением в общей строке
метрик и терялся среди скорости, ETA и гигабайтов. */
.dl2-pct{margin-left:auto;margin-right:0;font-size:var(--f-lg);font-weight:700;
color:var(--accent);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.dl2-pct.done{color:var(--ok)}
.dl2-pct.stop{color:#ff8080}
.dl2-bar{height:5px;border-radius:4px;background:var(--bg2);overflow:hidden;margin-top:10px}
.dl2-bar>i{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);
transition:width .8s cubic-bezier(.3,.8,.4,1)}
.dl2-bar.stop>i{background:#ff7a6b;transition:none}
/* Размер HLS-файла неизвестен до конца — процента нет, но движение есть. */
.dl2-bar.indet>i{width:34%;animation:indet 1.3s ease-in-out infinite}
.dl2-a{display:flex;align-items:center;padding:0 14px 0 4px;flex:none}
.dl2-a>*{margin-left:var(--s-2)}
.dl2-a .btn{padding:9px 15px;font-size:var(--f-sm)}
.dl2-a .btn.ghost{padding:9px 12px}
/* Живую загрузку видно рамкой: в списке из десятка строк понятно, какие идут,
не вчитываясь в метрики. */
.dl2.live{border-color:rgba(255,106,93,.32)}
.tvmode .dl2-bar.indet>i{animation:none;width:100%;opacity:.5}
@media(max-width:640px){
.dl2{flex-wrap:wrap}
.dl2-p{flex:0 0 62px;width:62px}
.dl2-a{width:100%;padding:0 14px 14px;justify-content:flex-end}
.dl2-a>*{margin-left:0;margin-right:var(--s-2)}
.ld-hero{display:block}
.ld-hero>.ld-hp{width:132px;margin:0 0 18px}
.ld-set{grid-template-columns:1fr}
.ld-set>.ld-setnav{display:none}
}