diff --git a/src/index.html b/src/index.html
index e850589..32edc7f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -221,9 +221,9 @@
                     <span id="streamerSectionTitleText">Streamer</span>
                     <span id="streamerSectionCounter" class="streamer-section-counter"></span>
                 </span>
-                <button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
+                <button id="btnStreamerBulkRemove" class="btn-close is-hidden" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove">x</button>
             </div>
-            <input type="text" id="streamerListFilter" class="filter-input compact" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none;">
+            <input type="text" id="streamerListFilter" class="filter-input compact is-hidden" placeholder="Filter..." oninput="onStreamerListFilterChange()">
             <div class="streamers" id="streamerList"></div>
 
             <div class="queue-section">
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 34de2ed..c2ef35c 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -421,7 +421,7 @@ function renderStreamers(): void {
     const filterInput = document.getElementById('streamerListFilter') as HTMLInputElement | null;
     const sectionTitle = document.getElementById('streamerSectionTitle');
     const showFilter = all.length >= STREAMER_FILTER_THRESHOLD;
-    if (filterInput) filterInput.style.display = showFilter ? '' : 'none';
+    if (filterInput) filterInput.classList.toggle('is-hidden', !showFilter);
     // Compact title margin when filter is shown — avoids double gap.
     if (sectionTitle) sectionTitle.classList.toggle('compact', showFilter);
 
@@ -436,7 +436,7 @@ function renderStreamers(): void {
         const counter = document.getElementById('streamerSectionCounter');
         if (counter) counter.textContent = '';
         const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-        if (bulkBtn) bulkBtn.style.display = 'none';
+        if (bulkBtn) bulkBtn.classList.add('is-hidden');
         return;
     }
 
@@ -596,7 +596,7 @@ function renderStreamers(): void {
 
     // Reveal bulk-remove button only above the filter threshold.
     const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-    if (bulkBtn) bulkBtn.style.display = all.length >= STREAMER_FILTER_THRESHOLD ? '' : 'none';
+    if (bulkBtn) bulkBtn.classList.toggle('is-hidden', all.length < STREAMER_FILTER_THRESHOLD);
 
     initStreamerDragDrop();
 }