diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index dcb0e99..d352fd7 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -778,9 +778,9 @@ async function selectStreamer(name: string, forceRefresh = false): Promise<void>
         <div class="vod-card vod-card-skeleton">
             <div class="vod-skel-thumb"></div>
             <div class="vod-info">
-                <div class="vod-skel-line" style="width: 85%;"></div>
-                <div class="vod-skel-line" style="width: 55%; margin-top: 8px; height: 10px;"></div>
-                <div class="vod-skel-line" style="width: 40%; margin-top: 6px; height: 10px;"></div>
+                <div class="vod-skel-line title"></div>
+                <div class="vod-skel-line meta-1"></div>
+                <div class="vod-skel-line meta-2"></div>
             </div>
         </div>
     `).join('');
diff --git a/src/styles.css b/src/styles.css
index 786f816..c6ed1b0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -562,6 +562,13 @@ body {
     animation: skel-shimmer 1.5s linear infinite;
 }
 
+/* Three skeleton-line variants for the VOD card placeholder — match
+   the visual rhythm of a real card (title line, then two shorter
+   meta lines). Replaces inline width/height/margin-top declarations. */
+.vod-card-skeleton .vod-skel-line.title  { width: 85%; }
+.vod-card-skeleton .vod-skel-line.meta-1 { width: 55%; height: 10px; margin-top: 8px; }
+.vod-card-skeleton .vod-skel-line.meta-2 { width: 40%; height: 10px; margin-top: 6px; }
+
 @keyframes skel-shimmer {
     0%   { background-position: 200% 0; }
     100% { background-position: -200% 0; }