diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts
index 2be849f..9054fce 100644
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@@ -505,7 +505,15 @@ function renderQueue(): void {
 
     if (queue.length === 0) {
         lastQueueRenderFingerprint = renderFingerprint;
-        list.innerHTML = `<div style="color: var(--text-secondary); font-size: 12px; text-align: center; padding: 15px;">${UI_TEXT.queue.empty}</div>`;
+        // Build the empty state via createElement to keep the renderer
+        // clean of inline-style HTML strings (which the lint hook
+        // flags as a potential XSS surface). The CSS for .queue-empty
+        // lives in styles.css.
+        list.replaceChildren();
+        const empty = document.createElement('div');
+        empty.className = 'queue-empty';
+        empty.textContent = UI_TEXT.queue.empty;
+        list.appendChild(empty);
         return;
     }
 
diff --git a/src/styles.css b/src/styles.css
index c30558f..432fcc1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1930,6 +1930,20 @@ select option {
     line-height: 1.45;
 }
 
+/* Sidebar queue empty state — small dashed-border card matching the
+   sibling streamer-list empty state. */
+.queue-empty {
+    color: var(--text-secondary);
+    font-size: 12px;
+    text-align: center;
+    padding: 14px;
+    border: 1px dashed var(--border-soft);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.02);
+    margin: 4px 0;
+    line-height: 1.4;
+}
+
 /* Old generic scrollbar rules were dead — superseded by the
    purple-themed *::-webkit-scrollbar block further down the file.
    Removed to avoid confusion when someone greps for scrollbar styles. */