:root {
  --bg: #0c0c10; --surface: #17171f; --surface2: #22222c; --line: #2c2c38;
  --text: #ededed; --muted: #9da4b6; --accent: #6b4eff; --accent2: #8b6eff;
  --amber: #f5b83d; --green: #3ecf8e; --ring: #ffffff;
  --safe-x: 96px; --safe-y: 54px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: var(--bg);
  transform-origin: 0 0; overflow: hidden; }
#app { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* backdrop */
.bd { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.bd img, .bd video { position: absolute; right: 0; top: 0; width: 1600px; height: 900px; object-fit: cover;
  transition: opacity .5s ease; }
.bd video { opacity: 0; }
.bd video.on { opacity: 1; }
.bd::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--bg) 22%, rgba(12,12,16,.85) 40%, rgba(12,12,16,.2) 70%, rgba(12,12,16,.35) 100%),
              linear-gradient(0deg, var(--bg) 18%, rgba(12,12,16,.6) 45%, rgba(12,12,16,0) 70%); }
.bd.full img, .bd.full video { width: 1920px; height: 1080px; }

/* top nav */
.nav { position: absolute; left: var(--safe-x); right: var(--safe-x); top: var(--safe-y); height: 64px;
  display: flex; align-items: center; z-index: 5; }
.nav .logo { height: 104px; margin: 0 8px 0 -40px; opacity: .95; }
.tab { height: 56px; padding: 0 26px; border-radius: 28px; display: flex; align-items: center;
  font-size: 28px; font-weight: 600; color: var(--muted); transition: transform .15s, background .15s, color .15s; }
.tab.active { color: var(--text); }
.tab.active::after { content: ""; position: absolute; }
.tab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); }
.tab.focused { background: var(--text); color: #111; transform: scale(1.06); }
.nav .spacer { flex: 1; }
.chip-user { display: flex; align-items: center; font-size: 24px; color: var(--muted); }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--surface2); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: var(--text); }
.avatar.sub { background: linear-gradient(135deg, var(--accent), #b04eff); }

/* info panel */
.info { position: absolute; left: var(--safe-x); top: 176px; width: 1150px; z-index: 3; }
.kicker { display: flex; align-items: center; height: 36px; }
.badge { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 22px; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.12); color: var(--text); white-space: nowrap; }
.badge.tv { background: var(--accent); }
.badge.rent { background: var(--amber); color: #1a1205; }
.badge.free { background: rgba(62,207,142,.18); color: var(--green); }
.badge.leave { background: rgba(255,255,255,.9); color: #111; }
.title { font-size: 76px; font-weight: 800; line-height: 1.05; margin-top: 14px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { font-size: 26px; color: var(--muted); margin-top: 14px; display: flex; align-items: center; }
.meta .r { border: 2px solid var(--muted); border-radius: 6px; padding: 0 8px; font-size: 22px; line-height: 28px; }
.logline { font-size: 30px; line-height: 1.35; margin-top: 18px; max-width: 1000px; color: #d7d9e0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btns { display: flex; margin-top: 30px; transition: opacity .2s; }
.btn { height: 68px; padding: 0 34px; border-radius: 14px; background: rgba(255,255,255,.14); font-size: 28px; font-weight: 700;
  display: flex; align-items: center; white-space: nowrap; transition: transform .15s, background .15s, color .15s; }
.btn .sub { font-weight: 500; font-size: 22px; opacity: .75; }
.btn.primary { background: var(--accent); }
.btn.focused { background: var(--text); color: #111; transform: scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.btn.icon { width: 68px; padding: 0; justify-content: center; font-size: 32px; }
.hide { opacity: 0; pointer-events: none; }

/* rows */
.rows-vp { position: absolute; left: 0; right: 0; top: 600px; bottom: 0; overflow: hidden; z-index: 2; }
.rows-in { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.row { padding: 0 0 36px 0; }
.row h3 { font-size: 30px; font-weight: 700; margin: 0 var(--safe-x) 16px; display: flex; align-items: baseline; }
.row h3 small { font-size: 22px; color: var(--muted); font-weight: 500; }
.track { display: flex; padding: 0 var(--safe-x); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.card { flex: 0 0 400px; }
.card .pic { position: relative; width: 400px; height: 225px; border-radius: 14px; overflow: hidden; background: var(--surface);
  transition: transform .18s ease; }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .ct { font-size: 24px; margin-top: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s; }
.card.focused .pic { transform: scale(1.08); box-shadow: 0 0 0 5px var(--ring), 0 10px 24px rgba(0,0,0,.55); }
.card.focused .ct { color: var(--text); }
.card .tl { position: absolute; left: 10px; top: 10px; display: flex; }
.card .tl .badge { height: 32px; font-size: 22px; padding: 0 10px; }
.card .lock { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.card .dur { position: absolute; right: 10px; bottom: 10px; font-size: 22px; font-weight: 600; background: rgba(0,0,0,.65);
  padding: 2px 10px; border-radius: 6px; }
.card .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.25); }
.card .prog i { display: block; height: 100%; background: var(--accent2); }
.row.dim .card:not(.focused) .pic { filter: brightness(.85); }
.card .num { position: absolute; left: 14px; bottom: -22px; font-size: 150px; font-weight: 900; line-height: 1; color: transparent;
  -webkit-text-stroke: 4px #fff; text-shadow: 0 6px 30px rgba(0,0,0,.7); letter-spacing: -.06em; }
.card.tile .pic { background: linear-gradient(135deg, #2b2160, #6b4eff 120%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px; }
.card.tile .pic img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .22; }
.card.tile .pic span { position: relative; font-size: 40px; font-weight: 800; }
.card.tile .pic small { position: relative; font-size: 22px; color: #cfd2da; margin-top: 6px; }
.collection .sres { left: var(--safe-x); top: 200px; }
.coll-h { position: absolute; left: var(--safe-x); top: 96px; font-size: 56px; font-weight: 800; }
.coll-h small { display: block; font-size: 24px; font-weight: 500; color: var(--muted); margin-top: 6px; }

/* detail */
.detail .info { top: 200px; }
.detail .title { font-size: 92px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.detail .logline { -webkit-line-clamp: 3; }
.note { margin-top: 22px; font-size: 24px; color: var(--muted); max-width: 980px; line-height: 1.4; border-left: 4px solid var(--accent); padding-left: 18px; }
.note b { color: var(--text); }
.btn-hint { font-size: 22px; color: var(--muted); margin-top: 16px; min-height: 30px; }
.detail .rows-vp { top: 800px; }
.session .rows-vp { top: 720px; }

/* player */
.player { background: #000; }
.player video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pov { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .3s; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 22%); }
.pov.off { opacity: 0; }
.pov .ptitle { position: absolute; left: var(--safe-x); right: var(--safe-x); top: var(--safe-y); font-size: 34px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov .ptitle small { display: block; font-size: 24px; color: var(--muted); font-weight: 500; margin-top: 6px; }
.bar { position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 150px; height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent2); border-radius: 4px; }
.bar b { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; }
.times { position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 100px; display: flex; justify-content: space-between; font-size: 24px; color: #ccc; font-variant-numeric: tabular-nums; }
.pctl { position: absolute; left: 0; right: 0; bottom: 200px; display: flex; justify-content: center; }
.pctl .btn { background: rgba(255,255,255,.12); }
.state-ico { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px; border-radius: 50%; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; font-size: 60px; opacity: 0; transition: opacity .25s; }
.state-ico.on { opacity: 1; }
.nextup { position: absolute; right: var(--safe-x); bottom: 230px; width: 520px; background: rgba(23,23,31,.95); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; transform: translateY(30px); opacity: 0; transition: .3s; }
.nextup.on { transform: none; opacity: 1; }
.nextup img { width: 100%; height: 220px; object-fit: cover; }
.nextup .nb { padding: 18px 22px; font-size: 24px; }
.nextup .nb b { display: block; font-size: 28px; margin-top: 4px; }
.nextup .ring { height: 6px; background: var(--accent2); transition: width 1s linear; }
.perr { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 28px; color: var(--muted); text-align: center; }

/* search */
.kbd { position: absolute; left: var(--safe-x); top: 190px; width: 560px; }
.qline { height: 76px; border-radius: 14px; background: var(--surface); font-size: 34px; display: flex; align-items: center; padding: 0 24px; }
.qline .cur { width: 3px; height: 40px; background: var(--accent2); animation: pulse 1s infinite; }
.qline .ph { color: #5d6272; }
/* сетки на flex-wrap: CSS Grid есть только с Chromium 57 */
.keys { display: flex; flex-wrap: wrap; width: 574px; margin-top: 24px; }
.keys .key { width: 72px; margin: 0 10px 10px 0; }
.key { height: 64px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; transition: transform .12s; }
.keys .key.wide { width: 154px; font-size: 22px; }
.key.focused { background: var(--text); color: #111; transform: scale(1.1); }
.sres { position: absolute; left: 760px; right: var(--safe-x); top: 176px; bottom: 0; overflow: hidden; }
.sres h3 { font-size: 30px; margin-bottom: 20px; }
.grid { display: flex; flex-wrap: wrap; width: 1050px; transition: transform .3s; }
.grid .card { width: 320px; margin: 0 30px 34px 0; }
.grid .card { flex: none; }
.grid .card .pic { width: 320px; height: 180px; }

/* my */
.acct { position: absolute; left: var(--safe-x); right: var(--safe-x); top: 170px; height: 330px; border-radius: 24px; background: linear-gradient(120deg, #1d1838, #17171f 60%);
  padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; }
.acct h2 { font-size: 48px; font-weight: 800; }
.acct p { font-size: 26px; color: var(--muted); margin-top: 10px; }
.acct .btns { margin-top: 30px; }
.my .rows-vp { top: 540px; }

/* dialog / toast */
.dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.7); z-index: 20; display: flex; align-items: center; justify-content: center; }
.dlg { width: 900px; background: var(--surface); border-radius: 28px; padding: 56px; text-align: center; }
.dlg h2 { font-size: 46px; }
.dlg p { font-size: 26px; color: var(--muted); margin-top: 14px; }
.dlg .btns { justify-content: center; }
.toast { position: absolute; right: var(--safe-x); top: 140px; transform: translateY(-30px); opacity: 0; z-index: 30; background: var(--text); color: #111;
  font-size: 28px; font-weight: 700; padding: 18px 34px; border-radius: 40px; transition: .3s; }
.toast.on { opacity: 1; transform: none; }
.bump { animation: bump .2s; }
@keyframes bump { 30% { transform: translateX(8px) scale(1.06); } }

/* анонс и состояние загрузки */
.badge.soon { background: var(--amber); color: #1a1205; }
.center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 3; }
.center h2 { font-size: 52px; font-weight: 800; }
.center p { font-size: 28px; color: var(--muted); margin-top: 14px; max-width: 1100px; line-height: 1.4; }
.center .btns { justify-content: center; }
.spin { width: 64px; height: 64px; margin: 0 auto 28px; border-radius: 50%; border: 6px solid rgba(255,255,255,.15); border-top-color: var(--accent2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card .vert { position: absolute; left: 10px; bottom: 10px; }
.my .acct { height: 260px; }
.my .rows-vp { top: 470px; }
/* Отступы вместо flex gap: gap во flex есть только с Chromium 84, а ТВ 2018–2020 старше */
.nav > * + * { margin-left: 12px; }
.tab > * + * { margin-left: 10px; }
.chip-user > * + * { margin-left: 12px; }
.kicker > * + * { margin-left: 12px; }
.badge > * + * { margin-left: 6px; }
.meta > * + * { margin-left: 18px; }
.btns > * + * { margin-left: 20px; }
.btn > * + * { margin-left: 12px; }
.row h3 > * + * { margin-left: 14px; }
.track > * + * { margin-left: 32px; }
.card .tl > * + * { margin-left: 6px; }
.pctl > * + * { margin-left: 28px; }
.qline > * + * { margin-left: 8px; }
.tab .dot { margin-right: 10px; }
/* SVG-иконки вместо символов шрифта */
svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; }
.btn.icon svg, .state-ico svg { width: 36px; height: 36px; vertical-align: middle; }
.key svg { width: 30px; height: 30px; }