diff --git a/src/lib/settings/categories/AppearanceSettings.svelte b/src/lib/settings/categories/AppearanceSettings.svelte
index 1b762f2..ffe23da 100644
--- a/src/lib/settings/categories/AppearanceSettings.svelte
+++ b/src/lib/settings/categories/AppearanceSettings.svelte
@@ -102,14 +102,17 @@
   function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
 </script>
 
-<svelte:window onclick={(e) => { if (!(e.target as HTMLElement)?.closest('.dropdown')) closeDropdowns(); }}
+<svelte:window onclick={(e) => {
+    const t = e.target as HTMLElement;
+    if (!t?.closest('.dropdown')) closeDropdowns();
+  }}
   onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
 
 <div class="appearance">
   <h3>Theme</h3>
   <div class="field" id="setting-theme">
     <div class="dropdown">
-      <button class="dropdown-btn" onclick={() => { closeDropdowns(); themeOpen = !themeOpen; }}>
+      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); 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>
@@ -132,7 +135,7 @@
   <h3>UI Font</h3>
   <div class="field row" id="setting-ui-font">
     <div class="dropdown flex1">
-      <button class="dropdown-btn" onclick={() => { closeDropdowns(); uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
+      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; termFontOpen = false; uiFontOpen = !uiFontOpen; }}>{uiFontLabel}</button>
       {#if uiFontOpen}
         <div class="dropdown-menu">
           {#each UI_FONTS as f}
@@ -151,7 +154,7 @@
   <h3>Terminal Font</h3>
   <div class="field row" id="setting-term-font">
     <div class="dropdown flex1">
-      <button class="dropdown-btn" onclick={() => { closeDropdowns(); termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
+      <button class="dropdown-btn" onclick={(e) => { e.stopPropagation(); themeOpen = false; uiFontOpen = false; termFontOpen = !termFontOpen; }}>{termFontLabel}</button>
       {#if termFontOpen}
         <div class="dropdown-menu">
           {#each TERM_FONTS as f}