/* ==========================================================================
   veflix player, cinema layout. Loaded after app.css; every rule is scoped to
   `html body .pl` so it wins over the older player layers without touching them.
   Roll back by removing the <link> in index.html.
   ========================================================================== */
html body .pl { --pe: cubic-bezier(.22,1,.36,1); --pf: cubic-bezier(.4,0,.2,1); --glass: rgba(18,17,16,.72); --hair: rgba(255,255,255,.09); }

/* ---- chrome: two soft scrims instead of one flat wash ---- */
html body .pl .ui { background: none !important; transition: opacity .35s var(--pf) !important; }
html body .pl .ui .tp { background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.32) 55%, transparent) !important; padding: 26px 40px 70px !important; position: static !important;
  transition: transform .45s var(--pe), opacity .35s var(--pf); }
html body .pl .ui .bt { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 72%, transparent) !important; padding: 150px 48px 28px !important;
  transition: transform .45s var(--pe), opacity .35s var(--pf); }
html body .pl.idle .ui .tp { transform: translateY(-14px); }
html body .pl.idle .ui .bt { transform: translateY(14px); }
html body .pl.idle .ui { transition: opacity .6s var(--pf) !important; }

/* ---- title: bottom-left over the scrubber, the way the streaming apps do it ---- */
html body .pl .tp .t { position: absolute !important; left: 48px !important; right: 40% !important; top: auto !important; bottom: 128px !important; transform: none !important;
  margin: 0 !important; padding: 0 !important; text-align: left !important; pointer-events: none; transition: transform .5s var(--pe), opacity .35s var(--pf); }
html body .pl .tp .t b { font-size: clamp(24px, 2.5vw, 38px) !important; font-weight: 800 !important; letter-spacing: -.025em; line-height: 1.08; white-space: normal !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
html body .pl .tp .t small { margin-top: 8px; font-size: clamp(14px, 1.05vw, 17px) !important; font-weight: 600 !important; color: rgba(255,255,255,.78) !important; letter-spacing: .005em; }
html body .pl.idle .tp .t { transform: translateY(10px); }

/* ---- back button: glass circle ---- */
html body .pl .pbk { height: 44px; padding: 0 16px 0 12px; border-radius: 999px; gap: 8px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--hair);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .2s var(--pf), transform .2s var(--pe); }
html body .pl .pbk:hover { background: rgba(255,255,255,.16); transform: translateX(-2px); }
html body .pl .pbk:active { transform: scale(.96); }
html body .pl .qbadge { border-radius: 999px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair) !important; transition: opacity .35s var(--pf); }

/* ---- scrubber: the one bold element ---- */
html body .pl .seek { height: 30px !important; margin-bottom: 6px !important; cursor: pointer; }
html body .pl .seek .rail { height: 4px !important; border-radius: 4px; background: rgba(255,255,255,.22) !important; transform: none !important; transition: height .25s var(--pe) !important; }
html body .pl .seek:hover .rail, html body .pl .seek.drag .rail { height: 7px !important; }
html body .pl .seek .buf { background: rgba(255,255,255,.34) !important; border-radius: inherit; }
html body .pl .seek .pos { border-radius: inherit; background: linear-gradient(90deg, var(--a1, #ffb347), var(--a2, #ff7a00)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--a2, #ff7a00) 55%, transparent) !important; }
html body .pl .seek .knob { width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important; background: #fff !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--a2, #ff7a00) 32%, transparent), 0 3px 10px rgba(0,0,0,.55) !important; transition: transform .28s var(--pe) !important; }
html body .pl .seek .tip { border-radius: 12px !important; background: var(--glass) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 50px -12px rgba(0,0,0,.9), inset 0 0 0 1px var(--hair) !important; }
html body .pl .seek .sprev video { border-radius: 10px !important; }

/* ---- control row ---- */
html body .pl .ctl { gap: 4px; align-items: center; }
html body .pl .ib { width: 48px; height: 48px; border-radius: 50% !important; transition: background-color .2s var(--pf), transform .25s var(--pe), opacity .2s !important; }
html body .pl .ib svg { width: 26px; height: 26px; transition: transform .25s var(--pe); }
html body .pl .ib:hover { background: rgba(255,255,255,.12) !important; }
html body .pl .ib:hover svg { transform: scale(1.1); }
html body .pl .ib:active { transform: scale(.9); }
html body .pl #bplay { width: 56px !important; height: 56px !important; }
html body .pl #bplay svg { width: 32px !important; height: 32px !important; }
html body .pl .ib[data-tip]:hover:before { border-radius: 8px !important; background: var(--glass) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair); font-weight: 600; }
html body .pl .ctl .tm { margin-left: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: rgba(255,255,255,.92) !important; }

/* volume: slider slides out on hover */
html body .pl .vol { display: flex; align-items: center; }
html body .pl .vol input { width: 0 !important; opacity: 0; margin: 0 !important; accent-color: #fff; transition: width .35s var(--pe), opacity .25s var(--pf), margin .35s var(--pe) !important; }
html body .pl .vol:hover input, html body .pl .vol:focus-within input { width: 104px !important; opacity: 1; margin: 0 8px 0 2px !important; }

/* ---- centre play / pause pulse and seek taps ---- */
html body .pl .flash { width: 96px !important; height: 96px !important; border-radius: 50% !important; background: rgba(0,0,0,.42) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hair); }
html body .pl .tap { border-radius: 999px !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---- side panels (audio, subtitles, quality, episodes): glass sheet ---- */
html body .pl .ppanel { right: 32px !important; bottom: 120px !important; width: 380px !important; border-radius: 22px !important; background: var(--glass) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important; backdrop-filter: blur(30px) saturate(160%) !important; border: 0 !important;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.95), inset 0 0 0 1px var(--hair) !important;
  transform: translateY(14px) scale(.97) !important; transition: transform .45s var(--pe), opacity .25s var(--pf) !important; }
html body .pl .ppanel.on { transform: none !important; }

/* episodes: a full-height drawer with real episode cards */
html body .pl .ppanel:has(.epsl) { top: 24px !important; bottom: 24px !important; right: 24px !important; width: min(520px, 42vw) !important; max-height: none !important;
  transform-origin: right center; transform: translateX(40px) !important; }
html body .pl .ppanel.on:has(.epsl) { transform: none !important; }
html body .pl .ppanel:has(.epsl) .vw { max-height: 100% !important; height: 100%; padding: 22px 18px 18px !important; display: flex; flex-direction: column; }
html body .pl .epshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 16px; }
html body .pl .epshead b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
html body .pl .epshead span, html body .pl .epshead select { color: rgba(255,255,255,.62); font-weight: 600; }
html body .pl .epsl { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; margin: 0 -6px; padding: 0 6px 6px; }
html body .pl .epc { display: grid !important; grid-template-columns: 168px 1fr; gap: 16px; align-items: start; width: 100%; padding: 10px !important; border-radius: 16px !important;
  text-align: left; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: background-color .2s var(--pf), transform .25s var(--pe); }
html body .pl .epc:hover { background: rgba(255,255,255,.07) !important; }
html body .pl .epc:active { transform: scale(.985); }
html body .pl .epc.on { background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; }
html body .pl .epc .th { position: relative; width: 168px !important; aspect-ratio: 16 / 9; height: auto !important; border-radius: 10px !important; overflow: hidden; background: #1b1a18; }
html body .pl .epc .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pe); }
html body .pl .epc:hover .th img { transform: scale(1.05); }
html body .pl .epc .th em { border-radius: 999px !important; font-style: normal; }
html body .pl .epc .tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
html body .pl .epc .tx b { font-size: 15px; font-weight: 700; line-height: 1.25; white-space: normal !important; }
html body .pl .epc .tx .meta { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.6); font-size: 12.5px; font-weight: 600; }
html body .pl .epc .tx .meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
html body .pl .epc .tx small { color: rgba(255,255,255,.66) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45; white-space: normal !important;
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .pl .epc.fut { opacity: .5; }

/* ---- up next and skip intro ---- */
html body .pl .upnext { right: 48px !important; bottom: 132px !important; width: 360px !important; border-radius: 18px !important; background: var(--glass) !important; border: 0 !important;
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: 0 40px 90px -20px rgba(0,0,0,.95), inset 0 0 0 1px var(--hair) !important; transition: transform .55s var(--pe), opacity .3s var(--pf) !important; }
html body .pl .skipi { right: 48px !important; bottom: 132px !important; height: 48px; padding: 0 22px !important; border-radius: 12px !important; background: rgba(255,255,255,.94) !important; color: #000 !important;
  font-weight: 800 !important; font-size: 15px !important; box-shadow: 0 16px 40px -10px rgba(0,0,0,.8) !important; transition: transform .3s var(--pe), opacity .3s var(--pf), background-color .2s !important; }
html body .pl .skipi:hover { background: #fff !important; transform: translateY(-2px); }

@media (max-width: 700px) {
  html body .pl .ui .tp { padding: 14px 14px 50px !important; }
  html body .pl .ui .bt { padding: 110px 14px 14px !important; }
  html body .pl .tp .t { left: 16px !important; right: 16px !important; bottom: 104px !important; }
  html body .pl .ib { width: 42px; height: 42px; }
  html body .pl .ppanel:has(.epsl) { width: auto !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px !important; max-height: 75vh !important; }
  html body .pl .epc { grid-template-columns: 128px 1fr; }
  html body .pl .epc .th { width: 128px !important; }
}
html.reduce body .pl *, html.reduce body .pl *::before { transition-duration: .01ms !important; animation-duration: .01ms !important; }
html.reduce body .pl.idle .ui .tp, html.reduce body .pl.idle .ui .bt, html.reduce body .pl.idle .tp .t { transform: none; }

/* ---- fill: crop black bars, only in fullscreen (the setting is on by default) ---- */
html body .pl.fill:not(:fullscreen):not(.pfs) video, html body .pl.fill:not(:fullscreen):not(.pfs) #enhcv { object-fit: contain !important; }
html body .pl.fill:fullscreen video, html body .pl.fill:fullscreen #enhcv,
html body .pl.fill.pfs video, html body .pl.fill.pfs #enhcv,
html.vf-full body .pl.fill video, html.vf-full body .pl.fill #enhcv { object-fit: cover !important; }

/* shortcuts live in Settings, not on the player bar (the ? key still opens them) */
html body .pl #phelp { display: none !important; }

/* ---- card quality badges: remembered ones are there instantly, new ones ease in ---- */
html body .card .qcorner { opacity: 1 !important; transform: none; }
html body .card .qcorner:not(.qcached) { animation: qbin .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes qbin { from { opacity: 0; transform: translateY(-5px) scale(.9); } }

/* ---- opening and leaving the player: scale and fade, and the page eases back in underneath ---- */
html body > .pl { transform: scale(1.035); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.22,1,.36,1) !important; }
html body > .pl.on { transform: none; }
html body.plback #view, html body.plback .bgfx { animation: vfback .75s cubic-bezier(.22,1,.36,1) both; }
@keyframes vfback { from { opacity: 0; transform: scale(.975); filter: blur(8px); } }
html.reduce body > .pl { transform: none; }
html.reduce body.plback #view { animation: none; }

/* quality badge goes top-right so it never covers the rating chip in the top-left */
html body .card .qcorner { left: auto !important; right: 10px !important; }

/* ==========================================================================
   v5: Disney+/Netflix layout in black. Title top-centre, big transport trio in
   the middle, timeline + secondary controls along the bottom, solid black menus.
   ========================================================================== */
/* chrome fades only (no slide), so the centred controls keep a stable position */
html body > .pl .ui .tp, html body > .pl .ui .bt, html body > .pl.idle .ui .tp, html body > .pl.idle .ui .bt, html body > .pl.idle .tp .t { transform: none !important; }
html body > .pl .ui .tp { background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.45) 50%, transparent) !important; padding: 22px 40px 90px !important; }
html body > .pl .ui .bt { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.3) 70%, transparent) !important; padding: 120px 44px 26px !important; }

/* title: top centre */
html body > .pl .tp .t { left: 50% !important; right: auto !important; top: 26px !important; bottom: auto !important; translate: -50% 0; width: min(62vw, 900px) !important; text-align: center !important; }
html body > .pl .tp .t b { font-size: clamp(18px, 1.5vw, 24px) !important; font-weight: 750 !important; -webkit-line-clamp: 1; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
html body > .pl .tp .t small { margin-top: 4px !important; font-size: clamp(13px, .95vw, 15px) !important; color: rgba(255,255,255,.7) !important; }

/* back: plain large arrow like the big apps */
html body > .pl .pbk { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 10px !important; height: 48px; }
html body > .pl .pbk span { display: none; }
html body > .pl .pbk svg { width: 30px; height: 30px; }
html body > .pl .pbk:hover { background: rgba(255,255,255,.1) !important; transform: none; }

/* centre transport: rewind / play-pause / forward */
@media (hover: hover) and (min-width: 701px) {
  html body > .pl #bplay, html body > .pl #brw, html body > .pl #bff { position: absolute !important; top: 50%; left: 50%; z-index: 2;
    background: rgba(0,0,0,.38) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  html body > .pl #bplay { width: 88px !important; height: 88px !important; translate: -50% -50%; }
  html body > .pl #bplay svg { width: 40px !important; height: 40px !important; }
  html body > .pl #brw, html body > .pl #bff { width: 68px !important; height: 68px !important; }
  html body > .pl #brw { translate: calc(-50% - 150px) -50%; }
  html body > .pl #bff { translate: calc(-50% + 150px) -50%; }
  html body > .pl #brw svg, html body > .pl #bff svg { width: 32px !important; height: 32px !important; }
  html body > .pl #bplay:hover, html body > .pl #brw:hover, html body > .pl #bff:hover { background: rgba(0,0,0,.55) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
  html body > .pl .ctl .tm { margin-left: 4px; }
}

/* timeline: thin white line, grows on hover, like Netflix */
html body > .pl .seek .pos { background: #fff !important; box-shadow: none !important; }
html body > .pl .seek .knob { box-shadow: 0 2px 8px rgba(0,0,0,.6) !important; }

/* toasts: "Resumed at", skip intro etc. never sit on the title or subtitles */
html body > .pl .resumed { left: 50% !important; right: auto !important; top: 96px !important; bottom: auto !important; translate: -50% 0; background: #000 !important; border: 1px solid #262626 !important; border-radius: 999px !important; padding: 9px 18px !important; }

/* menus: solid black */
html body > .pl .ppanel, html body > .pl .upnext, html body > .pl .seek .tip, html body > .pl .ib[data-tip]:hover:before {
  background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 30px 80px -20px #000, inset 0 0 0 1px #222 !important; }
html body > .pl .ppanel .tile { background: #0d0d0d !important; border: 1px solid #1f1f1f !important; border-radius: 14px !important; transition: background-color .2s, border-color .2s; }
html body > .pl .ppanel .tile:hover { background: #151515 !important; border-color: #2c2c2c !important; }
html body > .pl .ppanel .mi { border-radius: 10px; transition: background-color .15s; }
html body > .pl .ppanel .mi:hover { background: #111 !important; }
html body > .pl .ppanel .hr { background: #1c1c1c !important; }
html body > .pl .epc:hover { background: #0f0f0f !important; }
html body > .pl .epc.on { background: #141414 !important; box-shadow: inset 0 0 0 1px #2a2a2a !important; }

/* ---- timeline preview: server frames ---- */
html body > .pl .seek .tip.sprev #spi { display: block; width: 256px; height: 144px; object-fit: cover; border-radius: 10px; background: #0b0b0b; box-shadow: 0 18px 50px -10px rgba(0,0,0,.95); }
html body > .pl .seek .tip.noimg #spi { display: none; }

/* ---- sliders: iOS-style. The fill eases to its new level, the thumb springs on hover and press ---- */
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
html body > .pl .vol input[type=range], html body .rng { -webkit-appearance: none; appearance: none; height: 4px !important; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #fff var(--fill, 100%), rgba(255,255,255,.22) var(--fill, 100%)) !important;
  transition: --fill .45s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.34,1.56,.64,1), width .4s cubic-bezier(.22,1,.36,1), opacity .25s, margin .4s cubic-bezier(.22,1,.36,1) !important; }
html body > .pl .vol input[type=range]:hover, html body .rng:hover { height: 6px !important; }
html body > .pl .vol input[type=range]:active, html body .rng:active { transition: height .35s cubic-bezier(.34,1.56,.64,1), width .4s, opacity .25s, margin .4s !important; }
html body > .pl .vol input[type=range]::-webkit-slider-thumb, html body .rng::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.55); transform: scale(.85); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
html body > .pl .vol input[type=range]:hover::-webkit-slider-thumb, html body .rng:hover::-webkit-slider-thumb { transform: scale(1.1); }
html body > .pl .vol input[type=range]:active::-webkit-slider-thumb, html body .rng:active::-webkit-slider-thumb { transform: scale(1.35); }

/* ---- smoother scrolling: no live blur behind the detail panel, lighter card layers ---- */
html body .scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0,0,0,.78) !important; }
html body .card img { backface-visibility: hidden; }

/* ---- cards: no scroll-reveal (it could leave cards dark when smooth scrolling skips the trigger).
   Posters fade in as they load, over a soft shimmer, and the hover lift is kept ---- */
html body .grid > .card.rv:not(:hover):not(:focus-visible), html body .row.rv .card:not(:hover):not(:focus-visible), html body .row.rv .prov { opacity: 1 !important; transform: none !important; }
html body .grid > .card.rv, html body .row.rv .card { opacity: 1 !important; }
html body .card .fi { transition: opacity .6s cubic-bezier(.4,0,.2,1) !important; }
html body .card:has(img.fi:not(.ld)) { background: linear-gradient(100deg, #0d0d0d 30%, #191919 50%, #0d0d0d 70%) 0 0 / 300% 100% !important; animation: vfshim 1.6s ease-in-out infinite; }
@keyframes vfshim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
html.reduce body .card:has(img.fi:not(.ld)) { animation: none; }

/* ==========================================================================
   v8: black menus with crisp text, iOS-style segmented quality picker,
   back-button hover, quality chip beside the back button
   ========================================================================== */
/* crisp text: no layer promotion or scaling on rows inside menus */
html body > .pl .ppanel, html body > .pl .ppanel * { -webkit-font-smoothing: antialiased; }
html body > .pl .ppanel.on { will-change: auto !important; }
html body .vrow { will-change: auto !important; transform: none !important; background: #000 !important; border: 1px solid #1d1d1d !important; border-radius: 14px !important;
  transition: border-color .25s ease, background-color .25s ease, translate .35s cubic-bezier(.34,1.4,.5,1) !important; }
html body .vrow:hover { background: #080808 !important; border-color: #353535 !important; translate: 0 -2px; }
html body .vrow.on, html body .vrow.on:hover { background: #050505 !important; border-color: rgba(255,255,255,.6) !important; translate: none; }
html body > .pl .ppanel .sec, html body > .pl .ppanel .qh { color: #7a7a7a !important; }

/* quality picker: black track, white thumb on the chosen one */
html body > .pl .ppanel .qopt { background: #000 !important; border: 1px solid #1f1f1f !important; color: #9a9a9a; box-shadow: none !important;
  transition: background-color .35s cubic-bezier(.32,1.25,.5,1), color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important; }
html body > .pl .ppanel .qopt:hover { color: #fff; border-color: #333 !important; }
html body > .pl .ppanel .qopt:active { transform: scale(.95); }
html body > .pl .ppanel .qopt.on { background: #fff !important; border-color: #fff !important; color: #000 !important; }
html body > .pl .ppanel .qopt.on b, html body > .pl .ppanel .qopt.on small { color: #000 !important; }
html body > .pl .ppanel .qopt::before { display: none; }
html body > .pl .ppanel .qhdrt { background: #000 !important; border: 1px solid #1f1f1f !important; border-radius: 14px !important; }
html body > .pl .ppanel .mi { color: #e9e9e9; }

/* back: circle grows in behind the arrow, arrow nudges left */
html body > .pl .pbk { width: 48px; height: 48px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; position: relative; }
html body > .pl .pbk::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.14); transform: scale(.4); opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
html body > .pl .pbk:hover::before { transform: scale(1); opacity: 1; }
html body > .pl .pbk svg { position: relative; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
html body > .pl .pbk:hover svg { transform: translateX(-3px); }
html body > .pl .pbk:active svg { transform: translateX(-3px) scale(.88); }
html body > .pl .pbk:hover { background: transparent !important; }

/* quality chip: beside the back button, top-left */
html body > .pl .tp .qbadge { position: absolute !important; left: 100px; top: 32px; margin: 0 !important; background: rgba(0,0,0,.6) !important; border: 1px solid #2a2a2a !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }

/* ==========================================================================
   v9: quality & versions, clean list. One segmented control, text tags,
   big bitrate, hairline rows, download on hover
   ========================================================================== */
html body > .pl .ppanel:has(.qgrid) { width: 440px !important; }
html body > .pl .ppanel .qopt { flex: 1; margin: 0 !important; padding: 9px 0 !important; justify-content: center; text-align: center; border: 0 !important; border-radius: 9px !important; background: transparent !important; }
html body > .pl .ppanel .qopt b { font-size: 13.5px !important; font-weight: 650 !important; }
html body > .pl .ppanel .qopt.on { background: #fff !important; box-shadow: 0 6px 16px -8px rgba(255,255,255,.35) !important; }

/* rows */
html body .vrow { padding: 14px 14px 14px 16px !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; position: relative; }
html body .vrow + .vrow { border-top: 0 !important; }
html body .vrow::before { content: ""; position: absolute; left: 16px; right: 14px; top: 0; height: 1px; background: #1a1a1a; }
html body .vrow:first-child::before, html body .vrow:hover::before, html body .vrow:hover + .vrow::before, html body .vrow.on::before, html body .vrow.on + .vrow::before { opacity: 0; }
html body .vrow:hover { background: #0e0e0e !important; translate: none !important; }
html body .vrow.on, html body .vrow.on:hover { background: #111 !important; border: 0 !important; }
html body .vrow.on::after { content: "" !important; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; }

/* tags: quiet text separated by dots; only HDR / Dolby Vision and Playing / Best stand out */
html body .vrow .vtop { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 6px; }
html body .vrow .vt { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; color: #8d8d8d !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html body .vrow .vt.hd { color: #f1d38a !important; }
html body .vrow .vt.pl, html body .vrow .vt.bs, html body .vrow .vt.tq { background: #fff !important; color: #000 !important; padding: 2px 8px !important; border-radius: 999px !important; margin-right: 8px; }
html body .vrow .vt.sp, html body .vrow .vma, html body .vrow .vfl img { display: none !important; }
html body .vrow .vfl { margin-left: auto; display: flex; gap: 6px; align-items: center; }
html body .vrow .vfl .vt { color: #6f6f6f !important; }

/* bitrate line */
html body .vrow .vmid { display: flex; align-items: baseline; gap: 10px; color: #8a8a8a !important; font-size: 12.5px !important; }
html body .vrow .vbr { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em; color: #fff !important; }
html body .vrow .vbr small { margin-left: 3px; font-size: 11px !important; font-weight: 600 !important; color: #7a7a7a !important; }
html body .vrow .vsub { display: block; margin-top: 4px; color: #6c6c6c !important; font-size: 12px !important; }

/* download: a quiet icon that appears on hover */
html body .vrow .vdl { border: 0 !important; background: transparent !important; color: #bdbdbd; opacity: 0; transition: opacity .2s ease, background-color .2s ease !important; border-radius: 8px !important; }
html body .vrow:hover .vdl, html body .vrow .vdl:focus-visible { opacity: 1; }
html body .vrow .vdl:hover { background: #1f1f1f !important; color: #fff; }

/* ==========================================================================
   v10: matte quality picker. A 4-column grid: label, segmented control,
   caption and HDR switch, each full width. No gloss, no glow.
   ========================================================================== */
html body > .pl .ppanel .qcol { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; align-items: stretch; }
html body > .pl .ppanel .qcol > .qh, html body > .pl .ppanel .qcol > .qcap, html body > .pl .ppanel .qcol > .qhdrt { grid-column: 1 / -1 !important; }
html body > .pl .ppanel .qcol > .qh { margin: 0 0 8px 2px !important; font-size: 12px !important; font-weight: 600 !important; color: #767676 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body > .pl .ppanel .qcol .qopt { display: flex !important; align-items: center; justify-content: center; min-height: 40px; margin: 0 !important; padding: 0 !important;
  background: #121212 !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 #1e1e1e, inset 0 -1px 0 #1e1e1e !important; color: #8c8c8c;
  transition: background-color .3s cubic-bezier(.32,1.25,.5,1), color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1) !important; }
html body > .pl .ppanel .qcol .qopt[data-qq="auto"] { border-radius: 12px 0 0 12px !important; box-shadow: inset 1px 1px 0 #1e1e1e, inset 0 -1px 0 #1e1e1e !important; }
html body > .pl .ppanel .qcol .qopt[data-qq="720p"] { border-radius: 0 12px 12px 0 !important; box-shadow: inset -1px 1px 0 #1e1e1e, inset 0 -1px 0 #1e1e1e !important; }
html body > .pl .ppanel .qcol .qopt small, html body > .pl .ppanel .qcol .qopt::before { display: none !important; }
html body > .pl .ppanel .qcol .qopt b { font-size: 13.5px !important; font-weight: 650 !important; color: inherit !important; }
html body > .pl .ppanel .qcol .qopt:hover { color: #e6e6e6; background: #171717 !important; }
html body > .pl .ppanel .qcol .qopt:active { transform: scale(.96); }
/* the chosen one: a light matte thumb sitting inside the track */
html body > .pl .ppanel .qcol .qopt.on { background: #e9e9e7 !important; color: #0b0b0b !important; border-radius: 11px !important; box-shadow: inset 0 0 0 3px #121212 !important; }
html body > .pl .ppanel .qcol .qopt.on b { color: #0b0b0b !important; }
html body > .pl .ppanel .qcol > .qcap { display: block !important; margin: 10px 2px 0 !important; color: #7a7a7a !important; font-size: 12.5px !important; line-height: 1.45; }
html body > .pl .ppanel .qcol > .qhdrt { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px !important; padding: 12px 14px !important;
  background: #121212 !important; border: 1px solid #1e1e1e !important; border-radius: 12px !important; text-align: left; }

/* tags: plain spacing, no separators */
html body .vrow .vt { margin-right: 10px; }
html body .vrow .vt.pl, html body .vrow .vt.bs, html body .vrow .vt.tq { background: #e9e9e7 !important; }

/* matte surfaces for the rest of the menu */
html body > .pl .ppanel { background: #0a0a0a !important; box-shadow: 0 30px 80px -20px #000, inset 0 0 0 1px #1c1c1c !important; }
html body .vrow:hover { background: #111 !important; }
html body .vrow.on, html body .vrow.on:hover { background: #141414 !important; }
html body .vrow.on::after { background: #e9e9e7; }
html body .vrow .vt.hd { color: #d9c08a !important; }

/* ==========================================================================
   v11: quality & versions, all black, wider. The segmented track is drawn behind
   the four buttons; the chosen one is a clean white thumb inside it (no inset ring)
   ========================================================================== */
html body > .pl .ppanel:has(.qgrid) { width: min(560px, calc(100vw - 64px)) !important; max-height: min(82vh, 760px) !important; background: #000 !important; box-shadow: 0 30px 80px -20px #000, inset 0 0 0 1px #1f1f1f !important; }
html body > .pl .ppanel:has(.qgrid) .vw { max-height: min(82vh, 760px) !important; padding: 20px 20px 18px !important; }

html body > .pl .ppanel .qcol { position: relative; grid-template-rows: auto 48px auto auto !important; }
html body > .pl .ppanel .qcol > .qh { grid-row: 1 !important; }
html body > .pl .ppanel .qcol > .qopt { grid-row: 2 !important; }
html body > .pl .ppanel .qcol > .qcap { grid-row: 3 !important; }
html body > .pl .ppanel .qcol > .qhdrt { grid-row: 4 !important; }
html body > .pl .ppanel .qcol::before { content: ""; grid-row: 2; grid-column: 1 / -1; background: #000; border: 1px solid #262626; border-radius: 14px; }
html body > .pl .ppanel .qcol .qopt, html body > .pl .ppanel .qcol .qopt[data-qq] { position: relative; z-index: 1; min-height: 0 !important; margin: 4px !important; background: transparent !important;
  box-shadow: none !important; border-radius: 10px !important; color: #8f8f8f;
  transition: background-color .28s cubic-bezier(.4,0,.2,1), color .22s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important; }
html body > .pl .ppanel .qcol .qopt:hover { background: #111 !important; color: #fff; }
html body > .pl .ppanel .qcol .qopt.on, html body > .pl .ppanel .qcol .qopt.on:hover { background: #fff !important; color: #000 !important; box-shadow: 0 2px 10px rgba(0,0,0,.6) !important; }
html body > .pl .ppanel .qcol .qopt b { font-size: 14px !important; }
html body > .pl .ppanel .qcol > .qhdrt { background: #000 !important; border: 1px solid #262626 !important; border-radius: 14px !important; padding: 14px 16px !important; }

/* everything else black: now-playing card, group headers, rows */
html body > .pl .ppanel .vnow { background: #000 !important; border: 1px solid #262626 !important; border-radius: 14px !important; box-shadow: none !important; }
html body > .pl .ppanel .vgh small, html body > .pl .ppanel .vtag { background: #000 !important; border: 1px solid #262626 !important; color: #9a9a9a !important; }
html body > .pl .ppanel .vrow, html body > .pl .ppanel .vrow:hover, html body > .pl .ppanel .vrow.on, html body > .pl .ppanel .vrow.on:hover { background: #000 !important; }
html body > .pl .ppanel .vrow { border: 1px solid transparent !important; transition: border-color .25s ease !important; }
html body > .pl .ppanel .vrow:hover { border-color: #262626 !important; }
html body > .pl .ppanel .vrow.on { border-color: #333 !important; }
html body > .pl .ppanel .vrow .vdl { opacity: 0 !important; border: 0 !important; background: transparent !important; }
html body > .pl .ppanel .vrow:hover .vdl, html body > .pl .ppanel .vrow .vdl:focus-visible { opacity: 1 !important; }
html body > .pl .ppanel .vrow .vdl:hover { background: #1a1a1a !important; }

/* v12: pin the four quality buttons into the track's columns; flatter tags; black now-playing card */
html body > .pl .ppanel .qcol > .qopt:nth-child(2) { grid-column: 1 !important; }
html body > .pl .ppanel .qcol > .qopt:nth-child(3) { grid-column: 2 !important; }
html body > .pl .ppanel .qcol > .qopt:nth-child(4) { grid-column: 3 !important; }
html body > .pl .ppanel .qcol > .qopt:nth-child(5) { grid-column: 4 !important; }
html body > .pl .ppanel .vrow .vt.tq, html body > .pl .ppanel .vrow .vt.bs, html body > .pl .ppanel .vrow .vt.bb { background: none !important; color: #d6d6d6 !important; padding: 0 !important; border-radius: 0 !important; margin-right: 10px !important; }
html body > .pl .ppanel .vrow .vt.pl { background: #fff !important; color: #000 !important; padding: 2px 9px !important; border-radius: 999px !important; }
html body > .pl .ppanel .vnow.vnow, html body > .pl .ppanel.on .vnow { background: #000 !important; background-image: none !important; border: 1px solid #262626 !important; }