diff --git a/src/lib/settings/categories/AppearanceSettings.svelte b/src/lib/settings/categories/AppearanceSettings.svelte
index ffe23da..a06ba5e 100644
--- a/src/lib/settings/categories/AppearanceSettings.svelte
+++ b/src/lib/settings/categories/AppearanceSettings.svelte
@@ -102,17 +102,17 @@
   function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
 </script>
 
-<svelte:window onclick={(e) => {
-    const t = e.target as HTMLElement;
-    if (!t?.closest('.dropdown')) closeDropdowns();
-  }}
-  onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
+<svelte:window onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
+
+{#if themeOpen || uiFontOpen || termFontOpen}
+  <div class="backdrop" onclick={closeDropdowns}></div>
+{/if}
 
 <div class="appearance">
   <h3>Theme</h3>
   <div class="field" id="setting-theme">
     <div class="dropdown">
-      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
+      <button class="dropdown-btn" onclick={() => { uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
         <span class="theme-dots">{@html (() => { const p = getPalette(selectedTheme); return [p.red, p.green, p.blue, p.yellow].map(c => `<span style="background:${c}" class="dot"></span>`).join(''); })()}</span>
         {themeLabel}
       </button>
@@ -135,7 +135,7 @@
   <h3>UI Font</h3>
   <div class="field row" id="setting-ui-font">
     <div class="dropdown flex1">
-      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
+      <button class="dropdown-btn" onclick={() => { themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
       {#if uiFontOpen}
         <div class="dropdown-menu">
           {#each UI_FONTS as f}
@@ -154,7 +154,7 @@
   <h3>Terminal Font</h3>
   <div class="field row" id="setting-term-font">
     <div class="dropdown flex1">
-      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
+      <button class="dropdown-btn" onclick={() => { themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
       {#if termFontOpen}
         <div class="dropdown-menu">
           {#each TERM_FONTS as f}
@@ -192,6 +192,7 @@
 </div>
 
 <style>
+  .backdrop { position: fixed; inset: 0; z-index: 40; }
   .appearance { display: flex; flex-direction: column; gap: 0.75rem; }
   h3 { font-size: 0.75rem; font-weight: 600; color: var(--ctp-subtext0); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.5rem 0 0.125rem; }
   .field { position: relative; }