video: redesign TV-detail as a Netflix billboard (break from the music layout)

Per feedback, this drops the Spotify/artist-page parallel entirely and goes
Netflix:
- Full-bleed billboard (edge-to-edge — breaks out of the host's 40px padding),
  big backdrop with Ken-Burns drift + layered scrims, oversized title, a Netflix
  meta row (owned% · year · rating · seasons · runtime · status), 3-line synopsis,
  and action buttons (Watchlist / Get Missing / external links).
- Per-show accent colour sampled from the poster (canvas) → drives the primary
  button glow, status, episode hover — the SoulSync 'vibe', per title.
- Custom season dropdown + rich episode rows (index, 16:9 thumb w/ hover play,
  title · runtime, 2-line synopsis, Owned/Missing) that fade/stagger in on season
  change.
- Backdrop falls back to a cover-cropped poster; episode stills + genres + cast
  arrive with the 'capture everything' phase. Watchlist/Get-Missing are visual
  pending their endpoints. Shell tests updated.

tests/test_video_side_shell.py

@@ -330,9 +330,9 @@ def test_video_worker_orbs_referenced_and_isolated():
 def test_show_detail_subpage_present():
     block = _block(
         _INDEX, r'<section class="video-subpage" data-video-subpage="video-show-detail"', "</section>")
-    # Hero + season tree containers the renderer fills.
-    for hook in ('data-vd-backdrop', 'data-vd-poster', 'data-vd-title', 'data-vd-badges',
-                 'data-vd-overview', 'data-vd-stats', 'data-vd-seasons'):
+    # Netflix billboard + episodes containers the renderer fills.
+    for hook in ('data-vd-backdrop', 'data-vd-poster', 'data-vd-title', 'data-vd-meta',
+                 'data-vd-overview', 'data-vd-actions', 'data-vd-season-select', 'data-vd-episodes'):
         assert hook in block, hook
     # Back button reuses the shared data-video-goto nav (no inline handler).
     assert 'data-video-goto="video-library"' in block

webui/index.html

@@ -816,36 +816,33 @@
                      Isolated: built by video/video-detail.js, styled by .vd-* in
                      video-side.css. Inspired by the music artist-detail vibe. -->
                 <section class="video-subpage" data-video-subpage="video-show-detail" hidden>
+                    <!-- Netflix-style TV-show detail (NOT the music/Spotify layout).
+                         Isolated .vd-*; --vd-accent-rgb is extracted from the poster
+                         at load for a per-show glow. Built by video/video-detail.js. -->
                     <div class="vd-page" data-video-detail="show">
                         <button class="vd-back" type="button" data-video-goto="video-library">
                             <span aria-hidden="true">&larr;</span> Library
                         </button>
-                        <!-- Hero: a contained glass card with the backdrop blurred
-                             INSIDE it + gradient overlay (same treatment as the music
-                             artist hero), so there are no bare gaps. -->
-                        <div class="vd-hero">
-                            <div class="vd-hero-bg" data-vd-backdrop aria-hidden="true"></div>
-                            <div class="vd-hero-overlay" aria-hidden="true"></div>
-                            <div class="vd-hero-content">
-                                <div class="vd-poster">
-                                    <img data-vd-poster alt="" />
-                                    <div class="vd-poster-fallback" data-vd-poster-fallback>📺</div>
-                                </div>
-                                <div class="vd-hero-main">
-                                    <h1 class="vd-title" data-vd-title>—</h1>
-                                    <div class="vd-badges" data-vd-badges></div>
-                                    <p class="vd-overview" data-vd-overview></p>
-                                    <div class="vd-actions" data-vd-actions></div>
-                                    <div class="vd-stats" data-vd-stats></div>
-                                </div>
+                        <!-- Billboard: full-bleed backdrop, content anchored bottom-left. -->
+                        <div class="vd-billboard">
+                            <div class="vd-bb-bg" data-vd-backdrop aria-hidden="true"></div>
+                            <div class="vd-bb-fade" aria-hidden="true"></div>
+                            <div class="vd-bb-content">
+                                <h1 class="vd-title" data-vd-title>—</h1>
+                                <div class="vd-meta" data-vd-meta></div>
+                                <p class="vd-overview" data-vd-overview></p>
+                                <div class="vd-actions" data-vd-actions></div>
+                                <div class="vd-genres" data-vd-genres></div>
                             </div>
+                            <!-- offscreen poster, only used to sample the accent color -->
+                            <img data-vd-poster crossorigin="anonymous" alt="" style="display:none" />
                         </div>
                         <div class="vd-loading" data-vd-loading hidden>Loading…</div>
-                        <!-- Seasons as a poster-art card grid (season = album); the
-                             selected season's episodes render in the panel below. -->
                         <div class="vd-body">
-                            <div class="vd-section-title" data-vd-seasons-title hidden>Seasons</div>
-                            <div class="vd-seasons" data-vd-seasons></div>
+                            <div class="vd-ep-toolbar">
+                                <h2 class="vd-ep-heading">Episodes</h2>
+                                <div class="vd-season-select" data-vd-season-select></div>
+                            </div>
                             <div class="vd-episodes" data-vd-episodes></div>
                         </div>
                     </div>

webui/static/video/video-detail.js

@@ -1,11 +1,11 @@
 /*
- * SoulSync — Video detail page (isolated).
+ * SoulSync — Video detail page (isolated, NETFLIX-style — deliberately NOT the
+ * music/Spotify layout).
  *
- * Drill-in TV-show detail: a hero (contained glass card with the backdrop blurred
- * inside it + overlay), then a poster-art SEASON grid (season = album) whose
- * selected season renders its episodes below (episode = track). Inspired by the
- * music artist page. Opened by a card via soulsync:video-open-detail; video-side.js
- * navigates, this loads + renders.
+ * A cinematic billboard (full-bleed backdrop, content anchored bottom-left), a
+ * per-show accent colour sampled from the poster, a custom season dropdown, and
+ * rich episode rows that fade in on season change. Opened by a card via
+ * soulsync:video-open-detail; video-side.js navigates, this loads + renders.
  *
  * Self-contained IIFE, no globals, event-delegated, no inline handlers. Talks
  * only to /api/video/* — the music side is never touched.
@@ -14,178 +14,170 @@
     'use strict';
 
     var DETAIL_URL = '/api/video/detail/';
-    var data = null;          // last loaded show payload
+    var data = null;
     var selectedSeason = null;
+    var menuOpen = false;
 
     function esc(s) {
         return String(s == null ? '' : s)
             .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
     }
-
     function root() { return document.querySelector('[data-video-detail="show"]'); }
     function q(sel) { var r = root(); return r ? r.querySelector(sel) : null; }
-    function setText(sel, text) { var n = q(sel); if (n) n.textContent = text || ''; }
-
-    function pill(label, cls) {
-        return '<span class="vd-pill' + (cls ? ' ' + cls : '') + '">' + esc(label) + '</span>';
-    }
-    function runtimeLabel(mins) {
-        if (!mins) return '';
-        var h = Math.floor(mins / 60), m = mins % 60;
-        return h ? (h + 'h' + (m ? ' ' + m + 'm' : '')) : (m + 'm');
+    function setText(sel, t) { var n = q(sel); if (n) n.textContent = t || ''; }
+    function runtimeLabel(m) {
+        if (!m) return '';
+        var h = Math.floor(m / 60), mm = m % 60;
+        return h ? (h + 'h' + (mm ? ' ' + mm + 'm' : '')) : (mm + 'm');
     }
     function statusLabel(s) {
         return s === 'continuing' ? 'Continuing' : s === 'ended' ? 'Ended'
             : s === 'upcoming' ? 'Upcoming' : (s || '');
     }
+    function seasonByNum(n) {
+        if (!data) return null;
+        for (var i = 0; i < data.seasons.length; i++) if (data.seasons[i].season_number === n) return data.seasons[i];
+        return null;
+    }
 
-    // ── hero ────────────────────────────────────────────────────────────────
-    function renderHero(d) {
+    // ── accent extraction (poster → dominant vibrant colour) ──────────────────
+    function applyAccent(img) {
+        try {
+            var w = 24, h = 24;
+            var c = document.createElement('canvas'); c.width = w; c.height = h;
+            var ctx = c.getContext('2d');
+            ctx.drawImage(img, 0, 0, w, h);
+            var px = ctx.getImageData(0, 0, w, h).data;
+            var best = null, bestScore = -1, fr = 0, fg = 0, fb = 0, n = 0;
+            for (var i = 0; i < px.length; i += 4) {
+                var r = px[i], g = px[i + 1], b = px[i + 2], a = px[i + 3];
+                if (a < 128) continue;
+                var mx = Math.max(r, g, b), mn = Math.min(r, g, b);
+                var light = (mx + mn) / 2;
+                fr += r; fg += g; fb += b; n++;
+                if (light < 35 || light > 225) continue;          // skip near-black/white
+                var sat = mx === 0 ? 0 : (mx - mn) / mx;
+                var score = sat * (mx / 255);                      // vibrant + bright
+                if (score > bestScore) { bestScore = score; best = [r, g, b]; }
+            }
+            if (!best && n) best = [Math.round(fr / n), Math.round(fg / n), Math.round(fb / n)];
+            if (best) {
+                var r0 = root();
+                if (r0) r0.style.setProperty('--vd-accent-rgb', best[0] + ', ' + best[1] + ', ' + best[2]);
+            }
+        } catch (e) { /* tainted/no image — keep theme accent */ }
+    }
+
+    // ── billboard ─────────────────────────────────────────────────────────────
+    function renderBillboard(d) {
         setText('[data-vd-title]', d.title);
         setText('[data-vd-overview]', d.overview);
 
-        var backdrop = q('[data-vd-backdrop]');
-        if (backdrop) {
-            var bg = d.has_backdrop ? '/api/video/backdrop/show/' + d.id
+        var bg = q('[data-vd-backdrop]');
+        if (bg) {
+            var url = d.has_backdrop ? '/api/video/backdrop/show/' + d.id
                 : (d.has_poster ? '/api/video/poster/show/' + d.id : '');
-            backdrop.style.backgroundImage = bg ? "url('" + bg + "')" : '';
+            bg.style.backgroundImage = url ? "url('" + url + "')" : '';
+            bg.classList.toggle('vd-bb-bg--poster', !d.has_backdrop && !!d.has_poster);
+            bg.classList.toggle('vd-bb-bg--empty', !d.has_backdrop && !d.has_poster);
         }
 
+        // offscreen poster → accent colour
         var poster = q('[data-vd-poster]');
-        var fallback = q('[data-vd-poster-fallback]');
-        if (poster && fallback) {
-            if (d.has_poster) {
-                poster.src = '/api/video/poster/show/' + d.id;
-                poster.style.display = ''; fallback.style.display = 'none';
-                poster.onerror = function () { poster.style.display = 'none'; fallback.style.display = ''; };
-            } else { poster.style.display = 'none'; fallback.style.display = ''; }
+        if (poster && d.has_poster) {
+            poster.onload = function () { applyAccent(poster); };
+            poster.src = '/api/video/poster/show/' + d.id;
         }
 
-        var badges = [];
-        if (d.year) badges.push(pill(d.year));
-        if (d.content_rating) badges.push(pill(d.content_rating, 'vd-pill--rating'));
-        if (d.status) badges.push(pill(statusLabel(d.status)));
-        if (d.network) badges.push(pill(d.network));
+        // meta row (Netflix style): owned% · year · rating · seasons · runtime · status
+        var ownedPct = d.episode_total ? Math.round(d.episode_owned / d.episode_total * 100) : 0;
+        var meta = [];
+        meta.push('<span class="vd-match">' + ownedPct + '% in library</span>');
+        if (d.year) meta.push('<span>' + esc(d.year) + '</span>');
+        if (d.content_rating) meta.push('<span class="vd-meta-rating">' + esc(d.content_rating) + '</span>');
+        meta.push('<span>' + d.season_count + ' Season' + (d.season_count === 1 ? '' : 's') + '</span>');
+        meta.push('<span>' + d.episode_total + ' Episodes</span>');
         var rt = runtimeLabel(d.runtime_minutes);
-        if (rt) badges.push(pill(rt));
-        var b = q('[data-vd-badges]'); if (b) b.innerHTML = badges.join('');
+        if (rt) meta.push('<span>' + esc(rt) + '</span>');
+        if (d.status) meta.push('<span class="vd-status">' + esc(statusLabel(d.status)) + '</span>');
+        if (d.network) meta.push('<span>' + esc(d.network) + '</span>');
+        var m = q('[data-vd-meta]'); if (m) m.innerHTML = meta.join('');
 
-        // External-link badges (real, useful) — mirrors the artist hero's service row.
+        // actions — Netflix buttons + real external links
         var links = [];
-        if (d.imdb_id) links.push(['IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/', 'vd-link--imdb']);
-        if (d.tmdb_id) links.push(['TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id, 'vd-link--tmdb']);
-        if (d.tvdb_id) links.push(['TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series', 'vd-link--tvdb']);
+        if (d.imdb_id) links.push(['IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/']);
+        if (d.tmdb_id) links.push(['TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id]);
+        if (d.tvdb_id) links.push(['TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series']);
         var a = q('[data-vd-actions]');
         if (a) {
-            a.innerHTML = links.map(function (l) {
-                return '<a class="vd-link ' + l[2] + '" href="' + l[1] + '" target="_blank" rel="noopener">' +
-                    esc(l[0]) + '</a>';
-            }).join('');
-        }
-
-        var ownedPct = d.episode_total ? Math.round(d.episode_owned / d.episode_total * 100) : 0;
-        var stats = [
-            ['Seasons', d.season_count],
-            ['Episodes', d.episode_total],
-            ['Owned', d.episode_owned + ' / ' + d.episode_total],
-            ['Collected', ownedPct + '%'],
-        ];
-        var s = q('[data-vd-stats]');
-        if (s) {
-            s.innerHTML = stats.map(function (st) {
-                return '<div class="vd-stat"><span class="vd-stat-num">' + esc(st[1]) +
-                    '</span><span class="vd-stat-label">' + esc(st[0]) + '</span></div>';
-            }).join('');
+            a.innerHTML =
+                '<button class="vd-btn vd-btn--primary" type="button" data-vd-act="watchlist">' +
+                '<span class="vd-btn-ic">＋</span> Watchlist</button>' +
+                '<button class="vd-btn vd-btn--ghost" type="button" data-vd-act="download">' +
+                '<span class="vd-btn-ic">⭳</span> Get Missing</button>' +
+                links.map(function (l) {
+                    return '<a class="vd-btn vd-btn--link" href="' + l[1] + '" target="_blank" rel="noopener">' +
+                        esc(l[0]) + ' ↗</a>';
+                }).join('');
         }
+        var g = q('[data-vd-genres]');
+        if (g) g.innerHTML = d.network ? '' : '';   // genres land with "capture everything"
     }
 
-    // ── season poster-card grid ───────────────────────────────────────────────
-    function seasonArt(season) {
-        // Real per-season poster when the scan captured one; else the show poster.
-        return season.has_poster ? '/api/video/poster/season/' + season.id
-            : (data && data.has_poster ? '/api/video/poster/show/' + data.id : '');
+    // ── season dropdown ───────────────────────────────────────────────────────
+    function renderSeasonSelect() {
+        var host = q('[data-vd-season-select]');
+        if (!host || !data) return;
+        var cur = seasonByNum(selectedSeason);
+        host.innerHTML =
+            '<button class="vd-ss-btn" type="button" data-vd-ss-toggle>' +
+            '<span>' + esc(cur ? cur.title : 'Season') + '</span><span class="vd-ss-caret">▾</span></button>' +
+            '<div class="vd-ss-menu' + (menuOpen ? ' vd-ss-menu--open' : '') + '">' +
+            data.seasons.map(function (s) {
+                var on = s.season_number === selectedSeason ? ' vd-ss-opt--active' : '';
+                return '<button class="vd-ss-opt' + on + '" type="button" data-vd-ss-pick="' + s.season_number + '">' +
+                    esc(s.title) + '<span class="vd-ss-opt-meta">' + s.episode_owned + '/' + s.episode_total + '</span></button>';
+            }).join('') + '</div>';
     }
 
-    function seasonCard(season) {
-        var pct = season.episode_total ? Math.round(season.episode_owned / season.episode_total * 100) : 0;
-        var art = seasonArt(season);
-        var sel = season.season_number === selectedSeason ? ' vd-scard--active' : '';
-        var img = art
-            ? '<img class="vd-scard-img" src="' + art + '" alt="" loading="lazy" ' +
-              'onerror="this.style.display=\'none\'">'
-            : '';
-        return '<button class="vd-scard' + sel + '" type="button" data-vd-season="' + season.season_number + '">' +
-            '<div class="vd-scard-art">' + img +
-            '<div class="vd-scard-fallback">📺</div>' +
-            '<div class="vd-scard-grad"></div>' +
-            '<div class="vd-scard-pct">' + pct + '%</div>' +
-            '</div>' +
-            '<div class="vd-scard-info">' +
-            '<span class="vd-scard-name">' + esc(season.title) + '</span>' +
-            '<span class="vd-scard-sub">' + season.episode_owned + ' / ' + season.episode_total + ' eps</span>' +
-            '<span class="vd-scard-bar"><span class="vd-scard-bar-fill" style="width:' + pct + '%"></span></span>' +
-            '</div></button>';
-    }
-
-    function renderSeasons(d) {
-        var title = q('[data-vd-seasons-title]');
-        var host = q('[data-vd-seasons]');
-        if (!host) return;
-        if (!d.seasons || !d.seasons.length) {
-            if (title) title.hidden = true;
-            host.innerHTML = '';
-            var ep0 = q('[data-vd-episodes]'); if (ep0) ep0.innerHTML = '';
-            return;
-        }
-        if (title) title.hidden = false;
-        host.innerHTML = d.seasons.map(seasonCard).join('');
-        renderEpisodes(selectedSeason);
-    }
-
-    // ── episodes panel (selected season) ──────────────────────────────────────
+    // ── episodes ──────────────────────────────────────────────────────────────
     function episodeRow(ep) {
-        var num = ep.episode_number != null ? ('E' + ep.episode_number) : '';
         var owned = ep.owned ? 'vd-ep--owned' : 'vd-ep--missing';
         var meta = [];
-        if (ep.air_date) meta.push(ep.air_date);
         var rt = runtimeLabel(ep.runtime_minutes);
         if (rt) meta.push(rt);
+        if (ep.air_date) meta.push(ep.air_date);
         return '<div class="vd-ep ' + owned + '">' +
-            '<span class="vd-ep-num">' + esc(num) + '</span>' +
-            '<span class="vd-ep-body"><span class="vd-ep-title">' +
+            '<div class="vd-ep-index">' + (ep.episode_number != null ? ep.episode_number : '') + '</div>' +
+            '<div class="vd-ep-thumb"><span class="vd-ep-thumb-ic">▶</span></div>' +
+            '<div class="vd-ep-info">' +
+            '<div class="vd-ep-top"><span class="vd-ep-title">' +
             esc(ep.title || 'Episode ' + ep.episode_number) + '</span>' +
-            (ep.overview ? '<span class="vd-ep-overview">' + esc(ep.overview) + '</span>' : '') +
-            (meta.length ? '<span class="vd-ep-meta">' + esc(meta.join(' · ')) + '</span>' : '') +
-            '</span>' +
-            '<span class="vd-ep-state">' + (ep.owned ? 'Owned' : 'Missing') + '</span>' +
+            (meta.length ? '<span class="vd-ep-rt">' + esc(meta.join(' · ')) + '</span>' : '') + '</div>' +
+            (ep.overview ? '<p class="vd-ep-desc">' + esc(ep.overview) + '</p>' : '') +
+            '</div>' +
+            '<div class="vd-ep-badge">' + (ep.owned ? 'Owned' : 'Missing') + '</div>' +
             '</div>';
     }
 
-    function renderEpisodes(seasonNumber) {
+    function renderEpisodes() {
         var host = q('[data-vd-episodes]');
-        if (!host || !data) return;
-        var season = null;
-        for (var i = 0; i < data.seasons.length; i++) {
-            if (data.seasons[i].season_number === seasonNumber) { season = data.seasons[i]; break; }
-        }
+        if (!host) return;
+        var season = seasonByNum(selectedSeason);
         if (!season) { host.innerHTML = ''; return; }
-        host.innerHTML =
-            '<div class="vd-ep-head"><span class="vd-ep-head-name">' + esc(season.title) + '</span>' +
-            '<span class="vd-ep-head-meta">' + season.episode_owned + ' / ' + season.episode_total +
-            ' owned</span></div>' +
-            '<div class="vd-ep-list">' + season.episodes.map(episodeRow).join('') + '</div>';
+        host.innerHTML = season.episodes.map(episodeRow).join('');
+        // re-trigger the fade/slide-in animation
+        host.classList.remove('vd-ep-anim');
+        void host.offsetWidth;
+        host.classList.add('vd-ep-anim');
     }
 
-    function selectSeason(num) {
-        selectedSeason = num;
-        var r = root(); if (!r) return;
-        var cards = r.querySelectorAll('[data-vd-season]');
-        for (var i = 0; i < cards.length; i++) {
-            cards[i].classList.toggle('vd-scard--active',
-                parseInt(cards[i].getAttribute('data-vd-season'), 10) === num);
-        }
-        renderEpisodes(num);
+    function selectSeason(n) {
+        selectedSeason = n;
+        menuOpen = false;
+        renderSeasonSelect();
+        renderEpisodes();
     }
 
     function showLoading(on) { var l = q('[data-vd-loading]'); if (l) l.hidden = !on; }
@@ -193,19 +185,22 @@
     function loadShow(id) {
         if (!root()) return;
         showLoading(true);
-        ['[data-vd-seasons]', '[data-vd-episodes]'].forEach(function (sel) {
-            var n = q(sel); if (n) n.innerHTML = '';
-        });
+        var ep = q('[data-vd-episodes]'); if (ep) ep.innerHTML = '';
+        var ss = q('[data-vd-season-select]'); if (ss) ss.innerHTML = '';
+        var r0 = root(); if (r0) r0.style.removeProperty('--vd-accent-rgb');
         fetch(DETAIL_URL + 'show/' + id, { headers: { 'Accept': 'application/json' } })
             .then(function (r) { return r.ok ? r.json() : null; })
             .then(function (d) {
                 showLoading(false);
                 if (!d || d.error) { setText('[data-vd-title]', 'Not found'); return; }
                 data = d;
+                menuOpen = false;
                 selectedSeason = d.seasons && d.seasons.length ? d.seasons[0].season_number : null;
-                renderHero(d);
-                renderSeasons(d);
-                var r = root(); if (r) r.scrollTop = 0;
+                renderBillboard(d);
+                renderSeasonSelect();
+                renderEpisodes();
+                var sub = document.querySelector('.video-subpage[data-video-subpage="video-show-detail"]');
+                if (sub) sub.scrollTop = 0;
             })
             .catch(function () { showLoading(false); setText('[data-vd-title]', 'Could not load show'); });
     }
@@ -217,10 +212,12 @@
     }
     function onClick(e) {
         var r = root(); if (!r) return;
-        var card = e.target.closest('[data-vd-season]');
-        if (card && r.contains(card)) {
-            selectSeason(parseInt(card.getAttribute('data-vd-season'), 10));
-        }
+        var toggle = e.target.closest('[data-vd-ss-toggle]');
+        if (toggle && r.contains(toggle)) { menuOpen = !menuOpen; renderSeasonSelect(); return; }
+        var pick = e.target.closest('[data-vd-ss-pick]');
+        if (pick && r.contains(pick)) { selectSeason(parseInt(pick.getAttribute('data-vd-ss-pick'), 10)); return; }
+        // click-away closes the menu
+        if (menuOpen && !e.target.closest('[data-vd-season-select]')) { menuOpen = false; renderSeasonSelect(); }
     }
 
     function init() {

webui/static/video/video-side.css

@@ -438,137 +438,151 @@ body[data-side="video"] .dashboard-header-sweep {
     backdrop-filter: blur(4px);
 }
 
-/* ── Video detail page (TV-show drill-in) ────────────────────────────────────
-   Isolated .vd-*, mirroring the music artist-detail language: a contained glass
-   hero with the backdrop blurred INSIDE it + gradient overlay, accent action
-   chips, and a poster-art season grid (season = album) → episodes (= tracks). */
-.vd-page { padding: 20px 20px 60px; max-width: 1240px; margin: 0 auto; }
-
+/* ════════════════════════════════════════════════════════════════════════════
+   Video detail page — NETFLIX style (isolated .vd-*; NOT the music layout).
+   --vd-accent-rgb is sampled from the poster at load for a per-show glow.
+   ════════════════════════════════════════════════════════════════════════════ */
+/* Break out of the host .page's 40px/90px padding so the billboard is truly
+   edge-to-edge (Netflix full-bleed) — no bare gaps around it. */
+.vd-page { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); position: relative; margin: -40px -40px -90px; }
 .vd-back {
+    position: absolute; top: 18px; left: 22px; z-index: 6;
     display: inline-flex; align-items: center; gap: 7px;
-    padding: 8px 15px; margin-bottom: 16px;
-    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
-    border-radius: 999px; color: var(--text-primary, #e8e8ea);
-    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
+    padding: 8px 15px; border-radius: 999px;
+    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14);
+    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+    backdrop-filter: blur(10px); transition: all 0.2s ease;
 }
-.vd-back:hover { background: rgba(var(--accent-rgb, 88,101,242), 0.16); border-color: rgba(var(--accent-rgb, 88,101,242), 0.45); transform: translateX(-2px); }
+.vd-back:hover { background: rgba(0,0,0,0.7); transform: translateX(-2px); }
 
-/* Hero — a self-contained card; the backdrop lives INSIDE it (no bare gaps). */
-.vd-hero {
-    position: relative; overflow: hidden; border-radius: 18px;
-    border: 1px solid rgba(255,255,255,0.08);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
-    background: linear-gradient(135deg, rgba(26,26,30,0.9), rgba(16,16,20,0.96));
+/* ── Billboard ─────────────────────────────────────────────────────────────── */
+.vd-billboard { position: relative; width: 100%; min-height: 76vh; display: flex; align-items: flex-end; overflow: hidden; }
+.vd-bb-bg {
+    position: absolute; inset: 0; background-size: cover; background-position: center 18%;
+    z-index: 0; transform: scale(1.02); animation: vdKenburns 24s ease-out forwards;
 }
-.vd-hero-bg {
-    position: absolute; inset: -30px;
-    background-size: cover; background-position: center 20%;
-    filter: blur(46px) brightness(0.4) saturate(1.5); transform: scale(1.3);
-    z-index: 0; pointer-events: none;
-}
-.vd-hero-overlay {
+.vd-bb-bg--poster { background-position: center 28%; }
+.vd-bb-bg--empty { background: radial-gradient(120% 90% at 70% 0%, rgba(var(--vd-accent-rgb), 0.4), #0b0b0f 65%); }
+@keyframes vdKenburns { to { transform: scale(1.1); } }
+.vd-bb-fade {
     position: absolute; inset: 0; z-index: 1; pointer-events: none;
     background:
-        linear-gradient(180deg, rgba(10,10,14,0.35) 0%, rgba(12,12,16,0.78) 100%),
-        linear-gradient(90deg, rgba(12,12,16,0.55) 0%, transparent 70%);
+        linear-gradient(0deg, var(--bg-primary, #0b0b0f) 2%, rgba(11,11,15,0.55) 32%, rgba(11,11,15,0.1) 62%, rgba(11,11,15,0.45) 100%),
+        linear-gradient(90deg, rgba(11,11,15,0.92) 0%, rgba(11,11,15,0.55) 38%, transparent 72%);
 }
-.vd-hero-content { position: relative; z-index: 2; display: flex; gap: 30px; padding: 32px 36px; align-items: flex-start; }
-
-.vd-poster {
-    position: relative; flex: 0 0 188px; width: 188px; aspect-ratio: 2 / 3;
-    border-radius: 14px; overflow: hidden;
-    border: 2px solid rgba(var(--accent-rgb, 88,101,242), 0.3);
-    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
-    background: rgba(255,255,255,0.04);
+.vd-bb-content {
+    position: relative; z-index: 2; max-width: 720px; padding: 0 0 52px 56px;
+    animation: vdRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
 }
-.vd-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.vd-poster-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.5; }
-
-.vd-hero-main { flex: 1; min-width: 0; }
-.vd-title { font-size: 2.4em; line-height: 1.05; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em;
-    color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
-.vd-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
-.vd-pill {
-    padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
-    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
-    color: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
+@keyframes vdRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
+.vd-title {
+    font-size: clamp(2.6em, 5vw, 4.4em); line-height: 0.98; font-weight: 900; margin: 0 0 18px;
+    color: #fff; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0,0,0,0.7);
 }
-.vd-pill--rating { border-color: rgba(var(--accent-rgb, 88,101,242), 0.55); color: #fff; }
-.vd-overview { max-width: 760px; color: rgba(255,255,255,0.76); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px;
-    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.vd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px;
+    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.82); }
+.vd-meta > span { position: relative; }
+.vd-meta > span + span::before { content: ''; position: absolute; left: -8px; top: 50%; width: 3px; height: 3px;
+    border-radius: 50%; background: rgba(255,255,255,0.4); transform: translateY(-50%); }
+.vd-match { color: #4ade80 !important; font-weight: 800; }
+.vd-meta-rating { padding: 1px 7px; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; font-size: 12px; }
+.vd-status { color: rgb(var(--vd-accent-rgb)); }
+.vd-overview { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 22px; max-width: 640px;
+    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 
-/* External-link chips — accent-gradient, like the artist hero actions. */
-.vd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
-.vd-link {
-    display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 8px;
-    font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
-    color: rgb(var(--accent-light-rgb, 140, 150, 255));
-    background: linear-gradient(135deg, rgba(var(--accent-rgb, 88,101,242), 0.16) 0%, rgba(var(--accent-rgb, 88,101,242), 0.05) 100%);
-    border: 1px solid rgba(var(--accent-rgb, 88,101,242), 0.28); transition: all 0.25s ease;
+.vd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.vd-btn {
+    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px;
+    font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
+    text-decoration: none; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
 }
-.vd-link:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb, 88,101,242), 0.5);
-    box-shadow: 0 4px 16px rgba(var(--accent-rgb, 88,101,242), 0.22); }
+.vd-btn:hover { transform: translateY(-2px); }
+.vd-btn-ic { font-size: 16px; line-height: 1; }
+.vd-btn--primary { background: rgb(var(--vd-accent-rgb)); color: #fff;
+    box-shadow: 0 8px 24px rgba(var(--vd-accent-rgb), 0.45); }
+.vd-btn--primary:hover { box-shadow: 0 10px 30px rgba(var(--vd-accent-rgb), 0.6); filter: brightness(1.08); }
+.vd-btn--ghost { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.18); backdrop-filter: blur(6px); }
+.vd-btn--ghost:hover { background: rgba(255,255,255,0.26); }
+.vd-btn--link { background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.16);
+    font-size: 13px; padding: 10px 16px; backdrop-filter: blur(6px); }
+.vd-btn--link:hover { background: rgba(0,0,0,0.55); color: #fff; }
 
-.vd-stats { display: flex; flex-wrap: wrap; gap: 10px; }
-.vd-stat {
-    min-width: 96px; padding: 12px 16px; border-radius: 12px;
-    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
-    backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 2px;
+.vd-loading { padding: 50px 0; text-align: center; color: rgba(255,255,255,0.55); }
+
+/* ── Episodes ──────────────────────────────────────────────────────────────── */
+.vd-body { padding: 30px 56px 70px; }
+.vd-ep-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.vd-ep-heading { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
+
+/* season dropdown */
+.vd-season-select { position: relative; }
+.vd-ss-btn {
+    display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; min-width: 150px;
+    justify-content: space-between; border-radius: 8px; cursor: pointer;
+    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
+    color: #fff; font-size: 14px; font-weight: 700; transition: all 0.2s ease;
 }
-.vd-stat-num { font-size: 20px; font-weight: 800; color: #fff; }
-.vd-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.5); }
-
-.vd-loading { padding: 40px 0; text-align: center; color: rgba(255,255,255,0.55); font-size: 14px; }
-.vd-body { margin-top: 26px; }
-.vd-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
-    color: rgba(255,255,255,0.4); margin: 0 4px 14px; }
-
-/* Season poster cards (season = album) */
-.vd-seasons {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
+.vd-ss-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(var(--vd-accent-rgb), 0.5); }
+.vd-ss-caret { font-size: 11px; opacity: 0.7; }
+.vd-ss-menu {
+    position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 20;
+    background: rgba(20,20,26,0.98); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
+    box-shadow: 0 16px 44px rgba(0,0,0,0.6); padding: 6px; overflow: hidden;
+    opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none;
+    transition: opacity 0.2s ease, transform 0.2s ease;
 }
-.vd-scard {
-    text-align: left; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
-    background: rgba(18,18,22,1); border: 1px solid rgba(255,255,255,0.07);
-    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
+.vd-ss-menu--open { opacity: 1; transform: none; pointer-events: auto; }
+.vd-ss-opt {
+    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
+    padding: 10px 13px; border-radius: 7px; cursor: pointer; background: transparent; border: 0;
+    color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; text-align: left; transition: background 0.15s ease;
 }
-.vd-scard:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(var(--accent-rgb, 88,101,242), 0.28);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb, 88,101,242), 0.14); }
-.vd-scard--active { border-color: rgba(var(--accent-rgb, 88,101,242), 0.65);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 26px rgba(var(--accent-rgb, 88,101,242), 0.3); }
-.vd-scard-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden;
-    background: linear-gradient(135deg, rgba(var(--accent-rgb, 88,101,242), 0.18), rgba(var(--accent-rgb, 88,101,242), 0.06)); }
-.vd-scard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-.vd-scard-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: 0.35; }
-.vd-scard-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,14,0.85) 100%); }
-.vd-scard-pct { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
-    color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
-.vd-scard-info { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; }
-.vd-scard-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vd-scard-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
-.vd-scard-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
-.vd-scard-bar-fill { display: block; height: 100%; border-radius: 999px;
-    background: linear-gradient(90deg, rgba(var(--accent-rgb, 88,101,242), 0.95), rgba(var(--accent-rgb, 88,101,242), 0.5)); }
+.vd-ss-opt:hover { background: rgba(255,255,255,0.07); }
+.vd-ss-opt--active { color: #fff; background: rgba(var(--vd-accent-rgb), 0.2); }
+.vd-ss-opt-meta { font-size: 12px; color: rgba(255,255,255,0.5); }
 
-/* Episodes panel (selected season) */
-.vd-episodes { margin-top: 26px; }
-.vd-ep-head { display: flex; align-items: baseline; gap: 12px; padding: 0 4px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; }
-.vd-ep-head-name { font-size: 17px; font-weight: 700; color: #fff; }
-.vd-ep-head-meta { font-size: 12.5px; color: rgba(255,255,255,0.5); }
-.vd-ep-list { display: flex; flex-direction: column; }
-.vd-ep { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px;
-    padding: 12px; border-radius: 10px; transition: background 0.15s ease; }
+/* episode rows */
+.vd-episodes { border-top: 1px solid rgba(255,255,255,0.08); }
+.vd-ep-anim .vd-ep { animation: vdEpIn 0.4s cubic-bezier(0.2,0.7,0.2,1) both; }
+.vd-ep-anim .vd-ep:nth-child(2) { animation-delay: 0.03s; }
+.vd-ep-anim .vd-ep:nth-child(3) { animation-delay: 0.06s; }
+.vd-ep-anim .vd-ep:nth-child(4) { animation-delay: 0.09s; }
+.vd-ep-anim .vd-ep:nth-child(n+5) { animation-delay: 0.12s; }
+@keyframes vdEpIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+.vd-ep {
+    display: grid; grid-template-columns: 48px 150px 1fr auto; align-items: center; gap: 20px;
+    padding: 18px 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
+    transition: background 0.2s ease; cursor: default;
+}
 .vd-ep:hover { background: rgba(255,255,255,0.04); }
-.vd-ep-num { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.4); text-align: center; }
-.vd-ep-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.vd-ep-title { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.95); }
-.vd-ep-overview { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.45;
+.vd-ep-index { font-size: 22px; font-weight: 800; color: rgba(255,255,255,0.4); text-align: center; }
+.vd-ep:hover .vd-ep-index { color: rgb(var(--vd-accent-rgb)); }
+.vd-ep-thumb {
+    position: relative; width: 150px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
+    background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.28), rgba(0,0,0,0.5));
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
+}
+.vd-ep-thumb-ic { font-size: 20px; color: rgba(255,255,255,0.55); opacity: 0; transform: scale(0.7); transition: all 0.25s ease; }
+.vd-ep:hover .vd-ep-thumb-ic { opacity: 1; transform: scale(1); }
+.vd-ep-info { min-width: 0; }
+.vd-ep-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
+.vd-ep-title { font-size: 15.5px; font-weight: 700; color: #fff; }
+.vd-ep-rt { font-size: 12.5px; color: rgba(255,255,255,0.5); white-space: nowrap; }
+.vd-ep-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.62);
     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-.vd-ep-meta { font-size: 11.5px; color: rgba(255,255,255,0.42); }
-.vd-ep-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
-.vd-ep--owned .vd-ep-state { color: #4ade80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); }
-.vd-ep--missing .vd-ep-state { color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
-.vd-ep--missing .vd-ep-num, .vd-ep--missing .vd-ep-title { opacity: 0.72; }
+.vd-ep-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
+    padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
+.vd-ep--owned .vd-ep-badge { color: #4ade80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.32); }
+.vd-ep--missing .vd-ep-badge { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
+.vd-ep--missing .vd-ep-index, .vd-ep--missing .vd-ep-title { opacity: 0.7; }
+
+@media (max-width: 820px) {
+    .vd-bb-content { padding-left: 24px; }
+    .vd-body { padding: 24px 22px 60px; }
+    .vd-ep { grid-template-columns: 36px 1fr auto; }
+    .vd-ep-thumb { display: none; }
+}
 
 .video-card--clickable { cursor: pointer; }