feat(auth): v2.1.0 - MFA TOTP avec QR code, recovery codes

- backend/auth/mfa.py: TOTP (pyotp), recovery codes SHA-256
- Login flow: mfa_required → totp/verify → token (ou recovery)
- 6 nouveaux endpoints /api/auth/mfa/*
- Frontend: QR code setup, 6-digit auto-submit, recovery codes
- Settings: section Sécurité avec enable/disable MFA
- CSS: mfa-challenge, setup-card, recovery-list, badges
- i18n: 36 nouvelles clés EN/FR
- pyotp ajouté aux dépendances
- 30 tests (TOTP, recovery, API endpoints, login flow)
- 439 tests passent au total

frontend/js/auth.js

@@ -139,10 +139,71 @@ const AuthManager = {
       throw new Error(err.detail || "Erreur de connexion");
     }
     const data = await response.json();
+    // If MFA is required, return the MFA challenge instead of saving token
+    if (data.mfa_required) {
+      return data;
+    }
     this.saveToken(data);
     return data.user;
   },
 
+  async verifyMfa(username, code, rememberMe) {
+    const response = await fetch("/api/auth/mfa/totp/verify", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ username, code, remember_me: rememberMe || false }),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.detail || "Code invalide");
+    }
+    const data = await response.json();
+    this.saveToken(data);
+    return data.user;
+  },
+
+  async verifyRecovery(username, recoveryCode) {
+    const response = await fetch("/api/auth/mfa/recovery", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ username, recovery_code: recoveryCode }),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.detail || "Code invalide");
+    }
+    const data = await response.json();
+    this.saveToken(data);
+    return data.user;
+  },
+
+  // ── MFA Setup API calls ──────────────────────────────────────────
+
+  async getMfaStatus() {
+    const resp = await api("/api/auth/mfa/status");
+    return resp;
+  },
+
+  async mfaSetup() {
+    return await api("/api/auth/mfa/totp/setup", { method: "POST" });
+  },
+
+  async mfaEnable(code) {
+    return await api("/api/auth/mfa/totp/enable", {
+      method: "POST",
+      body: JSON.stringify({ code }),
+    });
+  },
+
+  async mfaDisable(password, code) {
+    return await api("/api/auth/mfa/totp/disable", {
+      method: "POST",
+      body: JSON.stringify({ password, code }),
+    });
+  },
+
   async logout() {
     try {
       const token = this.getToken();
@@ -278,6 +339,207 @@ const AuthManager = {
 };
 
 
+// ---------------------------------------------------------------------------
+// Post-login setup (shared between normal login and MFA login)
+// ---------------------------------------------------------------------------
+
+async function _onLoginSuccess() {
+  AuthManager.showApp();
+
+  // Re-sync language from server now that we're authenticated
+  try {
+    const resp = await fetch('/api/auth/me', { credentials: 'include' });
+    if (resp.ok) {
+      const user = await resp.json();
+      if (user.language && user.language !== getLocale()) {
+        await setLocale(user.language);
+      }
+    }
+  } catch (e) { /* non-bloquant */ }
+
+  // Load app data after successful login
+  try {
+    const { loadVaults, loadTags } = await import('./sidebar.js');
+    await Promise.all([loadVaults(), loadTags()]);
+    const { IndexUpdateManager } = await import('./sync.js');
+    IndexUpdateManager.connect();
+    const { syncFileIndexFromServer } = await import('./offline.js');
+    syncFileIndexFromServer();
+    showWelcome();
+  } catch (err) {
+    console.error("Failed to load data after login:", err);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+// MFA Challenge UI (TOTP code input during login)
+// ---------------------------------------------------------------------------
+
+function showMfaChallenge(username, rememberMe, loginBtn, loginErrorEl) {
+  const loginBox = document.querySelector(".login-box");
+  if (!loginBox) return;
+
+  // Hide the normal login form
+  const loginForm = document.getElementById("login-form");
+  if (loginForm) loginForm.classList.add("hidden");
+
+  // Create MFA challenge UI
+  let mfaSection = document.getElementById("mfa-challenge");
+  if (!mfaSection) {
+    mfaSection = document.createElement("div");
+    mfaSection.id = "mfa-challenge";
+    mfaSection.className = "mfa-challenge";
+    loginBox.appendChild(mfaSection);
+  }
+
+  mfaSection.innerHTML = `
+    <div class="mfa-icon">🔐</div>
+    <h3>${t('mfa.title')}</h3>
+    <p class="mfa-subtitle">${t('mfa.subtitle')}</p>
+    <form id="mfa-form">
+      <div class="mfa-code-input-group">
+        <input type="text" id="mfa-code" class="mfa-code-input" maxlength="6"
+               pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code"
+               placeholder="000000" autofocus required>
+      </div>
+      <p class="mfa-error hidden" id="mfa-error"></p>
+      <button type="submit" class="btn-login" id="mfa-verify-btn">
+        <span class="btn-text">${t('mfa.verify')}</span>
+        <span class="btn-spinner hidden">⏳</span>
+      </button>
+    </form>
+    <div class="mfa-actions">
+      <button type="button" class="mfa-link-btn" id="mfa-use-recovery">${t('mfa.use_recovery')}</button>
+      <button type="button" class="mfa-link-btn" id="mfa-back-login">${t('mfa.back_to_login')}</button>
+    </div>
+  `;
+  mfaSection.classList.remove("hidden");
+
+  const codeInput = document.getElementById("mfa-code");
+  codeInput.focus();
+
+  // Auto-submit when 6 digits entered
+  codeInput.addEventListener("input", () => {
+    codeInput.value = codeInput.value.replace(/[^0-9]/g, "");
+    if (codeInput.value.length === 6) {
+      document.getElementById("mfa-verify-btn").click();
+    }
+  });
+
+  // Handle MFA form submit
+  document.getElementById("mfa-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const code = codeInput.value.trim();
+    if (code.length !== 6) return;
+
+    const btn = document.getElementById("mfa-verify-btn");
+    const errorEl = document.getElementById("mfa-error");
+    btn.disabled = true;
+    btn.querySelector(".btn-spinner").classList.remove("hidden");
+    btn.querySelector(".btn-text").textContent = t('mfa.verifying');
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.verifyMfa(username, code, rememberMe);
+      mfaSection.classList.add("hidden");
+      if (loginForm) loginForm.classList.remove("hidden");
+      await _onLoginSuccess();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+      codeInput.value = "";
+      codeInput.focus();
+    } finally {
+      btn.disabled = false;
+      btn.querySelector(".btn-spinner").classList.add("hidden");
+      btn.querySelector(".btn-text").textContent = t('mfa.verify');
+    }
+  });
+
+  // Switch to recovery code input
+  document.getElementById("mfa-use-recovery").addEventListener("click", () => {
+    showRecoveryChallenge(username, rememberMe, loginForm, mfaSection);
+  });
+
+  // Back to login
+  document.getElementById("mfa-back-login").addEventListener("click", () => {
+    mfaSection.classList.add("hidden");
+    if (loginForm) loginForm.classList.remove("hidden");
+  });
+}
+
+
+function showRecoveryChallenge(username, rememberMe, loginForm, mfaSection) {
+  mfaSection.innerHTML = `
+    <div class="mfa-icon">🔑</div>
+    <h3>${t('mfa.recovery_title')}</h3>
+    <p class="mfa-subtitle">${t('mfa.recovery_subtitle')}</p>
+    <form id="recovery-form">
+      <div class="mfa-code-input-group">
+        <input type="text" id="recovery-code" class="mfa-code-input recovery-input" maxlength="9"
+               autocomplete="off" placeholder="XXXX-XXXX" autofocus required>
+      </div>
+      <p class="mfa-error hidden" id="recovery-error"></p>
+      <button type="submit" class="btn-login" id="recovery-verify-btn">
+        <span class="btn-text">${t('mfa.verify')}</span>
+        <span class="btn-spinner hidden">⏳</span>
+      </button>
+    </form>
+    <div class="mfa-actions">
+      <button type="button" class="mfa-link-btn" id="recovery-use-totp">${t('mfa.use_totp')}</button>
+      <button type="button" class="mfa-link-btn" id="recovery-back-login">${t('mfa.back_to_login')}</button>
+    </div>
+  `;
+
+  const codeInput = document.getElementById("recovery-code");
+  codeInput.focus();
+
+  // Auto-format: insert dash after 4 chars
+  codeInput.addEventListener("input", () => {
+    let v = codeInput.value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase();
+    if (v.length > 4) v = v.slice(0, 4) + "-" + v.slice(4, 8);
+    codeInput.value = v;
+  });
+
+  document.getElementById("recovery-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const code = codeInput.value.trim();
+    const btn = document.getElementById("recovery-verify-btn");
+    const errorEl = document.getElementById("recovery-error");
+    btn.disabled = true;
+    btn.querySelector(".btn-spinner").classList.remove("hidden");
+    btn.querySelector(".btn-text").textContent = t('mfa.verifying');
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.verifyRecovery(username, code);
+      mfaSection.classList.add("hidden");
+      if (loginForm) loginForm.classList.remove("hidden");
+      await _onLoginSuccess();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+      codeInput.value = "";
+      codeInput.focus();
+    } finally {
+      btn.disabled = false;
+      btn.querySelector(".btn-spinner").classList.add("hidden");
+      btn.querySelector(".btn-text").textContent = t('mfa.verify');
+    }
+  });
+
+  document.getElementById("recovery-use-totp").addEventListener("click", () => {
+    showMfaChallenge(username, rememberMe, null, null);
+  });
+
+  document.getElementById("recovery-back-login").addEventListener("click", () => {
+    mfaSection.classList.add("hidden");
+    if (loginForm) loginForm.classList.remove("hidden");
+  });
+}
+
+
 // ---------------------------------------------------------------------------
 // Login form handler
 // ---------------------------------------------------------------------------
@@ -300,36 +562,14 @@ function initLoginForm() {
     errorEl.classList.add("hidden");
 
     try {
-      await AuthManager.login(username, password, rememberMe);
-      AuthManager.showApp();
-
-      // Re-sync language from server now that we're authenticated
-      try {
-        const resp = await fetch('/api/auth/me', { credentials: 'include' });
-        if (resp.ok) {
-          const user = await resp.json();
-          if (user.language && user.language !== getLocale()) {
-            await setLocale(user.language);
-          }
-        }
-      } catch (e) { /* non-bloquant */ }
-
-      // Load app data after successful login
-      try {
-        // Dynamic imports to avoid circular dependency with sidebar.js
-        const { loadVaults, loadTags } = await import('./sidebar.js');
-        await Promise.all([loadVaults(), loadTags()]);
-        // Start SSE sync now that auth cookie is set (dynamic import to avoid circular dep)
-        const { IndexUpdateManager } = await import('./sync.js');
-        IndexUpdateManager.connect();
-        // Sync offline file index now that we're authenticated
-        const { syncFileIndexFromServer } = await import('./offline.js');
-        syncFileIndexFromServer();
-        // Show dashboard
-        showWelcome();
-      } catch (err) {
-        console.error("Failed to load data after login:", err);
+      const result = await AuthManager.login(username, password, rememberMe);
+      // Check if MFA is required
+      if (result && result.mfa_required) {
+        showMfaChallenge(result.username, rememberMe, btn, errorEl);
+        return;
       }
+      // Normal login success
+      await _onLoginSuccess();
       safeCreateIcons();
     } catch (err) {
       errorEl.textContent = err.message;
@@ -576,4 +816,215 @@ const AdminPanel = {
 };
 
 
-export { api, AuthManager, initLoginForm, AdminPanel };
+// ---------------------------------------------------------------------------
+// MFA Settings — Setup/Disable UI in the settings panel
+// ---------------------------------------------------------------------------
+
+async function initMfaSettings() {
+  const area = document.getElementById("mfa-setup-area");
+  const badge = document.getElementById("mfa-status-badge");
+  if (!area || !badge) return;
+
+  // Check current MFA status
+  let mfaEnabled = false;
+  try {
+    const status = await AuthManager.getMfaStatus();
+    mfaEnabled = status.mfa_enabled;
+  } catch (e) {
+    // Not logged in or error
+    return;
+  }
+
+  if (mfaEnabled) {
+    badge.textContent = t("mfa.enabled");
+    badge.className = "mfa-badge mfa-badge-on";
+    area.innerHTML = `
+      <p class="mfa-info-text" data-i18n="mfa.enabled_desc">${t("mfa.enabled_desc")}</p>
+      <button class="config-btn-secondary" id="mfa-disable-btn">${t("mfa.disable_btn")}</button>
+      <div id="mfa-disable-form-area"></div>
+    `;
+    document.getElementById("mfa-disable-btn").addEventListener("click", () => {
+      _showDisableMfaForm();
+    });
+  } else {
+    badge.textContent = t("mfa.disabled");
+    badge.className = "mfa-badge mfa-badge-off";
+    area.innerHTML = `
+      <p class="mfa-info-text" data-i18n="mfa.setup_desc">${t("mfa.setup_desc")}</p>
+      <button class="config-btn-primary" id="mfa-enable-btn">${t("mfa.enable_btn")}</button>
+      <div id="mfa-setup-flow-area"></div>
+    `;
+    document.getElementById("mfa-enable-btn").addEventListener("click", () => {
+      _startMfaSetup();
+    });
+  }
+}
+
+
+async function _startMfaSetup() {
+  const flowArea = document.getElementById("mfa-setup-flow-area");
+  if (!flowArea) return;
+
+  try {
+    const data = await AuthManager.mfaSetup();
+    flowArea.innerHTML = `
+      <div class="mfa-setup-card">
+        <h4>${t("mfa.scan_qr")}</h4>
+        <div class="mfa-qr-container">
+          <img id="mfa-qr-img" alt="QR Code" class="mfa-qr-code"
+               src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(data.otpauth_uri)}">
+        </div>
+        <details class="mfa-secret-details">
+          <summary>${t("mfa.manual_entry")}</summary>
+          <code class="mfa-secret-code">${data.secret}</code>
+        </details>
+        <div class="mfa-verify-section">
+          <label>${t("mfa.enter_code")}</label>
+          <input type="text" id="mfa-enable-code" class="mfa-code-input" maxlength="6"
+                 pattern="[0-9]{6}" inputmode="numeric" placeholder="000000" autocomplete="one-time-code">
+          <button class="config-btn-primary" id="mfa-confirm-btn">${t("mfa.confirm_enable")}</button>
+          <p class="mfa-error hidden" id="mfa-enable-error"></p>
+        </div>
+      </div>
+    `;
+
+    const codeInput = document.getElementById("mfa-enable-code");
+    codeInput.addEventListener("input", () => {
+      codeInput.value = codeInput.value.replace(/[^0-9]/g, "");
+    });
+
+    document.getElementById("mfa-confirm-btn").addEventListener("click", async () => {
+      const code = codeInput.value.trim();
+      if (code.length !== 6) return;
+
+      const btn = document.getElementById("mfa-confirm-btn");
+      const errorEl = document.getElementById("mfa-enable-error");
+      btn.disabled = true;
+      btn.textContent = t("mfa.verifying");
+      errorEl.classList.add("hidden");
+
+      try {
+        const result = await AuthManager.mfaEnable(code);
+        // Show recovery codes
+        _showRecoveryCodes(result.recovery_codes);
+      } catch (err) {
+        errorEl.textContent = err.message;
+        errorEl.classList.remove("hidden");
+        codeInput.value = "";
+        codeInput.focus();
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t("mfa.confirm_enable");
+      }
+    });
+  } catch (err) {
+    flowArea.innerHTML = `<p class="mfa-error">${err.message}</p>`;
+  }
+}
+
+
+function _showRecoveryCodes(codes) {
+  const flowArea = document.getElementById("mfa-setup-flow-area");
+  const area = document.getElementById("mfa-setup-area");
+  if (!flowArea) return;
+
+  const codesHtml = codes.map(c => `<code class="mfa-recovery-code">${c}</code>`).join("\n");
+  flowArea.innerHTML = `
+    <div class="mfa-recovery-card">
+      <h4>🔑 ${t("mfa.recovery_codes_title")}</h4>
+      <p class="mfa-warning">${t("mfa.recovery_codes_warning")}</p>
+      <div class="mfa-recovery-list" id="mfa-recovery-list">
+        ${codesHtml}
+      </div>
+      <div class="mfa-recovery-actions">
+        <button class="config-btn-secondary" id="mfa-copy-codes">${t("mfa.copy_codes")}</button>
+        <button class="config-btn-secondary" id="mfa-download-codes">${t("mfa.download_codes")}</button>
+        <button class="config-btn-primary" id="mfa-codes-done">${t("mfa.done")}</button>
+      </div>
+    </div>
+  `;
+
+  document.getElementById("mfa-copy-codes").addEventListener("click", () => {
+    navigator.clipboard.writeText(codes.join("\n")).then(() => {
+      showToast(t("mfa.codes_copied"), "success");
+    });
+  });
+
+  document.getElementById("mfa-download-codes").addEventListener("click", () => {
+    const blob = new Blob([codes.join("\n")], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "obsigate-recovery-codes.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+
+  document.getElementById("mfa-codes-done").addEventListener("click", () => {
+    // Refresh MFA settings display
+    initMfaSettings();
+  });
+}
+
+
+function _showDisableMfaForm() {
+  const formArea = document.getElementById("mfa-disable-form-area");
+  if (!formArea) return;
+
+  formArea.innerHTML = `
+    <div class="mfa-disable-card">
+      <h4>${t("mfa.disable_confirm_title")}</h4>
+      <p>${t("mfa.disable_confirm_desc")}</p>
+      <div class="form-group">
+        <label>${t("mfa.password_label")}</label>
+        <input type="password" id="mfa-disable-password" class="config-input" placeholder="${t('mfa.password_placeholder')}">
+      </div>
+      <div class="form-group">
+        <label>${t("mfa.totp_code_label")}</label>
+        <input type="text" id="mfa-disable-code" class="mfa-code-input" maxlength="6"
+               pattern="[0-9]{6}" inputmode="numeric" placeholder="000000">
+      </div>
+      <div class="mfa-disable-actions">
+        <button class="config-btn-secondary" id="mfa-disable-cancel">${t("common.cancel")}</button>
+        <button class="config-btn-danger" id="mfa-disable-confirm">${t("mfa.disable_confirm_btn")}</button>
+      </div>
+      <p class="mfa-error hidden" id="mfa-disable-error"></p>
+    </div>
+  `;
+
+  document.getElementById("mfa-disable-cancel").addEventListener("click", () => {
+    formArea.innerHTML = "";
+  });
+
+  document.getElementById("mfa-disable-confirm").addEventListener("click", async () => {
+    const password = document.getElementById("mfa-disable-password").value;
+    const code = document.getElementById("mfa-disable-code").value.trim();
+    const errorEl = document.getElementById("mfa-disable-error");
+    const btn = document.getElementById("mfa-disable-confirm");
+
+    if (!password || code.length !== 6) {
+      errorEl.textContent = t("mfa.fill_all_fields");
+      errorEl.classList.remove("hidden");
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = t("mfa.verifying");
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.mfaDisable(password, code);
+      showToast(t("mfa.disabled_success"), "success");
+      initMfaSettings();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+    } finally {
+      btn.disabled = false;
+      btn.textContent = t("mfa.disable_confirm_btn");
+    }
+  });
+}
+
+
+export { api, AuthManager, initLoginForm, AdminPanel, initMfaSettings };

frontend/js/config.js

@@ -1,5 +1,5 @@
 // config.js — extracted from app.js (3872-4865)
-import { api, AuthManager } from './auth.js';
+import { api, AuthManager, initMfaSettings } from './auth.js';
 import { state } from './state.js';
 import { el, icon, openFile } from './viewer.js';
 import { syncVaultSelectors, setSelectedVaultContext, refreshSidebarForContext, loadVaults, loadVaultSettings, loadTags, TagFilterService, refreshSidebarTreePreservingState } from './sidebar.js';
@@ -663,6 +663,9 @@ function initConfigModal() {
 
   // Init profile
   initProfile();
+
+  // Init MFA settings (security tab)
+  initMfaSettings();
 }
 
 function closeConfigModal() {
@@ -1414,25 +1417,40 @@ export {
 function initThemePicker() {
   import('./themes.js').then(function(mod) {
     var THEMES = mod.THEMES;
+    var AVAILABLE_MODES = mod.AVAILABLE_MODES;
     var applyTheme = mod.applyTheme;
     var getCurrentTheme = mod.getCurrentTheme;
     var getCurrentMode = mod.getCurrentMode;
+    var exportAllThemes = mod.exportAllThemes;
+    var importTheme = mod.importTheme;
+    var deleteCustomTheme = mod.deleteCustomTheme;
+    var loadCustomThemes = mod.loadCustomThemes;
 
     var grid = document.getElementById('theme-grid');
     if (!grid) return;
 
-    var themeKeys = Object.keys(THEMES);
+    // Mode label map (uses i18n t() when available, fallback to English)
+    var modeLabels = {
+      'dark': function() { return t('theme.dark'); },
+      'light': function() { return t('theme.light'); },
+      'high-contrast': function() { return t('theme.high_contrast'); },
+      'sepia': function() { return t('theme.sepia'); }
+    };
 
     function renderCards() {
+      var themeKeys = Object.keys(THEMES);
       var current = getCurrentTheme();
       var mode = getCurrentMode();
       grid.innerHTML = '';
+
       themeKeys.forEach(function(key) {
-        var t = THEMES[key];
-        var v = t.modes[mode];
+        var th = THEMES[key];
+        // Use dark mode for preview if mode not resolved yet
+        var v = th.modes[mode] || th.modes.dark || th.modes.light;
         if (!v) return;
         var card = document.createElement('div');
         card.className = 'theme-card' + (key === current ? ' active' : '');
+        var isCustom = th.desc === 'Custom theme';
         card.innerHTML =
           '<div class="theme-card-preview">' +
             '<div class="theme-card-preview-bar" style="background:' + (v['--bg-sidebar'] || v['--bg-primary']) + '"></div>' +
@@ -1440,33 +1458,101 @@ function initThemePicker() {
               '<div class="theme-card-preview-btn" style="background:' + (v['--accent'] || '#58a6ff') + '"></div>' +
             '</div>' +
           '</div>' +
-          '<div class="theme-card-name">' + t.name + '</div>' +
-          '<div class="theme-card-desc">' + t.desc + '</div>';
+          '<div class="theme-card-name">' + th.name + (isCustom ? ' <span class="theme-custom-badge">✦</span>' : '') + '</div>' +
+          '<div class="theme-card-desc">' + th.desc + '</div>';
         card.addEventListener('click', function() {
           applyTheme(key, mode);
           renderCards();
         });
+        // Right-click to delete custom themes
+        if (isCustom) {
+          card.addEventListener('contextmenu', function(e) {
+            e.preventDefault();
+            if (confirm(t('theme.delete_confirm'))) {
+              deleteCustomTheme(key);
+              renderCards();
+            }
+          });
+        }
         grid.appendChild(card);
       });
-      // Mode toggle
+
+      // Mode toggle — 4 modes
       var toggle = document.createElement('div');
       toggle.className = 'theme-mode-toggle';
-      var dBtn = elBtn(t('theme.dark'), 'dark', mode);
-      var lBtn = elBtn(t('theme.light'), 'light', mode);
-      toggle.appendChild(dBtn);
-      toggle.appendChild(lBtn);
-      grid.appendChild(toggle);
-    }
-
-    function elBtn(label, m, currentMode) {
-      var btn = document.createElement('button');
-      btn.className = 'theme-mode-btn' + (m === currentMode ? ' active' : '');
-      btn.textContent = label;
-      btn.addEventListener('click', function() {
-        applyTheme(getCurrentTheme(), m);
-        renderCards();
+      AVAILABLE_MODES.forEach(function(m) {
+        var btn = document.createElement('button');
+        btn.className = 'theme-mode-btn' + (m === mode ? ' active' : '');
+        btn.textContent = (modeLabels[m] || function() { return m; })();
+        btn.addEventListener('click', function() {
+          applyTheme(getCurrentTheme(), m);
+          renderCards();
+        });
+        toggle.appendChild(btn);
       });
-      return btn;
+      grid.appendChild(toggle);
+
+      // Import/Export buttons
+      var actions = document.createElement('div');
+      actions.className = 'theme-actions';
+
+      var exportBtn = document.createElement('button');
+      exportBtn.className = 'theme-action-btn';
+      exportBtn.textContent = t('theme.export_all');
+      exportBtn.addEventListener('click', function() {
+        var json = exportAllThemes();
+        var blob = new Blob([json], { type: 'application/json' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url; a.download = 'obsigate-themes.json'; a.click();
+        URL.revokeObjectURL(url);
+      });
+
+      var importBtn = document.createElement('button');
+      importBtn.className = 'theme-action-btn';
+      importBtn.textContent = t('theme.import');
+      importBtn.addEventListener('click', function() {
+        var input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.addEventListener('change', function(e) {
+          var file = e.target.files[0];
+          if (!file) return;
+          var reader = new FileReader();
+          reader.onload = function(ev) {
+            var content = ev.target.result;
+            // Support single theme or all-themes format
+            try {
+              var data = JSON.parse(content);
+              if (data.themes) {
+                // Multi-theme export: import each
+                var count = 0;
+                Object.keys(data.themes).forEach(function(k) {
+                  var res = importTheme(JSON.stringify(data.themes[k]));
+                  if (res.ok) count++;
+                });
+                alert(t('theme.import_success', { count: count }));
+              } else {
+                var res = importTheme(content);
+                if (res.ok) {
+                  alert(t('theme.import_success', { count: 1 }));
+                } else {
+                  alert(t('theme.import_error') + ': ' + res.error);
+                }
+              }
+            } catch(ex) {
+              alert(t('theme.import_error') + ': ' + ex.message);
+            }
+            renderCards();
+          };
+          reader.readAsText(file);
+        });
+        input.click();
+      });
+
+      actions.appendChild(exportBtn);
+      actions.appendChild(importBtn);
+      grid.appendChild(actions);
     }
 
     renderCards();