diff --git a/src/renderer/styles/globals.css b/src/renderer/styles/globals.css
index 4aacc20..d5ca3ac 100644
--- a/src/renderer/styles/globals.css
+++ b/src/renderer/styles/globals.css
@@ -1665,7 +1665,7 @@ button.toolbar__version:hover {
   padding: 0 14px;
   border-radius: 10px;
   border: 1px solid transparent;
-  background: linear-gradient(180deg, var(--input-bg), var(--settings-bg-bottom));
+  background: var(--control-bg);
   color: var(--text-secondary);
   font-size: 9px;
   cursor: pointer;
@@ -1678,7 +1678,7 @@ button.toolbar__version:hover {
 .settings-panel__close:hover {
   color: var(--text-primary);
   border-color: var(--control-border-active);
-  background: linear-gradient(180deg, var(--input-bg-focus), var(--settings-bg-bottom));
+  background: var(--control-bg-hover);
 }
 
 .bottom-bar {
diff --git a/test/renderer-helpers.test.ts b/test/renderer-helpers.test.ts
index e0cae42..02c407b 100644
--- a/test/renderer-helpers.test.ts
+++ b/test/renderer-helpers.test.ts
@@ -2490,6 +2490,21 @@ test('BottomBar theme section renders compact credit metadata and opens valid li
   assert.match(stylesSource, /\.bottom-bar__theme-credit--link \{/)
 })
 
+test('BottomBar close button uses flat themed control backgrounds', async () => {
+  const stylesSource = await readFile(join(process.cwd(), 'src', 'renderer', 'styles', 'globals.css'), 'utf8')
+  const closeBlock = [...stylesSource.matchAll(/^\.settings-panel__close \{([\s\S]*?)\n\}/gm)]
+    .map((match) => match[1])
+    .find((block) => block.includes('min-height: 34px;'))
+  const closeHoverBlock = stylesSource.match(/\.settings-panel__close:hover \{([\s\S]*?)\n\}/)?.[1]
+
+  assert.ok(closeBlock)
+  assert.ok(closeHoverBlock)
+  assert.match(closeBlock, /background: var\(--control-bg\);/)
+  assert.match(closeHoverBlock, /background: var\(--control-bg-hover\);/)
+  assert.doesNotMatch(closeBlock, /linear-gradient/)
+  assert.doesNotMatch(closeHoverBlock, /linear-gradient/)
+})
+
 test('toolbar uses the Prism logo support link and static package icons are configured', async () => {
   const toolbarSource = await readFile(join(process.cwd(), 'src', 'renderer', 'components', 'Toolbar.tsx'), 'utf8')
   const stylesSource = await readFile(join(process.cwd(), 'src', 'renderer', 'styles', 'globals.css'), 'utf8')