feat(mobile): implement iOS Safari responsive layout, bottom tab bar, and mobile bottom sheet

TODO.md

@@ -63,40 +63,35 @@
 ---
 
 ### 4. 📱 Мобильная оптимизация и адаптивная верстка (iPhone 12 / iOS Safari)
-- [ ] **Системный фундамент iOS и сброс ограничений (Core Foundation)**:
+- [x] **Системный фундамент iOS и сброс ограничений (Core Foundation)**:
-  - Метатег `viewport`: добавить `viewport-fit=cover` для поддержки челки и нижней панели iPhone.
+  - Метатег `viewport`: добавлен `viewport-fit=cover` для поддержки выреза (notch) и нижней панели iPhone.
-  - Устранение бага принудительного авто-зума: установить `font-size: 16px` для `<input>`, `<textarea>`, `<select>` на экранах `≤ 768px` (сохраняя компактные внутренние отступы).
+  - Устранение бага принудительного авто-зума: установлен `font-size: 16px` для `<input>`, `<textarea>`, `<select>` на экранах `≤ 768px`.
-  - Замена `100vh` на динамические единицы `100dvh` (Dynamic Viewport Height) для модальных окон, оверлеев и экрана авторизации.
+  - Внедрены динамические единицы `100dvh` (Dynamic Viewport Height) и безопасные отступы `env(safe-area-inset-top)` / `env(safe-area-inset-bottom)`.
-  - Добавление безопасных отступов `env(safe-area-inset-top)` и `env(safe-area-inset-bottom)`.
+  - Защита от горизонтального сдвига (`overflow-x: hidden` на `html`, `body` и `#app-shell`).
-  - Предотвращение горизонтального скролла (`overflow-x: hidden` на уровне контейнера приложения).
+- [x] **Мобильная навигация: переход к нативному паттерну (App Header + Bottom Tab Bar)**:
-- [ ] **Мобильная навигация: переход к нативному паттерну (App Header + Bottom Tab Bar)**:
+  - Компактная верхняя шапка для смартфонов: логотип `📖 Notes`, переключатель темы `🌓`, кнопка вызова профиля `⚙️`.
-  - Компактная верхняя шапка: логотип `📖 Notes`, переключатель темы `🌓`, кнопка вызова профиля/действий.
   - Фиксированная нижняя панель вкладок (Bottom Tab Bar) с нативным iOS UX:
     1. 🔍 **Словарь** (Поиск и словарь)
     2. 🎓 **Тренажёр** (SRS с бейджем количества повторений)
     3. 📚 **Читалка** (Библиотека книг)
     4. 📊 **Прогресс** (Статистика и стрик)
     5. ⚙️ **Меню** (Смена пароля, экспорт, выход)
-  - Сохранение текущей десктопной строки без изменений на больших экранах (`> 768px`).
+  - Полное сохранение десктопного `navbar` без изменений на больших экранах (`> 768px`).
-- [ ] **Адаптация экрана словаря и карточек (Dictionary & Cards View)**:
+- [x] **Адаптация экрана словаря и карточек (Dictionary & Cards View)**:
-  - Поле поиска/перевода на полную ширину экрана с удобной сенсорной кнопкой «Перевести».
+  - Поле поиска/перевода на полную ширину экрана с кнопкой «Перевести».
   - Скрытие неактуальных десктопных подсказок горячих клавиш (`<kbd>Ctrl+Enter</kbd>`) на мобильных устройствах.
-  - Вертикальная раскладка полей метаданных при редактировании карточки (папка, теги, заметка).
+  - Вертикальная раскладка полей метаданных при редактировании карточки.
-  - Горизонтальный скролл чипсов коллекций и тегов (`overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch`) вместо многострочного переноса.
+  - Горизонтальный скролл чипсов коллекций и тегов (`overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch`).
-  - Увеличенные зоны нажатия (Touch Targets ≥ 44px) для кнопок действий над карточкой (удаление, редактирование, озвучка).
+  - Увеличенные зоны нажатия (Touch Targets ≥ 44px) для кнопок действий над карточкой.
-- [ ] **Интерактивная читалка и переход к Mobile Bottom Sheet**:
+- [x] **Интерактивная читалка и переход к Mobile Bottom Sheet**:
-  - Трансформация всплывающего попапа перевода (`reader-word-popup`) в нативную выдвижную нижнюю шторку (Bottom Sheet) на смартфонах:
+  - Трансформация всплывающего попапа перевода (`reader-word-popup`) в нативную выдвижную нижнюю шторку (Bottom Sheet) на смартфонах с ручкой перетаскивания `sheet-drag-handle`.
-    - Заголовок с термином, транскрипцией и бейджем `⭐ В библиотеке`.
-    - Блок перевода и контекстной цитаты книги.
-    - Большая кнопка «💾 Добавить в словарь» под большой палец.
-    - Исключение вылетов за границы экрана и перекрытия текста пальцем.
   - Двухстрочный адаптивный тулбар читалки (навигация по главам + размер шрифта `A-/A+` и подсветка).
   - Сетка библиотеки `bookshelf-grid` в одну колонку на экранах `≤ 640px`.
-- [ ] **Тренажёр интервальных повторений (SRS Trainer)**:
+- [x] **Тренажёр интервальных повторений (SRS Trainer)**:
   - Ограничение высоты карточки SRS (`max-height: 48dvh`), чтобы карточка и кнопки оценки гарантированно помещались без вертикального скролла на 390px.
-  - Кнопки оценки (Снова / Трудно / Хорошо / Легко) в сетку 2×2 с высотой от 50px и четкими цветовыми акцентами.
+  - Кнопки оценки (Снова / Трудно / Хорошо / Легко) в сетку 2×2 с высотой от 48px и четкими цветовыми акцентами.
   - Вертикальный список вариантов в режиме квиза (4 варианта) на всю ширину экрана.
-- [ ] **Модальные окна (Статистика, Пароль, Экспорт)**:
+- [x] **Модальные окна (Статистика, Пароль, Экспорт)**:
   - Метрики статистики в сетку 2×2 вместо сжатых 4 колонок.
   - Плавный горизонтальный скролл календаря активности (Heatmap).
   - Разворачивание модальных окон в адаптивный мобильный слой с удобной кнопкой закрытия.

app/static/css/style.css

@@ -38,6 +38,11 @@
     
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     --transition: all 0.18s ease-in-out;
+    
+    --sat: env(safe-area-inset-top, 0px);
+    --sar: env(safe-area-inset-right, 0px);
+    --sab: env(safe-area-inset-bottom, 0px);
+    --sal: env(safe-area-inset-left, 0px);
 }
 
 [data-theme="light"] {
@@ -75,6 +80,11 @@
     padding: 0;
 }
 
+html, body {
+    overflow-x: hidden;
+    -webkit-tap-highlight-color: transparent;
+}
+
 body {
     background-color: var(--bg-main);
     color: var(--text-main);
@@ -82,6 +92,7 @@ body {
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
+    min-height: 100dvh;
 }
 
 .hidden {
@@ -2321,75 +2332,547 @@ body {
     75% { transform: translateX(4px); }
 }
 
-/* Responsive */
+/* Mobile Navigation & Tab Bar (iOS Native Style Base) */
-@media (max-width: 640px) {
+.mobile-only-btn,
+.mobile-tab-bar,
+.mobile-only {
+    display: none;
+}
+
+.mobile-tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(56px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    background-color: rgba(30, 41, 59, 0.94);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-top: 1px solid var(--border-color);
+    z-index: 1000;
+    align-items: center;
+    justify-content: space-around;
+}
+
+[data-theme="light"] .mobile-tab-bar {
+    background-color: rgba(255, 255, 255, 0.94);
+}
+
+.tab-item {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    position: relative;
+    padding: 6px 0;
+    -webkit-tap-highlight-color: transparent;
+    transition: var(--transition);
+}
+
+.tab-item:active {
+    transform: scale(0.92);
+}
+
+.tab-item.active {
+    color: var(--primary);
+}
+
+.tab-icon {
+    font-size: 19px;
+    line-height: 1;
+}
+
+.tab-label {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+}
+
+.tab-badge {
+    position: absolute;
+    top: 5px;
+    right: calc(50% - 18px);
+    background-color: #ef4444;
+    color: #ffffff;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 1px 5px;
+    border-radius: 9999px;
+    line-height: 1.2;
+}
+
+/* Mobile Sheet / Menu */
+.mobile-sheet-window {
+    max-width: 440px;
+}
+
+.mobile-user-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+}
+
+.mobile-user-avatar {
+    font-size: 28px;
+    background: var(--bg-surface-hover);
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+}
+
+.mobile-user-info strong {
+    font-size: 16px;
+    color: var(--text-main);
+}
+
+.mobile-user-info .subtitle {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.mobile-menu-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* Sheet drag handle for mobile bottom sheets */
+.sheet-drag-handle {
+    width: 38px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--border-color);
+    margin: 0 auto 10px auto;
+}
+
+/* ==========================================================================
+   Comprehensive Mobile & Responsive System (iPhone 12 / iOS WebKit & Mobile)
+   ========================================================================== */
+@media (max-width: 768px) {
+    /* 1. iOS Safari Auto-Zoom Fix (< 16px triggers zoom) */
+    input, select, textarea,
+    .input-styled, .search-input-box input, .form-group input,
+    .search-mini-box input, .reader-select {
+        font-size: 16px !important;
+    }
+
+    /* 2. Global Mobile App Container & Safe Areas */
+    html, body {
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+        min-height: 100dvh;
+    }
+
+    .app-shell {
+        min-height: 100dvh;
+        overflow-x: hidden;
+    }
+
+    .main-content,
+    .srs-view,
+    .reader-view {
+        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
+    }
+
+    /* 3. Header & Navigation: Clean iOS App Header */
     .navbar {
-        padding: 10px 14px;
+        padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 12px;
+        position: sticky;
+        top: 0;
     }
-    .brand-sub {
+
-        display: none;
+    .brand-sub,
+    .nav-center,
+    .nav-actions #nav-reader-btn,
+    .nav-actions #srs-trainer-btn,
+    .nav-actions #stats-open-btn,
+    .nav-actions #export-open-btn,
+    .nav-actions .user-profile {
+        display: none !important;
     }
-    .trainer-text {
+
-        display: none;
+    .mobile-only-btn {
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
     }
+
+    .mobile-tab-bar {
+        display: flex !important;
+    }
+
+    .mobile-only {
+        display: block !important;
+    }
+
+    /* 4. Dictionary & Search */
     .main-content {
-        padding: 16px 12px;
+        padding: 14px 12px calc(76px + env(safe-area-inset-bottom, 0px));
-        gap: 24px;
+        gap: 20px;
     }
-    .field-row {
+
+    .search-input-box {
+        padding: 6px 8px 6px 12px;
+    }
+
+    .search-input-box input {
+        padding: 8px 0;
+        min-width: 0;
+    }
+
+    .translate-action-btn {
+        padding: 8px 14px;
+        font-size: 14px;
+        white-space: nowrap;
+    }
+
+    .hotkey-hints {
+        display: none !important;
+    }
+
+    .lookup-card {
+        padding: 16px 14px;
+    }
+
+    .lookup-header {
         flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
     }
-    .res-term {
+
-        font-size: 22px;
+    .meta-inputs-grid .field-row {
+        flex-direction: column;
+        gap: 12px;
     }
+
+    .result-actions .btn {
+        width: 100%;
+        justify-content: center;
+        min-height: 48px;
+    }
+
+    .result-actions .btn-subtext {
+        display: none;
+    }
+
+    /* Horizontal scrollable chips for collections and tags */
+    .filter-chips-row {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 6px;
+        scrollbar-width: none;
+    }
+
+    .filter-chips-row::-webkit-scrollbar {
+        display: none;
+    }
+
+    .col-chip, .filter-chip {
+        flex-shrink: 0;
+    }
+
     .list-controls {
         width: 100%;
         display: flex;
         align-items: center;
         gap: 8px;
+        margin-top: 10px;
     }
+
+    .section-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
     .search-mini-box {
         flex: 1;
-    }
-    .search-mini-box input {
         min-width: 0;
+    }
+
+    .search-mini-box input {
         width: 100%;
+        min-width: 0;
     }
-    .fc-flip-btn-wrap {
+
-        display: block;
+    /* Cards */
+    .vocab-card {
+        padding: 14px;
+        gap: 8px;
     }
+
+    .card-top {
+        gap: 8px;
+    }
+
+    .card-term {
+        font-size: 17px;
+    }
+
+    .card-actions .icon-btn {
+        min-width: 36px;
+        min-height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .card-bottom {
+        font-size: 11px;
+    }
+
+    /* 5. SRS Trainer */
     .srs-topbar {
         padding: 10px 12px;
         flex-direction: column;
         align-items: stretch;
         gap: 8px;
     }
+
     .srs-topbar-left, .srs-topbar-right {
         justify-content: space-between;
+        width: 100%;
     }
+
     .srs-mode-switch {
         overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
     }
+
+    .srs-mode-switch::-webkit-scrollbar {
+        display: none;
+    }
+
+    .srs-tab {
+        flex-shrink: 0;
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+
+    .flashcard-wrapper {
+        min-height: 270px;
+        max-height: 48dvh;
+    }
+
+    .flashcard-inner {
+        min-height: 270px;
+    }
+
+    .fc-main-term {
+        font-size: 28px;
+    }
+
+    .fc-footer-hint {
+        font-size: 11px;
+    }
+
     .srs-rating-bar {
         grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        width: 100%;
     }
+
+    .btn-rate {
+        min-height: 48px;
+        padding: 8px 6px;
+    }
+
+    .rate-key {
+        display: none;
+    }
+
     .quiz-options-grid {
         grid-template-columns: 1fr;
+        gap: 8px;
     }
+
+    .quiz-option-btn {
+        min-height: 48px;
+        font-size: 14px;
+        padding: 10px 14px;
+    }
+
+    /* 6. Bookshelf & Reader View */
+    .reader-view {
+        padding: 14px 12px calc(76px + env(safe-area-inset-bottom, 0px));
+    }
+
+    .bookshelf-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+        margin-bottom: 18px;
+    }
+
+    .bookshelf-title-wrap h2 {
+        font-size: 19px;
+    }
+
+    .bookshelf-actions {
+        width: 100%;
+        display: flex;
+        gap: 8px;
+    }
+
+    .bookshelf-actions .btn,
+    .bookshelf-actions .file-upload-label {
+        flex: 1;
+        justify-content: center;
+        text-align: center;
+        padding: 10px;
+    }
+
+    .bookshelf-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+
+    .book-card {
+        padding: 14px;
+    }
+
+    /* Reader Interface Toolbar */
+    .reader-toolbar {
+        padding: 8px 10px;
+        gap: 8px;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .reader-toolbar-left {
+        width: 100%;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .reader-meta {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .reader-title {
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .reader-author {
+        font-size: 11px;
+    }
+
+    .reader-toolbar-center {
+        width: 100%;
+        justify-content: space-between;
+        gap: 6px;
+    }
+
+    .reader-select {
+        flex: 1;
+        max-width: none;
+        min-width: 0;
+    }
+
+    .reader-toolbar-right {
+        width: 100%;
+        justify-content: space-between;
+        gap: 6px;
+        border-top: 1px solid var(--border-color);
+        padding-top: 6px;
+    }
+
+    .reader-content-body {
+        padding: 14px 12px;
+        font-size: 17px;
+        line-height: 1.65;
+    }
+
+    /* 7. Bottom Sheet for Word Translation Popup on Mobile */
+    .reader-word-popup {
+        position: fixed !important;
+        top: auto !important;
+        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
+        left: 8px !important;
+        right: 8px !important;
+        width: auto !important;
+        max-width: none !important;
+        border-radius: 18px !important;
+        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
+        border: 1px solid var(--border-focus) !important;
+        background-color: var(--bg-surface) !important;
+        z-index: 10005 !important;
+        padding: 14px 16px !important;
+        animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
+    }
+
+    @keyframes slideUpSheet {
+        from {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    /* 8. Modals: Mobile Bottom-Sheet style */
+    .modal-backdrop {
+        padding: 0;
+        align-items: flex-end;
+    }
+
+    .modal-window {
+        max-width: 100%;
+        max-height: calc(90dvh - env(safe-area-inset-top, 0px));
+        border-radius: 20px 20px 0 0;
+        border-bottom: none;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+        animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .stats-modal-window {
+        width: 100%;
+        max-width: 100%;
+    }
+
     .stats-hero-grid {
         grid-template-columns: 1fr 1fr;
+        gap: 8px;
     }
-    .export-grid {
+
-        grid-template-columns: 1fr;
+    .heatmap-container-wrap {
-    }
+        -webkit-overflow-scrolling: touch;
-    .summary-metrics {
-        grid-template-columns: 1fr;
     }
+
+    /* 9. Batch action bar */
     .batch-action-bar {
         flex-direction: column;
         gap: 10px;
-        bottom: 12px;
+        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
+        left: 10px;
+        right: 10px;
     }
+
     .batch-actions {
         width: 100%;
         justify-content: space-between;

app/static/index.html

@@ -2,10 +2,10 @@
 <html lang="ru" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <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.0">
+    <link rel="stylesheet" href="/static/css/style.css?v=3.1">
     
     <!-- PWA meta and icons -->
     <link rel="manifest" href="/manifest.json">
@@ -82,6 +82,7 @@
                     <span>📤 Экспорт</span>
                 </button>
                 <button id="theme-toggle" class="icon-btn" title="Переключить тему">🌓</button>
+                <button id="mobile-menu-toggle-btn" class="icon-btn mobile-only-btn" title="Меню профиля и настроек">⚙️</button>
                 <div class="user-profile">
                     <span id="user-display-name" class="user-badge">user</span>
                     <button id="change-pwd-open-btn" class="btn btn-sm btn-outline" title="Сменить пароль">🔑 Пароль</button>
@@ -599,6 +600,57 @@
                 <button id="batch-cancel-btn" class="btn btn-sm btn-ghost">✕ Отмена</button>
             </div>
         </div>
+
+        <!-- Mobile Bottom Navigation Tab Bar (iOS style) -->
+        <nav class="mobile-tab-bar" id="mobile-tab-bar">
+            <button class="tab-item active" data-view="dictionary-view" id="tab-nav-dict">
+                <span class="tab-icon">📖</span>
+                <span class="tab-label">Словарь</span>
+            </button>
+            <button class="tab-item" data-view="srs-view" id="tab-nav-srs">
+                <span class="tab-icon">🎓</span>
+                <span class="tab-label">Тренажёр</span>
+                <span id="tab-srs-badge" class="tab-badge hidden">0</span>
+            </button>
+            <button class="tab-item" data-view="reader-view" id="tab-nav-reader">
+                <span class="tab-icon">📚</span>
+                <span class="tab-label">Читалка</span>
+            </button>
+            <button class="tab-item" id="tab-nav-stats">
+                <span class="tab-icon">📊</span>
+                <span class="tab-label">Прогресс</span>
+            </button>
+            <button class="tab-item" id="tab-nav-menu">
+                <span class="tab-icon">⚙️</span>
+                <span class="tab-label">Меню</span>
+            </button>
+        </nav>
+    </div>
+
+    <!-- Mobile Menu / Profile Sheet Modal -->
+    <div id="mobile-menu-modal" class="modal-backdrop hidden">
+        <div class="modal-window mobile-sheet-window">
+            <div class="modal-header">
+                <h3>⚙️ Профиль & Меню</h3>
+                <button class="modal-close-btn" id="mobile-menu-close-btn">✕</button>
+            </div>
+            <div class="modal-body mobile-menu-body">
+                <div class="mobile-user-card">
+                    <span class="mobile-user-avatar">👤</span>
+                    <div class="mobile-user-info">
+                        <strong id="mobile-user-name">user</strong>
+                        <p class="subtitle">Личный словарь English Lexicon</p>
+                    </div>
+                </div>
+                <div class="mobile-menu-actions">
+                    <button id="mobile-stats-btn" class="btn btn-outline btn-block">📊 Статистика & Календарь</button>
+                    <button id="mobile-export-btn" class="btn btn-outline btn-block">📤 Экспорт словаря</button>
+                    <button id="mobile-pwd-btn" class="btn btn-outline btn-block">🔑 Сменить пароль</button>
+                    <button id="mobile-theme-btn" class="btn btn-outline btn-block">🌓 Переключить тему</button>
+                    <button id="mobile-logout-btn" class="btn btn-danger btn-block">Выйти из аккаунта</button>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Analytics & Activity Heatmap Modal -->
@@ -902,6 +954,7 @@
 
     <!-- Interactive Click-to-Translate Popup (Mounted at body root to prevent scroll clipping) -->
     <div id="reader-word-popup" class="reader-word-popup hidden">
+        <div class="sheet-drag-handle mobile-only"></div>
         <div class="popup-header">
             <div class="popup-term-wrap">
                 <strong id="popup-term" class="popup-term">word</strong>
@@ -928,7 +981,7 @@
     <!-- Audio Element for native streaming -->
     <audio id="global-audio-player" preload="none"></audio>
 
-    <script src="/static/js/app.js?v=3.0"></script>
+    <script src="/static/js/app.js?v=3.1"></script>
 </body>
 </html>
 

app/static/js/app.js

@@ -392,7 +392,10 @@ document.addEventListener('DOMContentLoaded', () => {
     function showApp() {
         loginOverlay.classList.add('hidden');
         if (appShell) appShell.classList.remove('hidden');
-        userDisplayName.textContent = currentUser ? currentUser.username : 'user';
+        const name = currentUser ? currentUser.username : 'user';
+        userDisplayName.textContent = name;
+        const mobileUserName = document.getElementById('mobile-user-name');
+        if (mobileUserName) mobileUserName.textContent = name;
     }
 
     loginForm.addEventListener('submit', async (e) => {
@@ -506,7 +509,17 @@ document.addEventListener('DOMContentLoaded', () => {
             const resp = await fetch('/api/srs/stats');
             if (resp.ok) {
                 const stats = await resp.json();
-                srsBadge.textContent = stats.due_cards || 0;
+                const due = stats.due_cards || 0;
+                srsBadge.textContent = due;
+                const tabSrsBadge = document.getElementById('tab-srs-badge');
+                if (tabSrsBadge) {
+                    tabSrsBadge.textContent = due;
+                    if (due > 0) {
+                        tabSrsBadge.classList.remove('hidden');
+                    } else {
+                        tabSrsBadge.classList.add('hidden');
+                    }
+                }
             }
         } catch (e) {}
     }
@@ -970,10 +983,19 @@ document.addEventListener('DOMContentLoaded', () => {
         renderSrsCurrentCard();
     });
 
+    function updateMobileActiveTab(tabName) {
+        document.querySelectorAll('.mobile-tab-bar .tab-item').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        const target = document.getElementById(`tab-nav-${tabName}`);
+        if (target) target.classList.add('active');
+    }
+
     function openDictionaryView() {
         srsView.classList.add('hidden');
         if (readerView) readerView.classList.add('hidden');
         dictionaryView.classList.remove('hidden');
+        updateMobileActiveTab('dict');
         loadInitialData();
     }
 
@@ -981,6 +1003,7 @@ document.addEventListener('DOMContentLoaded', () => {
         dictionaryView.classList.add('hidden');
         if (readerView) readerView.classList.add('hidden');
         srsView.classList.remove('hidden');
+        updateMobileActiveTab('srs');
         startSrsTrainingSession(false, tagFilter);
     }
 
@@ -988,6 +1011,7 @@ document.addEventListener('DOMContentLoaded', () => {
         srsView.classList.add('hidden');
         if (readerView) readerView.classList.add('hidden');
         dictionaryView.classList.remove('hidden');
+        updateMobileActiveTab('dict');
         loadInitialData();
     }
 
@@ -995,11 +1019,107 @@ document.addEventListener('DOMContentLoaded', () => {
         dictionaryView.classList.add('hidden');
         srsView.classList.add('hidden');
         if (readerView) readerView.classList.remove('hidden');
+        updateMobileActiveTab('reader');
         loadBookshelf();
     }
 
+    function initMobileNavigation() {
+        const tabDict = document.getElementById('tab-nav-dict');
+        const tabSrs = document.getElementById('tab-nav-srs');
+        const tabReader = document.getElementById('tab-nav-reader');
+        const tabStats = document.getElementById('tab-nav-stats');
+        const tabMenu = document.getElementById('tab-nav-menu');
+
+        const mobileMenuModal = document.getElementById('mobile-menu-modal');
+        const mobileMenuToggleBtn = document.getElementById('mobile-menu-toggle-btn');
+        const mobileMenuCloseBtn = document.getElementById('mobile-menu-close-btn');
+
+        const mobileStatsBtn = document.getElementById('mobile-stats-btn');
+        const mobileExportBtn = document.getElementById('mobile-export-btn');
+        const mobilePwdBtn = document.getElementById('mobile-pwd-btn');
+        const mobileThemeBtn = document.getElementById('mobile-theme-btn');
+        const mobileLogoutBtn = document.getElementById('mobile-logout-btn');
+
+        if (tabDict) tabDict.addEventListener('click', () => openDictionaryView());
+        if (tabSrs) tabSrs.addEventListener('click', () => openSrsView());
+        if (tabReader) tabReader.addEventListener('click', () => openReaderView());
+
+        if (tabStats) {
+            tabStats.addEventListener('click', () => {
+                if (statsModal) {
+                    statsModal.classList.remove('hidden');
+                    loadStatsAndHeatmap();
+                }
+            });
+        }
+
+        function openMobileMenu() {
+            if (mobileMenuModal) {
+                const mobileUserName = document.getElementById('mobile-user-name');
+                if (mobileUserName && currentUser) {
+                    mobileUserName.textContent = currentUser.username;
+                }
+                mobileMenuModal.classList.remove('hidden');
+            }
+        }
+
+        function closeMobileMenu() {
+            if (mobileMenuModal) {
+                mobileMenuModal.classList.add('hidden');
+            }
+        }
+
+        if (tabMenu) tabMenu.addEventListener('click', openMobileMenu);
+        if (mobileMenuToggleBtn) mobileMenuToggleBtn.addEventListener('click', openMobileMenu);
+        if (mobileMenuCloseBtn) mobileMenuCloseBtn.addEventListener('click', closeMobileMenu);
+
+        if (mobileMenuModal) {
+            mobileMenuModal.addEventListener('click', (e) => {
+                if (e.target === mobileMenuModal) closeMobileMenu();
+            });
+        }
+
+        if (mobileStatsBtn) {
+            mobileStatsBtn.addEventListener('click', () => {
+                closeMobileMenu();
+                if (statsModal) {
+                    statsModal.classList.remove('hidden');
+                    loadStatsAndHeatmap();
+                }
+            });
+        }
+
+        if (mobileExportBtn) {
+            mobileExportBtn.addEventListener('click', () => {
+                closeMobileMenu();
+                if (exportModal) exportModal.classList.remove('hidden');
+            });
+        }
+
+        if (mobilePwdBtn) {
+            mobilePwdBtn.addEventListener('click', () => {
+                closeMobileMenu();
+                if (changePwdModal) changePwdModal.classList.remove('hidden');
+            });
+        }
+
+        if (mobileThemeBtn) {
+            mobileThemeBtn.addEventListener('click', () => {
+                themeToggle.click();
+            });
+        }
+
+        if (mobileLogoutBtn) {
+            mobileLogoutBtn.addEventListener('click', () => {
+                closeMobileMenu();
+                logoutBtn.click();
+            });
+        }
+    }
+
     navBrandHome.addEventListener('click', () => openDictionaryView());
     if (navReaderBtn) navReaderBtn.addEventListener('click', () => openReaderView());
+    initMobileNavigation();
 
     async function startSrsTrainingSession(forceAll = false, tagFilter = null) {
         srsLoading.classList.remove('hidden');
@@ -2396,6 +2516,11 @@ document.addEventListener('DOMContentLoaded', () => {
     // Precise popup positioning near target element without scroll double-offset
     function positionWordPopup(targetElement) {
         if (!targetElement || !readerWordPopup) return;
+        if (window.innerWidth <= 768) {
+            readerWordPopup.style.top = '';
+            readerWordPopup.style.left = '';
+            return;
+        }
         const rect = targetElement.getBoundingClientRect();
         const popupWidth = 320;
         const popupHeight = readerWordPopup.offsetHeight || 220;
@@ -2533,6 +2658,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function updatePopupPositionOnScroll() {
         if (!readerWordPopup || readerWordPopup.classList.contains('hidden')) return;
+        if (window.innerWidth <= 768) return; // Mobile uses fixed bottom sheet
         if (!popupCurrentData || !popupCurrentData.targetElement || !popupCurrentData.targetElement.isConnected) {
             readerWordPopup.classList.add('hidden');
             return;