diff --git a/index.html b/index.html
index dbed326..743ab42 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta name="author" content="Arpit Pandey">
 
     <link rel="icon" type="image/svg+xml"
-        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><style>.icon { fill: %230f172a; } @media (prefers-color-scheme: dark) { .icon { fill: %23ffffff; } }</style><path class='icon' d='M20.5 4H3.5C2.12 4 1 5.12 1 6.5v11C1 18.88 2.12 20 3.5 20h17c1.38 0 2.5-1.12 2.5-2.5v-11C23 5.12 21.88 4 20.5 4zM6 16v-5.5L4.5 12 3 10.5V16H1V8h2l3 3 3-3h2v8H6zm14-1l-4.5 4.5L11 15h3V8h3v7h3z'/></svg>">
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><style>.icon { fill: %230f172a; } @media (prefers-color-scheme: dark) { .icon { fill: %23ffffff; } }</style><path class='icon' d='M20.5 4H3.5C2.12 4 1 5.12 1 6.5v11C1 18.88 2.12 20 3.5 20h17c1.38 0 2.5-1.12 2.5-2.5v-11C23 5.12 21.88 4 20.5 4zM6 16v-5.5L4.5 12 3 10.5V16H1V8h2l3 3 3-3h2v8H6zm14-1l-4.5 4.5L11 15h3v7h3z'/></svg>">
 
     <link
         href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Fredoka:wght@300..700&family=Playpen+Sans:wght@100..800&family=Kalam:wght@300;400;700&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Delius&display=swap"
@@ -40,6 +40,13 @@
         })();
     </script>
 
+    <div id="minimal-header-strip" class="minimal-header">
+        <div class="brand">Markdown Studio</div>
+        <button id="btn-settings-minimal" class="pill-action-btn" data-tooltip="Settings">
+            <i data-lucide="settings" style="width: 16px; height: 16px;"></i>
+        </button>
+    </div>
+
     <header class="navbar">
         <div class="action-pill-group mobile-only" style="margin-left: -8px;">
             <button id="mobile-menu-btn" class="pill-action-btn" data-tooltip="Menu">
@@ -238,16 +245,15 @@ <h3>Menu</h3>
         <div class="status-bar">
             <div class="sb-section" id="sb-left-controls">
                 <div class="action-pill-group" style="padding: 4px 12px; gap: 12px;">
+                    <button id="btn-exit-focus-status" class="pill-action-btn" data-tooltip="Exit Focus Mode" style="display: none; background: var(--accent-color); color: var(--btn-text); opacity: 1;">
+                        <i data-lucide="minimize" style="width: 14px; height: 14px;"></i>
+                    </button>
                     <span id="active-mode-indicator"
                         style="font-weight: 600; color: var(--accent-color); display: flex; align-items: center; gap: 6px; font-size: 0.75rem;">
                         <i data-lucide="hard-drive" style="width:14px; height:14px;"></i> Local
                     </span>
                     <div class="toolbar-divider" style="height: 12px; margin: 0; opacity: 0.3;"></div>
                     <span id="stat-line-col" style="opacity: 0.8;">Line 1, Col 1</span>
-                    <div class="toolbar-divider" id="manual-save-divider" style="height: 12px; margin: 0; opacity: 0.3; display: none;"></div>
-                    <button id="btn-manual-save" class="pill-action-btn" style="display: none; padding: 2px 8px; font-size: 0.7rem; gap: 4px; background: var(--accent-color); color: white; border-radius: 6px;">
-                        <i data-lucide="save" style="width: 12px; height: 12px;"></i> Save
-                    </button>
                 </div>
             </div>
 
@@ -273,6 +279,10 @@ <h3>Menu</h3>
         </div>
     </main>
 
+    <button id="btn-exit-focus-floating" class="floating-exit-btn" data-tooltip="Exit Focus Mode" style="display: none;">
+        <i data-lucide="minimize" style="width: 20px; height: 20px;"></i>
+    </button>
+
     <!-- Settings Modal -->
     <div class="modal-overlay" id="settings-modal" style="z-index: 5000;">
         <div class="modal-box settings-modal-box">
@@ -285,10 +295,10 @@ <h3>Menu</h3>
                         <i data-lucide="layout"></i> UI Components
                     </div>
                     <div class="settings-nav-item" data-section="editor">
-                        <i data-lucide="file-edit"></i> Editor Settings
+                        <i data-lucide="file-edit"></i> Editor Controls
                     </div>
-                    <div class="settings-nav-item" data-section="interface">
-                        <i data-lucide="mouse-pointer"></i> Interface Controls
+                    <div class="settings-nav-item" data-section="status">
+                        <i data-lucide="mouse-pointer"></i> Status Bar
                     </div>
                 </nav>
 
@@ -327,6 +337,26 @@ <h3>UI Components</h3>
                                 <span class="slider"></span>
                             </label>
                         </div>
+                        <div class="setting-card">
+                            <div class="setting-details">
+                                <span class="setting-card-title">Action Buttons</span>
+                                <span class="setting-card-desc">Show Share, PDF, and other buttons in navbar.</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" id="toggle-top-actions" checked data-component=".navbar .action-pill-group.desktop-only .pill-action-btn:not(#btn-settings)">
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-card">
+                            <div class="setting-details">
+                                <span class="setting-card-title">Local / Cloud Mode Toggle</span>
+                                <span class="setting-card-desc">Show the mode switch in the top bar.</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" id="toggle-top-mode" checked data-component="#nav-mode-toggle">
+                                <span class="slider"></span>
+                            </label>
+                        </div>
                         <div class="setting-card">
                             <div class="setting-details">
                                 <span class="setting-card-title">Editor Toolbar</span>
@@ -352,7 +382,7 @@ <h3>UI Components</h3>
 
                 <div class="settings-content" id="settings-section-editor">
                     <div class="settings-content-header">
-                        <h3>Editor Settings</h3>
+                        <h3>Editor Controls</h3>
                         <p>Fine-tune formatting tools and editor features.</p>
                     </div>
                     <div class="settings-grid">
@@ -362,86 +392,116 @@ <h3>Editor Settings</h3>
                                 <span class="setting-card-desc">Toggle Bold, Italic and Heading tools.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1), .editor-toolbar [data-action='heading']">
+                                <input type="checkbox" id="toggle-toolbar-format" checked data-component=".editor-toolbar .toolbar-group:nth-child(1)">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Font Picker</span>
-                                <span class="setting-card-desc">Show the typography selection dropdown.</span>
+                                <span class="setting-card-title">Alignment Tools</span>
+                                <span class="setting-card-desc">Toggle Left, Center and Right alignment tools.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-toolbar-font" checked data-component="#font-dropdown">
+                                <input type="checkbox" id="toggle-toolbar-align" checked data-component=".editor-toolbar .toolbar-group:nth-child(2)">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Focus Mode</span>
-                                <span class="setting-card-desc">Show the focus mode button in the toolbar.</span>
+                                <span class="setting-card-title">Insert Tools</span>
+                                <span class="setting-card-desc">Toggle Link, Image, Code, Table and Math tools.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-toolbar-focus" checked data-component="#btn-focus-mode">
+                                <input type="checkbox" id="toggle-toolbar-insert" checked data-component=".editor-toolbar .toolbar-group:nth-child(3)">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Sync Scroll</span>
-                                <span class="setting-card-desc">Show the scroll sync toggle button.</span>
+                                <span class="setting-card-title">Editor Control Tools</span>
+                                <span class="setting-card-desc">Toggle Font Picker, Focus Mode, and Sync Scroll.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-toolbar-scroll" checked data-component="#btn-scroll-sync">
+                                <input type="checkbox" id="toggle-toolbar-controls" checked data-component=".editor-toolbar .toolbar-group:nth-child(5), .editor-toolbar .toolbar-group:nth-child(7)">
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-card">
+                            <div class="setting-details">
+                                <span class="setting-card-title">Editor View Controls</span>
+                                <span class="setting-card-desc">Toggle View Switchers and Transfer tools.</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" id="toggle-toolbar-views" checked data-component=".editor-toolbar .toolbar-group:nth-child(8), .editor-toolbar .toolbar-group:nth-child(9)">
                                 <span class="slider"></span>
                             </label>
                         </div>
                     </div>
                 </div>
 
-                <div class="settings-content" id="settings-section-interface">
+                <div class="settings-content" id="settings-section-status">
                     <div class="settings-content-header">
-                        <h3>Interface Controls</h3>
+                        <h3>Status Bar Controls</h3>
                         <p>Control specific buttons and indicators.</p>
                     </div>
                     <div class="settings-grid">
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Theme Switcher</span>
-                                <span class="setting-card-desc">Show the Light/Dark theme toggle in status bar.</span>
+                                <span class="setting-card-title">Word Count</span>
+                                <span class="setting-card-desc">Show word count in the status bar.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
+                                <input type="checkbox" id="toggle-bottom-words" checked data-component="#stat-words">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Live Statistics</span>
-                                <span class="setting-card-desc">Show Word and Character counts.</span>
+                                <span class="setting-card-title">Character Count</span>
+                                <span class="setting-card-desc">Show character count in the status bar.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-bottom-stats" checked data-component=".status-bar .sb-section:nth-child(2) .action-pill-group">
+                                <input type="checkbox" id="toggle-bottom-chars" checked data-component="#stat-chars">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Cloud Indicator</span>
-                                <span class="setting-card-desc">Show the current sync status in the status bar.</span>
+                                <span class="setting-card-title">Reading Time</span>
+                                <span class="setting-card-desc">Show estimated reading time.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-mode-indicator" checked data-component="#active-mode-indicator">
+                                <input type="checkbox" id="toggle-bottom-reading" checked data-component="#stat-reading-time">
                                 <span class="slider"></span>
                             </label>
                         </div>
                         <div class="setting-card">
                             <div class="setting-details">
-                                <span class="setting-card-title">Action Buttons</span>
-                                <span class="setting-card-desc">Show Share and PDF export buttons in navbar.</span>
+                                <span class="setting-card-title">Cursor Position Indicator</span>
+                                <span class="setting-card-desc">Show Line and Column position.</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" id="toggle-bottom-cursor" checked data-component="#stat-line-col">
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-card">
+                            <div class="setting-details">
+                                <span class="setting-card-title">Theme Toggle</span>
+                                <span class="setting-card-desc">Show the Light/Dark theme toggle.</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" id="toggle-bottom-theme" checked data-component=".sb-theme-toggle">
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-card">
+                            <div class="setting-details">
+                                <span class="setting-card-title">Storage Mode Indicators</span>
+                                <span class="setting-card-desc">Show Local and Cloud sync status.</span>
                             </div>
                             <label class="switch">
-                                <input type="checkbox" id="toggle-top-actions" checked data-component=".navbar .action-pill-group.desktop-only">
+                                <input type="checkbox" id="toggle-bottom-mode" checked data-component="#active-mode-indicator">
                                 <span class="slider"></span>
                             </label>
                         </div>
diff --git a/js/editor-actions.js b/js/editor-actions.js
index a80128a..d7f793f 100644
--- a/js/editor-actions.js
+++ b/js/editor-actions.js
@@ -404,46 +404,6 @@ window.EditorActions = {
         reader.readAsText(file);
     },
 
-    async handleManualSave() {
-        const activeNote = window.EditorState.getActiveNote();
-        if (!activeNote) return;
-
-        const editor = document.getElementById('markdown-input');
-        activeNote.content = editor.value;
-        activeNote.lastUpdated = Date.now();
-
-        const saveBtn = document.getElementById('btn-manual-save');
-        const originalHtml = saveBtn.innerHTML;
-        saveBtn.innerHTML = '<i data-lucide="loader" class="spin" style="width: 12px; height: 12px;"></i> Saving';
-        saveBtn.disabled = true;
-        if (window.lucide) lucide.createIcons();
-
-        try {
-            await window.EditorState.saveLocalState();
-            if (window.EditorState.appMode === 'github') {
-                window.EditorState.pendingSync = true;
-                // In GitHub mode, we manually trigger the sync immediately
-                await window.EditorState.performCloudSync();
-            }
-
-            // Clear drafts for this note on successful explicit save
-            try {
-                let drafts = JSON.parse(localStorage.getItem('md_unsaved_drafts') || '{}');
-                if (drafts[activeNote.id]) {
-                    delete drafts[activeNote.id];
-                    localStorage.setItem('md_unsaved_drafts', JSON.stringify(drafts));
-                }
-            } catch (e) {}
-
-            window.showToast("<i data-lucide='check-circle'></i> Saved Successfully");
-        } catch (e) {
-            window.showToast("<i data-lucide='alert-triangle'></i> Save Failed");
-        } finally {
-            saveBtn.innerHTML = originalHtml;
-            saveBtn.disabled = false;
-            if (window.lucide) lucide.createIcons();
-        }
-    },
 
     async handleSecureShare() {
         const editor = document.getElementById('markdown-input');
diff --git a/js/editor-core.js b/js/editor-core.js
index 03bcc94..060aa17 100644
--- a/js/editor-core.js
+++ b/js/editor-core.js
@@ -945,8 +945,6 @@ document.addEventListener('DOMContentLoaded', () => {
         // Secure Share
         document.getElementById('btn-share')?.addEventListener('click', () => window.EditorActions.handleSecureShare());
 
-        // Manual Save
-        document.getElementById('btn-manual-save')?.addEventListener('click', () => window.EditorActions.handleManualSave());
 
         // Mobile / Other listeners
         document.getElementById('mob-back-folders')?.addEventListener('click', () => {
diff --git a/js/editor-state.js b/js/editor-state.js
index 27f79a8..57b3110 100644
--- a/js/editor-state.js
+++ b/js/editor-state.js
@@ -283,22 +283,69 @@ window.EditorState = {
     },
 
     applyUIVisibility() {
-        Object.keys(this.uiVisibility).forEach(id => {
+        const toggles = [
+            'toggle-top-navbar', 'toggle-top-actions', 'toggle-top-mode',
+            'toggle-editor-toolbar', 'toggle-bottom-toolbar',
+            'toggle-toolbar-format', 'toggle-toolbar-align', 'toggle-toolbar-insert',
+            'toggle-toolbar-controls', 'toggle-toolbar-views',
+            'toggle-toolbar-focus', 'toggle-toolbar-scroll',
+            'toggle-bottom-words', 'toggle-bottom-chars', 'toggle-bottom-reading',
+            'toggle-bottom-cursor', 'toggle-bottom-theme', 'toggle-bottom-mode'
+        ];
+
+        toggles.forEach(id => {
+            const isVisible = this.uiVisibility[id] !== false; // Default to true
             const checkbox = document.getElementById(id);
             if (checkbox) {
-                const componentSelector = checkbox.getAttribute('data-component');
-                const isVisible = this.uiVisibility[id];
                 checkbox.checked = isVisible;
-
-                if (componentSelector) {
-                    const elements = document.querySelectorAll(componentSelector);
-                    elements.forEach(el => {
+                const selector = checkbox.getAttribute('data-component');
+                if (selector) {
+                    document.querySelectorAll(selector).forEach(el => {
                         el.style.display = isVisible ? '' : 'none';
-                        // Special handling for visibility classes if needed
                     });
                 }
             }
         });
+
+        const isFocusMode = document.body.classList.contains('focus-mode');
+        const navbarVisible = this.uiVisibility['toggle-top-navbar'] !== false;
+        const statusBarVisible = this.uiVisibility['toggle-bottom-toolbar'] !== false;
+
+        // ✨ NAVBAR & MINIMAL HEADER LOGIC ✨
+        const navbar = document.querySelector('.navbar');
+        const minimalHeader = document.getElementById('minimal-header-strip');
+
+        if (navbarVisible) {
+            if (navbar) navbar.style.display = 'flex';
+            if (minimalHeader) minimalHeader.style.display = 'none';
+        } else {
+            if (navbar) navbar.style.display = 'none';
+            if (minimalHeader) minimalHeader.style.display = 'flex';
+        }
+
+        // ✨ FOCUS MODE RECOVERY PROTECTION ✨
+        const exitNavbar = document.getElementById('btn-exit-focus');
+        const exitStatus = document.getElementById('btn-exit-focus-status');
+        const floatingExit = document.getElementById('btn-exit-focus-floating');
+
+        if (isFocusMode) {
+            // Ensure Exit button is visible in the most appropriate location
+            if (exitNavbar) exitNavbar.style.display = navbarVisible ? 'flex' : 'none';
+            if (exitStatus) exitStatus.style.display = (!navbarVisible && statusBarVisible) ? 'flex' : 'none';
+            if (floatingExit) floatingExit.style.display = (!navbarVisible && !statusBarVisible) ? 'flex' : 'none';
+        } else {
+            if (exitNavbar) exitNavbar.style.display = 'none';
+            if (exitStatus) exitStatus.style.display = 'none';
+            if (floatingExit) floatingExit.style.display = 'none';
+        }
+
+        // Parent-Child Status Bar Visibility Logic
+        if (!statusBarVisible) {
+            const children = ['#stat-words', '#stat-chars', '#stat-reading-time', '#stat-line-col', '.sb-theme-toggle', '#active-mode-indicator', '#btn-exit-focus-status'];
+            children.forEach(sel => {
+                document.querySelectorAll(sel).forEach(el => el.style.display = 'none');
+            });
+        }
     },
 
     async switchToMode(targetMode) {
diff --git a/js/ui.js b/js/ui.js
index bac6e29..c6e3cea 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -142,6 +142,7 @@ document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('btn-exit-focus').style.display = 'flex';
         }
 
+        window.EditorState.applyUIVisibility();
         window.showToast("<i data-lucide='scan'></i> Focus Mode Enabled");
     });
 
@@ -158,9 +159,18 @@ document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('btn-exit-focus').style.display = 'none';
         }
 
+        window.EditorState.applyUIVisibility();
         window.showToast("<i data-lucide='minimize'></i> Focus Mode Disabled");
     });
 
+    document.getElementById('btn-exit-focus-floating')?.addEventListener('click', () => {
+        document.getElementById('btn-exit-focus')?.click();
+    });
+
+    document.getElementById('btn-exit-focus-status')?.addEventListener('click', () => {
+        document.getElementById('btn-exit-focus')?.click();
+    });
+
     document.querySelectorAll('.view-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             const view = btn.getAttribute('data-view');
@@ -211,10 +221,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // ✨ SETTINGS MODAL ✨
     document.getElementById('btn-settings')?.addEventListener('click', () => {
+        initSettingsToggles();
+        document.getElementById('settings-modal')?.classList.add('show');
+    });
+    document.getElementById('btn-settings-minimal')?.addEventListener('click', () => {
+        initSettingsToggles();
         document.getElementById('settings-modal')?.classList.add('show');
     });
     document.getElementById('sidebar-btn-settings-mobile')?.addEventListener('click', () => {
         document.getElementById('mobile-sidebar-overlay')?.classList.remove('show');
+        initSettingsToggles();
         document.getElementById('settings-modal')?.classList.add('show');
     });
     document.getElementById('settings-modal-close')?.addEventListener('click', () => {
@@ -617,9 +633,31 @@ document.addEventListener('DOMContentLoaded', () => {
             toggle.checked = isVisible;
         });
 
+        updateStatusBarChildrenState();
         window.EditorState.applyUIVisibility();
     };
 
+    const updateStatusBarChildrenState = () => {
+        const parentToggle = document.getElementById('toggle-bottom-toolbar');
+        const children = ['toggle-bottom-words', 'toggle-bottom-chars', 'toggle-bottom-reading', 'toggle-bottom-cursor', 'toggle-bottom-theme', 'toggle-bottom-mode'];
+
+        children.forEach(id => {
+            const checkbox = document.getElementById(id);
+            if (checkbox) {
+                const card = checkbox.closest('.setting-card');
+                if (parentToggle.checked) {
+                    card.classList.remove('disabled');
+                    checkbox.disabled = false;
+                } else {
+                    card.classList.add('disabled');
+                    checkbox.disabled = true;
+                }
+            }
+        });
+    };
+
+    document.getElementById('toggle-bottom-toolbar')?.addEventListener('change', updateStatusBarChildrenState);
+
     const saveSettingsChanges = () => {
         const autoSaveCheckbox = document.getElementById('setting-auto-save');
         if (autoSaveCheckbox) {
diff --git a/server.log b/server.log
deleted file mode 100644
index 986cffb..0000000
--- a/server.log
+++ /dev/null
@@ -1,8 +0,0 @@
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /style.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /mobile.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/ui.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/github.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-state.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-actions.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-core.js HTTP/1.1" 200 -
diff --git a/style.css b/style.css
index 751be26..dc850ba 100644
--- a/style.css
+++ b/style.css
@@ -35,7 +35,7 @@ body.dark-mode {
     --hover-bg: #1a1a1a;
     --border-color: #262626;
     --shadow-color: rgba(0, 0, 0, 0.8);
-    --text-color: #a1a1aa;
+    --text-color: #f1f5f9; /* Primary label color */
     --accent-color: #ffffff;
     --accent-hover: #e5e5e5;
     --btn-text: #000000;
@@ -45,6 +45,32 @@ body.dark-mode {
     --link-color: #ffffff;
     --link-hover: #a1a1aa;
     --link-active: #52525b;
+
+    /* Custom typography contrast improvements */
+    --section-title-color: #e2e8f0;
+    --primary-label-color: #f1f5f9;
+    --description-color: #a1a1aa;
+}
+
+body.dark-mode .settings-content-header h3,
+body.dark-mode .settings-nav-item,
+body.dark-mode .modal-title,
+body.dark-mode .sidebar-section-title,
+body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
+    color: var(--section-title-color) !important;
+}
+
+body.dark-mode .setting-card-title,
+body.dark-mode label,
+body.dark-mode .dropdown-item,
+body.dark-mode .dropdown-header {
+    color: var(--primary-label-color) !important;
+}
+
+body.dark-mode .setting-card-desc,
+body.dark-mode .settings-content-header p,
+body.dark-mode .modal-subtitle {
+    color: var(--description-color) !important;
 }
 
 * {
@@ -169,6 +195,38 @@ body:not(.is-loading) #preview-skeleton {
     flex-shrink: 0;
 }
 
+/* MINIMAL HEADER STRIP */
+.minimal-header {
+    height: 32px;
+    background-color: var(--nav-bg);
+    border-bottom: 1px solid var(--border-color);
+    display: none; /* Only show when navbar is hidden */
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    z-index: 95;
+    flex-shrink: 0;
+}
+
+.minimal-header[style*="display: flex"] {
+    display: flex !important;
+}
+
+.minimal-header .brand {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.minimal-header .pill-action-btn {
+    width: 24px;
+    height: 24px;
+}
+
+.minimal-header .pill-action-btn i {
+    width: 14px;
+    height: 14px;
+}
+
 .brand {
     font-weight: 600;
     font-size: 1.25rem;
@@ -788,8 +846,31 @@ body.view-preview .divider {
 }
 
 /* ✨ FOCUS MODE CSS ✨ */
-body.focus-mode .navbar {
-    display: flex !important;
+/* Note: Navbar and Minimal Header visibility are managed by JS to respect UI settings */
+
+/* Floating Exit Focus Button */
+.floating-exit-btn {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    color: var(--btn-text);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.floating-exit-btn:hover {
+    transform: scale(1.1);
+    background-color: var(--accent-hover);
 }
 
 body.focus-mode #mobile-menu-btn,
@@ -815,7 +896,7 @@ body.focus-mode .toolbar-divider {
 }
 
 body.focus-mode #btn-exit-focus {
-    display: flex !important;
+    display: flex;
 }
 
 body.focus-mode .status-bar {
@@ -1769,6 +1850,14 @@ body.dark-mode .btn-cancel:hover {
     overflow-y: auto;
     background-color: var(--bg-color);
     display: none;
+    max-height: 100%; /* Ensure it's scrollable within container */
+}
+
+/* Disabled Setting Card */
+.setting-card.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    filter: grayscale(1);
 }
 
 .settings-content.active {