cleanup: extract .vod-filter-row CSS class — kill 3 inline style attrs

The filter row above the VOD grid carried three inline style attributes:
- the row's own flex layout (display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap)
- vodSortLabel had margin-left:8px (extra spacing past the row's gap to visually group "Sort:" with the select)
- vodFilterCount had min-width:80px (prevents layout shift as count text changes during typing)

All three are now CSS class definitions (.vod-filter-row, .vod-sort-label, .vod-filter-count). HTML reads cleaner and the styling lives alongside the related .vod-bulk-bar block in styles.css.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/index.html

@@ -261,10 +261,10 @@
                 <!-- VODs Tab -->
                 <div class="tab-content active" id="vodsTab">
                     <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
-                    <div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
+                    <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
-                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel" style="margin-left:8px;">Sort:</label>
+                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel vod-sort-label">Sort:</label>
                         <select id="vodSortSelect" class="select-compact" onchange="onVodSortChange()">
                             <option value="date_desc">Newest first</option>
                             <option value="date_asc">Oldest first</option>
@@ -272,7 +272,7 @@
                             <option value="duration_desc">Longest first</option>
                             <option value="duration_asc">Shortest first</option>
                         </select>
-                        <span id="vodFilterCount" class="form-sublabel" style="min-width:80px;"></span>
+                        <span id="vodFilterCount" class="form-sublabel vod-filter-count"></span>
                         <label id="vodHideDownloadedLabel" class="inline-toggle" title="">
                             <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
                             <span id="vodHideDownloadedText">Hide downloaded</span>

src/styles.css

@@ -160,6 +160,24 @@ body {
     font-weight: 600;
 }
 
+/* VOD filter row — sits above the grid: filter input, clear, sort, count, hide-toggle.
+   Previously every property was inline-styled on the <div> in index.html. */
+.vod-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+
+.vod-filter-row .vod-sort-label {
+    margin-left: 8px;
+}
+
+.vod-filter-row .vod-filter-count {
+    min-width: 80px;
+}
+
 /* ============================================
    VOD BULK-ACTION BAR — slides in when 1+ VOD is selected
    ============================================