:root{
  --bg:#0a0d12;
  --panel:#151b25;
  --panel2:#1c2432;
  --panel3:#26314333;
  --line:#26314a;
  --line2:#37455f;
  --text:#eef2f8;
  --muted:#98a5ba;
  --accent:#ffb533;
  --accent-soft:rgba(255,181,51,.16);
  --ok:#35c46f;
  --font:"Segoe UI",Roboto,system-ui,Arial,sans-serif;
  --card-w:14.4rem;
  --card-h:21.6rem;
  --gap:1.05rem;
  --r:.75rem;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* clamp()/min() не розуміють Chromium 69–78 (VIDAA) — статичне значення
   перед ними відкидається непідтримуваним браузером і лишається 16px. */
html{font-size:16px;font-size:clamp(15px, min(.8333vw, 1.4815vh), 34px);}
html,body{height:100%;}
body{
  background:radial-gradient(130% 90% at 15% -15%,#151d2b 0%,var(--bg) 58%);
  color:var(--text);
  font-family:var(--font);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
.hidden{display:none!important;}
[data-act]{cursor:pointer;}
#view{position:absolute;top:0;right:0;bottom:0;left:18.4rem;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;transition:left .22s ease;}
body.side-closed #view{left:5.2rem;}
#view::-webkit-scrollbar{width:.45rem;}
#view::-webkit-scrollbar-thumb{background:var(--line);border-radius:1rem;}

#loading{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:rgba(8,11,16,.82);
  color:var(--muted);font-size:1.15rem;
}
.spinner{
  width:3.2rem;height:3.2rem;border-radius:50%;
  border:.4rem solid var(--panel2);border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

#toast-wrap{
  position:absolute;right:1.5rem;bottom:1.5rem;z-index:130;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;
  pointer-events:none;max-width:42rem;
}
.toast{
  padding:.75rem 1.15rem;border-radius:.8rem;
  background:rgba(21,27,37,.97);border:1px solid var(--line2);
  color:var(--text);font-size:1rem;
  animation:tin .2s ease-out;
}
@keyframes tin{from{transform:translateY(.6rem);opacity:0;}}
.err{color:#ff9d9a;padding:3rem 1.6rem;text-align:center;font-size:1.05rem;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.35rem;border-radius:999px;
  background:var(--panel);color:var(--text);
  border:3px solid transparent;
  font-weight:600;font-size:1rem;white-space:nowrap;
  cursor:pointer;
}
.btn.more{background:transparent;border:3px solid var(--line2);color:var(--muted);}
.btn.pbtn{min-width:3.1rem;padding:.45rem .9rem;font-weight:700;}
.btn.play{background:var(--accent);color:#1b1400;font-size:1.15rem;padding:.7rem 1.9rem;font-weight:800;}
.btn.src{font-size:.98rem;}
.btn.on{background:var(--accent);color:#1b1400;border-color:var(--accent);}
.btn.focused{border-color:var(--accent);background:var(--accent-soft);color:#fff;}
.btn.play.focused{background:#ffd28a;color:#1b1400;}
.btn.more.focused{background:var(--accent-soft);color:var(--text);}

/* SVG-гліфи: ⌫ ✕ ▸ ◀ ▶ ⏸ ⟨⟩ ★ ✓ ⚠ немає у вбудованому шрифті TV,
   тому в клавіатурі/плеєрі/чипах вони малюються як <svg class="gl">. */
.gl{width:1.15em;height:1.15em;vertical-align:-.16em;flex:0 0 auto;}
.btn .gl{width:1.2rem;height:1.2rem;vertical-align:-.2rem;}
.btn.play .gl{width:1.35rem;height:1.35rem;vertical-align:-.24rem;}
.key .gl{width:1.55rem;height:1.55rem;}
.pnav .gl{width:2rem;height:2rem;}
.epplay .gl,.epres .gl{width:1.15rem;height:1.15rem;vertical-align:-.16rem;}
.chip .gl{width:1.05rem;height:1.05rem;vertical-align:-.15rem;}
.shead .gl,.resumechip .gl,.bwatch .gl,.dchip .gl{width:1.1rem;height:1.1rem;vertical-align:-.16rem;}

.navrow{
  display:flex;gap:.6rem;overflow-x:auto;overflow-y:hidden;
  padding:1rem 1.6rem .3rem;
  scrollbar-width:none;
}
.navrow::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  padding:.45rem 1.15rem;border-radius:999px;
  background:var(--panel);border:3px solid transparent;
  color:var(--muted);font-weight:600;font-size:1rem;white-space:nowrap;
  cursor:pointer;
}
.chip.on{background:var(--panel3);color:var(--text);}
.chip.focused{border-color:var(--accent);background:var(--accent-soft);color:var(--text);}

.rowhead{
  display:flex;align-items:center;gap:1rem;
  padding:1.35rem 1.6rem .5rem;
}
.rt{font-size:1.3rem;font-weight:800;}

.side{
  position:fixed;left:0;top:0;bottom:0;z-index:40;
  width:17rem;
  display:flex;flex-direction:column;
  padding:.55rem .6rem .9rem;
  background:rgba(10,13,18,.97);
  border-right:1px solid var(--line);
  transition:width .22s ease;
  overflow:hidden;
}
.side.menu-closed{width:4.4rem;}
.brand{
  flex:0 0 auto;
  display:flex;align-items:center;
  height:3rem;margin-bottom:.35rem;
  padding:.2rem .7rem;
  font-size:1.12rem;font-weight:800;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;
  color:var(--text);
  border-radius:.7rem;
}
.brand-full span{color:var(--accent);}
.side.menu-closed .brand-full{display:none;}
.side.menu-open .brand-logo{display:none;}
.brand-logo{
  display:inline-block;
  font-size:.95rem;font-weight:800;letter-spacing:.05em;
  padding:.25rem .55rem;border-radius:.55rem;
  background:var(--accent);color:#1b1400;
}
.rail{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.msep{
  height:1px;margin:.5rem .3rem .65rem;
  background:var(--line);border:0;
  flex:0 0 auto;
}
.side.menu-closed .msep{margin:.5rem .6rem .65rem;}
.mitem{
  position:relative;
  display:flex;align-items:center;gap:.85rem;
  padding:.62rem .8rem;
  margin-bottom:.3rem;border-radius:.7rem;
  color:var(--muted);font-weight:600;font-size:1rem;
  white-space:nowrap;overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
}
.mitem .mic{flex:0 0 auto;font-size:1.28rem;line-height:1;width:1.6rem;text-align:center;}
.mitem .mic svg{width:1.28rem;height:1.28rem;display:block;margin:0 auto;}
.mitem .mname{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.mitem .mrow{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:.1rem;line-height:1.15;}
.mitem .msub{
  font-size:.72rem;font-weight:600;color:var(--accent);opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side.menu-closed .mitem .mrow{display:none;}
.side.menu-closed .mitem{justify-content:center;padding:.62rem 0;}
.side.menu-closed .mitem .mname{display:none;}
.mitem.on{background:var(--accent-soft);color:var(--text);}
.mitem.bottom{padding-left:.8rem;}
.mitem.focused{
  background:var(--accent-soft);color:var(--text);
  box-shadow:inset 0 0 0 3px var(--accent);
}
.rail-bottom{
  flex:0 0 auto;
  display:flex;flex-direction:column;
}
.row{
  display:flex;gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;
  /* вертикальний запас ≥6px: інакше overflow-x:auto обрізає фокус-рейнг картки */
  padding:.7rem .6rem 1.1rem;
  scrollbar-width:none;
}
.row::-webkit-scrollbar{display:none;}

.frow{
  display:flex;gap:.6rem;overflow-x:auto;overflow-y:hidden;
  padding:.9rem 1.6rem .3rem;
  scrollbar-width:none;
}
.frow::-webkit-scrollbar{display:none;}

.fcap{
  padding:1rem 1.6rem .1rem;
  font-size:.85rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.ovgrid{
  display:flex;flex-direction:column;gap:.55rem;
  padding:.8rem 1.6rem 1.2rem;
  max-width:58rem;
}
.ovgrid .chip{
  justify-content:flex-start;
  text-align:left;
  font-size:1.05rem;
  padding:.6rem 1.3rem;
  border-radius:.8rem;
}
.hint{color:var(--muted);font-size:.95rem;}

.card{
  width:var(--card-w);flex:0 0 auto;
  cursor:pointer;
}
.cimg{
  position:relative;
  width:var(--card-w);height:var(--card-h);
  border-radius:var(--r);overflow:hidden;
  background-color:var(--panel2);
  background-position:center;background-repeat:no-repeat;background-size:cover;
}
.card.focused .cimg{
  box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--accent-soft),0 .8rem 1.8rem rgba(0,0,0,.5);
}
.bq,.ba,.bsrc{
  position:absolute;padding:.12rem .55rem;border-radius:.5rem;
  font-size:.8rem;font-weight:700;
  background:rgba(8,11,16,.82);
  z-index:2;
}
.bq{left:.4rem;top:.4rem;color:#ffd479;}
.ba{right:.4rem;top:.4rem;color:#ff9a8a;}
.bsrc{left:.4rem;bottom:.4rem;color:#0a2410;background:rgba(94,222,130,.9);}
/* Переглянуто: ч/б постер + позначка «✓» (вік відсувається нижче). */
.bwatch{
  position:absolute;right:.4rem;top:.4rem;z-index:3;
  padding:.12rem .55rem;border-radius:.5rem;
  font-size:.85rem;font-weight:800;line-height:1.4;
  background:rgba(18,74,40,.92);color:#9ff2b6;
  box-shadow:0 1px 4px rgba(0,0,0,.55);
}
.card.watched .ba{top:2.5rem;}
.card.watched .cimg img{filter:grayscale(1) contrast(.95) brightness(.88);}
.cimg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:66%;
  border-radius:inherit;
  background:linear-gradient(to top,rgba(8,11,16,.97) 0%,rgba(8,11,16,.55) 62%,rgba(8,11,16,0) 100%);
  pointer-events:none;z-index:1;
}
.cover{
  position:absolute;left:.55rem;right:.55rem;bottom:.45rem;z-index:2;
  pointer-events:none;
}
.ct{
  font-size:1rem;font-weight:700;line-height:1.22;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
.cmeta{
  margin-top:.14rem;font-size:.78rem;font-weight:600;color:#c7d2e2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.92;
}
.card.focused .ct{color:var(--accent);}
.pbar{
  position:absolute;left:0;bottom:0;height:.3rem;z-index:3;
  background:var(--accent);
}
.arow{margin-top:.45rem;}
.resumechip{
  margin-top:.5rem;
  display:inline-block;
  padding:.35rem 1rem;border-radius:999px;
  background:rgba(169,242,168,.12);
  border:1px solid rgba(169,242,168,.35);
  color:#a9f2a8;font-weight:600;font-size:.9rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,7),var(--card-w));
  gap:var(--gap);
  justify-content:start;
  padding:1.2rem 1.6rem 1.6rem;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
.grid::-webkit-scrollbar{display:none;}
.grid .card{width:auto;}
.grid .card .cimg{width:100%;}
.pager{
  display:flex;align-items:center;gap:.45rem;
  padding:.2rem 1.6rem 2rem;
  overflow-x:auto;scrollbar-width:none;
}
.pager::-webkit-scrollbar{display:none;}
.pager .pdot{padding:.45rem .15rem;color:var(--muted);font-weight:700;flex:none;}

.shead{
  padding:1.2rem 1.6rem .2rem;
  font-size:1.05rem;color:var(--muted);
}
.rowhead .rt .q{color:var(--accent);}
.rowhead .rt .wssrc{color:var(--accent);font-size:.8rem;font-weight:700;margin-left:.4rem;opacity:.9;white-space:nowrap;}
.krow{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:.5rem;
  padding:.4rem 1.6rem;
}
.key{
  min-width:0;height:3.6rem;padding:0 .4rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:.8rem;
  background:var(--panel);border:3px solid transparent;
  font-size:1.25rem;font-weight:600;
  cursor:pointer;
}
.key.sp2{grid-column:span 2;}
.key.sp4{grid-column:span 4;}
.key.go{background:var(--accent);color:#1b1400;font-weight:800;letter-spacing:.02em;}
.key.lang{background:var(--panel2);border:3px solid rgba(255,255,255,.16);font-weight:800;letter-spacing:.04em;}
.key.lang.focused{border-color:var(--accent);background:var(--accent-soft);}
.key.focused{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.06);box-shadow:0 .3rem 1.2rem rgba(0,0,0,.45);}
.key.go.focused{background:#ffd28a;}
.caret{color:var(--accent);font-weight:700;animation:caretblink 1.06s steps(1,end) infinite;}
@keyframes caretblink{50%{opacity:0;}}
.rhead2{
  padding:1.3rem 1.6rem .1rem;
  font-size:1.2rem;font-weight:800;color:var(--muted);
}

.dcols{
  display:flex;gap:2.2rem;align-items:flex-start;
  padding:1.2rem 1.8rem .3rem;
}
.dposter{
  flex:0 0 23rem;
  display:flex;flex-direction:column;gap:.65rem;
}
.posterw{
  position:relative;overflow:hidden;
  width:23rem;height:34.5rem;
  border-radius:var(--r);
  background-color:var(--panel2);
  border:3px solid var(--line);
}
/* Постери тепер <img loading="lazy"> (див. app.js posterImg): прибираємо
   повне завантаження всіх фонів у пам'ять на ТВ. */
.pimg{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.posterw .pimg{border-radius:calc(var(--r) - 3px);}
/* Один ряд дій під постером: «Дивитися» + значки обраного/пізнішого. */
.dactions{
  display:flex;align-items:stretch;
}
.dactions .play{
  flex:1 1 auto;min-width:0;width:auto;align-self:stretch;
  padding:.7rem .5rem;
  font-size:1.04rem;
}
.dactions .ibtn{
  flex:0 0 auto;
  width:3.4rem;height:3.4rem;padding:0;
  border-radius:.9rem;
}
.dactions .ibtn .meg{width:1.6rem;height:1.6rem;}
.ibtn.on svg{fill:currentColor;}
.dactions .resumechip{
  flex:1 1 auto;margin-top:0;
  display:flex;align-items:center;justify-content:center;
}
.dinfo{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:.7rem;
}
.dtitle{font-size:2.2rem;font-weight:800;line-height:1.12;}
.dorig{color:var(--muted);font-size:1.02rem;font-weight:600;}
.dmeta{display:flex;flex-wrap:wrap;gap:.45rem;}
.dchip{
  padding:.28rem .85rem;border-radius:999px;
  background:var(--panel);color:var(--muted);
  font-size:.92rem;font-weight:600;
}
.dchip.r{color:var(--accent);font-weight:700;background:var(--accent-soft);}
.dfacts{list-style:none;display:flex;flex-direction:column;gap:.42rem;}
.dfacts li{
  display:flex;gap:.8rem;align-items:baseline;
  font-size:.98rem;line-height:1.5;
}
.dfacts li span{
  flex:0 0 8rem;color:var(--muted);font-weight:600;
}
.dfacts li b{color:var(--text);font-weight:600;}
.dfacts i{font-style:normal;}
.dfacts .fl{border-radius:.5rem;padding:.04rem .34rem;cursor:pointer;}
.dfacts .fl.plain{cursor:default;padding-left:0;padding-right:0;}
.dfacts .fl.focused{background:var(--accent-soft);color:var(--accent);font-weight:700;}
.dshort{
  color:#c6d0de;font-size:1rem;line-height:1.6;
  max-width:60rem;
}
.ddesc{
  color:#c6d0de;font-size:1rem;line-height:1.6;white-space:pre-line;
  max-width:64rem;
}
.dgenres{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 1.8rem .2rem;}
.play{
  align-self:flex-start;
  min-width:16rem;padding:.95rem 2.1rem;
  font-size:1.32rem;font-weight:800;
  border-radius:.9rem;
}
.play.focused{background:var(--accent);color:#1b1400;border-color:var(--accent);box-shadow:0 0 0 .3rem var(--accent-soft);}
.srow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:1.2rem 1.8rem .4rem;
}
.sone{padding:.5rem 1rem;border-radius:.7rem;background:var(--panel);color:var(--muted);font-size:.95rem;}
.setgrp{
  padding:1.35rem 1.8rem .3rem;
  color:var(--muted);font-size:.92rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.optrow{
  display:flex;flex-wrap:wrap;gap:.6rem;
  padding:.3rem 1.8rem .6rem;
}
.opt{padding:.7rem 1.4rem;font-size:1rem;font-weight:600;border-radius:.75rem;}
.opt.on{background:var(--accent);color:#1b1400;border-color:var(--accent);}
/* Чіпи-зони налаштувань (ряд 0): Left/Right перемикають зону. */
.zonebar{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem 1.8rem .4rem;}
.zonebar .zone{font-weight:700;letter-spacing:.02em;}
.setabout{
  padding:1.6rem 1.8rem 3rem;
  color:var(--muted);font-size:.92rem;line-height:1.55;max-width:60rem;
}
.setlabel{
  flex:1 1 100%;
  padding:.35rem 0 .2rem;
  color:var(--text);font-weight:600;font-size:.98rem;
  min-height:1.2rem;
}
.setlabel .meg{width:1.1rem;height:1.1rem;vertical-align:-.18rem;margin-right:.35rem;color:var(--accent);}
/* Діагностика мікрофона: лог клавіш + результати тестів. */
.miclog{
  margin:.4rem 1.8rem .6rem;padding:.7rem 1rem;
  background:var(--panel);border:1px solid var(--line2);border-radius:.7rem;
  font-family:ui-monospace,Consolas,"Courier New",monospace;
  font-size:.95rem;line-height:1.5;min-height:6rem;max-height:18rem;overflow:auto;
}
.miclog .mline{white-space:pre-wrap;word-break:break-word;}
.miclog .mline.dim{color:var(--muted);font-family:inherit;}
.mic-ok{color:#3ddc84;font-weight:700;}
.mic-no{color:#ff6b6b;font-weight:700;}
.optrow .btn svg{width:1.2rem;height:1.2rem;margin-right:.5rem;vertical-align:-.22rem;}
.off{
  color:var(--muted);font-size:.8rem;font-weight:600;
  background:var(--panel);border:1px solid var(--line2);
  padding:.06rem .55rem;border-radius:999px;
  margin-left:.35rem;
}
.btn.dis{opacity:.32;}
.pcard{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:1.4rem 1.8rem 0;
}
.pavatar{
  width:5.2rem;height:5.2rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:3px solid var(--line2);
}
.pavatar svg{width:2.9rem;height:2.9rem;color:var(--muted);}
.srow .btn svg{width:1.2rem;height:1.2rem;margin-right:.45rem;}
.pid{font-size:1.08rem;color:var(--muted);}
.pid b{color:var(--text);}
.pstats{
  display:flex;gap:.8rem;flex-wrap:wrap;
  padding:.4rem 1.8rem .6rem;
}
.pstat{
  min-width:9rem;padding:.85rem 1.2rem;border-radius:.85rem;
  background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.25rem;
}
.pstat b{font-size:1.5rem;color:var(--accent);}
.psn{color:var(--muted);font-size:.86rem;}
.pnote{
  padding:.2rem 1.8rem .6rem;color:var(--muted);font-size:.94rem;line-height:1.45;
}
.pmuted{color:var(--muted);font-weight:400;}

/* --- Telegram pairing --- */
.pwrap{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding:1.6rem 1.8rem 2rem;text-align:center;
}
.pqr{
  background:#fff;padding:1rem;border-radius:1.1rem;line-height:0;
  box-shadow:0 .5rem 2rem rgba(0,0,0,.35);
}
.pqr svg{width:30rem;width:min(30rem,62vw);height:auto;display:block;}
.pcode{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:2.1rem;font-weight:800;letter-spacing:.18em;
  color:var(--accent);
}
.pdesc{color:var(--muted);font-size:1.02rem;line-height:1.5;max-width:38rem;}
.pdesc b{color:var(--text);}
.pok svg{width:4.5rem;height:4.5rem;color:var(--accent);}
.pstat-line{color:var(--muted);font-size:.94rem;min-height:1.4rem;}
.perr{color:#ff8a7a;font-size:1.02rem;}
.pwrap .srow{justify-content:center;padding:0;}
.pwrap .srow .btn{justify-content:center;}

/* --- Голос із телефона (Фаза B): QR на ТВ + сторінка #/voice на телефоні --- */
body.phone-page #side{display:none;}
body.phone-page #view{left:0;}
.vrow{display:flex;gap:1.4rem;align-items:flex-start;padding:1rem 1.4rem;}
.vqr{background:#fff;padding:.9rem;border-radius:1rem;line-height:0;flex:0 0 auto;}
.vqr svg{width:min(22rem,42vw);height:auto;display:block;}
.vmeta{display:flex;flex-direction:column;gap:.7rem;min-width:0;}
.vcode{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:2rem;font-weight:800;letter-spacing:.2em;color:var(--accent);
}
.vurl{font-size:.78rem;color:var(--muted);word-break:break-all;opacity:.75;}
.vinp{
  width:100%;max-width:56rem;box-sizing:border-box;
  background:var(--panel);color:var(--text);
  border:1px solid var(--line2);border-radius:.8rem;
  padding:.9rem 1rem;font-size:1.15rem;outline:none;
  user-select:text;-webkit-user-select:text;
}
.vinp:focus{border-color:var(--accent);}
.btn.big{font-size:1.3rem;padding:1.05rem 1.7rem;}
/* --- Мікро-пульт телефона (сторінка голосу #/voice) --- */
.vphone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.3rem;min-height:100%;padding:2rem 1.4rem 2.4rem;text-align:center;
}
.vtop{color:var(--muted);font-size:.95rem;}
.vtop b{
  color:var(--text);letter-spacing:.12em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.vmic{
  position:relative;width:9.5rem;height:9.5rem;border-radius:50%;
  background:var(--panel2);border:2px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.vmic .gl{width:3.8rem;height:3.8rem;color:var(--text);transition:color .18s;}
.vmic:active{transform:scale(.96);}
.vmic.on{background:#c62828;border-color:#ef5350;}
.vmic.on .gl{color:#fff;}
/* Пульсація-кільце, поки мікрофон реально слухає */
.vmic.on::before,.vmic.on::after{
  content:"";position:absolute;inset:-.45rem;border-radius:50%;
  border:2px solid rgba(239,83,80,.6);pointer-events:none;
  animation:vpulse 1.5s ease-out infinite;
}
.vmic.on::after{animation-delay:.75s;}
@keyframes vpulse{from{transform:scale(1);opacity:.9;}to{transform:scale(1.55);opacity:0;}}
.vmicwrap[data-off] .vmic{opacity:.4;}
.vstate{min-height:1.6rem;color:var(--muted);font-size:1.05rem;max-width:34rem;}
.vbar{display:flex;gap:.7rem;width:100%;max-width:42rem;align-items:center;}
.vbar .vinp{flex:1 1 auto;}
.vsend{
  flex:0 0 auto;width:3.6rem;height:3.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#1b1400;
}
.vsend .gl{width:1.6rem;height:1.6rem;}
.vnote{color:var(--muted);font-size:.85rem;opacity:.85;max-width:34rem;line-height:1.45;}
/* QR-оверлей поверх вікна пошуку (клавіша-мікрофон у клавіатурі). */
.key.mic{background:var(--panel2);}
.key.mic .gl{width:1.8rem;height:1.8rem;}
.key.mic.focused{border-color:var(--accent);background:var(--accent-soft);}
.vov{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,9,14,.93);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.vovin{
  display:flex;gap:1.8rem;align-items:center;
  background:var(--panel);border:1px solid var(--line2);
  border-radius:1.2rem;padding:1.8rem 2rem;max-width:92vw;
  box-shadow:0 1rem 3rem rgba(0,0,0,.5);
}
.vov .vqr{background:#fff;padding:1rem;border-radius:1rem;line-height:0;flex:0 0 auto;}
.vov .vqr svg{width:min(34rem,44vw);height:auto;display:block;}
.vov .vmeta{display:flex;flex-direction:column;gap:.8rem;min-width:0;max-width:36rem;}
.vov .srow{padding:0;}
.vov .btn{justify-content:center;}
.ephead{
  padding:1.3rem 1.8rem .2rem;
  font-size:1.25rem;font-weight:800;
}
/* Повноекранна панель вибору сезону/серії («Дивитися» на серіалі):
   в'їжджає знизу й займає весь екран. */
.epfull{
  min-height:100%;
  display:flex;flex-direction:column;
  animation:epin .24s ease;
}
@keyframes epin{from{opacity:0;transform:translateY(4.5rem);}to{opacity:1;transform:none;}}
.epfhead{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem 1.8rem .2rem;
}
.epftitle{
  flex:1;min-width:0;
  font-size:1.5rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.epftitle .epfsel{color:var(--muted);font-weight:700;font-size:1.1rem;}
.epfull .ephead{padding-top:1.1rem;}
.epfull .grid{padding-bottom:3rem;}
.srow.season .sheadl{color:var(--muted);font-weight:700;margin-right:.2rem;white-space:nowrap;}
.epbadge{
  position:absolute;left:.4rem;top:.4rem;
  padding:.12rem .55rem;border-radius:.5rem;
  font-size:.8rem;font-weight:800;
  background:rgba(8,11,16,.86);color:var(--accent);
}
.epres{
  position:absolute;left:.4rem;bottom:.4rem;
  padding:.1rem .45rem;border-radius:.5rem;
  font-size:.72rem;font-weight:700;
  background:rgba(8,11,16,.86);color:#ffd97a;
}
.epcard.epresum{outline:1px solid rgba(255,217,122,.4);outline-offset:-1px;}
/* Серії — горизонтальні прев'ю 16:9 (aspect-ratio немає в Chromium 69–79). */
.grid .epcard .cimg{height:calc(var(--card-w) * 9 / 16);}
.epcard .ct{margin-top:.4rem;}
.epplay{
  position:absolute;right:.4rem;bottom:.4rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:#1b1400;
  background:var(--accent);
  opacity:.92;
}

#player{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;
  background:#000;
}
#player video{width:100%;height:100%;display:block;background:#000;}
.pmedia{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;}
.pui{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;
  pointer-events:none;
}
.pui>*{pointer-events:auto;}
.ptop{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.4rem;
  background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 78%,rgba(0,0,0,0) 100%);
}
.pinfo{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.ptitle{
  font-size:1.2rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pep{
  font-size:.95rem;color:var(--accent);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pnav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:6;
  width:3.4rem;height:3.4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border:3px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.5rem;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pnav.prev{left:1.4rem;}
.pnav.next{right:1.4rem;}
.pnav.focused{background:var(--accent);border-color:var(--accent);color:#1b1400;box-shadow:0 0 0 .3rem var(--accent-soft);}
.pnav:active{transform:translateY(-50%) scale(.94);}
.pov{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;
  gap:.2rem;
  padding:1rem 1.4rem 1.3rem;
  background:linear-gradient(0deg,rgba(0,0,0,.94),rgba(0,0,0,0));
  max-height:46vh;overflow:hidden;
}
.pctrl{
  display:flex;align-items:center;justify-content:center;
  gap:.8rem;
  width:76rem;width:min(100%,76rem);
  flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  /* запас для фокус-рейнга/тіні кнопок (overflow обрізає без padding) */
  padding:.65rem .4rem;
  scrollbar-width:none;
}
.pctrl::-webkit-scrollbar{display:none;}
.pgl,.pgm,.pgr{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;}
.pgl{flex:1 1 0;justify-content:flex-start;}
.pgr{flex:1 1 0;justify-content:flex-end;}
.pgm{flex:0 0 auto;}
.ptime{
  color:var(--muted);font-size:.95rem;
  max-width:76rem;text-align:center;
}
.ptime span{color:var(--text);font-weight:600;}
.pstate{color:var(--accent);font-weight:700;margin-left:.5rem;}
.pprog{
  width:76rem;width:min(100%,76rem);
  position:relative;height:.55rem;
  background:rgba(255,255,255,.2);border-radius:1rem;overflow:hidden;
  cursor:pointer;touch-action:none;
  transition:height .15s ease,background .15s ease,box-shadow .15s ease;
}
.pprog:hover{height:.8rem;background:rgba(255,255,255,.3);}
.pprog:hover .pfill{box-shadow:0 0 .5rem var(--accent);}
/* Фокус пультом: таймлайн підсвічується і росте — зрозуміло, що ←/→
   прокручуватимуть саме його. */
.pprog.focused{
  height:1rem;background:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--accent-soft);
}
.pprog.focused .pfill{box-shadow:0 0 .7rem var(--accent);}
.pbuf{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.42);}
.pfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);}
.pbuff{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);
}

/* ======================================================================
   Flexbox `gap` ?'?????? ? Chromium 84, ? VIDAA-?????????? ?????? ??
   69�79. ???, ?? gap ?? ?????????????, ??????? ?????????? ???????.
   @supports ?? ??????? CSS Grid (???? gap ?????? ? Chrome 57) � ????
   .grid/mitem-???? ? ????? ????? ????? ? ????????? ????????? ?? ????.
   ====================================================================== */
@supports not (gap: 1px) {
  #loading > * + *{margin-left:1rem;}
  #toast-wrap > * + *{margin-top:.5rem;}
  .navrow > * + *{margin-left:.6rem;}
  .rowhead > * + *{margin-left:1rem;}
  .mitem > * + *{margin-left:.85rem;}
  .mrow > * + *{margin-top:.1rem;}
  .row > * + *{margin-left:var(--gap);}
  .frow > * + *{margin-left:.6rem;}
  .ovgrid > * + *{margin-top:.55rem;}
  .krow > *{margin:0 .5rem .5rem 0;}
  .dcols > * + *{margin-left:2.2rem;}
  .dposter > * + *{margin-top:.65rem;}
  .dinfo > * + *{margin-top:.7rem;}
  .dmeta > *{margin:0 .45rem .45rem 0;}
  .dfacts > li + li{margin-top:.42rem;}
  .dfacts li > * + *{margin-left:.8rem;}
  .dactions > * + *{margin-left:.6rem;}
  .srow > *{margin:0 .6rem .6rem 0;}
  .optrow > *{margin:0 .6rem .6rem 0;}
  .pstats > *{margin:0 .8rem .8rem 0;}
  .pstat > * + *{margin-top:.25rem;}
  .pwrap > * + *{margin-top:1.1rem;}
  .pcard > * + *{margin-left:1.4rem;}
  .pov > * + *{margin-top:.2rem;}
  .pctrl > * + *{margin-left:.8rem;}
  .pgl > * + *,.pgm > * + *,.pgr > * + *{margin-left:.5rem;}
  .pinfo > * + *{margin-top:.15rem;}
}

/* ======================================================================
   ???????? ???? (???????????? �???????? ????�): ????? ??/????????
   ????????? ???? ?????? (overscan) � ??????????? ????? ??? ?????.
   ====================================================================== */
body.safe-area #view{top:2.2vh;bottom:2.2vh;right:1.6vw;}
body.safe-area .side{top:2.2vh;bottom:2.2vh;}
body.safe-area .pov{padding-bottom:calc(1.3rem + 2.2vh);}
body.safe-area .ptop{padding-top:calc(1rem + 2.2vh);}
body.safe-area #toast-wrap{bottom:calc(1.5rem + 2.2vh);right:calc(1.5rem + 1.6vw);}

/* ======================================================================
   Актори: комірка списку (/find/cast/) — іконка + імʼя (фото uakino не
   має); в Обраному ті самі комірки для акторів і підбірок.
   ====================================================================== */
.acell{
  width:var(--card-w);min-height:7.2rem;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem .7rem;text-align:center;cursor:pointer;
  background:var(--panel);border:3px solid transparent;border-radius:var(--r);
}
.acell .aav{
  width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--muted);
}
.acell .aav svg{width:1.7rem;height:1.7rem;}
.acell .act{
  font-size:.98rem;font-weight:600;line-height:1.25;
  overflow-wrap:anywhere;
}
.acell .acn{color:var(--muted);font-weight:400;font-size:.85em;}
.acell.focused{border-color:var(--accent);background:var(--accent-soft);}
.acell.focused .aav{color:var(--accent);}
.grid.rm .card,.grid.rm .acell{outline:2px dashed #e35d5d;outline-offset:-2px;}
.btn.favcol{min-width:2.6rem;padding:.45rem .8rem;}
.btn.favcol.on{color:var(--accent);border-color:var(--accent);background:transparent;}
.catactor{align-items:center;}