video detail: reuse the artist-hero button + badge styles

- Action buttons now reuse the exact artist-detail classes
  (.library-artist-watchlist-btn + .discog-download-btn/.discog-btn-compact with
  shimmer) instead of bespoke vd-btn styling — identical to the music hero. Wired
  by data-attr (music binds those by id, so no hijack).
- IMDb/TMDB/TVDB source links now render as .artist-hero-badge chips (logo + short
  text fallback, TVDB inverted), matching the artist hero's #artist-hero-badges
  treatment instead of the off-standard text tags.

webui/index.html

@@ -830,8 +830,11 @@
                             <div class="vd-bb-content">
                                 <h1 class="vd-title" data-vd-title>—</h1>
                                 <div class="vd-meta" data-vd-meta></div>
+                                <!-- External-source links reuse the artist-hero-badge style. -->
+                                <div class="artist-hero-badges vd-links" data-vd-links></div>
                                 <p class="vd-overview" data-vd-overview></p>
-                                <div class="vd-actions" data-vd-actions></div>
+                                <!-- Action buttons reuse the exact artist-detail button styles. -->
+                                <div class="vd-actions artist-hero-actions" data-vd-actions></div>
                                 <div class="vd-genres" data-vd-genres></div>
                             </div>
                             <!-- offscreen poster, only used to sample the accent color -->

webui/static/video/video-detail.js

@@ -14,10 +14,22 @@
     'use strict';
 
     var DETAIL_URL = '/api/video/detail/';
+    var TMDB_LOGO = 'https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg';
+    var TVDB_LOGO = 'https://www.svgrepo.com/show/443500/brand-tvdb.svg';
     var data = null;
     var selectedSeason = null;
     var menuOpen = false;
 
+    // Mirrors the music artist-hero badge: logo img with a short text fallback.
+    function badge(logo, fallback, title, url) {
+        var inner = logo
+            ? '<img src="' + logo + '" alt="' + fallback + '" onerror="this.parentNode.textContent=\'' + fallback + '\'">'
+            : '<span style="font-size:9px;font-weight:700;">' + fallback + '</span>';
+        return url
+            ? '<a class="artist-hero-badge" title="' + title + '" href="' + url + '" target="_blank" rel="noopener noreferrer">' + inner + '</a>'
+            : '<div class="artist-hero-badge" title="' + title + '">' + inner + '</div>';
+    }
+
     function esc(s) {
         return String(s == null ? '' : s)
             .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -104,25 +116,29 @@
         if (d.network) meta.push('<span>' + esc(d.network) + '</span>');
         var m = q('[data-vd-meta]'); if (m) m.innerHTML = meta.join('');
 
-        // actions — Netflix buttons + real external links
-        var links = [];
-        if (d.imdb_id) links.push(['IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/']);
-        if (d.tmdb_id) links.push(['TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id]);
-        if (d.tvdb_id) links.push(['TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series']);
+        // Action buttons — reuse the EXACT music artist hero button styles.
         var a = q('[data-vd-actions]');
         if (a) {
             a.innerHTML =
-                '<button class="vd-btn vd-btn--primary" type="button" data-vd-act="watchlist">' +
-                '<span class="vd-btn-ic">＋</span> Watchlist</button>' +
-                '<button class="vd-btn vd-btn--ghost" type="button" data-vd-act="download">' +
-                '<span class="vd-btn-ic">⭳</span> Get Missing</button>' +
-                links.map(function (l) {
-                    return '<a class="vd-btn vd-btn--link" href="' + l[1] + '" target="_blank" rel="noopener">' +
-                        esc(l[0]) + ' ↗</a>';
-                }).join('');
+                '<button class="library-artist-watchlist-btn" type="button" data-vd-act="watchlist">' +
+                '<span class="watchlist-icon">＋</span><span class="watchlist-text">Watchlist</span></button>' +
+                '<button class="discog-download-btn discog-btn-compact" type="button" data-vd-act="download">' +
+                '<span class="discog-btn-icon">⭳</span><span class="discog-btn-text">Get Missing</span>' +
+                '<span class="discog-btn-shimmer"></span></button>';
         }
+
+        // External-source links as artist-hero-badge chips (logo + text fallback).
+        var l = q('[data-vd-links]');
+        if (l) {
+            var badges = [];
+            if (d.imdb_id) badges.push(badge('', 'IMDb', 'IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/'));
+            if (d.tmdb_id) badges.push(badge(TMDB_LOGO, 'TMDB', 'TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id));
+            if (d.tvdb_id) badges.push(badge(TVDB_LOGO, 'TVDB', 'TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series'));
+            l.innerHTML = badges.join('');
+        }
+
         var g = q('[data-vd-genres]');
-        if (g) g.innerHTML = d.network ? '' : '';   // genres land with "capture everything"
+        if (g) g.innerHTML = '';                     // genres land with "capture everything"
     }
 
     // ── season dropdown ───────────────────────────────────────────────────────

webui/static/video/video-side.css

@@ -491,22 +491,12 @@ body[data-side="video"] .dashboard-header-sweep {
     text-shadow: 0 2px 12px rgba(0,0,0,0.6);
     display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 
-.vd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
-.vd-btn {
-    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px;
-    font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
-    text-decoration: none; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
-}
-.vd-btn:hover { transform: translateY(-2px); }
-.vd-btn-ic { font-size: 16px; line-height: 1; }
-.vd-btn--primary { background: rgb(var(--vd-accent-rgb)); color: #fff;
-    box-shadow: 0 8px 24px rgba(var(--vd-accent-rgb), 0.45); }
-.vd-btn--primary:hover { box-shadow: 0 10px 30px rgba(var(--vd-accent-rgb), 0.6); filter: brightness(1.08); }
-.vd-btn--ghost { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.18); backdrop-filter: blur(6px); }
-.vd-btn--ghost:hover { background: rgba(255,255,255,0.26); }
-.vd-btn--link { background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.16);
-    font-size: 13px; padding: 10px 16px; backdrop-filter: blur(6px); }
-.vd-btn--link:hover { background: rgba(0,0,0,0.55); color: #fff; }
+/* 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; }
+.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); }