diff --git a/app/static/css/style.css b/app/static/css/style.css
index 47bbf55..11064dd 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -2834,6 +2834,10 @@ body {
         -webkit-overflow-scrolling: touch !important;
         border-radius: 20px !important;
         box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
+        border: 1px solid var(--border-focus) !important;
+        background-color: var(--bg-surface) !important;
+        color: var(--text-main) !important;
+        padding: 16px 18px 24px !important;
         z-index: 10006 !important;
         animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
     }
@@ -3143,6 +3147,8 @@ body {
     display: flex;
     align-items: center;
     gap: 4px;
+}
+
 .reader-scroll-area {
     --reader-font-size: 18px;
     --reader-line-height: 1.65;
@@ -3277,11 +3283,12 @@ body {
     top: 64px;
     right: 28px;
     width: 320px;
+    max-width: calc(100vw - 32px);
     background-color: var(--bg-surface);
     border: 1px solid var(--border-focus);
     border-radius: var(--radius-lg);
     box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
-    z-index: 10002;
+    z-index: 10006;
     padding: 16px;
     animation: fadeIn 0.15s ease-out;
 }
@@ -3721,7 +3728,7 @@ body {
 /* Click-to-Translate Popup */
 .reader-word-popup {
     position: fixed;
-    z-index: 10001;
+    z-index: 10005;
     background-color: var(--bg-surface);
     border: 1px solid var(--border-focus);
     border-radius: var(--radius-lg);
diff --git a/app/static/index.html b/app/static/index.html
index c5f2c6b..3fcc070 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Notes — Персональный тренажер и словарь английского языка</title>
     <meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
-    <link rel="stylesheet" href="/static/css/style.css?v=3.2">
+    <link rel="stylesheet" href="/static/css/style.css?v=3.3">
     
     <!-- PWA meta and icons -->
     <link rel="manifest" href="/manifest.json">
@@ -1051,7 +1051,7 @@
     <!-- Audio Element for native streaming -->
     <audio id="global-audio-player" preload="none"></audio>
 
-    <script src="/static/js/app.js?v=3.2"></script>
+    <script src="/static/js/app.js?v=3.3"></script>
 </body>
 </html>
 
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 966301e..4923cfe 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -2571,6 +2571,7 @@ document.addEventListener('DOMContentLoaded', () => {
     async function openWordPopup(term, contextSentence, targetElement) {
         const cleanTerm = (term || '').replace(/^['"“«`\s\-_.,;:!?()[\]{}]+|['"”»`\s\-_.,;:!?()[\]{}]+$/g, '').trim();
         if (!cleanTerm) return;
+        if (readerSettingsPanel) readerSettingsPanel.classList.add('hidden');
 
         const lowerClean = cleanTerm.toLowerCase();
         const existingCard = allCards && allCards.find(c => c.term && c.term.trim().toLowerCase() === lowerClean);
@@ -2925,6 +2926,29 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function positionSettingsPanel() {
+        if (!readerSettingsPanel || !readerSettingsBtn) return;
+        if (window.innerWidth <= 768) {
+            readerSettingsPanel.style.top = '';
+            readerSettingsPanel.style.left = '';
+            readerSettingsPanel.style.right = '';
+            return;
+        }
+        const rect = readerSettingsBtn.getBoundingClientRect();
+        const panelWidth = 320;
+        const viewportWidth = window.innerWidth;
+
+        let left = rect.right - panelWidth;
+        if (left < 16) left = 16;
+        if (left + panelWidth > viewportWidth - 16) {
+            left = viewportWidth - panelWidth - 16;
+        }
+
+        readerSettingsPanel.style.top = `${Math.round(rect.bottom + 8)}px`;
+        readerSettingsPanel.style.left = `${Math.round(left)}px`;
+        readerSettingsPanel.style.right = 'auto';
+    }
+
     function initReaderSettingsPanel() {
         loadSavedReaderSettings();
         applyReaderSettings();
@@ -2932,10 +2956,14 @@ document.addEventListener('DOMContentLoaded', () => {
         if (readerSettingsBtn) {
             readerSettingsBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
+                if (readerWordPopup) readerWordPopup.classList.add('hidden');
                 if (readerSettingsPanel) {
                     const isHidden = readerSettingsPanel.classList.contains('hidden');
                     readerSettingsPanel.classList.toggle('hidden', !isHidden);
-                    if (isHidden) updateReaderSettingsUI();
+                    if (isHidden) {
+                        updateReaderSettingsUI();
+                        positionSettingsPanel();
+                    }
                 }
             });
         }
@@ -3028,6 +3056,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             }
         });
+
+        window.addEventListener('resize', () => {
+            if (readerSettingsPanel && !readerSettingsPanel.classList.contains('hidden')) {
+                positionSettingsPanel();
+            }
+        }, { passive: true });
     }
 
     initReaderSettingsPanel();