Restructure settings into collapsible groups, fix dark theme hardcoded colors

Settings panel reorganized into 5 collapsible sections: Agent Models,
Models & Providers, API Keys, Agent Settings, Theme.

Replace hardcoded color values (white, #666, #888, #fff, #bbb, rgba(255,...))
with CSS variables (var(--bg-primary), var(--border-primary), var(--text-muted),
var(--theme-accent)) for proper dark theme support. Style checkboxes, dropdowns,
number inputs, and panel headers/buttons to be theme-aware.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app.js

@@ -263,6 +263,17 @@ function initializeEventListeners() {
         });
     }
 
+    // Settings group collapse/expand
+    document.addEventListener('click', (e) => {
+        const header = e.target.closest('.settings-group-header');
+        if (!header) return;
+        const group = header.closest('.settings-group');
+        if (!group) return;
+        group.classList.toggle('collapsed');
+        const toggle = header.querySelector('.widget-collapse-toggle');
+        if (toggle) toggle.classList.toggle('collapsed');
+    });
+
     // Double-click on collapse toggle: collapse/uncollapse all widgets in the same chat
     document.addEventListener('dblclick', (e) => {
         const toggle = e.target.closest('.widget-collapse-toggle');

frontend/index.html

@@ -215,152 +215,176 @@
         </div>
         <div class="settings-panel-body" id="settingsPanelBody">
             <div class="settings-body">
-                <!-- Providers Section -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">PROVIDERS</span>
-                        <span class="label-description">API endpoints for LLM services (OpenAI, local vLLM, etc.)</span>
-                    </label>
-                    <div id="providers-list" class="settings-list"></div>
-                    <button type="button" class="settings-add-btn" onclick="showProviderDialog()">+ Add Provider</button>
-                </div>
-
-                <!-- Models Section -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">MODELS</span>
-                        <span class="label-description">Models available from your providers</span>
-                    </label>
-                    <div id="models-list" class="settings-list"></div>
-                    <button type="button" class="settings-add-btn" onclick="showModelDialog()">+ Add Model</button>
-                </div>
-
-                <!-- Agent Model Selection -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">AGENT MODELS</span>
-                        <span class="label-description">Select which model to use for each agent type</span>
-                    </label>
-                    <div class="agent-models-grid" id="agentModelsGrid">
-                        <!-- Generated dynamically from AGENT_REGISTRY -->
+                <!-- 1. Agent Models -->
+                <div class="settings-group">
+                    <div class="settings-group-header">
+                        <div class="widget-collapse-toggle"></div>
+                        <span class="settings-group-title">Agent Models</span>
+                    </div>
+                    <div class="settings-group-body">
+                        <div class="settings-section">
+                            <div class="agent-models-grid" id="agentModelsGrid">
+                                <!-- Generated dynamically from AGENT_REGISTRY -->
+                            </div>
+                        </div>
                     </div>
                 </div>
 
-                <!-- Service API Keys -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">E2B API KEY (OPTIONAL)</span>
-                        <span class="label-description">Required for code execution in CODE agents</span>
-                    </label>
-                    <input type="password" id="setting-e2b-key" class="settings-input" placeholder="Leave empty if not using code execution">
-                </div>
-
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">SERPER API KEY (OPTIONAL)</span>
-                        <span class="label-description">Required for web search in RESEARCH agents</span>
-                    </label>
-                    <input type="password" id="setting-serper-key" class="settings-input" placeholder="Leave empty if not using research">
-                </div>
-
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">HUGGINGFACE TOKEN (OPTIONAL)</span>
-                        <span class="label-description">Required for image generation in IMAGE agents</span>
-                    </label>
-                    <input type="password" id="setting-hf-token" class="settings-input" placeholder="Leave empty to use provider token">
-                </div>
-
-                <!-- Image Model Settings -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">IMAGE GENERATION MODEL (OPTIONAL)</span>
-                        <span class="label-description">Model for text-to-image generation in IMAGE agents</span>
-                    </label>
-                    <select id="setting-image-gen-model" class="settings-select"></select>
-                </div>
-
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">IMAGE EDIT MODEL (OPTIONAL)</span>
-                        <span class="label-description">Model for image-to-image editing in IMAGE agents</span>
-                    </label>
-                    <select id="setting-image-edit-model" class="settings-select"></select>
-                </div>
-
-                <!-- Research Settings -->
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">RESEARCH SUB-AGENT MODEL (OPTIONAL)</span>
-                        <span class="label-description">Smaller/faster model for analyzing web pages during research</span>
-                    </label>
-                    <select id="setting-research-sub-agent-model" class="settings-select"></select>
-                </div>
-
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">RESEARCH PARALLEL WORKERS (OPTIONAL)</span>
-                        <span class="label-description">Number of web pages to analyze in parallel (default: 8)</span>
-                    </label>
-                    <input type="number" id="setting-research-parallel-workers" class="settings-input" placeholder="8" min="1" max="20">
-                </div>
-
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">RESEARCH MAX WEBSITES (OPTIONAL)</span>
-                        <span class="label-description">Maximum number of websites to analyze per research session (default: 50)</span>
-                    </label>
-                    <input type="number" id="setting-research-max-websites" class="settings-input" placeholder="50" min="10" max="200">
+                <!-- 2. Models & Providers -->
+                <div class="settings-group collapsed">
+                    <div class="settings-group-header">
+                        <div class="widget-collapse-toggle collapsed"></div>
+                        <span class="settings-group-title">Models & Providers</span>
+                    </div>
+                    <div class="settings-group-body">
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">PROVIDERS</span>
+                                <span class="label-description">API endpoints for LLM services</span>
+                            </label>
+                            <div id="providers-list" class="settings-list"></div>
+                            <button type="button" class="settings-add-btn" onclick="showProviderDialog()">+ Add Provider</button>
+                        </div>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">MODELS</span>
+                                <span class="label-description">Models available from your providers</span>
+                            </label>
+                            <div id="models-list" class="settings-list"></div>
+                            <button type="button" class="settings-add-btn" onclick="showModelDialog()">+ Add Model</button>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="settings-section">
-                    <label class="settings-label">
-                        <span class="label-text">THEME COLOR</span>
-                        <span class="label-description">Color theme for action widgets and accents</span>
-                    </label>
-                    <div class="theme-color-picker" id="theme-color-picker">
-                        <div class="theme-option" data-theme="forest">
-                            <div class="theme-preview" style="border-color: #1b5e20; background: #e8f5e9;"></div>
-                            <span class="theme-name">Forest</span>
-                        </div>
-                        <div class="theme-option" data-theme="sapphire">
-                            <div class="theme-preview" style="border-color: #0d47a1; background: #e3f2fd;"></div>
-                            <span class="theme-name">Sapphire</span>
+                <!-- 3. API Keys -->
+                <div class="settings-group collapsed">
+                    <div class="settings-group-header">
+                        <div class="widget-collapse-toggle collapsed"></div>
+                        <span class="settings-group-title">API Keys</span>
+                    </div>
+                    <div class="settings-group-body">
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">E2B API KEY</span>
+                                <span class="label-description">Required for code execution in CODE agents</span>
+                            </label>
+                            <input type="password" id="setting-e2b-key" class="settings-input" placeholder="Leave empty if not using code execution">
                         </div>
-                        <div class="theme-option" data-theme="ocean">
-                            <div class="theme-preview" style="border-color: #00796b; background: #e0f2f1;"></div>
-                            <span class="theme-name">Ocean</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">SERPER API KEY</span>
+                                <span class="label-description">Required for web search in RESEARCH agents</span>
+                            </label>
+                            <input type="password" id="setting-serper-key" class="settings-input" placeholder="Leave empty if not using research">
                         </div>
-                        <div class="theme-option" data-theme="midnight">
-                            <div class="theme-preview" style="border-color: #283593; background: #e8eaf6;"></div>
-                            <span class="theme-name">Midnight</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">HUGGINGFACE TOKEN</span>
+                                <span class="label-description">Required for image generation in IMAGE agents</span>
+                            </label>
+                            <input type="password" id="setting-hf-token" class="settings-input" placeholder="Leave empty to use provider token">
                         </div>
-                        <div class="theme-option" data-theme="steel">
-                            <div class="theme-preview" style="border-color: #455a64; background: #eceff1;"></div>
-                            <span class="theme-name">Steel</span>
+                    </div>
+                </div>
+
+                <!-- 4. Agent Settings -->
+                <div class="settings-group collapsed">
+                    <div class="settings-group-header">
+                        <div class="widget-collapse-toggle collapsed"></div>
+                        <span class="settings-group-title">Agent Settings</span>
+                    </div>
+                    <div class="settings-group-body">
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">IMAGE GENERATION MODEL</span>
+                                <span class="label-description">Model for text-to-image generation</span>
+                            </label>
+                            <select id="setting-image-gen-model" class="settings-select"></select>
                         </div>
-                        <div class="theme-option" data-theme="depths">
-                            <div class="theme-preview" style="border-color: #01579b; background: #e3f2fd;"></div>
-                            <span class="theme-name">Depths</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">IMAGE EDIT MODEL</span>
+                                <span class="label-description">Model for image-to-image editing</span>
+                            </label>
+                            <select id="setting-image-edit-model" class="settings-select"></select>
                         </div>
-                        <div class="theme-option" data-theme="ember">
-                            <div class="theme-preview" style="border-color: #b71c1c; background: #fbe9e7;"></div>
-                            <span class="theme-name">Ember</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">RESEARCH SUB-AGENT MODEL</span>
+                                <span class="label-description">Smaller/faster model for analyzing web pages during research</span>
+                            </label>
+                            <select id="setting-research-sub-agent-model" class="settings-select"></select>
                         </div>
-                        <div class="theme-option" data-theme="noir">
-                            <div class="theme-preview" style="border-color: #888888; background: #111111;"></div>
-                            <span class="theme-name">Noir</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">RESEARCH PARALLEL WORKERS</span>
+                                <span class="label-description">Number of web pages to analyze in parallel (default: 8)</span>
+                            </label>
+                            <input type="number" id="setting-research-parallel-workers" class="settings-input" placeholder="8" min="1" max="20">
                         </div>
-                        <div class="theme-option" data-theme="eclipse">
-                            <div class="theme-preview" style="border-color: #5c9eff; background: #0b1118;"></div>
-                            <span class="theme-name">Eclipse</span>
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">RESEARCH MAX WEBSITES</span>
+                                <span class="label-description">Max websites to analyze per session (default: 50)</span>
+                            </label>
+                            <input type="number" id="setting-research-max-websites" class="settings-input" placeholder="50" min="10" max="200">
                         </div>
-                        <div class="theme-option" data-theme="terminal">
-                            <div class="theme-preview" style="border-color: #00cc00; background: #0a0a0a;"></div>
-                            <span class="theme-name">Terminal</span>
+                    </div>
+                </div>
+
+                <!-- 5. Theme -->
+                <div class="settings-group collapsed">
+                    <div class="settings-group-header">
+                        <div class="widget-collapse-toggle collapsed"></div>
+                        <span class="settings-group-title">Theme</span>
+                    </div>
+                    <div class="settings-group-body">
+                        <div class="settings-section">
+                            <div class="theme-color-picker" id="theme-color-picker">
+                                <div class="theme-option" data-theme="forest">
+                                    <div class="theme-preview" style="border-color: #1b5e20; background: #e8f5e9;"></div>
+                                    <span class="theme-name">Forest</span>
+                                </div>
+                                <div class="theme-option" data-theme="sapphire">
+                                    <div class="theme-preview" style="border-color: #0d47a1; background: #e3f2fd;"></div>
+                                    <span class="theme-name">Sapphire</span>
+                                </div>
+                                <div class="theme-option" data-theme="ocean">
+                                    <div class="theme-preview" style="border-color: #00796b; background: #e0f2f1;"></div>
+                                    <span class="theme-name">Ocean</span>
+                                </div>
+                                <div class="theme-option" data-theme="midnight">
+                                    <div class="theme-preview" style="border-color: #283593; background: #e8eaf6;"></div>
+                                    <span class="theme-name">Midnight</span>
+                                </div>
+                                <div class="theme-option" data-theme="steel">
+                                    <div class="theme-preview" style="border-color: #455a64; background: #eceff1;"></div>
+                                    <span class="theme-name">Steel</span>
+                                </div>
+                                <div class="theme-option" data-theme="depths">
+                                    <div class="theme-preview" style="border-color: #01579b; background: #e3f2fd;"></div>
+                                    <span class="theme-name">Depths</span>
+                                </div>
+                                <div class="theme-option" data-theme="ember">
+                                    <div class="theme-preview" style="border-color: #b71c1c; background: #fbe9e7;"></div>
+                                    <span class="theme-name">Ember</span>
+                                </div>
+                                <div class="theme-option" data-theme="noir">
+                                    <div class="theme-preview" style="border-color: #888888; background: #111111;"></div>
+                                    <span class="theme-name">Noir</span>
+                                </div>
+                                <div class="theme-option" data-theme="eclipse">
+                                    <div class="theme-preview" style="border-color: #5c9eff; background: #0b1118;"></div>
+                                    <span class="theme-name">Eclipse</span>
+                                </div>
+                                <div class="theme-option" data-theme="terminal">
+                                    <div class="theme-preview" style="border-color: #00cc00; background: #0a0a0a;"></div>
+                                    <span class="theme-name">Terminal</span>
+                                </div>
+                            </div>
+                            <input type="hidden" id="setting-theme-color" value="forest">
                         </div>
                     </div>
-                    <input type="hidden" id="setting-theme-color" value="forest">
                 </div>
 
                 <div class="settings-actions">

frontend/style.css

@@ -264,7 +264,7 @@ body {
 
 .menu-item:hover {
     background: var(--theme-accent);
-    color: white;
+    color: var(--bg-primary);
 }
 
 /* Content Area */
@@ -388,9 +388,34 @@ body {
 }
 
 .sidebar-checkbox input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
     margin: 0;
+    border: 1px solid var(--text-muted);
+    background: transparent;
     cursor: pointer;
-    accent-color: var(--theme-accent);
+    position: relative;
+    flex-shrink: 0;
+}
+
+.sidebar-checkbox input[type="checkbox"]:checked {
+    background: var(--theme-accent);
+    border-color: var(--theme-accent);
+}
+
+.sidebar-checkbox input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 1px;
+    width: 3px;
+    height: 6px;
+    border: solid var(--bg-primary);
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(45deg);
 }
 
 /* Timeline Widget */
@@ -1540,11 +1565,48 @@ pre code [class*="token"] {
 
 .settings-body {
     flex: 1;
-    padding: 40px;
+    padding: 16px;
     overflow-y: auto;
     max-width: 800px;
 }
 
+/* Collapsible settings groups */
+.settings-group {
+    margin-bottom: 6px;
+}
+
+.settings-group-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    background: var(--theme-accent);
+    cursor: pointer;
+    user-select: none;
+}
+
+.settings-group-header:hover {
+    opacity: 0.9;
+}
+
+.settings-group-title {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--bg-primary);
+}
+
+.settings-group-body {
+    padding: 12px 12px 4px;
+    border: 1px solid var(--border-primary);
+    border-top: none;
+}
+
+.settings-group.collapsed .settings-group-body {
+    display: none;
+}
+
 .settings-section {
     margin-bottom: 16px;
 }
@@ -1573,13 +1635,20 @@ pre code [class*="token"] {
     width: 100%;
     padding: 6px 8px;
     border: 1px solid var(--border-primary);
-    border-radius: 3px;
+    border-radius: 0;
     font-family: inherit;
     font-size: 11px;
     background: var(--bg-secondary);
     color: var(--text-primary);
     outline: none;
     transition: border-color 0.15s ease;
+    -moz-appearance: textfield;
+}
+
+.settings-input::-webkit-outer-spin-button,
+.settings-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
 
 .settings-input:focus {
@@ -1686,7 +1755,7 @@ pre code [class*="token"] {
 
 .settings-save-btn {
     background: var(--theme-accent);
-    color: white;
+    color: var(--bg-primary);
     border-color: var(--theme-accent);
 }
 
@@ -2138,7 +2207,7 @@ pre code [class*="token"] {
     top: 0;
     bottom: 0;
     width: 1px;
-    background: #666;
+    background: var(--border-primary);
 }
 
 .query-tree {
@@ -2153,7 +2222,7 @@ pre code [class*="token"] {
     top: 10px;
     width: 12px;
     height: 1px;
-    background: #666;
+    background: var(--border-primary);
 }
 
 .query-tree.last::after {
@@ -2210,7 +2279,7 @@ pre code [class*="token"] {
     top: 0;
     bottom: 0;
     width: 1px;
-    background: #888;
+    background: var(--border-primary);
 }
 
 /* Tree structure for sources */
@@ -2226,7 +2295,7 @@ pre code [class*="token"] {
     top: 10px;
     width: 12px;
     height: 1px;
-    background: #888;
+    background: var(--border-primary);
 }
 
 .source-tree-node.last::after {
@@ -2798,7 +2867,7 @@ pre code [class*="token"] {
     margin: 0;
     font-size: 10px;
     font-weight: 500;
-    color: white;
+    color: var(--bg-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     flex: 1;
@@ -2808,7 +2877,7 @@ pre code [class*="token"] {
     background: none;
     border: none;
     font-size: 16px;
-    color: white;
+    color: var(--bg-primary);
     cursor: pointer;
     padding: 0;
     width: 20px;
@@ -2977,14 +3046,15 @@ pre code [class*="token"] {
     margin: 0;
     font-size: 10px;
     font-weight: 500;
-    color: white;
+    color: var(--bg-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .settings-path {
     font-size: 9px;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--bg-primary);
+    opacity: 0.6;
     font-weight: 400;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2997,7 +3067,7 @@ pre code [class*="token"] {
     background: none;
     border: none;
     font-size: 16px;
-    color: white;
+    color: var(--bg-primary);
     cursor: pointer;
     padding: 0;
     width: 20px;
@@ -3133,7 +3203,7 @@ pre code [class*="token"] {
     width: 100%;
     padding: 5px 24px 5px 8px;
     border: 1px solid var(--border-primary);
-    border-radius: 3px;
+    border-radius: 0;
     font-family: inherit;
     font-size: 10px;
     background: var(--bg-card);
@@ -3150,7 +3220,7 @@ pre code [class*="token"] {
 }
 
 .settings-select:hover {
-    border-color: #bbb;
+    border-color: var(--theme-accent);
 }
 
 .settings-select:focus {
@@ -3211,7 +3281,7 @@ pre code [class*="token"] {
     margin: 0;
     font-size: 10px;
     font-weight: 500;
-    color: white;
+    color: var(--bg-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -3220,7 +3290,7 @@ pre code [class*="token"] {
     background: none;
     border: none;
     font-size: 14px;
-    color: white;
+    color: var(--bg-primary);
     cursor: pointer;
     padding: 0;
     width: 20px;
@@ -3323,7 +3393,7 @@ pre code [class*="token"] {
     margin: 0;
     font-size: 10px;
     font-weight: 500;
-    color: white;
+    color: var(--bg-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -3340,7 +3410,8 @@ pre code [class*="token"] {
     align-items: center;
     gap: 4px;
     font-size: 9px;
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--bg-primary);
+    opacity: 0.8;
     cursor: pointer;
 }
 
@@ -3349,16 +3420,18 @@ pre code [class*="token"] {
     -webkit-appearance: none;
     width: 12px;
     height: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    border: 1px solid var(--bg-primary);
     border-radius: 2px;
     background: transparent;
     cursor: pointer;
     position: relative;
+    opacity: 0.5;
 }
 
 .files-show-hidden input[type="checkbox"]:checked {
     background: var(--bg-card);
-    border-color: white;
+    border-color: var(--bg-primary);
+    opacity: 1;
 }
 
 .files-show-hidden input[type="checkbox"]:checked::after {
@@ -3375,7 +3448,7 @@ pre code [class*="token"] {
 .files-refresh-btn {
     background: none;
     border: none;
-    color: white;
+    color: var(--bg-primary);
     font-size: 13px;
     cursor: pointer;
     padding: 2px 4px;
@@ -3392,7 +3465,7 @@ pre code [class*="token"] {
     background: none;
     border: none;
     font-size: 16px;
-    color: white;
+    color: var(--bg-primary);
     cursor: pointer;
     padding: 0;
     width: 20px;
@@ -3720,7 +3793,7 @@ pre code [class*="token"] {
     transform: translateY(-50%);
     background: transparent;
     border: none;
-    color: #bbb;
+    color: var(--text-muted);
     font-size: 13px;
     cursor: pointer;
     padding: 0;
@@ -3787,7 +3860,7 @@ pre code [class*="token"] {
 }
 
 .session-existing select:hover {
-    border-color: #bbb;
+    border-color: var(--theme-accent);
 }
 
 .session-existing select:focus {
@@ -3831,7 +3904,7 @@ pre code [class*="token"] {
     margin: 0;
     font-size: 10px;
     font-weight: 500;
-    color: white;
+    color: var(--bg-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -3840,7 +3913,7 @@ pre code [class*="token"] {
     background: none;
     border: none;
     font-size: 16px;
-    color: white;
+    color: var(--bg-primary);
     cursor: pointer;
     padding: 0;
     width: 20px;
@@ -3909,7 +3982,7 @@ pre code [class*="token"] {
 .sessions-new-input button:not(.session-regenerate-btn) {
     padding: 5px 10px;
     background: var(--theme-accent);
-    color: white;
+    color: var(--bg-primary);
     border: none;
     border-radius: 3px;
     font-size: 10px;
@@ -4117,7 +4190,7 @@ pre code [class*="token"] {
     height: 400px;
     border: 1px solid var(--border-primary);
     border-radius: 4px;
-    background: #fff;
+    background: var(--bg-primary);
 }
 
 .search-results-content {