/*
 * SoulSync — Video side shell styling.
 *
 * Loaded AFTER style.css so these rules win where specificity ties. Everything
 * keys off body[data-side="music|video"] (set by video-side.js). The music side
 * is the default and is never affected — these rules only do something once the
 * body flips to data-side="video".
 */

/* ── The Music ↔ Video header toggle (animated sliding pill) ────────────── */
.side-toggle {
    position: relative;
    display: flex;
    margin-top: 12px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    isolation: isolate;
}

/* The thumb that slides under the active side. Positioned over the left half by
   default; slides to the right half when body[data-side="video"]. */
.side-toggle-thumb {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 8px;
    background: linear-gradient(135deg,
        rgb(var(--accent-rgb, 88 101 242)),
        rgba(var(--accent-rgb, 88 101 242), 0.82));
    box-shadow: 0 3px 10px rgba(var(--accent-rgb, 88 101 242), 0.35);
    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1);
}
body[data-side="video"] .side-toggle-thumb {
    transform: translateX(100%);
}

.side-toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #9aa0aa);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.side-toggle-btn .side-toggle-icon {
    width: 14px;
    height: 14px;
    flex: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.side-toggle-btn:not(.active):hover {
    color: var(--text-primary, #e8e8ea);
}
.side-toggle-btn.active {
    color: #fff;
}
.side-toggle-btn.active .side-toggle-icon {
    opacity: 1;
}

/* ── Collapsed sidebar (#1155): the same pill, stacked ──────────────────── */
/* At icon width the two halves cannot sit side by side, so the pill turns
   vertical — and the thumb has to turn with it. Everything above sizes it as a
   horizontal half (width: calc(50% - 4px), translateX), which once stacked
   reads as a stray bar floating over the top button. Hiding it instead just
   loses the active indicator, so it slides DOWN here rather than across.
   Kept next to the base rules on purpose: the thumb's geometry only makes
   sense read together with the track it slides in. */
html[data-sidebar="collapsed"] .side-toggle {
    flex-direction: column;
    width: 46px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding: 3px;
    border-radius: 13px;
}
html[data-sidebar="collapsed"] .side-toggle-thumb {
    top: 3px;
    left: 3px;
    right: 3px;
    width: auto;
    height: calc(50% - 3px);
    border-radius: 10px;
}
html[data-sidebar="collapsed"] body[data-side="video"] .side-toggle-thumb {
    transform: translateY(100%);
}
html[data-sidebar="collapsed"] .side-toggle-btn {
    padding: 7px 0;
    gap: 0;
    border-radius: 10px;
}
html[data-sidebar="collapsed"] .side-toggle-btn .side-toggle-icon {
    width: 16px;
    height: 16px;
}

/* ── Nav swap: music nav vs video nav ──────────────────────────────────── */
/* The video nav reuses .sidebar-nav layout (same class) — only visibility
   differs. Hidden by default (music side); shown when data-side="video". */
.video-nav {
    display: none;
}
/* Overlay Studio (poster builder) is admin-only — hide its launcher for non-admins. */
body:not(.video-admin) [data-video-overlay-studio] { display: none !important; }

/* Video dashboard bento order + column spans. SCOPED to the video subpage because
   these data-card names (stats/library/tools) also exist on the music dashboard —
   an unscoped rule would reorder music's grid too. Three balanced 2/3 + 1/3 rows:
     Row 1  Recently Added (2 cols) · Library (1 col)
     Row 2  Quick Actions (1 col) · Studios [Overlay + Collection] (2 cols)
     Row 3  Upcoming (2 cols) · System Stats (1 col) */
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="recent"] { order: 1; grid-column: span 2; }
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="library"] { order: 2; }
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="tools"] { order: 3; }
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="studios"] { order: 4; grid-column: span 2; }
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="upcoming"] { order: 5; grid-column: span 2; }
.video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="stats"] { order: 6; }

/* ── Dashboard responsive (tablet + phone) ──────────────────────────────────
   The shared .dash-grid (style.css) collapses 3→2 cols at 1499px and →1 col at
   699px, but its mobile reset only covers the music helper classes
   (.dash-card--wide/--full) — NOT the raw span-2 rules above. Without the reset
   below, the three spanning cards force an IMPLICIT second column into the
   1-col phone grid (double-width cards, sideways page scroll). */
@media (max-width: 1499px) and (min-width: 700px) {
    /* 2-col tablet range: Stats is the last card and sat alone at half width —
       let it finish the grid full-width (its six stat tiles flow 3-up there). */
    .video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="stats"] { grid-column: span 2; }
}
@media (max-width: 699px) {
    .video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="recent"],
    .video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="studios"],
    .video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="upcoming"],
    .video-subpage[data-video-subpage="video-dashboard"] .dash-card[data-card="stats"] { grid-column: auto; }
    /* The studios "Metadata ready" rings wrap under the title on phones —
       left-align the wrapped row so it reads cleanly. */
    .vcov { align-items: flex-start; }
}

/* Phone enrichment strip — worker orbs are disabled ≤768px (video-worker-orbs.js)
   so the 13 accent buttons + the Manage Workers pill render as real elements.
   Mirror music's treatment (style.css scopes it to #dashboard-page, which never
   reaches this subpage): an even auto-fit grid of the 46px buttons, with the
   pill on its own full-width row instead of dangling inline. */
@media (max-width: 768px) {
    .video-subpage[data-video-subpage="video-dashboard"] .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
        justify-items: center;
        align-items: center;
        gap: 12px 10px;
    }
    .video-subpage[data-video-subpage="video-dashboard"] .header-actions .em-manage-btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

/* Touch devices get no hover — an enrichment tooltip would pop on tap and sit
   stuck over the buttons. Music hides its worker tooltips at this width
   (style.css @900px); same for the video workers. */
@media (max-width: 900px) {
    .video-enrich-tooltip { display: none !important; }
}

/* Dashboard "Recently Added" — a single full-width, horizontally-scrolling row. */
.video-recent-grid { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.video-recent-grid::-webkit-scrollbar { height: 6px; }
.video-recent-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
/* Fixed-width tiles. min-width:0 stops a long title from ballooning the flex item
   past its 96px basis (flex items default to min-width:auto = content width). */
.video-recent-item { flex: 0 0 96px; width: 96px; min-width: 0; display: block; text-decoration: none; color: inherit; scroll-snap-align: start; }
.video-recent-poster { width: 96px; height: 144px; border-radius: 9px; overflow: hidden; position: relative;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .14s ease, border-color .14s ease; }
.video-recent-item:hover .video-recent-poster { transform: translateY(-3px); border-color: rgba(56, 189, 248, .55); }
.video-recent-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-recent-poster.is-empty { display: grid; }
.video-recent-poster.is-empty img { display: none; }
.video-recent-poster.is-empty::after { content: "\1F3AC"; place-self: center; font-size: 22px; opacity: .3; }
.video-recent-title { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); margin-top: 7px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-recent-year { font-size: 11px; color: rgba(255, 255, 255, .4); margin-top: 1px; }
.video-recent-empty { flex: 1; padding: 24px 8px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .4); }

/* Dashboard "Upcoming" — mini-billboards for the next few calendar episodes. */
.dash-card__link { font-size: 11px; font-weight: 600; color: rgba(56, 189, 248, .95); text-decoration: none; margin-left: 4px; white-space: nowrap; }
.dash-card__link:hover { text-decoration: underline; }
/* A single horizontally-scrolling row of landscape backdrop cards. */
.video-upcoming { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.video-upcoming::-webkit-scrollbar { height: 6px; }
.video-upcoming::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
/* Fixed-width tiles styled after the calendar's "next up" billboard (.vcal-bb) —
   per-show hue (--vcal-h), hue-tinted scrim glow, pulsing eyebrow dot, bold title.
   flex:0 0 so they never shrink; min-width:0 stops a long title ballooning the item. */
.vup-row { --vcal-h: 230; position: relative; display: flex; align-items: flex-end; flex: 0 0 248px; width: 248px;
    min-width: 0; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; scroll-snap-align: start;
    text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, .08); cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5); transition: transform .18s ease, box-shadow .3s ease; }
.vup-row:hover { transform: translateY(-3px);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .6), 0 0 40px hsla(var(--vcal-h), 72%, 50%, .24); }
.vup-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%;
    transform: scale(1.08); transition: transform .35s ease; }
.vup-row:hover .vup-bg { transform: scale(1.13); }
.vup-scrim { position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(8, 8, 12, .95) 4%, rgba(8, 8, 12, .55) 46%, transparent 82%),
        radial-gradient(130% 130% at 0% 100%, hsla(var(--vcal-h), 72%, 45%, .42), transparent 60%); }
.vup-content { position: relative; z-index: 1; padding: 13px 15px 14px; width: 100%; }
.vup-when { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em; color: hsl(var(--vcal-h), 88%, 80%); }
.vup-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--vcal-h), 88%, 62%);
    box-shadow: 0 0 10px hsl(var(--vcal-h), 88%, 60%); animation: vcalPulse 2s ease-in-out infinite; }
.vup-owned { margin-left: auto; font-size: 9.5px; font-weight: 700; color: rgba(99, 214, 139, .95);
    background: rgba(99, 214, 139, .14); padding: 2px 6px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.vup-title { font-size: 16px; font-weight: 900; letter-spacing: -.02em; color: #fff; margin-top: 6px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vup-sub { font-size: 12px; color: rgba(255, 255, 255, .78); font-weight: 600; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vup-se { font-weight: 800; color: #fff; }
@media (prefers-reduced-motion: reduce) { .vup-dot { animation: none; } }
body[data-side="video"] nav.sidebar-nav:not(.video-nav) {
    display: none;
}
body[data-side="video"] .video-nav {
    display: flex;
}

/* ── Page visibility per side ──────────────────────────────────────────── */
/* Music pages hidden on the video side; video pages hidden on the music side.
   The music router still controls .page.active among music pages; we just hide
   the whole set while the video side is showing. */
body[data-side="music"] .page.video-page {
    display: none !important;
}
body[data-side="video"] .page:not(.video-page) {
    display: none !important;
}
body[data-side="video"] .page.video-page {
    display: block;
}

/* ── Service status: two sections now — the music one carries data-music-only
   (hidden on video by the rule below) and the video one carries data-video-only
   (hidden on music). No blanket .status-section hide, so the video section shows. ── */

/* ── Shared pages: show the REAL music page on the video side ───────────── */
/* The shared Settings page is filtered per side: video-only groups/sections carry
   data-video-only, music-only ones carry data-music-only (plus the per-tab rules
   below hide whole music tabs on the video side). The id selector + extra
   attribute outrank the blanket music-page hide rule. */
body[data-side="video"][data-video-page="video-settings"] #settings-page {
    display: block !important;
}
body[data-side="video"][data-video-page="video-settings"] #video-page-host {
    display: none !important;
}
/* Help & Docs is the SAME docs page as the music side — reuse it verbatim (it'll
   carry both music + video docs). Same reveal mechanism as Settings above. */
body[data-side="video"][data-video-page="video-help"] #help-page {
    display: block !important;
}
body[data-side="video"][data-video-page="video-help"] #video-page-host {
    display: none !important;
}
/* Chat is one page for the whole app (Soulseek rooms/PMs are side-neutral) —
   the video nav reveals the music-side #chat-page, same as Settings/Help. */
body[data-side="video"][data-video-page="video-chat"] #chat-page {
    display: block !important;
}
body[data-side="video"][data-video-page="video-chat"] #video-page-host {
    display: none !important;
}
/* Video-only additions inside the shared settings page (e.g. the Movies/TV
   library mapping) — hidden on the music side. */
body[data-side="music"] [data-video-only] {
    display: none !important;
}
/* Conversely, the music-library picker is irrelevant on the video side — hide
   it there (the Movies/TV mapping is its replacement). */
body[data-side="video"] #plex-library-selector-container,
body[data-side="video"] #jellyfin-library-selector-container,
body[data-side="video"] #navidrome-folder-selector-container {
    display: none !important;
}
/* Music-only settings sections (e.g. the music API services) are hidden on the
   video side; their video counterparts carry data-video-only. */
body[data-side="video"] [data-music-only] {
    display: none !important;
}
/* The whole Library tab is music-specific today (file-org templates, music
   paths, post-processing, conversion, stats) — hide it all on the video side.
   Future video library settings just need data-video-only to stay visible. */
body[data-side="video"] [data-stg="library"]:not([data-video-only]) {
    display: none !important;
}
/* The video side has its OWN server section (Video Source above) and reuses the
   shared Plex/Jellyfin credentials — so hide music's Server Connections group
   entirely on the video side. Video never configures or selects the MUSIC server. */
body[data-side="video"] .settings-group[data-stg="connections"]:not([data-video-only]) {
    display: none !important;
}
/* The Downloads tab is almost entirely music-specific (streaming sources, music
   quality profile, retry logic). Hide EVERY music download element on the video
   side — not just .settings-group, but also the quality-profile tile + the
   collapsible section headers/bodies (#quality-profile-tile, .settings-section-*).
   The video-only ones (folders, video source/hybrid, video quality) replace them.
   EXCEPTION: the shared torrent/usenet setup (Indexers/Prowlarr, Torrent Client,
   Usenet Client) is identical for both sides — the video downloader grabs via
   Prowlarr too — so those sections (header + body + group) carry data-shared and
   stay visible on video. (Pre-merge these lived on a separate "indexers" tab that
   this rule didn't touch; the merge folded them under data-stg="downloads".) */
body[data-side="video"] [data-stg="downloads"]:not([data-video-only]):not([data-shared]) {
    display: none !important;
}
/* The Quality tab's music sections (quality profile, import checks, conversion,
   audio verification) are music-specific. The video side shows its OWN quality
   sections here instead — Video Quality Profile + YouTube Quality, both moved
   out of Downloads and carrying data-video-only. Hide every music quality bit. */
body[data-side="video"] [data-stg="quality"]:not([data-video-only]) {
    display: none !important;
}

/* ── Dashboard header: match music, minus the sweep animation ──────────── */
/* The header reuses music's .dashboard-header markup/CSS for an identical look;
   we only mute the ambient sweep on the video side (equiv may return later,
   driven by meta sources). Scoped to data-side="video" so music is untouched. */
body[data-side="video"] .dashboard-header-sweep {
    display: none;
}
/* Music's dashboard blows its header icon up to 176px (#dashboard-page scope) —
   the video dashboard fell back to the 48px default, so its whole header read
   smaller. Same treatment, same size. */
.video-subpage[data-video-subpage="video-dashboard"] .page-header-icon {
    width: 176px;
    height: 176px;
}

/* ── Dashboard enrichment-worker buttons (isolated; music untouched) ────── */
.video-enrich-container { position: relative; }
/* Mirrors music's .musicbrainz-button accent treatment, driven by --ve-accent. */
.video-enrich-button {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ve-accent, 88, 101, 242), 0.25);
    background: rgba(18, 18, 22, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(var(--ve-accent, 88, 101, 242), 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.video-enrich-button:hover {
    transform: scale(1.05);
    border-color: rgba(var(--ve-accent, 88, 101, 242), 0.4);
    box-shadow: 0 6px 20px rgba(var(--ve-accent, 88, 101, 242), 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.video-enrich-button.active,
.video-enrich-button.complete {
    border-color: rgba(var(--ve-accent, 88, 101, 242), 0.5);
    box-shadow: 0 6px 24px rgba(var(--ve-accent, 88, 101, 242), 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Paused → amber accent, identical to music's .musicbrainz-button.paused. */
.video-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.video-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}
.video-enrich-button.disabled { opacity: 0.4; cursor: default; }
.video-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: opacity 0.3s ease;
}
.video-enrich-button:hover .video-enrich-logo { opacity: 1; }
/* The TVDB brand mark is dark — invert it so it reads on the dark UI. */
.video-enrich-button[data-video-enrich="tvdb"] .video-enrich-logo {
    filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.video-enrich-spinner {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 3px solid transparent;
    border-top-color: rgba(var(--ve-accent, 88, 101, 242), 0.8);
    border-right-color: rgba(var(--ve-accent, 88, 101, 242), 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.video-enrich-button.active .video-enrich-spinner { opacity: 1; animation: video-enrich-spin 1.2s linear infinite; }
@keyframes video-enrich-spin { to { transform: rotate(360deg); } }

/* Tint the reused .tooltip-content with the service accent (music's default is
   MusicBrainz purple; each service overrides — so we do the same per video svc). */
.video-enrich-tooltip .tooltip-content {
    border-color: rgba(var(--ve-accent, 88, 101, 242), 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(var(--ve-accent, 88, 101, 242), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.video-enrich-tooltip .tooltip-header { color: rgba(var(--ve-accent, 88, 101, 242), 0.95); }
.video-enrich-tooltip .tooltip-content::before { border-bottom-color: rgba(var(--ve-accent, 88, 101, 242), 0.3); }
.video-enrich-tooltip [data-video-enrich-status] { color: rgb(var(--ve-accent, 88, 101, 242)); font-weight: 600; }
/* Paused status text goes amber too, matching music. */
.video-enrich-button.paused ~ .video-enrich-tooltip [data-video-enrich-status] { color: #ffc107; }

/* Positioning wrapper only — the content reuses music's shared .tooltip-content
   / .tooltip-header / .tooltip-body styling, so it looks identical to the music
   enrichment tooltips. */
.video-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.video-enrich-container:hover .video-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* The Manage Workers button reuses music's .em-manage-btn* classes verbatim
   (see index.html), so it needs no styling of its own here — identical by reuse. */

/* Service logo in the settings API-config frame headers (TMDB/TVDB). */
.video-svc-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 2px; }
.video-svc-logo--tvdb { filter: invert(1); }

/* ── Video Manage-Workers modal ─────────────────────────────────────────────
   The modal now emits the music modal's exact markup (.em-hero / .em-row /
   .em-icon / .em-btn / .em-pager / .em-card), so it inherits music's global
   .em-* styling with no bespoke rules here. Live-status glows are further down;
   the YouTube-dates panel (its own no-queue layout) keeps its .vem-yt-* block. */

/* ── Subpages: one built video page shown at a time ────────────────────── */
/* Each real page is a .video-subpage inside #video-page-host; the controller
   toggles the [hidden] attribute. Be explicit so no reused .dash-* rule can
   resurrect a hidden page. */
.video-subpage[hidden],
.video-placeholder-slot[hidden] {
    display: none !important;
}

/* The Automations subpage hosts the SHARED music builder, whose
   .automations-builder-view is height:100% so its trigger/action sidebar + canvas
   scroll independently (like #automations-page on the music side). A .video-subpage
   is height:auto by default (other pages scroll in normal document flow), so that
   height:100% collapsed to content height and the sidebar grew instead of scrolling.
   #video-page-host is itself a .page (height:100%), so giving JUST this subpage a
   definite height makes the builder's chain resolve. Scoped to automations so every
   other video page keeps its natural scroll. */
.video-subpage[data-video-subpage="video-automations"]:not([hidden]) {
    height: 100%;
    min-height: 0;
}

/* ── Placeholder content (for pages not built yet) ─────────────────────── */
.video-placeholder-slot {
    padding: 48px 40px;
}
.video-placeholder-slot .header-title {
    font-size: 22px;
    font-weight: 700;
}
.video-placeholder-note {
    margin-top: 10px;
    color: var(--text-secondary, #9aa0aa);
    font-size: 14px;
}

/* Empty-state line inside reused dashboard cards (e.g. Recent Downloads). */
.video-empty-note {
    margin: 0;
    padding: 8px 2px;
    color: var(--text-secondary, #9aa0aa);
    font-size: 14px;
}

/* ── Library page ──────────────────────────────────────────────────────── */
/* The grid/cards/search/alphabet all reuse the music library CSS verbatim.
   The only video-specific bit is the Movies/Shows tab pill. */
.video-library-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin: 0 auto 4px;
    width: max-content;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}
.video-lib-tab {
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #9aa0aa);
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.video-lib-tab:hover { color: var(--text-primary, #e8e8ea); }
.video-lib-tab.active {
    color: #fff;
    background: rgb(var(--accent-rgb, 88 101 242));
}
.video-library-filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0;
}
/* Phones: the centered no-wrap row (3 selects + Select) overflowed BOTH edges
   — wrap it into a tidy 2-up grid instead. */
@media (max-width: 640px) {
    .video-library-filters { flex-wrap: wrap; gap: 8px; }
    .video-library-filters .library-source-filter-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .video-library-filters .video-lib-select-btn { flex: 1 1 calc(50% - 4px); }
}
/* Resolution chip on a poster card (top-left, above the gradient overlay). */
.library-artist-card .video-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════════════════
   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; }
/* Sticky so it stays reachable on these long detail pages (negative bottom margin
   pulls the billboard up under it, keeping the full-bleed overlay look). */
.vd-back {
    position: sticky; top: 14px; z-index: 8; width: max-content;
    margin: 0 0 -42px 22px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: 999px;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14);
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(10px); transition: background 0.2s ease, transform 0.2s ease;
}
.vd-back:hover { background: rgba(0,0,0,0.8); transform: translateX(-2px); }
.vd-back [data-vd-back-label] {
    display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: bottom;
}

/* ── 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-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(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-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;
}
@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-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-score { color: #fbbf24 !important; font-weight: 800; }
.vd-tagline { font-size: 16px; font-style: italic; color: rgba(255,255,255,0.7); margin: -8px 0 14px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.vd-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vd-genre { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
    /* clickable (#1042): opens Discover filtered to this genre */
    font-family: inherit; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.vd-genre:hover { color: #fff; background: rgba(var(--vd-accent-rgb), 0.16);
    border-color: rgba(var(--vd-accent-rgb), 0.55); }
.vd-meta-rating { padding: 1px 7px; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; font-size: 12px; }

/* Subtitle availability (OpenSubtitles backfill) — a labeled chip row of the
   languages subtitles exist in. Cooler blue tint to read as "captions", distinct
   from the neutral genre chips. */
.vd-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.vd-sub-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: rgba(120,170,255,0.9); margin-right: 2px; }
.vd-sub-label::before { content: 'CC'; font: 700 9px/1.2 'JetBrains Mono', ui-monospace, monospace;
    padding: 2px 4px; border-radius: 3px; background: rgba(120,170,255,0.18); border: 1px solid rgba(120,170,255,0.35); }
.vd-sub { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: rgba(200,220,255,0.92); background: rgba(120,170,255,0.1); border: 1px solid rgba(120,170,255,0.22); }
.vd-sub--more { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.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; }

/* Action buttons + source links reuse the music artist-detail classes verbatim
   (.library-artist-watchlist-btn / .discog-download-btn / .artist-hero-badge);
   only the billboard-specific bits live here. */
.vd-actions { margin-bottom: 16px; }
/* live download status chip — sits above the action buttons when a movie on this
   page is downloading; the bar fills with progress and it jumps to Downloads. */
.vd-dlchip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0;
    margin-bottom: 12px; padding: 9px 15px; border-radius: 11px; cursor: pointer; max-width: 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.1);
    color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s; animation: vdlRise 0.4s both; }
.vd-dlchip:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), 0.9); }
.vd-dlchip-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 11px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.42), rgba(var(--accent-rgb), 0.22));
    transition: width 0.5s ease; z-index: 0; }
.vd-dlchip-txt { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-dlchip-go { opacity: 0.78; font-weight: 700; }
.vd-dlchip.is-active { animation: vdlRise 0.4s both, vdlChipGlow 2.6s ease-in-out 0.5s infinite; }
.vd-dlchip.is-done { border-color: rgba(108, 211, 145, 0.5); background: rgba(108, 211, 145, 0.12); }
.vd-dlchip.is-done .vd-dlchip-bar { background: linear-gradient(90deg, rgba(108, 211, 145, 0.4), rgba(108, 211, 145, 0.22)); }
.vd-dlchip.is-fail { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); }
.vd-dlchip.is-fail .vd-dlchip-bar { background: linear-gradient(90deg, rgba(245, 158, 11, 0.34), rgba(245, 158, 11, 0.18)); }
@keyframes vdlChipGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
    50% { box-shadow: 0 0 16px -3px rgba(var(--accent-rgb), 0.6); } }
.vd-links { margin-bottom: 16px; }
.vd-links .artist-hero-badge[title="TVDB"] img { filter: invert(1); }

.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; }

.vd-toolbar-right { display: flex; align-items: center; gap: 12px; }
.vd-missing-toggle {
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.8);
    transition: all 0.2s ease;
}
.vd-missing-toggle:hover { background: rgba(255,255,255,0.1); }
.vd-missing-toggle--on { background: rgba(var(--vd-accent-rgb), 0.22); border-color: rgba(var(--vd-accent-rgb), 0.6); color: #fff; }

/* view toggle (rail / timeline / pills / dropdown) */
.vd-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.vd-vt-btn { width: 34px; height: 30px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    color: rgba(255,255,255,0.55); font-size: 14px; transition: all 0.18s ease; }
.vd-vt-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.vd-vt-btn--active { background: rgba(var(--vd-accent-rgb), 0.85); color: #fff; box-shadow: 0 2px 10px rgba(var(--vd-accent-rgb), 0.4); }

.vd-season-nav { margin-bottom: 26px; }
.vd-season-nav:empty { margin: 0; }

/* — rail — */
.vd-rail { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; }
.vd-rail::-webkit-scrollbar { height: 8px; }
.vd-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.vd-rcard { flex: 0 0 150px; width: 150px; text-align: left; padding: 0; cursor: pointer; scroll-snap-align: start;
    border-radius: 12px; 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-rcard:hover { transform: translateY(-5px); border-color: rgba(var(--vd-accent-rgb), 0.3);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 22px rgba(var(--vd-accent-rgb), 0.16); }
.vd-rcard--active { border-color: rgba(var(--vd-accent-rgb), 0.7); box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 26px rgba(var(--vd-accent-rgb), 0.32); }
.vd-rcard-art { position: relative; aspect-ratio: 2/3; overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.2), rgba(var(--vd-accent-rgb), 0.05)); }
.vd-rcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-rcard-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: 0.32; }
.vd-rcard-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,14,0.85)); }
.vd-rcard-pct { position: absolute; top: 7px; right: 7px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
    color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
.vd-rcard-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.vd-rcard-name { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-rcard-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.vd-rcard-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.vd-rcard-bar > span { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--vd-accent-rgb)), rgba(var(--vd-accent-rgb), 0.5)); }

/* — timeline — */
.vd-timeline { display: flex; gap: 6px; align-items: stretch; }
.vd-tseg { position: relative; min-width: 84px; height: 76px; padding: 0; cursor: pointer; overflow: hidden;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    transition: all 0.25s ease; }
.vd-tseg:hover { border-color: rgba(var(--vd-accent-rgb), 0.45); transform: translateY(-2px); }
.vd-tseg--active { border-color: rgba(var(--vd-accent-rgb), 0.75); box-shadow: 0 6px 22px rgba(var(--vd-accent-rgb), 0.28); }
.vd-tseg-fill { position: absolute; left: 0; bottom: 0; top: 0; border-radius: 9px 0 0 9px;
    background: linear-gradient(180deg, rgba(var(--vd-accent-rgb), 0.45), rgba(var(--vd-accent-rgb), 0.18)); }
.vd-tseg-label { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; height: 100%; justify-content: center; }
.vd-tseg-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.vd-tseg-meta { font-size: 12px; color: rgba(255,255,255,0.7); }

/* — pills — */
.vd-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.vd-pill-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.82);
    font-size: 13.5px; font-weight: 700; transition: all 0.2s ease; }
.vd-pill-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(var(--vd-accent-rgb), 0.4); }
.vd-pill-btn--active { background: rgba(var(--vd-accent-rgb), 0.9); border-color: transparent; color: #fff;
    box-shadow: 0 4px 16px rgba(var(--vd-accent-rgb), 0.4); }
.vd-pill-meta { font-size: 11.5px; opacity: 0.8; }
.vd-pill-btn--active .vd-pill-meta { opacity: 0.95; }

.vd-ep-empty { padding: 40px 0; text-align: center; color: rgba(255,255,255,0.5); }

/* season dropdown */
.vd-season-select { position: relative; display: inline-block; }
.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-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-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-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); }

/* 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 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: pointer;
}
.vd-ep-chev { color: rgba(255,255,255,0.35); font-size: 16px; transition: transform 0.25s ease, color 0.2s ease; }
.vd-ep:hover .vd-ep-chev { color: rgba(255,255,255,0.7); }
.vd-ep--open .vd-ep-chev { transform: rotate(180deg); color: rgb(var(--vd-accent-rgb)); }
.vd-ep:hover { background: rgba(255,255,255,0.04); }
.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-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-ep-thumb-ic { position: relative; z-index: 1; font-size: 20px; color: #fff; opacity: 0; transform: scale(0.7);
    transition: all 0.25s ease; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.vd-ep:hover .vd-ep-thumb-ic { opacity: 1; transform: scale(1); }
.vd-ep:hover .vd-ep-still { filter: brightness(0.7); transition: filter 0.25s ease; }
/* YouTube duration badge — bottom-right of the thumb (like the real player) */
.vd-ep-dur {
    position: absolute; z-index: 2; right: 5px; bottom: 5px;
    padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4;
    color: #fff; background: rgba(0, 0, 0, 0.82); letter-spacing: 0.02em;
}
/* YouTube video thumbnails are play buttons (stream in-app via the embed overlay) */
.vd-ep-thumb--play, .vd-yt-plvid-thumb { cursor: pointer; }
.vd-ep-thumb--play .vd-ep-thumb-ic { opacity: 0.92; transform: scale(1); }   /* always show the play hint */
.vd-ep-thumb--play:hover .vd-ep-thumb-ic { opacity: 1; transform: scale(1.15); }

/* Channel search + sort controls (above the year pills) */
.vd-season-nav--yt { display: flex; flex-direction: column; gap: 14px; }
.vd-yt-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vd-yt-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.vd-yt-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: rgba(255, 255, 255, 0.4); pointer-events: none; }
.vd-yt-search-in {
    width: 100%; padding: 9px 12px 9px 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff; font-size: 13.5px;
}
.vd-yt-search-in:focus { outline: none; border-color: rgba(var(--vd-accent-rgb, 255 59 59), 0.6);
    background: rgba(255, 255, 255, 0.09); }
.vd-yt-sort {
    padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vd-yt-sort:focus { outline: none; border-color: rgba(var(--vd-accent-rgb, 255 59 59), 0.6); }
.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-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; }

/* Continue Watching — per-episode watch state (server truth from the scan) */
.vd-ep-prog { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(255,255,255,0.25); }
.vd-ep-prog-fill { display: block; height: 100%; background: rgb(var(--vd-accent-rgb, 255 59 59));
    border-radius: 0 2px 2px 0; }
.vd-ep-check { flex: none; font-size: 13px; font-weight: 900; color: #4ade80; line-height: 1;
    align-self: center; }
.vd-ep--watched .vd-ep-title { color: rgba(255,255,255,0.62); }
.vd-ep--watched .vd-ep-still { filter: grayscale(0.35) brightness(0.82); }
.vd-ep--watched:hover .vd-ep-still { filter: grayscale(0.1) brightness(0.72); }
.vd-ep-next-chip { flex: none; align-self: center; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: rgba(var(--vd-accent-rgb, 255 59 59), 0.85); white-space: nowrap; }
.vd-ep--next { box-shadow: inset 3px 0 0 rgb(var(--vd-accent-rgb, 255 59 59));
    background: rgba(var(--vd-accent-rgb, 255 59 59), 0.05); }
.vd-ep--next:hover { background: rgba(var(--vd-accent-rgb, 255 59 59), 0.09); }
/* hero: watched tag in the meta line + the S/E tag inside the play button */
.vd-watched-tag { color: #4ade80 !important; font-weight: 700; }
.vd-play-ep { font-weight: 800; padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.16); font-size: 0.85em; }

/* Detail BIC P3 — enriched facts finally surfaced */
.vd-awards { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px;
    font-size: 13px; font-weight: 600; color: #fbbf24; }
.vd-awards-ic { font-size: 14px; }
.vd-stinger { color: #fbbf24 !important; font-weight: 700; white-space: nowrap; }
.vd-ep-new-chip { flex: none; align-self: center; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: rgba(220, 38, 38, 0.9); white-space: nowrap; }
/* format badges (4K · HDR10 · Atmos · 5.1) — boxed caps like the streamers */
.vd-fmt { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; line-height: 1;
    padding: 3px 7px; border-radius: 4px; color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.35); white-space: nowrap; }

@media (max-width: 820px) {
    .vd-bb-content { padding-left: 24px; padding-right: 24px; }
    .vd-body { padding: 24px 22px 60px; }
    .vd-ep { grid-template-columns: 36px 1fr auto; }
    .vd-ep-thumb { display: none; }
}
/* The detail page full-bleeds with -40px margins over the .page padding — but
   mobile.css shrinks that padding to 16px (<=768) / 12px (<=480), so the fixed
   -40 overhung the viewport by up to 28px per side (billboard, title, actions
   all clipped at the right edge). Match the bleed to the real padding. */
@media (max-width: 768px) {
    .vd-page { margin-left: -16px; margin-right: -16px; }
}
@media (max-width: 480px) {
    .vd-page { margin-left: -12px; margin-right: -12px; }
    .vd-bb-content { padding-left: 16px; padding-right: 16px; padding-bottom: 34px; }
    .vd-billboard { min-height: 62vh; }
    /* Episode rows: the nowrap runtime chip beside the title squeezed titles
       into one-word-per-line columns — let the top line wrap instead. */
    .vd-ep-top { flex-wrap: wrap; row-gap: 2px; }
}

.video-card--clickable { cursor: pointer; }

/* ── Manage-Workers modal: live status + glow (scoped to #vem-overlay; the
   music modal's shared .em-* styles are never touched). ───────────────────── */
#vem-overlay .em-dot--running { animation: vemDotPulse 1.5s ease-in-out infinite; }
@keyframes vemDotPulse {
    0%, 100% { box-shadow: 0 0 8px #1db954; }
    50% { box-shadow: 0 0 16px 3px #1db954; }
}
/* The selected worker's rail row carries a live accent glow. */
#vem-overlay .em-worker-row.active {
    box-shadow: inset 0 0 0 1px rgba(var(--row-accent), 0.45),
        0 0 22px rgba(var(--row-accent), 0.20);
}
/* Active "Process first" / kind selection glow in the worker accent. */
#vem-overlay .em-global-tabs button.active,
#vem-overlay .em-card--current {
    box-shadow: 0 0 18px rgba(var(--em-accent-rgb), 0.28);
}

/* ── Cast & crew section (detail page) ───────────────────────────────────── */
.vd-cast-section { margin-top: 46px; }
.vd-section-h { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 16px; }
.vd-crew { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.vd-crew-job { color: rgba(255, 255, 255, 0.45); font-weight: 600; }
.vd-cast { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vd-cast::-webkit-scrollbar { height: 8px; }
.vd-cast::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vd-cast-card { flex: 0 0 116px; width: 116px; scroll-snap-align: start; text-align: center; }
.vd-cast-photo {
    width: 116px; height: 116px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.vd-cast-photo--ph {
    display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.32), rgba(var(--vd-accent-rgb), 0.1));
}
.vd-cast-card:hover .vd-cast-photo { transform: translateY(-3px); border-color: rgba(var(--vd-accent-rgb), 0.6); }
.vd-cast-name { display: block; font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-cast-char { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Movie detail: details strip ─────────────────────────────────────────── */
.vd-details { margin-bottom: 8px; }
.vd-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 28px; max-width: 760px; }
.vd-detail-row { display: flex; flex-direction: column; gap: 3px; }
.vd-detail-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.45); }
.vd-detail-v { font-size: 14.5px; font-weight: 600; color: #fff; }

/* ── Clearlogo title (replaces the text title when available) ─────────────── */
.vd-logo {
    display: block; max-width: min(440px, 60%); max-height: 150px; width: auto; height: auto;
    margin: 0 0 16px; object-fit: contain; object-position: left bottom;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.7));
    animation: vdRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Keep the title for screen readers, but hide it visually when the logo shows. */
.vd-title--logo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Detail extras: trailer button, providers, More Like This, trailer modal ── */
.vd-trailer-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 8px;
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer;
    color: #fff; background: rgb(var(--vd-accent-rgb)); border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(var(--vd-accent-rgb), 0.4); transition: all 0.2s ease;
}
.vd-trailer-btn:hover { transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: 0 8px 22px rgba(var(--vd-accent-rgb), 0.55); }
.vd-trailer-ic { font-size: 12px; }

.vd-providers-section, .vd-similar-section, .vd-collection-section { margin-top: 40px; }
.vd-sim-year { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.vd-providers { display: flex; flex-wrap: wrap; gap: 14px; }
.vd-prov { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 78px; text-align: center; }
.vd-prov img, .vd-prov-ph {
    width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1);
}
.vd-prov-ph { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
    color: #fff; background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.4), rgba(var(--vd-accent-rgb), 0.1)); }
.vd-prov-name { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; }
/* Clickable provider / server tiles (anchors). */
a.vd-prov { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.2s ease; }
a.vd-prov:hover { transform: translateY(-4px); }
a.vd-prov:hover .vd-prov-name { color: #fff; }
a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-accent-rgb), 0.6); }
/* "Play on your server" tile — leads the row, glows green like the owned ribbon. */
.vd-prov--server .vd-prov-play {
    background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font-size: 22px;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45); border-color: rgba(255, 255, 255, 0.2);
}
/* The actual Plex/Jellyfin logo on a dark tile with a green "you own it" glow. */
.vd-prov--server .vd-prov-server-logo {
    background: rgba(10, 12, 16, 0.9); padding: 11px;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.42); border-color: rgba(34, 197, 94, 0.55);
}
.vd-prov-server-logo img {
    width: 100%; height: 100%; object-fit: contain;
    border: 0; border-radius: 0; box-shadow: none;
}
.vd-prov--server .vd-prov-name { color: #6ee7a0; font-weight: 700; }
/* streaming providers link out to the JustWatch aggregate page (#1042) */
.vd-prov--badge { cursor: pointer; }
/* the single real "where to watch" link (JustWatch/TMDB aggregate page) */
.vd-prov--more .vd-prov-more-ic {
    display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
    color: rgb(var(--vd-accent-rgb)); background: rgba(var(--vd-accent-rgb), 0.16);
    border-color: rgba(var(--vd-accent-rgb), 0.4);
}
.vd-prov--more .vd-prov-name { color: rgb(var(--vd-accent-rgb)); font-weight: 700; }

.vd-similar { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vd-similar::-webkit-scrollbar { height: 8px; }
.vd-similar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vd-sim-card { flex: 0 0 130px; width: 130px; scroll-snap-align: start; text-decoration: none; color: inherit;
    transition: transform 0.25s ease; }
.vd-sim-card:hover { transform: translateY(-4px); }
.vd-sim-poster { width: 130px; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover; display: block; margin-bottom: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); }
.vd-sim-poster--ph { display: flex; align-items: center; justify-content: center; font-size: 34px;
    background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.28), rgba(0, 0, 0, 0.5)); }
.vd-sim-title { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vd-trailer-overlay {
    position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px);
}
.vd-trailer-overlay--open { display: flex; animation: vdFade 0.2s ease both; }
@keyframes vdFade { from { opacity: 0; } to { opacity: 1; } }
.vd-trailer-box { position: relative; width: min(1100px, 92vw); aspect-ratio: 16/9;
    border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7); }
.vd-trailer-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.vd-trailer-close {
    position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease;
}
.vd-trailer-close:hover { background: rgba(255, 255, 255, 0.25); }

/* ── Rating badges (IMDb / Rotten Tomatoes / Metacritic, via OMDb) ────────── */
.vd-ratings { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 16px; }
.vd-rt {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px);
}
.vd-rt-tag { font-size: 11px; font-weight: 900; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.02em; }
.vd-rt-ic { font-size: 15px; line-height: 1; }
.vd-rt--imdb .vd-rt-tag { background: #f5c518; color: #000; }
.vd-rt--rt { }
.vd-rt--mc .vd-rt-tag { background: #fff; color: #000; }
.vd-rt--mc-good .vd-rt-tag { background: #6c3; color: #000; }
.vd-rt--mc-mid .vd-rt-tag { background: #fc3; color: #000; }
.vd-rt--mc-bad .vd-rt-tag { background: #f00; color: #fff; }
.vd-rt--trakt .vd-rt-tag { background: #ed1c24; color: #fff; }
.vd-rt--tvmaze .vd-rt-tag { background: #3dd6c0; color: #00211d; }
.vd-rt--anilist .vd-rt-tag { background: #02a9ff; color: #fff; }
/* DeArrow crowd title (YouTube video expand panel) */
.vd-dearrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; color: #cfe0ff; }
.vd-dearrow-tag { font-size: 10px; font-weight: 900; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px;
    background: #1f77ce; color: #fff; }

/* ── OMDb worker uses a ★ glyph (no clean brand logo) ─────────────────────── */
.video-enrich-glyph {
    position: relative; z-index: 1; font-size: 22px; line-height: 1;
    color: rgb(var(--ve-accent, 245, 197, 24));
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); transition: transform 0.3s ease;
}
.video-enrich-button:hover .video-enrich-glyph { transform: scale(1.1); }


/* ══════════════════════════════════════════════════════════════════════════
   In-app SEARCH + PERSON pages — cinematic, Netflix-grade (isolated, video).
   Shares the detail page's language: --vd-accent-rgb glow, full-bleed feel,
   poster cards with hover lift + gradient overlay, rise/fade entrances.
   ════════════════════════════════════════════════════════════════════════ */

/* ── shared poster/portrait card (search results + filmography) ───────────── */
.vsr-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 22px 20px;
}
.vsr-card {
    position: relative; display: flex; flex-direction: column; text-decoration: none;
    color: inherit; cursor: pointer; border-radius: 14px;
    animation: vsr-pop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vsr-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Progressive search: skeletons sit still (only real content animates in), each group fades
   out if it has no results, and real cards cascade in for a Netflix-style reveal. */
.vsr-card--skel { animation: none; cursor: default; pointer-events: none; }
.vsr-card--skel .vsr-poster, .vsr-card--skel .vsr-studio-logo { box-shadow: none; border-color: rgba(255, 255, 255, 0.05); }
.vsr-group { transition: opacity 0.24s ease; }

/* recent searches — chips above the idle trending rail */
.vsr-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.vsr-recent-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35); margin-right: 2px; }
.vsr-recent-chip { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75); font-size: 12.5px; font-weight: 600; padding: 6px 13px;
    border-radius: 999px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; transition: all 0.15s ease; }
.vsr-recent-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.vsr-recent-clear { border: 0; background: transparent; color: rgba(255, 255, 255, 0.3); font-size: 12px;
    cursor: pointer; padding: 6px 8px; border-radius: 999px; transition: color 0.15s ease; }
.vsr-recent-clear:hover { color: #f87171; }
.vsr-group--gone { opacity: 0; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(2) { animation-delay: 0.03s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(3) { animation-delay: 0.06s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(4) { animation-delay: 0.09s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(5) { animation-delay: 0.12s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(6) { animation-delay: 0.15s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(7) { animation-delay: 0.18s; }
.vsr-grid > .vsr-card:not(.vsr-card--skel):nth-child(n+8) { animation-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) {
    .vsr-card { animation: none; }
    .vsr-group { transition: none; }
}

.vsr-poster {
    position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
    background: linear-gradient(145deg, rgba(var(--vd-accent-rgb), 0.22), rgba(8, 8, 12, 0.9));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.vsr-poster img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vsr-poster .library-artist-image-fallback,
.vsr-poster-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 46px; color: rgba(255, 255, 255, 0.4);
}
.vsr-card:hover .vsr-poster {
    transform: translateY(-8px);
    border-color: rgba(var(--vd-accent-rgb), 0.55);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--vd-accent-rgb), 0.32);
}
.vsr-card:hover .vsr-poster img { transform: scale(1.08); }

/* gradient + hover affordance */
.vsr-poster::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
    transition: opacity 0.3s ease;
}
.vsr-card:hover .vsr-poster::after { opacity: 1; }
/* hover affordance = "view details" (an info badge), NOT a play button */
.vsr-peek {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--vd-accent-rgb), 0.92); color: #fff;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 22px;
    transform: translate(-50%, -50%) scale(0.5); opacity: 0;
    box-shadow: 0 6px 20px rgba(var(--vd-accent-rgb), 0.5);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.25s ease;
}
.vsr-card:hover .vsr-peek { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ribbon + rating chips */
.vsr-ribbon {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 7px; color: #fff;
    backdrop-filter: blur(8px); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
.vsr-ribbon--owned { background: rgba(34, 197, 94, 0.95); }
.vsr-ribbon--preview { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); }
/* Already on the wishlist — the third state between Preview and In Library. */
.vsr-ribbon--wish { background: rgba(var(--accent-rgb, 88 101 242), 0.92); border: none; }
/* Same states on the detail page's compact "More like this" cards. */
.vd-sim-card { position: relative; }
.vd-sim-wishchip { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 2px 8px;
    border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; background: rgba(var(--accent-rgb, 88 101 242), 0.92); color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: none; }
.vd-sim-wishchip--owned { background: rgba(34, 197, 94, 0.95); }
.vsr-rating {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 800; color: #fde68a;
    padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px);
}

/* 'NEW' flag — un-owned current-year releases (bottom-left, clear of ribbon + rating) */
.vsr-new {
    position: absolute; bottom: 10px; left: 10px; z-index: 2;
    font-size: 9.5px; font-weight: 900; letter-spacing: 0.6px;
    padding: 3px 7px; border-radius: 6px; color: #07110a;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.45);
}

.vsr-info { padding: 11px 4px 0; min-width: 0; }
.vsr-info--center { text-align: center; }
.vsr-name {
    display: block; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.2s ease;
}
.vsr-card:hover .vsr-name { color: rgb(var(--vd-accent-rgb)); }
.vsr-sub { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* people = circular portrait card */
.vsr-card--person .vsr-poster {
    aspect-ratio: 1 / 1; border-radius: 50%;
    background: linear-gradient(145deg, rgba(var(--vd-accent-rgb), 0.3), rgba(8, 8, 12, 0.9));
}
.vsr-card--person:hover .vsr-poster { border-radius: 50%; }
.vsr-card--person .vsr-poster::after { border-radius: 50%; }

/* Studio search result = a wide logo tile (a studio has no poster). Bright card
   so dark studio logos read on the dark page; same hover-lift as posters. */
.vsr-grid--studios { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vsr-card--studio .vsr-studio-logo {
    position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
    background: linear-gradient(160deg, #fafafe 0%, #d9dbe6 100%);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.vsr-card--studio .vsr-studio-logo img { max-width: 100%; max-height: 74px; object-fit: contain; display: block; }
.vsr-studio-ph { font-size: 44px; opacity: 0.4; }
.vsr-card--studio:hover .vsr-studio-logo {
    transform: translateY(-8px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--vd-accent-rgb), 0.32);
    border-color: rgba(var(--vd-accent-rgb), 0.55);
}

/* YouTube channel = the SAME 2:3 poster tile as movies/TV (shared .vsr-grid,
   hover-lift, peek), but a channel has only a square avatar — so it's centered
   on a YouTube-branded ground with a red 'YouTube' ribbon in the ribbon slot. */
.vsr-poster--yt {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, rgba(255, 59, 59, 0.30), rgba(12, 8, 10, 0.94));
}
.vsr-yt-av {
    width: 58%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.16); background: #16161d;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.32s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vsr-yt-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsr-yt-avatar.vyt-avatar--ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800; color: rgba(255, 255, 255, 0.78); background: #1c1c24;
}
.vsr-card--yt:hover .vsr-yt-av { border-color: rgba(255, 59, 59, 0.6); transform: scale(1.05); }
.vsr-ribbon--yt { background: rgba(255, 59, 59, 0.95); }

/* ── SEARCH page ──────────────────────────────────────────────────────────── */
.vsr-page { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); position: relative; margin: -40px -40px 0; }
.vsr-hero {
    position: relative; overflow: hidden;
    padding: 48px 56px 30px; text-align: center;
}
.vsr-hero-glow {
    position: absolute; inset: -40% 0 auto 0; height: 360px; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%, rgba(var(--vd-accent-rgb), 0.28), transparent 70%);
    animation: vsr-glow 7s ease-in-out infinite alternate;
}
@keyframes vsr-glow { from { opacity: 0.65; } to { opacity: 1; } }
.vsr-hero-title {
    position: relative; z-index: 1; margin: 0 0 8px;
    font-size: clamp(2em, 4vw, 3em); font-weight: 900; letter-spacing: -0.02em; color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.vsr-hero-sub { position: relative; z-index: 1; margin: 0 0 26px; font-size: 14.5px; color: rgba(255, 255, 255, 0.6); }
.vsr-searchbar {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
    max-width: 660px; margin: 0 auto; padding: 0 20px; height: 58px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px; backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.vsr-searchbar:focus-within {
    border-color: rgba(var(--vd-accent-rgb), 0.65);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(var(--vd-accent-rgb), 0.18);
}
.vsr-search-ic { font-size: 19px; opacity: 0.7; }
.vsr-input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 17px; font-weight: 500;
}
.vsr-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.vsr-body { padding: 6px 56px 70px; }
.vsr-results { display: flex; flex-direction: column; gap: 40px; }
.vsr-group { animation: vsr-fade 0.4s ease both; }
@keyframes vsr-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vsr-group-title {
    display: flex; align-items: center; gap: 11px; margin: 0 0 18px;
    font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em;
}
.vsr-group-ic { font-size: 19px; }
.vsr-group-count {
    font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
    background: rgba(var(--vd-accent-rgb), 0.18); border: 1px solid rgba(var(--vd-accent-rgb), 0.3);
    border-radius: 999px; padding: 2px 10px;
}

.vsr-state { padding: 70px 20px; text-align: center; }
.vsr-state-ic {
    font-size: 56px; margin-bottom: 16px; display: inline-block;
    filter: drop-shadow(0 6px 18px rgba(var(--vd-accent-rgb), 0.4));
    animation: vsr-float 4s ease-in-out infinite;
}
@keyframes vsr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.vsr-state-title { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.vsr-state-sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); max-width: 460px; margin: 0 auto; line-height: 1.6; }
.vsr-loading { padding: 60px 0; text-align: center; color: rgba(255, 255, 255, 0.6); }

/* ══════════════════════════════════════════════════════════════════════════
   PERSON page — cinematic bio + filmography
   ════════════════════════════════════════════════════════════════════════ */
.vp-page {
    --vd-accent-rgb: var(--accent-rgb, 88, 101, 242);
    position: relative; margin: -40px -40px -90px; min-height: 80vh;
}
/* Cinematic hero: a blurred-portrait wash + an accent colour mesh, capped by a
   vignette and a fade into the page. Layers are static (painted once) so the
   hero stays cheap. */
.vp-ambient {
    position: absolute; inset: 0 0 auto 0; height: 560px; z-index: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
            mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.vp-ambient::before {
    content: ''; position: absolute; inset: -80px; background-size: cover; background-position: center 18%;
    background-image: var(--vp-bg, none); filter: blur(54px) saturate(1.35); transform: scale(1.2);
    opacity: 0.5;
}
.vp-ambient::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(80% 90% at 16% -10%, rgba(var(--vd-accent-rgb), 0.42), transparent 60%),
        radial-gradient(70% 80% at 100% 0%, rgba(var(--vd-accent-rgb), 0.2), transparent 65%),
        radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, 0.5), transparent 60%),
        linear-gradient(180deg, rgba(11,11,15,0.25) 0%, rgba(11,11,15,0.62) 58%, var(--bg-primary, #0b0b0f) 100%);
}
.vp-page[data-has-bg="0"] .vp-ambient::before {
    background-image: radial-gradient(80% 120% at 30% 0%, rgba(var(--vd-accent-rgb), 0.55), transparent 70%);
    filter: none; opacity: 0.8;
}

.vp-page .vd-back { z-index: 6; }
.vp-hero {
    position: relative; z-index: 2; display: flex; gap: 40px; align-items: flex-end;
    padding: 150px 56px 34px; animation: vdRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vdRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Portrait: a frame with a slowly-rotating accent gradient ring (GPU transform —
   cheap) + a gentle float. */
.vp-photo-wrap {
    position: relative; flex: 0 0 auto; width: 200px; height: 200px;
    animation: vp-float 7s ease-in-out infinite;
}
@keyframes vp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.vp-photo-ring {
    position: absolute; inset: -7px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg,
        rgba(var(--vd-accent-rgb), 0.95), rgba(var(--vd-accent-rgb), 0.04) 38%,
        rgba(var(--vd-accent-rgb), 0.55) 72%, rgba(var(--vd-accent-rgb), 0.95));
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
            mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    animation: vp-spin 18s linear infinite; will-change: transform; opacity: 0.9;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-photo-frame {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1;
    background: linear-gradient(145deg, rgba(var(--vd-accent-rgb), 0.42), rgba(8, 8, 12, 0.92));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.62), 0 0 60px rgba(var(--vd-accent-rgb), 0.32),
        inset 0 0 0 2px rgba(255, 255, 255, 0.07);
}
.vp-photo { width: 100%; height: 100%; object-fit: cover; }
.vp-photo-ph { font-size: 80px; opacity: 0.55; }

.vp-hero-info { flex: 1; min-width: 0; padding-bottom: 10px; }
.vp-role {
    display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase; color: rgb(var(--vd-accent-rgb));
    padding: 5px 13px; border-radius: 999px;
    background: rgba(var(--vd-accent-rgb), 0.14); border: 1px solid rgba(var(--vd-accent-rgb), 0.34);
    text-shadow: 0 0 18px rgba(var(--vd-accent-rgb), 0.5);
}
.vp-name {
    margin: 0 0 14px; font-size: clamp(2.4em, 5vw, 3.8em); font-weight: 900;
    line-height: 0.98; letter-spacing: -0.025em;
    background: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0.72));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.6));
}
.vp-meta { display: flex; flex-wrap: wrap; gap: 9px; }
.vp-meta span {
    font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82);
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px);
}
/* watchlist (follow person) button row — reuses the shared .library-artist-watchlist-btn */
.vp-actions { margin-top: 14px; }
.vp-actions:empty { display: none; }
@media (max-width: 720px) { .vp-actions { display: flex; justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
    .vp-photo-wrap { animation: none; }
    .vp-photo-ring { animation: none; }
}

.vp-body { position: relative; z-index: 2; padding: 16px 56px 60px; }
.vp-bio {
    font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.8);
    max-width: 920px; margin: 0 0 6px; white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-bio.vp-bio--open { -webkit-line-clamp: 99; }
.vp-bio-more {
    background: none; border: 0; color: rgb(var(--vd-accent-rgb)); font-weight: 700; font-size: 13.5px;
    cursor: pointer; padding: 4px 0; margin: 0 0 30px; display: inline-block;
}
.vp-bio-more[hidden] { display: none; }

/* Known For — a horizontal hero rail of the person's best-known titles */
.vp-known-section { position: relative; z-index: 2; margin-bottom: 38px; }
.vp-known-title { margin: 0 0 16px; }
.vp-known-rail {
    display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity;
}
.vp-known-rail::-webkit-scrollbar { height: 8px; }
.vp-known-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vp-known-rail .vsr-card { flex: 0 0 152px; width: 152px; scroll-snap-align: start; }

/* Long filmography grids can be hundreds of cards — let the browser skip
   rendering the off-screen ones (cheap scrolling) and don't replay the entrance
   animation as cards recycle in and out of view. */
.vp-credits-section .vsr-grid > .vsr-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
    animation: none;
}

.vp-credits-section { position: relative; z-index: 2; }
.vp-credits-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px;
}
.vp-credits-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.vp-credit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.vp-credit-tabs { display: flex; gap: 8px; }
/* The ownership group sits after a faint divider so it reads as a second axis. */
.vp-own-tabs { position: relative; padding-left: 14px; }
.vp-own-tabs::before {
    content: ''; position: absolute; left: 0; top: 14%; height: 72%; width: 1px;
    background: rgba(255, 255, 255, 0.16);
}
/* "In Library" filter glows green (matches the owned ribbon) when active. */
.vp-own-tabs [data-vp-own="owned"].vp-tab--active {
    background: rgba(34, 197, 94, 0.92); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}
.vp-credits-empty {
    padding: 44px 20px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.55);
}
.vp-dept-tabs [data-vp-dept].vp-tab--active {
    background: rgba(var(--vd-accent-rgb, 99, 102, 241), 0.92); border-color: transparent; color: #fff;
}
.vp-dept-tabs:empty { display: none; }
.vp-sort {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85); border-radius: 9px; padding: 8px 12px; font-size: 13px;
    font-weight: 600; cursor: pointer; outline: none;
}
.vp-sort:hover { background: rgba(255, 255, 255, 0.1); }
.vp-sort option { background: #16161c; color: #fff; }
.vp-tab {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 7px 16px; cursor: pointer;
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px;
    transition: all 0.18s ease;
}
.vp-tab:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vp-tab--active {
    background: rgba(var(--vd-accent-rgb), 0.92); border-color: transparent; color: #fff;
    box-shadow: 0 4px 16px rgba(var(--vd-accent-rgb), 0.4);
}
.vp-tab-count { font-size: 11px; opacity: 0.85; }

/* cast card on the detail page becomes a real link → person */
.vd-cast-card--link { cursor: pointer; text-decoration: none; }
.vd-cast-card--link:hover .vd-cast-name { color: rgb(var(--vd-accent-rgb)); }

.vd-status--preview {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}

/* ── Studio detail (production company) ──────────────────────────────────────
   A studio is a collection of films, not a single title — so it borrows the
   person page's cinematic ambient + body rhythm but leads with a wide logo card
   (not a round portrait) and a plain film grid. .vst-* only. */
.vst-page {
    --vd-accent-rgb: var(--accent-rgb, 88, 101, 242);
    position: relative; margin: -40px -40px -90px; min-height: 80vh;
}
.vst-page .vd-back { z-index: 6; }
/* No studio backdrop art → always paint the accent-mesh wash (reuses .vp-ambient). */
.vst-page .vp-ambient::before {
    background-image: radial-gradient(80% 120% at 30% 0%, rgba(var(--vd-accent-rgb), 0.55), transparent 70%);
    filter: none; opacity: 0.8;
}
.vst-hero {
    position: relative; z-index: 2; display: flex; gap: 40px; align-items: flex-end;
    padding: 150px 56px 34px; animation: vdRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Logo card: studio logos are mostly dark artwork on transparent — a bright card
   keeps them legible on the dark page (white-logo studios stay readable too via
   the subtle top sheen). */
.vst-logo-frame {
    flex: 0 0 auto; width: 230px; min-height: 150px; border-radius: 20px;
    background: linear-gradient(160deg, #fafafe 0%, #d9dbe6 100%);
    display: flex; align-items: center; justify-content: center; padding: 26px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6), 0 0 60px rgba(var(--vd-accent-rgb), 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.vst-logo { max-width: 100%; max-height: 118px; object-fit: contain; }
.vst-logo-ph { font-size: 72px; opacity: 0.5; }

.vst-hero-info { flex: 1; min-width: 0; padding-bottom: 10px; }
.vst-eyebrow {
    display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase; color: rgb(var(--vd-accent-rgb));
    padding: 5px 13px; border-radius: 999px;
    background: rgba(var(--vd-accent-rgb), 0.14); border: 1px solid rgba(var(--vd-accent-rgb), 0.34);
    text-shadow: 0 0 18px rgba(var(--vd-accent-rgb), 0.5);
}
.vst-name {
    margin: 0 0 14px; font-size: clamp(2.4em, 5vw, 3.8em); font-weight: 900;
    line-height: 0.98; letter-spacing: -0.025em;
    background: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0.72));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.6));
}
.vst-meta { display: flex; flex-wrap: wrap; gap: 9px; }
.vst-meta span {
    font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82);
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px);
}
.vst-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vst-actions:empty { display: none; }
.vst-site {
    display: inline-block; font-size: 13px; font-weight: 700; text-decoration: none;
    color: rgb(var(--vd-accent-rgb)); padding: 7px 15px; border-radius: 999px;
    background: rgba(var(--vd-accent-rgb), 0.13); border: 1px solid rgba(var(--vd-accent-rgb), 0.32);
    transition: background 0.18s ease;
}
.vst-site:hover { background: rgba(var(--vd-accent-rgb), 0.24); }

.vst-body { position: relative; z-index: 2; padding: 16px 56px 60px; }
.vst-about {
    font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.8);
    max-width: 920px; margin: 0 0 30px; white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.vst-about[hidden] { display: none; }
.vst-films-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.vst-films-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.vst-count { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.5); margin-left: 4px; }
.vst-films-tools { display: flex; align-items: center; gap: 12px; }
/* Long catalogs are paged in — cheap off-screen skipping like the filmography grid. */
.vst-films-section .vsr-grid > .vsr-card { content-visibility: auto; contain-intrinsic-size: auto 300px; }
.vst-films-empty { padding: 44px 20px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.vst-films-empty[hidden] { display: none; }
.vst-sentinel { height: 1px; }
.vst-sentinel[hidden] { display: none; }
.vst-more-spinner { display: flex; justify-content: center; padding: 26px 0; }
.vst-more-spinner[hidden] { display: none; }

@media (max-width: 768px) {
    /* Bleed must MATCH mobile.css's .page side padding (16px at <=768, 12px at
       <=480) — mobile.css flips at 768, so this block must too (at 721-768 the
       base -40px bleed was overshooting the 16px padding by 24px per side). */
    .vsr-page, .vp-page, .vst-page { margin-left: -16px; margin-right: -16px; }
    .vsr-hero { padding: 34px 18px 22px; }
    .vsr-body, .vp-body, .vst-body { padding-left: 18px; padding-right: 18px; }
    .vp-hero { flex-direction: column; align-items: center; text-align: center; padding: 104px 18px 24px; }
    .vst-hero { flex-direction: column; align-items: center; text-align: center; padding: 104px 18px 24px; }
    .vst-meta { justify-content: center; }
    .vp-meta { justify-content: center; }
    .vsr-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px 14px; }
    .vp-photo-wrap { width: 150px; height: 150px; }
}
@media (max-width: 480px) {
    .vsr-page, .vp-page, .vst-page { margin-left: -12px; margin-right: -12px; }
    .vsr-body, .vp-body, .vst-body { padding-left: 14px; padding-right: 14px; }
    .vsr-hero { padding: 28px 14px 20px; }
    .vsr-hero-title { font-size: 26px; }
    .vsr-searchbar { height: 50px; border-radius: 13px; }
    .vsr-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px 10px; }
}

/* ── billboard: Play CTA, crew line, next-episode, season overview ────────── */
/* Matches .vd-trailer-btn exactly (consistent with the other hero buttons) —
   just green to read as "owned / play". */
.vd-play-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; border-radius: 8px;
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
    color: #fff; border: 1px solid transparent;
    /* deeper green so the light Plex/Jellyfin wordmark reads clearly on it */
    background: linear-gradient(135deg, #1fae54, #15803d);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4); transition: all 0.2s ease;
}
.vd-play-btn:hover { transform: translateY(-1px); filter: brightness(1.1);
    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.55); }
.vd-play-logo { height: 15px; width: auto; position: relative; top: 0.5px; }
.vd-play-ic { font-size: 12px; }

.vd-crew-line { font-size: 14px; color: rgba(255, 255, 255, 0.84); margin: 2px 0 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.vd-crew-line-k { color: rgba(255, 255, 255, 0.5); font-weight: 600; margin-right: 4px; }

.vd-next-ep {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px;
    font-size: 13.5px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.vd-next-ep-badge {
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgb(var(--vd-accent-rgb)); padding: 4px 11px; border-radius: 999px;
    background: rgba(var(--vd-accent-rgb), 0.16); border: 1px solid rgba(var(--vd-accent-rgb), 0.36);
}
.vd-next-ep-code { font-weight: 800; }
.vd-next-ep-name { color: rgba(255, 255, 255, 0.72); font-style: italic; }
.vd-next-ep-when { color: rgba(255, 255, 255, 0.6); }

.vd-season-overview {
    font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7);
    max-width: 880px; margin: -8px 0 22px;
}

/* ── detail skeleton loader (shimmer billboard while data loads) ──────────── */
.vd-skel {
    position: absolute; top: 0; left: 0; right: 0; height: 76vh; min-height: 470px; z-index: 5; overflow: hidden;
    background: radial-gradient(120% 90% at 70% 0%, rgba(var(--vd-accent-rgb, 88, 101, 242), 0.18), var(--bg-primary, #0b0b0f) 60%);
}
.vd-skel-content { position: absolute; left: 56px; bottom: 60px; width: min(60%, 600px); }
.skel-shine {
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.05) 70%);
    background-size: 200% 100%; animation: vd-skel-shine 1.4s ease-in-out infinite;
}
@keyframes vd-skel-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vd-skel-logo { height: 54px; width: 320px; max-width: 80%; margin-bottom: 22px; }
.vd-skel-meta { height: 16px; width: 280px; max-width: 70%; margin-bottom: 22px; }
.vd-skel-text { height: 13px; width: 100%; margin-bottom: 10px; }
.vd-skel-text.short { width: 70%; margin-bottom: 26px; }
.vd-skel-btns { display: flex; gap: 12px; }
.vd-skel-btns span { height: 44px; width: 130px; border-radius: 10px; display: block; }
@media (max-width: 720px) {
    .vd-skel-content { left: 22px; right: 22px; width: auto; bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .skel-shine { animation: none; } }

/* clickable crew / director names → person page */
.vd-person-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
.vd-person-link:hover { color: rgb(var(--vd-accent-rgb)); border-bottom-color: rgba(var(--vd-accent-rgb), 0.5); }

/* "fetching full episode list" banner (shown while the TMDB cascade runs) */
.vd-ep-syncing {
    display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 16px;
    border-radius: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78);
    background: rgba(var(--vd-accent-rgb), 0.1); border: 1px solid rgba(var(--vd-accent-rgb), 0.26);
}
.vd-ep-syncing-spin {
    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(var(--vd-accent-rgb), 0.3); border-top-color: rgb(var(--vd-accent-rgb));
    animation: vd-ep-spin 0.8s linear infinite;
}
@keyframes vd-ep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vd-ep-syncing-spin { animation: none; } }

/* A class with an explicit `display` (e.g. .vd-ep-syncing/.vd-next-ep) otherwise
   beats the UA [hidden]{display:none}, so toggling el.hidden wouldn't hide it.
   Guarantee hidden always hides on the video detail/search/person pages. */
.vd-page [hidden], .vp-page [hidden], .vsr-page [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Detail extras: Details/keywords, Videos, Photos gallery + lightbox, full cast
   ════════════════════════════════════════════════════════════════════════ */
.vd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.vd-section-head .vd-section-h { margin: 0; }
.vd-viewall {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 6px 14px; font-size: 12.5px;
    font-weight: 700; cursor: pointer; transition: all 0.18s ease;
}
.vd-viewall:hover { background: rgba(var(--vd-accent-rgb), 0.2); border-color: rgba(var(--vd-accent-rgb), 0.5); color: #fff; }

.vd-facts-section, .vd-videos-section, .vd-gallery-section { margin-top: 44px; }
.vd-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vd-kw {
    padding: 5px 12px; border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    /* clickable (#1042): runs a search for this keyword */
    font-family: inherit; cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.vd-kw:hover { color: #fff; background: rgba(var(--vd-accent-rgb), 0.16); border-color: rgba(var(--vd-accent-rgb), 0.45); }
/* Studio chips → each opens its Studio page. A logo chip gets a bright ground so
   dark studio logos read; a name-only chip looks like a keyword pill. */
.vd-studios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vd-studio-chip {
    display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; cursor: pointer;
    border-radius: 10px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.vd-studio-chip:hover {
    transform: translateY(-2px); color: #fff;
    border-color: rgba(var(--vd-accent-rgb), 0.6); background: rgba(var(--vd-accent-rgb), 0.14);
}
.vd-studio-chip .vd-studio-logo {
    max-height: 26px; max-width: 120px; object-fit: contain; display: block;
    padding: 3px 8px; border-radius: 6px; background: linear-gradient(160deg, #fafafe, #d9dbe6);
}

/* videos rail */
.vd-videos { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vd-videos::-webkit-scrollbar, .vd-gallery::-webkit-scrollbar { height: 8px; }
.vd-videos::-webkit-scrollbar-thumb, .vd-gallery::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vd-video-card { flex: 0 0 240px; width: 240px; scroll-snap-align: start; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.vd-video-thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vd-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vd-video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff; background: rgba(0, 0, 0, 0.25); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.vd-video-card:hover .vd-video-thumb { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.vd-video-name { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-video-type { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }

/* photos rail */
.vd-gallery { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vd-shot {
    flex: 0 0 280px; width: 280px; aspect-ratio: 16 / 9; scroll-snap-align: start; padding: 0; border: 0; cursor: pointer;
    border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vd-shot img { width: 100%; height: 100%; object-fit: cover; }
.vd-shot:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }

/* lightbox + full-cast modal share the accent fallback (they live on <body>) */
.vd-lightbox, .vd-cast-modal { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); }
.vd-lightbox {
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(6px);
}
.vd-lightbox--open { display: flex; animation: vd-fade 0.2s ease; }
@keyframes vd-fade { from { opacity: 0; } to { opacity: 1; } }
.vd-lb-img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.vd-lb-close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 24px; }
.vd-lb-close:hover { background: rgba(255, 255, 255, 0.22); }
.vd-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 30px; line-height: 1; }
.vd-lb-nav:hover { background: rgba(255, 255, 255, 0.22); }
.vd-lb-prev { left: 24px; }
.vd-lb-next { right: 24px; }
.vd-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255, 255, 255, 0.7); }

.vd-cast-modal {
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); padding: 30px;
}
.vd-cast-modal--open { display: flex; animation: vd-fade 0.2s ease; }
.vd-cm-box {
    background: #16161c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
    width: min(960px, 96vw); max-height: 86vh; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.vd-cm-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vd-cm-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.vd-cm-close { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; }
.vd-cm-close:hover { background: rgba(255, 255, 255, 0.18); }
.vd-cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 18px; padding: 22px; overflow-y: auto; }
.vd-cm-card { text-decoration: none; text-align: center; color: inherit; cursor: pointer; }
.vd-cm-photo {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 9px;
    border: 2px solid rgba(255, 255, 255, 0.08); transition: transform 0.2s ease, border-color 0.2s ease;
}
.vd-cm-photo--ph { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;
    color: rgba(255, 255, 255, 0.5); background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.32), rgba(var(--vd-accent-rgb), 0.1)); }
.vd-cm-card:hover .vd-cm-photo { transform: translateY(-3px); border-color: rgba(var(--vd-accent-rgb), 0.6); }
.vd-cm-name { display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; }
.vd-cm-char { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.3; }
.vd-cm-eps { display: block; font-size: 11px; color: rgb(var(--vd-accent-rgb)); margin-top: 2px; font-weight: 600; }

/* ── person: photos rail + also-known-as ─────────────────────────────────── */
.vp-aka { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); margin: 0 0 18px; font-style: italic; }
.vp-photos-section { position: relative; z-index: 2; margin-bottom: 38px; }
.vp-photos { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vp-photos::-webkit-scrollbar { height: 8px; }
.vp-photos::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vp-photo-thumb {
    flex: 0 0 120px; width: 120px; aspect-ratio: 2 / 3; scroll-snap-align: start; padding: 0; border: 0; cursor: pointer;
    border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vp-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vp-photo-thumb:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }

/* ── featured review ─────────────────────────────────────────────────────── */
.vd-review-section { margin-top: 44px; }
.vd-review {
    max-width: 880px; padding: 20px 22px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.vd-review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.vd-review-author { font-size: 15px; font-weight: 800; color: #fff; }
.vd-review-rating { font-size: 13px; font-weight: 800; color: #fbbf24; }
.vd-review-date { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.vd-review-body {
    margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-review-body--open { -webkit-line-clamp: 999; }
.vd-review-more {
    background: none; border: 0; color: rgb(var(--vd-accent-rgb)); font-weight: 700; font-size: 13.5px;
    cursor: pointer; padding: 8px 0 0;
}

/* ── billboard autoplay trailer ──────────────────────────────────────────── */
.vd-bb-trailer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; opacity: 0; }
.vd-bb-trailer iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; pointer-events: none;
}
/* Reveal — only once the trailer is actually PLAYING (gated in video-detail.js).
   The trailer wipes in left→right behind a soft feathered edge while it
   crossfades, so the backdrop appears to roll away from the left AND fade —
   "both a rollover and a fade." @property animates the mask gradient smoothly;
   browsers without it still get the opacity crossfade. */
@property --vd-wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.vd-billboard--trailer .vd-bb-trailer {
    -webkit-mask-image: linear-gradient(100deg, #000 var(--vd-wipe), transparent calc(var(--vd-wipe) + 16%));
            mask-image: linear-gradient(100deg, #000 var(--vd-wipe), transparent calc(var(--vd-wipe) + 16%));
    animation: vdTrailerWipeIn 1.15s cubic-bezier(0.62, 0.04, 0.18, 1) forwards;
}
@keyframes vdTrailerWipeIn { from { --vd-wipe: -16%; opacity: 0; } to { --vd-wipe: 116%; opacity: 1; } }
.vd-billboard--trailer .vd-bb-bg { animation: vdBgFadeOut 1.15s ease forwards; }
@keyframes vdBgFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Restore — when the trailer ends, fade the original backdrop back in and the
   trailer out, then it's torn down. */
.vd-billboard--restoring .vd-bb-bg { animation: vdBgFadeIn 0.9s ease forwards; }
@keyframes vdBgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vd-billboard--restoring .vd-bb-trailer { animation: vdTrailerFadeOut 0.7s ease forwards; }
@keyframes vdTrailerFadeOut { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .vd-billboard--trailer .vd-bb-trailer { -webkit-mask-image: none; mask-image: none; animation: vd-fade 0.4s ease forwards; }
    .vd-billboard--trailer .vd-bb-bg { animation: vdBgFadeOut 0.4s ease forwards; }
}
.vd-bb-tctrls { position: absolute; bottom: 20px; right: 24px; z-index: 4; display: flex; gap: 8px; }
.vd-bb-tbtn {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer;
    background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 15px; backdrop-filter: blur(8px); transition: all 0.2s ease;
}
.vd-bb-tbtn:hover { background: rgba(0, 0, 0, 0.78); transform: translateY(-1px); }

/* settings: detail-pages preference toggle */
.vid-pref-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-primary, #fff); }
.vid-pref-row input { width: 16px; height: 16px; cursor: pointer; accent-color: #38bdf8; }

/* ── owned media: multiple versions/editions ─────────────────────────────── */
.vd-versions { margin-top: 18px; }
.vd-versions-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.45); margin-bottom: 8px; }
.vd-version {
    display: inline-block; margin: 0 8px 8px 0; padding: 7px 13px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── episode expand (guest stars + bigger still) ─────────────────────────── */
.vd-ep-extra {
    display: flex; gap: 22px; padding: 6px 14px 24px 82px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    animation: vsr-fade 0.3s ease;
}
.vd-ep-extra-still { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.vd-ep-extra-body { flex: 1; min-width: 0; }
/* Per-episode external deep-links (#1039) — a small badge row under the synopsis */
.vd-ep-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vd-ep-extra-ov { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.vd-ep-extra-empty { color: rgba(255, 255, 255, 0.45); font-size: 13.5px; padding: 4px 0; }
.vd-ep-extra-gh { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.45); margin-bottom: 12px; }
.vd-ep-guests { display: flex; flex-wrap: wrap; gap: 16px; }
.vd-guest { width: 92px; text-align: center; text-decoration: none; color: inherit; }
a.vd-guest { cursor: pointer; transition: transform 0.18s ease; }
a.vd-guest:hover { transform: translateY(-3px); }
a.vd-guest:hover .vd-guest-name { color: rgb(var(--vd-accent-rgb)); }
.vd-guest-photo {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 7px;
    border: 2px solid rgba(255, 255, 255, 0.08);
}
.vd-guest-photo--ph { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
    color: rgba(255, 255, 255, 0.5); background: linear-gradient(135deg, rgba(var(--vd-accent-rgb), 0.3), rgba(var(--vd-accent-rgb), 0.08)); }
.vd-guest-name { display: block; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25; }
.vd-guest-char { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.25; }
@media (max-width: 720px) {
    .vd-ep-extra { flex-direction: column; padding-left: 14px; }
    .vd-ep-extra-still { width: 100%; }
}

.vid-pref-row--select { justify-content: space-between; cursor: default; }
.vid-pref-row--select select {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary, #fff); border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer;
}
.vid-pref-row--select select option { background: #16161c; color: #fff; }

/* Server Connection mirrors the music server picker (.server-toggle-container /
   .server-config-container) — no video-specific styling needed beyond those
   shared classes. */

/* library: no-server gate banner */
.video-noserver {
    margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; font-size: 14px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.32);
}
.video-noserver.hidden { display: none; }

/* Navidrome + SoulSync Standalone are music-only — don't offer them as server
   options on the VIDEO side (scoped to body[data-side="video"], so the music side
   is untouched). The "Video Source" panel governs which video server is used. */
body[data-side="video"] #navidrome-toggle,
body[data-side="video"] #soulsync-toggle { display: none; }


/* ── Calendar — the Week Grid (every episode, air times, breathing cells) ──── */
.vcal-page { --vcal-accent: var(--accent-rgb, 88, 101, 242); color: var(--text-primary, #fff); padding: 0 0 70px; }
.vcal-head { position: relative; padding: 30px 40px 18px; overflow: hidden; }
.vcal-head-glow {
    position: absolute; top: -190px; left: 50%; transform: translateX(-50%);
    width: 860px; height: 390px; pointer-events: none; z-index: 0;
    background: radial-gradient(56% 70% at 50% 0%, rgba(var(--vcal-accent), 0.26), transparent 70%); filter: blur(10px);
}
.vcal-title { position: relative; z-index: 1; font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.vcal-sub { position: relative; z-index: 1; margin: 7px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 600; }
.vcal-body { padding: 4px 40px 0; }
.vcal-loading { padding: 90px 0; text-align: center; }

.vcal-grid { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #0d0d12, #0a0a0e); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.vcal-grid.hidden { display: none; }
/* EPG guide — a frozen time-rail (rows = time-of-day) × 7 day columns with a
   frozen header row, so the whole week reads on ONE shared time axis. */
.vcal-cols { display: grid; grid-template-columns: 84px repeat(7, minmax(150px, 1fr)); align-items: stretch; }

/* sticky top-left corner */
.vcal-guide-corner { position: sticky; top: 0; left: 0; z-index: 6;
    background: linear-gradient(180deg, rgba(15, 15, 20, 0.97), rgba(13, 13, 18, 0.88));
    backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

/* day header — sticky top */
.vcal-dayhead { position: sticky; top: 0; z-index: 4; padding: 15px 14px 13px;
    background: linear-gradient(180deg, rgba(15, 15, 20, 0.96), rgba(13, 13, 18, 0.85));
    backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 1px solid rgba(255, 255, 255, 0.05); }
.vcal-dayhead-wd { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.vcal-dayhead-date { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4); margin-top: 2px; }
.vcal-dayhead-n { position: absolute; top: 14px; right: 13px; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: 999px; }
.vcal-dayhead--today { background: linear-gradient(180deg, rgba(var(--vcal-accent), 0.24), rgba(13, 13, 18, 0.86));
    border-bottom-color: rgba(var(--vcal-accent), 0.55);
    box-shadow: 0 1px 0 rgba(var(--vcal-accent), 0.55), 0 12px 28px -14px rgba(var(--vcal-accent), 0.6); }
.vcal-dayhead--today .vcal-dayhead-wd { color: hsl(232, 100%, 84%); }
.vcal-dayhead--today .vcal-dayhead-n { background: rgba(var(--vcal-accent), 0.9); color: #fff; }

/* time rail — sticky left, labels the band */
.vcal-rail { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px;
    padding: 17px 12px; border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.004)); }
.vcal-rail-label { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); }
.vcal-rail small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.3); }
.vcal-rail--prime .vcal-rail-label { color: hsl(44, 100%, 72%); }
.vcal-rail--prime small { color: hsla(44, 90%, 60%, 0.6); }

/* one day×band cell */
.vcal-slot { display: flex; flex-direction: column; gap: 15px; padding: 17px 13px; min-width: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05); border-left: 1px solid rgba(255, 255, 255, 0.05); }
.vcal-slot--today { background: linear-gradient(180deg, rgba(var(--vcal-accent), 0.07), rgba(var(--vcal-accent), 0.015)); }
.vcal-slot--empty { align-items: center; justify-content: center; padding: 0; }
.vcal-slot-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
/* live "now" intersection — today column × current time-of-day band */
.vcal-slot--now { box-shadow: inset 3px 0 0 rgba(var(--vcal-accent), 0.95), inset 0 0 34px -12px rgba(var(--vcal-accent), 0.5);
    background: linear-gradient(180deg, rgba(var(--vcal-accent), 0.12), rgba(var(--vcal-accent), 0.03)); }

/* staggered entrance — only on a fresh load/week-change (class added by JS),
   keyed off the per-card --i (cycles every 24). Filter re-renders don't get it. */
.vcal-cols.vcal-animate-in .vcal-card { animation: vcalCardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 0.022s); }
@keyframes vcalCardIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vcal-cols.vcal-animate-in .vcal-card { animation: none; } }

/* week-change crossfade */
.vcal-grid { transition: opacity 0.22s ease; }
.vcal-grid.vcal-fading { opacity: 0.32; }

/* keyboard focus — mirrors hover + a clear ring (cards are real <a>s) */
.vcal-cell:focus-visible { outline: none; --ty: -6px; --sc: 1.04; z-index: 3; }
.vcal-cell:focus-visible .vcal-card { border-color: hsla(var(--vcal-show), 80%, 64%, 0.85);
    box-shadow: 0 0 0 2px hsla(var(--vcal-show), 82%, 62%, 0.9), 0 18px 40px rgba(0, 0, 0, 0.5); }

/* Episode cell — one clean card (art + info), breathing colour halo behind it */
.vcal-cell { --vcal-show: var(--vcal-h, 230); position: relative; display: block; text-decoration: none; color: inherit;
    transform: perspective(760px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
    transition: transform 0.16s ease; }
/* Calm by default; the colour only comes alive on hover. */
.vcal-glow { position: absolute; inset: -11px; z-index: 0; border-radius: 22px; pointer-events: none;
    background: radial-gradient(closest-side, hsla(var(--vcal-show), 90%, 55%, 0.6), transparent 76%);
    opacity: 0.06; animation: vcalBreathe 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.5s);
    transition: opacity 0.25s ease; }
@keyframes vcalBreathe { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.13; } }
.vcal-card { position: relative; z-index: 1; display: block; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08); background: #14141a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vcal-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--vcal-show), 42%, 22%), #0a0a0e 90%); }
/* skeleton shimmer shown until the image fades in */
.vcal-art::before { content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, transparent 16%, rgba(255, 255, 255, 0.05) 38%,
        rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 62%, transparent 84%);
    background-size: 220% 100%; animation: vcalShimmer 1.5s ease-in-out infinite; }
.vcal-cell-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transition: opacity 0.5s ease; }
.vcal-cell-img.vcal-loaded { opacity: 1; }
@keyframes vcalShimmer { 0% { background-position: 200% 0; } 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .vcal-art::before { animation: none; } .vcal-cell-img { transition: none; } }
.vcal-art-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent 55%); }
.vcal-flag { position: absolute; top: 8px; right: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
    background: rgba(108, 211, 145, 0.94); color: #07130c; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.vcal-info { display: block; padding: 9px 11px 11px; }
.vcal-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
    color: hsl(var(--vcal-show), 85%, 80%); }
.vcal-time-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--vcal-show), 85%, 62%);
    box-shadow: 0 0 8px hsl(var(--vcal-show), 85%, 60%); }
.vcal-time--none { color: rgba(255, 255, 255, 0.32); font-weight: 700; }
.vcal-show { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcal-meta { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcal-se { font-weight: 800; color: rgba(255, 255, 255, 0.72); }
.vcal-ep { margin-left: 6px; }
.vcal-cell:hover { --ty: -6px; --sc: 1.04; z-index: 3; }
.vcal-cell:hover .vcal-glow { opacity: 0.6 !important; animation-play-state: paused; }
.vcal-cell:hover .vcal-card { border-color: hsla(var(--vcal-show), 78%, 62%, 0.7);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), 0 0 30px hsla(var(--vcal-show), 78%, 55%, 0.34); }

@media (prefers-reduced-motion: reduce) {
    .vcal-glow { animation: none; opacity: 0.08; }
    .vcal-cell { transform: none; } .vcal-cell:hover { --ty: 0px; --sc: 1; }
}

/* Already-aired days earlier this week — dimmed so upcoming stands out (like
   Sonarr). Hovering a past episode restores it to full detail. */
.vcal-dayhead--past { opacity: 0.5; }
.vcal-dayhead--past .vcal-dayhead-wd { color: rgba(255, 255, 255, 0.62); }
.vcal-slot--past .vcal-cell { opacity: 0.46; transition: opacity 0.2s ease; }
.vcal-slot--past .vcal-cell:hover { opacity: 1; }

/* Owned — you already have this episode. Green left-edge in EVERY view (the
   compact view already had this; the ✓ badge shows too), preserved on hover. */
.vcal-cell--owned .vcal-card { box-shadow: inset 3px 0 0 #6cd391; }
.vcal-cell--owned:hover .vcal-card {
    box-shadow: inset 3px 0 0 #6cd391, 0 22px 46px rgba(0, 0, 0, 0.55),
        0 0 30px hsla(var(--vcal-show), 78%, 55%, 0.34);
    border-color: hsla(var(--vcal-show), 78%, 62%, 0.7);
}

/* Empty state */
.vcal-state { text-align: center; padding: 90px 20px; color: rgba(255, 255, 255, 0.6); }
.vcal-state-ic { font-size: 48px; opacity: 0.55; }
.vcal-state-title { font-size: 20px; font-weight: 800; color: #fff; margin-top: 12px; }
.vcal-state-sub { font-size: 14px; margin-top: 6px; }

@media (max-width: 900px) { .vcal-head, .vcal-body { padding-left: 18px; padding-right: 18px; } .vcal-cols { overflow-x: auto; } }

/* ── Calendar — episode modal ─────────────────────────────────────────────── */
.vcm-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(5, 5, 8, 0.72); backdrop-filter: blur(9px); opacity: 0; transition: opacity 0.2s ease; }
.vcm-overlay.vcm-open { opacity: 1; }
.vcm-modal { --vcm-h: 230; position: relative; width: min(700px, 100%); max-height: 90vh; overflow-y: auto;
    border-radius: 22px; background: #101015; border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 50px 130px rgba(0, 0, 0, 0.72); transform: translateY(16px) scale(0.985);
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vcm-overlay.vcm-open .vcm-modal { transform: none; }
.vcm-modal::-webkit-scrollbar { width: 9px; }
.vcm-modal::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 5px; }
.vcm-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px; cursor: pointer;
    backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.15s ease; }
.vcm-close:hover { background: rgba(0, 0, 0, 0.72); border-color: rgba(255, 255, 255, 0.4); }

.vcm-hero { position: relative; min-height: 210px; border-radius: 22px 22px 0 0; overflow: hidden; display: flex; align-items: flex-end; }
.vcm-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 28%; transform: scale(1.05); }
.vcm-hero-scrim { position: absolute; inset: 0;
    background: linear-gradient(0deg, #101015 3%, rgba(16, 16, 21, 0.45) 52%, rgba(16, 16, 21, 0.15)),
        radial-gradient(130% 110% at 0% 100%, hsla(var(--vcm-h), 72%, 45%, 0.38), transparent 60%); }
.vcm-hero-content { position: relative; z-index: 1; padding: 24px 26px 18px; width: 100%; }
.vcm-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--vcm-h), 82%, 80%); }
.vcm-eyebrow:empty { display: none; }
.vcm-show { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 0; line-height: 1.1; }
.vcm-genres { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.vcm-genre { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); }

.vcm-body { padding: 20px 26px; }
.vcm-ep { display: grid; grid-template-columns: 176px 1fr; gap: 20px; }
.vcm-ep-still { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--vcm-h), 48%, 28%), #0b0b0f); }
.vcm-ep-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
    opacity: 0; transition: opacity 0.45s ease; }
.vcm-ep-still img.vcm-loaded { opacity: 1; }
.vcm-ep-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: rgba(255, 255, 255, 0.3); }
.vcm-ep-main { min-width: 0; }
.vcm-ep-se { font-size: 12px; font-weight: 800; color: hsl(var(--vcm-h), 82%, 78%); letter-spacing: 0.03em; }
.vcm-ep-title { font-size: 20px; font-weight: 800; margin: 3px 0 0; line-height: 1.2; }
.vcm-when { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin-top: 8px; font-weight: 600; }
.vcm-tags { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; align-items: center; }
.vcm-badge { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.vcm-badge--have { background: rgba(108, 211, 145, 0.16); color: #6cd391; }
.vcm-badge--miss { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.vcm-tag { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.62); }
.vcm-tag--star { color: rgba(245, 197, 24, 0.95); }
.vcm-ep-ov { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 15px 0 0; }
.vcm-ep-ov--none { color: rgba(255, 255, 255, 0.35); font-style: italic; }

.vcm-about { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.vcm-about-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); margin: 0 0 8px; }
.vcm-about-ov { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0; }

.vcm-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 26px 24px; }
.vcm-btn { font-size: 13px; font-weight: 800; padding: 11px 18px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; }
.vcm-btn--ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); }
.vcm-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vcm-btn--primary { background: hsl(var(--vcm-h), 68%, 52%); color: #fff; box-shadow: 0 8px 24px hsla(var(--vcm-h), 70%, 45%, 0.4); }
.vcm-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* wishlist-this-episode (aired + missing only); reads green once queued/added */
.vcm-btn--wish { color: #2bd17e; border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.1); }
.vcm-btn--wish:hover:not(:disabled) { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.vcm-btn--wish:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 560px) {
    .vcm-ep { grid-template-columns: 1fr; }
    .vcm-ep-still { max-width: 240px; }
    .vcm-actions { flex-direction: column-reverse; }
    .vcm-btn { width: 100%; }
}

/* ── Calendar — featured "next up" billboard ──────────────────────────────── */
.vcal-hero-wrap { padding: 4px 40px 8px; perspective: 1400px; }
.vcal-hero-wrap:empty { display: none; }
.vcal-bb { --vcal-h: 230; position: relative; display: flex; align-items: flex-end; min-height: 306px;
    border-radius: 22px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
    transition: transform 0.18s ease, box-shadow 0.3s ease; will-change: transform; }
.vcal-bb:hover { --sc: 1.012; box-shadow: 0 44px 110px rgba(0, 0, 0, 0.62), 0 0 60px hsla(var(--vcal-h), 72%, 50%, 0.22); }
.vcal-bb-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; transform: scale(1.08); }
.vcal-bb-scrim { position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.62) 42%, transparent 78%),
        linear-gradient(0deg, rgba(8, 8, 12, 0.82), transparent 58%),
        radial-gradient(120% 130% at 0% 100%, hsla(var(--vcal-h), 72%, 45%, 0.42), transparent 58%); }
.vcal-bb-content { position: relative; z-index: 1; padding: 34px 42px 34px; max-width: 640px; }
.vcal-bb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; color: hsl(var(--vcal-h), 88%, 80%); }
.vcal-bb-dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--vcal-h), 88%, 62%);
    box-shadow: 0 0 12px hsl(var(--vcal-h), 88%, 60%); animation: vcalPulse 2s ease-in-out infinite; }
@keyframes vcalPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.6); } }
.vcal-bb-title { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 11px 0 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.vcal-bb-sub { font-size: 15px; color: rgba(255, 255, 255, 0.82); margin-top: 9px; font-weight: 600; }
.vcal-bb-se { font-weight: 800; color: #fff; }
.vcal-bb-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.vcal-bb-btn { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 800; padding: 12px 22px;
    border-radius: 12px; background: #fff; color: #0a0a0e; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease; }
.vcal-bb:hover .vcal-bb-btn { transform: translateY(-2px); }
.vcal-bb-badge { font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 999px;
    background: rgba(108, 211, 145, 0.18); color: #6cd391; }
@media (prefers-reduced-motion: reduce) { .vcal-bb { transform: none; } .vcal-bb-dot { animation: none; } }

/* "Next up" with 2-3 episodes → diagonal split panels; hover one to expand it */
/* fixed height (not min-height) so hovering — which re-wraps titles at new
   widths — never changes the hero's height and shoves the page around */
.vcal-bb-multi { position: relative; display: flex; height: 306px; border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55); background: #08080c; }
.vcal-bb-panel { --vcal-h: 230; position: relative; flex: 1 1 0; flex-grow: 1; min-width: 25%; overflow: hidden;
    display: flex; align-items: flex-end; cursor: pointer;
    clip-path: polygon(34px 0, 100% 0, calc(100% - 34px) 100%, 0 100%); margin-left: -34px;
    transition: flex-grow 0.66s cubic-bezier(0.45, 0, 0.2, 1); }
/* outer edges of the strip stay straight; only the interior seams are diagonal */
.vcal-bb-panel:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%); margin-left: 0; }
.vcal-bb-panel:last-child { clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%); }
/* soonest leads at rest; hovering any panel expands it and collapses the rest */
.vcal-bb-panel--lead { flex-grow: 2.3; }
.vcal-bb-multi:hover .vcal-bb-panel { flex-grow: 0.16; }
.vcal-bb-multi .vcal-bb-panel:hover { flex-grow: 9; }
.vcal-bb-panel::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32);
    opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
.vcal-bb-multi:hover .vcal-bb-panel:not(:hover)::after { opacity: 1; }
.vcal-bb-panel .vcal-bb-content { padding: 28px 30px 30px 50px; max-width: 540px; }
.vcal-bb-panel .vcal-bb-title { font-size: 28px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* secondary panels tease just the title; sub + actions fade in on expand */
.vcal-bb-panel .vcal-bb-sub, .vcal-bb-panel .vcal-bb-actions { opacity: 0; transition: opacity 0.45s ease; }
.vcal-bb-panel--lead .vcal-bb-sub, .vcal-bb-panel--lead .vcal-bb-actions { opacity: 1; }
.vcal-bb-multi:hover .vcal-bb-panel--lead .vcal-bb-sub,
.vcal-bb-multi:hover .vcal-bb-panel--lead .vcal-bb-actions { opacity: 0; }
.vcal-bb-multi .vcal-bb-panel:hover .vcal-bb-sub,
.vcal-bb-multi .vcal-bb-panel:hover .vcal-bb-actions { opacity: 1; }
.vcal-bb-panel:hover .vcal-bb-btn { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .vcal-bb-panel { transition: none; } }

@media (max-width: 900px) {
    .vcal-hero-wrap { padding-left: 18px; padding-right: 18px; }
    .vcal-bb-title { font-size: 30px; } .vcal-bb { min-height: 240px; }
    /* stack the diagonal panels vertically on narrow screens */
    .vcal-bb-multi { flex-direction: column; height: auto; }
    .vcal-bb-panel, .vcal-bb-panel:first-child, .vcal-bb-panel:last-child { clip-path: none; margin-left: 0; min-width: 0; min-height: 150px; }
    .vcal-bb-panel--lead, .vcal-bb-multi:hover .vcal-bb-panel, .vcal-bb-multi .vcal-bb-panel:hover { flex-grow: 1; }
    .vcal-bb-panel .vcal-bb-sub, .vcal-bb-panel .vcal-bb-actions { opacity: 1; }
    .vcal-bb-multi:hover .vcal-bb-panel:not(:hover)::after { opacity: 0; }
}

/* ── Calendar — header controls (week nav + filter) ───────────────────────── */
.vcal-head-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vcal-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vcal-nav { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.vcal-nav-btn { width: 34px; height: 32px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.75);
    font-size: 20px; font-weight: 700; cursor: pointer; border-radius: 8px; line-height: 1; transition: all 0.15s ease; }
.vcal-nav-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.vcal-nav-today { border: 0; background: transparent; color: rgba(255, 255, 255, 0.82); font-size: 12.5px; font-weight: 800;
    padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
.vcal-nav-today:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #fff; }
.vcal-nav-today:disabled { opacity: 0.34; cursor: default; }
.vcal-filter { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.vcal-filter-btn { border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
.vcal-filter-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.vcal-filter-btn--on { color: #fff; background: rgba(var(--vcal-accent), 0.9); box-shadow: 0 4px 14px rgba(var(--vcal-accent), 0.32); }
/* view switcher (cards ↔ compact) — mirrors the filter pill group, with icons */
.vcal-views { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.vcal-view-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
    color: rgba(255, 255, 255, 0.7); font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 8px;
    cursor: pointer; transition: all 0.15s ease; }
.vcal-view-btn svg { opacity: 0.85; }
.vcal-view-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.vcal-view-btn--on { color: #fff; background: rgba(var(--vcal-accent), 0.9); box-shadow: 0 4px 14px rgba(var(--vcal-accent), 0.32); }

/* Compact view — drop the episode art to fit a lot more on screen */
.vcal-grid.vcal-view--compact .vcal-art { display: none; }
.vcal-grid.vcal-view--compact .vcal-slot { gap: 8px; padding: 13px 10px; }
.vcal-grid.vcal-view--compact .vcal-card { border-radius: 10px; }
.vcal-grid.vcal-view--compact .vcal-info { padding: 10px 12px; }
.vcal-grid.vcal-view--compact .vcal-show { margin-top: 4px; }
/* the art carried the library ✓ — surface ownership as a left accent stripe instead */
.vcal-grid.vcal-view--compact .vcal-cell--owned .vcal-card { box-shadow: inset 3px 0 0 #6cd391; }
.vcal-grid.vcal-view--compact .vcal-cell--owned .vcal-info { padding-left: 15px; }
/* catch-up button: queue already-aired missing episodes to the wishlist */
.vcal-addmissing { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 11px;
    border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.4); cursor: pointer; font-size: 12.5px; font-weight: 800;
    color: #fff; background: rgba(var(--accent-rgb, 88 101 242), 0.16);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.vcal-addmissing:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.3); border-color: rgba(var(--accent-rgb, 88 101 242), 0.7); transform: translateY(-1px); }
.vcal-addmissing:disabled { opacity: 0.5; cursor: default; transform: none; }
.vcal-addmissing.hidden { display: none; }
.vcal-addmissing-ic { font-size: 15px; font-weight: 900; line-height: 1; }
@media (max-width: 720px) { .vcal-head-row { flex-direction: column; align-items: stretch; } .vcal-controls { justify-content: space-between; } }

/* Movies rail — wishlisted movies' release dates lead the guide */
.vcal-rail--movies .vcal-rail-label { color: hsl(282, 85%, 76%); }
.vcal-rail--movies small { color: hsla(282, 70%, 65%, 0.6); }
.vcal-mv-chip { font-size: 11px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); align-self: flex-start; }
.vcal-mv--cinema .vcal-mv-chip { background: hsla(44, 90%, 58%, 0.16); color: hsl(44, 100%, 74%); }
.vcal-mv--home .vcal-mv-chip { background: hsla(150, 65%, 45%, 0.16); color: hsl(150, 75%, 70%); }
.vcal-ics-btn { width: 38px; height: 34px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05); }
.vcal-ics-btn:hover { border-color: rgba(255, 255, 255, 0.22); }

/* Agenda view — the 8-col guide collapses into one chronological list */
.vcal-grid.vcal-view--agenda .vcal-cols { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; }
.vcal-ag-day { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, 0.025); }
.vcal-ag-day--today { border-color: rgba(var(--vcal-accent), 0.45); box-shadow: 0 10px 30px -18px rgba(var(--vcal-accent), 0.7); }
.vcal-ag-day--past { opacity: 0.62; }
.vcal-ag-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vcal-ag-day--today .vcal-ag-head { background: rgba(var(--vcal-accent), 0.16); }
.vcal-ag-head-label { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.vcal-ag-head-n { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: 999px; }
.vcal-ag-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045); transition: background 0.13s ease; }
.vcal-ag-row:last-child { border-bottom: 0; }
.vcal-ag-row:hover { background: rgba(255, 255, 255, 0.05); }
.vcal-ag-time { flex: 0 0 92px; font-size: 12px; font-weight: 800; color: hsl(var(--vcal-h, 232), 85%, 74%); }
.vcal-ag-time.vcal-time--none { color: rgba(255, 255, 255, 0.32); }
.vcal-ag-time.vcal-mv-chip { flex-basis: auto; }
.vcal-ag-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vcal-ag-title { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcal-ag-sub { font-size: 12px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcal-ag-row .vcal-flag { position: static; flex: 0 0 auto; }
@media (max-width: 560px) { .vcal-ag-time { flex-basis: 72px; } .vcal-ag-row { gap: 10px; padding: 10px 12px; } }

/* iCal subscribe modal (reuses the .vcm overlay chrome) */
.vcal-ics-modal { width: min(560px, 100%); }
.vcal-ics-body { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.vcal-ics-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.vcal-ics-sub { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.vcal-ics-row { display: flex; gap: 8px; }
.vcal-ics-url { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.85); }
.vcal-ics-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.42); }
.vcal-ics-note code { background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Watchlist — shared "add to watchlist" button (.vwl-btn) + the Watchlist page
   (.vwlp-*). The button is the video mirror of the music ya-watchlist-btn.
   ══════════════════════════════════════════════════════════════════════════ */

/* Per-title acquisition history (P9) */
.vd-hist-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.vd-hist-row:last-child { border-bottom: 0; }
.vd-hist-chip { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; margin-top: 2px; }
.vd-hist-chip--ok { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.vd-hist-chip--warn { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.vd-hist-chip--bad { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.vd-hist-chip--mut { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.vd-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-hist-rel { font-size: 13px; color: rgba(255, 255, 255, 0.85); word-break: break-all; }
.vd-hist-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }

/* Requests page (P4) — the in-app Overseerr */
.vreq-page { padding: 26px 30px 60px; max-width: 900px; margin: 0 auto; }
.vreq-head { margin-bottom: 20px; }
.vreq-title-h { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.vreq-sub-h { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.vreq-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); margin-bottom: 12px; }
.vreq-poster { width: 52px; height: 78px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.vreq-poster--ph { display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: rgba(255, 255, 255, 0.06); }
.vreq-main { flex: 1; min-width: 0; }
.vreq-title { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vreq-sub { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 3px; }
.vreq-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.68); margin-top: 6px; font-style: italic; }
.vreq-note--admin { font-style: normal; color: #93c5fd; }
.vreq-st { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 8px; border-radius: 999px; }
.vreq-st--pending { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.vreq-st--approved { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.vreq-st--denied { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.vreq-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.vreq-btn { padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff; }
.vreq-btn:hover { background: rgba(255, 255, 255, 0.1); }
.vreq-btn:disabled { opacity: 0.5; cursor: default; }
.vreq-btn--ok { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.14); }
.vreq-btn--ok:hover { background: rgba(34, 197, 94, 0.3); }
.vreq-btn--no { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
.vreq-btn--no:hover { background: rgba(239, 68, 68, 0.25); }
.vreq-denybox { display: flex; gap: 8px; margin-top: 10px; }
.vreq-denybox.hidden { display: none; }
.vreq-denyin { flex: 1; padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: #fff; }
.vreq-empty { padding: 40px 0; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 13.5px; }
.vreq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 16px; flex-wrap: wrap; }
.vreq-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vreq-tab { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65); }
.vreq-tab:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.vreq-tab.active { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.vreq-tab-n { opacity: 0.65; font-weight: 600; margin-left: 2px; }
.vreq-btn--clear { border-color: rgba(255, 255, 255, 0.1); background: transparent;
    color: rgba(255, 255, 255, 0.55); font-size: 12px; padding: 7px 12px; }
.vreq-btn--clear:hover { color: #fff; }
.vreq-btn--x { padding: 4px 10px; font-size: 15px; line-height: 1; color: rgba(255, 255, 255, 0.5); }
.vreq-btn--x:hover { color: #fff; background: rgba(239, 68, 68, 0.35); border-color: transparent; }
/* Approved keeps telling the story: acquiring until the library has it. */
.vreq-st--lib { background: rgba(34, 197, 94, 0.85); color: #04150a; }
.vreq-st--acq { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
@media (max-width: 640px) { .vreq-row { flex-wrap: wrap; } .vreq-actions { width: 100%; justify-content: flex-end; } }

/* Custom Formats editor rows (P3) */
.vq-fmt-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr 74px 74px 30px; gap: 8px;
    align-items: center; margin-bottom: 8px; }
.vq-fmt-in { padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3); color: #fff; }
.vq-fmt-num { text-align: center; }
.vq-fmt-del { width: 28px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.55); cursor: pointer; }
.vq-fmt-del:hover { background: rgba(239, 68, 68, 0.8); color: #fff; border-color: transparent; }
@media (max-width: 900px) { .vq-fmt-row { grid-template-columns: 1fr 1fr; } }
/* backups card (P10) */
.vbk-list { margin: 10px 0; max-height: 180px; overflow-y: auto; }
.vbk-row { display: flex; align-items: center; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 12.5px; }
.vbk-row:last-child { border-bottom: 0; }
.vbk-name { flex: 1; color: rgba(255, 255, 255, 0.75); }
.vbk-btn { padding: 4px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff; }
.vbk-btn:hover { background: rgba(255, 255, 255, 0.1); }
.vbk-btn--restore { border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; }
.vbk-empty { padding: 8px 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.vbk-pending { margin: 8px 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
    color: #fbbf24; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3);
    display: flex; align-items: center; gap: 10px; }
.vbk-pending.hidden { display: none; }
.vbk-cancel { margin-left: auto; padding: 3px 10px; border-radius: 8px; font-size: 11.5px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #fff; }

/* notification connections (P11) */
.vq-nt-block { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.vq-nt-row { grid-template-columns: 1fr 0.9fr 1.6fr 1fr 0.7fr 60px 34px 30px; }
.vq-nt-test { padding: 6px 10px; font-size: 12px; }
.vq-nt-events { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.vq-nt-ev { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6); cursor: pointer; }
@media (max-width: 900px) { .vq-nt-row { grid-template-columns: 1fr 1fr; } }

/* import-list rows reuse the format grid with different column weights (P6) */
.vq-implist-row { grid-template-columns: 1fr 1fr 1.2fr 0.8fr 1fr 34px 30px; }
.vq-il-on { display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .vq-implist-row { grid-template-columns: 1fr 1fr; } }

/* Follow-time monitor menu (P2): what to wish when following a SHOW. */
.vwl-menu { position: fixed; z-index: 10000; min-width: 280px; padding: 6px; border-radius: 12px;
    background: rgba(18, 18, 24, 0.97); border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); }
.vwl-menu-it { display: block; width: 100%; text-align: left; border: 0; background: transparent;
    color: rgba(255, 255, 255, 0.82); font-size: 13px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.vwl-menu-it:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.vwl-menu-it--default { font-weight: 700; color: #fff; }

/* Shared eye button — overlaid top-right on a show poster / person photo. */
.vwl-btn {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82);
    cursor: pointer; opacity: 0; transform: translateY(-2px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease,
        color 0.18s ease, border-color 0.18s ease; }
.vwl-btn:hover { background: rgba(0, 0, 0, 0.78); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.vwl-btn.active { opacity: 1; transform: none;
    color: rgb(var(--accent-rgb, 88 101 242));
    background: rgba(var(--accent-rgb, 88 101 242), 0.18);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); }
.vwl-btn:disabled { opacity: 0.5; cursor: default; }
/* hover-reveal on the cards that host it (always shown once active / on touch) */
.library-artist-card:hover .vwl-btn, .vwlp-card:hover .vwl-btn,
.vd-cast-card:hover .vwl-btn, .vsr-card:hover .vwl-btn, .vd-sim-card:hover .vwl-btn {
    opacity: 1; transform: none; }
@media (hover: none) { .vwl-btn { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vwl-btn { transition: opacity 0.18s ease; transform: none; } }

/* ── Watchlist page ───────────────────────────────────────────────────────── */
.vwlp-page { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); color: var(--text-primary, #fff); padding: 0 0 70px; }
.vwlp-head { position: relative; padding: 30px 40px 0; overflow: hidden; }
.vwlp-head-glow { position: absolute; top: -190px; left: 50%; transform: translateX(-50%);
    width: 860px; height: 390px; pointer-events: none; z-index: 0;
    background: radial-gradient(56% 70% at 50% 0%, rgba(var(--accent-rgb, 88 101 242), 0.22), transparent 70%); filter: blur(10px); }
.vwlp-head-row { position: relative; z-index: 1; display: flex; align-items: flex-end;
    justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vwlp-title { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.vwlp-sub { margin: 7px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 600; }

/* Tabs match the wishlist: individual pills, SELECTED = accent outline + ring glow
   (same focus language as the search field), not a filled accent block. */
.vwlp-tabs { display: inline-flex; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.vwlp-tab { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.62); font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    padding: 9px 18px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.vwlp-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.vwlp-tab--on { color: #fff; background: rgba(var(--vd-accent-rgb), 0.08);
    border-color: rgba(var(--vd-accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwlp-tab-n { font-size: 11px; font-weight: 800; min-width: 18px; text-align: center;
    padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, color 0.2s ease; }
.vwlp-tab--on .vwlp-tab-n { background: rgba(var(--vd-accent-rgb), 0.25); color: #fff; }

.vwlp-body { padding: 26px 40px 0; }
.vwlp-loading { padding: 80px 0; text-align: center; }
.vwlp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 22px 20px; }
.vwlp-grid.hidden { display: none; }

.vwlp-card { position: relative; display: block; text-decoration: none; color: inherit;
    transition: transform 0.16s ease; }
.vwlp-card:hover { transform: translateY(-5px); }
.vwlp-card-art { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
    background: linear-gradient(140deg, #1a1a22, #0c0c10); border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.vwlp-card:hover .vwlp-card-art { border-color: rgba(var(--accent-rgb, 88 101 242), 0.5);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--accent-rgb, 88 101 242), 0.22); }
.vwlp-card--person .vwlp-card-art { border-radius: 16px; }
.vwlp-card-img { width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transition: opacity 0.45s ease; }
.vwlp-card-img.vwlp-loaded { opacity: 1; }
.vwlp-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 40px; opacity: 0.5; }
.vwlp-card-scrim { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent 42%); }

/* Followed studio card — a bright wide logo tile (dark studio logos read on it) with the
   back-catalog cog + follow eye, matching the search studio result. */
.vwlp-studio-logo-wrap { position: relative; aspect-ratio: 16 / 10; border-radius: 14px;
    overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(160deg, #fafafe 0%, #d9dbe6 100%);
    border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.vwlp-card--studio:hover .vwlp-studio-logo-wrap {
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.6);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--accent-rgb, 88 101 242), 0.24); }
.vwlp-studio-logo { max-width: 100%; max-height: 72px; object-fit: contain; display: block; }
.vwlp-studio-ph { font-size: 44px; opacity: 0.4; }
.vwlp-studio-cog { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px;
    border: none; border-radius: 9px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px;
    line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); }
/* the follow eye sits opposite the cog on studio cards */
.vwlp-card--studio .vwl-btn { position: absolute; top: 8px; left: 8px; z-index: 4; }

/* ── Studio enrichment-coverage rings (Overlay/Collection Studio dashboard cards) ──
   Circular progress rings à la the music artist page: a number in the middle, per-source
   colour, animated fill + a coverage-scaled glow (the fuller the ring, the brighter it
   burns). Purely visual. */
/* Lives top-right of the Studio card header (opposite the title) — a compact readiness
   cluster, right-aligned. */
.dash-card__head--cov { flex-wrap: wrap; gap: 10px 16px; }
.dash-card__head-txt { min-width: 0; }
.vcov { display: flex; flex-direction: column; align-items: flex-end; }
.vcov-title { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 9px; }
.vcov-info { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.55);
    font-size: 9px; font-weight: 800; cursor: help; }
.vcov-info:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.vcov-grid { display: flex; gap: 16px; }
.vcov-item { display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.vcov-item:hover { transform: translateY(-2px) scale(1.05); }
.vcov-ring { position: relative; width: 46px; height: 46px; transition: filter 0.4s ease; }
.vcov-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.vcov-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3.5; }
.vcov-fill { fill: none; stroke-width: 3.5; stroke-linecap: round;
    animation: vcovFill 1s cubic-bezier(0.34, 0.1, 0.2, 1) var(--d, 0s) both; }
.vcov-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    animation: vcovPct 0.65s ease var(--d, 0s) both; }
.vcov-label { display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-align: center; }
.vcov-label b { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.02em; }
.vcov-label span { font-size: 8.5px; font-weight: 600; color: rgba(255, 255, 255, 0.38);
    text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes vcovFill { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } }
@keyframes vcovPct { 0% { opacity: 0; transform: scale(0.6); } 55% { opacity: 0; } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .vcov-fill, .vcov-pct { animation: none; }
    .vcov-fill { stroke-dashoffset: var(--o); }
}
/* On a narrow card the header wraps: the cluster drops below the title, left-aligned. */
@media (max-width: 560px) {
    .dash-card__head--cov { justify-content: flex-start; }
    .vcov { align-items: flex-start; }
}

/* ── Combined Studios card (Overlay + Collection) ───────────────────────────────
   One 2/3-wide card: the shared 'Metadata ready' rings live in the header; the body is
   two whole-clickable halves, each with real library art behind a gradient scrim. */
.vst-combo { overflow: hidden; }
.vst-combo .dash-card__head { margin-bottom: 0; padding-bottom: 16px; }
.vst-combo-panels { display: grid; grid-template-columns: 1fr 1fr;
    margin: 0 -24px -22px;   /* bleed past the card's 22px/24px padding to the edges */
}
.vst-half { position: relative; overflow: hidden; min-height: 208px; padding: 0; border: 0; cursor: pointer;
    background: #101017; text-align: left; display: block; isolation: isolate; appearance: none; -webkit-appearance: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07); font: inherit; color: inherit; }
.vst-half + .vst-half { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.vst-half:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: -2px; }

.vst-half-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vst-half:hover .vst-half-bg { transform: scale(1.05); }
.vst-half-bg img { position: absolute; object-fit: cover; border-radius: 10px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); }
/* Overlay side: one poster up-right, tilted, with example badge chips dropped on it. */
.vst-half--overlay .vst-ov-poster { top: -14px; right: 26px; width: 118px; height: 177px; transform: rotate(5deg); }
.vst-ov-badge { position: absolute; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 7px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
/* Collection side: a fanned stack of posters (a 'collection'). */
.vst-half--collection .vst-col-poster { top: -10px; width: 104px; height: 156px; transition: transform 0.6s ease; }
.vst-half--collection .vst-col-poster:nth-child(1) { right: 96px; transform: rotate(-9deg); z-index: 1; }
.vst-half--collection .vst-col-poster:nth-child(2) { right: 44px; transform: rotate(-1deg); z-index: 2; }
.vst-half--collection .vst-col-poster:nth-child(3) { right: -4px; transform: rotate(8deg); z-index: 3; }
.vst-half--collection:hover .vst-col-poster:nth-child(1) { transform: rotate(-13deg) translateY(-4px); }
.vst-half--collection:hover .vst-col-poster:nth-child(3) { transform: rotate(12deg) translateY(-4px); }

/* Scrim: darken bottom-left where the text sits, let the art breathe top-right. */
.vst-half-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(120deg, rgba(14, 15, 22, 0.97) 30%, rgba(14, 15, 22, 0.72) 52%, transparent 82%),
        linear-gradient(0deg, rgba(14, 15, 22, 0.9) 0%, transparent 55%); }
.vst-half--overlay .vst-half-scrim { background:
        linear-gradient(120deg, rgba(16, 14, 24, 0.97) 30%, rgba(16, 14, 24, 0.72) 52%, transparent 82%),
        linear-gradient(0deg, rgba(16, 14, 24, 0.9) 0%, transparent 55%); }

.vst-half-fg { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
    justify-content: flex-end; gap: 4px; padding: 20px; }
.vst-half-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: rgb(var(--accent-rgb)); }
.vst-half--collection .vst-half-eyebrow { color: #5bd0a0; }
.vst-half-title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.vst-half-desc { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); max-width: 30ch; margin-bottom: 8px; }
.vst-half-cta { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-size: 12.5px; font-weight: 800; color: #fff; padding: 8px 15px; border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.9); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.36);
    transition: transform 0.16s ease, filter 0.16s ease; }
.vst-half--collection .vst-half-cta { background: rgba(45, 170, 130, 0.92); box-shadow: 0 6px 18px rgba(45, 170, 130, 0.34); }
.vst-half:hover .vst-half-cta { transform: translateY(-1px); filter: brightness(1.08); }
.vst-half-cta span { transition: transform 0.16s ease; }
.vst-half:hover .vst-half-cta span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .vst-half-bg, .vst-half--collection .vst-col-poster, .vst-half-cta, .vst-half-cta span { transition: none; }
    .vst-half:hover .vst-half-bg { transform: none; }
}
@media (max-width: 640px) {
    .vst-combo-panels { grid-template-columns: 1fr; }
    .vst-half + .vst-half { border-left: 0; }
}
/* Non-admins can't use the studios (launchers are gated) — if only one half remains
   visible, let it fill the width. */
body:not(.video-admin) .vst-half--overlay { display: none; }
body:not(.video-admin) .vst-combo-panels { grid-template-columns: 1fr; }
.vwlp-card-info { padding: 9px 4px 0; }
.vwlp-card-title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vwlp-state { text-align: center; padding: 90px 20px; color: rgba(255, 255, 255, 0.6); }
.vwlp-state.hidden { display: none; }
.vwlp-state-ic { font-size: 46px; opacity: 0.5; }
.vwlp-state-title { font-size: 20px; font-weight: 800; color: #fff; margin-top: 12px; }
.vwlp-state-sub { font-size: 14px; margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
    .vwlp-head, .vwlp-body { padding-left: 18px; padding-right: 18px; }
    .vwlp-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 14px; }
}
@media (max-width: 640px) {
    /* Four tabs (Shows/People/Studios/Channels + counts) don't fit one row on a
       phone — the no-wrap row ran the Channels tab clean off-screen. */
    .vwlp-tabs { flex-wrap: wrap; }
    .vwlp-tab { padding: 8px 14px; font-size: 13px; }
    .vwlp-title { font-size: 28px; }
}

/* Ensure the show poster box is a positioning context for its .vwl-btn
   (scoped to VIDEO cards so the shared music .library-artist-image is untouched). */
.video-card--clickable .library-artist-image { position: relative; }

/* ── Watchlist page — search toolbar + pagination ─────────────────────────── */
.vwlp-toolbar { padding: 18px 40px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vwlp-search { position: relative; display: flex; align-items: center; gap: 10px;
    flex: 1; max-width: 440px; min-width: 220px; height: 42px; padding: 0 14px; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.vwlp-search:focus-within { border-color: rgba(var(--vd-accent-rgb), 0.6);
    background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwlp-search-ic { position: static; transform: none; flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.4); pointer-events: none; transition: color 0.2s ease; }
.vwlp-search:focus-within .vwlp-search-ic { color: rgba(var(--vd-accent-rgb), 0.95); }
.vwlp-search-input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0;
    background: transparent; color: #fff; font-size: 14px; font-weight: 500; outline: none; }
.vwlp-search-input::placeholder { color: rgba(255, 255, 255, 0.42); }

.vwlp-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px 0 4px; }
.vwlp-pagination.hidden { display: none; }
.vwlp-page-btn { padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: all 0.15s ease; }
.vwlp-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vwlp-page-btn:disabled { opacity: 0.35; cursor: default; }
.vwlp-page-info { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.6); min-width: 110px; text-align: center; }

@media (max-width: 900px) { .vwlp-toolbar { padding-left: 18px; padding-right: 18px; } }

/* ══════════════════════════════════════════════════════════════════════════
   "Get" button (.vget-btn) + detail/download modal (.vgm-*) — the terminal-
   content counterpart to the watchlist eye (movies + ended shows).
   ══════════════════════════════════════════════════════════════════════════ */
.vget-btn {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.88);
    cursor: pointer; opacity: 0; transform: translateY(-2px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.vget-btn:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.92); color: #fff;
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.92); }
.library-artist-card:hover .vget-btn, .vwlp-card:hover .vget-btn,
.vsr-card:hover .vget-btn, .vd-sim-card:hover .vget-btn { opacity: 1; transform: none; }
@media (hover: none) { .vget-btn { opacity: 1; transform: none; } }

/* modal */
.vgm-overlay { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(5, 5, 8, 0.72); backdrop-filter: blur(9px); opacity: 0; transition: opacity 0.2s ease; }
.vgm-overlay.vgm-open { opacity: 1; }
.vgm-modal { position: relative; width: min(680px, 100%); max-height: 90vh; overflow-y: auto;
    border-radius: 22px; background: #101015; border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 50px 130px rgba(0, 0, 0, 0.72); transform: translateY(16px) scale(0.985);
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vgm-overlay.vgm-open .vgm-modal { transform: none; }
.vgm-modal::-webkit-scrollbar { width: 9px; }
.vgm-modal::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 5px; }
.vgm-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px;
    cursor: pointer; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: all 0.15s ease; }
.vgm-close:hover { background: rgba(0, 0, 0, 0.72); border-color: rgba(255, 255, 255, 0.4); }
.vgm-hero { position: relative; min-height: 260px; border-radius: 22px 22px 0 0; overflow: hidden;
    display: flex; align-items: flex-end; background-size: cover; background-position: center 22%; background-color: #16161d; }
.vgm-hero-scrim { position: absolute; inset: 0;
    background: linear-gradient(0deg, #101015 4%, rgba(16, 16, 21, 0.5) 52%, rgba(16, 16, 21, 0.1)),
        radial-gradient(130% 110% at 0% 100%, rgba(var(--accent-rgb, 88 101 242), 0.32), transparent 60%); }
.vgm-hero-content { position: relative; z-index: 1; padding: 26px 28px 20px; width: 100%; }
.vgm-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6); }
.vgm-eyebrow:empty { display: none; }
.vgm-title { font-size: 30px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; margin: 8px 0 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.vgm-meta { display: flex; gap: 16px; margin-top: 11px; flex-wrap: wrap; }
.vgm-meta-item { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.vgm-genres { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.vgm-genres:empty { display: none; }
.vgm-genre { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); }
.vgm-body { padding: 20px 28px 4px; }
.vgm-overview { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 0; }
.vgm-overview--none { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.vgm-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 28px 26px; }
.vgm-btn { font-size: 13px; font-weight: 800; padding: 11px 20px; border-radius: 12px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s ease; }
.vgm-btn--ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); }
.vgm-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vgm-btn--primary { background: rgb(var(--accent-rgb, 88 101 242)); color: #fff;
    box-shadow: 0 8px 24px rgba(var(--accent-rgb, 88 101 242), 0.4); }
.vgm-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 560px) { .vgm-actions { flex-direction: column-reverse; } .vgm-btn { width: 100%; } }

/* ── Get-modal: poster + ratings + owned-note + next-up ───────────────────── */
/* Poster floats over the hero bottom-left; content shifts right to clear it. */
.vgm-poster { position: absolute; left: 28px; bottom: 18px; z-index: 2; width: 104px; aspect-ratio: 2 / 3;
    object-fit: cover; border-radius: 10px; background: #16161d;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.vgm-poster[hidden] { display: none; }
.vgm-hero.vgm-has-poster .vgm-hero-content { padding-left: 152px; }
@media (max-width: 560px) { .vgm-poster { width: 78px; left: 20px; }
    .vgm-hero.vgm-has-poster .vgm-hero-content { padding-left: 112px; } }

/* Ratings strip — branded source chips (IMDb / RT / Metacritic). */
.vgm-ratings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vgm-ratings[hidden] { display: none; }
.vgm-rating { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); }
.vgm-rating-src { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5); }
.vgm-rating-val { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: -0.01em; }
.vgm-rating--imdb { background: rgba(245, 197, 24, 0.1); border-color: rgba(245, 197, 24, 0.32); }
.vgm-rating--imdb .vgm-rating-src { color: #f5c518; }
.vgm-rating--rt { background: rgba(250, 50, 11, 0.1); border-color: rgba(250, 50, 11, 0.3); }
.vgm-rating--rt .vgm-rating-src { color: #ff6446; }
.vgm-rating--mc { background: rgba(108, 211, 145, 0.1); border-color: rgba(108, 211, 145, 0.3); }
.vgm-rating--mc .vgm-rating-src { color: #6cd391; }

/* Owned-movie note — "in your library" with the best version's quality. */
.vgm-owned { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    background: rgba(108, 211, 145, 0.08); border: 1px solid rgba(108, 211, 145, 0.26); }
.vgm-owned[hidden] { display: none; }
.vgm-owned-ic { font-size: 14px; font-weight: 900; color: #6cd391; flex-shrink: 0; }
.vgm-owned-txt { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.vgm-owned-txt strong { color: #8fe7af; font-weight: 800; }

/* Next-episode line — the soonest upcoming episode for an airing show. */
.vgm-next { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    background: rgba(var(--accent-rgb, 88 101 242), 0.09); border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.26); }
.vgm-next[hidden] { display: none; }
.vgm-next-ic { font-size: 11px; color: rgb(var(--accent-rgb, 88 101 242)); flex-shrink: 0; }
.vgm-next-txt { font-size: 13px; color: rgba(255, 255, 255, 0.78); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgm-next-txt strong { color: #fff; font-weight: 800; }
.vgm-next-date { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 800; color: #c4cbff; }

/* Watchlist card richness — status pill + episode-count meta + sort select */
.vwlp-pill { position: absolute; top: 8px; left: 8px; z-index: 3;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 3px 8px; border-radius: 7px; backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); }
.vwlp-pill--airing { background: rgba(108, 211, 145, 0.22); color: #8fe7af; border-color: rgba(108, 211, 145, 0.4); }
.vwlp-pill--soon { background: rgba(var(--accent-rgb, 88 101 242), 0.24); color: #c4cbff; border-color: rgba(var(--accent-rgb, 88 101 242), 0.45); }
.vwlp-pill--ended { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
.vwlp-card-meta { display: block; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }

.vwlp-sort { height: 42px; padding: 0 36px 0 14px; box-sizing: border-box; border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88); font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.vwlp-sort:hover { border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.vwlp-sort:focus { border-color: rgba(var(--vd-accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwlp-sort option { background: #16161d; color: #fff; }

/* The eye/get button anchors to these card roots (other surfaces). Position is
   additive (no flow change); buttons are absolute top-right within them. */
.vsr-card, .vd-sim-card, .vd-cast-card { position: relative; }
.vd-cast-card:hover .vget-btn { opacity: 1; transform: none; }

/* Card control GROUP (eye + get can co-exist on an airing show). The wrapper is
   positioned top-right; the buttons inside flow statically in a little row. */
.vcard-ctrls { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 6px; }
.vcard-ctrls .vwl-btn, .vcard-ctrls .vget-btn { position: static; top: auto; right: auto; }

/* ── Get-modal: season/episode selector + smarter footer ──────────────────── */
.vgm-eps { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.vgm-eps[hidden] { display: none; }
.vgm-eps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vgm-eps-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); }
.vgm-eps-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
    color: rgba(255, 255, 255, 0.6); cursor: pointer; user-select: none; }
.vgm-eps-toggle input { accent-color: rgb(var(--accent-rgb, 88 101 242)); width: 15px; height: 15px; cursor: pointer; }
.vgm-eps-head-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vgm-select-missing { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.4); background: rgba(var(--accent-rgb, 88 101 242), 0.12);
    color: rgb(var(--accent-light-rgb, 148 158 255)); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.vgm-select-missing:hover:not(:disabled) { background: rgba(var(--accent-rgb, 88 101 242), 0.22);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.6); }
.vgm-select-missing:disabled { opacity: 0.55; cursor: default; }
.vgm-select-missing[hidden] { display: none; }

.vgm-eps-list { display: flex; flex-direction: column; gap: 8px; }
.vgm-season { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.vgm-season-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; transition: background 0.15s ease; }
.vgm-season-head:hover { background: rgba(255, 255, 255, 0.04); }
.vgm-season-check { display: inline-flex; align-items: center; }
.vgm-season-check input { accent-color: rgb(var(--accent-rgb, 88 101 242)); width: 17px; height: 17px; cursor: pointer; }
.vgm-season-check--lock { color: rgba(108, 211, 145, 0.85); font-size: 14px; font-weight: 900; width: 17px; justify-content: center; }
.vgm-season-name { font-size: 14px; font-weight: 800; color: #fff; }
.vgm-season-meta { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.45); margin-left: auto; }
.vgm-season-chev { color: rgba(255, 255, 255, 0.4); transition: transform 0.2s ease; font-size: 13px; }
.vgm-season--open .vgm-season-chev { transform: rotate(180deg); }
.vgm-season-eps { display: none; padding: 2px 6px 8px; }
.vgm-season--open .vgm-season-eps { display: block; }
.vgm-season-loading { padding: 14px 12px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-align: center; }

.vgm-ep { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background 0.12s ease; }
.vgm-ep:hover { background: rgba(255, 255, 255, 0.04); }
.vgm-eps--missing-only .vgm-ep--owned { display: none; }
.vgm-ep-ctrl { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.vgm-ep-cb { accent-color: rgb(var(--accent-rgb, 88 101 242)); width: 16px; height: 16px; cursor: pointer; }
.vgm-ep-lock { font-size: 13px; }
.vgm-ep--owned .vgm-ep-lock { color: rgba(108, 211, 145, 0.8); }
.vgm-ep--upcoming .vgm-ep-lock { color: rgba(255, 255, 255, 0.3); }
.vgm-ep-num { font-size: 11.5px; font-weight: 800; color: rgba(255, 255, 255, 0.4); min-width: 30px; flex-shrink: 0; }
.vgm-ep-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgm-ep--owned .vgm-ep-title, .vgm-ep--upcoming .vgm-ep-title { color: rgba(255, 255, 255, 0.45); }
.vgm-ep-date { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.35); margin-left: 8px; flex-shrink: 0; }
.vgm-ep-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 6px; margin-left: 8px; flex-shrink: 0; }
.vgm-ep-badge--owned { background: rgba(108, 211, 145, 0.16); color: #6cd391; }
.vgm-ep-badge--missing { background: rgba(var(--accent-rgb, 88 101 242), 0.18); color: #c4cbff; }
.vgm-ep-badge--wish { background: rgba(var(--accent-rgb, 88 101 242), 0.85); color: #fff; }
.vgm-ep-badge--soon { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }

/* footer */
.vgm-sel-count { margin-right: auto; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.vgm-btn--text { background: transparent; border-color: transparent; color: rgba(255, 255, 255, 0.6); padding: 11px 8px; }
.vgm-btn--text:hover { color: #fff; }
.vgm-btn:disabled { opacity: 0.4; cursor: default; transform: none !important; filter: none !important; }

/* "Add to watchlist" offer in the show get-modal (airing + not-yet-followed) */
.vgm-follow { margin-top: 14px; }
.vgm-follow[hidden] { display: none; }
.vgm-follow-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 12px; cursor: pointer;
    background: rgba(var(--accent-rgb, 88 101 242), 0.1); border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.28); }
.vgm-follow-row:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.14); }
.vgm-follow-row input { accent-color: rgb(var(--accent-rgb, 88 101 242)); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.vgm-follow-txt { font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.vgm-follow-txt strong { color: #fff; font-weight: 800; }

/* Fully-owned seasons hide while "Missing only" is on (turn it off to re-download). */
.vgm-eps--missing-only .vgm-season--owned { display: none; }
.vgm-eps-allowned { display: none; padding: 22px 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: rgba(108, 211, 145, 0.85); }
.vgm-eps--missing-only .vgm-eps-allowned { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   Get-modal — premium vibe pass: per-title hue glows + motion (--vgm-h set by JS)
   ══════════════════════════════════════════════════════════════════════════ */
.vgm-overlay { background: rgba(4, 4, 7, 0.78); }
.vgm-modal {
    box-shadow: 0 60px 140px rgba(0, 0, 0, 0.75),
        0 0 90px hsla(var(--vgm-h, 230), 75%, 55%, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(22px) scale(0.96);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease,
        width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vgm-overlay.vgm-open .vgm-modal { transform: none; }
/* shows expand the modal for the season/episode picker */
.vgm-overlay.vgm-mode-dl-show .vgm-modal { width: min(940px, 100%); }

/* hero — slow Ken Burns drift, hue-tinted scrim, and a drifting light sweep */
.vgm-hero { animation: vgmKen 22s ease-in-out infinite alternate; }
@keyframes vgmKen { from { background-position: center 18%; } to { background-position: center 34%; } }
.vgm-hero-scrim {
    background: linear-gradient(0deg, #101015 3%, rgba(16, 16, 21, 0.55) 50%, rgba(16, 16, 21, 0.05)),
        radial-gradient(140% 120% at 0% 100%, hsla(var(--vgm-h, 230), 78%, 48%, 0.42), transparent 60%),
        radial-gradient(120% 100% at 100% 0%, hsla(var(--vgm-h, 230), 80%, 62%, 0.18), transparent 55%);
}
.vgm-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, hsla(var(--vgm-h, 230), 92%, 78%, 0.07) 49%, transparent 60%);
    background-size: 250% 100%; animation: vgmSheen 9s ease-in-out infinite;
}
@keyframes vgmSheen { 0% { background-position: 170% 0; } 55%, 100% { background-position: -70% 0; } }

/* staggered content rise on open */
.vgm-overlay.vgm-open .vgm-hero-content > * { animation: vgmRise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vgm-hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.vgm-hero-content > *:nth-child(2) { animation-delay: 0.11s; }
.vgm-hero-content > *:nth-child(3) { animation-delay: 0.17s; }
.vgm-hero-content > *:nth-child(4) { animation-delay: 0.23s; }
@keyframes vgmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vgm-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65), 0 0 42px hsla(var(--vgm-h, 230), 80%, 55%, 0.28); }

/* poster — hue-aware halo + its own rise (it sits outside hero-content) */
.vgm-poster { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 28px -6px hsla(var(--vgm-h, 230), 80%, 58%, 0.5); }
.vgm-overlay.vgm-open .vgm-poster { animation: vgmRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }

/* primary CTA — hue-aware gradient + glow + lift */
.vgm-btn--primary {
    background: linear-gradient(135deg, hsl(var(--vgm-h, 230), 70%, 58%), hsl(var(--vgm-h, 230), 72%, 47%));
    box-shadow: 0 10px 30px hsla(var(--vgm-h, 230), 70%, 45%, 0.45);
}
.vgm-btn--primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07);
    box-shadow: 0 16px 42px hsla(var(--vgm-h, 230), 75%, 50%, 0.6); }
.vgm-btn--primary:active:not(:disabled) { transform: translateY(0); }

/* close button spins on hover */
.vgm-close { transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease; }
.vgm-close:hover { transform: rotate(90deg); }

/* episode rows — accent edge slides in on hover */
.vgm-ep { position: relative; transition: background 0.14s ease, padding-left 0.14s ease; }
.vgm-ep:hover { padding-left: 14px; }
.vgm-ep::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: hsl(var(--vgm-h, 230), 82%, 62%); opacity: 0; transition: opacity 0.14s ease; }
.vgm-ep:hover::before { opacity: 0.75; }

/* the watchlist offer — gentle breathing glow so it invites the tick */
.vgm-follow-row { animation: vgmFollowPulse 3.6s ease-in-out infinite; }
@keyframes vgmFollowPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 88 101 242), 0.28), 0 0 16px -7px rgba(var(--accent-rgb, 88 101 242), 0.45); }
    50% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 88 101 242), 0.55), 0 0 28px -4px rgba(var(--accent-rgb, 88 101 242), 0.65); }
}

@media (prefers-reduced-motion: reduce) {
    .vgm-hero, .vgm-hero::after, .vgm-follow-row, .vgm-overlay.vgm-open .vgm-poster,
    .vgm-overlay.vgm-open .vgm-hero-content > * { animation: none; }
    .vgm-modal { transition: opacity 0.2s ease; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Discover page — trending hero slideshow + lazy genre/decade rails (.vdsc-*)
   ══════════════════════════════════════════════════════════════════════════ */
.vdsc-page { padding: 0 0 60px; }

/* ── hero slideshow ───────────────────────────────────────────────────────── */
.vdsc-hero { position: relative; height: clamp(480px, 62vh, 640px); border-radius: 20px; overflow: hidden;
    margin: 4px 0 26px; background: #0d0d12; isolation: isolate; }
.vdsc-hero.hidden { display: none; }
.vdsc-slides { position: absolute; inset: 0; }
.vdsc-slide { position: absolute; inset: 0; background-size: cover; background-position: center 18%;
    opacity: 0; transition: opacity 1.1s ease; transform: scale(1.06); }
.vdsc-slide--on { opacity: 1; animation: vdscKen 12s ease-out forwards; }
@keyframes vdscKen { from { transform: scale(1.12); } to { transform: scale(1.0); } }
.vdsc-slide-scrim { position: absolute; inset: 0;
    background: linear-gradient(90deg, #0b0b10 6%, rgba(11, 11, 16, 0.72) 38%, rgba(11, 11, 16, 0.15) 70%, transparent),
        linear-gradient(0deg, #0b0b10 2%, transparent 42%),
        radial-gradient(120% 130% at 0% 100%, hsla(var(--vgm-h, 230), 80%, 50%, 0.34), transparent 58%); }
.vdsc-hero-body { position: absolute; left: 40px; bottom: 34px; z-index: 2; max-width: 560px;
    animation: vdscRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes vdscRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vdsc-hero-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
    color: hsl(var(--vgm-h, 230), 85%, 78%); margin-bottom: 8px; }
.vdsc-hero-title { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; margin: 0;
    color: #fff; text-shadow: 0 3px 26px rgba(0, 0, 0, 0.7), 0 0 46px hsla(var(--vgm-h, 230), 80%, 55%, 0.3); }
.vdsc-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 0; }
.vdsc-hero-pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); }
.vdsc-hero-ov { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 14px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vdsc-hero-cta { margin-top: 18px;
    background: linear-gradient(135deg, hsl(var(--vgm-h, 230), 70%, 58%), hsl(var(--vgm-h, 230), 72%, 47%)) !important;
    box-shadow: 0 12px 32px hsla(var(--vgm-h, 230), 70%, 45%, 0.5) !important; }
.vdsc-hero-cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
.vdsc-dots { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: flex; gap: 8px; }
.vdsc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, 0.32); transition: all 0.2s ease; }
.vdsc-dot--on { background: hsl(var(--vgm-h, 230), 85%, 65%); width: 26px; border-radius: 5px;
    position: relative; overflow: hidden; }
/* Rotation progress: the active dot fills over the slide interval (6.5s). */
.vdsc-dot--on::after { content: ''; position: absolute; inset: 0; border-radius: 5px; transform-origin: left;
    background: rgba(255, 255, 255, 0.55); animation: vdscDotFill 6.5s linear forwards; }
@keyframes vdscDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vdsc-hero:hover .vdsc-dot--on::after { animation-play-state: paused; }   /* hover pauses rotation */
@media (prefers-reduced-motion: reduce) { .vdsc-dot--on::after { animation: none; } }
/* The billboard wordmark (TMDB title logo) — sized like Netflix's, text-shadowed
   container so it pops off any backdrop. Falls back to .vdsc-hero-title text. */
.vdsc-hero-logo { display: block; max-width: min(420px, 82%); max-height: 148px; width: auto; height: auto;
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.75)); }
.vdsc-hero-add { margin-left: 0; }
.vdsc-hero-add--on { border-color: rgba(var(--accent-rgb, 88 101 242), 0.65);
    background: rgba(var(--accent-rgb, 88 101 242), 0.22); color: #fff; }

/* ── Discover header bar (title + Preferences / Ignore List) ─────────────── */
.vdsc-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin: 0 0 14px; }
.vdsc-bar.hidden { display: none; }
.vdsc-bar-title { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: #fff; margin: 0; }
.vdsc-bar-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); margin: 3px 0 0; }
.vdsc-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vdsc-btn--active { border-color: rgba(var(--accent-rgb, 88 101 242), 0.55);
    background: rgba(var(--accent-rgb, 88 101 242), 0.16); color: #fff; }

/* ── Preferences popover panel ────────────────────────────────────────────── */
.vdsc-prefs { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin: 0 0 16px;
    border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.28);
    animation: vdscRise 0.25s ease both; }
.vdsc-prefs.hidden { display: none; }
.vdsc-prefs-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vdsc-prefs-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45); min-width: 96px; }
.vdsc-prefs-hint { display: block; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: rgba(255, 255, 255, 0.3); margin-top: 2px; }

/* ── Browse strip: gradient genre tiles ───────────────────────────────────── */
.vdsc-browse-strip { margin: 0 0 8px; }
.vdsc-browse-strip.hidden { display: none; }
.vdsc-strip-head { margin-bottom: 2px; }
.vdsc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vdsc-tile { position: relative; height: 74px; border: none; border-radius: 12px; cursor: pointer;
    overflow: hidden; text-align: left; padding: 0 14px; display: flex; align-items: flex-end;
    background: linear-gradient(135deg, rgba(var(--c, 99, 102, 241), 0.85), rgba(var(--c, 99, 102, 241), 0.3) 130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.16s ease, filter 0.16s ease; }
.vdsc-tile::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 50%); }
.vdsc-tile:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.1); }
.vdsc-tile-name { position: relative; z-index: 1; font-size: 14.5px; font-weight: 900; letter-spacing: -0.01em;
    color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); padding-bottom: 11px; }
.vdsc-tile--all { background: linear-gradient(135deg, rgba(var(--accent-rgb, 88 101 242), 0.85),
    rgba(var(--accent-rgb, 88 101 242), 0.35) 130%); }

/* ── Grid-mode live filter bar ────────────────────────────────────────────── */
.vdsc-filterbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; margin: 0 0 16px;
    border-radius: 14px; background: rgba(16, 16, 22, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky; top: 8px; z-index: 5; backdrop-filter: blur(10px); }
.vdsc-filterbar.hidden { display: none; }
/* Collapsed (QT3496 #1040): hide the filter rows but keep the bar's toggle
   reachable via the grid-head button. Animates the height away for more grid. */
.vdsc-filterbar--collapsed { display: none; }
.vdsc-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Show/Hide-filters toggle in the grid head (pushed to the far right) */
.vdsc-filter-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.vdsc-filter-toggle.hidden { display: none; }
.vdsc-filter-toggle[aria-expanded="false"] svg { opacity: 0.5; }

/* ── Endless "Keep exploring" feed ────────────────────────────────────────── */
.vdsc-explore { margin-top: 26px; }
.vdsc-explore[hidden] { display: none; }

/* Perf: don't render offscreen rail groups at all — the page is a deep stack,
   and this keeps scrolling silky no matter how many groups fill in. */
.vdsc-group { content-visibility: auto; contain-intrinsic-size: auto 760px; }

/* ── Browse button (shared by the Browse panel + grid header) ─────────────── */
.vdsc-btn { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer;
    border: 1px solid transparent; background: rgb(var(--accent-rgb, 88 101 242)); color: #fff;
    box-shadow: 0 8px 22px rgba(var(--accent-rgb, 88 101 242), 0.34); transition: all 0.15s ease; }
.vdsc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vdsc-btn--ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82); box-shadow: none; }
.vdsc-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── shelves (lazy rails) ─────────────────────────────────────────────────── */
.vdsc-shelves.hidden, .vdsc-grid-wrap.hidden { display: none; }
/* Discover is grouped into labelled sections (For you / Browse by genre / …) for scannability.
   A group with no rails (async-only, not yet filled, or all rails dropped) is hidden entirely. */
.vdsc-group { margin: 0; }
.vdsc-group--empty { display: none; }

/* ── sticky 'jump to section' bar — quick nav across the deep rail stack ──────── */
.vdsc-jumpnav {
    position: sticky; top: 0; z-index: 6;
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 0 6px; padding: 11px 2px;
    background: linear-gradient(180deg, rgba(10, 11, 16, 0.94) 35%, rgba(10, 11, 16, 0.55) 80%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    scrollbar-width: none;
}
.vdsc-jumpnav::-webkit-scrollbar { display: none; }
.vdsc-jump {
    flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78); font-size: 12.5px; font-weight: 700; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vdsc-jump:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.85); border-color: transparent; color: #fff; }
.vdsc-jump.hidden { display: none; }

.vdsc-group-head { font-size: 12.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5); margin: 30px 0 16px; padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

.vdsc-shelf { margin: 0 0 30px; }
.vdsc-shelf-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 13px; }
.vdsc-shelf-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 0; }
.vdsc-shelf-nav { display: flex; gap: 7px; }
.vdsc-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.vdsc-arrow:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.85); border-color: transparent; color: #fff; }
.vdsc-rail { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 12px;
    scroll-snap-type: x proximity; scrollbar-width: thin; }
.vdsc-rail::-webkit-scrollbar { height: 8px; }
.vdsc-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.vdsc-rail::-webkit-scrollbar-track { background: transparent; }
.vdsc-rail .vsr-card { flex: 0 0 162px; width: 162px; scroll-snap-align: start; }

/* ── Top 10 ranked rail — giant outlined numeral hugging each poster ──────────── */
.vdsc-shelf--ranked .vdsc-rail { gap: 4px; align-items: flex-end; }
.vsr-ranked { display: flex; align-items: flex-end; flex: 0 0 auto; scroll-snap-align: start; }
.vsr-rank {
    font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
    font-size: 150px; font-weight: 900; line-height: 0.66; letter-spacing: -0.07em;
    color: #0a0c14; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.5);
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    margin: 0 -22px 0 0; user-select: none; flex: 0 0 auto; align-self: flex-end;
}
.vsr-ranked .vsr-card { flex: 0 0 150px; width: 150px; }
.vsr-ranked .vsr-card .vsr-info { padding-left: 0; }

/* skeleton shimmer while a rail loads */
.vdsc-skel { display: flex; gap: 16px; }
.vdsc-skel-card { flex: 0 0 162px; height: 280px; border-radius: 12px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 70%);
    background-size: 220% 100%; animation: vdscShimmer 1.4s ease-in-out infinite; }
@keyframes vdscShimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ── filter grid ──────────────────────────────────────────────────────────── */
.vdsc-grid { margin-top: 4px; }
.vdsc-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.vdsc-more { padding: 12px 30px; }
.vdsc-more.hidden { display: none; }

@media (max-width: 720px) {
    .vdsc-hero { height: 420px; }
    .vdsc-hero-body { left: 22px; bottom: 22px; right: 22px; }
    .vdsc-hero-title { font-size: 27px; }
    .vdsc-rail .vsr-card, .vdsc-skel-card { flex-basis: 132px; width: 132px; }
    .vsr-ranked .vsr-card { flex-basis: 120px; width: 120px; }
    .vsr-rank { font-size: 104px; margin-right: -16px; }
}
@media (prefers-reduced-motion: reduce) {
    .vdsc-slide, .vdsc-slide--on { animation: none; transition: opacity 0.4s ease; transform: none; }
    .vdsc-hero-body { animation: none; }
    .vdsc-skel-card { animation: none; }
}

/* ── Discover v2: ambient glow + see-all + grid head + hide-owned + polish ─── */
.vdsc-page { position: relative; overflow-x: clip; }
.vdsc-hero, .vdsc-browse, .vdsc-shelves, .vdsc-grid-wrap { position: relative; z-index: 1; }
/* a faint page-top color bleed that follows the current hero slide's hue */
.vdsc-amb { position: absolute; top: -40px; left: 0; z-index: 0;
    width: 100%; height: 580px; pointer-events: none; opacity: 0.5; transition: opacity 0.7s ease;
    background: radial-gradient(58% 80% at 50% 0%, hsla(var(--vdsc-amb, 230), 82%, 55%, 0.22), transparent 70%); }

/* "See all" → opens the rail as a paged grid */
.vdsc-seeall { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.5); background: none;
    border: none; cursor: pointer; padding: 4px 9px; border-radius: 8px; margin-right: 4px;
    transition: color 0.15s ease, background 0.15s ease; }
.vdsc-seeall:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* grid (category) header — back button + title */
.vdsc-grid-head { display: flex; align-items: center; gap: 16px; margin: 2px 0 22px; }
.vdsc-grid-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 0; }

/* hide-owned toggle (sits at the far right of the filter bar) */
.vdsc-toggle { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); cursor: pointer; user-select: none; }
.vdsc-toggle input { accent-color: rgb(var(--accent-rgb, 88 101 242)); width: 16px; height: 16px; cursor: pointer; }
.vdsc-hide-owned .vsr-card--owned { display: none; }
/* …except in the ranked Top 10 — hiding an owned card there would strand its big
   rank numeral as a gap. The rail also drops owned server-side, so this only matters
   if one ever slips through: show it (with its 'In Library' ribbon) instead. */
.vdsc-hide-owned .vdsc-shelf--ranked .vsr-card--owned { display: flex; }

/* rail-language preference chips — which original languages show in the general rails */
.vdsc-langs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: 14px; }
.vdsc-langs-label { font-size: 13px; opacity: 0.6; }
.vdsc-lang { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5); cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.vdsc-lang:hover { color: rgba(255, 255, 255, 0.85); }
.vdsc-lang--on { color: #fff; background: rgba(var(--accent-rgb, 88 101 242), 0.85); border-color: transparent; }

/* ── Page-wide Discover controls (sit above the Browse panel; affect every rail) ── */
.vdsc-global { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
    padding: 11px 16px; margin: 14px 0 6px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.vdsc-global-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32); margin-right: 2px; }
.vdsc-global .vdsc-toggle { margin-left: 0; }
.vdsc-global .vdsc-langs { margin-left: 0; }
.vdsc-browse-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32); margin: 0 0 10px 2px; }

/* 'Your streaming services' — a rail builder, NOT a page-wide filter (its own row, self-described) */
.vdsc-provrail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 18px; }
.vdsc-provrail-text { display: flex; flex-direction: column; gap: 1px; }
.vdsc-provrail-title { font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, 0.74); }
.vdsc-provrail-sub { font-size: 11px; color: rgba(255, 255, 255, 0.34); }
.vdsc-provrail .vdsc-langs { margin-left: 0; }

/* ── 'Not interested' card button ──────────────────────────────────────────── */
.vsr-card { position: relative; }
.vsr-notint { position: absolute; top: 6px; left: 6px; z-index: 6; width: 24px; height: 24px;
    border-radius: 50%; border: none; cursor: pointer; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center; opacity: 0;
    background: rgba(10, 10, 14, 0.78); color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px); transition: opacity .15s ease, background .15s ease, transform .15s ease; }
.vsr-card:hover .vsr-notint { opacity: 1; }
.vsr-notint:hover { background: rgba(220, 38, 38, 0.92); color: #fff; transform: scale(1.12); }

/* ── Ignore-list button (top-right of the hero) ────────────────────────────── */
.vdsc-ignore-btn { position: absolute; top: 16px; right: 18px; z-index: 8;
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; color: rgba(255, 255, 255, 0.82);
    background: rgba(12, 12, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px); transition: all .18s ease; }
.vdsc-ignore-btn:hover { color: #fff; background: rgba(220, 38, 38, 0.5); border-color: rgba(220, 38, 38, 0.6);
    transform: translateY(-1px); }

/* ── Ignore-list modal ─────────────────────────────────────────────────────── */
.vdsc-ig-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
    justify-content: center; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .18s ease; padding: 20px; }
.vdsc-ig-overlay.vdsc-ig-in { opacity: 1; }
.vdsc-ig-modal { width: 720px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column;
    border-radius: 22px; overflow: hidden; transform: translateY(10px) scale(.98); transition: transform .2s ease;
    background: linear-gradient(160deg, rgba(24, 24, 30, 0.98), rgba(15, 15, 20, 0.99));
    border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.28);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.vdsc-ig-in .vdsc-ig-modal { transform: translateY(0) scale(1); }
.vdsc-ig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 14px; }
.vdsc-ig-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.vdsc-ig-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-top: 3px; max-width: 480px; line-height: 1.5; }
.vdsc-ig-close { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); font-size: 14px; transition: all .15s ease; }
.vdsc-ig-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }
.vdsc-ig-search { padding: 0 24px 12px; position: relative; }
.vdsc-ig-input { width: 100%; box-sizing: border-box; padding: 11px 15px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; font-size: 14px; outline: none; transition: border-color .15s ease; }
.vdsc-ig-input:focus { border-color: rgba(var(--accent-rgb, 88 101 242), 0.6); }
.vdsc-ig-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.vdsc-ig-res { display: flex; align-items: center; gap: 11px; padding: 7px 9px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.85);
    text-align: left; width: 100%; transition: background .12s ease, border-color .12s ease; }
.vdsc-ig-res:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }
.vdsc-ig-res img { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.vdsc-ig-res .vdsc-ig-ph { width: 32px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); border-radius: 4px; flex-shrink: 0; }
.vdsc-ig-rn { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdsc-ig-add { font-size: 11px; font-weight: 700; color: rgba(var(--accent-rgb, 88 101 242), 1);
    padding: 3px 9px; border-radius: 999px; background: rgba(var(--accent-rgb, 88 101 242), 0.14); flex-shrink: 0; }
.vdsc-ig-nores { font-size: 12.5px; color: rgba(255, 255, 255, 0.4); padding: 8px 4px; }
.vdsc-ig-list { padding: 6px 24px 24px; overflow-y: auto; }
.vdsc-ig-count { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35); margin: 6px 2px 12px; }
.vdsc-ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.vdsc-ig-card { position: relative; display: flex; flex-direction: column; gap: 6px; transition: opacity .15s ease, transform .15s ease; }
.vdsc-ig-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08); }
.vdsc-ig-card .vdsc-ig-ph { display: flex; align-items: center; justify-content: center; font-size: 28px;
    background: rgba(255, 255, 255, 0.05); }
.vdsc-ig-meta { display: flex; flex-direction: column; }
.vdsc-ig-name { font-size: 12px; color: rgba(255, 255, 255, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdsc-ig-yr { font-size: 10.5px; color: rgba(255, 255, 255, 0.4); }
.vdsc-ig-remove { margin-top: 2px; padding: 4px 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.65); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all .14s ease; }
.vdsc-ig-remove:hover { background: rgba(var(--accent-rgb, 88 101 242), 0.85); color: #fff; border-color: transparent; }
.vdsc-ig-empty { text-align: center; padding: 44px 20px; color: rgba(255, 255, 255, 0.55); }
.vdsc-ig-empty-ic { font-size: 40px; margin-bottom: 10px; }
.vdsc-ig-empty-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.38); margin-top: 6px; }

/* rails: cards cascade in (staggered by --i) when the row fills, instead of one block flash.
   `backwards` fill holds the hidden start-state during the delay, then releases so :hover works. */
.vdsc-shelf--in .vdsc-rail .vsr-card {
    animation: vdscCardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes vdscCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vdsc-rail .vsr-card, .vdsc-grid .vsr-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.vdsc-rail .vsr-card:hover, .vdsc-grid .vsr-card:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 26px -6px hsla(var(--vgm-h, 230), 80%, 58%, 0.5); }

@media (prefers-reduced-motion: reduce) {
    .vdsc-shelf--in .vdsc-rail .vsr-card { animation: none; }
    .vdsc-amb { transition: none; }
}

/* ── Discover Browse panel — segmented controls + genre/era chips ──────────── */
.vdsc-browse { position: relative; z-index: 1; margin: 6px 0 28px; padding: 16px 18px 18px;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 50px -30px rgba(var(--accent-rgb, 88 101 242), 0.5); }
.vdsc-browse-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* segments are now just a row of the same buttons (no sliding pill) */
.vdsc-seg { display: inline-flex; gap: 6px; }
.vdsc-seg::before { display: none; }

/* chip rows (genres, providers, eras) — horizontally scrollable */
.vdsc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 1px 7px; margin-top: 13px;
    scrollbar-width: thin; }
.vdsc-chips::-webkit-scrollbar { height: 6px; }
.vdsc-chips::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border-radius: 3px; }
.vdsc-chips--era { margin-top: 0; }

/* Filter buttons (chips + segment buttons) — rounded-rect, each tinted from a
   vibey palette (mirrors the music album-detail action buttons); active = filled. */
.vdsc-chip, .vdsc-seg-btn { flex: 0 0 auto; padding: 8px 15px; border-radius: 9px; cursor: pointer;
    white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
    color: rgba(var(--c, 200, 205, 230), 0.64);
    background: rgba(var(--c, 200, 205, 230), 0.07);
    border: 1px solid rgba(var(--c, 200, 205, 230), 0.18);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1); }
.vdsc-chip:hover, .vdsc-seg-btn:hover { color: rgba(var(--c, 200, 205, 230), 0.96);
    background: rgba(var(--c, 200, 205, 230), 0.14); border-color: rgba(var(--c, 200, 205, 230), 0.4); transform: translateY(-1px); }
.vdsc-chip--on, .vdsc-seg-btn--on { color: #fff; border-color: transparent; transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(var(--c, 120, 130, 240), 0.96), rgba(var(--c, 120, 130, 240), 0.6));
    box-shadow: 0 9px 22px -9px rgba(var(--c, 120, 130, 240), 0.9),
        0 0 0 1px rgba(var(--c, 120, 130, 240), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* Colours carry meaning, not position:
   - segments (Movies/TV, sort) → the app accent (they're modes, not categories)
   - genre chips → a thematic colour per genre (set inline by JS)
   - provider chips → the service's brand colour (set inline in markup)
   - era chips → a single warm amber; reset chips ('All/Any …') → neutral
   so each --c is provided where it's meaningful and falls back to neutral here. */
.vdsc-seg-btn { --c: var(--accent-rgb, 29, 185, 84); }
.vdsc-chip--reset { --c: 148, 163, 184; }   /* All genres / Any service / Any era */
.vdsc-chips--era .vdsc-chip { --c: 245, 158, 11; }
.vdsc-chips--era .vdsc-chip--reset { --c: 148, 163, 184; }

.vdsc-browse-bottom { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.vdsc-browse-bottom .vdsc-chips { flex: 1; min-width: 0; margin-top: 0; }
.vdsc-browse-go { flex: 0 0 auto; padding: 11px 22px;
    box-shadow: 0 10px 26px -8px rgba(var(--accent-rgb, 88 101 242), 0.7); }
.vdsc-browse-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vdsc-browse .vdsc-toggle { margin-left: auto; }

@media (max-width: 720px) {
    .vdsc-browse-bottom { flex-direction: column; align-items: stretch; }
    .vdsc-browse-go { width: 100%; }
}

/* no-TMDB empty state */
.vdsc-empty { text-align: center; padding: 86px 24px; }
.vdsc-empty.hidden { display: none; }
.vdsc-empty-ic { font-size: 46px; margin-bottom: 14px; opacity: 0.85; }
.vdsc-empty-title { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 9px; }
.vdsc-empty-sub { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); max-width: 440px; margin: 0 auto; }
.vdsc-empty-sub strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .vdsc-seg::before { transition: none; }
    .vdsc-chip, .vdsc-chip:hover, .vdsc-chip--on { transition: color 0.15s ease, background 0.15s ease; transform: none; }
}

/* ── hero actions: View CTA + Trailer button ──────────────────────────────── */
.vdsc-hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.vdsc-hero-actions .vdsc-hero-cta { margin-top: 0; }
.vdsc-hero-trailer { display: inline-flex; align-items: center; gap: 8px; padding: 11px 19px; border-radius: 12px;
    font-size: 13px; font-weight: 800; cursor: pointer; color: #fff; backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.vdsc-hero-trailer:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.42); transform: translateY(-1px); }
.vdsc-tr-ic { font-size: 10px; }

/* "More like…" rails get a gradient title as a personalized cue */
.vdsc-shelf--ml .vdsc-shelf-title { color: #fff;
    background: linear-gradient(90deg, #fff 35%, hsl(265 85% 78%) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── trailer lightbox (in-app YouTube embed) ──────────────────────────────── */
.vdsc-tr-overlay { position: fixed; inset: 0; z-index: 9200; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(3, 3, 6, 0.86); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.2s ease; }
.vdsc-tr-overlay.vdsc-tr-open { opacity: 1; }
.vdsc-tr-box { position: relative; width: min(960px, 100%); }
.vdsc-tr-close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.25s ease; }
.vdsc-tr-close:hover { background: rgba(0, 0, 0, 0.82); transform: rotate(90deg); }
.vdsc-tr-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;
    transform: scale(0.97); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.vdsc-tr-open .vdsc-tr-frame { transform: none; }
.vdsc-tr-frame iframe { width: 100%; height: 100%; border: 0; }
.vdsc-tr-none { color: rgba(255, 255, 255, 0.6); font-size: 15px; font-weight: 600; }
.vdsc-tr-title { margin-top: 14px; text-align: center; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-motion: reduce) { .vdsc-tr-frame { transition: none; } }

/* infinite-scroll sentinel (invisible trigger near the grid bottom) */
.vdsc-sentinel { height: 1px; width: 100%; }

/* keyboard focus rings (a11y) */
.vdsc-chip:focus-visible, .vdsc-seg-btn:focus-visible, .vdsc-arrow:focus-visible, .vdsc-seeall:focus-visible,
.vdsc-btn:focus-visible, .vdsc-hero-trailer:focus-visible, .vdsc-dot:focus-visible, .vdsc-toggle:focus-within,
.vdsc-page .vsr-card:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 88 101 242), 0.9); outline-offset: 2px; }

/* ── small screens ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* The Ignore-List pill floats top-right over the page on desktop, where the
       hero body hugs the bottom-left. On a phone the (shorter) hero's text can
       reach the top row, so the pill sat ON the hero title — flow it above the
       hero instead, still right-aligned. */
    .vdsc-ignore-btn { position: static; display: flex; width: max-content; margin: 4px 0 10px auto; }
    .vdsc-browse { padding: 13px 13px 15px; margin-bottom: 22px; }
    .vdsc-browse-top { gap: 10px; }
    .vdsc-shelf { margin-bottom: 24px; }
    .vdsc-shelf-title { font-size: 16px; }
    .vdsc-grid-head { flex-wrap: wrap; gap: 10px; }
    .vdsc-grid-title { font-size: 18px; }
    .vdsc-hero { height: 300px; margin-bottom: 20px; }
    .vdsc-hero-body { left: 18px; right: 18px; bottom: 18px; }
    .vdsc-hero-title { font-size: 23px; }
    .vdsc-hero-ov { -webkit-line-clamp: 3; }
    .vdsc-hero-actions { gap: 9px; }
    .vdsc-hero-actions .discog-submit-btn, .vdsc-hero-trailer { flex: 1 1 auto; justify-content: center; }
    .vdsc-dots { right: 16px; bottom: 16px; }
    /* keep the trailer close button on-screen (it sits above the frame on desktop) */
    .vdsc-tr-close { top: 6px; right: 6px; background: rgba(0, 0, 0, 0.65); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Wishlist page (.vwsh-*) — Movies grid + grouped TV show→season→episode tree
   ══════════════════════════════════════════════════════════════════════════ */
.vwsh-page { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); color: var(--text-primary, #fff); padding: 0 0 70px; }
.vwsh-head { position: relative; padding: 30px 40px 0; overflow: hidden; }
.vwsh-head-glow { position: absolute; top: -190px; left: 50%; transform: translateX(-50%);
    width: 860px; height: 390px; pointer-events: none; z-index: 0;
    background: radial-gradient(56% 70% at 50% 0%, rgba(var(--accent-rgb, 88 101 242), 0.22), transparent 70%); filter: blur(10px); }
.vwsh-head-row { position: relative; z-index: 1; display: flex; align-items: flex-end;
    justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vwsh-title { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.vwsh-sub { margin: 7px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 600; }

/* Toolbar controls — aligned to the video side's polished language: the
   calendar's segmented tabs, the search page's focus-ring shell, and
   custom-chevron selects. All controls share one height (42px) + radius (12px)
   so the toolbar reads as a single cohesive row. */
/* Tabs are individual pills; the SELECTED one lights up with an accent outline +
   ring glow (the same focus language as the search field) rather than a filled
   accent block. */
.vwsh-tabs { display: inline-flex; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.vwsh-tab { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.62); font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    padding: 9px 18px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.vwsh-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.vwsh-tab--on { color: #fff; background: rgba(var(--vd-accent-rgb), 0.08);
    border-color: rgba(var(--vd-accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwsh-tab-n { font-size: 11px; font-weight: 800; min-width: 18px; text-align: center;
    padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, color 0.2s ease; }
.vwsh-tab--on .vwsh-tab-n { background: rgba(var(--vd-accent-rgb), 0.25); color: #fff; }

.vwsh-toolbar { padding: 18px 40px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vwsh-body { padding: 26px 40px 0; }
/* search — a bordered shell that lights up on focus (the video-side ring) */
.vwsh-search { position: relative; display: flex; align-items: center; gap: 10px;
    flex: 1; max-width: 440px; min-width: 220px; height: 42px; padding: 0 14px; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.vwsh-search:focus-within { border-color: rgba(var(--vd-accent-rgb), 0.6);
    background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwsh-search-ic { position: static; transform: none; flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.4); transition: color 0.2s ease; }
.vwsh-search:focus-within .vwsh-search-ic { color: rgba(var(--vd-accent-rgb), 0.95); }
.vwsh-search-input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0;
    background: transparent; color: #fff; font-size: 14px; font-weight: 500; outline: none; }
.vwsh-search-input::placeholder { color: rgba(255, 255, 255, 0.42); }

.vwsh-loading { padding: 50px; text-align: center; }
.vwsh-state { padding: 70px 24px; text-align: center; }
.vwsh-state.hidden, .vwsh-loading.hidden, .vwsh-pagination.hidden { display: none; }
.vwsh-state-ic { font-size: 42px; margin-bottom: 12px; opacity: 0.8; }
.vwsh-state-title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.vwsh-state-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.5); max-width: 430px; margin: 0 auto; line-height: 1.55; }

.vwsh-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.vwsh-page-btn { padding: 9px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.vwsh-page-btn:disabled { opacity: 0.4; cursor: default; }
.vwsh-page-info { font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* movies grid */
.vwsh-grid--movies { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px; }
.vwsh-movie { cursor: pointer; }
.vwsh-movie-art { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: #16161d;
    border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.18s ease, transform 0.18s ease; }
.vwsh-movie:hover .vwsh-movie-art { border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.4); transform: translateY(-3px); }
.vwsh-movie-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vwsh-movie-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: 0.4; }
.vwsh-movie-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 45%); opacity: 0; transition: opacity 0.2s; }
.vwsh-movie:hover .vwsh-movie-scrim { opacity: 1; }
.vwsh-movie-info { padding: 8px 2px 0; }
.vwsh-movie-title { display: block; font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vwsh-movie-meta { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }

/* shows = the "Nebula" (reuses the music wl-* orb/album/track design). EVERY
   video enhancement is scoped under .vwsh-nebula (a class only the video field
   gets) so the music wishlist's wl-* styling is never affected. */
.vwsh-nebula .wl-orb-remove { position: absolute; top: 0; right: 0; z-index: 6; width: 22px; height: 22px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.62);
    color: rgba(255, 255, 255, 0.7); font-size: 11px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vwsh-nebula .wl-orb-group:hover .wl-orb-remove,
.vwsh-nebula .wl-orb-group.expanded .wl-orb-remove { opacity: 1; }
.vwsh-nebula .wl-orb-remove:hover { background: rgba(239, 68, 68, 0.85); border-color: transparent; color: #fff; }

/* #1 cinematic expand — blurred poster backdrop + hue glow behind the season fan */
.vwsh-nebula .wl-orb-group.expanded { overflow: hidden;
    box-shadow: 0 14px 50px -12px hsla(var(--orb-hue, 230), 70%, 45%, 0.45);
    border: 1px solid hsla(var(--orb-hue, 230), 70%, 55%, 0.25); }
.vwsh-nebula .wl-orb-group.expanded::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--vwsh-poster, none); background-size: cover; background-position: center;
    filter: blur(28px) saturate(1.25); opacity: 0.4; transform: scale(1.25); }
.vwsh-nebula .wl-orb-group.expanded::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, hsla(var(--orb-hue, 230), 55%, 12%, 0.55), rgba(12, 12, 16, 0.92)); }
.vwsh-nebula .wl-orb-group.expanded > * { position: relative; z-index: 1; }

/* episode status dot (used in the episode-card meta line) */
.vwsh-nebula .vwsh-ep-dot { display: inline-block; vertical-align: middle; margin-right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: rgb(var(--accent-rgb, 29, 185, 84)); box-shadow: 0 0 6px rgba(var(--accent-rgb, 29, 185, 84), 0.6); }
.vwsh-nebula .vwsh-ep-dot--searching { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.vwsh-nebula .vwsh-ep-dot--downloading { background: #8ab0ff; box-shadow: 0 0 6px rgba(100, 149, 237, 0.6); }
.vwsh-nebula .vwsh-ep-dot--downloaded { background: #4ade80; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.vwsh-nebula .vwsh-ep-dot--failed { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.6); }
.vwsh-nebula .vwsh-ep-dot--monitored { background: rgba(255, 255, 255, 0.45); }
.vwsh-nebula .vwsh-ep-dot--upgrade { background: hsl(282, 85%, 68%); box-shadow: 0 0 6px hsla(282, 85%, 62%, 0.6); }

/* #5 sort select — custom chevron (no native arrow), matched height/radius/ring */
.vwsh-sort { height: 42px; padding: 0 36px 0 14px; box-sizing: border-box; border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88); font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.vwsh-sort:hover { border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.vwsh-sort:focus { border-color: rgba(var(--vd-accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--vd-accent-rgb), 0.16); }
.vwsh-sort option { background: #16161d; color: #fff; }
/* Clear-all (empties the current tab) — red danger, same metrics as the row */
.vwsh-clear { margin-left: auto; height: 42px; padding: 0 16px; box-sizing: border-box; border-radius: 12px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
    color: #fca5a5; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.vwsh-clear:hover { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.55); color: #fecaca;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); }
.vwsh-clear .vwsh-clear-ic { flex: 0 0 auto; }
.vwsh-clear[hidden] { display: none; }

/* video-only: square-ish bubbles (the music orbs are circles) */
.vwsh-nebula .wl-orb, .vwsh-nebula .wl-orb-glow, .vwsh-nebula .wl-orb-img,
.vwsh-nebula .wl-orb-initials, .vwsh-nebula .wl-orb-ring { border-radius: 24%; }

/* #4 acquisition progress — a thin bar across the bubble bottom (done ÷ wanted) */
.vwsh-nebula .vwsh-prog { position: absolute; left: 9%; right: 9%; bottom: 6px; height: 4px; z-index: 3;
    border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--accent-rgb, 29, 185, 84)) calc(var(--vwsh-prog, 0) * 100%),
        rgba(255, 255, 255, 0.16) calc(var(--vwsh-prog, 0) * 100%));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

/* bigger square bubbles so the posters breathe */
.vwsh-nebula .wl-orb.orb-sm { width: 84px; height: 84px; }
.vwsh-nebula .wl-orb.orb-md { width: 104px; height: 104px; }
.vwsh-nebula .wl-orb.orb-lg { width: 124px; height: 124px; }

/* expanded header — synopsis (left) · poster (middle) · cast (right). The side
   columns hide (:empty) when there's nothing, so a collapsed/cast-less show just
   shows the centered bubble (nebula grid unchanged). */
.vwsh-nebula .vwsh-xhead { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.vwsh-nebula .vwsh-xhead-mid { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vwsh-nebula .vwsh-info-syn { flex: 0 1 340px; min-width: 0; align-self: center; text-align: left;
    font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62);
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.vwsh-nebula .vwsh-info-cast { flex: 0 1 340px; min-width: 0; align-self: center; display: flex; flex-wrap: wrap;
    gap: 12px 10px; align-content: center; justify-content: flex-start; }
.vwsh-nebula .vwsh-info-syn:empty, .vwsh-nebula .vwsh-info-cast:empty { display: none; }
.vwsh-nebula .vwsh-cast { width: 56px; padding: 0; border: none; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vwsh-nebula .vwsh-cast-img { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    background: #1c1c24; border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.vwsh-nebula .vwsh-cast:hover .vwsh-cast-img { transform: translateY(-2px);
    border-color: hsla(var(--orb-hue, 230), 70%, 62%, 0.75); box-shadow: 0 6px 16px -4px hsla(var(--orb-hue, 230), 70%, 50%, 0.6); }
.vwsh-nebula .vwsh-cast-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vwsh-nebula .vwsh-cast--ph .vwsh-cast-img img { display: none; }
.vwsh-nebula .vwsh-cast-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.45); }
.vwsh-nebula .vwsh-cast-name { font-size: 9.5px; font-weight: 600; color: rgba(255, 255, 255, 0.55);
    text-align: center; line-height: 1.2; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vwsh-nebula .vwsh-cast:hover .vwsh-cast-name { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 640px) {
    .vwsh-nebula .vwsh-xhead { flex-direction: column; gap: 14px; }
    .vwsh-nebula .vwsh-info-syn { flex-basis: auto; text-align: center; }
    .vwsh-nebula .vwsh-info-cast { flex-basis: auto; justify-content: center; }
}
.vwsh-nebula .vwsh-info-eyebrow { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: hsl(var(--orb-hue, 230) 80% 76%); margin-bottom: 6px; }
/* selected episode card */
.vwsh-nebula .vwsh-epc.vwsh-epc--sel { background: hsla(var(--orb-hue, 230), 48%, 22%, 0.5);
    border-color: hsla(var(--orb-hue, 230), 70%, 58%, 0.65); }

/* season = a poster panel on the LEFT (→ show page), episode grid to its RIGHT */
.vwsh-nebula .vwsh-seasons { display: flex; flex-direction: column; gap: 20px; }
.vwsh-nebula .vwsh-szn { display: flex; align-items: flex-start; gap: 16px; }
.vwsh-nebula .vwsh-szn-side { position: relative; flex-shrink: 0; width: 108px; cursor: pointer; text-align: center;
    padding: 7px 7px 9px; border-radius: 12px; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; }
.vwsh-nebula .vwsh-szn-side:hover { background: hsla(var(--orb-hue, 230), 45%, 22%, 0.4); border-color: hsla(var(--orb-hue, 230), 70%, 58%, 0.4); }
.vwsh-nebula .vwsh-szn-poster { width: 94px; aspect-ratio: 2 / 3; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #16161d;
    border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.vwsh-nebula .vwsh-szn-side:hover .vwsh-szn-poster { transform: translateY(-2px);
    border-color: hsla(var(--orb-hue, 230), 75%, 62%, 0.6); box-shadow: 0 8px 20px hsla(var(--orb-hue, 230), 60%, 30%, 0.5); }
.vwsh-nebula .vwsh-szn-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vwsh-nebula .vwsh-szn-ph { font-size: 26px; opacity: 0.35; }
.vwsh-nebula .vwsh-szn-name { margin-top: 8px; font-size: 13px; font-weight: 800; color: #fff; }
.vwsh-nebula .vwsh-szn-count { margin-top: 2px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.42); }
.vwsh-nebula .vwsh-szn-go { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
    color: hsl(var(--orb-hue, 230) 80% 74%); opacity: 0; transition: opacity 0.15s ease; }
.vwsh-nebula .vwsh-szn-side:hover .vwsh-szn-go { opacity: 1; }
.vwsh-nebula .vwsh-szn-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.55); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vwsh-nebula .vwsh-szn-side:hover .vwsh-szn-rm { opacity: 1; }
.vwsh-nebula .vwsh-szn-rm:hover { background: rgba(239, 68, 68, 0.9); color: #fff; }

.vwsh-nebula .vwsh-ep-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px;
    max-height: 440px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.vwsh-nebula .vwsh-epc { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 9px; cursor: pointer;
    border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease; }
.vwsh-nebula .vwsh-epc:hover { background: rgba(255, 255, 255, 0.07); border-color: hsla(var(--orb-hue, 230), 60%, 55%, 0.35); }
.vwsh-nebula .vwsh-epc-thumb { position: relative; flex-shrink: 0; width: 92px; height: 52px; border-radius: 6px; overflow: hidden;
    background: #16161d; border: 1px solid rgba(255, 255, 255, 0.08); }
.vwsh-nebula .vwsh-epc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* no still → a quiet placeholder (faint icon) instead of loud diagonal stripes */
.vwsh-nebula .vwsh-epc-thumb--none { background: rgba(255, 255, 255, 0.03); }
.vwsh-nebula .vwsh-epc-thumb--none img { display: none; }
.vwsh-nebula .vwsh-epc-thumb--none::after { content: '📺'; position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; font-size: 17px; opacity: 0.22; }
.vwsh-nebula .vwsh-epc-body { flex: 1; min-width: 0; }
.vwsh-nebula .vwsh-epc-title { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vwsh-nebula .vwsh-epc:hover .vwsh-epc-title { color: hsl(var(--orb-hue, 230) 80% 80%); }
.vwsh-nebula .vwsh-epc-meta { margin-top: 3px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.42); }
.vwsh-nebula .vwsh-epc-ov { margin-top: 5px; font-size: 11px; line-height: 1.45; color: rgba(255, 255, 255, 0.5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vwsh-nebula .vwsh-epc-rm { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.45); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vwsh-nebula .vwsh-epc:hover .vwsh-epc-rm { opacity: 1; }
.vwsh-nebula .vwsh-epc-rm:hover { background: rgba(239, 68, 68, 0.85); color: #fff; }

/* status pills + remove button */
.vwsh-st { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.vwsh-st--wanted { background: rgba(var(--accent-rgb, 29, 185, 84), 0.16); color: rgb(var(--accent-rgb, 29, 185, 84)); }
.vwsh-st--searching { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.vwsh-st--downloading { background: rgba(100, 149, 237, 0.18); color: #8ab0ff; }
.vwsh-st--done { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.vwsh-st--failed { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.vwsh-st--monitored { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); }
.vwsh-st--upgrade { background: hsla(282, 80%, 62%, 0.18); color: hsl(282, 90%, 78%); }
.vwsh-movie-art .vwsh-st { position: absolute; top: 8px; left: 8px; z-index: 2; backdrop-filter: blur(6px); }
/* Repeatedly-failing marker (#liveleak-failing-hub) — sits under the status pill */
.vwsh-failing {
    position: absolute; top: 34px; left: 8px; z-index: 2;
    font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
    color: #fca5a5; background: rgba(220, 38, 38, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(6px); cursor: default;
}
.vwsh-failing-inline { color: #fca5a5; font-weight: 700; cursor: default; }

/* 'Search now' — per-item manual search (movie art / episode row / season side) */
.vwsh-hunt { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.6); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.vwsh-hunt:hover { background: rgba(var(--accent-rgb, 29, 185, 84), 0.85); border-color: transparent; color: #fff; }
.vwsh-hunt:disabled { opacity: 0.4; cursor: default; }
.vwsh-hunt--busy svg { animation: vwsh-hunt-spin 0.9s linear infinite; }
@keyframes vwsh-hunt-spin { to { transform: rotate(360deg); } }
.vwsh-movie-art .vwsh-hunt { position: absolute; top: 8px; right: 40px; z-index: 3; opacity: 0; }
/* manual release-picker sits left of the auto-search button (rm 8 · hunt 40 · pick 72) */
.vwsh-movie-art .vwsh-hunt.vwsh-pick { right: 72px; }
.vwsh-movie:hover .vwsh-movie-art .vwsh-hunt { opacity: 1; }
.vwsh-nebula .vwsh-epc-hunt { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vwsh-nebula .vwsh-epc:hover .vwsh-epc-hunt { opacity: 1; }
.vwsh-nebula .vwsh-epc-hunt:hover { background: rgba(var(--accent-rgb, 29, 185, 84), 0.85); color: #fff; }
.vwsh-nebula .vwsh-epc-hunt:disabled { opacity: 0.35; cursor: default; }
.vwsh-nebula .vwsh-szn-hunt { position: absolute; top: 4px; right: 30px; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.65); cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vwsh-nebula .vwsh-szn-side:hover .vwsh-szn-hunt { opacity: 1; }
.vwsh-nebula .vwsh-szn-hunt:hover { background: rgba(var(--accent-rgb, 29, 185, 84), 0.85); color: #fff; }
/* manual release-picker sits left of the season auto-search (rm 4 · hunt 30 · pick 56) */
.vwsh-nebula .vwsh-szn-hunt.vwsh-pick { right: 56px; }
@media (hover: none) { .vwsh-movie-art .vwsh-hunt, .vwsh-nebula .vwsh-epc-hunt, .vwsh-nebula .vwsh-szn-hunt { opacity: 1; } }

/* 'Search all missing' — toolbar sibling of Clear all */
/* "⚠ Failing" filter chip — the LiveLeak fix-it hub toggle */
.vwsh-failing-filter { height: 42px; padding: 0 14px; box-sizing: border-box; border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08);
    color: rgba(245, 158, 11, 0.9); font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; }
.vwsh-failing-filter:hover { background: rgba(245, 158, 11, 0.18); }
.vwsh-failing-filter--on { background: rgba(245, 158, 11, 0.9); border-color: transparent; color: #1a1a1a; }
.vwsh-failing-filter[hidden] { display: none; }
.vwsh-failing-n:empty { display: none; }
.vwsh-searchall { margin-left: auto; height: 42px; padding: 0 16px; box-sizing: border-box; border-radius: 12px;
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(var(--accent-rgb, 29, 185, 84), 0.4); color: #fff;
    background: rgba(var(--accent-rgb, 29, 185, 84), 0.14); transition: all 0.15s ease; }
.vwsh-searchall:hover { background: rgba(var(--accent-rgb, 29, 185, 84), 0.3);
    border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.7); }
.vwsh-searchall:disabled { opacity: 0.5; cursor: default; }
.vwsh-searchall[hidden] { display: none; }
.vwsh-searchall + .vwsh-clear { margin-left: 0; }

.vwsh-rm { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.6); font-size: 17px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.vwsh-rm:hover { background: rgba(248, 113, 113, 0.85); border-color: transparent; color: #fff; }
.vwsh-rm:disabled { opacity: 0.4; cursor: default; }
.vwsh-movie-art .vwsh-rm { position: absolute; top: 8px; right: 8px; z-index: 3; opacity: 0; }
.vwsh-movie:hover .vwsh-movie-art .vwsh-rm { opacity: 1; }
.vwsh-season-head .vwsh-rm, .vwsh-ep .vwsh-rm { width: 24px; height: 24px; font-size: 15px; }
.vwsh-season-head .vwsh-rm { margin-left: 10px; }
@media (hover: none) { .vwsh-movie-art .vwsh-rm { opacity: 1; } }
@media (max-width: 900px) {
    .vwsh-head, .vwsh-toolbar, .vwsh-body { padding-left: 18px; padding-right: 18px; }
    .vwsh-grid--movies { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 14px; }
}

/* ══ YouTube channels (search chip · wishlist channel blocks · watchlist cards) ══
   Scoped .vyt-* — never touches music wl-* or the TMDB vwsh-* nebula. */
.vyt-avatar--ph { display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ff3b3b, #b3122a); color: #fff; font-weight: 800; }

/* ── Search page: the pasted-channel Follow chip ─────────────────────────── */
.vyt-search { margin-top: 4px; }
.vyt-chip { border-radius: 16px; border: 1px solid rgba(255, 59, 59, 0.28);
    background: linear-gradient(180deg, rgba(255, 59, 59, 0.07), rgba(255, 255, 255, 0.02));
    padding: 16px 18px; max-width: 720px; }
.vyt-chip-head { display: flex; align-items: center; gap: 15px; }
.vyt-chip-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    font-size: 20px; border: 2px solid rgba(255, 59, 59, 0.5); }
.vyt-chip-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vyt-chip-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #ff6b6b; }
.vyt-chip-title { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vyt-chip-sub { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.vyt-follow { flex-shrink: 0; border: 0; cursor: pointer; border-radius: 999px; padding: 10px 20px;
    font-size: 13px; font-weight: 800; background: #ff3b3b; color: #fff; transition: all 0.15s ease;
    box-shadow: 0 6px 18px rgba(255, 59, 59, 0.35); }
.vyt-follow:hover { transform: translateY(-1px); background: #ff5252; }
.vyt-follow:disabled { opacity: 0.6; cursor: default; }
.vyt-follow--on { background: rgba(255, 255, 255, 0.1); color: #6cd391; box-shadow: none; }
.vyt-strip { display: flex; gap: 7px; margin-top: 14px; overflow: hidden; }
.vyt-strip-cell { flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden;
    background: #16161d; }
.vyt-strip-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyt-miss { padding: 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.vyt-miss code { background: rgba(255, 255, 255, 0.08); padding: 2px 7px; border-radius: 6px; color: #fff; }

/* ── Wishlist YouTube tab: channel block = header + flat video feed ───────── */
.vyt-field { display: flex; flex-direction: column; gap: 16px; }
.vyt-chan { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.vyt-chan-hd { display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer;
    transition: background 0.15s ease; }
.vyt-chan-hd:hover { background: rgba(255, 59, 59, 0.06); }
.vyt-chan-avatar { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    font-size: 16px; border: 2px solid rgba(255, 59, 59, 0.45); }
.vyt-chan-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vyt-chan-title { font-size: 15.5px; font-weight: 800; color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vyt-chan-sub { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.42); }
.vyt-chan-link { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: #ff6b6b; text-decoration: none;
    padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 59, 59, 0.3); }
.vyt-chan-link:hover { background: rgba(255, 59, 59, 0.12); }
.vyt-chan-unfollow { flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer;
    background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.6); font-size: 11.5px; font-weight: 700;
    padding: 6px 13px; border-radius: 999px; transition: all 0.15s ease; }
.vyt-chan-unfollow:hover { background: rgba(239, 68, 68, 0.85); color: #fff; border-color: transparent; }
.vyt-chan-chev { flex-shrink: 0; color: rgba(255, 255, 255, 0.35); transition: transform 0.2s ease; }
.vyt-chan--collapsed .vyt-chan-chev { transform: rotate(-90deg); }
.vyt-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
    padding: 4px 16px 18px; }
.vyt-chan--collapsed .vyt-vids { display: none; }
.vyt-vid { border-radius: 11px; overflow: hidden; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06); }
.vyt-vid-thumb { position: relative; aspect-ratio: 16 / 9; background: #16161d; }
.vyt-vid-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyt-vid-thumb--none { background: rgba(255, 255, 255, 0.04); }
.vyt-vid-thumb--none::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 22px; color: rgba(255, 59, 59, 0.4); }
.vyt-vid-rm { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.75); font-size: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.vyt-vid:hover .vyt-vid-rm { opacity: 1; }
.vyt-vid-rm:hover { background: rgba(239, 68, 68, 0.9); color: #fff; }
.vyt-vid-body { padding: 9px 11px 11px; }
.vyt-vid-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.vyt-vid-date { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.4); }

/* ── Watchlist Channels tab: avatar cards ────────────────────────────────── */
.vyt-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.vyt-wcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vyt-wcard-art { display: block; width: 118px; height: 118px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255, 59, 59, 0.4); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.vyt-wcard-art:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(255, 59, 59, 0.35); }
/* Followed-playlist cards: a rounded square (not a circle) + a stacked-list badge */
.vyt-wcard--pl .vyt-wcard-art { position: relative; border-radius: 16px; }
.vyt-wcard-pl-ic { position: absolute; right: 7px; bottom: 7px; z-index: 2;
    width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.74); color: #fff; font-size: 13px; }
.vyt-wcard-avatar { width: 100%; height: 100%; object-fit: cover; font-size: 34px; }
.vyt-wcard-unfollow { position: absolute; top: 4px; right: 50%; margin-right: -59px; width: 26px; height: 26px;
    border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.7);
    font-size: 12px; cursor: pointer; opacity: 0; transition: all 0.15s ease; }
.vyt-wcard:hover .vyt-wcard-unfollow { opacity: 1; }
.vyt-wcard-unfollow:hover { background: rgba(239, 68, 68, 0.9); color: #fff; }
/* settings cog: mirror of the unfollow ✕, top-left of the avatar, hover-revealed */
.vyt-wcard-cog { position: absolute; top: 4px; left: 50%; margin-left: -59px; width: 26px; height: 26px;
    border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.7);
    font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: all 0.15s ease; }
.vyt-wcard:hover .vyt-wcard-cog { opacity: 1; }
.vyt-wcard-cog:hover { background: rgba(255, 59, 59, 0.85); color: #fff; }

/* per-channel settings modal */
.vyt-cset-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
    justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); }
.vyt-cset { width: min(440px, 92vw); max-height: 88vh; overflow: auto; background: #16181d;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.vyt-cset-head { display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vyt-cset-h { font-size: 15px; font-weight: 800; color: #fff; }
.vyt-cset-x { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 15px; cursor: pointer; }
.vyt-cset-x:hover { color: #fff; }
.vyt-cset-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.vyt-cset-lbl { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.vyt-cset-in { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 13.5px; box-sizing: border-box; }
.vyt-cset-hint { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); line-height: 1.45; }
.vyt-cset-hint code { background: rgba(255, 255, 255, 0.08); padding: 1px 4px; border-radius: 4px; }
.vyt-cset-toggle { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px;
    font-weight: 700; color: #fff; cursor: pointer; }
.vyt-cset-q { display: flex; flex-direction: column; gap: 9px; padding: 12px; margin-top: 2px;
    border-radius: 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.vyt-cset-q[hidden] { display: none; }
.vyt-cset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.vyt-cset-row select { padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1f2229; color: #fff; font-size: 13px; }
.vyt-cset-ck { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85); cursor: pointer; }
.vyt-cset-foot { padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: flex-end; }
.vyt-cset-save { padding: 9px 22px; border-radius: 10px; border: none; background: #ff3b3b; color: #fff;
    font-size: 13.5px; font-weight: 800; cursor: pointer; }
.vyt-cset-save:disabled { opacity: 0.5; cursor: default; }
.vyt-cset-save:hover:not(:disabled) { background: #ff5252; }
.vyt-wcard-info { margin-top: 11px; display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.vyt-wcard-title { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vyt-wcard-meta { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.42); }

/* ══ YouTube channel detail page (.vc-*) — opens like a show/movie ════════════ */
.vc-page { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 30px 60px; }
.vc-banner { position: absolute; top: 0; left: 0; right: 0; height: 260px; z-index: 0;
    background-size: cover; background-position: center; }
.vc-banner::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,14,0.35), rgba(10,10,14,0.85) 70%, var(--bg, #0b0b0f)); }
.vc-page[data-has-banner="0"] .vc-banner {
    background: radial-gradient(120% 150% at 20% 0%, rgba(255,59,59,0.22), transparent 60%); }
.vc-page .vd-back { position: relative; z-index: 2; margin: 18px 0 0; }
.vc-hero { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 26px;
    padding-top: 120px; }
.vc-avatar-wrap { flex-shrink: 0; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
    border: 4px solid rgba(255,59,59,0.55); box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; background: #16161d; }
.vc-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-avatar-ph { font-size: 46px; color: rgba(255,59,59,0.7); }
.vc-hero-info { flex: 1; min-width: 0; padding-bottom: 6px; }
.vc-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ff6b6b; }
.vc-name { font-size: 40px; font-weight: 900; letter-spacing: -0.02em; color: #fff; margin: 6px 0 0; line-height: 1.05; }
.vc-meta { margin-top: 9px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.62); }
.vc-meta .vc-dot { margin: 0 8px; opacity: 0.5; }
.vc-desc { margin: 14px 0 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.62);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.vc-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.vc-follow { border: 0; cursor: pointer; border-radius: 999px; padding: 11px 24px; font-size: 13.5px; font-weight: 800;
    background: #ff3b3b; color: #fff; box-shadow: 0 8px 22px rgba(255,59,59,0.4); transition: all 0.15s ease; }
.vc-follow:hover { transform: translateY(-1px); background: #ff5252; }
.vc-follow:disabled { opacity: 0.6; cursor: default; }
.vc-follow--on { background: rgba(255,255,255,0.1); color: #6cd391; box-shadow: none; }
.vc-yt-link { font-size: 13px; font-weight: 800; color: #ff6b6b; text-decoration: none; padding: 10px 16px;
    border-radius: 999px; border: 1px solid rgba(255,59,59,0.35); }
.vc-yt-link:hover { background: rgba(255,59,59,0.12); }

.vc-body { position: relative; z-index: 1; margin-top: 40px; }
.vc-videos-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.vc-videos-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; }
.vc-videos-count { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.4); }
.vc-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 20px 16px; }
.vc-vid { display: flex; flex-direction: column; }
.vc-vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    background: #16161d; border: 1px solid rgba(255,255,255,0.07); }
.vc-vid-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.vc-vid-thumb:hover .vc-vid-img { transform: scale(1.05); }
.vc-vid-thumb--none { background: rgba(255,255,255,0.04); }
.vc-vid-thumb--none .vc-vid-img { display: none; }
.vc-vid-thumb--none::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 26px; color: rgba(255,59,59,0.4); }
.vc-vid-dur { position: absolute; right: 7px; bottom: 7px; background: rgba(0,0,0,0.82); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.vc-vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff; opacity: 0; transition: opacity 0.2s ease; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.vc-vid-thumb:hover .vc-vid-play { opacity: 0.92; }
.vc-vid-body { margin-top: 9px; flex: 1; }
.vc-vid-title { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-vid-meta { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.42); }
.vc-wish { margin-top: 9px; align-self: flex-start; border: 1px solid rgba(255,255,255,0.14); cursor: pointer;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.78); font-size: 12px; font-weight: 800;
    padding: 7px 14px; border-radius: 999px; transition: all 0.15s ease; }
.vc-wish:hover { background: rgba(255,59,59,0.18); border-color: rgba(255,59,59,0.5); color: #fff; }
.vc-wish:disabled { opacity: 0.6; cursor: default; }
.vc-wish--on { background: rgba(108,211,145,0.16); border-color: rgba(108,211,145,0.4); color: #6cd391; }
.vc-empty { padding: 40px; text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; }
@media (max-width: 720px) {
    .vc-page { padding: 0 16px 50px; }
    .vc-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 90px; }
    .vc-name { font-size: 28px; }
}

/* "Watch on YouTube" link inside the wishlist info-bar synopsis (YouTube videos) */
.vwsh-nebula .vwsh-yt-watch { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800;
    color: #ff6b6b; text-decoration: none; padding: 6px 13px; border-radius: 999px;
    border: 1px solid rgba(255, 59, 59, 0.35); transition: all 0.15s ease; }
.vwsh-nebula .vwsh-yt-watch:hover { background: rgba(255, 59, 59, 0.14); color: #fff; }

/* ── channel page: tags ribbon, toolbar, load-more, inline detail, playlists ── */
.vc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.vc-tag { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 999px; }

.vc-section-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 16px; }
.vc-pl-section { margin-bottom: 40px; }
.vc-videos-head { display: flex; align-items: baseline; gap: 12px; }
.vc-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vc-tool-btn { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.vc-tool-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.vc-tool-btn--on { background: rgba(108,211,145,0.16); border-color: rgba(108,211,145,0.4); color: #6cd391; }
.vc-sort { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff;
    font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 9px; cursor: pointer; }
.vc-more { display: block; margin: 22px auto 0; border: 1px solid rgba(255,59,59,0.35); background: rgba(255,59,59,0.08);
    color: #ff6b6b; font-size: 13px; font-weight: 800; padding: 11px 28px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.vc-more:hover { background: rgba(255,59,59,0.16); color: #fff; }

/* clickable card body → inline detail panel */
.vc-vid-body { margin-top: 9px; flex: 1; cursor: pointer; }
.vc-vid-body:hover .vc-vid-title { color: #ff6b6b; }
.vc-vid-detail { margin-top: 8px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07); }
.vc-vid-detail-load { font-size: 12px; color: rgba(255,255,255,0.5); }
.vc-vid-stats { font-size: 11.5px; font-weight: 700; color: #ff8a8a; margin-bottom: 6px; }
.vc-vid-desc { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.62); white-space: pre-line;
    max-height: 220px; overflow-y: auto; scrollbar-width: thin; }

/* playlists as collapsible "seasons" */
.vc-playlists { display: flex; flex-direction: column; gap: 10px; }
.vc-pl { border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); overflow: hidden; }
.vc-pl-hd { display: flex; align-items: center; gap: 13px; padding: 10px 14px; cursor: pointer; transition: background 0.15s ease; }
.vc-pl-hd:hover { background: rgba(255,59,59,0.06); }
.vc-pl-thumb { flex-shrink: 0; width: 64px; height: 36px; border-radius: 6px; object-fit: cover; background: #16161d;
    display: flex; align-items: center; justify-content: center; color: rgba(255,59,59,0.5); font-size: 14px; }
.vc-pl-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-pl-title { font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-pl-count { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.42); }
.vc-pl-chev { flex-shrink: 0; color: rgba(255,255,255,0.35); transition: transform 0.2s ease; }
/* Compact watchlist button on each playlist row (the standard button, shrunk) */
.vc-pl-watch { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; }
.vc-pl-watch .watchlist-icon { font-size: 13px; }
.vc-pl--collapsed .vc-pl-chev { transform: rotate(-90deg); }
.vc-pl-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 6px 14px 16px; }
.vc-pl--collapsed .vc-pl-vids { display: none; }
.vc-pl-loading { padding: 14px; color: rgba(255,255,255,0.5); font-size: 13px; }

/* (YouTube channel search cards now reuse .vsr-card/.vsr-card--yt — see above) */

/* ── YouTube channel rendered through the SHOW detail page (.vd-yt-*) ───────── */
.vd-status--yt { background: rgba(255,59,59,0.18); color: #ff8a8a; }
.vd-yt-follow { border: 0; cursor: pointer; border-radius: 999px; padding: 11px 24px; font-size: 13.5px; font-weight: 800;
    background: #ff3b3b; color: #fff; box-shadow: 0 8px 22px rgba(255,59,59,0.4); transition: all 0.15s ease; }
.vd-yt-follow:hover { transform: translateY(-1px); background: #ff5252; }
.vd-yt-follow--on { background: rgba(255,255,255,0.12); color: #6cd391; box-shadow: none; }
.vd-yt-link { display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; color: #ff6b6b;
    text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,59,59,0.35); }
.vd-yt-link:hover { background: rgba(255,59,59,0.12); }
.vd-section-h { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 16px; }
.vd-yt-pl-section { margin-top: 34px; }
/* YouTube episode rows have no index/badge → 4 columns (thumb · info · wish · chev) */
.vd-ep--yt { grid-template-columns: 150px 1fr auto auto; }
/* per-video Wish button inside an episode row */
/* Per-video wishlist toggle = the standard watchlist button (.library-artist-
   watchlist-btn), shrunk for the dense rows; .watching → "on the wishlist" green. */
.vd-yt-wishbtn { flex-shrink: 0; align-self: center; padding: 5px 12px; font-size: 11.5px; white-space: nowrap; }
.vd-yt-wishbtn--icon { padding: 5px 9px; }
.vd-yt-wishbtn.watching { color: #6cd391;
    background: linear-gradient(135deg, rgba(108,211,145,0.2) 0%, rgba(108,211,145,0.07) 100%);
    border-color: rgba(108,211,145,0.4); }
.vd-yt-wishbtn.watching:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(108,211,145,0.3) 0%, rgba(108,211,145,0.12) 100%);
    box-shadow: 0 4px 16px rgba(108,211,145,0.2); }
/* playlist video chips */
.vd-yt-plvid { display: flex; flex-direction: column; }
.vd-yt-plvid-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #16161d; }
.vd-yt-plvid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-yt-plvid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; opacity: 0; transition: opacity 0.2s ease; }
.vd-yt-plvid-thumb:hover .vd-yt-plvid-play { opacity: 0.9; }
.vd-yt-plvid-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; margin-top: 7px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-yt-plvid .vd-yt-wishbtn { align-self: flex-start; margin-top: 7px; }

/* YouTube search-results loading state (skeleton cards + "searching…" label) */
.vsr-yt-loading { margin-left: 10px; font-size: 12px; font-weight: 600; color: #ff8a8a; opacity: 0.85; }
.vsr-yt-loading::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 7px;
    vertical-align: -1px; border: 2px solid rgba(255,107,107,0.35); border-top-color: #ff6b6b; border-radius: 50%;
    animation: vytSpin 0.7s linear infinite; }
@keyframes vytSpin { to { transform: rotate(360deg); } }
.vyt-skel { background: linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 70%);
    background-size: 200% 100%; animation: vytShimmer 1.3s ease-in-out infinite; }
@keyframes vytShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.vyt-skel-line { height: 11px; border-radius: 5px; width: 78px; }
.vyt-skel-line--sm { height: 9px; width: 52px; }
@media (prefers-reduced-motion: reduce) { .vyt-skel, .vsr-yt-loading::after { animation: none; } }

/* YouTube Dates worker — simple panel in the Manage Workers modal (no match queue) */
.vem-yt-about { margin: 4px 2px 20px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.vem-yt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vem-yt-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
    padding: 18px 14px; text-align: center; }
.vem-yt-num { display: block; font-size: 28px; font-weight: 900; color: #fff; line-height: 1; }
.vem-yt-lbl { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.45); }

/* =========================================================================
   Video Quality Profile (Settings → Downloads, video side)
   ========================================================================= */
.vq-block { margin: 16px 0; }
.vq-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(255,255,255,0.65); margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.vq-hint { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: rgba(255,255,255,0.4); }
/* Quality ladder rows reuse music's .hybrid-source-item styling (set in the shared
   style.css) for parity with the Download Source list — no custom row CSS. The
   cutoff is a separate loose resolution dropdown (not a per-row marker). */
/* cutoff dropdown */
.vq-select { width: 100%; max-width: 360px; padding: 10px 13px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff;
    font-size: 13.5px; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.15s; }
.vq-select:hover, .vq-select:focus { border-color: rgba(var(--accent-rgb),0.6); }
.vq-select option { background: #14181f; color: #fff; }
/* hard-reject chips (on = blocked) */
.vq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vq-chip { padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6); transition: all 0.15s; }
.vq-chip:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.vq-chip.on { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.55); color: #fecaca; }
.vq-chip.on::before { content: '⊘ '; font-weight: 800; }
/* preference rows (label + segmented control) */
.vq-prefs { display: flex; flex-direction: column; gap: 11px; }
.vq-pref-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vq-pref-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.75);
    min-width: 56px; }
/* codec + hdr row */
.vq-grid { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 16px 0; }
.vq-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 3px; gap: 2px; }
.vq-seg button { padding: 7px 14px; border: none; background: none; border-radius: 7px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.6); transition: all 0.15s; }
.vq-seg button:hover { color: #fff; }
.vq-seg button.active { background: rgb(var(--accent-rgb)); color: #06210f; }
/* custom checkbox (matches the rematch-modal feel) */
.vq-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    color: rgba(255,255,255,0.85); font-size: 13.5px; }
.vq-check input { display: none; }
.vq-check-box { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.2); display: grid; place-items: center; transition: all 0.15s; }
.vq-check input:checked + .vq-check-box { background: rgb(var(--accent-rgb)); border-color: transparent; }
.vq-check input:checked + .vq-check-box::after { content: '✓'; color: #06210f; font-size: 13px; font-weight: 900; }
/* size slider */
.vq-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: rgba(255,255,255,0.12); outline: none; cursor: pointer; }
.vq-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: rgb(var(--accent-rgb)); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.vq-slider::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%;
    background: rgb(var(--accent-rgb)); cursor: pointer; }

/* ── get-modal "Download" action button ───────────────────────────────────── */
.vgm-download-btn { display: inline-flex; align-items: center; gap: 7px; }
.vgm-download-btn .vgm-download-ic { font-size: 15px; font-weight: 900; line-height: 1; }

/* ── in-place download VIEW inside the get-modal (.vgm-dl + .vdl-* content) ─── */
.vgm-actions[hidden] { display: none; }
.vgm-dl[hidden] { display: none; }
.vgm-dl { animation: vgmRise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vgm-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 7px 13px;
    border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85);
    transition: all 0.15s ease; }
.vgm-back:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.vdl-section { margin-bottom: 20px; }
.vdl-section:last-child { margin-bottom: 0; }
.vdl-sec-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }
.vdl-sec-label::before { content: ''; width: 3px; height: 13px; border-radius: 2px;
    background: linear-gradient(rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.35));
    box-shadow: 0 0 9px -1px rgba(var(--accent-rgb), 0.7); }
.vdl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vdl-sec-head .vdl-sec-label { margin-bottom: 0; }
/* target chips */
.vdl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vdl-chip { position: relative; overflow: hidden; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: hsla(var(--vgm-h, 220), 45%, 50%, 0.16); border: 1px solid hsla(var(--vgm-h, 220), 50%, 60%, 0.32);
    color: #fff; animation: vdlPop 0.44s both; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.vdl-chip:hover { transform: translateY(-2px); box-shadow: 0 7px 18px -7px hsla(var(--vgm-h, 220), 65%, 52%, 0.7); }
/* sheen sweep across each chip on entrance */
.vdl-chip::after { content: ''; position: absolute; inset: 0; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
    animation: vdlSheen 0.9s ease 0.25s 1; }
.vdl-chip--ghost { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
.vdl-chip--rej { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.4); color: #fecaca; }
.vdl-chip--req { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: #fde2b3; }
/* owned card + verdict */
.vdl-owned { margin-bottom: 20px; padding: 13px 15px; border-radius: 13px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.vdl-owned[hidden] { display: none; }
.vdl-owned-row { display: flex; align-items: center; gap: 9px; }
.vdl-owned-ic { font-size: 14px; font-weight: 900; color: #6cd391; flex-shrink: 0; }
.vdl-owned-txt { font-size: 13px; color: rgba(255, 255, 255, 0.72); flex: 1; min-width: 0; }
.vdl-owned-txt strong { color: #8fe7af; font-weight: 800; }
.vdl-verdict { flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.02em; }
.vdl-verdict--pending { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5);
    animation: vdlBreathe 1.3s ease-in-out infinite; }
.vdl-verdict--ok { background: rgba(108, 211, 145, 0.18); color: #8fe7af;
    animation: vdlBadge 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.vdl-verdict--up { background: rgba(245, 158, 11, 0.18); color: #fbcd7a;
    animation: vdlBadge 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, vdlUpGlow 2.4s ease-in-out 0.6s infinite; }
.vdl-reasons { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.vdl-reasons:empty { display: none; }
.vdl-reason { font-size: 12px; font-weight: 600; }
.vdl-reason--ok { color: rgba(143, 231, 175, 0.85); }
.vdl-reason--no { color: rgba(251, 205, 122, 0.92); }
/* ── sources: FLAT / BRUTALIST ────────────────────────────────────────────
   Sharp corners, hard 1px borders, flat colour, monospace, UPPERCASE. No
   gradients, no glow, no rounded pills. Tool-like and confident.
   Shared mono stack: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace */
.vdl-search-all { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 0; cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); background: transparent; border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.12s, color 0.12s, border-color 0.12s; }
.vdl-search-all:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.vdl-search-all:disabled { opacity: 0.4; cursor: default; }
/* Auto all = the one filled action — flat solid accent, inverts on hover */
.vdl-auto-all { color: #08111f; background: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); }
.vdl-auto-all:hover { color: rgb(var(--accent-rgb)); background: transparent; border-color: rgb(var(--accent-rgb)); }

.vdl-sources { display: flex; flex-direction: column; gap: 7px; }
/* a source = a flat sharp row with a hard brand left-bar; hover does a hard
   2px shift + brand border (no lift, no shadow, no gradient). */
.vdl-src { --src: 130 130 150; position: relative; display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid rgb(var(--src)); background: rgba(255, 255, 255, 0.018);
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.vdl-src[data-vdl-src="soulseek"] { --src: 74 163 255; }
.vdl-src[data-vdl-src="torrent"] { --src: 245 158 11; }
.vdl-src[data-vdl-src="usenet"] { --src: 168 85 247; }
.vdl-src[data-vdl-src="youtube"] { --src: 255 64 64; }
.vdl-src:hover { transform: translateX(2px); border-color: rgba(var(--src), 0.55);
    border-left-color: rgb(var(--src)); background: rgba(var(--src), 0.06); }
/* brand icon tile — flat sharp square, hard brand border */
.vdl-src-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 0; display: grid; place-items: center;
    background: rgba(var(--src), 0.16); border: 1px solid rgba(var(--src), 0.5); }
.vdl-src-emoji { font-size: 17px; line-height: 1; }
.vdl-src-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.vdl-src-name { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.07em; }
.vdl-src-meta { display: inline-flex; align-items: center; }
/* status = flat sharp mono chip with a hard square dot (no glow) */
.vdl-src-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 0;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.13); white-space: nowrap; }
.vdl-src-status::before { content: ''; width: 6px; height: 6px; border-radius: 0; background: rgb(var(--src));
    animation: vdlDot 2.2s ease-in-out infinite; }
.vdl-src--scanning .vdl-src-status::before { animation-duration: 0.7s; }
.vdl-src-status--soon { color: #fbcd7a; border-color: rgba(245, 158, 11, 0.4); }
.vdl-src-status--scanning { color: rgb(var(--src)); border-color: rgba(var(--src), 0.5); }
.vdl-src-status--scanning::after { content: ''; animation: vdlDots 1.1s steps(1) infinite; }
.vdl-src-status--done { color: #6cd391; border-color: rgba(108, 211, 145, 0.5); }
.vdl-src-status--done::before { background: #6cd391; animation: none; }
.vdl-src-status--none { color: #fbcd7a; border-color: rgba(245, 158, 11, 0.5); }
.vdl-src-status--none::before { background: #fbcd7a; animation: none; }
.vdl-src-dot { display: none; }
/* hard brand scan bar along the bottom while "searching" — flat, no glow */
.vdl-src--scanning::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 38%;
    background: rgb(var(--src)); animation: vdlScan 0.9s ease-in-out infinite; }

/* the two per-source actions = a SEGMENTED pair (shared seam): MANUAL ghost
   outline, AUTO flat solid brand. Sharp, mono, UPPERCASE; AUTO inverts on hover. */
.vdl-src-actions { flex-shrink: 0; display: inline-flex; align-items: stretch; }
.vdl-src-search, .vdl-src-auto { padding: 7px 14px; border-radius: 0; cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid;
    transition: background 0.12s, color 0.12s, border-color 0.12s; }
.vdl-src-search { background: transparent; color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.24); border-right-width: 0; }
.vdl-src-search:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.vdl-src-search:disabled { opacity: 0.4; cursor: default; }
.vdl-src-auto { background: rgb(var(--src)); color: #08111f; border-color: rgb(var(--src)); }
.vdl-src-auto:hover { background: transparent; color: rgb(var(--src)); }
.vdl-src-auto:disabled { opacity: 0.4; cursor: default; }
.vdl-src-empty { font-size: 13px; color: rgba(255, 255, 255, 0.5); padding: 12px 14px; border-radius: 0;
    background: transparent; border: 1px dashed rgba(255, 255, 255, 0.16); }
/* (the Auto-pick highlight now lives with the brutalist result cards — .vdl-res--auto
   below — so the chosen card is ringed with a hard offset shadow in place.) */
@media (max-width: 560px) {
    .vdl-src { flex-wrap: wrap; }
    .vdl-src .vdl-src-actions { width: 100%; }
    .vdl-src .vdl-src-search, .vdl-src .vdl-src-auto { flex: 1; justify-content: center; }
}

/* ── download-view vibe: staggered entrance + life ────────────────────────── */
/* the view's blocks rise in sequence */
.vgm-dl-content > * { animation: vdlRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vgm-dl-content > *:nth-child(1) { animation-delay: 0.04s; }
.vgm-dl-content > *:nth-child(2) { animation-delay: 0.12s; }
.vgm-dl-content > *:nth-child(3) { animation-delay: 0.20s; }
.vgm-dl-content > *:nth-child(4) { animation-delay: 0.28s; }
/* chips + source rows cascade within their section */
.vdl-chip:nth-child(1) { animation-delay: 0.10s; }
.vdl-chip:nth-child(2) { animation-delay: 0.16s; }
.vdl-chip:nth-child(3) { animation-delay: 0.22s; }
.vdl-chip:nth-child(4) { animation-delay: 0.28s; }
.vdl-chip:nth-child(5) { animation-delay: 0.34s; }
.vdl-chip:nth-child(6) { animation-delay: 0.40s; }
.vdl-chip:nth-child(7) { animation-delay: 0.46s; }
.vdl-src:nth-child(1) { animation-delay: 0.14s; }
.vdl-src:nth-child(2) { animation-delay: 0.22s; }
.vdl-src:nth-child(3) { animation-delay: 0.30s; }
.vdl-reason { animation: vdlRise 0.4s ease both; }

@keyframes vdlRise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@keyframes vdlSlide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes vdlPop {
    0% { opacity: 0; transform: scale(0.78) translateY(4px); }
    62% { opacity: 1; transform: scale(1.06); }
    100% { transform: none; } }
@keyframes vdlBadge {
    0% { opacity: 0; transform: scale(0.5); }
    65% { opacity: 1; transform: scale(1.14); }
    100% { transform: none; } }
@keyframes vdlSheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes vdlPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.0); }
    50% { box-shadow: 0 0 16px -2px rgba(var(--accent-rgb), 0.55); } }
@keyframes vdlUpGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
    50% { box-shadow: 0 0 14px -2px rgba(245, 158, 11, 0.6); } }
@keyframes vdlBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* the hero Auto button's soft, continuous brand glow (--glow set per element) */
@keyframes vdlAutoGlow {
    0%, 100% { box-shadow: 0 6px 18px -7px rgba(var(--glow), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
    50% { box-shadow: 0 7px 23px -5px rgba(var(--glow), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3); } }
/* the sparkle icon gives a tiny twinkle on hover */
@keyframes vdlSparkle {
    0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.35) rotate(18deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); } }
@keyframes vdlScan {
    0% { left: -38%; } 100% { left: 100%; } }
@keyframes vdlDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--src), 0.55); }
    50% { box-shadow: 0 0 0 5px rgba(var(--src), 0); } }
@keyframes vdlDots {
    0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }

/* respect reduced-motion: keep the layout, drop the motion */
@media (prefers-reduced-motion: reduce) {
    .vgm-dl, .vgm-dl-content > *, .vdl-chip, .vdl-src, .vdl-reason, .vdl-src-status::before,
    .vdl-verdict--ok, .vdl-verdict--up, .vdl-verdict--pending,
    .vdl-search-all, .vdl-auto-all, .vdl-src-auto { animation: none !important; }
    .vdl-chip::after, .vdl-auto-all::after, .vdl-src-auto::after, .vdl-src--scanning::after { display: none; }
}

/* ── TV show download view: season/episode picker ─────────────────────────── */
.vdl-show-bar { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin: 2px 0 16px;
    padding: 11px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08); animation: vdlRise 0.45s both; }
.vdl-allchk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px;
    font-weight: 800; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.vdl-show-summary { flex: 1; min-width: 120px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.vdl-search-sel:disabled { animation: none; opacity: 0.45; cursor: default; box-shadow: none; }
.vdl-seasons input[type="checkbox"], .vdl-show-bar input[type="checkbox"] {
    accent-color: rgb(var(--accent-rgb)); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin: 0; }

.vdl-seasons { display: flex; flex-direction: column; gap: 9px; }
.vdl-season { border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025); overflow: hidden; animation: vdlSlide 0.42s both; }
.vdl-season:hover { border-color: rgba(255, 255, 255, 0.14); }
.vdl-season-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer;
    transition: background 0.15s ease; }
.vdl-season-head:hover { background: rgba(255, 255, 255, 0.04); }
.vdl-season-name { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.vdl-season-meta { flex: 1; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.vdl-season-search { flex-shrink: 0; width: 32px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px;
    background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.35); color: #fff;
    transition: all 0.15s ease; }
.vdl-season-search:hover { background: rgba(var(--accent-rgb), 0.3); border-color: rgba(var(--accent-rgb), 0.6);
    transform: translateY(-1px); }
.vdl-season-grab { flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700;
    background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.4); color: #fff;
    white-space: nowrap; transition: all 0.15s ease; }
.vdl-season-grab:hover { background: rgba(var(--accent-rgb), 0.32); border-color: rgba(var(--accent-rgb), 0.65); transform: translateY(-1px); }
.vdl-season-grab:disabled { opacity: 0.7; cursor: progress; transform: none; }
.vdl-season-chev { flex-shrink: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); transition: transform 0.25s ease; }
.vdl-season--open .vdl-season-chev { transform: rotate(180deg); }
.vdl-season-body { max-height: 0; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vdl-season--open .vdl-season-body { max-height: 5000px; }
.vdl-season-empty { padding: 12px 16px; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); }

.vdl-ep { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.vdl-ep-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 16px; cursor: pointer;
    transition: background 0.14s ease; }
.vdl-ep-head:hover { background: rgba(255, 255, 255, 0.035); }
.vdl-ep--owned { opacity: 0.62; }
.vdl-ep--owned:hover { opacity: 0.85; }
.vdl-ep-cell { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.vdl-ep-lock { color: rgba(255, 255, 255, 0.3); font-size: 13px; }
.vdl-ep-num { flex-shrink: 0; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.5); min-width: 26px; }
.vdl-ep-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdl-ep-status { flex-shrink: 0; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.vdl-ep-status:empty { display: none; }
/* live per-episode download status (Searching → Downloading % → Downloaded / Failed) */
.vdl-ep-dl { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vdl-ep-dl--active { color: hsl(var(--vgm-h, 220), 85%, 74%); }
.vdl-ep-dl--done { color: #6cd391; }
.vdl-ep-dl--fail { color: #f0a830; }
.vdl-ep-dl--none { color: rgba(255, 255, 255, 0.4); font-weight: 600; }
.vdl-ep-dl-bar { width: 54px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.vdl-ep-dl-bar > span { display: block; height: 100%; border-radius: 999px; background: hsl(var(--vgm-h, 220), 85%, 64%); transition: width 0.5s ease; }
.vdl-ep-dl-spin { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.22); border-top-color: hsl(var(--vgm-h, 220), 85%, 72%); animation: vdlSpin 0.7s linear infinite; }
/* row-level tint while a download is in flight / done / failed */
.vdl-ep--dl-active { background: hsla(var(--vgm-h, 220), 60%, 55%, 0.06); }
.vdl-ep--dl-done .vdl-ep-badge--missing { display: none; }
.vdl-ep--dl-active .vdl-ep-badge--missing { display: none; }
.vdl-ep--dl-fail .vdl-ep-badge--missing { display: none; }
.vdl-ep-status--scanning { color: hsl(var(--vgm-h, 220), 80%, 72%); }
.vdl-ep-status--scanning::after { content: ''; animation: vdlDots 1.1s steps(1) infinite; }
.vdl-ep-status--soon { color: #fbcd7a; }
.vdl-ep-badge { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; padding: 2px 8px;
    border-radius: 999px; text-transform: uppercase; }
.vdl-ep-badge--owned { background: rgba(108, 211, 145, 0.16); color: #8fe7af; }
.vdl-ep-badge--missing { background: hsla(var(--vgm-h, 220), 50%, 55%, 0.2); color: #fff; }
.vdl-ep-badge--soon { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }
.vdl-ep-chev { flex-shrink: 0; font-size: 12px; color: rgba(255, 255, 255, 0.38); transition: transform 0.22s ease; }
.vdl-ep--open .vdl-ep-chev { transform: rotate(180deg); }
.vdl-ep--scanning::before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 36%;
    border-radius: 2px; background: linear-gradient(90deg, transparent, hsl(var(--vgm-h, 220), 85%, 62%), transparent);
    box-shadow: 0 0 9px 1px hsla(var(--vgm-h, 220), 85%, 62%, 0.7); animation: vdlScan 0.9s ease-in-out infinite; }
/* inline per-episode source search */
.vdl-ep-search { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vdl-ep--open .vdl-ep-search { max-height: 360px; }
.vdl-ep-srcs { display: flex; flex-direction: column; gap: 7px; padding: 3px 14px 12px 42px; }
.vdl-src--mini { padding: 8px 11px; border-radius: 0; animation: none; }
.vdl-src--mini .vdl-src-icon { width: 30px; height: 30px; border-radius: 0; }
.vdl-src--mini .vdl-src-emoji { font-size: 15px; }
.vdl-src--mini .vdl-src-name { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .vdl-show-bar, .vdl-season, .vdl-ep--scanning::before { animation: none !important; }
}

/* ── search results (movie/episode/season/series) ─────────────────────────── */
.vdl-results { margin-top: 12px; }
.vdl-results[hidden] { display: none; }
.vdl-results--season { margin: 2px 14px 12px 14px; }
.vdl-ep--open .vdl-ep-search { max-height: 2400px; }   /* room for result cards */
.vdl-res-loading { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600;
    color: rgba(255, 255, 255, 0.6); padding: 9px 2px; }
.vdl-res-spin { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: rgb(var(--accent-rgb)); animation: vdlSpin 0.7s linear infinite; }
.vdl-res-spin--sm { width: 10px; height: 10px; border-width: 1.5px; }
@keyframes vdlSpin { to { transform: rotate(360deg); } }
/* while live results are still streaming in, don't replay each card's entrance */
.vdl-res-noanim .vdl-res { animation: none; }
.vdl-res-searching { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; color: rgb(var(--accent-rgb)); }
.vdl-res-empty { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); padding: 9px 2px; }
.vdl-res-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
    color: rgba(255, 255, 255, 0.5); margin: 4px 0 10px; }
.vdl-res-head strong { color: #fff; }
.vdl-res-okn { color: #8fe7af; }
.vdl-res-live, .vdl-res-demo { margin-left: auto; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em; }
.vdl-res-live { background: rgba(108, 211, 145, 0.16); color: #8fe7af; }
.vdl-res-demo { background: rgba(245, 158, 11, 0.14); color: #fbcd7a; }
.vdl-res-err { color: #fbcd7a; }

/* ── result cards: FLAT / BRUTALIST ──────────────────────────────────────────
   3 hard lines per card: [QUALITY] + release name · UPPERCASE dot-separated spec
   · verdict + a [ GET ] button. Monospace, sharp corners, hard borders, flat
   colour. .vdl-res stays a column so the live tracker docks under it on grab. */
.vdl-res { position: relative; display: flex; flex-direction: column; border-radius: 0;
    margin-bottom: 7px; background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.vdl-res-main { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; }
.vdl-res:hover { transform: translateX(2px); border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(255, 255, 255, 0.04); }
.vdl-res--rejected { opacity: 0.42; }
.vdl-res--rejected:hover { opacity: 0.8; }
/* accepted releases get a hard accent left-bar; grabbed/auto pick gets a hard offset shadow */
.vdl-res--ok { border-left: 3px solid rgb(var(--accent-rgb)); }
.vdl-res--grabbed { border-color: rgb(var(--accent-rgb)); }
.vdl-res--auto { border-color: rgb(var(--accent-rgb)) !important;
    box-shadow: 4px 4px 0 0 rgba(var(--accent-rgb), 0.55); }
/* line 1 — bracketed quality block + release name */
.vdl-r-l1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vdl-r-q { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 8px;
    border-radius: 0; color: #08111f; }
.vdl-r-q--4k { background: #f0a830; }
.vdl-r-q--1080 { background: rgb(var(--accent-rgb)); }
.vdl-r-q--720 { background: #7fa8e8; color: #0a1020; }
.vdl-r-q--sd { background: rgba(255, 255, 255, 0.45); color: #11141a; }
.vdl-r-title { font-size: 12.5px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* line 2 — UPPERCASE dot-separated spec line */
.vdl-r-l2 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* line 3 — verdict (left) + GET (right) */
.vdl-r-l3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vdl-r-verdict { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdl-r-verdict--ok { color: #6cd391; }
.vdl-r-verdict--no { color: #e8a23a; }
/* GET — the one filled action: flat solid accent, inverts on hover */
.vdl-res-grab { flex-shrink: 0; padding: 6px 16px; border-radius: 0; cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #08111f;
    background: rgb(var(--accent-rgb)); border: 1px solid rgb(var(--accent-rgb));
    transition: background 0.12s, color 0.12s; }
.vdl-res-grab:hover { background: transparent; color: rgb(var(--accent-rgb)); }
.vdl-res-grab--busy { opacity: 0.6; cursor: progress; }
.vdl-btn--busy { opacity: 0.7; cursor: progress; }
@media (max-width: 520px) {
    .vdl-r-l1 { flex-wrap: wrap; }
}

/* live download tracker docked under the grabbed card */
.vdl-res-track { padding: 10px 13px 12px; border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.vdl-res-track-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vdl-res-track-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.vdl-res-track-pct { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.vdl-res-track-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 0;
    cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.24); transition: background 0.12s, color 0.12s, border-color 0.12s; }
.vdl-res-track-go:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.vdl-res-track-bar { height: 5px; border-radius: 0; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vdl-res-track-fill { display: block; height: 100%; width: 0; border-radius: 0;
    background: rgb(var(--accent-rgb)); transition: width 0.5s ease; }
.vdl-res-track--done .vdl-res-track-fill { background: #6cd391; }
.vdl-res-track--fail .vdl-res-track-fill { background: #f0a830; }
.vdl-res-track--done .vdl-res-track-state { color: #8fe7af; }
.vdl-res-track--fail .vdl-res-track-state { color: #fbcd7a; }
.vdl-res-track-spin { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: vdlSpin 0.7s linear infinite; }

/* persistent "this title is downloading" banner at the top of the modal — shown
   even after closing + reopening (looks the download up by media identity). */
.vdl-active { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.1);
    animation: vdlRise 0.4s both; }
.vdl-active[hidden] { display: none; }
.vdl-active--active { animation: vdlRise 0.4s both, vdlChipGlow 2.6s ease-in-out 0.5s infinite; }
.vdl-active--done { border-color: rgba(108, 211, 145, 0.5); background: rgba(108, 211, 145, 0.12); }
.vdl-active--fail { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); }
.vdl-active-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.16));
    transition: width 0.5s ease; z-index: 0; }
.vdl-active--done .vdl-active-fill { background: linear-gradient(90deg, rgba(108, 211, 145, 0.34), rgba(108, 211, 145, 0.18)); }
.vdl-active--fail .vdl-active-fill { background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.16)); }
.vdl-active-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.vdl-active-ic { flex-shrink: 0; font-size: 15px; font-weight: 900; color: #fff; }
.vdl-active-txt { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 255, 255, 0.78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdl-active-txt strong { color: #fff; font-weight: 800; }
.vdl-active-rel { color: rgba(255, 255, 255, 0.5); }
.vdl-active-pct { flex-shrink: 0; font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.vdl-active-go { flex-shrink: 0; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9px;
    cursor: pointer; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.15s, transform 0.15s; }
.vdl-active-go:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }

/* per-source block (row + its own results) */
.vdl-src-block { display: flex; flex-direction: column; }
.vdl-src-block .vdl-results { margin: 8px 0 2px; }
@media (prefers-reduced-motion: reduce) {
    .vdl-res, .vdl-res-spin, .vdl-res-track, .vdl-res-track-spin, .vd-dlchip, .vd-dlchip.is-active,
    .vdl-active, .vdl-active--active { animation: none !important; }
}

/* ── Downloads page — reuses the music .adl-* layout; these are the video-only bits ── */
.vdpg-wrap { padding: 4px 0 40px; }
.adl-controls-right { display: flex; align-items: center; gap: 10px; }
/* Phones: the video page adds History + Blocklist to the controls row, which
   pushed Retry Failed / Clear Finished clean off-screen — wrap the row. And the
   fixed-width status column starved the row title down to a few characters:
   let the row wrap so art+title own the first line and status+actions drop to
   a second line underneath. */
@media (max-width: 520px) {
    .vdpg-wrap .adl-controls-right { flex-wrap: wrap; }
    .vdpg-card.adl-row { flex-wrap: wrap; }
    .vdpg-card .adl-row-info { flex: 1 1 200px; }
    .vdpg-card .adl-row-status { min-width: 0; text-align: left; }
    .vdpg-card .vdpg-rowact { margin-left: auto; }
}
.vdpg-art { font-size: 22px; }                       /* emoji inside the .adl-row-art tile */
.vdpg-art.vdpg-has-poster { background-size: cover; background-position: center; background-repeat: no-repeat; }
.vdpg-rowact { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
/* slim progress line inside the row (music rows have none; video files are big/slow) */
.vdpg-prog { margin-top: 7px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.vdpg-prog-fill { height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.7), rgb(var(--accent-rgb)));
    transition: width 1.4s cubic-bezier(0.3,0.8,0.3,1); }
/* quality chip + context in the meta line */
.vdpg-qchip { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; vertical-align: middle; margin-right: 8px; color: #fff;
    background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.32); }
.vdpg-mctx { vertical-align: middle; }
.vdpg-dest { color: #8fe7af; font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* ── Library cards: rating · watched tick · show status chip · progress line ── */
.vlib-rate { color: #fbbf24; font-weight: 700; white-space: nowrap; }
.vlib-watched { color: #2bd17e; font-weight: 800; }
/* Show lifecycle on the poster corner (movies wear resolution there) — the
   stat line is too tight on small cards to carry it. */
.library-artist-card .video-card-badge--airing { color: #2bd17e; background: rgba(10, 40, 22, 0.82);
    border: 1px solid rgba(34, 197, 94, 0.4); }
.library-artist-card .video-card-badge--ended { color: rgba(255, 255, 255, 0.72); background: rgba(20, 20, 24, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18); }
.library-artist-card .video-card-badge--upcoming { color: #60a5fa; background: rgba(12, 25, 48, 0.82);
    border: 1px solid rgba(96, 165, 250, 0.38); }

/* slim owned-episodes progress under a show card's stats */
.vlib-prog { margin-top: 7px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.vlib-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(164, 114, 245, 0.65), rgb(164, 114, 245)); }
.vlib-prog-fill--full { background: linear-gradient(90deg, rgba(34, 197, 94, 0.65), #2bd17e); }

/* channel name prefix on collapsed YouTube rows */
.vdpg-mchan { vertical-align: middle; margin-right: 8px; padding-right: 8px; font-weight: 600;
    color: rgba(255, 255, 255, 0.62); border-right: 1px solid rgba(255, 255, 255, 0.16); }
/* completed-but-below-cutoff: still on the wishlist, hunting a better copy */
.vdpg-upchip { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; vertical-align: middle; margin-right: 8px; cursor: help;
    color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); }
/* open the movie/show page */
.vdpg-open { flex-shrink: 0; width: 30px; height: 30px; display: inline-grid; place-items: center;
    border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7); transition: all 0.15s ease; }
.vdpg-open:hover { background: rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.5); color: #fff; transform: translateY(-1px); }
/* retry button — mirrors .adl-row-cancel's hover-reveal, accent themed */
.vdpg-row-retry { flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-rgb),0.7));
    border: 1px solid rgba(var(--accent-rgb),0.55); box-shadow: 0 0 10px rgba(var(--accent-rgb),0.25);
    opacity: 0; pointer-events: none; transform: translateX(8px) scale(0.72);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.adl-row:hover .vdpg-row-retry, .adl-row:focus-within .vdpg-row-retry { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.vdpg-row-retry:hover { transform: translateX(0) scale(1.12) rotate(-40deg); }
.vdpg-row-retry:disabled { opacity: 0.5 !important; pointer-events: none; }
@media (hover: none) { .vdpg-row-retry { opacity: 1; pointer-events: auto; transform: none; } }
/* Manual Import (import_failed rows) — same hover-reveal, green so it reads as "file it" not "retry" */
.vdpg-row-import { background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(34, 197, 94, 0.65));
    border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 0 10px rgba(34, 197, 94, 0.25); }
.vdpg-row-import:hover { transform: translateX(0) scale(1.12); }

/* first-visit loading skeleton (removed on the first render) */
.vdpg-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px;
    border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.vdpg-skel-art { flex-shrink: 0; width: 50px; height: 74px; border-radius: 8px; }
.vdpg-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.vdpg-skel-line { height: 12px; border-radius: 6px; width: 46%; }
.vdpg-skel-line--short { width: 28%; height: 10px; }
.vdpg-skel-art, .vdpg-skel-line { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%; animation: vdpg-skel-sheen 1.4s ease-in-out infinite; }
@keyframes vdpg-skel-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vdpg-skel-art, .vdpg-skel-line { animation: none; } }

/* rich empty state (JS fills icon/title/sub) */
.vdpg-empty.adl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; }
.vdpg-empty-ic { font-size: 34px; line-height: 1; filter: saturate(0.8); opacity: 0.9; }
.vdpg-empty-t { font-size: 1.02rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.vdpg-empty-s { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); max-width: 46ch; text-align: center; line-height: 1.5; }
.vdpg-empty-s strong { color: rgba(255, 255, 255, 0.75); }

/* ───────────────────────── Downloads — Cinema per-type theming ───────────────────
   movie = azure · TV = violet · youtube = red. --vt is the type's RGB triplet, used for
   the left accent bar, status pill, progress fill + quality chip. Scoped to .vdpg-card so
   the music downloads page (.adl-row) is byte-untouched. */
.vdpg-card[data-vtype="movie"]   { --vt: 79, 143, 247; }
.vdpg-card[data-vtype="tv"]      { --vt: 164, 114, 245; }
.vdpg-card[data-vtype="youtube"] { --vt: 240, 69, 75; }
.vdpg-card { position: relative; overflow: hidden; padding-left: 16px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
.vdpg-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: rgb(var(--vt, 255, 255, 255)); opacity: 0.9; }
.vdpg-card:hover { transform: translateY(-1px); background: rgba(var(--vt, 255, 255, 255), 0.05);
    box-shadow: 0 7px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(var(--vt, 255, 255, 255), 0.14); }

/* bigger poster art + a type corner badge (so the type reads even with a poster) */
.vdpg-artwrap { position: relative; flex-shrink: 0; }
.vdpg-card .adl-row-art { width: 50px; height: 74px; border-radius: 8px; }
.vdpg-tbadge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff;
    background: rgb(var(--vt, 90, 90, 90));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.4); }

/* status as a colored pill */
.vdpg-card .adl-row-status { padding: 4px 11px; border-radius: 999px; min-width: 0; gap: 6px;
    border: 1px solid transparent; font-weight: 700; font-size: 0.72rem; }
.vdpg-card .adl-row-status.active { color: rgb(var(--vt)); background: rgba(var(--vt), 0.14); border-color: rgba(var(--vt), 0.4); }
.vdpg-card .adl-row-status.queued { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.vdpg-card .adl-row-status.completed { color: #2bd17e; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.36); }
.vdpg-card .adl-row-status.failed { color: #f87171; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.36); }
.vdpg-card .adl-row-status.cancelled { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.vdpg-card .adl-row-status .adl-status-dot { width: 6px; height: 6px; background: currentColor; }
.vdpg-card.adl-row-active .adl-row-status .adl-status-dot { animation: vdpg-pulse 1.4s ease-in-out infinite; }

/* progress in the type color; queued/searching/importing get an indeterminate sweep */
.vdpg-card .vdpg-prog-fill { background: linear-gradient(90deg, rgba(var(--vt), 0.6), rgb(var(--vt))); }
.vdpg-card .vdpg-prog-indet .vdpg-prog-fill { width: 100% !important; transition: none;
    background: linear-gradient(90deg, transparent, rgb(var(--vt)), transparent);
    background-size: 38% 100%; background-repeat: no-repeat; animation: vdpg-indet 1.3s ease-in-out infinite; }
@keyframes vdpg-indet { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes vdpg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* quality chip follows the type color */
.vdpg-card .vdpg-qchip { background: rgba(var(--vt), 0.16); border-color: rgba(var(--vt), 0.36); }

/* ── click-to-expand detail drawer (wraps full-width below the row) ── */
.vdpg-card { flex-wrap: wrap; cursor: pointer; }
.vdpg-drawer { flex: 0 0 100%; width: 100%; margin-top: 12px; position: relative; cursor: default;
    border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.2); }
.vdpg-dr-back { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%); mask-image: linear-gradient(180deg, #000, transparent 78%); }
.vdpg-dr-body { position: relative; padding: 16px 18px 18px; }
.vdpg-dr-syn { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 10px; max-width: 80ch; }
.vdpg-dr-muted { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.vdpg-dr-genres { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--vt)); margin-bottom: 2px; }
.vdpg-dr-head { margin-bottom: 12px; }
.vdpg-dr-logo { max-height: 54px; max-width: 62%; object-fit: contain; display: block; margin-bottom: 7px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
.vdpg-dr-title { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 5px; }
.vdpg-dr-metaline { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.62); }
.vdpg-dr-tagline { font-size: 12.5px; font-style: italic; color: rgba(255, 255, 255, 0.5); margin-top: 5px; }
.vdpg-dr-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 2px; }
.vdpg-dr-trailer { background: rgba(var(--vt), 0.18); border-color: rgba(var(--vt), 0.5); color: #fff; }
.vdpg-dr-provs { display: inline-flex; align-items: center; gap: 7px; }
.vdpg-dr-provs-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); }
.vdpg-prov { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.vdpg-prov-txt { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px;
    font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
/* youtube: big 16:9 thumbnail in the header */
.vdpg-dr-ytthumb { width: 100%; max-width: 340px; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 10px;
    background-size: cover; background-position: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); }
/* episode block: still + the specific episode's meta */
.vdpg-dr-ep { display: flex; gap: 16px; margin-bottom: 6px; }
.vdpg-dr-epstill { flex: 0 0 auto; width: 200px; aspect-ratio: 16 / 9; border-radius: 9px;
    background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45); }
.vdpg-dr-epbody { min-width: 0; }
.vdpg-dr-epnum { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--vt)); }
.vdpg-dr-eptitle { font-size: 15px; font-weight: 700; color: #fff; margin: 3px 0 6px; }
.vdpg-dr-epov { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); margin: 0; }
@media (max-width: 620px) { .vdpg-dr-ep { flex-direction: column; } .vdpg-dr-epstill { width: 100%; max-width: 320px; } }
.vdpg-dr-st { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4); margin: 16px 0 9px; }
.vdpg-dr-cast { display: flex; flex-wrap: wrap; gap: 12px; }
.vdpg-cast { width: 82px; text-align: center; }
.vdpg-cast-pic { display: block; width: 56px; height: 56px; margin: 0 auto 5px; border-radius: 50%; background-size: cover;
    background-position: center; background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.vdpg-cast-none { display: grid; place-items: center; font-size: 20px; font-weight: 800; color: rgba(255, 255, 255, 0.5); }
.vdpg-cast-nm { display: block; font-size: 11.5px; font-weight: 700; color: #fff; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdpg-cast-ch { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.45); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdpg-dr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; }
.vdpg-f { display: flex; gap: 10px; font-size: 12.5px; min-width: 0; align-items: baseline; }
.vdpg-f-wide { grid-column: 1 / -1; }
.vdpg-fk { flex: 0 0 92px; color: rgba(255, 255, 255, 0.42); font-weight: 600; }
.vdpg-fv { color: rgba(255, 255, 255, 0.88); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vdpg-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; word-break: break-all; }
.vdpg-f-err .vdpg-fv { color: #f8a0a0; }
.vdpg-copy { flex: 0 0 auto; margin-left: auto; width: 24px; height: 22px; border-radius: 6px; cursor: pointer;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }
.vdpg-copy:hover { background: rgba(var(--vt), 0.22); border-color: rgba(var(--vt), 0.5); color: #fff; }
.vdpg-dr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vdpg-dr-btn { padding: 8px 16px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700; text-decoration: none;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); transition: all 0.15s; }
.vdpg-dr-btn:hover { background: rgba(var(--vt), 0.18); border-color: rgba(var(--vt), 0.5); color: #fff; }
.vdpg-dr-accent { background: rgba(var(--vt), 0.18); border-color: rgba(var(--vt), 0.5); color: #fff; }
.vdpg-dr-danger:hover { background: rgba(239, 68, 68, 0.85); border-color: transparent; color: #fff; }
@media (max-width: 620px) { .vdpg-dr-facts { grid-template-columns: 1fr; } }


/* Automation Hub panes that are music-specific — emptied on the video side for now. */
.vauto-hub-soon { padding: 36px 20px; text-align: center; font-size: 13.5px; font-weight: 600;
    color: rgba(255, 255, 255, 0.38); }

/* Global "Retry all failed" — a text button in the worker modal topbar (overrides
   the round .em-icon-btn sizing + its rotate-on-hover; amber = retry/failed). */
.em-retry-global {
    width: auto; height: 32px; padding: 0 13px; border-radius: 999px;
    gap: 6px; font-size: 12px; font-weight: 800; white-space: nowrap;
    color: #fbcd7a; background: rgba(245, 158, 11, 0.14);
}
.em-retry-global:hover { transform: none; background: rgba(245, 158, 11, 0.24); }
.em-retry-global:disabled { opacity: 0.55; cursor: default; }

/* ── Import page (manual / failed-import resolution) — video/video-import.js ──── */
.vimp-page { max-width: 1080px; margin: 0 auto; padding: 8px 4px 40px; }
.vimp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vimp-title { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; display: flex; align-items: center; gap: 10px; }
.vimp-count { font-size: 13px; font-weight: 800; color: #06210f; background: rgb(var(--accent-rgb)); border-radius: 999px; padding: 2px 10px; min-width: 22px; text-align: center; }
.vimp-count:empty { display: none; }
.vimp-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.5); margin: 4px 0 0; }
.vimp-refresh { flex-shrink: 0; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700;
    color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.15s, border-color 0.15s; }
.vimp-refresh:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }

.vimp-grid { display: flex; flex-direction: column; gap: 10px; }

/* Cards speak the Downloads page's Cinema language: a type accent bar (movie
   azure / TV violet), poster art with a corner type badge, and a click-to-expand
   drawer with the full story. --vt is the type's RGB triplet. */
.vimp-card[data-vtype="movie"] { --vt: 79, 143, 247; }
.vimp-card[data-vtype="tv"]    { --vt: 164, 114, 245; }
.vimp-card { position: relative; overflow: hidden; padding: 12px 16px 12px 19px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
.vimp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: rgb(var(--vt, 255, 255, 255)); opacity: 0.9; }
.vimp-card:hover { transform: translateY(-1px); background: rgba(var(--vt, 255, 255, 255), 0.05);
    box-shadow: 0 7px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(var(--vt, 255, 255, 255), 0.14); }
.vimp-card--open { background: rgba(var(--vt, 255, 255, 255), 0.045); }
.vimp-card-row { display: flex; align-items: center; gap: 14px; }

/* poster tile + type corner badge */
.vimp-art { position: relative; flex-shrink: 0; width: 50px; height: 74px; border-radius: 8px; overflow: visible;
    background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; font-size: 22px; }
.vimp-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.vimp-art--none { font-size: 22px; }
.vimp-art-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center; font-size: 11px; line-height: 1;
    background: rgb(var(--vt, 90, 90, 90)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.4); }

.vimp-card-main { flex: 1; min-width: 0; }
.vimp-card-title { font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vimp-card-year { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.vimp-card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; }
.vimp-card-file { font-size: 12px; color: rgba(255, 255, 255, 0.5); font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vimp-card-side { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.vimp-card-size { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums; }
.vimp-caret { color: rgba(255, 255, 255, 0.4); font-size: 12px; width: 14px; text-align: center; }

/* reason chip — why the auto-importer parked it, color-coded */
.vimp-rchip { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; white-space: nowrap; }
.vimp-rchip--sample   { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); }
.vimp-rchip--upgrade  { color: #60a5fa; background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); }
.vimp-rchip--corrupt  { color: #f87171; background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.34); }
.vimp-rchip--identify { color: #c4b5fd; background: rgba(164, 114, 245, 0.14); border-color: rgba(164, 114, 245, 0.34); }
.vimp-rchip--other    { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.vimp-qchip { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; color: #fff;
    background: rgba(var(--vt), 0.16); border: 1px solid rgba(var(--vt), 0.36); }

/* expand drawer */
.vimp-drawer { cursor: default; margin-top: 12px; padding: 14px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.vimp-drawer[hidden] { display: none; }
.vimp-dr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px 22px; }
.vimp-f { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 12.5px; }
.vimp-f--wide { grid-column: 1 / -1; }
.vimp-fk { flex-shrink: 0; width: 92px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.vimp-fv { color: rgba(255, 255, 255, 0.85); min-width: 0; overflow-wrap: anywhere; }
.vimp-fv-warn { color: #f87171; font-weight: 700; }
.vimp-fv-dim { color: rgba(255, 255, 255, 0.45); }
.vimp-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
.vimp-f--err .vimp-fv { color: #fca5a5; }
.vimp-copy { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px;
    display: inline-grid; place-items: center; color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.vimp-copy:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vimp-dr-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.vimp-dr-spacer { flex: 1; }

/* buttons — a real CTA for Place, quiet ghost for Dismiss, red for Delete */
.vimp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 10px;
    cursor: pointer; font-size: 12.5px; font-weight: 800; border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.15s, box-shadow 0.15s; }
.vimp-btn--place { color: #fff;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.72));
    border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.28); }
.vimp-btn--place:hover { filter: brightness(1.1); transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.4); }
.vimp-btn--place:disabled { opacity: 0.5; cursor: default; filter: none; transform: none; }
.vimp-btn--dismiss, .vimp-btn--ghost { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.vimp-btn--dismiss:hover, .vimp-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }
.vimp-btn--danger { color: #f87171; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.vimp-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.vimp-btn--danger:disabled { opacity: 0.45; cursor: default; }

.vimp-state { text-align: center; padding: 64px 20px; }
.vimp-state-ic { font-size: 38px; color: #6cd391; }
.vimp-state-title { font-size: 17px; font-weight: 700; color: #fff; margin-top: 10px; }
.vimp-state-sub { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }

/* resolve modal */
.vimp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vimp-modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); }
.vimp-modal-card { position: relative; width: 100%; max-width: 540px; max-height: 86vh; display: flex; flex-direction: column;
    background: #15171d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
.vimp-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.vimp-modal-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0; }
.vimp-modal-file { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 4px; word-break: break-word; }
.vimp-modal-x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1;
    color: rgba(255, 255, 255, 0.6); background: transparent; border: none; }
.vimp-modal-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.vimp-kindtabs { display: flex; gap: 8px; padding: 0 20px 12px; }
.vimp-kindtab { padding: 7px 16px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700;
    color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.vimp-kindtab--on { color: #06210f; background: rgb(var(--accent-rgb)); border-color: transparent; }
.vimp-search { padding: 0 20px 10px; }
.vimp-search-input { width: 100%; padding: 10px 13px; border-radius: 10px; font-size: 14px; color: #fff;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.vimp-search-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.vimp-results { overflow-y: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; min-height: 80px; }
.vimp-res-note { font-size: 13px; color: rgba(255, 255, 255, 0.45); padding: 18px 8px; text-align: center; }
.vimp-res { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 10px; cursor: pointer; text-align: left;
    background: transparent; border: 1px solid transparent; }
.vimp-res:hover { background: rgba(255, 255, 255, 0.05); }
.vimp-res--on { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.5); }
.vimp-res-img, .vimp-res-ph { width: 38px; height: 56px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.vimp-res-ph { display: grid; place-items: center; font-size: 18px; background: rgba(255, 255, 255, 0.06); }
.vimp-res-info { min-width: 0; display: flex; flex-direction: column; }
.vimp-res-title { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vimp-res-meta { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.vimp-res--owned .vimp-res-meta { color: #6cd391; }
.vimp-ep { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 20px 4px; }
.vimp-ep-field { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); display: flex; flex-direction: column; gap: 4px; }
.vimp-ep-field--wide { flex: 1; min-width: 140px; }
.vimp-ep-field input { padding: 8px 11px; border-radius: 9px; font-size: 13px; color: #fff;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); width: 90px; }
.vimp-ep-field--wide input { width: 100%; }
.vimp-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 8px; }

/* ── Download History modal (.vdh-*) — permanent timeline of every grab ───── */
.adl-history-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
    border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 700;
    color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.18s ease; }
.adl-history-btn:hover { color: #fff; border-color: rgba(var(--accent-rgb, 88 101 242), 0.5);
    background: rgba(var(--accent-rgb, 88 101 242), 0.1); }
.adl-history-n { font-size: 10.5px; font-weight: 800; min-width: 16px; text-align: center; padding: 1px 5px;
    border-radius: 999px; background: rgba(var(--accent-rgb, 88 101 242), 0.28); color: #fff; }

body.vdh-locked { overflow: hidden; }
.vdh-overlay { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center;
    padding: 4vh 20px; background: rgba(6, 6, 9, 0.7); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.2s ease; }
.vdh-overlay--on { display: flex; opacity: 1; }
.vdh-modal { --accent-rgb: var(--accent-rgb, 88, 101, 242); width: min(880px, 96vw); max-height: 92vh;
    display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg, #17171d, #121217);
    border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8);
    transform: translateY(8px) scale(0.99); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vdh-overlay--on .vdh-modal { transform: none; }

.vdh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 22px 24px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vdh-title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.vdh-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.vdh-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1;
    color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.15s ease; }
.vdh-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.vdh-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; }
.vdh-tabs { display: inline-flex; gap: 8px; }
.vdh-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 11px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.vdh-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.vdh-tab--on { color: #fff; background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
.vdh-tab-n { font-size: 10.5px; font-weight: 800; min-width: 16px; text-align: center; padding: 1px 5px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.vdh-tab--on .vdh-tab-n { background: rgba(var(--accent-rgb), 0.28); color: #fff; }
.vdh-search { position: relative; display: flex; align-items: center; gap: 9px; margin-left: auto; height: 38px;
    flex: 1; min-width: 180px; max-width: 320px; padding: 0 13px; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px;
    transition: border-color 0.2s, box-shadow 0.2s; }
.vdh-search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
.vdh-search-ic { flex: 0 0 auto; color: rgba(255, 255, 255, 0.4); }
.vdh-clear { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 11px; cursor: pointer; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px; font-weight: 700; transition: all 0.15s; }
.vdh-clear:hover { background: rgba(239, 68, 68, 0.85); border-color: transparent; color: #fff; }
.vdh-detail-act { grid-column: 1 / -1; margin-top: 8px; }
.vdh-redl { padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700; transition: all 0.15s;
    background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.4); color: #fff; }
.vdh-redl:hover { background: rgba(var(--accent-rgb), 0.32); }
.vdh-redl:disabled { opacity: 0.5; cursor: default; }
.vdh-search:focus-within .vdh-search-ic { color: rgba(var(--accent-rgb), 0.95); }
.vdh-search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 13px; }
.vdh-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.vdh-body { flex: 1; overflow-y: auto; padding: 6px 16px 8px; min-height: 160px; }
.vdh-body--loading { opacity: 0.5; }
.vdh-day { position: sticky; top: 0; z-index: 1; padding: 12px 8px 6px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.38);
    background: linear-gradient(180deg, #15151b 60%, transparent); }

.vdh-row { border-radius: 13px; border: 1px solid transparent; margin: 3px 0; cursor: pointer;
    transition: background 0.15s, border-color 0.15s; }
.vdh-row:hover { background: rgba(255, 255, 255, 0.03); }
.vdh-row--open { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.vdh-row-main { display: flex; align-items: center; gap: 13px; padding: 9px 12px; }
.vdh-poster { flex: 0 0 auto; width: 40px; height: 60px; border-radius: 7px; object-fit: cover; background: #0f0f14;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; }
.vdh-poster--none { color: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.07); }
img.vdh-poster--none { font-size: 0; }
.vdh-row-info { flex: 1; min-width: 0; }
.vdh-row-title { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdh-sxe { font-size: 11px; font-weight: 800; color: rgb(var(--accent-rgb)); margin-left: 4px; }
.vdh-row-sub { margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, 0.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdh-row-right { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.vdh-oc { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.vdh-oc--ok { color: #4ade80; background: rgba(34, 197, 94, 0.13); }
.vdh-oc--warn { color: #fbbf24; background: rgba(245, 158, 11, 0.14); }
.vdh-oc--fail { color: #f87171; background: rgba(248, 113, 113, 0.14); }
.vdh-oc--muted { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.vdh-when { font-size: 11px; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.vdh-chev { font-size: 18px; color: rgba(255, 255, 255, 0.3); transition: transform 0.18s ease; }
.vdh-row--open .vdh-chev { transform: rotate(90deg); }

.vdh-detail { display: none; grid-template-columns: 1fr 1fr; gap: 4px 24px; padding: 4px 16px 16px 65px; }
.vdh-row--open .vdh-detail { display: grid; }
.vdh-d { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-width: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05); }
.vdh-d:nth-child(7), .vdh-d--err { grid-column: 1 / -1; }
.vdh-d-k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.35); }
.vdh-d-v { font-size: 12.5px; color: rgba(255, 255, 255, 0.8); word-break: break-word; }
.vdh-d--err .vdh-d-v { color: #fca5a5; }

.vdh-empty { text-align: center; padding: 60px 20px; }
.vdh-empty-ic { font-size: 40px; margin-bottom: 12px; opacity: 0.8; }
.vdh-empty-t { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.vdh-empty-s { font-size: 13px; color: rgba(255, 255, 255, 0.45); }

.vdh-foot { padding: 10px 24px 20px; text-align: center; }
.vdh-more { padding: 9px 22px; border-radius: 11px; cursor: pointer; font-size: 12.5px; font-weight: 700;
    color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.15s ease; }
.vdh-more:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
@media (max-width: 620px) { .vdh-detail { grid-template-columns: 1fr; padding-left: 16px; } }

/* ── Video Tools scan cards ──────────────────────────────────────────────
   The video scan cards carry THREE controls (target + mode + action button),
   one more than music's two, so the shared no-wrap flex row overflowed and clipped
   the button. Scoped to the video Tools page (music's .tool-card-controls is
   untouched): let the row wrap, two selects share the top row, the button drops
   to its own full-width row. */
.video-subpage[data-video-subpage="video-tools"] .tool-card-controls {
    flex-wrap: wrap;
}
.video-subpage[data-video-subpage="video-tools"] .tool-card-controls select {
    flex: 1 1 140px;          /* two selects share the top row, each ≥140px */
    min-width: 0;
}
.video-subpage[data-video-subpage="video-tools"] .tool-card-controls button {
    flex: 1 1 100%;           /* action button takes its own full-width row */
}

/* ── Global (music) search must NEVER appear on the video side ──
   The bottom-of-page global search bar, its results dropdown, and its aura
   are music-only. Hiding them via body[data-side="video"] guarantees they
   stay hidden the instant the side toggle flips, regardless of any JS
   visibility timing. */
body[data-side="video"] #gsearch-bar,
body[data-side="video"] #gsearch-results,
body[data-side="video"] #gsearch-aura {
    display: none !important;
}

/* ── Inline acquisition on the show detail page (per-episode + per-season) ──
   Buttons follow the app standard (the .discog-download-btn accent language):
   episode rows use a compact icon variant; season row uses the full discog
   pills (same as the "Get Show" button). */
.vd-ep-get { display: inline-flex; align-items: center; gap: 6px; }
.vd-ep-getbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer; line-height: 1;
    font-size: 14px; font-weight: 700; font-family: inherit;
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    transition: all 0.2s ease;
}
.vd-ep-getbtn:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.1) 100%);
    transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}
.vd-ep-getbtn:active { transform: translateY(0) scale(0.94); }
.vd-ep-getbtn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }
.vd-ep-wish--done {
    color: #4ade80 !important; border-color: rgba(74,222,128,0.5) !important;
    background: linear-gradient(135deg, rgba(74,222,128,0.16), rgba(74,222,128,0.05)) !important;
}

.vd-season-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 4px 14px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vd-season-actions-count {
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: rgba(255,255,255,0.55); margin-right: auto;
}

/* ── Live download status on episode rows ── */
.vd-ep-dl { display: none; align-items: center; gap: 8px; min-width: 108px; }
.vd-ep-get--busy .vd-ep-dl, .vd-ep-get--done .vd-ep-dl { display: inline-flex; }
/* The action buttons NEVER disappear — a finished or in-flight grab shows its
   status BESIDE auto search / manual search / wishlist, not instead of them
   (a "✓ Downloaded" row used to lose all three for the rest of the session).
   While a grab is actually in flight only the auto-grab button goes inert so
   it can't be double-fired; manual search + wishlist stay live throughout. */
.vd-ep-get--busy .vd-ep-grab { opacity: .35; pointer-events: none; }
.vd-ep-dl-bar {
    position: relative; width: 54px; height: 5px; border-radius: 3px; overflow: hidden;
    background: rgba(255,255,255,0.12);
}
.vd-ep-dl-bar > span {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
    background: var(--accent, #38bdf8); transition: width .4s ease;
}
.vd-ep-dl-txt { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); white-space: nowrap; }
.vd-ep-dl-txt--done { color: #4ade80; }


/* ── Manual (interactive) search modal — matches the get-modal / download chrome ── */
.vms-overlay {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px 40px; overflow-y: auto; background: rgba(4,6,12,0.72); backdrop-filter: blur(6px);
    animation: vms-fade .18s ease;
}
@keyframes vms-fade { from { opacity: 0; } to { opacity: 1; } }
.vms-modal {
    position: relative; width: min(860px, 100%); border-radius: 16px;
    background: linear-gradient(180deg, #171a24 0%, #12141d 100%);
    border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    animation: vms-rise .2s ease;
}
@keyframes vms-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.vms-close {
    position: absolute; top: 12px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.vms-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.vms-head { padding: 22px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.vms-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #38bdf8); }
.vms-title { font-size: 22px; font-weight: 700; color: #fff; margin-top: 4px; }
.vms-scope { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 2px; }
.vms-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 8px; }
.vms-body { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.vms-src-head { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.vms-grabbed { color: #4ade80 !important; border-color: rgba(74,222,128,0.5) !important; }
@media (max-width: 620px) { .vms-body { padding: 14px 14px 20px; } .vms-head { padding: 18px 16px 14px; } }

/* ── Season/complete pack card (expandable episode list) in the search results ── */
.vdl-pack .vdl-pack-head {
    display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px;
}
.vdl-pack-caret { color: rgba(255,255,255,0.5); font-size: 12px; transition: transform .18s ease; flex: 0 0 auto; }
.vdl-pack.vdl-pack--open .vdl-pack-caret { transform: rotate(90deg); }
.vdl-pack .vdl-r-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdl-pack-meta { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); white-space: nowrap; flex: 0 0 auto; }
.vdl-pack-get { flex: 0 0 auto; }
.vdl-pack-list {
    display: none; padding: 4px 12px 12px 30px; flex-direction: column; gap: 3px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.vdl-pack.vdl-pack--open .vdl-pack-list { display: flex; }
.vdl-pack-ep { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 3px 0; }
.vdl-pack-ep-tag { flex: 0 0 auto; width: 54px; font-weight: 700; color: rgb(var(--accent-light-rgb)); font-family: ui-monospace, monospace; }
.vdl-pack-ep-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.7); }
.vdl-pack-ep-sz { flex: 0 0 auto; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }

/* Manual override — let the user GET a below-profile release they picked themselves.
   Brighten the otherwise-dimmed rejected card when it carries an override button,
   and give the button an amber "download anyway" look. */
.vdl-res--rejected:has(.vdl-res-grab--override) { opacity: 0.72; }
.vdl-res--rejected:has(.vdl-res-grab--override):hover { opacity: 1; }
.vdl-res-grab--override { color: #fbbf24; border-color: rgba(251,191,36,0.55); }
.vdl-res-grab--override:hover { color: #fde68a; background: rgba(251,191,36,0.12); }

/* ── Downloads page: same-show+season episode batches grouped into one card ── */
.vdpg-group {
    border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-bottom: 10px;
    background: rgba(255,255,255,0.02); overflow: hidden;
}
.vdpg-group-head {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    transition: background .15s;
}
.vdpg-group-head:hover { background: rgba(255,255,255,0.04); }
.vdpg-group-caret { color: rgba(255,255,255,0.5); font-size: 12px; flex: 0 0 auto; width: 12px; }
.vdpg-group-art {
    flex: 0 0 auto; width: 40px; height: 56px; border-radius: 6px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background-color: rgba(255,255,255,0.06);
}
.vdpg-group-info { flex: 1 1 auto; min-width: 0; }
.vdpg-group-title { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdpg-group-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.vdpg-group-prog { margin-top: 7px; max-width: 320px; }
.vdpg-group-status { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); white-space: nowrap; }
.vdpg-group-act { flex: 0 0 auto; }
.vdpg-group-body { padding: 0 8px 8px 34px; display: flex; flex-direction: column; gap: 6px; }
.vdpg-group--collapsed .vdpg-group-body { display: none; }
/* nested episode cards read as children of the group */
.vdpg-group-body .vdpg-card { background: rgba(255,255,255,0.015); }

/* ── Library bulk select mode + action bar ─────────────────────────────────
   Select N cards → floating action bar (bulk metadata via /api/video/bulk —
   the same edit-and-lock engine as the Manage sidebar). */
.video-lib-select-btn {
    padding: 8px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
    transition: all .13s; white-space: nowrap;
}
.video-lib-select-btn:hover { background: rgba(255,255,255,0.11); color: #fff; }
.video-lib-select-btn.active {
    background: rgba(var(--accent-rgb, 88 101 242), 0.22);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); color: #fff;
}

/* Cards in select mode: no nav affordance, overlay controls parked, and a
   pick ring — the circle appears on every card, the check fills the picked. */
.video-lib--selecting .library-artist-card { cursor: copy; position: relative; }
.video-lib--selecting .library-artist-card button { pointer-events: none; opacity: 0 !important; }
.video-lib--selecting .library-artist-card::after {
    content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.55);
    background: rgba(0,0,0,0.45); z-index: 5; transition: all .12s;
}
.video-lib--selecting .video-card--picked::after {
    content: "\2713"; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900; color: #fff;
    background: rgb(var(--accent-rgb, 88 101 242));
    border-color: rgb(var(--accent-rgb, 88 101 242));
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.video-lib--selecting .video-card--picked {
    outline: 2px solid rgba(var(--accent-rgb, 88 101 242), 0.85);
    outline-offset: 2px; border-radius: 12px;
}

/* The floating bar (fixed; hides with the page since ancestors display:none) */
.video-bulkbar {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 8900; display: flex; flex-direction: column; gap: 8px;
    max-width: min(860px, calc(100vw - 32px));
}
.video-bulkbar.hidden { display: none; }
.vbb-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(14,14,19,0.96); border: 1px solid rgba(255,255,255,0.11);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px); flex-wrap: wrap;
}
.vbb-count { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.vbb-link {
    all: unset; cursor: pointer; font-size: 11.5px; font-weight: 700;
    color: rgba(255,255,255,0.55); padding: 2px 4px;
}
.vbb-link:hover { color: #fff; }
.vbb-link[disabled] { opacity: 0.35; cursor: default; }
.vbb-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.12); }
.vbb-spacer { flex: 1; min-width: 6px; }
.vbb-act {
    padding: 7px 13px; border-radius: 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.8);
    transition: all .12s; white-space: nowrap;
}
.vbb-act:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: #fff; }
.vbb-act:disabled { opacity: 0.35; cursor: default; }
.vbb-act--on {
    background: rgba(var(--accent-rgb, 88 101 242), 0.22);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); color: #fff;
}
.vbb-close {
    all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.14);
}
.vbb-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* The action popover (rendered above the row) */
.vbb-pop {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(14,14,19,0.96); border: 1px solid rgba(255,255,255,0.11);
    border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px); flex-wrap: wrap;
}
.vbb-pop-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); white-space: nowrap; }
.vbb-input {
    padding: 8px 11px; border-radius: 9px; font-size: 12.5px; font-family: inherit;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #eef1f7; outline: none; min-width: 150px; transition: border .13s, box-shadow .13s;
}
.vbb-input:focus {
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 88 101 242), 0.14);
}
.vbb-select { min-width: 190px; }
.vbb-select option { background: #16161d; color: #eef1f7; }
.vbb-apply {
    padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 800;
    cursor: pointer; border: none; color: #fff;
    background: rgb(var(--accent-rgb, 88 101 242));
    box-shadow: 0 5px 14px rgba(var(--accent-rgb, 88 101 242), 0.3);
    transition: filter .13s; white-space: nowrap;
}
.vbb-apply:hover { filter: brightness(1.12); }
.vbb-apply--ghost {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    box-shadow: none; color: rgba(255,255,255,0.85);
}
.vbb-apply--ghost:hover { background: rgba(255,255,255,0.13); filter: none; }

/* Progress view while a bulk job runs */
.vbb-row--progress { flex-wrap: nowrap; min-width: min(430px, calc(100vw - 60px)); }
.vbb-track {
    flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.1);
    overflow: hidden; min-width: 120px;
}
.vbb-fill {
    height: 100%; border-radius: 999px;
    background: rgb(var(--accent-rgb, 88 101 242)); transition: width .4s ease;
}
@media (prefers-reduced-motion: reduce) { .vbb-fill { transition: none; } }

/* ── Detail hero: the Manage (metadata editor) button ──────────────────────
   Deliberately unlike the accent-filled content actions (Trailer / Get /
   Manage Poster): a dark glass pill with a luminous gradient ring — reads as
   a TOOL, so it stands out in the row without stealing the Play CTA's job. */
.vd-manage-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px;
    border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
    cursor: pointer; color: #fff; position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(12, 12, 17, 0.92), rgba(12, 12, 17, 0.92)) padding-box,
        linear-gradient(120deg, rgba(var(--vd-accent-rgb), 0.95), rgba(255, 255, 255, 0.75),
            rgba(var(--vd-accent-rgb), 0.95)) border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(var(--vd-accent-rgb), 0.25);
    transition: all 0.2s ease;
}
.vd-manage-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 22px rgba(var(--vd-accent-rgb), 0.5);
}
.vd-manage-ic { font-size: 12px; color: rgb(var(--vd-accent-rgb)); filter: brightness(1.35); }

/* ── Video Tools: Library Maintenance — video-only additions ───────────────
   The hero, tabs, job cards, finding cards, history entries and progress
   panels all reuse the music .repair-* styles from style.css (identical DOM).
   Only the missing-episodes detail list is new. */
.repair-ep-list { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
.repair-ep-row { display: flex; gap: 12px; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; }
.repair-ep-row:nth-child(odd) { background: rgba(255,255,255,0.03); }
.repair-ep-code { font-weight: 800; color: rgb(var(--accent-rgb, 88 101 242)); flex: 0 0 58px; }
.repair-ep-title { flex: 1; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repair-ep-date { color: rgba(255,255,255,0.4); flex: 0 0 auto; }
.repair-finding-hint { font-size: 11.5px; color: rgba(255,255,255,0.4); margin-top: 8px; }
.repair-finding-json {
    font-size: 11px; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.3);
    padding: 10px; border-radius: 8px; overflow-x: auto;
}

/* Rich missing-episodes finding detail (lazy-loaded live library data) */
.vrf-detail { display: flex; flex-direction: column; gap: 14px; }
.vrf-poster--empty {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35);
    font-size: 18px; font-weight: 800;
}
.vrf-show { display: flex; gap: 16px; align-items: flex-start; }
.vrf-poster {
    width: 92px; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover;
    background: #1b1b22; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 26px rgba(0,0,0,0.5); flex: 0 0 auto;
}
.vrf-show-info { flex: 1; min-width: 0; }
.vrf-show-title { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -0.01em; }
.vrf-show-year { font-weight: 600; color: rgba(255,255,255,0.45); }
.vrf-show-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.vrf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vrf-chip {
    padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.1);
}
.vrf-chip--miss {
    background: rgba(var(--accent-rgb, 88 101 242), 0.18);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.45);
    color: rgb(var(--accent-rgb, 88 101 242));
}
.vrf-chip--got { background: rgba(80,200,120,0.14); border-color: rgba(80,200,120,0.4); color: #6fdb96; }
.vrf-show-overview {
    font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.55; margin: 8px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vrf-actions { margin-top: 10px; }
.vrf-btn {
    padding: 7px 14px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: #eef1f7;
    transition: all .13s;
}
.vrf-btn:hover { background: rgba(255,255,255,0.13); }
.vrf-season { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
.vrf-season-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vrf-season-poster {
    width: 34px; aspect-ratio: 2/3; border-radius: 6px; object-fit: cover;
    background: #1b1b22; border: 1px solid rgba(255,255,255,0.1); flex: 0 0 auto; font-size: 11px;
}
.vrf-season-name { font-size: 13px; font-weight: 800; color: #fff; }
.vrf-season-count { font-size: 11.5px; color: rgba(255,255,255,0.45); }
.vrf-eps { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.vrf-eps::-webkit-scrollbar { width: 8px; }
.vrf-eps::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.vrf-ep {
    display: flex; gap: 12px; align-items: flex-start; padding: 8px;
    border-radius: 10px; background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
}
.vrf-ep-still {
    width: 104px; aspect-ratio: 16/9; border-radius: 7px; object-fit: cover;
    background: #1b1b22; flex: 0 0 auto; font-size: 15px;
}
.vrf-ep-body { flex: 1; min-width: 0; }
.vrf-ep-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vrf-ep-code { font-size: 11.5px; font-weight: 900; color: rgb(var(--accent-rgb, 88 101 242)); }
.vrf-ep-title {
    font-size: 13px; font-weight: 700; color: #eef1f7; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrf-ep-date { font-size: 11px; color: rgba(255,255,255,0.4); margin-left: auto; }
.vrf-ep-overview {
    font-size: 11.5px; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 4px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Movie-side finding details: poster rails, file cards, runtime bar */
.vrf-rail {
    display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; margin-top: 10px;
}
.vrf-rail::-webkit-scrollbar { height: 8px; }
.vrf-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.vrf-mini { position: relative; flex: 0 0 92px; }
.vrf-mini-poster {
    width: 92px; aspect-ratio: 2/3; border-radius: 8px; object-fit: cover;
    background: #1b1b22; border: 1px solid rgba(255,255,255,0.1); display: block; font-size: 18px;
}
.vrf-mini--want .vrf-mini-poster {
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.65);
    box-shadow: 0 0 12px rgba(var(--accent-rgb, 88 101 242), 0.25);
}
.vrf-mini--dim { opacity: 0.55; }
.vrf-mini-chip {
    position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    background: rgba(var(--accent-rgb, 88 101 242), 0.9); color: #fff;
}
.vrf-mini-chip--got { background: rgba(80,200,120,0.85); }
.vrf-mini-title {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8); margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrf-mini-year { font-size: 10px; color: rgba(255,255,255,0.4); }
.vrf-files { display: flex; flex-direction: column; gap: 8px; }
.vrf-file {
    padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07); margin-top: 8px;
}
.vrf-file-head { font-size: 12.5px; font-weight: 700; color: #eef1f7; }
.vrf-file-path {
    font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 3px;
    font-family: ui-monospace, monospace; word-break: break-all;
}
.vrf-file .vrf-btn { margin-top: 8px; }
.vrf-runtime {
    height: 8px; border-radius: 999px; background: rgba(255,255,255,0.1);
    overflow: hidden; margin-top: 12px;
}
.vrf-runtime-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #e0564a, #e0a34a);
}
.vrf-runtime-label { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 5px; }


/* ── Issues page + report/detail modals (the music Issues standard) ────────── */
.vi-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.vi-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.vi-stat {
    padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07); text-align: center;
}
.vi-stat-n { font-size: 22px; font-weight: 900; color: #fff; }
.vi-stat-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-top: 3px; }
.vi-stat--open .vi-stat-n { color: rgb(var(--accent-rgb, 88 101 242)); }
.vi-stat--in_progress .vi-stat-n { color: #e0a34a; }
.vi-stat--resolved .vi-stat-n { color: #6fdb96; }
.vi-stat--dismissed .vi-stat-n { color: rgba(255,255,255,0.45); }
.vi-list { display: flex; flex-direction: column; gap: 10px; }
.vi-card {
    display: flex; gap: 14px; align-items: center; padding: 12px 14px; cursor: pointer;
    border-radius: 12px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07); transition: border .13s, background .13s;
}
.vi-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.vi-card-thumb {
    width: 46px; aspect-ratio: 2/3; border-radius: 7px; object-fit: cover;
    background: #1b1b22; flex: 0 0 auto;
}
.vi-card-thumb--ph { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.vi-card-mid { flex: 1; min-width: 0; }
.vi-card-title { font-size: 13.5px; font-weight: 800; color: #fff; }
.vi-card-entity { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.vi-card-desc {
    font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vi-card-foot { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px; }
.vi-card-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.vi-st {
    padding: 3px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
}
.vi-st--open { background: rgba(var(--accent-rgb, 88 101 242), 0.18); color: rgb(var(--accent-rgb, 88 101 242)); }
.vi-st--progress { background: rgba(224,163,74,0.16); color: #e0a34a; }
.vi-st--resolved { background: rgba(80,200,120,0.14); color: #6fdb96; }
.vi-prio { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.3); flex: 0 0 auto; }
.vi-prio--high { background: #e0564a; box-shadow: 0 0 8px rgba(224,86,74,0.6); }
.vi-prio--low { background: rgba(255,255,255,0.18); }

/* modals (report + detail) */
.vi-overlay {
    position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center;
    justify-content: center; padding: 24px; background: rgba(5,5,8,0.72); backdrop-filter: blur(8px);
}
.vi-modal {
    width: min(620px, 96vw); max-height: 90vh; display: flex; flex-direction: column;
    background: #101015; border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
    box-shadow: 0 40px 110px rgba(0,0,0,0.7); overflow: hidden;
}
.vi-modal-head {
    padding: 16px 20px; font-size: 15px; font-weight: 900; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.07); position: relative;
}
.vi-modal-head .vmg-close { top: 11px; right: 14px; }
.vi-modal-body { padding: 16px 20px; overflow-y: auto; }
.vi-modal-body::-webkit-scrollbar { width: 8px; }
.vi-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.vi-modal-foot {
    padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.vi-hero { display: flex; gap: 14px; margin-bottom: 14px; }
.vi-hero-art { width: 74px; aspect-ratio: 2/3; border-radius: 9px; object-fit: cover; background: #1b1b22; flex: 0 0 auto; }
.vi-hero-title { font-size: 16px; font-weight: 900; color: #fff; }
.vi-hero-year { font-weight: 600; color: rgba(255,255,255,0.45); }
.vi-hero-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.vi-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vi-tag {
    padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6);
}
.vi-infobar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
    border-radius: 10px; background: rgba(255,255,255,0.035); margin-bottom: 14px;
    font-size: 12px; color: rgba(255,255,255,0.55);
}
.vi-infodates { margin-left: auto; }
.vi-sect { margin-bottom: 14px; }
.vi-sect-h {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.42); margin-bottom: 7px;
}
.vi-issue-title { font-size: 14px; font-weight: 800; color: #fff; }
.vi-issue-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; margin: 6px 0 0; white-space: pre-wrap; }
.vi-file { font-size: 12.5px; color: rgba(255,255,255,0.6); padding: 4px 0; }
.vi-response {
    width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 12px;
    border-radius: 10px; font-size: 13px; font-family: inherit; resize: vertical;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #eef1f7; outline: none;
}
.vi-response:focus { border-color: rgba(var(--accent-rgb, 88 101 242), 0.6); }
.vi-response-ro {
    padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
    background: rgba(var(--accent-rgb, 88 101 242), 0.08);
    border: 1px solid rgba(var(--accent-rgb, 88 101 242), 0.25); color: rgba(255,255,255,0.75);
}
.vi-btn-primary {
    padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer;
    border: none; background: rgb(var(--accent-rgb, 88 101 242)); color: #fff;
}
.vi-btn-primary:disabled { opacity: 0.4; cursor: default; }
.vi-btn-danger { color: #ff7b70; }
.vi-report-entity { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.vi-cats, .vi-prios { display: flex; gap: 8px; flex-wrap: wrap; }
.vi-cat {
    padding: 8px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.75); transition: all .12s;
}
.vi-cat:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vi-cat--on {
    background: rgba(var(--accent-rgb, 88 101 242), 0.2);
    border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); color: #fff;
}
.vmg-report { margin-top: 4px; align-self: flex-start; }

/* ── Settings → Server Connection (video): tame the picker ─────────────────
   The shared .server-logo is width:100% with flex:1 buttons and no size cap —
   fine in music's narrow column, gigantic in this wide settings group. */
[data-video-only] .server-toggle-container { max-width: 420px; }
[data-video-only] .server-toggle-btn { padding: 12px 16px; }
[data-video-only] .server-logo {
    width: auto; max-width: 120px; max-height: 32px; object-fit: contain;
}
[data-video-only] .server-config-container { max-width: 560px; }

/* ── Dashboard system-health strip ─────────────────────────────────────── */
.vdash-health { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
/* the [hidden] attr's UA `display:none` loses to the class rule above, leaving an
   empty flex box + margin — this restores hidden so a healthy strip takes NO space */
.vdash-health[hidden] { display: none; }
.vdash-health-chip {
    padding: 8px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25);
    color: #f5d9a8;
}
.vdash-health-chip--error {
    background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #f5b5b5;
}

/* ── Import subscriptions (ytdl-sub / Kometa) ─────────────────────────────── */
.vwlp-import-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
    color: #eef1f7; background: rgba(255, 59, 59, 0.14); border: 1px solid rgba(255, 59, 59, 0.34);
    transition: background 0.15s ease, transform 0.15s ease;
}
.vwlp-import-btn:hover { background: rgba(255, 59, 59, 0.24); transform: translateY(-1px); }
/* [hidden]'s UA display:none loses to the display:inline-flex above — restore it
   so the button is truly hidden off the Channels tab (same trap as the health strip) */
.vwlp-import-btn[hidden] { display: none; }
.vsub-overlay {
    position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); padding: 20px;
}
.vsub-modal {
    width: min(560px, 96vw); max-height: 88vh; overflow: auto; border-radius: 18px;
    background: #0e0e14; border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); color: #eef1f7;
}
.vsub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 22px 24px 14px; }
.vsub-title { margin: 0; font-size: 19px; font-weight: 800; }
.vsub-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.vsub-x { background: none; border: 0; color: rgba(255, 255, 255, 0.5); font-size: 26px; line-height: 1; cursor: pointer; }
.vsub-x:hover { color: #fff; }
.vsub-body { padding: 6px 24px 24px; }
.vsub-drop {
    border: 2px dashed rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 26px 16px; text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vsub-drop--on { border-color: rgba(255, 59, 59, 0.6); background: rgba(255, 59, 59, 0.06); }
.vsub-drop-ic { font-size: 34px; }
.vsub-drop-t { font-size: 14px; font-weight: 700; margin: 8px 0 12px; }
.vsub-drop-hint { font-size: 11.5px; color: rgba(255, 255, 255, 0.4); margin-top: 12px; }
.vsub-paste {
    width: 100%; margin-top: 14px; border-radius: 10px; padding: 10px 12px; resize: vertical;
    background: #07070b; border: 1px solid rgba(255, 255, 255, 0.1); color: #dfe3ea;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5;
}
.vsub-btn {
    padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #eef1f7;
}
.vsub-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vsub-btn--go { background: #ff3b3b; border-color: #ff3b3b; color: #fff; }
.vsub-btn--go:hover:not(:disabled) { background: #ff5252; }
.vsub-btn--go:disabled { opacity: 0.55; cursor: default; }
.vsub-btn--ghost { background: none; }
.vsub-count { font-size: 14px; margin: 6px 0 12px; }
.vsub-count strong { color: #ff8a8a; font-size: 17px; }
.vsub-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.vsub-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.03); }
.vsub-row-ic { flex: 0 0 auto; }
.vsub-row-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsub-row-kind { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4); }
.vsub-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
    background: rgba(255, 59, 59, 0.16); color: #ff9a9a; white-space: nowrap; }
.vsub-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; align-items: center; }
.vsub-note { flex: 1; font-size: 12px; color: #f5b5b5; }
.vsub-fineprint { font-size: 11px; color: rgba(255, 255, 255, 0.38); margin: 12px 0 0; line-height: 1.5; }
.vsub-prog-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vsub-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff3b3b, #ff7676); transition: width 0.4s ease; }
.vsub-prog-line { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.vsub-tally { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.vsub-chip { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.7); }
.vsub-chip--ok { background: rgba(34, 197, 94, 0.16); color: #7ee0a0; }
.vsub-chip--bad { background: rgba(239, 68, 68, 0.16); color: #f3a1a1; }