05/02/2026 updated code for security 3

app/static/js/auth.js

@@ -10,23 +10,25 @@ const Auth = (() => {
 
   function csrfToken() {
     const meta = document.querySelector('meta[name="csrf-token"]');
-    return meta ? meta.content : '';
+    return meta ? meta.content : "";
   }
 
   function showError(formEl, message) {
-    let el = formEl.querySelector('.form-error');
+    let el = formEl.querySelector(".form-error");
     if (!el) {
-      el = document.createElement('p');
+      el = document.createElement("p");
-      el.className = 'form-error';
+      el.className = "form-error";
       formEl.prepend(el);
     }
     el.textContent = message;
-    el.classList.remove('hidden');
+    el.classList.remove("hidden");
   }
 
   function setLoading(btn, loading) {
     btn.disabled = loading;
-    btn.textContent = loading ? btn.dataset.loadingText || 'Please wait…' : btn.dataset.originalText;
+    btn.textContent = loading
+      ? btn.dataset.loadingText || "Please wait…"
+      : btn.dataset.originalText;
   }
 
   // ── Register ─────────────────────────────────────────────────────────────
@@ -41,24 +43,36 @@ const Auth = (() => {
     const password = form.password.value;
     const confirm = form.confirm_password.value;
 
-    if (password !== confirm) { showError(form, 'Passwords do not match.'); return; }
+    if (password !== confirm) {
-    if (password.length < 12) { showError(form, 'Master password must be at least 12 characters.'); return; }
+      showError(form, "Passwords do not match.");
+      return;
+    }
+    if (password.length < 12) {
+      showError(form, "Master password must be at least 12 characters.");
+      return;
+    }
 
     setLoading(btn, true);
     try {
       const authHash = await Crypto.deriveAuthHash(password, email);
       const enc_key_salt = Crypto.generateSalt(16);
 
-      const res = await fetch('/api/auth/register', {
+      const res = await fetch("/api/auth/register", {
-        method: 'POST',
+        method: "POST",
-        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRFToken": csrfToken(),
+        },
         body: JSON.stringify({ email, auth_hash: authHash, enc_key_salt }),
       });
       const data = await res.json();
-      if (!res.ok) { showError(form, data.error || 'Registration failed.'); return; }
+      if (!res.ok) {
-      window.location.href = '/login?registered=1';
+        showError(form, data.error || "Registration failed.");
+        return;
+      }
+      window.location.href = "/login?registered=1";
     } catch (err) {
-      showError(form, 'An unexpected error occurred. Please try again.');
+      showError(form, "An unexpected error occurred. Please try again.");
       console.error(err);
     } finally {
       setLoading(btn, false);
@@ -85,27 +99,33 @@ const Auth = (() => {
     try {
       const authHash = await Crypto.deriveAuthHash(password, email);
 
-      const res = await fetch('/api/auth/login', {
+      const res = await fetch("/api/auth/login", {
-        method: 'POST',
+        method: "POST",
-        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRFToken": csrfToken(),
+        },
         body: JSON.stringify({ email, auth_hash: authHash }),
       });
       const data = await res.json();
-      if (!res.ok) { showError(form, data.error || 'Invalid email or password.'); return; }
+      if (!res.ok) {
+        showError(form, data.error || "Invalid email or password.");
+        return;
+      }
 
       if (data.mfa_required) {
         // Step 2: collect TOTP code
         _pendingMfaToken = data.mfa_token;
         _pendingEncKeySalt = data.enc_key_salt;
         _pendingPassword = password;
-        sessionStorage.setItem('enc_key_salt', data.enc_key_salt);
+        sessionStorage.setItem("enc_key_salt", data.enc_key_salt);
         showMfaStep();
         return;
       }
 
       await completeLogin(password, data);
     } catch (err) {
-      showError(form, 'An unexpected error occurred. Please try again.');
+      showError(form, "An unexpected error occurred. Please try again.");
       console.error(err);
     } finally {
       setLoading(btn, false);
@@ -117,21 +137,48 @@ const Auth = (() => {
     const form = e.target;
     const btn = form.querySelector('[type="submit"]');
     btn.dataset.originalText = btn.textContent;
-    const errEl = document.getElementById('mfa-error');
+    const errEl = document.getElementById("mfa-error");
-    errEl.classList.add('hidden');
+    errEl.classList.add("hidden");
 
-    const totp_code = document.getElementById('mfa-code').value.trim();
+    const usingBackup = !document
-    if (!totp_code) return;
+      .getElementById("mfa-backup-section")
+      .classList.contains("hidden");
+    const body = { mfa_token: _pendingMfaToken };
+
+    if (usingBackup) {
+      const code = document
+        .getElementById("mfa-backup-code")
+        .value.trim()
+        .toLowerCase()
+        .replace(/[\s-]/g, "");
+      if (!code) {
+        errEl.textContent = "Enter your backup code.";
+        errEl.classList.remove("hidden");
+        return;
+      }
+      body.backup_code = code;
+    } else {
+      const totp_code = document.getElementById("mfa-code").value.trim();
+      if (!totp_code) return;
+      body.totp_code = totp_code;
+    }
 
     setLoading(btn, true);
     try {
-      const res = await fetch('/api/auth/mfa/verify', {
+      const res = await fetch("/api/auth/mfa/verify", {
-        method: 'POST',
+        method: "POST",
-        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
+        headers: {
-        body: JSON.stringify({ mfa_token: _pendingMfaToken, totp_code }),
+          "Content-Type": "application/json",
+          "X-CSRFToken": csrfToken(),
+        },
+        body: JSON.stringify(body),
       });
       const data = await res.json();
-      if (!res.ok) { errEl.classList.remove('hidden'); return; }
+      if (!res.ok) {
+        errEl.textContent = data.error || "Invalid code. Try again.";
+        errEl.classList.remove("hidden");
+        return;
+      }
 
       await completeLogin(_pendingPassword, {
         access_token: data.access_token,
@@ -139,7 +186,8 @@ const Auth = (() => {
         enc_key_salt: _pendingEncKeySalt,
       });
     } catch (err) {
-      errEl.classList.remove('hidden');
+      errEl.textContent = "An unexpected error occurred. Please try again.";
+      errEl.classList.remove("hidden");
       console.error(err);
     } finally {
       setLoading(btn, false);
@@ -147,36 +195,38 @@ const Auth = (() => {
   }
 
   async function completeLogin(password, data) {
-    sessionStorage.setItem('access_token', data.access_token);
+    sessionStorage.setItem("access_token", data.access_token);
-    localStorage.setItem('refresh_token', data.refresh_token);
+    localStorage.setItem("refresh_token", data.refresh_token);
-    sessionStorage.setItem('enc_key_salt', data.enc_key_salt);
+    sessionStorage.setItem("enc_key_salt", data.enc_key_salt);
 
     // Notify the browser extension (if installed) so it can share the session
-    window.dispatchEvent(new CustomEvent('passkeeper:session', {
+    window.dispatchEvent(
-      detail: {
+      new CustomEvent("passkeeper:session", {
-        access_token: data.access_token,
+        detail: {
-        refresh_token: data.refresh_token,
+          access_token: data.access_token,
-        enc_key_salt: data.enc_key_salt,
+          refresh_token: data.refresh_token,
-      },
+          enc_key_salt: data.enc_key_salt,
-    }));
+        },
+      }),
+    );
 
     const vaultKey = await Crypto.deriveVaultKey(password, data.enc_key_salt);
     VaultSession.setKey(vaultKey);
 
-    window.location.href = '/vault';
+    window.location.href = "/vault";
   }
 
   function showMfaStep() {
-    document.getElementById('login-step-1').classList.add('hidden');
+    document.getElementById("login-step-1").classList.add("hidden");
-    document.getElementById('login-step-2').classList.remove('hidden');
+    document.getElementById("login-step-2").classList.remove("hidden");
-    document.getElementById('mfa-code').focus();
+    document.getElementById("mfa-code").focus();
   }
 
   function hideMfaStep() {
-    document.getElementById('login-step-2').classList.add('hidden');
+    document.getElementById("login-step-2").classList.add("hidden");
-    document.getElementById('login-step-1').classList.remove('hidden');
+    document.getElementById("login-step-1").classList.remove("hidden");
-    document.getElementById('mfa-code').value = '';
+    document.getElementById("mfa-code").value = "";
-    document.getElementById('mfa-error').classList.add('hidden');
+    document.getElementById("mfa-error").classList.add("hidden");
     _pendingMfaToken = null;
     _pendingEncKeySalt = null;
     _pendingPassword = null;
@@ -188,17 +238,17 @@ const Auth = (() => {
     const btn = document.getElementById(btnId);
     const input = document.getElementById(inputId);
     if (btn && input) {
-      btn.addEventListener('click', () => {
+      btn.addEventListener("click", () => {
-        input.type = input.type === 'password' ? 'text' : 'password';
+        input.type = input.type === "password" ? "text" : "password";
       });
     }
   }
 
   function initStrengthMeter() {
-    const input = document.getElementById('password');
+    const input = document.getElementById("password");
-    const bar = document.getElementById('strength-bar');
+    const bar = document.getElementById("strength-bar");
     if (!input || !bar) return;
-    input.addEventListener('input', function () {
+    input.addEventListener("input", function () {
       const v = this.value;
       let score = 0;
       if (v.length >= 12) score++;
@@ -206,45 +256,84 @@ const Auth = (() => {
       if (/[A-Z]/.test(v)) score++;
       if (/[0-9]/.test(v)) score++;
       if (/[^A-Za-z0-9]/.test(v)) score++;
-      const labels = ['', 'Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
+      const labels = ["", "Very weak", "Weak", "Fair", "Strong", "Very strong"];
-      const classes = ['', 'strength-1', 'strength-2', 'strength-3', 'strength-4', 'strength-5'];
+      const classes = [
-      bar.textContent = v ? labels[score] : '';
+        "",
-      bar.className = 'password-strength ' + (v ? classes[score] : '');
+        "strength-1",
+        "strength-2",
+        "strength-3",
+        "strength-4",
+        "strength-5",
+      ];
+      bar.textContent = v ? labels[score] : "";
+      bar.className = "password-strength " + (v ? classes[score] : "");
     });
   }
 
   function init() {
-    const registerForm = document.getElementById('register-form');
+    const registerForm = document.getElementById("register-form");
-    if (registerForm) registerForm.addEventListener('submit', handleRegister);
+    if (registerForm) registerForm.addEventListener("submit", handleRegister);
 
-    const loginForm = document.getElementById('login-form');
+    const loginForm = document.getElementById("login-form");
-    if (loginForm) loginForm.addEventListener('submit', handleLogin);
+    if (loginForm) loginForm.addEventListener("submit", handleLogin);
 
-    const mfaForm = document.getElementById('mfa-form');
+    const mfaForm = document.getElementById("mfa-form");
-    if (mfaForm) mfaForm.addEventListener('submit', handleMfaVerify);
+    if (mfaForm) mfaForm.addEventListener("submit", handleMfaVerify);
 
-    document.getElementById('btn-back-to-password')?.addEventListener('click', hideMfaStep);
+    document
+      .getElementById("btn-back-to-password")
+      ?.addEventListener("click", hideMfaStep);
 
-    initPasswordToggle('toggle-login-pass', 'password');
+    document
-    initPasswordToggle('toggle-reg-pass', 'password');
+      .getElementById("btn-use-backup-code")
+      ?.addEventListener("click", () => {
+        document.getElementById("mfa-totp-section").classList.add("hidden");
+        document
+          .getElementById("mfa-backup-section")
+          .classList.remove("hidden");
+        document.getElementById("btn-use-backup-code").classList.add("hidden");
+        document.getElementById("btn-use-totp-code").classList.remove("hidden");
+        document.getElementById("mfa-backup-code").focus();
+      });
+
+    document
+      .getElementById("btn-use-totp-code")
+      ?.addEventListener("click", () => {
+        document.getElementById("mfa-backup-section").classList.add("hidden");
+        document.getElementById("mfa-totp-section").classList.remove("hidden");
+        document.getElementById("btn-use-totp-code").classList.add("hidden");
+        document
+          .getElementById("btn-use-backup-code")
+          .classList.remove("hidden");
+        document.getElementById("mfa-code").focus();
+      });
+
+    initPasswordToggle("toggle-login-pass", "password");
+    initPasswordToggle("toggle-reg-pass", "password");
     initStrengthMeter();
 
-    if (window.location.search.includes('registered=1')) {
+    if (window.location.search.includes("registered=1")) {
-      const notice = document.getElementById('register-notice');
+      const notice = document.getElementById("register-notice");
-      if (notice) notice.classList.remove('hidden');
+      if (notice) notice.classList.remove("hidden");
     }
   }
 
   return { init };
 })();
 
-document.addEventListener('DOMContentLoaded', Auth.init);
+document.addEventListener("DOMContentLoaded", Auth.init);
 
 // ── VaultSession — holds the vault key for the lifetime of the browser tab ──
 const VaultSession = (() => {
   let _vaultKey = null;
-  function setKey(key) { _vaultKey = key; }
+  function setKey(key) {
-  function getKey() { return _vaultKey; }
+    _vaultKey = key;
-  function clear() { _vaultKey = null; }
+  }
+  function getKey() {
+    return _vaultKey;
+  }
+  function clear() {
+    _vaultKey = null;
+  }
   return { setKey, getKey, clear };
 })();

app/templates/auth/login.html

@@ -1,8 +1,5 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% block title %}Sign In — PassKeeper{% endblock %} {%
-{% block title %}Sign In — PassKeeper{% endblock %}
+block body_class %}auth-page{% endblock %} {% block body %}
-{% block body_class %}auth-page{% endblock %}
-
-{% block body %}
 <div class="auth-container">
   <div class="auth-card">
     <div class="auth-logo">
@@ -20,24 +17,46 @@
       <form id="login-form" novalidate>
         <div class="form-group">
           <label for="email">Email address</label>
-          <input type="email" id="email" name="email" required
+          <input
-                 autocomplete="email" placeholder="you@example.com">
+            type="email"
+            id="email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+          />
         </div>
         <div class="form-group">
           <label for="password">Master password</label>
           <div class="input-with-toggle">
-            <input type="password" id="password" name="password" required
+            <input
-                   autocomplete="current-password" placeholder="Enter master password">
+              type="password"
-            <button type="button" class="btn-show-pass" id="toggle-login-pass"
+              id="password"
-                    aria-label="Toggle password visibility">👁</button>
+              name="password"
+              required
+              autocomplete="current-password"
+              placeholder="Enter master password"
+            />
+            <button
+              type="button"
+              class="btn-show-pass"
+              id="toggle-login-pass"
+              aria-label="Toggle password visibility"
+            >
+              👁
+            </button>
           </div>
         </div>
-        <button type="submit" class="btn-primary btn-full" data-loading-text="Verifying…">
+        <button
+          type="submit"
+          class="btn-primary btn-full"
+          data-loading-text="Verifying…"
+        >
           Sign in
         </button>
       </form>
       <p class="auth-footer">
-        Don't have an account? <a href="/register">Create one</a><br>
+        Don't have an account? <a href="/register">Create one</a><br />
         Forgot your password? <a href="/recover">Use recovery code</a>
       </p>
     </div>
@@ -45,29 +64,65 @@
     <!-- Step 2: TOTP verification (hidden until MFA required) -->
     <div id="login-step-2" class="hidden">
       <h1 class="auth-title">Two-factor authentication</h1>
-      <p class="auth-step-hint">Enter the 6-digit code from your authenticator app.</p>
+      <p class="auth-step-hint">
+        Enter the 6-digit code from your authenticator app.
+      </p>
       <form id="mfa-form" novalidate>
-        <p id="mfa-error" class="form-error hidden">Invalid or expired code. Try again.</p>
+        <p id="mfa-error" class="form-error hidden">
-        <div class="form-group">
+          Invalid or expired code. Try again.
+        </p>
+
+        <!-- TOTP input (default) -->
+        <div id="mfa-totp-section" class="form-group">
           <label for="mfa-code">Authenticator code</label>
-          <input type="text" id="mfa-code" name="mfa_code"
+          <input
-                 inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
+            type="text"
-                 autocomplete="one-time-code" placeholder="000000">
+            id="mfa-code"
+            name="mfa_code"
+            inputmode="numeric"
+            pattern="[0-9]{6}"
+            maxlength="6"
+            autocomplete="one-time-code"
+            placeholder="000000"
+          />
         </div>
-        <button type="submit" class="btn-primary btn-full" data-loading-text="Verifying…">
+
+        <!-- Backup code input (hidden until user switches) -->
+        <div id="mfa-backup-section" class="form-group hidden">
+          <label for="mfa-backup-code">Backup code</label>
+          <input
+            type="text"
+            id="mfa-backup-code"
+            name="mfa_backup_code"
+            autocomplete="off"
+            placeholder="e.g. ab3rqxyz9p"
+            style="letter-spacing: 0.05em"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="btn-primary btn-full"
+          data-loading-text="Verifying…"
+        >
           Verify
         </button>
       </form>
       <div class="auth-footer">
-        <button class="btn-text" id="btn-back-to-password">← Back to sign in</button>
+        <button class="btn-text" id="btn-use-backup-code">
+          Use a backup code instead
+        </button>
+        <button class="btn-text hidden" id="btn-use-totp-code">
+          Use authenticator code instead
+        </button>
+        <button class="btn-text" id="btn-back-to-password">
+          ← Back to sign in
+        </button>
       </div>
     </div>
-
   </div>
 </div>
-{% endblock %}
+{% endblock %} {% block scripts %}
-
-{% block scripts %}
 <script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
 <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
 {% endblock %}

app/templates/vault/index.html

@@ -899,6 +899,16 @@
       </div>
     </div>
 
+    </div>
+
+    <!-- Audit Log Section -->
+    <div class="settings-section">
+      <h4 class="settings-section-title">📋 Login & Activity History</h4>
+      <p class="settings-desc">Recent account activity. Unfamiliar entries may indicate unauthorised access.</p>
+      <div id="audit-log-list" style="margin-top:8px;font-size:13px;"></div>
+      <button class="btn-secondary" id="btn-load-more-audit" style="margin-top:10px;display:none;">Load more</button>
+    </div>
+
     <div class="settings-section settings-section-danger">
       <h4 class="settings-section-title">⚠️ Danger Zone</h4>
       <p class="settings-desc">

extension/popup/popup.html

@@ -1,340 +1,627 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>PassKeeper</title>
+    <link rel="stylesheet" href="popup.css" />
+  </head>
 
-<head>
+  <body>
-  <meta charset="UTF-8">
+    <div id="app">
-  <title>PassKeeper</title>
+      <!-- ── Login view ──────────────────────────────────────────────────── -->
-  <link rel="stylesheet" href="popup.css">
+      <div id="view-login" class="view hidden">
-</head>
+        <div class="login-header">
-
+          <span class="login-logo">🔒</span>
-<body>
+          <h1>PassKeeper</h1>
-  <div id="app">
-
-    <!-- ── Login view ──────────────────────────────────────────────────── -->
-    <div id="view-login" class="view hidden">
-      <div class="login-header">
-        <span class="login-logo">🔒</span>
-        <h1>PassKeeper</h1>
-      </div>
-      <div class="login-body">
-        <p id="login-error" class="pk-error hidden"></p>
-        <div class="form-group">
-          <label for="login-email">Email</label>
-          <input type="email" id="login-email" placeholder="you@example.com" autocomplete="email">
         </div>
-        <div class="form-group">
+        <div class="login-body">
-          <label for="login-password">Master Password</label>
+          <p id="login-error" class="pk-error hidden"></p>
-          <input type="password" id="login-password" placeholder="Master password" autocomplete="current-password">
+          <div class="form-group">
+            <label for="login-email">Email</label>
+            <input
+              type="email"
+              id="login-email"
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="form-group">
+            <label for="login-password">Master Password</label>
+            <input
+              type="password"
+              id="login-password"
+              placeholder="Master password"
+              autocomplete="current-password"
+            />
+          </div>
+          <button id="btn-login" class="btn-primary">Unlock Vault</button>
         </div>
-        <button id="btn-login" class="btn-primary">Unlock Vault</button>
       </div>
-    </div>
 
-    <!-- ── MFA view ────────────────────────────────────────────────────── -->
+      <!-- ── MFA view ────────────────────────────────────────────────────── -->
-    <div id="view-mfa" class="view hidden">
+      <div id="view-mfa" class="view hidden">
-      <div class="login-header">
+        <div class="login-header">
-        <span class="login-logo">🔐</span>
+          <span class="login-logo">🔐</span>
-        <h1>Two-Factor Auth</h1>
+          <h1>Two-Factor Auth</h1>
-      </div>
-      <div class="login-body">
-        <p class="pk-hint">Enter your 6-digit authenticator code.</p>
-        <p id="mfa-error" class="pk-error hidden"></p>
-        <div class="form-group">
-          <label for="mfa-code">Verification Code</label>
-          <input type="text" id="mfa-code" inputmode="numeric" maxlength="6" placeholder="000000"
-            autocomplete="one-time-code">
         </div>
-        <button id="btn-mfa-verify" class="btn-primary">Verify</button>
+        <div class="login-body">
-        <button id="btn-mfa-back" class="btn-ghost">← Back</button>
+          <p id="mfa-hint" class="pk-hint">
-      </div>
+            Enter your 6-digit authenticator code.
-    </div>
+          </p>
+          <p id="mfa-error" class="pk-error hidden"></p>
 
-    <!-- ── Unlock-only view (tokens from web app, need vault key) ─────── -->
+          <!-- TOTP input (default) -->
-    <div id="view-unlock" class="view hidden">
+          <div id="mfa-totp-section" class="form-group">
-      <div class="login-header">
+            <label for="mfa-code">Verification Code</label>
-        <span class="login-logo">🔓</span>
+            <input
-        <h1>PassKeeper</h1>
+              type="text"
-        <p style="font-size:12px;opacity:0.85;margin-top:4px;">Signed in via web app</p>
+              id="mfa-code"
-      </div>
+              inputmode="numeric"
-      <div class="login-body">
+              maxlength="6"
-        <p class="pk-hint">Enter your master password to unlock the vault.</p>
+              placeholder="000000"
-        <p id="unlock-error" class="pk-error hidden"></p>
+              autocomplete="one-time-code"
-        <div class="form-group">
+            />
-          <label for="unlock-password">Master Password</label>
+          </div>
-          <input type="password" id="unlock-password" placeholder="Master password" autocomplete="current-password">
+
+          <!-- Backup code input (hidden until toggled) -->
+          <div id="mfa-backup-section" class="form-group hidden">
+            <label for="mfa-backup-code">Backup Code</label>
+            <input
+              type="text"
+              id="mfa-backup-code"
+              placeholder="e.g. ab3rqxyz9p"
+              autocomplete="off"
+            />
+          </div>
+
+          <button id="btn-mfa-verify" class="btn-primary">Verify</button>
+          <button
+            id="btn-mfa-use-backup"
+            class="btn-ghost"
+            style="font-size: 11px; margin-top: 2px"
+          >
+            Use a backup code
+          </button>
+          <button
+            id="btn-mfa-use-totp"
+            class="btn-ghost hidden"
+            style="font-size: 11px; margin-top: 2px"
+          >
+            Use authenticator code
+          </button>
+          <button id="btn-mfa-back" class="btn-ghost">← Back</button>
         </div>
-        <button id="btn-unlock" class="btn-primary">Unlock</button>
-        <button id="btn-unlock-signout" class="btn-ghost">Sign out</button>
       </div>
-    </div>
 
-    <!-- ── Vault view ──────────────────────────────────────────────────── -->
+      <!-- ── Unlock-only view (tokens from web app, need vault key) ─────── -->
-    <div id="view-vault" class="view hidden">
+      <div id="view-unlock" class="view hidden">
-
+        <div class="login-header">
-      <!-- Top bar -->
+          <span class="login-logo">🔓</span>
-      <div class="vault-topbar">
+          <h1>PassKeeper</h1>
-        <div class="search-wrap">
+          <p style="font-size: 12px; opacity: 0.85; margin-top: 4px">
-          <svg class="search-icon" viewBox="0 0 20 20" fill="none" width="15" height="15">
+            Signed in via web app
-            <circle cx="8.5" cy="8.5" r="5.5" stroke="#999" stroke-width="1.6" />
+          </p>
-            <path d="M13 13l3.5 3.5" stroke="#999" stroke-width="1.6" stroke-linecap="round" />
+        </div>
-          </svg>
+        <div class="login-body">
-          <input type="text" id="vault-search" placeholder="Search your vault" autocomplete="off">
+          <p class="pk-hint">Enter your master password to unlock the vault.</p>
+          <p id="unlock-error" class="pk-error hidden"></p>
+          <div class="form-group">
+            <label for="unlock-password">Master Password</label>
+            <input
+              type="password"
+              id="unlock-password"
+              placeholder="Master password"
+              autocomplete="current-password"
+            />
+          </div>
+          <button id="btn-unlock" class="btn-primary">Unlock</button>
+          <button id="btn-unlock-signout" class="btn-ghost">Sign out</button>
         </div>
-        <a id="btn-open-vault" class="btn-vault-link" title="Open vault" target="_blank">
-          Vault
-          <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
-            <path d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3" stroke="currentColor" stroke-width="1.5"
-              stroke-linecap="round" />
-            <path d="M9 2h5v5M14 2L8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-              stroke-linejoin="round" />
-          </svg>
-        </a>
-        <button id="btn-add-item" class="btn-add" title="Add item">+</button>
       </div>
 
-      <!-- Tabs -->
+      <!-- ── Vault view ──────────────────────────────────────────────────── -->
-      <div class="vault-tabs" id="vault-tabs">
+      <div id="view-vault" class="view hidden">
-        <button class="tab-btn active" data-tab="relevant">All relevant</button>
+        <!-- Top bar -->
-        <button class="tab-btn" data-tab="all">All items</button>
+        <div class="vault-topbar">
-        <button class="tab-btn" data-tab="favorites">Favorites</button>
+          <div class="search-wrap">
-        <button class="tab-btn" data-tab="recents">Recents</button>
+            <svg
+              class="search-icon"
+              viewBox="0 0 20 20"
+              fill="none"
+              width="15"
+              height="15"
+            >
+              <circle
+                cx="8.5"
+                cy="8.5"
+                r="5.5"
+                stroke="#999"
+                stroke-width="1.6"
+              />
+              <path
+                d="M13 13l3.5 3.5"
+                stroke="#999"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+            <input
+              type="text"
+              id="vault-search"
+              placeholder="Search your vault"
+              autocomplete="off"
+            />
+          </div>
+          <a
+            id="btn-open-vault"
+            class="btn-vault-link"
+            title="Open vault"
+            target="_blank"
+          >
+            Vault
+            <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
+              <path
+                d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+              <path
+                d="M9 2h5v5M14 2L8 8"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <button id="btn-add-item" class="btn-add" title="Add item">+</button>
+        </div>
+
+        <!-- Tabs -->
+        <div class="vault-tabs" id="vault-tabs">
+          <button class="tab-btn active" data-tab="relevant">
+            All relevant
+          </button>
+          <button class="tab-btn" data-tab="all">All items</button>
+          <button class="tab-btn" data-tab="favorites">Favorites</button>
+          <button class="tab-btn" data-tab="recents">Recents</button>
+        </div>
+
+        <!-- List -->
+        <div id="vault-spinner" class="pk-loading hidden">Loading vault…</div>
+        <div id="vault-list" class="vault-list"></div>
+        <div id="vault-empty" class="pk-empty hidden">No items found.</div>
       </div>
+      <!-- /view-vault -->
 
-      <!-- List -->
+      <!-- ── Generator view ─────────────────────────────────────────────── -->
-      <div id="vault-spinner" class="pk-loading hidden">Loading vault…</div>
+      <div id="view-generator" class="view hidden">
-      <div id="vault-list" class="vault-list"></div>
+        <div class="gen-suggestion">
-      <div id="vault-empty" class="pk-empty hidden">No items found.</div>
+          <div class="gen-suggestion-label">Password suggestion</div>
+          <div class="gen-suggestion-row">
+            <span id="gen-output" class="gen-output"
+              >Click refresh to generate</span
+            >
+            <div class="gen-suggestion-actions">
+              <button
+                id="btn-gen-copy"
+                class="gen-icon-btn"
+                title="Copy password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+                  <rect
+                    x="9"
+                    y="9"
+                    width="11"
+                    height="11"
+                    rx="2"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                  <path
+                    d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                </svg>
+              </button>
+              <button
+                id="btn-gen-refresh"
+                class="gen-icon-btn"
+                title="Generate new password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+                  <path
+                    d="M4 4v5h5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 20v-5h-5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 9a8 8 0 00-14.93-2.07M4 15a8 8 0 0014.93 2.07"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
 
-    </div><!-- /view-vault -->
+        <div class="gen-strength-row">
+          <span id="gen-strength-label" class="gen-strength-label"></span>
+        </div>
 
-    <!-- ── Generator view ─────────────────────────────────────────────── -->
+        <div class="gen-body">
-    <div id="view-generator" class="view hidden">
+          <div class="gen-row">
-      <div class="gen-suggestion">
+            <label for="gen-length" class="gen-label">Password length:</label>
-        <div class="gen-suggestion-label">Password suggestion</div>
+            <input
-        <div class="gen-suggestion-row">
+              type="number"
-          <span id="gen-output" class="gen-output">Click refresh to generate</span>
+              id="gen-length-num"
-          <div class="gen-suggestion-actions">
+              class="gen-length-num"
-            <button id="btn-gen-copy" class="gen-icon-btn" title="Copy password">
+              value="16"
-              <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+              min="8"
-                <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.8" />
+              max="64"
-                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.8" />
+            />
-              </svg>
+            <span class="gen-label">characters</span>
-            </button>
+          </div>
-            <button id="btn-gen-refresh" class="gen-icon-btn" title="Generate new password">
+          <input
-              <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+            type="range"
-                <path d="M4 4v5h5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+            id="gen-length"
-                  stroke-linejoin="round" />
+            class="gen-slider"
-                <path d="M20 20v-5h-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+            min="8"
-                  stroke-linejoin="round" />
+            max="64"
-                <path d="M20 9a8 8 0 00-14.93-2.07M4 15a8 8 0 0014.93 2.07" stroke="currentColor" stroke-width="1.8"
+            value="16"
-                  stroke-linecap="round" />
+          />
-              </svg>
+
-            </button>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-lower" checked />
+            <span>Lowercase (abc)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-upper" checked />
+            <span>Uppercase (ABC)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-numbers" checked />
+            <span>Numbers (123)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-symbols" checked />
+            <span>Randomized symbols (!#$)</span>
+          </label>
+        </div>
+      </div>
+      <!-- /view-generator -->
+
+      <!-- ── Add Item view ─────────────────────────────────────────────── -->
+      <div id="view-add" class="view hidden">
+        <div class="add-header">
+          <button id="btn-add-back" class="add-back-btn" title="Back to vault">
+            <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+              <path
+                d="M15 18l-6-6 6-6"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <span class="add-header-title">Add Password</span>
+        </div>
+        <div class="add-body">
+          <p id="add-error" class="pk-error hidden"></p>
+          <div class="form-group">
+            <label for="add-name"
+              >Site name <span class="add-required">*</span></label
+            >
+            <input
+              type="text"
+              id="add-name"
+              placeholder="e.g. GitHub"
+              autocomplete="off"
+            />
+          </div>
+          <div class="form-group">
+            <label for="add-url">URL</label>
+            <input
+              type="url"
+              id="add-url"
+              placeholder="https://example.com"
+              autocomplete="off"
+            />
+          </div>
+          <div class="form-group">
+            <label for="add-username">Username / Email</label>
+            <input
+              type="text"
+              id="add-username"
+              placeholder="username or email"
+              autocomplete="off"
+            />
+          </div>
+          <div class="form-group">
+            <label for="add-password"
+              >Password <span class="add-required">*</span></label
+            >
+            <div class="add-pw-row">
+              <input
+                type="password"
+                id="add-password"
+                placeholder="Password"
+                autocomplete="new-password"
+                class="add-pw-input"
+              />
+              <button
+                id="btn-add-toggle-pw"
+                class="add-icon-btn"
+                type="button"
+                title="Show/hide password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
+                  <path
+                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="3"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                </svg>
+              </button>
+              <button
+                id="btn-add-generate"
+                class="add-icon-btn add-gen-btn"
+                type="button"
+                title="Generate password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
+                  <path
+                    d="M4 4v5h5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 20v-5h-5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 9a8 8 0 00-14.93-2.07M4 15a8 8 0 0014.93 2.07"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="add-folder">Folder</label>
+            <select id="add-folder" class="save-folder-select">
+              <option value="">— No folder —</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="add-notes">Notes</label>
+            <textarea
+              id="add-notes"
+              class="add-notes"
+              placeholder="Optional notes"
+              rows="2"
+              autocomplete="off"
+            ></textarea>
+          </div>
+          <button id="btn-add-save" class="btn-primary">Save to Vault</button>
+        </div>
+      </div>
+      <!-- /view-add -->
+
+      <div id="view-account" class="view hidden">
+        <div class="acct-header">
+          <span class="acct-logo">⚙️</span>
+          <h2>Account</h2>
+        </div>
+        <div class="acct-body">
+          <div class="acct-section">
+            <div class="acct-section-title">🔒 Auto-lock</div>
+            <p class="acct-hint">
+              Lock the vault after this period of system inactivity.
+            </p>
+            <select id="acct-idle-timeout" class="acct-select">
+              <option value="60">1 minute</option>
+              <option value="300">5 minutes</option>
+              <option value="600" selected>10 minutes (default)</option>
+              <option value="1800">30 minutes</option>
+              <option value="0">Never</option>
+            </select>
+            <p id="acct-idle-saved" class="acct-saved hidden">✓ Saved</p>
+          </div>
+
+          <div class="acct-section">
+            <div class="acct-section-title">🌐 Open web vault</div>
+            <p class="acct-hint">
+              Access all vault features, sharing, and security dashboard.
+            </p>
+            <a
+              id="acct-open-vault"
+              class="btn-primary acct-link-btn"
+              target="_blank"
+              >Open PassKeeper Vault</a
+            >
+          </div>
+
+          <div class="acct-section acct-section-danger">
+            <div class="acct-section-title">🚪 Sign out</div>
+            <p class="acct-hint">
+              Clear the local session. You will need your master password to
+              unlock again.
+            </p>
+            <button id="acct-signout" class="btn-ghost">Sign out</button>
+          </div>
+        </div>
+      </div>
+      <!-- /view-account -->
+
+      <!-- ── Save-prompt modal overlay (shared across vault/generator views) -->
+      <div
+        id="save-prompt-overlay"
+        class="save-overlay hidden"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div class="save-modal">
+          <div class="save-modal-header">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M8 10V7a4 4 0 018 0v3"
+                stroke="#1a1a2e"
+                stroke-width="1.8"
+                stroke-linecap="round"
+              />
+              <rect
+                x="3"
+                y="10"
+                width="18"
+                height="12"
+                rx="2"
+                stroke="#1a1a2e"
+                stroke-width="1.8"
+              />
+            </svg>
+            <span id="save-prompt-title">Save to PassKeeper?</span>
+          </div>
+          <p id="save-prompt-subtitle" class="save-modal-sub"></p>
+          <div class="form-group">
+            <label for="save-name">Site name</label>
+            <input type="text" id="save-name" placeholder="e.g. GitHub" />
+          </div>
+          <div class="form-group">
+            <label for="save-username">Username / Email</label>
+            <input
+              type="text"
+              id="save-username"
+              placeholder="username or email"
+            />
+          </div>
+          <div class="form-group">
+            <label for="save-folder">Folder</label>
+            <select id="save-folder" class="save-folder-select">
+              <option value="">— No folder —</option>
+            </select>
+          </div>
+          <div class="save-modal-actions">
+            <button id="btn-save-yes" class="btn-primary btn-sm">Save</button>
+            <button id="btn-save-no" class="btn-ghost btn-sm">Not now</button>
           </div>
         </div>
       </div>
 
-      <div class="gen-strength-row">
+      <!-- ── Shared bottom nav (visible whenever vault OR generator is shown) -->
-        <span id="gen-strength-label" class="gen-strength-label"></span>
+      <nav class="bottom-nav" id="main-bottom-nav">
-      </div>
+        <button class="nav-btn active" id="nav-vault">
-
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-      <div class="gen-body">
+            <rect
-        <div class="gen-row">
+              x="3"
-          <label for="gen-length" class="gen-label">Password length:</label>
+              y="6"
-          <input type="number" id="gen-length-num" class="gen-length-num" value="16" min="8" max="64">
+              width="18"
-          <span class="gen-label">characters</span>
+              height="14"
-        </div>
+              rx="2"
-        <input type="range" id="gen-length" class="gen-slider" min="8" max="64" value="16">
+              stroke="currentColor"
-
+              stroke-width="1.7"
-        <label class="gen-check">
+            />
-          <input type="checkbox" id="gen-lower" checked>
+            <circle
-          <span>Lowercase (abc)</span>
+              cx="12"
-        </label>
+              cy="13"
-        <label class="gen-check">
+              r="2.5"
-          <input type="checkbox" id="gen-upper" checked>
+              stroke="currentColor"
-          <span>Uppercase (ABC)</span>
+              stroke-width="1.7"
-        </label>
+            />
-        <label class="gen-check">
+            <path
-          <input type="checkbox" id="gen-numbers" checked>
+              d="M8 6V5a4 4 0 018 0v1"
-          <span>Numbers (123)</span>
+              stroke="currentColor"
-        </label>
+              stroke-width="1.7"
-        <label class="gen-check">
+            />
-          <input type="checkbox" id="gen-symbols" checked>
-          <span>Randomized symbols (!#$)</span>
-        </label>
-      </div>
-    </div><!-- /view-generator -->
-
-    <!-- ── Add Item view ─────────────────────────────────────────────── -->
-    <div id="view-add" class="view hidden">
-      <div class="add-header">
-        <button id="btn-add-back" class="add-back-btn" title="Back to vault">
-          <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
-            <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round" />
           </svg>
+          <span>Vault</span>
         </button>
-        <span class="add-header-title">Add Password</span>
+        <button class="nav-btn" id="nav-generator" title="Password Generator">
-      </div>
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-      <div class="add-body">
+            <path
-        <p id="add-error" class="pk-error hidden"></p>
+              d="M12 2a5 5 0 015 5v1h1a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2v-9a2 2 0 012-2h1V7a5 5 0 015-5z"
-        <div class="form-group">
+              stroke="currentColor"
-          <label for="add-name">Site name <span class="add-required">*</span></label>
+              stroke-width="1.7"
-          <input type="text" id="add-name" placeholder="e.g. GitHub" autocomplete="off">
+              stroke-linejoin="round"
-        </div>
+            />
-        <div class="form-group">
+            <circle cx="12" cy="14" r="1.8" fill="currentColor" />
-          <label for="add-url">URL</label>
+            <path
-          <input type="url" id="add-url" placeholder="https://example.com" autocomplete="off">
+              d="M12 14v2.5"
-        </div>
+              stroke="currentColor"
-        <div class="form-group">
+              stroke-width="1.7"
-          <label for="add-username">Username / Email</label>
+              stroke-linecap="round"
-          <input type="text" id="add-username" placeholder="username or email" autocomplete="off">
+            />
-        </div>
-        <div class="form-group">
-          <label for="add-password">Password <span class="add-required">*</span></label>
-          <div class="add-pw-row">
-            <input type="password" id="add-password" placeholder="Password" autocomplete="new-password"
-              class="add-pw-input">
-            <button id="btn-add-toggle-pw" class="add-icon-btn" type="button" title="Show/hide password">
-              <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="1.8" />
-                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.8" />
-              </svg>
-            </button>
-            <button id="btn-add-generate" class="add-icon-btn add-gen-btn" type="button" title="Generate password">
-              <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
-                <path d="M4 4v5h5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-                  stroke-linejoin="round" />
-                <path d="M20 20v-5h-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
-                  stroke-linejoin="round" />
-                <path d="M20 9a8 8 0 00-14.93-2.07M4 15a8 8 0 0014.93 2.07" stroke="currentColor" stroke-width="1.8"
-                  stroke-linecap="round" />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="add-folder">Folder</label>
-          <select id="add-folder" class="save-folder-select">
-            <option value="">— No folder —</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="add-notes">Notes</label>
-          <textarea id="add-notes" class="add-notes" placeholder="Optional notes" rows="2"
-            autocomplete="off"></textarea>
-        </div>
-        <button id="btn-add-save" class="btn-primary">Save to Vault</button>
-      </div>
-    </div><!-- /view-add -->
-
-
-    <div id="view-account" class="view hidden">
-      <div class="acct-header">
-        <span class="acct-logo">⚙️</span>
-        <h2>Account</h2>
-      </div>
-      <div class="acct-body">
-
-        <div class="acct-section">
-          <div class="acct-section-title">🔒 Auto-lock</div>
-          <p class="acct-hint">Lock the vault after this period of system inactivity.</p>
-          <select id="acct-idle-timeout" class="acct-select">
-            <option value="60">1 minute</option>
-            <option value="300">5 minutes</option>
-            <option value="600" selected>10 minutes (default)</option>
-            <option value="1800">30 minutes</option>
-            <option value="0">Never</option>
-          </select>
-          <p id="acct-idle-saved" class="acct-saved hidden">✓ Saved</p>
-        </div>
-
-        <div class="acct-section">
-          <div class="acct-section-title">🌐 Open web vault</div>
-          <p class="acct-hint">Access all vault features, sharing, and security dashboard.</p>
-          <a id="acct-open-vault" class="btn-primary acct-link-btn" target="_blank">Open PassKeeper Vault</a>
-        </div>
-
-        <div class="acct-section acct-section-danger">
-          <div class="acct-section-title">🚪 Sign out</div>
-          <p class="acct-hint">Clear the local session. You will need your master password to unlock again.</p>
-          <button id="acct-signout" class="btn-ghost">Sign out</button>
-        </div>
-
-      </div>
-    </div><!-- /view-account -->
-
-    <!-- ── Save-prompt modal overlay (shared across vault/generator views) -->
-    <div id="save-prompt-overlay" class="save-overlay hidden" role="dialog" aria-modal="true">
-      <div class="save-modal">
-        <div class="save-modal-header">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-            <path d="M8 10V7a4 4 0 018 0v3" stroke="#1a1a2e" stroke-width="1.8" stroke-linecap="round" />
-            <rect x="3" y="10" width="18" height="12" rx="2" stroke="#1a1a2e" stroke-width="1.8" />
           </svg>
-          <span id="save-prompt-title">Save to PassKeeper?</span>
+          <span>Generator</span>
-        </div>
+        </button>
-        <p id="save-prompt-subtitle" class="save-modal-sub"></p>
+        <button class="nav-btn" id="nav-alerts" title="Security Alerts">
-        <div class="form-group">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <label for="save-name">Site name</label>
+            <path
-          <input type="text" id="save-name" placeholder="e.g. GitHub">
+              d="M12 3l8.5 15H3.5L12 3z"
-        </div>
+              stroke="currentColor"
-        <div class="form-group">
+              stroke-width="1.7"
-          <label for="save-username">Username / Email</label>
+              stroke-linejoin="round"
-          <input type="text" id="save-username" placeholder="username or email">
+            />
-        </div>
+            <path
-        <div class="form-group">
+              d="M12 10v4"
-          <label for="save-folder">Folder</label>
+              stroke="currentColor"
-          <select id="save-folder" class="save-folder-select">
+              stroke-width="1.7"
-            <option value="">— No folder —</option>
+              stroke-linecap="round"
-          </select>
+            />
-        </div>
+            <circle cx="12" cy="17" r="0.8" fill="currentColor" />
-        <div class="save-modal-actions">
+          </svg>
-          <button id="btn-save-yes" class="btn-primary btn-sm">Save</button>
+          <span>Alerts</span>
-          <button id="btn-save-no" class="btn-ghost btn-sm">Not now</button>
+        </button>
-        </div>
+        <button class="nav-btn" id="nav-account" title="Account">
-      </div>
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+            <circle
+              cx="12"
+              cy="8"
+              r="4"
+              stroke="currentColor"
+              stroke-width="1.7"
+            />
+            <path
+              d="M4 20c0-4 3.6-7 8-7s8 3 8 7"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span>Account</span>
+        </button>
+      </nav>
     </div>
-
+    <!-- /app -->
-    <!-- ── Shared bottom nav (visible whenever vault OR generator is shown) -->
+    <script src="../shared/crypto.js"></script>
-    <nav class="bottom-nav" id="main-bottom-nav">
+    <script src="popup.js"></script>
-      <button class="nav-btn active" id="nav-vault">
+  </body>
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <rect x="3" y="6" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7" />
-          <circle cx="12" cy="13" r="2.5" stroke="currentColor" stroke-width="1.7" />
-          <path d="M8 6V5a4 4 0 018 0v1" stroke="currentColor" stroke-width="1.7" />
-        </svg>
-        <span>Vault</span>
-      </button>
-      <button class="nav-btn" id="nav-generator" title="Password Generator">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <path d="M12 2a5 5 0 015 5v1h1a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2v-9a2 2 0 012-2h1V7a5 5 0 015-5z"
-            stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
-          <circle cx="12" cy="14" r="1.8" fill="currentColor" />
-          <path d="M12 14v2.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
-        </svg>
-        <span>Generator</span>
-      </button>
-      <button class="nav-btn" id="nav-alerts" title="Security Alerts">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <path d="M12 3l8.5 15H3.5L12 3z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
-          <path d="M12 10v4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
-          <circle cx="12" cy="17" r="0.8" fill="currentColor" />
-        </svg>
-        <span>Alerts</span>
-      </button>
-      <button class="nav-btn" id="nav-account" title="Account">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7" />
-          <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
-        </svg>
-        <span>Account</span>
-      </button>
-    </nav>
-
-  </div><!-- /app -->
-  <script src="../shared/crypto.js"></script>
-  <script src="popup.js"></script>
-</body>
-
 </html>

extension/popup/popup.js

@@ -237,6 +237,14 @@ async function handleLogin() {
         _pending_enc_key_salt: data.enc_key_salt,
       });
       handleMfaStage(password);
+      // Reset MFA view to TOTP mode each time it's shown
+      $("mfa-totp-section").classList.remove("hidden");
+      $("mfa-backup-section").classList.add("hidden");
+      $("btn-mfa-use-backup").classList.remove("hidden");
+      $("btn-mfa-use-totp").classList.add("hidden");
+      $("mfa-hint").textContent = "Enter your 6-digit authenticator code.";
+      $("mfa-code").value = "";
+      $("mfa-backup-code").value = "";
       showView("mfa");
       $("mfa-code").focus();
       return;
@@ -252,18 +260,35 @@ async function handleLogin() {
 
 function handleMfaStage(password) {
   $("btn-mfa-verify").onclick = async () => {
-    const code = $("mfa-code").value.trim();
     hideError("mfa-error");
-    if (code.length !== 6) {
+    const usingBackup = !$("mfa-backup-section").classList.contains("hidden");
-      showError("mfa-error", "Enter the 6-digit code.");
+    const body = { mfa_token: _mfaToken };
-      return;
+
+    if (usingBackup) {
+      const code = $("mfa-backup-code")
+        .value.trim()
+        .toLowerCase()
+        .replace(/[\s-]/g, "");
+      if (!code) {
+        showError("mfa-error", "Enter your backup code.");
+        return;
+      }
+      body.backup_code = code;
+    } else {
+      const code = $("mfa-code").value.trim();
+      if (code.length !== 6) {
+        showError("mfa-error", "Enter the 6-digit code.");
+        return;
+      }
+      body.totp_code = code;
     }
+
     $("btn-mfa-verify").disabled = true;
     try {
       const res = await fetch(`${API_BASE}/api/auth/mfa/verify`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ mfa_token: _mfaToken, totp_code: code }),
+        body: JSON.stringify(body),
       });
       const data = await res.json();
       if (!res.ok) {
@@ -284,6 +309,24 @@ function handleMfaStage(password) {
       $("btn-mfa-verify").disabled = false;
     }
   };
+
+  $("btn-mfa-use-backup").onclick = () => {
+    $("mfa-totp-section").classList.add("hidden");
+    $("mfa-backup-section").classList.remove("hidden");
+    $("btn-mfa-use-backup").classList.add("hidden");
+    $("btn-mfa-use-totp").classList.remove("hidden");
+    $("mfa-hint").textContent = "Enter one of your saved backup codes.";
+    $("mfa-backup-code").focus();
+  };
+
+  $("btn-mfa-use-totp").onclick = () => {
+    $("mfa-backup-section").classList.add("hidden");
+    $("mfa-totp-section").classList.remove("hidden");
+    $("btn-mfa-use-totp").classList.add("hidden");
+    $("btn-mfa-use-backup").classList.remove("hidden");
+    $("mfa-hint").textContent = "Enter your 6-digit authenticator code.";
+    $("mfa-code").focus();
+  };
 }
 
 async function completeLogin(data, masterPassword) {